feat(charts): change data api to support supplied data (#37)

* change data api to allow real data to flow in * update npmignore
govau · Apr 13, 2017 · c083d25 · c083d25
1 parent 8143b95
commit c083d25
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 47 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,9 +1,14 @@
-build/
-.github/
+.*rc
+.*.yml
+.npmignore
+.idea/
+.editorconfig
+.eslintignore
+.eslintrc
+.babelrc
+.travis.yml
 public/
 scripts/
 config/
 yarn-error.log
-.npmignore
-.idea/
-.editorconfig
+.*.test.js
diff --git a/package.json b/package.json
@@ -13,11 +13,13 @@
     "url": "git+https://github.com/govau/datavizkit.git"
   },
   "main": "src/index.js",
+  "module": "lib/index.js",
   "bugs": {
     "url": "https://github.com/govau/datavizkit/issues"
   },
   "homepage": "https://datavizkit.surge.sh/",
   "dependencies": {
+    "deep-merge": "^1.0.0",
     "highcharts": "^5.0.9",
     "lodash": "^4.17.4",
     "react": "^15.4.2",

diff --git a/src/components/widgets/column/column_dataHelpers.js b/src/components/widgets/column/column_dataHelpers.js
@@ -1,22 +1,24 @@
 
-// todo - not import Highcharts again
-import Highcharts from 'highcharts';
 import last from 'lodash/last';
+import merge from 'lodash/merge';
 
 
 export const makeChartOptions = ({
   emitSetState = () => {},
-  widget,
+  chartConfig = {},
+  title,
+  units,
+  type,
+  dateLastUpdated,
 }) => {
 
-  const categories = Highcharts.getOptions().lang.shortMonths;
-
-  return {
+  const config = merge({
     // default column options
     chart: {
       type: 'column',
       events: {
         load: function() {  // equivalent to constructor callback
+
           var seriesData = this.series[0].data;//this is series data
           seriesData.forEach((d, idx) => {
             if (d.y === null) { //find null value in series
@@ -49,12 +51,12 @@ export const makeChartOptions = ({
       },
     },
     title: {
-      text: widget.title,
+      text: title,
       align: 'left',
     },
     subtitle: {
       useHTML: true,
-      text: `<span>Last updated <time dateTime="${widget.dateUpdated}">${widget.dateUpdated}</time></span>`,
+      text: `<span>Last updated <time dateTime="${dateLastUpdated}">${dateLastUpdated}</time></span>`,
       align: 'left',
     },
     plotOptions: {
@@ -65,6 +67,7 @@ export const makeChartOptions = ({
           events: {
             mouseOver: function() {
               const sliceIdx = this.index;
+              // todo - identify all data permutations
               const customLegendData = this.series.chart.series.map(s => {
                 const sliceData = s.data[sliceIdx];
                 return {
@@ -92,30 +95,25 @@ export const makeChartOptions = ({
 
     // instance props
     xAxis: {
-      labels: {
-        formatter: function () {
-          return categories[this.value] + ' 2017';
-        },
-      },
+      categories: [],   // is replaced by localConfig
+
+      // labels: {
+      //   formatter: function () {
+      //     return periodData.xAxisLabels[this.value] + ' 2017';
+      //   },
+      // },
     },
     yAxis: {
       title: {
         text: null
       },
-      // labels: {
-      //   formatter: function() {
-      //     return this.value + ' (units)';
-      //   }
-      // }
     },
-    series: [
-      {
-        name: "Desktop",
-        data: [29.9, 71.5, 106.4, null, null, 176, 135, 148.5, 216.4, null, 95.6, 54.4]
-      }
-    ],
+    series: [],   // is replaced by localConfig
     tooltip: {
       enabled: false,
-    },
-  };
+    }
+  }, chartConfig);
+
+  return config;
+
 };
diff --git a/src/components/widgets/column/column_widget.js b/src/components/widgets/column/column_widget.js
@@ -48,18 +48,23 @@ class ColumnWidget extends PureComponent {
 
   render() {
     const {customLegend} = this.state;
+    const {title, units, type, dateLastUpdated,
+      chartConfig} = this.props;
 
     const chartOptions = makeChartOptions({
       emitSetState: this.proxiedSetState,
-      widget: this.props.widget
+      chartConfig,
+      title,
+      units,
+      type,
+      dateLastUpdated,
     });
 
     return (
       <article className={`chart--column`} role="article">
         <section>
           <Chart ref={el => this.chartInstance = el}
-                 options={chartOptions}
-                 callback={this.chartCallback}>
+                 options={chartOptions}>
             <div>
               {customLegend && customLegend.length && <Legend data={customLegend} />}
             </div>

diff --git a/src/components/widgets/column/readme.md b/src/components/widgets/column/readme.md
@@ -1,7 +1,9 @@
 Basic Column Widget:
 
-    <ColumnWidget widget={{
-      title: 'Devices used',
-      dateUpdated: '22 Feb 2016',
-    }} />
+    <ColumnWidget title='Number of page views'
+                  units='number'
+                  type='column'
+                  dateLastUpdated='22 Feb 2016'
+        chartConfig={{}} 
+        chartProps={{}} />
 
diff --git a/src/index.js b/src/index.js
@@ -9,16 +9,12 @@ import LineWidget from './components/widgets/line';
 import StackedColumnWidget from './components/widgets/stackedColumn'
 import SparklineWidget from './components/widgets/sparkline'
 
+
 const lineWidget = {
   title: 'Average session length',
   dateUpdated: '22 Feb 2016',
 };
 
-const columnWidget = {
-  title: 'Number of page views',
-  dateUpdated: '22 Feb 2016',
-};
-
 const donutWidget = {
   title: 'Devices used',
   dateUpdated: '22 Feb 2016',
@@ -27,19 +23,19 @@ const donutWidget = {
 const stackedColumnWidgetNormal = {
   title: 'Page views by state (normal stacking)',
   dateUpdated: '22 Feb 2016'
-}
+};
 
 const stackedColumnWidgetPercentage = {
   title: 'Page views by state (percentage stacking)',
   dateUpdated: '22 Feb 2016',
   stacking: 'percent'
-}
+};
 
 const splineWidget = {
   title: 'Approved suppliers',
   dateUpdated: '16 Mar 2017',
   previousDate: 'Jan 2017'
-}
+};
 
 render(
   <div>
@@ -59,7 +55,15 @@ render(
     <LineWidget widget={lineWidget} />
     <br/>
 
-    <ColumnWidget widget={columnWidget} />
+    <ColumnWidget widget={{
+                    type: 'column',
+                    title: 'Number of page views',
+                    units: 'number',
+                    dateUpdated: '22 Feb 2016',
+                  }}
+                  chartConfig={{}}
+                  chartProps={{}} />
+
     <br/>
 
     <DonutWidget widget={donutWidget} />
@@ -72,6 +76,7 @@ render(
     <br/>
 
     <SparklineWidget widget={splineWidget} />
+    <br/>
 
   </div>, document.getElementById('root')
 );

diff --git a/yarn.lock b/yarn.lock
@@ -2000,6 +2000,12 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
+deep-merge@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/deep-merge/-/deep-merge-1.0.0.tgz#0906cc56c3a93099ae093fe995589eefe38a0e95"
+  dependencies:
+    xtend "~1.0.3"
+
 default-require-extensions@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -6909,6 +6915,10 @@ xml-name-validator@^2.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
 
+xtend@~1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-1.0.3.tgz#3f5d937353cced8e085399a563fdb22541c2960a"
+
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"