From 3981031be869f0ea79b35b65d241bea1fdba4ba9 Mon Sep 17 00:00:00 2001
From: Elise Chant <elise.chant@gmail.com>
Date: Tue, 28 Mar 2017 15:11:45 +1100
Subject: [PATCH] fix(column): fixes unexpected hover/select behvaviours (#11)

* fix(column): fixes unexpected hover/select behvaviours

* fix(column): disable selection of all type

* fix(column): +1
---
 src/components/columnWidget/columnWidget.js | 30 +++++++++------------
 src/hocs/withHighcharts.js                  |  1 +
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/columnWidget/columnWidget.js b/src/components/columnWidget/columnWidget.js
index 7f0df74..8443d0a 100644
--- a/src/components/columnWidget/columnWidget.js
+++ b/src/components/columnWidget/columnWidget.js
@@ -41,17 +41,18 @@ class ColumnWidget extends PureComponent {
           animation: false,
           point: {
             events: {
-              mouseOver: this.onPointUpdate
+              mouseOver: this.onPointUpdate,
             }
           },
-          // allowPointSelect: true,
           states: {
             hover: {
-              color: null,
-              borderWidth:5,
-              borderColor:'Blue'
+              color: 'yellow',
+            },
+            select: { // required because can be selected programatically
+              enabled: false
             }
-          }
+          },
+          allowPointSelect: false,
         },
       },
       legend: {
@@ -83,12 +84,8 @@ class ColumnWidget extends PureComponent {
     };
   }
 
-
-  // this is the scope of point
+  // this has the scope of point
   onPointUpdate(e) {
-    // console.log(this.category, this.y, this.series.name);
-
-    this.select();
     emitter.emit('receive_onPointUpdate', {
       seriesName: this.series.name,
       label: this.category,
@@ -96,9 +93,8 @@ class ColumnWidget extends PureComponent {
     });
   }
 
+  // this has the scope of class
   receiveOnPointUpdate(options, cb) {
-    // console.log(label, value, seriesName);
-
     const {label, value, seriesName} = options;
     const nextFauxLegend = this.state.fauxLegend.map(f => {
       if (f.seriesName === seriesName) {
@@ -112,15 +108,15 @@ class ColumnWidget extends PureComponent {
 
   componentDidMount() {
     if (this.el === null) {
-      throw new Error('must provide a container element');
+      throw new Error('Must provide a container element');
     }
     const _options = this.state.chartOptions;
     _options.chart.renderTo = this.el;
     this.instance = this.props.create(_options);
 
-    // select the last column
+    // "hover" over the last column
     const lastIdx = this.instance.series[0].data.length - 1;
-    this.instance.series[0].data[lastIdx].select();
+    this.instance.series[0].data[lastIdx].onMouseOver();
   }
 
   // todo
@@ -135,8 +131,6 @@ class ColumnWidget extends PureComponent {
     const title = this.props.widget.title;
     const {fauxLegend} = this.state;
 
-    console.log(...fauxLegend)
-
     return (
       <article className={`chart--${chartType}`} role="article">
         <header>
diff --git a/src/hocs/withHighcharts.js b/src/hocs/withHighcharts.js
index 7c01bb3..12af90e 100644
--- a/src/hocs/withHighcharts.js
+++ b/src/hocs/withHighcharts.js
@@ -7,6 +7,7 @@ import {onNextFrame} from './../utils/DOM';
 
 
 Highcharts.setOptions({
+  colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
   chart: {
     style: {
       fontFamily: 'Open Sans,sans-serif'