1.2.1

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.2.0-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.2.0-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.2.1-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.2.1-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 to visualize date-based activity and trends.</p>
-> <p align="center">v1.2.0</p>
+> <p align="center">v1.2.1</p>
 <br />
 
 ![Heat.js](docs/images/main.png)
@@ -27,6 +27,7 @@ Heat.js
 - Toggling colors on/off support.
 - Export all data to CSV.
 - 12 language translations available!
+- Trend types allows data to be split up and viewed separately.
 <br />
 <br />
 

README_NUGET.md

@@ -1,8 +1,8 @@
-# Heat.js v1.2.0
+# Heat.js v1.2.1
 
 [![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.2.0-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.2.0-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.2.1-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.2.1-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/)
@@ -20,6 +20,7 @@
 - Toggling colors on/off support.
 - Export all data to CSV.
 - 12 language translations available!
+- Trend types allows data to be split up and viewed separately.
 
 
 ## What browsers are supported?

dist/heat.js

@@ -1,4 +1,4 @@
-/*! Heat.js v1.2.0 | (c) Bunoon 2024 | MIT License */
+/*! Heat.js v1.2.1 | (c) Bunoon 2024 | MIT License */
 (function() {
   function render() {
     var tagTypes = _configuration.domElementTypes;
@@ -731,7 +731,7 @@
     return this;
   };
   this.getVersion = function() {
-    return "1.2.0";
+    return "1.2.1";
   };
   (function(documentObject, windowObject) {
     _parameter_Document = documentObject;

dist/heat.js.css

@@ -1,5 +1,5 @@
 /*
- * Heat.js Library v1.2.0
+ * Heat.js Library v1.2.1
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -15,6 +15,7 @@
   --heat-js-day-background-color-hover: var(--heat-js-container-border-color);
   --heat-js-day-spacing: 6.3px;
   --heat-js-day-opacity-hover: 0.7;
+  --heat-js-day-size: 1.1rem;
   --heat-js-day-color-1-background-color: rgba( 57, 211, 83, 0.25 );
   --heat-js-day-color-1-border-color: rgba( 57, 211, 83, 0.15 );
   --heat-js-day-color-2-background-color: rgba( 57, 211, 83, 0.50 );
@@ -25,6 +26,7 @@
   --heat-js-day-color-4-border-color: rgba( 57, 211, 83, 0.75 );
   --heat-js-button-background-color: var(--heat-js-day-background-color);
   --heat-js-button-border-color: var(--heat-js-container-border-color);
+  --heat-js-button-text-color: var(--heat-js-color-white);
   --heat-js-button-background-color-hover: var(--heat-js-container-border-color);
   --heat-js-button-background-color-active: #616b79;
   --heat-js-border-radius: 0.5rem;
@@ -90,7 +92,7 @@ div.heat-js div.title-bar div.title {
 div.heat-js div.title-bar button {
   background-color: var(--heat-js-button-background-color);
   border: var(--heat-js-border-size) solid var(--heat-js-button-border-color);
-  color: var(--heat-js-color-white);
+  color: var(--heat-js-button-text-color);
   border-radius: var(--heat-js-border-radius);
   padding-top: 5px;
   padding-bottom: 5px;
@@ -122,6 +124,16 @@ div.heat-js div.title-bar div.year-text {
   margin-right: var(--heat-js-spacing);
   display: inline-block;
 }
+div.heat-js div.title-bar button.export,
+div.heat-js div.title-bar button.refresh {
+  display: none;
+}
+@media (min-width: 768px) {
+  div.heat-js div.title-bar button.export,
+  div.heat-js div.title-bar button.refresh {
+    display: inline-block;
+  }
+}
 
 /*
     -------------------------------------------------------------------------
@@ -141,10 +153,21 @@ div.heat-js div.map-contents div.map div.days {
   padding-top: calc(var(--heat-js-spacing-font-size) + var(--heat-js-spacing) + 1px);
   position: sticky;
   left: 0;
+  display: none;
+}
+@media (min-width: 768px) {
+  div.heat-js div.map-contents div.map div.days {
+    display: block;
+  }
 }
 div.heat-js div.map-contents div.map div.days div.day-name {
   font-weight: 300;
-  margin-bottom: 4px;
+  text-align: left !important;
+  height: var(--heat-js-day-size);
+  margin-bottom: var(--heat-js-day-spacing);
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
 }
 div.heat-js div.map-contents div.map div.months {
   display: flex;
@@ -161,6 +184,7 @@ div.heat-js div.map-contents div.map div.months div.month:last-child div.day-col
 div.heat-js div.map-contents div.map div.months div.month div.month-name,
 div.heat-js div.map-contents div.map div.months div.month div.month-name-bottom {
   font-weight: 300;
+  text-align: left !important;
 }
 div.heat-js div.map-contents div.map div.months div.month div.month-name {
   margin-bottom: var(--heat-js-spacing);
@@ -175,8 +199,8 @@ div.heat-js div.map-contents div.map div.months div.month div.day-columns {
 div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day,
 div.heat-js div.map-contents div.map div.months div.month div.day-columns div.day-column div.day-disabled {
   border-radius: var(--heat-js-border-radius-day);
-  width: var(--heat-js-spacing-font-size);
-  height: var(--heat-js-spacing-font-size);
+  width: var(--heat-js-day-size);
+  height: var(--heat-js-day-size);
   margin-right: var(--heat-js-day-spacing);
   margin-bottom: var(--heat-js-day-spacing);
 }
@@ -201,20 +225,36 @@ div.heat-js div.map-contents div.map div.months div.month div.day-columns div.da
     -------------------------------------------------------------------------
 */
 div.heat-js div.guide {
-  margin-top: calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2);
-  display: flex;
+  display: block;
+}
+@media (min-width: 768px) {
+  div.heat-js div.guide {
+    display: flex;
+  }
 }
 div.heat-js div.guide div.map-types,
 div.heat-js div.guide div.map-toggles {
-  flex-basis: 100%;
+  margin-top: calc(var(--heat-js-spacing) + var(--heat-js-spacing) / 2);
+}
+@media (min-width: 768px) {
+  div.heat-js div.guide div.map-types,
+  div.heat-js div.guide div.map-toggles {
+    flex-basis: 100%;
+    margin-bottom: 0;
+  }
 }
 div.heat-js div.guide div.map-types {
-  text-align: left;
+  text-align: center;
+}
+@media (min-width: 768px) {
+  div.heat-js div.guide div.map-types {
+    text-align: left;
+  }
 }
 div.heat-js div.guide div.map-types button {
   background-color: var(--heat-js-button-background-color);
   border: var(--heat-js-border-size) solid var(--heat-js-button-border-color);
-  color: var(--heat-js-color-white);
+  color: var(--heat-js-button-text-color);
   border-radius: var(--heat-js-border-radius);
   padding-top: 5px;
   padding-bottom: 5px;
@@ -240,10 +280,16 @@ div.heat-js div.guide div.map-types button {
   margin-right: calc(var(--heat-js-spacing) / 2) !important;
 }
 div.heat-js div.guide div.map-toggles {
-  text-align: right;
   display: flex;
   align-items: center;
-  justify-content: right;
+  justify-content: center;
+  text-align: center;
+}
+@media (min-width: 768px) {
+  div.heat-js div.guide div.map-toggles {
+    text-align: right;
+    justify-content: right;
+  }
 }
 div.heat-js div.guide div.map-toggles div.no-click {
   pointer-events: none;
@@ -279,8 +325,8 @@ div.heat-js div.guide div.map-toggles div.days div.day {
   border: var(--heat-js-border-size) solid var(--heat-js-day-border-color);
   display: inline-block;
   border-radius: var(--heat-js-border-radius-day);
-  width: var(--heat-js-spacing-font-size);
-  height: var(--heat-js-spacing-font-size);
+  width: var(--heat-js-day-size);
+  height: var(--heat-js-day-size);
   margin-right: var(--heat-js-day-spacing);
   cursor: pointer;
   transition: var(--heat-js-transition);