@density/chart-line-chart - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

axes.js

@@ -76,3 +76,3 @@ import * as d3 from 'd3';
     element.selectAll('.tick text')
-      .attr('transform', `translate(0,${-10 + bottomOffset})`)
+      .attr('transform', `translate(0,${bottomOffset})`)
       .attr('font-size', axisFontSize)
@@ -87,2 +87,3 @@ };
   showMaximumPoint,
+  verticalBaselineOffset = 10,
 
@@ -92,3 +93,3 @@ points,
   axisRuleLineDashWidth,
-  axisRuleLineDashSpacing,
+  axisRuleLineDashSpacing
 }) {
@@ -123,3 +124,3 @@ leftOffset = typeof leftOffset === 'undefined' ? 20 : leftOffset;
       .attr('class', 'axis-y-point-label')
-    enterSelectionGroup.append('path')
+    enterSelectionGroup.append('line')
       .attr('class', 'axis-y-point-rule')
@@ -133,11 +134,7 @@ enterSelectionGroup.append('rect')
         let x = -1 * (leftMargin - leftOffset);
-        let y = scale(d.value) + axisFontSize * 0.4;
-
-        // Adjust the first datapoint to match with the vertical baseline of the chart.
-        if (d.value === firstEventYValue) {
-          y -= (defaultDataset.verticalBaselineOffset || 0);
-        }
+        let y = scale(d.value);
         return `translate(${x},${y})`;
       });
     mergeSelection.select('.axis-y-point-label')
+      .attr('transform', 'translate(0,5)')
       .text(formatter || (d => {
@@ -147,25 +144,16 @@ return `${d.value}`;
     mergeSelection.select('.axis-y-point-rule')
-      .attr('transform', `translate(${leftMargin - leftOffset},${-1 * (axisFontSize * 0.4)})`)
-      .attr('stroke', colorVariables.gray)
+      .attr('transform', `translate(${leftMargin - leftOffset},0)`)
+      .attr('stroke', d => d.hasRule ? colorVariables.gray : 'transparent')
       .attr('stroke-width', '1')
       .attr('shape-rendering', 'crispEdges')
-      .attr('d', d => {
-        // Don't add horizontal lines for points that don't specify a rule is required.
-        if (!d.hasRule) {
-          return '';
-        }
-
-        return `M0,0 ${(function(graphWidth) {
-          let linePath = '';
-          for (let i = 0; i < graphWidth; i += axisRuleLineDashWidth + axisRuleLineDashSpacing) {
-            linePath += `H${i+axisRuleLineDashWidth} M${i+axisRuleLineDashWidth+axisRuleLineDashSpacing},0`;
-          }
-          return linePath;
-        })(graphWidth)}`;
-      });
+      .attr('x1', '0')
+      .attr('x2', graphWidth)
+      .attr('y1', 0)
+      .attr('y2', 0)
+      .attr('stroke-dasharray', '5,5');
     mergeSelection.select('.axis-y-point-shadow')
       .attr('x', leftMargin - leftOffset)
-      .attr('y', -1 * (axisFontSize * 0.4))
+      .attr('y', 0)
       .attr('width', graphWidth)
-      .attr('height', d => scale(0) - scale(d.value))
+      .attr('height', d => scale(0) - scale(d.value) + verticalBaselineOffset)
       .attr('fill', d => {
@@ -172,0 +160,0 @@ if (d.hasShadow) {

dist/axes.js

@@ -94,3 +94,3 @@ 'use strict';
     // Adjust the vertical spacing of each tick on the axis
-    element.selectAll('.tick text').attr('transform', 'translate(0,' + (-10 + bottomOffset) + ')').attr('font-size', axisFontSize);
+    element.selectAll('.tick text').attr('transform', 'translate(0,' + bottomOffset + ')').attr('font-size', axisFontSize);
   };
@@ -104,2 +104,4 @@ }
       showMaximumPoint = _ref5.showMaximumPoint,
+      _ref5$verticalBaselin = _ref5.verticalBaselineOffset,
+      verticalBaselineOffset = _ref5$verticalBaselin === undefined ? 10 : _ref5$verticalBaselin,
       points = _ref5.points,
@@ -139,3 +141,3 @@ axisRuleLineDashWidth = _ref5.axisRuleLineDashWidth,
     enterSelectionGroup.append('text').attr('class', 'axis-y-point-label');
-    enterSelectionGroup.append('path').attr('class', 'axis-y-point-rule');
+    enterSelectionGroup.append('line').attr('class', 'axis-y-point-rule');
     enterSelectionGroup.append('rect').attr('class', 'axis-y-point-shadow');
@@ -146,29 +148,13 @@
       var x = -1 * (leftMargin - leftOffset);
-      var y = scale(d.value) + axisFontSize * 0.4;
-
-      // Adjust the first datapoint to match with the vertical baseline of the chart.
-      if (d.value === firstEventYValue) {
-        y -= defaultDataset.verticalBaselineOffset || 0;
-      }
+      var y = scale(d.value);
       return 'translate(' + x + ',' + y + ')';
     });
-    mergeSelection.select('.axis-y-point-label').text(formatter || function (d) {
+    mergeSelection.select('.axis-y-point-label').attr('transform', 'translate(0,5)').text(formatter || function (d) {
       return '' + d.value;
     });
-    mergeSelection.select('.axis-y-point-rule').attr('transform', 'translate(' + (leftMargin - leftOffset) + ',' + -1 * (axisFontSize * 0.4) + ')').attr('stroke', _colors2.default.gray).attr('stroke-width', '1').attr('shape-rendering', 'crispEdges').attr('d', function (d) {
-      // Don't add horizontal lines for points that don't specify a rule is required.
-      if (!d.hasRule) {
-        return '';
-      }
-
-      return 'M0,0 ' + function (graphWidth) {
-        var linePath = '';
-        for (var i = 0; i < graphWidth; i += axisRuleLineDashWidth + axisRuleLineDashSpacing) {
-          linePath += 'H' + (i + axisRuleLineDashWidth) + ' M' + (i + axisRuleLineDashWidth + axisRuleLineDashSpacing) + ',0';
-        }
-        return linePath;
-      }(graphWidth);
-    });
-    mergeSelection.select('.axis-y-point-shadow').attr('x', leftMargin - leftOffset).attr('y', -1 * (axisFontSize * 0.4)).attr('width', graphWidth).attr('height', function (d) {
-      return scale(0) - scale(d.value);
+    mergeSelection.select('.axis-y-point-rule').attr('transform', 'translate(' + (leftMargin - leftOffset) + ',0)').attr('stroke', function (d) {
+      return d.hasRule ? _colors2.default.gray : 'transparent';
+    }).attr('stroke-width', '1').attr('shape-rendering', 'crispEdges').attr('x1', '0').attr('x2', graphWidth).attr('y1', 0).attr('y2', 0).attr('stroke-dasharray', '5,5');
+    mergeSelection.select('.axis-y-point-shadow').attr('x', leftMargin - leftOffset).attr('y', 0).attr('width', graphWidth).attr('height', function (d) {
+      return scale(0) - scale(d.value) + verticalBaselineOffset;
     }).attr('fill', function (d) {
@@ -175,0 +161,0 @@ if (d.hasShadow) {

dist/index.js

@@ -149,6 +149,8 @@ 'use strict';
     dataPoints.lastEvent = defaultDataset.data.slice(-1)[0];
+    dataPoints.nextToLastEvent = defaultDataset.data.length > 1 ? defaultDataset.data.slice(-2)[0] : null;
+    dataPoints.bucketMillis = dataPoints.nextToLastEvent ? _moment2.default.utc(dataPoints.lastEvent.timestamp).diff(_moment2.default.utc(dataPoints.nextToLastEvent.timestamp), 'milliseconds') : 0;
 
     dataPoints.firstEventXValue = _moment2.default.utc(dataPoints.firstEvent.timestamp).valueOf(); /* epoch ms */
     dataPoints.firstEventYValue = dataPoints.firstEvent.value;
-    dataPoints.lastEventXValue = _moment2.default.utc(dataPoints.lastEvent.timestamp).valueOf(); /* epoch ms */
+    dataPoints.lastEventXValue = _moment2.default.utc(dataPoints.lastEvent.timestamp).valueOf() + dataPoints.bucketMillis; /* epoch ms */
     dataPoints.lastEventYValue = dataPoints.lastEvent.value;
@@ -229,3 +231,3 @@
           if (eventAtPosition && (renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue)) {
-            return topMargin + yScale(eventAtPosition.value) - defaultDataset.verticalBaselineOffset;
+            return topMargin + yScale(eventAtPosition.value);
           } else {
@@ -319,3 +321,3 @@ return -100000000;
 
-    var waterlineFillPostfix = renderAfterLastDatapoint ? 'H' + xScale(dataPoints.endXValue) + 'V' + graphHeight + 'H0' : 'H' + xScale(dataPoints.lastEventXValue) + 'V' + graphHeight + 'H0';
+    var waterlineFillPostfix = renderAfterLastDatapoint ? 'H' + xScale(dataPoints.endXValue) + 'V' + (graphHeight + verticalBaselineOffset) + 'H0' : 'H' + xScale(dataPoints.lastEventXValue) + 'V' + (graphHeight + verticalBaselineOffset) + 'H0';
 
@@ -336,6 +338,6 @@ var waterlineStrokePostfix = renderAfterLastDatapoint ? 'H' + xScale(dataPoints.endXValue) : 'H' + xScale(dataPoints.lastEventXValue);
           // For the first plotted point, don't draw an outline on the left edge.
-          return acc + 'M0,' + (yPosition - verticalBaselineOffset);
+          return acc + 'M0,' + yPosition;
         } else if (xPosition > 0) {
           // Plot each point my moving horizontally then vertically.
-          return acc + 'H' + xPosition + 'V' + (yPosition - verticalBaselineOffset);
+          return acc + 'H' + xPosition + 'V' + yPosition;
         } else {
@@ -342,0 +344,0 @@ return acc;

dist/story.js

@@ -156,3 +156,3 @@ 'use strict';
       axisRuleLineDashSpacing: 10,
-      points: [{ value: 4, hasRule: false }, { value: 4, hasShadow: true }],
+      points: [{ value: 4, hasRule: true, hasShadow: true }],
       showMaximumPoint: false
@@ -249,3 +249,3 @@ }),
       verticalBaselineOffset: 10,
-      data: [{ timestamp: "2018-04-11T00:10:26Z", value: 5 }, { timestamp: "2018-04-11T00:20:52Z", value: 5 }, { timestamp: "2018-04-11T00:31:18Z", value: 5 }, { timestamp: "2018-04-11T00:41:44Z", value: 5 }, { timestamp: "2018-04-11T00:52:10Z", value: 5 }, { timestamp: "2018-04-11T01:02:36Z", value: 5 }, { timestamp: "2018-04-11T01:13:02Z", value: 5 }, { timestamp: "2018-04-11T01:23:28Z", value: 5 }, { timestamp: "2018-04-11T01:33:54Z", value: 5 }, { timestamp: "2018-04-11T01:44:20Z", value: 5 }, { timestamp: "2018-04-11T01:54:46Z", value: 5 }, { timestamp: "2018-04-11T02:05:13Z", value: 5 }, { timestamp: "2018-04-11T02:15:39Z", value: 5 }, { timestamp: "2018-04-11T02:26:05Z", value: 5 }, { timestamp: "2018-04-11T02:36:31Z", value: 5 }, { timestamp: "2018-04-11T02:46:57Z", value: 5 }, { timestamp: "2018-04-11T02:57:23Z", value: 5 }, { timestamp: "2018-04-11T03:07:49Z", value: 5 }, { timestamp: "2018-04-11T03:18:15Z", value: 5 }, { timestamp: "2018-04-11T03:28:41Z", value: 5 }, { timestamp: "2018-04-11T03:39:07Z", value: 5 }, { timestamp: "2018-04-11T03:49:33Z", value: 5 }, { timestamp: "2018-04-11T03:59:59Z", value: 5 }, { timestamp: "2018-04-11T04:10:26Z", value: 5 }, { timestamp: "2018-04-11T04:20:52Z", value: 0 }, { timestamp: "2018-04-11T04:31:18Z", value: 0 }, { timestamp: "2018-04-11T04:41:44Z", value: 0 }, { timestamp: "2018-04-11T04:52:10Z", value: 0 }, { timestamp: "2018-04-11T05:02:36Z", value: 0 }, { timestamp: "2018-04-11T05:13:02Z", value: 0 }, { timestamp: "2018-04-11T05:23:28Z", value: 0 }, { timestamp: "2018-04-11T05:33:54Z", value: 0 }, { timestamp: "2018-04-11T05:44:20Z", value: 0 }, { timestamp: "2018-04-11T05:54:46Z", value: 0 }, { timestamp: "2018-04-11T06:05:13Z", value: 0 }, { timestamp: "2018-04-11T06:15:39Z", value: 0 }, { timestamp: "2018-04-11T06:26:05Z", value: 0 }, { timestamp: "2018-04-11T06:36:31Z", value: 0 }, { timestamp: "2018-04-11T06:46:57Z", value: 0 }, { timestamp: "2018-04-11T06:57:23Z", value: 0 }, { timestamp: "2018-04-11T07:07:49Z", value: 0 }, { timestamp: "2018-04-11T07:18:15Z", value: 0 }, { timestamp: "2018-04-11T07:28:41Z", value: 0 }, { timestamp: "2018-04-11T07:39:07Z", value: 0 }, { timestamp: "2018-04-11T07:49:33Z", value: 0 }, { timestamp: "2018-04-11T07:59:59Z", value: 2.5 }, { timestamp: "2018-04-11T08:10:26Z", value: 5 }, { timestamp: "2018-04-11T08:20:52Z", value: 7.5 }, { timestamp: "2018-04-11T08:31:18Z", value: 7.5 }, { timestamp: "2018-04-11T08:41:44Z", value: 10 }, { timestamp: "2018-04-11T08:52:10Z", value: 7.5 }, { timestamp: "2018-04-11T09:02:36Z", value: 10 }, { timestamp: "2018-04-11T09:13:02Z", value: 12.5 }, { timestamp: "2018-04-11T09:23:28Z", value: 12.5 }, { timestamp: "2018-04-11T09:33:54Z", value: 12.5 }, { timestamp: "2018-04-11T09:44:20Z", value: 17.5 }, { timestamp: "2018-04-11T09:54:46Z", value: 20 }, { timestamp: "2018-04-11T10:05:12Z", value: 20 }, { timestamp: "2018-04-11T10:15:39Z", value: 17.5 }, { timestamp: "2018-04-11T10:26:05Z", value: 12.5 }, { timestamp: "2018-04-11T10:36:31Z", value: 17.5 }, { timestamp: "2018-04-11T10:46:57Z", value: 20 }, { timestamp: "2018-04-11T10:57:23Z", value: 20 }, { timestamp: "2018-04-11T11:07:49Z", value: 15 }, { timestamp: "2018-04-11T11:18:15Z", value: 17.5 }, { timestamp: "2018-04-11T11:28:41Z", value: 17.5 }, { timestamp: "2018-04-11T11:39:07Z", value: 22.5 }, { timestamp: "2018-04-11T11:49:33Z", value: 25 }, { timestamp: "2018-04-11T11:59:59Z", value: 20 }, { timestamp: "2018-04-11T12:10:26Z", value: 12.5 }, { timestamp: "2018-04-11T12:20:52Z", value: 10 }, { timestamp: "2018-04-11T12:31:18Z", value: 10 }, { timestamp: "2018-04-11T12:41:44Z", value: 10 }, { timestamp: "2018-04-11T12:52:10Z", value: 22.5 }, { timestamp: "2018-04-11T13:02:36Z", value: 20 }, { timestamp: "2018-04-11T13:13:02Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T13:23:28Z", value: 25 }, { timestamp: "2018-04-11T13:33:54Z", value: 22.5 }, { timestamp: "2018-04-11T13:44:20Z", value: 25 }, { timestamp: "2018-04-11T13:54:46Z", value: 22.5 }, { timestamp: "2018-04-11T14:05:12Z", value: 22.5 }, { timestamp: "2018-04-11T14:15:39Z", value: 25 }, { timestamp: "2018-04-11T14:26:05Z", value: 32.5 }, { timestamp: "2018-04-11T14:36:31Z", value: 30 }, { timestamp: "2018-04-11T14:46:57Z", value: 32.5 }, { timestamp: "2018-04-11T14:57:23Z", value: 32.5 }, { timestamp: "2018-04-11T15:07:49Z", value: 30 }, { timestamp: "2018-04-11T15:18:15Z", value: 30 }, { timestamp: "2018-04-11T15:28:41Z", value: 30 }, { timestamp: "2018-04-11T15:39:07Z", value: 32.5 }, { timestamp: "2018-04-11T15:49:33Z", value: 35 }, { timestamp: "2018-04-11T15:59:59Z", value: 22.5 }, { timestamp: "2018-04-11T16:10:25Z", value: 25 }, { timestamp: "2018-04-11T16:20:52Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T16:31:18Z", value: 35 }, { timestamp: "2018-04-11T16:41:44Z", value: 35 }, { timestamp: "2018-04-11T16:52:10Z", value: 25 }, { timestamp: "2018-04-11T17:02:36Z", value: 32.5 }, { timestamp: "2018-04-11T17:13:02Z", value: 32.5 }, { timestamp: "2018-04-11T17:23:28Z", value: 30 }, { timestamp: "2018-04-11T17:33:54Z", value: 30 }, { timestamp: "2018-04-11T17:44:20Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T17:54:46Z", value: 25 }, { timestamp: "2018-04-11T18:05:12Z", value: 25 }, { timestamp: "2018-04-11T18:15:39Z", value: 22.5 }, { timestamp: "2018-04-11T18:26:05Z", value: 7.5 }, { timestamp: "2018-04-11T18:36:31Z", value: 10 }, { timestamp: "2018-04-11T18:46:57Z", value: 10 }, { timestamp: "2018-04-11T18:57:23Z", value: 10 }, { timestamp: "2018-04-11T19:07:49Z", value: 2.5 }, { timestamp: "2018-04-11T19:18:15Z", value: 2.5 }, { timestamp: "2018-04-11T19:28:41Z", value: 2.5 }, { timestamp: "2018-04-11T19:39:07Z", value: 5 }, { timestamp: "2018-04-11T19:49:33Z", value: 10 }, { timestamp: "2018-04-11T19:59:59Z", value: 10 }, { timestamp: "2018-04-11T20:10:25Z", value: 10 }, { timestamp: "2018-04-11T20:20:52Z", value: 10 }, { timestamp: "2018-04-11T20:31:18Z", value: 10 }, { timestamp: "2018-04-11T20:41:44Z", value: 7.5 }, { timestamp: "2018-04-11T20:52:10Z", value: 7.5 }, { timestamp: "2018-04-11T21:02:36Z", value: 7.5 }, { timestamp: "2018-04-11T21:13:02Z", value: 7.5 }, { timestamp: "2018-04-11T21:23:28Z", value: 7.5 }, { timestamp: "2018-04-11T21:33:54Z", value: 7.5 }, { timestamp: "2018-04-11T21:44:20Z", value: 7.5 }, { timestamp: "2018-04-11T21:54:46Z", value: 7.5 }, { timestamp: "2018-04-11T22:05:12Z", value: 7.5 }, { timestamp: "2018-04-11T22:15:39Z", value: 7.5 }, { timestamp: "2018-04-11T22:26:05Z", value: 7.5 }, { timestamp: "2018-04-11T22:36:31Z", value: 7.5 }, { timestamp: "2018-04-11T22:46:57Z", value: 7.5 }, { timestamp: "2018-04-11T22:57:23Z", value: 7.5 }, { timestamp: "2018-04-11T23:07:49Z", value: 5 }, { timestamp: "2018-04-11T23:18:15Z", value: 5 }, { timestamp: "2018-04-11T23:28:41Z", value: 5 }, { timestamp: "2018-04-11T23:39:07Z", value: 5 }, { timestamp: "2018-04-11T23:49:33Z", value: 5 }, { timestamp: "2018-04-11T23:59:59Z", value: 5 }].sort(function (a, b) {
+      data: [{ timestamp: "2018-04-11T00:10:26Z", value: 5 }, { timestamp: "2018-04-11T00:20:52Z", value: 5 }, { timestamp: "2018-04-11T00:31:18Z", value: 5 }, { timestamp: "2018-04-11T00:41:44Z", value: 5 }, { timestamp: "2018-04-11T00:52:10Z", value: 5 }, { timestamp: "2018-04-11T01:02:36Z", value: 5 }, { timestamp: "2018-04-11T01:13:02Z", value: 5 }, { timestamp: "2018-04-11T01:23:28Z", value: 5 }, { timestamp: "2018-04-11T01:33:54Z", value: 5 }, { timestamp: "2018-04-11T01:44:20Z", value: 5 }, { timestamp: "2018-04-11T01:54:46Z", value: 5 }, { timestamp: "2018-04-11T02:05:13Z", value: 5 }, { timestamp: "2018-04-11T02:15:39Z", value: 5 }, { timestamp: "2018-04-11T02:26:05Z", value: 5 }, { timestamp: "2018-04-11T02:36:31Z", value: 5 }, { timestamp: "2018-04-11T02:46:57Z", value: 5 }, { timestamp: "2018-04-11T02:57:23Z", value: 5 }, { timestamp: "2018-04-11T03:07:49Z", value: 5 }, { timestamp: "2018-04-11T03:18:15Z", value: 5 }, { timestamp: "2018-04-11T03:28:41Z", value: 5 }, { timestamp: "2018-04-11T03:39:07Z", value: 5 }, { timestamp: "2018-04-11T03:49:33Z", value: 5 }, { timestamp: "2018-04-11T03:59:59Z", value: 5 }, { timestamp: "2018-04-11T04:10:26Z", value: 5 }, { timestamp: "2018-04-11T04:20:52Z", value: 0 }, { timestamp: "2018-04-11T04:31:18Z", value: 0 }, { timestamp: "2018-04-11T04:41:44Z", value: 0 }, { timestamp: "2018-04-11T04:52:10Z", value: 0 }, { timestamp: "2018-04-11T05:02:36Z", value: 0 }, { timestamp: "2018-04-11T05:13:02Z", value: 0 }, { timestamp: "2018-04-11T05:23:28Z", value: 0 }, { timestamp: "2018-04-11T05:33:54Z", value: 0 }, { timestamp: "2018-04-11T05:44:20Z", value: 0 }, { timestamp: "2018-04-11T05:54:46Z", value: 0 }, { timestamp: "2018-04-11T06:05:13Z", value: 0 }, { timestamp: "2018-04-11T06:15:39Z", value: 0 }, { timestamp: "2018-04-11T06:26:05Z", value: 0 }, { timestamp: "2018-04-11T06:36:31Z", value: 0 }, { timestamp: "2018-04-11T06:46:57Z", value: 0 }, { timestamp: "2018-04-11T06:57:23Z", value: 0 }, { timestamp: "2018-04-11T07:07:49Z", value: 0 }, { timestamp: "2018-04-11T07:18:15Z", value: 0 }, { timestamp: "2018-04-11T07:28:41Z", value: 0 }, { timestamp: "2018-04-11T07:39:07Z", value: 0 }, { timestamp: "2018-04-11T07:49:33Z", value: 0 }, { timestamp: "2018-04-11T07:59:59Z", value: 2.5 }, { timestamp: "2018-04-11T08:10:26Z", value: 5 }, { timestamp: "2018-04-11T08:20:52Z", value: 7.5 }, { timestamp: "2018-04-11T08:31:18Z", value: 7.5 }, { timestamp: "2018-04-11T08:41:44Z", value: 10 }, { timestamp: "2018-04-11T08:52:10Z", value: 100 }, { timestamp: "2018-04-11T09:02:36Z", value: 100 }, { timestamp: "2018-04-11T09:13:02Z", value: 12.5 }, { timestamp: "2018-04-11T09:23:28Z", value: 12.5 }, { timestamp: "2018-04-11T09:33:54Z", value: 12.5 }, { timestamp: "2018-04-11T09:44:20Z", value: 17.5 }, { timestamp: "2018-04-11T09:54:46Z", value: 20 }, { timestamp: "2018-04-11T10:05:12Z", value: 20 }, { timestamp: "2018-04-11T10:15:39Z", value: 17.5 }, { timestamp: "2018-04-11T10:26:05Z", value: 12.5 }, { timestamp: "2018-04-11T10:36:31Z", value: 17.5 }, { timestamp: "2018-04-11T10:46:57Z", value: 20 }, { timestamp: "2018-04-11T10:57:23Z", value: 20 }, { timestamp: "2018-04-11T11:07:49Z", value: 15 }, { timestamp: "2018-04-11T11:18:15Z", value: 17.5 }, { timestamp: "2018-04-11T11:28:41Z", value: 17.5 }, { timestamp: "2018-04-11T11:39:07Z", value: 22.5 }, { timestamp: "2018-04-11T11:49:33Z", value: 25 }, { timestamp: "2018-04-11T11:59:59Z", value: 20 }, { timestamp: "2018-04-11T12:10:26Z", value: 12.5 }, { timestamp: "2018-04-11T12:20:52Z", value: 10 }, { timestamp: "2018-04-11T12:31:18Z", value: 10 }, { timestamp: "2018-04-11T12:41:44Z", value: 10 }, { timestamp: "2018-04-11T12:52:10Z", value: 22.5 }, { timestamp: "2018-04-11T13:02:36Z", value: 20 }, { timestamp: "2018-04-11T13:13:02Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T13:23:28Z", value: 25 }, { timestamp: "2018-04-11T13:33:54Z", value: 22.5 }, { timestamp: "2018-04-11T13:44:20Z", value: 25 }, { timestamp: "2018-04-11T13:54:46Z", value: 22.5 }, { timestamp: "2018-04-11T14:05:12Z", value: 22.5 }, { timestamp: "2018-04-11T14:15:39Z", value: 25 }, { timestamp: "2018-04-11T14:26:05Z", value: 32.5 }, { timestamp: "2018-04-11T14:36:31Z", value: 30 }, { timestamp: "2018-04-11T14:46:57Z", value: 32.5 }, { timestamp: "2018-04-11T14:57:23Z", value: 32.5 }, { timestamp: "2018-04-11T15:07:49Z", value: 30 }, { timestamp: "2018-04-11T15:18:15Z", value: 30 }, { timestamp: "2018-04-11T15:28:41Z", value: 30 }, { timestamp: "2018-04-11T15:39:07Z", value: 32.5 }, { timestamp: "2018-04-11T15:49:33Z", value: 35 }, { timestamp: "2018-04-11T15:59:59Z", value: 22.5 }, { timestamp: "2018-04-11T16:10:25Z", value: 25 }, { timestamp: "2018-04-11T16:20:52Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T16:31:18Z", value: 35 }, { timestamp: "2018-04-11T16:41:44Z", value: 35 }, { timestamp: "2018-04-11T16:52:10Z", value: 25 }, { timestamp: "2018-04-11T17:02:36Z", value: 32.5 }, { timestamp: "2018-04-11T17:13:02Z", value: 32.5 }, { timestamp: "2018-04-11T17:23:28Z", value: 30 }, { timestamp: "2018-04-11T17:33:54Z", value: 30 }, { timestamp: "2018-04-11T17:44:20Z", value: 27.500000000000004 }, { timestamp: "2018-04-11T17:54:46Z", value: 25 }, { timestamp: "2018-04-11T18:05:12Z", value: 25 }, { timestamp: "2018-04-11T18:15:39Z", value: 22.5 }, { timestamp: "2018-04-11T18:26:05Z", value: 7.5 }, { timestamp: "2018-04-11T18:36:31Z", value: 10 }, { timestamp: "2018-04-11T18:46:57Z", value: 10 }, { timestamp: "2018-04-11T18:57:23Z", value: 10 }, { timestamp: "2018-04-11T19:07:49Z", value: 2.5 }, { timestamp: "2018-04-11T19:18:15Z", value: 2.5 }, { timestamp: "2018-04-11T19:28:41Z", value: 2.5 }, { timestamp: "2018-04-11T19:39:07Z", value: 5 }, { timestamp: "2018-04-11T19:49:33Z", value: 10 }, { timestamp: "2018-04-11T19:59:59Z", value: 10 }, { timestamp: "2018-04-11T20:10:25Z", value: 10 }, { timestamp: "2018-04-11T20:20:52Z", value: 10 }, { timestamp: "2018-04-11T20:31:18Z", value: 10 }, { timestamp: "2018-04-11T20:41:44Z", value: 7.5 }, { timestamp: "2018-04-11T20:52:10Z", value: 7.5 }, { timestamp: "2018-04-11T21:02:36Z", value: 7.5 }, { timestamp: "2018-04-11T21:13:02Z", value: 7.5 }, { timestamp: "2018-04-11T21:23:28Z", value: 7.5 }, { timestamp: "2018-04-11T21:33:54Z", value: 7.5 }, { timestamp: "2018-04-11T21:44:20Z", value: 7.5 }, { timestamp: "2018-04-11T21:54:46Z", value: 7.5 }, { timestamp: "2018-04-11T22:05:12Z", value: 7.5 }, { timestamp: "2018-04-11T22:15:39Z", value: 7.5 }, { timestamp: "2018-04-11T22:26:05Z", value: 7.5 }, { timestamp: "2018-04-11T22:36:31Z", value: 7.5 }, { timestamp: "2018-04-11T22:46:57Z", value: 7.5 }, { timestamp: "2018-04-11T22:57:23Z", value: 7.5 }, { timestamp: "2018-04-11T23:07:49Z", value: 5 }, { timestamp: "2018-04-11T23:18:15Z", value: 5 }, { timestamp: "2018-04-11T23:28:41Z", value: 5 }, { timestamp: "2018-04-11T23:39:07Z", value: 5 }, { timestamp: "2018-04-11T23:49:33Z", value: 5 }, { timestamp: "2018-04-11T23:59:59Z", value: 5 }].sort(function (a, b) {
         return _moment2.default.utc(a.timestamp).valueOf() - _moment2.default.utc(b.timestamp).valueOf();
@@ -252,0 +252,0 @@ })

index.js

@@ -136,6 +136,11 @@ import * as d3 from 'd3';
     dataPoints.lastEvent = defaultDataset.data.slice(-1)[0];
+    dataPoints.nextToLastEvent = defaultDataset.data.length > 1 ? defaultDataset.data.slice(-2)[0] : null;
+    dataPoints.bucketMillis = dataPoints.nextToLastEvent ?
+      moment.utc(dataPoints.lastEvent.timestamp).diff(moment.utc(dataPoints.nextToLastEvent.timestamp), 'milliseconds') :
+      0;
 
+
     dataPoints.firstEventXValue = moment.utc(dataPoints.firstEvent.timestamp).valueOf(); /* epoch ms */
     dataPoints.firstEventYValue = dataPoints.firstEvent.value;
-    dataPoints.lastEventXValue = moment.utc(dataPoints.lastEvent.timestamp).valueOf(); /* epoch ms */
+    dataPoints.lastEventXValue = moment.utc(dataPoints.lastEvent.timestamp).valueOf() + dataPoints.bucketMillis; /* epoch ms */
     dataPoints.lastEventYValue = dataPoints.lastEvent.value;
@@ -225,3 +230,3 @@
             if (eventAtPosition && (renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue)) {
-              return topMargin + yScale(eventAtPosition.value) - defaultDataset.verticalBaselineOffset;
+              return topMargin + yScale(eventAtPosition.value);
             } else {
@@ -337,4 +342,4 @@ return -100000000;
     const waterlineFillPostfix = renderAfterLastDatapoint ?
-      `H${xScale(dataPoints.endXValue)}V${graphHeight}H0` :
-      `H${xScale(dataPoints.lastEventXValue)}V${graphHeight}H0`;
+      `H${xScale(dataPoints.endXValue)}V${graphHeight + verticalBaselineOffset}H0` :
+      `H${xScale(dataPoints.lastEventXValue)}V${graphHeight + verticalBaselineOffset}H0`;
 
@@ -358,6 +363,6 @@ const waterlineStrokePostfix = renderAfterLastDatapoint ?
             // For the first plotted point, don't draw an outline on the left edge.
-            return `${acc}M0,${yPosition-verticalBaselineOffset}`;
+            return `${acc}M0,${yPosition}`;
           } else if (xPosition > 0) {
             // Plot each point my moving horizontally then vertically.
-            return `${acc}H${xPosition}V${yPosition-verticalBaselineOffset}`;
+            return `${acc}H${xPosition}V${yPosition}`;
           } else {
@@ -364,0 +369,0 @@ return acc;

package.json

 {
   "name": "@density/chart-line-chart",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "Line Chart chart",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

413060

decreased by-0.1%

Lines of code

3274

decreased by-0.52%

No dependency changes