[base] extended containers, fixes heatmap tooltip

dist/frappe-charts.esm.js

@@ -1364,10 +1364,17 @@ class BaseChart {
 	makeContainer() {
 		// Chart needs a dedicated parent element
 		this.parent.innerHTML = '';
-		this.container = $.create('div', {
+
+		let args = {
 			inside: this.parent,
 			className: 'chart-container'
-		});
+		};
+
+		if(this.independentWidth) {
+			args.styles = { width: this.independentWidth + 'px' };
+		}
+
+		this.container = $.create('div', args);
 	}
 
 	makeTooltip() {
@@ -2628,7 +2635,6 @@ class Heatmap extends BaseChart {
 		super(parent, options);
 		this.type = 'heatmap';
 
-		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
 		this.countLabel = options.countLabel || '';
 
 		let validStarts = ['Sunday', 'Monday'];
@@ -2639,18 +2645,26 @@ class Heatmap extends BaseChart {
 		this.setup();
 	}
 
+	configure(options) {
+		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
+		super.configure(options);
+	}
+
 	setMargins() {
 		super.setMargins();
 		this.leftMargin = HEATMAP_LEFT_MARGIN;
 		this.topMargin = HEATMAP_TOP_MARGIN;
+
+		let d = this.data;
+		let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
+		this.independentWidth = (getWeeksBetween(d.start, d.end)
+			+ spacing) * COL_WIDTH + this.rightMargin + this.leftMargin;
 	}
 
 	updateWidth() {
-		this.baseWidth = (this.state.noOfWeeks + 99) * COL_WIDTH;
+		let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
-
+		this.baseWidth = (this.state.noOfWeeks + spacing) * COL_WIDTH
-		if(this.discreteDomains) {
+			+ this.rightMargin + this.leftMargin;
-			this.baseWidth += (COL_WIDTH * NO_OF_YEAR_MONTHS);
-		}
 	}
 
 	prepareData(data=this.data) {
@@ -2693,7 +2707,6 @@ class Heatmap extends BaseChart {
 
 	setupComponents() {
 		let s = this.state;
-
 		let lessCol = this.discreteDomains ? 0 : 1;
 
 		let componentConfigs = s.domainConfigs.map((config, i) => [
@@ -2719,7 +2732,8 @@ class Heatmap extends BaseChart {
 			.map((args, i) => {
 				let component = getComponent(...args);
 				return [args[0] + '-' + i, component];
-			}));
+			})
+		);
 
 		let y = 0;
 		DAY_NAMES_SHORT.forEach((dayName, i) => {

docs/assets/js/index.min.js

@@ -49,6 +49,12 @@ var HEATMAP_COLORS_YELLOW = ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001
 
 // Universal constants
 
+/**
+ * Returns the value of a number upto 2 decimal places.
+ * @param {Number} d Any number
+ */
+
+
 /**
  * Returns whether or not two given arrays are equal.
  * @param {Array} arr1 First array
@@ -118,7 +124,6 @@ var MONTH_NAMES_SHORT = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
 
 
 
-// https://stackoverflow.com/a/11252167/6495043
 
 
 function clone(date) {
@@ -296,6 +301,8 @@ var heatmapData = {
 	end: end
 };
 
+// ================================================================================
+
 var c1 = document.querySelector("#chart-composite-1");
 var c2 = document.querySelector("#chart-composite-2");
 

docs/index.html

@@ -187,7 +187,7 @@
                 <button type="button" class="btn btn-sm btn-secondary" data-mode="continuous">Continuous</button>
               </div>
               <div class="heatmap-color-buttons btn-group mt-1 mx-auto" role="group">
-                <button type="button" class="btn btn-sm btn-secondary" data-color="default">Default green</button>
+                <button type="button" class="btn btn-sm btn-secondary" data-color="default">Green (Default)</button>
                 <button type="button" class="btn btn-sm btn-secondary active" data-color="blue">Blue</button>
                 <button type="button" class="btn btn-sm btn-secondary" data-color="halloween">GitHub's Halloween</button>
               </div>

src/js/charts/BaseChart.js

@@ -96,10 +96,17 @@ export default class BaseChart {
 	makeContainer() {
 		// Chart needs a dedicated parent element
 		this.parent.innerHTML = '';
-		this.container = $.create('div', {
+
+		let args = {
 			inside: this.parent,
 			className: 'chart-container'
-		});
+		};
+
+		if(this.independentWidth) {
+			args.styles = { width: this.independentWidth + 'px' };
+		}
+
+		this.container = $.create('div', args);
 	}
 
 	makeTooltip() {

src/js/charts/Heatmap.js

@@ -16,7 +16,6 @@ export default class Heatmap extends BaseChart {
 		super(parent, options);
 		this.type = 'heatmap';
 
-		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
 		this.countLabel = options.countLabel || '';
 
 		let validStarts = ['Sunday', 'Monday'];
@@ -27,18 +26,26 @@ export default class Heatmap extends BaseChart {
 		this.setup();
 	}
 
+	configure(options) {
+		this.discreteDomains = options.discreteDomains === 0 ? 0 : 1;
+		super.configure(options);
+	}
+
 	setMargins() {
 		super.setMargins();
 		this.leftMargin = HEATMAP_LEFT_MARGIN;
 		this.topMargin = HEATMAP_TOP_MARGIN;
+
+		let d = this.data;
+		let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
+		this.independentWidth = (getWeeksBetween(d.start, d.end)
+			+ spacing) * COL_WIDTH + this.rightMargin + this.leftMargin;
 	}
 
 	updateWidth() {
-		this.baseWidth = (this.state.noOfWeeks + 99) * COL_WIDTH;
+		let spacing = this.discreteDomains ? NO_OF_YEAR_MONTHS : 0;
-
+		this.baseWidth = (this.state.noOfWeeks + spacing) * COL_WIDTH
-		if(this.discreteDomains) {
+			+ this.rightMargin + this.leftMargin;
-			this.baseWidth += (COL_WIDTH * NO_OF_YEAR_MONTHS);
-		}
 	}
 
 	prepareData(data=this.data) {
@@ -81,7 +88,6 @@ export default class Heatmap extends BaseChart {
 
 	setupComponents() {
 		let s = this.state;
-
 		let lessCol = this.discreteDomains ? 0 : 1;
 
 		let componentConfigs = s.domainConfigs.map((config, i) => [
@@ -107,7 +113,8 @@ export default class Heatmap extends BaseChart {
 			.map((args, i) => {
 				let component = getComponent(...args);
 				return [args[0] + '-' + i, component];
-			}));
+			})
+		);
 
 		let y = 0;
 		DAY_NAMES_SHORT.forEach((dayName, i) => {