Skip to content

Commit 307f86d

Browse files
committed
Update MigrationGuide.md
1 parent 82682ce commit 307f86d

File tree

1 file changed

+84
-0
lines changed

1 file changed

+84
-0
lines changed

docs/MigrationGuide.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,89 @@
11
# Migration Guide
22

3+
## 0.9.5 - Charts Migration
4+
With version v0.9.5 of `@ui5/webcomponents-react-charts` we replace the canvas based charts with SVG based charts and
5+
streamlined the ChartAPI to work similar to the `AnalyticalTable` API.
6+
This requires a couple of changes on your side:
7+
8+
1. Change the import from `@ui5/webcomponents-react-charts/lib/[ChartType]` to `@ui5/webcomponents-react-charts/lib/[ChartType]`
9+
2. Don't split the dataset into labels and single dataset entries as before, you can pass your dataset "as-is" to the chart.
10+
3. Your labels are now part of the dataset, but you need to tell the chart which element of the data is your dimension
11+
Use the `dimensions` prop for that.
12+
4. Instead of passing multiple datasets with their own data into the datasets prop, define your `measures` by specifying at least the `accessor`.
13+
14+
To illustrate the required changes, you can find the migration of a bar chart with two bars per dimension below:
15+
16+
Old Bar Chart:
17+
```jsx
18+
import React from 'react';
19+
import { BarChart } from '@ui5/webcomponents-react-charts/lib/BarChart';
20+
21+
const MyComponent = () => {
22+
return (
23+
<BarChart
24+
labels={['January', 'February', 'March']}
25+
datasets={[
26+
{
27+
label: 'Existing Customers',
28+
data: [65, 59, 80]
29+
},
30+
31+
{
32+
label: 'New Customers',
33+
data: [5, 9, 8]
34+
}
35+
]}
36+
/>
37+
);
38+
};
39+
```
40+
41+
New Bar Chart:
42+
```jsx
43+
import React from 'react';
44+
import { BarChart } from '@ui5/webcomponents-react-charts/lib/next/BarChart';
45+
46+
const MyComponent = () => {
47+
return (
48+
<BarChart
49+
dimensions={[
50+
{
51+
accessor: 'month'
52+
}
53+
]}
54+
measures={[
55+
{
56+
accessor: 'existingCustomers',
57+
label: 'Existing Customers'
58+
},
59+
{
60+
accessor: 'newCustomers',
61+
label: 'New Customers'
62+
}
63+
]}
64+
dataset={[
65+
{
66+
month: 'January',
67+
existingCustomers: 65,
68+
newCustomers: 5,
69+
data: [65, 59, 80]
70+
},
71+
{
72+
month: 'February',
73+
existingCustomers: 59,
74+
newCustomers: 9
75+
},
76+
{
77+
month: 'March',
78+
existingCustomers: 80,
79+
newCustomers: 8
80+
}
81+
]}
82+
/>
83+
);
84+
};
85+
```
86+
387
## Migrating from 0.8.X to 0.9.0
488
Migrating your app from 0.8.X to 0.9.0 requires a few updates to the API properties, this includes dependencies, theming, event handling and prop changes.
589

0 commit comments

Comments
 (0)