From 12524c53ff1ade124c0b37ad762b558409f594ed Mon Sep 17 00:00:00 2001 From: Natasha DeCoste Date: Mon, 22 Jun 2020 17:31:57 -0400 Subject: [PATCH 1/3] fix(core): stroke dissappears when remapping the dimensions --- .../core/src/components/graphs/area-stacked.ts | 18 +++++++++++------- packages/core/src/components/graphs/line.ts | 11 ++++++----- .../src/components/graphs/scatter-stacked.ts | 6 +++--- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/core/src/components/graphs/area-stacked.ts b/packages/core/src/components/graphs/area-stacked.ts index dddee134c7..7ac43aa215 100644 --- a/packages/core/src/components/graphs/area-stacked.ts +++ b/packages/core/src/components/graphs/area-stacked.ts @@ -32,6 +32,7 @@ export class StackedArea extends Component { const svg = this.getContainerSVG(); const self = this; const options = this.model.getOptions(); + const { groupMapsTo } = options.data; const mainXScale = this.services.cartesianScales.getMainXScale(); const mainYScale = this.services.cartesianScales.getMainYScale(); @@ -46,14 +47,15 @@ export class StackedArea extends Component { return; } - const percentage = Object.keys(options.axes).some(axis => - options.axes[axis].percentage - ) + const percentage = Object.keys(options.axes).some(axis => + options.axes[axis].percentage + ); + const stackedData = this.model.getStackedData({ percentage }); const areas = svg .selectAll("path.area") - .data(stackedData, (d) => d[0].group); + .data(stackedData, (d) => d[0][groupMapsTo]); // D3 area generator function this.areaGenerator = area() @@ -69,8 +71,8 @@ export class StackedArea extends Component { enteringAreas .merge(areas) - .data(stackedData, (d) => d[0].group) - .attr("fill", (d) => self.model.getFillColor(d[0].group)) + .data(stackedData, (d) => d[0][groupMapsTo]) + .attr("fill", (d) => self.model.getFillColor(d[0][groupMapsTo])) .attr("role", Roles.GRAPHICS_SYMBOL) .attr("aria-roledescription", "area") .transition( @@ -86,6 +88,8 @@ export class StackedArea extends Component { handleLegendOnHover = (event: CustomEvent) => { const { hoveredElement } = event.detail; + const options = this.model.getOptions(); + const { groupMapsTo } = options.data; this.parent .selectAll("path.area") @@ -93,7 +97,7 @@ export class StackedArea extends Component { this.services.transitions.getTransition("legend-hover-area") ) .attr("opacity", (d) => { - if (d[0].group !== hoveredElement.datum().name) { + if (d[0][groupMapsTo] !== hoveredElement.datum().name) { return Configuration.area.opacity.unselected; } diff --git a/packages/core/src/components/graphs/line.ts b/packages/core/src/components/graphs/line.ts index 10f17c7535..ce0adc7dce 100644 --- a/packages/core/src/components/graphs/line.ts +++ b/packages/core/src/components/graphs/line.ts @@ -57,16 +57,17 @@ export class Line extends Component { let data = []; if (this.configs.stacked) { - const percentage = Object.keys(options.axes).some(axis => - options.axes[axis].percentage - ) + const percentage = Object.keys(options.axes).some(axis => + options.axes[axis].percentage + ); + const { groupMapsTo } = options.data; const stackedData = this.model.getStackedData({ percentage }); data = stackedData.map((d) => ({ - name: d[0].group, + name: d[0][groupMapsTo], data: d.map((datum) => ({ date: datum.data.sharedStackKey, - group: datum.group, + group: datum[groupMapsTo], value: datum[1], })), hidden: !Tools.some(d, (datum) => datum[0] !== datum[1]), diff --git a/packages/core/src/components/graphs/scatter-stacked.ts b/packages/core/src/components/graphs/scatter-stacked.ts index eb04012bc3..d3cdc2e1d7 100644 --- a/packages/core/src/components/graphs/scatter-stacked.ts +++ b/packages/core/src/components/graphs/scatter-stacked.ts @@ -19,15 +19,15 @@ export class StackedScatter extends Scatter { const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(); const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier(); - const percentage = Object.keys(options.axes).some(axis => - options.axes[axis].percentage + const percentage = Object.keys(options.axes).some(axis => + options.axes[axis].percentage ) const stackedData = this.model.getStackedData({ percentage }); // Update data on dot groups const circleGroups = svg .selectAll("g.dots") - .data(stackedData, (d) => d[0].group); + .data(stackedData, (d) => d[0][groupMapsTo]); // Remove dot groups that need to be removed circleGroups.exit().attr("opacity", 0).remove(); From c072164e30e3b37875b2a96e0bece5ee73e2f92e Mon Sep 17 00:00:00 2001 From: Natasha DeCoste Date: Thu, 25 Jun 2020 11:51:34 -0400 Subject: [PATCH 2/3] fix mapping custom domain and range identifiers --- packages/core/src/components/graphs/line.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/graphs/line.ts b/packages/core/src/components/graphs/line.ts index ce0adc7dce..795ffd153b 100644 --- a/packages/core/src/components/graphs/line.ts +++ b/packages/core/src/components/graphs/line.ts @@ -32,7 +32,7 @@ export class Line extends Component { const getRangeValue = (d, i) => cartesianScales.getRangeValue(d, i); const [ getXValue, - getYValue, + getYValue ] = Tools.flipDomainAndRangeBasedOnOrientation( getDomainValue, getRangeValue, @@ -51,7 +51,6 @@ export class Line extends Component { if (value === null || value === undefined) { return false; } - return true; }); @@ -62,15 +61,17 @@ export class Line extends Component { ); const { groupMapsTo } = options.data; const stackedData = this.model.getStackedData({ percentage }); + const domainIdentifier = this.services.cartesianScales.getDomainIdentifier(); + const rangeIdentifier = this.services.cartesianScales.getRangeIdentifier(); data = stackedData.map((d) => ({ name: d[0][groupMapsTo], data: d.map((datum) => ({ - date: datum.data.sharedStackKey, + [domainIdentifier]: datum.data.sharedStackKey, group: datum[groupMapsTo], - value: datum[1], + [rangeIdentifier]: datum[1] })), - hidden: !Tools.some(d, (datum) => datum[0] !== datum[1]), + hidden: !Tools.some(d, (datum) => datum[0] !== datum[1]) })); } else { data = this.model.getGroupedData(); From fe63e673e2204feed7f371b057713841163fca75 Mon Sep 17 00:00:00 2001 From: Natasha DeCoste Date: Fri, 26 Jun 2020 09:10:14 -0400 Subject: [PATCH 3/3] fix for group remapping --- packages/core/src/components/graphs/line.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/graphs/line.ts b/packages/core/src/components/graphs/line.ts index 795ffd153b..f8057531f5 100644 --- a/packages/core/src/components/graphs/line.ts +++ b/packages/core/src/components/graphs/line.ts @@ -68,7 +68,7 @@ export class Line extends Component { name: d[0][groupMapsTo], data: d.map((datum) => ({ [domainIdentifier]: datum.data.sharedStackKey, - group: datum[groupMapsTo], + [groupMapsTo]: datum[groupMapsTo], [rangeIdentifier]: datum[1] })), hidden: !Tools.some(d, (datum) => datum[0] !== datum[1])