fix(areachart): fix misaligned rendering props (opensearch-project#141)

There was a misalignment between the animated props and the non animated ones that causes the area line to use the fill instead of stroke wrongly rendering the line on the chart. We also aligned the animated and not animated props for line and bars. 
React Spring also distributes ES6 by default, which breaks jest tests unless it's imported explicitly
using the cjs extension. see pmndrs/react-spring#555

fix opensearch-project#140

packages/osd-charts/src/components/react_canvas/area_geometries.tsx

@@ -1,11 +1,15 @@
 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';
+import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
 import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../lib/series/rendering';
 import { AreaSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
-import { GlobalKonvaElementProps } from './globals';
+import {
+  buildAreaLineProps,
+  buildAreaPointProps,
+  buildAreaProps,
+} from './utils/rendering_props_utils';
 
 interface AreaGeometriesDataProps {
   animated?: boolean;
@@ -54,45 +58,42 @@ export class AreaGeometries extends React.PureComponent<
     );
   }
   private renderPoints = (areaPoints: PointGeometry[], areaIndex: number): JSX.Element[] => {
-    const { radius, stroke, strokeWidth, opacity } = this.props.style.point;
+    const { radius, strokeWidth, opacity } = this.props.style.point;
 
-    return areaPoints.map((areaPoint, index) => {
+    return areaPoints.map((areaPoint, pointIndex) => {
       const { x, y, color, transform } = areaPoint;
       if (this.props.animated) {
         return (
-          <Group key={`area-point-group-${areaIndex}-${index}`} x={transform.x}>
+          <Group key={`area-point-group-${areaIndex}-${pointIndex}`} x={transform.x}>
             <Spring native from={{ y }} to={{ y }}>
-              {(props: { y: number }) => (
-                <animated.Circle
-                  key={`area-point-${areaIndex}-${index}`}
-                  x={x}
-                  y={y}
-                  radius={radius}
-                  strokeWidth={strokeWidth}
-                  strokeEnabled={strokeWidth !== 0}
-                  stroke={color}
-                  fill={'white'}
-                  opacity={opacity}
-                  {...GlobalKonvaElementProps}
-                />
-              )}
+              {(props: { y: number }) => {
+                const pointProps = buildAreaPointProps({
+                  areaIndex,
+                  pointIndex,
+                  x,
+                  y,
+                  radius,
+                  strokeWidth,
+                  color,
+                  opacity,
+                });
+                return <animated.Circle {...pointProps} />;
+              }}
             </Spring>
           </Group>
         );
       } else {
-        return (
-          <Circle
-            key={`area-point-${areaIndex}-${index}`}
-            x={transform.x + x}
-            y={y}
-            radius={radius}
-            strokeWidth={strokeWidth}
-            stroke={stroke}
-            fill={color}
-            opacity={opacity}
-            {...GlobalKonvaElementProps}
-          />
-        );
+        const pointProps = buildAreaPointProps({
+          areaIndex,
+          pointIndex,
+          x: transform.x + x,
+          y,
+          radius,
+          strokeWidth,
+          color,
+          opacity,
+        });
+        return <Circle {...pointProps} />;
       }
     });
   }
@@ -108,32 +109,26 @@ export class AreaGeometries extends React.PureComponent<
         return (
           <Group key={`area-group-${i}`} x={transform.x}>
             <Spring native from={{ area }} to={{ area }}>
-              {(props: { area: string }) => (
-                <animated.Path
-                  key={`area-${i}`}
-                  data={props.area}
-                  fill={color}
-                  lineCap="round"
-                  lineJoin="round"
-                  opacity={opacity}
-                  {...GlobalKonvaElementProps}
-                />
-              )}
+              {(props: { area: string }) => {
+                const areaProps = buildAreaProps({
+                  index: i,
+                  areaPath: props.area,
+                  color,
+                  opacity,
+                });
+                return <animated.Path {...areaProps} />;
+              }}
             </Spring>
           </Group>
         );
       } else {
-        return (
-          <Path
-            key={`area-${i}`}
-            data={area}
-            fill={color}
-            opacity={opacity}
-            lineCap="round"
-            lineJoin="round"
-            {...GlobalKonvaElementProps}
-          />
-        );
+        const areaProps = buildAreaProps({
+          index: i,
+          areaPath: area,
+          color,
+          opacity,
+        });
+        return <Path {...areaProps} />;
       }
     });
   }
@@ -154,31 +149,28 @@ export class AreaGeometries extends React.PureComponent<
         return (
           <Group key={`area-line-group-${i}`} x={transform.x}>
             <Spring native from={{ line }} to={{ line }}>
-              {(props: { line: string }) => (
-                <animated.Path
-                  key={`area-line-${i}`}
-                  data={props.line}
-                  stroke={color}
-                  strokeWidth={strokeWidth}
-                  lineCap="round"
-                  lineJoin="round"
-                  {...geometryStyle}
-                  {...GlobalKonvaElementProps}
-                />
-              )}
+              {(props: { line: string }) => {
+                const lineProps = buildAreaLineProps({
+                  index: i,
+                  linePath: props.line,
+                  color,
+                  strokeWidth,
+                  geometryStyle,
+                });
+                return <animated.Path {...lineProps} />;
+              }}
             </Spring>
           </Group>
         );
       } else {
-        return (
-          <Path
-            key={`area-line-${i}`}
-            data={line}
-            fill={color}
-            {...geometryStyle}
-            {...GlobalKonvaElementProps}
-          />
-        );
+        const lineProps = buildAreaLineProps({
+          index: i,
+          linePath: line,
+          color,
+          strokeWidth,
+          geometryStyle,
+        });
+        return <Path {...lineProps} />;
       }
     });
   }

packages/osd-charts/src/components/react_canvas/bar_geometries.tsx

@@ -1,11 +1,11 @@
 import { Group as KonvaGroup } from 'konva';
 import React from 'react';
 import { Group, Rect } from 'react-konva';
-import { animated, Spring } from 'react-spring/renderprops-konva';
+import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../lib/series/legend';
 import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
 import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
-import { GlobalKonvaElementProps } from './globals';
+import { buildBarProps } from './utils/rendering_props_utils';
 
 interface BarGeometriesDataProps {
   animated?: boolean;
@@ -47,7 +47,7 @@ export class BarGeometries extends React.PureComponent<
       style: { border },
       sharedStyle,
     } = this.props;
-    return bars.map((bar, i) => {
+    return bars.map((bar, index) => {
       const { x, y, width, height, color } = bar;
 
       // Properties to determine if we need to highlight individual bars depending on hover state
@@ -69,42 +69,41 @@ export class BarGeometries extends React.PureComponent<
       const borderEnabled = border.visible && width > border.strokeWidth * 7;
       if (this.props.animated) {
         return (
-          <Group key={i}>
+          <Group key={index}>
             <Spring native from={{ y: y + height, height: 0 }} to={{ y, height }}>
-              {(props: { y: number; height: number }) => (
-                <animated.Rect
-                  key="animatedRect"
-                  x={x}
-                  y={props.y}
-                  width={width}
-                  height={props.height}
-                  fill={color}
-                  strokeWidth={border.strokeWidth}
-                  stroke={border.stroke}
-                  strokeEnabled={borderEnabled}
-                  {...GlobalKonvaElementProps}
-                  {...geometryStyle}
-                />
-              )}
+              {(props: { y: number; height: number }) => {
+                const barProps = buildBarProps({
+                  index,
+                  x,
+                  y: props.y,
+                  width,
+                  height: props.height,
+                  fill: color,
+                  stroke: border.stroke,
+                  strokeWidth: border.strokeWidth,
+                  borderEnabled,
+                  geometryStyle,
+                });
+
+                return <animated.Rect {...barProps} />;
+              }}
             </Spring>
           </Group>
         );
       } else {
-        return (
-          <Rect
-            key={i}
-            x={x}
-            y={y}
-            width={width}
-            height={height}
-            fill={color}
-            strokeWidth={border.strokeWidth}
-            stroke={border.stroke}
-            strokeEnabled={borderEnabled}
-            {...GlobalKonvaElementProps}
-            {...geometryStyle}
-          />
-        );
+        const barProps = buildBarProps({
+          index,
+          x,
+          y,
+          width,
+          height,
+          fill: color,
+          stroke: border.stroke,
+          strokeWidth: border.strokeWidth,
+          borderEnabled,
+          geometryStyle,
+        });
+        return <Rect {...barProps} />;
       }
     });
   }