Skip to content

Commit

Permalink
feat($core): Adds getStrokeColor and getFillColor options
Browse files Browse the repository at this point in the history 
Implements dynamic colors through two function options. Allows changing colors of elements based of
dataset, label or value.

#136
  • Loading branch information
@t-mullen
t-mullen committed Feb 27, 2019
1 parent 5c1d018 commit e1766d3
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 48 deletions.
20 changes: 10 additions & 10 deletions packages/core/src/bar-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,8 +146,8 @@ export class BarChart extends BaseAxisChart {
.attr("y", d => this.y(Math.max(0, d.value)))
.attr("width", this.x1.bandwidth())
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null)
.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
.attr("stroke-width", Configuration.bars.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);

Expand Down Expand Up @@ -193,9 +193,9 @@ export class BarChart extends BaseAxisChart {
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
.style("opacity", 0)
.transition(this.getFillTransition())
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
.style("opacity", 1)
.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
.attr("stroke", (d: any) => this.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-width", Configuration.bars.default.strokeWidth);

addedBars.selectAll("rect.bar")
Expand All @@ -209,9 +209,9 @@ export class BarChart extends BaseAxisChart {
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
.style("opacity", 0)
.transition(this.getFillTransition())
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
.style("opacity", 1)
.attr("stroke", (d: any) => this.colorScale[d.datasetLabel](d.label))
.attr("stroke", (d: any) => this.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-width", Configuration.bars.default.strokeWidth);

// Remove bar groups are no longer needed
Expand Down Expand Up @@ -262,8 +262,8 @@ export class BarChart extends BaseAxisChart {
.attr("y", d => this.y(Math.max(0, d.value)))
.attr("width", this.x1.bandwidth())
.attr("height", d => Math.abs(this.y(d.value) - this.y(0)))
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.label))
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.label) : null);
.attr("fill", d => this.getFillColor(d.datasetLabel, d.label, d.value))
.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null);
}

resizeChart() {
Expand Down Expand Up @@ -302,7 +302,7 @@ export class BarChart extends BaseAxisChart {
.on("mouseover", function(d) {
select(this)
.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)
.attr("stroke", self.colorScale[d.datasetLabel](d.label))
.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-opacity", Configuration.bars.mouseover.strokeOpacity);

self.showTooltip(d, this);
Expand All @@ -319,7 +319,7 @@ export class BarChart extends BaseAxisChart {
const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
select(this)
.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
.attr("stroke", accessibility ? self.colorScale[d.datasetLabel](d.label) : "none")
.attr("stroke", accessibility ? self.getStrokeColor(d.datasetLabel, d.label, d.value) : "none")
.attr("stroke-opacity", Configuration.bars.mouseout.strokeOpacity);

self.hideTooltip();
Expand Down
38 changes: 27 additions & 11 deletions packages/core/src/base-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,22 @@ export class BaseChart {
}
}

getFillColor(datasetLabel: any, label?: any, value?: any) {
if (this.options.getFillColor && !this.options.accessibility) {
return this.options.getFillColor(datasetLabel, label, value) || this.getFillScale()[datasetLabel](label);
} else {
return this.getFillScale()[datasetLabel](label);
}
}

getStrokeColor(datasetLabel: any, label?: any, value?: any) {
if (this.options.getStrokeColor) {
return this.options.getStrokeColor(datasetLabel, label, value) || this.colorScale[datasetLabel](label);
} else {
return this.colorScale[datasetLabel](label);
}
}

// TODO - Refactor
getChartSize(container = this.container) {
let ratio, marginForLegendTop;
Expand Down Expand Up @@ -421,7 +437,7 @@ export class BaseChart {
const exceptedElementData = exceptedElement.datum() as any;
select(exception).attr("fill-opacity", false);
select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity);
select(exception).attr("fill", (d: any) => this.getFillScale()[d.datasetLabel](exceptedElementData.label));
select(exception).attr("fill", (d: any) => this.getFillColor(d.datasetLabel, exceptedElementData.label, exceptedElementData.value));
}

// ================================================================================
Expand Down Expand Up @@ -513,9 +529,9 @@ export class BaseChart {
.merge(legendItems.selectAll("div"))
.style("background-color", (d, i) => {
if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[this.displayData.datasets[0].label](d.key);
return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
} else if (d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[d.key]();
return this.getStrokeColor(d.key);
}

return "white";
Expand Down Expand Up @@ -698,18 +714,18 @@ export class BaseChart {
.select("div.legend-circle")
.style("background-color", (d, i) => {
if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[this.displayData.datasets[0].label](d.key);
return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
} else if (d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[d.key]();
return this.getStrokeColor(d.key);
}

return "white";
})
.style("border-color", d => {
if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {
return this.colorScale[this.displayData.datasets[0].label](d.key);
return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
} else {
return this.colorScale[d.key]();
return this.getStrokeColor(d.key);
}
})
.style("border-style", Configuration.legend.inactive.borderStyle)
Expand All @@ -730,18 +746,18 @@ export class BaseChart {
.attr("class", "legend-circle")
.style("background-color", (d, i) => {
if (this.getLegendType() === Configuration.legend.basedOn.LABELS && d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[this.displayData.datasets[0].label](d.key);
return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
} else if (d.value === Configuration.legend.items.status.ACTIVE) {
return this.colorScale[d.key]();
return this.getStrokeColor(d.key);
}

return "white";
})
.style("border-color", d => {
if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {
return this.colorScale[this.displayData.datasets[0].label](d.key);
return this.getStrokeColor(this.displayData.datasets[0].label, d.key, d.value);
} else {
return this.colorScale[d.key]();
return this.getStrokeColor(d.key);
}
})
.style("border-style", Configuration.legend.inactive.borderStyle)
Expand Down
19 changes: 9 additions & 10 deletions packages/core/src/line-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export class LineChart extends BaseAxisChart {

getCircleFill(radius, d) {
const circleShouldBeFilled = radius < Configuration.lines.points.minNonFilledRadius;
return circleShouldBeFilled ? this.colorScale[d.datasetLabel](d.label) : "white";
return circleShouldBeFilled ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : "white";
}

draw() {
Expand Down Expand Up @@ -85,7 +85,7 @@ export class LineChart extends BaseAxisChart {
.classed("lines", true);

gLines.append("path")
.attr("stroke", d => this.colorScale[d.label]())
.attr("stroke", d => this.getStrokeColor(d.label))
.datum(d => d.data)
.attr("class", "line")
.attr("d", this.lineGenerator);
Expand All @@ -100,7 +100,7 @@ export class LineChart extends BaseAxisChart {
.attr("cy", d => this.y(d.value))
.attr("r", circleRadius)
.attr("fill", d => this.getCircleFill(circleRadius, d))
.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));

// Hide the overlay
this.updateOverlay().hide();
Expand Down Expand Up @@ -130,7 +130,7 @@ export class LineChart extends BaseAxisChart {
.classed("lines", true);

addedLineGroups.append("path")
.attr("stroke", d => this.colorScale[d.label]())
.attr("stroke", d => this.getStrokeColor(d.label))
.datum(d => d.data)
.style("opacity", 0)
.transition(this.getDefaultTransition())
Expand All @@ -152,7 +152,7 @@ export class LineChart extends BaseAxisChart {
.transition(this.getDefaultTransition())
.style("opacity", 1)
.attr("fill", d => this.getCircleFill(circleRadius, d))
.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));

// Remove lines that are no longer needed
gLines.exit()
Expand Down Expand Up @@ -193,8 +193,7 @@ export class LineChart extends BaseAxisChart {
.style("opacity", 1)
.attr("stroke", function(d) {
const parentDatum = select(this.parentNode).datum() as any;

return self.colorScale[parentDatum.label]();
return self.getStrokeColor(parentDatum.label);
})
.attr("class", "line")
.attr("d", this.lineGenerator);
Expand All @@ -212,7 +211,7 @@ export class LineChart extends BaseAxisChart {
.attr("cy", d => this.y(d.value))
.attr("r", circleRadius)
.attr("fill", d => this.getCircleFill(circleRadius, d))
.attr("stroke", d => this.colorScale[d.datasetLabel](d.label));
.attr("stroke", d => this.getStrokeColor(d.datasetLabel, d.label, d.value));
}

resizeChart() {
Expand Down Expand Up @@ -269,7 +268,7 @@ export class LineChart extends BaseAxisChart {
.on("mouseover", function(d) {
select(this)
.attr("stroke-width", Configuration.lines.points.mouseover.strokeWidth)
.attr("stroke", self.colorScale[d.datasetLabel](d.label))
.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-opacity", Configuration.lines.points.mouseover.strokeOpacity);

self.showTooltip(d, this);
Expand All @@ -286,7 +285,7 @@ export class LineChart extends BaseAxisChart {
const { strokeWidth, strokeWidthAccessible } = Configuration.lines.points.mouseout;
select(this)
.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
.attr("stroke", self.colorScale[d.datasetLabel](d.label))
.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-opacity", Configuration.lines.points.mouseout.strokeOpacity);

self.hideTooltip();
Expand Down
18 changes: 9 additions & 9 deletions packages/core/src/pie-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ export class PieChart extends BaseChart {
.enter()
.append("path")
.attr("d", this.arc)
.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label)) // Support multiple datasets
.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value)) // Support multiple datasets
.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
.attr("stroke-width", Configuration.pie.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
.each(function(d) { this._current = d; });
Expand Down Expand Up @@ -155,13 +155,13 @@ export class PieChart extends BaseChart {
path
.transition()
.duration(0)
.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
.attr("stroke-width", Configuration.pie.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
.transition()
.style("opacity", 1)
.duration(Configuration.transitions.default.duration)
.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
.attrTween("d", function (a) {
return arcTween.bind(this)(a, self.arc);
});
Expand All @@ -172,12 +172,12 @@ export class PieChart extends BaseChart {
.transition()
.duration(0)
.style("opacity", 0)
.attr("stroke", d => this.colorScale[this.displayData.datasets[0].label](d.data.label))
.attr("stroke", d => this.getStrokeColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
.attr("stroke-width", Configuration.pie.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0)
.transition()
.duration(Configuration.transitions.default.duration)
.attr("fill", d => this.getFillScale()[this.displayData.datasets[0].label](d.data.label))
.attr("fill", d => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value))
.style("opacity", 1)
.attrTween("d", function (a) {
return arcTween.bind(this)(a, self.arc);
Expand Down Expand Up @@ -251,7 +251,7 @@ export class PieChart extends BaseChart {
// Fade everything out except for this element
select(exception).attr("fill-opacity", false);
select(exception).attr("stroke-opacity", Configuration.charts.reduceOpacity.opacity);
select(exception).attr("fill", (d: any) => this.getFillScale()[this.displayData.datasets[0].label](d.data.label));
select(exception).attr("fill", (d: any) => this.getFillColor(this.displayData.datasets[0].label, d.data.label, d.data.value));
}
}

Expand Down Expand Up @@ -301,7 +301,7 @@ export class PieChart extends BaseChart {
sliceElement
.attr("stroke-width", Configuration.pie.mouseover.strokeWidth)
.attr("stroke-opacity", Configuration.pie.mouseover.strokeOpacity)
.attr("stroke", self.colorScale[self.displayData.datasets[0].label](d.data.label));
.attr("stroke", self.getStrokeColor(self.displayData.datasets[0].label, d.data.label, d.data.value));

self.showTooltip(d);
self.reduceOpacity(this);
Expand All @@ -316,7 +316,7 @@ export class PieChart extends BaseChart {
.on("mouseout", function(d) {
select(this)
.attr("stroke-width", accessibility ? Configuration.pie.default.strokeWidth : Configuration.pie.mouseout.strokeWidth)
.attr("stroke", accessibility ? self.colorScale[self.displayData.datasets[0].label](d.data.label) : "none")
.attr("stroke", accessibility ? self.getStrokeColor(self.displayData.datasets[0].label, d.data.label, d.data.value) : "none")
.attr("stroke-opacity", Configuration.pie.mouseout.strokeOpacity);

self.hideTooltip();
Expand Down
16 changes: 8 additions & 8 deletions packages/core/src/stacked-bar-chart.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@ export class StackedBarChart extends BaseAxisChart {
.attr("y", d => this.y(d[1]))
.attr("height", d => this.y(d[0]) - this.y(d[1]))
.attr("width", d => this.x.bandwidth())
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
.attr("stroke-width", Configuration.bars.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);

Expand Down Expand Up @@ -133,11 +133,11 @@ export class StackedBarChart extends BaseAxisChart {
.attr("y", d => this.y(d[1]))
.attr("height", d => this.y(d[0]) - this.y(d[1]))
.attr("width", d => this.x.bandwidth())
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
.style("opacity", 0)
.transition(this.getFillTransition())
.style("opacity", 1)
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
.attr("stroke-width", Configuration.bars.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
};
Expand Down Expand Up @@ -211,8 +211,8 @@ export class StackedBarChart extends BaseAxisChart {
.attr("y", d => this.y(d[1]))
.attr("height", d => this.y(d[0]) - this.y(d[1]))
.attr("width", d => this.x.bandwidth())
.attr("fill", d => this.getFillScale()[d.datasetLabel](d.data.label))
.attr("stroke", d => this.options.accessibility ? this.colorScale[d.datasetLabel](d.data.label) : null)
.attr("fill", d => this.getFillColor(d.datasetLabel, d.data.label, d.data.value))
.attr("stroke", d => this.options.accessibility ? this.getStrokeColor(d.datasetLabel, d.label, d.value) : null)
.attr("stroke-width", Configuration.bars.default.strokeWidth)
.attr("stroke-opacity", d => this.options.accessibility ? 1 : 0);
}
Expand All @@ -228,7 +228,7 @@ export class StackedBarChart extends BaseAxisChart {
.on("mouseover", function(d) {
select(this)
.attr("stroke-width", Configuration.bars.mouseover.strokeWidth)
.attr("stroke", self.colorScale[d.datasetLabel](d.label))
.attr("stroke", self.getStrokeColor(d.datasetLabel, d.label, d.value))
.attr("stroke-opacity", Configuration.bars.mouseover.strokeOpacity);

self.showTooltip(d, this);
Expand All @@ -245,7 +245,7 @@ export class StackedBarChart extends BaseAxisChart {
const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
select(this)
.attr("stroke-width", accessibility ? strokeWidthAccessible : strokeWidth)
.attr("stroke", accessibility ? self.colorScale[d.datasetLabel](d.label) : "none")
.attr("stroke", accessibility ? self.getStrokeColor(d.datasetLabel, d.label, d.value) : "none")
.attr("stroke-opacity", Configuration.bars.mouseout.strokeOpacity);

self.hideTooltip();
Expand Down

0 comments on commit e1766d3

Please sign in to comment.