From 17458ea58614b552387c0f4cf44a7ea710fc291b Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Tue, 6 Aug 2019 11:48:05 +0200 Subject: [PATCH 1/4] fix(lines): line and point rendered on the same layer for each series This commit change the rendering order of the line series. Now we render: for each series the line and each data point, instead of rendering first all the lines and than all the points fix #287 --- .../react_canvas/line_geometries.tsx | 81 +++++++++---------- 1 file changed, 38 insertions(+), 43 deletions(-) diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx index b9fa6e8152..583e1de452 100644 --- a/src/components/react_canvas/line_geometries.tsx +++ b/src/components/react_canvas/line_geometries.tsx @@ -38,27 +38,10 @@ export class LineGeometries extends React.PureComponent {this.renderLineGeoms()} - {this.renderLinePoints()} ); } - private renderLinePoints = (): JSX.Element[] => { - const { lines } = this.props; - return lines.reduce( - (acc, glyph, i) => { - const { points, seriesPointStyle, color } = glyph; - - if (!seriesPointStyle.visible) { - return acc; - } - const pointStyleProps = buildPointStyleProps(color, seriesPointStyle); - return [...acc, ...this.renderPoints(points, i, pointStyleProps)]; - }, - [] as JSX.Element[], - ); - }; - private renderPoints = ( linePoints: PointGeometry[], lineIndex: number, @@ -90,35 +73,47 @@ export class LineGeometries extends React.PureComponent { const { lines, sharedStyle } = this.props; - const lineElements: JSX.Element[] = []; - - lines.forEach((glyph, index) => { - const { line, color, transform, geometryId, seriesLineStyle } = glyph; + return lines.reduce((acc, glyph, index) => { + const { seriesLineStyle, seriesPointStyle } = glyph; - if (!seriesLineStyle.visible) { - return; + if (seriesLineStyle.visible) { + acc.push(this.getLineToRender(glyph, sharedStyle, index)); } - const key = `line-${index}`; - const customOpacity = seriesLineStyle ? seriesLineStyle.opacity : undefined; - const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity); - if (this.props.animated) { - lineElements.push( - - - {() => { - const lineProps = buildLineRenderProps(0, line, color, seriesLineStyle, geometryStyle); - return ; - }} - - , - ); - } else { - const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle); - lineElements.push(); + if (seriesPointStyle.visible) { + acc.push(...this.getPointToRender(glyph, index)); } - }); - - return lineElements; + return acc; + }, []); }; + + getLineToRender(glyph: LineGeometry, sharedStyle: SharedGeometryStyle, index: number) { + const { line, color, transform, geometryId, seriesLineStyle } = glyph; + const key = `line-${index}`; + const customOpacity = seriesLineStyle ? seriesLineStyle.opacity : undefined; + const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity); + + if (this.props.animated) { + return ( + + + {() => { + const lineProps = buildLineRenderProps(0, line, color, seriesLineStyle, geometryStyle); + return ; + }} + + + ); + } else { + const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle); + return ; + } + } + + getPointToRender(glyph: LineGeometry, index: number) { + const { points, color, seriesPointStyle } = glyph; + + const pointStyleProps = buildPointStyleProps(color, seriesPointStyle); + return this.renderPoints(points, index, pointStyleProps); + } } From f612276b31155c577307de2278c032b49e53cd5a Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 9 Aug 2019 20:17:28 +0200 Subject: [PATCH 2/4] refactor(areas): fix areas rendering order Depending if stacked or not, we draw first all the stacked areas (fist all the areas, then lines then points). For non stacked elements, we draw groups of area, line, points. --- .playground/playgroud.tsx | 55 ++++- .../xy_chart/rendering/rendering.ts | 7 + src/chart_types/xy_chart/store/utils.ts | 1 + .../react_canvas/area_geometries.tsx | 189 ++++++++++-------- 4 files changed, 156 insertions(+), 96 deletions(-) diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx index a5ec36d981..eb6cca268c 100644 --- a/.playground/playgroud.tsx +++ b/.playground/playgroud.tsx @@ -11,6 +11,7 @@ import { ScaleType, Settings, mergeWithDefaultTheme, + AreaSeries, } from '../src'; import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; @@ -49,28 +50,64 @@ export class Playground extends React.Component { tickFormat={niceTimeFormatter([1555819200000, 1555905600000])} /> d.toFixed(2)} /> - - + diff --git a/src/chart_types/xy_chart/rendering/rendering.ts b/src/chart_types/xy_chart/rendering/rendering.ts index cf192a7dfe..a5e0efbd62 100644 --- a/src/chart_types/xy_chart/rendering/rendering.ts +++ b/src/chart_types/xy_chart/rendering/rendering.ts @@ -90,6 +90,7 @@ export interface AreaGeometry { seriesAreaStyle: AreaStyle; seriesAreaLineStyle: LineStyle; seriesPointStyle: PointStyle; + isStacked: boolean; } export function isPointGeometry(ig: IndexedGeometry): ig is PointGeometry { @@ -377,6 +378,7 @@ export function renderArea( seriesKey: any[], xScaleOffset: number, seriesStyle: AreaSeriesStyle, + isStacked: boolean = false, ): { areaGeometry: AreaGeometry; indexedGeometries: Map; @@ -435,6 +437,7 @@ export function renderArea( seriesAreaStyle: seriesStyle.area, seriesAreaLineStyle: seriesStyle.line, seriesPointStyle: seriesStyle.point, + isStacked, }; return { areaGeometry, @@ -493,3 +496,7 @@ export function isPointOnGeometry( const { width, height } = indexedGeometry; return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width; } + +export function getGeometryIdAsString(geometryId: GeometryId, prefix?: string, postfix?: string) { + return `${prefix || ''}spec:${geometryId.specId}_${geometryId.seriesKey.join('::-::')}${postfix || ''}`; +} diff --git a/src/chart_types/xy_chart/store/utils.ts b/src/chart_types/xy_chart/store/utils.ts index f8076c457b..9d85e6f1f9 100644 --- a/src/chart_types/xy_chart/store/utils.ts +++ b/src/chart_types/xy_chart/store/utils.ts @@ -501,6 +501,7 @@ export function renderGeometries( ds.key, xScaleOffset, areaSeriesStyle, + isStacked, ); areaGeometriesIndex = mergeGeometriesIndexes(areaGeometriesIndex, renderedAreas.indexedGeometries); areas.push(renderedAreas.areaGeometry); diff --git a/src/components/react_canvas/area_geometries.tsx b/src/components/react_canvas/area_geometries.tsx index a316ade587..0a18a9fbdb 100644 --- a/src/components/react_canvas/area_geometries.tsx +++ b/src/components/react_canvas/area_geometries.tsx @@ -3,7 +3,13 @@ import React from 'react'; import { Circle, Group, Path } from 'react-konva'; import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../chart_types/xy_chart/legend/legend'; -import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../chart_types/xy_chart/rendering/rendering'; +import { + AreaGeometry, + getGeometryStyle, + PointGeometry, + getGeometryIdAsString, + GeometryId, +} from '../../chart_types/xy_chart/rendering/rendering'; import { SharedGeometryStyle } from '../../utils/themes/theme'; import { buildAreaRenderProps, @@ -12,6 +18,7 @@ import { PointStyleProps, buildLineRenderProps, } from './utils/rendering_props_utils'; +import { HighlightedElement } from '../../chart_types/xy_chart/utils/interactions'; interface AreaGeometriesDataProps { animated?: boolean; @@ -38,110 +45,118 @@ export class AreaGeometries extends React.PureComponent {this.renderAreaGeoms()} - {this.renderAreaLines()} - {this.renderAreaPoints()} ); } - private renderAreaPoints = (): JSX.Element[] => { - const { areas } = this.props; - return areas.reduce( - (acc, glyph, i) => { - const { points, seriesPointStyle, color } = glyph; - - if (!seriesPointStyle.visible) { - return acc; + private renderAreaGeoms = (): JSX.Element[] => { + const { sharedStyle, highlightedLegendItem } = this.props; + const areas = this.props.areas.reduce<{ + stacked: AreaGeometry[]; + nonStacked: AreaGeometry[]; + }>( + (acc, area) => { + if (area.isStacked) { + acc.stacked.push(area); + } else { + acc.nonStacked.push(area); } - - const pointStyleProps = buildPointStyleProps(color, seriesPointStyle); - - return [...acc, ...this.renderPoints(points, i, pointStyleProps)]; + return acc; }, - [] as JSX.Element[], + + { stacked: [], nonStacked: [] }, ); + + return [ + ...this.renderStackedAreas(areas.stacked, sharedStyle, highlightedLegendItem), + ...this.renderNonStackedAreas(areas.nonStacked, sharedStyle, highlightedLegendItem), + ]; }; - private renderPoints = ( - areaPoints: PointGeometry[], - areaIndex: number, - pointStyleProps: PointStyleProps, + renderStackedAreas = ( + areas: AreaGeometry[], + sharedStyle: SharedGeometryStyle, + highlightedLegendItem: LegendItem | null, ): JSX.Element[] => { - const areaPointElements: JSX.Element[] = []; - - areaPoints.forEach((areaPoint, pointIndex) => { - const { x, y, transform } = areaPoint; - const key = `area-point-${areaIndex}-${pointIndex}`; - - if (this.props.animated) { - areaPointElements.push( - - - {() => { - const pointProps = buildPointRenderProps(x, y, pointStyleProps); - return ; - }} - - , - ); - } else { - const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps); - areaPointElements.push(); + const elements: JSX.Element[] = []; + areas.forEach((glyph) => { + const { seriesAreaStyle } = glyph; + if (seriesAreaStyle.visible) { + elements.push(this.renderArea(glyph, sharedStyle, highlightedLegendItem)); } }); - return areaPointElements; - }; - - private renderAreaGeoms = (): JSX.Element[] => { - const { areas, sharedStyle } = this.props; - const areasToRender: JSX.Element[] = []; - areas.forEach((glyph, i) => { - const { area, color, transform, geometryId, seriesAreaStyle } = glyph; - if (!seriesAreaStyle.visible) { - return; + const { seriesAreaLineStyle } = glyph; + if (seriesAreaLineStyle.visible) { + elements.push(...this.renderAreaLines(glyph, i, sharedStyle, highlightedLegendItem)); } - const customOpacity = seriesAreaStyle ? seriesAreaStyle.opacity : undefined; - const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity); - const key = `area-${i}`; - if (this.props.animated) { - areasToRender.push( - - - {(props: { area: string }) => { - const areaProps = buildAreaRenderProps(0, props.area, color, seriesAreaStyle, geometryStyle); - return ; - }} - - , - ); - } else { - const areaProps = buildAreaRenderProps(transform.x, area, color, seriesAreaStyle, geometryStyle); - areasToRender.push(); + }); + areas.forEach((glyph, i) => { + const { seriesPointStyle } = glyph; + if (seriesPointStyle.visible) { + const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle); + elements.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId)); } }); - return areasToRender; + return elements; }; - private renderAreaLines = (): JSX.Element[] => { - const { areas, sharedStyle } = this.props; - const linesToRender: JSX.Element[] = []; - areas.forEach((glyph, areaIndex) => { - const { lines, color, geometryId, transform, seriesAreaLineStyle } = glyph; - if (!seriesAreaLineStyle.visible) { - return; + renderNonStackedAreas = ( + areas: AreaGeometry[], + sharedStyle: SharedGeometryStyle, + highlightedLegendItem: LegendItem | null, + ): JSX.Element[] => { + return areas.reduce((acc, glyph, i) => { + const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle } = glyph; + if (seriesAreaStyle.visible) { + acc.push(this.renderArea(glyph, sharedStyle, highlightedLegendItem)); + } + if (seriesAreaLineStyle.visible) { + acc.push(...this.renderAreaLines(glyph, i, sharedStyle, highlightedLegendItem)); + } + if (seriesPointStyle.visible) { + const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle); + acc.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId)); } + return acc; + }, []); + }; + private renderArea = ( + glyph: AreaGeometry, + sharedStyle: SharedGeometryStyle, + highlightedLegendItem: LegendItem | null, + ): JSX.Element => { + const { area, color, transform, geometryId, seriesAreaStyle } = glyph; + const customOpacity = seriesAreaStyle ? seriesAreaStyle.opacity : undefined; + const geometryStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedStyle, customOpacity); + const key = getGeometryIdAsString(geometryId, 'area-'); + const areaProps = buildAreaRenderProps(transform.x, area, color, seriesAreaStyle, geometryStyle); + return ; + }; + private renderAreaLines = ( + glyph: AreaGeometry, + areaIndex: number, + sharedStyle: SharedGeometryStyle, + highlightedLegendItem: LegendItem | null, + ): JSX.Element[] => { + const { lines, color, geometryId, transform, seriesAreaLineStyle } = glyph; + const geometryStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedStyle, seriesAreaLineStyle.opacity); - const geometryStyle = getGeometryStyle( - geometryId, - this.props.highlightedLegendItem, - sharedStyle, - seriesAreaLineStyle.opacity, - ); + return lines.map((linePath, lineIndex) => { + const key = getGeometryIdAsString(geometryId, `area-line-${areaIndex}-${lineIndex}`); + const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesAreaLineStyle, geometryStyle); + return ; + }); + }; - lines.forEach((linePath, lineIndex) => { - const key = `area-${areaIndex}-line-${lineIndex}`; - const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesAreaLineStyle, geometryStyle); - linesToRender.push(); - }); + private renderPoints = ( + areaPoints: PointGeometry[], + areaIndex: number, + pointStyleProps: PointStyleProps, + geometryId: GeometryId, + ): JSX.Element[] => { + return areaPoints.map((areaPoint, pointIndex) => { + const { x, y, transform } = areaPoint; + const key = getGeometryIdAsString(geometryId, `area-point-${areaIndex}-${pointIndex}-`); + const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps); + return ; }); - return linesToRender; }; } From 5d712a590948d6463b5cae6b73be3d494c5dc59d Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Fri, 9 Aug 2019 20:31:01 +0200 Subject: [PATCH 3/4] refactor(line): fix line keys and remove springs --- .playground/playgroud.tsx | 15 ++--- .../react_canvas/area_geometries.tsx | 2 - .../react_canvas/line_geometries.tsx | 64 ++++++------------- 3 files changed, 25 insertions(+), 56 deletions(-) diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx index eb6cca268c..4a9f51fa9f 100644 --- a/.playground/playgroud.tsx +++ b/.playground/playgroud.tsx @@ -5,7 +5,6 @@ import { Chart, getAxisId, getSpecId, - LineSeries, niceTimeFormatter, Position, ScaleType, @@ -22,10 +21,6 @@ export class Playground extends React.Component { renderChart(legendPosition: Position) { const theme = mergeWithDefaultTheme({ lineSeriesStyle: { - // area: { - // fill: 'green', - // opacity:0.2 - // }, line: { stroke: 'violet', strokeWidth: 4, @@ -50,7 +45,7 @@ export class Playground extends React.Component { tickFormat={niceTimeFormatter([1555819200000, 1555905600000])} /> d.toFixed(2)} /> - + - diff --git a/src/components/react_canvas/area_geometries.tsx b/src/components/react_canvas/area_geometries.tsx index 0a18a9fbdb..72ca2b28d1 100644 --- a/src/components/react_canvas/area_geometries.tsx +++ b/src/components/react_canvas/area_geometries.tsx @@ -1,7 +1,6 @@ import { Group as KonvaGroup } from 'konva'; import React from 'react'; import { Circle, Group, Path } from 'react-konva'; -import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../chart_types/xy_chart/legend/legend'; import { AreaGeometry, @@ -18,7 +17,6 @@ import { PointStyleProps, buildLineRenderProps, } from './utils/rendering_props_utils'; -import { HighlightedElement } from '../../chart_types/xy_chart/utils/interactions'; interface AreaGeometriesDataProps { animated?: boolean; diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx index 583e1de452..ae62de7d8e 100644 --- a/src/components/react_canvas/line_geometries.tsx +++ b/src/components/react_canvas/line_geometries.tsx @@ -1,9 +1,13 @@ import { Group as KonvaGroup } from 'konva'; import React from 'react'; import { Circle, Group, Path } from 'react-konva'; -import { animated, Spring } from 'react-spring/renderprops-konva.cjs'; import { LegendItem } from '../../chart_types/xy_chart/legend/legend'; -import { getGeometryStyle, LineGeometry, PointGeometry } from '../../chart_types/xy_chart/rendering/rendering'; +import { + getGeometryStyle, + LineGeometry, + PointGeometry, + getGeometryIdAsString, +} from '../../chart_types/xy_chart/rendering/rendering'; import { SharedGeometryStyle } from '../../utils/themes/theme'; import { buildLineRenderProps, @@ -44,28 +48,15 @@ export class LineGeometries extends React.PureComponent { const linePointsElements: JSX.Element[] = []; linePoints.forEach((linePoint, pointIndex) => { const { x, y, transform } = linePoint; - const key = `line-point-${lineIndex}-${pointIndex}`; - if (this.props.animated) { - linePointsElements.push( - - - {() => { - const pointProps = buildPointRenderProps(x, y, pointStyleProps); - return ; - }} - - , - ); - } else { - const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps); - linePointsElements.push(); - } + const key = `line-point-${lineKey}-${pointIndex}`; + const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps); + linePointsElements.push(); }); return linePointsElements; }; @@ -73,47 +64,32 @@ export class LineGeometries extends React.PureComponent { const { lines, sharedStyle } = this.props; - return lines.reduce((acc, glyph, index) => { - const { seriesLineStyle, seriesPointStyle } = glyph; - + return lines.reduce((acc, glyph) => { + const { seriesLineStyle, seriesPointStyle, geometryId } = glyph; + const key = getGeometryIdAsString(geometryId, 'line-'); if (seriesLineStyle.visible) { - acc.push(this.getLineToRender(glyph, sharedStyle, index)); + acc.push(this.getLineToRender(glyph, sharedStyle, key)); } if (seriesPointStyle.visible) { - acc.push(...this.getPointToRender(glyph, index)); + acc.push(...this.getPointToRender(glyph, key)); } return acc; }, []); }; - getLineToRender(glyph: LineGeometry, sharedStyle: SharedGeometryStyle, index: number) { + getLineToRender(glyph: LineGeometry, sharedStyle: SharedGeometryStyle, key: string) { const { line, color, transform, geometryId, seriesLineStyle } = glyph; - const key = `line-${index}`; const customOpacity = seriesLineStyle ? seriesLineStyle.opacity : undefined; const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity); - - if (this.props.animated) { - return ( - - - {() => { - const lineProps = buildLineRenderProps(0, line, color, seriesLineStyle, geometryStyle); - return ; - }} - - - ); - } else { - const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle); - return ; - } + const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle); + return ; } - getPointToRender(glyph: LineGeometry, index: number) { + getPointToRender(glyph: LineGeometry, key: string) { const { points, color, seriesPointStyle } = glyph; const pointStyleProps = buildPointStyleProps(color, seriesPointStyle); - return this.renderPoints(points, index, pointStyleProps); + return this.renderPoints(points, key, pointStyleProps); } } From c4fffd905cace4b1ddf1b08a02af27b783743ac3 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 12 Aug 2019 11:15:29 +0200 Subject: [PATCH 4/4] refactor: rename getGeometryId _AsString to _Key --- src/chart_types/xy_chart/rendering/rendering.ts | 2 +- src/components/react_canvas/area_geometries.tsx | 8 ++++---- src/components/react_canvas/line_geometries.tsx | 4 ++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/chart_types/xy_chart/rendering/rendering.ts b/src/chart_types/xy_chart/rendering/rendering.ts index a5e0efbd62..1cf550c073 100644 --- a/src/chart_types/xy_chart/rendering/rendering.ts +++ b/src/chart_types/xy_chart/rendering/rendering.ts @@ -497,6 +497,6 @@ export function isPointOnGeometry( return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width; } -export function getGeometryIdAsString(geometryId: GeometryId, prefix?: string, postfix?: string) { +export function getGeometryIdKey(geometryId: GeometryId, prefix?: string, postfix?: string) { return `${prefix || ''}spec:${geometryId.specId}_${geometryId.seriesKey.join('::-::')}${postfix || ''}`; } diff --git a/src/components/react_canvas/area_geometries.tsx b/src/components/react_canvas/area_geometries.tsx index 72ca2b28d1..5bd600f1f8 100644 --- a/src/components/react_canvas/area_geometries.tsx +++ b/src/components/react_canvas/area_geometries.tsx @@ -6,7 +6,7 @@ import { AreaGeometry, getGeometryStyle, PointGeometry, - getGeometryIdAsString, + getGeometryIdKey, GeometryId, } from '../../chart_types/xy_chart/rendering/rendering'; import { SharedGeometryStyle } from '../../utils/themes/theme'; @@ -124,7 +124,7 @@ export class AreaGeometries extends React.PureComponent; }; @@ -138,7 +138,7 @@ export class AreaGeometries extends React.PureComponent { - const key = getGeometryIdAsString(geometryId, `area-line-${areaIndex}-${lineIndex}`); + const key = getGeometryIdKey(geometryId, `area-line-${areaIndex}-${lineIndex}`); const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesAreaLineStyle, geometryStyle); return ; }); @@ -152,7 +152,7 @@ export class AreaGeometries extends React.PureComponent { return areaPoints.map((areaPoint, pointIndex) => { const { x, y, transform } = areaPoint; - const key = getGeometryIdAsString(geometryId, `area-point-${areaIndex}-${pointIndex}-`); + const key = getGeometryIdKey(geometryId, `area-point-${areaIndex}-${pointIndex}-`); const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps); return ; }); diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx index ae62de7d8e..f49f1afe1f 100644 --- a/src/components/react_canvas/line_geometries.tsx +++ b/src/components/react_canvas/line_geometries.tsx @@ -6,7 +6,7 @@ import { getGeometryStyle, LineGeometry, PointGeometry, - getGeometryIdAsString, + getGeometryIdKey, } from '../../chart_types/xy_chart/rendering/rendering'; import { SharedGeometryStyle } from '../../utils/themes/theme'; import { @@ -66,7 +66,7 @@ export class LineGeometries extends React.PureComponent((acc, glyph) => { const { seriesLineStyle, seriesPointStyle, geometryId } = glyph; - const key = getGeometryIdAsString(geometryId, 'line-'); + const key = getGeometryIdKey(geometryId, 'line-'); if (seriesLineStyle.visible) { acc.push(this.getLineToRender(glyph, sharedStyle, key)); }