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 00000000000000..ed10e218779696 --- /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" +} diff --git a/packages/react-charting/config/api-extractor.json b/packages/react-charting/config/api-extractor.json new file mode 100644 index 00000000000000..dd9d4b04ceb5a0 --- /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 00000000000000..e43d7459525c69 --- /dev/null +++ b/packages/react-charting/etc/react-charting.api.md @@ -0,0 +1,1518 @@ +## 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 +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 +export const DonutChart: React_2.FunctionComponent; + +// @public +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 +export const GroupedVerticalBarChart: React_2.FunctionComponent; + +// @public +export const HeatMapChart: React_2.FunctionComponent; + +// @public +export const HorizontalBarChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum HorizontalBarChartVariant { + // (undocumented) + AbsoluteScale = "absolute-scale", + // (undocumented) + PartToWhole = "part-to-whole" +} + +// @public +export const HorizontalBarChartWithAxis: React_2.FunctionComponent; + +// @public (undocumented) +export interface IAccessibilityProps { + ariaDescribedBy?: string; + ariaLabel?: string; + ariaLabelledBy?: string; +} + +// @public +export interface IAreaChartProps extends ICartesianChartProps { + culture?: string; + data: IChartProps; + enablePerfOptimization?: boolean; + 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; + secondaryYAxistitle?: string; + 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; + xAxisTitle?: string; + xMaxValue?: number; + yAxisTickCount?: number; + yAxisTickFormat?: any; + yAxisTitle?: string; + 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 { + axisTitle?: IStyle; + 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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +export interface ILineChartProps extends ICartesianChartProps { + allowMultipleShapesForPoints?: boolean; + // (undocumented) + colorFillBars?: IColorFillBarsProps[]; + culture?: string; + data: IChartProps; + enablePerfOptimization?: boolean; + 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[]; + enableFirstRenderOptimization?: boolean; + focusZoneDirection?: FocusZoneDirection; + // (undocumented) + getAxisData?: any; + getDomainMargins?: (containerWidth: number) => IMargins; + getGraphData?: any; + getmargins?: (margins: IMargins) => void; + isCalloutForStack?: boolean; + legendBars: JSX.Element | null; + 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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +export const LineChart: React_2.FunctionComponent; + +// @public +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 +export const PieChart: React_2.FunctionComponent; + +// @public +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 +export const Sparkline: React_2.FunctionComponent; + +// @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 +// +// @public (undocumented) +export const Textbox: React_2.FunctionComponent; + +// @public +export const TreeChart: React_2.FunctionComponent; + +// @public (undocumented) +export enum TreeTraverse { + levelOrder = 0, + preOrder = 1 +} + +// @public +export const VerticalBarChart: React_2.FunctionComponent; + +// @public +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 2f7a0dbd282d83..7ae1f12aaacfa6 100644 --- a/packages/react-charting/package.json +++ b/packages/react-charting/package.json @@ -31,6 +31,7 @@ "@fluentui/react": "*", "@types/react-addons-test-utils": "0.14.18", "@fluentui/jest-serializer-merge-styles": "*", + "@fluentui/scripts-api-extractor": "*", "@fluentui/scripts-jest": "*", "@fluentui/scripts-tasks": "*", "@fluentui/scripts-webpack": "*", diff --git a/packages/react-charting/src/components/AreaChart/AreaChart.tsx b/packages/react-charting/src/components/AreaChart/AreaChart.tsx index 4d892383ed215b..f15f1db0669457 100644 --- a/packages/react-charting/src/components/AreaChart/AreaChart.tsx +++ b/packages/react-charting/src/components/AreaChart/AreaChart.tsx @@ -5,6 +5,10 @@ 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 ead09c32f65d7a..8c7cc4d33ac8f0 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-charting/src/components/CommonComponents/CartesianChart.types.ts b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts index bc5677e02f4c0b..44ba758aea6434 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.types.ts @@ -529,7 +529,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/DonutChart/DonutChart.tsx b/packages/react-charting/src/components/DonutChart/DonutChart.tsx index c910f03dd81e59..fd381c1705b9f4 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 eba2b6ec1826c0..f666602961faaf 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 {} +/** + * IDonutChartProps for Donutchart component. + * {@docCategory DonutChart} + */ export interface IDonutChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx b/packages/react-charting/src/components/GaugeChart/GaugeChart.tsx index 3dc45bcfc9091a..21ab50320a4541 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 49a1456494c4f6..1137c490b34b43 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'; +/** + * IGaugeChartSegment interface for Gaugechart. + * {@docCategory GaugeChart} + */ export interface IGaugeChartSegment { /** * Legend text for a segment @@ -31,6 +35,10 @@ export enum GaugeValueFormat { Fraction = 'fraction', } +/** + * IGaugeChartProps for Gaugechart component. + * {@docCategory GaugeChart} + */ export interface IGaugeChartProps { /** * Width of the chart diff --git a/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx b/packages/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx index d2a6d2f8a12149..2b3100a99c6277 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 efb8118183149a..e580d75c132244 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'; +/** + * IGroupedVerticalBarChartProps for GroupedVerticalBarchart component. + * {@docCategory GroupedVerticalBarChart} + */ export interface IGroupedVerticalBarChartProps extends ICartesianChartProps { /** * chart title for the chart @@ -35,33 +39,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/HeatMapChart/HeatMapChart.ts b/packages/react-charting/src/components/HeatMapChart/HeatMapChart.ts index dca4ef637b800c..6cda1d9b8e18e9 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 3a9540a5de833f..ea7cd3fd8bed78 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'; +/** + * IHeatMapChartProps for 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 1f661c3f0441df..7b7988f85129f6 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 36197158dfcb92..059671c97b2062 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'; +/** + * IHorizontalBarChartProps for HorizontalBarchart component. + * {@docCategory HorizontalBarChart} + */ export interface IHorizontalBarChartProps { /** * An array of chart data points for the Horizontal bar chart @@ -67,7 +71,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/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx b/packages/react-charting/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx index fd4c19751574ec..5a115aae688301 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 764d054b29679f..5de50ef2630ae0 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'; +/** + * IHorizontalBarChartWithAxisProps for HorizontalBarchartWithAxis component. + * {@docCategory HorizontalBarChartWithAxis} + */ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/Legends/Legends.tsx b/packages/react-charting/src/components/Legends/Legends.tsx index 60a35304795700..4b6148429664cd 100644 --- a/packages/react-charting/src/components/Legends/Legends.tsx +++ b/packages/react-charting/src/components/Legends/Legends.tsx @@ -4,6 +4,10 @@ import { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.type import { LegendsBase } from './Legends.base'; import { getStyles } from './Legends.styles'; +/** + * Legends component. + * {@docCategory Legends} + */ 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 002654530ba0dc..ada8b08a636f19 100644 --- a/packages/react-charting/src/components/Legends/Legends.types.ts +++ b/packages/react-charting/src/components/Legends/Legends.types.ts @@ -6,16 +6,31 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet'; import { IFocusZoneProps } from '@fluentui/react-focus'; import { CustomPoints, Points } from '../../utilities/utilities'; +/** + * @public + * ILegendOverflowData interface. + * {@docCategory Legends} + */ export interface ILegendOverflowData { primary: ILegend[]; overflow?: ILegend[]; } +/** + * @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 @@ -68,6 +83,11 @@ export interface ILegendsStyles { subComponentStyles: ILegendSubComponentStyles; } +/** + * @public + * ILegendsStyles interface. + * {@docCategory Legends} + */ export interface ILegend { /** * Defines the title of the legend diff --git a/packages/react-charting/src/components/LineChart/LineChart.tsx b/packages/react-charting/src/components/LineChart/LineChart.tsx index 431062d970a372..03db6799f93470 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 LineChart} + */ 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 e711497447d93a..cdb19edbc5d803 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 LineChart} + */ export interface ILineChartProps extends ICartesianChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/PieChart/PieChart.tsx b/packages/react-charting/src/components/PieChart/PieChart.tsx index 1e6194078329f2..be9d54af4d556a 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 a85557bba767b3..8a611cfbcc9e20 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 {} +/** + * IPieChartProps for 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 d8f40441a8d6ed..276f6f7420fbbd 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 507c8eed959a93..f2193f0bbd6d06 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'; +/** + * ISankeyChartProps for Sankeychart component. + * {@docCategory SankeyChart} + */ export interface ISankeyChartProps { /** * Data to render in the chart. diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.tsx index e1b3f74ca0df7d..5247351bc48704 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 080e2755c1e8a4..638eb98cd1f48a 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 {} +/** + * ISparklineProps for 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 9a171b17873294..8de472c311df2c 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 7e4bd8a569155c..5d19142a79975a 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'; +/** + * IMultiStackedBarChartProps for 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 b78ba8c7d7753e..d507c15a664c14 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 4c271384f1a5e9..51db359ed381e0 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'; +/** + * IStackedBarChartProps for 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 c2c267afc1dabc..176192efc7fc7c 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 1217b914b0bd78..f8d25c8789e03b 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'; +/** + * ITreeChartDataPoint interface for Treechart component. + * {@docCategory TreeChart} + */ export interface ITreeChartDataPoint { /** * Node main text diff --git a/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.tsx index 8bbc224db18bcc..4065b60be0edb8 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 40718127f88693..094624c326a182 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'; +/** + * IVerticalBarChartProps for VerticalBarchart component. + * {@docCategory VerticalBarChart} + */ export interface IVerticalBarChartProps extends ICartesianChartProps { /** * Data to render in the chart. @@ -91,43 +95,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; diff --git a/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/react-charting/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx index d378075c2e2173..0617d0e3d0f47d 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 55a07eadc0b536..ab6b67f554d991 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'; +/** + * IVerticalStackedBarChartProps for VerticalStackedBarchart component. + * {@docCategory VerticalStackedBarChart} + */ export interface IVerticalStackedBarChartProps extends ICartesianChartProps { /** * Data to render in the chart. 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 47bfe5bfc6e7a6..cae5023e75426e 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'; import { Toggle } from '@fluentui/react/lib/Toggle'; @@ -57,37 +57,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, @@ -99,49 +99,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%', }, ]; @@ -149,7 +149,6 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt { legend: 'legend1', data: chart1Points, - color: '#0099BC', }, ]; @@ -199,7 +198,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) => @@ -208,7 +206,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 } @@ -225,7 +223,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) => @@ -234,7 +231,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 e28e39ea3764ad..eebe03f8a10998 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.color8, }, { legend: 'Second', data: chart2Points, - color: DefaultPalette.blueLight, + color: DataVizPalette.color9, }, { legend: 'Third', data: chart3Points, - color: DefaultPalette.blueDark, + 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 957072d33baf1f..462af1d2b8b425 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.color11, }, { legend: 'legend2', data: chart2Points, + color: DataVizPalette.color12, }, { legend: 'legend3', data: chart3Points, + color: DataVizPalette.color13, }, ]; @@ -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 d0d4ada55d0d6d..db255f6734e58f 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 2bfac9b1583143..4db024c8357007 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` }; 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 00000000000000..7b9d90efa19a03 --- /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 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'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index a765b77e831ba9..feec01b865e2bb 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'; @@ -65,49 +66,14 @@ 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. -

-
+ + {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/AreaChartBestPractices.md b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md new file mode 100644 index 00000000000000..ee640b1ce0f1de --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +AreaChart 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 00000000000000..5fc68f4b162785 --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/docs/AreaChartOverview.md @@ -0,0 +1,43 @@ +
+

+ 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. +

+
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 120593bff5ae6c..8e5faa562b0bb4 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 f1bd6e9cc2e95e..c588fbbfe8a64d 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) => { 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 00000000000000..8c00063b3f73f4 --- /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 DonutChartPageProps: 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/DonutChartPage.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx index 6de24b8d368678..09358f8e26112c 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 new file mode 100644 index 00000000000000..93c4396370ee69 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..14d7cebde58833 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md @@ -0,0 +1,17 @@ +
+

+ 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. +

+
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 00000000000000..625746bdde537d --- /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/GaugeChartPage.tsx b/packages/react-examples/src/react-charting/GaugeChart/GaugeChartPage.tsx index 510bad42a8f192..277a3d20d635e7 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 new file mode 100644 index 00000000000000..60233238469881 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..7011bcc4a4cf00 --- /dev/null +++ b/packages/react-examples/src/react-charting/GaugeChart/docs/GaugeChartOverview.md @@ -0,0 +1,40 @@ +
+

+ 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/GroupedVerticalBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Basic.Example.tsx index 1fe9892851a414..943bd52a58e053 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 @@ -1,6 +1,10 @@ import * as React from 'react'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; -import { GroupedVerticalBarChart, IGroupedVerticalBarChartProps } from '@fluentui/react-charting'; +import { + GroupedVerticalBarChart, + IGroupedVerticalBarChartProps, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; import { Checkbox } from '@fluentui/react/lib/Checkbox'; interface IGroupedBarChartState { @@ -46,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: DefaultPalette.blueLight, - legend: 'MetaData1', + color: getColorFromToken(DataVizPalette.color3), + legend: '2022', xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 44000, - color: DefaultPalette.blue, - legend: 'MetaData4', + color: getColorFromToken(DataVizPalette.color4), + legend: '2023', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '44%', }, ], }, { - name: 'Meta Data2', + name: 'Apr - Jun', series: [ { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, - legend: 'MetaData1', + color: getColorFromToken(DataVizPalette.color3), + legend: '2022', xAxisCalloutData: '2020/05/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 3000, - color: DefaultPalette.blue, - legend: 'MetaData4', + color: getColorFromToken(DataVizPalette.color4), + legend: '2023', xAxisCalloutData: '2020/05/30', yAxisCalloutData: '3%', }, @@ -89,42 +93,42 @@ export class GroupedVerticalBarChartBasicExample extends React.Component<{}, IGr }, { - name: 'Single line text ', + name: 'Jul - Sep', series: [ { key: 'series1', data: 14000, - color: DefaultPalette.blueLight, - legend: 'MetaData1', + color: getColorFromToken(DataVizPalette.color3), + legend: '2022', xAxisCalloutData: '2020/06/30', - yAxisCalloutData: '14%', + yAxisCalloutData: '13%', }, { key: 'series2', data: 50000, - color: DefaultPalette.blue, - legend: 'MetaData4', + color: getColorFromToken(DataVizPalette.color4), + legend: '2023', xAxisCalloutData: '2020/06/30', yAxisCalloutData: '50%', }, ], }, { - name: 'Hello World!!!', + name: 'Oct - Dec', series: [ { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, - legend: 'MetaData1', + color: getColorFromToken(DataVizPalette.color3), + legend: '2022', xAxisCalloutData: '2020/07/30', - yAxisCalloutData: '33%', + yAxisCalloutData: '29%', }, { key: 'series2', data: 3000, - color: DefaultPalette.blue, - legend: 'MetaData4', + color: getColorFromToken(DataVizPalette.color4), + legend: '2023', xAxisCalloutData: '2020/07/30', yAxisCalloutData: '3%', }, @@ -191,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 30a32084fa1ac9..f2ad5bb473af7f 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 @@ -1,9 +1,10 @@ import * as React from 'react'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; import { GroupedVerticalBarChart, IGroupedVerticalBarChartProps, IGroupedVerticalBarChartData, + DataVizPalette, + getColorFromToken, } from '@fluentui/react-charting'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; @@ -46,18 +47,18 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, + 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%', }, }, { key: 'series2', data: 44000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color11), legend: 'MetaData4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '44%', @@ -71,23 +72,23 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com }, }, { - name: 'Meta Data2', + name: 'Data Point2', series: [ { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, + 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%', }, }, { key: 'series2', data: 3000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color11), legend: 'MetaData4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '3%', @@ -106,18 +107,18 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com { key: 'series1', data: 14000, - color: DefaultPalette.blueLight, + 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%', }, }, { key: 'series2', data: 50000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color11), legend: 'MetaData4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '50%', @@ -136,18 +137,18 @@ export class GroupedVerticalBarChartCustomAccessibilityExample extends React.Com { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, + 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%', }, }, { key: 'series2', data: 3000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color11), legend: 'MetaData4', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '3%', diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx index 88c4d3efa083f7..1fe942bb185032 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx @@ -1,6 +1,10 @@ import * as React from 'react'; -import { GroupedVerticalBarChart, IGroupedVerticalBarChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + GroupedVerticalBarChart, + IGroupedVerticalBarChartProps, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; interface IGroupedBarChartState { width: number; @@ -36,21 +40,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG key: 'series1', data: 66, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color5), legend: 'MetaData1', }, { key: 'series2', data: 13, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color6), legend: 'MetaData2', }, { key: 'series3', data: 34, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color7), legend: 'MetaData3', }, ], @@ -62,21 +66,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG key: 'series1', data: 14, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color5), legend: 'MetaData1', }, { key: 'series2', data: 90, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color6), legend: 'MetaData2', }, { key: 'series3', data: 33, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color7), legend: 'MetaData3', }, ], @@ -88,21 +92,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG key: 'series1', data: 54, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color5), legend: 'MetaData1', }, { key: 'series2', data: 72, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueMid, + color: getColorFromToken(DataVizPalette.color6), legend: 'MetaData2', }, { key: 'series3', data: 18, xAxisCalloutData: '2020/04/30', - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color7), legend: 'MetaData3', }, ], diff --git a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx index 487abb250cafc9..469695fae9e5f7 100644 --- a/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Truncated.Example.tsx @@ -4,8 +4,10 @@ import { GroupedVerticalBarChart, IGroupedVerticalBarChartProps, IGVBarChartSeriesPoint, + DataVizPalette, + getColorFromToken, } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; + interface IGroupedBarChartState { width: number; height: number; @@ -39,7 +41,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{}, { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color8), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '33%', @@ -47,7 +49,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{}, { key: 'series2', data: 44000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color9), legend: 'MetaData2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '44%', @@ -60,7 +62,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{}, { key: 'series1', data: 33000, - color: DefaultPalette.blueLight, + color: getColorFromToken(DataVizPalette.color8), legend: 'MetaData1', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '33%', @@ -68,7 +70,7 @@ export class GroupedVerticalBarChartTruncatedExample extends React.Component<{}, { key: 'series2', data: 3000, - color: DefaultPalette.blue, + color: getColorFromToken(DataVizPalette.color9), legend: 'MetaData2', xAxisCalloutData: '2020/04/30', yAxisCalloutData: '3%', 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 00000000000000..63303d779518b1 --- /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/GroupedVerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChartPage.tsx index 3c52bf1a4f18fd..e334297f1ae7ed 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 new file mode 100644 index 00000000000000..4f714c6fb95d83 --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..947e8b198ffc51 --- /dev/null +++ b/packages/react-examples/src/react-charting/GroupedVerticalBarChart/docs/GroupedVerticalBarChartOverview.md @@ -0,0 +1,13 @@ +
+

+ 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. +

+
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 00000000000000..6f691d445ab30b --- /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/HeatMapChartBasic.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx index 6f0481e9018a27..74af2ea1cbfc96 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), + ]} enableReflow={true} /> diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartPage.tsx index 98f25ef1078521..b5723d86c159df 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 new file mode 100644 index 00000000000000..bb2bd454397a29 --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..abaf7fbb0c10cf --- /dev/null +++ b/packages/react-examples/src/react-charting/HeatMapChart/docs/HeatMapChartOverview.md @@ -0,0 +1,54 @@ +
+

+ 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. +

+
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 1a1f9bf3124ec9..1ad94e0118220c 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,12 @@ import * as React from 'react'; -import { ChartDataMode, HorizontalBarChart, IChartProps, IHorizontalBarChartProps } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { + ChartDataMode, + HorizontalBarChart, + IChartProps, + IHorizontalBarChartProps, + DataVizPalette, + getColorFromToken, +} from '@fluentui/react-charting'; import { Toggle } from '@fluentui/react/lib/Toggle'; interface IHorizontalBarChartState { @@ -36,7 +42,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'one', horizontalBarChartdata: { x: 1543, y: 15000 }, - color: DefaultPalette.tealDark, + color: getColorFromToken(DataVizPalette.color1), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '10%', }, @@ -48,7 +54,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'two', horizontalBarChartdata: { x: 800, y: 15000 }, - color: DefaultPalette.purple, + color: getColorFromToken(DataVizPalette.color2), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '5%', }, @@ -60,7 +66,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'three', horizontalBarChartdata: { x: 8888, y: 15000 }, - color: DefaultPalette.redDark, + color: getColorFromToken(DataVizPalette.color3), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '59%', }, @@ -72,7 +78,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'four', horizontalBarChartdata: { x: 15888, y: 15000 }, - color: DefaultPalette.themeDarkAlt, + color: getColorFromToken(DataVizPalette.color4), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '105%', }, @@ -84,7 +90,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'five', horizontalBarChartdata: { x: 11444, y: 15000 }, - color: DefaultPalette.themePrimary, + color: getColorFromToken(DataVizPalette.color5), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '76%', }, @@ -96,7 +102,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'six', horizontalBarChartdata: { x: 14000, y: 15000 }, - color: DefaultPalette.greenDark, + color: getColorFromToken(DataVizPalette.color6), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '93%', }, @@ -108,7 +114,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { legend: 'seven', horizontalBarChartdata: { x: 9855, y: 15000 }, - color: DefaultPalette.accent, + color: getColorFromToken(DataVizPalette.color7), xAxisCalloutData: '2020/04/30', yAxisCalloutData: '65%', }, @@ -120,7 +126,7 @@ export class HorizontalBarChartBasicExample extends React.Component< { 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 2ae85e71fe738b..970656b8a1c13a 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 ccb280401020e0..aefc6a8fa3aa88 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 f44f7545fb0ce1..12d8fbaf48da13 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,9 +20,9 @@ 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', + yAxisCalloutData: '1.5K', }, ], }, @@ -26,9 +32,9 @@ 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', + yAxisCalloutData: '800', }, ], }, @@ -38,9 +44,9 @@ 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', + yAxisCalloutData: '8.8K', }, ], }, @@ -50,9 +56,9 @@ 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', + yAxisCalloutData: '16K', }, ], }, @@ -62,9 +68,9 @@ 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', + yAxisCalloutData: '11K', }, ], }, @@ -74,9 +80,9 @@ 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', + yAxisCalloutData: '14K', }, ], }, @@ -86,9 +92,9 @@ 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', + yAxisCalloutData: '9.9K', }, ], }, @@ -98,9 +104,9 @@ 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', + yAxisCalloutData: '4.3K', }, ], }, 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 b8264550363aa2..bfbba8456caeb4 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/HorizontalBarChart/HorizontalBarChart.doc.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx new file mode 100644 index 00000000000000..0187f1fb900df3 --- /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/HorizontalBarChartPage.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx index 6c08c6361bfd8f..6a05e30ab46db4 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 new file mode 100644 index 00000000000000..5bc8b76309a15e --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..f6ed14840b7379 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/docs/HorizontalBarChartOverview.md @@ -0,0 +1,32 @@ +
+

+ 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. +

+
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 1a1bf255a52c3b..f89fb87dfc8dea 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 8c09f2938e87e2..d64fbe58d8a398 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 8502e2ecdae31e..2a16465fd70054 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/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.doc.tsx new file mode 100644 index 00000000000000..11b8ce241173b7 --- /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/HorizontalBarChartWithAxisPage.tsx b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/HorizontalBarChartWithAxisPage.tsx index 5983118433ea41..f60e805e634d52 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 new file mode 100644 index 00000000000000..87298428eb4c4d --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..cf0133b4a742c8 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChartWithAxis/docs/HorizontalBarChartWithAxisOverview.md @@ -0,0 +1,26 @@ +
+

+ 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. +

+
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 3c068b2a9ed4d3..f31bcbff38f7fd 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 1363e5f60f05be..0bcea062eaa8a7 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 9bafca6b7d2396..a6a2737c22e501 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,5 +1,5 @@ import * as React from 'react'; -import { ILegend, Legends } from '@fluentui/react-charting'; +import { ILegend, Legends, DataVizPalette, getColorFromToken } from '@fluentui/react-charting'; import { DefaultPalette, FontWeights } from '@fluentui/react/lib/Styling'; export class LegendStyledExample extends React.Component<{}, {}> { @@ -7,71 +7,71 @@ export class LegendStyledExample extends React.Component<{}, {}> { 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/Legends/Legends.doc.tsx b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx new file mode 100644 index 00000000000000..807597849769d7 --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/Legends.doc.tsx @@ -0,0 +1,49 @@ +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', + componentName: 'Legends', + componentUrl: 'https://github.com/microsoft/fluentui/tree/master/packages/react-charting/src/components/Legends', + examples: [ + { + title: 'Legends basic', + 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'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx b/packages/react-examples/src/react-charting/Legends/LegendsPage.tsx index d1932eb918dacf..d5b3e98f8d009d 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/LegendsBestPractices.md b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md new file mode 100644 index 00000000000000..c774b97f517c53 --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..2b7925ee7765bf --- /dev/null +++ b/packages/react-examples/src/react-charting/Legends/docs/LegendsOverview.md @@ -0,0 +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. +

+
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 ba91d059fdc97c..93e51ca6faf69c 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 { @@ -92,7 +91,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt onDataPointClick: () => alert('click on 218000'), }, ], - color: DefaultPalette.blue, + color: DataVizPalette.color3, lineOptions: { lineBorderWidth: '4', }, @@ -130,7 +129,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt y: 298000, }, ], - color: DefaultPalette.green, + color: DataVizPalette.color4, lineOptions: { lineBorderWidth: '4', }, @@ -139,11 +138,11 @@ 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: 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 3f685e2f2adfed..34f242e1cfc13c 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 0f86f179ca3ae4..049dacd7151fcc 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 0e01e45acfbd2c..7d2eb4eb1d4b5e 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 d1ede8341c66b3..fcdab9b61c5389 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.Multiple.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Multiple.Example.tsx index 07d9eb6db8db5f..c1e62aa1150dea 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/LineChart/LineChart.Styled.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Styled.Example.tsx index 9710ce7e99b860..bc2d4dea053b65 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, }, ]; 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 00000000000000..2c8ee7f12a41d0 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx @@ -0,0 +1,76 @@ +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'), + 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 de4ed71eae0520..ed37c728cf35ee 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'; @@ -79,71 +80,29 @@ 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. -

-
+ + {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 00000000000000..ccc3df942259d6 --- /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/LineChartBestPractices.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartBestPractices.md new file mode 100644 index 00000000000000..9881deee2a8c2a --- /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/LineChartDonts.md b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDonts.md new file mode 100644 index 00000000000000..0862bff3f602f0 --- /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 00000000000000..8444f381d03d75 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/docs/LineChartDos.md @@ -0,0 +1,4 @@ +- Do1 +- Do2 +- Do3 +- Do4 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 00000000000000..20ea131f4f6322 --- /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. +

+
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 00000000000000..2274c4c0bee725 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.doc.tsx @@ -0,0 +1,42 @@ +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'; + +//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/MultiStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartPage.tsx index c83c24cad82e0d..d513fe4a397584 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 { MultiStackedBarChartBasicExample } 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 new file mode 100644 index 00000000000000..59f36a547e22d0 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..331a62db42e5b7 --- /dev/null +++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/docs/MultiStackedBarChartOverview.md @@ -0,0 +1,35 @@ +
+

+ 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/PieChart.doc.tsx b/packages/react-examples/src/react-charting/PieChart/PieChart.doc.tsx new file mode 100644 index 00000000000000..b71b4158d298a3 --- /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/PieChartPage.tsx b/packages/react-examples/src/react-charting/PieChart/PieChartPage.tsx index fc045694c0f35f..c861c672a7f1a6 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 new file mode 100644 index 00000000000000..f8da27b9ac64fb --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..5a9cefe420031a --- /dev/null +++ b/packages/react-examples/src/react-charting/PieChart/docs/PieChartOverview.md @@ -0,0 +1,5 @@ +
+

+ Pie Chart needs documentation. +

+
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 91704be547f54f..1adc4f7d4e9af3 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, }; } @@ -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, 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 66dbc861278b13..612fd31bd4ee8f 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/SankeyChart/SankeyChart.doc.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChart.doc.tsx new file mode 100644 index 00000000000000..ffd93a84215bee --- /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/SankeyChartPage.tsx b/packages/react-examples/src/react-charting/SankeyChart/SankeyChartPage.tsx index 718ecea755dbd5..adc4543120386f 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 new file mode 100644 index 00000000000000..3605ab0e5f5f95 --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..b3e549f1f4bf50 --- /dev/null +++ b/packages/react-examples/src/react-charting/SankeyChart/docs/SankeyChartOverview.md @@ -0,0 +1,8 @@ +
+

+ 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/SparklineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.Basic.Example.tsx index ee72ec1a2f38a4..17f82f98e7a030 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/SparklineChart/SparklineChart.doc.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChart.doc.tsx new file mode 100644 index 00000000000000..94be88fcffb805 --- /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/SparklineChartPage.tsx b/packages/react-examples/src/react-charting/SparklineChart/SparklineChartPage.tsx index 1df259ebaa02d5..3a94d40a07dbad 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 new file mode 100644 index 00000000000000..5846efdec791cc --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..5de1b0f043f5ad --- /dev/null +++ b/packages/react-examples/src/react-charting/SparklineChart/docs/SparklineChartOverview.md @@ -0,0 +1,7 @@ +
+

+ 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/StackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.Basic.Example.tsx index 8b9e6488cbac94..73a73367b0609a 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 9e5786d20a9a02..49f4afbf4fcf69 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/StackedBarChart/StackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx new file mode 100644 index 00000000000000..bce75ea67e60e5 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChart.doc.tsx @@ -0,0 +1,66 @@ +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'; +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/StackedBarChartPage.tsx b/packages/react-examples/src/react-charting/StackedBarChart/StackedBarChartPage.tsx index cbc6c51d6bc0a3..86ccb4d0e7c2ad 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 new file mode 100644 index 00000000000000..4c78f6a358b6e6 --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..677564f5b6da6b --- /dev/null +++ b/packages/react-examples/src/react-charting/StackedBarChart/docs/StackedBarChartOverview.md @@ -0,0 +1,68 @@ +
+

+ 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/TreeChart.doc.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx new file mode 100644 index 00000000000000..b24f5fd38ac75f --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.doc.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; + +import { IDocPageProps } from '@fluentui/react/lib/common/DocPage.types'; + +import { TreeChartTwoLayerExample } from './TreeChart.TwoLayer.Example'; +import { TreeChartThreeLayerLongExample } from './TreeChart.ThreeLayerLong.Example'; +import { TreeChartThreeLayerCompactExample } from './TreeChart.ThreeLayerCompact.Example'; +import { TreeChartThreeLayerExample } from './TreeChart.ThreeLayer.Example'; + +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/TreeChartPage.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChartPage.tsx index 1a2bb53dad4e02..f2e8dc1c925cb4 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 new file mode 100644 index 00000000000000..9d1fd7e0e75888 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..e0ba7824bf1b12 --- /dev/null +++ b/packages/react-examples/src/react-charting/TreeChart/docs/TreeChartOverview.md @@ -0,0 +1,25 @@ +
+

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 +

+
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 2bc92c2773e39e..97576367564442 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 @@ -75,10 +75,10 @@ export class VerticalBarChartBasicExample extends React.Component, + }, + { + 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/VerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx index 40498c9b9b464a..6d0888915d2966 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'; @@ -68,37 +69,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 new file mode 100644 index 00000000000000..1a40567a85490a --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..7e54bfc2fc0434 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/docs/VerticalBarChartOverview.md @@ -0,0 +1,31 @@ +
+

+ 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. +

+
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx index c92dbd607f19d3..fa888e82bbe441 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx @@ -88,21 +88,21 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe data: 40, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '61%', }, { legend: 'Metadata2', data: 5, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '8%', }, { legend: 'Metadata3', data: 20, color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', + yAxisCalloutData: '31%', }, ]; @@ -112,21 +112,21 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe data: 30, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', + yAxisCalloutData: '33%', }, { legend: 'Metadata2', data: 20, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', + yAxisCalloutData: '22%', }, { legend: 'Metadata3', data: 40, color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '45%', }, ]; @@ -136,14 +136,14 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe data: 44, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '43%', }, { legend: 'Metadata2', data: 28, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '28%', + yAxisCalloutData: '27%', }, { legend: 'Metadata3', @@ -160,21 +160,21 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe data: 88, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '88%', + yAxisCalloutData: '63%', }, { legend: 'Metadata2', data: 22, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '22%', + yAxisCalloutData: '16%', }, { legend: 'Metadata3', data: 30, color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', + yAxisCalloutData: '21%', }, ]; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx index a12523dd24a09f..673c99392a0638 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx @@ -48,7 +48,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 40, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '61%', callOutAccessibilityData: { ariaLabel: 'Bar series 1-1 of 4, 2020/04/30 40%' }, }, { @@ -56,7 +56,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 5, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '5%', + yAxisCalloutData: '8%', callOutAccessibilityData: { ariaLabel: 'Bar series 1-2 of 4, 2020/04/30 5%' }, }, { @@ -64,7 +64,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 20, color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', + yAxisCalloutData: '31%', callOutAccessibilityData: { ariaLabel: 'Bar series 1-3 of 4, 2020/04/30 20%' }, }, ]; @@ -75,7 +75,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 30, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', + yAxisCalloutData: '33%', callOutAccessibilityData: { ariaLabel: 'Bar series 2-1 of 4, 2020/04/30 30%' }, }, { @@ -83,7 +83,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 20, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', + yAxisCalloutData: '22%', callOutAccessibilityData: { ariaLabel: 'Bar series 2-2 of 4, 2020/04/30 20%' }, }, { @@ -91,7 +91,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 40, color: DefaultPalette.blueLight, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', + yAxisCalloutData: '45%', callOutAccessibilityData: { ariaLabel: 'Bar series 2-3 of 4, 2020/04/30 40%' }, }, ]; @@ -102,7 +102,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 44, color: DefaultPalette.blue, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '44%', + yAxisCalloutData: '43%', callOutAccessibilityData: { ariaLabel: 'Bar series 3-1 of 4, 2020/04/30 44%' }, }, { @@ -110,7 +110,7 @@ export class VerticalStackedBarChartCustomAccessibilityExample extends React.Com data: 28, color: DefaultPalette.blueMid, xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '28%', + yAxisCalloutData: '27%', callOutAccessibilityData: { ariaLabel: 'Bar series 3-2 of 4, 2020/04/30 28%' }, }, { 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 6c48224a842545..8d5ddcd722a095 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[] = [ 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 00000000000000..11dfea2968d9e3 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -0,0 +1,59 @@ +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'; +//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: , + }, + /*{ ToDo - Fix this example + title: 'VerticalStackedBarChart tooltip', + code: VerticalBarChartTooltipExampleCode, + view: , + }, + { + 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'), + isHeaderVisible: true, + isFeedbackVisible: true, +}; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx index 4ff815ce6b9c6d..754924e881ae59 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 new file mode 100644 index 00000000000000..cce0040af9c3fd --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartBestPractices.md @@ -0,0 +1,3 @@ +### Content + +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 new file mode 100644 index 00000000000000..b41aab38050a1a --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/docs/VerticalStackedBarChartOverview.md @@ -0,0 +1,30 @@ +
+

+ 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. +

+