Merge pull request #17 from williamtroup/1.5.0

1.5.0
williamtroup · Jan 25, 2024 · 72855da · 72855da
2 parents a8e04c3 + c914faa
commit 72855da
Show file tree

Hide file tree

Showing 31 changed files with 958 additions and 146 deletions.
diff --git a/README.md b/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.4.0-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.4.0-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.5.0-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.5.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 to visualize date-based activity and trends.</p>
-> <p align="center">v1.4.0</p>
+> <p align="center">v1.5.0</p>
 <br />
 
 ![Heat.js](docs/images/main.png)
@@ -23,6 +23,7 @@ Heat.js
 - Full API available via public functions.
 - Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables).
+- 2 views supported: Map and Chart!
 - Fully configurable per DOM element.
 - Toggling colors on/off support.
 - Export all data to CSV.

diff --git a/README_NUGET.md b/README_NUGET.md
@@ -1,8 +1,8 @@
-# Heat.js v1.4.0
+# Heat.js v1.5.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.4.0-blue)](https://www.npmjs.com/package/jheat.js)
-[![nuget](https://img.shields.io/badge/nuget-v1.4.0-purple)](https://www.nuget.org/packages/jHeat.js/)
+[![npm](https://img.shields.io/badge/npmjs-v1.5.0-blue)](https://www.npmjs.com/package/jheat.js)
+[![nuget](https://img.shields.io/badge/nuget-v1.5.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/)
@@ -16,6 +16,7 @@
 - Full API available via public functions.
 - Fully styled in CSS/SASS, fully responsive, and compatible with the Bootstrap library.
 - Full CSS theme support (using :root variables).
+- 2 views supported: Map and Chart!
 - Fully configurable per DOM element.
 - Toggling colors on/off support.
 - Export all data to CSV.

diff --git a/dist/heat.js b/dist/heat.js
diff --git a/dist/heat.js.css b/dist/heat.js.css
@@ -1,5 +1,5 @@
 /*
- * Heat.js Library v1.4.0
+ * Heat.js Library v1.5.0
  *
  * Copyright 2024 Bunoon
  * Released under the MIT License
@@ -14,6 +14,10 @@
   --heat-js-years-border-color: var(--heat-js-container-border-color);
   --heat-js-years-text-color: var(--heat-js-color-white);
   --heat-js-years-background-color-hover: var(--heat-js-button-background-color-hover);
+  --heat-js-title-background-color: var(--heat-js-container-background-color);
+  --heat-js-title-border-color: var(--heat-js-container-border-color);
+  --heat-js-title-text-color: var(--heat-js-color-white);
+  --heat-js-title-background-color-hover: var(--heat-js-button-background-color-hover);
   --heat-js-day-background-color: #2d333b;
   --heat-js-day-border-color: var(--heat-js-container-border-color);
   --heat-js-day-background-color-hover: var(--heat-js-container-border-color);
@@ -102,6 +106,51 @@ div.heat-js div.title-bar div.title {
   float: left;
   font-weight: var(--heat-js-title-bold-weight);
   font-size: 1.2rem;
+  padding-bottom: 3px;
+  cursor: pointer;
+}
+div.heat-js div.title-bar div.title:hover div.titles-list {
+  display: block;
+}
+div.heat-js div.title-bar div.title div.titles-list {
+  padding-top: 3px;
+  display: none;
+  position: absolute;
+  width: 100px;
+  margin-top: 3px;
+  z-index: 100;
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles {
+  border-radius: var(--heat-js-border-radius);
+  background-color: var(--heat-js-title-background-color);
+  border: var(--heat-js-border-size) solid var(--heat-js-title-border-color);
+  color: var(--heat-js-title-text-color);
+  overflow-y: scroll;
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles div.title {
+  color: var(--heat-js-color-white);
+  font-weight: var(--heat-js-text-bold-weight);
+  border-bottom: var(--heat-js-border-size) dashed var(--heat-js-container-border-color);
+  padding: var(--heat-js-spacing);
+  text-align: left;
+  width: 100%;
+  transition: var(--heat-js-transition);
+  font-size: var(--heat-js-spacing-font-size) !important;
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles div.title:not(.title-active):active {
+  opacity: 0.5 !important;
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles div.title:not(.title-active):hover {
+  cursor: pointer;
+  background-color: var(--heat-js-title-background-color-hover);
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles div.title:last-child {
+  border-bottom: none;
+}
+div.heat-js div.title-bar div.title div.titles-list div.titles div.title-active {
+  background-color: var(--heat-js-title-background-color-hover);
+  font-weight: 900;
+  cursor: default !important;
 }
 div.heat-js div.title-bar button {
   background-color: var(--heat-js-button-background-color);
@@ -160,8 +209,9 @@ div.heat-js div.title-bar div.year-text div.years-list div.years {
   background-color: var(--heat-js-years-background-color);
   border: var(--heat-js-border-size) solid var(--heat-js-years-border-color);
   color: var(--heat-js-years-text-color);
-  height: 200px;
+  height: 183px;
   overflow-y: scroll;
+  scroll-snap-type: y mandatory;
 }
 div.heat-js div.title-bar div.year-text div.years-list div.years div.year {
   color: var(--heat-js-color-white);
@@ -171,17 +221,23 @@ div.heat-js div.title-bar div.year-text div.years-list div.years div.year {
   text-align: center;
   width: 100%;
   transition: var(--heat-js-transition);
+  scroll-snap-align: start;
 }
-div.heat-js div.title-bar div.year-text div.years-list div.years div.year:active {
+div.heat-js div.title-bar div.year-text div.years-list div.years div.year:not(.year-active):active {
   opacity: 0.5 !important;
 }
-div.heat-js div.title-bar div.year-text div.years-list div.years div.year:hover {
+div.heat-js div.title-bar div.year-text div.years-list div.years div.year:not(.year-active):hover {
   cursor: pointer;
   background-color: var(--heat-js-years-background-color-hover);
 }
 div.heat-js div.title-bar div.year-text div.years-list div.years div.year:last-child {
   border-bottom: none;
 }
+div.heat-js div.title-bar div.year-text div.years-list div.years div.year-active {
+  background-color: var(--heat-js-years-background-color-hover);
+  font-weight: 900;
+  cursor: default !important;
+}
 div.heat-js div.title-bar button.export,
 div.heat-js div.title-bar button.refresh {
   display: none;
@@ -212,6 +268,7 @@ div.heat-js div.map-contents div.map div.days {
   position: sticky;
   left: 0;
   display: none;
+  z-index: 50;
 }
 @media (min-width: 768px) {
   div.heat-js div.map-contents div.map div.days {
@@ -282,6 +339,89 @@ div.heat-js div.map-contents div.map div.months div.month div.day-columns div.da
   background: var(--heat-js-day-background-color-hover);
 }
 
+/*
+    -------------------------------------------------------------------------
+    Heat.js - Chart
+    -------------------------------------------------------------------------
+*/
+div.heat-js div.chart-contents {
+  display: flex;
+  overflow-y: scroll;
+  text-wrap: nowrap;
+  white-space: nowrap;
+}
+div.heat-js div.chart-contents div.chart {
+  display: inline-flex;
+  flex-direction: row;
+}
+div.heat-js div.chart-contents div.chart div.labels {
+  background-color: var(--heat-js-container-background-color);
+  padding-right: calc(var(--heat-js-spacing) * 3);
+  padding-top: calc(var(--heat-js-spacing-font-size) + var(--heat-js-spacing) + 1px);
+  position: sticky;
+  left: 0;
+  display: none;
+  border-right: var(--heat-js-border-size) solid var(--heat-js-container-border-color);
+  z-index: 50;
+}
+@media (min-width: 768px) {
+  div.heat-js div.chart-contents div.chart div.labels {
+    display: block;
+  }
+}
+div.heat-js div.chart-contents div.chart div.labels div.label-top,
+div.heat-js div.chart-contents div.chart div.labels div.label-middle,
+div.heat-js div.chart-contents div.chart div.labels div.label-bottom {
+  font-weight: var(--heat-js-text-bold-weight);
+  text-align: left !important;
+  height: var(--heat-js-day-size);
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  left: 0;
+}
+div.heat-js div.chart-contents div.chart div.labels div.label-top {
+  top: 0;
+}
+div.heat-js div.chart-contents div.chart div.labels div.label-middle {
+  top: 50%;
+  transform: translateY(-50%);
+}
+div.heat-js div.chart-contents div.chart div.labels div.label-bottom {
+  bottom: 0;
+}
+div.heat-js div.chart-contents div.chart div.day-lines {
+  flex: 1;
+  border-bottom: var(--heat-js-border-size) solid var(--heat-js-container-border-color);
+}
+div.heat-js div.chart-contents div.chart div.day-lines div.day-line {
+  vertical-align: bottom;
+  width: 8px;
+  margin-right: 1px;
+  display: inline-block;
+}
+div.heat-js div.chart-contents div.chart div.day-lines div.day-line:last-child {
+  margin-right: 0;
+}
+div.heat-js div.chart-contents div.chart-months {
+  position: relative;
+  height: calc(var(--heat-js-spacing-font-size) + var(--heat-js-spacing));
+}
+div.heat-js div.chart-contents div.chart-months div.month-name,
+div.heat-js div.chart-contents div.chart-months div.month-name-space {
+  font-weight: var(--heat-js-text-bold-weight);
+  text-align: left !important;
+  position: absolute;
+  bottom: 0;
+}
+div.heat-js div.chart-contents div.chart-months div.month-name-space {
+  left: 0;
+  top: 0;
+  position: sticky;
+  background-color: var(--heat-js-container-background-color);
+}
+
 /*
     -------------------------------------------------------------------------
     Heat.js - Guide

diff --git a/dist/heat.js.css.map b/dist/heat.js.css.map