@density/chart-daily-metrics - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

dist/index.js

@@ -65,4 +65,5 @@ 'use strict';
 
-    var dataSelectionEnter = dataSelection.enter();
-    var dataSelectionEnterGroup = dataSelectionEnter.append('g').attr('class', 'daily-metrics-bar-group');
+    var dataSelectionEnterGroup = dataSelection.enter().append('g').attr('class', 'daily-metrics-bar-group').attr('transform', function (d) {
+      return 'translate(' + xScale(d.label) + ',' + yScale(d.value) + ')';
+    });
     dataSelectionEnterGroup.append('rect').attr('class', 'daily-metrics-bar').attr('x', 0).attr('y', 0);
@@ -75,13 +76,12 @@ dataSelectionEnterGroup.append('path').attr('class', 'daily-metrics-bar-outline');
     //
-    var dataSelectionMerge = dataSelectionEnter.merge(dataSelection);
-    dataSelectionMerge.selectAll('.daily-metrics-bar-group').attr('transform', function (d) {
+    dataSelectionEnterGroup.merge(dataSelection).attr('transform', function (d) {
       return 'translate(' + xScale(d.label) + ',' + yScale(d.value) + ')';
     });
-    dataSelectionMerge.selectAll('.daily-metrics-bar').attr('width', xScale.bandwidth()).attr('height', function (d) {
+    dataSelectionEnterGroup.merge(dataSelection).selectAll('.daily-metrics-bar').attr('width', xScale.bandwidth()).attr('height', function (d) {
       return graphHeight - yScale(d.value);
     });
-    dataSelectionMerge.selectAll('.daily-metrics-bar-outline').attr('d', function (d) {
+    dataSelectionEnterGroup.merge(dataSelection).selectAll('.daily-metrics-bar-outline').attr('d', function (d) {
       return 'M0,' + (graphHeight - yScale(d.value)) + ' V0 H' + xScale.bandwidth() + ' V' + (graphHeight - yScale(d.value));
     });
-    dataSelectionMerge.selectAll('.daily-metrics-bar-label').attr('transform', function (d) {
+    dataSelectionEnterGroup.merge(dataSelection).selectAll('.daily-metrics-bar-label').attr('transform', function (d) {
       return 'translate(' + xScale.bandwidth() / 2 + ',-10)';
@@ -88,0 +88,0 @@ }).text(function (d) {

dist/story.js

@@ -7,5 +7,5 @@ 'use strict';
 
-var React = _interopRequireWildcard(_react);
+var _react2 = _interopRequireDefault(_react);
 
-var _react2 = require('@storybook/react');
+var _react3 = require('@storybook/react');
 
@@ -20,4 +20,2 @@ var _index = require('../index');
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -33,5 +31,3 @@
 
-(0, _react2.storiesOf)('Daily Metrics', module).add('Simple Example', function () {
-  return React.createElement(DailyMetrics, { width: 800, height: 300, data: [{ label: "6/15", value: 50 }, { label: "6/16", value: 5 }, { label: "6/17", value: 1 }, { label: "6/18", value: 1 }, { label: "6/19", value: 1 }, { label: "6/20", value: 1 }, { label: "6/21", value: 50 }, { label: "6/22", value: 5 }, { label: "6/23", value: 1 }, { label: "6/24", value: 1 }, { label: "6/25", value: 1 }, { label: "6/26", value: 1 }, { label: "6/27", value: 1 }, { label: "6/28", value: 1 }] });
-}).add('Live updating', function () {
+(0, _react3.storiesOf)('Daily Metrics', module).add('Simple Example', function () {
   var Wrapper = function (_React$Component) {
@@ -65,3 +61,3 @@ _inherits(Wrapper, _React$Component);
       value: function render() {
-        return React.createElement(DailyMetrics, { width: 800, height: 300, data: this.state.data });
+        return _react2.default.createElement(DailyMetrics, { width: 600 + Math.random() * 400, height: 300, data: [{ label: "6/15", value: 50 }, { label: "6/16", value: 5 }, { label: "6/17", value: 1 }, { label: "6/18", value: 1 }, { label: "6/19", value: 1 }, { label: "6/20", value: 1 }, { label: "6/21", value: 50 }, { label: "6/22", value: 5 }, { label: "6/23", value: 1 }, { label: "6/24", value: 1 }, { label: "6/25", value: 1 }, { label: "6/26", value: 1 }, { label: "6/27", value: 1 }, { label: "6/28", value: 1 }] });
       }
@@ -71,6 +67,43 @@ }]);
     return Wrapper;
-  }(React.Component);
+  }(_react2.default.Component);
 
-  return React.createElement(Wrapper, null);
+  return _react2.default.createElement(Wrapper, null);
+}).add('Live updating', function () {
+  var Wrapper = function (_React$Component2) {
+    _inherits(Wrapper, _React$Component2);
+
+    function Wrapper(props) {
+      _classCallCheck(this, Wrapper);
+
+      var _this2 = _possibleConstructorReturn(this, (Wrapper.__proto__ || Object.getPrototypeOf(Wrapper)).call(this, props));
+
+      _this2.state = {
+        data: [{ label: "foo", value: 50 }],
+        interval: setInterval(function () {
+          _this2.setState({ data: [].concat(_toConsumableArray(_this2.state.data), [{
+              label: Math.random().toString().slice(3, 7),
+              value: Math.floor(Math.random() * 50)
+            }]) });
+        }, 1000)
+      };
+      return _this2;
+    }
+
+    _createClass(Wrapper, [{
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        clearInterval(this.state.interval);
+      }
+    }, {
+      key: 'render',
+      value: function render() {
+        return _react2.default.createElement(DailyMetrics, { width: 800, height: 300, data: this.state.data });
+      }
+    }]);
+
+    return Wrapper;
+  }(_react2.default.Component);
+
+  return _react2.default.createElement(Wrapper, null);
 });
 

index.js

@@ -52,5 +52,5 @@ import moment from 'moment';
 
-    const dataSelectionEnter = dataSelection.enter();
-    const dataSelectionEnterGroup = dataSelectionEnter.append('g')
-      .attr('class', 'daily-metrics-bar-group');
+    const dataSelectionEnterGroup = dataSelection.enter().append('g')
+      .attr('class', 'daily-metrics-bar-group')
+      .attr('transform', d => `translate(${xScale(d.label)},${yScale(d.value)})`);
     dataSelectionEnterGroup.append('rect')
@@ -69,14 +69,16 @@ .attr('class', 'daily-metrics-bar')
     //
-    const dataSelectionMerge = dataSelectionEnter.merge(dataSelection);
-    dataSelectionMerge.selectAll('.daily-metrics-bar-group')
-      .attr('transform', d => `translate(${xScale(d.label)},${yScale(d.value)})`)
-    dataSelectionMerge.selectAll('.daily-metrics-bar')
+    dataSelectionEnterGroup.merge(dataSelection)
+      .attr('transform', d => `translate(${xScale(d.label)},${yScale(d.value)})`);
+    dataSelectionEnterGroup.merge(dataSelection)
+      .selectAll('.daily-metrics-bar')
       .attr('width', xScale.bandwidth())
       .attr('height', d => graphHeight - yScale(d.value));
-    dataSelectionMerge.selectAll('.daily-metrics-bar-outline')
+    dataSelectionEnterGroup.merge(dataSelection)
+      .selectAll('.daily-metrics-bar-outline')
       .attr('d', d => `M0,${graphHeight - yScale(d.value)} V0 H${xScale.bandwidth()} V${graphHeight - yScale(d.value)}`);
-    dataSelectionMerge.selectAll('.daily-metrics-bar-label')
+    dataSelectionEnterGroup.merge(dataSelection)
+      .selectAll('.daily-metrics-bar-label')
       .attr('transform', d => `translate(${xScale.bandwidth() / 2},-10)`)
-      .text(d => d.value)
+      .text(d => d.value);
   }
 }

package.json

 {
   "name": "@density/chart-daily-metrics",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Daily Metrics chart",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

story.js

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 import {storiesOf} from '@storybook/react';
@@ -10,20 +10,43 @@ import {chartAsReactComponent} from '../index';
 storiesOf('Daily Metrics', module)
-  .add('Simple Example', () => (
-    <DailyMetrics width={800} height={300} data={[
-      {label: "6/15", value: 50},
-      {label: "6/16", value: 5},
-      {label: "6/17", value: 1},
-      {label: "6/18", value: 1},
-      {label: "6/19", value: 1},
-      {label: "6/20", value: 1},
-      {label: "6/21", value: 50},
-      {label: "6/22", value: 5},
-      {label: "6/23", value: 1},
-      {label: "6/24", value: 1},
-      {label: "6/25", value: 1},
-      {label: "6/26", value: 1},
-      {label: "6/27", value: 1},
-      {label: "6/28", value: 1},
-    ]}/>
-  ))
+  .add('Simple Example', () => {
+    class Wrapper extends React.Component {
+      constructor(props) {
+        super(props);
+        this.state = {
+          data: [
+            {label: "foo", value: 50},
+          ],
+          interval: setInterval(() => {
+            this.setState({data: [...this.state.data, {
+              label: Math.random().toString().slice(3, 7),
+              value: Math.floor(Math.random() * 50),
+            }]})
+          }, 1000),
+        };
+      }
+      componentWillUnmount() {
+        clearInterval(this.state.interval);
+      }
+      render() {
+        return <DailyMetrics width={600 + Math.random() * 400} height={300} data={[
+          {label: "6/15", value: 50},
+          {label: "6/16", value: 5},
+          {label: "6/17", value: 1},
+          {label: "6/18", value: 1},
+          {label: "6/19", value: 1},
+          {label: "6/20", value: 1},
+          {label: "6/21", value: 50},
+          {label: "6/22", value: 5},
+          {label: "6/23", value: 1},
+          {label: "6/24", value: 1},
+          {label: "6/25", value: 1},
+          {label: "6/26", value: 1},
+          {label: "6/27", value: 1},
+          {label: "6/28", value: 1},
+        ]} />
+      }
+    }
+
+    return <Wrapper />;
+  })
   .add('Live updating', () => {
@@ -30,0 +53,0 @@ class Wrapper extends React.Component {

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

24879

increased by6.91%

Lines of code

312

increased by20%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes