d3-latency-heatmap - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

package.json

 {
   "name": "d3-latency-heatmap",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A reusable D3 latency heatmap chart.",
@@ -14,3 +14,3 @@ "keywords": [
   "license": "MIT",
-  "main": "build/d3-latencyHeatmap.js",
+  "main": "build/d3-latencyHeatmap.v1.js",
   "module": "index",
@@ -27,8 +27,9 @@ "jsnext:main": "index",
   "scripts": {
-    "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -g d3-axis:d3,d3-collection:d3,d3-color:d3,d3-interpolate:d3,d3-scale:d3,d3-selection:d3 -f umd -n d3 -o build/d3-latencyHeatmap.js -- index.js",
+    "pretest": "rm -rf build && mkdir build && rollup --banner \"$(preamble)\" -g d3-array:d3,d3-axis:d3,d3-collection:d3,d3-color:d3,d3-interpolate:d3,d3-scale:d3 -f umd -n d3 -o build/d3-latencyHeatmap.v1.js -- index.js",
     "test": "tape 'test/**/*-test.js' && eslint index.js src",
-    "prepare": "npm run test && uglifyjs -b beautify=false,preamble=\"'$(preamble)'\" build/d3-latencyHeatmap.js -c -m -o build/d3-latencyHeatmap.min.js",
-    "postpublish": "git push && git push --tags && zip -j build/d3-latencyHeatmap.zip -- LICENSE README.md build/d3-latencyHeatmap.js build/d3-latencyHeatmap.min.js"
+    "prepare": "npm run test && uglifyjs -b beautify=false,preamble=\"'$(preamble)'\" build/d3-latencyHeatmap.v1.js -c -m -o build/d3-latencyHeatmap.v1.min.js",
+    "postpublish": "git push && git push --tags && zip -j build/d3-latencyHeatmap.zip -- LICENSE README.md build/d3-latencyHeatmap.v1.js build/d3-latencyHeatmap.v1.min.js"
   },
   "dependencies": {
+    "d3-array": "1",
     "d3-axis": "1",
@@ -38,4 +39,3 @@ "d3-collection": "1",
     "d3-interpolate": "1",
-    "d3-scale": "1",
-    "d3-selection": "1"
+    "d3-scale": "1"
   },
@@ -42,0 +42,0 @@ "devDependencies": {

README.md

@@ -14,9 +14,15 @@ # D3 Latency Heatmap
 
-## Getting Started
+## Installing
 
-D3 version 3.x is required (4.x is not supported).
+D3 version 4.x is required (3.x is not supported).
 
+If you use NPM, `npm install d3-latency-heatmap`.  Otherwise, download the
+[latest release](https://github.com/sengelha/d3-latency-heatmap/releases/latest).
+You can also load directly from [unpkg.com](https://unpkg.com/d3-latency-heatmap/).
+AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global
+is exported:
+
 ```html
-<script src="//d3js.org/d3.v3.min.js"></script>
-<script src="//cdn.rawgit.com/sengelha/d3-latency-heatmap/master/latency-heatmap.v3.js"></script>
+<script src="//d3js.org/d3.v4.min.js"></script>
+<script src="//unpkg.com/d3-latency-heatmap@1"></script>
 
@@ -26,5 +32,5 @@ <div id="chart"></div>
 (function() {
-    var formatTime = d3.time.format("%Y-%m");
+    var parseTime = d3.timeParse("%Y-%m");
     var chart = d3.latencyHeatmap()
-        .x(function (d) { return formatTime.parse(d.date); })
+        .x(function (d) { return parseTime(d.date); })
         .y(function (d) { return +d.bucket; })
@@ -36,3 +42,3 @@ .yFormat(function(d) { return d + " s"; })
         .rectSize([8, 8]);
-    d3.csv("//cdn.rawgit.com/sengelha/d3-latency-heatmap/master/samples/example1.csv", function (data) {
+    d3.csv("//cdn.rawgit.com/sengelha/d3-latency-heatmap/master/samples/report-queue-latency.csv", function (data) {
         var svg = d3.select("#chart")
@@ -39,0 +45,0 @@ .datum(data)

src/latencyHeatmap.js

@@ -0,7 +1,7 @@
+import {extent} from "d3-array";
 import {axisBottom, axisLeft} from "d3-axis";
-import {extent, nest} from "d3-collection";
+import {nest} from "d3-collection";
 import {rgb} from "d3-color";
 import {interpolateRgb} from "d3-interpolate";
 import {scaleLinear, scaleTime} from "d3-scale";
-import {select} from "d3-selection";
 
@@ -72,22 +72,14 @@ export default function() {
 
-            // Create the axis definitions using the scale
-            var xAxisDef = axisBottom(xScale)
-                .innerTickSize(-contentHeight)
-                .outerTickSize(0);
-            if (xFormat)
-                xAxisDef.tickFormat(xFormat);
-            var yAxisDef = axisLeft(yAxisScale)
-                .innerTickSize(-contentWidth)
-                .outerTickSize(0)
-                .ticks(1);
-            if (yFormat)
-                yAxisDef.tickFormat(yFormat);
-
             // Select the svg element, if it exists.
-            var svg = select(this).selectAll("svg").data([data]);
+            var svg = selection
+                .selectAll("svg")
+                .data([data]);
             // Otherwise, create the skeletal chart.
-            var gEnter = svg.enter().append("svg").append("g");
-            gEnter.append("g").attr("class", "elems");
-            gEnter.append("g").attr("class", "x axis");
-            gEnter.append("g").attr("class", "y axis");
+            var g = svg.enter()
+                .append("svg")
+                .append("g");
+            g.append("g").attr("class", "elems");
+            g.append("g").attr("class", "x axis");
+            g.append("g").attr("class", "y axis");
+            svg = selection.selectAll("svg");
             
@@ -98,17 +90,25 @@ // Update the outer dimensions.
 
-            // Update the inner dimensions.
-            var g = svg.select("g")
+            // Draw the rectangles
+            var gElems = svg.select('.elems')
+                .attr('class', 'elems')
                 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-            // Update the individual points
-            var nodes = g.select(".elems")
+            var update = gElems
                 .selectAll("rect")
                 .data(data);
+            var enter = update.enter();
+            var exit = update.exit();
+            // Remove old elements not present in new data
+            exit.remove();
             // Update old elements
-            nodes
+            update
                 .attr("x", function (d) { return xScale(d[0]); })
                 .attr("y", function (d) { return yContentScale(d[1]); })
                 .attr("fill", function (d) { return countScale(d[2]); });
+            if (tooltipText) {
+                update
+                    .selectAll('title')
+                    .html(function (d) { return tooltipText(d); });
+            }
             // Create new elements
-            var rects = nodes.enter()
+            var newRects = enter
                 .append("rect")
@@ -121,10 +121,13 @@ .attr("x", function (d) { return xScale(d[0]); })
             if (tooltipText) {
-                rects.append("title")
+                newRects
+                    .append("title")
                     .html(function (d) { return tooltipText(d) });
             }
-            // Remove old elements
-            nodes.exit()
-                .remove();
                 
             // Update the x-axis
+            var xAxisDef = axisBottom(xScale)
+                .tickSizeInner(-contentHeight)
+                .tickSizeOuter(0);
+            if (xFormat)
+                xAxisDef.tickFormat(xFormat);
             var xAxis = g.select(".x.axis")
@@ -134,5 +137,9 @@ .attr("transform", "translate(0," + contentHeight + ")")
                 .call(xAxisDef);
+            // Remove axis line
+            xAxis.selectAll("path").remove();
+            // Update color of axis lines
             xAxis.selectAll("line")
                 .style("shape-rendering", "crispEdges")
                 .style("stroke", axisColor);
+            // Update color of axis labels
             xAxis.selectAll("text")
@@ -143,8 +150,18 @@ .style("text-anchor", "start")
             // Update the y-axis
+            var yAxisDef = axisLeft(yAxisScale)
+                .tickSizeInner(-contentWidth)
+                .tickSizeOuter(0)
+                .ticks(1);
+            if (yFormat)
+                yAxisDef.tickFormat(yFormat);
             var yAxis = g.select(".y.axis")
                 .style("font-size", axisFontSizePx + "px")
                 .call(yAxisDef);
+            // Remove axis line
+            yAxis.selectAll("path").remove();
+            // Update color of axis lines
             yAxis.selectAll("line")
                 .style("shape-rendering", "crispEdges")
                 .style("stroke", axisColor);
+            // Update color of axis labels
             yAxis.selectAll(".tick text")
@@ -222,149 +239,2 @@ .attr("x", 2)
     return chart;
-}
-
-/*
-(function () {
-    d3.latencyHeatmap = function () {
-
-
-        function chart(selection) {
-            selection.each(function (data) {
-                // Convert data to standard representation
-                data = data.map(function (d, i) {
-                    return [xAccessor.call(data, d, i), yAccessor.call(data, d, i), countAccessor.call(data, d, i)];
-                });
-
-                // If rectSize is undefined, its dynamically calculated based
-                // on width & height.  Otherwise, width & height are dynamically
-                // calculated based on rectSize.
-                var nCols = d3.nest()
-                    .key(function (d) { return d[0] })
-                    .entries(data)
-                    .length;
-                var nRows = d3.nest()
-                    .key(function (d) { return d[1] })
-                    .entries(data)
-                    .length;
-                if (rectSize) {
-                    width = rectSize[0] * nCols + margin.left + margin.right;
-                    height = rectSize[1] * nRows + margin.top + margin.bottom;
-                } else {
-                    rectSize = [(width - margin.left - margin.right) / nCols, (height - margin.top - margin.bottom) / nRows];
-                }
-
-                var contentWidth = width - margin.left - margin.right,
-                    contentHeight = height - margin.top - margin.bottom;
-
-                // Calculate all the extents once
-                var xExtent = d3.extent(data, function (d) { return d[0]; });
-                var yExtent = d3.extent(data, function (d) { return d[1]; });
-                var countExtent = d3.extent(data, function (d) { return d[2]; });
-
-                var xScale = d3.time.scale()
-                    .domain(xExtent)
-                    .range([0, contentWidth - rectSize[0]]);
-                var yAxisScale = d3.scale.linear()
-                    .domain(yExtent)
-                    .range([contentHeight, 0]);
-                var yContentScale = d3.scale.linear()
-                    .domain(yExtent)
-                    .range([contentHeight - rectSize[1], 0]);
-                var countScale = d3.scale.linear()
-                    .domain(countExtent)
-                    .interpolate(d3.interpolateRgb)
-                    .range(colorRange);
-
-                // Create the axis definitions using the scale
-                var xAxisDef = d3.svg.axis()
-                    .scale(xScale)
-                    .orient("bottom")
-                    .innerTickSize(-contentHeight)
-                    .outerTickSize(0);
-                if (xFormat)
-                    xAxisDef.tickFormat(xFormat);
-                var yAxisDef = d3.svg.axis()
-                    .scale(yAxisScale)
-                    .orient("left")
-                    .innerTickSize(-contentWidth)
-                    .outerTickSize(0)
-                    .ticks(1);
-                if (yFormat)
-                    yAxisDef.tickFormat(yFormat);
-
-                // Select the svg element, if it exists.
-                var svg = d3.select(this).selectAll("svg").data([data]);
-                // Otherwise, create the skeletal chart.
-                var gEnter = svg.enter().append("svg").append("g");
-                gEnter.append("g").attr("class", "elems");
-                gEnter.append("g").attr("class", "x axis");
-                gEnter.append("g").attr("class", "y axis");
-                
-                // Update the outer dimensions.
-                svg.attr("width", width)
-                    .attr("height", height);
-
-                // Update the inner dimensions.
-                var g = svg.select("g")
-                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-                // Update the individual points
-                var nodes = g.select(".elems")
-                    .selectAll("rect")
-                    .data(data);
-                // Update old elements
-                nodes
-                    .attr("x", function (d) { return xScale(d[0]); })
-                    .attr("y", function (d) { return yContentScale(d[1]); })
-                    .attr("fill", function (d) { return countScale(d[2]); });
-                // Create new elements
-                var rects = nodes.enter()
-                    .append("rect")
-                    .attr("x", function (d) { return xScale(d[0]); })
-                    .attr("y", function (d) { return yContentScale(d[1]); })
-                    .attr("width", rectSize[0])
-                    .attr("height", rectSize[1])
-                    .attr("fill", function (d) { return countScale(d[2]); });
-                if (tooltipText) {
-                    rects.append("title")
-                        .html(function (d) { return tooltipText(d) });
-                }
-                // Remove old elements
-                nodes.exit()
-                    .remove();
-                    
-                // Update the x-axis
-                var xAxis = g.select(".x.axis")
-                    .attr("transform", "translate(0," + contentHeight + ")")
-                    .style("font-size", axisFontSizePx + "px")
-                    .call(xAxisDef);
-                xAxis.selectAll("line")
-                    .style("shape-rendering", "crispEdges")
-                    .style("stroke", axisColor);
-                xAxis.selectAll("text")
-                    .style("text-anchor", "start")
-                    .style("fill", xAxisTextColor);
-
-                // Update the y-axis
-                var yAxis = g.select(".y.axis")
-                    .style("font-size", axisFontSizePx + "px")
-                    .call(yAxisDef);
-                yAxis.selectAll("line")
-                    .style("shape-rendering", "crispEdges")
-                    .style("stroke", axisColor);
-                yAxis.selectAll(".tick text")
-                    .attr("x", 2)
-                    .style("text-anchor", "start")
-                    .style("fill", yAxisTextColor);
-                yAxis.selectAll(".tick:last-of-type text")
-                    .attr("y", 8);
-                yAxis.selectAll(".tick:first-of-type text")
-                    .attr("y", -8);
-            });
-        }
-
-
-
-        return chart;
-    };
-})();
-*/
+}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

498701

increased by47.76%

Number of package files

16

increased by14.29%

Number of lines in readme file

216

increased by2.86%

Worsened metrics

Lines of code

436

decreased by-33.74%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedd3-array@1

• - Removedd3-selection@1

• - Removedd3-selection@1.4.2(transitive)