diff --git a/.gitignore b/.gitignore index 11276235..8e49da7b 100644 --- a/.gitignore +++ b/.gitignore @@ -60,4 +60,7 @@ typings/ # next.js build output .next -.DS_Store \ No newline at end of file +.DS_Store + +# IDE project-specific files +.idea diff --git a/src/js/charts/AxisChart.js b/src/js/charts/AxisChart.js index 9c06bbd2..860d3071 100644 --- 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 index 6c266e72..1b2fb2eb 100644 --- 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 index ea1a0969..6c7b90f0 100644 --- 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 index 2be11807..3eaa6edf 100644 --- 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', {