@density/chart-historical-counts - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/index.js

@@ -26,2 +26,3 @@ 'use strict';
 var DAYS_PER_WEEK = 7,
+    HOURS_PER_DAY = 24,
     MINUTES_PER_HOUR = 60,
@@ -98,3 +99,4 @@ SECONDS_PER_MINUTE = 60,
         timeZoneLabel = _ref.timeZoneLabel,
-        timeZoneOffset = _ref.timeZoneOffset;
+        timeZoneOffset = _ref.timeZoneOffset,
+        xAxisResolution = _ref.xAxisResolution;
 
@@ -206,9 +208,36 @@ width = width || 800;
     var firstHourMark = _moment2.default.utc(domainStart).startOf('hour').valueOf();
+
+    // Figure out how much time to put between ticks. Defaults to an hour.
+    xAxisResolution = xAxisResolution || 'hour';
+    var xAxisTimeBetweenTicks = MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND;
+    if (xAxisResolution === 'day') {
+      xAxisTimeBetweenTicks *= HOURS_PER_DAY;
+    }
+    if (xAxisResolution === 'week') {
+      xAxisTimeBetweenTicks *= DAYS_PER_WEEK * HOURS_PER_DAY;
+    }
+
     var xAxis = d3.axisBottom(xScale)
     // Position a tick at the first whole hour on the axis, then another tick for each hour
     // thereafter.
-    .tickValues(d3.range(firstHourMark, domainEnd, MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND)).tickSizeOuter(0).tickFormat(function (d, i) {
-      var timeFormat = _moment2.default.utc(d).add(timeZoneOffset, 'hours').format('hA');
-      return timeFormat.slice(0, timeFormat.startsWith('12') ? -1 : -2).toLowerCase();
+    .tickValues(d3.range(firstHourMark, domainEnd, xAxisTimeBetweenTicks)).tickSizeOuter(0).tickFormat(function (d, i) {
+      if (xAxisResolution === 'hour') {
+        // "5a" or "8p"
+        var timeFormat = _moment2.default.utc(d).add(timeZoneOffset, 'hours').format('hA');
+        return timeFormat.slice(0, timeFormat.startsWith('12') ? -1 : -2).toLowerCase();
+      } else if (xAxisResolution === 'day') {
+        // "12"
+        return _moment2.default.utc(d).add(timeZoneOffset, 'hours').format('DD');
+      } else if (xAxisResolution === 'week') {
+        // "05/12"
+        return _moment2.default.utc(d).add(timeZoneOffset, 'hours').format('MM/DD');
+      }
     });
+
+    // Allow setting explicitly the number of axes on the x axis
+    // if (typeof xAxisTickNumber === 'number') {
+    //   console.log('TICK NUMBER', xAxisTickNumber)
+    //   xAxis = xAxis.ticks(xAxisTickNumber)
+    // }
+
     axisGroup.append("g").attr("class", 'historical-counts-axis-x').attr("transform", 'translate(0,' + graphHeight + ')').call(xAxis);
@@ -215,0 +244,0 @@

index.js

@@ -8,2 +8,3 @@ import './styles.scss';
 const DAYS_PER_WEEK = 7,
+      HOURS_PER_DAY = 24,
       MINUTES_PER_HOUR = 60,
@@ -84,3 +85,3 @@ SECONDS_PER_MINUTE = 60,
 
-  return ({start, end, width, height, data, capacity, initialCount, timeZoneLabel, timeZoneOffset}) => {
+  return ({start, end, width, height, data, capacity, initialCount, timeZoneLabel, timeZoneOffset, xAxisResolution}) => {
     width = width || 800;
@@ -211,14 +212,41 @@ height = height || 400;
     const firstHourMark = moment.utc(domainStart).startOf('hour').valueOf();
-    const xAxis = d3.axisBottom(xScale)
+
+    // Figure out how much time to put between ticks. Defaults to an hour.
+    xAxisResolution = xAxisResolution || 'hour';
+    let xAxisTimeBetweenTicks = MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND;
+    if (xAxisResolution === 'day') {
+      xAxisTimeBetweenTicks *= HOURS_PER_DAY;
+    }
+    if (xAxisResolution === 'week') {
+      xAxisTimeBetweenTicks *= (DAYS_PER_WEEK * HOURS_PER_DAY);
+    }
+
+    let xAxis = d3.axisBottom(xScale)
       // Position a tick at the first whole hour on the axis, then another tick for each hour
       // thereafter.
-      .tickValues(d3.range(firstHourMark, domainEnd, MINUTES_PER_HOUR * SECONDS_PER_MINUTE * MILLISECONDS_PER_SECOND))
+      .tickValues(d3.range(firstHourMark, domainEnd, xAxisTimeBetweenTicks))
       .tickSizeOuter(0)
       .tickFormat((d, i) => {
-        const timeFormat = moment.utc(d).add(timeZoneOffset, 'hours').format(`hA`);
-        return timeFormat.slice(
-          0, 
-          timeFormat.startsWith('12') ? -1 : -2
-        ).toLowerCase();
+        if (xAxisResolution === 'hour') {
+          // "5a" or "8p"
+          const timeFormat = moment.utc(d).add(timeZoneOffset, 'hours').format(`hA`);
+          return timeFormat.slice(
+            0, 
+            timeFormat.startsWith('12') ? -1 : -2
+          ).toLowerCase();
+        } else if (xAxisResolution === 'day') {
+          // "12"
+          return moment.utc(d).add(timeZoneOffset, 'hours').format(`DD`);
+        } else if (xAxisResolution === 'week') {
+          // "05/12"
+          return moment.utc(d).add(timeZoneOffset, 'hours').format(`MM/DD`);
+        }
       });
+
+    // Allow setting explicitly the number of axes on the x axis
+    // if (typeof xAxisTickNumber === 'number') {
+    //   console.log('TICK NUMBER', xAxisTickNumber)
+    //   xAxis = xAxis.ticks(xAxisTickNumber)
+    // }
+
     axisGroup.append("g")
@@ -225,0 +253,0 @@ .attr("class", 'historical-counts-axis-x')

package.json

 {
   "name": "@density/chart-historical-counts",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Historical Counts chart",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -37,2 +37,7 @@ # Count Graph Chart
 
+- `xAxisResolution` *(optional)* A value of either `hour` (the default), `day`, or `week`. This
+  value determines the distance between ticks on the x axis. This is important because for large
+  time spans, a value of `hour` will produce too many labels and they will all collide into a big
+  blob. Not good.
+
 # How this chart is structured
@@ -39,0 +44,0 @@ ```

No alert changes

Improved metrics

Lines of code

2164

increased by4.64%

Number of lines in readme file

50

increased by11.11%

Worsened metrics

Total package byte prevSize

645157

decreased by-2.23%

Number of package files

19

decreased by-5%

No dependency changes