feat: add negative value support for the LineGraph (#164)

* feat: add negative value support for the LineGraph

* remove package-lock.json

* refine

Author: yaoterry

.gitignore

@@ -4,4 +4,5 @@ css/
 cjs/
 node_modules
 .DS_Store
-*.log
+*.log
+.idea/

components/LineGraph/LineGraph.js

@@ -89,6 +89,14 @@ const defaultProps = {
   isXTime: true,
 };
 
+const getYDomainMin = data => {
+  const dataMin = d3.min(data, d => d3.min(d.slice(0, d.length - 1)));
+  if (dataMin > 0) {
+    return 0;
+  }
+  return dataMin;
+};
+
 class LineGraph extends Component {
   componentDidMount() {
     const {
@@ -162,8 +170,10 @@ class LineGraph extends Component {
           ? nextProps.data
           : _.flatten(nextProps.datasets);
       this.x.domain(d3.extent(data, d => d[d.length - 1]));
-      this.y.domain([0, d3.max(data, d => d3.max(d.slice(0, d.length - 1)))]);
-
+      this.y.domain([
+        getYDomainMin(data),
+        d3.max(data, d => d3.max(d.slice(0, d.length - 1))),
+      ]);
       this.updateEmptyState(
         nextProps.data.length > 0 ? nextProps.data : nextProps.datasets
       );
@@ -324,10 +334,9 @@ class LineGraph extends Component {
       .scaleLinear()
       .range([this.height, 0])
       .domain([
-        0,
+        getYDomainMin(flatData),
         d3.max(flatData, d => d3.max(d.slice(0, d.length - 1))) || 10,
       ]);
-
     this.line = d3
       .line()
       .x(d => this.x(d[d.length - 1]))

components/LineGraph/LineGraph.story.js

@@ -152,11 +152,15 @@ storiesOf('LineGraph', module)
   .addWithInfo('Static', ` Static Example. `, () => (
     <LineGraph
       datasets={[
-        [[43, 1507563000000], [27, 1507563900000], [33, 1507564800000]],
         [
-          [48.633333333333, 1507563004000],
+          [43, 1507563000000],
+          [-27, 1507563900000],
+          [33, 1507564800000],
+        ],
+        [
+          [-48.633333333333, 1507563004000],
           [21, 1507563900140],
-          [38, 1507564830000],
+          [-38, 1507564830000],
         ],
       ]}
       onHover={action('Hover')}
@@ -167,8 +171,20 @@ storiesOf('LineGraph', module)
   .addWithInfo('Number values for X', ` Static Example. `, () => (
     <LineGraph
       datasets={[
-        [[45, 12], [23, 14], [33, 18], [31, 20], [12, 21]],
-        [[48.633333333333, 11], [21, 15], [38, 16], [21, 19], [31, 21]],
+        [
+          [45, 12],
+          [23, 14],
+          [33, 18],
+          [31, 20],
+          [12, 21],
+        ],
+        [
+          [48.633333333333, 11],
+          [21, 15],
+          [38, 16],
+          [21, 19],
+          [31, 21],
+        ],
       ]}
       onHover={action('Hover')}
       onMouseOut={action('Mouseout')}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-addons-data-viz-react",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "Carbon Data Visualization",
   "main": "cjs/index.js",
   "module": "es/index.js",