From 9d850bc0bfa973f790c84063dab5d53dcbb9f447 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 7 Jun 2023 20:26:42 +0530 Subject: [PATCH 01/61] Add charting legend to docsite --- apps/public-docsite-resources/src/AppDefinition.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 4ef5cd5336438..9b8ced03f4c40 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { IAppDefinition, IAppLink, ApiReferencesTableSet } from '@fluentui/react-docsite-components'; import { DetailsListBasicExample } from '@fluentui/react-examples/lib/react/DetailsList/DetailsList.Basic.Example'; +import { LegendsPage } from '@fluentui/react-examples/lib/react-charting/Legends/LegendsPage'; import { mergeStyles } from '@fluentui/react/lib/Styling'; import { AppThemes } from './theme/AppThemes'; @@ -516,6 +517,17 @@ export const AppDefinition: IAppDefinition = { }, ], }, + { + name: 'Charting', + links: [ + { + component: LegendsPage, + key: 'Legends', + name: 'Legends', + url: '#/examples/Legends', + }, + ], + }, { name: 'Utilities', links: [ From 53ca859c6a79a6f360a40d0b3b9d7f2788c47dae Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 29 Jun 2023 18:26:22 +0530 Subject: [PATCH 02/61] Enable legends in fluent docsite --- .../config/api-docs.js | 2 ++ apps/public-docsite-resources/package.json | 1 + .../SiteDefinition.pages/Controls/web.tsx | 3 +++ .../Controls/LegendsPage/LegendsPage.doc.ts | 8 +++++++ .../Controls/LegendsPage/LegendsPage.tsx | 7 ++++++ .../src/components/Legends/Legends.tsx | 3 +++ .../src/components/Legends/Legends.types.ts | 8 +++++++ .../react-charting/Legends/Legends.doc.tsx | 24 +++++++++++++++++++ .../Legends/docs/LegendsBestPractices.md | 4 ++++ .../Legends/docs/LegendsOverview.md | 3 +++ 10 files changed, 63 insertions(+) create mode 100644 apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx create mode 100644 packages/react-examples/src/react-charting/Legends/Legends.doc.tsx create mode 100644 packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md create mode 100644 packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index b3041f7ac06d9..d18af504d4196 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -12,6 +12,7 @@ module.exports = { apiJsonPaths: [ 'packages/react', ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react'), dev: false }).map(dep => dep.packagePath), + ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react-charting'), dev: false }).map(dep => dep.packagePath), ] .map(packagePath => path.join(gitRoot, packagePath, 'dist', path.basename(packagePath) + '.api.json')) .filter(apiJsonPath => fs.existsSync(apiJsonPath)), @@ -88,6 +89,7 @@ module.exports = { 'TimePicker', 'Toggle', 'Tooltip', + 'Legends', ], }, }; diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 451c5630fbdaf..b717d0327bab4 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -35,6 +35,7 @@ }, "dependencies": { "@fluentui/react": "^8.110.0", + "@fluentui/react-charting": "^5.16.39", "@fluentui/react-examples": "^8.34.4", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/azure-themes": "^8.6.14", diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 43ecb10e92b00..7845c9c1190bd 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -106,6 +106,9 @@ export const categories: { [name: string]: ICategory } = { ScrollablePane: {}, Tooltip: {}, }, + Charting: { + Legends: {}, + }, Utilities: { Announced: { subPages: { diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts new file mode 100644 index 0000000000000..4a1e6c5b70acd --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { LegendsPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; + +export const LegendsPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx new file mode 100644 index 0000000000000..0b9839e8d259d --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx @@ -0,0 +1,7 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { LegendsPageProps } from './LegendsPage.doc'; + +export const TimePickerPage: React.FunctionComponent = props => { + return ; +}; diff --git a/packages/react-charting/src/components/Legends/Legends.tsx b/packages/react-charting/src/components/Legends/Legends.tsx index 60a3530479570..8e643e8af41b3 100644 --- a/packages/react-charting/src/components/Legends/Legends.tsx +++ b/packages/react-charting/src/components/Legends/Legends.tsx @@ -4,6 +4,9 @@ import { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.type import { LegendsBase } from './Legends.base'; import { getStyles } from './Legends.styles'; +/** + * {@docCategory TimePicker} + */ export const Legends: React.FunctionComponent = styled( LegendsBase, getStyles, diff --git a/packages/react-charting/src/components/Legends/Legends.types.ts b/packages/react-charting/src/components/Legends/Legends.types.ts index 002654530ba0d..f764787521976 100644 --- a/packages/react-charting/src/components/Legends/Legends.types.ts +++ b/packages/react-charting/src/components/Legends/Legends.types.ts @@ -6,12 +6,20 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { CustomPoints, Points } from '../../utilities/utilities'; +/** + * {@docCategory Legends} + * ILegendOverflowData interface. + */ export interface ILegendOverflowData { primary: ILegend[]; overflow?: ILegend[]; } +/** + * {@docCategory Legends} + * ILegendSubComponentStyles interface. + */ export interface ILegendSubComponentStyles { hoverCardStyles: IStyleFunctionOrObject; } diff --git a/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx new file mode 100644 index 0000000000000..000e2a2416351 --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { LegendBasicExample } from './Legends.Basic.Example'; +const LegendsBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx') as string; + +export const LegendsPageProps: IDocPageProps = { + title: 'Legends', + componentName: 'Legends', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/Legends', + examples: [ + { + title: 'Legends basic', + code: LegendsBasicExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md new file mode 100644 index 0000000000000..96dcb8b153ee7 --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md @@ -0,0 +1,4 @@ +### Content + +Legend best practices content. +https://github.com/microsoft/fluentui/commit/7380b15b3c9997bad0e832fb17fade1b9db45aaf diff --git a/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md new file mode 100644 index 0000000000000..2aa2eb36ce6c3 --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md @@ -0,0 +1,3 @@ +A legend describes each of the component of the chart. The legends wrap based upon the space available for +them. If there is not enough space to show all legends on a single line, the legends fall into an overflow +menu. A button is shown to open the overflow menu and indicating the number of legends in it. From 9162e99ae04262576ee4b8c8f2d1b13a00eac4d1 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 30 Jun 2023 14:48:44 +0530 Subject: [PATCH 03/61] Remove charting entry in api-doc --- apps/public-docsite-resources/config/api-docs.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index d18af504d4196..4f55e63ab2a5c 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -12,7 +12,6 @@ module.exports = { apiJsonPaths: [ 'packages/react', ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react'), dev: false }).map(dep => dep.packagePath), - ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react-charting'), dev: false }).map(dep => dep.packagePath), ] .map(packagePath => path.join(gitRoot, packagePath, 'dist', path.basename(packagePath) + '.api.json')) .filter(apiJsonPath => fs.existsSync(apiJsonPath)), From 2f177c3800e6ddf7d1ac5b7027006b5053bde365 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 30 Jun 2023 15:02:18 +0530 Subject: [PATCH 04/61] Fix error in legends page --- .../src/pages/Controls/LegendsPage/LegendsPage.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx index 0b9839e8d259d..f35b7e66a7221 100644 --- a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx +++ b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx @@ -3,5 +3,6 @@ import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; import { LegendsPageProps } from './LegendsPage.doc'; export const TimePickerPage: React.FunctionComponent = props => { - return ; + const { platform } = props; + return ; }; From 954b2da587de7322f80f177a8c3cbe06fe3032bf Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 30 Jun 2023 16:50:21 +0530 Subject: [PATCH 05/61] Create documentation report --- .../react-charting/config/api-extractor.json | 3 + .../react-charting/etc/react-charting.api.md | 1511 +++++++++++++++++ packages/react-charting/package.json | 1 + 3 files changed, 1515 insertions(+) create mode 100644 packages/react-charting/config/api-extractor.json create mode 100644 packages/react-charting/etc/react-charting.api.md diff --git a/packages/react-charting/config/api-extractor.json b/packages/react-charting/config/api-extractor.json new file mode 100644 index 0000000000000..dd9d4b04ceb5a --- /dev/null +++ b/packages/react-charting/config/api-extractor.json @@ -0,0 +1,3 @@ +{ + "extends": "@fluentui/scripts-api-extractor/api-extractor.common.json" +} diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md new file mode 100644 index 0000000000000..614e3a6db9f2b --- /dev/null +++ b/packages/react-charting/etc/react-charting.api.md @@ -0,0 +1,1511 @@ +## API Report File for "@fluentui/react-charting" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import * as d3Sankey from 'd3-sankey'; +import * as d3TimeFormat from 'd3-time-format'; +import { FocusZoneDirection } from '@fluentui/react-focus'; +import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout'; +import { ICalloutContentStyles } from '@fluentui/react/lib/Callout'; +import { ICalloutProps } from '@fluentui/react/lib/Callout'; +import { IFocusZoneProps } from '@fluentui/react-focus'; +import { IHoverCardStyleProps } from '@fluentui/react/lib/HoverCard'; +import { IHoverCardStyles } from '@fluentui/react/lib/HoverCard'; +import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; +import { IRenderFunction } from '@fluentui/react/lib/Utilities'; +import { IStyle } from '@fluentui/react/lib/Styling'; +import { IStyle as IStyle_2 } from '@fluentui/react'; +import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +import { IStyleFunctionOrObject as IStyleFunctionOrObject_2 } from '@fluentui/react'; +import { ITheme } from '@fluentui/react/lib/Styling'; +import { ITheme as ITheme_2 } from '@fluentui/react'; +import * as React_2 from 'react'; +import { SVGProps } from 'react'; + +// @public (undocumented) +export const AreaChart: React_2.FunctionComponent; + +// @public (undocumented) +export const CartesianChart: React_2.FunctionComponent; + +// @public +export type ChartDataMode = 'default' | 'fraction' | 'percentage'; + +// @public (undocumented) +export const ChartHoverCard: React_2.FunctionComponent; + +// @public (undocumented) +export const DataVizPalette: { + color1: string; + color2: string; + color3: string; + color4: string; + color5: string; + color6: string; + color7: string; + color8: string; + color9: string; + color10: string; + color11: string; + color12: string; + color13: string; + color14: string; + color15: string; + color16: string; + color17: string; + color18: string; + color19: string; + color20: string; + color21: string; + color22: string; + color23: string; + color24: string; + color25: string; + color26: string; + color27: string; + color28: string; + color29: string; + color30: string; + color31: string; + color32: string; + color33: string; + color34: string; + color35: string; + color36: string; + color37: string; + color38: string; + color39: string; + color40: string; + info: string; + disabled: string; + highError: string; + error: string; + warning: string; + success: string; + highSuccess: string; +}; + +// @public (undocumented) +export const DonutChart: React_2.FunctionComponent; + +// @public (undocumented) +export const GaugeChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum GaugeValueFormat { + // (undocumented) + Fraction = "fraction", + // (undocumented) + Percentage = "percentage" +} + +// @public (undocumented) +export const getChartHoverCardStyles: (props: IChartHoverCardStyleProps) => IChartHoverCardStyles; + +// @public (undocumented) +export const getColorFromToken: (token: string, isDarkTheme?: boolean) => string; + +// @public (undocumented) +export const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string; + +// @public (undocumented) +export const GroupedVerticalBarChart: React_2.FunctionComponent; + +// @public (undocumented) +export const HeatMapChart: React_2.FunctionComponent; + +// @public (undocumented) +export const HorizontalBarChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum HorizontalBarChartVariant { + // (undocumented) + AbsoluteScale = "absolute-scale", + // (undocumented) + PartToWhole = "part-to-whole" +} + +// @public (undocumented) +export const HorizontalBarChartWithAxis: React_2.FunctionComponent; + +// @public (undocumented) +export interface IAccessibilityProps { + ariaDescribedBy?: string; + ariaLabel?: string; + ariaLabelledBy?: string; +} + +// @public (undocumented) +export interface IAreaChartProps extends ICartesianChartProps { + culture?: string; + data: IChartProps; + onRenderCalloutPerDataPoint?: IRenderFunction; + onRenderCalloutPerStack?: IRenderFunction; + // (undocumented) + optimizeLargeData?: boolean; + // @deprecated + showYAxisGridLines?: boolean; + styles?: IStyleFunctionOrObject; +} + +// @public (undocumented) +export interface IAreaChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface IAreaChartStyles extends ICartesianChartStyles { +} + +// @public (undocumented) +export interface IBasestate { + // (undocumented) + activeLegend?: string; + // (undocumented) + color?: string; + // (undocumented) + containerHeight?: number; + // (undocumented) + containerWidth?: number; + // (undocumented) + dataForHoverCard?: number; + // (undocumented) + _height?: number; + // (undocumented) + hoveredLineColor?: string; + // (undocumented) + hoverXValue?: string | number | null; + // (undocumented) + hoverYValue?: string | number | null; + // (undocumented) + isCalloutVisible: boolean; + // (undocumented) + isLegendHovered?: boolean; + // (undocumented) + isLegendSelected?: boolean; + // (undocumented) + lineColor?: string; + // (undocumented) + refSelected?: any; + // (undocumented) + selectedLegend?: string; + // (undocumented) + _width?: number; + // (undocumented) + xCalloutValue?: string; + // (undocumented) + yCalloutValue?: string; + // (undocumented) + YValueHover?: { + legend?: string; + y?: number; + color?: string; + }[]; +} + +// @public (undocumented) +export interface ICartesianChartProps { + calloutProps?: Partial; + // @deprecated + chartLabel?: string; + className?: string; + customDateTimeFormatter?: (dateTime: Date) => string; + dateLocalizeOptions?: Intl.DateTimeFormatOptions; + enabledLegendsWrapLines?: boolean; + enableReflow?: boolean; + focusZonePropsForLegendsInHoverCard?: IFocusZoneProps; + height?: number; + hideLegend?: boolean; + hideTooltip?: boolean; + href?: string; + // (undocumented) + legendProps?: Partial; + legendsOverflowProps?: Partial; + // (undocumented) + legendsOverflowText?: any; + margins?: IMargins; + noOfCharsToTruncate?: number; + parentRef?: HTMLElement | null; + rotateXAxisLables?: boolean; + secondaryYScaleOptions?: { + yMinValue?: number; + yMaxValue?: number; + }; + showXAxisLablesTooltip?: boolean; + strokeWidth?: number; + styles?: IStyleFunctionOrObject; + svgProps?: React_2.SVGProps; + theme?: ITheme; + tickFormat?: string; + tickPadding?: number; + tickValues?: number[] | Date[]; + timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition; + width?: number; + wrapXAxisLables?: boolean; + xAxisTickCount?: number; + xAxisTickPadding?: number; + xAxistickSize?: number; + xMaxValue?: number; + yAxisTickCount?: number; + yAxisTickFormat?: any; + yMaxValue?: number; + yMinValue?: number; +} + +// @public (undocumented) +export interface ICartesianChartStyleProps { + className?: string; + color?: string; + height?: number; + href?: string; + isRtl?: boolean; + lineColor?: string; + shouldHighlight?: boolean; + theme: ITheme; + toDrawShape?: boolean; + width?: number; +} + +// @public (undocumented) +export interface ICartesianChartStyles { + calloutBlockContainer?: IStyle; + calloutContentRoot?: IStyle; + calloutContentX?: IStyle; + calloutContentY?: IStyle; + calloutDateTimeContainer?: IStyle; + calloutInfoContainer?: IStyle; + calloutlegendText?: IStyle; + chartTitle?: IStyle; + chartWrapper?: IStyle; + descriptionMessage?: IStyle; + hover?: IStyle; + legendContainer?: IStyle; + opacityChangeOnHover?: IStyle; + root?: IStyle; + shapeStyles?: IStyle; + tooltip?: IStyle; + xAxis?: IStyle; + yAxis?: IStyle; +} + +// @public (undocumented) +export interface IChartDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + color?: string; + data?: number; + horizontalBarChartdata?: IHorizontalDataPoint; + legend?: string; + onClick?: VoidFunction; + placeHolder?: boolean; + xAxisCalloutData?: string; + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IChartHoverCardProps { + color?: string; + culture?: string; + descriptionMessage?: string; + Legend?: string | number | Date; + ratio?: [number, number]; + styles?: IStyleFunctionOrObject_2; + theme?: ITheme_2; + XValue?: string; + YValue?: string | number | Date; +} + +// @public (undocumented) +export interface IChartHoverCardStyleProps { + color?: string; + isRatioPresent?: boolean; + theme: ITheme_2; + XValue?: string; +} + +// @public (undocumented) +export interface IChartHoverCardStyles { + calloutBlockContainer?: IStyle_2; + calloutContentRoot?: IStyle_2; + calloutContentX?: IStyle_2; + calloutContentY?: IStyle_2; + calloutDateTimeContainer?: IStyle_2; + calloutInfoContainer?: IStyle_2; + calloutlegendText?: IStyle_2; + denominator?: IStyle_2; + descriptionMessage?: IStyle_2; + numerator?: IStyle_2; + ratio?: IStyle_2; +} + +// @public (undocumented) +export interface IChartProps { + chartData?: IChartDataPoint[]; + chartDataAccessibilityData?: IAccessibilityProps; + chartTitle?: string; + chartTitleAccessibilityData?: IAccessibilityProps; + lineChartData?: ILineChartPoints[]; + pointLineOptions?: SVGProps; + pointOptions?: SVGProps; + SankeyChartData?: ISankeyChartData; +} + +// @public (undocumented) +export interface IChildProps { + // (undocumented) + containerHeight?: number; + // (undocumented) + containerWidth?: number; + // (undocumented) + xScale?: any; + // (undocumented) + yScale?: any; + // (undocumented) + yScaleSecondary?: any; +} + +// @public (undocumented) +export interface IColorFillBarData { + // (undocumented) + endX: number | Date; + // (undocumented) + startX: number | Date; +} + +// @public (undocumented) +export interface IColorFillBarsProps { + // (undocumented) + applyPattern?: boolean; + // (undocumented) + color: string; + // (undocumented) + data: IColorFillBarData[]; + // (undocumented) + legend: string; + // (undocumented) + onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined; +} + +// @public +export interface ICustomizedCalloutData { + // (undocumented) + values: ICustomizedCalloutDataPoint[]; + // (undocumented) + x: number | string | Date; +} + +// @public (undocumented) +export interface ICustomizedCalloutDataPoint { + // (undocumented) + color: string; + // (undocumented) + legend: string; + // (undocumented) + xAxisCalloutData?: string; + // (undocumented) + y: number; + // (undocumented) + yAxisCalloutData?: string | { + [id: string]: number; + }; +} + +// @public (undocumented) +export interface IDataPoint { + onClick?: VoidFunction; + x: number | string; + y: number; +} + +// @public (undocumented) +export interface IDonutChart { +} + +// @public (undocumented) +export interface IDonutChartProps extends ICartesianChartProps { + calloutProps?: Partial; + culture?: string; + data?: IChartProps; + hideLabels?: boolean; + innerRadius?: number; + onRenderCalloutPerDataPoint?: IRenderFunction; + showLabelsInPercent?: boolean; + styles?: IStyleFunctionOrObject; + valueInsideDonut?: string | number; +} + +// @public (undocumented) +export interface IDonutChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface IDonutChartStyles { + chart?: IStyle; + legendContainer: IStyle; + root?: IStyle; +} + +// @public (undocumented) +export interface IEventsAnnotationProps { + // Warning: (ae-forgotten-export) The symbol "IEventAnnotation" needs to be exported by the entry point index.d.ts + // + // (undocumented) + events: IEventAnnotation[]; + // (undocumented) + labelColor?: string; + // (undocumented) + labelHeight?: number; + // (undocumented) + labelWidth?: number; + // (undocumented) + mergedLabel: (count: number) => string; + // (undocumented) + strokeColor?: string; +} + +// @public (undocumented) +export interface IGaugeChartProps { + calloutProps?: Partial; + chartTitle?: string; + chartValue: number; + chartValueFormat?: GaugeValueFormat | ((sweepFraction: number[]) => string); + className?: string; + culture?: string; + height?: number; + hideLegend?: boolean; + hideMinMax?: boolean; + hideTooltip?: boolean; + // (undocumented) + legendProps?: Partial; + maxValue?: number; + minValue?: number; + segments: IGaugeChartSegment[]; + styles?: IStyleFunctionOrObject; + sublabel?: string; + theme?: ITheme; + width?: number; +} + +// @public (undocumented) +export interface IGaugeChartSegment { + accessibilityData?: IAccessibilityProps; + color?: string; + legend: string; + size: number; +} + +// @public (undocumented) +export interface IGaugeChartStyleProps { + chartHeight?: number; + chartValueSize?: number; + chartWidth?: number; + className?: string; + lineColor?: string; + theme: ITheme; + toDrawShape?: boolean; +} + +// @public (undocumented) +export interface IGaugeChartStyles { + calloutBlockContainer?: IStyle; + calloutContentRoot?: IStyle; + calloutContentX?: IStyle; + calloutContentY?: IStyle; + calloutDateTimeContainer?: IStyle; + calloutInfoContainer?: IStyle; + calloutlegendText?: IStyle; + chart?: IStyle; + chartTitle?: IStyle; + chartValue?: IStyle; + descriptionMessage?: IStyle; + legendsContainer?: IStyle; + limits?: IStyle; + needle?: IStyle; + root?: IStyle; + segment?: IStyle; + shapeStyles?: IStyle; + sublabel?: IStyle; +} + +// @public (undocumented) +export interface IGroupedVerticalBarChartData { + name: string; + series: IGVBarChartSeriesPoint[]; + stackCallOutAccessibilityData?: IAccessibilityProps; +} + +// @public (undocumented) +export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { + barwidth?: number; + chartTitle?: string; + culture?: string; + data: IGroupedVerticalBarChartData[]; + hideLabels?: boolean; + isCalloutForStack?: boolean; + // @deprecated + legendColor?: string; + onRenderCalloutPerDataPoint?: IRenderFunction; + // @deprecated + showXAxisGridLines?: boolean; + // @deprecated + showXAxisPath?: boolean; + // @deprecated + showYAxisGridLines?: boolean; + // @deprecated + showYAxisPath?: boolean; + styles?: IStyleFunctionOrObject; +} + +// @public (undocumented) +export interface IGroupedVerticalBarChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface IGroupedVerticalBarChartStyles extends ICartesianChartStyles { + barLabel: IStyle; + opacityChangeOnHover: IStyle; +} + +// @public (undocumented) +export interface IGVBarChartSeriesPoint { + callOutAccessibilityData?: IAccessibilityProps; + color: string; + data: number; + key: string; + legend: string; + onClick?: VoidFunction; + xAxisCalloutData?: string; + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IGVDataPoint { + [key: string]: number | string; +} + +// @public (undocumented) +export interface IGVForBarChart { + [key: string]: IGVBarChartSeriesPoint; +} + +// @public (undocumented) +export interface IGVSingleDataPoint { + [key: string]: IGVDataPoint; +} + +// @public (undocumented) +export interface IHeatMapChartData { + // (undocumented) + data: IHeatMapChartDataPoint[]; + legend: string; + value: number; +} + +// @public (undocumented) +export interface IHeatMapChartDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + descriptionMessage?: string; + onClick?: VoidFunction; + ratio?: [number, number]; + rectText?: string | number; + // (undocumented) + value: number; + // (undocumented) + x: string | Date | number; + // (undocumented) + y: string | Date | number; +} + +// @public (undocumented) +export interface IHeatMapChartProps extends Pick> { + chartTitle?: string; + culture?: string; + data: IHeatMapChartData[]; + domainValuesForColorScale: number[]; + legendProps?: Partial; + rangeValuesForColorScale: string[]; + styles?: IStyleFunctionOrObject; + xAxisDateFormatString?: string; + xAxisNumberFormatString?: string; + xAxisStringFormatter?: (point: string) => string; + yAxisDateFormatString?: string; + yAxisNumberFormatString?: string; + yAxisStringFormatter?: (point: string) => string; +} + +// @public (undocumented) +export interface IHeatMapChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface IHeatMapChartStyles { + // (undocumented) + root?: IStyle; + // (undocumented) + subComponentStyles: { + cartesianStyles: IStyleFunctionOrObject; + calloutStyles: IStyleFunctionOrObject; + }; + // (undocumented) + text?: IStyle; +} + +// @public (undocumented) +export interface IHorizontalBarChartProps { + barChartCustomData?: IRenderFunction; + barHeight?: number; + calloutProps?: Partial; + chartDataMode?: ChartDataMode; + className?: string; + culture?: string; + data?: IChartProps[]; + hideLabels?: boolean; + hideRatio?: boolean[]; + hideTooltip?: boolean; + onRenderCalloutPerHorizontalBar?: IRenderFunction; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + variant?: HorizontalBarChartVariant; + width?: number; +} + +// @public (undocumented) +export interface IHorizontalBarChartStyleProps { + barHeight?: number; + className?: string; + color?: string; + hideLabels?: boolean; + showTriangle?: boolean; + theme: ITheme; + variant?: HorizontalBarChartVariant; + width: number | undefined; +} + +// @public (undocumented) +export interface IHorizontalBarChartStyles { + barLabel: IStyle; + barWrapper: IStyle; + benchmarkContainer: IStyle; + chart: IStyle; + chartDataTextDenominator: IStyle; + chartTitle: IStyle; + chartTitleLeft: IStyle; + chartTitleRight: IStyle; + chartWrapper: IStyle; + items: IStyle; + root: IStyle; + triangle: IStyle; +} + +// @public (undocumented) +export interface IHorizontalBarChartWithAxisDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + color?: string; + legend?: string; + onClick?: VoidFunction; + x: number; + xAxisCalloutData?: string; + y: number | string; + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { + barHeight?: number; + chartTitle?: string; + colors?: string[]; + culture?: string; + data?: IHorizontalBarChartWithAxisDataPoint[]; + onRenderCalloutPerDataPoint?: IRenderFunction; + showYAxisLables?: boolean; + showYAxisLablesTooltip?: boolean; + styles?: IStyleFunctionOrObject; + useSingleColor?: boolean; + yAxisPadding?: number; +} + +// @public (undocumented) +export interface IHorizontalBarChartWithAxisStyleProps extends ICartesianChartStyleProps { + legendColor?: string; +} + +// @public (undocumented) +export interface IHorizontalBarChartWithAxisStyles extends ICartesianChartStyles { + chartLabel?: IStyle; + opacityChangeOnHover: IStyle; + xAxisDomain?: IStyle; + xAxisText?: IStyle; + xAxisTicks?: IStyle; + yAxisDomain?: IStyle; + yAxisText?: IStyle; + yAxisTicks?: IStyle; +} + +// @public (undocumented) +export interface IHorizontalDataPoint { + x: number; + y: number; +} + +// @public (undocumented) +export interface ILegend { + action?: VoidFunction; + color: string; + hoverAction?: VoidFunction; + isLineLegendInBarChart?: boolean; + // (undocumented) + nativeButtonProps?: React_2.ButtonHTMLAttributes; + onMouseOutAction?: (isLegendFocused?: boolean) => void; + opacity?: number; + shape?: LegendShape; + stripePattern?: boolean; + title: string; +} + +// @public (undocumented) +export interface ILegendDataItem { + legendColor: string; + legendText: string | number; +} + +// @public +export interface ILegendOverflowData { + // (undocumented) + overflow?: ILegend[]; + // (undocumented) + primary: ILegend[]; +} + +// @public (undocumented) +export interface ILegendsProps { + allowFocusOnLegends?: boolean; + canSelectMultipleLegends?: boolean; + centerLegends?: boolean; + className?: string; + enabledWrapLines?: boolean; + focusZonePropsInHoverCard?: IFocusZoneProps; + legends: ILegend[]; + onLegendHoverCardLeave?: VoidFunction; + overflowProps?: Partial; + overflowText?: string; + selectedLegend?: string; + styles?: IStyleFunctionOrObject; + theme?: ITheme; +} + +// @public (undocumented) +export interface ILegendsStyles { + hoverCardRoot: IStyle; + hoverChange: IStyle; + legend: IStyle; + overflowIndicationTextStyle: IStyle; + rect: IStyle; + root: IStyle; + shape: IStyle; + subComponentStyles: ILegendSubComponentStyles; + text: IStyle; + triangle: IStyle; +} + +// @public (undocumented) +export interface ILegendStyleProps { + // (undocumented) + borderColor?: string; + // (undocumented) + className?: string; + // (undocumented) + colorOnSelectedState?: string; + // (undocumented) + isLineLegendInBarChart?: boolean; + // (undocumented) + opacity?: number; + // (undocumented) + overflow?: boolean; + // (undocumented) + stripePattern?: boolean; + // (undocumented) + theme?: ITheme; +} + +// @public +export interface ILegendSubComponentStyles { + // (undocumented) + hoverCardStyles: IStyleFunctionOrObject; +} + +// @public (undocumented) +export interface ILineChartDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + hideCallout?: boolean; + onDataPointClick?: () => void; + x: number | Date; + xAxisCalloutAccessibilityData?: IAccessibilityProps; + xAxisCalloutData?: string; + y: number; + yAxisCalloutData?: string | { + [id: string]: number; + }; +} + +// @public (undocumented) +export interface ILineChartGap { + endIndex: number; + startIndex: number; +} + +// @public (undocumented) +export interface ILineChartLineOptions extends SVGProps { + lineBorderColor?: string; + lineBorderWidth?: string | number; + strokeDasharray?: string | number; + strokeDashoffset?: string | number; + strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit'; + strokeWidth?: number | string; +} + +// @public (undocumented) +export interface ILineChartPoints { + color?: string; + data: ILineChartDataPoint[]; + gaps?: ILineChartGap[]; + hideNonActiveDots?: boolean; + legend: string; + legendShape?: LegendShape; + lineOptions?: ILineChartLineOptions; + onLegendClick?: (selectedLegend: string | null | string[]) => void; + onLineClick?: () => void; + opacity?: number; +} + +// @public (undocumented) +export interface ILineChartProps extends ICartesianChartProps { + allowMultipleShapesForPoints?: boolean; + // (undocumented) + colorFillBars?: IColorFillBarsProps[]; + culture?: string; + data: IChartProps; + eventAnnotationProps?: IEventsAnnotationProps; + getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined; + onRenderCalloutPerDataPoint?: IRenderFunction; + onRenderCalloutPerStack?: IRenderFunction; + // (undocumented) + optimizeLargeData?: boolean; + styles?: IStyleFunctionOrObject; +} + +// @public (undocumented) +export interface ILineChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface ILineChartStyles extends ICartesianChartStyles { +} + +// @public (undocumented) +export interface ILineDataInVerticalBarChart { + onClick?: VoidFunction; + useSecondaryYScale?: boolean; + // (undocumented) + y: IVerticalBarChartDataPoint['y']; + // (undocumented) + yAxisCalloutData?: string | undefined; +} + +// @public (undocumented) +export interface ILineDataInVerticalStackedBarChart { + // (undocumented) + color: string; + data?: number; + // (undocumented) + legend: string; + useSecondaryYScale?: boolean; + // (undocumented) + y: number; + // (undocumented) + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IMargins { + bottom?: number; + left?: number; + right?: number; + top?: number; +} + +// @public (undocumented) +export interface IModifiedCartesianChartProps extends ICartesianChartProps { + barwidth?: number; + calloutProps: Partial & { + isCalloutVisible: boolean; + id: string; + YValueHover?: IYValueHover[]; + hoverXValue?: string | number | null; + legend?: string; + color?: string; + YValue?: string | number; + XValue?: string; + descriptionMessage?: string; + }; + chartHoverProps?: IChartHoverCardProps; + chartTitle?: string; + // Warning: (ae-forgotten-export) The symbol "ChartTypes" needs to be exported by the entry point index.d.ts + chartType: ChartTypes; + children(props: IChildProps): React_2.ReactNode; + culture?: string; + customizedCallout?: any; + datasetForXAxisDomain?: string[]; + focusZoneDirection?: FocusZoneDirection; + // (undocumented) + getAxisData?: any; + getDomainMargins?: (containerWidth: number) => IMargins; + getGraphData?: any; + getmargins?: (margins: IMargins) => void; + isCalloutForStack?: boolean; + legendBars: JSX.Element; + maxOfYVal?: number; + onChartMouseLeave?: () => void; + points: any; + showYAxisLables?: boolean; + showYAxisLablesTooltip?: boolean; + stringDatasetForYAxisDomain?: string[]; + svgFocusZoneProps?: IFocusZoneProps; + tickParams?: { + tickValues?: number[] | Date[]; + tickFormat?: string; + }; + xAxisInnerPadding?: number; + xAxisOuterPadding?: number; + xAxisPadding?: number; + // Warning: (ae-forgotten-export) The symbol "XAxisTypes" needs to be exported by the entry point index.d.ts + xAxisType: XAxisTypes; + yAxisPadding?: number; + // Warning: (ae-forgotten-export) The symbol "YAxisType" needs to be exported by the entry point index.d.ts + yAxisType?: YAxisType; +} + +// @public (undocumented) +export interface IMultiStackedBarChartProps { + barHeight?: number; + calloutProps?: Partial; + className?: string; + culture?: string; + data?: IChartProps[]; + focusZonePropsForLegendsInHoverCard?: IFocusZoneProps; + hideDenominator?: boolean[]; + hideLabels?: boolean; + hideLegend?: boolean; + hideRatio?: boolean[]; + hideTooltip?: boolean; + href?: string; + legendProps?: Partial; + legendsOverflowProps?: Partial; + legendsOverflowText?: string; + onRenderCalloutPerDataPoint?: IRenderFunction; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + variant?: MultiStackedBarChartVariant; + width?: number; +} + +// @public (undocumented) +export interface IMultiStackedBarChartStyleProps { + barHeight?: number; + className?: string; + hideLabels?: boolean; + href?: string; + legendColor?: string; + shouldHighlight?: boolean; + theme: ITheme; + variant?: MultiStackedBarChartVariant; + width?: number; +} + +// @public (undocumented) +export interface IMultiStackedBarChartStyles { + barLabel: IStyle; + chart: IStyle; + chartTitle: IStyle; + chartTitleLeft: IStyle; + chartWrapper: IStyle; + items: IStyle; + legendContainer: IStyle; + noData: IStyle; + opacityChangeOnHover: IStyle; + placeHolderOnHover: IStyle; + ratioDenominator: IStyle; + ratioNumerator: IStyle; + root: IStyle; + singleChartRoot: IStyle; +} + +// @public (undocumented) +export interface IPieChart { +} + +// @public (undocumented) +export interface IPieChartProps { + chartTitle?: string; + className?: string; + colors?: string[]; + culture?: string; + data?: IDataPoint[]; + height?: number; + strokeWidth?: number; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + width?: number; +} + +// @public (undocumented) +export type IPieChartStyleProps = Required> & Pick; + +// @public (undocumented) +export interface IPieChartStyles { + chart?: IStyle; + chartTitle?: IStyle; + root?: IStyle; +} + +// @public (undocumented) +export interface IRefArrayData { + // (undocumented) + index?: string; + // (undocumented) + refElement?: SVGGElement; +} + +// @public (undocumented) +export interface ISankeyChartData { + // (undocumented) + links: SLink[]; + // (undocumented) + nodes: SNode[]; +} + +// @public (undocumented) +export interface ISankeyChartProps { + borderColorsForNodes?: string[]; + className?: string; + colorsForNodes?: string[]; + data: IChartProps; + height?: number; + parentRef?: HTMLElement | null; + pathColor?: string; + shouldResize?: number; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + width?: number; +} + +// @public (undocumented) +export interface ISankeyChartStyleProps { + // (undocumented) + className?: string; + // (undocumented) + height: number; + // (undocumented) + pathColor?: string; + // (undocumented) + theme: ITheme; + // (undocumented) + width: number; +} + +// @public (undocumented) +export interface ISankeyChartStyles { + calloutContentRoot?: IStyle; + links?: IStyle; + nodes?: IStyle; + nodeTextContainer?: IStyle; + root?: IStyle; + toolTip?: IStyle; +} + +// @public (undocumented) +export interface IShapeProps { + // (undocumented) + classNameForNonSvg?: string; + // (undocumented) + pathProps: React_2.SVGAttributes; + // (undocumented) + shape: LegendShape; + // (undocumented) + svgProps: React_2.SVGAttributes; +} + +// @public (undocumented) +export interface ISparklineProps { + className?: string; + culture?: string; + data?: IChartProps; + height?: number; + showLegend?: boolean; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + valueTextWidth?: number; + width?: number; +} + +// @public (undocumented) +export interface ISparklineStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface ISparklineStyles { + // (undocumented) + inlineBlock?: IStyle; + // (undocumented) + valueText?: IStyle; +} + +// @public (undocumented) +export interface IStackedBarChart { +} + +// @public (undocumented) +export interface IStackedBarChartProps { + barBackgroundColor?: string; + barHeight?: number; + benchmarkData?: IChartDataPoint; + calloutProps?: Partial; + className?: string; + culture?: string; + data?: IChartProps; + enabledLegendsWrapLines?: boolean; + focusZonePropsForLegendsInHoverCard?: IFocusZoneProps; + hideDenominator?: boolean; + hideLegend?: boolean; + hideNumberDisplay?: boolean; + hideTooltip?: boolean; + href?: string; + ignoreFixStyle?: boolean; + legendProps?: Partial; + legendsOverflowProps?: Partial; + legendsOverflowText?: string; + onRenderCalloutPerDataPoint?: IRenderFunction; + styles?: IStyleFunctionOrObject; + targetData?: IChartDataPoint; + theme?: ITheme; + width?: number; +} + +// @public (undocumented) +export interface IStackedBarChartStyleProps { + barHeight?: number; + benchmarkColor?: string; + benchmarkRatio?: number; + className?: string; + href?: string; + isChartSelected?: boolean; + legendColor?: string; + shouldHighlight?: boolean; + showTriangle?: boolean; + targetColor?: string; + targetRatio?: number; + theme: ITheme; + width?: number; +} + +// @public (undocumented) +export interface IStackedBarChartStyles { + benchmark: IStyle; + benchmarkContainer: IStyle; + chart: IStyle; + chartTitle: IStyle; + chartTitleLeft: IStyle; + legendContainer: IStyle; + opacityChangeOnHover: IStyle; + ratioDenominator: IStyle; + ratioNumerator: IStyle; + root: IStyle; + target: IStyle; +} + +// @public (undocumented) +export interface ITreeChartDataPoint { + bodytext?: string; + children?: Array; + fill: string; + metric?: string; + name: string; + subname?: string; +} + +// @public (undocumented) +export interface ITreeDataStructure { + bodyText?: string; + children: Array; + dataName: string; + fill: string; + id: number; + metricName?: string; + parentID: number; + subName?: string; + x: number; + y: number; +} + +// @public (undocumented) +export interface ITreeProps { + className?: string; + composition?: NodesComposition.long | NodesComposition.compact; + height?: number; + layoutWidth?: number; + marign?: { + left: number; + right: number; + top: number; + bottom: number; + }; + styles?: IStyleFunctionOrObject; + theme?: ITheme; + treeData: ITreeChartDataPoint; + treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder; + width?: number; +} + +// @public (undocumented) +export interface ITreeState { + _height: number; + _layoutWidth?: number; + _width: number; +} + +// @public (undocumented) +export interface ITreeStyleProps { + className?: string; + theme: ITheme; +} + +// @public (undocumented) +export interface ITreeStyles { + link: IStyle; + rectBodyText: IStyle; + rectMetricText: IStyle; + rectNode: IStyle; + rectSubText: IStyle; + rectText: IStyle; + root: IStyle; +} + +// @public (undocumented) +export interface IVerticalBarChartDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + color?: string; + legend?: string; + lineData?: ILineDataInVerticalBarChart; + onClick?: VoidFunction; + x: number | string; + xAxisCalloutData?: string; + y: number; + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IVerticalBarChartProps extends ICartesianChartProps { + barWidth?: number; + chartTitle?: string; + colors?: string[]; + culture?: string; + data?: IVerticalBarChartDataPoint[]; + hideLabels?: boolean; + lineLegendColor?: string; + lineLegendText?: string; + lineOptions?: ILineChartLineOptions; + onRenderCalloutPerDataPoint?: IRenderFunction; + styles?: IStyleFunctionOrObject; + useSingleColor?: boolean; + xAxisPadding?: number; +} + +// @public (undocumented) +export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps { + legendColor?: string; +} + +// @public (undocumented) +export interface IVerticalBarChartStyles extends ICartesianChartStyles { + barLabel: IStyle; + // @deprecated + chartLabel?: IStyle; + opacityChangeOnHover: IStyle; + // @deprecated + xAxisDomain?: IStyle; + // @deprecated + xAxisText?: IStyle; + // @deprecated + xAxisTicks?: IStyle; + // @deprecated + yAxisDomain?: IStyle; + // @deprecated + yAxisText?: IStyle; + // @deprecated + yAxisTicks?: IStyle; +} + +// @public (undocumented) +export interface IVerticalStackedBarChartProps extends ICartesianChartProps { + allowHoverOnLegend?: boolean; + barCornerRadius?: number; + barGapMax?: number; + barMinimumHeight?: number; + barWidth?: number; + calloutProps?: Partial; + chartTitle?: string; + // @deprecated + colors?: string[]; + culture?: string; + data: IVerticalStackedChartProps[]; + hideLabels?: boolean; + isCalloutForStack?: boolean; + lineOptions?: ILineChartLineOptions; + onBarClick?: (event: React_2.MouseEvent, data: IVerticalStackedChartProps | IVSChartDataPoint) => void; + onRenderCalloutPerDataPoint?: IRenderFunction; + onRenderCalloutPerStack?: IRenderFunction; + styles?: IStyleFunctionOrObject; + xAxisPadding?: number; + yMinValue?: undefined; +} + +// @public (undocumented) +export interface IVerticalStackedBarChartStyleProps extends ICartesianChartStyleProps { +} + +// @public (undocumented) +export interface IVerticalStackedBarChartStyles extends ICartesianChartStyles { + barLabel: IStyle; + // @deprecated + chart?: IStyle; + opacityChangeOnHover?: IStyle; + // @deprecated + xAxisDomain?: IStyle; + // @deprecated + xAxisText?: IStyle; + // @deprecated + xAxisTicks?: IStyle; + // @deprecated + yAxisDomain?: IStyle; + // @deprecated + yAxisText?: IStyle; + // @deprecated + yAxisTicks?: IStyle; +} + +// @public (undocumented) +export interface IVerticalStackedChartProps { + chartData: IVSChartDataPoint[]; + lineData?: ILineDataInVerticalStackedBarChart[]; + stackCallOutAccessibilityData?: IAccessibilityProps; + xAxisCalloutData?: string; + xAxisPoint: number | string; +} + +// @public (undocumented) +export interface IVSChartDataPoint { + callOutAccessibilityData?: IAccessibilityProps; + color?: string; + data: number; + legend: string; + xAxisCalloutData?: string; + yAxisCalloutData?: string; +} + +// @public (undocumented) +export interface IYValueHover { + // (undocumented) + callOutAccessibilityData?: IAccessibilityProps; + // (undocumented) + color?: string; + // (undocumented) + data?: string | number; + // (undocumented) + index?: number; + // (undocumented) + legend?: string; + // (undocumented) + shouldDrawBorderBottom?: boolean; + // (undocumented) + y?: number; + // (undocumented) + yAxisCalloutData?: string | { + [id: string]: number; + }; +} + +// @public (undocumented) +export const Legends: React_2.FunctionComponent; + +// Warning: (ae-forgotten-export) The symbol "Points" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "CustomPoints" needs to be exported by the entry point index.d.ts +// +// @public +export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints; + +// @public (undocumented) +export const LineChart: React_2.FunctionComponent; + +// @public (undocumented) +export const MultiStackedBarChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum MultiStackedBarChartVariant { + // (undocumented) + AbsoluteScale = "absolute-scale", + // (undocumented) + PartToWhole = "part-to-whole" +} + +// @public (undocumented) +export enum NodesComposition { + compact = 0, + long = 1 +} + +// @public (undocumented) +export const PieChart: React_2.FunctionComponent; + +// @public (undocumented) +export const SankeyChart: React_2.FunctionComponent; + +// @public (undocumented) +export const Shape: React_2.FC; + +// Warning: (ae-forgotten-export) The symbol "ISNodeExtra" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "ISLinkExtra" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export type SLink = d3Sankey.SankeyLink; + +// @public (undocumented) +export type SNode = d3Sankey.SankeyNode; + +// @public (undocumented) +export const Sparkline: React_2.FunctionComponent; + +// @public (undocumented) +export const StackedBarChart: React_2.FunctionComponent; + +// Warning: (ae-forgotten-export) The symbol "ITextboxProps" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export const Textbox: React_2.FunctionComponent; + +// @public (undocumented) +export const TreeChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum TreeTraverse { + levelOrder = 0, + preOrder = 1 +} + +// @public (undocumented) +export const VerticalBarChart: React_2.FunctionComponent; + +// @public (undocumented) +export const VerticalStackedBarChart: React_2.FunctionComponent; + +// (No @packageDocumentation comment for this package) + +``` diff --git a/packages/react-charting/package.json b/packages/react-charting/package.json index 3f3c2c65cb1f9..6fe093874686e 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -31,6 +31,7 @@ "@fluentui/react": "^8.110.7", "@types/react-addons-test-utils": "0.14.18", "@fluentui/jest-serializer-merge-styles": "^8.0.29", + "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-jest": "*", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*", From 6cf342000dc665135c91270aec151acd855604ba Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 3 Jul 2023 19:03:57 +0530 Subject: [PATCH 06/61] Update api md file --- packages/react-charting/etc/react-charting.api.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 614e3a6db9f2b..aa8889ca6c8d6 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -141,6 +141,7 @@ export interface IAccessibilityProps { export interface IAreaChartProps extends ICartesianChartProps { culture?: string; data: IChartProps; + enablePerfOptimization?: boolean; onRenderCalloutPerDataPoint?: IRenderFunction; onRenderCalloutPerStack?: IRenderFunction; // (undocumented) From b62f2800a0af1927e2317b6e77419d2efa60849f Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Tue, 4 Jul 2023 15:59:23 +0530 Subject: [PATCH 07/61] Fix tsdoc warnings --- .../CommonComponents/CartesianChart.types.ts | 2 +- .../GroupedVerticalBarChart.types.tsx | 12 ++++++------ .../HorizontalBarChart/HorizontalBarChart.types.ts | 2 +- .../VerticalBarChart/VerticalBarChart.types.ts | 14 +++++++------- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index 982786f414379..6f5cadf1c0f6b 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -501,7 +501,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { /** * To enable callout for individualbar or complete stack. Using for only Vertical stacked bar chart. * @default false - * @type {boolean} + * @type \{boolean \} */ isCalloutForStack?: boolean; diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx index efb8118183149..23e717a5a4a44 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx @@ -35,33 +35,33 @@ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { /** * color of the datapoint legend - * @deprecated + * @deprecated Dont use this property. colour will pick from given data */ legendColor?: string; /** * This prop used to draw X axis grid line on tha chart. Default value will be false - * @deprecated + * @deprecated Dont use this property. Handling with default value. */ showXAxisGridLines?: boolean; /** * This prop used to draw Y axis grid lines on the chart. Default value will be true - * @deprecated + * @deprecated Dont use this property. Lines are drawn by default */ showYAxisGridLines?: boolean; /** * This prop takes the boolean value and used for to display x-axis path or transparent. * This is a optional prop and default value is false. It dont show X-Axis path as tranparent. - * @deprecated + * @deprecated Dont use this property. Axis line are removed by default */ showXAxisPath?: boolean; /** * This prop takes the boolean value and used for to display y-axis path or transparent. - * This is a optional prop and default value is false. It dont show X-Axis path as tranparent. - * @deprecated + * This is a optional prop and default value is false. It dont show Y-Axis path as tranparent. + * @deprecated Dont use this property. No need to display Y axis path. Handling default */ showYAxisPath?: boolean; diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts index 36197158dfcb9..506a05a27d1ec 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts @@ -67,7 +67,7 @@ export interface IHorizontalBarChartProps { /** * Custom text to the chart (right side of the chart) * IChartProps will be available as props to the method prop. - * If this method not given, default values (IHorizontalDataPoint {x,y}) + * If this method not given, default values (IHorizontalDataPoint \{x,y\}) * will be used to display the data/text based on given chartModeData prop. */ barChartCustomData?: IRenderFunction; diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts index 40718127f8869..4335748dea8eb 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts @@ -91,43 +91,43 @@ export interface IVerticalBarChartStyleProps extends ICartesianChartStyleProps { export interface IVerticalBarChartStyles extends ICartesianChartStyles { /** * Style for the chart label. - * @deprecated + * @deprecated This style cannot be customized anymore */ chartLabel?: IStyle; /** * Style for the line representing the domain of the x-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ xAxisDomain?: IStyle; /** * Style for the lines representing the ticks along the x-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ xAxisTicks?: IStyle; /** * Style for the text labeling each tick along the x-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ xAxisText?: IStyle; /** * Style for the line representing the domain of the y-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ yAxisDomain?: IStyle; /** * Style for the lines representing the ticks along the y-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ yAxisTicks?: IStyle; /** * Style for the text labeling each tick along the y-axis. - * @deprecated + * @deprecated This style cannot be customized anymore */ yAxisText?: IStyle; From 5126890766c96a5e719627242ac0e9a5ba485f15 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 5 Jul 2023 15:48:38 +0530 Subject: [PATCH 08/61] Add legends json docs page --- apps/public-docsite-resources/src/AppDefinition.tsx | 3 +-- .../src/components/pages/LegendsPage.tsx | 8 ++++++++ .../src/pages/Controls/LegendsPage/LegendsPage.tsx | 2 +- 3 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/LegendsPage.tsx diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 9b8ced03f4c40..0e49a1ed8331f 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { IAppDefinition, IAppLink, ApiReferencesTableSet } from '@fluentui/react-docsite-components'; import { DetailsListBasicExample } from '@fluentui/react-examples/lib/react/DetailsList/DetailsList.Basic.Example'; -import { LegendsPage } from '@fluentui/react-examples/lib/react-charting/Legends/LegendsPage'; import { mergeStyles } from '@fluentui/react/lib/Styling'; import { AppThemes } from './theme/AppThemes'; @@ -521,7 +520,7 @@ export const AppDefinition: IAppDefinition = { name: 'Charting', links: [ { - component: LegendsPage, + component: require('./components/pages/LegendsPage').LegendsPage, key: 'Legends', name: 'Legends', url: '#/examples/Legends', diff --git a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx new file mode 100644 index 0000000000000..efe4070cedbd0 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { DemoPage } from '../DemoPage'; + +import { LegendsPageProps } from '@fluentui/react-examples/lib/react/Legends/Legends.doc'; + +export const LegendsPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx index f35b7e66a7221..947c8d05a7557 100644 --- a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx +++ b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; import { LegendsPageProps } from './LegendsPage.doc'; -export const TimePickerPage: React.FunctionComponent = props => { +export const LegendsPage: React.FunctionComponent = props => { const { platform } = props; return ; }; From cc29777c8ee4a213a7aae63cb35923c8cb0c9049 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 5 Jul 2023 16:28:34 +0530 Subject: [PATCH 09/61] Fix react examples charting path --- .../src/components/pages/LegendsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx index efe4070cedbd0..4c64e113123d9 100644 --- a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { DemoPage } from '../DemoPage'; -import { LegendsPageProps } from '@fluentui/react-examples/lib/react/Legends/Legends.doc'; +import { LegendsPageProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; export const LegendsPage = (props: { isHeaderVisible: boolean }) => ( From 3ee697f54e7cec2f5559745b7646f8b3b8e9c547 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 5 Jul 2023 16:39:20 +0530 Subject: [PATCH 10/61] Fix charting path in docs --- .../src/components/pages/LegendsPage.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx index 4c64e113123d9..ef4dfe339f84f 100644 --- a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx @@ -4,5 +4,8 @@ import { DemoPage } from '../DemoPage'; import { LegendsPageProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; export const LegendsPage = (props: { isHeaderVisible: boolean }) => ( - + ); From bf2375ddc86422a0e9f9538fa1fdaab9edc48a9c Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 5 Jul 2023 19:18:32 +0530 Subject: [PATCH 11/61] Try adding react charting to api docs --- apps/public-docsite-resources/config/api-docs.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 4f55e63ab2a5c..5863428d15dae 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -12,6 +12,7 @@ module.exports = { apiJsonPaths: [ 'packages/react', ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react'), dev: false }).map(dep => dep.packagePath), + 'packages/react-charting', ] .map(packagePath => path.join(gitRoot, packagePath, 'dist', path.basename(packagePath) + '.api.json')) .filter(apiJsonPath => fs.existsSync(apiJsonPath)), From 86ecd59b0da0e0ca9034577541bffd8ec14f36e9 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 16:46:33 +0530 Subject: [PATCH 12/61] Fix legend documentation issue --- apps/public-docsite-resources/config/api-docs.js | 2 +- .../react-charting/etc/react-charting.api.md | 6 +++--- .../src/components/Legends/Legends.tsx | 3 ++- .../src/components/Legends/Legends.types.ts | 16 ++++++++++++++-- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 5863428d15dae..5fca234eb73e1 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -89,7 +89,7 @@ module.exports = { 'TimePicker', 'Toggle', 'Tooltip', - 'Legends', ], + 'react-charting': ['Legends'], }, }; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index aa8889ca6c8d6..28355ac4c6d86 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -748,7 +748,7 @@ export interface IHorizontalDataPoint { y: number; } -// @public (undocumented) +// @public export interface ILegend { action?: VoidFunction; color: string; @@ -794,7 +794,7 @@ export interface ILegendsProps { theme?: ITheme; } -// @public (undocumented) +// @public export interface ILegendsStyles { hoverCardRoot: IStyle; hoverChange: IStyle; @@ -1434,7 +1434,7 @@ export interface IYValueHover { }; } -// @public (undocumented) +// @public export const Legends: React_2.FunctionComponent; // Warning: (ae-forgotten-export) The symbol "Points" needs to be exported by the entry point index.d.ts diff --git a/packages/react-charting/src/components/Legends/Legends.tsx b/packages/react-charting/src/components/Legends/Legends.tsx index 8e643e8af41b3..4b6148429664c 100644 --- a/packages/react-charting/src/components/Legends/Legends.tsx +++ b/packages/react-charting/src/components/Legends/Legends.tsx @@ -5,7 +5,8 @@ import { LegendsBase } from './Legends.base'; import { getStyles } from './Legends.styles'; /** - * {@docCategory TimePicker} + * Legends component. + * {@docCategory Legends} */ export const Legends: React.FunctionComponent = styled( LegendsBase, diff --git a/packages/react-charting/src/components/Legends/Legends.types.ts b/packages/react-charting/src/components/Legends/Legends.types.ts index f764787521976..ada8b08a636f1 100644 --- a/packages/react-charting/src/components/Legends/Legends.types.ts +++ b/packages/react-charting/src/components/Legends/Legends.types.ts @@ -7,8 +7,9 @@ import { IFocusZoneProps } from '@fluentui/react-focus'; import { CustomPoints, Points } from '../../utilities/utilities'; /** - * {@docCategory Legends} + * @public * ILegendOverflowData interface. + * {@docCategory Legends} */ export interface ILegendOverflowData { primary: ILegend[]; @@ -17,13 +18,19 @@ export interface ILegendOverflowData { } /** - * {@docCategory Legends} + * @public * ILegendSubComponentStyles interface. + * {@docCategory Legends} */ export interface ILegendSubComponentStyles { hoverCardStyles: IStyleFunctionOrObject; } +/** + * @public + * ILegendsStyles interface. + * {@docCategory Legends} + */ export interface ILegendsStyles { /** * Style set for the root of the legend component @@ -76,6 +83,11 @@ export interface ILegendsStyles { subComponentStyles: ILegendSubComponentStyles; } +/** + * @public + * ILegendsStyles interface. + * {@docCategory Legends} + */ export interface ILegend { /** * Defines the title of the legend From 4a616837e09cba7d042e122517750467d62640fd Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 17:52:14 +0530 Subject: [PATCH 13/61] Add more examples to legends --- .../react-charting/Legends/Legends.doc.tsx | 25 +++++++++++++++++ .../Legends/docs/LegendsBestPractices.md | 3 +- .../Legends/docs/LegendsOverview.md | 28 +++++++++++++++++-- 3 files changed, 51 insertions(+), 5 deletions(-) diff --git a/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx index 000e2a2416351..807597849769d 100644 --- a/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx +++ b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx @@ -2,9 +2,19 @@ import * as React from 'react'; import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; +import { LegendOverflowExample } from './Legends.Overflow.Example'; import { LegendBasicExample } from './Legends.Basic.Example'; +import { LegendWrapLinesExample } from './Legends.WrapLines.Example'; +import { LegendStyledExample } from './Legends.Styled.Example'; + +const LegendsOverflowExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx') as string; +const LegendsWrapLinesExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.WrapLines.Example.tsx') as string; const LegendsBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx') as string; +const LegendsStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx') as string; export const LegendsPageProps: IDocPageProps = { title: 'Legends', @@ -16,6 +26,21 @@ export const LegendsPageProps: IDocPageProps = { code: LegendsBasicExampleCode, view: , }, + { + title: 'Legends with overflow', + code: LegendsOverflowExampleCode, + view: , + }, + { + title: 'Legends with wrap lines', + code: LegendsWrapLinesExampleCode, + view: , + }, + { + title: 'Legend styled', + code: LegendsStyledExampleCode, + view: , + }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md'), diff --git a/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md index 96dcb8b153ee7..c774b97f517c5 100644 --- a/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md @@ -1,4 +1,3 @@ ### Content -Legend best practices content. -https://github.com/microsoft/fluentui/commit/7380b15b3c9997bad0e832fb17fade1b9db45aaf +Legend best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md index 2aa2eb36ce6c3..ec329dde6df55 100644 --- a/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md @@ -1,3 +1,25 @@ -A legend describes each of the component of the chart. The legends wrap based upon the space available for -them. If there is not enough space to show all legends on a single line, the legends fall into an overflow -menu. A button is shown to open the overflow menu and indicating the number of legends in it. +
+

+ A legend describes each of the component of the chart. The legends wrap based upon the space available for + them. If there is not enough space to show all legends on a single line, the legends fall into an overflow + menu. A button is shown to open the overflow menu and indicating the number of legends in it. +

+

Legend Actions

+

+ The legends are selectable. Action to be performed upon clicking a certain legend can be customized. Refer + to the action, hoverAction and onMouseOutAction properties to customize these actions. +

+

Legend shapes and colors

+

+ Use shape to customize the legend shape. Legend support different shapes like rectangle, + triangle, diamond, circle, pyramid, hexagon etc. Use stripePattern to have stripe pattern + applied to the legend shape. If isLineLegendInBarChart is set, the legend will have the shape + of a line with height 4px. All other legend shapes have a height of 12px +

+

Legend overflow

+

+ overflowText describes the overflow text. overflowProps can be used to set + properties like overflow layout direction to be stacked/vertical, overflow side to be start/end, overflow + styling and more. +

+
From e39c9336c346a70caf00501dde58c15b5f3a1e58 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 20:56:29 +0530 Subject: [PATCH 14/61] Add linechart to doc sit --- .../config/api-docs.js | 2 +- .../src/AppDefinition.tsx | 8 +- .../components/pages/Charting/LegendsPage.tsx | 11 +++ .../LineChartPage.tsx} | 4 +- .../react-charting/etc/react-charting.api.md | 4 +- .../src/components/LineChart/LineChart.tsx | 4 + .../components/LineChart/LineChart.types.ts | 5 ++ .../LineChart/LineChart.doc.tsx | 73 +++++++++++++++++++ .../LineChart/docs/LineChartBestPractices.md | 3 + .../LineChart/docs/LineChartOverview.md | 65 +++++++++++++++++ 10 files changed, 173 insertions(+), 6 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx rename apps/public-docsite-resources/src/components/pages/{LegendsPage.tsx => Charting/LineChartPage.tsx} (68%) create mode 100644 packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 5fca234eb73e1..af49fb21757bb 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -90,6 +90,6 @@ module.exports = { 'Toggle', 'Tooltip', ], - 'react-charting': ['Legends'], + 'react-charting': ['Legends', 'LineChart'], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 0e49a1ed8331f..40e9d99e4bdaf 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -520,11 +520,17 @@ export const AppDefinition: IAppDefinition = { name: 'Charting', links: [ { - component: require('./components/pages/LegendsPage').LegendsPage, + component: require('./components/pages/Charting/LegendsPage').LegendsPage, key: 'Legends', name: 'Legends', url: '#/examples/Legends', }, + { + component: require('./components/pages/Charting/LineChartPage').LineChartPage, + key: 'LineChart', + name: 'LineChart', + url: '#/examples/LineChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx new file mode 100644 index 0000000000000..845ab725106a3 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { LineChartPageProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; + +export const LineChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx similarity index 68% rename from apps/public-docsite-resources/src/components/pages/LegendsPage.tsx rename to apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx index ef4dfe339f84f..cae20957a415a 100644 --- a/apps/public-docsite-resources/src/components/pages/LegendsPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { DemoPage } from '../DemoPage'; +import { DemoPage } from '../../DemoPage'; import { LegendsPageProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; export const LegendsPage = (props: { isHeaderVisible: boolean }) => ( ); diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 28355ac4c6d86..5d1be1edba2fb 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -878,7 +878,7 @@ export interface ILineChartPoints { opacity?: number; } -// @public (undocumented) +// @public export interface ILineChartProps extends ICartesianChartProps { allowMultipleShapesForPoints?: boolean; // (undocumented) @@ -1443,7 +1443,7 @@ export const Legends: React_2.FunctionComponent; // @public export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof typeof CustomPoints; -// @public (undocumented) +// @public export const LineChart: React_2.FunctionComponent; // @public (undocumented) diff --git a/packages/react-charting/src/components/LineChart/LineChart.tsx b/packages/react-charting/src/components/LineChart/LineChart.tsx index 431062d970a37..5c31b3bdfa452 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.tsx @@ -5,6 +5,10 @@ import { LineChartBase } from './LineChart.base'; import { getStyles } from './LineChart.styles'; // Create a LineChart variant which uses these default styles and this styled subcomponent. +/** + * Linechart component. + * {@docCategory Legends} + */ export const LineChart: React.FunctionComponent = styled< ILineChartProps, ILineChartStyleProps, diff --git a/packages/react-charting/src/components/LineChart/LineChart.types.ts b/packages/react-charting/src/components/LineChart/LineChart.types.ts index e05e91499fec7..9261e55ee3ef6 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.types.ts +++ b/packages/react-charting/src/components/LineChart/LineChart.types.ts @@ -16,6 +16,11 @@ import { } from '../CommonComponents/index'; export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData }; + +/** + * ILineChartProps properties for line chart. + * {@docCategory Legends} + */ export interface ILineChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx new file mode 100644 index 0000000000000..7617a7a2168fe --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { LineChartBasicExample } from './LineChart.Basic.Example'; +import { LineChartStyledExample } from './LineChart.Styled.Example'; +import { LineChartMultipleExample } from './LineChart.Multiple.Example'; +import { LineChartEventsExample } from './LineChart.Events.Example'; +import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibility.Example'; +import { LineChartGapsExample } from './LineChart.Gaps.Example'; +import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; + +const LineChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; +const LineChartStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx') as string; +const MultipleLineChartExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx') as string; +const LineChartEventsExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx') as string; +const LineChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx') as string; +const LineChartGapsExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx') as string; +const LineChartCustomLocaleDateAxisExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx') as string; + +export const LineChartPageProps: IDocPageProps = { + title: 'LineChart', + componentName: 'LineChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/LineChart', + examples: [ + { + title: 'LineChart basic', + code: LineChartBasicExampleCode, + view: , + }, + { + title: 'LineChart styled', + code: LineChartStyledExampleCode, + view: , + }, + { + title: 'Multiple Line chart', + code: MultipleLineChartExampleCode, + view: , + }, + { + title: 'LineChart with events', + code: LineChartEventsExampleCode, + view: , + }, + { + title: 'LineChart Custom Accessibility', + code: LineChartCustomAccessibilityExampleCode, + view: , + }, + { + title: 'LineChart with gaps', + code: LineChartGapsExampleCode, + view: , + }, + { + title: 'LineChart custom date axis locale', + code: LineChartCustomLocaleDateAxisExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From 8752fa93b537b1653d4ce997ba9b5bc5eb41861d Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 21:12:12 +0530 Subject: [PATCH 15/61] Fix linechart doc comments --- packages/react-charting/src/components/LineChart/LineChart.tsx | 2 +- .../react-charting/src/components/LineChart/LineChart.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-charting/src/components/LineChart/LineChart.tsx b/packages/react-charting/src/components/LineChart/LineChart.tsx index 5c31b3bdfa452..03db6799f9347 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.tsx +++ b/packages/react-charting/src/components/LineChart/LineChart.tsx @@ -7,7 +7,7 @@ import { getStyles } from './LineChart.styles'; // Create a LineChart variant which uses these default styles and this styled subcomponent. /** * Linechart component. - * {@docCategory Legends} + * {@docCategory LineChart} */ export const LineChart: React.FunctionComponent = styled< ILineChartProps, diff --git a/packages/react-charting/src/components/LineChart/LineChart.types.ts b/packages/react-charting/src/components/LineChart/LineChart.types.ts index 9261e55ee3ef6..448ce7dbbd798 100644 --- a/packages/react-charting/src/components/LineChart/LineChart.types.ts +++ b/packages/react-charting/src/components/LineChart/LineChart.types.ts @@ -19,7 +19,7 @@ export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData /** * ILineChartProps properties for line chart. - * {@docCategory Legends} + * {@docCategory LineChart} */ export interface ILineChartProps extends ICartesianChartProps { /** From 9e180def400861c821c4109f7773ca9a222595a2 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 21:29:04 +0530 Subject: [PATCH 16/61] Enable linechart entry in sitedefinition --- .../src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 7845c9c1190bd..d32c32596e923 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -108,6 +108,7 @@ export const categories: { [name: string]: ICategory } = { }, Charting: { Legends: {}, + LineChart: {}, }, Utilities: { Announced: { From 7e6b06db16a30f8c131121a48ed47a8cf0ddc309 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 6 Jul 2023 21:55:18 +0530 Subject: [PATCH 17/61] Add lineChart entry in public-docsite --- .../src/pages/Controls/LineChartPage/LineChartPage.doc.ts | 8 ++++++++ .../src/pages/Controls/LineChartPage/LineChartPage.tsx | 8 ++++++++ 2 files changed, 16 insertions(+) create mode 100644 apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx diff --git a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts new file mode 100644 index 0000000000000..c2e1c9666b055 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { LineChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; + +export const LineChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx new file mode 100644 index 0000000000000..ce5d4ca8179ac --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { LineChartPageProps } from './LineChartPage.doc'; + +export const LineChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; From fa44560c812febfdacda6c03160eccb28259c7c5 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 10 Aug 2023 12:00:51 +0530 Subject: [PATCH 18/61] Add more sections in documentation for line chart --- .../src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx | 2 +- .../src/react-charting/LineChart/LineChart.doc.tsx | 3 +++ .../src/utilities/defaultSupportedPackages.ts | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index d32c32596e923..fc980c295affa 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -106,7 +106,7 @@ export const categories: { [name: string]: ICategory } = { ScrollablePane: {}, Tooltip: {}, }, - Charting: { + Charts: { Legends: {}, LineChart: {}, }, diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx index 7617a7a2168fe..a73c6b9ace78e 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx @@ -68,6 +68,9 @@ export const LineChartPageProps: IDocPageProps = { ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), + dos: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), + donts: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), + accessibility: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), isHeaderVisible: true, isFeedbackVisible: true, }; diff --git a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts index 1a096a6ada144..54a432b0a63c2 100644 --- a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts +++ b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts @@ -79,7 +79,7 @@ if (typesContext) { hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes }); exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes }); } -if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) { +if (true) { chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes }); } From 551f95f576f699c63811616b015e295cb272252e Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 10 Aug 2023 15:31:15 +0530 Subject: [PATCH 19/61] Enable area chart in docsite --- .../config/api-docs.js | 2 +- .../src/AppDefinition.tsx | 6 ++ .../pages/Charting/AreaChartPage.tsx | 11 ++++ .../pages/Charting/LineChartPage.tsx | 8 +-- .../SiteDefinition.pages/Controls/web.tsx | 1 + .../AreaChartPage/AreaChartPage.doc.ts | 8 +++ .../Controls/AreaChartPage/AreaChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 8 ++- .../src/components/AreaChart/AreaChart.tsx | 5 +- .../components/AreaChart/AreaChart.types.ts | 5 ++ .../AreaChart/AreaChart.doc.tsx | 57 ++++++++++++++++ .../AreaChart/docs/AreaChartBestPractices.md | 3 + .../AreaChart/docs/AreaChartOverview.md | 65 +++++++++++++++++++ 13 files changed, 178 insertions(+), 9 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index af49fb21757bb..ac5e96911bec7 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -90,6 +90,6 @@ module.exports = { 'Toggle', 'Tooltip', ], - 'react-charting': ['Legends', 'LineChart'], + 'react-charting': ['Legends', 'LineChart', 'AreaChart'], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 40e9d99e4bdaf..f219704a717d4 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -531,6 +531,12 @@ export const AppDefinition: IAppDefinition = { name: 'LineChart', url: '#/examples/LineChart', }, + { + component: require('./components/pages/Charting/AreaChartPage').AreaChartPage, + key: 'AreaChart', + name: 'AreaChart', + url: '#/examples/AreaChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx new file mode 100644 index 0000000000000..43e77d5234322 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { AreaChartPageProps } from '@fluentui/react-examples/lib/react-charting/AreaChart/AreaChart.doc'; + +export const AreaChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx index cae20957a415a..845ab725106a3 100644 --- a/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; import { DemoPage } from '../../DemoPage'; -import { LegendsPageProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; +import { LineChartPageProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; -export const LegendsPage = (props: { isHeaderVisible: boolean }) => ( +export const LineChartPage = (props: { isHeaderVisible: boolean }) => ( ); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index fc980c295affa..042af0579fe7c 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -109,6 +109,7 @@ export const categories: { [name: string]: ICategory } = { Charts: { Legends: {}, LineChart: {}, + AreaChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts new file mode 100644 index 0000000000000..0ae952d9b3a8e --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { AreaChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/AreaChart/AreaChart.doc'; + +export const AreaChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx new file mode 100644 index 0000000000000..88eb5c1d2fc8d --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { AreaChartPageProps } from './AreaChartPage.doc'; + +export const AreaChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 5d1be1edba2fb..817205291b9c5 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -24,7 +24,7 @@ import { ITheme as ITheme_2 } from '@fluentui/react'; import * as React_2 from 'react'; import { SVGProps } from 'react'; -// @public (undocumented) +// @public export const AreaChart: React_2.FunctionComponent; // @public (undocumented) @@ -137,7 +137,7 @@ export interface IAccessibilityProps { ariaLabelledBy?: string; } -// @public (undocumented) +// @public export interface IAreaChartProps extends ICartesianChartProps { culture?: string; data: IChartProps; @@ -885,6 +885,7 @@ export interface ILineChartProps extends ICartesianChartProps { colorFillBars?: IColorFillBarsProps[]; culture?: string; data: IChartProps; + enablePerfOptimization?: boolean; eventAnnotationProps?: IEventsAnnotationProps; getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined; onRenderCalloutPerDataPoint?: IRenderFunction; @@ -956,6 +957,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { culture?: string; customizedCallout?: any; datasetForXAxisDomain?: string[]; + enableFirstRenderOptimization?: boolean; focusZoneDirection?: FocusZoneDirection; // (undocumented) getAxisData?: any; @@ -963,7 +965,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { getGraphData?: any; getmargins?: (margins: IMargins) => void; isCalloutForStack?: boolean; - legendBars: JSX.Element; + legendBars: JSX.Element | null; maxOfYVal?: number; onChartMouseLeave?: () => void; points: any; diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.tsx index 4d892383ed215..4ccac694279f6 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.tsx @@ -4,7 +4,10 @@ import { IAreaChartProps, IAreaChartStyleProps, IAreaChartStyles } from '../../i import { AreaChartBase } from '../AreaChart/AreaChart.base'; import { getStyles } from './AreaChart.styles'; -// Create a AreaChart variant which uses these default styles and this styled subcomponent. +/** + * Areachart component. + * {@docCategory AreaChart} + */ export const AreaChart: React.FunctionComponent = styled< IAreaChartProps, IAreaChartStyleProps, diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts index ead09c32f65d7..8c7cc4d33ac8f 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.types.ts +++ b/packages/react-charting/src/components/AreaChart/AreaChart.types.ts @@ -16,6 +16,11 @@ import { } from '../CommonComponents/CartesianChart.types'; export type { IChildProps, IRefArrayData, IBasestate, ILineChartDataPoint, ILineChartPoints, IMargins }; + +/** + * IAreaChartProps properties for area chart. + * {@docCategory AreaChart} + */ export interface IAreaChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx new file mode 100644 index 0000000000000..53fead1df8248 --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx @@ -0,0 +1,57 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { AreaChartBasicExample } from './AreaChart.Basic.Example'; +import { AreaChartStyledExample } from './AreaChart.Styled.Example'; +import { AreaChartMultipleExample } from './AreaChart.Multiple.Example'; +import { AreaChartCustomAccessibilityExample } from './AreaChart.CustomAccessibility.Example'; +import { AreaChartLargeDataExample } from './AreaChart.LargeData.Example'; + +const AreaChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx') as string; +const AreaChartMultipleExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx') as string; +const AreaChartStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx') as string; +const AreaChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx') as string; +const AreaChartLargeDataExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx') as string; + +export const AreaChartPageProps: IDocPageProps = { + title: 'AreaChart', + componentName: 'AreaChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/AreaChart', + examples: [ + { + title: 'AreaChart basic', + code: AreaChartBasicExampleCode, + view: , + }, + { + title: 'AreaChart styled', + code: AreaChartStyledExampleCode, + view: , + }, + { + title: 'Multiple Area chart', + code: AreaChartMultipleExampleCode, + view: , + }, + { + title: 'AreaChart large data', + code: AreaChartLargeDataExampleCode, + view: , + }, + { + title: 'AreaChart Custom Accessibility', + code: AreaChartCustomAccessibilityExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/AreaChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/AreaChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From b02e4248a689a5b660ef1627c928a2ca9e172162 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 10 Aug 2023 21:29:34 +0530 Subject: [PATCH 20/61] Fix area chart doc link --- .../src/react-charting/AreaChart/AreaChart.doc.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 53fead1df8248..92f955dbf5489 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx @@ -50,8 +50,8 @@ export const AreaChartPageProps: IDocPageProps = { view: , }, ], - overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/AreaChartOverview.md'), - bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/AreaChartBestPractices.md'), + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md'), isHeaderVisible: true, isFeedbackVisible: true, }; From 48f50a5994ffd878d03977dd501d0e6431224940 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 10 Aug 2023 22:39:57 +0530 Subject: [PATCH 21/61] Add DonutChart, VerticalBarChart --- .../config/api-docs.js | 2 +- .../src/AppDefinition.tsx | 12 ++++ .../pages/Charting/DonutChartPage.tsx | 11 ++++ .../pages/Charting/VerticalBarChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 2 + .../DonutChartPage/DonutChartPage.doc.ts | 8 +++ .../DonutChartPage/DonutChartPage.tsx | 8 +++ .../VerticalBarChartPage.doc.ts | 8 +++ .../VerticalBarChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 8 +-- .../src/components/AreaChart/AreaChart.tsx | 1 + .../src/components/DonutChart/DonutChart.tsx | 4 ++ .../components/DonutChart/DonutChart.types.ts | 4 ++ .../VerticalBarChart/VerticalBarChart.tsx | 4 ++ .../VerticalBarChart.types.ts | 4 ++ .../DonutChart/DonutChart.doc.tsx | 49 ++++++++++++++ .../docs/DonutChartBestPractices.md | 3 + .../DonutChart/docs/DonutChartOverview.md | 65 ++++++++++++++++++ .../VerticalBarChart/VerticalBarChart.doc.tsx | 66 +++++++++++++++++++ .../docs/VerticalBarChartBestPractices.md | 3 + .../docs/VerticalBarChartOverview.md | 65 ++++++++++++++++++ 21 files changed, 341 insertions(+), 5 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md create mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index ac5e96911bec7..21216b9f30d63 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -90,6 +90,6 @@ module.exports = { 'Toggle', 'Tooltip', ], - 'react-charting': ['Legends', 'LineChart', 'AreaChart'], + 'react-charting': ['Legends', 'LineChart', 'AreaChart', 'DonutChart', 'VerticalBarChart'], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index f219704a717d4..817ea8953e1fd 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -537,6 +537,18 @@ export const AppDefinition: IAppDefinition = { name: 'AreaChart', url: '#/examples/AreaChart', }, + { + component: require('./components/pages/Charting/DonutChartPage').AreaChartPage, + key: 'DonutChart', + name: 'DonutChart', + url: '#/examples/DonutChart', + }, + { + component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarPage, + key: 'VerticalBarChart', + name: 'VerticalBarChart', + url: '#/examples/VerticalBarChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx new file mode 100644 index 0000000000000..499b8f972725c --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { DonutChartPageProps } from '@fluentui/react-examples/lib/react-charting/DonutChart/DonutChart.doc'; + +export const DonutChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx new file mode 100644 index 0000000000000..ec2db91a57ba6 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { VerticalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; + +export const VerticalBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 042af0579fe7c..8d5e1746fed8b 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -110,6 +110,8 @@ export const categories: { [name: string]: ICategory } = { Legends: {}, LineChart: {}, AreaChart: {}, + DonutChart: {}, + VerticalBarChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts new file mode 100644 index 0000000000000..1c61fff3bb6a4 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { DonutChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/DonutChart/DonutChart.doc'; + +export const DonutChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx new file mode 100644 index 0000000000000..21868621540b2 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { DonutChartPageProps } from './DonutChartPage.doc'; + +export const DonutChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts new file mode 100644 index 0000000000000..cde767e2aca5c --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { VerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; + +export const VerticalBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx new file mode 100644 index 0000000000000..c4c0c07d95114 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { VerticalBarChartPageProps } from './VerticalBarChartPage.doc'; + +export const VerticalBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 817205291b9c5..93ee62d98ec8f 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -87,7 +87,7 @@ export const DataVizPalette: { highSuccess: string; }; -// @public (undocumented) +// @public export const DonutChart: React_2.FunctionComponent; // @public (undocumented) @@ -422,7 +422,7 @@ export interface IDataPoint { export interface IDonutChart { } -// @public (undocumented) +// @public export interface IDonutChartProps extends ICartesianChartProps { calloutProps?: Partial; culture?: string; @@ -1305,7 +1305,7 @@ export interface IVerticalBarChartDataPoint { yAxisCalloutData?: string; } -// @public (undocumented) +// @public export interface IVerticalBarChartProps extends ICartesianChartProps { barWidth?: number; chartTitle?: string; @@ -1503,7 +1503,7 @@ export enum TreeTraverse { preOrder = 1 } -// @public (undocumented) +// @public export const VerticalBarChart: React_2.FunctionComponent; // @public (undocumented) diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.tsx index 4ccac694279f6..f15f1db066945 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.tsx @@ -4,6 +4,7 @@ import { IAreaChartProps, IAreaChartStyleProps, IAreaChartStyles } from '../../i import { AreaChartBase } from '../AreaChart/AreaChart.base'; import { getStyles } from './AreaChart.styles'; +// Create a AreaChart variant which uses these default styles and this styled subcomponent. /** * Areachart component. * {@docCategory AreaChart} diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.tsx index c910f03dd81e5..fd381c1705b9f 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.tsx +++ b/packages/react-charting/src/components/DonutChart/DonutChart.tsx @@ -5,6 +5,10 @@ import { DonutChartBase } from './DonutChart.base'; import { getStyles } from './DonutChart.styles'; // Create a DonutChart variant which uses these default styles and this styled subcomponent. +/** + * Donutchart component. + * {@docCategory DonutChart} + */ export const DonutChart: React.FunctionComponent = styled< IDonutChartProps, IDonutChartStyleProps, diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.types.ts b/packages/react-charting/src/components/DonutChart/DonutChart.types.ts index eba2b6ec1826c..94f31d39523c4 100644 --- a/packages/react-charting/src/components/DonutChart/DonutChart.types.ts +++ b/packages/react-charting/src/components/DonutChart/DonutChart.types.ts @@ -6,6 +6,10 @@ import { IChartProps, IChartDataPoint } from './index'; export interface IDonutChart {} +/** + * Donutchart component. + * {@docCategory DonutChart} + */ export interface IDonutChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx index 8bbc224db18bc..2a9ec059bcd70 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx @@ -5,6 +5,10 @@ import { VerticalBarChartBase } from './VerticalBarChart.base'; import { getStyles } from './VerticalBarChart.styles'; // Create a VerticalBarChart variant which uses these default styles and this styled subcomponent. +/** + * VerticalBarChart component. + * {@docCategory VerticalBarChart} + */ export const VerticalBarChart: React.FunctionComponent = styled< IVerticalBarChartProps, IVerticalBarChartStyleProps, diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts index 4335748dea8eb..b60d69f88adbe 100644 --- a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts +++ b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.types.ts @@ -8,6 +8,10 @@ import { } from '../../index'; import { ILineChartLineOptions } from '../../types/index'; +/** + * VerticalBarChart component. + * {@docCategory VerticalBarChart} + */ export interface IVerticalBarChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx new file mode 100644 index 0000000000000..6290e1afc2a59 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { DonutChartBasicExample } from './DonutChart.Basic.Example'; +import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; +import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; +import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; + +const DonutChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx') as string; +const DonutChartDynamicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx') as string; +const DonutChartCustomCalloutExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomCallout.Example.tsx') as string; +const DonutChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx') as string; + +export const AreaChartPageProps: IDocPageProps = { + title: 'DonutChart', + componentName: 'DonutChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/DonutChart', + examples: [ + { + title: 'DonutChart basic', + code: DonutChartBasicExampleCode, + view: , + }, + { + title: 'DonutChart dynamic', + code: DonutChartDynamicExampleCode, + view: , + }, + { + title: 'DonutChart custom callout', + code: DonutChartCustomCalloutExampleCode, + view: , + }, + { + title: 'DonutChart Custom Accessibility', + code: DonutChartCustomAccessibilityExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx new file mode 100644 index 0000000000000..3779e4aa360c6 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { VerticalBarChartBasicExample } from './VerticalBarChart.Basic.Example'; +import { VerticalBarChartStyledExample } from './VerticalBarChart.Styled.Example'; +import { VerticalBarChartDynamicExample } from './VerticalBarChart.Dynamic.Example'; +import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.Example'; +import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example'; +import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; + +const VerticalBarChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx') as string; +const VerticalBarChartStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Styled.Example.tsx') as string; +const VerticalBarChartDynamicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Dynamic.Example.tsx') as string; +const VerticalBarChartTooltipExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTooltip.Example.tsx') as string; +const VerticalBarChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx') as string; +const VerticalBarChartRotateLabelsExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx') as string; + +export const VerticalBarChartPageProps: IDocPageProps = { + title: 'VerticalBarChart', + componentName: 'VerticalBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/VerticalBarChart', + examples: [ + { + title: 'VerticalBarChart basic', + code: VerticalBarChartBasicExampleCode, + view: , + }, + { + title: 'VerticalBarChart styled', + code: VerticalBarChartStyledExampleCode, + view: , + }, + { + title: 'VerticalBarChart dynamic', + code: VerticalBarChartDynamicExampleCode, + view: , + }, + { + title: 'VerticalBarChart tooltip', + code: VerticalBarChartTooltipExampleCode, + view: , + }, + { + title: 'VerticalBarChart Custom Accessibility', + code: VerticalBarChartCustomAccessibilityExampleCode, + view: , + }, + { + title: 'VerticalBarChart rotated labels', + code: VerticalBarChartRotateLabelsExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From 737e2c46dd2396d253c90d0e8b9eb72dff5778e0 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 11:34:10 +0530 Subject: [PATCH 22/61] fix prop name --- .../src/react-charting/DonutChart/DonutChart.doc.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx index 6290e1afc2a59..8c00063b3f73f 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx @@ -16,7 +16,7 @@ const DonutChartCustomCalloutExampleCode = const DonutChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx') as string; -export const AreaChartPageProps: IDocPageProps = { +export const DonutChartPageProps: IDocPageProps = { title: 'DonutChart', componentName: 'DonutChart', componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/DonutChart', From b3e45864b40112d3d090bbfe1e16e99b09f42215 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 12:27:56 +0530 Subject: [PATCH 23/61] Add gauge chart to docsite --- .../config/api-docs.js | 11 +++- .../src/AppDefinition.tsx | 8 ++- .../pages/Charting/GaugeChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 1 + .../GaugeChartPage/GaugeChartPage.doc.ts | 8 +++ .../GaugeChartPage/GaugeChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 6 +- .../src/components/GaugeChart/GaugeChart.tsx | 4 ++ .../components/GaugeChart/GaugeChart.types.ts | 8 +++ .../GaugeChart/GaugeChart.doc.tsx | 33 ++++++++++ .../docs/GaugeChartBestPractices.md | 3 + .../GaugeChart/docs/GaugeChartOverview.md | 65 +++++++++++++++++++ 12 files changed, 161 insertions(+), 5 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/GaugeChart/GaugeChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 21216b9f30d63..bb8c62df061e8 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -90,6 +90,15 @@ module.exports = { 'Toggle', 'Tooltip', ], - 'react-charting': ['Legends', 'LineChart', 'AreaChart', 'DonutChart', 'VerticalBarChart'], + 'react-charting': [ + 'Legends', + 'LineChart', + 'AreaChart', + 'DonutChart', + 'VerticalBarChart', + 'HorizontalBarChart', + 'PieChart', + 'GaugeChart', + ], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 817ea8953e1fd..a1ce42c0c0b85 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -544,11 +544,17 @@ export const AppDefinition: IAppDefinition = { url: '#/examples/DonutChart', }, { - component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarPage, + component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarChartPage, key: 'VerticalBarChart', name: 'VerticalBarChart', url: '#/examples/VerticalBarChart', }, + { + component: require('./components/pages/Charting/GaugeChartPage').GaugeChartPage, + key: 'GaugeChart', + name: 'GaugeChart', + url: '#/examples/GaugeChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx new file mode 100644 index 0000000000000..3dd0a25592867 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { GaugeChartPageProps } from '@fluentui/react-examples/lib/react-charting/GaugeChart/GaugeChart.doc'; + +export const GaugeChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 8d5e1746fed8b..c797403fd9584 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -112,6 +112,7 @@ export const categories: { [name: string]: ICategory } = { AreaChart: {}, DonutChart: {}, VerticalBarChart: {}, + GaugeChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts new file mode 100644 index 0000000000000..32156925319c1 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { GaugeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/GaugeChart/GaugeChart.doc'; + +export const GaugeChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx new file mode 100644 index 0000000000000..0311aa5e50ee2 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { GaugeChartPageProps } from './GaugeChartPage.doc'; + +export const GaugeChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 93ee62d98ec8f..50a787dfa5445 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -90,7 +90,7 @@ export const DataVizPalette: { // @public export const DonutChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const GaugeChart: React_2.FunctionComponent; // @public (undocumented) @@ -464,7 +464,7 @@ export interface IEventsAnnotationProps { strokeColor?: string; } -// @public (undocumented) +// @public export interface IGaugeChartProps { calloutProps?: Partial; chartTitle?: string; @@ -487,7 +487,7 @@ export interface IGaugeChartProps { width?: number; } -// @public (undocumented) +// @public export interface IGaugeChartSegment { accessibilityData?: IAccessibilityProps; color?: string; diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx index 3dc45bcfc9091..4a6f5c524ec4d 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx @@ -4,6 +4,10 @@ import { GaugeChartBase } from './GaugeChart.base'; import { getStyles } from './GaugeChart.styles'; import { IGaugeChartProps, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types'; +/** + * GaugeChart component. + * {@docCategory GaugeChart} + */ export const GaugeChart: React.FunctionComponent = styled< IGaugeChartProps, IGaugeChartStyleProps, diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 49a1456494c4f..0d3ecdef2716e 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts @@ -4,6 +4,10 @@ import { ILegendsProps } from '../Legends/index'; import { IAccessibilityProps } from '../../types/index'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; +/** + * Gaugechart component. + * {@docCategory GaugeChart} + */ export interface IGaugeChartSegment { /** * Legend text for a segment @@ -31,6 +35,10 @@ export enum GaugeValueFormat { Fraction = 'fraction', } +/** + * Gaugechart component. + * {@docCategory GaugeChart} + */ export interface IGaugeChartProps { /** * Width of the chart diff --git a/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.doc.tsx b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.doc.tsx new file mode 100644 index 0000000000000..625746bdde537 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/GaugeChart.doc.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { GaugeChartBasicExample } from './GaugeChart.Basic.Example'; +import { GaugeChartVariantExample } from './GaugeChart.Variant.Example'; + +const GaugeChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/GaugeChart.Basic.Example.tsx') as string; +const GaugeChartVariantExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/GaugeChart.Variant.Example.tsx') as string; + +export const GaugeChartPageProps: IDocPageProps = { + title: 'GaugeChart', + componentName: 'GaugeChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/GaugeChart', + examples: [ + { + title: 'GaugeChart basic', + code: GaugeChartBasicExampleCode, + view: , + }, + { + title: 'GaugeChart single value', + code: GaugeChartVariantExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From f057f7339ebc4c84e8b616ac5f880a94a45aeadc Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 13:12:50 +0530 Subject: [PATCH 24/61] Add GroupedVerticalBarChart --- .../src/AppDefinition.tsx | 7 ++ .../Charting/GroupedVerticalBarChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 1 + .../GroupedVerticalBarChartPage.doc.ts | 8 +++ .../GroupedVerticalBarChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 4 +- .../GroupedVerticalBarChart.tsx | 4 ++ .../GroupedVerticalBarChart.types.tsx | 4 ++ .../GroupedVerticalBarChart.doc.tsx | 50 ++++++++++++++ .../GroupedVerticalBarChartBestPractices.md | 3 + .../docs/GroupedVerticalBarChartOverview.md | 65 +++++++++++++++++++ 11 files changed, 163 insertions(+), 2 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index a1ce42c0c0b85..bdc1e1bb434dc 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -555,6 +555,13 @@ export const AppDefinition: IAppDefinition = { name: 'GaugeChart', url: '#/examples/GaugeChart', }, + { + component: require('./components/pages/Charting/GroupedVerticalBarChartPage') + .GroupedVerticalBarChartPage, + key: 'GroupedVerticalBarChart', + name: 'GroupedVerticalBarChart', + url: '#/examples/GroupedVerticalBarChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx new file mode 100644 index 0000000000000..55a950930ca98 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { GroupedVerticalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc'; + +export const GroupedVerticalBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index c797403fd9584..3b8148b79f7da 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -113,6 +113,7 @@ export const categories: { [name: string]: ICategory } = { DonutChart: {}, VerticalBarChart: {}, GaugeChart: {}, + GroupedVerticalBarChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts new file mode 100644 index 0000000000000..50a76bd55be9e --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { GroupedVerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc'; + +export const GroupedVerticalBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx new file mode 100644 index 0000000000000..d28e6e3e21997 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { GroupedVerticalBarChartPageProps } from './GroupedVerticalBarChartPage.doc'; + +export const GroupedVerticalBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 50a787dfa5445..7d69ed33c0908 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -110,7 +110,7 @@ export const getColorFromToken: (token: string, isDarkTheme?: boolean) => string // @public (undocumented) export const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string; -// @public (undocumented) +// @public export const GroupedVerticalBarChart: React_2.FunctionComponent; // @public (undocumented) @@ -535,7 +535,7 @@ export interface IGroupedVerticalBarChartData { stackCallOutAccessibilityData?: IAccessibilityProps; } -// @public (undocumented) +// @public export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { barwidth?: number; chartTitle?: string; diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx index d2a6d2f8a1214..2b3100a99c627 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx @@ -9,6 +9,10 @@ import { GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base'; import { getStyles } from './GroupedVerticalBarChart.styles'; // Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent. +/** + * GroupedVerticalBarchart component. + * {@docCategory GroupedVerticalBarChart} + */ export const GroupedVerticalBarChart: React.FunctionComponent = styled< IGroupedVerticalBarChartProps, IGroupedVerticalBarChartStyleProps, diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx index 23e717a5a4a44..018f4e2da4449 100644 --- a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx +++ b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx @@ -8,6 +8,10 @@ import { IGVBarChartSeriesPoint, } from '../../index'; +/** + * GroupedVerticalBarchart component. + * {@docCategory GroupedVerticalBarChart} + */ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { /** * chart title for the chart diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc.tsx new file mode 100644 index 0000000000000..63303d779518b --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { GroupedVerticalBarChartBasicExample } from './GroupedVerticalBarChart.Basic.Example'; +import { GroupedVerticalBarChartTruncatedExample } from './GroupedVerticalBarChart.Truncated.Example'; +import { GroupedVerticalBarChartStyledExample } from './GroupedVerticalBarChart.Styled.Example'; +import { GroupedVerticalBarChartCustomAccessibilityExample } from './GroupedVerticalBarChart.CustomAccessibility.Example'; + +const GroupedVerticalBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx') as string; +const GroupedVerticalStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx') as string; +const GroupedVerticalTruncatedExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx') as string; +const GroupedVerticalCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx') as string; + +export const GroupedVerticalBarChartPageProps: IDocPageProps = { + title: 'GroupedVerticalBarChart', + componentName: 'GroupedVerticalBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/GroupedVerticalBarChart', + examples: [ + { + title: 'GroupedVerticalBarChart basic', + code: GroupedVerticalBasicExampleCode, + view: , + }, + { + title: 'GroupedVerticalBarChart styled', + code: GroupedVerticalStyledExampleCode, + view: , + }, + { + title: 'GroupedVerticalBarChart truncated', + code: GroupedVerticalTruncatedExampleCode, + view: , + }, + { + title: 'GroupedVerticalBarChart custom accessibility', + code: GroupedVerticalCustomAccessibilityExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From e0708be354417b8c7f235fefc710396be32b7705 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 13:33:03 +0530 Subject: [PATCH 25/61] Add Heatmap, HorizontalBarChart --- .../config/api-docs.js | 2 + .../src/AppDefinition.tsx | 12 ++++ .../pages/Charting/HeatMapChartPage.tsx | 11 ++++ .../pages/Charting/HorizontalBarChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 2 + .../HeatMapChartPage/HeatMapChartPage.doc.ts | 8 +++ .../HeatMapChartPage/HeatMapChartPage.tsx | 8 +++ .../HorizontalBarChartPage.doc.ts | 8 +++ .../HorizontalBarChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 8 +-- .../components/HeatMapChart/HeatMapChart.ts | 4 ++ .../HeatMapChart/HeatMapChart.types.ts | 4 ++ .../HorizontalBarChart/HorizontalBarChart.tsx | 4 ++ .../HorizontalBarChart.types.ts | 4 ++ .../HeatMapChart/HeatMapChart.doc.tsx | 31 +++++++++ .../docs/HeatMapChartBestPractices.md | 3 + .../HeatMapChart/docs/HeatMapChartOverview.md | 65 +++++++++++++++++++ .../HorizontalBarChart.doc.tsx | 58 +++++++++++++++++ .../docs/HorizontalBarChartBestPractices.md | 3 + .../docs/HorizontalBarChartOverview.md | 65 +++++++++++++++++++ 20 files changed, 315 insertions(+), 4 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/HeatMapChart/HeatMapChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index bb8c62df061e8..e3d65045d900e 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -96,6 +96,8 @@ module.exports = { 'AreaChart', 'DonutChart', 'VerticalBarChart', + 'GroupedVerticalBarChart', + 'HeatMapChart', 'HorizontalBarChart', 'PieChart', 'GaugeChart', diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index bdc1e1bb434dc..9ce3f7b195013 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -562,6 +562,18 @@ export const AppDefinition: IAppDefinition = { name: 'GroupedVerticalBarChart', url: '#/examples/GroupedVerticalBarChart', }, + { + component: require('./components/pages/Charting/HeatMapChartPage').HeatMapChartPage, + key: 'HeatMapChart', + name: 'HeatMapChart', + url: '#/examples/HeatMapChart', + }, + { + component: require('./components/pages/Charting/HorizontalBarChartPage').HorizontalBarChartPage, + key: 'HorizontalBarChart', + name: 'HorizontalBarChart', + url: '#/examples/HorizontalBarChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx new file mode 100644 index 0000000000000..6925eac195262 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { HeatMapChartPageProps } from '@fluentui/react-examples/lib/react-charting/HeatMapChart/HeatMapChart.doc'; + +export const HeatMapChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx new file mode 100644 index 0000000000000..4fe7dceda15e2 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { HorizontalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChart/HorizontalBarChart.doc'; + +export const HorizontalBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 3b8148b79f7da..f3f688e3c9ca0 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -114,6 +114,8 @@ export const categories: { [name: string]: ICategory } = { VerticalBarChart: {}, GaugeChart: {}, GroupedVerticalBarChart: {}, + HeatMapChart: {}, + HorizontalBarChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts new file mode 100644 index 0000000000000..6a5cd70a9e340 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { HeatMapChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HeatMapChart/HeatMapChart.doc'; + +export const HeatMapChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx new file mode 100644 index 0000000000000..e36120b17c402 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { HeatMapChartPageProps } from './HeatMapChartPage.doc'; + +export const HeatMapChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts new file mode 100644 index 0000000000000..f009adfd8a525 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { HorizontalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChart/HorizontalBarChart.doc'; + +export const HorizontalBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx new file mode 100644 index 0000000000000..2274cd8fdcf99 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { HorizontalBarChartPageProps } from './HorizontalBarChartPage.doc'; + +export const HorizontalBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 7d69ed33c0908..0d1ad0d548157 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -113,10 +113,10 @@ export const getNextColor: (index: number, offset?: number, isDarkTheme?: boolea // @public export const GroupedVerticalBarChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const HeatMapChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const HorizontalBarChart: React_2.FunctionComponent; // @public (undocumented) @@ -617,7 +617,7 @@ export interface IHeatMapChartDataPoint { y: string | Date | number; } -// @public (undocumented) +// @public export interface IHeatMapChartProps extends Pick> { chartTitle?: string; culture?: string; @@ -651,7 +651,7 @@ export interface IHeatMapChartStyles { text?: IStyle; } -// @public (undocumented) +// @public export interface IHorizontalBarChartProps { barChartCustomData?: IRenderFunction; barHeight?: number; diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts index dca4ef637b800..1b61adb05e505 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts @@ -4,6 +4,10 @@ import { IHeatMapChartProps, IHeatMapChartStyleProps, IHeatMapChartStyles } from import { getHeatMapChartStyles } from './HeatMapChart.styles'; import { HeatMapChartBase } from './HeatMapChart.base'; +/** + * HeatMapChart component. + * {@docCategory HeatMapChart} + */ export const HeatMapChart: React.FunctionComponent = styled< IHeatMapChartProps, IHeatMapChartStyleProps, diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index 3a9540a5de833..b0fd6c50a3592 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts @@ -9,6 +9,10 @@ import { import { ILegendsProps } from '../Legends/Legends.types'; import { IHeatMapChartData } from '../../types/IDataPoint'; +/** + * HeatMapChart component. + * {@docCategory HeatMapChart} + */ export interface IHeatMapChartProps extends Pick> { /** * chart title for the chart diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx index 1f661c3f0441d..271ee3a508eb8 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -9,6 +9,10 @@ import { HorizontalBarChartBase } from './HorizontalBarChart.base'; import { getHorizontalBarChartStyles } from './HorizontalBarChart.styles'; // Create a HorizontalBarChart variant which uses these default styles and this styled subcomponent. +/** + * HorizontalBarChart component. + * {@docCategory HorizontalBarChart} + */ export const HorizontalBarChart: React.FunctionComponent = styled< IHorizontalBarChartProps, IHorizontalBarChartStyleProps, diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts index 506a05a27d1ec..947ba41be8a42 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts @@ -3,6 +3,10 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling'; import { ICalloutProps } from '@fluentui/react/lib/Callout'; import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +/** + * HorizontalBarChart component. + * {@docCategory HorizontalBarChart} + */ export interface IHorizontalBarChartProps { /** * An array of chart data points for the Horizontal bar chart diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChart.doc.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChart.doc.tsx new file mode 100644 index 0000000000000..6f691d445ab30 --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChart.doc.tsx @@ -0,0 +1,31 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { HeatMapChartBasicExample } from './HeatMapChartBasic.Example'; +import { HeatMapChartCustomAccessibilityExample } from './HeatMapChartBasic.CustomAccessibility.Example'; + +const HeatMapChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx'); +const HeatMapChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx'); + +export const HeatMapChartPageProps: IDocPageProps = { + title: 'HeatMapChart', + componentName: 'HeatMapChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/HeatMapChart', + examples: [ + { + title: 'HeatMapChart basic', + code: HeatMapChartBasicExampleCode, + view: , + }, + { + title: 'HeatMapChart custom accessibility', + code: HeatMapChartCustomAccessibilityExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx new file mode 100644 index 0000000000000..0187f1fb900df --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx @@ -0,0 +1,58 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { HorizontalBarChartBasicExample } from './HorizontalBarChart.Basic.Example'; +import { HorizontalBarChartCustomCalloutExample } from './HorizontalBarChart.CustomCallout.Example'; +import { HorizontalBarChartBenchmarkExample } from './HorizontalBarChart.Benchmark.Example'; +import { HorizontalBarChartCustomAccessibilityExample } from './HorizontalBarChart.CustomAccessibility.Example'; +import { HorizontalBarChartVariantExample } from './HorizontalBarChart.Variant.Example'; + +const HorizontalBarChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx') as string; +const HorizontalBarChartCustomCalloutExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx') as string; +const HorizontalBarChartBenchmarkExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx') as string; +const HorizontalBarChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx') as string; +const HorizontalBarChartVariantExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx') as string; + +export const HorizontalBarChartPageProps: IDocPageProps = { + title: 'HorizontalBarChart', + componentName: 'HorizontalBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/HorizontalBarChart', + examples: [ + { + title: 'HorizontalBarChart n/m scale', + code: HorizontalBarChartBasicExampleCode, + view: , + }, + { + title: 'HorizontalBarChart custom accessibility', + code: HorizontalBarChartCustomAccessibilityExampleCode, + view: , + }, + { + title: 'HorizontalBarChart absolute scale', + code: HorizontalBarChartVariantExampleCode, + view: , + }, + { + title: 'HorizontalBarChart benchmark', + code: HorizontalBarChartBenchmarkExampleCode, + view: , + }, + { + title: 'HorizontalBarChart custom callout', + code: HorizontalBarChartCustomCalloutExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From 9659a5974388ba284adf793d9ea4795e4c117ed0 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 13:56:39 +0530 Subject: [PATCH 26/61] Add HorizontalBarChartWithAxis --- .../config/api-docs.js | 1 + .../src/AppDefinition.tsx | 7 ++ .../HorizontalBarChartWithAxisPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 1 + .../HorizontalBarChartWithAxisPage.doc.ts | 8 +++ .../HorizontalBarChartWithAxisPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 4 +- .../HorizontalBarChartWithAxis.tsx | 4 ++ .../HorizontalBarChartWithAxis.types.ts | 4 ++ .../HorizontalBarChartWithAxis.doc.tsx | 42 ++++++++++++ ...HorizontalBarChartWithAxisBestPractices.md | 3 + .../HorizontalBarChartWithAxisOverview.md | 65 +++++++++++++++++++ 12 files changed, 156 insertions(+), 2 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index e3d65045d900e..ff6f0d51966a3 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -99,6 +99,7 @@ module.exports = { 'GroupedVerticalBarChart', 'HeatMapChart', 'HorizontalBarChart', + 'HorizontalBarChartWithAxis', 'PieChart', 'GaugeChart', ], diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 9ce3f7b195013..58be52c62feb7 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -574,6 +574,13 @@ export const AppDefinition: IAppDefinition = { name: 'HorizontalBarChart', url: '#/examples/HorizontalBarChart', }, + { + component: require('./components/pages/Charting/HorizontalBarChartWithAxisPage') + .HorizontalBarChartWithAxisPage, + key: 'HorizontalBarChartWithAxis', + name: 'HorizontalBarChartWithAxis', + url: '#/examples/HorizontalBarChartWithAxis', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx new file mode 100644 index 0000000000000..d323c3f81c4f3 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { HorizontalBarChartWithAxisPageProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc'; + +export const HorizontalBarChartWithAxisPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index f3f688e3c9ca0..bac37f31b95e6 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -116,6 +116,7 @@ export const categories: { [name: string]: ICategory } = { GroupedVerticalBarChart: {}, HeatMapChart: {}, HorizontalBarChart: {}, + HorizontalBarChartWithAxis: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts new file mode 100644 index 0000000000000..08a815a305250 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { HorizontalBarChartWithAxisPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc'; + +export const HorizontalBarChartWithAxisPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx new file mode 100644 index 0000000000000..b6395e88547e7 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { HorizontalBarChartWithAxisPageProps } from './HorizontalBarChartWithAxisPage.doc'; + +export const HorizontalBarChartWithAxisPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 0d1ad0d548157..8edeb163eab3c 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -127,7 +127,7 @@ export enum HorizontalBarChartVariant { PartToWhole = "part-to-whole" } -// @public (undocumented) +// @public export const HorizontalBarChartWithAxis: React_2.FunctionComponent; // @public (undocumented) @@ -710,7 +710,7 @@ export interface IHorizontalBarChartWithAxisDataPoint { yAxisCalloutData?: string; } -// @public (undocumented) +// @public export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { barHeight?: number; chartTitle?: string; diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx index fd4c19751574e..b47c41b9b4434 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx @@ -9,6 +9,10 @@ import { HorizontalBarChartWithAxisBase } from './HorizontalBarChartWithAxis.bas import { getStyles } from './HorizontalBarChartWithAxis.styles'; // Create a HorizontalBarChartWithAxis variant which uses these default styles and this styled subcomponent. +/** + * HorizontalBarChartWithAxis component. + * {@docCategory HorizontalBarChartWithAxis} + */ export const HorizontalBarChartWithAxis: React.FunctionComponent = styled< IHorizontalBarChartWithAxisProps, IHorizontalBarChartWithAxisStyleProps, diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts index 764d054b29679..a6f41315f08a1 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts @@ -7,6 +7,10 @@ import { IHorizontalBarChartWithAxisDataPoint, } from '../../index'; +/** + * HorizontalBarChartWithAxis component. + * {@docCategory HorizontalBarChartWithAxis} + */ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx new file mode 100644 index 0000000000000..11b8ce241173b --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx @@ -0,0 +1,42 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { HorizontalBarChartWithAxisBasicExample } from './HorizontalBarChartWithAxis.Basic.Example'; +import { HorizontalBarChartWithAxisTooltipExample } from './HorizontalBarChartWithAxis.AxisTooltip.Example'; +import { HorizontalBarChartWithAxisStringAxisTooltipExample } from './HorizontalBarChartWithAxis.StringAxisTooltip.Example'; + +const HorizontalBarChartWithAxisBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx') as string; +const HorizontalBarChartWithAxisTooltipExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx') as string; +const HorizontalBarChartWithAxisStringAxisTooltipExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx') as string; + +export const HorizontalBarChartWithAxisPageProps: IDocPageProps = { + title: 'HorizontalBarChartWithAxis', + componentName: 'HorizontalBarChartWithAxis', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/HorizontalBarChartWithAxis', + examples: [ + { + title: 'HorizontalBarChartWithAxis basic', + code: HorizontalBarChartWithAxisBasicExampleCode, + view: , + }, + { + title: 'HorizontalBarChartWithAxis tooltip', + code: HorizontalBarChartWithAxisTooltipExampleCode, + view: , + }, + { + title: 'HorizontalBarChartWithAxis string axis tooltip', + code: HorizontalBarChartWithAxisStringAxisTooltipExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From 91672959b497aa3dfc02458bc17c2d8b8aea2800 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 14:09:04 +0530 Subject: [PATCH 27/61] Add piechart, sankeychart --- .../config/api-docs.js | 1 + .../src/AppDefinition.tsx | 12 ++++ .../pages/Charting/PieChartPage.tsx | 11 ++++ .../pages/Charting/SankeyChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 2 + .../Controls/PieChartPage/PieChartPage.doc.ts | 8 +++ .../Controls/PieChartPage/PieChartPage.tsx | 8 +++ .../SankeyChartPage/SankeyChartPage.doc.ts | 8 +++ .../SankeyChartPage/SankeyChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 8 +-- .../src/components/PieChart/PieChart.tsx | 4 ++ .../src/components/PieChart/PieChart.types.ts | 4 ++ .../components/SankeyChart/SankeyChart.tsx | 4 ++ .../SankeyChart/SankeyChart.types.ts | 4 ++ .../react-charting/PieChart/PieChart.doc.tsx | 33 ++++++++++ .../PieChart/docs/PieChartBestPractices.md | 3 + .../PieChart/docs/PieChartOverview.md | 65 +++++++++++++++++++ .../SankeyChart/SankeyChart.doc.tsx | 33 ++++++++++ .../docs/SankeyChartBestPractices.md | 3 + .../SankeyChart/docs/SankeyChartOverview.md | 65 +++++++++++++++++++ 20 files changed, 291 insertions(+), 4 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/PieChart/PieChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md create mode 100644 packages/react-examples/src/react-charting/SankeyChart/SankeyChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index ff6f0d51966a3..cc427e000d42c 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -102,6 +102,7 @@ module.exports = { 'HorizontalBarChartWithAxis', 'PieChart', 'GaugeChart', + 'SankeyChart', ], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 58be52c62feb7..409a97eb04c0f 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -581,6 +581,18 @@ export const AppDefinition: IAppDefinition = { name: 'HorizontalBarChartWithAxis', url: '#/examples/HorizontalBarChartWithAxis', }, + { + component: require('./components/pages/Charting/PieChartPage').PieChartPage, + key: 'PieChart', + name: 'PieChart', + url: '#/examples/PieChart', + }, + { + component: require('./components/pages/Charting/SankeyChartPage').SankeyChartPage, + key: 'SankeyChart', + name: 'SankeyChart', + url: '#/examples/SankeyChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx new file mode 100644 index 0000000000000..2d82290363036 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { PieChartPageProps } from '@fluentui/react-examples/lib/react-charting/PieChart/PieChart.doc'; + +export const PieChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx new file mode 100644 index 0000000000000..70e7fc369ae27 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { SankeyChartPageProps } from '@fluentui/react-examples/lib/react-charting/SankeyChart/SankeyChart.doc'; + +export const SankeyChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index bac37f31b95e6..551a0dabef09b 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -117,6 +117,8 @@ export const categories: { [name: string]: ICategory } = { HeatMapChart: {}, HorizontalBarChart: {}, HorizontalBarChartWithAxis: {}, + PieChart: {}, + SankeyChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts new file mode 100644 index 0000000000000..120ef68eca139 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { PieChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/PieChart/PieChart.doc'; + +export const PieChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx new file mode 100644 index 0000000000000..f96b551ac6aa8 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { PieChartPageProps } from './PieChartPage.doc'; + +export const PieChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts new file mode 100644 index 0000000000000..4907d2b5c8036 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { SankeyChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/SankeyChart/SankeyChart.doc'; + +export const SankeyChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx new file mode 100644 index 0000000000000..6270b7646e140 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { SankeyChartPageProps } from './SankeyChartPage.doc'; + +export const SankeyChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index 8edeb163eab3c..e22a4e81b8dbd 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -1046,7 +1046,7 @@ export interface IMultiStackedBarChartStyles { export interface IPieChart { } -// @public (undocumented) +// @public export interface IPieChartProps { chartTitle?: string; className?: string; @@ -1086,7 +1086,7 @@ export interface ISankeyChartData { nodes: SNode[]; } -// @public (undocumented) +// @public export interface ISankeyChartProps { borderColorsForNodes?: string[]; className?: string; @@ -1465,10 +1465,10 @@ export enum NodesComposition { long = 1 } -// @public (undocumented) +// @public export const PieChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const SankeyChart: React_2.FunctionComponent; // @public (undocumented) diff --git a/packages/react-charting/src/components/PieChart/PieChart.tsx b/packages/react-charting/src/components/PieChart/PieChart.tsx index 1e6194078329f..70dc2733df25c 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.tsx +++ b/packages/react-charting/src/components/PieChart/PieChart.tsx @@ -5,6 +5,10 @@ import { PieChartBase } from './PieChart.base'; import { getStyles } from './PieChart.styles'; // Create a PieChart variant which uses these default styles and this styled subcomponent. +/** + * PieChart component. + * {@docCategory PieChart} + */ export const PieChart: React.FunctionComponent = styled< IPieChartProps, IPieChartStyleProps, diff --git a/packages/react-charting/src/components/PieChart/PieChart.types.ts b/packages/react-charting/src/components/PieChart/PieChart.types.ts index a85557bba767b..ba0ccf7b78fec 100644 --- a/packages/react-charting/src/components/PieChart/PieChart.types.ts +++ b/packages/react-charting/src/components/PieChart/PieChart.types.ts @@ -4,6 +4,10 @@ import { IDataPoint } from '../../types/IDataPoint'; export type { IDataPoint } from '../../types/IDataPoint'; export interface IPieChart {} +/** + * PieChart component. + * {@docCategory PieChart} + */ export interface IPieChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx index d8f40441a8d6e..89c1d267d0d93 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx @@ -5,6 +5,10 @@ import { SankeyChartBase } from './SankeyChart.base'; import { getStyles } from './SankeyChart.styles'; // Create a SankeyChart variant which uses these default styles and this styled subcomponent. +/** + * SankeyChart component. + * {@docCategory SankeyChart} + */ export const SankeyChart: React.FunctionComponent = styled< ISankeyChartProps, ISankeyChartStyleProps, diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts index 507c8eed959a9..4527c1bae7ac1 100644 --- a/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts +++ b/packages/react-charting/src/components/SankeyChart/SankeyChart.types.ts @@ -4,6 +4,10 @@ import { IChartProps } from '../../types/IDataPoint'; export type { IChartProps, IDataPoint, ISankeyChartData } from '../../types/IDataPoint'; +/** + * SankeyChart component. + * {@docCategory SankeyChart} + */ export interface ISankeyChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/PieChart/PieChart.doc.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.doc.tsx new file mode 100644 index 0000000000000..b71b4158d298a --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/PieChart.doc.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { PieChartBasicExample } from './PieChart.Basic.Example'; +import { PieChartDynamicExample } from './PieChart.Dynamic.Example'; + +const PieChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/PieChart.Basic.Example.tsx') as string; +const PieChartDynamicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/PieChart.Dynamic.Example.tsx') as string; + +export const PieChartPageProps: IDocPageProps = { + title: 'PieChart', + componentName: 'PieChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/PieChart', + examples: [ + { + title: 'PieChart basic', + code: PieChartBasicExampleCode, + view: , + }, + { + title: 'PieChart dynamic', + code: PieChartDynamicExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md b/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md b/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.doc.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.doc.tsx new file mode 100644 index 0000000000000..ffd93a84215be --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.doc.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { SankeyChartBasicExample } from './SankeyChart.Basic.Example'; +import { SankeyChartInboxExample } from './SankeyChart.Inbox.Example'; + +const SankeyChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx') as string; +const SankeyChartInboxExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx') as string; + +export const SankeyChartPageProps: IDocPageProps = { + title: 'SankeyChart', + componentName: 'SankeyChart', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/SankeyChart', + examples: [ + { + title: 'SankeyChart basic', + code: SankeyChartBasicExampleCode, + view: , + }, + { + title: 'SankeyChart inbox', + code: SankeyChartInboxExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From b20381e02e42d391ef8bc44d74f992425fb9dcd3 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 15:59:46 +0530 Subject: [PATCH 28/61] Add remaining charts to docsite --- .../config/api-docs.js | 5 ++ .../src/AppDefinition.tsx | 31 +++++++++ .../Charting/MultiStackedBarChartPage.tsx | 11 ++++ .../pages/Charting/SparklineChartPage.tsx | 11 ++++ .../pages/Charting/StackedBarChartPage.tsx | 11 ++++ .../pages/Charting/TreeChartPage.tsx | 11 ++++ .../Charting/VerticalStackedBarChartPage.tsx | 11 ++++ .../SiteDefinition.pages/Controls/web.tsx | 5 ++ .../MultiStackedBarChartPage.doc.ts | 8 +++ .../MultiStackedBarChartPage.tsx | 8 +++ .../SparklineChartPage.doc.ts | 8 +++ .../SparklineChartPage/SparklineChartPage.tsx | 8 +++ .../StackedBarChartPage.doc.ts | 8 +++ .../StackedBarChartPage.tsx | 8 +++ .../TreeChartPage/TreeChartPage.doc.ts | 8 +++ .../Controls/TreeChartPage/TreeChartPage.tsx | 8 +++ .../VerticalStackedBarChartPage.doc.ts | 8 +++ .../VerticalStackedBarChartPage.tsx | 8 +++ .../react-charting/etc/react-charting.api.md | 20 +++--- .../src/components/Sparkline/Sparkline.tsx | 4 ++ .../components/Sparkline/Sparkline.types.ts | 4 ++ .../StackedBarChart/MultiStackedBarChart.tsx | 4 ++ .../MultiStackedBarChart.types.ts | 4 ++ .../StackedBarChart/StackedBarChart.tsx | 4 ++ .../StackedBarChart/StackedBarChart.types.ts | 4 ++ .../src/components/TreeChart/TreeChart.tsx | 4 ++ .../components/TreeChart/TreeChart.types.ts | 4 ++ .../VerticalStackedBarChart.tsx | 4 ++ .../VerticalStackedBarChart.types.ts | 4 ++ .../MultiStackedBarChart.doc.tsx | 40 ++++++++++++ .../docs/MultiStackedBarChartBestPractices.md | 3 + .../docs/MultiStackedBarChartOverview.md | 65 +++++++++++++++++++ .../SparklineChart/SparklineChart.doc.tsx | 26 ++++++++ .../docs/SparklineChartBestPractices.md | 3 + .../docs/SparklineChartOverview.md | 65 +++++++++++++++++++ .../StackedBarChart/StackedBarChart.doc.tsx | 64 ++++++++++++++++++ .../docs/StackedBarChartBestPractices.md | 3 + .../docs/StackedBarChartOverview.md | 65 +++++++++++++++++++ .../TreeChart/TreeChart.doc.tsx | 47 ++++++++++++++ .../TreeChart/docs/TreeChartBestPractices.md | 3 + .../TreeChart/docs/TreeChartOverview.md | 65 +++++++++++++++++++ .../VerticalStackedBarChart.doc.tsx | 56 ++++++++++++++++ .../VerticalStackedBarChartBestPractices.md | 3 + .../docs/VerticalStackedBarChartOverview.md | 65 +++++++++++++++++++ 44 files changed, 799 insertions(+), 10 deletions(-) create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx create mode 100644 apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx create mode 100644 apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx create mode 100644 packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md create mode 100644 packages/react-examples/src/react-charting/SparklineChart/SparklineChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md create mode 100644 packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md create mode 100644 packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index cc427e000d42c..6c2ded861e01f 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -103,6 +103,11 @@ module.exports = { 'PieChart', 'GaugeChart', 'SankeyChart', + 'SparklineChart', + 'StackedBarChart', + 'MultiStackedBarChart', + 'TreeChart', + 'VerticalStackedBarChart', ], }, }; diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 409a97eb04c0f..16a87b54f331d 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -593,6 +593,37 @@ export const AppDefinition: IAppDefinition = { name: 'SankeyChart', url: '#/examples/SankeyChart', }, + { + component: require('./components/pages/Charting/SparklineChartPage').SparklineChartPage, + key: 'SparklineChart', + name: 'SparklineChart', + url: '#/examples/SparklineChart', + }, + { + component: require('./components/pages/Charting/StackedBarChartPage').StackedBarChartPage, + key: 'StackedBarChart', + name: 'StackedBarChart', + url: '#/examples/StackedBarChart', + }, + { + component: require('./components/pages/Charting/MultiStackedBarChartPage').MultiStackedBarChartPage, + key: 'MultiStackedBarChart', + name: 'MultiStackedBarChart', + url: '#/examples/MultiStackedBarChart', + }, + { + component: require('./components/pages/Charting/TreeChartPage').TreeChartPage, + key: 'TreeChart', + name: 'TreeChart', + url: '#/examples/TreeChart', + }, + { + component: require('./components/pages/Charting/VerticalStackedBarChartPage') + .VerticalStackedBarChartPage, + key: 'VerticalStackedBarChart', + name: 'VerticalStackedBarChart', + url: '#/examples/VerticalStackedBarChart', + }, ], }, { diff --git a/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx new file mode 100644 index 0000000000000..ad159f4fbb0e2 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { MultiStackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc'; + +export const MultiStackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx new file mode 100644 index 0000000000000..3b5b933757e2a --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { SparklineChartPageProps } from '@fluentui/react-examples/lib/react-charting/SparklineChart/SparklineChart.doc'; + +export const SparklineChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx new file mode 100644 index 0000000000000..755ad361f7136 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { StackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/StackedBarChart/StackedBarChart.doc'; + +export const StackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx new file mode 100644 index 0000000000000..77652c53f238e --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { TreeChartPageProps } from '@fluentui/react-examples/lib/react-charting/TreeChart/TreeChart.doc'; + +export const TreeChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx new file mode 100644 index 0000000000000..55b674b121b07 --- /dev/null +++ b/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { DemoPage } from '../../DemoPage'; + +import { VerticalStackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc'; + +export const VerticalStackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( + +); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 551a0dabef09b..1749aadd6e8ee 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -119,6 +119,11 @@ export const categories: { [name: string]: ICategory } = { HorizontalBarChartWithAxis: {}, PieChart: {}, SankeyChart: {}, + SparklineChart: {}, + StackedBarChart: {}, + MultiStackedBarChart: {}, + TreeChart: {}, + VerticalStackedBarChart: {}, }, Utilities: { Announced: { diff --git a/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts new file mode 100644 index 0000000000000..d9f21ddbe1580 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { MultiStackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc'; + +export const MultiStackedBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx new file mode 100644 index 0000000000000..c67b08068048b --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { MultiStackedBarChartPageProps } from './MultiStackedBarChartPage.doc'; + +export const MultiStackedBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts new file mode 100644 index 0000000000000..e3b3e6ab14f4a --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { SparklineChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/SparklineChart/SparklineChart.doc'; + +export const SparklineChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx new file mode 100644 index 0000000000000..0ca16380534d9 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { SparklineChartPageProps } from './SparklineChartPage.doc'; + +export const SparklineChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts new file mode 100644 index 0000000000000..09fc888f43f4c --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { StackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/StackedBarChart/StackedBarChart.doc'; + +export const StackedBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx new file mode 100644 index 0000000000000..d73fd391dfd1a --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { StackedBarChartPageProps } from './StackedBarChartPage.doc'; + +export const StackedBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts new file mode 100644 index 0000000000000..8d61c3a8a2c22 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { TreeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/TreeChart/TreeChart.doc'; + +export const TreeChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx new file mode 100644 index 0000000000000..0c608d1d57546 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { TreeChartPageProps } from './TreeChartPage.doc'; + +export const TreeChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts new file mode 100644 index 0000000000000..31a17818c3cdd --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { VerticalStackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc'; + +export const VerticalStackedBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx new file mode 100644 index 0000000000000..9f69a4fb1c311 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { VerticalStackedBarChartPageProps } from './VerticalStackedBarChartPage.doc'; + +export const VerticalStackedBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index e22a4e81b8dbd..bc20c8fe25eee 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -987,7 +987,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps { yAxisType?: YAxisType; } -// @public (undocumented) +// @public export interface IMultiStackedBarChartProps { barHeight?: number; calloutProps?: Partial; @@ -1137,7 +1137,7 @@ export interface IShapeProps { svgProps: React_2.SVGAttributes; } -// @public (undocumented) +// @public export interface ISparklineProps { className?: string; culture?: string; @@ -1166,7 +1166,7 @@ export interface ISparklineStyles { export interface IStackedBarChart { } -// @public (undocumented) +// @public export interface IStackedBarChartProps { barBackgroundColor?: string; barHeight?: number; @@ -1225,7 +1225,7 @@ export interface IStackedBarChartStyles { target: IStyle; } -// @public (undocumented) +// @public export interface ITreeChartDataPoint { bodytext?: string; children?: Array; @@ -1347,7 +1347,7 @@ export interface IVerticalBarChartStyles extends ICartesianChartStyles { yAxisTicks?: IStyle; } -// @public (undocumented) +// @public export interface IVerticalStackedBarChartProps extends ICartesianChartProps { allowHoverOnLegend?: boolean; barCornerRadius?: number; @@ -1448,7 +1448,7 @@ export type LegendShape = 'default' | 'triangle' | keyof typeof Points | keyof t // @public export const LineChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const MultiStackedBarChart: React_2.FunctionComponent; // @public (undocumented) @@ -1483,10 +1483,10 @@ export type SLink = d3Sankey.SankeyLink; // @public (undocumented) export type SNode = d3Sankey.SankeyNode; -// @public (undocumented) +// @public export const Sparkline: React_2.FunctionComponent; -// @public (undocumented) +// @public export const StackedBarChart: React_2.FunctionComponent; // Warning: (ae-forgotten-export) The symbol "ITextboxProps" needs to be exported by the entry point index.d.ts @@ -1494,7 +1494,7 @@ export const StackedBarChart: React_2.FunctionComponent; // @public (undocumented) export const Textbox: React_2.FunctionComponent; -// @public (undocumented) +// @public export const TreeChart: React_2.FunctionComponent; // @public (undocumented) @@ -1506,7 +1506,7 @@ export enum TreeTraverse { // @public export const VerticalBarChart: React_2.FunctionComponent; -// @public (undocumented) +// @public export const VerticalStackedBarChart: React_2.FunctionComponent; // (No @packageDocumentation comment for this package) diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.tsx index e1b3f74ca0df7..5247351bc4870 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.tsx +++ b/packages/react-charting/src/components/Sparkline/Sparkline.tsx @@ -5,6 +5,10 @@ import { SparklineBase } from './Sparkline.base'; import { getStyles } from './Sparkline.styles'; // Create a Sparkline variant which uses these default styles and this styled subcomponent. +/** + * Sparkline component. + * {@docCategory Sparkline} + */ export const Sparkline: React.FunctionComponent = styled< ISparklineProps, ISparklineStyleProps, diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts index 080e2755c1e8a..147a14f5591a7 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts +++ b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts @@ -5,6 +5,10 @@ import { ICartesianChartStyleProps } from '../CommonComponents/index'; export interface ISparklineStyleProps extends ICartesianChartStyleProps {} +/** + * Sparkline component. + * {@docCategory Sparkline} + */ export interface ISparklineProps { /** * An array of chart data points for the Sparkline chart diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx index 9a171b1787329..f5fa13e909c1c 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx @@ -9,6 +9,10 @@ import { MultiStackedBarChartBase } from './MultiStackedBarChart.base'; import { getMultiStackedBarChartStyles } from './MultiStackedBarChart.styles'; // Create a MultiStackedBarChart variant which uses these default styles and this styled subcomponent. +/** + * MultiStackedBarChart component. + * {@docCategory MultiStackedBarChart} + */ export const MultiStackedBarChart: React.FunctionComponent = styled< IMultiStackedBarChartProps, IMultiStackedBarChartStyleProps, diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts index 7e4bd8a569155..746234a8848a2 100644 --- a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts +++ b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.types.ts @@ -6,6 +6,10 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { ILegendsProps } from '../Legends/index'; +/** + * MultiStackedBarChart component. + * {@docCategory MultiStackedBarChart} + */ export interface IMultiStackedBarChartProps { /** * An array of chart data points for the multistacked bar chart diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx index b78ba8c7d7753..0f51e1d20116c 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx @@ -5,6 +5,10 @@ import { StackedBarChartBase } from './StackedBarChart.base'; import { getStyles } from './StackedBarChart.styles'; // Create a StackedBarChart variant which uses these default styles and this styled subcomponent. +/** + * StackedBarChart component. + * {@docCategory StackedBarChart} + */ export const StackedBarChart: React.FunctionComponent = styled< IStackedBarChartProps, IStackedBarChartStyleProps, diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts index 4c271384f1a5e..5274fbb2d6793 100644 --- a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts +++ b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.types.ts @@ -8,6 +8,10 @@ import { ILegendsProps } from '../Legends/index'; export interface IStackedBarChart {} import { IChartProps, IChartDataPoint } from './index'; +/** + * StackedBarChart component. + * {@docCategory StackedBarChart} + */ export interface IStackedBarChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.tsx b/packages/react-charting/src/components/TreeChart/TreeChart.tsx index c2c267afc1dab..3341772528fdd 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.tsx +++ b/packages/react-charting/src/components/TreeChart/TreeChart.tsx @@ -4,6 +4,10 @@ import { ITreeStyles, ITreeProps, ITreeStyleProps } from './TreeChart.types'; import { TreeChartBase } from './TreeChart.base'; import { getStyles } from './TreeChart.styles'; +/** + * TreeChart component. + * {@docCategory TreeChart} + */ export const TreeChart: React.FunctionComponent = styled( TreeChartBase, getStyles, diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts index 1217b914b0bd7..da100882d7164 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts +++ b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts @@ -1,6 +1,10 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling'; import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; +/** + * TreeChart component. + * {@docCategory TreeChart} + */ export interface ITreeChartDataPoint { /** * Node main text diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx index d378075c2e217..b9399c4078406 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx @@ -9,6 +9,10 @@ import { VerticalStackedBarChartBase } from './VerticalStackedBarChart.base'; import { getStyles } from './VerticalStackedBarChart.styles'; // Create a VerticalStackedBarChart variant which uses these default styles and this styled subcomponent. +/** + * VerticalStackedBarChart component. + * {@docCategory VerticalStackedBarChart} + */ export const VerticalStackedBarChart: React.FunctionComponent = styled< IVerticalStackedBarChartProps, IVerticalStackedBarChartStyleProps, diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts index 55a07eadc0b53..668d6dbf9199e 100644 --- a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts +++ b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.types.ts @@ -11,6 +11,10 @@ import { IVSChartDataPoint, } from '../../index'; +/** + * VerticalStackedBarChart component. + * {@docCategory VerticalStackedBarChart} + */ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx new file mode 100644 index 0000000000000..baf4a8a941c31 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; + +import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; +import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; +import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example'; + +const MultiStackedBarChartExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx') as string; +const MultiStackedBarChartWithPlaceholderExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx') as string; +const MultiStackedBarChartVariantExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Variant.Example.tsx') as string; + +export const MultiStackedBarChartPageProps: IDocPageProps = { + title: 'MultiStackedBarChart', + componentName: 'MultiStackedBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/MultiStackedBarChart', + examples: [ + { + title: 'MultiStackedBarChart N/M', + code: MultiStackedBarChartExampleCode, + view: , + }, + { + title: 'MultiStackedBarChart absolute scale', + code: MultiStackedBarChartVariantExampleCode, + view: , + }, + { + title: 'MultiStackedBarChart placeholder', + code: MultiStackedBarChartWithPlaceholderExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.doc.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.doc.tsx new file mode 100644 index 0000000000000..94be88fcffb80 --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.doc.tsx @@ -0,0 +1,26 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { SparklineChartBasicExample } from './SparklineChart.Basic.Example'; + +const SparklineChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx') as string; + +export const SparklineChartPageProps: IDocPageProps = { + title: 'SparklineChart', + componentName: 'SparklineChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/SparklineChart', + examples: [ + { + title: 'SparklineChart basic', + code: SparklineChartBasicExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx new file mode 100644 index 0000000000000..769378b209759 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx @@ -0,0 +1,64 @@ +import * as React from 'react'; + +import { StackedBarChartBasicExample } from './StackedBarChart.Basic.Example'; +import { StackedBarChartBenchmarkExample } from './StackedBarChart.Benchmark.Example'; +import { StackedBarChartMultipleExample } from './StackedBarChart.Multiple.Example'; +import { StackedBarChartDynamicExample } from './StackedBarChart.Dynamic.Example'; +import { StackedBarChartBaseBarExample } from './StackedBarChart.BaseBar.Example'; +import { StackedBarChartCustomAccessibilityExample } from './StackedBarChart.CustomAccessibility.Example'; + +const StackedBarChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx') as string; +const StackedBarChartBenchmarkExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Benchmark.Example.tsx') as string; +const StackedBarChartMultipleExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Multiple.Example.tsx') as string; +const StackedBarChartDynamicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Dynamic.Example.tsx') as string; +const StackedBarChartBaseBarExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.BaseBar.Example.tsx') as string; +const StackedBarChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx') as string; + +export const StackedBarChartPageProps: IDocPageProps = { + title: 'StackedBarChart', + componentName: 'StackedBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/StackedBarChart', + examples: [ + { + title: 'StackedBarChart basic', + code: StackedBarChartBasicExampleCode, + view: , + }, + { + title: 'StackedBarChart benchmark', + code: StackedBarChartBenchmarkExampleCode, + view: , + }, + { + title: 'StackedBarChart multiple', + code: StackedBarChartMultipleExampleCode, + view: , + }, + { + title: 'StackedBarChart dynamic', + code: StackedBarChartDynamicExampleCode, + view: , + }, + { + title: 'StackedBarChart base bar', + code: StackedBarChartBaseBarExampleCode, + view: , + }, + { + title: 'StackedBarChart custom accessibility', + code: StackedBarChartCustomAccessibilityExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx new file mode 100644 index 0000000000000..da774deeba6e8 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; + +import { TreeChartTwoLayerExample } from './TreeChart.TwoLayer.Example'; +import { TreeChartThreeLayerLongExample } from './TreeChart.ThreeLayerLong.Example'; +import { TreeChartThreeLayerCompactExample } from './TreeChart.ThreeLayerCompact.Example'; +import { TreeChartThreeLayerExample } from './TreeChart.ThreeLayer.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; + +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: , + }, + { + title: 'TreeChart three layer compact variant', + code: TreeChartThreeLayerCompactExampleCode, + view: , + }, + ], + overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md'), + bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx new file mode 100644 index 0000000000000..21ff30d8621fa --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; + +import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.Basic.Example'; +import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; +import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart.Callout.Example'; +import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; +import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; + +const VerticalBarChartBasicExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx') as string; +const VerticalBarChartStyledExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx') as string; +const VerticalBarChartCalloutExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx') as string; +const VerticalBarChartTooltipExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example') as string; +const VerticalBarChartCustomAccessibilityExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example') as string; + +export const VerticalStackedBarChartPageProps: IDocPageProps = { + title: 'VerticalStackedBarChart', + componentName: 'VerticalStackedBarChart', + componentUrl: + 'https://github.com/microsoft/fluentui/VerticalStackedBar/master/packages/react-charting/src/components/VerticalStackedBarChart', + examples: [ + { + title: 'VerticalStackedBarChart basic', + code: VerticalBarChartBasicExampleCode, + view: , + }, + { + title: 'VerticalStackedBarChart styled', + code: VerticalBarChartStyledExampleCode, + view: , + }, + { + title: 'VerticalStackedBarChart callout', + code: VerticalBarChartCalloutExampleCode, + view: , + }, + { + title: 'VerticalStackedBarChart tooltip', + code: VerticalBarChartTooltipExampleCode, + view: , + }, + { + title: 'VerticalStackedBarChart custom accessibility', + code: VerticalStackedBarChartCustomAccessibilityExample, + 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'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md new file mode 100644 index 0000000000000..9881deee2a8c2 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +LineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md new file mode 100644 index 0000000000000..20ea131f4f632 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md @@ -0,0 +1,65 @@ +
+

+ Use a line graph to visualize data sets over a period of time for an individual or group of items. The + amount of lines (data sets) depend on the attributes selected during the report creation. +

+

The line graph thickness will vary depending on the number of data sets and data increments.

+ +

Variant details

+

Event annotations

+

+ Event annotations are used to highlight events and annotate them using messages. Annotations are + represented by vertical line markers to mark the date and callouts to represent the message. Events can be + added by using eventAnnotationProps prop. Each event contains a + date, event message and event details callout callback + onRenderCard +

+

Gaps

+

+ A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be + replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions + for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by + startIndex and + endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for + endIndex - startIndex number of datapoints. A line can have as many gaps as possible. +

+

Line border

+

+ Each line in the chart can contain a 2 px border for better highlighting of the line when there are + multiple items in the chart. The border will have color of the background theme. Lines will be highlighted + in order of their appearance in legends. Line border is a highly suggested style that you should apply to + make multiple lines more distinguishable from each other. Use lineBorderWidth prop present + inside + lineOptions to enable it. +

+

Lines with large dataset

+

+ We use a path based rendering technique to show datasets with large number of points (greater than 1k). + Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by + setting the optimizeLargeData prop to true. +

+

Custom accessibility

+

+ Line chart provides a bunch of props to enable custom accessibility messages. Use + xAxisCalloutAccessibilityData + and callOutAccessibilityData to configure x axis and y axis accessibility messages + respectively. +

+

Date 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 + + for usage.
+ 2. Custom locale definition: The consumer of the library can specify a custom locale definition as + supported by d3 like this. + The date axis will use the date range and the multiformat specified in the definition to determine the + correct labels 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. +

+
From 7fbdc42266229eec298d736595d5067acb1db066 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 16:20:03 +0530 Subject: [PATCH 29/61] Update documentation header --- .../src/components/DonutChart/DonutChart.types.ts | 2 +- .../react-charting/src/components/GaugeChart/GaugeChart.tsx | 2 +- .../src/components/GaugeChart/GaugeChart.types.ts | 4 ++-- .../GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx | 2 +- .../src/components/HeatMapChart/HeatMapChart.ts | 2 +- .../src/components/HeatMapChart/HeatMapChart.types.ts | 2 +- .../src/components/HorizontalBarChart/HorizontalBarChart.tsx | 2 +- .../components/HorizontalBarChart/HorizontalBarChart.types.ts | 2 +- .../HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx | 2 +- .../HorizontalBarChartWithAxis.types.ts | 2 +- packages/react-charting/src/components/PieChart/PieChart.tsx | 2 +- .../react-charting/src/components/PieChart/PieChart.types.ts | 2 +- .../react-charting/src/components/SankeyChart/SankeyChart.tsx | 2 +- .../src/components/SankeyChart/SankeyChart.types.ts | 2 +- .../src/components/Sparkline/Sparkline.types.ts | 2 +- .../src/components/StackedBarChart/MultiStackedBarChart.tsx | 2 +- .../components/StackedBarChart/MultiStackedBarChart.types.ts | 2 +- .../src/components/StackedBarChart/StackedBarChart.tsx | 2 +- .../src/components/StackedBarChart/StackedBarChart.types.ts | 2 +- .../react-charting/src/components/TreeChart/TreeChart.tsx | 2 +- .../src/components/TreeChart/TreeChart.types.ts | 2 +- .../src/components/VerticalBarChart/VerticalBarChart.tsx | 2 +- .../src/components/VerticalBarChart/VerticalBarChart.types.ts | 2 +- .../VerticalStackedBarChart/VerticalStackedBarChart.tsx | 2 +- .../VerticalStackedBarChart/VerticalStackedBarChart.types.ts | 2 +- 25 files changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/react-charting/src/components/DonutChart/DonutChart.types.ts b/packages/react-charting/src/components/DonutChart/DonutChart.types.ts index 94f31d39523c4..f666602961faa 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 {} /** - * Donutchart component. + * IDonutChartProps for Donutchart component. * {@docCategory DonutChart} */ export interface IDonutChartProps extends ICartesianChartProps { diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx index 4a6f5c524ec4d..21ab50320a454 100644 --- a/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx +++ b/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx @@ -5,7 +5,7 @@ import { getStyles } from './GaugeChart.styles'; import { IGaugeChartProps, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types'; /** - * GaugeChart component. + * Gaugechart component. * {@docCategory GaugeChart} */ export const GaugeChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts b/packages/react-charting/src/components/GaugeChart/GaugeChart.types.ts index 0d3ecdef2716e..1137c490b34b4 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'; /** - * Gaugechart component. + * IGaugeChartSegment interface for Gaugechart. * {@docCategory GaugeChart} */ export interface IGaugeChartSegment { @@ -36,7 +36,7 @@ export enum GaugeValueFormat { } /** - * Gaugechart component. + * IGaugeChartProps for Gaugechart component. * {@docCategory GaugeChart} */ export interface IGaugeChartProps { diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.tsx index 018f4e2da4449..e580d75c13224 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'; /** - * GroupedVerticalBarchart component. + * IGroupedVerticalBarChartProps for GroupedVerticalBarchart component. * {@docCategory GroupedVerticalBarChart} */ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts index 1b61adb05e505..6cda1d9b8e18e 100644 --- a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts +++ b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts @@ -5,7 +5,7 @@ import { getHeatMapChartStyles } from './HeatMapChart.styles'; import { HeatMapChartBase } from './HeatMapChart.base'; /** - * HeatMapChart component. + * HeatMapchart component. * {@docCategory HeatMapChart} */ export const HeatMapChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts index b0fd6c50a3592..ea7cd3fd8bed7 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'; /** - * HeatMapChart component. + * IHeatMapChartProps for HeatMapchart component. * {@docCategory HeatMapChart} */ export interface IHeatMapChartProps extends Pick> { diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx index 271ee3a508eb8..7b7988f85129f 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -10,7 +10,7 @@ import { getHorizontalBarChartStyles } from './HorizontalBarChart.styles'; // Create a HorizontalBarChart variant which uses these default styles and this styled subcomponent. /** - * HorizontalBarChart component. + * HorizontalBarchart component. * {@docCategory HorizontalBarChart} */ export const HorizontalBarChart: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts index 947ba41be8a42..059671c97b206 100644 --- a/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts +++ b/packages/react-charting/src/components/HorizontalBarChart/HorizontalBarChart.types.ts @@ -4,7 +4,7 @@ import { ICalloutProps } from '@fluentui/react/lib/Callout'; import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; /** - * HorizontalBarChart component. + * IHorizontalBarChartProps for HorizontalBarchart component. * {@docCategory HorizontalBarChart} */ export interface IHorizontalBarChartProps { diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx index b47c41b9b4434..5a115aae68830 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx @@ -10,7 +10,7 @@ import { getStyles } from './HorizontalBarChartWithAxis.styles'; // Create a HorizontalBarChartWithAxis variant which uses these default styles and this styled subcomponent. /** - * HorizontalBarChartWithAxis component. + * HorizontalBarchartWithAxis component. * {@docCategory HorizontalBarChartWithAxis} */ export const HorizontalBarChartWithAxis: React.FunctionComponent = styled< diff --git a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts index a6f41315f08a1..5de50ef2630ae 100644 --- a/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts +++ b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.types.ts @@ -8,7 +8,7 @@ import { } from '../../index'; /** - * HorizontalBarChartWithAxis component. + * IHorizontalBarChartWithAxisProps for HorizontalBarchartWithAxis component. * {@docCategory HorizontalBarChartWithAxis} */ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { diff --git a/packages/react-charting/src/components/PieChart/PieChart.tsx b/packages/react-charting/src/components/PieChart/PieChart.tsx index 70dc2733df25c..be9d54af4d556 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 ba0ccf7b78fec..8a611cfbcc9e2 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 {} /** - * PieChart component. + * IPieChartProps for Piechart component. * {@docCategory PieChart} */ export interface IPieChartProps { diff --git a/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx b/packages/react-charting/src/components/SankeyChart/SankeyChart.tsx index 89c1d267d0d93..276f6f7420fbb 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 4527c1bae7ac1..f2193f0bbd6d0 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'; /** - * SankeyChart component. + * ISankeyChartProps for Sankeychart component. * {@docCategory SankeyChart} */ export interface ISankeyChartProps { diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts index 147a14f5591a7..638eb98cd1f48 100644 --- a/packages/react-charting/src/components/Sparkline/Sparkline.types.ts +++ b/packages/react-charting/src/components/Sparkline/Sparkline.types.ts @@ -6,7 +6,7 @@ import { ICartesianChartStyleProps } from '../CommonComponents/index'; export interface ISparklineStyleProps extends ICartesianChartStyleProps {} /** - * Sparkline component. + * ISparklineProps for Sparkline component. * {@docCategory Sparkline} */ export interface ISparklineProps { diff --git a/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/MultiStackedBarChart.tsx index f5fa13e909c1c..8de472c311df2 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 746234a8848a2..5d19142a79975 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'; /** - * MultiStackedBarChart component. + * IMultiStackedBarChartProps for MultiStackedBarchart component. * {@docCategory MultiStackedBarChart} */ export interface IMultiStackedBarChartProps { diff --git a/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx b/packages/react-charting/src/components/StackedBarChart/StackedBarChart.tsx index 0f51e1d20116c..d507c15a664c1 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 5274fbb2d6793..51db359ed381e 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'; /** - * StackedBarChart component. + * IStackedBarChartProps for StackedBarchart component. * {@docCategory StackedBarChart} */ export interface IStackedBarChartProps { diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.tsx b/packages/react-charting/src/components/TreeChart/TreeChart.tsx index 3341772528fdd..176192efc7fc7 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 da100882d7164..f8d25c8789e03 100644 --- a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts +++ b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts @@ -2,7 +2,7 @@ import { IStyle, ITheme } from '@fluentui/react/lib/Styling'; import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities'; /** - * TreeChart component. + * ITreeChartDataPoint interface for Treechart component. * {@docCategory TreeChart} */ export interface ITreeChartDataPoint { diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx index 2a9ec059bcd70..4065b60be0edb 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 b60d69f88adbe..094624c326a18 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'; /** - * VerticalBarChart component. + * IVerticalBarChartProps for VerticalBarchart component. * {@docCategory VerticalBarChart} */ export interface IVerticalBarChartProps extends ICartesianChartProps { diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx index b9399c4078406..0617d0e3d0f47 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 668d6dbf9199e..ab6b67f554d99 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'; /** - * VerticalStackedBarChart component. + * IVerticalStackedBarChartProps for VerticalStackedBarchart component. * {@docCategory VerticalStackedBarChart} */ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { From a95a007e83fda09c23422f2f6e62ebe4ef421613 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Fri, 11 Aug 2023 16:33:22 +0530 Subject: [PATCH 30/61] Refresh doc api --- packages/react-charting/etc/react-charting.api.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-charting/etc/react-charting.api.md b/packages/react-charting/etc/react-charting.api.md index bc20c8fe25eee..e43d7459525c6 100644 --- a/packages/react-charting/etc/react-charting.api.md +++ b/packages/react-charting/etc/react-charting.api.md @@ -229,6 +229,7 @@ export interface ICartesianChartProps { noOfCharsToTruncate?: number; parentRef?: HTMLElement | null; rotateXAxisLables?: boolean; + secondaryYAxistitle?: string; secondaryYScaleOptions?: { yMinValue?: number; yMaxValue?: number; @@ -247,9 +248,11 @@ export interface ICartesianChartProps { xAxisTickCount?: number; xAxisTickPadding?: number; xAxistickSize?: number; + xAxisTitle?: string; xMaxValue?: number; yAxisTickCount?: number; yAxisTickFormat?: any; + yAxisTitle?: string; yMaxValue?: number; yMinValue?: number; } @@ -270,6 +273,7 @@ export interface ICartesianChartStyleProps { // @public (undocumented) export interface ICartesianChartStyles { + axisTitle?: IStyle; calloutBlockContainer?: IStyle; calloutContentRoot?: IStyle; calloutContentX?: IStyle; From 8778964762ee91fc3a67f3249dc509fce50f552f Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 12:04:27 +0530 Subject: [PATCH 31/61] Fix IDocPageProps import --- .../MultiStackedBarChart/MultiStackedBarChart.doc.tsx | 2 ++ .../src/react-charting/StackedBarChart/StackedBarChart.doc.tsx | 2 ++ .../src/react-charting/TreeChart/TreeChart.doc.tsx | 2 ++ .../VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx | 2 ++ 4 files changed, 8 insertions(+) diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx index baf4a8a941c31..908c08eb47cfd 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example'; diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx index 769378b209759..bce75ea67e60e 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + import { StackedBarChartBasicExample } from './StackedBarChart.Basic.Example'; import { StackedBarChartBenchmarkExample } from './StackedBarChart.Benchmark.Example'; import { StackedBarChartMultipleExample } from './StackedBarChart.Multiple.Example'; 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 da774deeba6e8..b24f5fd38ac75 100644 --- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx +++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx @@ -1,5 +1,7 @@ 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'; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index 21ff30d8621fa..29f0f4d3a369c 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.Basic.Example'; import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart.Callout.Example'; From 612a0c14d7933a0be498b390c5f005f8797a5351 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 12:38:25 +0530 Subject: [PATCH 32/61] Fix error --- .../VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index 29f0f4d3a369c..d974f1d29df1c 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -47,8 +47,8 @@ export const VerticalStackedBarChartPageProps: IDocPageProps = { }, { title: 'VerticalStackedBarChart custom accessibility', - code: VerticalStackedBarChartCustomAccessibilityExample, - view: , + code: VerticalBarChartCustomAccessibilityExampleCode, + view: , }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md'), From 59f5e873ff90da11df8b76d226bd94ffb7650f11 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 13:07:22 +0530 Subject: [PATCH 33/61] Fix errors --- .../src/components/pages/Charting/SparklineChartPage.tsx | 2 +- .../VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx index 3b5b933757e2a..c3e65eea13171 100644 --- a/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx @@ -5,7 +5,7 @@ import { SparklineChartPageProps } from '@fluentui/react-examples/lib/react-char export const SparklineChartPage = (props: { isHeaderVisible: boolean }) => ( ); diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index d974f1d29df1c..8f0b61dbb908e 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -40,7 +40,7 @@ export const VerticalStackedBarChartPageProps: IDocPageProps = { code: VerticalBarChartCalloutExampleCode, view: , }, - { + /*{ ToDo - Fix this example title: 'VerticalStackedBarChart tooltip', code: VerticalBarChartTooltipExampleCode, view: , @@ -49,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'), From 539909bbd70ad38d3d438ca60a78d87dc24f8eb2 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 13:18:48 +0530 Subject: [PATCH 34/61] Fix unused imports --- .../VerticalStackedBarChart.doc.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index 8f0b61dbb908e..a0ede01858322 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -5,8 +5,8 @@ import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.Basic.Example'; import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart.Callout.Example'; -import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; -import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; +//import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; +//import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx') as string; @@ -14,10 +14,10 @@ const VerticalBarChartStyledExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx') as string; const VerticalBarChartCalloutExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Callout.Example.tsx') as string; -const VerticalBarChartTooltipExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example') as string; -const VerticalBarChartCustomAccessibilityExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example') as string; +//const VerticalBarChartTooltipExampleCode = +// require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTooltip.Example') as string; +//const VerticalBarChartCustomAccessibilityExampleCode = +// require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example') as string; export const VerticalStackedBarChartPageProps: IDocPageProps = { title: 'VerticalStackedBarChart', From 3b0033d54de95ac51b1b21d4336500e8c2762a33 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 13:35:58 +0530 Subject: [PATCH 35/61] Fix sparkline chart --- apps/public-docsite-resources/config/api-docs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index 6c2ded861e01f..d8577f259036e 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -103,7 +103,7 @@ module.exports = { 'PieChart', 'GaugeChart', 'SankeyChart', - 'SparklineChart', + 'Sparkline', 'StackedBarChart', 'MultiStackedBarChart', 'TreeChart', From 8da51cc65c736d1d15a7d988f05052223523e8c9 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 14:02:21 +0530 Subject: [PATCH 36/61] Apply nesting to vertical bar chart --- .../src/AppDefinition.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 16a87b54f331d..1e593e6410f18 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -544,10 +544,22 @@ export const AppDefinition: IAppDefinition = { url: '#/examples/DonutChart', }, { - component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarChartPage, - key: 'VerticalBarChart', name: 'VerticalBarChart', - url: '#/examples/VerticalBarChart', + links: [ + { + component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarChartPage, + key: 'VerticalBarChart', + name: 'VerticalBarChart', + url: '#/examples/VerticalBarChart/Basic', + }, + { + component: require('./components/pages/Charting/GroupedVerticalBarChartPage') + .GroupedVerticalBarChartPage, + key: 'GroupedVerticalBarChart', + name: 'VerticalBarChart - Grouped', + url: '#/examples/VerticalBarChart/Grouped', + }, + ], }, { component: require('./components/pages/Charting/GaugeChartPage').GaugeChartPage, @@ -555,13 +567,6 @@ export const AppDefinition: IAppDefinition = { name: 'GaugeChart', url: '#/examples/GaugeChart', }, - { - component: require('./components/pages/Charting/GroupedVerticalBarChartPage') - .GroupedVerticalBarChartPage, - key: 'GroupedVerticalBarChart', - name: 'GroupedVerticalBarChart', - url: '#/examples/GroupedVerticalBarChart', - }, { component: require('./components/pages/Charting/HeatMapChartPage').HeatMapChartPage, key: 'HeatMapChart', From 1463d23a45d465c0ff206ed0dcfaa7c605fff634 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 14:28:38 +0530 Subject: [PATCH 37/61] Move content to md --- .../src/AppDefinition.tsx | 8 ++- .../AreaChart/AreaChartPage.tsx | 47 +----------- .../AreaChart/docs/AreaChartOverview.md | 50 ++++--------- .../LineChart/LineChart.doc.tsx | 6 +- .../LineChart/LineChartPage.tsx | 72 ++----------------- .../LineChart/docs/LineChartAccessibility.md | 1 + .../LineChart/docs/LineChartDonts.md | 4 ++ .../LineChart/docs/LineChartDos.md | 4 ++ 8 files changed, 38 insertions(+), 154 deletions(-) create mode 100644 packages/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md create mode 100644 packages/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md create mode 100644 packages/react-examples/src/react-charting/LineChart/docs/LineChartDos.md diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 1e593e6410f18..f77b54f2ed8ce 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -545,12 +545,14 @@ export const AppDefinition: IAppDefinition = { }, { name: 'VerticalBarChart', + key: 'VerticalBarChart', + url: '#/examples/VerticalBarChart', links: [ { component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarChartPage, - key: 'VerticalBarChart', - name: 'VerticalBarChart', - url: '#/examples/VerticalBarChart/Basic', + key: 'VerticalBarChart - Standard', + name: 'VerticalBarChart - Standard', + url: '#/examples/VerticalBarChart/Standard', }, { component: require('./components/pages/Charting/GroupedVerticalBarChartPage') diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index a765b77e831ba..468a9f279dd4a 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx @@ -64,51 +64,8 @@ export class AreaChart extends React.Component { /> } isHeaderVisible={this.props.isHeaderVisible} - overview={ -
-

- Area charts depict a time-series relationship. But unlike line charts, they can also visually represent - volume. Information is graphed on two axes, using data points connected by line segments. The area between - the axis and this line is commonly emphasized with color or shading for legibility. Most often area charts - compare two or more categories. The area chart is a highly performant visual. It uses a path based - rendering mechanism to render the area component. On hovering, the nearest x datapoint is identified and - the corresponding point is hovered. -

-

Area chart variants

-

Stacked area chart

-

- In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across - different dimensions. The callout on hover for stacked chart displays multiple values from the stack. The - callout can be customized to show single values or stacked values. Refer to the props - onRenderCalloutPerDataPoint and onRenderCalloutPerStack using which custom content for the - callout can be defined. -

-

Custom accessibility

-

- Area chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. -

-
- } + overview={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md')} + bestPractices={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md')} /> ); } diff --git a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md index 20ea131f4f632..5fc68f4b16278 100644 --- a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md @@ -1,46 +1,24 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Area charts depict a time-series relationship. But unlike line charts, they can also visually represent + volume. Information is graphed on two axes, using data points connected by line segments. The area between + the axis and this line is commonly emphasized with color or shading for legibility. Most often area charts + compare two or more categories. The area chart is a highly performant visual. It uses a path based + rendering mechanism to render the area component. On hovering, the nearest x datapoint is identified and + the corresponding point is hovered.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

+

Area chart variants

+

Stacked area chart

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + In stacked area chart, two or more data series are stacked vertically. It helps in easy comparison across + different dimensions. The callout on hover for stacked chart displays multiple values from the stack. The + callout can be customized to show single values or stacked values. Refer to the props + onRenderCalloutPerDataPoint and onRenderCalloutPerStack using which custom content for the + callout can be defined.

Custom accessibility

- Line chart provides a bunch of props to enable custom accessibility messages. Use + Area chart provides a bunch of props to enable custom accessibility messages. Use xAxisCalloutAccessibilityData and callOutAccessibilityData to configure x axis and y axis accessibility messages respectively. diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx index a73c6b9ace78e..2c8ee7f12a41d 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx @@ -68,9 +68,9 @@ export const LineChartPageProps: IDocPageProps = { ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), - dos: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), - donts: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), - accessibility: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md'), + dos: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDos.md'), + donts: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md'), + accessibility: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md'), isHeaderVisible: true, isFeedbackVisible: true, }; diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index de4ed71eae052..dce018ca9b451 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -78,73 +78,11 @@ export class LineChartPage extends React.Component /> } isHeaderVisible={this.props.isHeaderVisible} - overview={ -

-

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. -

-
- } + overview={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md')} + bestPractices={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md')} + dos={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDos.md')} + donts={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md')} + accessibility={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md')} /> ); } diff --git a/packages/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md new file mode 100644 index 0000000000000..ccc3df942259d --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md @@ -0,0 +1 @@ +LineChart accessibility content placeholder diff --git a/packages/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md new file mode 100644 index 0000000000000..0862bff3f602f --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md @@ -0,0 +1,4 @@ +- Dont1 +- Dont2 +- Dont3 +- Dont4 diff --git a/packages/react-examples/src/react-charting/LineChart/docs/LineChartDos.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDos.md new file mode 100644 index 0000000000000..8444f381d03d7 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDos.md @@ -0,0 +1,4 @@ +- Do1 +- Do2 +- Do3 +- Do4 From b3927c5bbd42482f744f2261f4673c2ac3c659a2 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 16:04:30 +0530 Subject: [PATCH 38/61] Update markdown components --- .../src/react-charting/AreaChart/AreaChartPage.tsx | 13 +++++++++++-- .../src/react-charting/LineChart/LineChartPage.tsx | 4 ++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index 468a9f279dd4a..feec01b865e2b 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { AreaChartBasicExample } from './AreaChart.Basic.Example'; @@ -64,8 +65,16 @@ export class AreaChart extends React.Component { /> } isHeaderVisible={this.props.isHeaderVisible} - overview={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md')} - bestPractices={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md')} + overview={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md')} + + } /> ); } diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index dce018ca9b451..e6b78a323698d 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -77,12 +77,12 @@ export class LineChartPage extends React.Component ]} /> } - isHeaderVisible={this.props.isHeaderVisible} + /*isHeaderVisible={this.props.isHeaderVisible} overview={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md')} bestPractices={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md')} dos={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDos.md')} donts={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md')} - accessibility={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md')} + accessibility={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md')}*/ /> ); } From fc7afb919bba39cb999d81347ff5cad4ca57c587 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 20:33:02 +0530 Subject: [PATCH 39/61] Vertical bar sub group --- .../SiteDefinition.pages/Controls/web.tsx | 10 ++++-- .../LineChart/LineChartPage.tsx | 33 +++++++++++++++---- 2 files changed, 34 insertions(+), 9 deletions(-) diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 1749aadd6e8ee..0bb177f179b89 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -111,9 +111,14 @@ export const categories: { [name: string]: ICategory } = { LineChart: {}, AreaChart: {}, DonutChart: {}, - VerticalBarChart: {}, + VerticalBarChart: { + subPages: { + Standard: {}, + Stacked: {}, + Grouped: {}, + }, + }, GaugeChart: {}, - GroupedVerticalBarChart: {}, HeatMapChart: {}, HorizontalBarChart: {}, HorizontalBarChartWithAxis: {}, @@ -123,7 +128,6 @@ export const categories: { [name: string]: ICategory } = { StackedBarChart: {}, MultiStackedBarChart: {}, TreeChart: {}, - VerticalStackedBarChart: {}, }, Utilities: { Announced: { diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index e6b78a323698d..ed37c728cf35e 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { LineChartBasicExample } from './LineChart.Basic.Example'; @@ -77,12 +78,32 @@ export class LineChartPage extends React.Component ]} /> } - /*isHeaderVisible={this.props.isHeaderVisible} - overview={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md')} - bestPractices={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md')} - dos={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDos.md')} - donts={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md')} - accessibility={require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md')}*/ + isHeaderVisible={this.props.isHeaderVisible} + overview={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md')} + + } + dos={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDos.md')} + + } + donts={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md')} + + } + accessibility={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/docs/LineChartAccessibility.md')} + + } /> ); } From bb72d6a87983bd7398de1e476f9ab58003643a06 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Mon, 14 Aug 2023 21:19:47 +0530 Subject: [PATCH 40/61] Vertical bar chart sub pages --- .../src/AppDefinition.tsx | 15 ++++++++------- ...tPage.tsx => VerticalBarChartStandardPage.tsx} | 2 +- .../SiteDefinition.pages/Controls/web.tsx | 4 ++-- ...doc.ts => VerticalBarChartStandardPage.doc.ts} | 2 +- ...tPage.tsx => VerticalBarChartStandardPage.tsx} | 4 ++-- .../VerticalStackedBarChartPage.doc.ts | 0 .../VerticalStackedBarChartPage.tsx | 0 7 files changed, 14 insertions(+), 13 deletions(-) rename apps/public-docsite-resources/src/components/pages/Charting/{VerticalBarChartPage.tsx => VerticalBarChartStandardPage.tsx} (80%) rename apps/public-docsite/src/pages/Controls/VerticalBarChartPage/{VerticalBarChartPage.doc.ts => VerticalBarChartStandardPage.doc.ts} (77%) rename apps/public-docsite/src/pages/Controls/VerticalBarChartPage/{VerticalBarChartPage.tsx => VerticalBarChartStandardPage.tsx} (56%) rename apps/public-docsite/src/pages/Controls/{VerticalStackedBarChartPage => VerticalBarChartPage}/VerticalStackedBarChartPage.doc.ts (100%) rename apps/public-docsite/src/pages/Controls/{VerticalStackedBarChartPage => VerticalBarChartPage}/VerticalStackedBarChartPage.tsx (100%) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index f77b54f2ed8ce..c2e1ee179793d 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -549,17 +549,18 @@ export const AppDefinition: IAppDefinition = { url: '#/examples/VerticalBarChart', links: [ { - component: require('./components/pages/Charting/VerticalBarChartPage').VerticalBarChartPage, - key: 'VerticalBarChart - Standard', + component: require('./components/pages/Charting/VerticalBarChartStandardPage') + .VerticalBarChartStandardPage, + key: 'VerticalBarChartStandard', name: 'VerticalBarChart - Standard', url: '#/examples/VerticalBarChart/Standard', }, { - component: require('./components/pages/Charting/GroupedVerticalBarChartPage') - .GroupedVerticalBarChartPage, - key: 'GroupedVerticalBarChart', - name: 'VerticalBarChart - Grouped', - url: '#/examples/VerticalBarChart/Grouped', + component: require('./components/pages/Charting/VerticalStackedBarChartPage') + .VerticalStackedBarChartPage, + key: 'VerticalStackedBarChartPage', + name: 'VerticalBarChart - Stacked', + url: '#/examples/VerticalBarChart/Stacked', }, ], }, diff --git a/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx similarity index 80% rename from apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx rename to apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx index ec2db91a57ba6..10abf3699e418 100644 --- a/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartPage.tsx +++ b/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx @@ -3,7 +3,7 @@ import { DemoPage } from '../../DemoPage'; import { VerticalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; -export const VerticalBarChartPage = (props: { isHeaderVisible: boolean }) => ( +export const VerticalBarChartStandardPage = (props: { isHeaderVisible: boolean }) => ( = props => { const { platform } = props; - return ; + return ; }; diff --git a/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts similarity index 100% rename from apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.doc.ts rename to apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts diff --git a/apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx similarity index 100% rename from apps/public-docsite/src/pages/Controls/VerticalStackedBarChartPage/VerticalStackedBarChartPage.tsx rename to apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx From 50c2720ed3bc1e6861bbeeaa2f722ade5f89bcdd Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 12:40:44 +0530 Subject: [PATCH 41/61] Add vertical bar chart base page --- .../VerticalBarChartPage/VerticalBarChartPage.doc.ts | 8 ++++++++ .../VerticalBarChartPage/VerticalBarChartPage.tsx | 8 ++++++++ .../VerticalBarChartPage/VerticalBarChartStandardPage.tsx | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts create mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts new file mode 100644 index 0000000000000..cde767e2aca5c --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts @@ -0,0 +1,8 @@ +import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; +import { VerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; + +export const VerticalBarChartPageProps: TFabricPlatformPageProps = { + web: { + ...(ExternalProps as any), + }, +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx new file mode 100644 index 0000000000000..c4c0c07d95114 --- /dev/null +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; +import { VerticalBarChartPageProps } from './VerticalBarChartPage.doc'; + +export const VerticalBarChartPage: React.FunctionComponent = props => { + const { platform } = props; + return ; +}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx index 38d3c6888b86f..76bb814c0d8a6 100644 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; import { VerticalBarChartStandardPageProps } from './VerticalBarChartStandardPage.doc'; -export const VerticalBarChartPage: React.FunctionComponent = props => { +export const VerticalBarChartStandardPage: React.FunctionComponent = props => { const { platform } = props; return ; }; From d069a94382a6f6cd169a43531985df2b7d0c1a74 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 13:23:10 +0530 Subject: [PATCH 42/61] Fix title and url for sub pages --- .../src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx | 2 +- .../GroupedVerticalBarChartPage.doc.ts | 2 ++ .../GroupedVerticalBarChartPage.tsx | 0 .../VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts | 2 ++ .../VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts | 2 ++ 5 files changed, 7 insertions(+), 1 deletion(-) rename apps/public-docsite/src/pages/Controls/{GroupedVerticalBarChartPage => VerticalBarChartPage}/GroupedVerticalBarChartPage.doc.ts (85%) rename apps/public-docsite/src/pages/Controls/{GroupedVerticalBarChartPage => VerticalBarChartPage}/GroupedVerticalBarChartPage.tsx (100%) diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index b2839281bd08e..af9746f35d7da 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -115,7 +115,7 @@ export const categories: { [name: string]: ICategory } = { subPages: { VerticalBarChartStandard: {}, VerticalStackedBarChart: {}, - Grouped: {}, + GroupedVerticalBarChart: {}, }, }, GaugeChart: {}, diff --git a/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts similarity index 85% rename from apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts rename to apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts index 50a76bd55be9e..48baaf893d075 100644 --- a/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts @@ -4,5 +4,7 @@ import { GroupedVerticalBarChartPageProps as ExternalProps } from '@fluentui/rea export const GroupedVerticalBarChartPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'VerticalBarChart - Grouped', + url: 'grouped', }, }; diff --git a/apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx similarity index 100% rename from apps/public-docsite/src/pages/Controls/GroupedVerticalBarChartPage/GroupedVerticalBarChartPage.tsx rename to apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts index 5276622eae8bb..3cecd0bfb29b6 100644 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts @@ -4,5 +4,7 @@ import { VerticalBarChartPageProps as ExternalProps } from '@fluentui/react-exam export const VerticalBarChartStandardPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'VerticalBarChart - Standard', + url: 'standard', }, }; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts index 31a17818c3cdd..98b1b82604e86 100644 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts @@ -4,5 +4,7 @@ import { VerticalStackedBarChartPageProps as ExternalProps } from '@fluentui/rea export const VerticalStackedBarChartPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'VerticalBarChart - Stacked', + url: 'stacked', }, }; From 6ed57c19119774722fa82bca56161d063209028a Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 13:58:45 +0530 Subject: [PATCH 43/61] Rename VBC variant title --- .../src/AppDefinition.tsx | 18 +++++++++--------- .../SiteDefinition.pages/Controls/web.tsx | 6 +++--- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index c2e1ee179793d..b2996195787b7 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -551,17 +551,24 @@ export const AppDefinition: IAppDefinition = { { component: require('./components/pages/Charting/VerticalBarChartStandardPage') .VerticalBarChartStandardPage, - key: 'VerticalBarChartStandard', + key: 'VerticalBarChart - Standard', name: 'VerticalBarChart - Standard', url: '#/examples/VerticalBarChart/Standard', }, { component: require('./components/pages/Charting/VerticalStackedBarChartPage') .VerticalStackedBarChartPage, - key: 'VerticalStackedBarChartPage', + key: 'VerticalBarChart - Stacked', name: 'VerticalBarChart - Stacked', url: '#/examples/VerticalBarChart/Stacked', }, + { + component: require('./components/pages/Charting/GroupedVerticalBarChartPage') + .GroupedVerticalBarChartPage, + key: 'VerticalBarChart - Grouped', + name: 'VerticalBarChart - Grouped', + url: '#/examples/VerticalBarChart/Grouped', + }, ], }, { @@ -625,13 +632,6 @@ export const AppDefinition: IAppDefinition = { name: 'TreeChart', url: '#/examples/TreeChart', }, - { - component: require('./components/pages/Charting/VerticalStackedBarChartPage') - .VerticalStackedBarChartPage, - key: 'VerticalStackedBarChart', - name: 'VerticalStackedBarChart', - url: '#/examples/VerticalStackedBarChart', - }, ], }, { diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index af9746f35d7da..3cc9abbc20862 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -113,9 +113,9 @@ export const categories: { [name: string]: ICategory } = { DonutChart: {}, VerticalBarChart: { subPages: { - VerticalBarChartStandard: {}, - VerticalStackedBarChart: {}, - GroupedVerticalBarChart: {}, + VerticalBarChartStandard: { title: 'Standard' }, + VerticalStackedBarChart: { title: 'Stacked' }, + GroupedVerticalBarChart: { title: 'Grouped' }, }, }, GaugeChart: {}, From 896dafddb62261c0887cd2172fb66b80b62756ce Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 14:47:05 +0530 Subject: [PATCH 44/61] Fix page title --- .../SiteDefinition/SiteDefinition.pages/Controls/web.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 3cc9abbc20862..e59b7e1b436db 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -113,9 +113,9 @@ export const categories: { [name: string]: ICategory } = { DonutChart: {}, VerticalBarChart: { subPages: { - VerticalBarChartStandard: { title: 'Standard' }, - VerticalStackedBarChart: { title: 'Stacked' }, - GroupedVerticalBarChart: { title: 'Grouped' }, + Standard: { title: 'Standard' }, + Stacked: { title: 'Stacked' }, + Grouped: { title: 'Grouped' }, }, }, GaugeChart: {}, From 8046730198bcd2165b004212f8c3887a0798c3c2 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 16:50:37 +0530 Subject: [PATCH 45/61] Fix VBC Stacked --- apps/public-docsite-resources/src/AppDefinition.tsx | 7 ------- .../SiteDefinition/SiteDefinition.pages/Controls/web.tsx | 3 +-- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index b2996195787b7..8304b6e2d5196 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -548,13 +548,6 @@ export const AppDefinition: IAppDefinition = { key: 'VerticalBarChart', url: '#/examples/VerticalBarChart', links: [ - { - component: require('./components/pages/Charting/VerticalBarChartStandardPage') - .VerticalBarChartStandardPage, - key: 'VerticalBarChart - Standard', - name: 'VerticalBarChart - Standard', - url: '#/examples/VerticalBarChart/Standard', - }, { component: require('./components/pages/Charting/VerticalStackedBarChartPage') .VerticalStackedBarChartPage, diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index e59b7e1b436db..8357cbe7b3f40 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -113,8 +113,7 @@ export const categories: { [name: string]: ICategory } = { DonutChart: {}, VerticalBarChart: { subPages: { - Standard: { title: 'Standard' }, - Stacked: { title: 'Stacked' }, + VerticalStackedBarChart: { title: 'Stacked' }, Grouped: { title: 'Grouped' }, }, }, From 378e006a8ed8f864ebf9f147520506c183cb9b2b Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 17:17:59 +0530 Subject: [PATCH 46/61] Make categories for horizontal bar chart --- .../src/AppDefinition.tsx | 40 ++++++++++--------- .../SiteDefinition.pages/Controls/web.tsx | 13 +++--- .../HorizontalBarChartWithAxisPage.doc.ts | 2 + .../HorizontalBarChartWithAxisPage.tsx | 0 .../MultiStackedBarChartPage.doc.ts | 2 + .../MultiStackedBarChartPage.tsx | 0 .../StackedBarChartPage.doc.ts | 2 + .../StackedBarChartPage.tsx | 0 8 files changed, 35 insertions(+), 24 deletions(-) rename apps/public-docsite/src/pages/Controls/{HorizontalBarChartWithAxisPage => HorizontalBarChartPage}/HorizontalBarChartWithAxisPage.doc.ts (85%) rename apps/public-docsite/src/pages/Controls/{HorizontalBarChartWithAxisPage => HorizontalBarChartPage}/HorizontalBarChartWithAxisPage.tsx (100%) rename apps/public-docsite/src/pages/Controls/{MultiStackedBarChartPage => HorizontalBarChartPage}/MultiStackedBarChartPage.doc.ts (82%) rename apps/public-docsite/src/pages/Controls/{MultiStackedBarChartPage => HorizontalBarChartPage}/MultiStackedBarChartPage.tsx (100%) rename apps/public-docsite/src/pages/Controls/{StackedBarChartPage => HorizontalBarChartPage}/StackedBarChartPage.doc.ts (84%) rename apps/public-docsite/src/pages/Controls/{StackedBarChartPage => HorizontalBarChartPage}/StackedBarChartPage.tsx (100%) diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index 8304b6e2d5196..f603dbc45f35e 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -581,13 +581,27 @@ export const AppDefinition: IAppDefinition = { key: 'HorizontalBarChart', name: 'HorizontalBarChart', url: '#/examples/HorizontalBarChart', - }, - { - component: require('./components/pages/Charting/HorizontalBarChartWithAxisPage') - .HorizontalBarChartWithAxisPage, - key: 'HorizontalBarChartWithAxis', - name: 'HorizontalBarChartWithAxis', - url: '#/examples/HorizontalBarChartWithAxis', + links: [ + { + component: require('./components/pages/Charting/HorizontalBarChartWithAxisPage') + .HorizontalBarChartWithAxisPage, + key: 'HorizontalBarChart - WithAxis', + name: 'HorizontalBarChart - WithAxis', + url: '#/examples/HorizontalBarChart/WithAxis', + }, + { + component: require('./components/pages/Charting/MultiStackedBarChartPage').MultiStackedBarChartPage, + key: 'HorizontalBarChart - MultiStacked', + name: 'HorizontalBarChart - MultiStacked', + url: '#/examples/HorizontalBarChart/MultiStacked', + }, + { + component: require('./components/pages/Charting/StackedBarChartPage').StackedBarChartPage, + key: 'HorizontalBarChart - Stacked', + name: 'HorizontalBarChart - Stacked', + url: '#/examples/HorizontalBarChart/Stacked', + }, + ], }, { component: require('./components/pages/Charting/PieChartPage').PieChartPage, @@ -607,18 +621,6 @@ export const AppDefinition: IAppDefinition = { name: 'SparklineChart', url: '#/examples/SparklineChart', }, - { - component: require('./components/pages/Charting/StackedBarChartPage').StackedBarChartPage, - key: 'StackedBarChart', - name: 'StackedBarChart', - url: '#/examples/StackedBarChart', - }, - { - component: require('./components/pages/Charting/MultiStackedBarChartPage').MultiStackedBarChartPage, - key: 'MultiStackedBarChart', - name: 'MultiStackedBarChart', - url: '#/examples/MultiStackedBarChart', - }, { component: require('./components/pages/Charting/TreeChartPage').TreeChartPage, key: 'TreeChart', diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 8357cbe7b3f40..04ea5c5b624e4 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -113,19 +113,22 @@ export const categories: { [name: string]: ICategory } = { DonutChart: {}, VerticalBarChart: { subPages: { - VerticalStackedBarChart: { title: 'Stacked' }, Grouped: { title: 'Grouped' }, + VerticalStackedBarChart: { title: 'Stacked' }, }, }, GaugeChart: {}, HeatMapChart: {}, - HorizontalBarChart: {}, - HorizontalBarChartWithAxis: {}, + HorizontalBarChart: { + subPages: { + StackedBarChart: { title: 'Stacked' }, + MultiStackedBarChart: { title: 'Multi Stacked' }, + WithAxis: { title: 'With Axis' }, + }, + }, PieChart: {}, SankeyChart: {}, SparklineChart: {}, - StackedBarChart: {}, - MultiStackedBarChart: {}, TreeChart: {}, }, Utilities: { diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts similarity index 85% rename from apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts index 08a815a305250..926d1bf96c0b5 100644 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts @@ -4,5 +4,7 @@ import { HorizontalBarChartWithAxisPageProps as ExternalProps } from '@fluentui/ export const HorizontalBarChartWithAxisPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'HorizontalBarChart - WithAxis', + url: 'withaxis', }, }; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx similarity index 100% rename from apps/public-docsite/src/pages/Controls/HorizontalBarChartWithAxisPage/HorizontalBarChartWithAxisPage.tsx rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx diff --git a/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts similarity index 82% rename from apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts index d9f21ddbe1580..65e0688c36460 100644 --- a/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts @@ -4,5 +4,7 @@ import { MultiStackedBarChartPageProps as ExternalProps } from '@fluentui/react- export const MultiStackedBarChartPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'HorizontalBarChart - Multi Stacked', + url: 'multistacked', }, }; diff --git a/apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx similarity index 100% rename from apps/public-docsite/src/pages/Controls/MultiStackedBarChartPage/MultiStackedBarChartPage.tsx rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx diff --git a/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts similarity index 84% rename from apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts index 09fc888f43f4c..3ed7d3aeb0eb1 100644 --- a/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.doc.ts +++ b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts @@ -4,5 +4,7 @@ import { StackedBarChartPageProps as ExternalProps } from '@fluentui/react-examp export const StackedBarChartPageProps: TFabricPlatformPageProps = { web: { ...(ExternalProps as any), + title: 'HorizontalBarChart - Stacked', + url: 'stacked', }, }; diff --git a/apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx similarity index 100% rename from apps/public-docsite/src/pages/Controls/StackedBarChartPage/StackedBarChartPage.tsx rename to apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx From 442fd4c387778e8f5793fe36ba15a16a59469f23 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 16 Aug 2023 22:37:06 +0530 Subject: [PATCH 47/61] Update documentation --- .../AreaChart/docs/AreaChartBestPractices.md | 2 +- .../DonutChart/DonutChartPage.tsx | 26 ++-- .../docs/DonutChartBestPractices.md | 2 +- .../DonutChart/docs/DonutChartOverview.md | 62 +-------- .../GaugeChart/GaugeChartPage.tsx | 49 ++----- .../docs/GaugeChartBestPractices.md | 2 +- .../GaugeChart/docs/GaugeChartOverview.md | 97 +++++--------- .../GroupedVerticalBarChartPage.tsx | 22 ++- .../GroupedVerticalBarChartBestPractices.md | 2 +- .../docs/GroupedVerticalBarChartOverview.md | 66 +-------- .../HeatMapChart/HeatMapChartPage.tsx | 63 ++------- .../docs/HeatMapChartBestPractices.md | 2 +- .../HeatMapChart/docs/HeatMapChartOverview.md | 57 ++++---- .../HorizontalBarChartPage.tsx | 41 ++---- .../docs/HorizontalBarChartBestPractices.md | 2 +- .../docs/HorizontalBarChartOverview.md | 69 +++------- .../HorizontalBarChartWithAxisPage.tsx | 35 ++--- ...HorizontalBarChartWithAxisBestPractices.md | 2 +- .../HorizontalBarChartWithAxisOverview.md | 63 ++------- .../react-charting/Legends/LegendsPage.tsx | 34 ++--- .../Legends/docs/LegendsOverview.md | 48 +++---- .../MultiStackedBarChartPage.tsx | 44 ++---- .../docs/MultiStackedBarChartBestPractices.md | 2 +- .../docs/MultiStackedBarChartOverview.md | 92 +++++-------- .../react-charting/PieChart/PieChartPage.tsx | 11 ++ .../PieChart/docs/PieChartBestPractices.md | 2 +- .../PieChart/docs/PieChartOverview.md | 62 +-------- .../SankeyChart/SankeyChartPage.tsx | 17 +-- .../docs/SankeyChartBestPractices.md | 2 +- .../SankeyChart/docs/SankeyChartOverview.md | 65 +-------- .../SparklineChart/SparklineChartPage.tsx | 16 ++- .../docs/SparklineChartBestPractices.md | 2 +- .../docs/SparklineChartOverview.md | 64 +-------- .../StackedBarChart/StackedBarChartPage.tsx | 77 ++--------- .../docs/StackedBarChartBestPractices.md | 2 +- .../docs/StackedBarChartOverview.md | 125 +++++++++--------- .../TreeChart/TreeChartPage.tsx | 34 ++--- .../TreeChart/docs/TreeChartBestPractices.md | 2 +- .../TreeChart/docs/TreeChartOverview.md | 70 +++------- .../VerticalBarChart/VerticalBarChartPage.tsx | 40 ++---- .../docs/VerticalBarChartBestPractices.md | 2 +- .../docs/VerticalBarChartOverview.md | 64 +++------ .../VerticalStackedBarChartPage.tsx | 39 ++---- .../VerticalStackedBarChartBestPractices.md | 2 +- .../docs/VerticalStackedBarChartOverview.md | 63 ++------- 45 files changed, 426 insertions(+), 1219 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md index 9881deee2a8c2..ee640b1ce0f1d 100644 --- a/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +AreaChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx index 6de24b8d36867..09358f8e26112 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { DonutChartBasicExample } from './DonutChart.Basic.Example'; @@ -52,23 +53,14 @@ export class DonutChartPage extends React.Component } isHeaderVisible={this.props.isHeaderVisible} overview={ -
-

- Donut charts show a percentage of a whole. They are circular statistical graphics divided into slices to - illustrate numerical proportion. Donut charts have an empty center where a numerical value can be shown. -

-

- The arc length of each data set in a donut is proportional to the quantity it represents, which can also - be expressed as a horizontal bar chart. -

-

- Note: Donut Charts typically represent two data points. Representing more data in a - circular chart (as seen in the second example) is known by the MADS team as a Pie Chart. -

-

- The arc labels are hidden by default. Set the hideLabels prop to false to show them. -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md index 9881deee2a8c2..93c4396370ee6 100644 --- a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +DonutChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md index 20ea131f4f632..14d7cebde5883 100644 --- a/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md @@ -1,65 +1,17 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Donut charts show a percentage of a whole. They are circular statistical graphics divided into slices to + illustrate numerical proportion. Donut charts have an empty center where a numerical value can be shown.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + The arc length of each data set in a donut is proportional to the quantity it represents, which can also + be expressed as a horizontal bar chart.

-

Gaps

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + Note: Donut Charts typically represent two data points. Representing more data in a + circular chart (as seen in the second example) is known by the MADS team as a Pie Chart.

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + The arc labels are hidden by default. Set the hideLabels prop to false to show them.

diff --git a/packages/react-examples/src/react-charting/GaugeChart/GaugeChartPage.tsx b/packages/react-examples/src/react-charting/GaugeChart/GaugeChartPage.tsx index 510bad42a8f19..277a3d20d635e 100644 --- a/packages/react-examples/src/react-charting/GaugeChart/GaugeChartPage.tsx +++ b/packages/react-examples/src/react-charting/GaugeChart/GaugeChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { GaugeChartBasicExample } from './GaugeChart.Basic.Example'; @@ -40,46 +41,14 @@ export class GaugeChartPage extends React.Component } isHeaderVisible={this.props.isHeaderVisible} overview={ -
-

- Gauge chart measures the progress of a metric against its target and its primary components are a - speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from - left to right. -

-

Implementation details

-
    -
  • - The diameter of the gauge depends upon the width and height props passed to - the chart. If the props are omitted, a default diameter of 140px will be used. -
    • -
  • - To render a title above the gauge, set the chartTitle prop. -
    • -
  • - The needle position depends upon the required chartValue prop. -
    • -
  • - Use the required segments prop to divide the gauge into colored sections. These sections - can have fixed sizes, or the users can choose to create a sweeping effect by varying the segment size - with the chartValue. -
    • -
  • - Set the minValue prop if the minimum value of the gauge is different than 0. A placeholder - segment will be rendered if the maxValue prop is greater than the total size of the - segments. -
    • -
  • - To render an additional text below the chartValue, set the sublabel prop. -
    • -
  • - To hide the minimum and maximum values of the gauge, set the hideMinMax prop. -
    • -
  • - The chartValue prop is rendered as a percentage by default. Set the chartVaueFormat prop to - 'fraction' or a formatter function. -
    • -
-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md index 9881deee2a8c2..6023323846988 100644 --- a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +GaugeChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md index 20ea131f4f632..7011bcc4a4cf0 100644 --- a/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md @@ -1,65 +1,40 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + Gauge chart measures the progress of a metric against its target and its primary components are a + speedometer and a needle. The speedometer usually consists of color-coded segments progressing value from + left to right.

+

Implementation details

+
    +
  • + The diameter of the gauge depends upon the width and height props passed to + the chart. If the props are omitted, a default diameter of 140px will be used. +
    • +
  • + To render a title above the gauge, set the chartTitle prop. +
    • +
  • + The needle position depends upon the required chartValue prop. +
    • +
  • + Use the required segments prop to divide the gauge into colored sections. These sections + can have fixed sizes, or the users can choose to create a sweeping effect by varying the segment size + with the chartValue. +
    • +
  • + Set the minValue prop if the minimum value of the gauge is different than 0. A placeholder + segment will be rendered if the maxValue prop is greater than the total size of the + segments. +
    • +
  • + To render an additional text below the chartValue, set the sublabel prop. +
    • +
  • + To hide the minimum and maximum values of the gauge, set the hideMinMax prop. +
    • +
  • + The chartValue prop is rendered as a percentage by default. Set the chartVaueFormat prop to + 'fraction' or a formatter function. +
    • +
diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChartPage.tsx index 3c52bf1a4f18f..e334297f1ae7e 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { GroupedVerticalBarChartBasicExample } from './GroupedVerticalBarChart.Basic.Example'; @@ -56,19 +57,14 @@ export class GroupedVerticalBarChart extends React.Component -

- Grouped vertical bar chart is slightly different than a vertical stacked bar chart. In a vertical stacked - bar chart, the bars are stacked one on top of the other. In a grouped vertical bar chart, the vertical - bars are aligned next to each other in groups. In stacked bar chart, the reference point for each bar is - either the x axis or another bar in the stack. For grouped vertical bar chart, each bar has x axis as the - reference point. Having a common reference point helps in better comparison between different values in - the chart. -

-

- The bar labels are shown by default. Set the hideLabels prop to hide them. -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md index 9881deee2a8c2..4f714c6fb95d8 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +GroupedVerticalBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md index 20ea131f4f632..947e8b198ffc5 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md @@ -1,65 +1,13 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Grouped vertical bar chart is slightly different than a vertical stacked bar chart. In a vertical stacked + bar chart, the bars are stacked one on top of the other. In a grouped vertical bar chart, the vertical + bars are aligned next to each other in groups. In stacked bar chart, the reference point for each bar is + either the x axis or another bar in the stack. For grouped vertical bar chart, each bar has x axis as the + reference point. Having a common reference point helps in better comparison between different values in + the chart.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + The bar labels are shown by default. Set the hideLabels prop to hide them.

diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx index 98f25ef107852..b5723d86c159d 100644 --- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx +++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { HeatMapChartBasicExample } from './HeatMapChartBasic.Example'; import { HeatMapChartCustomAccessibilityExample } from './HeatMapChartBasic.CustomAccessibility.Example'; @@ -37,60 +38,14 @@ export class HeatMapChart extends React.Component { /> } overview={ -
-

- Heat Map Chart is a two-dimensional visual representation of data, where values are encoded in colors, - delivering a convenient, insightful view of information. Essentially, this chart type is a data table with - rows and columns denoting different sets of categories. Each cell in the table can contain a numerical or - logical value that determines the cell color based on a given color palette. -

-

Defining Color scale

-

- The color palette for a heat map chart is defined by a domain/range combination. The domain consists of - values in the chart columns. It is an array of numbers. See domainValuesForColorScale. The - range is an array rangeValuesForColorScale of colors in hex format. The graph creates a - mapping between each value from domain to range. For all values in the domain, an equivalent interpolation - is drawn in the range of color scale. For eg: if the domain is [0,500,900] and range is [green, blue, - red], then [0, 500] is mapped in the range [green, blue] and [500, 900] in the range [blue, red], -

-

Data formatting

-

Use the following formatters based on the type of axis.

-

- For date x axis use: xAxisDateFormatString -

-

- For date y axis use: yAxisDateFormatString -

-

- For numeric x axis use: xAxisNumberFormatString -

-

- For numeric y axis use: yAxisNumberFormatString -

-

- For string x axis use: xAxisStringFormatter -

-

- For string y axis use: yAxisStringFormatter -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md index 9881deee2a8c2..bb2bd454397a2 100644 --- a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +HeatMapChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md index 20ea131f4f632..abaf7fbb0c10c 100644 --- a/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md @@ -1,49 +1,38 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Heat Map Chart is a two-dimensional visual representation of data, where values are encoded in colors, + delivering a convenient, insightful view of information. Essentially, this chart type is a data table with + rows and columns denoting different sets of categories. Each cell in the table can contain a numerical or + logical value that determines the cell color based on a given color palette.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

+

Defining Color scale

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + The color palette for a heat map chart is defined by a domain/range combination. The domain consists of + values in the chart columns. It is an array of numbers. See domainValuesForColorScale. The + range is an array rangeValuesForColorScale of colors in hex format. The graph creates a + mapping between each value from domain to range. For all values in the domain, an equivalent interpolation + is drawn in the range of color scale. For eg: if the domain is [0,500,900] and range is [green, blue, + red], then [0, 500] is mapped in the range [green, blue] and [500, 900] in the range [blue, red],

-

Gaps

+

Data formatting

+

Use the following formatters based on the type of axis.

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + For date x axis use: xAxisDateFormatString

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. + For date y axis use: yAxisDateFormatString

-

Lines with large dataset

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + For numeric x axis use: xAxisNumberFormatString

-

Custom accessibility

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. + For numeric y axis use: yAxisNumberFormatString +

+

+ For string x axis use: xAxisStringFormatter +

+

+ For string y axis use: yAxisStringFormatter

Date Axis localization

diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx index 6c08c6361bfd8..6a05e30ab46db 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { HorizontalBarChartBasicExample } from './HorizontalBarChart.Basic.Example'; @@ -61,38 +62,14 @@ export class HorizontalBarChartPage extends React.Component -

- Use a horizontal bar graph to compare between different values that are hierarchically equivalent. The - rectangular bar length is proportional to the values they represent. There will always be a maximum data - value (color) that is used to represent the total length. -

-

Numerical values are represented through abbreviations.

-

Bar chart custom data

-

- This property allows customizing the right side data part of the chart. See the usage of - barChartCustomData - prop in custom callout variant. -

-

Custom hover callout

-

- See onRenderCalloutPerHorizontalBar prop to customize the hover callout. -

-

- Set the chartDataMode as number, fraction or percentage to specify how numerical values will - be shown on the chart. -

-

Benchmark data

-

- Set the data attribute of IChartDataPoint to specify the benchmark value. The benchmark value - is shown as an inverted triangle in the chart. -

-

AbsoluteScale variant

-

- The bar labels are shown by default in the absolute-scale variant. Set the hideLabels prop to - hide them. -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md index 9881deee2a8c2..5bc8b76309a15 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +HorizontalBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md index 20ea131f4f632..f6ed14840b737 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md @@ -1,65 +1,32 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Use a horizontal bar graph to compare between different values that are hierarchically equivalent. The + rectangular bar length is proportional to the values they represent. There will always be a maximum data + value (color) that is used to represent the total length.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

+

Numerical values are represented through abbreviations.

+

Bar chart custom data

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + This property allows customizing the right side data part of the chart. See the usage of + barChartCustomData + prop in custom callout variant.

-

Gaps

+

Custom hover callout

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + See onRenderCalloutPerHorizontalBar prop to customize the hover callout.

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. + Set the chartDataMode as number, fraction or percentage to specify how numerical values will + be shown on the chart.

-

Lines with large dataset

+

Benchmark data

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + Set the data attribute of IChartDataPoint to specify the benchmark value. The benchmark value + is shown as an inverted triangle in the chart.

-

Custom accessibility

+

AbsoluteScale variant

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + The bar labels are shown by default in the absolute-scale variant. Set the hideLabels prop to + hide them.

diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisPage.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisPage.tsx index 5983118433ea4..f60e805e634d5 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisPage.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { HorizontalBarChartWithAxisBasicExample } from './HorizontalBarChartWithAxis.Basic.Example'; @@ -52,32 +53,14 @@ export class HorizontalBarChartWithAxisPage extends React.Component -

- Use a horizontal bar graph to compare between different values that are hierarchically equivalent. The - rectangular bar length is proportional to the values they represent. There will always be a maximum data - value (color) that is used to represent the total length. -

-

- The bar widths are proportional to the number of bars and space available within the charting area. The - bar width can be changed using the barWidth property. -

-

Implementation details

-

- The chart provides an option to select a color scale based on the range of x values. Similar x values will - end up having similar color. Use the colors attribute to define the color scale. -

-

- Use useSingleColor to use a single color for all bars. -

-

- See onRenderCalloutPerHorizontalBar prop to customize the hover callout. -

-

- If the y data points are of String there are 2 modes to view them, the first to truncates yaxis labels - using showYAxisLablesTooltip and the second enables to view the complete labels using expandYAxisLabels. -

- + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md index 9881deee2a8c2..87298428eb4c4 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +HorizontalBarChartWithAxis best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md index 20ea131f4f632..cf0133b4a742c 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md @@ -1,65 +1,26 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Use a horizontal bar graph to compare between different values that are hierarchically equivalent. The + rectangular bar length is proportional to the values they represent. There will always be a maximum data + value (color) that is used to represent the total length.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + The bar widths are proportional to the number of bars and space available within the charting area. The + bar width can be changed using the barWidth property.

-

Gaps

+

Implementation details

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + The chart provides an option to select a color scale based on the range of x values. Similar x values will + end up having similar color. Use the colors attribute to define the color scale.

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. + Use useSingleColor to use a single color for all bars.

-

Lines with large dataset

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + See onRenderCalloutPerHorizontalBar prop to customize the hover callout.

-

Custom accessibility

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + If the y data points are of String there are 2 modes to view them, the first to truncates yaxis labels + using showYAxisLablesTooltip and the second enables to view the complete labels using expandYAxisLabels.

diff --git a/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx b/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx index d1932eb918dac..d5b3e98f8d009 100644 --- a/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx +++ b/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { LegendOverflowExample } from './Legends.Overflow.Example'; @@ -55,31 +56,14 @@ export class LegendsPage extends React.Component { /> } overview={ -
-

- A legend describes each of the component of the chart. The legends wrap based upon the space available for - them. If there is not enough space to show all legends on a single line, the legends fall into an overflow - menu. A button is shown to open the overflow menu and indicating the number of legends in it. -

-

Legend Actions

-

- The legends are selectable. Action to be performed upon clicking a certain legend can be customized. Refer - to the action, hoverAction and onMouseOutAction properties to customize these actions. -

-

Legend shapes and colors

-

- Use shape to customize the legend shape. Legend support different shapes like rectangle, - triangle, diamond, circle, pyramid, hexagon etc. Use stripePattern to have stripe pattern - applied to the legend shape. If isLineLegendInBarChart is set, the legend will have the shape - of a line with height 4px. All other legend shapes have a height of 12px -

-

Legend overflow

-

- overflowText describes the overflow text. overflowProps can be used to set - properties like overflow layout direction to be stacked/vertical, overflow side to be start/end, overflow - styling and more. -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md index ec329dde6df55..2b7925ee7765b 100644 --- a/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md @@ -1,25 +1,25 @@
-

- A legend describes each of the component of the chart. The legends wrap based upon the space available for - them. If there is not enough space to show all legends on a single line, the legends fall into an overflow - menu. A button is shown to open the overflow menu and indicating the number of legends in it. -

-

Legend Actions

-

- The legends are selectable. Action to be performed upon clicking a certain legend can be customized. Refer - to the action, hoverAction and onMouseOutAction properties to customize these actions. -

-

Legend shapes and colors

-

- Use shape to customize the legend shape. Legend support different shapes like rectangle, - triangle, diamond, circle, pyramid, hexagon etc. Use stripePattern to have stripe pattern - applied to the legend shape. If isLineLegendInBarChart is set, the legend will have the shape - of a line with height 4px. All other legend shapes have a height of 12px -

-

Legend overflow

-

- overflowText describes the overflow text. overflowProps can be used to set - properties like overflow layout direction to be stacked/vertical, overflow side to be start/end, overflow - styling and more. -

-
+

+ A legend describes each of the component of the chart. The legends wrap based upon the space available for + them. If there is not enough space to show all legends on a single line, the legends fall into an overflow + menu. A button is shown to open the overflow menu and indicating the number of legends in it. +

+

Legend Actions

+

+ The legends are selectable. Action to be performed upon clicking a certain legend can be customized. Refer + to the action, hoverAction and onMouseOutAction properties to customize these actions. +

+

Legend shapes and colors

+

+ Use shape to customize the legend shape. Legend support different shapes like rectangle, + triangle, diamond, circle, pyramid, hexagon etc. Use stripePattern to have stripe pattern + applied to the legend shape. If isLineLegendInBarChart is set, the legend will have the shape + of a line with height 4px. All other legend shapes have a height of 12px +

+

Legend overflow

+

+ overflowText describes the overflow text. overflowProps can be used to set + properties like overflow layout direction to be stacked/vertical, overflow side to be start/end, overflow + styling and more. +

+ diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx index 91bb42c6b7b5b..b606615a77124 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx @@ -4,6 +4,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; @@ -48,41 +49,14 @@ export class MultiStackedBarChartPage extends React.Component -

- StackedBarChart shows the data in a bar format. It has two variations: single stacked and multi-stacked. - Below are a few points that will help you understand the multi stacked bar chart better: -

-

Multi stacked bar chart

-
    -
  • - Multi-stacked bar chart takes 'data' attribute which is of type IChartDataPoint[][]. It will render the - chart based upon the values given to this attribute. -
    • -
  • - MultiStackedBarChart has an option hideRatio which shows/hides the ratio on top right of - the chart. It is a boolean[], one bool for each bar group. This value is applicable only when there are - 2 datapoints in the chart. Similarly there is an option hideDenominator to hide the - denominator of the ratio if it is enabled. -
    • -
  • - If a datapoint is marked as placeHolder there will be no corresponding legend. The default - color of placeholder data is tertiary grey. -
    • -
  • - If a chart in MultiStackedBarChart shows ratio or number, legends are not displayed for that chart and - vice-versa. -
    • -
  • - A number is displayed on the top of stacked bar chart if it has only one data point. This number shown - is the datapoint that is passed to the chart. -
    • -
  • - The bar labels are shown by default in the absolute-scale variant. Set the hideLabels prop - to hide them. -
    • -
- + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md index 9881deee2a8c2..59f36a547e22d 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +MultiStackedBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md index 20ea131f4f632..331a62db42e5b 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md @@ -1,65 +1,35 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + StackedBarChart shows the data in a bar format. It has two variations: single stacked and multi-stacked. + Below are a few points that will help you understand the multi stacked bar chart better:

+

Multi stacked bar chart

+
    +
  • + Multi-stacked bar chart takes 'data' attribute which is of type IChartDataPoint[][]. It will render the + chart based upon the values given to this attribute. +
    • +
  • + MultiStackedBarChart has an option hideRatio which shows/hides the ratio on top right of + the chart. It is a boolean[], one bool for each bar group. This value is applicable only when there are + 2 datapoints in the chart. Similarly there is an option hideDenominator to hide the + denominator of the ratio if it is enabled. +
    • +
  • + If a datapoint is marked as placeHolder there will be no corresponding legend. The default + color of placeholder data is tertiary grey. +
    • +
  • + If a chart in MultiStackedBarChart shows ratio or number, legends are not displayed for that chart and + vice-versa. +
    • +
  • + A number is displayed on the top of stacked bar chart if it has only one data point. This number shown + is the datapoint that is passed to the chart. +
    • +
  • + The bar labels are shown by default in the absolute-scale variant. Set the hideLabels prop + to hide them. +
    • +
diff --git a/packages/react-examples/src/react-charting/PieChart/PieChartPage.tsx b/packages/react-examples/src/react-charting/PieChart/PieChartPage.tsx index fc045694c0f35..c861c672a7f1a 100644 --- a/packages/react-examples/src/react-charting/PieChart/PieChartPage.tsx +++ b/packages/react-examples/src/react-charting/PieChart/PieChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { PieChartBasicExample } from './PieChart.Basic.Example'; @@ -38,6 +39,16 @@ export class PieChartPage extends React.Component { ]} /> } + overview={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md')} + + } isHeaderVisible={this.props.isHeaderVisible} /> ); diff --git a/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md b/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md index 9881deee2a8c2..f8da27b9ac64f 100644 --- a/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +PieChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md b/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md index 20ea131f4f632..5a9cefe420031 100644 --- a/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md @@ -1,65 +1,5 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + Pie Chart needs documentation.

diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChartPage.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChartPage.tsx index 718ecea755dbd..adc4543120386 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChartPage.tsx +++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { SankeyChartBasicExample } from './SankeyChart.Basic.Example'; @@ -40,14 +41,14 @@ export class SankeyChartPage extends React.Component -

- A sankey diagram is a visualization used to depict a flow from one set of values to another. The things - being connected are called nodes and the connections are called links. Sankeys are best used when you want - to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths - through a set of stages -

- + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md index 9881deee2a8c2..3605ab0e5f5f9 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +SankeyChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md index 20ea131f4f632..b3e549f1f4bf5 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md @@ -1,65 +1,8 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + A sankey diagram is a visualization used to depict a flow from one set of values to another. The things + being connected are called nodes and the connections are called links. Sankeys are best used when you want + to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths + through a set of stages

diff --git a/packages/react-examples/src/react-charting/SparklineChart/SparklineChartPage.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChartPage.tsx index 1df259ebaa02d..3a94d40a07dba 100644 --- a/packages/react-examples/src/react-charting/SparklineChart/SparklineChartPage.tsx +++ b/packages/react-examples/src/react-charting/SparklineChart/SparklineChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { SparklineChartBasicExample } from './SparklineChart.Basic.Example'; @@ -34,13 +35,14 @@ export class SparklineChartPage extends React.Component -

- A sparkline is a very small area chart without axes or coordinates, usually representing trend over time. - When used as a component in lists, the sparkline is paired with a numeric value that summarizes or - provides the most current value of the chart. -

- + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md index 9881deee2a8c2..5846efdec791c 100644 --- a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +SparklineChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md index 20ea131f4f632..5de1b0f043f5a 100644 --- a/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md @@ -1,65 +1,7 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + A sparkline is a very small area chart without axes or coordinates, usually representing trend over time. + When used as a component in lists, the sparkline is paired with a numeric value that summarizes or + provides the most current value of the chart.

diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChartPage.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChartPage.tsx index cbc6c51d6bc0a..86ccb4d0e7c2a 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { StackedBarChartBasicExample } from './StackedBarChart.Basic.Example'; @@ -66,74 +67,14 @@ export class StackedBarChartPage extends React.Component } overview={ -
-

- StackedBarChart shows the data in a bar format. It has two variations: single stacked and multi-stacked. - The stacked bar chart comes with a legends component built in. Below are a few points that will help you - understand the stacked bar chart variants better: -

-

Single stacked bar chart

-
    -
  • Single stacked bar chart takes 'data' attribute which is of type IChartDataPoint[]
    • -
  • - Ratio on top of the chart is shown if it has only two data points. For the rest of cases the ratio is - not shown -
    • -
  • - A number is displayed on the top of stacked bar chart if it has only one data point. This number shown - is the data that is passed to the chart. -
    • -
  • - Stacked bar chart supports specifying a target value for the chart. The target shows up as a colored - arrow in the chart. It can be set using the targetData prop. -
    • -
  • - Stacked bar chart also supports specifying a benchmark value for the chart. The benchmark shows up as a - colored arrow in the chart. It can be set using the benchmarkData prop. -
    • -
  • - Ratio and number are not shown if ignoreFixStyle is set to true. They are also ignored if - hideNumberDisplay is set to true. - chartDataAccessibilityData prop is enabled only if ratio or numbers are enabled to be - shown. -
    • -
  • - If a datapoint is marked as placeHolder there will be no corresponding legend. -
    • -
  • - Use onRenderCalloutPerDataPoint to customize the hover callout content. -
    • -
  • - If enabledLegendsWrapLines is set, long legends will be wrapped otherwise legends will be - showed as an overflow callout -
    • -
-

Multi stacked bar chart

-
    -
  • - Multi-stacked bar chart takes 'data' attribute which is of type IChartDataPoint[][]. It will render the - chart based upon the values given to this attribute. -
    • -
  • - MultiStackedBarChart has an option hideRatio which shows/hides the ratio on top right of - the chart. It is a boolean[], one bool for each bar group. This value is applicable only when there are - 2 datapoints in the chart. Similarly there is an option hideDenominator to hide the - denominator of the ratio if it is enabled. -
    • -
  • - If a datapoint is marked as placeHolder there will be no corresponding legend. The default - color of placeholder data is tertiary grey. -
    • -
  • - If a chart in MultiStackedBarChart shows ratio or number, legends are not displayed for that chart and - vice-versa. -
    • -
  • - A number is displayed on the top of stacked bar chart if it has only one data point. This number shown - is the datapoint that is passed to the chart. -
    • -
-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md')} + } isHeaderVisible={this.props.isHeaderVisible} /> diff --git a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md index 9881deee2a8c2..4c78f6a358b6e 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +StackedBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md index 20ea131f4f632..677564f5b6da6 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md @@ -1,65 +1,68 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. -

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

-

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard -

-

Gaps

-

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. -

-

Line border

-

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + StackedBarChart shows the data in a bar format. It has two variations: single stacked and multi-stacked. + The stacked bar chart comes with a legends component built in. Below are a few points that will help you + understand the stacked bar chart variants better:

+

Single stacked bar chart

+
    +
  • Single stacked bar chart takes 'data' attribute which is of type IChartDataPoint[]
    • +
  • + Ratio on top of the chart is shown if it has only two data points. For the rest of cases the ratio is + not shown +
    • +
  • + A number is displayed on the top of stacked bar chart if it has only one data point. This number shown + is the data that is passed to the chart. +
    • +
  • + Stacked bar chart supports specifying a target value for the chart. The target shows up as a colored + arrow in the chart. It can be set using the targetData prop. +
    • +
  • + Stacked bar chart also supports specifying a benchmark value for the chart. The benchmark shows up as a + colored arrow in the chart. It can be set using the benchmarkData prop. +
    • +
  • + Ratio and number are not shown if ignoreFixStyle is set to true. They are also ignored if + hideNumberDisplay is set to true. + chartDataAccessibilityData prop is enabled only if ratio or numbers are enabled to be + shown. +
    • +
  • + If a datapoint is marked as placeHolder there will be no corresponding legend. +
    • +
  • + Use onRenderCalloutPerDataPoint to customize the hover callout content. +
    • +
  • + If enabledLegendsWrapLines is set, long legends will be wrapped otherwise legends will be + showed as an overflow callout +
    • +
+

Multi stacked bar chart

+
    +
  • + Multi-stacked bar chart takes 'data' attribute which is of type IChartDataPoint[][]. It will render the + chart based upon the values given to this attribute. +
    • +
  • + MultiStackedBarChart has an option hideRatio which shows/hides the ratio on top right of + the chart. It is a boolean[], one bool for each bar group. This value is applicable only when there are + 2 datapoints in the chart. Similarly there is an option hideDenominator to hide the + denominator of the ratio if it is enabled. +
    • +
  • + If a datapoint is marked as placeHolder there will be no corresponding legend. The default + color of placeholder data is tertiary grey. +
    • +
  • + If a chart in MultiStackedBarChart shows ratio or number, legends are not displayed for that chart and + vice-versa. +
    • +
  • + A number is displayed on the top of stacked bar chart if it has only one data point. This number shown + is the datapoint that is passed to the chart. +
    • +
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChartPage.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChartPage.tsx index 1a2bb53dad4e0..f2e8dc1c925cb 100644 --- a/packages/react-examples/src/react-charting/TreeChart/TreeChartPage.tsx +++ b/packages/react-examples/src/react-charting/TreeChart/TreeChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { TreeChartTwoLayerExample } from './TreeChart.TwoLayer.Example'; @@ -52,31 +53,14 @@ export class TreeChartPage extends React.Component } isHeaderVisible={this.props.isHeaderVisible} overview={ -
-

Tree chart component involves two types of layers of tree.

-

Two layer chart

-

- Consists of two levels of tree, and can be navigated using tab and arrow keys, if we hover over the node, - it reads node and its parent information using a screen reader. -

-

Three layer Long composition

-

- Consists of three levels of nodes, with nodes stacked one after the other. Specify{' '} - composition as long to specify the long composition. -

-

Three layer Compact composition

-

Consists of three levels of nodes, with nodes side by side and then stacked one after the other.

-

The long and compact composition are present for only terminal nodes of a tree

- Specify composition as compact to specify the long composition. -

Three layer Automatic composition

-

- When there's constraint on the space, for nodes having more than 2 children it is implemented as compact - and long for nodes with less than 2 children. -

-

- Use treeTraversal to specify the tree traversal order as preOrder or levelOrder -

-
+ + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md index 9881deee2a8c2..9d1fd7e0e7588 100644 --- a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +TreeChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md index 20ea131f4f632..e0ba7824bf1b1 100644 --- a/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md @@ -1,65 +1,25 @@
+

Tree chart component involves two types of layers of tree.

+

Two layer chart

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Consists of two levels of tree, and can be navigated using tab and arrow keys, if we hover over the node, + it reads node and its parent information using a screen reader.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

+

Three layer Long composition

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + Consists of three levels of nodes, with nodes stacked one after the other. Specify{' '} + composition as long to specify the long composition.

-

Gaps

+

Three layer Compact composition

+

Consists of three levels of nodes, with nodes side by side and then stacked one after the other.

+

The long and compact composition are present for only terminal nodes of a tree

+ Specify composition as compact to specify the long composition. +

Three layer Automatic composition

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + When there's constraint on the space, for nodes having more than 2 children it is implemented as compact + and long for nodes with less than 2 children.

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. -

-

Lines with large dataset

-

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. -

-

Custom accessibility

-

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. -

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + Use treeTraversal to specify the tree traversal order as preOrder or levelOrder

diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx index 0b8136dd02a13..39b2cf69024e7 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { VerticalBarChartBasicExample } from './VerticalBarChart.Basic.Example'; @@ -74,37 +75,14 @@ export class VerticalBarChartPage extends React.Component -

- A vertical bar chart is used to show comparisons between categories of data, usually over a period of - time. Categories and time are typically shown along the horizontal axis, while the data values are shown - along the vertical axis. -

-

- The bar widths are proportional to the number of bars and space available within the charting area. The - bar width can be changed using the barWidth property. -

-
-

Implementation details

-

- The current vertical bar charts implementation is in the cartesian coordinate system. The cartesian - coordinate system is represented by Cartesian Chart which serves as the base class for vertical bar charts -

-

- The chart provides an option to select a color scale based on the range of y values. Similar y values will - end up having similar color. Use the colors attribute to define the color scale. -

-

- Use useSingleColor to use a single color for all bars. -

-

- Use lineLegendText and lineLegendColor to specify the text and color for legends of lines in - the chart. -

-

- The bar labels are shown by default. Set the hideLabels prop to hide them. -

- + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md')} + + } + bestPractices={ + + {require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md')} + } /> ); diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md index 9881deee2a8c2..1a40567a85490 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +VerticalBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md index 20ea131f4f632..7e54bfc2fc043 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md @@ -1,65 +1,31 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + A vertical bar chart is used to show comparisons between categories of data, usually over a period of + time. Categories and time are typically shown along the horizontal axis, while the data values are shown + along the vertical axis.

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + The bar widths are proportional to the number of bars and space available within the charting area. The + bar width can be changed using the barWidth property.

-

Gaps

+
+

Implementation details

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + The current vertical bar charts implementation is in the cartesian coordinate system. The cartesian + coordinate system is represented by Cartesian Chart which serves as the base class for vertical bar charts

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. + The chart provides an option to select a color scale based on the range of y values. Similar y values will + end up having similar color. Use the colors attribute to define the color scale.

-

Lines with large dataset

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + Use useSingleColor to use a single color for all bars.

-

Custom accessibility

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. + Use lineLegendText and lineLegendColor to specify the text and color for legends of lines in + the chart.

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + The bar labels are shown by default. Set the hideLabels prop to hide them.

diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx index 4ff815ce6b9c6..754924e881ae5 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx @@ -5,6 +5,7 @@ import { ExampleCard, IComponentDemoPageProps, PropertiesTableSet, + Markdown, } from '@fluentui/react-docsite-components'; import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.Basic.Example'; @@ -62,36 +63,14 @@ export class VerticalBarChartPage extends React.Component -

- Vertical stacked bar chart shows comparsions between categories of data, but with the ability to break - down and compare parts of a whole. Each bar in the chart represents a whole, and sections within the bar - represents different parts or categories of that whole -

-

- bargapmax sets the maximum gap between bars in a stack. See the prop for more details. -

-

- barCornerRadius sets the corner radius of the bars -

-

- barMinimumHeight provides the minimum height of a bar. Bars below this height will be - displayed at this height. -

-

- Use isCalloutForStack to configure callout to be at stack level or individual datapoint level -

-

- Define a custom callout rendered per datapoint using onRenderCalloutPerDataPoint and per - stack using onRenderCalloutPerStack -

-

- Use onBarClick handler for callback on click of bars -

-

- The bar labels are shown by default. Set the hideLabels prop to hide them. -

- + + {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')} + } /> ); diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md index 9881deee2a8c2..cce0040af9c3f 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md @@ -1,3 +1,3 @@ ### Content -LineChart best practices content placeholder. +VerticalStackedBarChart best practices content placeholder. diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md index 20ea131f4f632..b41aab38050a1 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md @@ -1,65 +1,30 @@

- Use a line graph to visualize data sets over a period of time for an individual or group of items. The - amount of lines (data sets) depend on the attributes selected during the report creation. + Vertical stacked bar chart shows comparsions between categories of data, but with the ability to break + down and compare parts of a whole. Each bar in the chart represents a whole, and sections within the bar + represents different parts or categories of that whole

-

The line graph thickness will vary depending on the number of data sets and data increments.

- -

Variant details

-

Event annotations

- Event annotations are used to highlight events and annotate them using messages. Annotations are - represented by vertical line markers to mark the date and callouts to represent the message. Events can be - added by using eventAnnotationProps prop. Each event contains a - date, event message and event details callout callback - onRenderCard + bargapmax sets the maximum gap between bars in a stack. See the prop for more details.

-

Gaps

- A line chart can have gaps/breaks in between. This is to represent missing data. The gaps can also be - replaced with dashed or dotted lines for specific scenarios, say to represent low confidence predictions - for a time series forecast graph. Gaps can be added by using gaps prop. A gap is denoted by - startIndex and - endIndex datapoints in the line. A line will be drawn uptil the startIndex and skipped for - endIndex - startIndex number of datapoints. A line can have as many gaps as possible. + barCornerRadius sets the corner radius of the bars

-

Line border

- Each line in the chart can contain a 2 px border for better highlighting of the line when there are - multiple items in the chart. The border will have color of the background theme. Lines will be highlighted - in order of their appearance in legends. Line border is a highly suggested style that you should apply to - make multiple lines more distinguishable from each other. Use lineBorderWidth prop present - inside - lineOptions to enable it. + barMinimumHeight provides the minimum height of a bar. Bars below this height will be + displayed at this height.

-

Lines with large dataset

- We use a path based rendering technique to show datasets with large number of points (greater than 1k). - Using this technique datasets with over 10k points can be rendered easily. Enable this rendering method by - setting the optimizeLargeData prop to true. + Use isCalloutForStack to configure callout to be at stack level or individual datapoint level

-

Custom accessibility

- Line chart provides a bunch of props to enable custom accessibility messages. Use - xAxisCalloutAccessibilityData - and callOutAccessibilityData to configure x axis and y axis accessibility messages - respectively. + Define a custom callout rendered per datapoint using onRenderCalloutPerDataPoint and per + stack using onRenderCalloutPerStack

-

Date 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 - - for usage.
- 2. Custom locale definition: The consumer of the library can specify a custom locale definition as - supported by d3 like this. - The date axis will use the date range and the multiformat specified in the definition to determine the - correct labels 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. + Use onBarClick handler for callback on click of bars +

+

+ The bar labels are shown by default. Set the hideLabels prop to hide them.

From 78b3039c11e3be310a24d699c97d7de493261ede Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 17 Aug 2023 12:07:00 +0530 Subject: [PATCH 48/61] Update colors for area chart to match latest palette --- .../AreaChart/AreaChart.Basic.Example.tsx | 6 ++---- .../AreaChart.CustomAccessibility.Example.tsx | 9 ++++----- .../AreaChart/AreaChart.LargeData.Example.tsx | 7 ++++--- .../AreaChart/AreaChart.Multiple.Example.tsx | 5 ++++- .../AreaChart/AreaChart.Styled.Example.tsx | 13 ++++++------- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx index e15a4113f6035..c769832044298 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting'; -import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting'; +import { IAreaChartProps, ChartHoverCard, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; interface IAreaChartBasicState { @@ -141,7 +141,6 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt { legend: 'legend1', data: chart1Points, - color: '#0099BC', }, ]; @@ -182,7 +181,6 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt height={this.state.height} width={this.state.width} data={chartData} - showYAxisGridLines={true} enablePerfOptimization={true} // eslint-disable-next-line react/jsx-no-bind onRenderCalloutPerDataPoint={(props: ICustomizedCalloutData) => @@ -191,7 +189,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt XValue={props.x.toString()} Legend={'Custom Legend'} YValue={`${props.values[0].yAxisCalloutData || props.values[0].y} h`} - color={'red'} + color={getColorFromToken(DataVizPalette.color7)} /> ) : null } diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx index 3f01d387ea8bc..b55e4711a81a4 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { AreaChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { AreaChart, DataVizPalette } from '@fluentui/react-charting'; import * as d3 from 'd3-format'; import { ILineChartProps } from '@fluentui/react-charting'; @@ -123,17 +122,17 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr { legend: 'First', data: chart1Points, - color: DefaultPalette.accent, + color: DataVizPalette.color11, }, { legend: 'Second', data: chart2Points, - color: DefaultPalette.blueLight, + color: DataVizPalette.color12, }, { legend: 'Third', data: chart3Points, - color: DefaultPalette.blueDark, + color: DataVizPalette.color13, }, ]; diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx index 619da17af242c..51191b44db57f 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { AreaChart } from '@fluentui/react-charting'; -import * as d3 from 'd3-format'; +import { AreaChart, DataVizPalette } from '@fluentui/react-charting'; interface IACLargeDataExampleState { width: number; @@ -161,14 +160,17 @@ export class AreaChartLargeDataExample extends React.Component<{}, IACLargeDataE { legend: 'legend1', data: chart1Points, + color: DataVizPalette.color8, }, { legend: 'legend2', data: chart2Points, + color: DataVizPalette.color9, }, { legend: 'legend3', data: chart3Points, + color: DataVizPalette.color10, }, ]; @@ -206,7 +208,6 @@ export class AreaChartLargeDataExample extends React.Component<{}, IACLargeDataE width={this.state.width} data={chartData} legendsOverflowText={'Overflow Items'} - yAxisTickFormat={d3.format('$,')} legendProps={{ allowFocusOnLegends: true, }} diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx index 4e816dc6308bc..b2dc5b0a1a06f 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Multiple.Example.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { AreaChart } from '@fluentui/react-charting'; import * as d3 from 'd3-format'; -import { ILineChartProps } from '@fluentui/react-charting'; +import { ILineChartProps, DataVizPalette } from '@fluentui/react-charting'; interface IAreaChartBasicState { width: number; @@ -162,14 +162,17 @@ export class AreaChartMultipleExample extends React.Component<{}, IAreaChartBasi { legend: 'legend1', data: chart1Points, + color: DataVizPalette.color4, }, { legend: 'legend2', data: chart2Points, + color: DataVizPalette.color5, }, { legend: 'legend3', data: chart3Points, + color: DataVizPalette.color6, }, ]; diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx index 3c9f4a9ac9085..7643be7ed4b72 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Styled.Example.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { AreaChart } from '@fluentui/react-charting'; -import { ILineChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { ILineChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; interface IAreaChartBasicState { width: number; @@ -80,7 +79,7 @@ export class AreaChartStyledExample extends React.Component<{}, IAreaChartBasicS { legend: 'legend1', data: chart1Points, - color: '#0099BC', + color: DataVizPalette.color2, opacity: 0.7, lineOptions: { strokeWidth: 2, @@ -90,11 +89,11 @@ export class AreaChartStyledExample extends React.Component<{}, IAreaChartBasicS { legend: 'legend2', data: chart2Points, - color: '#77004D', + color: DataVizPalette.color3, opacity: 0.8, lineOptions: { strokeWidth: 5, - stroke: DefaultPalette.blueDark, + stroke: getColorFromToken(DataVizPalette.color13), }, }, ]; @@ -102,8 +101,8 @@ export class AreaChartStyledExample extends React.Component<{}, IAreaChartBasicS const chartData = { chartTitle: 'Area chart styled example', lineChartData: chartPoints, - pointOptions: { r: 10, strokeWidth: 3, opacity: 1, stroke: DefaultPalette.blueDark }, - pointLineOptions: { strokeWidth: 2, strokeDasharray: '10 10', stroke: DefaultPalette.blueDark }, + pointOptions: { r: 10, strokeWidth: 3, opacity: 1, stroke: getColorFromToken(DataVizPalette.color13) }, + pointLineOptions: { strokeWidth: 2, strokeDasharray: '10 10', stroke: getColorFromToken(DataVizPalette.color13) }, }; const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; From 77af712199254cf6ac37dc0e900ac992d2b14f3b Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 17 Aug 2023 14:45:50 +0530 Subject: [PATCH 49/61] Update colors for donut chart --- .../AreaChart.CustomAccessibility.Example.tsx | 6 +-- .../AreaChart/AreaChart.LargeData.Example.tsx | 6 +-- .../AreaChart/AreaChart.doc.tsx | 10 ++--- .../DonutChart/DonutChart.Basic.Example.tsx | 18 ++++++-- ...DonutChart.CustomAccessibility.Example.tsx | 13 ++++-- .../DonutChart.CustomCallout.Example.tsx | 21 ++++++++-- .../DonutChart/DonutChart.Dynamic.Example.tsx | 42 +++++++++---------- 7 files changed, 74 insertions(+), 42 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx index b55e4711a81a4..5de003c1b7eac 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx @@ -122,17 +122,17 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr { legend: 'First', data: chart1Points, - color: DataVizPalette.color11, + color: DataVizPalette.color8, }, { legend: 'Second', data: chart2Points, - color: DataVizPalette.color12, + color: DataVizPalette.color9, }, { legend: 'Third', data: chart3Points, - color: DataVizPalette.color13, + color: DataVizPalette.color10, }, ]; diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx index 51191b44db57f..b19cf276ea8f2 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx @@ -160,17 +160,17 @@ export class AreaChartLargeDataExample extends React.Component<{}, IACLargeDataE { legend: 'legend1', data: chart1Points, - color: DataVizPalette.color8, + color: DataVizPalette.color11, }, { legend: 'legend2', data: chart2Points, - color: DataVizPalette.color9, + color: DataVizPalette.color12, }, { legend: 'legend3', data: chart3Points, - color: DataVizPalette.color10, + color: DataVizPalette.color13, }, ]; 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 92f955dbf5489..7b9d90efa19a0 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.doc.tsx @@ -39,16 +39,16 @@ export const AreaChartPageProps: IDocPageProps = { code: AreaChartMultipleExampleCode, view: , }, - { - title: 'AreaChart large data', - code: AreaChartLargeDataExampleCode, - view: , - }, { title: 'AreaChart Custom Accessibility', code: AreaChartCustomAccessibilityExampleCode, view: , }, + { + title: 'AreaChart large data', + code: AreaChartLargeDataExampleCode, + view: , + }, ], overview: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md'), bestPractices: require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md'), diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx index 120593bff5ae6..8e5faa562b0bb 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx @@ -1,5 +1,12 @@ import * as React from 'react'; -import { DonutChart, IDonutChartProps, IChartProps, IChartDataPoint } from '@fluentui/react-charting'; +import { + DonutChart, + IDonutChartProps, + IChartProps, + IChartDataPoint, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; export class DonutChartBasicExample extends React.Component { constructor(props: IDonutChartProps) { @@ -8,8 +15,13 @@ export class DonutChartBasicExample extends React.Component { constructor(props: IDonutChartProps) { @@ -11,14 +18,14 @@ export class DonutChartCustomAccessibilityExample extends React.Component { constructor(props: IDonutChartProps) { @@ -8,8 +16,13 @@ export class DonutChartCustomCalloutExample extends React.Component ) : null } diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx index f1bd6e9cc2e95..c588fbbfe8a64 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Dynamic.Example.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { DonutChart, IDonutChartProps, IChartProps, IChartDataPoint } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + DonutChart, + IDonutChartProps, + IChartProps, + IChartDataPoint, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { DefaultButton } from '@fluentui/react/lib/Button'; import { Checkbox } from '@fluentui/react/lib/Checkbox'; @@ -13,26 +19,20 @@ export interface IExampleState { export class DonutChartDynamicExample extends React.Component { private _colors = [ - [ - DefaultPalette.blueLight, - DefaultPalette.blue, - DefaultPalette.tealLight, - DefaultPalette.teal, - DefaultPalette.greenLight, - ], - [DefaultPalette.purpleLight, DefaultPalette.purple, DefaultPalette.magentaLight, DefaultPalette.magenta], - [DefaultPalette.yellowLight, DefaultPalette.yellow, DefaultPalette.orangeLighter, DefaultPalette.orangeLight], - [DefaultPalette.neutralTertiary, DefaultPalette.neutralSecondary, DefaultPalette.neutralPrimary], + [DataVizPalette.color3, DataVizPalette.color4, DataVizPalette.color5, DataVizPalette.color6, DataVizPalette.color7], + [DataVizPalette.color8, DataVizPalette.color9, DataVizPalette.color10, DataVizPalette.color11], + [DataVizPalette.color12, DataVizPalette.color13, DataVizPalette.color14, DataVizPalette.color15], + [DataVizPalette.color16, DataVizPalette.color17, DataVizPalette.color18], ]; constructor(props: IDonutChartProps) { super(props); this.state = { dynamicData: [ - { legend: 'first', data: 40, color: '#0099BC' }, - { legend: 'second', data: 20, color: '#77004D' }, - { legend: 'third', data: 30, color: '#4f67ed' }, - { legend: 'fourth', data: 10, color: '#ae8c00' }, + { legend: 'first', data: 40, color: getColorFromToken(DataVizPalette.color1) }, + { legend: 'second', data: 20, color: getColorFromToken(DataVizPalette.color2) }, + { legend: 'third', data: 30, color: getColorFromToken(DataVizPalette.color3) }, + { legend: 'fourth', data: 10, color: getColorFromToken(DataVizPalette.color4) }, ], hideLabels: false, showLabelsInPercent: false, @@ -79,10 +79,10 @@ export class DonutChartDynamicExample extends React.Component, checked: boolean) => { From 3715719d6bdfd4a7555cf25432f4ee9c624560e5 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 17 Aug 2023 15:00:49 +0530 Subject: [PATCH 50/61] Fix colors for grouped VBC --- ...DonutChart.CustomAccessibility.Example.tsx | 2 +- .../GroupedVerticalBarChart.Basic.Example.tsx | 24 ++++++++++------- ...alBarChart.CustomAccessibility.Example.tsx | 19 +++++++------- ...GroupedVerticalBarChart.Styled.Example.tsx | 26 +++++++++++-------- ...upedVerticalBarChart.Truncated.Example.tsx | 12 +++++---- 5 files changed, 47 insertions(+), 36 deletions(-) diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx index 59e972257af2e..4de1af47f3f15 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.CustomAccessibility.Example.tsx @@ -25,7 +25,7 @@ export class DonutChartCustomAccessibilityExample extends React.Component Date: Thu, 17 Aug 2023 15:47:53 +0530 Subject: [PATCH 51/61] Fix colors for more charts --- .../HeatMapChartBasic.Example.tsx | 30 +++++++++++-------- .../HorizontalBarChart.Basic.Example.tsx | 19 ++++++------ .../HorizontalBarChart.Benchmark.Example.tsx | 26 ++++++++++++---- ...alBarChart.CustomAccessibility.Example.tsx | 19 ++++++------ ...rizontalBarChart.CustomCallout.Example.tsx | 26 +++++++++------- .../HorizontalBarChart.Variant.Example.tsx | 25 +++++++++------- ...alBarChartWithAxis.AxisTooltip.Example.tsx | 11 +++---- ...rizontalBarChartWithAxis.Basic.Example.tsx | 5 ---- ...hartWithAxis.StringAxisTooltip.Example.tsx | 11 +++---- .../LineChart/LineChart.Basic.Example.tsx | 9 +++--- .../LineChart.CustomAccessibility.Example.tsx | 20 ++++++++----- ...LineChart.CustomLocaleDateAxis.Example.tsx | 9 +++--- .../LineChart/LineChart.Events.Example.tsx | 7 ++--- .../LineChart/LineChart.Gaps.Example.tsx | 17 +++++++---- .../LineChart/LineChart.Styled.Example.tsx | 4 +-- 15 files changed, 137 insertions(+), 101 deletions(-) diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx index 4b5ba1a98f43d..498ac54b7191d 100644 --- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx +++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { HeatMapChart, IHeatMapChartProps } from '@fluentui/react-charting'; +import { HeatMapChart, IHeatMapChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; interface IHeatMapChartBasicExampleState { width: number; @@ -39,20 +39,21 @@ export class HeatMapChartBasicExample extends React.Component<{}, IHeatMapChartB { value: 100, legend: 'Execllent (0-200)', - data: [], - }, - { - value: 250, - legend: 'Good (201-300)', data: [ { x: xPoint[2], y: yPoint[2], - value: 246, - rectText: 246, - ratio: [246, 2391], - descriptionMessage: 'air quality is seems to be very nice today', + value: 46, + rectText: 46, + ratio: [46, 2391], + descriptionMessage: 'air quality is seems to be excellent today', }, + ], + }, + { + value: 250, + legend: 'Good (201-300)', + data: [ { x: xPoint[0], y: yPoint[1], @@ -330,8 +331,13 @@ export class HeatMapChartBasicExample extends React.Component<{}, IHeatMapChartB yAxisNumberFormatString=".3s" width={this.state.width} height={this.state.height} - domainValuesForColorScale={[0, 600]} - rangeValuesForColorScale={['lightblue', 'darkblue']} + domainValuesForColorScale={[0, 200, 400, 600]} + rangeValuesForColorScale={[ + getColorFromToken(DataVizPalette.success), + getColorFromToken(DataVizPalette.warning), + getColorFromToken(DataVizPalette.error), + getColorFromToken(DataVizPalette.highError), + ]} /> diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx index d876fecad29e4..8108b92e3d3d5 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { HorizontalBarChart, IChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { const hideRatio: boolean[] = [true, false]; @@ -12,7 +11,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'one', horizontalBarChartdata: { x: 1543, y: 15000 }, - color: DefaultPalette.tealDark, + color: getColorFromToken(DataVizPalette.color1), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '10%', }, @@ -24,7 +23,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'two', horizontalBarChartdata: { x: 800, y: 15000 }, - color: DefaultPalette.purple, + color: getColorFromToken(DataVizPalette.color2), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '5%', }, @@ -36,7 +35,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'three', horizontalBarChartdata: { x: 8888, y: 15000 }, - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color3), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '59%', }, @@ -48,7 +47,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'four', horizontalBarChartdata: { x: 15888, y: 15000 }, - color: DefaultPalette.themeDarkAlt, + color: getColorFromToken(DataVizPalette.color4), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '105%', }, @@ -60,7 +59,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'five', horizontalBarChartdata: { x: 11444, y: 15000 }, - color: DefaultPalette.themePrimary, + color: getColorFromToken(DataVizPalette.color5), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '76%', }, @@ -72,7 +71,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'six', horizontalBarChartdata: { x: 14000, y: 15000 }, - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color6), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '93%', }, @@ -84,7 +83,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'seven', horizontalBarChartdata: { x: 9855, y: 15000 }, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color7), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '65%', }, @@ -96,7 +95,7 @@ export const HorizontalBarChartBasicExample: React.FunctionComponent<{}> = () => { legend: 'eight', horizontalBarChartdata: { x: 4250, y: 15000 }, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color8), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '28%', }, diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx index 576d642ce7713..31eabd3034a9f 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { HorizontalBarChart, IChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; export const HorizontalBarChartBenchmarkExample: React.FunctionComponent<{}> = () => { const hideRatio: boolean[] = [true, false]; @@ -9,17 +8,34 @@ export const HorizontalBarChartBenchmarkExample: React.FunctionComponent<{}> = ( { chartTitle: 'one', chartData: [ - { legend: 'one', data: 50, horizontalBarChartdata: { x: 10, y: 100 }, color: DefaultPalette.tealDark }, + { + legend: 'one', + data: 50, + horizontalBarChartdata: { x: 10, y: 100 }, + color: getColorFromToken(DataVizPalette.color25), + }, ], }, { chartTitle: 'two', - chartData: [{ legend: 'two', data: 30, horizontalBarChartdata: { x: 30, y: 200 }, color: DefaultPalette.purple }], + chartData: [ + { + legend: 'two', + data: 30, + horizontalBarChartdata: { x: 30, y: 200 }, + color: getColorFromToken(DataVizPalette.color26), + }, + ], }, { chartTitle: 'three', chartData: [ - { legend: 'three', data: 5, horizontalBarChartdata: { x: 15, y: 50 }, color: DefaultPalette.redDark }, + { + legend: 'three', + data: 5, + horizontalBarChartdata: { x: 15, y: 50 }, + color: getColorFromToken(DataVizPalette.color27), + }, ], }, ]; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx index 1246b4adf66ba..414c57694289f 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { HorizontalBarChart, IChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; export const HorizontalBarChartCustomAccessibilityExample: React.FunctionComponent<{}> = () => { const data: IChartProps[] = [ @@ -12,7 +11,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'one', horizontalBarChartdata: { x: 1543, y: 15000 }, - color: DefaultPalette.tealDark, + color: getColorFromToken(DataVizPalette.color9), xAxisCalloutData: '2021/06/10', yAxisCalloutData: '10%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart one 2021/06/10 41%' }, @@ -27,7 +26,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'two', horizontalBarChartdata: { x: 800, y: 15000 }, - color: DefaultPalette.purple, + color: getColorFromToken(DataVizPalette.color10), xAxisCalloutData: '2021/06/11', yAxisCalloutData: '5%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart two 2021/06/11 52%' }, @@ -42,7 +41,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'three', horizontalBarChartdata: { x: 8888, y: 15000 }, - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color11), xAxisCalloutData: '2021/06/12', yAxisCalloutData: '59%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart three 2021/06/12 63%' }, @@ -57,7 +56,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'four', horizontalBarChartdata: { x: 15888, y: 15000 }, - color: DefaultPalette.themeDarkAlt, + color: getColorFromToken(DataVizPalette.color12), xAxisCalloutData: '2021/06/13', yAxisCalloutData: '105%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart four 2021/06/13 74%' }, @@ -72,7 +71,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'five', horizontalBarChartdata: { x: 11444, y: 15000 }, - color: DefaultPalette.themePrimary, + color: getColorFromToken(DataVizPalette.color13), xAxisCalloutData: '2021/06/14', yAxisCalloutData: '76%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart five 2021/06/14 85%' }, @@ -87,7 +86,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'six', horizontalBarChartdata: { x: 14000, y: 15000 }, - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color14), xAxisCalloutData: '2021/06/15', yAxisCalloutData: '93%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart six 2021/06/15 96%' }, @@ -102,7 +101,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'seven', horizontalBarChartdata: { x: 9855, y: 15000 }, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color15), xAxisCalloutData: '2021/06/16', yAxisCalloutData: '65%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart seven 2021/06/16 98%' }, @@ -117,7 +116,7 @@ export const HorizontalBarChartCustomAccessibilityExample: React.FunctionCompone { legend: 'eight', horizontalBarChartdata: { x: 4250, y: 15000 }, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color16), xAxisCalloutData: '2021/06/17', yAxisCalloutData: '28%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of chart eight 2021/06/17 99%' }, diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx index 3285dec106e39..9b5cb2034ad25 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { ChartHoverCard, HorizontalBarChart, IChartProps, IChartDataPoint } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + ChartHoverCard, + HorizontalBarChart, + IChartProps, + IChartDataPoint, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { DirectionalHint } from '@fluentui/react'; import * as d3 from 'd3-format'; @@ -14,7 +20,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'one', horizontalBarChartdata: { x: 1543, y: 15000 }, - color: DefaultPalette.tealDark, + color: getColorFromToken(DataVizPalette.color28), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -26,7 +32,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'two', horizontalBarChartdata: { x: 800, y: 15000 }, - color: DefaultPalette.purple, + color: getColorFromToken(DataVizPalette.color29), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -38,7 +44,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'three', horizontalBarChartdata: { x: 8888, y: 15000 }, - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color30), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -50,7 +56,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'four', horizontalBarChartdata: { x: 15888, y: 15000 }, - color: DefaultPalette.themeDarkAlt, + color: getColorFromToken(DataVizPalette.color31), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -62,7 +68,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'five', horizontalBarChartdata: { x: 11444, y: 15000 }, - color: DefaultPalette.themePrimary, + color: getColorFromToken(DataVizPalette.color32), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -74,7 +80,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'six', horizontalBarChartdata: { x: 14000, y: 15000 }, - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color33), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -86,7 +92,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'seven', horizontalBarChartdata: { x: 9855, y: 15000 }, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color34), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, @@ -98,7 +104,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> { legend: 'eight', horizontalBarChartdata: { x: 4250, y: 15000 }, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color35), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '19K', }, diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx index 67fbbe2620513..8d3a3a5a23cc4 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { HorizontalBarChart, HorizontalBarChartVariant, IChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + HorizontalBarChart, + HorizontalBarChartVariant, + IChartProps, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { Checkbox } from '@fluentui/react/lib/Checkbox'; interface IHBCVariantExampleState { @@ -24,7 +29,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'one', horizontalBarChartdata: { x: 1543, y: 15000 }, - color: DefaultPalette.tealDark, + color: getColorFromToken(DataVizPalette.color17), }, ], }, @@ -34,7 +39,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'two', horizontalBarChartdata: { x: 800, y: 15000 }, - color: DefaultPalette.purple, + color: getColorFromToken(DataVizPalette.color18), }, ], }, @@ -44,7 +49,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'three', horizontalBarChartdata: { x: 8888, y: 15000 }, - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color19), }, ], }, @@ -54,7 +59,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'four', horizontalBarChartdata: { x: 15888, y: 15000 }, - color: DefaultPalette.themeDarkAlt, + color: getColorFromToken(DataVizPalette.color20), }, ], }, @@ -64,7 +69,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'five', horizontalBarChartdata: { x: 11444, y: 15000 }, - color: DefaultPalette.themePrimary, + color: getColorFromToken(DataVizPalette.color21), }, ], }, @@ -74,7 +79,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'six', horizontalBarChartdata: { x: 14000, y: 15000 }, - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color22), }, ], }, @@ -84,7 +89,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'seven', horizontalBarChartdata: { x: 9855, y: 15000 }, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color23), }, ], }, @@ -94,7 +99,7 @@ export class HorizontalBarChartVariantExample extends React.Component<{}, IHBCVa { legend: 'eight', horizontalBarChartdata: { x: 4250, y: 15000 }, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color24), }, ], }, diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx index e3e5741eac243..34004408654a3 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.AxisTooltip.Example.tsx @@ -3,8 +3,9 @@ import { HorizontalBarChartWithAxis, IHorizontalBarChartWithAxisProps, IHorizontalBarChartWithAxisDataPoint, + DataVizPalette, + getColorFromToken, } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; interface IHorizontalBarChartWithAxisState { selectedOption: string; @@ -26,22 +27,22 @@ export class HorizontalBarChartWithAxisTooltipExample extends React.Component<{} { x: 1000, y: 1000, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color5), }, { x: 2000, y: 5000, - color: DefaultPalette.blueDark, + color: getColorFromToken(DataVizPalette.color6), }, { x: 3000, y: 3000, - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color7), }, { x: 4000, y: 2000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color8), }, ]; diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx index 3eadc23aba394..8fbf7649394d3 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.Basic.Example.tsx @@ -4,7 +4,6 @@ import { IHorizontalBarChartWithAxisProps, IHorizontalBarChartWithAxisDataPoint, } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; import { IRenderFunction } from '@fluentui/react/lib/Utilities'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; import { Checkbox } from '@fluentui/react/lib/Checkbox'; @@ -63,7 +62,6 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< x: 10000, y: 5000, legend: 'Oranges', - color: DefaultPalette.accent, yAxisCalloutData: '2020/04/30', xAxisCalloutData: '10%', }, @@ -71,7 +69,6 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< x: 20000, y: 50000, legend: 'Dogs', - color: DefaultPalette.blueDark, yAxisCalloutData: '2020/04/30', xAxisCalloutData: '20%', }, @@ -79,7 +76,6 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< x: 25000, y: 30000, legend: 'Apples', - color: DefaultPalette.blueMid, yAxisCalloutData: '2020/04/30', xAxisCalloutData: '37%', }, @@ -88,7 +84,6 @@ export class HorizontalBarChartWithAxisBasicExample extends React.Component< x: 40000, y: 13000, legend: 'Bananas', - color: DefaultPalette.blueLight, yAxisCalloutData: '2020/04/30', xAxisCalloutData: '88%', }, diff --git a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx index 492fab23c81f5..fe2d71e360b90 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.StringAxisTooltip.Example.tsx @@ -3,8 +3,9 @@ import { HorizontalBarChartWithAxis, IHorizontalBarChartWithAxisProps, IHorizontalBarChartWithAxisDataPoint, + DataVizPalette, + getColorFromToken, } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react'; const options: IChoiceGroupOption[] = [ @@ -35,22 +36,22 @@ export class HorizontalBarChartWithAxisStringAxisTooltipExample extends React.Co { y: 'String One', x: 1000, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color9), }, { y: 'String Two', x: 5000, - color: DefaultPalette.blueDark, + color: getColorFromToken(DataVizPalette.color10), }, { y: 'String Three', x: 3000, - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color11), }, { y: 'String Four', x: 2000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color12), }, ]; diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx index 32f2706cbed8c..754a99dc03781 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { IChartProps, ILineChartProps, LineChart, DataVizPalette } from '@fluentui/react-charting'; import { Toggle } from '@fluentui/react/lib/Toggle'; interface ILineChartBasicState { @@ -86,7 +85,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt onDataPointClick: () => alert('click on 218000'), }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color3, lineOptions: { lineBorderWidth: '4', }, @@ -124,7 +123,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt y: 298000, }, ], - color: DefaultPalette.green, + color: DataVizPalette.color4, lineOptions: { lineBorderWidth: '4', }, @@ -137,7 +136,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt y: 282000, }, ], - color: DefaultPalette.yellow, + color: DataVizPalette.color5, }, ], }; diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx index 3f685e2f2adfe..34f242e1cfc13 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomAccessibility.Example.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { IChartProps, ILineChartPoints, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + IChartProps, + ILineChartPoints, + ILineChartProps, + LineChart, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { Toggle } from '@fluentui/react/lib/Toggle'; interface ILineChartCustomAccessibilityExampleState { @@ -113,7 +119,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< }, ], legend: 'First', - color: DefaultPalette.blue, + color: DataVizPalette.color4, lineOptions: { lineBorderWidth: '4', }, @@ -148,7 +154,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< }, ], legend: 'Second', - color: DefaultPalette.green, + color: DataVizPalette.color5, lineOptions: { lineBorderWidth: '4', }, @@ -163,7 +169,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< { x: new Date('2018/05/01'), y: 50, callOutAccessibilityData: { ariaLabel: 'Point 3 Third 50' } }, ], legend: 'Third', - color: DefaultPalette.red, + color: DataVizPalette.color6, lineOptions: { lineBorderWidth: '4', }, @@ -189,7 +195,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< const colorFillBarData = [ { legend: 'Time range 1', - color: 'blue', + color: getColorFromToken(DataVizPalette.color11), data: [ { startX: new Date('2018/01/06'), @@ -199,7 +205,7 @@ export class LineChartCustomAccessibilityExample extends React.Component< }, { legend: 'Time range 2', - color: 'red', + color: getColorFromToken(DataVizPalette.color10), data: [ { startX: new Date('2018/01/18'), diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx index 0f86f179ca3ae..049dacd7151fc 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { IChartProps, ILineChartProps, LineChart, DataVizPalette } from '@fluentui/react-charting'; import { Toggle } from '@fluentui/react/lib/Toggle'; import * as d3 from 'd3-fetch'; @@ -99,7 +98,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL onDataPointClick: () => alert('click on 218000'), }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color1, lineOptions: { lineBorderWidth: '4', }, @@ -137,7 +136,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL y: 298000, }, ], - color: DefaultPalette.green, + color: DataVizPalette.color2, lineOptions: { lineBorderWidth: '4', }, @@ -150,7 +149,7 @@ export class LineChartCustomLocaleDateAxisExample extends React.Component<{}, IL y: 282000, }, ], - color: DefaultPalette.yellow, + color: DataVizPalette.color10, }, ], }; diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx index 0e01e45acfbd2..7d2eb4eb1d4b5 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Events.Example.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { IChartProps, ILineChartProps, LineChart, DataVizPalette } from '@fluentui/react-charting'; import { mergeStyles } from '@fluentui/react/lib/Styling'; import * as d3 from 'd3-format'; import { Toggle } from '@fluentui/react/lib/Toggle'; @@ -128,7 +127,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents y: 298, }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color8, lineOptions: { lineBorderWidth: '4', }, @@ -165,7 +164,7 @@ export class LineChartEventsExample extends React.Component<{}, ILineChartEvents y: 292, }, ], - color: DefaultPalette.green, + color: DataVizPalette.color10, lineOptions: { lineBorderWidth: '4', }, diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx index d1ede8341c66b..fcdab9b61c538 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Gaps.Example.tsx @@ -1,6 +1,11 @@ import * as React from 'react'; -import { IChartProps, ICustomizedCalloutData, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + IChartProps, + ICustomizedCalloutData, + ILineChartProps, + LineChart, + DataVizPalette, +} from '@fluentui/react-charting'; interface ILineChartGapsState { width: number; @@ -59,7 +64,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat hideCallout: true, }, ], - color: DefaultPalette.black, + color: DataVizPalette.color11, }, { legend: 'Normal Data', @@ -136,7 +141,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat y: 269000, }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color12, }, { legend: 'Low Confidence Data*', @@ -186,7 +191,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat y: 300000, }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color13, }, { legend: 'Green Data', @@ -227,7 +232,7 @@ export class LineChartGapsExample extends React.Component<{}, ILineChartGapsStat y: 299000, }, ], - color: DefaultPalette.green, + color: DataVizPalette.success, }, ], }; diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx index 9710ce7e99b86..bc2d4dea053b6 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx @@ -6,8 +6,8 @@ import { LineChart, ChartHoverCard, ICustomizedCalloutData, + DataVizPalette, } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; interface IStyledLineChartExampleState { width: number; @@ -49,7 +49,7 @@ export class LineChartStyledExample extends React.Component<{}, IStyledLineChart lineOptions: { lineBorderWidth: '4', }, - color: DefaultPalette.blue, + color: DataVizPalette.color10, }, ]; From dffb12d6fd275c49b5887431f32125943a35749c Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Tue, 29 Aug 2023 16:41:54 +0530 Subject: [PATCH 52/61] Update colors for few more charts --- .../Legends/Legends.Basic.Example.tsx | 13 +++---- .../Legends/Legends.Overflow.Example.tsx | 37 +++++++++--------- .../Legends/Legends.Styled.Example.tsx | 38 +++++++++---------- .../SparklineChart.Basic.Example.tsx | 18 ++++----- ...VerticalStackedBarChart.Styled.Example.tsx | 20 +++++----- 5 files changed, 63 insertions(+), 63 deletions(-) diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx index 3c068b2a9ed4d..f31bcbff38f7f 100644 --- a/packages/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/Legends/Legends.Basic.Example.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; -import { Legends, ILegend } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Legends, ILegend, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; export class LegendBasicExample extends React.Component<{}, {}> { public render(): JSX.Element { const legends: ILegend[] = [ { - title: 'fsd 1', - color: DefaultPalette.blue, + title: 'Legend 1', + color: getColorFromToken(DataVizPalette.color1), action: () => { console.log('click from LegendsPage'); alert('Legend1 clicked'); @@ -21,7 +20,7 @@ export class LegendBasicExample extends React.Component<{}, {}> { }, { title: 'Legend 2', - color: DefaultPalette.red, + color: getColorFromToken(DataVizPalette.color2), action: () => { alert('Legend2 clicked'); }, @@ -31,7 +30,7 @@ export class LegendBasicExample extends React.Component<{}, {}> { }, { title: 'Legend 3', - color: DefaultPalette.green, + color: getColorFromToken(DataVizPalette.color3), action: () => { alert('Legend3 clicked'); }, @@ -42,7 +41,7 @@ export class LegendBasicExample extends React.Component<{}, {}> { }, { title: 'Legend 4', - color: DefaultPalette.yellow, + color: getColorFromToken(DataVizPalette.color4), shape: 'triangle', action: () => { alert('Legend4 clicked'); diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx index 1363e5f60f05b..0bcea062eaa8a 100644 --- a/packages/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx +++ b/packages/react-examples/src/react-charting/Legends/Legends.Overflow.Example.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; -import { ILegend, Legends } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { ILegend, Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; export class LegendOverflowExample extends React.Component<{}, {}> { public render(): JSX.Element { const legends: ILegend[] = [ { title: 'Legend 1', - color: DefaultPalette.red, + color: getColorFromToken(DataVizPalette.color5), action: () => { console.log('Legend1 clicked'); }, @@ -18,7 +17,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 2', - color: DefaultPalette.green, + color: getColorFromToken(DataVizPalette.color6), action: () => { console.log('Legend2 clicked'); }, @@ -29,7 +28,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 3', - color: DefaultPalette.yellow, + color: getColorFromToken(DataVizPalette.color7), action: () => { console.log('Legend3 clicked'); }, @@ -40,7 +39,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 4', - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color8), action: () => { console.log('Legend4 clicked'); }, @@ -51,7 +50,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 5', - color: DefaultPalette.purpleLight, + color: getColorFromToken(DataVizPalette.color9), action: () => { console.log('Legend5 clicked'); }, @@ -62,7 +61,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 6', - color: DefaultPalette.orange, + color: getColorFromToken(DataVizPalette.color10), action: () => { console.log('Legend6 clicked'); }, @@ -73,7 +72,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 7', - color: DefaultPalette.magenta, + color: getColorFromToken(DataVizPalette.color11), action: () => { console.log('Legend7 clicked'); }, @@ -84,7 +83,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 8', - color: DefaultPalette.themeDark, + color: getColorFromToken(DataVizPalette.color12), action: () => { console.log('Legend8 clicked'); }, @@ -95,7 +94,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 9', - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color13), action: () => { console.log('Legend9 clicked'); }, @@ -106,7 +105,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 10', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color14), action: () => { console.log('Legend10 clicked'); }, @@ -117,7 +116,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 11', - color: DefaultPalette.blackTranslucent40, + color: getColorFromToken(DataVizPalette.color15), action: () => { console.log('Legend11 clicked'); }, @@ -128,7 +127,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 12', - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color16), action: () => { console.log('Legend12 clicked'); }, @@ -139,7 +138,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 13', - color: DefaultPalette.yellowLight, + color: getColorFromToken(DataVizPalette.color17), action: () => { console.log('Legend13 clicked'); }, @@ -150,7 +149,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 14', - color: DefaultPalette.magentaLight, + color: getColorFromToken(DataVizPalette.color18), action: () => { console.log('Legend14 clicked'); }, @@ -161,7 +160,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 15', - color: DefaultPalette.purpleDark, + color: getColorFromToken(DataVizPalette.color19), action: () => { console.log('Legend15 clicked'); }, @@ -172,7 +171,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 16', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color20), action: () => { console.log('Legend16 clicked'); }, @@ -183,7 +182,7 @@ export class LegendOverflowExample extends React.Component<{}, {}> { }, { title: 'Legend 17', - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color21), action: () => { console.log('Legend17 clicked'); }, diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx index 9bafca6b7d239..147cdf7ded8f2 100644 --- a/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx @@ -1,77 +1,77 @@ import * as React from 'react'; -import { ILegend, Legends } from '@fluentui/react-charting'; -import { DefaultPalette, FontWeights } from '@fluentui/react/lib/Styling'; +import { ILegend, Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; +import { FontWeights } from '@fluentui/react/lib/Styling'; export class LegendStyledExample extends React.Component<{}, {}> { public render(): JSX.Element { const legends: ILegend[] = [ { title: 'Legend 1', - color: DefaultPalette.red, + color: getColorFromToken(DataVizPalette.color1), }, { title: 'Legend 2', - color: DefaultPalette.green, + color: getColorFromToken(DataVizPalette.color2), }, { title: 'Legend 3', - color: DefaultPalette.yellow, + color: getColorFromToken(DataVizPalette.color3), }, { title: 'Legend 4', - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color4), }, { title: 'Legend 5', - color: DefaultPalette.purpleLight, + color: getColorFromToken(DataVizPalette.color5), }, { title: 'Legend 6', - color: DefaultPalette.orange, + color: getColorFromToken(DataVizPalette.color6), }, { title: 'Legend 7', - color: DefaultPalette.magenta, + color: getColorFromToken(DataVizPalette.color7), }, { title: 'Legend 8', - color: DefaultPalette.themeDark, + color: getColorFromToken(DataVizPalette.color8), }, { title: 'Legend 9', - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color9), }, { title: 'Legend 10', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color10), }, { title: 'Legend 11', - color: DefaultPalette.blackTranslucent40, + color: getColorFromToken(DataVizPalette.color11), }, { title: 'Legend 12', - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color12), }, { title: 'Legend 13', - color: DefaultPalette.yellowLight, + color: getColorFromToken(DataVizPalette.color13), }, { title: 'Legend 14', - color: DefaultPalette.magentaLight, + color: getColorFromToken(DataVizPalette.color14), }, { title: 'Legend 15', - color: DefaultPalette.purpleDark, + color: getColorFromToken(DataVizPalette.color15), }, { title: 'Legend 16', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color16), }, { title: 'Legend 17', - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color17), }, ]; 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 ee72ec1a2f38a..17f82f98e7a03 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 @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Sparkline, ISparklineProps } from '@fluentui/react-charting'; +import { Sparkline, ISparklineProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; import { IChartProps } from '@fluentui/react-charting'; interface ISparklineState {} @@ -18,7 +18,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '19.64', - color: '#00AA00', + color: getColorFromToken(DataVizPalette.color1), data: [ { x: 1, @@ -61,7 +61,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '19.64', - color: '#E60000', + color: getColorFromToken(DataVizPalette.color2), data: [ { x: 1, @@ -96,7 +96,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '19.64', - color: '#00AA00', + color: getColorFromToken(DataVizPalette.color3), data: [ { x: 1, @@ -131,7 +131,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '464.64', - color: '#E60000', + color: getColorFromToken(DataVizPalette.color4), data: [ { x: 1, @@ -166,7 +166,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '46.49', - color: '#E3008C', + color: getColorFromToken(DataVizPalette.color5), data: [ { x: 1, @@ -201,7 +201,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '49.44', - color: '#627CEF', + color: getColorFromToken(DataVizPalette.color6), data: [ { x: new Date('2020-03-03T00:00:00.000Z'), @@ -236,7 +236,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '49.44', - color: '#0078D4', + color: getColorFromToken(DataVizPalette.color7), data: [ { x: 1, @@ -271,7 +271,7 @@ export class SparklineChartBasicExample extends React.Component<{}, ISparklineSt lineChartData: [ { legend: '541.44', - color: '#0078D4', + color: getColorFromToken(DataVizPalette.color8), data: [ { x: 1, diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx index 0cb192dd6fff8..aac86c4c769be 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Styled.Example.tsx @@ -5,6 +5,8 @@ import { IVSChartDataPoint, IVerticalStackedChartProps, IVerticalStackedBarChartProps, + DataVizPalette, + getColorFromToken, } from '@fluentui/react-charting'; import { DefaultPalette, IStyle, DefaultFontStyles } from '@fluentui/react/lib/Styling'; import { ChoiceGroup, DirectionalHint, IChoiceGroupOption } from '@fluentui/react'; @@ -41,21 +43,21 @@ export class VerticalStackedBarChartStyledExample extends React.Component<{}, IV private _basicExample(): JSX.Element { const firstChartPoints: IVSChartDataPoint[] = [ - { legend: 'Metadata1', data: 2, color: DefaultPalette.blue }, - { legend: 'Metadata2', data: 0.5, color: DefaultPalette.blueMid }, - { legend: 'Metadata3', data: 0, color: DefaultPalette.blueLight }, + { legend: 'Metadata1', data: 2, color: getColorFromToken(DataVizPalette.color8) }, + { legend: 'Metadata2', data: 0.5, color: getColorFromToken(DataVizPalette.color9) }, + { legend: 'Metadata3', data: 0, color: getColorFromToken(DataVizPalette.color10) }, ]; const secondChartPoints: IVSChartDataPoint[] = [ - { legend: 'Metadata1', data: 30, color: DefaultPalette.blue }, - { legend: 'Metadata2', data: 3, color: DefaultPalette.blueMid }, - { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight }, + { legend: 'Metadata1', data: 30, color: getColorFromToken(DataVizPalette.color8) }, + { legend: 'Metadata2', data: 3, color: getColorFromToken(DataVizPalette.color9) }, + { legend: 'Metadata3', data: 40, color: getColorFromToken(DataVizPalette.color10) }, ]; const thirdChartPoints: IVSChartDataPoint[] = [ - { legend: 'Metadata1', data: 10, color: DefaultPalette.blue }, - { legend: 'Metadata2', data: 60, color: DefaultPalette.blueMid }, - { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight }, + { legend: 'Metadata1', data: 10, color: getColorFromToken(DataVizPalette.color8) }, + { legend: 'Metadata2', data: 60, color: getColorFromToken(DataVizPalette.color9) }, + { legend: 'Metadata3', data: 30, color: getColorFromToken(DataVizPalette.color10) }, ]; const data: IVerticalStackedChartProps[] = [ From eb1d98c5ef2a9eeecc64c6f9c552221f92dcf7e3 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Tue, 29 Aug 2023 22:12:59 +0530 Subject: [PATCH 53/61] Fix legends styled example --- .../src/react-charting/Legends/Legends.Styled.Example.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx index 147cdf7ded8f2..a6a2737c22e50 100644 --- a/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/Legends/Legends.Styled.Example.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { ILegend, Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; -import { FontWeights } from '@fluentui/react/lib/Styling'; +import { DefaultPalette, FontWeights } from '@fluentui/react/lib/Styling'; export class LegendStyledExample extends React.Component<{}, {}> { public render(): JSX.Element { From 4d6d1d5f204e1aaa5d441ce731a74e90f1475cac Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Tue, 29 Aug 2023 22:38:50 +0530 Subject: [PATCH 54/61] Bug fix --- .../LineChart/LineChart.Multiple.Example.tsx | 10 +++++----- .../MultiStackedBarChart.doc.tsx | 12 ++++++------ 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx index 07d9eb6db8db5..c1e62aa1150de 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx @@ -68,11 +68,11 @@ export class LineChartMultipleExample extends React.Component<{}, ILineChartMult { data: [ { x: new Date('2018/01/01'), y: 10, xAxisCalloutData: '2018/01/01', yAxisCalloutData: '10%' }, - { x: new Date('2018/02/01'), y: 30, xAxisCalloutData: '2018/01/15', yAxisCalloutData: '18%' }, - { x: new Date('2018/03/01'), y: 10, xAxisCalloutData: '2018/01/28', yAxisCalloutData: '24%' }, - { x: new Date('2018/04/01'), y: 30, xAxisCalloutData: '2018/02/01', yAxisCalloutData: '25%' }, - { x: new Date('2018/05/01'), y: 10, xAxisCalloutData: '2018/03/01', yAxisCalloutData: '15%' }, - { x: new Date('2018/06/01'), y: 30, xAxisCalloutData: '2018/03/15', yAxisCalloutData: '30%' }, + { x: new Date('2018/02/01'), y: 30, xAxisCalloutData: '2018/02/01', yAxisCalloutData: '18%' }, + { x: new Date('2018/03/01'), y: 10, xAxisCalloutData: '2018/03/01', yAxisCalloutData: '24%' }, + { x: new Date('2018/04/01'), y: 30, xAxisCalloutData: '2018/04/01', yAxisCalloutData: '25%' }, + { x: new Date('2018/05/01'), y: 10, xAxisCalloutData: '2018/05/01', yAxisCalloutData: '15%' }, + { x: new Date('2018/06/01'), y: 30, xAxisCalloutData: '2018/06/01', yAxisCalloutData: '30%' }, ], legend: 'First', lineOptions: { diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx index 908c08eb47cfd..ee4d35b304548 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; -import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; +//import { MultiStackedBarChartExample } from './MultiStackedBarChart.Example'; import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example'; @@ -19,11 +19,11 @@ export const MultiStackedBarChartPageProps: IDocPageProps = { componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/MultiStackedBarChart', examples: [ - { - title: 'MultiStackedBarChart N/M', - code: MultiStackedBarChartExampleCode, - view: , - }, + //{ + // title: 'MultiStackedBarChart N/M', + // code: MultiStackedBarChartExampleCode, + // view: , + //}, { title: 'MultiStackedBarChart absolute scale', code: MultiStackedBarChartVariantExampleCode, From e16c8c786fb48eb257481872a926f18b08808382 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Tue, 29 Aug 2023 23:09:47 +0530 Subject: [PATCH 55/61] Fix lint errorr --- .../MultiStackedBarChart/MultiStackedBarChart.doc.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx index ee4d35b304548..2274c4c0bee72 100644 --- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx @@ -6,8 +6,8 @@ import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; import { MultiStackedBarChartWithPlaceholderExample } from './MultiStackedBarChartWithPlaceHolder.Example'; import { MultiStackedBarChartVariantExample } from './MultiStackedBarChart.Variant.Example'; -const MultiStackedBarChartExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx') as string; +//const MultiStackedBarChartExampleCode = +// require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx') as string; const MultiStackedBarChartWithPlaceholderExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx') as string; const MultiStackedBarChartVariantExampleCode = From c2bd7407b3e0ec9ffc6361c3f749d0b9eac3f210 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Wed, 30 Aug 2023 16:40:22 +0530 Subject: [PATCH 56/61] Fix example data --- .../AreaChart/AreaChart.Basic.Example.tsx | 28 +++++++-------- .../GroupedVerticalBarChart.Basic.Example.tsx | 34 +++++++++---------- ...alBarChart.CustomAccessibility.Example.tsx | 16 ++++----- ...rizontalBarChart.CustomCallout.Example.tsx | 16 ++++----- .../SankeyChart/SankeyChart.Basic.Example.tsx | 2 +- .../SankeyChart/SankeyChart.Inbox.Example.tsx | 2 +- .../StackedBarChart.Basic.Example.tsx | 2 +- ...edBarChart.CustomAccessibility.Example.tsx | 2 +- .../VerticalBarChart.Basic.Example.tsx | 26 ++++++++------ .../VerticalStackedBarChart.Basic.Example.tsx | 22 ++++++------ ...edBarChart.CustomAccessibility.Example.tsx | 16 ++++----- 11 files changed, 84 insertions(+), 82 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx index c769832044298..597232972026b 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx @@ -49,37 +49,37 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt x: 20, y: 7000, xAxisCalloutData: '2018/01/01', - yAxisCalloutData: '10%', + yAxisCalloutData: '35%', }, { x: 25, y: 9000, xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', + yAxisCalloutData: '45%', }, { x: 30, y: 13000, xAxisCalloutData: '2018/01/28', - yAxisCalloutData: '24%', + yAxisCalloutData: '65%', }, { x: 35, y: 15000, xAxisCalloutData: '2018/02/01', - yAxisCalloutData: '25%', + yAxisCalloutData: '75%', }, { x: 40, y: 11000, xAxisCalloutData: '2018/03/01', - yAxisCalloutData: '15%', + yAxisCalloutData: '55%', }, { x: 45, y: 8760, xAxisCalloutData: '2018/03/15', - yAxisCalloutData: '30%', + yAxisCalloutData: '43%', }, { x: 50, @@ -91,49 +91,49 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt x: 55, y: 20000, xAxisCalloutData: '2018/04/04', - yAxisCalloutData: '32%', + yAxisCalloutData: '100%', }, { x: 60, y: 17000, xAxisCalloutData: '2018/04/15', - yAxisCalloutData: '29%', + yAxisCalloutData: '85%', }, { x: 65, y: 1000, xAxisCalloutData: '2018/05/05', - yAxisCalloutData: '43%', + yAxisCalloutData: '5%', }, { x: 70, y: 12000, xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', + yAxisCalloutData: '60%', }, { x: 75, y: 6876, xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', + yAxisCalloutData: '34%', }, { x: 80, y: 12000, xAxisCalloutData: '2018/04/30', - yAxisCalloutData: '55%', + yAxisCalloutData: '60%', }, { x: 85, y: 7000, xAxisCalloutData: '2018/05/04', - yAxisCalloutData: '12%', + yAxisCalloutData: '35%', }, { x: 90, y: 10000, xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', + yAxisCalloutData: '50%', }, ]; 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 bf02c904b2db7..facafa8d2d625 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 @@ -50,42 +50,42 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr private _basicExample(): JSX.Element { const data = [ { - name: 'Metadata info multi lines text Completed', + name: 'Jan - Mar', series: [ { key: 'series1', data: 33000, color: getColorFromToken(DataVizPalette.color3), - legend: 'MetaData1', + legend: '2022', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 44000, color: getColorFromToken(DataVizPalette.color4), - legend: 'MetaData4', + legend: '2023', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '44%', }, ], }, { - name: 'Meta Data2', + name: 'Apr - Jun', series: [ { key: 'series1', data: 33000, color: getColorFromToken(DataVizPalette.color3), - legend: 'MetaData1', + legend: '2022', xAxisCalloutData: '2020/05/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 3000, color: getColorFromToken(DataVizPalette.color4), - legend: 'MetaData4', + legend: '2023', xAxisCalloutData: '2020/05/30', yAxisCalloutData: '3%', }, @@ -93,42 +93,42 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr }, { - name: 'Single line text ', + name: 'Jul - Sep', series: [ { key: 'series1', data: 14000, color: getColorFromToken(DataVizPalette.color3), - legend: 'MetaData1', + legend: '2022', xAxisCalloutData: '2020/06/30', - yAxisCalloutData: '14%', + yAxisCalloutData: '13%', }, { key: 'series2', data: 50000, color: getColorFromToken(DataVizPalette.color4), - legend: 'MetaData4', + legend: '2023', xAxisCalloutData: '2020/06/30', yAxisCalloutData: '50%', }, ], }, { - name: 'Hello World!!!', + name: 'Oct - Dec', series: [ { key: 'series1', data: 33000, color: getColorFromToken(DataVizPalette.color3), - legend: 'MetaData1', + legend: '2022', xAxisCalloutData: '2020/07/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 3000, color: getColorFromToken(DataVizPalette.color4), - legend: 'MetaData4', + legend: '2023', xAxisCalloutData: '2020/07/30', yAxisCalloutData: '3%', }, @@ -195,8 +195,6 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr data={data} height={this.state.height} width={this.state.width} - showYAxisGridLines - wrapXAxisLables isCalloutForStack={this.state.selectedCallout === 'StackCallout'} barwidth={this.state.barwidth} hideLabels={this.state.hideLabels} diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx index f091574e1c296..1a7d98228df7a 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx @@ -50,9 +50,9 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com color: getColorFromToken(DataVizPalette.color10), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group series 1 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 33%', + ariaLabel: 'Group series 1 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 29%', }, }, { @@ -80,9 +80,9 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com color: getColorFromToken(DataVizPalette.color10), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group series 2 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 33%', + ariaLabel: 'Group series 2 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 29%', }, }, { @@ -110,9 +110,9 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com color: getColorFromToken(DataVizPalette.color10), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '14%', + yAxisCalloutData: '13%', callOutAccessibilityData: { - ariaLabel: 'Group series 3 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 14%', + ariaLabel: 'Group series 3 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 13%', }, }, { @@ -140,9 +140,9 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com color: getColorFromToken(DataVizPalette.color10), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', callOutAccessibilityData: { - ariaLabel: 'Group series 4 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 33%', + ariaLabel: 'Group series 4 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 29%', }, }, { diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx index 9b5cb2034ad25..05a66647e4640 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx @@ -22,7 +22,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 1543, y: 15000 }, color: getColorFromToken(DataVizPalette.color28), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '1.5K', }, ], }, @@ -34,7 +34,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 800, y: 15000 }, color: getColorFromToken(DataVizPalette.color29), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '800', }, ], }, @@ -46,7 +46,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 8888, y: 15000 }, color: getColorFromToken(DataVizPalette.color30), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '8.8K', }, ], }, @@ -58,7 +58,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 15888, y: 15000 }, color: getColorFromToken(DataVizPalette.color31), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '16K', }, ], }, @@ -70,7 +70,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 11444, y: 15000 }, color: getColorFromToken(DataVizPalette.color32), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '11K', }, ], }, @@ -82,7 +82,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 14000, y: 15000 }, color: getColorFromToken(DataVizPalette.color33), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '14K', }, ], }, @@ -94,7 +94,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 9855, y: 15000 }, color: getColorFromToken(DataVizPalette.color34), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '9.9K', }, ], }, @@ -106,7 +106,7 @@ export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> horizontalBarChartdata: { x: 4250, y: 15000 }, color: getColorFromToken(DataVizPalette.color35), xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '19K', + yAxisCalloutData: '4.3K', }, ], }, diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx index 91704be547f54..af4b3547e8e68 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx @@ -10,7 +10,7 @@ export class SankeyChartBasicExample extends React.Component<{}, ISankeyChartBas constructor(props: ISankeyChartProps) { super(props); this.state = { - width: 912, + width: 820, height: 412, }; } diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx index 66dbc861278b1..612fd31bd4ee8 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx +++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Inbox.Example.tsx @@ -11,7 +11,7 @@ export class SankeyChartInboxExample extends React.Component<{}, ISankeyChartBas constructor(props: ISankeyChartProps) { super(props); this.state = { - width: 912, + width: 820, height: 400, }; } diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx index 8b9e6488cbac9..73a73367b0609 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx @@ -10,7 +10,7 @@ export class StackedBarChartBasicExample extends React.Component<{}, {}> { data: 3000000, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '99%', }, { legend: 'second', data: 1, color: DefaultPalette.green }, ]; diff --git a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx index 9e5786d20a9a0..49f4afbf4fcf6 100644 --- a/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.CustomAccessibility.Example.tsx @@ -10,7 +10,7 @@ export class StackedBarChartCustomAccessibilityExample extends React.Component<{ data: 3000000, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '99%', callOutAccessibilityData: { ariaLabel: 'Bar series 1 of 1 2020/04/30 40%' }, }, { legend: 'second', data: 1, color: DefaultPalette.green }, 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 315dca1992dc4..cc001c9d927e2 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 @@ -68,10 +68,10 @@ export class VerticalBarChartBasicExample extends React.Component Date: Wed, 30 Aug 2023 19:15:02 +0530 Subject: [PATCH 57/61] Fix more examples --- .../GroupedVerticalBarChart.CustomAccessibility.Example.tsx | 2 +- .../src/react-charting/LineChart/LineChart.Basic.Example.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx index 1a7d98228df7a..4c7a2f83b1151 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.CustomAccessibility.Example.tsx @@ -72,7 +72,7 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com }, }, { - name: 'Meta Data2', + name: 'Data Point2', series: [ { key: 'series1', diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx index 754a99dc03781..47870cbbf2283 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx @@ -132,8 +132,8 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt legend: 'single point', data: [ { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282000, + x: new Date('2020-03-05T12:00:00.000Z'), + y: 232000, }, ], color: DataVizPalette.color5, From 87630baae11496296244ec6f59922a18e831fdc8 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 21 Sep 2023 14:20:10 +0530 Subject: [PATCH 58/61] Remove duplicate entry from sankey chart --- .../react-charting/SankeyChart/SankeyChart.Basic.Example.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx index af4b3547e8e68..1adc4f7d4e9af 100644 --- a/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.Basic.Example.tsx @@ -104,11 +104,6 @@ export class SankeyChartBasicExample extends React.Component<{}, ISankeyChartBas target: 4, value: 4, }, - { - source: 3, - target: 4, - value: 4, - }, { source: 3, target: 5, From f0f7ece2cbf6b557377856426ffb7438c949b47b Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 21 Sep 2023 16:12:26 +0530 Subject: [PATCH 59/61] Splitting non charting changes in another PR --- .../config/api-docs.js | 20 ---- apps/public-docsite-resources/package.json | 1 - .../src/AppDefinition.tsx | 113 ------------------ .../pages/Charting/AreaChartPage.tsx | 11 -- .../pages/Charting/DonutChartPage.tsx | 11 -- .../pages/Charting/GaugeChartPage.tsx | 11 -- .../Charting/GroupedVerticalBarChartPage.tsx | 11 -- .../pages/Charting/HeatMapChartPage.tsx | 11 -- .../pages/Charting/HorizontalBarChartPage.tsx | 11 -- .../HorizontalBarChartWithAxisPage.tsx | 11 -- .../components/pages/Charting/LegendsPage.tsx | 11 -- .../pages/Charting/LineChartPage.tsx | 11 -- .../Charting/MultiStackedBarChartPage.tsx | 11 -- .../pages/Charting/PieChartPage.tsx | 11 -- .../pages/Charting/SankeyChartPage.tsx | 11 -- .../pages/Charting/SparklineChartPage.tsx | 11 -- .../pages/Charting/StackedBarChartPage.tsx | 11 -- .../pages/Charting/TreeChartPage.tsx | 11 -- .../Charting/VerticalBarChartStandardPage.tsx | 11 -- .../Charting/VerticalStackedBarChartPage.tsx | 11 -- .../SiteDefinition.pages/Controls/web.tsx | 25 ---- .../AreaChartPage/AreaChartPage.doc.ts | 8 -- .../Controls/AreaChartPage/AreaChartPage.tsx | 8 -- .../DonutChartPage/DonutChartPage.doc.ts | 8 -- .../DonutChartPage/DonutChartPage.tsx | 8 -- .../GaugeChartPage/GaugeChartPage.doc.ts | 8 -- .../GaugeChartPage/GaugeChartPage.tsx | 8 -- .../HeatMapChartPage/HeatMapChartPage.doc.ts | 8 -- .../HeatMapChartPage/HeatMapChartPage.tsx | 8 -- .../HorizontalBarChartPage.doc.ts | 8 -- .../HorizontalBarChartPage.tsx | 8 -- .../HorizontalBarChartWithAxisPage.doc.ts | 10 -- .../HorizontalBarChartWithAxisPage.tsx | 8 -- .../MultiStackedBarChartPage.doc.ts | 10 -- .../MultiStackedBarChartPage.tsx | 8 -- .../StackedBarChartPage.doc.ts | 10 -- .../StackedBarChartPage.tsx | 8 -- .../Controls/LegendsPage/LegendsPage.doc.ts | 8 -- .../Controls/LegendsPage/LegendsPage.tsx | 8 -- .../LineChartPage/LineChartPage.doc.ts | 8 -- .../Controls/LineChartPage/LineChartPage.tsx | 8 -- .../Controls/PieChartPage/PieChartPage.doc.ts | 8 -- .../Controls/PieChartPage/PieChartPage.tsx | 8 -- .../SankeyChartPage/SankeyChartPage.doc.ts | 8 -- .../SankeyChartPage/SankeyChartPage.tsx | 8 -- .../SparklineChartPage.doc.ts | 8 -- .../SparklineChartPage/SparklineChartPage.tsx | 8 -- .../TreeChartPage/TreeChartPage.doc.ts | 8 -- .../Controls/TreeChartPage/TreeChartPage.tsx | 8 -- .../GroupedVerticalBarChartPage.doc.ts | 10 -- .../GroupedVerticalBarChartPage.tsx | 8 -- .../VerticalBarChartPage.doc.ts | 8 -- .../VerticalBarChartPage.tsx | 8 -- .../VerticalBarChartStandardPage.doc.ts | 10 -- .../VerticalBarChartStandardPage.tsx | 8 -- .../VerticalStackedBarChartPage.doc.ts | 10 -- .../VerticalStackedBarChartPage.tsx | 8 -- .../src/utilities/defaultSupportedPackages.ts | 2 +- 58 files changed, 1 insertion(+), 647 deletions(-) delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx delete mode 100644 apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts delete mode 100644 apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx diff --git a/apps/public-docsite-resources/config/api-docs.js b/apps/public-docsite-resources/config/api-docs.js index d8577f259036e..b3041f7ac06d9 100644 --- a/apps/public-docsite-resources/config/api-docs.js +++ b/apps/public-docsite-resources/config/api-docs.js @@ -12,7 +12,6 @@ module.exports = { apiJsonPaths: [ 'packages/react', ...findRepoDeps({ cwd: path.join(gitRoot, 'packages/react'), dev: false }).map(dep => dep.packagePath), - 'packages/react-charting', ] .map(packagePath => path.join(gitRoot, packagePath, 'dist', path.basename(packagePath) + '.api.json')) .filter(apiJsonPath => fs.existsSync(apiJsonPath)), @@ -90,24 +89,5 @@ module.exports = { 'Toggle', 'Tooltip', ], - 'react-charting': [ - 'Legends', - 'LineChart', - 'AreaChart', - 'DonutChart', - 'VerticalBarChart', - 'GroupedVerticalBarChart', - 'HeatMapChart', - 'HorizontalBarChart', - 'HorizontalBarChartWithAxis', - 'PieChart', - 'GaugeChart', - 'SankeyChart', - 'Sparkline', - 'StackedBarChart', - 'MultiStackedBarChart', - 'TreeChart', - 'VerticalStackedBarChart', - ], }, }; diff --git a/apps/public-docsite-resources/package.json b/apps/public-docsite-resources/package.json index 89d7746db0223..b718a3f404cdb 100644 --- a/apps/public-docsite-resources/package.json +++ b/apps/public-docsite-resources/package.json @@ -35,7 +35,6 @@ }, "dependencies": { "@fluentui/react": "*", - "@fluentui/react-charting": "*", "@fluentui/react-examples": "*", "@microsoft/load-themed-styles": "^1.10.26", "@fluentui/azure-themes": "*", diff --git a/apps/public-docsite-resources/src/AppDefinition.tsx b/apps/public-docsite-resources/src/AppDefinition.tsx index f603dbc45f35e..4ef5cd5336438 100644 --- a/apps/public-docsite-resources/src/AppDefinition.tsx +++ b/apps/public-docsite-resources/src/AppDefinition.tsx @@ -516,119 +516,6 @@ export const AppDefinition: IAppDefinition = { }, ], }, - { - name: 'Charting', - links: [ - { - component: require('./components/pages/Charting/LegendsPage').LegendsPage, - key: 'Legends', - name: 'Legends', - url: '#/examples/Legends', - }, - { - component: require('./components/pages/Charting/LineChartPage').LineChartPage, - key: 'LineChart', - name: 'LineChart', - url: '#/examples/LineChart', - }, - { - component: require('./components/pages/Charting/AreaChartPage').AreaChartPage, - key: 'AreaChart', - name: 'AreaChart', - url: '#/examples/AreaChart', - }, - { - component: require('./components/pages/Charting/DonutChartPage').AreaChartPage, - key: 'DonutChart', - name: 'DonutChart', - url: '#/examples/DonutChart', - }, - { - name: 'VerticalBarChart', - key: 'VerticalBarChart', - url: '#/examples/VerticalBarChart', - links: [ - { - component: require('./components/pages/Charting/VerticalStackedBarChartPage') - .VerticalStackedBarChartPage, - key: 'VerticalBarChart - Stacked', - name: 'VerticalBarChart - Stacked', - url: '#/examples/VerticalBarChart/Stacked', - }, - { - component: require('./components/pages/Charting/GroupedVerticalBarChartPage') - .GroupedVerticalBarChartPage, - key: 'VerticalBarChart - Grouped', - name: 'VerticalBarChart - Grouped', - url: '#/examples/VerticalBarChart/Grouped', - }, - ], - }, - { - component: require('./components/pages/Charting/GaugeChartPage').GaugeChartPage, - key: 'GaugeChart', - name: 'GaugeChart', - url: '#/examples/GaugeChart', - }, - { - component: require('./components/pages/Charting/HeatMapChartPage').HeatMapChartPage, - key: 'HeatMapChart', - name: 'HeatMapChart', - url: '#/examples/HeatMapChart', - }, - { - component: require('./components/pages/Charting/HorizontalBarChartPage').HorizontalBarChartPage, - key: 'HorizontalBarChart', - name: 'HorizontalBarChart', - url: '#/examples/HorizontalBarChart', - links: [ - { - component: require('./components/pages/Charting/HorizontalBarChartWithAxisPage') - .HorizontalBarChartWithAxisPage, - key: 'HorizontalBarChart - WithAxis', - name: 'HorizontalBarChart - WithAxis', - url: '#/examples/HorizontalBarChart/WithAxis', - }, - { - component: require('./components/pages/Charting/MultiStackedBarChartPage').MultiStackedBarChartPage, - key: 'HorizontalBarChart - MultiStacked', - name: 'HorizontalBarChart - MultiStacked', - url: '#/examples/HorizontalBarChart/MultiStacked', - }, - { - component: require('./components/pages/Charting/StackedBarChartPage').StackedBarChartPage, - key: 'HorizontalBarChart - Stacked', - name: 'HorizontalBarChart - Stacked', - url: '#/examples/HorizontalBarChart/Stacked', - }, - ], - }, - { - component: require('./components/pages/Charting/PieChartPage').PieChartPage, - key: 'PieChart', - name: 'PieChart', - url: '#/examples/PieChart', - }, - { - component: require('./components/pages/Charting/SankeyChartPage').SankeyChartPage, - key: 'SankeyChart', - name: 'SankeyChart', - url: '#/examples/SankeyChart', - }, - { - component: require('./components/pages/Charting/SparklineChartPage').SparklineChartPage, - key: 'SparklineChart', - name: 'SparklineChart', - url: '#/examples/SparklineChart', - }, - { - component: require('./components/pages/Charting/TreeChartPage').TreeChartPage, - key: 'TreeChart', - name: 'TreeChart', - url: '#/examples/TreeChart', - }, - ], - }, { name: 'Utilities', links: [ diff --git a/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx deleted file mode 100644 index 43e77d5234322..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/AreaChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { AreaChartPageProps } from '@fluentui/react-examples/lib/react-charting/AreaChart/AreaChart.doc'; - -export const AreaChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx deleted file mode 100644 index 499b8f972725c..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/DonutChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { DonutChartPageProps } from '@fluentui/react-examples/lib/react-charting/DonutChart/DonutChart.doc'; - -export const DonutChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx deleted file mode 100644 index 3dd0a25592867..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/GaugeChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { GaugeChartPageProps } from '@fluentui/react-examples/lib/react-charting/GaugeChart/GaugeChart.doc'; - -export const GaugeChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx deleted file mode 100644 index 55a950930ca98..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/GroupedVerticalBarChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { GroupedVerticalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc'; - -export const GroupedVerticalBarChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx deleted file mode 100644 index 6925eac195262..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/HeatMapChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { HeatMapChartPageProps } from '@fluentui/react-examples/lib/react-charting/HeatMapChart/HeatMapChart.doc'; - -export const HeatMapChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx deleted file mode 100644 index 4fe7dceda15e2..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { HorizontalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChart/HorizontalBarChart.doc'; - -export const HorizontalBarChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx deleted file mode 100644 index d323c3f81c4f3..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/HorizontalBarChartWithAxisPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { HorizontalBarChartWithAxisPageProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc'; - -export const HorizontalBarChartWithAxisPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx deleted file mode 100644 index 845ab725106a3..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/LegendsPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { LineChartPageProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; - -export const LineChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx deleted file mode 100644 index 845ab725106a3..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/LineChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { LineChartPageProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; - -export const LineChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx deleted file mode 100644 index ad159f4fbb0e2..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/MultiStackedBarChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { MultiStackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc'; - -export const MultiStackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx deleted file mode 100644 index 2d82290363036..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/PieChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { PieChartPageProps } from '@fluentui/react-examples/lib/react-charting/PieChart/PieChart.doc'; - -export const PieChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx deleted file mode 100644 index 70e7fc369ae27..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/SankeyChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { SankeyChartPageProps } from '@fluentui/react-examples/lib/react-charting/SankeyChart/SankeyChart.doc'; - -export const SankeyChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx deleted file mode 100644 index c3e65eea13171..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/SparklineChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { SparklineChartPageProps } from '@fluentui/react-examples/lib/react-charting/SparklineChart/SparklineChart.doc'; - -export const SparklineChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx deleted file mode 100644 index 755ad361f7136..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/StackedBarChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { StackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/StackedBarChart/StackedBarChart.doc'; - -export const StackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx deleted file mode 100644 index 77652c53f238e..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/TreeChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { TreeChartPageProps } from '@fluentui/react-examples/lib/react-charting/TreeChart/TreeChart.doc'; - -export const TreeChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx deleted file mode 100644 index 10abf3699e418..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/VerticalBarChartStandardPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { VerticalBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; - -export const VerticalBarChartStandardPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx b/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx deleted file mode 100644 index 55b674b121b07..0000000000000 --- a/apps/public-docsite-resources/src/components/pages/Charting/VerticalStackedBarChartPage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { DemoPage } from '../../DemoPage'; - -import { VerticalStackedBarChartPageProps } from '@fluentui/react-examples/lib/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc'; - -export const VerticalStackedBarChartPage = (props: { isHeaderVisible: boolean }) => ( - -); diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx index 04ea5c5b624e4..43ecb10e92b00 100644 --- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx +++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.pages/Controls/web.tsx @@ -106,31 +106,6 @@ export const categories: { [name: string]: ICategory } = { ScrollablePane: {}, Tooltip: {}, }, - Charts: { - Legends: {}, - LineChart: {}, - AreaChart: {}, - DonutChart: {}, - VerticalBarChart: { - subPages: { - Grouped: { title: 'Grouped' }, - VerticalStackedBarChart: { title: 'Stacked' }, - }, - }, - GaugeChart: {}, - HeatMapChart: {}, - HorizontalBarChart: { - subPages: { - StackedBarChart: { title: 'Stacked' }, - MultiStackedBarChart: { title: 'Multi Stacked' }, - WithAxis: { title: 'With Axis' }, - }, - }, - PieChart: {}, - SankeyChart: {}, - SparklineChart: {}, - TreeChart: {}, - }, Utilities: { Announced: { subPages: { diff --git a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts deleted file mode 100644 index 0ae952d9b3a8e..0000000000000 --- a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { AreaChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/AreaChart/AreaChart.doc'; - -export const AreaChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx b/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx deleted file mode 100644 index 88eb5c1d2fc8d..0000000000000 --- a/apps/public-docsite/src/pages/Controls/AreaChartPage/AreaChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { AreaChartPageProps } from './AreaChartPage.doc'; - -export const AreaChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts deleted file mode 100644 index 1c61fff3bb6a4..0000000000000 --- a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { DonutChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/DonutChart/DonutChart.doc'; - -export const DonutChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx b/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx deleted file mode 100644 index 21868621540b2..0000000000000 --- a/apps/public-docsite/src/pages/Controls/DonutChartPage/DonutChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { DonutChartPageProps } from './DonutChartPage.doc'; - -export const DonutChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts deleted file mode 100644 index 32156925319c1..0000000000000 --- a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { GaugeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/GaugeChart/GaugeChart.doc'; - -export const GaugeChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx b/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx deleted file mode 100644 index 0311aa5e50ee2..0000000000000 --- a/apps/public-docsite/src/pages/Controls/GaugeChartPage/GaugeChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { GaugeChartPageProps } from './GaugeChartPage.doc'; - -export const GaugeChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts deleted file mode 100644 index 6a5cd70a9e340..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { HeatMapChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HeatMapChart/HeatMapChart.doc'; - -export const HeatMapChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx b/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx deleted file mode 100644 index e36120b17c402..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HeatMapChartPage/HeatMapChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { HeatMapChartPageProps } from './HeatMapChartPage.doc'; - -export const HeatMapChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts deleted file mode 100644 index f009adfd8a525..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { HorizontalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChart/HorizontalBarChart.doc'; - -export const HorizontalBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx deleted file mode 100644 index 2274cd8fdcf99..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { HorizontalBarChartPageProps } from './HorizontalBarChartPage.doc'; - -export const HorizontalBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts deleted file mode 100644 index 926d1bf96c0b5..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { HorizontalBarChartWithAxisPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc'; - -export const HorizontalBarChartWithAxisPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'HorizontalBarChart - WithAxis', - url: 'withaxis', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx deleted file mode 100644 index b6395e88547e7..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/HorizontalBarChartWithAxisPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { HorizontalBarChartWithAxisPageProps } from './HorizontalBarChartWithAxisPage.doc'; - -export const HorizontalBarChartWithAxisPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts deleted file mode 100644 index 65e0688c36460..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { MultiStackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc'; - -export const MultiStackedBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'HorizontalBarChart - Multi Stacked', - url: 'multistacked', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx deleted file mode 100644 index c67b08068048b..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/MultiStackedBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { MultiStackedBarChartPageProps } from './MultiStackedBarChartPage.doc'; - -export const MultiStackedBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts deleted file mode 100644 index 3ed7d3aeb0eb1..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { StackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/StackedBarChart/StackedBarChart.doc'; - -export const StackedBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'HorizontalBarChart - Stacked', - url: 'stacked', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx deleted file mode 100644 index d73fd391dfd1a..0000000000000 --- a/apps/public-docsite/src/pages/Controls/HorizontalBarChartPage/StackedBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { StackedBarChartPageProps } from './StackedBarChartPage.doc'; - -export const StackedBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts deleted file mode 100644 index 4a1e6c5b70acd..0000000000000 --- a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { LegendsPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/Legends/Legends.doc'; - -export const LegendsPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx b/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx deleted file mode 100644 index 947c8d05a7557..0000000000000 --- a/apps/public-docsite/src/pages/Controls/LegendsPage/LegendsPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { LegendsPageProps } from './LegendsPage.doc'; - -export const LegendsPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts deleted file mode 100644 index c2e1c9666b055..0000000000000 --- a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { LineChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/LineChart/LineChart.doc'; - -export const LineChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx b/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx deleted file mode 100644 index ce5d4ca8179ac..0000000000000 --- a/apps/public-docsite/src/pages/Controls/LineChartPage/LineChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { LineChartPageProps } from './LineChartPage.doc'; - -export const LineChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts deleted file mode 100644 index 120ef68eca139..0000000000000 --- a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { PieChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/PieChart/PieChart.doc'; - -export const PieChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx b/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx deleted file mode 100644 index f96b551ac6aa8..0000000000000 --- a/apps/public-docsite/src/pages/Controls/PieChartPage/PieChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { PieChartPageProps } from './PieChartPage.doc'; - -export const PieChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts deleted file mode 100644 index 4907d2b5c8036..0000000000000 --- a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { SankeyChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/SankeyChart/SankeyChart.doc'; - -export const SankeyChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx b/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx deleted file mode 100644 index 6270b7646e140..0000000000000 --- a/apps/public-docsite/src/pages/Controls/SankeyChartPage/SankeyChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { SankeyChartPageProps } from './SankeyChartPage.doc'; - -export const SankeyChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts deleted file mode 100644 index e3b3e6ab14f4a..0000000000000 --- a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { SparklineChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/SparklineChart/SparklineChart.doc'; - -export const SparklineChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx b/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx deleted file mode 100644 index 0ca16380534d9..0000000000000 --- a/apps/public-docsite/src/pages/Controls/SparklineChartPage/SparklineChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { SparklineChartPageProps } from './SparklineChartPage.doc'; - -export const SparklineChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts deleted file mode 100644 index 8d61c3a8a2c22..0000000000000 --- a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { TreeChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/TreeChart/TreeChart.doc'; - -export const TreeChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx b/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx deleted file mode 100644 index 0c608d1d57546..0000000000000 --- a/apps/public-docsite/src/pages/Controls/TreeChartPage/TreeChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { TreeChartPageProps } from './TreeChartPage.doc'; - -export const TreeChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts deleted file mode 100644 index 48baaf893d075..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { GroupedVerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.doc'; - -export const GroupedVerticalBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'VerticalBarChart - Grouped', - url: 'grouped', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx deleted file mode 100644 index d28e6e3e21997..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/GroupedVerticalBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { GroupedVerticalBarChartPageProps } from './GroupedVerticalBarChartPage.doc'; - -export const GroupedVerticalBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts deleted file mode 100644 index cde767e2aca5c..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.doc.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { VerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; - -export const VerticalBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx deleted file mode 100644 index c4c0c07d95114..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { VerticalBarChartPageProps } from './VerticalBarChartPage.doc'; - -export const VerticalBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts deleted file mode 100644 index 3cecd0bfb29b6..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { VerticalBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalBarChart/VerticalBarChart.doc'; - -export const VerticalBarChartStandardPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'VerticalBarChart - Standard', - url: 'standard', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx deleted file mode 100644 index 76bb814c0d8a6..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalBarChartStandardPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { VerticalBarChartStandardPageProps } from './VerticalBarChartStandardPage.doc'; - -export const VerticalBarChartStandardPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts deleted file mode 100644 index 98b1b82604e86..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.doc.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { TFabricPlatformPageProps } from '../../../interfaces/Platforms'; -import { VerticalStackedBarChartPageProps as ExternalProps } from '@fluentui/react-examples/lib/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc'; - -export const VerticalStackedBarChartPageProps: TFabricPlatformPageProps = { - web: { - ...(ExternalProps as any), - title: 'VerticalBarChart - Stacked', - url: 'stacked', - }, -}; diff --git a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx b/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx deleted file mode 100644 index 9f69a4fb1c311..0000000000000 --- a/apps/public-docsite/src/pages/Controls/VerticalBarChartPage/VerticalStackedBarChartPage.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import * as React from 'react'; -import { ControlsAreaPage, IControlsPageProps } from '../ControlsAreaPage'; -import { VerticalStackedBarChartPageProps } from './VerticalStackedBarChartPage.doc'; - -export const VerticalStackedBarChartPage: React.FunctionComponent = props => { - const { platform } = props; - return ; -}; diff --git a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts index 54a432b0a63c2..1a096a6ada144 100644 --- a/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts +++ b/packages/react-monaco-editor/src/utilities/defaultSupportedPackages.ts @@ -79,7 +79,7 @@ if (typesContext) { hooksGroup.packages.push({ packageName: '@fluentui/react-hooks', loadTypes }); exampleDataGroup.packages.push({ packageName: '@fluentui/example-data', loadTypes }); } -if (true) { +if (typeof window === 'object' && window.location.href.indexOf('react-charting') !== -1) { chartingGroup.packages.push({ packageName: '@fluentui/react-charting', loadTypes }); } From 2ba5bdd9b54059251ca21cade19e8e4ef5f646b4 Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 21 Sep 2023 16:54:40 +0530 Subject: [PATCH 60/61] Add change file --- ...eact-charting-6d9067c6-ae93-4720-936c-9198d1bf5c14.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-6d9067c6-ae93-4720-936c-9198d1bf5c14.json diff --git a/change/@fluentui-react-charting-6d9067c6-ae93-4720-936c-9198d1bf5c14.json b/change/@fluentui-react-charting-6d9067c6-ae93-4720-936c-9198d1bf5c14.json new file mode 100644 index 0000000000000..ed10e21877969 --- /dev/null +++ b/change/@fluentui-react-charting-6d9067c6-ae93-4720-936c-9198d1bf5c14.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Prepare charting package for publishing to fluent docsite", + "packageName": "@fluentui/react-charting", + "email": "atishay.jain@microsoft.com", + "dependentChangeType": "patch" +} From a895d53167b865c8896b584839ac0c6af8c2d0ad Mon Sep 17 00:00:00 2001 From: "Atishay Jain (atisjai)" Date: Thu, 21 Sep 2023 21:05:54 +0530 Subject: [PATCH 61/61] Fix lint issue --- .../VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index a0ede01858322..11dfea2968d9e 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -6,7 +6,8 @@ import { VerticalStackedBarChartBasicExample } from './VerticalStackedBarChart.B import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart.Callout.Example'; //import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; -//import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; +//import { VerticalStackedBarChartCustomAccessibilityExample } +// from './VerticalStackedBarChart.CustomAccessibility.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx') as string;