Skip to content

Commit b4788ec

Browse files
Anush2303AtishayMsftkrkshitij
authored
feat(react-charts): Publish stable version of charts v9 package. (#33858)
Co-authored-by: Atishay Jain (atisjai) <98592573+AtishayMsft@users.noreply.github.com> Co-authored-by: krkshitij <110246001+krkshitij@users.noreply.github.com>
1 parent 6db9879 commit b4788ec

File tree

216 files changed

+13209
-9782
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

216 files changed

+13209
-9782
lines changed

‎.github/CODEOWNERS‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,8 +140,9 @@ packages/react-conformance @microsoft/fluentui-react-build
140140
packages/charts/chart-web-components @microsoft/charting-team
141141
packages/charts/chart-utilities @microsoft/charting-team
142142
packages/charts/react-charting @microsoft/charting-team
143-
packages/charts/react-charts-preview/library @microsoft/charting-team
144-
packages/charts/react-charts-preview/stories @microsoft/charting-team
143+
packages/charts/react-charts @microsoft/charting-team
144+
packages/charts/react-charts/library @microsoft/charting-team
145+
packages/charts/react-charts/stories @microsoft/charting-team
145146
packages/date-time-utilities @microsoft/cxe-red
146147
packages/eslint-plugin @microsoft/fluentui-react-build
147148
packages/foundation-legacy @microsoft/cxe-red @khmakoto

‎apps/chart-docsite/.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const config: StorybookConfig = {
1010
'../src/**/*.mdx',
1111
'../src/**/index.stories.@(js|jsx|ts|tsx)',
1212
// packages stories
13-
'../../../packages/charts/react-charts-preview/stories/**/index.stories.@(js|jsx|ts|tsx)',
13+
'../../../packages/charts/react-charts/stories/**/index.stories.@(js|jsx|ts|tsx)',
1414
],
1515
};
1616

‎apps/chart-docsite/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@fluentui/scripts-tasks": "*"
2222
},
2323
"dependencies": {
24-
"@fluentui/react-charts-preview": "*",
24+
"@fluentui/react-charts": ">=9.0.0-alpha",
2525
"@fluentui/react-storybook-addon": "*",
2626
"@fluentui/react-storybook-addon-export-to-sandbox": "*",
2727
"react": "17.0.2",

‎apps/chart-docsite/src/Introduction.mdx‎

Lines changed: 153 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs';
44

55
## Overview
66

7-
Fluent UI React charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. The charts are used across 100+ projects inside Microsoft including Microsoft 365 and Azure.
7+
Fluent UI React charts is a set of modern, accessible, interactive, lightweight and highly customizable visualization library representing the Microsoft design system. These charts are used across 100s of projects inside Microsoft across Microsoft 365, Copilot and Azure.
88

99
The library is built using D3 (Data Driven Documents) and fluent v9 design system.
1010

@@ -15,46 +15,189 @@ To get started with the charts package in your project:
1515
1. Install the desired package using `npm` or `yarn`:
1616

1717
```
18-
npm install @fluentui/react-charts-preview
18+
npm install @fluentui/react-charts
1919
```
2020

2121
or
2222

2323
```
24-
yarn add @fluentui/react-charts-preview
24+
yarn add @fluentui/react-charts
2525
```
2626

2727
2. Import and use the charts in your React application.
2828

29-
3. Refer to the individual chart documentation for detailed usage instructions and examples.
29+
3. Refer to the individual chart examples for detailed usage instructions and examples.
30+
31+
## Available charts across platforms
32+
33+
<table>
34+
<tr>
35+
<th>Chart</th>
36+
<th>Fluent v8</th>
37+
<th>Fluent v9</th>
38+
<th>Fluent Web Component</th>
39+
</tr>
40+
<tr>
41+
<td>Documentation</td>
42+
<td>[Link](https://aka.ms/fluentcharting)</td>
43+
<td>[Link](https://react.fluentui.dev/?path=/docs/charts_introduction--docs)</td>
44+
<td>[Link](https://github.com/microsoft/fluentui/tree/master/packages/charts/chart-web-components#readme)</td>
45+
</tr>
46+
<tr>
47+
<td>AreaChart</td>
48+
<td>Stable</td>
49+
<td>April 2025</td>
50+
<td>Planned</td>
51+
</tr>
52+
<tr>
53+
<td>DonutChart</td>
54+
<td>Stable</td>
55+
<td>Stable</td>
56+
<td>Planned</td>
57+
</tr>
58+
<tr>
59+
<td>GaugeChart</td>
60+
<td>Stable</td>
61+
<td>March 2025</td>
62+
<td>Planned</td>
63+
</tr>
64+
<tr>
65+
<td>HeatMapChart</td>
66+
<td>Stable</td>
67+
<td>April 2025</td>
68+
<td>Planned</td>
69+
</tr>
70+
<tr>
71+
<td>HorizontalBarChart</td>
72+
<td>Stable</td>
73+
<td>Stable</td>
74+
<td>Stable</td>
75+
</tr>
76+
<tr>
77+
<td>HorizontalBarChart with Axis</td>
78+
<td>Stable</td>
79+
<td>April 2025</td>
80+
<td>Planned</td>
81+
</tr>
82+
<tr>
83+
<td>HorizontalBarChart Stacked</td>
84+
<td>Stable</td>
85+
<td>HorizontalBarChart</td>
86+
<td>HorizontalBarChart</td>
87+
</tr>
88+
<tr>
89+
<td>HorizontalBarChart MultiStacked</td>
90+
<td>Stable</td>
91+
<td>HorizontalBarChart</td>
92+
<td>Planned</td>
93+
</tr>
94+
<tr>
95+
<td>Legends</td>
96+
<td>Stable</td>
97+
<td>Stable</td>
98+
<td>Planned</td>
99+
</tr>
100+
<tr>
101+
<td>LineChart</td>
102+
<td>Stable</td>
103+
<td>Stable</td>
104+
<td>Planned</td>
105+
</tr>
106+
<tr>
107+
<td>PieChart</td>
108+
<td>Stable</td>
109+
<td>Use donut chart</td>
110+
<td>Use donut chart</td>
111+
</tr>
112+
<tr>
113+
<td>SankeyChart</td>
114+
<td>Stable</td>
115+
<td>April 2025</td>
116+
<td>Planned</td>
117+
</tr>
118+
<tr>
119+
<td>Sparkline</td>
120+
<td>Stable</td>
121+
<td>Stable</td>
122+
<td>-</td>
123+
</tr>
124+
<tr>
125+
<td>TreeChart</td>
126+
<td>Stable</td>
127+
<td>-</td>
128+
<td>-</td>
129+
</tr>
130+
<tr>
131+
<td>VerticalBarChart</td>
132+
<td>Stable</td>
133+
<td>Stable</td>
134+
<td>Planned</td>
135+
</tr>
136+
<tr>
137+
<td>VerticalBarChart Grouped</td>
138+
<td>Stable</td>
139+
<td>April 2025</td>
140+
<td>Planned</td>
141+
</tr>
142+
<tr>
143+
<td>VerticalBarChart Stacked</td>
144+
<td>Stable</td>
145+
<td>Preview</td>
146+
<td>Planned</td>
147+
</tr>
148+
<tr>
149+
<td>Plotly Schema Chart (new)</td>
150+
<td>Stable</td>
151+
<td>March 2025</td>
152+
<td>-</td>
153+
</tr>
154+
<tr>
155+
<td>Scatter Chart (new)</td>
156+
<td>-</td>
157+
<td>June 2025</td>
158+
<td>-</td>
159+
</tr>
160+
<tr>
161+
<td>Gantt Chart (new)</td>
162+
<td>-</td>
163+
<td>June 2025</td>
164+
<td>-</td>
165+
</tr>
166+
</table>
167+
168+
## Using v8 charts in fluent v9
169+
170+
Follow [this](https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-components-charts-migration--docs) guide to use v8 charts in fluent v9 till v9 charts are released.
30171

31172
## Contact
32173

33174
The charting project is actively funded by a small feature team. The team responds within 1-2 business days for any queries or doubts.
34175
You can reach out to the charting team by tagging `@microsoft/charting-team` in [discussion](https://github.com/microsoft/fluentui/discussions) items.
35176

36-
You could also create issues under the [charting](https://github.com/microsoft/fluentui/labels/Package:%20charting) tag.
177+
You could also create issues using the [charting](https://github.com/microsoft/fluentui/issues/new?template=03-react-charting-bug-report.yml) template.
37178

38179
## Contributing
39180

40181
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-1EAEDB)]()
41182

42183
Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package.
43184

44-
A comprehensive contributor guide is available in our internal [wiki](https://aka.ms/fluentChartingWiki). Available to share publically on request.
185+
A comprehensive contributor and technical guide is available on the charts [wiki](https://aka.ms/fluentChartingWiki).
45186

46187
## Resources
47188

48-
Several resources are available to know more details about the charting project.
189+
Several resources are available to know more details about the charts library.
49190

50191
Published roadmap [here](https://aka.ms/fluentChartingRoadmap)
51192

52193
Detailed [wiki](https://aka.ms/fluentChartingWiki)
53194

54-
Join our [discord server](https://aka.ms/FluentCharting/discord) for realtime conversation and schedule to our regular office hours.
195+
Join our [discord server](https://aka.ms/FluentCharting/discord) for realtime conversation and schedule to our office hours.
196+
197+
Figma designs - Contact us for details.
55198

56199
## Accessibility
57200

58-
Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
201+
Our charts are among the very few charting solutions providing elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
59202

60-
More details are covered in the [wiki](https://aka.ms/fluentChartingWiki).
203+
More details are covered in the [wiki](https://microsoft.github.io/fluentui-charting-contrib/docs/Accessibility).

‎apps/public-docsite-v9/.storybook/main.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
5656
// Workaround to enable docsite using PR workflow till master workflow is enabled
5757
url: 'https://fluentuipr.z22.web.core.windows.net/pull/33270/chart-docsite/storybook',
5858
expanded: false,
59-
sourceUrl: 'https://github.com/microsoft/fluentui/charts/react-charts-preview',
59+
sourceUrl: 'https://github.com/microsoft/fluentui/charts/react-charts',
6060
},
6161
},
6262
});

‎apps/vr-tests-react-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"@fluentui/react-button": "*",
2626
"@fluentui/react-calendar-compat": "*",
2727
"@fluentui/react-card": "*",
28-
"@fluentui/react-charts-preview": "*",
28+
"@fluentui/react-charts": ">=9.0.0-alpha",
2929
"@fluentui/react-checkbox": "*",
3030
"@fluentui/react-combobox": "*",
3131
"@fluentui/react-context-selector": "*",

‎apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22
import type { Meta } from '@storybook/react';
33
import { DARK_MODE, getStoryVariant, RTL, TestWrapperDecorator } from '../../utilities';
44
import { Steps, StoryWright } from 'storywright';
5-
import { ChartProps, ChartDataPoint, DonutChart } from '@fluentui/react-charts-preview';
5+
import { ChartProps, ChartDataPoint, DonutChart } from '@fluentui/react-charts';
66

77
export default {
88
title: 'Charts/DonutChart',

0 commit comments

Comments
 (0)