tdp-heatmap - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/components/HeatMapDate.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -90,4 +92,2 @@
     value: function renderHeatMap(dataset, svg, noMonthName) {
-      var _this2 = this;
-
       var _this$props = this.props,
@@ -107,3 +107,5 @@ startDate = _this$props.startDate,
           monthLables = _this$props.monthLables,
-          tooltipRender = _this$props.tooltipRender; // Array of months for x axis
+          tooltipRender = _this$props.tooltipRender,
+          currentDate = _this$props.currentDate;
+      var svgElem = this.state.svgElem; // Array of months for x axis
 
@@ -113,2 +115,47 @@ var monthsName = monthLables || ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sep", "Oct", "Nov", "Dec"];
       if (dataset.length > 0) {
+        var zoom = function zoom(target, d) {
+          svg.selectAll('.dayRect').attr('transform', function (dd) {
+            return "translate(".concat(dd.x, " ").concat(dd.y, ")");
+          }).select('.side').remove();
+          target.attr('transform', "translate(".concat(d.x - 2, " ").concat(d.y - 2, ") scale(1.3)")).insert("rect", ":first-child").attr('class', 'side').attr('width', rectWidth + 4).attr('height', rectWidth + 4).attr('x', -2).attr('y', -2).attr('rx', 2).attr('ry', 2).attr('fill', '#ffffff');
+          var newTarget = target.clone(true);
+          var targetChilds = newTarget.selectAll('rect');
+          target.remove();
+          var node = newTarget.node();
+          targetChilds.nodes().forEach(function (item) {
+            node.appendChild(item);
+          });
+          bindEvents(d3.select(node));
+
+          if (svgElem) {
+            console.log(svgElem);
+            svgElem.appendChild(node);
+          }
+        };
+
+        var bindEvents = function bindEvents(target) {
+          var _this2 = this;
+
+          target.on("mouseover", function (d, i) {
+            if (d.color !== backgroundColor && d.color !== _HeatMapDate.noDisplayColor) {
+              tip.show(d, this);
+              d3.select(this).attr("stroke", "black");
+            }
+
+            onMouseEnter(d, i);
+          }).on("mouseout", function (d, i) {
+            tip.hide(d, _this2);
+            d3.selectAll("rect").attr("stroke", "none");
+            onMouseLeave(d, i);
+          }).on("click", function (d, i) {
+            if (!d.count) return;
+            tip.hide(d, this);
+            d3.selectAll("rect").attr("stroke", "none");
+            onMouseLeave(d, i);
+            var target = d3.select(this);
+            zoom(target, d, i);
+            onClick(d, i);
+          });
+        };
+
         // I added an ID the tooltip because it's a workaround to prevent the tooltip won't hide when the component is updating
@@ -123,3 +170,5 @@ var tip = (0, _d3Tip["default"])().attr("class", "d3-tip " + this.ID).offset([-8, 0]).html(function (d) {
         var monthOffset = 0;
-        var dayRect = svg.selectAll("rect").data(dataset).enter().append("g").attr("class", "dayRect").attr("transform", function (d) {
+        var dayRect = svg.selectAll("rect").data(dataset).enter().append("g").attr('date', function (d) {
+          return (0, _dayjs["default"])(d.date).format('YYYY-MM-DD');
+        }).attr("class", "dayRect").attr("transform", function (d) {
           var prefixYear = displayYear ? rectWidth : 0;
@@ -142,17 +191,7 @@ var currentDate = new Date(d.date);
           var y = d.i % 7 * (rectWidth + marginBottom) + 24 + 10;
+          d.x = x;
+          d.y = y;
           return "translate(".concat(x, " ").concat(y, ")");
-        }).on("mouseover", function (d, i) {
-          if (d.color !== backgroundColor && d.color !== _HeatMapDate.noDisplayColor) {
-            tip.show(d, this);
-            d3.select(this).attr("stroke", "black");
-          }
-
-          onMouseEnter(d, i);
-        }).on("mouseout", function (d, i) {
-          tip.hide(d, _this2);
-          d3.selectAll("rect").attr("stroke", "none");
-          onMouseLeave(d, i);
-        }).on("click", function (d, i) {
-          onClick(d, i);
         });
+        bindEvents(dayRect);
         dayRect.append('rect').attr("rx", 2).attr("ry", 2).attr("fill-opacity", 1).attr("width", rectWidth).attr("height", rectWidth).attr("fill", function (d) {
@@ -204,2 +243,11 @@ if (d.colors) {
         });
+
+        if (currentDate) {
+          console.log("rect[date='".concat((0, _dayjs["default"])(currentDate).format('YYYY-MM-DD'), "']"));
+          var current = svg.select("[date='".concat((0, _dayjs["default"])(currentDate).format('YYYY-MM-DD'), "']"));
+
+          if (current && current.dispatch) {
+            current.dispatch('click');
+          }
+        }
       }
@@ -206,0 +254,0 @@ }

package.json

 {
   "name": "tdp-heatmap",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A customizable calendar heatmap",
@@ -50,2 +50,3 @@ "main": "dist/index.js",
     "d3-tip": "^0.9.1",
+    "dayjs": "^1.8.24",
     "lodash": "^4.17.13",
@@ -52,0 +53,0 @@ "mem": "^4.0.0",

No alert changes

Improved metrics

Total package byte prevSize

38158

increased by5.55%

Lines of code

517

increased by9.07%

Worsened metrics

Dependency count

15

increased by7.14%

Dependency changes

• + Addeddayjs@^1.8.24

• + Addeddayjs@1.11.13(transitive)