├── README.md
├── THEMES.md
├── images
    ├── add2slack.png
    ├── bluebar.png
    ├── bluebar.svg
    ├── db-config1.png
    ├── db-config2.png
    ├── definecmd.png
    ├── draganddrop.png
    ├── fetch.png
    ├── gaugechart.png
    ├── guide.png
    ├── springbar.png
    ├── springbox.svg
    └── svglink.png
├── themes
    └── example-style.css
└── trainers
    ├── example-multiple.yaml
    └── example.yaml


/README.md:
--------------------------------------------------------------------------------
  1 | ![Fetch](./images/fetch.png)
  2 | 
  3 | # Overview: Chatlytics Data Visualization For Slack
  4 | Chatlytics is a data query and visualization platform. Part of the platform is a bot called "Fetch". Think of Fetch not just as a chatbot, but as an analytics assistant too.
  5 | 
  6 | Fetch has one key job to perform: help teams use their data to create beautiful visualizations without ever needing to leave Slack (or Hipchat). Fetch takes care of the query, visualization and reporting grunt work so your team can focus on more important things. Fetch packages everything in flexible and customizable PNG & interactive SVGs.
  7 | 
  8 | - [Prerequisites](#prerequisites)
  9 | - [How To Interact With Fetch, Your Analytics Bot](#how-to-interact-with-fetch-your-analytics-bot)
 10 | 	- [Step 1: Add To Slack](#step-1-add-to-slack)
 11 | 	- [Step 2: Setup Your Database connection](#step-2-setup-your-database-connection)
 12 | 	- [Step 3: Ask Fetch To Run Queries For You](#step-3-ask-fetch-to-run-queries-for-you)
 13 | - [Teaching Fetch Custom Commands](#teaching-fetch-custom-commands)
 14 | 	- [Step 1: Defining Custom Commands Via YAML File](#step-1-defining-custom-commands-via-yaml-file)
 15 | 	- [Step 2: Train Fetch To Understand Your Command](#step-2-train-fetch-to-understand-your-command)
 16 | 		- [Drag-and-Drop](#drag-and-drop)
 17 | 		- [Attachments](#attachments)
 18 | 		- [Remote Import from URL](#remote-import-from-url)
 19 | 	- [Step 3: Tell Fetch To Run Your New Commands](#step-3-tell-fetch-to-run-your-new-commands)
 20 | - [Creating Your Own Themes](#themes)
 21 | - [Notes](#notes)
 22 | 	- [MySQL](#mysql)
 23 | - [Issues](#issues)
 24 | - [Contributing](#contributing)
 25 | 
 26 | ## Prerequisites
 27 | You will need:
 28 | 
 29 | * Database connection parameters. Currently only `PostgreSQL`, `MySQL`, `Amazon Redshift`, `Amazon Aurora (Postgres/MYSQL)` and `AmazON RDS (Postgres/MYSQL)` are supported)
 30 | * Slack account for the bot to use. If you do not have one you need to get yourself a Slack account. Go to the Slack website: https://slack.com/
 31 | 
 32 | 
 33 | 
 34 | ## How To Interact With Fetch, Your Analytics Bot
 35 | 
 36 | ### Step 1: Add To Slack
 37 | 
 38 | The first step required to set the bot up involves clicking the "Add to Slack" button at [https://www.chatlytics.co](https://www.chatlytics.co).
 39 | 
 40 | ![Add To Slack](./images/add2slack.png)
 41 | 
 42 | Chatlytics is only available for use with Slack at the moment. Other chat clients (Hipchat, Facebook, Skype, etc.) will be added soon!
 43 | 
 44 | ### Step 2: Setup Your Database Connection
 45 | You'll want to start by setting up your database connection. Run the command `!dbconfig` and follow the prompts to get started.
 46 | 
 47 | <img src="./images/db-config1.png" height=150px>
 48 | 
 49 | In addition to your database type, Fetch will need your host address (which can be an IP address or domain), your username & password, port and database name. After you provide this info, you'll be able to review the configuration and start giving Fetch commands!
 50 | 
 51 | <img src="./images/db-config2.png" height=290px>
 52 | 
 53 | 
 54 | 
 55 | ### Step 3: Ask Fetch To Run Queries For You
 56 | 
 57 | Once you have connected Chatlytics to your database, you can interact with Fetch by sending commands to the linked Slack account.
 58 | 
 59 | You'll find a guide to these commands at [https://www.chatlytics.co/guide.html](https://www.chatlytics.co/guide.html). Just select a command in the dropdown to see what Fetch will do with it and get additional tips.
 60 | 
 61 | ![Guide](./images/guide.png)
 62 | 
 63 | Fetch has a built-in set of commands it understands. To see a list of available commands Fetch can recognize, type `!help`.
 64 | 
 65 | The following is a list of available predefined commands:
 66 | * `!list_tables`: Returns a list of all tables in the database.
 67 | * `!table_count <table_name>`: Returns the number of rows in the table.
 68 |   * Example: `!table_count MyTable`
 69 | * `!count_compare <table_name> <date_column> <style>`: Generate gauge chart by comparing record count to the previous day.
 70 |   * Example: `!count_compare MyTable timestamp blue`
 71 | 
 72 | 	<img src="./images/gaugechart.png" height=270px>
 73 | 
 74 | * `!date_compare <table_name> <date_column> <date1> <date2> <style>`: Generate gauge chart by comparing record count of two different days.
 75 |   * Example: `!date_compare MyTable timestamp 01/01/16 07/07/16 sunset`
 76 | * `!chart <table_name> <date_column> <number_of_days> <style>`: Generate a bar chart of record counts from the specified table for the given number of days.
 77 |   * Example: `!chart MyTable timestamp 10 spring`
 78 | 
 79 |     <img src="./images/springbar.png" height=270px>
 80 | 
 81 | ## Interactive SVGs
 82 | 
 83 | Fetch will return charts in Slack, as well as a link to view an interactive SVG of the chart.
 84 | 
 85 | <img src="./images/svglink.png" height=370px>
 86 | 
 87 | Here are some sample charts Fetch generated that you can interact with:
 88 | * [Bar chart in Blue](./images/bluebar.svg)
 89 | * [Box & whiskers graph in Spring ](./images/springbox.svg)
 90 | 
 91 | 
 92 | # Teaching Fetch Custom Commands
 93 | In addition to the predefined commands Fetch understands, you can teach it new ones. This is done by feeding Fetch YAML files.  
 94 | 
 95 | How do you train Fetch to understand new commands? There are three easy steps:
 96 | 
 97 | * Define Your Command In YAML
 98 | * You Train Fetch To Understand The Commands
 99 | * You Ask Fetch To Run Your Commands
100 | 
101 | ### Step 1: Defining Custom Commands Via YAML File
102 | To teach Fetch a new command, you need to first create a YAML definition. This is what a sample YAML definition looks like:
103 | 
104 | ```
105 | 
106 | queries:
107 |     -   name: test_query
108 |         query: select testColumn, count(*) from testTable group by testColumn
109 |         chart_type: bar_chart
110 |         chart_description: test
111 |         style: blue
112 | 
113 | ```
114 | 
115 | Each element serves a purpose in helping Fetch understand what you want to have happen:
116 | 
117 | * `name`: The name of the query. This ultimately becomes the command you use to call the query once it's defined.
118 | * `query`: The SQL query to run.
119 | * `chart_type`: The type of chart which you wish to generate. Currently, valid inputs are "bar_chart", "line_chart" and "table".
120 | * `chart_description`: This description will be included when your query is run.
121 | * `style`: the name of the style which you want the output to use
122 | 
123 | When writing custom queries for `bar_chart` or `line_chart` graph types, it is expected that the first column will be the x-axis and the second column will be the y-axis.
124 | 
125 | ### Step 2: Train Fetch To Understand Your Command
126 | With your YAML file completed, it is time to teach Fetch the new command. This will require that you import or "feed" the YAML file to Fetch. There are three methods for feeding Fetch new commands:
127 | 
128 | * Drag-and-Drop
129 | * Attachments
130 | * Remote Import from URL
131 | 
132 | #### Drag-and-Drop
133 | 
134 | The simplest way to import a command is by simply dragging a YAML file to the Slack window and clicking the "Upload" button. The bot will do the rest!
135 | 
136 | <img src="./images/draganddrop.png" height=270px>
137 | 
138 | On success, you'll see this:
139 | 
140 | <img src="./images/definecmd.png" height=130px>
141 | 
142 | #### Attachments
143 | 
144 | Alternatively, you can upload a YAML file by clicking the '+' sign at the bottom of the chat window, navigating to the file on your computer and clicking the "Upload" button.
145 | 
146 | #### Remote Import from URL
147 | 
148 | To import a remote YAML file from someplace like Github, you must specify a URL to that YAML file in the following format:
149 | 
150 | `!define <link_to_yaml>`
151 | 
152 | For example, if the link is from GitHub you'll need to click the **Raw** button at the top of the file and use the resulting URL.
153 | 
154 | ```bash
155 | !define https://raw.githubusercontent.com/dtroberts/TestRepo/master/ymls/multidef.yml
156 | ```
157 | 
158 | 
159 | ### Step 3: Tell Fetch To Run Your New Commands
160 | 
161 | Once the query is defined and imported, it will be accessible via `!name`, where name is the value of the `name` field in the YAML file.
162 | 
163 | ### Examples
164 | Here is an example of a YAML file which would create a command `!my_first_command`:
165 | ```
166 | queries:
167 |     -   name: my_first_command
168 |         query: select timestamp::date, sum(subscribers) from MyTable where datediff(day, end_time::date, getdate()::date) < 30 group by timestamp::date
169 |         chart_type: bar_chart
170 |         chart_description: My first query definition
171 |         style: blue
172 | ```
173 | This would output a chart with the daily number of subscribers over the last 30 days.
174 | 
175 | It is also possible to define multiple commands in the same file. This YAML file would define the commands `!MainTableQuery` and `!OtherTableQuery`:
176 | ```
177 | queries:
178 |     -   name: MainTableQuery
179 |         query: select testColumn, count(*) from MainTable group by date
180 |         chart_type: bar_chart
181 |         chart_description: My first query definition
182 |         style: sunset
183 | 
184 |     -   name: OtherTableQuery
185 |         query: select testColumn, count(*) from OtherTable group by timestamp
186 |         chart_type: line_chart
187 |         chart_description: Line chart for OtherTable record counts
188 |         style: spring
189 | ```
190 | 
191 | **IMPORTANT**: Custom commands are removed upon shutting down or restarting servers. In a future release we will add persistence capabilities when training Fetch.
192 | 
193 | # Creating Your Own Themes
194 | 
195 | Did you know that Fetch allows you to customize the look and feel of your visualizations?  You can fully customize the colors and typography to fit your own preferences.  Themes define the style of the visualizations Fetch delivers to your team. Each Theme may be different, offering many choices to easily change the look and feel. Themes also separate the presentation styles from the underlying data. Using Themes allows you to quickly change the visual style and layout of a visualization with simple CSS edits.
196 | 
197 | You may wish to create Themes for your own use, for a client project or to be shared with the Chatlytics community!
198 | 
199 | Themes are simple to create and use. All you need is clean, valid CSS. Take a look at the theme
200 | [how-to](/THEMES.md) guide and templates.
201 | 
202 | # Notes
203 | 
204 | ### MySQL
205 | MySQL connections cannot be opened in read-only mode. As such, any query defined here can be run on the database. The best solution to ensure the security and integrity of your database is to create a new user for use with Chatlytics with read-only permissions and specify those credentials in `!dbconfig`.
206 | 
207 | For instructions on how to set up a read-only user, see the [guide](http://www.alphadevx.com/a/388-Adding-a-read-only-MySQL-user).
208 | 
209 | # Issues
210 | 
211 | If you have any problems with or questions about this image, please contact us through a GitHub issue.
212 | 
213 | # Contributing
214 | 
215 | You are invited to contribute new features, fixes, or updates, large or small; we are always thrilled to receive pull requests, and do our best to process them as fast as we can.
216 | 
217 | Before you start to code, we recommend discussing your plans through a GitHub issue, especially for more ambitious contributions. This gives other contributors a chance to point you in the right direction, give you feedback on your design, and help you find out if someone else is working on the same thing.
218 | 


--------------------------------------------------------------------------------
/THEMES.md:
--------------------------------------------------------------------------------
  1 | 
  2 | 
  3 | # Chatlytics Themes
  4 | Chatlytics data visualizations have customizable theme components: the color palette and typography. This guide will help you understand how to create and use your own custom themes!
  5 | 
  6 | - [Overview](#overview)
  7 | - [Pre-Installed Themes](#pre-installed-themes)
  8 | 	- [Big Blue](#big-blue)
  9 | 	- [Sunset](#sunset)
 10 | 	- [Spring](#spring)
 11 | - [Designing a Theme - Customization Best Practices](#designing-a-theme-customization-best-practices)
 12 | 	- [Understanding Color & Typography](#understanding-color-typography)
 13 | 		- [Color](#color)
 14 | 			- [Sunset](#sunset)
 15 | 			- [Spring](#spring)
 16 | 			- [Blue](#blue)
 17 | 		- [Color Blindness](#color-blindness)
 18 | 			- [Color selection tools:](#color-selection-tools)
 19 | 			- [Inspiration palettes:](#inspiration-palettes)
 20 | 			- [Color contrast checker](#color-contrast-checker)
 21 | 	- [Typography](#typography)
 22 | - [Building Your Theme](#building-your-theme)
 23 | 	- [Step 1: Naming & Setup](#step-1-naming-setup)
 24 | 	- [Step 2: Customization](#step-2-customization)
 25 | - [You've set up your theme! Now what?](#youve-set-up-your-theme-now-what)
 26 | 	- [Installation](#installation)
 27 | 	- [Usage](#usage)
 28 | 
 29 | 
 30 | 
 31 | ### Overview
 32 | Here's whats coming up in this guide:
 33 | 
 34 |   1. We'll go through the 3 pre-installed Chatlytics themes and the thought process behind creating them
 35 |   2. Best practices for your customization
 36 |   3. Guide for implementation of your custom styles
 37 |   4. How to tell Fetch to use your themes
 38 | 
 39 | 
 40 | ## Pre-Installed Themes
 41 | We include three amazing themes as a default, but you may want to create your own. We support that! The process is simple and if you follow best practices for the use of color and typography, you can create some highly customized and effective visualizations.
 42 | 
 43 | The three themes already included in Chatlytics are: Blue, Sunrise, and Spring. All of these themes were creating following Samantha Zhang's advice to use colors inspired by nature. Who is Samantha Zhang? Read her [article](https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.sawb2zvkw) for some great advice.
 44 | 
 45 | #### Blue
 46 | 
 47 | Blue is a commonly loved color so we chose that for a monochromatic palette.
 48 | 
 49 | | Nature Image  | Palette       |
 50 | | ------------- |:-------------:|
 51 | | <img src="https://s3.amazonaws.com/ob-dataviz/blueinspiration" align="left" width="150" > | <img src="https://s3.amazonaws.com/ob-dataviz/blueline.png" align="left" width="650" >   |
 52 | 
 53 | 
 54 | #### Sunset
 55 | Sunset was created to satisfy something with a little more hue variety and a more sophisticated look because of its dark colors.  
 56 | 
 57 | | Nature Image  | Palette       |
 58 | | ------------- |:-------------:|
 59 | | <img src="https://s3.amazonaws.com/ob-dataviz/sunsetinspiration" align="left" height="80" > | <img src="https://s3.amazonaws.com/ob-dataviz/sunsetdonut.png" align="left" width="530" >   |
 60 | 
 61 | #### Spring
 62 | 
 63 | Spring is more varied and a brighter more fun palette.  
 64 | 
 65 | | Nature Image  | Palette       |
 66 | | ------------- |:-------------:|
 67 | | <img src="https://s3.amazonaws.com/ob-dataviz/springinspiration" align="left" height="300" > | <img src="https://s3.amazonaws.com/ob-dataviz/springbox.png" align="left" width="450" >   |
 68 | 
 69 | 
 70 | # Designing a Theme - Customization Best Practices
 71 | When creating a theme, aesthetics should be considered, but more important is the legibility of the data visualization, which allows for better user engagement. We provide some guides, tips and samples to get your started!
 72 | 
 73 | ## Understanding Color & Typography
 74 | As we mentioned earlier you need to think about color and typography. Both are critical to creating visualizations that tell stories with your data.
 75 | 
 76 | ### Color
 77 | For example, for a color palette, it's important to consider how many colors will be used, and to make sure each color is different enough from the others in the palette so that the eye can quickly separate different data representations.
 78 | 
 79 | To accomplish this, it's recommended to use colors that vary in hue and brightness slightly. The [article](https://blog.graphiq.com/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.sawb2zvkw) by Samantha Zhang does a great job describing how to do this well.
 80 | 
 81 | Notice the varying HSV values in the existing color palettes; H representing Hue, S representing saturation, and V brightness.
 82 | 
 83 | #### Sunset
 84 | ![Alt text](https://s3.amazonaws.com/ob-dataviz/palette1 "Optional title")
 85 | #### Spring
 86 | ![Alt text](https://s3.amazonaws.com/ob-dataviz/palette2 "Optional title")
 87 | #### Blue
 88 | ![Alt text](https://s3.amazonaws.com/ob-dataviz/palette3 "Optional title")
 89 | 
 90 | 
 91 | 
 92 | ### Color Blindness  
 93 | 
 94 | With any color palette for data visualization it's important to be cognizant of color blindness.
 95 | 
 96 | You should test for how your colors look in all types of color blindless lenses, but the most common type of color blindness is Deuteranomaly. For a person with no color-blindness, this is what the palettes look like for someone with Deuteranomaly:
 97 | 
 98 | ![Alt text](https://s3.amazonaws.com/ob-dataviz/colorblindpalette "Optional title")
 99 | 
100 | 
101 | There are generally 2 types of color palettes: Monochromatic // non
102 | If creating an all one color palette, start with one base color - either a mid-tone or darkest tone is usually the best - and increase/decrease the hue and brightness accordingly.
103 | 
104 | For larger data sets it makes sense to use a wider variety of hues, using some variation of each. For example:
105 | 
106 | 
107 | 
108 | #### Color selection tools:
109 | - We used www.coolors.co to create 5 color palettes
110 | 
111 | #### Inspiration palettes:
112 | - http://www.lolcolors.com/
113 | - http://www.colorhunt.co/c/39609
114 | 
115 | #### Color contrast checker
116 | - http://colorsafe.co/
117 | 
118 | 
119 | ## Typography
120 | You can easily import any font-family into your css stylesheet. The most important thing with type is legibility. This means a reasonable font size so users can easily reference the legend and understand what the graph means. In addition, the typography in data visualization should not use any display fonts-- this will be harder to read and distracting from the main purpose-- the visualization.
121 | 
122 | https://richardbrath.wordpress.com/2015/11/30/font-legibility-and-data-visualization/
123 | 
124 | Our default Type: **  Open Sans.  **
125 | 
126 | Here are some recommended Google fonts:
127 | 
128 | Sans Serif:
129 | - Lato
130 | - Libre Franklin
131 | 
132 | Serif:
133 | - Slabo
134 | - Merriweather
135 | - Droid Serif.
136 | 
137 | An easy bet that your font will be legible is to use a monospaced type. Typewolf recommends these: https://www.typewolf.com/top-10-monospaced-fonts
138 | 
139 | 
140 | # Building Your Theme
141 | 
142 | ### Step 1: Naming & Setup
143 | Themes should have short names, ideally 1 or 2 words. They need to be all lower-case and separated with dashes like "spring-time" or "fall-harvest".
144 | 
145 | You will need to set up a directory for your theme inside the base stylesheet inside * plugins > query > themes *
146 | If your theme name is "fall-harvest", create a directory inside "themes" named "fall-harvest", and inside insert a duplicate of the base stylesheet that you can find in "themes".
147 | 
148 | ### Step 2: Customization
149 | Replace the strokes and fills for each color with the new hex color codes. Add as many colors as you'd like following the naming structure in place (.color-5, .color-6. color-7 and so on.).
150 | 
151 | For example:
152 | ```css
153 | .color-0 {
154 |   stroke: #261e7f;
155 |   fill: #261e7f;
156 | }
157 | 
158 | .color-1 {
159 |   stroke: #264aa5;
160 |   fill: #264aa5;
161 | }
162 | .color-2 {
163 |   stroke: #277ace;
164 |   fill: #277ace;
165 | }
166 | 
167 | .color-3 {
168 |   stroke: #2bb3e5;
169 |   fill: #2bb3e5;
170 | }
171 | .color-4 {
172 |   stroke: #37d5fc;
173 |   fill: #37d5fc;
174 | }
175 | ```
176 | 
177 | We have provided the pre-installed themes as references:
178 | 
179 | 
180 | # You've set up your theme! Now what?
181 | 
182 | ## Installation
183 | To put your theme to use, you can drag-and-drop your .css file into Slack or add it with the + button manually. 
184 | <img src="./images/draganddrop.png" height=270px>
185 | 
186 | ## Usage
187 | How you name your css file is how you will reference your theme in commands for Fetch. For example, if you name your file, 'fall-harvest.css', your command for a chart will look like this: 
188 | 
189 | `!chart MyTable my_column 10 fall-harvest`
190 | 
191 | If you need more information on structuring commands, please see the general [readme](https://github.com/openbridge/chatlytics/blob/master/README.md).
192 | 
193 | 


--------------------------------------------------------------------------------
/images/add2slack.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/add2slack.png


--------------------------------------------------------------------------------
/images/bluebar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/bluebar.png


--------------------------------------------------------------------------------
/images/bluebar.svg:
--------------------------------------------------------------------------------
1 | <?xml version='1.0' encoding='utf-8'?>
2 | <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="" class="pygal-chart" viewBox="0 0 800 600"><!--Generated with pygal 2.3.0 (lxml) ©Kozea 2012-2016 on 2016-09-28--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}.title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}.legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}.axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}.text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
3 | {background-color:rgba(249,249,249,1)}path,line,rect,circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}.graph &gt; .background{fill:rgba(249,249,249,1)}.plot &gt; .background{fill:rgba(255,255,255,1)}.graph{fill:rgba(0,0,0,.87)}text.no_data{fill:rgba(0,0,0,1)}.title{fill:rgba(0,0,0,1)}.legends .legend text{fill:rgba(0,0,0,.87)}.legends .legend:hover text{fill:rgba(0,0,0,1)}.axis .line{stroke:rgba(0,0,0,1)}.axis .guide.line{stroke:rgba(0,0,0,.54)}.axis .major.line{stroke:rgba(0,0,0,.87)}.axis text.major{fill:rgba(0,0,0,1)}.axis.y .guides:hover .guide.line,.line-graph .axis.x .guides:hover .guide.line,.stackedline-graph .axis.x .guides:hover .guide.line,.xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}.axis .guides:hover text{fill:rgba(0,0,0,1)}.reactive{fill-opacity:.7;stroke-opacity:.8}.ci{stroke:rgba(0,0,0,.87)}.reactive.active,.active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}.ci .reactive.active{stroke-width:1.5}.series text{fill:rgba(0,0,0,1)}.tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}.tooltip .label{fill:rgba(0,0,0,.87)}.tooltip .label{fill:rgba(0,0,0,.87)}.tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}.tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}.tooltip .xlink{font-size:.5em;text-decoration:underline}.tooltip .value{font-size:1.5em}.bound{font-size:.5em}.max-value{font-size:.75em;fill:rgba(0,0,0,.54)}.map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}.map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}.color-0,.color-0 a:visited{stroke:#F44336;fill:#F44336}.color-1,.color-1 a:visited{stroke:#3F51B5;fill:#3F51B5}.color-2,.color-2 a:visited{stroke:#009688;fill:#009688}.color-3,.color-3 a:visited{stroke:#FFC107;fill:#FFC107}.color-4,.color-4 a:visited{stroke:#FF5722;fill:#FF5722}.text-overlay .color-0 text{fill:black}.text-overlay .color-1 text{fill:black}.text-overlay .color-2 text{fill:black}.text-overlay .color-3 text{fill:black}.text-overlay .color-4 text{fill:black}
4 | text.no_data{text-anchor:middle}.guide.line{fill:none}.centered{text-anchor:middle}.title{text-anchor:middle}.legends .legend text{fill-opacity:1}.axis.x text{text-anchor:middle}.axis.x:not(.web) text[transform]{text-anchor:start}.axis.x:not(.web) text[transform].backwards{text-anchor:end}.axis.y text{text-anchor:end}.axis.y text[transform].backwards{text-anchor:start}.axis.y2 text{text-anchor:start}.axis.y2 text[transform].backwards{text-anchor:end}.axis .guide.line{stroke-dasharray:4,4}.axis .major.guide.line{stroke-dasharray:6,6}.horizontal .axis.y .guide.line,.horizontal .axis.y2 .guide.line,.vertical .axis.x .guide.line{opacity:0}.horizontal .axis.always_show .guide.line,.vertical .axis.always_show .guide.line{opacity:1 !important}.axis.y .guides:hover .guide.line,.axis.y2 .guides:hover .guide.line,.axis.x .guides:hover .guide.line{opacity:1}.axis .guides:hover text{opacity:1}.nofill{fill:none}.subtle-fill{fill-opacity:.2}.dot{stroke-width:1px;fill-opacity:1}.dot.active{stroke-width:5px}.dot.negative{fill:transparent}text,tspan{stroke:none !important}.series text.active{opacity:1}.tooltip rect{fill-opacity:.95;stroke-width:.5}.tooltip text{fill-opacity:1}.showable{visibility:hidden}.showable.shown{visibility:visible}.gauge-background{fill:rgba(229,229,229,1);stroke:none}.bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}
5 | .color-0{stroke:#261e7f;fill:#261e7f}.color-1{stroke:#264aa5;fill:#264aa5}.color-2{stroke:#277ace;fill:#277ace}.color-3{stroke:#2bb3e5;fill:#2bb3e5}.color-4{stroke:#37d5fc;fill:#37d5fc}.xy-graph .dot{stroke-width:6px}text{font-family:'Open Sans' !important;font-size:12px}.legends .legend text{font-family:'Open Sans';font-size:9px;font-weight:700;text-transform:uppercase;cursor:pointer;fill:#4d5254}.tooltip{font-size:10px;font-weight:600 !important}.axis text{fill:#4d5254 !important;cursor:default}.axis text.major{font-weight:700}.graph &gt; .background{fill:transparent}.plot &gt; .background{fill:transparent}text.no_data{text-anchor:middle}.centered{text-anchor:middle}.title{text-anchor:middle;font-size:11px!important;font-weight:700;fill:#656c6f;text-transform:uppercase}.plot_title{text-transform:none !important;letter-spacing:none !important;text-anchor:middle;font-weight:300;fill:#4d5254 !important;baseline-shift:sub;font-size:20px !important}.legends .legend text{fill-opacity:9}.axis.x text{text-anchor:middle}.axis.x:not(.web) text[transform]{text-anchor:start}.axis.x:not(.web) text[transform].backwards{text-anchor:end}.axis.y text{text-anchor:end}.axis.y text[transform].backwards{text-anchor:start}.axis.y2 text{text-anchor:start}.axis.y2 text[transform].backwards{text-anchor:end}.axis .line,.axis .major.line{stroke:#bbb}.axis .guide.line{stroke-dasharray:5px;stroke-linecap:round;stroke:transparent}.axis .major.guide.line{stroke-linecap:round;stroke:transparent;stroke-dasharray:none}.horizontal .axis.y .guide.line,.horizontal .axis.y2 .guide.line,.vertical .axis.x .guide.line{opacity:0}.horizontal .axis.always_show .guide.line,.vertical .axis.always_show .guide.line{opacity:1 !important}.axis.y .guides:hover .guide.line,.axis.y2 .guides:hover .guide.line,.axis.x .guides:hover .guide.line{opacity:1;stroke:#727272 !important;stroke-width:1}.axis .guides:hover text{opacity:1}.reactive{fill-opacity:.85;stroke-opacity:.9}.reactive.active,.active .reactive{fill-opacity:.9;stroke-opacity:.95;stroke-width:1.5}.dot{stroke-width:1px;fill-opacity:1}.dot.active{stroke-width:5px}.x_label{font-size:9px !important}.dot.negative{fill:transparent}text,tspan{stroke:none !important}.series text.active{opacity:1}.tooltip rect{fill-opacity:.85;stroke-width:.5;stroke:#ccc;rx:2;ry:2;border-radius:4px !important}.tooltip text{fill-opacity:1;fill:#4d5254 !important}.gauge-background{fill:rgba(229,229,229,1);stroke:none}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config = {"dynamic_print_values": false, "truncate_label": null, "inner_radius": 0, "print_values": false, "xrange": null, "box_mode": "extremes", "title": "Puppy Activities last Week", "legend_at_bottom_columns": null, "height": 600, "legend_at_bottom": false, "show_legend": true, "show_dots": true, "explicit_size": false, "y_labels_major": null, "show_minor_x_labels": true, "width": 800, "force_uri_protocol": "https", "half_pie": false, "style": {"major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "stroke_opacity": ".8", "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "legend_font_size": 14, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "value_background": "rgba(229, 229, 229, 1)", "ci_colors": [], "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "tooltip_font_size": 14, "value_font_size": 16, "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "opacity": ".7", "foreground": "rgba(0, 0, 0, .87)", "plot_background": "rgba(255, 255, 255, 1)", "value_label_font_size": 10, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "background": "rgba(249, 249, 249, 1)", "no_data_font_size": 64, "value_colors": [], "guide_stroke_dasharray": "4,4", "transition": "150ms", "foreground_subtle": "rgba(0, 0, 0, .54)", "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "stroke_opacity_hover": ".9", "major_guide_stroke_dasharray": "6,6", "opacity_hover": ".8", "foreground_strong": "rgba(0, 0, 0, 1)"}, "x_label_rotation": 0, "fill": true, "missing_value_fill_truncation": "x", "zero": 0, "margin_right": null, "interpolation_parameters": {}, "x_labels_major": null, "rounded_bars": null, "show_y_labels": true, "dots_size": 2.5, "show_y_guides": true, "show_minor_y_labels": true, "x_labels": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], "y_title": "Activity", "order_min": null, "formatter": null, "disable_xml_declaration": false, "strict": false, "css": ["file://style.css", "file://graph.css", "file:///Users/lenamadenci/GitHub/ob_chatbot/custom-styles.css"], "tooltip_fancy_mode": true, "defs": [], "show_only_major_dots": false, "y_label_rotation": 0, "show_x_labels": true, "min_scale": 4, "show_x_guides": false, "spacing": 10, "x_labels_major_count": null, "pretty_print": false, "tooltip_border_radius": 0, "interpolate": null, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "y_labels": null, "stroke_style": null, "print_labels": false, "interpolation_precision": 250, "x_title": "Day", "y_labels_major_every": null, "logarithmic": false, "legends": ["Played fetch", "Took a nap", "Went for a walk", "Did tricks", "Chased cats"], "max_scale": 16, "print_zeroes": true, "no_data_text": "No data", "truncate_legend": null, "x_labels_major_every": null, "secondary_range": null, "legend_box_size": 12, "no_prefix": true, "stroke": true, "stack_from_top": false, "include_x_axis": true, "range": null, "classes": ["pygal-chart"], "margin_top": 40, "margin_left": null, "y_labels_major_count": null, "margin_bottom": 40, "inverse_y_axis": false, "margin": 20, "allow_interruptions": false, "print_values_position": "center"}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>Puppy Activities last Week</title><g class="graph stackedbar-graph vertical"><rect class="background" height="600" width="800" x="0" y="0"/><g class="plot" transform="translate(216, 66)"><rect class="background" height="448" width="564.0" x="0" y="0"/><g class="axis y"><g class="guides"><path class="axis major line" d="M0.000000 439.384615 h564.000000"/><text class="major" x="-5" y="442.884615385">0</text><title>0</title></g><g class="guides"><path class="guide line" d="M0.000000 394.040486 h564.000000"/><text class="" x="-5" y="397.54048583">4</text><title>4</title></g><g class="guides"><path class="guide line" d="M0.000000 348.696356 h564.000000"/><text class="" x="-5" y="352.196356275">8</text><title>8</title></g><g class="guides"><path class="guide line" d="M0.000000 303.352227 h564.000000"/><text class="" x="-5" y="306.852226721">12</text><title>12</title></g><g class="guides"><path class="guide line" d="M0.000000 258.008097 h564.000000"/><text class="" x="-5" y="261.508097166">16</text><title>16</title></g><g class="guides"><path class="major guide line" d="M0.000000 212.663968 h564.000000"/><text class="major" x="-5" y="216.163967611">20</text><title>20</title></g><g class="guides"><path class="guide line" d="M0.000000 167.319838 h564.000000"/><text class="" x="-5" y="170.819838057">24</text><title>24</title></g><g class="guides"><path class="guide line" d="M0.000000 121.975709 h564.000000"/><text class="" x="-5" y="125.475708502">28</text><title>28</title></g><g class="guides"><path class="guide line" d="M0.000000 76.631579 h564.000000"/><text class="" x="-5" y="80.1315789474">32</text><title>32</title></g><g class="guides"><path class="guide line" d="M0.000000 31.287449 h564.000000"/><text class="" x="-5" y="34.7874493927">36</text><title>36</title></g></g><g class="axis x"><path class="line" d="M0.000000 0.000000 v448.000000"/><g class="guides"><path class="guide line" d="M49.582418 0.000000 v448.000000"/><text class="" x="49.5824175824" y="463.0">Sunday</text></g><g class="guides"><path class="guide line" d="M127.054945 0.000000 v448.000000"/><text class="" x="127.054945055" y="463.0">Monday</text></g><g class="guides"><path class="guide line" d="M204.527473 0.000000 v448.000000"/><text class="" x="204.527472527" y="463.0">Tuesday</text></g><g class="guides"><path class="guide line" d="M282.000000 0.000000 v448.000000"/><text class="" x="282.0" y="463.0">Wednesday</text></g><g class="guides"><path class="guide line" d="M359.472527 0.000000 v448.000000"/><text class="" x="359.472527473" y="463.0">Thursday</text></g><g class="guides"><path class="guide line" d="M436.945055 0.000000 v448.000000"/><text class="" x="436.945054945" y="463.0">Friday</text></g><g class="guides"><path class="guide line" d="M514.417582 0.000000 v448.000000"/><text class="" x="514.417582418" y="463.0">Saturday</text></g></g><g class="series serie-0 color-0"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="79.3522267206" rx="0" ry="0" width="68.1758241758" x="15.4945054945" y="360.032388664"/><desc class="value">7</desc><desc class="x centered">49.5824175824</desc><desc class="y centered">399.708502024</desc><desc class="x_label">Sunday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="113.360323887" rx="0" ry="0" width="68.1758241758" x="92.967032967" y="326.024291498"/><desc class="value">10</desc><desc class="x centered">127.054945055</desc><desc class="y centered">382.704453441</desc><desc class="x_label">Monday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="102.024291498" rx="0" ry="0" width="68.1758241758" x="170.43956044" y="337.360323887"/><desc class="value">9</desc><desc class="x centered">204.527472527</desc><desc class="y centered">388.372469636</desc><desc class="x_label">Tuesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="79.3522267206" rx="0" ry="0" width="68.1758241758" x="247.912087912" y="360.032388664"/><desc class="value">7</desc><desc class="x centered">282.0</desc><desc class="y centered">399.708502024</desc><desc class="x_label">Wednesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="90.6882591093" rx="0" ry="0" width="68.1758241758" x="325.384615385" y="348.696356275"/><desc class="value">8</desc><desc class="x centered">359.472527473</desc><desc class="y centered">394.04048583</desc><desc class="x_label">Thursday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="68.016194332" rx="0" ry="0" width="68.1758241758" x="402.857142857" y="371.368421053"/><desc class="value">6</desc><desc class="x centered">436.945054945</desc><desc class="y centered">405.376518219</desc><desc class="x_label">Friday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="56.6801619433" rx="0" ry="0" width="68.1758241758" x="480.32967033" y="382.704453441"/><desc class="value">5</desc><desc class="x centered">514.417582418</desc><desc class="y centered">411.044534413</desc><desc class="x_label">Saturday</desc></g></g></g><g class="series serie-1 color-1"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="68.016194332" rx="0" ry="0" width="68.1758241758" x="15.4945054945" y="292.016194332"/><desc class="value">6</desc><desc class="x centered">49.5824175824</desc><desc class="y centered">326.024291498</desc><desc class="x_label">Sunday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="113.360323887" rx="0" ry="0" width="68.1758241758" x="92.967032967" y="212.663967611"/><desc class="value">10</desc><desc class="x centered">127.054945055</desc><desc class="y centered">269.344129555</desc><desc class="x_label">Monday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="102.024291498" rx="0" ry="0" width="68.1758241758" x="170.43956044" y="235.336032389"/><desc class="value">9</desc><desc class="x centered">204.527472527</desc><desc class="y centered">286.348178138</desc><desc class="x_label">Tuesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="79.3522267206" rx="0" ry="0" width="68.1758241758" x="247.912087912" y="280.680161943"/><desc class="value">7</desc><desc class="x centered">282.0</desc><desc class="y centered">320.356275304</desc><desc class="x_label">Wednesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="325.384615385" y="314.688259109"/><desc class="value">3</desc><desc class="x centered">359.472527473</desc><desc class="y centered">331.692307692</desc><desc class="x_label">Thursday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="11.3360323887" rx="0" ry="0" width="68.1758241758" x="402.857142857" y="360.032388664"/><desc class="value">1</desc><desc class="x centered">436.945054945</desc><desc class="y centered">365.700404858</desc><desc class="x_label">Friday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="480.32967033" y="348.696356275"/><desc class="value">3</desc><desc class="x centered">514.417582418</desc><desc class="y centered">365.700404858</desc><desc class="x_label">Saturday</desc></g></g></g><g class="series serie-2 color-2"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="15.4945054945" y="258.008097166"/><desc class="value">3</desc><desc class="x centered">49.5824175824</desc><desc class="y centered">275.012145749</desc><desc class="x_label">Sunday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="92.967032967" y="178.655870445"/><desc class="value">3</desc><desc class="x centered">127.054945055</desc><desc class="y centered">195.659919028</desc><desc class="x_label">Monday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="56.6801619433" rx="0" ry="0" width="68.1758241758" x="170.43956044" y="178.655870445"/><desc class="value">5</desc><desc class="x centered">204.527472527</desc><desc class="y centered">206.995951417</desc><desc class="x_label">Tuesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="247.912087912" y="246.672064777"/><desc class="value">3</desc><desc class="x centered">282.0</desc><desc class="y centered">263.67611336</desc><desc class="x_label">Wednesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="102.024291498" rx="0" ry="0" width="68.1758241758" x="325.384615385" y="212.663967611"/><desc class="value">9</desc><desc class="x centered">359.472527473</desc><desc class="y centered">263.67611336</desc><desc class="x_label">Thursday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="147.368421053" rx="0" ry="0" width="68.1758241758" x="402.857142857" y="212.663967611"/><desc class="value">13</desc><desc class="x centered">436.945054945</desc><desc class="y centered">286.348178138</desc><desc class="x_label">Friday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="124.696356275" rx="0" ry="0" width="68.1758241758" x="480.32967033" y="224.0"/><desc class="value">11</desc><desc class="x centered">514.417582418</desc><desc class="y centered">286.348178138</desc><desc class="x_label">Saturday</desc></g></g></g><g class="series serie-3 color-3"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="56.6801619433" rx="0" ry="0" width="68.1758241758" x="15.4945054945" y="201.327935223"/><desc class="value">5</desc><desc class="x centered">49.5824175824</desc><desc class="y centered">229.668016194</desc><desc class="x_label">Sunday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="22.6720647773" rx="0" ry="0" width="68.1758241758" x="92.967032967" y="155.983805668"/><desc class="value">2</desc><desc class="x centered">127.054945055</desc><desc class="y centered">167.319838057</desc><desc class="x_label">Monday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="170.43956044" y="144.647773279"/><desc class="value">3</desc><desc class="x centered">204.527472527</desc><desc class="y centered">161.651821862</desc><desc class="x_label">Tuesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="22.6720647773" rx="0" ry="0" width="68.1758241758" x="247.912087912" y="224.0"/><desc class="value">2</desc><desc class="x centered">282.0</desc><desc class="y centered">235.336032389</desc><desc class="x_label">Wednesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="56.6801619433" rx="0" ry="0" width="68.1758241758" x="325.384615385" y="155.983805668"/><desc class="value">5</desc><desc class="x centered">359.472527473</desc><desc class="y centered">184.32388664</desc><desc class="x_label">Thursday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="79.3522267206" rx="0" ry="0" width="68.1758241758" x="402.857142857" y="133.311740891"/><desc class="value">7</desc><desc class="x centered">436.945054945</desc><desc class="y centered">172.987854251</desc><desc class="x_label">Friday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="113.360323887" rx="0" ry="0" width="68.1758241758" x="480.32967033" y="110.639676113"/><desc class="value">10</desc><desc class="x centered">514.417582418</desc><desc class="y centered">167.319838057</desc><desc class="x_label">Saturday</desc></g></g></g><g class="series serie-4 color-4"><g class="bars"><g class="bar"><rect class="rect reactive tooltip-trigger" height="11.3360323887" rx="0" ry="0" width="68.1758241758" x="15.4945054945" y="189.991902834"/><desc class="value">1</desc><desc class="x centered">49.5824175824</desc><desc class="y centered">195.659919028</desc><desc class="x_label">Sunday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="92.967032967" y="121.975708502"/><desc class="value">3</desc><desc class="x centered">127.054945055</desc><desc class="y centered">138.979757085</desc><desc class="x_label">Monday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="56.6801619433" rx="0" ry="0" width="68.1758241758" x="170.43956044" y="87.967611336"/><desc class="value">5</desc><desc class="x centered">204.527472527</desc><desc class="y centered">116.307692308</desc><desc class="x_label">Tuesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="181.376518219" rx="0" ry="0" width="68.1758241758" x="247.912087912" y="42.6234817814"/><desc class="value">16</desc><desc class="x centered">282.0</desc><desc class="y centered">133.311740891</desc><desc class="x_label">Wednesday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="147.368421053" rx="0" ry="0" width="68.1758241758" x="325.384615385" y="8.61538461538"/><desc class="value">13</desc><desc class="x centered">359.472527473</desc><desc class="y centered">82.2995951417</desc><desc class="x_label">Thursday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="34.008097166" rx="0" ry="0" width="68.1758241758" x="402.857142857" y="99.3036437247"/><desc class="value">3</desc><desc class="x centered">436.945054945</desc><desc class="y centered">116.307692308</desc><desc class="x_label">Friday</desc></g><g class="bar"><rect class="rect reactive tooltip-trigger" height="79.3522267206" rx="0" ry="0" width="68.1758241758" x="480.32967033" y="31.2874493927"/><desc class="value">7</desc><desc class="x centered">514.417582418</desc><desc class="y centered">70.963562753</desc><desc class="x_label">Saturday</desc></g></g></g></g><g class="titles"><text class="title plot_title" x="400.0" y="26">Puppy Activities last Week</text><text class="title" x="498.0" y="560">Day</text><text class="title" x="148.0" y="316.0" transform="rotate(-90 148.000000 290.000000)">Activity</text></g><g class="plot overlay" transform="translate(216, 66)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/><g class="series serie-4 color-4"/></g><g class="plot text-overlay" transform="translate(216, 66)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/><g class="series serie-4 color-4"/></g><g class="plot tooltip-overlay" transform="translate(216, 66)"><g class="tooltip" style="opacity: 0" transform="translate(0 0)"><rect class="tooltip-box" height="0" rx="0" ry="0" width="0"/><g class="text"/></g></g><g class="legends" transform="translate(10, 76)"><g class="legend reactive activate-serie" id="activate-serie-0"><rect class="color-0 reactive" height="12" width="12" x="0.0" y="1.0"/><text x="17.0" y="11.2">Played fetch</text></g><g class="legend reactive activate-serie" id="activate-serie-1"><rect class="color-1 reactive" height="12" width="12" x="0.0" y="22.0"/><text x="17.0" y="32.2">Took a nap</text></g><g class="legend reactive activate-serie" id="activate-serie-2"><rect class="color-2 reactive" height="12" width="12" x="0.0" y="43.0"/><text x="17.0" y="53.2">Went for a walk</text></g><g class="legend reactive activate-serie" id="activate-serie-3"><rect class="color-3 reactive" height="12" width="12" x="0.0" y="64.0"/><text x="17.0" y="74.2">Did tricks</text></g><g class="legend reactive activate-serie" id="activate-serie-4"><rect class="color-4 reactive" height="12" width="12" x="0.0" y="85.0"/><text x="17.0" y="95.2">Chased cats</text></g></g><g class="legends" transform="translate(790, 76)"/></g></svg>


--------------------------------------------------------------------------------
/images/db-config1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/db-config1.png


--------------------------------------------------------------------------------
/images/db-config2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/db-config2.png


--------------------------------------------------------------------------------
/images/definecmd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/definecmd.png


--------------------------------------------------------------------------------
/images/draganddrop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/draganddrop.png


--------------------------------------------------------------------------------
/images/fetch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/fetch.png


--------------------------------------------------------------------------------
/images/gaugechart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/gaugechart.png


--------------------------------------------------------------------------------
/images/guide.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/guide.png


--------------------------------------------------------------------------------
/images/springbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/springbar.png


--------------------------------------------------------------------------------
/images/springbox.svg:
--------------------------------------------------------------------------------
 1 | <?xml version='1.0' encoding='utf-8'?>
 2 | <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="" class="pygal-chart" viewBox="0 0 800 600"><!--Generated with pygal 2.3.0 (lxml) ©Kozea 2012-2016 on 2016-09-28--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}.title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}.legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}.axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}.text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}.tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
 3 | {background-color:rgba(249,249,249,1)}path,line,rect,circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}.graph &gt; .background{fill:rgba(249,249,249,1)}.plot &gt; .background{fill:rgba(255,255,255,1)}.graph{fill:rgba(0,0,0,.87)}text.no_data{fill:rgba(0,0,0,1)}.title{fill:rgba(0,0,0,1)}.legends .legend text{fill:rgba(0,0,0,.87)}.legends .legend:hover text{fill:rgba(0,0,0,1)}.axis .line{stroke:rgba(0,0,0,1)}.axis .guide.line{stroke:rgba(0,0,0,.54)}.axis .major.line{stroke:rgba(0,0,0,.87)}.axis text.major{fill:rgba(0,0,0,1)}.axis.y .guides:hover .guide.line,.line-graph .axis.x .guides:hover .guide.line,.stackedline-graph .axis.x .guides:hover .guide.line,.xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}.axis .guides:hover text{fill:rgba(0,0,0,1)}.reactive{fill-opacity:.7;stroke-opacity:.8}.ci{stroke:rgba(0,0,0,.87)}.reactive.active,.active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}.ci .reactive.active{stroke-width:1.5}.series text{fill:rgba(0,0,0,1)}.tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}.tooltip .label{fill:rgba(0,0,0,.87)}.tooltip .label{fill:rgba(0,0,0,.87)}.tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}.tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}.tooltip .xlink{font-size:.5em;text-decoration:underline}.tooltip .value{font-size:1.5em}.bound{font-size:.5em}.max-value{font-size:.75em;fill:rgba(0,0,0,.54)}.map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}.map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}.color-0,.color-0 a:visited{stroke:#F44336;fill:#F44336}.color-1,.color-1 a:visited{stroke:#3F51B5;fill:#3F51B5}.color-2,.color-2 a:visited{stroke:#009688;fill:#009688}.color-3,.color-3 a:visited{stroke:#FFC107;fill:#FFC107}.color-4,.color-4 a:visited{stroke:#FF5722;fill:#FF5722}.text-overlay .color-0 text{fill:black}.text-overlay .color-1 text{fill:black}.text-overlay .color-2 text{fill:black}.text-overlay .color-3 text{fill:black}.text-overlay .color-4 text{fill:black}
 4 | text.no_data{text-anchor:middle}.guide.line{fill:none}.centered{text-anchor:middle}.title{text-anchor:middle}.legends .legend text{fill-opacity:1}.axis.x text{text-anchor:middle}.axis.x:not(.web) text[transform]{text-anchor:start}.axis.x:not(.web) text[transform].backwards{text-anchor:end}.axis.y text{text-anchor:end}.axis.y text[transform].backwards{text-anchor:start}.axis.y2 text{text-anchor:start}.axis.y2 text[transform].backwards{text-anchor:end}.axis .guide.line{stroke-dasharray:4,4}.axis .major.guide.line{stroke-dasharray:6,6}.horizontal .axis.y .guide.line,.horizontal .axis.y2 .guide.line,.vertical .axis.x .guide.line{opacity:0}.horizontal .axis.always_show .guide.line,.vertical .axis.always_show .guide.line{opacity:1 !important}.axis.y .guides:hover .guide.line,.axis.y2 .guides:hover .guide.line,.axis.x .guides:hover .guide.line{opacity:1}.axis .guides:hover text{opacity:1}.nofill{fill:none}.subtle-fill{fill-opacity:.2}.dot{stroke-width:1px;fill-opacity:1}.dot.active{stroke-width:5px}.dot.negative{fill:transparent}text,tspan{stroke:none !important}.series text.active{opacity:1}.tooltip rect{fill-opacity:.95;stroke-width:.5}.tooltip text{fill-opacity:1}.showable{visibility:hidden}.showable.shown{visibility:visible}.gauge-background{fill:rgba(229,229,229,1);stroke:none}.bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}
 5 | .color-0{stroke:#AF3153;fill:#AF3153}.color-1{stroke:#E25661;fill:#E25661}.color-2{stroke:#FF7F85;fill:#FF7F85}.color-3{stroke:#087E8B;fill:#087E8B}.color-4{stroke:#83BBC6;fill:#83BBC6}.xy-graph .dot{stroke-width:6px}text{font-family:'Open Sans' !important;font-size:12px}.legends .legend text{font-family:'Open Sans';font-size:9px;font-weight:700;text-transform:uppercase;cursor:pointer;fill:#4d5254}.tooltip{font-size:10px;font-weight:600 !important}.axis text{fill:#4d5254 !important;cursor:default}.axis text.major{font-weight:700}.graph &gt; .background{fill:transparent}.plot &gt; .background{fill:transparent}text.no_data{text-anchor:middle}.centered{text-anchor:middle}.title{text-anchor:middle;font-size:11px!important;font-weight:700;fill:#656c6f;text-transform:uppercase}.plot_title{text-transform:none !important;letter-spacing:none !important;text-anchor:start;font-weight:300;fill:#4d5254 !important;baseline-shift:sub;font-size:20px !important}.legends .legend text{fill-opacity:9}.axis.x text{text-anchor:middle}.axis.x:not(.web) text[transform]{text-anchor:start}.axis.x:not(.web) text[transform].backwards{text-anchor:end}.axis.y text{text-anchor:end}.axis.y text[transform].backwards{text-anchor:start}.axis.y2 text{text-anchor:start}.axis.y2 text[transform].backwards{text-anchor:end}.axis .line,.axis .major.line{stroke:#bbb}.axis .guide.line{stroke-dasharray:5px;stroke-linecap:round;stroke:transparent}.axis .major.guide.line{stroke-linecap:round;stroke:transparent;stroke-dasharray:none}.horizontal .axis.y .guide.line,.horizontal .axis.y2 .guide.line,.vertical .axis.x .guide.line{opacity:0}.horizontal .axis.always_show .guide.line,.vertical .axis.always_show .guide.line{opacity:1 !important}.axis.y .guides:hover .guide.line,.axis.y2 .guides:hover .guide.line,.axis.x .guides:hover .guide.line{opacity:1;stroke:#727272 !important;stroke-width:1}.axis .guides:hover text{opacity:1}.reactive{fill-opacity:.85;stroke-opacity:.9}.reactive.active,.active .reactive{fill-opacity:.9;stroke-opacity:.95;stroke-width:1.5}.dot{stroke-width:1px;fill-opacity:1}.dot.active{stroke-width:5px}.x_label{font-size:9px !important}.dot.negative{fill:transparent}text,tspan{stroke:none !important}.series text.active{opacity:1}.tooltip rect{fill-opacity:.85;stroke-width:.5;stroke:#ccc;rx:2;ry:2;border-radius:4px !important}.tooltip text{fill-opacity:1;fill:#4d5254 !important}.gauge-background{fill:rgba(229,229,229,1);stroke:none}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config = {"dynamic_print_values": false, "truncate_label": null, "inner_radius": 0, "print_values": false, "xrange": null, "box_mode": "extremes", "title": "Animals I Chase", "legend_at_bottom_columns": null, "height": 600, "legend_at_bottom": false, "show_legend": true, "show_dots": true, "explicit_size": false, "y_labels_major": null, "show_minor_x_labels": true, "width": 800, "force_uri_protocol": "https", "half_pie": false, "style": {"major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "stroke_opacity": ".8", "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "legend_font_size": 14, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "value_background": "rgba(229, 229, 229, 1)", "ci_colors": [], "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "tooltip_font_size": 14, "value_font_size": 16, "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "opacity": ".7", "foreground": "rgba(0, 0, 0, .87)", "plot_background": "rgba(255, 255, 255, 1)", "value_label_font_size": 10, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "background": "rgba(249, 249, 249, 1)", "no_data_font_size": 64, "value_colors": [], "guide_stroke_dasharray": "4,4", "transition": "150ms", "foreground_subtle": "rgba(0, 0, 0, .54)", "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "stroke_opacity_hover": ".9", "major_guide_stroke_dasharray": "6,6", "opacity_hover": ".8", "foreground_strong": "rgba(0, 0, 0, 1)"}, "x_label_rotation": 0, "fill": true, "missing_value_fill_truncation": "x", "zero": 0, "margin_right": null, "interpolation_parameters": {}, "x_labels_major": null, "rounded_bars": null, "show_y_labels": true, "dots_size": 2.5, "show_y_guides": true, "show_minor_y_labels": true, "x_labels": null, "y_title": null, "order_min": null, "formatter": null, "disable_xml_declaration": false, "strict": false, "css": ["file://style.css", "file://graph.css", "file:///Users/lenamadenci/GitHub/ob_chatbot/custom-styles.css"], "tooltip_fancy_mode": true, "defs": [], "show_only_major_dots": false, "y_label_rotation": 0, "show_x_labels": true, "min_scale": 4, "show_x_guides": false, "spacing": 10, "x_labels_major_count": null, "pretty_print": false, "tooltip_border_radius": 0, "interpolate": null, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "y_labels": null, "stroke_style": null, "print_labels": false, "interpolation_precision": 250, "x_title": null, "y_labels_major_every": null, "logarithmic": false, "legends": ["Cats", "Birds", "Flies", "Butterflies", "Mice"], "max_scale": 16, "print_zeroes": true, "no_data_text": "No data", "truncate_legend": null, "x_labels_major_every": null, "secondary_range": null, "legend_box_size": 12, "no_prefix": true, "stroke": true, "stack_from_top": false, "include_x_axis": false, "range": null, "classes": ["pygal-chart"], "margin_top": 40, "margin_left": null, "y_labels_major_count": null, "margin_bottom": 40, "inverse_y_axis": false, "margin": 20, "allow_interruptions": false, "print_values_position": "center"}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>Animals I Chase</title><g class="graph box-graph vertical"><rect class="background" height="600" width="800" x="0" y="0"/><g class="plot" transform="translate(174, 66)"><rect class="background" height="494" width="605.6" x="0" y="0"/><g class="axis y"><g class="guides"><path class="axis major line" d="M0.000000 484.500000 h605.600000"/><text class="major" x="-5" y="488.0">0</text><title>0</title></g><g class="guides"><path class="guide line" d="M0.000000 446.390244 h605.600000"/><text class="" x="-5" y="449.890243902">1000</text><title>1000</title></g><g class="guides"><path class="guide line" d="M0.000000 408.280488 h605.600000"/><text class="" x="-5" y="411.780487805">2000</text><title>2000</title></g><g class="guides"><path class="guide line" d="M0.000000 370.170732 h605.600000"/><text class="" x="-5" y="373.670731707">3000</text><title>3000</title></g><g class="guides"><path class="guide line" d="M0.000000 332.060976 h605.600000"/><text class="" x="-5" y="335.56097561">4000</text><title>4000</title></g><g class="guides"><path class="major guide line" d="M0.000000 293.951220 h605.600000"/><text class="major" x="-5" y="297.451219512">5000</text><title>5000</title></g><g class="guides"><path class="guide line" d="M0.000000 255.841463 h605.600000"/><text class="" x="-5" y="259.341463415">6000</text><title>6000</title></g><g class="guides"><path class="guide line" d="M0.000000 217.731707 h605.600000"/><text class="" x="-5" y="221.231707317">7000</text><title>7000</title></g><g class="guides"><path class="guide line" d="M0.000000 179.621951 h605.600000"/><text class="" x="-5" y="183.12195122">8000</text><title>8000</title></g><g class="guides"><path class="guide line" d="M0.000000 141.512195 h605.600000"/><text class="" x="-5" y="145.012195122">9000</text><title>9000</title></g><g class="guides"><path class="major guide line" d="M0.000000 103.402439 h605.600000"/><text class="major" x="-5" y="106.902439024">10000</text><title>10000</title></g><g class="guides"><path class="guide line" d="M0.000000 65.292683 h605.600000"/><text class="" x="-5" y="68.7926829268">11000</text><title>11000</title></g><g class="guides"><path class="guide line" d="M0.000000 27.182927 h605.600000"/><text class="" x="-5" y="30.6829268293">12000</text><title>12000</title></g></g><g class="series serie-0 color-0"><g class="boxes"><g class="box"><path class="reactive tooltip-trigger" d="M44.255385 421.237805 L95.498462 421.237805" stroke-width="3"/><path class="reactive tooltip-trigger" d="M18.633846 203.669207 L121.120000 203.669207" stroke-width="3"/><path class="reactive tooltip-trigger" d="M44.255385 9.500000 L95.498462 9.500000" stroke-width="3"/><path class="reactive tooltip-trigger" d="M69.876923 421.237805 L69.876923 322.190549" stroke-width="2"/><path class="reactive tooltip-trigger" d="M69.876923 9.500000 L69.876923 164.016006" stroke-width="2"/><rect class="subtle-fill reactive tooltip-trigger" height="158.174542683" width="102.486153846" x="18.6338461538" y="164.016006098"/><desc class="value">Min: 1660
 6 | Q1 : 4259
 7 | Q2 : 7369
 8 | Q3 : 8409.5
 9 | Max: 12464</desc><desc class="x centered">69.8769230769</desc><desc class="y centered">224.122713415</desc></g></g></g><g class="series serie-1 color-1"><g class="boxes"><g class="box"><path class="reactive tooltip-trigger" d="M160.716923 444.713415 L211.960000 444.713415" stroke-width="3"/><path class="reactive tooltip-trigger" d="M135.095385 220.894817 L237.581538 220.894817" stroke-width="3"/><path class="reactive tooltip-trigger" d="M160.716923 38.615854 L211.960000 38.615854" stroke-width="3"/><path class="reactive tooltip-trigger" d="M186.338462 444.713415 L186.338462 361.634146" stroke-width="2"/><path class="reactive tooltip-trigger" d="M186.338462 38.615854 L186.338462 150.105945" stroke-width="2"/><rect class="subtle-fill reactive tooltip-trigger" height="211.52820122" width="102.486153846" x="135.095384615" y="150.105945122"/><desc class="value">Min: 1044
10 | Q1 : 3224
11 | Q2 : 6917
12 | Q3 : 8774.5
13 | Max: 11700</desc><desc class="x centered">186.338461538</desc><desc class="y centered">243.192835366</desc></g></g></g><g class="series serie-2 color-2"><g class="boxes"><g class="box"><path class="reactive tooltip-trigger" d="M277.178462 414.835366 L328.421538 414.835366" stroke-width="3"/><path class="reactive tooltip-trigger" d="M251.556923 315.445122 L354.043077 315.445122" stroke-width="3"/><path class="reactive tooltip-trigger" d="M277.178462 141.016768 L328.421538 141.016768" stroke-width="3"/><path class="reactive tooltip-trigger" d="M302.800000 414.835366 L302.800000 362.453506" stroke-width="2"/><path class="reactive tooltip-trigger" d="M302.800000 141.016768 L302.800000 274.153201" stroke-width="2"/><rect class="subtle-fill reactive tooltip-trigger" height="88.300304878" width="102.486153846" x="251.556923077" y="274.15320122"/><desc class="value">Min: 1828
14 | Q1 : 3202.5
15 | Q2 : 4436
16 | Q3 : 5519.5
17 | Max: 9013</desc><desc class="x centered">302.8</desc><desc class="y centered">301.580792683</desc></g></g></g><g class="series serie-3 color-3"><g class="boxes"><g class="box"><path class="reactive tooltip-trigger" d="M393.640000 446.390244 L444.883077 446.390244" stroke-width="3"/><path class="reactive tooltip-trigger" d="M368.018462 416.264482 L470.504615 416.264482" stroke-width="3"/><path class="reactive tooltip-trigger" d="M393.640000 361.253049 L444.883077 361.253049" stroke-width="3"/><path class="reactive tooltip-trigger" d="M419.261538 446.390244 L419.261538 441.112043" stroke-width="2"/><path class="reactive tooltip-trigger" d="M419.261538 361.253049 L419.261538 379.641006" stroke-width="2"/><rect class="subtle-fill reactive tooltip-trigger" height="61.4710365854" width="102.486153846" x="368.018461538" y="379.641006098"/><desc class="value">Min: 1000
18 | Q1 : 1138.5
19 | Q2 : 1790.5
20 | Q3 : 2751.5
21 | Max: 3234</desc><desc class="x centered">419.261538462</desc><desc class="y centered">408.932164634</desc></g></g></g><g class="series serie-4 color-4"><g class="boxes"><g class="box"><path class="reactive tooltip-trigger" d="M510.101538 410.452744 L561.344615 410.452744" stroke-width="3"/><path class="reactive tooltip-trigger" d="M484.480000 346.142530 L586.966154 346.142530" stroke-width="3"/><path class="reactive tooltip-trigger" d="M510.101538 246.542683 L561.344615 246.542683" stroke-width="3"/><path class="reactive tooltip-trigger" d="M535.723077 410.452744 L535.723077 387.796494" stroke-width="2"/><path class="reactive tooltip-trigger" d="M535.723077 246.542683 L535.723077 259.366616" stroke-width="2"/><rect class="subtle-fill reactive tooltip-trigger" height="128.429878049" width="102.486153846" x="484.48" y="259.366615854"/><desc class="value">Min: 1943
22 | Q1 : 2537.5
23 | Q2 : 3630.5
24 | Q3 : 5907.5
25 | Max: 6244</desc><desc class="x centered">535.723076923</desc><desc class="y centered">330.060213415</desc></g></g></g></g><g class="titles"><text class="title plot_title" x="400.0" y="26">Animals I Chase</text></g><g class="plot overlay" transform="translate(174, 66)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/><g class="series serie-4 color-4"/></g><g class="plot text-overlay" transform="translate(174, 66)"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/><g class="series serie-2 color-2"/><g class="series serie-3 color-3"/><g class="series serie-4 color-4"/></g><g class="plot tooltip-overlay" transform="translate(174, 66)"><g class="tooltip" style="opacity: 0" transform="translate(0 0)"><rect class="tooltip-box" height="0" rx="0" ry="0" width="0"/><g class="text"/></g></g><g class="legends" transform="translate(10, 76)"><g class="legend reactive activate-serie" id="activate-serie-0"><rect class="color-0 reactive" height="12" width="12" x="0.0" y="1.0"/><text x="17.0" y="11.2">Cats</text></g><g class="legend reactive activate-serie" id="activate-serie-1"><rect class="color-1 reactive" height="12" width="12" x="0.0" y="22.0"/><text x="17.0" y="32.2">Birds</text></g><g class="legend reactive activate-serie" id="activate-serie-2"><rect class="color-2 reactive" height="12" width="12" x="0.0" y="43.0"/><text x="17.0" y="53.2">Flies</text></g><g class="legend reactive activate-serie" id="activate-serie-3"><rect class="color-3 reactive" height="12" width="12" x="0.0" y="64.0"/><text x="17.0" y="74.2">Butterflies</text></g><g class="legend reactive activate-serie" id="activate-serie-4"><rect class="color-4 reactive" height="12" width="12" x="0.0" y="85.0"/><text x="17.0" y="95.2">Mice</text></g></g><g class="legends" transform="translate(790, 76)"/></g></svg>


--------------------------------------------------------------------------------
/images/svglink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/openbridge/chatlytics/ffeba906d9e43d5ca4ca980bd6ca7d9437bd37b5/images/svglink.png


--------------------------------------------------------------------------------
/themes/example-style.css:
--------------------------------------------------------------------------------
  1 | 
  2 | .color-0 {
  3 |   stroke: #261e7f;
  4 |   fill: #261e7f;
  5 | }
  6 | 
  7 | .color-1 {
  8 |   stroke: #264aa5;
  9 |   fill: #264aa5;
 10 | }
 11 | .color-2 {
 12 |   stroke: #277ace;
 13 |   fill: #277ace;
 14 | }
 15 | 
 16 | .color-3 {
 17 |   stroke: #2bb3e5;
 18 |   fill: #2bb3e5;
 19 | }
 20 | .color-4 {
 21 |   stroke: #37d5fc;
 22 |   fill: #37d5fc;
 23 | }
 24 | 
 25 | @font-face {
 26 |   font-family: 'Open Sans';
 27 |   font-weight: 300;
 28 |   font-style: normal;
 29 |   src: url('/fonts/Open-Sans-300/Open-Sans-300.eot');
 30 |   src: url('/fonts/Open-Sans-300/Open-Sans-300.eot?#iefix') format('embedded-opentype'),
 31 |        local('Open Sans Light'),
 32 |        local('Open-Sans-300'),
 33 |        url('/fonts/Open-Sans-300/Open-Sans-300.woff2') format('woff2'),
 34 |        url('/fonts/Open-Sans-300/Open-Sans-300.woff') format('woff'),
 35 |        url('/fonts/Open-Sans-300/Open-Sans-300.ttf') format('truetype'),
 36 |        url('/fonts/Open-Sans-300/Open-Sans-300.svg#OpenSans') format('svg');
 37 | }
 38 | 
 39 | @font-face {
 40 |   font-family: 'Open Sans';
 41 |   font-weight: 400;
 42 |   font-style: normal;
 43 |   src: url('/fonts/Open-Sans-regular/Open-Sans-regular.eot');
 44 |   src: url('/fonts/Open-Sans-regular/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
 45 |        local('Open Sans'),
 46 |        local('Open-Sans-regular'),
 47 |        url('/fonts/Open-Sans-regular/Open-Sans-regular.woff2') format('woff2'),
 48 |        url('/fonts/Open-Sans-regular/Open-Sans-regular.woff') format('woff'),
 49 |        url('/fonts/Open-Sans-regular/Open-Sans-regular.ttf') format('truetype'),
 50 |        url('/fonts/Open-Sans-regular/Open-Sans-regular.svg#OpenSans') format('svg');
 51 | }
 52 | 
 53 | @font-face {
 54 |   font-family: 'Open Sans';
 55 |   font-weight: 600;
 56 |   font-style: normal;
 57 |   src: url('/fonts/Open-Sans-600/Open-Sans-600.eot');
 58 |   src: url('/fonts/Open-Sans-600/Open-Sans-600.eot?#iefix') format('embedded-opentype'),
 59 |        local('Open Sans Semibold'),
 60 |        local('Open-Sans-600'),
 61 |        url('/fonts/Open-Sans-600/Open-Sans-600.woff2') format('woff2'),
 62 |        url('/fonts/Open-Sans-600/Open-Sans-600.woff') format('woff'),
 63 |        url('/fonts/Open-Sans-600/Open-Sans-600.ttf') format('truetype'),
 64 |        url('/fonts/Open-Sans-600/Open-Sans-600.svg#OpenSans') format('svg');
 65 | }
 66 | 
 67 | @font-face {
 68 |   font-family: 'Open Sans';
 69 |   font-weight: 700;
 70 |   font-style: normal;
 71 |   src: url('/fonts/Open-Sans-700/Open-Sans-700.eot');
 72 |   src: url('/fonts/Open-Sans-700/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
 73 |        local('Open Sans Bold'),
 74 |        local('Open-Sans-700'),
 75 |        url('/fonts/Open-Sans-700/Open-Sans-700.woff2') format('woff2'),
 76 |        url('/fonts/Open-Sans-700/Open-Sans-700.woff') format('woff'),
 77 |        url('/fonts/Open-Sans-700/Open-Sans-700.ttf') format('truetype'),
 78 |        url('/fonts/Open-Sans-700/Open-Sans-700.svg#OpenSans') format('svg');
 79 | }
 80 | 
 81 | .xy-graph .dot {
 82 |   stroke-width:6px;
 83 | }
 84 | 
 85 | text {
 86 |   font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
 87 |   font-size: 12px;
 88 | }
 89 | 
 90 | .legends .legend text {
 91 |   font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
 92 |   font-size: 9px !important;
 93 |   font-weight: 700 !important;
 94 |   text-transform: uppercase !important;
 95 |   cursor:pointer;
 96 |   fill: #4d5254;
 97 | }
 98 | 
 99 | .tooltip {
100 |   font-size:10px !important;
101 |   font-weight: 600 !important;
102 | }
103 | 
104 | .axis text {
105 |   fill: #4d5254 !important;
106 |   cursor: default;
107 | }
108 | 
109 | .axis text.major {
110 |   font-weight: 700 !important;
111 | }
112 | 
113 | 
114 | /* under is direct from pygal styles */
115 | .graph > .background {
116 |   fill: transparent;
117 | }
118 | 
119 | .plot > .background {
120 |   fill: transparent;
121 | }
122 | 
123 | text.no_data {
124 |   text-anchor: middle;
125 | }
126 | 
127 | .centered {
128 |   text-anchor: middle;
129 | }
130 | 
131 | .title {
132 |   text-anchor: middle !important;
133 |   font-size: 11px !important;
134 |   font-weight: 700 !important;
135 |   fill: #656c6f;
136 |   text-transform: uppercase !important;
137 | }
138 | 
139 | .plot_title {
140 |   text-transform: none !important;
141 |   letter-spacing: none !important;
142 |   text-anchor: start;
143 |   font-weight: 300 !important;
144 |   fill: #4d5254 !important;
145 |   baseline-shift: sub;
146 |   font-size: 20px !important;
147 | }
148 | 
149 | .legends .legend text {
150 |   fill-opacity: .9 !important;
151 | }
152 | 
153 | .axis.x text {
154 |   text-anchor: middle;
155 | }
156 | 
157 | .axis.x:not(.web) text[transform] {
158 |   text-anchor: start;
159 | }
160 | 
161 | .axis.x:not(.web) text[transform].backwards {
162 |   text-anchor: end;
163 | }
164 | 
165 | .axis.y text {
166 |   text-anchor: end;
167 | }
168 | .axis.y text[transform].backwards {
169 |   text-anchor: start;
170 | }
171 | 
172 | .axis.y2 text {
173 |   text-anchor: start;
174 | }
175 | 
176 | .axis.y2 text[transform].backwards {
177 |   text-anchor: end;
178 | }
179 | 
180 | .axis .line,
181 | .axis .major.line {
182 |   stroke: #bbb;
183 | }
184 | 
185 | .axis .guide.line {
186 |   stroke-dasharray: 5px;
187 |   stroke-linecap: round;
188 |   stroke: transparent;
189 | }
190 | 
191 | .axis .major.guide.line {
192 |   stroke-linecap: round;
193 |   stroke: transparent;
194 |   stroke-dasharray: none;
195 | }
196 | 
197 | .horizontal .axis.y .guide.line,
198 | .horizontal .axis.y2 .guide.line,
199 | .vertical .axis.x .guide.line {
200 |   opacity: 0;
201 | }
202 | 
203 | .horizontal .axis.always_show .guide.line,
204 | .vertical .axis.always_show .guide.line {
205 |   opacity: 1 !important;
206 | }
207 | 
208 | .axis.y .guides:hover .guide.line,
209 | .axis.y2 .guides:hover .guide.line,
210 | .axis.x .guides:hover .guide.line {
211 |   opacity: 1;
212 |   stroke: #727272 !important;
213 |   stroke-width:1;
214 | }
215 | 
216 | .axis .guides:hover text {
217 |   opacity: 1;
218 | }
219 | 
220 | /* normal state */
221 | .reactive {
222 |   fill-opacity: .85;
223 |   stroke-opacity: .9;
224 | }
225 | 
226 | 
227 | .reactive.active,
228 | .active .reactive {
229 |   fill-opacity: .9;
230 |   stroke-opacity: .95;
231 |   stroke-width: 1.5;
232 | }
233 | 
234 | .dot {
235 |   stroke-width: 1px;
236 |   fill-opacity: 1;
237 | }
238 | 
239 | .dot.active {
240 |   stroke-width: 5px;
241 | }
242 | 
243 | .x_label {
244 |   font-size:9px !important;
245 | }
246 | 
247 | .dot.negative {
248 |   fill: transparent;
249 | }
250 | 
251 | text, tspan {
252 |   stroke: none !important;
253 | }
254 | .series text.active {
255 |   opacity: 1;
256 | }
257 | 
258 | .tooltip rect {
259 |   fill-opacity: .85;
260 |   stroke-width: .5;
261 |   stroke: #ccc;
262 |   rx: 2;
263 |   ry: 2;
264 |   border-radius: 4px !important;
265 | }
266 | 
267 | .tooltip text {
268 |   fill-opacity: 1;
269 |   fill: #4d5254 !important ;
270 | }
271 | 
272 | .gauge-background {
273 |   fill: {{ style.value_background }};
274 |   stroke: none;
275 | }
276 | 


--------------------------------------------------------------------------------
/trainers/example-multiple.yaml:
--------------------------------------------------------------------------------
 1 | queries:
 2 |     -   name: ga_unique_visits
 3 |         query: select date, count(distinct fullvisitorid || visitid) from ga_test_04 group by date
 4 |         chart_type: bar_chart
 5 |         chart_description: Unique visits by day for table ga_test_04
 6 |         chart_style: blue
 7 | 
 8 |     -   name: ga360_unique_visits
 9 |         query: select date, count(distinct full_visitor_id || visit_id) from ga360_master group by date
10 |         chart_type: line_chart
11 |         chart_description: Unique visits by day for table ga360_master
12 |         chart_style: sunset
13 | 


--------------------------------------------------------------------------------
/trainers/example.yaml:
--------------------------------------------------------------------------------
1 | queries:
2 |     -   name: test_query
3 |         query: select testColumn, count(*) from testTable group by testColumn
4 |         chart_type: bar_chart
5 |         chart_description: test
6 |         style: blue
7 | 


--------------------------------------------------------------------------------