fix(Charts): update chart refs, fixes of scatter chart

Author: kleinju1017

packages/charts/src/components/BarChart/BarChart.tsx

@@ -93,7 +93,7 @@ export interface BarChartProps extends IChartBaseProps {
 /**
  * <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';</code>
  */
-const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<any>) => {
+const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/ColumnChart/ColumnChart.tsx

@@ -91,7 +91,7 @@ const measureDefaults = {
 /**
  * <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
  */
-const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<any>) => {
+const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/ComposedChart/index.tsx

@@ -107,7 +107,7 @@ type AvailableChartTypes = 'line' | 'bar' | 'area' | string;
 /**
  * <code>import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/ComposedChart';</code>
  */
-const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<any>) => {
+const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/LineChart/LineChart.tsx

@@ -83,7 +83,7 @@ const measureDefaults = {
 /**
  * <code>import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';</code>
  */
-const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<any>) => {
+const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     dataset,
     loading,
@@ -158,7 +158,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
   const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset, measures);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
-  console.log(dataset);
+
   return (
     <ChartContainer
       dataset={dataset}

packages/charts/src/components/MicroBarChart/MicroBarChart.tsx

@@ -78,7 +78,7 @@ const microBarChartMargin = { left: -30, right: 30, top: 40, bottom: 30 };
 /**
  * <code>import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';</code>
  */
-const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<any>) => {
+const MicroBarChart: FC<MicroBarChartProps> = forwardRef((props: MicroBarChartProps, ref: Ref<HTMLDivElement>) => {
   const { loading, dataset, onDataPointClick, style, className, tooltip, slot } = props;
 
   const chartRef = useConsolidatedRef<any>(ref);

packages/charts/src/components/PieChart/PieChart.tsx

@@ -58,7 +58,7 @@ export interface PieChartProps extends IChartBaseProps<IPolarChartConfig> {
 /**
  * <code>import { PieChart } from '@ui5/webcomponents-react-charts/lib/PieChart';</code>
  */
-const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<any>) => {
+const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/RadarChart/RadarChart.tsx

@@ -68,7 +68,7 @@ const measureDefaults = {
 /**
  * <code>import { RadarChart } from '@ui5/webcomponents-react-charts/lib/RadarChart';</code>
  */
-const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<any>) => {
+const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     loading,
     dataset,

packages/charts/src/components/RadialChart/RadialChart.tsx

@@ -21,7 +21,7 @@ const radialBarLabelStyle = { fontSize: ThemingParameters.sapFontHeader3Size, fi
 /**
  * <code>import { RadialChart } from '@ui5/webcomponents-react-charts/lib/RadialChart';</code>
  */
-const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<any>) => {
+const RadialChart: FC<RadialChartProps> = forwardRef((props: RadialChartProps, ref: Ref<HTMLDivElement>) => {
   const { maxValue = 100, value, displayValue, onDataPointClick, color, style, className, tooltip, slot } = props;
 
   const range = useMemo(() => {

packages/charts/src/components/ScatterChart/ScatterChart.stories.tsx

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
-import { ScatterChart } from '../../lib/ScatterChart';
-import { bigDataSet, complexDataSet, scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
+import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
+import { scatterColorDataSet, scatterComplexDataSet } from '../../resources/DemoProps';
 
 export default {
   title: 'Charts /  ScatterChart',

packages/charts/src/components/ScatterChart/ScatterChart.test.tsx

@@ -3,9 +3,9 @@ import { boolean } from '@storybook/addon-knobs';
 import { mount } from 'enzyme';
 import * as React from 'react';
 import { scatterComplexDataSet } from '../../resources/DemoProps';
-import { ScatterChart } from './ScatterChart';
+import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';
 
-describe('LineChart', () => {
+describe('Scatter Chart', () => {
   test('Renders with data', () => {
     expect(
       mount(

packages/charts/src/components/ScatterChart/ScatterChart.tsx

@@ -16,8 +16,7 @@ import {
   Tooltip,
   XAxis,
   YAxis,
-  ZAxis,
-  Label
+  ZAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
@@ -30,19 +29,9 @@ import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity, xAxisPadding }
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
 
 interface MeasureConfig extends IChartMeasure {
-  /**
-   * Line Width
-   * @default 1
-   */
-  width?: number;
-  /**
-   * Line Opacity
-   * @default 1
-   */
   opacity?: number;
   /**
    * Defines axis of measures
-   * @default 1
    */
   axis: 'x' | 'y' | 'z';
 }
@@ -62,16 +51,6 @@ export interface ScatterChartProps extends IChartBaseProps {
    * - `accessor`: string containing the path to the dataset key this line should display. Supports object structures by using <code>'parent.child'</code>.
    *   Can also be a getter.
    *
-   * <h4>Optional properties</h4>
-   *
-   * - `label`: Label to display in legends or tooltips. Falls back to the <code>accessor</code> if not present.
-   * - `color`: any valid CSS Color or CSS Variable. Defaults to the `sapChart_Ordinal` colors
-   * - `formatter`: function will be called for each data label and allows you to format it according to your needs
-   * - `hideDataLabel`: flag whether the data labels should be hidden in the chart for this line.
-   * - `DataLabel`: a custom component to be used for the data label
-   * - `width`: line width, defaults to `1`
-   * - `opacity`: line opacity, defaults to `1`
-   *
    */
   measures?: MeasureConfig[];
 }
@@ -81,9 +60,9 @@ const measureDefaults = {
 };
 
 /**
- * <code>import { LineChart } from '@ui5/webcomponents-react-charts/lib/LineChart';</code>
+ * <code>import { ScatterChart } from '@ui5/webcomponents-react-charts/lib/ScatterChart';</code>
  */
-const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps, ref: Ref<any>) => {
+const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps, ref: Ref<HTMLDivElement>) => {
   const {
     dataset,
     loading,
@@ -136,17 +115,13 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
     },
     [onDataPointClick]
   );
-
   const isBigDataSet = dataset?.length > 30 ?? false;
 
-  const xMeasure = measures.filter(({ axis }) => axis === 'x');
-  const yMeasure = measures.filter(({ axis }) => axis === 'y');
-  const zMeasure = measures.filter(({ axis }) => axis === 'z');
+  const xMeasure = measures.find(({ axis }) => axis === 'x');
+  const yMeasure = measures.find(({ axis }) => axis === 'y');
+  const zMeasure = measures.find(({ axis }) => axis === 'z');
 
-  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(
-    dataset?.[0].data,
-    measures.filter(({ axis }) => axis === 'y')
-  );
+  const [yAxisWidth, legendPosition] = useLongestYAxisLabel(dataset?.[0].data, [yMeasure]);
   const xAxisHeights = useObserveXAxisHeights(chartRef, 1);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
 
@@ -175,36 +150,31 @@ const ScatterChart: FC<ScatterChartProps> = forwardRef((props: ScatterChartProps
         {chartConfig.xAxisVisible && (
           <XAxis
             type={'number'}
-            key={xMeasure?.[0]?.accessor}
-            dataKey={xMeasure?.[0]?.accessor}
+            key={xMeasure?.accessor}
+            dataKey={xMeasure?.accessor}
             xAxisId={0}
-            interval={xMeasure?.[0]?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-            tick={<XAxisTicks config={xMeasure?.[0]} />}
+            interval={xMeasure?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
+            tick={<XAxisTicks config={xMeasure} />}
             padding={xAxisPadding}
             height={xAxisHeights[0]}
-            label={xMeasure?.[0]?.label ? { value: xMeasure?.[0]?.label, dy: 15, position: 'insideRight' } : 0}
+            label={xMeasure?.label ? { value: xMeasure?.label, dy: 15, position: 'insideRight' } : 0}
           />
         )}
         <YAxis
-          label={yMeasure?.[0]?.label ? { value: yMeasure?.[0]?.label, angle: -90, position: 'insideLeft' } : false}
+          label={yMeasure?.label ? { value: yMeasure?.label, angle: -90, position: 'insideLeft' } : false}
           type={'number'}
-          name={yMeasure?.[0]?.accessor}
+          name={yMeasure?.accessor}
           axisLine={chartConfig.yAxisVisible}
           tickLine={tickLineConfig}
-          key={yMeasure?.[0]?.accessor}
-          dataKey={yMeasure?.[0]?.accessor}
-          tickFormatter={yMeasure?.[0]?.formatter}
+          key={yMeasure?.accessor}
+          dataKey={yMeasure?.accessor}
+          tickFormatter={yMeasure?.formatter}
           interval={0}
-          tick={<YAxisTicks config={yMeasure[0]} />}
-          width={yMeasure?.[0]?.label ? yAxisWidth + 10 : yAxisWidth}
-          margin={yMeasure?.[0]?.label ? { left: 200 } : 0}
-        />
-        <ZAxis
-          name={zMeasure?.[0]?.accessor}
-          dataKey={zMeasure?.[0]?.accessor}
-          range={[0, 5000]}
-          key={zMeasure?.[0]?.accessor}
+          tick={<YAxisTicks config={yMeasure} />}
+          width={yMeasure?.label ? yAxisWidth + 10 : yAxisWidth}
+          margin={yMeasure?.label ? { left: 200 } : 0}
         />
+        <ZAxis name={zMeasure?.accessor} dataKey={zMeasure?.accessor} range={[0, 5000]} key={zMeasure?.accessor} />
         {dataset?.map((dataSet, index) => {
           return (
             <Scatter

packages/charts/src/components/ScatterChart/__snapshots__/ScatterChart.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LineChart Renders with data 1`] = `
+exports[`Scatter Chart Renders with data 1`] = `
 <div
   style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
@@ -14,7 +14,7 @@ exports[`LineChart Renders with data 1`] = `
 </div>
 `;
 
-exports[`LineChart loading placeholder 1`] = `
+exports[`Scatter Chart loading placeholder 1`] = `
 <div
   style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >