etc/notebooks/declarativewidgets/sentiment_boilerplate_demo/sentiment_boilerplate_demo.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "# Sentiment Boilerplate\n",
    "\n",
    "This notebook is a boilerplate for displaying and aggregating metrics about sentiment in a dashboard. In this notebook sentiment is defined as the positive or negative classification of some metric. This notebook is considered a boilerplate because it allows you to plug in your own metrics and then immediately use the dashboard without having to write any UI code. The dashboard UI includes a plot of the total sentiment (positive and negative) and a breakdown plot of the individual sentiment metrics. There is also a historical plot which shows how the individual metrics have changed over time. This plot allows you to interact with a timeline to view the the historical sentiment values within a specific window of time.\n",
    "\n",
    "**Table of Contents**\n",
    "\n",
    "1. [Getting Started](#Getting-Started)\n",
    "1. [Extension Point](#Extension-Point)\n",
    "1. [Boilerplate Code](#Boilerplate-Code)\n",
    "    1. [Setup](#Setup)\n",
    "    1. [Utilities](#Utilities)\n",
    "    1. [get_dashboard_data](#get_dashboard_data)\n",
    "    1. [get_historical_sentiment_data](#get_historical_sentiment_data)\n",
    "1. [UI](#UI)\n",
    "    1. [Styles](#Styles)\n",
    "    1. [Connecting To The Backend](#Connecting-To-The-Backend)\n",
    "    1. [Dashboard Header](#Dashboard-Header)\n",
    "    1. [Overall Sentiment Widget](#Overall-Sentiment-Widget)\n",
    "    1. [Sentiment Breakdown Widget](#Sentiment-Breakdown-Widget)\n",
    "    1. [Historical Sentiment Widget](#Historical-Sentiment-Widget)\n",
    "\n",
    "<div class=\"alert alert-info\" role=\"alert\" style=\"margin-top: 10px\">\n",
    "<strong>Note:</strong> Requires Declarative Widgets v0.6.0+.\n",
    "</div>\n",
    "\n",
    "## Getting Started\n",
    "\n",
    "To get started, run all of the cells in this notebook and go into dashboard mode via the dashboard button (<button class=\"fa fa-dashboard\n",
    " icon-play btn btn-xs btn-default\"></button>) above. Observe the sample metrics in the widgets of the dashboard. You will be able to plugin your own sentiment metrics to adapt this dashboard to your needs.\n",
    "\n",
    "This boilerplate contains a simple implementation of [`get_sentiment_counts_during`](#Extension-Point) to illustrate the data structure needed for the boilerplate UI. This is the extension point here you can adapt this dashboard to your particular use case. Returning the proper data structure from the `get_sentiment_counts_during` function is the only thing you need to do to plug your own data into this boilerplate dashboard.\n",
    "\n",
    "In short, here is a checklist of how to use this notebook.\n",
    "\n",
    "1. Run all the cells in the notebook and view it as a dashboard. \n",
    "1. Read the [Extension Point](#Extension-Point) section to understand how you can adapt this notebook to your own use case.\n",
    "1. Modify `get_sentiment_counts_during` to connect to your own datasources.\n",
    "1. Rerun the notebook and see your data in the dashboard."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Extension Point\n",
    "Below is the main extension point for bringing in your own data sources to the dashboard. The `get_sentiment_counts_during` function accepts two dates as arguments and returns an array of arrays. The two date arguments are [datetime](https://docs.python.org/3/library/datetime.html) objects used for filtering your data within a certain time window. The return value, an array of arrays, is a collection of metrics and their positive and negative sentiment counts. \n",
    "\n",
    "\n",
    "For example, in the call center scenraio a proper return value might be:\n",
    "\n",
    "```\n",
    "[\n",
    "    ['Call Wait Time', 10, 20],\n",
    "    ['Manager Involvement', 25, 5]\n",
    "]\n",
    "```\n",
    "\n",
    "In this example we define positive `Call Wait Time` when a customer waited for less than 10 minutes. Therefore,  negative `Call Wait Time` is when a custimer waited 10 minutes or more for their call to be handled. Positive `Manager Involvment` is defined as not having to invovle a manager during the call, whereas negative `Manager Involvment` involves a manager."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def get_sentiment_counts_during(start_date, end_date):\n",
    "    '''Returns sentiment counts (positive and negative) for indiviudal metrics. \n",
    "    '''    \n",
    "    return [\n",
    "        ['Metric A', random.randint(50,60), random.randint(0,10)],\n",
    "        ['Metric B', random.randint(20,30), random.randint(40,50)],\n",
    "        ['Metric C', random.randint(70,80), random.randint(10,20)]\n",
    "    ]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "This constant allows you to change the length of the current sentiment window. This affects the outcome of [`get_dashboard_data`](#get_dashboard_data) which will affect the total and individual sentiment count charts."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "CURRENT_WINDOW_SIZE_IN_DAYS = 7"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "This constant controls the number of data points returned by [`get_historical_sentiment_data`](#get_historical_sentiment_data). You can increase or decrease this number to respectively get more or less data points."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "HISTORICAL_WINDOW_SLICES = 30"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "## Boilerplate Code\n",
    "### The code below needs no modification to make this boilerplate work. Only modify if you want to extend the capabilites of the boilerplate beyond what is provided."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Setup\n",
    "These are imports that bring in python modules needed within the notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "from datetime import datetime, timedelta\n",
    "import dateutil.parser\n",
    "import random\n",
    "from declarativewidgets import channel"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {}
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "import declarativewidgets as widgets\n",
    "\n",
    "widgets.init()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "These imports bring in frontend elements into the notebook html. There are elements from the [declarativewidgets](https://github.com/jupyter-incubator/declarativewidgets) project as well as [Polymer](https://www.polymer-project.org/1.0/). There is also a custom widget, [urth-timeline](./widgets/urth-timeline), created for this notebook."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<link rel='import' is='urth-core-import' href='urth_components/urth-viz-chart/urth-viz-chart.html'>\n",
    "<link rel='import' is='urth-core-import' href='urth_components/paper-slider/paper-slider.html' \n",
    "    package='PolymerElements/paper-slider'>\n",
    "<link rel='import' is='urth-core-import' href='urth_components/paper-button/paper-button.html' \n",
    "    package='PolymerElements/paper-button' >\n",
    "<link rel='import' is='urth-core-import' href='urth_components/paper-progress/paper-progress.html' \n",
    "    package='PolymerElements/paper-progress'>\n",
    "<link rel='import' is='urth-core-import' href='urth_components/paper-toggle-button/paper-toggle-button.html' \n",
    "    package='PolymerElements/paper-toggle-button'>\n",
    "<link rel='import' is='urth-core-import' href='urth_components/urth-timeline/urth-timeline.html'\n",
    "    package='/home/jovyan/work/sentiment_boilerplate_demo/widgets/urth-timeline'>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Utilities\n",
    "This section is meant for utility functions used within the boilerplate. General functions related to parsing, data cleansing, etc. would belong in this area."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def parse_date(date_string):\n",
    "    '''Parses an ISO date string and returns a UTC datetime object.\n",
    "    '''\n",
    "    if date_string is None:\n",
    "        return np.nan\n",
    "    date_val = dateutil.parser.parse(date_string)\n",
    "    return datetime.utcfromtimestamp(date_val.timestamp())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### `get_dashboard_data`\n",
    "This function is the main entry point for the current sentiment view in the dashboard UI. The data returned from this function populates the [overall sentiment](#Overall-Sentiment-Widget) and [historical sentiment](#Historical-Sentiment-Widget) widgets."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def get_dashboard_data():\n",
    "    '''Returns the individual sentimnet metrics and the total sentiment\n",
    "    '''\n",
    "    channel().set('show-progress', True)\n",
    "    channel().set('progress-end', 2)\n",
    "    \n",
    "    end_date = datetime.now()\n",
    "    start_date = end_date - timedelta(days=CURRENT_WINDOW_SIZE_IN_DAYS)\n",
    "    channel().set('progress-message', 'Collecting individual sentiment counts.')\n",
    "    channel().set('progress', 1)\n",
    "    metrics = get_sentiment_counts_during(start_date, end_date)\n",
    "    individual_sentiment = {\n",
    "        'rows': metrics,\n",
    "        'columns': ['Index', 'Positive', 'Negative'],\n",
    "        'metadata' : {'interval' : CURRENT_WINDOW_SIZE_IN_DAYS}\n",
    "    }\n",
    "\n",
    "    total_positive = 0\n",
    "    total_negative = 0\n",
    "    channel().set('progress-message', 'Calculating total sentiment counts.')\n",
    "    channel().set('progress', 2)\n",
    "    \n",
    "    for metric in individual_sentiment['rows']:\n",
    "        total_positive +=  metric[1]\n",
    "        total_negative +=  metric [2]\n",
    "\n",
    "    total_sentiment = {\n",
    "        'rows': [\n",
    "            ['Total', total_positive, total_negative]\n",
    "        ],\n",
    "        'columns': ['Index', 'Positive', 'Negative'],\n",
    "        'metadata' : {'interval' : CURRENT_WINDOW_SIZE_IN_DAYS}\n",
    "    }\n",
    "    \n",
    "    channel().set('show-progress', False)\n",
    "    return {\n",
    "        'individual' : individual_sentiment,\n",
    "        'total': total_sentiment\n",
    "    }"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### `get_historical_sentiment_data`\n",
    "This function is the entry point for the [historical sentiment widget](#Historical-Sentiment-Widget)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "def get_historical_sentiment_data(start_date, end_date):\n",
    "    '''Returns a dictionary representing the individual sentiment components between the start and end dates.\n",
    "    \n",
    "    Args:\n",
    "        start_date: An ISO standard date string representing the start date of the historical window.\n",
    "        end_date: An ISO standard date string representing the end date of the historical window.\n",
    "    '''\n",
    "    channel().set('show-progress', True)\n",
    "    channel().set('progress-end', HISTORICAL_WINDOW_SLICES)\n",
    "    start_date = parse_date(start_date)\n",
    "    end_date = parse_date(end_date)\n",
    "    rows = []\n",
    "    curr_time = end_date\n",
    "    prev_time = end_date\n",
    "    index = 0\n",
    "    delta = (end_date - start_date) / HISTORICAL_WINDOW_SLICES\n",
    "    column_names = []\n",
    "    while(curr_time > start_date):\n",
    "        channel().set('progress-message', 'Calculating historical sentiment.')\n",
    "        channel().set('progress', index)\n",
    "        prev_time = curr_time\n",
    "        curr_time = curr_time - delta\n",
    "        index = index + 1\n",
    "        metrics = get_sentiment_counts_during(curr_time, prev_time)\n",
    "        new_row = [curr_time.isoformat()]\n",
    "        for metric in metrics:\n",
    "            new_row.append(metric[1])\n",
    "            new_row.append(metric[2])\n",
    "        rows.append(new_row)\n",
    "        if(len(column_names) == 0):\n",
    "            column_names = list(map(lambda x: x[0],metrics))\n",
    "        \n",
    "    interval = delta.days + round(delta.seconds/(60*60*24), 2)\n",
    "    labeled_columns = []\n",
    "    for column_name in column_names:\n",
    "        labeled_columns.append('Positive {}'.format(column_name))\n",
    "        labeled_columns.append('Negative {}'.format(column_name))\n",
    "        \n",
    "    channel().set('show-progress', False)\n",
    "    return {\n",
    "        'rows': rows,\n",
    "        'columns': ['Index'] + labeled_columns, \n",
    "        'metadata' : { 'interval' : interval}\n",
    "    }"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "# UI"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Styles\n",
    "A collection of css styles for the widgets displayed below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<style>\n",
    "paper-progress, paper-slider {\n",
    "    display: block;\n",
    "    width: 100%;\n",
    "    margin: 20px 0;\n",
    "}\n",
    ".center {\n",
    "    text-align:center !important;\n",
    "}\n",
    "\n",
    ".fill {\n",
    "    width:100%;\n",
    "}\n",
    ".timeline-container {\n",
    "    padding-left:60px;    \n",
    "}\n",
    "</style>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Connecting To The Backend\n",
    "In the cell below there are two html elements of type `urth-core-function`. These elements have an attribute called `ref` which references functions in the Jupyter Kernel."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<urth-core-channel id=\"defaultChannel\"></urth-core-channel>\n",
    "<template is=\"urth-core-bind\">\n",
    "    <urth-core-function id=\"get_dashboard_data_function\" ref=\"get_dashboard_data\" \n",
    "        result='{{sentiment_data}}'\n",
    "        delay='500'\n",
    "        auto>\n",
    "    </urth-core-function> \n",
    "    <urth-core-function id=\"get_historical_sentiment_data_function\" ref=\"get_historical_sentiment_data\" \n",
    "        arg-start_date='{{window_start}}'\n",
    "        arg-end_date='{{window_end}}'\n",
    "        result='{{historical_data}}'\n",
    "        delay='500'\n",
    "        auto>\n",
    "    </urth-core-function> \n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "Initialization code to get variables setup on the client side."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<script>\n",
    "    Urth.whenReady(function() {\n",
    "        var channel = document.getElementById('defaultChannel');\n",
    "        // Set the start and end for the timeline widget\n",
    "        // Initialize the window values to some date string\n",
    "        channel.set('window_end', new Date().toISOString());\n",
    "        channel.set('window_start', new Date().toISOString());\n",
    "        // The color palette used in the visualizations\n",
    "        channel.set('palette', ['#2166ac','#b2182b', '#4393c3', '#d6604d', '#92c5de', '#f4a582', '#d1e5f0', '#fddbc7']) \n",
    "    });\n",
    "</script>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Dashboard Header\n",
    "This cell displays the header for the dashboard. This is where progress updates will be displayed. User input widgets can also be placed here."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 8,
        "hidden": false,
        "row": 0,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    },
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id='banner' is=\"urth-core-bind\">\n",
    "    <h1>Sentiment Boilerplate</h1>\n",
    "    <paper-item>\n",
    "        <p>\n",
    "            This boilerplate dashboard is for displaying sentiment metrics. To learn more about how you can \n",
    "            adapt this dashboard for your use case see the <a href='#Getting-Started'>Getting Started</a> section in notebook mode.\n",
    "        </p>\n",
    "    </paper-item>\n",
    "    <template is='dom-if' if='{{show-progress}}'>\n",
    "        <paper-progress value=\"{{progress}}\" min='0' max='{{progress-end}}'></paper-progress>\n",
    "        <paper-item>\n",
    "            <p class='center fill'>{{progress-message}}</p>\n",
    "        </paper-item>\n",
    "    </template>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Overall Sentiment Widget\n",
    "This bar chart displays the overall sentiment to give the user an understanding of whether the general sentiment is positive or negative. The data displayed in this widget comes from the [`get_dashboard_data`](#get_dashboard_data)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 18,
        "hidden": false,
        "row": 8,
        "width": 6
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "    <h2 class='center' >Overall Sentiment (Past <span>{{sentiment_data.total.metadata.interval}}</span> Days)</h2>\n",
    "    <urth-viz-chart type='bar' palette='{{palette}}' \n",
    "        datarows='{{sentiment_data.total.rows}}' \n",
    "        columns='{{sentiment_data.total.columns}}'>\n",
    "    </urth-viz-chart>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Sentiment Breakdown Widget\n",
    "This widget displays the sentiment breakdown for the indiviudal metrics. Each metric is displayed with counts for positive and negative sentiment. The data displayed in this widget comes from the [`get_dashboard_data`](#get_dashboard_data)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 6,
        "height": 18,
        "hidden": false,
        "row": 8,
        "width": 6
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template is=\"urth-core-bind\">\n",
    "        <h2 class='center' >Sentiment Breakdown (Past <span>{{sentiment_data.individual.metadata.interval}}</span> Days)</h2>\n",
    "        <urth-viz-chart type='bar' palette='{{palette}}' \n",
    "            datarows='{{sentiment_data.individual.rows}}' \n",
    "            columns='{{sentiment_data.individual.columns}}'>\n",
    "        </urth-viz-chart>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "hidden": true
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    }
   },
   "source": [
    "### Historical Sentiment Widget\n",
    "This widget displays the sentiment of the individual metrics over time. The number of data points in this graph can be customized by modifying the `HISTORICAL_WINDOW_SLICES` in the [Extension Point](#Extension-Point) section. The data displayed in this visualization comes from the [`get_historical_sentiment_data`](#get_historical_sentiment_data) function."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false,
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "grid_default": {
        "col": 0,
        "height": 24,
        "hidden": false,
        "row": 26,
        "width": 12
       },
       "report_default": {
        "hidden": false
       }
      }
     }
    },
    "scrolled": false
   },
   "outputs": [],
   "source": [
    "%%html\n",
    "<template id='timeline_bind' is=\"urth-core-bind\">\n",
    "    <h2 class='center'>Historical Sentiment</h2>\n",
    "    <h3 class='center'>\n",
    "        <span>{{start_label}}</span> to <span>{{end_label}}</span> every <span>{{historical_data.metadata.interval}}</span> days\n",
    "    </h3>\n",
    "    <urth-viz-chart type='line' palette=\"{{palette}}\"\n",
    "        datarows='{{historical_data.rows}}' \n",
    "        columns='{{historical_data.columns}}'>\n",
    "        <urth-viz-col index=\"0\" type=\"date\" ></urth-viz-col>\n",
    "    </urth-viz-chart>\n",
    "    <div class='timeline-container'>\n",
    "        <urth-timeline on-window-changed='update'></urth-timeline>\n",
    "    </div>            \n",
    "    <script>\n",
    "        timeline_bind.update = function(e){\n",
    "            var channel = document.getElementById('defaultChannel');\n",
    "            channel.set('window_start', e.detail.window_start.toISOString());\n",
    "            channel.set('window_end', e.detail.window_end.toISOString());\n",
    "            channel.set('start_label', e.detail.window_start.toLocaleDateString());\n",
    "            channel.set('end_label', e.detail.window_end.toLocaleDateString());\n",
    "        }\n",
    "    </script>\n",
    "</template>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "extensions": {
   "jupyter_dashboards": {
    "activeView": "grid_default",
    "version": 1,
    "views": {
     "grid_default": {
      "cellMargin": 10,
      "defaultCellHeight": 20,
      "maxColumns": 12,
      "name": "grid",
      "type": "grid"
     },
     "report_default": {
      "name": "report",
      "type": "report"
     }
    }
   }
  },
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.5.1"
  },
  "widgets": {
   "state": {
    "57010725CA3343E5A950B71D4A8930B4": {
     "views": []
    },
    "608D2CA6F4534453919F830EC7A4461D": {
     "views": []
    },
    "B4D6AFD5E9A54FCB8675D3626DBB5CB2": {
     "views": []
    }
   },
   "version": "1.1.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}