Ability to add different colors for bars in the same dataset

frappe · Jan 11, 2021 · 4232caa · 4232caa
1 parent d034192
commit 4232caa
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -60,4 +60,7 @@ typings/
 # next.js build output
 .next
 
-.DS_Store
+.DS_Store
+
+# IDE project-specific files
+.idea
diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js
@@ -116,6 +116,7 @@ export default class AxisChart extends BaseChart {
 
 				values: values,
 				yPositions: scaleAll(values),
+				colors: d.colors,
 
 				cumulativeYs: cumulativeYs,
 				cumulativeYPos: scaleAll(cumulativeYs),
@@ -238,7 +239,7 @@ export default class AxisChart extends BaseChart {
 				'barGraph' + '-' + d.index,
 				{
 					index: index,
-					color: this.colors[index],
+					color: d.colors || this.colors[index],
 					stacked: this.barOptions.stacked,
 
 					// same for all datasets
@@ -276,6 +277,7 @@ export default class AxisChart extends BaseChart {
 					return {
 						xPositions: xPositions,
 						yPositions: d.yPositions,
+						colors: d.colors || undefined,
 						offsets: offsets,
 						// values: d.values,
 						labels: labels,
@@ -364,11 +366,12 @@ export default class AxisChart extends BaseChart {
 		titles.map((label, index) => {
 			let values = this.state.datasets.map((set, i) => {
 				let value = set.values[index];
+				let componentColor = set.hasOwnProperty('colors') ? set.colors : this.colors[i];
 				return {
 					title: set.name,
 					value: value,
 					yPos: set.yPositions[index],
-					color: this.colors[i],
+					color: Array.isArray(componentColor) ? (i < componentColor.length ? componentColor[i] : componentColor[0]) : componentColor,
 					formatted: formatY ? formatY(value) : value,
 				};
 			});

diff --git a/src/js/charts/BaseChart.js b/src/js/charts/BaseChart.js
@@ -65,15 +65,20 @@ export default class BaseChart {
 
 	validateColors(colors, type) {
 		const validColors = [];
-		colors = (colors || []).concat(DEFAULT_COLORS[type]);
-		colors.forEach((string) => {
-			const color = getColor(string);
-			if(!isValidColor(color)) {
-				console.warn('"' + string + '" is not a valid color.');
+		colors = colors || [];
+		colors.forEach((entry) => {
+			if (Array.isArray(entry)) {
+				validColors.push(this.validateColors(entry, type));
+				return;
+			}
+			const color = getColor(entry);
+			if (!isValidColor(color)) {
+				console.warn('"' + entry + '" is not a valid color.');
 			} else {
 				validColors.push(color);
 			}
 		});
+		validColors.concat(DEFAULT_COLORS[type]);
 		return validColors;
 	}
 
@@ -228,6 +233,7 @@ export default class BaseChart {
 			console.error('No data to update.');
 		}
 		this.data = this.prepareData(data);
+		this.data.datasets.forEach((d, i) => { if(d.colors) { this.colors[i] = d.colors;}});
 		this.calc(); // builds state
 		this.render(this.components, this.config.animate);
 	}

diff --git a/src/js/objects/ChartComponents.js b/src/js/objects/ChartComponents.js
@@ -302,7 +302,7 @@ let componentConfigs = {
 					data.xPositions[j],
 					y,
 					data.barWidth,
-					c.color,
+					data.colors ? ((j < data.colors.length) ? data.colors[j] : data.colors[0]) : Array.isArray(c.color) ? (j < c.color.length ? c.color[j] : c.color[0]) : c.color,
 					data.labels[j],
 					j,
 					data.offsets[j],
@@ -336,6 +336,7 @@ let componentConfigs = {
 				yPositions: oldYPos,
 				offsets: oldOffsets,
 				labels: newLabels,
+				colors: newData.colors,
 
 				zeroLine: this.oldData.zeroLine,
 				barsWidth: this.oldData.barsWidth,

diff --git a/src/js/objects/SvgTip.js b/src/js/objects/SvgTip.js
@@ -63,7 +63,7 @@ export default class SvgTip {
 		this.dataPointList.innerHTML = '';
 
 		this.listValues.map((set, i) => {
-			const color = this.colors[i] || 'black';
+			const color = Array.isArray(this.colors[i]) ? this.colors[i][this.index] : (this.colors[i] || 'black');
 			let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
 
 			let li = $.create('li', {