remove chartWrapper, title, legend HTML

dist/frappe-charts.esm.js

@@ -267,6 +267,10 @@ const DEFAULT_COLORS = {
 	heatmap: HEATMAP_COLORS
 };
 
+/**
+ * Returns the value of a number upto 2 decimal places.
+ * @param {Number} d Any number
+ */
 function floatTwo(d) {
 	return parseFloat(d.toFixed(2));
 }
@@ -1263,25 +1267,19 @@ class BaseChart {
 	}
 
 	makeContainer() {
-		this.container = $.create('div', {
-			className: 'chart-container',
-			innerHTML: `<h6 class="title">${this.title}</h6>
-				<h6 class="sub-title uppercase">${this.subtitle}</h6>
-				<div class="frappe-chart graphics"></div>
-				<div class="graph-stats-container"></div>`
-		});
 
-		// Chart needs a dedicated parent element
 		this.parent.innerHTML = '';
-		this.parent.appendChild(this.container);
+		this.container = $.create('div', {
+			inside: this.parent,
+			className: 'chart-container'
+		});
 
-		this.chartWrapper = this.container.querySelector('.frappe-chart');
-		this.statsWrapper = this.container.querySelector('.graph-stats-container');
+		this.container = this.container;
 	}
 
 	makeTooltip() {
 		this.tip = new SvgTip({
-			parent: this.chartWrapper,
+			parent: this.container,
 			colors: this.colors
 		});
 		this.bindTooltip();
@@ -1344,7 +1342,7 @@ class BaseChart {
 			elementsToAnimate = elementsToAnimate.concat(c.update(animate));
 		});
 		if(elementsToAnimate.length > 0) {
-			runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate);
+			runSMILAnimation(this.container, this.svg, elementsToAnimate);
 			setTimeout(() => {
 				components.forEach(c => c.make());
 				this.updateNav();
@@ -1368,11 +1366,11 @@ class BaseChart {
 
 	makeChartArea() {
 		if(this.svg) {
-			this.chartWrapper.removeChild(this.svg);
+			this.container.removeChild(this.svg);
 		}
 		this.svg = makeSVGContainer(
-			this.chartWrapper,
-			'chart',
+			this.container,
+			'frappe-chart chart',
 			this.baseWidth,
 			this.baseHeight
 		);
@@ -1409,7 +1407,7 @@ class BaseChart {
 			};
 
 			document.addEventListener('keydown', (e) => {
-				if(isElementInViewport(this.chartWrapper)) {
+				if(isElementInViewport(this.container)) {
 					e = e || window.event;
 					if(this.keyActions[e.keyCode]) {
 						this.keyActions[e.keyCode]();
@@ -1517,26 +1515,26 @@ class AggregationChart extends BaseChart {
 	}
 
 	renderLegend() {
-		let s = this.state;
+		// let s = this.state;
 
-		this.statsWrapper.textContent = '';
+		// this.statsWrapper.textContent = '';
 
-		this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
+		// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
 
-		let xValues = s.labels;
-		this.legendTotals.map((d, i) => {
-			if(d) {
-				let stats = $.create('div', {
-					className: 'stats',
-					inside: this.statsWrapper
-				});
-				stats.innerHTML = `<span class="indicator">
-					<i style="background: ${this.colors[i]}"></i>
-					<span class="text-muted">${xValues[i]}:</span>
-					${d}
-				</span>`;
-			}
-		});
+		// let xValues = s.labels;
+		// this.legendTotals.map((d, i) => {
+		// 	if(d) {
+		// 		let stats = $.create('div', {
+		// 			className: 'stats',
+		// 			inside: this.statsWrapper
+		// 		});
+		// 		stats.innerHTML = `<span class="indicator">
+		// 			<i style="background: ${this.colors[i]}"></i>
+		// 			<span class="text-muted">${xValues[i]}:</span>
+		// 			${d}
+		// 		</span>`;
+		// 	}
+		// });
 	}
 }
 
@@ -1549,16 +1547,16 @@ class PercentageChart extends AggregationChart {
 	}
 
 	makeChartArea() {
-		this.chartWrapper.className += ' ' + 'graph-focus-margin';
-		this.chartWrapper.style.marginTop = '45px';
+		this.container.className += ' ' + 'graph-focus-margin';
+		this.container.style.marginTop = '45px';
 
-		this.statsWrapper.className += ' ' + 'graph-focus-margin';
-		this.statsWrapper.style.marginBottom = '30px';
-		this.statsWrapper.style.paddingTop = '0px';
+		// this.statsWrapper.className += ' ' + 'graph-focus-margin';
+		// this.statsWrapper.style.marginBottom = '30px';
+		// this.statsWrapper.style.paddingTop = '0px';
 
 		this.svg = $.create('div', {
 			className: 'div',
-			inside: this.chartWrapper
+			inside: this.container
 		});
 
 		this.chart = $.create('div', {
@@ -1593,12 +1591,12 @@ class PercentageChart extends AggregationChart {
 	bindTooltip() {
 		let s = this.state;
 
-		this.chartWrapper.addEventListener('mousemove', (e) => {
+		this.container.addEventListener('mousemove', (e) => {
 			let slice = e.target;
 			if(slice.classList.contains('progress-bar')) {
 
 				let i = slice.getAttribute('data-index');
-				let gOff = getOffset(this.chartWrapper), pOff = getOffset(slice);
+				let gOff = getOffset(this.container), pOff = getOffset(slice);
 
 				let x = pOff.left - gOff.left + slice.offsetWidth/2;
 				let y = pOff.top - gOff.top - 6;
@@ -2107,8 +2105,8 @@ class PieChart extends AggregationChart {
 	}
 
 	bindTooltip() {
-		this.chartWrapper.addEventListener('mousemove', this.mouseMove);
-		this.chartWrapper.addEventListener('mouseleave', this.mouseLeave);
+		this.container.addEventListener('mousemove', this.mouseMove);
+		this.container.addEventListener('mouseleave', this.mouseLeave);
 	}
 
 	mouseMove(e){
@@ -2389,6 +2387,7 @@ function getMaxCheckpoint(value, distribution) {
 }
 
 const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
+
 class Heatmap extends BaseChart {
 	constructor(parent, options) {
 		super(parent, options);
@@ -2430,7 +2429,7 @@ class Heatmap extends BaseChart {
 	}
 
 	calcWidth() {
-		this.baseWidth = (this.no_of_cols) * COL_SIZE;
+		this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
 
 		if(this.discreteDomains) {
 			this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS);
@@ -2446,12 +2445,6 @@ class Heatmap extends BaseChart {
 			'data-groups',
 			`translate(0, 20)`
 		);
-
-		this.container.querySelector('.title').style.display = 'None';
-		this.container.querySelector('.sub-title').style.display = 'None';
-		this.container.querySelector('.graph-stats-container').style.display = 'None';
-		this.chartWrapper.style.marginTop = '0px';
-		this.chartWrapper.style.paddingTop = '0px';
 	}
 
 	calc() {
@@ -2591,7 +2584,7 @@ class Heatmap extends BaseChart {
 
 				let month = getMonthName(parseInt(dateParts[1])-1, true);
 
-				let gOff = this.chartWrapper.getBoundingClientRect(), pOff = e.target.getBoundingClientRect();
+				let gOff = this.container.getBoundingClientRect(), pOff = e.target.getBoundingClientRect();
 
 				let width = parseInt(e.target.getAttribute('width'));
 				let x = pOff.left - gOff.left + (width+2)/2;
@@ -3070,8 +3063,8 @@ class AxisChart extends BaseChart {
 
 	bindTooltip() {
 		// NOTE: could be in tooltip itself, as it is a given functionality for its parent
-		this.chartWrapper.addEventListener('mousemove', (e) => {
-			let o = getOffset(this.chartWrapper);
+		this.container.addEventListener('mousemove', (e) => {
+			let o = getOffset(this.container);
 			let relX = e.pageX - o.left - this.leftMargin;
 			let relY = e.pageY - o.top - this.translateY;
 
@@ -3120,21 +3113,21 @@ class AxisChart extends BaseChart {
 	}
 
 	renderLegend() {
-		let s = this.data;
-		this.statsWrapper.textContent = '';
-
-		if(s.datasets.length > 1) {
-			s.datasets.map((d, i) => {
-				let stats = $.create('div', {
-					className: 'stats',
-					inside: this.statsWrapper
-				});
-				stats.innerHTML = `<span class="indicator">
-					<i style="background: ${this.colors[i]}"></i>
-					${d.name}
-				</span>`;
-			});
-		}
+		// let s = this.data;
+		// this.statsWrapper.textContent = '';
+
+		// if(s.datasets.length > 1) {
+		// 	s.datasets.map((d, i) => {
+		// 		let stats = $.create('div', {
+		// 			className: 'stats',
+		// 			inside: this.statsWrapper
+		// 		});
+		// 		stats.innerHTML = `<span class="indicator">
+		// 			<i style="background: ${this.colors[i]}"></i>
+		// 			${d.name}
+		// 		</span>`;
+		// 	});
+		// }
 	}
 
 	makeOverlay() {
@@ -3280,6 +3273,7 @@ class AxisChart extends BaseChart {
 	// removeDataPoint(index = 0) {}
 }
 
+// import MultiAxisChart from './charts/MultiAxisChart';
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,

dist/frappe-charts.min.css

@@ -1 +1 @@
-.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path,.chart-container .multiaxis-chart .line-horizontal,.chart-container .multiaxis-chart .y-axis-guide{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}
+.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px}

src/js/charts/AggregationChart.js

@@ -1,5 +1,4 @@
 import BaseChart from './BaseChart';
-import { $ } from '../utils/dom';
 
 export default class AggregationChart extends BaseChart {
 	constructor(parent, args) {
@@ -48,25 +47,25 @@ export default class AggregationChart extends BaseChart {
 	}
 
 	renderLegend() {
-		let s = this.state;
+		// let s = this.state;
 
-		this.statsWrapper.textContent = '';
+		// this.statsWrapper.textContent = '';
 
-		this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
+		// this.legendTotals = s.sliceTotals.slice(0, this.config.maxLegendPoints);
 
-		let xValues = s.labels;
-		this.legendTotals.map((d, i) => {
-			if(d) {
-				let stats = $.create('div', {
-					className: 'stats',
-					inside: this.statsWrapper
-				});
-				stats.innerHTML = `<span class="indicator">
-					<i style="background: ${this.colors[i]}"></i>
-					<span class="text-muted">${xValues[i]}:</span>
-					${d}
-				</span>`;
-			}
-		});
+		// let xValues = s.labels;
+		// this.legendTotals.map((d, i) => {
+		// 	if(d) {
+		// 		let stats = $.create('div', {
+		// 			className: 'stats',
+		// 			inside: this.statsWrapper
+		// 		});
+		// 		stats.innerHTML = `<span class="indicator">
+		// 			<i style="background: ${this.colors[i]}"></i>
+		// 			<span class="text-muted">${xValues[i]}:</span>
+		// 			${d}
+		// 		</span>`;
+		// 	}
+		// });
 	}
 }

src/js/charts/AxisChart.js

@@ -2,7 +2,7 @@ import BaseChart from './BaseChart';
 import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils';
 import { Y_AXIS_MARGIN } from '../utils/constants';
 import { getComponent } from '../objects/ChartComponents';
-import { $, getOffset, fire } from '../utils/dom';
+import { getOffset, fire } from '../utils/dom';
 import { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale } from '../utils/intervals';
 import { floatTwo } from '../utils/helpers';
 import { makeOverlay, updateOverlay } from '../utils/draw';
@@ -345,8 +345,8 @@ export default class AxisChart extends BaseChart {
 
 	bindTooltip() {
 		// NOTE: could be in tooltip itself, as it is a given functionality for its parent
-		this.chartWrapper.addEventListener('mousemove', (e) => {
-			let o = getOffset(this.chartWrapper);
+		this.container.addEventListener('mousemove', (e) => {
+			let o = getOffset(this.container);
 			let relX = e.pageX - o.left - this.leftMargin;
 			let relY = e.pageY - o.top - this.translateY;
 
@@ -395,21 +395,21 @@ export default class AxisChart extends BaseChart {
 	}
 
 	renderLegend() {
-		let s = this.data;
-		this.statsWrapper.textContent = '';
-
-		if(s.datasets.length > 1) {
-			s.datasets.map((d, i) => {
-				let stats = $.create('div', {
-					className: 'stats',
-					inside: this.statsWrapper
-				});
-				stats.innerHTML = `<span class="indicator">
-					<i style="background: ${this.colors[i]}"></i>
-					${d.name}
-				</span>`;
-			});
-		}
+		// let s = this.data;
+		// this.statsWrapper.textContent = '';
+
+		// if(s.datasets.length > 1) {
+		// 	s.datasets.map((d, i) => {
+		// 		let stats = $.create('div', {
+		// 			className: 'stats',
+		// 			inside: this.statsWrapper
+		// 		});
+		// 		stats.innerHTML = `<span class="indicator">
+		// 			<i style="background: ${this.colors[i]}"></i>
+		// 			${d.name}
+		// 		</span>`;
+		// 	});
+		// }
 	}
 
 	makeOverlay() {

src/js/charts/BaseChart.js

@@ -100,25 +100,19 @@ export default class BaseChart {
 	}
 
 	makeContainer() {
-		this.container = $.create('div', {
-			className: 'chart-container',
-			innerHTML: `<h6 class="title">${this.title}</h6>
-				<h6 class="sub-title uppercase">${this.subtitle}</h6>
-				<div class="frappe-chart graphics"></div>
-				<div class="graph-stats-container"></div>`
-		});
 
-		// Chart needs a dedicated parent element
 		this.parent.innerHTML = '';
-		this.parent.appendChild(this.container);
+		this.container = $.create('div', {
+			inside: this.parent,
+			className: 'chart-container'
+		});
 
-		this.chartWrapper = this.container.querySelector('.frappe-chart');
-		this.statsWrapper = this.container.querySelector('.graph-stats-container');
+		this.container = this.container;
 	}
 
 	makeTooltip() {
 		this.tip = new SvgTip({
-			parent: this.chartWrapper,
+			parent: this.container,
 			colors: this.colors
 		});
 		this.bindTooltip();
@@ -181,7 +175,7 @@ export default class BaseChart {
 			elementsToAnimate = elementsToAnimate.concat(c.update(animate));
 		});
 		if(elementsToAnimate.length > 0) {
-			runSMILAnimation(this.chartWrapper, this.svg, elementsToAnimate);
+			runSMILAnimation(this.container, this.svg, elementsToAnimate);
 			setTimeout(() => {
 				components.forEach(c => c.make());
 				this.updateNav();
@@ -205,11 +199,11 @@ export default class BaseChart {
 
 	makeChartArea() {
 		if(this.svg) {
-			this.chartWrapper.removeChild(this.svg);
+			this.container.removeChild(this.svg);
 		}
 		this.svg = makeSVGContainer(
-			this.chartWrapper,
-			'chart',
+			this.container,
+			'frappe-chart chart',
 			this.baseWidth,
 			this.baseHeight
 		);
@@ -246,7 +240,7 @@ export default class BaseChart {
 			};
 
 			document.addEventListener('keydown', (e) => {
-				if(isElementInViewport(this.chartWrapper)) {
+				if(isElementInViewport(this.container)) {
 					e = e || window.event;
 					if(this.keyActions[e.keyCode]) {
 						this.keyActions[e.keyCode]();

src/js/charts/Heatmap.js

@@ -7,7 +7,6 @@ import { HEATMAP_DISTRIBUTION_SIZE, HEATMAP_SQUARE_SIZE,
 	HEATMAP_GUTTER_SIZE } from '../utils/constants';
 
 const COL_SIZE = HEATMAP_SQUARE_SIZE + HEATMAP_GUTTER_SIZE;
-const EXTRA_COLS = 3;
 
 export default class Heatmap extends BaseChart {
 	constructor(parent, options) {
@@ -50,7 +49,7 @@ export default class Heatmap extends BaseChart {
 	}
 
 	calcWidth() {
-		this.baseWidth = (this.no_of_cols) * COL_SIZE;
+		this.baseWidth = (this.no_of_cols + 99) * COL_SIZE;
 
 		if(this.discreteDomains) {
 			this.baseWidth += (COL_SIZE * NO_OF_YEAR_MONTHS);
@@ -66,12 +65,6 @@ export default class Heatmap extends BaseChart {
 			'data-groups',
 			`translate(0, 20)`
 		);
-
-		this.container.querySelector('.title').style.display = 'None';
-		this.container.querySelector('.sub-title').style.display = 'None';
-		this.container.querySelector('.graph-stats-container').style.display = 'None';
-		this.chartWrapper.style.marginTop = '0px';
-		this.chartWrapper.style.paddingTop = '0px';
 	}
 
 	calc() {
@@ -212,7 +205,7 @@ export default class Heatmap extends BaseChart {
 
 				let month = getMonthName(parseInt(dateParts[1])-1, true);
 
-				let gOff = this.chartWrapper.getBoundingClientRect(), pOff = e.target.getBoundingClientRect();
+				let gOff = this.container.getBoundingClientRect(), pOff = e.target.getBoundingClientRect();
 
 				let width = parseInt(e.target.getAttribute('width'));
 				let x = pOff.left - gOff.left + (width+2)/2;

src/js/charts/PercentageChart.js

@@ -10,16 +10,16 @@ export default class PercentageChart extends AggregationChart {
 	}
 
 	makeChartArea() {
-		this.chartWrapper.className += ' ' + 'graph-focus-margin';
-		this.chartWrapper.style.marginTop = '45px';
+		this.container.className += ' ' + 'graph-focus-margin';
+		this.container.style.marginTop = '45px';
 
-		this.statsWrapper.className += ' ' + 'graph-focus-margin';
-		this.statsWrapper.style.marginBottom = '30px';
-		this.statsWrapper.style.paddingTop = '0px';
+		// this.statsWrapper.className += ' ' + 'graph-focus-margin';
+		// this.statsWrapper.style.marginBottom = '30px';
+		// this.statsWrapper.style.paddingTop = '0px';
 
 		this.svg = $.create('div', {
 			className: 'div',
-			inside: this.chartWrapper
+			inside: this.container
 		});
 
 		this.chart = $.create('div', {
@@ -54,12 +54,12 @@ export default class PercentageChart extends AggregationChart {
 	bindTooltip() {
 		let s = this.state;
 
-		this.chartWrapper.addEventListener('mousemove', (e) => {
+		this.container.addEventListener('mousemove', (e) => {
 			let slice = e.target;
 			if(slice.classList.contains('progress-bar')) {
 
 				let i = slice.getAttribute('data-index');
-				let gOff = getOffset(this.chartWrapper), pOff = getOffset(slice);
+				let gOff = getOffset(this.container), pOff = getOffset(slice);
 
 				let x = pOff.left - gOff.left + slice.offsetWidth/2;
 				let y = pOff.top - gOff.top - 6;

src/js/charts/PieChart.js

@@ -142,8 +142,8 @@ export default class PieChart extends AggregationChart {
 	}
 
 	bindTooltip() {
-		this.chartWrapper.addEventListener('mousemove', this.mouseMove);
-		this.chartWrapper.addEventListener('mouseleave', this.mouseLeave);
+		this.container.addEventListener('mousemove', this.mouseMove);
+		this.container.addEventListener('mouseleave', this.mouseLeave);
 	}
 
 	mouseMove(e){

src/js/utils/constants.js

@@ -14,7 +14,7 @@ export const DATA_COLOR_DIVISIONS = {
 	pie: 'labels',
 	percentage: 'labels',
 	heatmap: HEATMAP_DISTRIBUTION_SIZE
-}
+};
 
 export const VERT_SPACE_OUTSIDE_BASE_CHART = 50;
 export const TRANSLATE_Y_BASE_CHART = 20;
@@ -57,4 +57,4 @@ export const DEFAULT_COLORS = {
 	pie: DEFAULT_CHART_COLORS,
 	percentage: DEFAULT_CHART_COLORS,
 	heatmap: HEATMAP_COLORS
-}
+};

src/scss/charts.scss

@@ -80,11 +80,6 @@
 			stroke-width: 2px;
 		}
 	}
-	.multiaxis-chart {
-		.line-horizontal, .y-axis-guide {
-			stroke-width: 2px;
-		}
-	}
 	.dataset-path {
 		stroke-width: 2px;
 	}