1.6.0

README.md

@@ -2,15 +2,15 @@
 Heat.js
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Heat.js%2C%20a%20free%20JavaScript%heat%20map&url=https://github.com/williamtroup/Heat.js&hashtags=javascript,heat,map)
-[![npm](https://img.shields.io/badge/npmjs-v1.5.2-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.5.2-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.6.0-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.6.0-purple)](https://www.nuget.org/packages/jHeat.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Heat.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Heat.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/)
 </h1>
 
 > <p align="center">🌞 A lightweight JavaScript library that generates customizable heat maps and charts to visualize date-based activity and trends.</p>
-> <p align="center">v1.5.2</p>
+> <p align="center">v1.6.0</p>
 <br />
 
 ![Heat.js](docs/images/main.png)

README_NUGET.md

@@ -1,8 +1,8 @@
-# Heat.js v1.5.2
+# Heat.js v1.6.0
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Heat.js%2C%20a%20free%20JavaScript%heat%20map&url=https://github.com/williamtroup/Heat.js&hashtags=javascript,heat,map)
-[![npm](https://img.shields.io/badge/npmjs-v1.5.2-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.5.2-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.6.0-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.6.0-purple)](https://www.nuget.org/packages/jHeat.js/)
 [![license](https://img.shields.io/badge/license-MIT-green)](https://github.com/williamtroup/Heat.js/blob/main/LICENSE.txt)
 [![discussions Welcome](https://img.shields.io/badge/discussions-Welcome-red)](https://github.com/williamtroup/Heat.js/discussions)
 [![coded by William Troup](https://img.shields.io/badge/coded_by-William_Troup-yellow)](https://william-troup.com/)

dist/heat.js

@@ -1,4 +1,4 @@
-/*! Heat.js v1.5.2 | (c) Bunoon 2024 | MIT License */
+/*! Heat.js v1.6.0 | (c) Bunoon 2024 | MIT License */
 (function() {
   function render() {
     var tagTypes = _configuration.domElementTypes;
@@ -43,6 +43,8 @@
     var bindingOptions = buildAttributeOptions(data);
     bindingOptions.currentView = {};
     bindingOptions.currentView.element = element;
+    bindingOptions.currentView.tooltip = null;
+    bindingOptions.currentView.tooltipTimer = null;
     bindingOptions.currentView.mapContents = null;
     bindingOptions.currentView.mapContentsScrollLeft = 0;
     bindingOptions.currentView.chartContents = null;
@@ -78,6 +80,7 @@
     }
     bindingOptions.currentView.element.className = "heat-js";
     bindingOptions.currentView.element.innerHTML = _string.empty;
+    renderControlToolTip(bindingOptions);
     renderControlTitleBar(bindingOptions);
     renderControlMap(bindingOptions);
     renderControlChart(bindingOptions);
@@ -134,6 +137,45 @@
     }
     return useMapRangeColor;
   }
+  function renderControlToolTip(bindingOptions) {
+    if (!isDefined(bindingOptions.currentView.tooltip)) {
+      bindingOptions.currentView.tooltip = createElement(_parameter_Document.body, "div", "heat-js-tooltip");
+      bindingOptions.currentView.tooltip.style.display = "none";
+      _parameter_Document.body.addEventListener("mousemove", function() {
+        hideToolTip(bindingOptions);
+      });
+      _parameter_Document.addEventListener("scroll", function() {
+        hideToolTip(bindingOptions);
+      });
+    }
+  }
+  function addToolTip(element, bindingOptions, text) {
+    if (element !== null) {
+      element.onmousemove = function(e) {
+        showToolTip(e, bindingOptions, text);
+      };
+    }
+  }
+  function showToolTip(e, bindingOptions, text) {
+    cancelBubble(e);
+    hideToolTip(bindingOptions);
+    bindingOptions.currentView.tooltipTimer = setTimeout(function() {
+      bindingOptions.currentView.tooltip.innerHTML = text;
+      bindingOptions.currentView.tooltip.style.display = "block";
+      showElementAtMousePosition(e, bindingOptions.currentView.tooltip);
+    }, bindingOptions.tooltipDelay);
+  }
+  function hideToolTip(bindingOptions) {
+    if (isDefined(bindingOptions.currentView.tooltip)) {
+      if (isDefined(bindingOptions.currentView.tooltipTimer)) {
+        clearTimeout(bindingOptions.currentView.tooltipTimer);
+        bindingOptions.currentView.tooltipTimer = null;
+      }
+      if (bindingOptions.currentView.tooltip.style.display === "block") {
+        bindingOptions.currentView.tooltip.style.display = "none";
+      }
+    }
+  }
   function renderControlTitleBar(bindingOptions) {
     if (bindingOptions.showTitle || bindingOptions.showYearSelector || bindingOptions.showRefreshButton || bindingOptions.showExportButton) {
       var titleBar = createElement(bindingOptions.currentView.element, "div", "title-bar");
@@ -303,9 +345,9 @@
     var dateCount = _elements_DateCounts[bindingOptions.currentView.element.id].type[bindingOptions.currentView.type][toStorageDate(date)];
     dateCount = isDefinedNumber(dateCount) ? dateCount : 0;
     if (isDefinedFunction(bindingOptions.onDayToolTipRender)) {
-      day.title = fireCustomTrigger(bindingOptions.onDayToolTipRender, date, dateCount);
+      addToolTip(day, bindingOptions, fireCustomTrigger(bindingOptions.onDayToolTipRender, date, dateCount));
     } else {
-      day.title = getCustomFormattedDateText(bindingOptions.dayToolTipText, date);
+      addToolTip(day, bindingOptions, getCustomFormattedDateText(bindingOptions.dayToolTipText, date));
     }
     if (bindingOptions.showDayNumbers && dateCount > 0) {
       day.innerHTML = dateCount.toString();
@@ -401,9 +443,9 @@
     var dateCount = _elements_DateCounts[bindingOptions.currentView.element.id].type[bindingOptions.currentView.type][toStorageDate(date)];
     dateCount = isDefinedNumber(dateCount) ? dateCount : 0;
     if (isDefinedFunction(bindingOptions.onDayToolTipRender)) {
-      dayLine.title = fireCustomTrigger(bindingOptions.onDayToolTipRender, date, dateCount);
+      addToolTip(dayLine, bindingOptions, fireCustomTrigger(bindingOptions.onDayToolTipRender, date, dateCount));
     } else {
-      dayLine.title = getCustomFormattedDateText(bindingOptions.dayToolTipText, date);
+      addToolTip(dayLine, bindingOptions, getCustomFormattedDateText(bindingOptions.dayToolTipText, date));
     }
     dayLine.style.height = dateCount * pixelsPerNumbers + "px";
     dayLine.style.setProperty("border-bottom-width", "0", "important");
@@ -485,7 +527,7 @@
   }
   function renderControlViewGuideDay(bindingOptions, days, mapRangeColor) {
     var day = createElement(days, "div");
-    day.title = mapRangeColor.tooltipText;
+    addToolTip(day, bindingOptions, mapRangeColor.tooltipText);
     if (isHeatMapColorVisible(bindingOptions, mapRangeColor.id)) {
       day.className = "day " + mapRangeColor.cssClassName;
     } else {
@@ -595,6 +637,7 @@
     options.showYearSelectionDropDown = getDefaultBoolean(options.showYearSelectionDropDown, true);
     options.view = getDefaultString(options.view, null);
     options.showChartYLabels = getDefaultBoolean(options.showChartYLabels, true);
+    options.tooltipDelay = getDefaultNumber(options.tooltipDelay, 1000);
     if (isInvalidOptionArray(options.monthsToShow)) {
       options.monthsToShow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
     }
@@ -780,6 +823,40 @@
     }
     return {parsed:parsed, result:result};
   }
+  function cancelBubble(e) {
+    e.preventDefault();
+    e.cancelBubble = true;
+  }
+  function getScrollPosition() {
+    var doc = _parameter_Document.documentElement;
+    var left = (_parameter_Window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
+    var top = (_parameter_Window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+    return {left:left, top:top};
+  }
+  function showElementAtMousePosition(e, element) {
+    var left = e.pageX;
+    var top = e.pageY;
+    var scrollPosition = getScrollPosition();
+    element.style.display = "block";
+    if (left + element.offsetWidth > _parameter_Window.innerWidth) {
+      left = left - element.offsetWidth;
+    } else {
+      left++;
+    }
+    if (top + element.offsetHeight > _parameter_Window.innerHeight) {
+      top = top - element.offsetHeight;
+    } else {
+      top++;
+    }
+    if (left < scrollPosition.left) {
+      left = e.pageX + 1;
+    }
+    if (top < scrollPosition.top) {
+      top = e.pageY + 1;
+    }
+    element.style.left = left + "px";
+    element.style.top = top + "px";
+  }
   function newGuid() {
     var result = [];
     var charIndex = 0;
@@ -847,6 +924,23 @@
   var _elements_View_Map = 1;
   var _elements_View_Chart = 2;
   var _attribute_Name_Options = "data-heat-options";
+  this.addDates = function(elementId, dates, type, triggerRefresh) {
+    if (_elements_DateCounts.hasOwnProperty(elementId)) {
+      triggerRefresh = !isDefinedBoolean(triggerRefresh) ? true : triggerRefresh;
+      type = !isDefinedString(type) ? _elements_DateCounts_DefaultType : type;
+      var datesLength = dates.length;
+      var bindingOptions = _elements_DateCounts[elementId].options;
+      var dateIndex = 0;
+      for (; dateIndex < datesLength; dateIndex++) {
+        this.addDate(elementId, dates[dateIndex], type, false);
+      }
+      fireCustomTrigger(bindingOptions.onAdd, bindingOptions.currentView.element);
+      if (triggerRefresh) {
+        renderControlContainer(_elements_DateCounts[elementId].options);
+      }
+    }
+    return this;
+  };
   this.addDate = function(elementId, date, type, triggerRefresh) {
     if (_elements_DateCounts.hasOwnProperty(elementId)) {
       triggerRefresh = !isDefinedBoolean(triggerRefresh) ? true : triggerRefresh;
@@ -868,6 +962,23 @@
     }
     return this;
   };
+  this.removeDates = function(elementId, dates, type, triggerRefresh) {
+    if (_elements_DateCounts.hasOwnProperty(elementId)) {
+      type = !isDefinedString(type) ? _elements_DateCounts_DefaultType : type;
+      triggerRefresh = !isDefinedBoolean(triggerRefresh) ? true : triggerRefresh;
+      var datesLength = dates.length;
+      var bindingOptions = _elements_DateCounts[elementId].options;
+      var dateIndex = 0;
+      for (; dateIndex < datesLength; dateIndex++) {
+        this.removeDate(elementId, dates[dateIndex], type, false);
+      }
+      fireCustomTrigger(bindingOptions.onRemove, bindingOptions.currentView.element);
+      if (triggerRefresh) {
+        renderControlContainer(_elements_DateCounts[elementId].options);
+      }
+    }
+    return this;
+  };
   this.removeDate = function(elementId, date, type, triggerRefresh) {
     if (_elements_DateCounts.hasOwnProperty(elementId)) {
       type = !isDefinedString(type) ? _elements_DateCounts_DefaultType : type;
@@ -988,6 +1099,7 @@
         var bindingOptions = _elements_DateCounts[elementId].options;
         bindingOptions.currentView.element.innerHTML = _string.empty;
         bindingOptions.currentView.element.className = _string.empty;
+        _parameter_Document.body.removeChild(bindingOptions.currentView.tooltip);
         fireCustomTrigger(bindingOptions.onDestroy, bindingOptions.currentView.element);
       }
     }
@@ -999,6 +1111,7 @@
       var bindingOptions = _elements_DateCounts[elementId].options;
       bindingOptions.currentView.element.innerHTML = _string.empty;
       bindingOptions.currentView.element.className = _string.empty;
+      _parameter_Document.body.removeChild(bindingOptions.currentView.tooltip);
       fireCustomTrigger(bindingOptions.onDestroy, bindingOptions.currentView.element);
       delete _elements_DateCounts[elementId];
     }
@@ -1010,7 +1123,7 @@
     return this;
   };
   this.getVersion = function() {
-    return "1.5.2";
+    return "1.6.0";
   };
   (function(documentObject, windowObject) {
     _parameter_Document = documentObject;

dist/heat.js.css

@@ -1,5 +1,5 @@
 /*
- * Heat.js Library v1.5.2
+ * Heat.js Library v1.6.0
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -10,6 +10,9 @@
   --heat-js-color-gray: #AAAAAA;
   --heat-js-container-background-color: #22272e;
   --heat-js-container-border-color: #454c56;
+  --heat-js-tooltip-background-color: var(--heat-js-container-background-color);
+  --heat-js-tooltip-border-color: var(--heat-js-container-border-color);
+  --heat-js-tooltip-text-color: var(--heat-js-color-white);
   --heat-js-years-background-color: var(--heat-js-container-background-color);
   --heat-js-years-border-color: var(--heat-js-container-border-color);
   --heat-js-years-text-color: var(--heat-js-color-white);
@@ -71,6 +74,7 @@ div.heat-js {
   user-select: none;
   cursor: default;
   display: inline-block;
+  position: relative;
   border-radius: var(--heat-js-border-radius);
   background-color: var(--heat-js-container-background-color);
   color: var(--heat-js-color-white);
@@ -434,6 +438,9 @@ div.heat-js div.chart-contents div.chart div.day-lines div.day-line {
   display: inline-block;
   transition: var(--heat-js-transition);
 }
+div.heat-js div.chart-contents div.chart div.day-lines div.day-line:first-child {
+  margin-left: calc(var(--heat-js-spacing) / 2);
+}
 div.heat-js div.chart-contents div.chart div.day-lines div.day-line:last-child {
   margin-right: 0;
 }
@@ -608,4 +615,29 @@ div.heat-js div.day-color-4 {
   background-color: var(--heat-js-day-color-4-background-color) !important;
   border: var(--heat-js-border-size-day) solid var(--heat-js-day-color-4-border-color) !important;
   color: var(--heat-js-day-color-4-text-color);
+}
+
+/*
+    -------------------------------------------------------------------------
+    Heat.js - ToolTip
+    -------------------------------------------------------------------------
+*/
+div.heat-js-tooltip {
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  cursor: default;
+  position: absolute;
+  background-color: var(--heat-js-tooltip-background-color);
+  border: var(--heat-js-border-size) solid var(--heat-js-tooltip-border-color);
+  color: var(--heat-js-tooltip-text-color);
+  border-radius: var(--heat-js-border-radius);
+  z-index: 2000;
+  max-width: 300px;
+  padding: var(--heat-js-spacing);
+  font-size: var(--heat-js-spacing-font-size);
+  font-weight: var(--heat-js-text-bold-weight);
+  display: none;
 }/*# sourceMappingURL=heat.js.css.map */