Merge pull request #1457 from metasfresh/dev-1427

Fix d3 errors #1427

src/components/charts/BarChartComponent/axes.js

@@ -9,6 +9,32 @@ const getXAxisTickAngle = (size, width) => {
   return 2 * Math.atan((a + Math.sqrt(a * a + b * b - c * c)) / (b + c));
 };
 
+export const populateY0Axis = (svg, rangeY, width, data, fields) => {
+  const keys = fields.map(field => field.fieldName);
+  const minY = d3.min(data, d => {
+    return d3.min(keys, key => {
+      return d[key];
+    });
+  });
+  if (minY >= 0) return;
+
+  svg
+    .select("g.y0-axis")
+    .selectAll("*")
+    .remove();
+
+  svg
+    .select("g.y0-axis")
+    .append("line")
+    .attr("y1", rangeY(-3))
+    .attr("x1", 0)
+    .attr("y2", rangeY(-3))
+    .attr("x2", width)
+    .attr("stroke-width", 1)
+    .attr("opacity", 0.5)
+    .attr("stroke", "black");
+};
+
 export const populateXAxis = (svg, rangeX0) => {
   const sizes = [];
 

src/components/charts/BarChartComponent/data.js

@@ -100,7 +100,6 @@ export const drawData = (
     .merge(bars)
     .attr("x", d => ranges.x1(d.key))
     .attr("width", ranges.x1.bandwidth())
-
     .attr("y", d => {
       if (yChanged || reRender) {
         return dimensions.height;
@@ -118,6 +117,6 @@ export const drawData = (
     .transition()
     .duration(1000)
     .attr("y", d => ranges.y(d.value))
-    .attr("height", d => dimensions.height - ranges.y(d.value))
+    .attr("height", d => Math.abs(ranges.y(d.value) - ranges.y(0)))
     .attr("fill", d => ranges.z(d.key));
 };

src/components/charts/BarChartComponent/index.js

@@ -5,7 +5,8 @@ import {
   getXAxisLabelsHeight,
   moveXAxis,
   populateXAxis,
-  populateYAxis
+  populateYAxis,
+  populateY0Axis
 } from "./axes";
 import { drawData } from "./data";
 import { getHorizontalDimensions, getVerticalDimensions } from "./dimensions";
@@ -41,6 +42,9 @@ class BarChartComponent extends Component {
       height
     );
     const rangeY = getYRange(vertical.height, data, fields);
+
+    populateY0Axis(this.svg, rangeY, horizontal.width, data, fields);
+
     populateYAxis(this.svg, rangeY);
 
     // adjust x axis

src/components/charts/BarChartComponent/ranges.js

@@ -23,7 +23,11 @@ export const getYRange = (height, data, fields) => {
     .scaleLinear()
     .range([height, 0])
     .domain([
-      0,
+      d3.min(data, d => {
+        return d3.min(keys, key => {
+          return d[key];
+        });
+      }),
       d3.max(data, d => {
         return d3.max(keys, key => {
           return d[key];

src/components/charts/BarChartComponent/svg.js

@@ -10,6 +10,8 @@ export const getSvg = className => {
 
   container.append("g").classed("x-axis", true);
 
+  container.append("g").classed("y0-axis", true);
+
   container.append("g").classed("y-axis", true);
 
   container.append("g").classed("datasets", true);