@density/chart-count-graph - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/index.js

@@ -21,3 +21,4 @@ 'use strict';
 
-var leftMargin = 32;
+var leftMargin = 60;
+var rightMargin = 16;
 var bottomMargin = 36;
@@ -55,3 +56,3 @@ var topMargin = 16;
 function countGraph(elem) {
-  var svg = d3.select(elem).append('svg').attr('class', 'graph-countgraph').attr('width', '100%');
+  var svg = d3.select(elem).append('svg').attr('class', 'graph-countgraph');
 
@@ -79,3 +80,3 @@ var svgGroup = svg.append('g').attr('transform', 'translate(' + leftMargin + ',' + topMargin + ')');
 
-    var width = props.width || 1000;
+    var width = props.width || 940;
     var height = props.height || 400;
@@ -87,3 +88,3 @@ var data = props.data || [];
     // Adjust the svg size and viewbox to match the passed in values.
-    svg.attr('height', height).attr('viewBox', '0 0 ' + width + ' ' + height);
+    svg.attr('height', height).attr('width', width).attr('viewBox', '0 0 ' + width + ' ' + height);
 
@@ -100,3 +101,3 @@ if (!Array.isArray(data)) {
     // Get the drawn graph size, minus the borders.
-    var graphWidth = width - leftMargin;
+    var graphWidth = width - leftMargin - rightMargin;
     var graphHeight = height - topMargin - bottomMargin;
@@ -161,7 +162,7 @@
     // Draw the axes in the svg
+    var totalDuration = normalize(domainEnd) - normalize(domainStart);
     var xAxis = d3.axisBottom(xScale)
     // format the time scale display for different domain sizes
-    // started by trying to remove the zero padding from the hours
-    // and it got out of hand, this is complicated logic
-    .ticks(7).tickSizeOuter(0).tickFormat(function (d, i) {
+    // only show hours
+    .ticks(Math.min(Math.floor(totalDuration / 3600000), 7)).tickSizeOuter(0).tickFormat(function (d, i) {
       var timeFormat = d3.timeFormat('%-I%p')(d);
@@ -168,0 +169,0 @@ return timeFormat.slice(0, timeFormat.startsWith('12') ? -1 : -2).toLowerCase();

dist/story.js

@@ -92,4 +92,5 @@ 'use strict';
   });
-}).add('With negative counts', function () {
+}).add('With negative counts and small width', function () {
   return React.createElement(CountGraph, {
+    width: 400,
     data: uncompressData(dayOfDataWithNegatives)
@@ -96,0 +97,0 @@ });

index.js

@@ -5,3 +5,4 @@ import './styles.scss';
 
-const leftMargin = 32;
+const leftMargin = 60;
+const rightMargin = 16;
 const bottomMargin = 36;
@@ -37,5 +38,3 @@ const topMargin = 16;
 export default function countGraph(elem) {
-  const svg = d3.select(elem).append('svg')
-    .attr('class', 'graph-countgraph')
-    .attr('width', '100%')
+  const svg = d3.select(elem).append('svg').attr('class', 'graph-countgraph')
 
@@ -67,3 +66,3 @@ const svgGroup = svg.append('g')
   return function update(props={}) {
-    const width = props.width || 1000;
+    const width = props.width || 940;
     const height = props.height || 400;
@@ -77,2 +76,3 @@ const data = props.data || [];
       .attr('height', height)
+      .attr('width', width)
       .attr('viewBox', `0 0 ${width} ${height}`)
@@ -90,3 +90,3 @@
     // Get the drawn graph size, minus the borders.
-    const graphWidth = width - leftMargin;
+    const graphWidth = width - leftMargin - rightMargin;
     const graphHeight = height - topMargin - bottomMargin;
@@ -164,7 +164,7 @@
     // Draw the axes in the svg
+    const totalDuration = normalize(domainEnd) - normalize(domainStart);
     const xAxis = d3.axisBottom(xScale)
       // format the time scale display for different domain sizes
-      // started by trying to remove the zero padding from the hours
-      // and it got out of hand, this is complicated logic
-      .ticks(7)      
+      // only show hours
+      .ticks(Math.min(Math.floor(totalDuration / 3600000), 7))      
       .tickSizeOuter(0)
@@ -171,0 +171,0 @@ .tickFormat((d, i) => {

package.json

 {
   "name": "@density/chart-count-graph",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Count Graph chart",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

story.js

@@ -64,4 +64,5 @@ import * as React from 'react';
   ))
-  .add(`With negative counts`, () => (
+  .add(`With negative counts and small width`, () => (
     <CountGraph
+      width={400}
       data={uncompressData(dayOfDataWithNegatives)}
@@ -68,0 +69,0 @@ />

No alert changes

Improved metrics

Total package byte prevSize

509579

increased by0.03%

Lines of code

1338

increased by0.22%

No dependency changes