[minor] constants for margins

src/js/chart.js

@@ -1,24 +1,11 @@
 import '../scss/charts.scss';
 
-import MultiAxisChart from './charts/MultiAxisChart';
+// import MultiAxisChart from './charts/MultiAxisChart';
 import PercentageChart from './charts/PercentageChart';
 import PieChart from './charts/PieChart';
 import Heatmap from './charts/Heatmap';
 import AxisChart from './charts/AxisChart';
 
-// if (ENV !== 'production') {
-// 	// Enable LiveReload
-// 	document.write(
-// 		'<script src="http://' + (location.host || 'localhost').split(':')[0] +
-// 		':35729/livereload.js?snipver=1"></' + 'script>'
-// 	);
-// }
-
-// If type is bar
-
-
-
-
 const chartTypes = {
 	// multiaxis: MultiAxisChart,
 	percentage: PercentageChart,

src/js/charts/AxisChart.js

@@ -33,8 +33,8 @@ export default class AxisChart extends BaseChart {
 
 	setMargins() {
 		super.setMargins();
-		this.translateXLeft = Y_AXIS_MARGIN;
-		this.translateXRight = Y_AXIS_MARGIN;
+		this.leftMargin = Y_AXIS_MARGIN;
+		this.rightMargin = Y_AXIS_MARGIN;
 	}
 
 	prepareData(data=this.data) {
@@ -315,7 +315,7 @@ export default class AxisChart extends BaseChart {
 		// 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);
-			let relX = e.pageX - o.left - this.translateXLeft;
+			let relX = e.pageX - o.left - this.leftMargin;
 			let relY = e.pageY - o.top - this.translateY;
 
 			if(relY < this.height + this.translateY * 2) {
@@ -341,7 +341,7 @@ export default class AxisChart extends BaseChart {
 			let xVal = s.xAxis.positions[i];
 			// let delta = i === 0 ? s.unitWidth : xVal - s.xAxis.positions[i-1];
 			if(relX > xVal - s.unitWidth/2) {
-				let x = xVal + this.translateXLeft;
+				let x = xVal + this.leftMargin;
 				let y = s.yExtremes[i] + this.translateY;
 
 				let values = this.data.datasets.map((set, j) => {

src/js/charts/BaseChart.js

@@ -2,6 +2,8 @@ import SvgTip from '../objects/SvgTip';
 import { $, isElementInViewport, getElementContentWidth } from '../utils/dom';
 import { makeSVGContainer, makeSVGDefs, makeSVGGroup } from '../utils/draw';
 import { getStringWidth } from '../utils/helpers';
+import { VERT_SPACE_OUTSIDE_BASE_CHART, TRANSLATE_Y_BASE_CHART, LEFT_MARGIN_BASE_CHART,
+	RIGHT_MARGIN_BASE_CHART, INIT_CHART_UPDATE_TIMEOUT, CHART_POST_ANIMATE_TIMEOUT } from '../utils/constants';
 import { getColor, DEFAULT_COLORS } from '../utils/colors';
 import { getDifferentChart } from '../config';
 import { runSMILAnimation } from '../utils/animation';
@@ -77,15 +79,14 @@ export default class BaseChart {
 	}
 
 	setMargins() {
-		// TODO: think for all
 		let height = this.argHeight;
 		this.baseHeight = height;
-		this.height = height - 40; // change
-		this.translateY = 20;
+		this.height = height - VERT_SPACE_OUTSIDE_BASE_CHART;
+		this.translateY = TRANSLATE_Y_BASE_CHART;
 
 		// Horizontal margins
-		this.translateXLeft = 60;
-		this.translateXRight = 40;
+		this.leftMargin = LEFT_MARGIN_BASE_CHART;
+		this.rightMargin = RIGHT_MARGIN_BASE_CHART;
 	}
 
 	validate(){
@@ -154,7 +155,7 @@ export default class BaseChart {
 		// TODO: remove timeout and decrease post animate time in chart component
 		if(init) {
 			this.data = this.realData;
-			setTimeout(() => {this.update();}, 400);
+			setTimeout(() => {this.update();}, INIT_CHART_UPDATE_TIMEOUT);
 		}
 
 		this.renderLegend();
@@ -171,7 +172,7 @@ export default class BaseChart {
 		// 	}
 		// });
 		this.baseWidth = getElementContentWidth(this.parent) - outerAnnotationsWidth;
-		this.width = this.baseWidth - (this.translateXLeft + this.translateXRight);
+		this.width = this.baseWidth - (this.leftMargin + this.rightMargin);
 	}
 
 	update(data=this.data) {
@@ -206,7 +207,7 @@ export default class BaseChart {
 			setTimeout(() => {
 				components.forEach(c => c.make());
 				this.updateNav();
-			}, 400);
+			}, CHART_POST_ANIMATE_TIMEOUT);
 		} else {
 			this.updateNav();
 		}
@@ -246,7 +247,7 @@ export default class BaseChart {
 		this.drawArea = makeSVGGroup(
 			this.svg,
 			this.type + '-chart',
-			`translate(${this.translateXLeft}, ${this.translateY})`
+			`translate(${this.leftMargin}, ${this.translateY})`
 		);
 	}
 

src/js/charts/MultiAxisChart.js

@@ -17,8 +17,8 @@ export default class MultiAxisChart extends AxisChart {
 	setMargins() {
 		super.setMargins();
 		let noOfLeftAxes = this.data.datasets.filter(d => d.axisPosition === 'left').length;
-		this.translateXLeft = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
-		this.translateXRight = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
+		this.leftMargin = (noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
+		this.rightMargin = (this.data.datasets.length - noOfLeftAxes) * Y_AXIS_MARGIN || Y_AXIS_MARGIN;
 	}
 
 	prepareYAxis() { }

src/js/utils/constants.js

@@ -1,5 +1,12 @@
+export const VERT_SPACE_OUTSIDE_BASE_CHART = 40;
+export const TRANSLATE_Y_BASE_CHART = 20;
+export const LEFT_MARGIN_BASE_CHART = 60;
+export const RIGHT_MARGIN_BASE_CHART = 40;
 export const Y_AXIS_MARGIN = 60;
 
+export const INIT_CHART_UPDATE_TIMEOUT = 400;
+export const CHART_POST_ANIMATE_TIMEOUT = 400;
+
 export const DEFAULT_AXIS_CHART_TYPE = 'line';
 export const AXIS_DATASET_CHART_TYPES = ['line', 'bar'];
 
@@ -7,5 +14,4 @@ export const BAR_CHART_SPACE_RATIO = 0.5;
 export const MIN_BAR_PERCENT_HEIGHT = 0.01;
 
 export const LINE_CHART_DOT_SIZE = 4;
-
 export const DOT_OVERLAY_SIZE_INCR = 4;

src/js/utils/draw.js

@@ -3,22 +3,6 @@ import { getStringWidth } from './helpers';
 import { STD_EASING, UNIT_ANIM_DUR, MARKER_LINE_ANIM_DUR, PATH_ANIM_DUR } from './animate';
 import { DOT_OVERLAY_SIZE_INCR } from './constants';
 
-/*
-
-<filter id="glow" x="-10%" y="-10%" width="120%" height="120%">
-	<feGaussianBlur stdDeviation="0.5 0.5" result="glow"></feGaussianBlur>
-	<feMerge>
-		<feMergeNode in="glow"></feMergeNode>
-		<feMergeNode in="glow"></feMergeNode>
-		<feMergeNode in="glow"></feMergeNode>
-	</feMerge>
-</filter>
-
-    filter: url(#glow);
-    fill: #fff;
-
-*/
-
 const AXIS_TICK_LENGTH = 6;
 const LABEL_MARGIN = 4;
 export const FONT_SIZE = 10;