chore(charts): remove deprecated charts (#510)

BREAKING CHANGE: replace deprecated charts with new implementation. In case your imports contain a `next` path segment, please remove this segment. Example: `import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';` becomes `import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';`. For further details please take a look into our [Migration Guide](https://github.com/SAP/ui5-webcomponents-react/blob/master/docs/MigrationGuide.md#095---charts-migration).

Author: MarcusNotheis

packages/charts/package.json

@@ -13,30 +13,20 @@
   },
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
-  "sideEffects": [
-    "@ui5/webcomponents/dist/Label"
-  ],
+  "sideEffects": false,
   "scripts": {
-    "clean": "rimraf cjs components interfaces internal lib themes util index.esm.js index.d.ts config.d.ts hooks indexNew.d.ts",
+    "clean": "rimraf cjs components interfaces internal lib util index.esm.js index.d.ts config.d.ts hooks",
     "build": "rollup -c rollup.config.js"
   },
   "dependencies": {
     "@babel/runtime": "7.9.6",
-    "chart.js": "^2.9.3",
-    "chartjs-plugin-datalabels": "^0.7.0",
-    "get-best-contrast-color": "^0.3.1",
     "lodash.debounce": "^4.0.8",
-    "lodash.merge": "^4.6.2",
-    "react-chartjs-2": "^2.8.0",
     "react-content-loader": "^5.0.4",
     "recharts": "2.0.0-beta.6"
   },
-  "devDependencies": {
-    "@types/chart.js": "^2.9.8"
-  },
   "peerDependencies": {
-    "@ui5/webcomponents-react": "^0.9.0-rc.0",
-    "@ui5/webcomponents-react-base": "^0.9.0-rc.0",
+    "@ui5/webcomponents-react": "^0.9.0",
+    "@ui5/webcomponents-react-base": "^0.9.0",
     "react": "^16.8.0",
     "react-jss": "^10.0.4"
   },

packages/charts/rollup.config.js

@@ -1,4 +1,4 @@
 const rollupConfigFactory = require('../../scripts/rollup/configFactory');
 
-const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base', 'lodash', 'classnames']);
+const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base']);
 module.exports = config;

packages/charts/src/components/BarChart/BarRechart.stories.tsx renamed to packages/charts/src/components/BarChart/BarChart.stories.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
-import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
 import React from 'react';
+import { BarChart } from '../../lib/BarChart';
 import { complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
 
 export default {

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

@@ -1,39 +1,50 @@
+import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
 import { mount } from 'enzyme';
 import * as React from 'react';
-import { datasets, labels, singleDataset } from '../../resources/ChartProps';
-import { BarChart } from './index';
+import { complexDataSet } from '../../resources/DemoProps';
+import { BarChart } from './BarChart';
 
-describe('BarChart', () => {
+describe('BarRechart', () => {
   test('Renders with data', () => {
-    mount(<BarChart labels={labels} datasets={singleDataset} />);
-  });
-
-  test('custom colors', () => {
-    mount(<BarChart labels={labels} datasets={singleDataset} colors={['#f0ab00']} />);
-  });
-
-  test('valueAxisFormatter', () => {
-    mount(<BarChart labels={labels} datasets={singleDataset} valueAxisFormatter={(d) => `${d}%`} />);
-  });
-
-  test('with Ref', () => {
-    const ref = React.createRef();
-    mount(<BarChart ref={ref} labels={labels} datasets={singleDataset} />);
-    expect(ref.current.hasOwnProperty('chartInstance')).toBe(true);
-  });
-
-  test('stacked', () => {
-    mount(
-      <BarChart
-        labels={labels}
-        datasets={datasets}
-        options={{ scales: { yAxes: [{ stacked: true }], xAxes: [{ stacked: true }] } }}
-      />
-    );
+    expect(
+      mount(
+        <BarChart
+          loading={boolean('loading', false)}
+          onDataPointClick={action('onDataPointClick')}
+          onLegendClick={action('onLegendClick')}
+          dataset={complexDataSet}
+          style={{ height: '60vh' }}
+          dimensions={[
+            {
+              accessor: 'name',
+              interval: 0
+            }
+          ]}
+          measures={[
+            {
+              accessor: 'users',
+              label: 'Users',
+              formatter: (val) => val.toLocaleString()
+            },
+            {
+              accessor: 'sessions',
+              label: 'Active Sessions',
+              formatter: (val) => `${val} sessions`,
+              hideDataLabel: true
+            },
+            {
+              accessor: 'volume',
+              label: 'Vol.'
+            }
+          ]}
+        />
+      ).render()
+    ).toMatchSnapshot();
   });
 
   test('loading placeholder', () => {
-    const wrapper = mount(<BarChart labels={labels} datasets={[]} loading />);
+    const wrapper = mount(<BarChart style={{ width: '30%' }} dimensions={[]} measures={[]} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 });

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

@@ -2,10 +2,10 @@ import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingPara
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { BarChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/BarChartPlaceholder';
+import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/components/ChartContainer';
 import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
 import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
 import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
-import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
 import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import {
@@ -24,9 +24,9 @@ import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
+import { IChartBaseProps } from '../../interfaces/IChartBaseProps';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
-import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { defaultFormatter } from '../../internal/defaults';
 import { tickLineConfig, tooltipContentStyle, tooltipFillOpacity } from '../../internal/staticProps';
 
@@ -65,7 +65,7 @@ interface DimensionConfig extends IChartDimension {
   interval?: number;
 }
 
-export interface BarChartProps extends RechartBaseProps {
+export interface BarChartProps extends IChartBaseProps {
   dimensions: DimensionConfig[];
   /**
    * An array of config objects. Each object is defining one bar in the chart.
@@ -90,7 +90,7 @@ export interface BarChartProps extends RechartBaseProps {
 }
 
 /**
- * <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';</code>
+ * <code>import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';</code>
  */
 const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<any>) => {
   const {

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

@@ -1,9 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BarChart loading placeholder 1`] = `
+exports[`BarRechart Renders with data 1`] = `
 <div
-  class="ChartContainer-chart-0 ChartContainer-chart-d5-0"
-  style="position: relative; padding-top: 6px; width: 300px; height: 300px;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
+>
+  <div
+    class="recharts-responsive-container"
+    id="undefined"
+    style="width: 100%; height: 100%;"
+  >
+    <div />
+  </div>
+</div>
+`;
+
+exports[`BarRechart loading placeholder 1`] = `
+<div
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
@@ -121,8 +134,5 @@ exports[`BarChart loading placeholder 1`] = `
       </linearGradient>
     </defs>
   </svg>
-  <div
-    class="legend"
-  />
 </div>
 `;