diff --git a/change/@fluentui-react-charting-dc4ff1f6-ec1f-48b2-82e3-f00767be34c5.json b/change/@fluentui-react-charting-dc4ff1f6-ec1f-48b2-82e3-f00767be34c5.json new file mode 100644 index 00000000000000..4b9f31ef034554 --- /dev/null +++ b/change/@fluentui-react-charting-dc4ff1f6-ec1f-48b2-82e3-f00767be34c5.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Part 2 - Changes to onboard charting to fluent docsite", + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-charting/README.md b/packages/react-charting/README.md index 452874e724ce3e..c8f189f9be8212 100644 --- a/packages/react-charting/README.md +++ b/packages/react-charting/README.md @@ -1,5 +1,7 @@ # @fluentui/react-charting +[![npm version](https://badge.fury.io/js/@fluentui%2Freact-charting.svg)](https://badge.fury.io/js/@fluentui%2Freact-charting) [![Build Status](https://img.shields.io/azure-devops/build/uifabric/fabricpublic/164/master?style=flat-square)](https://dev.azure.com/uifabric/fabricpublic/_build?definitionId=164) + **Overview** [Fluent UI React](https://developer.microsoft.com/en-us/fluentui) @@ -11,7 +13,7 @@ These charts are used across different products in Microsoft. They are ready to This library is also supported for fluent UI [v7](https://github.com/microsoft/fluentui/tree/7.0). -**Using the library** +## Using the library Examples and code snippets for the charting library are available on the [demo site](https://aka.ms/fluentcharting). 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. @@ -28,115 +30,81 @@ To import charting components: import { ComponentName } from '@fluentui/react-charting/lib/ComponentName'; ``` -**Contributing** - -Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package. - -**Testing** - -The library has sufficient number of snapshot tests to test for visual regressions. -Run `yarn test` from within the package to run all the tests. - -**Versioning and changelog** - -We use SemVer for versioning. For the versions available, see the [tags](https://github.com/microsoft/fluentui/tags) on this repository. - -Refer to the [changelog](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/CHANGELOG.md) for details about changes made in each version. - -**Contact** +## Contact +The charting project is actively funded by a small feature team. The team responds within 1-2 business days for any queries or doubts. You can reach out to the charting team by tagging `@microsoft/charting-team` in [discussion](https://github.com/microsoft/fluentui/discussions) items. You could also create issues under the [charting](https://github.com/microsoft/fluentui/labels/Package:%20charting) tag. -**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** +## Resources -The charting components are built using following building blocks. +Several resources are available to know more details about the charting project. -- Cartesian Charts. +Published roadmap [here](https://aka.ms/fluentChartingRoadmap) - - 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. +Detailed [wiki](https://aka.ms/fluentChartingWiki) (Internal to Microsoft Employees currently) -- Legends. +Join our [discord server](https://aka.ms/FluentCharting/discord) for realtime conversation and schedule to our regular office hours. - - 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. +Official codepen account - Coming soon -- Hover Callouts. +Figma design guidance - Coming soon - - 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. +## Contributing -- Axes. +[![contributions welcome](https://img.shields.io/badge/contributions-welcome-1EAEDB)]() - - 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 +Refer the main fluentui [wiki](https://github.com/microsoft/fluentui/wiki) for detailed instructions on setup and contributing to the package. - | 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 | -- | -- | -- | +A comprehensive contributor guide is available in our internal [wiki](https://aka.ms/fluentChartingWiki). Available to share publically on request. - - Axis localization - The axes support 2 ways of localization. +## Testing - 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. +![Static Badge](https://img.shields.io/badge/coverage-87%25-brightgreen) - - Date axis formatting - The date axis can be custom formatted using the customDateTimeFormatter prop. +The library has a wide variety of tests to ensure quality of the library. +The tests range from component tests, unit tests, visual regression tests, accessibility tests, integration tests and manual tests. +The test automations aim to ensure over 90% code coverage across the library. -- Event annotations (Available in line charts). +Further details available in the wiki - - 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. +Run `yarn test` from within the package to run all the tests. -- Typography. +## Accessibility - - Our font classes represent the type ramp for the fluent design language. Each base class sets a default size, weight, and color. +Our charts have elaborate accessibility support. The charts are WCAG 2.1 MAS C compliant for accessibility. -- Colors +More details are covered in the wiki. - - The charts are designed using the accessible color palette defined for the fluent design system. +## Performance -- Themes +Performance is a key success criteria for the charting library. +Performance is measured and has been improved for the following scenarios. +|**S No**| **Scenario** | **Lighthouse Score** | +|:------:|:------------------------------------------------: | :----------------------: | +| 1. | 1 LineChart of 1 series with 30,000 datapoints | 79.2 | +| 2. | 6 LineCharts of 1 series with 100 datapoints each | 98.8 | +| 3. | 18 LineCharts of 1 series with 5 datapoints | 98 | +| 4. | 50 Linecharts of 1 Series with 10 datapoints each | 89.6 | +| 5. | 1 Linechart of 2 series with 500 datapoints each | 98.6 | +| 6. |10 Linecharts of 1 series with 1000 datapoints each| 94.4 | +| 7. | 1 Areachart with 30,000 datapoints | 49 | +| 8. | 6 Areacharts of 1 series with 100 datapoints each | 95.4 | +| 9. |18 Areacharts of 1 series with 5 data points each | 96.8 | - - 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) +More details are covered in the wiki. -- Accessibility. +## Versioning and changelog - - 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. +We use SemVer for versioning. For the versions available, see the [tags](https://github.com/microsoft/fluentui/tags) on this repository. -- RTL Support +Refer to the [changelog](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/CHANGELOG.md) for details about changes made in each version. - - The charts support RTL languages wherever applicable. +## Coding Guidelines -- Component Styling +Refer fluent [Coding guidelines](https://github.com/microsoft/fluentui/wiki/Coding-Style) - - [This article](https://github.com/microsoft/fluentui/wiki/Component-Styling) talks about the styling approach followed within charting library. +## Technical details -- 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. +Refer [this](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/TechnicalDetails.md) document for details on color palette, theming, types of axis supported and more. diff --git a/packages/react-charting/docs/TechnicalDetails.md b/packages/react-charting/docs/TechnicalDetails.md new file mode 100644 index 00000000000000..f5a592e280e163 --- /dev/null +++ b/packages/react-charting/docs/TechnicalDetails.md @@ -0,0 +1,88 @@ +# 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. + + - Date axis formatting + The date axis can be custom formatted using the customDateTimeFormatter prop. + +- 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. + Refer [this](https://github.com/microsoft/fluentui/blob/master/packages/react-charting/docs/colors.md) guide for details about charting color palette and its usage. + +- 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. diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 27c26eb49239c3..34749cf684792a 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -27,7 +27,7 @@ import { SVGProps } from 'react'; // @public export const AreaChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const CartesianChart: React_2.FunctionComponent; // @public @@ -151,11 +151,11 @@ export interface IAreaChartProps extends ICartesianChartProps { styles?: IStyleFunctionOrObject; } -// @public (undocumented) +// @public export interface IAreaChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface IAreaChartStyles extends ICartesianChartStyles { } @@ -205,7 +205,7 @@ export interface IBasestate { }[]; } -// @public (undocumented) +// @public export interface ICartesianChartProps { calloutProps?: Partial; // @deprecated @@ -257,7 +257,7 @@ export interface ICartesianChartProps { yMinValue?: number; } -// @public (undocumented) +// @public export interface ICartesianChartStyleProps { className?: string; color?: string; @@ -271,7 +271,7 @@ export interface ICartesianChartStyleProps { width?: number; } -// @public (undocumented) +// @public export interface ICartesianChartStyles { axisTitle?: IStyle; calloutBlockContainer?: IStyle; @@ -439,11 +439,11 @@ export interface IDonutChartProps extends ICartesianChartProps { valueInsideDonut?: string | number; } -// @public (undocumented) +// @public export interface IDonutChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface IDonutChartStyles { chart?: IStyle; legendContainer: IStyle; @@ -499,7 +499,7 @@ export interface IGaugeChartSegment { size: number; } -// @public (undocumented) +// @public export interface IGaugeChartStyleProps { chartHeight?: number; chartValueSize?: number; @@ -510,7 +510,7 @@ export interface IGaugeChartStyleProps { toDrawShape?: boolean; } -// @public (undocumented) +// @public export interface IGaugeChartStyles { calloutBlockContainer?: IStyle; calloutContentRoot?: IStyle; @@ -561,11 +561,11 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { styles?: IStyleFunctionOrObject; } -// @public (undocumented) +// @public export interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles { barLabel: IStyle; opacityChangeOnHover: IStyle; @@ -638,11 +638,11 @@ export interface IHeatMapChartProps extends Pick string; } -// @public (undocumented) +// @public export interface IHeatMapChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface IHeatMapChartStyles { // (undocumented) root?: IStyle; @@ -674,7 +674,7 @@ export interface IHorizontalBarChartProps { width?: number; } -// @public (undocumented) +// @public export interface IHorizontalBarChartStyleProps { barHeight?: number; className?: string; @@ -686,7 +686,7 @@ export interface IHorizontalBarChartStyleProps { width: number | undefined; } -// @public (undocumented) +// @public export interface IHorizontalBarChartStyles { barLabel: IStyle; barWrapper: IStyle; @@ -729,12 +729,12 @@ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { yAxisPadding?: number; } -// @public (undocumented) +// @public export interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps { legendColor?: string; } -// @public (undocumented) +// @public export interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles { chartLabel?: IStyle; opacityChangeOnHover: IStyle; @@ -773,7 +773,7 @@ export interface ILegendDataItem { legendText: string | number; } -// @public +// @public (undocumented) export interface ILegendOverflowData { // (undocumented) overflow?: ILegend[]; @@ -781,7 +781,7 @@ export interface ILegendOverflowData { primary: ILegend[]; } -// @public (undocumented) +// @public export interface ILegendsProps { allowFocusOnLegends?: boolean; canSelectMultipleLegends?: boolean; @@ -812,7 +812,7 @@ export interface ILegendsStyles { triangle: IStyle; } -// @public (undocumented) +// @public export interface ILegendStyleProps { // (undocumented) borderColor?: string; @@ -832,7 +832,7 @@ export interface ILegendStyleProps { theme?: ITheme; } -// @public +// @public (undocumented) export interface ILegendSubComponentStyles { // (undocumented) hoverCardStyles: IStyleFunctionOrObject; @@ -899,11 +899,11 @@ export interface ILineChartProps extends ICartesianChartProps { styles?: IStyleFunctionOrObject; } -// @public (undocumented) +// @public export interface ILineChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface ILineChartStyles extends ICartesianChartStyles { } @@ -1015,7 +1015,7 @@ export interface IMultiStackedBarChartProps { width?: number; } -// @public (undocumented) +// @public export interface IMultiStackedBarChartStyleProps { barHeight?: number; className?: string; @@ -1028,7 +1028,7 @@ export interface IMultiStackedBarChartStyleProps { width?: number; } -// @public (undocumented) +// @public export interface IMultiStackedBarChartStyles { barLabel: IStyle; chart: IStyle; @@ -1064,10 +1064,10 @@ export interface IPieChartProps { width?: number; } -// @public (undocumented) +// @public export type IPieChartStyleProps = Required> & Pick; -// @public (undocumented) +// @public export interface IPieChartStyles { chart?: IStyle; chartTitle?: IStyle; @@ -1105,7 +1105,7 @@ export interface ISankeyChartProps { width?: number; } -// @public (undocumented) +// @public export interface ISankeyChartStyleProps { // (undocumented) className?: string; @@ -1119,7 +1119,7 @@ export interface ISankeyChartStyleProps { width: number; } -// @public (undocumented) +// @public export interface ISankeyChartStyles { calloutContentRoot?: IStyle; links?: IStyle; @@ -1158,7 +1158,7 @@ export interface ISparklineProps { export interface ISparklineStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface ISparklineStyles { // (undocumented) inlineBlock?: IStyle; @@ -1197,7 +1197,7 @@ export interface IStackedBarChartProps { width?: number; } -// @public (undocumented) +// @public export interface IStackedBarChartStyleProps { barHeight?: number; benchmarkColor?: string; @@ -1214,7 +1214,7 @@ export interface IStackedBarChartStyleProps { width?: number; } -// @public (undocumented) +// @public export interface IStackedBarChartStyles { benchmark: IStyle; benchmarkContainer: IStyle; @@ -1229,7 +1229,7 @@ export interface IStackedBarChartStyles { target: IStyle; } -// @public +// @public (undocumented) export interface ITreeChartDataPoint { bodytext?: string; children?: Array; @@ -1253,7 +1253,7 @@ export interface ITreeDataStructure { y: number; } -// @public (undocumented) +// @public export interface ITreeProps { className?: string; composition?: NodesComposition.long | NodesComposition.compact; @@ -1274,13 +1274,13 @@ export interface ITreeState { _width: number; } -// @public (undocumented) +// @public export interface ITreeStyleProps { className?: string; theme: ITheme; } -// @public (undocumented) +// @public export interface ITreeStyles { link: IStyle; rectBodyText: IStyle; @@ -1321,12 +1321,12 @@ export interface IVerticalBarChartProps extends ICartesianChartProps { xAxisPadding?: number; } -// @public (undocumented) +// @public export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps { legendColor?: string; } -// @public (undocumented) +// @public export interface IVerticalBarChartStyles extends ICartesianChartStyles { barLabel: IStyle; // @deprecated @@ -1370,11 +1370,11 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { yMinValue?: undefined; } -// @public (undocumented) +// @public export interface IVerticalStackedBarChartStyleProps extends ICartesianChartStyleProps { } -// @public (undocumented) +// @public export interface IVerticalStackedBarChartStyles extends ICartesianChartStyles { barLabel: IStyle; // @deprecated diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts index 8c7cc4d33ac8f0..e24375f5a23608 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts +++ b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts @@ -18,7 +18,7 @@ import { export type { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins }; /** - * IAreaChartProps properties for area chart. + * Area Chart properties. * {@docCategory AreaChart} */ export interface IAreaChartProps extends ICartesianChartProps { @@ -66,6 +66,14 @@ export interface IAreaChartProps extends ICartesianChartProps { optimizeLargeData?: boolean; } +/** + * Area Chart styles + * {@docCategory AreaChart} + */ export interface IAreaChartStyles extends ICartesianChartStyles {} +/** + * Area Chart style properties + * {@docCategory AreaChart} + */ export interface IAreaChartStyleProps extends ICartesianChartStyleProps {} diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.tsx index 68d8e9257520cd..7e801e32f71e3a 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.tsx @@ -4,6 +4,10 @@ import { IModifiedCartesianChartProps, ICartesianChartStyleProps, ICartesianChar import { CartesianChartBase } from './CartesianChart.base'; import { getStyles } from './CartesianChart.styles'; +/** + * Cartesian Chart component + * {@docCategory CartesianChart} + */ export const CartesianChart: React.FunctionComponent = styled< IModifiedCartesianChartProps, ICartesianChartStyleProps, diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 44ba758aea6434..096d6c012596f8 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -9,6 +9,10 @@ import { IAccessibilityProps, IMargins } from '../../types/index'; import { ChartTypes, IChartHoverCardProps, XAxisTypes, YAxisType } from '../../utilities/index'; import * as d3TimeFormat from 'd3-time-format'; +/** + * Cartesian Chart style properties + * {@docCategory CartesianChart} + */ export interface ICartesianChartStyleProps { /** * Theme (provided through customization.) @@ -61,6 +65,10 @@ export interface ICartesianChartStyleProps { toDrawShape?: boolean; } +/** + * Cartesian Chart styles + * {@docCategory CartesianChart} + */ export interface ICartesianChartStyles { /** * Style for the root element. @@ -158,6 +166,10 @@ export interface ICartesianChartStyles { chartWrapper?: IStyle; } +/** + * Cartesian Chart properties + * {@docCategory CartesianChart} + */ export interface ICartesianChartProps { /** * Below height used for resizing of the chart diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.types.ts b/packages/react-charting/src/components/DonutChart/DonutChart.types.ts index f666602961faaf..d27805815a29d8 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.types.ts +++ b/packages/react-charting/src/components/DonutChart/DonutChart.types.ts @@ -7,7 +7,7 @@ import { IChartProps, IChartDataPoint } from './index'; export interface IDonutChart {} /** - * IDonutChartProps for Donutchart component. + * Donut Chart properties. * {@docCategory DonutChart} */ export interface IDonutChartProps extends ICartesianChartProps { @@ -59,8 +59,16 @@ export interface IDonutChartProps extends ICartesianChartProps { hideLabels?: boolean; } +/** + * Donut Chart style properties + * {@docCategory DonutChart} + */ export interface IDonutChartStyleProps extends ICartesianChartStyleProps {} +/** + * Donut Chart styles + * {@docCategory DonutChart} + */ export interface IDonutChartStyles { /** * Style for the root element. diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 1137c490b34b43..58e8f6eaa5b68e 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts @@ -5,7 +5,7 @@ import { IAccessibilityProps } from '../../types/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; /** - * IGaugeChartSegment interface for Gaugechart. + * Gauge Chart segment interface. * {@docCategory GaugeChart} */ export interface IGaugeChartSegment { @@ -30,13 +30,16 @@ export interface IGaugeChartSegment { accessibilityData?: IAccessibilityProps; } +/** + * {@docCategory GaugeChart} + */ export enum GaugeValueFormat { Percentage = 'percentage', Fraction = 'fraction', } /** - * IGaugeChartProps for Gaugechart component. + * Gauge Chart properties * {@docCategory GaugeChart} */ export interface IGaugeChartProps { @@ -136,6 +139,10 @@ export interface IGaugeChartProps { calloutProps?: Partial; } +/** + * Gauge Chart style properties + * {@docCategory GaugeChart} + */ export interface IGaugeChartStyleProps { /** * Theme (provided through customization) @@ -173,6 +180,10 @@ export interface IGaugeChartStyleProps { toDrawShape?: boolean; } +/** + * Gauge Chart styles + * {@docCategory GaugeChart} + */ export interface IGaugeChartStyles { /** * Styles for the root element diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx index e580d75c132244..595d98e6790845 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx @@ -9,7 +9,7 @@ import { } from '../../index'; /** - * IGroupedVerticalBarChartProps for GroupedVerticalBarchart component. + * Grouped Vertical Bar Chart properties * {@docCategory GroupedVerticalBarChart} */ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { @@ -92,8 +92,16 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { hideLabels?: boolean; } +/** + * Grouped Vertical Bar Chart style properties + * {@docCategory GroupedVerticalBarChart} + */ export interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps {} +/** + * Grouped Vertical Bar Chart styles + * {@docCategory GroupedVerticalBarChart} + */ export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles { /** * Style to change the opacity of bars in dataviz when we hover on a single bar or legends diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index ea7cd3fd8bed78..178f3aa7dfa378 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts @@ -10,7 +10,7 @@ import { ILegendsProps } from '../Legends/Legends.types'; import { IHeatMapChartData } from '../../types/IDataPoint'; /** - * IHeatMapChartProps for HeatMapchart component. + * Heat Map Chart properties * {@docCategory HeatMapChart} */ export interface IHeatMapChartProps extends Pick> { @@ -109,7 +109,17 @@ export interface IHeatMapChartProps extends Pick = styled( diff --git a/packages/react-charting/src/components/Legends/Legends.types.ts b/packages/react-charting/src/components/Legends/Legends.types.ts index ada8b08a636f19..128fbdafeac09f 100644 --- a/packages/react-charting/src/components/Legends/Legends.types.ts +++ b/packages/react-charting/src/components/Legends/Legends.types.ts @@ -6,11 +6,6 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { CustomPoints, Points } from '../../utilities/utilities'; -/** - * @public - * ILegendOverflowData interface. - * {@docCategory Legends} - */ export interface ILegendOverflowData { primary: ILegend[]; @@ -19,7 +14,6 @@ export interface ILegendOverflowData { /** * @public - * ILegendSubComponentStyles interface. * {@docCategory Legends} */ export interface ILegendSubComponentStyles { @@ -28,7 +22,7 @@ export interface ILegendSubComponentStyles { /** * @public - * ILegendsStyles interface. + * Legends styles * {@docCategory Legends} */ export interface ILegendsStyles { @@ -85,7 +79,7 @@ export interface ILegendsStyles { /** * @public - * ILegendsStyles interface. + * ILegend interface * {@docCategory Legends} */ export interface ILegend { @@ -140,6 +134,11 @@ export interface ILegend { nativeButtonProps?: React.ButtonHTMLAttributes; } +/** + * @public + * Legend style properties + * {@docCategory Legends} + */ export interface ILegendStyleProps { theme?: ITheme; className?: string; @@ -151,6 +150,11 @@ export interface ILegendStyleProps { isLineLegendInBarChart?: boolean; } +/** + * @public + * Legend properties + * {@docCategory Legends} + */ export interface ILegendsProps { /** * Prop that takes list of legends @@ -223,8 +227,10 @@ export interface ILegendsProps { } /** + * @public * The shape for the legend * default: show the rect legend * triangle: show the triangle legend + * {@docCategory Legends} */ export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints; diff --git a/packages/react-charting/src/components/LineChart/LineChart.tsx b/packages/react-charting/src/components/LineChart/LineChart.tsx index 03db6799f93470..b1a446408d46b8 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.tsx @@ -6,7 +6,7 @@ import { getStyles } from './LineChart.styles'; // Create a LineChart variant which uses these default styles and this styled subcomponent. /** - * Linechart component. + * Linechart component * {@docCategory LineChart} */ export const LineChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/LineChart/LineChart.types.ts b/packages/react-charting/src/components/LineChart/LineChart.types.ts index cdb19edbc5d803..a971cf3dba9f7a 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.types.ts +++ b/packages/react-charting/src/components/LineChart/LineChart.types.ts @@ -18,7 +18,7 @@ import { export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData }; /** - * ILineChartProps properties for line chart. + * Line Chart properties * {@docCategory LineChart} */ export interface ILineChartProps extends ICartesianChartProps { @@ -88,6 +88,10 @@ export interface ILineChartProps extends ICartesianChartProps { */ enablePerfOptimization?: boolean; } + +/** + * {@docCategory LineChart} + */ export interface IEventsAnnotationProps { events: IEventAnnotation[]; strokeColor?: string; @@ -97,10 +101,21 @@ export interface IEventsAnnotationProps { mergedLabel: (count: number) => string; } +/** + * Line Chart styles + * {@docCategory LineChart} + */ export interface ILineChartStyles extends ICartesianChartStyles {} +/** + * Line Chart style properties + * {@docCategory LineChart} + */ export interface ILineChartStyleProps extends ICartesianChartStyleProps {} +/** + * {@docCategory LineChart} + */ export interface IColorFillBarsProps { legend: string; color: string; @@ -109,6 +124,9 @@ export interface IColorFillBarsProps { onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined; } +/** + * {@docCategory LineChart} + */ export interface IColorFillBarData { startX: number | Date; endX: number | Date; diff --git a/packages/react-charting/src/components/PieChart/PieChart.tsx b/packages/react-charting/src/components/PieChart/PieChart.tsx index be9d54af4d556a..df8ad99566f34e 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.tsx +++ b/packages/react-charting/src/components/PieChart/PieChart.tsx @@ -6,7 +6,7 @@ import { getStyles } from './PieChart.styles'; // Create a PieChart variant which uses these default styles and this styled subcomponent. /** - * Piechart component. + * Piechart component * {@docCategory PieChart} */ export const PieChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/PieChart/PieChart.types.ts b/packages/react-charting/src/components/PieChart/PieChart.types.ts index 8a611cfbcc9e20..5d06bcde632a75 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.types.ts +++ b/packages/react-charting/src/components/PieChart/PieChart.types.ts @@ -5,7 +5,7 @@ export type { IDataPoint } from '../../types/IDataPoint'; export interface IPieChart {} /** - * IPieChartProps for Piechart component. + * Pie Chart properties * {@docCategory PieChart} */ export interface IPieChartProps { @@ -60,8 +60,17 @@ export interface IPieChartProps { culture?: string; } +/** + * Pie Chart style properties + * {@docCategory PieChart} + */ export type IPieChartStyleProps = Required> & Pick; + +/** + * Pie Chart styles + * {@docCategory PieChart} + */ export interface IPieChartStyles { /** * Style for the root element. diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx index 276f6f7420fbbd..967b0f7759fefa 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx @@ -6,7 +6,7 @@ import { getStyles } from './SankeyChart.styles'; // Create a SankeyChart variant which uses these default styles and this styled subcomponent. /** - * Sankeychart component. + * Sankeychart component * {@docCategory SankeyChart} */ export const SankeyChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts index f2193f0bbd6d06..c6ce26bd433d62 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts @@ -5,7 +5,7 @@ import { IChartProps } from '../../types/IDataPoint'; export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint'; /** - * ISankeyChartProps for Sankeychart component. + * Sankey Chart properties * {@docCategory SankeyChart} */ export interface ISankeyChartProps { @@ -65,6 +65,10 @@ export interface ISankeyChartProps { borderColorsForNodes?: string[]; } +/** + * Sankey Chart style properties + * {@docCategory SankeyChart} + */ export interface ISankeyChartStyleProps { theme: ITheme; className?: string; @@ -73,6 +77,10 @@ export interface ISankeyChartStyleProps { pathColor?: string; } +/** + * Sankey Chart styles + * {@docCategory SankeyChart} + */ export interface ISankeyChartStyles { /** * Style for the root element. diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.tsx index 5247351bc48704..a45d693c76226d 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.tsx +++ b/packages/react-charting/src/components/Sparkline/Sparkline.tsx @@ -6,7 +6,7 @@ import { getStyles } from './Sparkline.styles'; // Create a Sparkline variant which uses these default styles and this styled subcomponent. /** - * Sparkline component. + * Sparkline component * {@docCategory Sparkline} */ export const Sparkline: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts index 638eb98cd1f48a..3054b83c04b62d 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts +++ b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts @@ -6,8 +6,8 @@ import { ICartesianChartStyleProps } from '../CommonComponents/index'; export interface ISparklineStyleProps extends ICartesianChartStyleProps {} /** - * ISparklineProps for Sparkline component. - * {@docCategory Sparkline} + * Sparkline properties + * {@docCategory SparklineChart} */ export interface ISparklineProps { /** @@ -59,6 +59,10 @@ export interface ISparklineProps { styles?: IStyleFunctionOrObject; } +/** + * Sparkline styles + * {@docCategory SparklineChart} + */ export interface ISparklineStyles { inlineBlock?: IStyle; valueText?: IStyle; diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx index 8de472c311df2c..6be7fad85a54d6 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx @@ -10,7 +10,7 @@ import { getMultiStackedBarChartStyles } from './MultiStackedBarChart.styles'; // Create a MultiStackedBarChart variant which uses these default styles and this styled subcomponent. /** - * MultiStackedBarchart component. + * MultiStackedBarchart component * {@docCategory MultiStackedBarChart} */ export const MultiStackedBarChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts index 5d19142a79975a..4db3c2fa127455 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts @@ -7,7 +7,7 @@ import { IFocusZoneProps } from '@fluentui/react-focus'; import { ILegendsProps } from '../Legends/index'; /** - * IMultiStackedBarChartProps for MultiStackedBarchart component. + * Multi Stacked Bar Chart properties * {@docCategory MultiStackedBarChart} */ export interface IMultiStackedBarChartProps { @@ -121,6 +121,10 @@ export interface IMultiStackedBarChartProps { hideLabels?: boolean; } +/** + * Multi Stacked Bar Chart style properties + * {@docCategory MultiStackedBarChart} + */ export interface IMultiStackedBarChartStyleProps { /** * Theme (provided through customization.) @@ -168,6 +172,10 @@ export interface IMultiStackedBarChartStyleProps { hideLabels?: boolean; } +/** + * Multi Stacked Bar Chart styles + * {@docCategory MultiStackedBarChart} + */ export interface IMultiStackedBarChartStyles { /** * Styling for the root container @@ -240,6 +248,9 @@ export interface IMultiStackedBarChartStyles { chartWrapper: IStyle; } +/** + * {@docCategory MultiStackedBarChart} + */ export enum MultiStackedBarChartVariant { PartToWhole = 'part-to-whole', AbsoluteScale = 'absolute-scale', diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx index d507c15a664c14..8fee85a65d466e 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx @@ -6,7 +6,7 @@ import { getStyles } from './StackedBarChart.styles'; // Create a StackedBarChart variant which uses these default styles and this styled subcomponent. /** - * StackedBarchart component. + * StackedBarchart component * {@docCategory StackedBarChart} */ export const StackedBarChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts index 51db359ed381e0..26991185919f70 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts @@ -9,7 +9,7 @@ export interface IStackedBarChart {} import { IChartProps, IChartDataPoint } from './index'; /** - * IStackedBarChartProps for StackedBarchart component. + * Stacked Bar Chart properties * {@docCategory StackedBarChart} */ export interface IStackedBarChartProps { @@ -136,6 +136,10 @@ export interface IStackedBarChartProps { culture?: string; } +/** + * Stacked Bar Chart style properties + * {@docCategory StackedBarChart} + */ export interface IStackedBarChartStyleProps { /** * Theme (provided through customization.) @@ -203,6 +207,10 @@ export interface IStackedBarChartStyleProps { showTriangle?: boolean; } +/** + * Stacked Bar Chart styles + * {@docCategory StackedBarChart} + */ export interface IStackedBarChartStyles { /** * Style for the root element. diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.tsx b/packages/react-charting/src/components/TreeChart/TreeChart.tsx index 176192efc7fc7c..2f8aac0aeabf6c 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.tsx +++ b/packages/react-charting/src/components/TreeChart/TreeChart.tsx @@ -5,7 +5,7 @@ import { TreeChartBase } from './TreeChart.base'; import { getStyles } from './TreeChart.styles'; /** - * Treechart component. + * Treechart component * {@docCategory TreeChart} */ export const TreeChart: React.FunctionComponent = styled( diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts index 4a4e97aabfed8c..bee3553076eb1e 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts +++ b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts @@ -3,7 +3,6 @@ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; import { IMargins } from '../../types/index'; /** - * ITreeChartDataPoint interface for Treechart component. * {@docCategory TreeChart} */ export interface ITreeChartDataPoint { @@ -33,6 +32,9 @@ export interface ITreeChartDataPoint { children?: Array; } +/** + * {@docCategory TreeChart} + */ export enum NodesComposition { /** * NodeComposition enum val for long: number = 1 @@ -44,6 +46,9 @@ export enum NodesComposition { compact = 0, } +/** + * {@docCategory TreeChart} + */ export enum TreeTraverse { /** * TreeTraverse enum val for preOrder: number = 1 @@ -55,6 +60,10 @@ export enum TreeTraverse { levelOrder = 0, } +/** + * Tree Chart properties + * {@docCategory TreeChart} + */ export interface ITreeProps { /** * An object of chart data points for the Tree chart @@ -103,6 +112,7 @@ export interface ITreeProps { */ theme?: ITheme; } + export interface ITreeState { /** * Width of SVG tree chart @@ -164,6 +174,10 @@ export interface ITreeDataStructure { parentID: number; } +/** + * Tree Chart style properties + * {@docCategory TreeChart} + */ export interface ITreeStyleProps { /** * Theme (provided through customization.) @@ -174,6 +188,11 @@ export interface ITreeStyleProps { */ className?: string; } + +/** + * Tree Chart styles + * {@docCategory TreeChart} + */ export interface ITreeStyles { /** * Style for the root element. diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx index 4065b60be0edb8..5eba9002507e5a 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -6,7 +6,7 @@ import { getStyles } from './VerticalBarChart.styles'; // Create a VerticalBarChart variant which uses these default styles and this styled subcomponent. /** - * VerticalBarchart component. + * VerticalBarchart component * {@docCategory VerticalBarChart} */ export const VerticalBarChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts index 094624c326a182..5fbf6eb94cb0fa 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts @@ -9,7 +9,7 @@ import { import { ILineChartLineOptions } from '../../types/index'; /** - * IVerticalBarChartProps for VerticalBarchart component. + * Vertical Bar Chart properties * {@docCategory VerticalBarChart} */ export interface IVerticalBarChartProps extends ICartesianChartProps { @@ -85,6 +85,10 @@ export interface IVerticalBarChartProps extends ICartesianChartProps { hideLabels?: boolean; } +/** + * Vertical Bar Chart style properties + * {@docCategory VerticalBarChart} + */ export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps { /** * color of the datapoint legend @@ -92,6 +96,10 @@ export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps { legendColor?: string; } +/** + * Vertical Bar Chart styles + * {@docCategory VerticalBarChart} + */ export interface IVerticalBarChartStyles extends ICartesianChartStyles { /** * Style for the chart label. diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx index 0617d0e3d0f47d..6299d636c55e3f 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx @@ -10,7 +10,7 @@ import { getStyles } from './VerticalStackedBarChart.styles'; // Create a VerticalStackedBarChart variant which uses these default styles and this styled subcomponent. /** - * VerticalStackedBarchart component. + * VerticalStackedBarchart component * {@docCategory VerticalStackedBarChart} */ export const VerticalStackedBarChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts index ab6b67f554d991..6f4b6b6901cb61 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts @@ -12,7 +12,7 @@ import { } from '../../index'; /** - * IVerticalStackedBarChartProps for VerticalStackedBarchart component. + * Vertical Stacked Bar Chart properties * {@docCategory VerticalStackedBarChart} */ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { @@ -124,8 +124,16 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { hideLabels?: boolean; } +/** + * Vertical Stacked Bar Chart style properties + * {@docCategory VerticalStackedBarChart} + */ export interface IVerticalStackedBarChartStyleProps extends ICartesianChartStyleProps {} +/** + * Vertical Stacked Bar Chart styles + * {@docCategory VerticalStackedBarChart} + */ export interface IVerticalStackedBarChartStyles extends ICartesianChartStyles { /** * Style to change the opacity of bars in dataviz when we hover on a single bar or legends diff --git a/packages/react-charting/src/types/IDataPoint.ts b/packages/react-charting/src/types/IDataPoint.ts index 4ca3236c469d71..6fd921900eb63b 100644 --- a/packages/react-charting/src/types/IDataPoint.ts +++ b/packages/react-charting/src/types/IDataPoint.ts @@ -29,6 +29,9 @@ export interface IRefArrayData { refElement?: SVGGElement; } +/** + * {@docCategory IChartProps} + */ export interface IMargins { /** * left margin for the chart. @@ -48,6 +51,9 @@ export interface IMargins { bottom?: number; } +/** + * {@docCategory IChartData} + */ export interface IDataPoint { /** * Independent value of the data point, rendered along the x-axis. @@ -68,6 +74,9 @@ export interface IDataPoint { onClick?: VoidFunction; } +/** + * {@docCategory IChartData} + */ export interface IHorizontalDataPoint { /** * Independent value of the data point, rendered along the x-axis. @@ -82,6 +91,9 @@ export interface IHorizontalDataPoint { y: number; } +/** + * {@docCategory IChartData} + */ export interface IChartDataPoint { /** * Legend text for the datapoint in the chart @@ -131,6 +143,9 @@ export interface IChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface IVerticalBarChartDataPoint { /** * Independent value of the data point, rendered along the x-axis. @@ -182,6 +197,9 @@ export interface IVerticalBarChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface IHorizontalBarChartWithAxisDataPoint { /** * Dependent value of the data point, rendered along the x-axis. @@ -228,6 +246,9 @@ export interface IHorizontalBarChartWithAxisDataPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface ILineDataInVerticalBarChart { y: IVerticalBarChartDataPoint['y']; yAxisCalloutData?: string | undefined; @@ -243,6 +264,9 @@ export interface ILineDataInVerticalBarChart { useSecondaryYScale?: boolean; } +/** + * {@docCategory IChartData} + */ export interface ILineChartDataPoint { /** * Independent value of the data point, rendered along the x-axis. @@ -287,6 +311,9 @@ export interface ILineChartDataPoint { xAxisCalloutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface ILineChartGap { /** * Starting index of the gap. @@ -299,6 +326,9 @@ export interface ILineChartGap { endIndex: number; } +/** + * {@docCategory IChartProps} + */ export interface ILineChartLineOptions extends SVGProps { /** * Width of the line/stroke. @@ -337,6 +367,9 @@ export interface ILineChartLineOptions extends SVGProps { lineBorderColor?: string; } +/** + * {@docCategory IChartData} + */ export interface ILineChartPoints { /** * Legend text for the datapoint in the chart @@ -390,6 +423,9 @@ export interface ILineChartPoints { onLineClick?: () => void; } +/** + * {@docCategory IChartProps} + */ export interface IChartProps { /** * chart title for the chart @@ -431,6 +467,9 @@ export interface IChartProps { pointLineOptions?: SVGProps; } +/** + * {@docCategory IChartData} + */ export interface ISankeyChartData { nodes: SNode[]; links: SLink[]; @@ -455,6 +494,9 @@ interface ISLinkExtra { export type SNode = d3Sankey.SankeyNode; export type SLink = d3Sankey.SankeyLink; +/** + * {@docCategory IChartProps} + */ export interface IAccessibilityProps { /** * Accessibility aria-label @@ -472,6 +514,9 @@ export interface IAccessibilityProps { ariaDescribedBy?: string; } +/** + * {@docCategory IChartData} + */ export interface IVSChartDataPoint { /** * data the datapoint in the chart @@ -506,6 +551,9 @@ export interface IVSChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartProps} + */ export interface IVerticalStackedChartProps { /** * data for the points in the chart @@ -532,6 +580,9 @@ export interface IVerticalStackedChartProps { stackCallOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface ILineDataInVerticalStackedBarChart { y: number; color: string; @@ -548,6 +599,9 @@ export interface ILineDataInVerticalStackedBarChart { useSecondaryYScale?: boolean; } +/** + * {@docCategory IChartData} + */ export interface IGVBarChartSeriesPoint { /** * Text for // need to check use of this @@ -592,6 +646,9 @@ export interface IGVBarChartSeriesPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface IGroupedVerticalBarChartData { /** * Data for X axis label @@ -633,6 +690,9 @@ export interface IGVForBarChart { [key: string]: IGVBarChartSeriesPoint; } +/** + * {@docCategory IChartData} + */ export interface IHeatMapChartDataPoint { x: string | Date | number; y: string | Date | number; @@ -660,6 +720,9 @@ export interface IHeatMapChartDataPoint { callOutAccessibilityData?: IAccessibilityProps; } +/** + * {@docCategory IChartData} + */ export interface IHeatMapChartData { /** * name of the legend @@ -672,6 +735,9 @@ export interface IHeatMapChartData { value: number; } +/** + * {@docCategory IChartData} + */ export interface ICustomizedCalloutDataPoint { legend: string; y: number; @@ -683,6 +749,7 @@ export interface ICustomizedCalloutDataPoint { /** * Used for custom callout data interface. As Area chart callout data will be prepared from given props.data, * Those required data passing to onRenderCalloutPerDataPoint and onRenderCalloutPerStack. + * {@docCategory IChartData} */ export interface ICustomizedCalloutData { x: number | string | Date; diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx index 7b9d90efa19a03..939ab29af25432 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx @@ -35,7 +35,7 @@ export const AreaChartPageProps: IDocPageProps = { view: , }, { - title: 'Multiple Area chart', + title: 'Stacked Area chart', code: AreaChartMultipleExampleCode, view: , }, diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index 943bd52a58e053..1be17dc3fa3eca 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx @@ -144,6 +144,11 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; return ( <> +

+ In this example the xAxisCalloutData property overrides the x value that is shown on the callout. + So instead of a numeric value, the callout will show the date that is passed in the{' '} + xAxisCalloutData property. +

props ? ( , - //}, + { + title: 'MultiStackedBarChart N/M', + code: MultiStackedBarChartBasicExampleCode, + view: , + }, { title: 'MultiStackedBarChart absolute scale', code: MultiStackedBarChartVariantExampleCode, view: , }, { - title: 'MultiStackedBarChart placeholder', + title: 'MultiStackedBarChart with placeholder', code: MultiStackedBarChartWithPlaceholderExampleCode, view: , }, diff --git a/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx index 17f82f98e7a030..6e85ebb7f14fc2 100644 --- a/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx @@ -340,7 +340,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt - +
Row 1 diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx index b24f5fd38ac75f..244ddc39c829ae 100644 --- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx +++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx @@ -2,44 +2,28 @@ import * as React from 'react'; import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; -import { TreeChartTwoLayerExample } from './TreeChart.TwoLayer.Example'; -import { TreeChartThreeLayerLongExample } from './TreeChart.ThreeLayerLong.Example'; -import { TreeChartThreeLayerCompactExample } from './TreeChart.ThreeLayerCompact.Example'; -import { TreeChartThreeLayerExample } from './TreeChart.ThreeLayer.Example'; +import { TreeChartThreeLayerDocSiteExample } from './TreeChart.ThreeLayerDocSite.Example'; +import { TreeChartThreeLayerCompactDocSiteExample } from './TreeChart.ThreeLayerCompactDocSite.Example'; -const TreeChartTwoLayerExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.TwoLayer.Example.tsx') as string; -const TreeChartThreeLayerLongExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerLong.Example.tsx') as string; -const TreeChartThreeLayerCompactExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompact.Example.tsx') as string; -const TreeChartThreeLayerExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx') as string; +const TreeChartThreeLayerDocSiteExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerDocSite.Example.tsx') as string; +const TreeChartThreeLayerCompactDocSiteExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayerCompactDocSite.Example.tsx') as string; export const TreeChartPageProps: IDocPageProps = { title: 'TreeChart', componentName: 'TreeChart', componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/TreeChart', examples: [ - { - title: 'TreeChart two layer', - code: TreeChartTwoLayerExampleCode, - view: , - }, { title: 'TreeChart three layer', - code: TreeChartThreeLayerExampleCode, - view: , - }, - { - title: 'TreeChart three layer long variant', - code: TreeChartThreeLayerLongExampleCode, - view: , + code: TreeChartThreeLayerDocSiteExampleCode, + view: , }, { - title: 'TreeChart three layer compact variant', - code: TreeChartThreeLayerCompactExampleCode, - view: , + title: 'TreeChart three layer compact', + code: TreeChartThreeLayerCompactDocSiteExampleCode, + view: , }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md'), diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx index 97576367564442..fd0748d247fb6c 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx @@ -170,6 +170,11 @@ export class VerticalBarChartBasicExample extends React.Component +

+ In this example the xAxisCalloutData property overrides the x value that is shown on the callout. + So instead of a numeric value, the callout will show the date that is passed in the{' '} + xAxisCalloutData property. +

, }, - /*{ ToDo - Fix this example + { title: 'VerticalStackedBarChart tooltip', code: VerticalBarChartTooltipExampleCode, view: , @@ -50,7 +49,7 @@ export const VerticalStackedBarChartPageProps: IDocPageProps = { title: 'VerticalStackedBarChart custom accessibility', code: VerticalBarChartCustomAccessibilityExampleCode, view: , - },*/ + }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md'),