feat(graph): remove dep

removes dependency on immutable and adds title prop support for tooltip

package.json

@@ -32,7 +32,6 @@
     "glob": "^7.1.1",
     "gulp": "^3.9.1",
     "html-loader": "^0.4.4",
-    "immutable": "^3.8.1",
     "javascript-natural-sort": "^0.7.1",
     "jest": "^19.0.2",
     "nsp": "^2.6.2",

src/components/charts/BarChart/BarChart.examples.md

@@ -10,6 +10,7 @@ Standard Area AreaChart
        xDataType='date'
        showIcon
        showXLabel
+       tooltipTitle='OPERATIONS'
       />
     </div>
 

src/components/charts/BarChart/BarChart.jsx

@@ -1,20 +1,17 @@
 import React, { PropTypes } from 'react'
 import Rect from './Rect'
 import ToolTip from './BarChartTooltip'
-
 import * as ChartUtils from '../Chart/utils'
-import Immutable from 'immutable'
 var d3 = Object.assign({}, require('d3-time-format'), require('d3-axis'))
-
 const { array, number, object, string, bool } = PropTypes
-
 class BarChart extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
       tooltip: {
         display: false,
         color: null,
+        title: '',
         data: { key: '', value: '' },
         pos: { x: '', y: '' }
       }
@@ -28,6 +25,7 @@ class BarChart extends React.Component {
       tooltip: {
         display: true,
         color: e.target.getAttribute('fill'),
+        title: this.props.tooltipTitle,
         data: {
           key: e.target.getAttribute('data-key'),
           value: e.target.getAttribute('data-value')
@@ -55,8 +53,9 @@ class BarChart extends React.Component {
     const innerHeight = height - (margin.top + margin.bottom)
     const transform = `translate(-${margin.left}, ${margin.top})`
     let xScale = null
-    const data = Immutable.fromJS(this.props.data).toJS()
-    const xScaleTimeLineData = Immutable.fromJS(this.props.data).toJS()
+    const data = JSON.parse(JSON.stringify(this.props.data))
+    const xScaleTimeLineData = JSON.parse(JSON.stringify(this.props.data))
+
     if (this.props.xDataType === 'date') {
       const parseDate = d3.timeParse('%m-%d-%Y %H:%M:%S')
       data.forEach((d) => {
@@ -108,7 +107,8 @@ BarChart.propTypes = {
   width: number,
   xDataType: string,
   showXLabel: bool,
-  showIcon: bool
+  showIcon: bool,
+  tooltipTitle: string
 }
 
 BarChart.defaultProps = {
@@ -119,7 +119,8 @@ BarChart.defaultProps = {
   width: 200,
   xDataType: 'month',
   showXLabel: false,
-  showIcon: false
+  showIcon: false,
+  tooltipTitle: ''
 }
 
 export default BarChart

src/components/charts/BarChart/BarChartTooltip.jsx

@@ -59,7 +59,7 @@ const ToolTip = (props) => {
         transform={transformLine}
       />
       <text is visibility={visibility} transform={transformText} >
-        <tspan is x='0' y='10' text-anchor='left' font-size='12px' fill='#657d8e'>{`OPERATIONS (${props.tooltip.data.value})`}</tspan>
+        <tspan is x='0' y='10' text-anchor='left' font-size='12px' fill='#657d8e'>{`${props.tooltip.title} (${props.tooltip.data.value})`}</tspan>
         <tspan is x='0' y='20' text-anchor='left' dy='12px' font-size='12px' fill='#657d8e'>{props.tooltip.data.key}</tspan>
       </text>
 

yarn.lock

@@ -4380,10 +4380,6 @@ image-size@~0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.1.tgz#28eea8548a4b1443480ddddc1e083ae54652439f"
 
-immutable@^3.8.1:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
-
 import-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/import-regex/-/import-regex-1.1.0.tgz#a55c52e4c705c765ca210e9242a06bbcc8aa7f66"