@fluentui/react-charting 5.12.37 → 5.13.1

package/CHANGELOG.json

@@ -2,7 +2,63 @@
   "name": "@fluentui/react-charting",
   "entries": [
     {
-      "date": "Tue, 13 Sep 2022 07:39:51 GMT",
+      "date": "Fri, 16 Sep 2022 07:36:34 GMT",
+      "tag": "@fluentui/react-charting_v5.13.1",
+      "version": "5.13.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.95.1",
+            "commit": "9077e0a7d3911096a3337d76ec65591d191a780a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 19:15:26 GMT",
+      "tag": "@fluentui/react-charting_v5.13.0",
+      "version": "5.13.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "dzearing@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "682ead9953a1d519133193033aafe392173009f5",
+            "comment": "All /lib-commonjs/ top-level entries have been added to the exports map for backwards compatibility."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-charting",
+            "comment": "Bump @fluentui/react to v8.95.0",
+            "commit": "682ead9953a1d519133193033aafe392173009f5"
+          }
+        ],
+        "patch": [
+          {
+            "author": "atishay.jain@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "ca89bb0a920f267f049347ce63ad45424ce37f32",
+            "comment": "Add support for custom locale for date axis"
+          },
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "eea486038db9ef0eca9a377bd38fcd61fde7b18d",
+            "comment": "Fix value font-weight inside heatmap chart"
+          },
+          {
+            "author": "kumarkshitij@microsoft.com",
+            "package": "@fluentui/react-charting",
+            "commit": "bbf7b60d16ffbbfe6473b894297a40f18589e6d0",
+            "comment": "Fix legend overflow-indication-text role"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 13 Sep 2022 07:41:03 GMT",
       "tag": "@fluentui/react-charting_v5.12.37",
       "version": "5.12.37",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-charting
 
-This log was last generated on Tue, 13 Sep 2022 07:39:51 GMT and should not be manually modified.
+This log was last generated on Fri, 16 Sep 2022 07:36:34 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [5.13.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.13.1)
+
+Fri, 16 Sep 2022 07:36:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.13.0..@fluentui/react-charting_v5.13.1)
+
+### Patches
+
+- Bump @fluentui/react to v8.95.1 ([PR #24822](https://github.com/microsoft/fluentui/pull/24822) by beachball)
+
+## [5.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.13.0)
+
+Thu, 15 Sep 2022 19:15:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.37..@fluentui/react-charting_v5.13.0)
+
+### Minor changes
+
+- All /lib-commonjs/ top-level entries have been added to the exports map for backwards compatibility. ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by dzearing@microsoft.com)
+- Bump @fluentui/react to v8.95.0 ([PR #24792](https://github.com/microsoft/fluentui/pull/24792) by beachball)
+
+### Patches
+
+- Add support for custom locale for date axis ([PR #24753](https://github.com/microsoft/fluentui/pull/24753) by atishay.jain@microsoft.com)
+- Fix value font-weight inside heatmap chart ([PR #24726](https://github.com/microsoft/fluentui/pull/24726) by kumarkshitij@microsoft.com)
+- Fix legend overflow-indication-text role ([PR #24756](https://github.com/microsoft/fluentui/pull/24756) by kumarkshitij@microsoft.com)
+
 ## [5.12.37](https://github.com/microsoft/fluentui/tree/@fluentui/react-charting_v5.12.37)
 
-Tue, 13 Sep 2022 07:39:51 GMT 
+Tue, 13 Sep 2022 07:41:03 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charting_v5.12.36..@fluentui/react-charting_v5.12.37)
 
 ### Patches

package/README.md

@@ -28,10 +28,6 @@ To import charting components:
 import { ComponentName } from '@fluentui/react-charting/lib/ComponentName';
 ```
 
-**Technical Guide**
-
-Technical information about chart components is available at [Technical details](./TechnicalDetails.md)
-
 **Contributing**
 
 Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package.
@@ -56,3 +52,87 @@ You could also create issues under the [charting](https://github.com/microsoft/f
 **Coding Guidelines**
 
 Refer fluent [Coding guidelines](https://github.com/microsoft/fluentui/wiki/Coding-Style)
+
+# Technical details
+
+**Overview**
+
+This document describes different chart components in detail.
+
+This can be used as a guide to use the charts and contribute new functionalities or improvements to the library.
+
+**Components**
+
+The charting components are built using following building blocks.
+
+- Cartesian Charts.
+
+  - 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.
+
+- Legends.
+
+  - 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.
+
+- Hover Callouts.
+
+  - 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.
+
+- Axes.
+
+  - 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.
+
+  - Axes support for different charts
+
+    | Chart                      | Numeric Axis | Date Axis | String Axis |
+    | -------------------------- | ------------ | --------- | ----------- |
+    | Line Chart                 | Yes          | Yes       | No          |
+    | Area Chart                 | Yes          | Yes       | No          |
+    | Vertical Bar Chart         | Yes          | No        | Yes         |
+    | Vertical Stacked Bar Chart | Yes          | No        | Yes         |
+    | Grouped Vertical Bar Chart | No           | No        | Yes         |
+    | Heatmap Chart              | Yes          | Yes       | Yes         |
+    | Horizontal Bar Chart       | --           | --        | --          |
+    | Donut Chart                | --           | --        | --          |
+    | Sankey Chart               | --           | --        | --          |
+    | Tree Chart                 | --           | --        | --          |
+    | Sparkline Chart            | --           | --        | --          |
+
+  - Axis localization
+    The axes support 2 ways of localization.
+    1. Javascript provided inbuilt localization for numeric and date axis. Specify the culture and dateLocalizeOptions for date axis to define target localization. Refer the [javascript localization guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString) for usage.
+    2. Custom locale definition: The consumer of the library can specify a custom locale definition as supported by d3 (like [this](https://github.com/d3/d3-time-format/blob/main/locale/en-US.json)). The date axis will use the date range and the multiformat specified in the definition to determine the correct format to show in the ticks. For example - If the date range is in days then the axis will show hourly ticks. If the date range spans across months then the axis will show months in tick labels and so on.
+       Specify the custom locale definition in the timeFormatLocale prop.
+       Refer to the Custom Locale Date Axis example in line chart for sample usage.
+
+- Event annotations (Available in line charts).
+
+  - 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.
+
+- Typography.
+
+  - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color.
+
+- Colors
+
+  - The charts are designed using the accessible color palette defined for the fluent design system.
+
+- Themes
+
+  - 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)
+
+- Accessibility.
+
+  - Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility.
+    Consumers can define their own aria labels for each point by setting the `xAxisCalloutAccessibilityData` and `callOutAccessibilityData` properties.
+
+- RTL Support
+
+  - The charts support RTL languages wherever applicable.
+
+- Component Styling
+
+  - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library.
+
+- Details about ticks.
+  - Tick values are applicable only for date axis. Doesn't work for string or numeric axis.
+    Tickcount works for numeric and date axis. Doesn't work for string (scaleBand) axis.