heatmap overlay, add unbind events function

dist/frappe-charts.esm.js

@@ -230,10 +230,10 @@ const DEFAULT_CHAR_WIDTH = 7;
 const ANGLE_RATIO = Math.PI / 180;
 const FULL_ANGLE = 360;
 
-/**
- * Returns the value of a number upto 2 decimal places.
- * @param {Number} d Any number
- */
+// Fixed 5-color theme,
+// More colors are difficult to parse visually
+const HEATMAP_DISTRIBUTION_SIZE = 5;
+
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -792,6 +792,25 @@ let makeOverlay = {
 		overlay.setAttribute('fill', fill);
 		overlay.style.opacity = '0.6';
 
+		if(transformValue) {
+			overlay.setAttribute('transform', transformValue);
+		}
+		return overlay;
+	},
+
+	'heat_square': (unit) => {
+		let transformValue;
+		if(unit.nodeName !== 'circle') {
+			transformValue = unit.getAttribute('transform');
+			unit = unit.childNodes[0];
+		}
+		let overlay = unit.cloneNode();
+		let radius = unit.getAttribute('r');
+		let fill = unit.getAttribute('fill');
+		overlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR);
+		overlay.setAttribute('fill', fill);
+		overlay.style.opacity = '0.6';
+
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
 		}
@@ -834,7 +853,25 @@ let updateOverlay = {
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
 		}
-	}
+	},
+
+	'heat_square': (unit, overlay) => {
+		let transformValue;
+		if(unit.nodeName !== 'circle') {
+			transformValue = unit.getAttribute('transform');
+			unit = unit.childNodes[0];
+		}
+		let attributes = ['cx', 'cy'];
+		Object.values(unit.attributes)
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
+
+		if(transformValue) {
+			overlay.setAttribute('transform', transformValue);
+		}
+	},
 };
 
 const PRESET_COLOR_MAP = {
@@ -1421,6 +1458,11 @@ class BaseChart {
 	getDifferentChart(type) {
 		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
 	}
+
+	unbindWindowEvents(){
+		window.removeEventListener('resize', () => this.draw(true));
+		window.removeEventListener('orientationchange', () => this.draw(true));
+	}
 }
 
 class AggregationChart extends BaseChart {
@@ -2332,11 +2374,8 @@ function getMaxCheckpoint(value, distribution) {
 class Heatmap extends BaseChart {
 	constructor(parent, options) {
 		super(parent, options);
-
 		this.type = 'heatmap';
 
-		this.domain = options.domain || '';
-		this.subdomain = options.subdomain || '';
 		this.data = options.data || {};
 		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
 		this.countLabel = options.countLabel || '';
@@ -2349,10 +2388,6 @@ class Heatmap extends BaseChart {
 			? legendColors
 			: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
 
-		// Fixed 5-color theme,
-		// More colors are difficult to parse visually
-		this.distribution_size = 5;
-
 		this.translateX = 0;
 		this.setup();
 	}
@@ -2424,7 +2459,7 @@ class Heatmap extends BaseChart {
 	calc() {
 
 		let dataValues = Object.keys(this.data).map(key => this.data[key]);
-		this.distribution = calcDistribution(dataValues, this.distribution_size);
+		this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
 
 		this.monthNames = ["January", "February", "March", "April", "May", "June",
 			"July", "August", "September", "October", "November", "December"
@@ -3256,7 +3291,6 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
-// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,

docs/assets/js/index.js

@@ -438,6 +438,8 @@ events_chart.parent.addEventListener('data-select', (e) => {
 // Heatmap
 // ================================================================================
 
+
+
 let heatmapData = {};
 let current_date = new Date();
 let timestamp = current_date.getTime()/1000;
@@ -447,7 +449,7 @@ for (var i = 0; i< 375; i++) {
 	timestamp = Math.floor(timestamp - 86400).toFixed(1);
 }
 
-new frappe.Chart("#chart-heatmap", {
+let heatmap = new frappe.Chart("#chart-heatmap", {
 	data: heatmapData,
 	type: 'heatmap',
 	legendScale: [0, 1, 2, 4, 5],
@@ -456,7 +458,7 @@ new frappe.Chart("#chart-heatmap", {
 	legendColors: ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
 });
 
-// console.log(heatmapData, heatmap);
+console.log(heatmapData, heatmap);
 
 Array.prototype.slice.call(
 	document.querySelectorAll('.heatmap-mode-buttons button')

src/js/charts/BaseChart.js

@@ -279,4 +279,9 @@ export default class BaseChart {
 	getDifferentChart(type) {
 		return getDifferentChart(type, this.type, this.parent, this.rawChartArgs);
 	}
+
+	unbindWindowEvents(){
+		window.removeEventListener('resize', () => this.draw(true));
+		window.removeEventListener('orientationchange', () => this.draw(true));
+	}
 }

src/js/charts/Heatmap.js

@@ -3,15 +3,13 @@ import { makeSVGGroup, makeHeatSquare, makeText } from '../utils/draw';
 import { addDays, getDdMmYyyy, getWeeksBetween } from '../utils/date-utils';
 import { calcDistribution, getMaxCheckpoint } from '../utils/intervals';
 import { isValidColor } from '../utils/colors';
+import { HEATMAP_DISTRIBUTION_SIZE } from '../utils/constants';
 
 export default class Heatmap extends BaseChart {
 	constructor(parent, options) {
 		super(parent, options);
-
 		this.type = 'heatmap';
 
-		this.domain = options.domain || '';
-		this.subdomain = options.subdomain || '';
 		this.data = options.data || {};
 		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
 		this.countLabel = options.countLabel || '';
@@ -24,10 +22,6 @@ export default class Heatmap extends BaseChart {
 			? legendColors
 			: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'];
 
-		// Fixed 5-color theme,
-		// More colors are difficult to parse visually
-		this.distribution_size = 5;
-
 		this.translateX = 0;
 		this.setup();
 	}
@@ -99,7 +93,7 @@ export default class Heatmap extends BaseChart {
 	calc() {
 
 		let dataValues = Object.keys(this.data).map(key => this.data[key]);
-		this.distribution = calcDistribution(dataValues, this.distribution_size);
+		this.distribution = calcDistribution(dataValues, HEATMAP_DISTRIBUTION_SIZE);
 
 		this.monthNames = ["January", "February", "March", "April", "May", "June",
 			"July", "August", "September", "October", "November", "December"

src/js/utils/constants.js

@@ -20,4 +20,8 @@ export const DEFAULT_CHAR_WIDTH = 7;
 
 // Universal constants
 export const ANGLE_RATIO = Math.PI / 180;
-export const FULL_ANGLE = 360;
+export const FULL_ANGLE = 360;
+
+// Fixed 5-color theme,
+// More colors are difficult to parse visually
+export const HEATMAP_DISTRIBUTION_SIZE = 5;

src/js/utils/draw.js

@@ -490,6 +490,25 @@ export let makeOverlay = {
 		overlay.setAttribute('fill', fill);
 		overlay.style.opacity = '0.6';
 
+		if(transformValue) {
+			overlay.setAttribute('transform', transformValue);
+		}
+		return overlay;
+	},
+
+	'heat_square': (unit) => {
+		let transformValue;
+		if(unit.nodeName !== 'circle') {
+			transformValue = unit.getAttribute('transform');
+			unit = unit.childNodes[0];
+		}
+		let overlay = unit.cloneNode();
+		let radius = unit.getAttribute('r');
+		let fill = unit.getAttribute('fill');
+		overlay.setAttribute('r', parseInt(radius) + DOT_OVERLAY_SIZE_INCR);
+		overlay.setAttribute('fill', fill);
+		overlay.style.opacity = '0.6';
+
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
 		}
@@ -532,5 +551,23 @@ export let updateOverlay = {
 		if(transformValue) {
 			overlay.setAttribute('transform', transformValue);
 		}
-	}
+	},
+
+	'heat_square': (unit, overlay) => {
+		let transformValue;
+		if(unit.nodeName !== 'circle') {
+			transformValue = unit.getAttribute('transform');
+			unit = unit.childNodes[0];
+		}
+		let attributes = ['cx', 'cy'];
+		Object.values(unit.attributes)
+			.filter(attr => attributes.includes(attr.name) && attr.specified)
+			.map(attr => {
+				overlay.setAttribute(attr.name, attr.nodeValue);
+			});
+
+		if(transformValue) {
+			overlay.setAttribute('transform', transformValue);
+		}
+	},
 };