From 196341b964209eaf786921b1c9bee2c84ebe8ebd Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Mon, 19 Aug 2019 17:06:34 +0200 Subject: [PATCH] fix: reduce opacity for points when hovering over legend items (#322) This commit reduce the opacity of points in areas and lines series when hovering over a series in the legend fix #291 --- .../react_canvas/area_geometries.tsx | 22 ++- .../react_canvas/line_geometries.tsx | 11 +- .../utils/rendering_props_utils.test.ts | 126 +++++++++++------- .../utils/rendering_props_utils.ts | 7 +- 4 files changed, 111 insertions(+), 55 deletions(-) diff --git a/src/components/react_canvas/area_geometries.tsx b/src/components/react_canvas/area_geometries.tsx index 5bd600f1f8..86350dc288 100644 --- a/src/components/react_canvas/area_geometries.tsx +++ b/src/components/react_canvas/area_geometries.tsx @@ -88,9 +88,16 @@ export class AreaGeometries extends React.PureComponent { - const { seriesPointStyle } = glyph; + const { seriesPointStyle, geometryId } = glyph; if (seriesPointStyle.visible) { - const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle); + const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined; + const geometryStyle = getGeometryStyle( + geometryId, + this.props.highlightedLegendItem, + sharedStyle, + customOpacity, + ); + const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStyle); elements.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId)); } }); @@ -102,7 +109,7 @@ export class AreaGeometries extends React.PureComponent { return areas.reduce((acc, glyph, i) => { - const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle } = glyph; + const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle, geometryId } = glyph; if (seriesAreaStyle.visible) { acc.push(this.renderArea(glyph, sharedStyle, highlightedLegendItem)); } @@ -110,7 +117,14 @@ export class AreaGeometries extends React.PureComponent; } - getPointToRender(glyph: LineGeometry, key: string) { - const { points, color, seriesPointStyle } = glyph; - - const pointStyleProps = buildPointStyleProps(color, seriesPointStyle); + getPointToRender(glyph: LineGeometry, sharedStyle: SharedGeometryStyle, key: string) { + const { points, color, geometryId, seriesPointStyle } = glyph; + const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined; + const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle, customOpacity); + const pointStyleProps = buildPointStyleProps(color, seriesPointStyle, geometryStyle); return this.renderPoints(points, key, pointStyleProps); } } diff --git a/src/components/react_canvas/utils/rendering_props_utils.test.ts b/src/components/react_canvas/utils/rendering_props_utils.test.ts index d26909c0ff..99e07a2ac2 100644 --- a/src/components/react_canvas/utils/rendering_props_utils.test.ts +++ b/src/components/react_canvas/utils/rendering_props_utils.test.ts @@ -13,12 +13,18 @@ import { describe('[canvas] Area Geometries props', () => { test('can build area point props', () => { - const pointStyleProps = buildPointStyleProps('red', { - visible: true, - radius: 30, - strokeWidth: 2, - opacity: 0.5, - }); + const pointStyleProps = buildPointStyleProps( + 'red', + { + visible: true, + radius: 30, + strokeWidth: 2, + opacity: 0.5, + }, + { + opacity: 0.2, + }, + ); const props = buildPointRenderProps(10, 20, pointStyleProps); expect(props).toEqual({ @@ -29,19 +35,25 @@ describe('[canvas] Area Geometries props', () => { strokeEnabled: true, stroke: 'red', fill: 'red', - opacity: 0.5, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, }); - const noStrokePointStyleProps = buildPointStyleProps('blue', { - visible: true, - radius: 30, - stroke: 'red', - strokeWidth: 0, - opacity: 0.5, - }); + const noStrokePointStyleProps = buildPointStyleProps( + 'blue', + { + visible: true, + radius: 30, + stroke: 'red', + strokeWidth: 0, + opacity: 0.5, + }, + { + opacity: 0.2, + }, + ); const propsNoStroke = buildPointRenderProps(10, 20, noStrokePointStyleProps); expect(propsNoStroke).toEqual({ @@ -52,19 +64,25 @@ describe('[canvas] Area Geometries props', () => { strokeEnabled: false, stroke: 'red', fill: 'blue', - opacity: 0.5, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, }); - const seriesPointStyleProps = buildPointStyleProps('violet', { - visible: true, - fill: 'pink', - radius: 123, - strokeWidth: 456, - opacity: 789, - }); + const seriesPointStyleProps = buildPointStyleProps( + 'violet', + { + visible: true, + fill: 'pink', + radius: 123, + strokeWidth: 456, + opacity: 789, + }, + { + opacity: 0.2, + }, + ); const seriesPointStyle = buildPointRenderProps(10, 20, seriesPointStyleProps); expect(seriesPointStyle).toEqual({ x: 10, @@ -74,7 +92,7 @@ describe('[canvas] Area Geometries props', () => { strokeEnabled: true, stroke: 'violet', fill: 'pink', - opacity: 789, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, @@ -194,12 +212,18 @@ describe('[canvas] Area Geometries props', () => { describe('[canvas] Line Geometries', () => { test('can build line point props', () => { - const pointStyleProps = buildPointStyleProps('pink', { - visible: true, - radius: 30, - strokeWidth: 2, - opacity: 0.5, - }); + const pointStyleProps = buildPointStyleProps( + 'pink', + { + visible: true, + radius: 30, + strokeWidth: 2, + opacity: 0.5, + }, + { + opacity: 0.2, + }, + ); const props = buildPointRenderProps(10, 20, pointStyleProps); expect(props).toEqual({ @@ -210,18 +234,24 @@ describe('[canvas] Line Geometries', () => { strokeEnabled: true, stroke: 'pink', fill: 'pink', - opacity: 0.5, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, }); - const noStrokeStyleProps = buildPointStyleProps('pink', { - visible: true, - radius: 30, - strokeWidth: 0, - opacity: 0.5, - }); + const noStrokeStyleProps = buildPointStyleProps( + 'pink', + { + visible: true, + radius: 30, + strokeWidth: 0, + opacity: 0.5, + }, + { + opacity: 0.2, + }, + ); const propsNoStroke = buildPointRenderProps(10, 20, noStrokeStyleProps); expect(propsNoStroke).toEqual({ x: 10, @@ -231,19 +261,25 @@ describe('[canvas] Line Geometries', () => { strokeEnabled: false, stroke: 'pink', fill: 'pink', - opacity: 0.5, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, }); - const seriesPointStyleProps = buildPointStyleProps('pink', { - stroke: 'series-stroke', - strokeWidth: 6, - visible: true, - radius: 12, - opacity: 18, - }); + const seriesPointStyleProps = buildPointStyleProps( + 'pink', + { + stroke: 'series-stroke', + strokeWidth: 6, + visible: true, + radius: 12, + opacity: 18, + }, + { + opacity: 0.2, + }, + ); const seriesPointStyle = buildPointRenderProps(10, 20, seriesPointStyleProps); expect(seriesPointStyle).toEqual({ x: 10, @@ -253,7 +289,7 @@ describe('[canvas] Line Geometries', () => { strokeEnabled: true, stroke: 'series-stroke', fill: 'pink', - opacity: 18, + opacity: 0.2, strokeHitEnabled: false, perfectDrawEnabled: false, listening: false, diff --git a/src/components/react_canvas/utils/rendering_props_utils.ts b/src/components/react_canvas/utils/rendering_props_utils.ts index fbd4c036fc..745712a113 100644 --- a/src/components/react_canvas/utils/rendering_props_utils.ts +++ b/src/components/react_canvas/utils/rendering_props_utils.ts @@ -240,7 +240,11 @@ export function buildBarValueProps({ * @param color the series color * @param pointStyle the merged point style */ -export function buildPointStyleProps(color: string, pointStyle: PointStyle): PointStyleProps { +export function buildPointStyleProps( + color: string, + pointStyle: PointStyle, + geometryStyle: GeometryStyle, +): PointStyleProps { const { strokeWidth, opacity } = pointStyle; const stroke = pointStyle.stroke || color; const fill = pointStyle.fill || color; @@ -251,6 +255,7 @@ export function buildPointStyleProps(color: string, pointStyle: PointStyle): Poi strokeEnabled: strokeWidth !== 0, fill: fill, opacity, + ...geometryStyle, }; }