Skip to content

Commit

Permalink
Merge pull request #18 from williamtroup/1.5.1
Browse files Browse the repository at this point in the history 
1.5.1
  • Loading branch information
William Troup authored Jan 26, 2024
2 parents 72855da + a99d3a3 commit 838d012
Show file tree
Hide file tree
Showing 28 changed files with 290 additions and 176 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.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/)
[![npm](https://img.shields.io/badge/npmjs-v1.5.1-blue)](https://www.npmjs.com/package/jheat.js)
[![nuget](https://img.shields.io/badge/nuget-v1.5.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.5.0</p>
> <p align="center">v1.5.1</p>
<br />
![Heat.js](docs/images/main.png)
Expand Down
6 changes: 3 additions & 3 deletions README_NUGET.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Heat.js v1.5.0
# Heat.js v1.5.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.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/)
[![npm](https://img.shields.io/badge/npmjs-v1.5.1-blue)](https://www.npmjs.com/package/jheat.js)
[![nuget](https://img.shields.io/badge/nuget-v1.5.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/)
Expand Down
103 changes: 58 additions & 45 deletions dist/heat.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! Heat.js v1.5.0 | (c) Bunoon 2024 | MIT License */
/*! Heat.js v1.5.1 | (c) Bunoon 2024 | MIT License */
(function() {
function render() {
var tagTypes = _configuration.domElementTypes;
Expand Down Expand Up @@ -137,30 +137,32 @@
function renderControlTitleBar(bindingOptions) {
if (bindingOptions.showTitle || bindingOptions.showYearSelector || bindingOptions.showRefreshButton || bindingOptions.showExportButton) {
var titleBar = createElement(bindingOptions.currentView.element, "div", "title-bar");
var title = createElement(titleBar, "div", "title");
createElement(title, "div", "down-arrow");
if (bindingOptions.showTitle) {
var title = createElementWithHTML(titleBar, "div", "title", bindingOptions.titleText);
var titlesList = createElement(title, "div", "titles-list");
var titles = createElement(titlesList, "div", "titles");
var optionMap = createElementWithHTML(titles, "div", "title", _configuration.mapText);
var optionChart = createElementWithHTML(titles, "div", "title", _configuration.chartText);
if (bindingOptions.currentView.view !== _elements_View_Map) {
optionMap.onclick = function() {
bindingOptions.currentView.view = _elements_View_Map;
renderControlContainer(bindingOptions);
fireCustomTrigger(bindingOptions.onNextYear, bindingOptions.currentView.year);
};
} else {
optionMap.className += _string.space + "title-active";
}
if (bindingOptions.currentView.view !== _elements_View_Chart) {
optionChart.onclick = function() {
bindingOptions.currentView.view = _elements_View_Chart;
renderControlContainer(bindingOptions);
fireCustomTrigger(bindingOptions.onNextYear, bindingOptions.currentView.year);
};
} else {
optionChart.className += _string.space + "title-active";
}
title.innerHTML += bindingOptions.titleText;
}
var titlesList = createElement(title, "div", "titles-list");
var titles = createElement(titlesList, "div", "titles");
var optionMap = createElementWithHTML(titles, "div", "title", _configuration.mapText);
var optionChart = createElementWithHTML(titles, "div", "title", _configuration.chartText);
if (bindingOptions.currentView.view !== _elements_View_Map) {
optionMap.onclick = function() {
bindingOptions.currentView.view = _elements_View_Map;
renderControlContainer(bindingOptions);
fireCustomTrigger(bindingOptions.onNextYear, bindingOptions.currentView.year);
};
} else {
optionMap.className += _string.space + "title-active";
}
if (bindingOptions.currentView.view !== _elements_View_Chart) {
optionChart.onclick = function() {
bindingOptions.currentView.view = _elements_View_Chart;
renderControlContainer(bindingOptions);
fireCustomTrigger(bindingOptions.onNextYear, bindingOptions.currentView.year);
};
} else {
optionChart.className += _string.space + "title-active";
}
if (bindingOptions.showExportButton) {
var exportData = createElementWithHTML(titleBar, "button", "export", _configuration.exportButtonText);
Expand All @@ -184,6 +186,7 @@
fireCustomTrigger(bindingOptions.onBackYear, bindingOptions.currentView.year);
};
bindingOptions.currentView.yearText = createElementWithHTML(titleBar, "div", "year-text", bindingOptions.currentView.year);
createElement(bindingOptions.currentView.yearText, "div", "down-arrow");
if (bindingOptions.showYearSelectionDropDown) {
var yearList = createElement(bindingOptions.currentView.yearText, "div", "years-list");
var years = createElement(yearList, "div", "years");
Expand Down Expand Up @@ -326,7 +329,6 @@
}
function renderControlChart(bindingOptions) {
var chart = createElement(bindingOptions.currentView.chartContents, "div", "chart");
var chartMonths = createElement(bindingOptions.currentView.chartContents, "div", "chart-months ");
var labels = createElement(chart, "div", "labels");
var dayLines = createElement(chart, "div", "day-lines");
var mapRangeColors = bindingOptions.mapRangeColors.sort(function(a, b) {
Expand All @@ -336,16 +338,23 @@
var pixelsPerNumbers = bindingOptions.currentView.mapContents.offsetHeight / largestValueForCurrentYear;
var currentYear = bindingOptions.currentView.year;
var totalDays = 0;
var dayLine = null;
var labelsWidth = labels.offsetWidth + getStyleValueByName(labels, "margin-right", true);
if (largestValueForCurrentYear > 0) {
createElementWithHTML(labels, "div", "label-top", largestValueForCurrentYear.toString());
createElementWithHTML(labels, "div", "label-middle", Math.floor(largestValueForCurrentYear / 2).toString());
createElementWithHTML(labels, "div", "label-bottom", "0");
var labelsWidth = 0;
if (largestValueForCurrentYear > 0 && bindingOptions.showChartYLabels) {
createElementWithHTML(labels, "div", "label-0", largestValueForCurrentYear.toString());
createElementWithHTML(labels, "div", "label-25", (Math.floor(largestValueForCurrentYear / 4) * 3).toString());
createElementWithHTML(labels, "div", "label-50", Math.floor(largestValueForCurrentYear / 2).toString());
createElementWithHTML(labels, "div", "label-75", Math.floor(largestValueForCurrentYear / 4).toString());
createElementWithHTML(labels, "div", "label-100", "0");
labelsWidth = labels.offsetWidth + getStyleValueByName(labels, "margin-right", true);
} else {
labels.parentNode.removeChild(labels);
labels = null;
}
if (largestValueForCurrentYear === 0) {
chart.style.minHeight = bindingOptions.currentView.mapContents.offsetHeight + "px";
labels.style.display = "none";
if (isDefined(labels)) {
labels.style.display = "none";
}
} else {
var totalMonths = 0;
var monthIndex1 = 0;
Expand All @@ -357,7 +366,7 @@
var dayIndex = 0;
for (; dayIndex < totalDaysInMonth; dayIndex++) {
if (bindingOptions.daysToShow.indexOf(actualDay) > -1) {
dayLine = renderControlChartDay(dayLines, bindingOptions, dayIndex + 1, monthIndex1, currentYear, mapRangeColors, pixelsPerNumbers);
renderControlChartDay(dayLines, bindingOptions, dayIndex + 1, monthIndex1, currentYear, mapRangeColors, pixelsPerNumbers);
}
if ((dayIndex + 1) % 7 === 0) {
actualDay = 0;
Expand All @@ -367,18 +376,21 @@
}
}
}
var linesWidth = dayLines.offsetWidth / totalMonths;
var monthIndex2 = 0;
for (; monthIndex2 < 12; monthIndex2++) {
if (bindingOptions.monthsToShow.indexOf(monthIndex2 + 1) > -1) {
var monthName = createElementWithHTML(chartMonths, "div", "month-name", _configuration.monthNames[monthIndex2]);
monthName.style.marginLeft = labelsWidth + linesWidth * monthIndex2 + "px";
if (bindingOptions.showMonthNames) {
var chartMonths = createElement(bindingOptions.currentView.chartContents, "div", "chart-months ");
var linesWidth = dayLines.offsetWidth / totalMonths;
var monthIndex2 = 0;
for (; monthIndex2 < 12; monthIndex2++) {
if (bindingOptions.monthsToShow.indexOf(monthIndex2 + 1) > -1) {
var monthName = createElementWithHTML(chartMonths, "div", "month-name", _configuration.monthNames[monthIndex2]);
monthName.style.marginLeft = labelsWidth + linesWidth * monthIndex2 + "px";
}
}
chartMonths.style.width = dayLines.offsetWidth + "px";
var monthNameSpace = createElement(chartMonths, "div", "month-name-space");
monthNameSpace.style.height = chartMonths.offsetHeight + "px";
monthNameSpace.style.width = labelsWidth + "px";
}
chartMonths.style.width = dayLines.offsetWidth + "px";
var monthNameSpace = createElement(chartMonths, "div", "month-name-space");
monthNameSpace.style.height = chartMonths.offsetHeight + "px";
monthNameSpace.style.width = labelsWidth + "px";
if (bindingOptions.keepScrollPositions) {
bindingOptions.currentView.chartContents.scrollLeft = bindingOptions.currentView.chartContentsScrollLeft;
}
Expand All @@ -395,6 +407,7 @@
dayLine.title = getCustomFormattedDateText(bindingOptions.dayToolTipText, date);
}
dayLine.style.height = dateCount * pixelsPerNumbers + "px";
dayLine.style.setProperty("border-bottom-width", "0", "important");
if (isDefinedFunction(bindingOptions.onDayClick)) {
dayLine.onclick = function() {
fireCustomTrigger(bindingOptions.onDayClick, date, dateCount);
Expand All @@ -406,7 +419,6 @@
if (isDefined(useMapRangeColor) && isHeatMapColorVisible(bindingOptions, useMapRangeColor.id)) {
dayLine.className += _string.space + useMapRangeColor.cssClassName;
}
return dayLine;
}
function renderControlViewGuide(bindingOptions) {
var guide = createElement(bindingOptions.currentView.element, "div", "guide");
Expand Down Expand Up @@ -583,6 +595,7 @@
options.extraSelectionYears = getDefaultNumber(options.extraSelectionYears, 50);
options.showYearSelectionDropDown = getDefaultBoolean(options.showYearSelectionDropDown, true);
options.view = getDefaultString(options.view, null);
options.showChartYLabels = getDefaultBoolean(options.showChartYLabels, true);
if (isInvalidOptionArray(options.monthsToShow)) {
options.monthsToShow = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
}
Expand Down Expand Up @@ -998,7 +1011,7 @@
return this;
};
this.getVersion = function() {
return "1.5.0";
return "1.5.1";
};
(function(documentObject, windowObject) {
_parameter_Document = documentObject;
Expand Down
50 changes: 40 additions & 10 deletions dist/heat.js.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Heat.js Library v1.5.0
* Heat.js Library v1.5.1
*
* Copyright 2024 Bunoon
* Released under the MIT License
Expand Down Expand Up @@ -55,7 +55,7 @@

/*
-------------------------------------------------------------------------
Heat.js - Buttons
Heat.js - Mixins
-------------------------------------------------------------------------
*/
/*
Expand Down Expand Up @@ -109,6 +109,15 @@ div.heat-js div.title-bar div.title {
padding-bottom: 3px;
cursor: pointer;
}
div.heat-js div.title-bar div.title div.down-arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 14px solid var(--heat-js-color-white);
margin-right: var(--heat-js-spacing);
}
div.heat-js div.title-bar div.title:hover div.titles-list {
display: block;
}
Expand Down Expand Up @@ -192,6 +201,15 @@ div.heat-js div.title-bar div.year-text {
padding-bottom: 5px;
cursor: pointer;
}
div.heat-js div.title-bar div.year-text div.down-arrow {
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 9px solid var(--heat-js-color-white);
margin-left: calc(var(--heat-js-spacing) / 2);
}
div.heat-js div.title-bar div.year-text:hover div.years-list {
display: block;
}
Expand Down Expand Up @@ -255,7 +273,8 @@ div.heat-js div.title-bar button.refresh {
-------------------------------------------------------------------------
*/
div.heat-js div.map-contents {
overflow-y: scroll;
overflow-x: scroll;
overflow-y: hidden;
}
div.heat-js div.map-contents div.map {
display: inline-flex;
Expand Down Expand Up @@ -346,7 +365,8 @@ div.heat-js div.map-contents div.map div.months div.month div.day-columns div.da
*/
div.heat-js div.chart-contents {
display: flex;
overflow-y: scroll;
overflow-x: scroll;
overflow-y: hidden;
text-wrap: nowrap;
white-space: nowrap;
}
Expand All @@ -369,9 +389,11 @@ 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 {
div.heat-js div.chart-contents div.chart div.labels div.label-0,
div.heat-js div.chart-contents div.chart div.labels div.label-25,
div.heat-js div.chart-contents div.chart div.labels div.label-50,
div.heat-js div.chart-contents div.chart div.labels div.label-75,
div.heat-js div.chart-contents div.chart div.labels div.label-100 {
font-weight: var(--heat-js-text-bold-weight);
text-align: left !important;
height: var(--heat-js-day-size);
Expand All @@ -381,14 +403,22 @@ div.heat-js div.chart-contents div.chart div.labels div.label-bottom {
position: absolute;
left: 0;
}
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-0 {
top: 0;
}
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-25 {
top: 25%;
transform: translateY(-25%);
}
div.heat-js div.chart-contents div.chart div.labels div.label-50 {
top: 50%;
transform: translateY(-50%);
}
div.heat-js div.chart-contents div.chart div.labels div.label-bottom {
div.heat-js div.chart-contents div.chart div.labels div.label-75 {
top: 75%;
transform: translateY(-75%);
}
div.heat-js div.chart-contents div.chart div.labels div.label-100 {
bottom: 0;
}
div.heat-js div.chart-contents div.chart div.day-lines {
Expand Down
Loading

0 comments on commit 838d012

Please sign in to comment.