@fluentui/react-charting 5.12.28 → 5.12.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/CHANGELOG.json +58 -1
  2. package/CHANGELOG.md +31 -2
  3. package/README.md +21 -7
  4. package/TechnicalDetails.md +80 -0
  5. package/dist/react-charting.js +1 -1
  6. package/dist/react-charting.min.js +1 -1
  7. package/lib/components/CommonComponents/CartesianChart.base.js +3 -3
  8. package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
  9. package/lib/components/CommonComponents/CartesianChart.types.d.ts +29 -16
  10. package/lib/components/CommonComponents/CartesianChart.types.js.map +1 -1
  11. package/lib/components/Legends/Legends.types.d.ts +1 -1
  12. package/lib/components/Legends/Legends.types.js.map +1 -1
  13. package/lib/components/Sparkline/Sparkline.styles.js +1 -1
  14. package/lib/components/Sparkline/Sparkline.styles.js.map +1 -1
  15. package/lib/components/StackedBarChart/MultiStackedBarChart.types.d.ts +2 -0
  16. package/lib/components/StackedBarChart/MultiStackedBarChart.types.js.map +1 -1
  17. package/lib/utilities/utilities.d.ts +1 -1
  18. package/lib/utilities/utilities.js +9 -2
  19. package/lib/utilities/utilities.js.map +1 -1
  20. package/lib/version.js +1 -1
  21. package/lib/version.js.map +1 -1
  22. package/lib-amd/components/CommonComponents/CartesianChart.base.js +3 -3
  23. package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
  24. package/lib-amd/components/CommonComponents/CartesianChart.types.d.ts +29 -16
  25. package/lib-amd/components/CommonComponents/CartesianChart.types.js.map +1 -1
  26. package/lib-amd/components/Legends/Legends.types.d.ts +1 -1
  27. package/lib-amd/components/Legends/Legends.types.js.map +1 -1
  28. package/lib-amd/components/Sparkline/Sparkline.styles.js +1 -1
  29. package/lib-amd/components/Sparkline/Sparkline.styles.js.map +1 -1
  30. package/lib-amd/components/StackedBarChart/MultiStackedBarChart.types.d.ts +2 -0
  31. package/lib-amd/components/StackedBarChart/MultiStackedBarChart.types.js.map +1 -1
  32. package/lib-amd/utilities/utilities.d.ts +1 -1
  33. package/lib-amd/utilities/utilities.js +9 -2
  34. package/lib-amd/utilities/utilities.js.map +1 -1
  35. package/lib-amd/version.js +1 -1
  36. package/lib-amd/version.js.map +1 -1
  37. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +3 -3
  38. package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
  39. package/lib-commonjs/components/CommonComponents/CartesianChart.types.d.ts +29 -16
  40. package/lib-commonjs/components/CommonComponents/CartesianChart.types.js.map +1 -1
  41. package/lib-commonjs/components/Legends/Legends.types.d.ts +1 -1
  42. package/lib-commonjs/components/Legends/Legends.types.js.map +1 -1
  43. package/lib-commonjs/components/Sparkline/Sparkline.styles.js +1 -1
  44. package/lib-commonjs/components/Sparkline/Sparkline.styles.js.map +1 -1
  45. package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.d.ts +2 -0
  46. package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.js.map +1 -1
  47. package/lib-commonjs/utilities/utilities.d.ts +1 -1
  48. package/lib-commonjs/utilities/utilities.js +9 -2
  49. package/lib-commonjs/utilities/utilities.js.map +1 -1
  50. package/lib-commonjs/version.js +1 -1
  51. package/lib-commonjs/version.js.map +1 -1
  52. package/package.json +4 -4
  53. package/src/components/CommonComponents/CartesianChart.types.ts +30 -16
  54. package/src/components/Legends/Legends.types.ts +1 -1
  55. package/src/components/StackedBarChart/MultiStackedBarChart.types.ts +2 -0
package/CHANGELOG.json CHANGED
@@ -2,7 +2,64 @@
2
2
  "name": "@fluentui/react-charting",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 25 Aug 2022 07:40:13 GMT",
5
+ "date": "Tue, 30 Aug 2022 07:41:20 GMT",
6
+ "tag": "@fluentui/react-charting_v5.12.31",
7
+ "version": "5.12.31",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "atishay.jain@microsoft.com",
12
+ "package": "@fluentui/react-charting",
13
+ "commit": "1fe1f9bc178992056a8bc175f6e95675fb00321b",
14
+ "comment": "Add support for javascript date localization"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 29 Aug 2022 07:44:38 GMT",
21
+ "tag": "@fluentui/react-charting_v5.12.30",
22
+ "version": "5.12.30",
23
+ "comments": {
24
+ "patch": [
25
+ {
26
+ "author": "beachball",
27
+ "package": "@fluentui/react-charting",
28
+ "comment": "Bump @fluentui/react-focus to v8.8.3",
29
+ "commit": "a3081ce8cb9aef65dd64fe9328b84959d7b0e665"
30
+ },
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui/react-charting",
34
+ "comment": "Bump @fluentui/react to v8.93.0",
35
+ "commit": "a3081ce8cb9aef65dd64fe9328b84959d7b0e665"
36
+ }
37
+ ]
38
+ }
39
+ },
40
+ {
41
+ "date": "Fri, 26 Aug 2022 07:39:57 GMT",
42
+ "tag": "@fluentui/react-charting_v5.12.29",
43
+ "version": "5.12.29",
44
+ "comments": {
45
+ "patch": [
46
+ {
47
+ "author": "atishay.jain@microsoft.com",
48
+ "package": "@fluentui/react-charting",
49
+ "commit": "6faffd280a37636c7917752693b7bf627caec32d",
50
+ "comment": "Update documentation for charting library"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-charting",
55
+ "comment": "Bump @fluentui/react to v8.92.1",
56
+ "commit": "744f8e5ccf138ef8c893929c77a1e85f484415d4"
57
+ }
58
+ ]
59
+ }
60
+ },
61
+ {
62
+ "date": "Thu, 25 Aug 2022 07:41:03 GMT",
6
63
  "tag": "@fluentui/react-charting_v5.12.28",
7
64
  "version": "5.12.28",
8
65
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,41 @@
1
1
  # Change Log - @fluentui/react-charting
2
2
 
3
- This log was last generated on Thu, 25 Aug 2022 07:40:13 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 30 Aug 2022 07:41:20 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [5.12.31](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.12.31)
8
+
9
+ Tue, 30 Aug 2022 07:41:20 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.30..@fluentui/react-charting_v5.12.31)
11
+
12
+ ### Patches
13
+
14
+ - Add support for javascript date localization ([PR #24577](https://github.com/microsoft/fluentui/pull/24577) by atishay.jain@microsoft.com)
15
+
16
+ ## [5.12.30](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.12.30)
17
+
18
+ Mon, 29 Aug 2022 07:44:38 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.29..@fluentui/react-charting_v5.12.30)
20
+
21
+ ### Patches
22
+
23
+ - Bump @fluentui/react-focus to v8.8.3 ([PR #24554](https://github.com/microsoft/fluentui/pull/24554) by beachball)
24
+ - Bump @fluentui/react to v8.93.0 ([PR #24554](https://github.com/microsoft/fluentui/pull/24554) by beachball)
25
+
26
+ ## [5.12.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.12.29)
27
+
28
+ Fri, 26 Aug 2022 07:39:57 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.28..@fluentui/react-charting_v5.12.29)
30
+
31
+ ### Patches
32
+
33
+ - Update documentation for charting library ([PR #21773](https://github.com/microsoft/fluentui/pull/21773) by atishay.jain@microsoft.com)
34
+ - Bump @fluentui/react to v8.92.1 ([PR #24492](https://github.com/microsoft/fluentui/pull/24492) by beachball)
35
+
7
36
  ## [5.12.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.12.28)
8
37
 
9
- Thu, 25 Aug 2022 07:40:13 GMT
38
+ Thu, 25 Aug 2022 07:41:03 GMT
10
39
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.27..@fluentui/react-charting_v5.12.28)
11
40
 
12
41
  ### Patches
package/README.md CHANGED
@@ -13,9 +13,10 @@ This library is also supported for fluent UI [v7](https://github.com/microsoft/f
13
13
 
14
14
  **Using the library**
15
15
 
16
- The documentation and examples for the charting library are available on the [demo site](https://aka.ms/fluentcharting).
16
+ Examples and code snippets for the charting library are available on the [demo site](https://aka.ms/fluentcharting).
17
+ The code snippets can be used as usage guide for all the props and chart variations. Click on 'Show code' on the demo site to access demo for each variant.
17
18
 
18
- If using npm, install the package
19
+ The library is published as a npm package to public npm feed. To install the package
19
20
 
20
21
  ```js
21
22
  npm install @fluentui/react-charting
@@ -27,18 +28,31 @@ To import charting components:
27
28
  import { ComponentName } from '@fluentui/react-charting/lib/ComponentName';
28
29
  ```
29
30
 
31
+ **Technical Guide**
32
+
33
+ Technical information about chart components is available at [Technical details](./TechnicalDetails.md)
34
+
30
35
  **Contributing**
31
36
 
32
37
  Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package.
33
38
 
34
- **Future roadmap**.
39
+ **Testing**
40
+
41
+ The library has sufficient number of snapshot tests to test for visual regressions.
42
+ Run `yarn test` from within the package to run all the tests.
35
43
 
36
- Work In Progress. To be published soon.
44
+ **Versioning and changelog**
37
45
 
38
- **FAQ**
46
+ We use SemVer for versioning. For the versions available, see the [tags](https://github.com/microsoft/fluentui/tags) on this repository.
39
47
 
40
- Work In Progress. To be published soon
48
+ Refer to the [changelog](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/CHANGELOG.md) for details about changes made in each version.
41
49
 
42
50
  **Contact**
43
51
 
44
- You can reach out to the charting team by tagging `@microsoft/charting-team` in discussion items.
52
+ You can reach out to the charting team by tagging `@microsoft/charting-team` in [discussion](https://github.com/microsoft/fluentui/discussions) items.
53
+
54
+ You could also create issues under the [charting](https://github.com/microsoft/fluentui/labels/Package:%20charting) tag.
55
+
56
+ **Coding Guidelines**
57
+
58
+ Refer fluent [Coding guidelines](https://github.com/microsoft/fluentui/wiki/Coding-Style)
@@ -0,0 +1,80 @@
1
+ # Technical details
2
+
3
+ **Overview**
4
+
5
+ This document describes different charts and their components in detail.
6
+
7
+ This can be used as a guide to use the charts and contribute new functionalities or improvements to the library.
8
+
9
+ **Components**
10
+
11
+ The charting components are built using following building blocks.
12
+
13
+ - Cartesian Charts.
14
+
15
+ - Charts built using cartesian coordinate system (two axes - x axis perpendicular to y axis) are called cartesian charts. Majority of the chart in the library are cartesian charts. Some charts like horizontal chart, donut chart, sankey and tree charts are non cartesian charts.
16
+
17
+ - Legends.
18
+
19
+ - A legend contains a list of the variables appearing in the chart and an example of their appearance. This information allows the data from each variable to be identified in the chart.
20
+
21
+ - Hover Callouts.
22
+
23
+ - Whenever the mouse is hovered over a datapoint, a callout is shown representing the details of data for that point. For a stacked chart, the hover callout can represent the data for all the points for the same X coordinate.
24
+
25
+ - Axes.
26
+
27
+ - Our charts currently support cartesian axes. Different charts support different type of axes - numerical axis, date or time series axis, string or categorical axis. Detals about supported axes can be found in readme for each chart.
28
+
29
+ - Axes support for different charts
30
+
31
+ | Chart | Numeric Axis | Date Axis | String Axis |
32
+ | -------------------------- | ------------ | --------- | ----------- |
33
+ | Line Chart | Yes | Yes | No |
34
+ | Area Chart | Yes | Yes | No |
35
+ | Vertical Bar Chart | Yes | No | Yes |
36
+ | Vertical Stacked Bar Chart | Yes | No | Yes |
37
+ | Grouped Vertical Bar Chart | No | No | Yes |
38
+ | Heatmap Chart | Yes | Yes | Yes |
39
+ | Horizontal Bar Chart | -- | -- | -- |
40
+ | Donut Chart | -- | -- | -- |
41
+ | Sankey Chart | -- | -- | -- |
42
+ | Tree Chart | -- | -- | -- |
43
+ | Sparkline Chart | -- | -- | -- |
44
+
45
+ - Axis localization
46
+ The axes support javascript provided localization for numeric and date axis.
47
+ Specify the culture and dateLocalizeOptions for date axis to define target localization details.
48
+
49
+ - Event annotations (Available in line charts).
50
+
51
+ - Data can be annotated using vertical lines representing the events of interest. See [line chart with events](https://fluentuipr.z22.web.core.windows.net/heads/master/react-charting/demo/index.html#/examples/linechart#Variants) for example.
52
+
53
+ - Typography.
54
+
55
+ - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color.
56
+
57
+ - Colors
58
+
59
+ - The charts are designed using the accessible color palette defined for the fluent design system.
60
+
61
+ - Themes
62
+
63
+ - The library supports light and dark mode out of box. In addition, consumers can define their own themese as detailed [here](https://github.com/microsoft/fluentui/wiki/Theming)
64
+
65
+ - Accessibility.
66
+
67
+ - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
68
+ Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties.
69
+
70
+ - RTL Support
71
+
72
+ - The charts support RTL languages wherever applicable.
73
+
74
+ - Component Styling
75
+
76
+ - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library.
77
+
78
+ - Details about ticks.
79
+ - Tick values are applicable only for date axis. Doesn't work for string or numeric axis.
80
+ Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis.