temp features

dist/frappe-charts.esm.js

@@ -416,14 +416,15 @@ function makeText(className, x, y, content) {
 	});
 }
 
-function makeVertXLine(x, label, totalHeight, mode) {
+function makeVertXLine(x, label, totalHeight, mode, stroke='#dadada') {
 	let height = mode === 'span' ? -1 * AXIS_TICK_LENGTH : totalHeight;
 
 	let l = createSVG('line', {
 		x1: 0,
 		x2: 0,
 		y1: totalHeight + AXIS_TICK_LENGTH,
-		y2: height
+		y2: height,
+		stroke: stroke
 	});
 
 	let text = createSVG('text', {
@@ -449,7 +450,7 @@ function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
 	let lineType = '';
 	let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
 
-	// temp
+	// temp : works correctly
 	let x1, x2, textX, anchor;
 	if(mode === 'tick') {
 		if(pos === 'right') {
@@ -463,6 +464,11 @@ function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
 			textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
 			anchor = 'end';
 		}
+	} else {
+		x1 = -1 * AXIS_TICK_LENGTH;
+		x2 = w2;
+		textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
+		anchor = 'end';
 	}
 
 	let l = createSVG('line', {
@@ -511,15 +517,16 @@ class AxisChartRenderer {
 		this.yAxisMode = state.yAxisMode;
 	}
 
-	bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) {
+	bar(x, yTop, args, color, index, datasetIndex, noOfDatasets, prevX, prevY) {
 
 		let totalWidth = this.unitWidth - args.spaceWidth;
 		let startX = x - totalWidth/2;
 
-		// temp
+		// temp commented
 		// let width = totalWidth / noOfDatasets;
 		// let currentX = startX + width * datasetIndex;
 
+		// temp
 		let width = totalWidth;
 		let currentX = startX;
 
@@ -546,12 +553,13 @@ class AxisChartRenderer {
 		});
 	}
 
-	xLine(x, label, mode=this.xAxisMode) {
+	// temp: stroke
+	xLine(x, label, pos='bottom', stroke='', mode=this.xAxisMode) {
 		// Draw X axis line in span/tick mode with optional label
 		return makeVertXLine(x, label, this.totalHeight, mode);
 	}
 
-	yLine(y, label, mode=this.yAxisMode, pos='left') {
+	yLine(y, label, pos='left', mode=this.yAxisMode) {
 		return makeHoriYLine(y, label, this.totalWidth, mode, pos);
 	}
 
@@ -821,7 +829,9 @@ class BaseChart {
 		// (draw everything, layers, groups, units)
 
 		this.calcWidth();
-		this.refresh(); // refresh conponent with chart a
+
+		// refresh conponent with chart
+		this.refresh();
 
 		this.makeChartArea();
 		this.setComponentParent();
@@ -830,7 +840,8 @@ class BaseChart {
 		this.renderLegend();
 		this.setupNavigation(init);
 
-		this.renderComponents(); // first time plain render, so no rerender
+		// first time plain render, so no rerender
+		this.renderComponents();
 
 		if(this.config.animate) this.update(this.firstUpdateData);
 	}
@@ -1023,13 +1034,13 @@ class IndexedChartComponent extends ChartComponent {
 
 	refresh(args) {
 		super.refresh(args);
-		this.indexLength = this.chartState[this.argsKeys[0]].length;
+		this.totalIndices = this.chartState[this.argsKeys[0]].length;
 	}
 
 	makeLayer() {
 		super.makeLayer();
 		this.layers = [];
-		for(var i = 0; i < this.indexLength; i++) {
+		for(var i = 0; i < this.totalIndices; i++) {
 			this.layers[i] = makeSVGGroup(this.layer, this.layerClass + '-' + i);
 		}
 	}
@@ -1040,13 +1051,17 @@ class IndexedChartComponent extends ChartComponent {
 		let datasetArrays = this.argsKeys.map(key => this.chartState[key]);
 
 		// datasetArrays will have something like an array of X positions sets
+		// datasetArrays = [
+		// 		xUnitPositions, yUnitPositions, colors, unitTypes, yUnitValues
+		// ]
+		// where xUnitPositions = [[0,0,0], [1,1,1]]
 		// i.e.: [ [[0,0,0], [1,1,1]],  ... ]
-		for(var i = 0; i < this.indexLength; i++) {
+		for(var i = 0; i < this.totalIndices; i++) {
 			let args = datasetArrays.map(datasetArray => datasetArray[i]);
 			args.unshift(this.chartRenderer);
 
 			args.push(i);
-			args.push(this.indexLength);
+			args.push(this.totalIndices);
 
 			this.stores.push(this.make(...args));
 
@@ -1563,6 +1578,18 @@ class AxisChart extends BaseChart {
 	}
 
 	setupComponents() {
+		// temp : will be an indexedchartcomponent
+		// this.yAxisAux = new ChartComponent({
+		// 	layerClass: 'y axis aux',
+		// 	make: (renderer, positions, values) => {
+		// 		positions = [0, 70, 140, 270];
+		// 		values = [300, 200, 100, 0];
+		// 		return positions.map((position, i) => renderer.yLine(position, values[i], 'right'));
+		// 	},
+		// 	argsKeys: ['yAxisPositions', 'yAxisLabels'],
+		// 	animate: () => {}
+		// });
+
 		this.yAxis = new ChartComponent({
 			layerClass: 'y axis',
 			make: (renderer, positions, values) => {
@@ -1604,10 +1631,12 @@ class AxisChart extends BaseChart {
 					);
 				});
 
-				let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
-				let pointsStr = pointsList.join("L");
+				if(this.type === 'line') {
+					let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
+					let pointsStr = pointsList.join("L");
 
-				unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
+					unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
+				}
 
 				return unitSet;
 			},
@@ -1626,9 +1655,9 @@ class AxisChart extends BaseChart {
 
 		// Marker Regions
 
-		// temp
 		this.components = [
-			this.yAxisAux,
+			// temp
+			// this.yAxisAux,
 			this.yAxis,
 			this.xAxis,
 			// this.yMarkerLines,

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{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.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,.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{-ms-flex-pack:distribute;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container,.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-around}.chart-container .graph-stats-container{-ms-flex-pack:distribute;padding-top:10px}.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 .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path,.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}

docs/assets/js/index.js

@@ -88,6 +88,20 @@ let type_data = {
 		// 	label: "Yet Another",
 		// 	values: [15, 20, -3, -15, 58, 12, -17, 37]
 		// }
+
+		// temp : Stacked
+		// {
+		// 	label: "Some Data",
+		// 	values:[25, 30, 50, 45, 18, 12, 27, 14]
+		// },
+		// {
+		// 	label: "Another Set",
+		// 	values: [18, 20, 30, 35, 8, 7, 17, 4]
+		// },
+		// {
+		// 	label: "Another Set",
+		// 	values: [11, 8, 19, 15, 3, 4, 10, 2]
+		// },
 	]
 };
 

src/js/charts/AxisChart.js

@@ -164,6 +164,18 @@ export default class AxisChart extends BaseChart {
 	}
 
 	setupComponents() {
+		// temp : will be an indexedchartcomponent
+		// this.yAxisAux = new ChartComponent({
+		// 	layerClass: 'y axis aux',
+		// 	make: (renderer, positions, values) => {
+		// 		positions = [0, 70, 140, 270];
+		// 		values = [300, 200, 100, 0];
+		// 		return positions.map((position, i) => renderer.yLine(position, values[i], 'right'));
+		// 	},
+		// 	argsKeys: ['yAxisPositions', 'yAxisLabels'],
+		// 	animate: () => {}
+		// });
+
 		this.yAxis = new ChartComponent({
 			layerClass: 'y axis',
 			make: (renderer, positions, values) => {
@@ -191,7 +203,7 @@ export default class AxisChart extends BaseChart {
 		this.dataUnits = new IndexedChartComponent({
 			layerClass: 'dataset-units',
 			make: (renderer, xPosSet, yPosSet, color, unitType,
-				yValueSet, datasetIndex, noOfDatasets) => {
+				yValueSet, datasetIndex, noOfDatasets) => {;
 
 				let unitSet = yPosSet.map((y, i) => {
 					return renderer[unitType.type](
@@ -205,10 +217,12 @@ export default class AxisChart extends BaseChart {
 					);
 				});
 
-				let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
-				let pointsStr = pointsList.join("L");
+				if(this.type === 'line') {
+					let pointsList = yPosSet.map((y, i) => (xPosSet[i] + ',' + y));
+					let pointsStr = pointsList.join("L");
 
-				unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
+					unitSet.unshift(makePath("M"+pointsStr, 'line-graph-path', color));
+				}
 
 				return unitSet;
 			},
@@ -227,9 +241,9 @@ export default class AxisChart extends BaseChart {
 
 		// Marker Regions
 
-		// temp
 		this.components = [
-			this.yAxisAux,
+			// temp
+			// this.yAxisAux,
 			this.yAxis,
 			this.xAxis,
 			// this.yMarkerLines,

src/js/charts/BaseChart.js

@@ -169,7 +169,9 @@ export default class BaseChart {
 		// (draw everything, layers, groups, units)
 
 		this.calcWidth();
-		this.refresh(); // refresh conponent with chart a
+
+		// refresh conponent with chart
+		this.refresh();
 
 		this.makeChartArea();
 		this.setComponentParent();
@@ -178,7 +180,8 @@ export default class BaseChart {
 		this.renderLegend();
 		this.setupNavigation(init);
 
-		this.renderComponents(); // first time plain render, so no rerender
+		// first time plain render, so no rerender
+		this.renderComponents();
 
 		if(this.config.animate) this.update(this.firstUpdateData);
 	}

src/js/objects/ChartComponent.js

@@ -55,13 +55,13 @@ export class IndexedChartComponent extends ChartComponent {
 
 	refresh(args) {
 		super.refresh(args);
-		this.indexLength = this.chartState[this.argsKeys[0]].length;
+		this.totalIndices = this.chartState[this.argsKeys[0]].length;
 	}
 
 	makeLayer() {
 		super.makeLayer();
 		this.layers = [];
-		for(var i = 0; i < this.indexLength; i++) {
+		for(var i = 0; i < this.totalIndices; i++) {
 			this.layers[i] = makeSVGGroup(this.layer, this.layerClass + '-' + i);
 		}
 	}
@@ -72,13 +72,17 @@ export class IndexedChartComponent extends ChartComponent {
 		let datasetArrays = this.argsKeys.map(key => this.chartState[key]);
 
 		// datasetArrays will have something like an array of X positions sets
+		// datasetArrays = [
+		// 		xUnitPositions, yUnitPositions, colors, unitTypes, yUnitValues
+		// ]
+		// where xUnitPositions = [[0,0,0], [1,1,1]]
 		// i.e.: [ [[0,0,0], [1,1,1]],  ... ]
-		for(var i = 0; i < this.indexLength; i++) {
+		for(var i = 0; i < this.totalIndices; i++) {
 			let args = datasetArrays.map(datasetArray => datasetArray[i]);
 			args.unshift(this.chartRenderer);
 
 			args.push(i);
-			args.push(this.indexLength);
+			args.push(this.totalIndices);
 
 			this.stores.push(this.make(...args));
 

src/js/utils/draw.js

@@ -138,14 +138,15 @@ export function makeText(className, x, y, content) {
 	});
 }
 
-export function makeVertXLine(x, label, totalHeight, mode) {
+export function makeVertXLine(x, label, totalHeight, mode, stroke='#dadada') {
 	let height = mode === 'span' ? -1 * AXIS_TICK_LENGTH : totalHeight;
 
 	let l = createSVG('line', {
 		x1: 0,
 		x2: 0,
 		y1: totalHeight + AXIS_TICK_LENGTH,
-		y2: height
+		y2: height,
+		stroke: stroke
 	});
 
 	let text = createSVG('text', {
@@ -171,7 +172,7 @@ export function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
 	let lineType = '';
 	let w2 = mode === 'span' ? totalWidth + AXIS_TICK_LENGTH : 0;
 
-	// temp
+	// temp : works correctly
 	let x1, x2, textX, anchor;
 	if(mode === 'tick') {
 		if(pos === 'right') {
@@ -185,6 +186,11 @@ export function makeHoriYLine(y, label, totalWidth, mode, pos='left') {
 			textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
 			anchor = 'end';
 		}
+	} else {
+		x1 = -1 * AXIS_TICK_LENGTH;
+		x2 = w2;
+		textX = -1 * (LABEL_MARGIN + AXIS_TICK_LENGTH);
+		anchor = 'end';
 	}
 
 	let l = createSVG('line', {
@@ -233,15 +239,16 @@ export class AxisChartRenderer {
 		this.yAxisMode = state.yAxisMode;
 	}
 
-	bar(x, yTop, args, color, index, datasetIndex, noOfDatasets) {
+	bar(x, yTop, args, color, index, datasetIndex, noOfDatasets, prevX, prevY) {
 
 		let totalWidth = this.unitWidth - args.spaceWidth;
 		let startX = x - totalWidth/2;
 
-		// temp
+		// temp commented
 		// let width = totalWidth / noOfDatasets;
 		// let currentX = startX + width * datasetIndex;
 
+		// temp
 		let width = totalWidth;
 		let currentX = startX;
 
@@ -268,12 +275,13 @@ export class AxisChartRenderer {
 		});
 	}
 
-	xLine(x, label, mode=this.xAxisMode) {
+	// temp: stroke
+	xLine(x, label, pos='bottom', stroke='', mode=this.xAxisMode) {
 		// Draw X axis line in span/tick mode with optional label
 		return makeVertXLine(x, label, this.totalHeight, mode);
 	}
 
-	yLine(y, label, mode=this.yAxisMode, pos='left') {
+	yLine(y, label, pos='left', mode=this.yAxisMode) {
 		return makeHoriYLine(y, label, this.totalWidth, mode, pos);
 	}
 

src/scss/charts.scss

@@ -52,9 +52,10 @@
 	}
 	.axis, .chart-label {
 		fill: #555b51;
-		line {
-			stroke: #dadada;
-		}
+		// temp commented
+		// line {
+		// 	stroke: #dadada;
+		// }
 	}
 	.percentage-graph {
 		.progress {