fix(MicroBarChart): rollback to old implementation with new API (#588)

BREAKING CHANGE: Removed props `noLegend`, `onLegendClick`, `noAnimation`, `centerLabel` and `chartConfig` as they we not used in the chart and had no effect.

Author: Lukas742

packages/charts/src/components/MicroBarChart/MicroBarChart.stories.mdx

@@ -0,0 +1,92 @@
+import { Meta, Title, Description, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
+
+<Meta
+  title="Charts /  MicroBarChart"
+  component={MicroBarChart}
+  argTypes={{
+    dataset: { type: null },
+    dimension: { type: null },
+    measure: { type: null }
+  }}
+  args={{
+    dataset: [
+      {
+        name: 'January',
+        data: 100
+      },
+      {
+        name: 'February',
+        data: 300
+      },
+      {
+        name: 'March',
+        data: 530
+      },
+      {
+        name: 'April',
+        data: 200
+      }
+    ]
+  }}
+/>
+
+<Title />
+<Description />
+
+<Preview>
+  <Story name="Default">
+    {(args) => (
+      <MicroBarChart
+        dataset={args.dataset}
+        loading={args.loading}
+        style={{ width: '100%' }}
+        dimension={{
+          accessor: 'name'
+        }}
+        measure={{
+          accessor: 'data'
+        }}
+      />
+    )}
+  </Story>
+</Preview>
+
+<Props story="Default" of={MicroBarChart} />
+
+<Preview>
+  <Story name="With custom props">
+    {(args) => (
+      <MicroBarChart
+        onDataPointClick={args.onDataPointClick}
+        dataset={args.dataset}
+        style={{ width: '50%' }}
+        loading={args.loading}
+        dimension={{
+          accessor: 'name'
+        }}
+        measure={{
+          accessor: 'data',
+          colors: ['#f0ab00', 'var(--sapHighlightColor)'],
+          formatter: (d) => (d > 200 ? 'over 200' : 'lower'),
+          width: 16
+        }}
+      />
+    )}
+  </Story>
+</Preview>
+
+<Preview>
+  <Story name="Loading Placeholder">
+    <MicroBarChart
+      dataset={[]}
+      dimension={{
+        accessor: 'name'
+      }}
+      measure={{
+        accessor: 'data'
+      }}
+      style={{ width: '20%' }}
+    />
+  </Story>
+</Preview>

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

@@ -0,0 +1,112 @@
+import { mount } from 'enzyme';
+import * as React from 'react';
+import { render, screen, fireEvent } from '@shared/tests/index';
+import { MicroBarChart } from '@ui5/webcomponents-react-charts/lib/MicroBarChart';
+
+const text1 = 'Bar Number One';
+const text2 = 'Bar Number Two';
+const text3 = 'Bar Number Three';
+
+const dataset = [
+  { value: 10, label: text1 },
+  { value: 100, label: text2 },
+  { value: 70, label: text3 }
+];
+
+describe('Micro Bar Chart', () => {
+  test('Render with default Props', () => {
+    const utils = render(
+      <MicroBarChart
+        dimension={{
+          accessor: 'label'
+        }}
+        measure={{
+          accessor: 'value'
+        }}
+        dataset={dataset}
+      />
+    );
+    expect(screen.getByText(text1).textContent).toEqual(text1);
+    expect(screen.getByText(text2).textContent).toEqual(text2);
+    expect(screen.getByText(text3).textContent).toEqual(text3);
+
+    expect(utils.asFragment()).toMatchSnapshot();
+  });
+
+  test('With formatted dimension', () => {
+    render(
+      <MicroBarChart
+        dimension={{
+          accessor: 'label',
+          formatter: (label) => `${label} - formatted`
+        }}
+        measure={{
+          accessor: 'value'
+        }}
+        dataset={dataset}
+      />
+    );
+    expect(screen.getByText('Bar Number One - formatted').textContent).toEqual('Bar Number One - formatted');
+    expect(screen.getByText('Bar Number Two - formatted').textContent).toEqual('Bar Number Two - formatted');
+  });
+
+  test('With custom colors', () => {
+    expect(
+      render(
+        <MicroBarChart
+          dimension={{
+            accessor: 'label',
+            formatter: (label) => `${label} - formatted`
+          }}
+          measure={{
+            accessor: 'value',
+            colors: ['black', 'yellow']
+          }}
+          dataset={dataset}
+        />
+      ).asFragment()
+    ).toMatchSnapshot();
+  });
+
+  test('Bar click', async () => {
+    let internalDataset = dataset;
+
+    const { getByText, rerender } = render(
+      <MicroBarChart
+        dimension={{
+          accessor: 'label'
+        }}
+        onDataPointClick={() =>
+          (internalDataset = [
+            { value: 10, label: 'Bar Number One' },
+            { value: 100, label: 'Bar Number Two - clicked' },
+            { value: 70, label: 'Bar Number Three' }
+          ])
+        }
+        measure={{
+          accessor: 'value'
+        }}
+        dataset={internalDataset}
+      />
+    );
+    fireEvent.click(getByText('Bar Number Two'));
+
+    rerender(
+      <MicroBarChart
+        dimension={{
+          accessor: 'label'
+        }}
+        measure={{
+          accessor: 'value'
+        }}
+        dataset={internalDataset}
+      />
+    );
+    expect(screen.getByText('Bar Number Two - clicked').textContent).toEqual('Bar Number Two - clicked');
+  });
+
+  test('loading placeholder', () => {
+    const wrapper = mount(<MicroBarChart style={{ width: '50%' }} dimension={null} measure={null} />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+});