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

Comparing version 0.0.1 to 0.1.0

axes.js

 import * as d3 from 'd3';
 
 import moment from 'moment';
-import 'moment-timezone';
 
@@ -76,3 +75,3 @@ const ONE_MINUTE_IN_MS = 60 * 1000,
         // "5a" or "8p"
-        const timeFormat = moment.utc(n).tz(timeZone).format(`hA`);
+        const timeFormat = moment.utc(n).format(`hA`);
         return timeFormat.slice(
@@ -79,0 +78,0 @@ 0,

dist/axes.js

@@ -18,4 +18,2 @@ 'use strict';
 
-require('moment-timezone');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -98,3 +96,3 @@
       // "5a" or "8p"
-      var timeFormat = _moment2.default.utc(n).tz(timeZone).format('hA');
+      var timeFormat = _moment2.default.utc(n).format('hA');
       return timeFormat.slice(0, timeFormat.startsWith('12') ? -1 : -2).toLowerCase();
@@ -101,0 +99,0 @@ });

dist/index.js

@@ -238,3 +238,5 @@ 'use strict';
           var eventAtPosition = defaultDataset.data[eventIndexAtOverlayPosition] || defaultDataset.data[0];
-          if (eventAtPosition) {
+
+          var renderAfterLastDatapoint = typeof defaultDataset.renderAfterLastDatapoint === 'undefined' ? false : true;
+          if (eventAtPosition && (renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue)) {
             return topMargin + yScale(eventAtPosition.value) - defaultDataset.verticalBaselineOffset;
@@ -313,4 +315,7 @@ } else {
       borderColor = _ref2.borderColor,
-      verticalBaselineOffset = _ref2.verticalBaselineOffset;
+      verticalBaselineOffset = _ref2.verticalBaselineOffset,
+      renderAfterLastDatapoint = _ref2.renderAfterLastDatapoint;
 
+  renderAfterLastDatapoint = typeof renderAfterLastDatapoint === 'undefined' ? false : true;
+
   return function (_ref3, element) {
@@ -324,5 +329,7 @@ var xScale = _ref3.xScale,
     'M0,' + yScale(dataPoints.firstEvent.value)); /* Move to the first datapoint's y value */
-    var waterlineFillPostfix = 'H' + xScale(dataPoints.endXValue) + 'V' + graphHeight + 'H1';
-    var waterlineStrokePostfix = 'H' + xScale(dataPoints.endXValue);
 
+    var waterlineFillPostfix = renderAfterLastDatapoint ? 'H' + xScale(dataPoints.endXValue) + 'V' + graphHeight + 'H1' : 'H' + xScale(dataPoints.lastEventXValue) + 'V' + graphHeight + 'H1';
+
+    var waterlineStrokePostfix = renderAfterLastDatapoint ? 'H' + xScale(dataPoints.endXValue) : 'H' + xScale(dataPoints.lastEventXValue);
+
     var waterlineSelection = d3.select(element).selectAll('.waterline').data([{
@@ -329,0 +336,0 @@ data: data,

dist/overlays.js

@@ -108,3 +108,5 @@ 'use strict';
       // Ensure that the overlay is only being drawn when the user is hovering over the data
-      if (!eventAtPosition) {
+      //
+      var renderAfterLastDatapoint = typeof defaultDataset.renderAfterLastDatapoint === 'undefined' ? false : true;
+      if (!(eventAtPosition && (renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue))) {
         selection.remove();
@@ -111,0 +113,0 @@ return;

dist/story.js

@@ -448,2 +448,78 @@ 'use strict';
   });
+}).add('With a partial day of data with explicit start and end (over a 24 hour span), rendering after the last datapoint', function () {
+  return React.createElement(LineChart, {
+    timeZone: 'UTC',
+    svgWidth: 1000,
+    svgHeight: 300,
+
+    xAxis: (0, _axes.xAxisDailyTick)({
+      timeBetweenTicksInMs: 1 * ONE_MINUTE_IN_MS,
+      bottomOffset: 15
+    }),
+    xAxisStart: '2017-03-29T12:03:05.679Z',
+    xAxisEnd: '2017-03-30T12:03:05.679Z',
+
+    yAxis: (0, _axes.yAxisMinMax)({
+      leftOffset: 20,
+      axisRuleLineDashWidth: 4,
+      axisRuleLineDashSpacing: 10,
+      points: []
+    }),
+    yAxisEnd: 100,
+    yAxisStart: 0,
+
+    overlayShowPoint: true,
+    overlayPointRadius: 4.5,
+
+    overlays: [(0, _overlays.overlayTwoPopups)({
+      topPopupFormatter: {
+        enter: function enter(selection) {
+          selection.append('text').attr('text-anchor', 'middle').attr('font-weight', '500');
+        },
+        merge: function merge(_ref9, selection) {
+          var item = _ref9.item,
+              xScale = _ref9.xScale,
+              mouseX = _ref9.mouseX,
+              topOverlayWidth = _ref9.topOverlayWidth;
+
+          selection.select('text').attr('transform', 'translate(' + topOverlayWidth / 2 + ',26)').text('' + item.value);
+        },
+        exit: function exit(selection) {
+          return selection.remove();
+        }
+      },
+      bottomPopupFormatter: {
+        enter: function enter(selection) {
+          selection.append('text').attr('text-anchor', 'middle').attr('font-weight', '500');
+        },
+        merge: function merge(_ref10, selection) {
+          var xScale = _ref10.xScale,
+              mouseX = _ref10.mouseX,
+              bottomOverlayWidth = _ref10.bottomOverlayWidth;
+
+          selection.select('text').attr('transform', 'translate(' + bottomOverlayWidth / 2 + ',26)').text('' + _moment2.default.utc(xScale.invert(mouseX)).format());
+        },
+        exit: function exit(selection) {
+          return selection.remove();
+        }
+      },
+
+      bottomOverlayTopMargin: 40,
+      topOverlayBottomMargin: 10,
+
+      topOverlayWidth: 100,
+      topOverlayHeight: 42,
+      bottomOverlayWidth: 200,
+      bottomOverlayHeight: 42
+    })],
+
+    data: [{
+      name: 'default',
+      type: _index2.dataWaterline,
+      color: 'rgba(65, 152, 255, 0.2)',
+      borderColor: 'rgb(65, 152, 255)',
+      renderAfterLastDatapoint: true,
+      data: uncompressData(partialDayOfData)
+    }]
+  });
 }).add('Without any data. Should be empty.', function () {
@@ -527,7 +603,7 @@ return React.createElement(LineChart, {
               },
-              merge: function merge(_ref9, selection) {
-                var item = _ref9.item,
-                    xScale = _ref9.xScale,
-                    mouseX = _ref9.mouseX,
-                    topOverlayWidth = _ref9.topOverlayWidth;
+              merge: function merge(_ref11, selection) {
+                var item = _ref11.item,
+                    xScale = _ref11.xScale,
+                    mouseX = _ref11.mouseX,
+                    topOverlayWidth = _ref11.topOverlayWidth;
 
@@ -544,6 +620,6 @@ selection.select('text').attr('transform', 'translate(' + topOverlayWidth / 2 + ',26)').text('' + item.value);
               },
-              merge: function merge(_ref10, selection) {
-                var xScale = _ref10.xScale,
-                    mouseX = _ref10.mouseX,
-                    bottomOverlayWidth = _ref10.bottomOverlayWidth;
+              merge: function merge(_ref12, selection) {
+                var xScale = _ref12.xScale,
+                    mouseX = _ref12.mouseX,
+                    bottomOverlayWidth = _ref12.bottomOverlayWidth;
 
@@ -612,5 +688,5 @@ selection.select('text').attr('transform', 'translate(' + bottomOverlayWidth / 2 + ',26)').text('' + _moment2.default.utc(xScale.invert(mouseX)).format());
       }),
-      bottomPopupFormatter: (0, _overlays.overlayTwoPopupsPlainTextFormatter)(function (item, _ref11) {
-        var mouseX = _ref11.mouseX,
-            xScale = _ref11.xScale;
+      bottomPopupFormatter: (0, _overlays.overlayTwoPopupsPlainTextFormatter)(function (item, _ref13) {
+        var mouseX = _ref13.mouseX,
+            xScale = _ref13.xScale;
 
@@ -617,0 +693,0 @@ var timestamp = _moment2.default.utc(xScale.invert(mouseX));

index.js

@@ -231,3 +231,5 @@ import * as d3 from 'd3';
             const eventAtPosition = defaultDataset.data[eventIndexAtOverlayPosition] || defaultDataset.data[0];
-            if (eventAtPosition) {
+
+            const renderAfterLastDatapoint = typeof defaultDataset.renderAfterLastDatapoint === 'undefined' ? false : true;
+            if (eventAtPosition && (renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue)) {
               return topMargin + yScale(eventAtPosition.value) - defaultDataset.verticalBaselineOffset;
@@ -332,9 +334,19 @@ } else {
   verticalBaselineOffset,
+
+  renderAfterLastDatapoint,
 }) {
+  renderAfterLastDatapoint = typeof renderAfterLastDatapoint === 'undefined' ? false : true;
+
   return ({xScale, yScale, graphHeight, dataPoints}, element) => {
     const waterlinePrefix = `M0,${graphHeight}` + /* move to the lower left of the graph */
       `M0,${yScale(dataPoints.firstEvent.value)}`; /* Move to the first datapoint's y value */
-    const waterlineFillPostfix = `H${xScale(dataPoints.endXValue)}V${graphHeight}H1`;
-    const waterlineStrokePostfix = `H${xScale(dataPoints.endXValue)}`;
 
+    const waterlineFillPostfix = renderAfterLastDatapoint ?
+      `H${xScale(dataPoints.endXValue)}V${graphHeight}H1` :
+      `H${xScale(dataPoints.lastEventXValue)}V${graphHeight}H1`;
+
+    const waterlineStrokePostfix = renderAfterLastDatapoint ?
+      `H${xScale(dataPoints.endXValue)}` :
+      `H${xScale(dataPoints.lastEventXValue)}`;
+
     const waterlineSelection = d3.select(element).selectAll('.waterline').data([
@@ -341,0 +353,0 @@ {

overlays.js

@@ -121,3 +121,9 @@ import * as d3 from 'd3';
       // Ensure that the overlay is only being drawn when the user is hovering over the data
-      if (!eventAtPosition) {
+      //
+      const renderAfterLastDatapoint = typeof defaultDataset.renderAfterLastDatapoint === 'undefined' ? false : true;
+      if (!(
+        eventAtPosition && (
+          renderAfterLastDatapoint ? true : xInMs <= dataPoints.lastEventXValue
+        )
+      )) {
         selection.remove();
@@ -124,0 +130,0 @@ return

package.json

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

README.md

@@ -125,2 +125,7 @@ # Line Chart
   and used explicitly if a `moment`.
+- `renderAfterLastDatapoint: Boolean` *(optional)* - Should the data line be continued after the
+  final datapoint until the end of the graph? Defaults to `false`.
+
+![docs-assets/render-after-last-datapoint.png](docs-assets/render-after-last-datapoint.png)
+
 - `verticalBaselineOffset: Number` *(optional)* - The number of pixels of dead space below the
@@ -127,0 +132,0 @@ bottom-most value in the y-direction. Defaults to `0`.

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

Improved metrics

Total package byte prevSize

414776

increased by8.22%

Number of package files

27

increased by3.85%

Lines of code

3360

increased by4.74%

Number of lines in readme file

442

increased by1.14%

No dependency changes