refactor(line): fix line keys and remove springs

elastic · Aug 9, 2019 · 5d712a5 · 5d712a5
1 parent f612276
commit 5d712a5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 56 deletions.
diff --git 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])}
           />
           <Axis id={getAxisId('count')} title="count" position={Position.Left} tickFormat={(d) => d.toFixed(2)} />
-         
+
           <AreaSeries
             id={getSpecId('dataset B')}
             xScaleType={ScaleType.Time}
@@ -68,7 +63,7 @@ export class Playground extends React.Component {
                 visible: true,
                 strokeWidth: 3,
                 radius: 10,
-              }
+              },
             }}
           />
           <AreaSeries
@@ -88,10 +83,10 @@ export class Playground extends React.Component {
                 visible: true,
                 strokeWidth: 3,
                 radius: 10,
-              }
+              },
             }}
           />
-           <AreaSeries
+          <AreaSeries
             id={getSpecId('dataset A with long title')}
             xScaleType={ScaleType.Time}
             yScaleType={ScaleType.Linear}
@@ -105,7 +100,7 @@ export class Playground extends React.Component {
               },
               line: {
                 strokeWidth: 10,
-              }
+              },
             }}
             yAccessors={[1]}
           />

diff --git 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
@@ -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,76 +48,48 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
 
   private renderPoints = (
     linePoints: PointGeometry[],
-    lineIndex: number,
+    lineKey: string,
     pointStyleProps: PointStyleProps,
   ): JSX.Element[] => {
     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(
-          <Group key={`line-point-group-${lineIndex}-${pointIndex}`} x={transform.x}>
-            <Spring native from={{ y }} to={{ y }}>
-              {() => {
-                const pointProps = buildPointRenderProps(x, y, pointStyleProps);
-                return <animated.Circle {...pointProps} key={key} />;
-              }}
-            </Spring>
-          </Group>,
-        );
-      } else {
-        const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps);
-        linePointsElements.push(<Circle {...pointProps} key={key} />);
-      }
+      const key = `line-point-${lineKey}-${pointIndex}`;
+      const pointProps = buildPointRenderProps(transform.x + x, y, pointStyleProps);
+      linePointsElements.push(<Circle {...pointProps} key={key} />);
     });
     return linePointsElements;
   };
 
   private renderLineGeoms = (): JSX.Element[] => {
     const { lines, sharedStyle } = this.props;
 
-    return lines.reduce<JSX.Element[]>((acc, glyph, index) => {
-      const { seriesLineStyle, seriesPointStyle } = glyph;
-
+    return lines.reduce<JSX.Element[]>((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 (
-        <Group key={index} x={transform.x}>
-          <Spring native reset from={{ opacity: 0 }} to={{ opacity: 1 }}>
-            {() => {
-              const lineProps = buildLineRenderProps(0, line, color, seriesLineStyle, geometryStyle);
-              return <animated.Path {...lineProps} key={key} />;
-            }}
-          </Spring>
-        </Group>
-      );
-    } else {
-      const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle);
-      return <Path {...lineProps} key={key} />;
-    }
+    const lineProps = buildLineRenderProps(transform.x, line, color, seriesLineStyle, geometryStyle);
+    return <Path {...lineProps} key={key} />;
   }
 
-  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);
   }
 }