From d258cabaf230e99c7a4947db87a51f2efe889c85 Mon Sep 17 00:00:00 2001
From: Elise Chant <elise.chant@gmail.com>
Date: Fri, 31 Mar 2017 11:15:42 +1100
Subject: [PATCH] feat(pie): adds pie and line (#12)

* fix(column): remove yaxis label

* chore(font): include Open Sans

* feat(pie): include donut widget; remove data transformation;

* feat(line): adds a cheeky line chart in wrong branch :P

* feat(chart): removes dummy color

* feat(chart): add dirs for sparklines and stacked column

* feat(chart): fix up some smart defaults

* feat(chart): removes deep extend

* feat(column): restores legend

* feat(pie): derive legend from decorated series and render it

* feat(pie): enable tooltips for now
---
 public/404.html                               |   6 +-
 public/index.html                             |   5 +
 src/components/columnWidget/columnWidget.js   | 107 ++++++------
 src/components/columnWidget/readme.md         |  25 +--
 src/components/donutWidget/donutWidget.js     | 161 ++++++++++++++++++
 src/components/donutWidget/index.js           |   1 +
 src/components/donutWidget/readme.md          |   7 +
 src/components/lineWidget/index.js            |   1 +
 src/components/lineWidget/lineWidget.js       |  95 +++++++++++
 src/components/lineWidget/readme.md           |   6 +
 src/components/sparklineWidget/.gitkeep       |   0
 src/components/stackedColumnWidget/index.js   |   1 +
 src/components/stackedColumnWidget/readme.md  |   7 +
 .../stackedColumnWidget.js                    | 158 +++++++++++++++++
 src/fixtures/series.js                        |  41 +++++
 src/hocs/withHighcharts.js                    |  22 ++-
 src/index.js                                  |  49 +++---
 17 files changed, 589 insertions(+), 103 deletions(-)
 create mode 100644 src/components/donutWidget/donutWidget.js
 create mode 100644 src/components/donutWidget/index.js
 create mode 100644 src/components/donutWidget/readme.md
 create mode 100644 src/components/lineWidget/index.js
 create mode 100644 src/components/lineWidget/lineWidget.js
 create mode 100644 src/components/lineWidget/readme.md
 create mode 100644 src/components/sparklineWidget/.gitkeep
 create mode 100644 src/components/stackedColumnWidget/index.js
 create mode 100644 src/components/stackedColumnWidget/readme.md
 create mode 100644 src/components/stackedColumnWidget/stackedColumnWidget.js
 create mode 100644 src/fixtures/series.js
diff --git a/public/404.html b/public/404.html
index 6adc36c..4096772 100644
--- a/public/404.html
+++ b/public/404.html
@@ -3,6 +3,11 @@
 <head>
   <meta charset="utf-8">
   <title>Single Page Apps for GitHub Pages</title>
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+  <style>
+    html, body { font-family: 'Open Sans', Verdana, 'Bitstream Vera Sans', sans-serif; }
+  </style>
+
   <script type="text/javascript">
     // Single Page Apps for GitHub Pages
     // https://github.com/rafrex/spa-github-pages
@@ -31,7 +36,6 @@
       (l.search ? '&q=' + l.search.slice(1).replace(/&/g, '~and~') : '') +
       l.hash
     );
-
   </script>
 </head>
 <body>
diff --git a/public/index.html b/public/index.html
index af1a9d9..1740ee2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <title>Datavizkit</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+    <style>
+      html, body { font-family: 'Open Sans', Verdana, 'Bitstream Vera Sans', sans-serif; }
+    </style>
+
     <!-- Start Single Page Apps for GitHub Pages -->
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
diff --git a/src/components/columnWidget/columnWidget.js b/src/components/columnWidget/columnWidget.js
index 8443d0a..bd55cea 100644
--- a/src/components/columnWidget/columnWidget.js
+++ b/src/components/columnWidget/columnWidget.js
@@ -1,9 +1,18 @@
+/*
+
+ todo
+
+ * can have a null data layer
+ * can have a pattern for high contrast mode
+
+
+ */
+
 
 import React, {PureComponent, PropTypes} from 'react';
-import last from 'lodash/last';
 import Emitter from 'tiny-emitter';
 
-import {withChart} from './../../hocs/withHighcharts';
+import {BASE_CHART_OPTIONS, withChart} from './../../hocs/withHighcharts';
 
 
 const emitter = new Emitter();
@@ -16,26 +25,17 @@ class ColumnWidget extends PureComponent {
 
     emitter.on('receive_onPointUpdate', this.receiveOnPointUpdate.bind(this));
 
-    const {widget} = props;
 
     const chartOptions = {
-      xAxis: {
-        categories: widget.series.map(s => s.data)[0].map(item => item.description)
-      },
-      series:  widget.series.map(s => {
-        return {
-          name: s.name,
-          label: s.data.map(item => item.description),
-          data: s.data.map(item => item.value)
-        }
-      }),
-      title: {
-        text: null
-      },
+      ...BASE_CHART_OPTIONS,
       chart: {
-        marginBottom: 100,
         type: 'column'
       },
+      yAxis: {
+        title: {
+          text: null
+        }
+      },
       plotOptions: {
         series: {
           animation: false,
@@ -53,34 +53,31 @@ class ColumnWidget extends PureComponent {
             }
           },
           allowPointSelect: false,
+          stickyTracking: true
         },
       },
-      legend: {
-        enabled: false,
-      },
-      credits: {
-        enabled: false
-      },
-      tooltip: {
-        enabled: false,
-        // followTouchMove: true
-      }
-    };
 
-    const restOptions = {
-      fauxLegend: widget.series.map(s => {
-        const item = last(s.data);
-        return {
-          seriesName: s.name,
-          label: item.description,
-          value: item.value
+      // instance props
+      xAxis: {
+        categories: ["Jan 2017","Feb 2017","Mar 2017","Apr 2017","May 2017","Jun 2017","Jul 2017","Aug 2017","Sep 2017","Oct 2017","Nov 2017","Dec 2017"]
+      },
+      series: [
+        {
+          "name": "Desktop",
+          "data": [29.9, 71.5, 106.4, 129.2, 144, 176, 135, 148.5, 216.4, 194.1, 95.6, 54.4]
         }
-      })
+      ],
     };
 
     this.state = {
       chartOptions,
-      ...restOptions
+      legend: [
+        {
+          seriesName: "Desktop",
+          label: "Dec 2017",
+          value: 54.4
+        }
+      ]
     };
   }
 
@@ -96,14 +93,14 @@ class ColumnWidget extends PureComponent {
   // this has the scope of class
   receiveOnPointUpdate(options, cb) {
     const {label, value, seriesName} = options;
-    const nextFauxLegend = this.state.fauxLegend.map(f => {
+    const nextlegend = this.state.legend.map(f => {
       if (f.seriesName === seriesName) {
         f.label = label;
         f.value = value;
       }
       return f;
     });
-    this.setState({fauxLegend: nextFauxLegend});
+    this.setState({legend: nextlegend});
   }
 
   componentDidMount() {
@@ -125,11 +122,11 @@ class ColumnWidget extends PureComponent {
   // }
 
   render() {
-    const chartType = this.state.chartOptions.chart.type;
-    const dateUpdated = this.props.widget.dateUpdated;
+    const {widget: {title, dateUpdated}} = this.props;
+    const {legend} = this.state;
     const datetimeUpdate = new Date(dateUpdated).toJSON();
-    const title = this.props.widget.title;
-    const {fauxLegend} = this.state;
+
+    const chartType = this.state.chartOptions.chart.type;
 
     return (
       <article className={`chart--${chartType}`} role="article">
@@ -139,22 +136,22 @@ class ColumnWidget extends PureComponent {
           <span>What is this?</span>
         </header>
         <section>
-          {fauxLegend.length && <div><time>{fauxLegend[0].label}</time></div>}
+          {legend.length && <div><time>{legend[0].label}</time></div>}
           <div ref={el => this.el = el} />
-          {fauxLegend.length && <div className="legend">
+          {legend.length && <div className="legend">
             <table>
               <tbody>
-                {fauxLegend.map((legend, idx) => (
+                {legend.map((item, idx) => (
                   <tr key={idx}>
-                    <th>
+                    <td>
                       <svg width="12" height="12">
                         <g className="legend--icon">
-                          {legend.color && <rect x="0" y="0" width="12" height="12" fill={legend.color} visibility="visible" rx="6" ry="6"></rect>}
+                          {item.color && <rect x="0" y="0" width="12" height="12" fill={item.color} visibility="visible" rx="6" ry="6"></rect>}
                         </g>
                       </svg>
-                      <span className="legend--data-name">{legend.seriesName}</span>
-                    </th>
-                    <td>{legend.value}</td>
+                      <span className="legend--data-name">{item.seriesName}</span>
+                    </td>
+                    <td>{item.value}</td>
                   </tr>
                 ))}
               </tbody>
@@ -167,10 +164,10 @@ class ColumnWidget extends PureComponent {
 
 }
 
-ColumnWidget.propTypes = {
-  // a column chart must have time-series data
-};
+ColumnWidget.propTypes = {};
+
+ColumnWidget = withChart(ColumnWidget);
 
-export default withChart(ColumnWidget);
+export default ColumnWidget;
 
 
diff --git a/src/components/columnWidget/readme.md b/src/components/columnWidget/readme.md
index 941a14a..a170af7 100644
--- a/src/components/columnWidget/readme.md
+++ b/src/components/columnWidget/readme.md
@@ -1,26 +1,7 @@
 Basic Column Widget:
 
     <ColumnWidget widget={{
-                            title: 'Number of page views',
-                            dateUpdated: '22 Feb 2016',
-                            series: [
-                              {
-                                name: 'Desktop',
-                                data: [
-                                  {id: 1, description: 'Jan 2017', value: 29.9},
-                                  {id: 2, description: 'Feb 2017', value: 71.5},
-                                  {id: 3, description: 'Mar 2017', value: 106.4},
-                                  {id: 4, description: 'Apr 2017', value: 129.2},
-                                  {id: 5, description: 'May 2017', value: 144.0},
-                                  {id: 6, description: 'Jun 2017', value: 176.0},
-                                  {id: 7, description: 'Jul 2017', value: 135.0},
-                                  {id: 8, description: 'Aug 2017', value: 148.5},
-                                  {id: 9, description: 'Sep 2017', value: 216.4},
-                                  {id: 10, description: 'Oct 2017', value: 194.1},
-                                  {id: 11, description: 'Nov 2017', value: 95.6},
-                                  {id: 12, description: 'Dec 2017', value: 54.4},
-                                ]
-                              }
-                            ]
-                          }} />
+      title: 'Number of page views',
+      dateUpdated: '22 Feb 2016',
+    }} />
 
diff --git a/src/components/donutWidget/donutWidget.js b/src/components/donutWidget/donutWidget.js
new file mode 100644
index 0000000..78920f5
--- /dev/null
+++ b/src/components/donutWidget/donutWidget.js
@@ -0,0 +1,161 @@
+
+/*
+
+ todo
+
+ * can have a pattern for high contrast mode
+
+
+ */
+
+
+import React, {PureComponent, PropTypes} from 'react';
+import Emitter from 'tiny-emitter';
+
+import {BASE_CHART_OPTIONS, withChart} from './../../hocs/withHighcharts';
+
+
+const emitter = new Emitter();
+
+class DonutWidget extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.el = null;
+
+    emitter.on('set:state', this.manualSetState.bind(this, arguments));
+
+
+    const chartOptions = {
+      ...BASE_CHART_OPTIONS,
+      chart: {
+        type: 'pie',
+        events: {
+          render: function(e, target, type) {
+            const decoratedData = this.series[0].data;  // pie only has 1 slice
+            const fauxLegend = decoratedData.map(d => {
+              return {
+                color: d.color,
+                key: d.name,
+                value: d.y
+              }
+            });
+            emitter.emit('set:state', {'fauxLegend': fauxLegend});
+          }
+        },
+      },
+      plotOptions: {
+        pie: {
+          animation: false,
+          dataLabels: {
+            enabled: false
+          },
+          showInLegend: true,
+          stickyTracking: true,
+          states: {
+            hover: {
+              halo: {
+                size: 0
+              }
+            },
+            select: { // required because can be selected programatically
+              enabled: false
+            }
+          }
+        },
+      },
+
+
+
+      // instance props
+      series: [{
+        name: 'Brands',
+        colorByPoint: true,
+        innerSize: '50%',
+        data: [{
+          name: 'Microsoft Internet Explorer',
+          y: 56.33
+        }, {
+          name: 'Chrome',
+          y: 24.03,
+        }, {
+          name: 'Firefox',
+          y: 10.38
+        }, {
+          name: 'Safari',
+          y: 4.77
+        }, {
+          name: 'Opera',
+          y: 0.91
+        }, {
+          name: 'Proprietary or Undetectable',
+          y: 0.2
+        }]
+      }],
+    };
+
+    this.state = {
+      chartOptions,
+      fauxLegend: []
+    };
+  }
+
+  manualSetState(self, stateToSet) {
+    // todo  set on next tick
+    this.setState(stateToSet);
+  }
+
+  componentDidMount() {
+    if (this.el === null) {
+      throw new Error('Must provide a container element');
+    }
+    const _options = this.state.chartOptions;
+    _options.chart.renderTo = this.el;
+    this.instance = this.props.create(_options);
+  }
+
+  render() {
+    const {widget: {title, dateUpdated}} = this.props;
+    const {fauxLegend} = this.state;
+    const datetimeUpdate = new Date(dateUpdated).toJSON();
+
+    const chartType = this.state.chartOptions.chart.type;
+
+
+    return (
+      <article className={`chart--${chartType}`} role="article">
+        <header>
+          <h1>{title}</h1>
+          <span>Last updated <time dateTime={datetimeUpdate}>{dateUpdated}</time></span>
+          {/*<span>What is this?</span>*/}
+        </header>
+        <section>
+          <div ref={el => this.el = el} />
+          {fauxLegend.length && <div className="legend">
+            <table>
+              <tbody>
+              {fauxLegend.map((item, idx) => (
+                <tr key={idx}>
+                  <td>
+                    <svg width="12" height="12">
+                      <g className="legend--icon">
+                        {item.color && <rect x="0" y="0" width="12" height="12" fill={item.color} visibility="visible" rx="6" ry="6"></rect>}
+                      </g>
+                    </svg>
+                    <span className="legend--data-name">{item.key}</span>
+                  </td>
+                  <td>{item.value}</td>
+                </tr>
+              ))}
+              </tbody>
+            </table>
+          </div>}
+        </section>
+      </article>
+    );
+  }
+
+}
+
+export default withChart(DonutWidget);
+
diff --git a/src/components/donutWidget/index.js b/src/components/donutWidget/index.js
new file mode 100644
index 0000000..7845b03
--- /dev/null
+++ b/src/components/donutWidget/index.js
@@ -0,0 +1 @@
+export {default} from './donutWidget';
diff --git a/src/components/donutWidget/readme.md b/src/components/donutWidget/readme.md
new file mode 100644
index 0000000..2648340
--- /dev/null
+++ b/src/components/donutWidget/readme.md
@@ -0,0 +1,7 @@
+Basic Donut Widget:
+
+    <DonutWidget widget={{
+      title: 'Devices used',
+      dateUpdated: '22 Feb 2016',
+    }} />
+
diff --git a/src/components/lineWidget/index.js b/src/components/lineWidget/index.js
new file mode 100644
index 0000000..affdb10
--- /dev/null
+++ b/src/components/lineWidget/index.js
@@ -0,0 +1 @@
+export {default} from './lineWidget';
diff --git a/src/components/lineWidget/lineWidget.js b/src/components/lineWidget/lineWidget.js
new file mode 100644
index 0000000..f174f09
--- /dev/null
+++ b/src/components/lineWidget/lineWidget.js
@@ -0,0 +1,95 @@
+
+/*
+
+ todo
+
+ * can have a pattern for high contrast mode
+ * has a vertical ruler and highlights points on mouseover
+ * legend updates on mouseover
+
+
+ */
+
+
+import React, {PureComponent, PropTypes} from 'react';
+
+import {BASE_CHART_OPTIONS, withChart} from './../../hocs/withHighcharts';
+
+
+class LineWidget extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.el = null;
+
+    const chartOptions = {
+      ...BASE_CHART_OPTIONS,
+      chart: {
+        type: 'line'
+      },
+      plotOptions: {
+        line: {
+          animation: false,
+          allowPointSelect: true,
+          stickyTracking: true
+        }
+      },
+
+      // instance props
+      series: [{
+        name: 'Installation',
+        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
+      }, {
+        name: 'Manufacturing',
+        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
+      }, {
+        name: 'Sales & Distribution',
+        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
+      }, {
+        name: 'Project Development',
+        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
+      }, {
+        name: 'Other',
+        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
+      }]
+    };
+
+    this.state = {
+      chartOptions
+    };
+  }
+
+  componentDidMount() {
+    if (this.el === null) {
+      throw new Error('Must provide a container element');
+    }
+    const _options = this.state.chartOptions;
+    _options.chart.renderTo = this.el;
+    this.instance = this.props.create(_options);
+  }
+
+  render() {
+    const {widget: {title, dateUpdated}} = this.props;
+    const datetimeUpdate = new Date(dateUpdated).toJSON();
+
+    const chartType = this.state.chartOptions.chart.type;
+
+
+    return (
+      <article className={`chart--${chartType}`} role="article">
+        <header>
+          <h1>{title}</h1>
+          <span>Last updated <time dateTime={datetimeUpdate}>{dateUpdated}</time></span>
+          <span>What is this?</span>
+        </header>
+        <section>
+          <div ref={el => this.el = el} />
+        </section>
+      </article>
+    );
+  }
+
+}
+
+export default withChart(LineWidget);
+
diff --git a/src/components/lineWidget/readme.md b/src/components/lineWidget/readme.md
new file mode 100644
index 0000000..82f7254
--- /dev/null
+++ b/src/components/lineWidget/readme.md
@@ -0,0 +1,6 @@
+Basic Donut Widget:
+
+    <LineWidget widget={{
+      title: 'Average session length',
+      dateUpdated: '22 Feb 2016',
+    }} />
diff --git a/src/components/sparklineWidget/.gitkeep b/src/components/sparklineWidget/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/stackedColumnWidget/index.js b/src/components/stackedColumnWidget/index.js
new file mode 100644
index 0000000..cb8bf86
--- /dev/null
+++ b/src/components/stackedColumnWidget/index.js
@@ -0,0 +1 @@
+export {default} from './stackedColumnWidget';
diff --git a/src/components/stackedColumnWidget/readme.md b/src/components/stackedColumnWidget/readme.md
new file mode 100644
index 0000000..b902218
--- /dev/null
+++ b/src/components/stackedColumnWidget/readme.md
@@ -0,0 +1,7 @@
+Stacked Column Widget
+
+    <StackedColumnWidget widget={{
+      title: 'Number of page views',
+      dateUpdated: '22 Feb 2016',
+    }} />
+
diff --git a/src/components/stackedColumnWidget/stackedColumnWidget.js b/src/components/stackedColumnWidget/stackedColumnWidget.js
new file mode 100644
index 0000000..eb9f0ac
--- /dev/null
+++ b/src/components/stackedColumnWidget/stackedColumnWidget.js
@@ -0,0 +1,158 @@
+
+/*
+
+ todo
+
+ * can be optionally 100% height
+ * can have a pattern for high contrast mode
+ * legend updates on mouseover
+
+
+ */
+
+import React, {PureComponent, PropTypes} from 'react';
+import Emitter from 'tiny-emitter';
+
+import {BASE_CHART_OPTIONS, withChart} from './../../hocs/withHighcharts';
+
+
+const emitter = new Emitter();
+
+class StackedColumnWidget extends PureComponent {
+
+  constructor(props) {
+    super(props);
+    this.el = null;
+
+    emitter.on('receive_onPointUpdate', this.receiveOnPointUpdate.bind(this));
+
+    const chartOptions = {
+      ...BASE_CHART_OPTIONS,
+      chart: {
+        type: 'column'
+      },
+      yAxis: {
+        title: {
+          text: null
+        }
+      },
+      plotOptions: {
+        series: {
+          stacking: 'normal',
+          animation: false,
+          point: {
+            events: {
+              mouseOver: this.onPointUpdate,
+            }
+          },
+          states: {
+            // hover: {
+            //   color: 'yellow',
+            // },
+            select: { // required because can be selected programatically
+              enabled: false
+            }
+          },
+          allowPointSelect: false,
+          stickyTracking: true
+        },
+      },
+
+      // instance props
+      xAxis: {
+        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
+      },
+      series: [
+        {
+          name: 'John',
+          data: [5, 3, 4, 7, 2]
+        }, {
+          name: 'Jane',
+          data: [2, 2, 3, 2, 1]
+        }, {
+          name: 'Joe',
+          data: [3, 4, 4, 2, 5]
+        }
+      ],
+    };
+
+    this.state = {
+      chartOptions,
+      fauxLegend: [
+        {
+          seriesName: "Desktop",
+          label: "Dec 2017",
+          value: 54.4
+        }
+      ]
+    };
+  }
+
+  // this has the scope of point
+  onPointUpdate(e) {
+    emitter.emit('receive_onPointUpdate', {
+      seriesName: this.series.name,
+      label: this.category,
+      value: this.y,
+    });
+  }
+
+  // this has the scope of class
+  receiveOnPointUpdate(options, cb) {
+    const {label, value, seriesName} = options;
+    const nextFauxLegend = this.state.fauxLegend.map(f => {
+      if (f.seriesName === seriesName) {
+        f.label = label;
+        f.value = value;
+      }
+      return f;
+    });
+    this.setState({fauxLegend: nextFauxLegend});
+  }
+
+  componentDidMount() {
+    if (this.el === null) {
+      throw new Error('Must provide a container element');
+    }
+    const _options = this.state.chartOptions;
+    _options.chart.renderTo = this.el;
+    this.instance = this.props.create(_options);
+
+    // "hover" over the last column
+    const lastIdx = this.instance.series[0].data.length - 1;
+    this.instance.series[0].data[lastIdx].onMouseOver();
+  }
+
+  // todo
+  // componentWillUpdate(nextProps, nextState) {
+  //   this.props.update(nextState.chartOptions);
+  // }
+
+  render() {
+    const {widget: {title, dateUpdated}} = this.props;
+    const datetimeUpdate = new Date(dateUpdated).toJSON();
+
+    const chartType = this.state.chartOptions.chart.type;
+
+    return (
+      <article className={`chart--${chartType}`} role="article">
+        <header>
+          <h1>{title}</h1>
+          <span>Last updated <time dateTime={datetimeUpdate}>{dateUpdated}</time></span>
+          <span>What is this?</span>
+        </header>
+        <section>
+          <div ref={el => this.el = el} />
+        </section>
+      </article>
+    );
+  }
+
+}
+
+StackedColumnWidget.propTypes = {
+};
+
+export default withChart(StackedColumnWidget);
+
+
diff --git a/src/fixtures/series.js b/src/fixtures/series.js
new file mode 100644
index 0000000..137aa14
--- /dev/null
+++ b/src/fixtures/series.js
@@ -0,0 +1,41 @@
+// http://api.highcharts.com/highcharts/series<column>.data
+// http://api.highcharts.com/highcharts/series<pie>.data
+
+/**
+
+ Data can be in the form:
+
+ data: [0, 5, 3, 5]
+
+ * interpreted as y options
+
+
+ Or (not pie):
+
+ data: [
+   [0, 6],
+   [1, 2],
+   [2, 6]
+ ]
+
+   * [x,y] or ['name', y]
+
+
+ Or:
+
+ data: [{
+    x: 1,
+    y: 1,
+    name: "Point2",
+    color: "#00FF00"
+  }, {
+    x: 1,
+    y: 7,
+    name: "Point1",
+    color: "#FF00FF"
+  }]
+
+ * named values
+ * objects are point configuration objects
+
+ */
diff --git a/src/hocs/withHighcharts.js b/src/hocs/withHighcharts.js
index 12af90e..1aa0495 100644
--- a/src/hocs/withHighcharts.js
+++ b/src/hocs/withHighcharts.js
@@ -5,7 +5,6 @@ import Highcharts from 'highcharts';
 import {onNextFrame} from './../utils/DOM';
 
 
-
 Highcharts.setOptions({
   colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
   chart: {
@@ -37,3 +36,24 @@ export const withChart = ComposedComponent => props => {
                             update={updateFn}
                             destroy={destroyFn} {...props} />
 };
+
+
+export const BASE_CHART_OPTIONS = {
+  title: {
+    text: null
+  },
+  yAxis: {
+    title: {
+      text: null
+    }
+  },
+  legend: {
+    enabled: false,
+  },
+  credits: {
+    enabled: false
+  },
+  tooltip: {
+    // enabled: false,
+  }
+};
diff --git a/src/index.js b/src/index.js
index 1904c82..019b148 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,13 +2,17 @@
 import React from 'react';
 import {render} from 'react-dom';
 
+import LineWidget from './components/lineWidget';
 import ColumnWidget from './components/columnWidget';
+import StackedColumnWidget from './components/stackedColumnWidget';
+import DonutWidget from './components/donutWidget';
+
 
 /*
 
   library
 
-  : export pie
+  : export donut
   : export line
   : export bar
   : export ...
@@ -16,37 +20,34 @@ import ColumnWidget from './components/columnWidget';
  */
 
 export default {
-  ColumnWidget
+  LineWidget,
+  ColumnWidget,
+  StackedColumnWidget,
+  DonutWidget
 };
 
+const lineWidget = {
+  title: 'Average session length',
+  dateUpdated: '22 Feb 2016',
+};
 
-
-const widget = {
+const columnWidget = {
   title: 'Number of page views',
   dateUpdated: '22 Feb 2016',
-  series: [
-    {
-      name: 'Desktop',
-      data: [
-        {id: 1, description: 'Jan 2017', value: 29.9},
-        {id: 2, description: 'Feb 2017', value: 71.5},
-        {id: 3, description: 'Mar 2017', value: 106.4},
-        {id: 4, description: 'Apr 2017', value: 129.2},
-        {id: 5, description: 'May 2017', value: 144.0},
-        {id: 6, description: 'Jun 2017', value: 176.0},
-        {id: 7, description: 'Jul 2017', value: 135.0},
-        {id: 8, description: 'Aug 2017', value: 148.5},
-        {id: 9, description: 'Sep 2017', value: 216.4},
-        {id: 10, description: 'Oct 2017', value: 194.1},
-        {id: 11, description: 'Nov 2017', value: 95.6},
-        {id: 12, description: 'Dec 2017', value: 54.4},
-      ]
-    }
-  ]
+};
+
+const donutWidget = {
+  title: 'Devices used',
+  dateUpdated: '22 Feb 2016',
 };
 
 
 render(
-  <ColumnWidget widget={widget} />, document.getElementById('root')
+  <div>
+    <LineWidget widget={lineWidget} />
+    <DonutWidget widget={donutWidget} />
+    <ColumnWidget widget={columnWidget} />
+    <StackedColumnWidget widget={columnWidget} />
+  </div>, document.getElementById('root')
 );
 
