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
elastic · Aug 19, 2019 · 196341b · 196341b
1 parent b8dc9e1
commit 196341b
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 55 deletions.
diff --git 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<AreaGeometriesDataProps,
       }
     });
     areas.forEach((glyph, i) => {
-      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,15 +109,22 @@ export class AreaGeometries extends React.PureComponent<AreaGeometriesDataProps,
     highlightedLegendItem: LegendItem | null,
   ): JSX.Element[] => {
     return areas.reduce<JSX.Element[]>((acc, glyph, i) => {
-      const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle } = glyph;
+      const { seriesAreaLineStyle, seriesAreaStyle, seriesPointStyle, geometryId } = 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);
+        const customOpacity = seriesPointStyle ? seriesPointStyle.opacity : undefined;
+        const geometryStyle = getGeometryStyle(
+          geometryId,
+          this.props.highlightedLegendItem,
+          sharedStyle,
+          customOpacity,
+        );
+        const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStyle);
         acc.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId));
       }
       return acc;

diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx
@@ -72,7 +72,7 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
       }
 
       if (seriesPointStyle.visible) {
-        acc.push(...this.getPointToRender(glyph, key));
+        acc.push(...this.getPointToRender(glyph, sharedStyle, key));
       }
       return acc;
     }, []);
@@ -86,10 +86,11 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
     return <Path {...lineProps} key={key} />;
   }
 
-  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
@@ -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
@@ -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,
   };
 }