Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.5.1 #18

Merged
merged 11 commits into from
Jan 26, 2024
Merged

1.5.1 #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
72f57f1
Updated to v1.5.1.
Jan 25, 2024
1bdbd3a
Minor documentation fix.
Jan 25, 2024
c6385e2
Fixed the chart view showing the border at the bottom of each bar.
Jan 26, 2024
1824094
Fixed the binding option "showMonthNames" not being used for the char…
Jan 26, 2024
68c50fe
Added extra values for the Y axis on the chart view (now shows 5 valu…
Jan 26, 2024
bfac1a9
Removed dead code that is no longer needed.
Jan 26, 2024
7f7b9b9
Fixed the overflow CSS properties for the chart and map being the wro…
Jan 26, 2024
f7e9943
Added a new binding option called "showChartYLabels", which states if…
Jan 26, 2024
54af185
Added arrows to the title and year text in the title bar (to help sho…
Jan 26, 2024
d891657
MInor change log update.
Jan 26, 2024
a99d3a3
Updated main image.
Jan 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions README.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading