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
govau · Mar 31, 2017 · d258cab · d258cab
1 parent 3981031
commit d258cab
Show file tree

Hide file tree

Showing 17 changed files with 589 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',
+    }} />