From a9e51390e56b6e0885992e18d902fa5627aeb85c Mon Sep 17 00:00:00 2001 From: srmukher Date: Fri, 22 Sep 2023 15:34:22 +0530 Subject: [PATCH 1/5] Adding axis title examples for line, area, vertical bar and vertical stacked bar charts --- .../CommonComponents/CartesianChart.base.tsx | 39 +++ .../AreaChart/AreaChart.AxisTitle.Example.tsx | 221 ++++++++++++++ .../AreaChart/AreaChartPage.tsx | 6 + .../LineChart/LineChart.AxisTitle.Example.tsx | 209 +++++++++++++ .../LineChart/LineChart.Basic.Example.tsx | 2 + .../LineChart/LineChartPage.tsx | 6 + .../VerticalBarChart.AxisTitle.Example.tsx | 27 +- ...ticalStackedBarChart.AxisTitle.Example.tsx | 284 ++++++++++++++++++ 8 files changed, 788 insertions(+), 6 deletions(-) create mode 100644 packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx create mode 100644 packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index f914d3e52e5be..1aff3ba31d843 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -163,6 +163,45 @@ export class CartesianChartBase extends React.Component): boolean { + let isUpdate: boolean = false; + if (nextProps.xAxisTitle === undefined && nextProps.yAxisTitle === undefined) { + this.margins = { + top: nextProps.margins?.top ?? 20, + bottom: nextProps.margins?.bottom ?? 35, + right: this._isRtl + ? nextProps.margins?.left ?? 40 + : nextProps.margins?.right ?? nextProps?.secondaryYScaleOptions + ? 40 + : 20, + left: this._isRtl + ? nextProps.margins?.right ?? nextProps?.secondaryYScaleOptions + ? 40 + : 20 + : nextProps.margins?.left ?? 40, + }; + isUpdate = true; + } + if (nextProps.xAxisTitle !== undefined && nextProps.xAxisTitle !== '') { + this.margins.bottom! = nextProps.margins?.bottom ?? 55; + isUpdate = true; + } + if (nextProps.yAxisTitle !== undefined && nextProps.yAxisTitle !== '') { + this.margins.left! = this._isRtl + ? nextProps.margins?.right ?? nextProps?.secondaryYAxistitle + ? 60 + : 40 + : nextProps.margins?.left ?? 60; + this.margins.right! = this._isRtl + ? nextProps.margins?.left ?? 60 + : nextProps.margins?.right ?? nextProps?.secondaryYAxistitle + ? 60 + : 40; + isUpdate = true; + } + return isUpdate; + } + public componentDidUpdate(prevProps: IModifiedCartesianChartProps): void { if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) { this._fitParentContainer(); diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx new file mode 100644 index 0000000000000..9a4b36f7a3169 --- /dev/null +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx @@ -0,0 +1,221 @@ +import * as React from 'react'; +import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting'; +import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting'; +import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; +import { Toggle } from '@fluentui/react/lib/Toggle'; + +interface IAreaChartBasicState { + width: number; + height: number; + isCalloutselected: boolean; + showAxisTitles: boolean; +} + +const options: IChoiceGroupOption[] = [ + { key: 'basicExample', text: 'Basic Example' }, + { key: 'calloutExample', text: 'Custom Callout Example' }, +]; + +export class AreaChartAxisTitleExample extends React.Component<{}, IAreaChartBasicState> { + constructor(props: IAreaChartProps) { + super(props); + this.state = { + width: 700, + height: 300, + isCalloutselected: false, + showAxisTitles: true, + }; + } + + public render(): JSX.Element { + return
{this._basicExample()}
; + } + + private _onWidthChange = (e: React.ChangeEvent) => { + this.setState({ width: parseInt(e.target.value, 10) }); + }; + private _onHeightChange = (e: React.ChangeEvent) => { + this.setState({ height: parseInt(e.target.value, 10) }); + }; + + private _onChange = (ev: React.FormEvent, option: IChoiceGroupOption): void => { + if (this.state.isCalloutselected) { + this.setState({ isCalloutselected: false }); + } else { + this.setState({ isCalloutselected: true }); + } + }; + + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; + + private _basicExample(): JSX.Element { + const chart1Points = [ + { + x: 20, + y: 7000, + xAxisCalloutData: '2018/01/01', + yAxisCalloutData: '10%', + }, + { + x: 25, + y: 9000, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 30, + y: 13000, + xAxisCalloutData: '2018/01/28', + yAxisCalloutData: '24%', + }, + { + x: 35, + y: 15000, + xAxisCalloutData: '2018/02/01', + yAxisCalloutData: '25%', + }, + { + x: 40, + y: 11000, + xAxisCalloutData: '2018/03/01', + yAxisCalloutData: '15%', + }, + { + x: 45, + y: 8760, + xAxisCalloutData: '2018/03/15', + yAxisCalloutData: '30%', + }, + { + x: 50, + y: 3500, + xAxisCalloutData: '2018/03/28', + yAxisCalloutData: '18%', + }, + { + x: 55, + y: 20000, + xAxisCalloutData: '2018/04/04', + yAxisCalloutData: '32%', + }, + { + x: 60, + y: 17000, + xAxisCalloutData: '2018/04/15', + yAxisCalloutData: '29%', + }, + { + x: 65, + y: 1000, + xAxisCalloutData: '2018/05/05', + yAxisCalloutData: '43%', + }, + { + x: 70, + y: 12000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + { + x: 75, + y: 6876, + xAxisCalloutData: '2018/01/15', + yAxisCalloutData: '18%', + }, + { + x: 80, + y: 12000, + xAxisCalloutData: '2018/04/30', + yAxisCalloutData: '55%', + }, + { + x: 85, + y: 7000, + xAxisCalloutData: '2018/05/04', + yAxisCalloutData: '12%', + }, + { + x: 90, + y: 10000, + xAxisCalloutData: '2018/06/01', + yAxisCalloutData: '45%', + }, + ]; + + const chartPoints = [ + { + legend: 'legend1', + data: chart1Points, + color: '#0099BC', + }, + ]; + + const chartData = { + chartTitle: 'Area chart basic example', + lineChartData: chartPoints, + }; + + const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; + + return ( + <> + + + + + + + +
+ + props && this.state.isCalloutselected ? ( + + ) : null + } + yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined} + xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined} + /> +
+ + ); + } +} diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index a765b77e831ba..ba0c879fc09f8 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx @@ -13,6 +13,7 @@ import { AreaChartStyledExample } from './AreaChart.Styled.Example'; import { AreaChartCustomAccessibilityExample } from './AreaChart.CustomAccessibility.Example'; import { AreaChartLargeDataExample } from './AreaChart.LargeData.Example'; import { AreaChartDataChangeExample } from './AreaChart.DataChange.Example'; +import { AreaChartAxisTitleExample } from './AreaChart.AxisTitle.Example'; const AreaChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx') as string; @@ -26,6 +27,8 @@ const AreaChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx') as string; const AreaChartDataChangeExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx') as string; +const AreaChartAxisTitleExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx') as string; export class AreaChart extends React.Component { public render(): JSX.Element { @@ -53,6 +56,9 @@ export class AreaChart extends React.Component { + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx new file mode 100644 index 0000000000000..8d91669dfa686 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx @@ -0,0 +1,209 @@ +import * as React from 'react'; +import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Toggle } from '@fluentui/react/lib/Toggle'; + +interface ILineChartBasicState { + width: number; + height: number; + allowMultipleShapes: boolean; + showAxisTitles: boolean; +} + +export class LineChartAxisTitleExample extends React.Component<{}, ILineChartBasicState> { + constructor(props: ILineChartProps) { + super(props); + this.state = { + width: 650, + height: 350, + allowMultipleShapes: false, + showAxisTitles: true, + }; + } + + public render(): JSX.Element { + return
{this._basicExample()}
; + } + + private _onWidthChange = (e: React.ChangeEvent) => { + this.setState({ width: parseInt(e.target.value, 10) }); + }; + private _onHeightChange = (e: React.ChangeEvent) => { + this.setState({ height: parseInt(e.target.value, 10) }); + }; + private _onShapeChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ allowMultipleShapes: checked }); + }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; + + private _basicExample(): JSX.Element { + const data: IChartProps = { + chartTitle: 'Line Chart', + lineChartData: [ + { + legend: 'From_Legacy_to_O365', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 216000, + onDataPointClick: () => alert('click on 217000'), + }, + { + x: new Date('2020-03-03T10:00:00.000Z'), + y: 218123, + onDataPointClick: () => alert('click on 217123'), + }, + { + x: new Date('2020-03-03T11:00:00.000Z'), + y: 217124, + onDataPointClick: () => alert('click on 217124'), + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 248000, + onDataPointClick: () => alert('click on 248000'), + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 252000, + onDataPointClick: () => alert('click on 252000'), + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 274000, + onDataPointClick: () => alert('click on 274000'), + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 260000, + onDataPointClick: () => alert('click on 260000'), + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 304000, + onDataPointClick: () => alert('click on 300000'), + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 218000, + onDataPointClick: () => alert('click on 218000'), + }, + ], + color: DefaultPalette.blue, + lineOptions: { + lineBorderWidth: '4', + }, + onLineClick: () => console.log('From_Legacy_to_O365'), + }, + { + legend: 'All', + data: [ + { + x: new Date('2020-03-03T00:00:00.000Z'), + y: 297000, + }, + { + x: new Date('2020-03-04T00:00:00.000Z'), + y: 284000, + }, + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + { + x: new Date('2020-03-06T00:00:00.000Z'), + y: 294000, + }, + { + x: new Date('2020-03-07T00:00:00.000Z'), + y: 224000, + }, + { + x: new Date('2020-03-08T00:00:00.000Z'), + y: 300000, + }, + { + x: new Date('2020-03-09T00:00:00.000Z'), + y: 298000, + }, + ], + color: DefaultPalette.green, + lineOptions: { + lineBorderWidth: '4', + }, + }, + { + legend: 'single point', + data: [ + { + x: new Date('2020-03-05T00:00:00.000Z'), + y: 282000, + }, + ], + color: DefaultPalette.yellow, + }, + ], + }; + + const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; + + return ( + <> + + + + + + +
+ +
+ + ); + } +} diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx index 32f2706cbed8c..bc81937458385 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 @@ -187,6 +187,8 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt xAxisTickCount={10} allowMultipleShapesForPoints={this.state.allowMultipleShapes} enablePerfOptimization={true} + yAxisTitle="Different categories of mail flow" + xAxisTitle="Values of each category" /> diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index de4ed71eae052..84d9ed208cf0d 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -15,6 +15,7 @@ import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibi import { LineChartGapsExample } from './LineChart.Gaps.Example'; import { LineChartLargeDataExample } from './LineChart.LargeData.Example'; import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; +import { LineChartAxisTitleExample } from './LineChart.AxisTitle.Example'; const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; @@ -32,6 +33,8 @@ const LineChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx') as string; const LineChartCustomLocaleDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx') as string; +const LineChartAxisTitleExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx') as string; // All line charts locale is impacted. @@ -67,6 +70,9 @@ export class LineChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx index 3a794b6672086..40ceff768ac28 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx @@ -9,6 +9,7 @@ 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'; +import { Toggle } from '@fluentui/react/lib/Toggle'; interface IVerticalChartState { width: number; @@ -16,6 +17,7 @@ interface IVerticalChartState { isCalloutselected: boolean; useSingleColor: boolean; hideLabels: boolean; + showAxisTitles: boolean; } const options: IChoiceGroupOption[] = [ @@ -32,6 +34,7 @@ export class VerticalBarChartAxisTitleExample extends React.Component, checked: boolean) => { this.setState({ hideLabels: checked }); }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; private _basicExample(): JSX.Element { const points: IVerticalBarChartDataPoint[] = [ @@ -192,26 +199,34 @@ export class VerticalBarChartAxisTitleExample extends React.Component +
, ) => (props ? defaultRender(props) : null), })} - hideLabels={this.state.hideLabels} />
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx new file mode 100644 index 0000000000000..2c3419d783cca --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx @@ -0,0 +1,284 @@ +import * as React from 'react'; +import { + IVSChartDataPoint, + IVerticalStackedChartProps, + VerticalStackedBarChart, + ILineChartLineOptions, +} from '@fluentui/react-charting'; +import { DefaultPalette } from '@fluentui/react/lib/Styling'; +import { Checkbox } from '@fluentui/react/lib/Checkbox'; +import { Toggle } from '@fluentui/react/lib/Toggle'; + +interface IVerticalStackedBarState { + width: number; + height: number; + barGapMax: number; + showLine: boolean; + hideLabels: boolean; + showAxisTitles: boolean; +} + +export class VerticalStackedBarChartAxisTitleExample extends React.Component<{}, IVerticalStackedBarState> { + constructor(props: IVerticalStackedChartProps) { + super(props); + this.state = { + width: 650, + height: 350, + showLine: true, + barGapMax: 2, + hideLabels: false, + showAxisTitles: true, + }; + } + public render(): JSX.Element { + return
{this._basicExample()}
; + } + + private _onWidthChange = (e: React.ChangeEvent) => { + this.setState({ width: parseInt(e.target.value, 10) }); + }; + private _onHeightChange = (e: React.ChangeEvent) => { + this.setState({ height: parseInt(e.target.value, 10) }); + }; + + private _onShowLineChange = (ev: React.FormEvent, checked: boolean): void => { + this.setState({ showLine: checked }); + }; + private _onHideLabelsCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ hideLabels: checked }); + }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; + + private _basicExample(): JSX.Element { + const { showLine } = this.state; + const firstChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 40, + color: DefaultPalette.blue, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '40%', + }, + { + legend: 'Metadata2', + data: 5, + color: DefaultPalette.blueMid, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '5%', + }, + { + legend: 'Metadata3', + data: 20, + color: DefaultPalette.blueLight, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '20%', + }, + ]; + + const secondChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 30, + color: DefaultPalette.blue, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + { + legend: 'Metadata2', + data: 20, + color: DefaultPalette.blueMid, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '20%', + }, + { + legend: 'Metadata3', + data: 40, + color: DefaultPalette.blueLight, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '40%', + }, + ]; + + const thirdChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 44, + color: DefaultPalette.blue, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '44%', + }, + { + legend: 'Metadata2', + data: 28, + color: DefaultPalette.blueMid, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '28%', + }, + { + legend: 'Metadata3', + data: 30, + color: DefaultPalette.blueLight, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + ]; + + const fourthChartPoints: IVSChartDataPoint[] = [ + { + legend: 'Metadata1', + data: 88, + color: DefaultPalette.blue, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '88%', + }, + { + legend: 'Metadata2', + data: 22, + color: DefaultPalette.blueMid, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '22%', + }, + { + legend: 'Metadata3', + data: 30, + color: DefaultPalette.blueLight, + xAxisCalloutData: '2020/04/30', + yAxisCalloutData: '30%', + }, + ]; + + const data: IVerticalStackedChartProps[] = [ + { + chartData: firstChartPoints, + xAxisPoint: 0, + + ...(showLine && { + lineData: [ + { y: 42, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: secondChartPoints, + xAxisPoint: 20, + ...(showLine && { + lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], + }), + }, + { + chartData: thirdChartPoints, + xAxisPoint: 40, + ...(showLine && { + lineData: [ + { y: 60, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 20, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: firstChartPoints, + xAxisPoint: 60, + ...(showLine && { + lineData: [ + { y: 41, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: fourthChartPoints, + xAxisPoint: 80, + ...(showLine && { + lineData: [ + { y: 100, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, + { y: 70, legend: 'Recommended Builds', color: DefaultPalette.redDark }, + ], + }), + }, + { + chartData: firstChartPoints, + xAxisPoint: 100, + }, + ]; + + const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' }; + + const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; + + return ( + <> + + + + + + this.setState({ barGapMax: +e.target.value })} + aria-valuetext={`ChangebarGapMaxSlider${this.state.barGapMax}`} + /> + + + +
+ +
+ + ); + } +} From 5e525ffb36b56f053cf51304bc0f26f48eae4c95 Mon Sep 17 00:00:00 2001 From: srmukher Date: Fri, 22 Sep 2023 15:35:02 +0530 Subject: [PATCH 2/5] Adding change file --- ...eact-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json diff --git a/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json b/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json new file mode 100644 index 0000000000000..79bc831e69012 --- /dev/null +++ b/change/@fluentui-react-charting-39bea296-8396-427f-9f9e-f0f0bc1d627a.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Adding axis title examples for line, area, vertical bar and vertical stacked bar charts", + "packageName": "@fluentui/react-charting", + "email": "srmukher@microsoft.com", + "dependentChangeType": "none" +} From 35d95a942141f676706d5bdcfdaa5ffd1544779e Mon Sep 17 00:00:00 2001 From: srmukher Date: Tue, 26 Sep 2023 17:36:20 +0530 Subject: [PATCH 3/5] Adding axis title within basic chart example --- .../AreaChart/AreaChart.AxisTitle.Example.tsx | 221 -------------- .../AreaChart/AreaChart.Basic.Example.tsx | 18 ++ .../LineChart/LineChart.AxisTitle.Example.tsx | 209 ------------- .../LineChart/LineChart.Basic.Example.tsx | 20 +- .../VerticalBarChart.AxisTitle.Example.tsx | 236 --------------- .../VerticalBarChart.Basic.Example.tsx | 17 ++ ...ticalStackedBarChart.AxisTitle.Example.tsx | 284 ------------------ .../VerticalStackedBarChart.Basic.Example.tsx | 17 ++ 8 files changed, 68 insertions(+), 954 deletions(-) delete mode 100644 packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx delete mode 100644 packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx delete mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx delete mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx deleted file mode 100644 index 9a4b36f7a3169..0000000000000 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx +++ /dev/null @@ -1,221 +0,0 @@ -import * as React from 'react'; -import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting'; -import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting'; -import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; -import { Toggle } from '@fluentui/react/lib/Toggle'; - -interface IAreaChartBasicState { - width: number; - height: number; - isCalloutselected: boolean; - showAxisTitles: boolean; -} - -const options: IChoiceGroupOption[] = [ - { key: 'basicExample', text: 'Basic Example' }, - { key: 'calloutExample', text: 'Custom Callout Example' }, -]; - -export class AreaChartAxisTitleExample extends React.Component<{}, IAreaChartBasicState> { - constructor(props: IAreaChartProps) { - super(props); - this.state = { - width: 700, - height: 300, - isCalloutselected: false, - showAxisTitles: true, - }; - } - - public render(): JSX.Element { - return
{this._basicExample()}
; - } - - private _onWidthChange = (e: React.ChangeEvent) => { - this.setState({ width: parseInt(e.target.value, 10) }); - }; - private _onHeightChange = (e: React.ChangeEvent) => { - this.setState({ height: parseInt(e.target.value, 10) }); - }; - - private _onChange = (ev: React.FormEvent, option: IChoiceGroupOption): void => { - if (this.state.isCalloutselected) { - this.setState({ isCalloutselected: false }); - } else { - this.setState({ isCalloutselected: true }); - } - }; - - private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.forceUpdate(); - this.setState({ showAxisTitles: checked }); - }; - - private _basicExample(): JSX.Element { - const chart1Points = [ - { - x: 20, - y: 7000, - xAxisCalloutData: '2018/01/01', - yAxisCalloutData: '10%', - }, - { - x: 25, - y: 9000, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 30, - y: 13000, - xAxisCalloutData: '2018/01/28', - yAxisCalloutData: '24%', - }, - { - x: 35, - y: 15000, - xAxisCalloutData: '2018/02/01', - yAxisCalloutData: '25%', - }, - { - x: 40, - y: 11000, - xAxisCalloutData: '2018/03/01', - yAxisCalloutData: '15%', - }, - { - x: 45, - y: 8760, - xAxisCalloutData: '2018/03/15', - yAxisCalloutData: '30%', - }, - { - x: 50, - y: 3500, - xAxisCalloutData: '2018/03/28', - yAxisCalloutData: '18%', - }, - { - x: 55, - y: 20000, - xAxisCalloutData: '2018/04/04', - yAxisCalloutData: '32%', - }, - { - x: 60, - y: 17000, - xAxisCalloutData: '2018/04/15', - yAxisCalloutData: '29%', - }, - { - x: 65, - y: 1000, - xAxisCalloutData: '2018/05/05', - yAxisCalloutData: '43%', - }, - { - x: 70, - y: 12000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, - { - x: 75, - y: 6876, - xAxisCalloutData: '2018/01/15', - yAxisCalloutData: '18%', - }, - { - x: 80, - y: 12000, - xAxisCalloutData: '2018/04/30', - yAxisCalloutData: '55%', - }, - { - x: 85, - y: 7000, - xAxisCalloutData: '2018/05/04', - yAxisCalloutData: '12%', - }, - { - x: 90, - y: 10000, - xAxisCalloutData: '2018/06/01', - yAxisCalloutData: '45%', - }, - ]; - - const chartPoints = [ - { - legend: 'legend1', - data: chart1Points, - color: '#0099BC', - }, - ]; - - const chartData = { - chartTitle: 'Area chart basic example', - lineChartData: chartPoints, - }; - - const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; - - return ( - <> - - - - - - - -
- - props && this.state.isCalloutselected ? ( - - ) : null - } - yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined} - xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined} - /> -
- - ); - } -} 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 c615c40921e74..d765cc52a84ad 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 @@ -2,11 +2,13 @@ import * as React from 'react'; import { AreaChart, ICustomizedCalloutData } from '@fluentui/react-charting'; import { IAreaChartProps, ChartHoverCard } from '@fluentui/react-charting'; import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup'; +import { Toggle } from '@fluentui/react/lib/Toggle'; interface IAreaChartBasicState { width: number; height: number; isCalloutselected: boolean; + showAxisTitles: boolean; } const options: IChoiceGroupOption[] = [ @@ -21,6 +23,7 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt width: 700, height: 300, isCalloutselected: false, + showAxisTitles: true, }; } @@ -43,6 +46,11 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt } }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; + private _basicExample(): JSX.Element { const chart1Points = [ { @@ -176,6 +184,14 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt /> +
diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx deleted file mode 100644 index 8d91669dfa686..0000000000000 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx +++ /dev/null @@ -1,209 +0,0 @@ -import * as React from 'react'; -import { IChartProps, ILineChartProps, LineChart } from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; -import { Toggle } from '@fluentui/react/lib/Toggle'; - -interface ILineChartBasicState { - width: number; - height: number; - allowMultipleShapes: boolean; - showAxisTitles: boolean; -} - -export class LineChartAxisTitleExample extends React.Component<{}, ILineChartBasicState> { - constructor(props: ILineChartProps) { - super(props); - this.state = { - width: 650, - height: 350, - allowMultipleShapes: false, - showAxisTitles: true, - }; - } - - public render(): JSX.Element { - return
{this._basicExample()}
; - } - - private _onWidthChange = (e: React.ChangeEvent) => { - this.setState({ width: parseInt(e.target.value, 10) }); - }; - private _onHeightChange = (e: React.ChangeEvent) => { - this.setState({ height: parseInt(e.target.value, 10) }); - }; - private _onShapeChange = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ allowMultipleShapes: checked }); - }; - private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.forceUpdate(); - this.setState({ showAxisTitles: checked }); - }; - - private _basicExample(): JSX.Element { - const data: IChartProps = { - chartTitle: 'Line Chart', - lineChartData: [ - { - legend: 'From_Legacy_to_O365', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 216000, - onDataPointClick: () => alert('click on 217000'), - }, - { - x: new Date('2020-03-03T10:00:00.000Z'), - y: 218123, - onDataPointClick: () => alert('click on 217123'), - }, - { - x: new Date('2020-03-03T11:00:00.000Z'), - y: 217124, - onDataPointClick: () => alert('click on 217124'), - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 248000, - onDataPointClick: () => alert('click on 248000'), - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 252000, - onDataPointClick: () => alert('click on 252000'), - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 274000, - onDataPointClick: () => alert('click on 274000'), - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 260000, - onDataPointClick: () => alert('click on 260000'), - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 304000, - onDataPointClick: () => alert('click on 300000'), - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 218000, - onDataPointClick: () => alert('click on 218000'), - }, - ], - color: DefaultPalette.blue, - lineOptions: { - lineBorderWidth: '4', - }, - onLineClick: () => console.log('From_Legacy_to_O365'), - }, - { - legend: 'All', - data: [ - { - x: new Date('2020-03-03T00:00:00.000Z'), - y: 297000, - }, - { - x: new Date('2020-03-04T00:00:00.000Z'), - y: 284000, - }, - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282000, - }, - { - x: new Date('2020-03-06T00:00:00.000Z'), - y: 294000, - }, - { - x: new Date('2020-03-07T00:00:00.000Z'), - y: 224000, - }, - { - x: new Date('2020-03-08T00:00:00.000Z'), - y: 300000, - }, - { - x: new Date('2020-03-09T00:00:00.000Z'), - y: 298000, - }, - ], - color: DefaultPalette.green, - lineOptions: { - lineBorderWidth: '4', - }, - }, - { - legend: 'single point', - data: [ - { - x: new Date('2020-03-05T00:00:00.000Z'), - y: 282000, - }, - ], - color: DefaultPalette.yellow, - }, - ], - }; - - const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; - - return ( - <> - - - - - - -
- -
- - ); - } -} 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 bc81937458385..b47a084f508d0 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 @@ -7,6 +7,7 @@ interface ILineChartBasicState { width: number; height: number; allowMultipleShapes: boolean; + showAxisTitles: boolean; } export class LineChartBasicExample extends React.Component<{}, ILineChartBasicState> { @@ -16,6 +17,7 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt width: 700, height: 300, allowMultipleShapes: false, + showAxisTitles: true, }; } @@ -32,6 +34,10 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt private _onShapeChange = (ev: React.MouseEvent, checked: boolean) => { this.setState({ allowMultipleShapes: checked }); }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; private _basicExample(): JSX.Element { const data: IChartProps = { @@ -143,7 +149,6 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt }; const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; - const margins = { left: 35, top: 20, bottom: 35, right: 20 }; return ( <> @@ -174,6 +179,14 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt onChange={this._onShapeChange} checked={this.state.allowMultipleShapes} /> +
diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx deleted file mode 100644 index cd8b95e7e360d..0000000000000 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx +++ /dev/null @@ -1,236 +0,0 @@ -import * as React from 'react'; -import { - VerticalBarChart, - IVerticalBarChartProps, - IVerticalBarChartDataPoint, - ILineChartLineOptions, -} 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'; -import { Toggle } from '@fluentui/react/lib/Toggle'; - -interface IVerticalChartState { - width: number; - height: number; - isCalloutselected: boolean; - useSingleColor: boolean; - hideLabels: boolean; - showAxisTitles: boolean; -} - -const options: IChoiceGroupOption[] = [ - { key: 'basicExample', text: 'Basic Example' }, - { key: 'calloutExample', text: 'Custom Callout Example' }, -]; - -export class VerticalBarChartAxisTitleExample extends React.Component { - constructor(props: IVerticalBarChartProps) { - super(props); - this.state = { - width: 650, - height: 350, - isCalloutselected: false, - useSingleColor: false, - hideLabels: false, - showAxisTitles: true, - }; - } - - public render(): JSX.Element { - return
{this._basicExample()}
; - } - - private _onWidthChange = (e: React.ChangeEvent) => { - this.setState({ width: parseInt(e.target.value, 10) }); - }; - private _onHeightChange = (e: React.ChangeEvent) => { - this.setState({ height: parseInt(e.target.value, 10) }); - }; - - private _onChange = (ev: React.FormEvent, option: IChoiceGroupOption): void => { - if (this.state.isCalloutselected) { - this.setState({ isCalloutselected: false }); - } else { - this.setState({ isCalloutselected: true }); - } - }; - private _onCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ useSingleColor: checked }); - }; - private _onHideLabelsCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ hideLabels: checked }); - }; - private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.forceUpdate(); - this.setState({ showAxisTitles: checked }); - }; - - private _basicExample(): JSX.Element { - const points: IVerticalBarChartDataPoint[] = [ - { - x: 0, - y: 10000, - legend: 'Oranges', - color: DefaultPalette.accent, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '10%', - lineData: { - y: 7000, - yAxisCalloutData: '34%', - }, - }, - { - x: 10000, - y: 50000, - legend: 'Dogs', - color: DefaultPalette.blueDark, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', - lineData: { - y: 30000, - }, - }, - { - x: 25000, - y: 30000, - legend: 'Apples', - color: DefaultPalette.blueMid, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '37%', - lineData: { - y: 3000, - yAxisCalloutData: '43%', - }, - }, - - { - x: 40000, - y: 13000, - legend: 'Bananas', - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '88%', - }, - { - x: 52000, - y: 43000, - legend: 'Giraffes', - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '71%', - lineData: { - y: 30000, - }, - }, - { - x: 68000, - y: 30000, - legend: 'Cats', - color: DefaultPalette.blueDark, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', - lineData: { - y: 5000, - }, - }, - { - x: 80000, - y: 20000, - legend: 'Elephants', - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '87%', - lineData: { - y: 16000, - }, - }, - { - x: 92000, - y: 45000, - legend: 'Monkeys', - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '33%', - lineData: { - y: 40000, - yAxisCalloutData: '45%', - }, - }, - ]; - - const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' }; - - const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; - - return ( - <> - - - - - - - - -
- , - ) => (props ? defaultRender(props) : null), - })} - enableReflow={true} - /> -
- - ); - } -} 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 58d1b2a2d7141..b28d207211189 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 @@ -9,6 +9,7 @@ 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'; +import { Toggle } from '@fluentui/react/lib/Toggle'; interface IVerticalChartState { width: number; @@ -16,6 +17,7 @@ interface IVerticalChartState { isCalloutselected: boolean; useSingleColor: boolean; hideLabels: boolean; + showAxisTitles: boolean; } const options: IChoiceGroupOption[] = [ @@ -32,6 +34,7 @@ export class VerticalBarChartBasicExample extends React.Component, checked: boolean) => { this.setState({ hideLabels: checked }); }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; private _basicExample(): JSX.Element { const points: IVerticalBarChartDataPoint[] = [ @@ -192,6 +199,14 @@ export class VerticalBarChartBasicExample extends React.Component +
diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx deleted file mode 100644 index 2c3419d783cca..0000000000000 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.AxisTitle.Example.tsx +++ /dev/null @@ -1,284 +0,0 @@ -import * as React from 'react'; -import { - IVSChartDataPoint, - IVerticalStackedChartProps, - VerticalStackedBarChart, - ILineChartLineOptions, -} from '@fluentui/react-charting'; -import { DefaultPalette } from '@fluentui/react/lib/Styling'; -import { Checkbox } from '@fluentui/react/lib/Checkbox'; -import { Toggle } from '@fluentui/react/lib/Toggle'; - -interface IVerticalStackedBarState { - width: number; - height: number; - barGapMax: number; - showLine: boolean; - hideLabels: boolean; - showAxisTitles: boolean; -} - -export class VerticalStackedBarChartAxisTitleExample extends React.Component<{}, IVerticalStackedBarState> { - constructor(props: IVerticalStackedChartProps) { - super(props); - this.state = { - width: 650, - height: 350, - showLine: true, - barGapMax: 2, - hideLabels: false, - showAxisTitles: true, - }; - } - public render(): JSX.Element { - return
{this._basicExample()}
; - } - - private _onWidthChange = (e: React.ChangeEvent) => { - this.setState({ width: parseInt(e.target.value, 10) }); - }; - private _onHeightChange = (e: React.ChangeEvent) => { - this.setState({ height: parseInt(e.target.value, 10) }); - }; - - private _onShowLineChange = (ev: React.FormEvent, checked: boolean): void => { - this.setState({ showLine: checked }); - }; - private _onHideLabelsCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.setState({ hideLabels: checked }); - }; - private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.forceUpdate(); - this.setState({ showAxisTitles: checked }); - }; - - private _basicExample(): JSX.Element { - const { showLine } = this.state; - const firstChartPoints: IVSChartDataPoint[] = [ - { - legend: 'Metadata1', - data: 40, - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', - }, - { - legend: 'Metadata2', - data: 5, - color: DefaultPalette.blueMid, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '5%', - }, - { - legend: 'Metadata3', - data: 20, - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', - }, - ]; - - const secondChartPoints: IVSChartDataPoint[] = [ - { - legend: 'Metadata1', - data: 30, - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', - }, - { - legend: 'Metadata2', - data: 20, - color: DefaultPalette.blueMid, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '20%', - }, - { - legend: 'Metadata3', - data: 40, - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '40%', - }, - ]; - - const thirdChartPoints: IVSChartDataPoint[] = [ - { - legend: 'Metadata1', - data: 44, - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '44%', - }, - { - legend: 'Metadata2', - data: 28, - color: DefaultPalette.blueMid, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '28%', - }, - { - legend: 'Metadata3', - data: 30, - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', - }, - ]; - - const fourthChartPoints: IVSChartDataPoint[] = [ - { - legend: 'Metadata1', - data: 88, - color: DefaultPalette.blue, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '88%', - }, - { - legend: 'Metadata2', - data: 22, - color: DefaultPalette.blueMid, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '22%', - }, - { - legend: 'Metadata3', - data: 30, - color: DefaultPalette.blueLight, - xAxisCalloutData: '2020/04/30', - yAxisCalloutData: '30%', - }, - ]; - - const data: IVerticalStackedChartProps[] = [ - { - chartData: firstChartPoints, - xAxisPoint: 0, - - ...(showLine && { - lineData: [ - { y: 42, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, - ], - }), - }, - { - chartData: secondChartPoints, - xAxisPoint: 20, - ...(showLine && { - lineData: [{ y: 33, legend: 'Supported Builds', color: DefaultPalette.magentaLight }], - }), - }, - { - chartData: thirdChartPoints, - xAxisPoint: 40, - ...(showLine && { - lineData: [ - { y: 60, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 20, legend: 'Recommended Builds', color: DefaultPalette.redDark }, - ], - }), - }, - { - chartData: firstChartPoints, - xAxisPoint: 60, - ...(showLine && { - lineData: [ - { y: 41, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 10, legend: 'Recommended Builds', color: DefaultPalette.redDark }, - ], - }), - }, - { - chartData: fourthChartPoints, - xAxisPoint: 80, - ...(showLine && { - lineData: [ - { y: 100, legend: 'Supported Builds', color: DefaultPalette.magentaLight }, - { y: 70, legend: 'Recommended Builds', color: DefaultPalette.redDark }, - ], - }), - }, - { - chartData: firstChartPoints, - xAxisPoint: 100, - }, - ]; - - const lineOptions: ILineChartLineOptions = { lineBorderWidth: '2' }; - - const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; - - return ( - <> - - - - - - this.setState({ barGapMax: +e.target.value })} - aria-valuetext={`ChangebarGapMaxSlider${this.state.barGapMax}`} - /> - - - -
- -
- - ); - } -} 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 d6f23f3f3c27d..273701978bc4e 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 @@ -7,6 +7,7 @@ import { } from '@fluentui/react-charting'; import { DefaultPalette } from '@fluentui/react/lib/Styling'; import { Checkbox } from '@fluentui/react/lib/Checkbox'; +import { Toggle } from '@fluentui/react/lib/Toggle'; interface IVerticalStackedBarState { width: number; @@ -14,6 +15,7 @@ interface IVerticalStackedBarState { barGapMax: number; showLine: boolean; hideLabels: boolean; + showAxisTitles: boolean; } export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> { @@ -25,6 +27,7 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe showLine: true, barGapMax: 2, hideLabels: false, + showAxisTitles: true, }; } public render(): JSX.Element { @@ -44,6 +47,10 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe private _onHideLabelsCheckChange = (ev: React.MouseEvent, checked: boolean) => { this.setState({ hideLabels: checked }); }; + private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { + this.forceUpdate(); + this.setState({ showAxisTitles: checked }); + }; private _basicExample(): JSX.Element { const { showLine } = this.state; @@ -246,6 +253,14 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe onChange={this._onHideLabelsCheckChange} styles={{ root: { marginTop: '10px' } }} /> +
From 8e7c3b8e1b0d089cdbf03581e04189cee9ad378e Mon Sep 17 00:00:00 2001 From: srmukher Date: Thu, 28 Sep 2023 17:44:32 +0530 Subject: [PATCH 4/5] Handling axis title toggle at example files --- .../CommonComponents/CartesianChart.base.tsx | 39 -------- .../AreaChart/AreaChart.Basic.Example.tsx | 74 ++++++++++----- .../LineChart/LineChart.Basic.Example.tsx | 50 ++++++---- .../VerticalBarChart.Basic.Example.tsx | 71 +++++++++----- .../VerticalStackedBarChart.Basic.Example.tsx | 92 ++++++++++++++----- 5 files changed, 203 insertions(+), 123 deletions(-) diff --git a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx index 1aff3ba31d843..f914d3e52e5be 100644 --- a/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx +++ b/packages/react-charting/src/components/CommonComponents/CartesianChart.base.tsx @@ -163,45 +163,6 @@ export class CartesianChartBase extends React.Component): boolean { - let isUpdate: boolean = false; - if (nextProps.xAxisTitle === undefined && nextProps.yAxisTitle === undefined) { - this.margins = { - top: nextProps.margins?.top ?? 20, - bottom: nextProps.margins?.bottom ?? 35, - right: this._isRtl - ? nextProps.margins?.left ?? 40 - : nextProps.margins?.right ?? nextProps?.secondaryYScaleOptions - ? 40 - : 20, - left: this._isRtl - ? nextProps.margins?.right ?? nextProps?.secondaryYScaleOptions - ? 40 - : 20 - : nextProps.margins?.left ?? 40, - }; - isUpdate = true; - } - if (nextProps.xAxisTitle !== undefined && nextProps.xAxisTitle !== '') { - this.margins.bottom! = nextProps.margins?.bottom ?? 55; - isUpdate = true; - } - if (nextProps.yAxisTitle !== undefined && nextProps.yAxisTitle !== '') { - this.margins.left! = this._isRtl - ? nextProps.margins?.right ?? nextProps?.secondaryYAxistitle - ? 60 - : 40 - : nextProps.margins?.left ?? 60; - this.margins.right! = this._isRtl - ? nextProps.margins?.left ?? 60 - : nextProps.margins?.right ?? nextProps?.secondaryYAxistitle - ? 60 - : 40; - isUpdate = true; - } - return isUpdate; - } - public componentDidUpdate(prevProps: IModifiedCartesianChartProps): void { if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) { this._fitParentContainer(); 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 d765cc52a84ad..47bfe5bfc6e7a 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 @@ -192,30 +192,56 @@ export class AreaChartBasicExample extends React.Component<{}, IAreaChartBasicSt onChange={this._onToggleAxisTitlesCheckChange} styles={{ root: { marginTop: '10px' } }} /> -
- - props && this.state.isCalloutselected ? ( - - ) : null - } - enableReflow={true} - yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined} - xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined} - /> -
+ {this.state.showAxisTitles && ( +
+ + props && this.state.isCalloutselected ? ( + + ) : null + } + enableReflow={true} + yAxisTitle={this.state.showAxisTitles ? 'Variation of stock market prices' : undefined} + xAxisTitle={this.state.showAxisTitles ? 'Number of days' : undefined} + /> +
+ )} + {!this.state.showAxisTitles && ( +
+ + props && this.state.isCalloutselected ? ( + + ) : null + } + enableReflow={true} + /> +
+ )} ); } 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 b47a084f508d0..ba91d059fdc97 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 @@ -187,22 +187,40 @@ export class LineChartBasicExample extends React.Component<{}, ILineChartBasicSt onChange={this._onToggleAxisTitlesCheckChange} styles={{ root: { marginTop: '10px' } }} /> -
- -
+ {this.state.showAxisTitles && ( +
+ +
+ )} + {!this.state.showAxisTitles && ( +
+ +
+ )} ); } 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 b28d207211189..2bc92c2773e39 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 @@ -207,29 +207,54 @@ export class VerticalBarChartBasicExample extends React.Component -
- , - ) => (props ? defaultRender(props) : null), - })} - hideLabels={this.state.hideLabels} - enableReflow={true} - yAxisTitle={this.state.showAxisTitles ? 'Different categories of animals and fruits' : undefined} - xAxisTitle={this.state.showAxisTitles ? 'Values of each category' : undefined} - /> -
+ {this.state.showAxisTitles && ( +
+ , + ) => (props ? defaultRender(props) : null), + })} + hideLabels={this.state.hideLabels} + enableReflow={true} + yAxisTitle={this.state.showAxisTitles ? 'Different categories of animals and fruits' : undefined} + xAxisTitle={this.state.showAxisTitles ? 'Values of each category' : undefined} + /> +
+ )} + {!this.state.showAxisTitles && ( +
+ , + ) => (props ? defaultRender(props) : null), + })} + hideLabels={this.state.hideLabels} + enableReflow={true} + /> +
+ )} ); } 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 273701978bc4e..c92dbd607f19d 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 @@ -16,6 +16,7 @@ interface IVerticalStackedBarState { showLine: boolean; hideLabels: boolean; showAxisTitles: boolean; + margins: {}; } export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVerticalStackedBarState> { @@ -28,10 +29,17 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe barGapMax: 2, hideLabels: false, showAxisTitles: true, + margins: { + top: 20, + bottom: 55, + right: 40, + left: 60, + }, }; } + public render(): JSX.Element { - return
{this._basicExample()}
; + return
{this._basicExample()}
; } private _onWidthChange = (e: React.ChangeEvent) => { @@ -48,8 +56,28 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe this.setState({ hideLabels: checked }); }; private _onToggleAxisTitlesCheckChange = (ev: React.MouseEvent, checked: boolean) => { - this.forceUpdate(); - this.setState({ showAxisTitles: checked }); + this.setState({ + showAxisTitles: checked, + }); + if (checked) { + this.setState({ + margins: { + top: 20, + bottom: 55, + right: 40, + left: 60, + }, + }); + } else { + this.setState({ + margins: { + top: 20, + bottom: 35, + right: 20, + left: 40, + }, + }); + } }; private _basicExample(): JSX.Element { @@ -261,24 +289,46 @@ export class VerticalStackedBarChartBasicExample extends React.Component<{}, IVe onChange={this._onToggleAxisTitlesCheckChange} styles={{ root: { marginTop: '10px' } }} /> -
- -
+ {this.state.showAxisTitles && ( +
+ +
+ )} + {!this.state.showAxisTitles && ( +
+ +
+ )} ); } From 5cd3d7fb694d76042b009e31f41e1d9f4fc23a86 Mon Sep 17 00:00:00 2001 From: srmukher Date: Fri, 29 Sep 2023 17:10:46 +0530 Subject: [PATCH 5/5] Removing axis title examples from page --- .../src/react-charting/AreaChart/AreaChartPage.tsx | 6 ------ .../src/react-charting/LineChart/LineChartPage.tsx | 6 ------ .../VerticalBarChart/VerticalBarChartPage.tsx | 6 ------ 3 files changed, 18 deletions(-) diff --git a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx index ba0c879fc09f8..a765b77e831ba 100644 --- a/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx +++ b/packages/react-examples/src/react-charting/AreaChart/AreaChartPage.tsx @@ -13,7 +13,6 @@ import { AreaChartStyledExample } from './AreaChart.Styled.Example'; import { AreaChartCustomAccessibilityExample } from './AreaChart.CustomAccessibility.Example'; import { AreaChartLargeDataExample } from './AreaChart.LargeData.Example'; import { AreaChartDataChangeExample } from './AreaChart.DataChange.Example'; -import { AreaChartAxisTitleExample } from './AreaChart.AxisTitle.Example'; const AreaChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.Basic.Example.tsx') as string; @@ -27,8 +26,6 @@ const AreaChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.LargeData.Example.tsx') as string; const AreaChartDataChangeExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.DataChange.Example.tsx') as string; -const AreaChartAxisTitleExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/AreaChart/AreaChart.AxisTitle.Example.tsx') as string; export class AreaChart extends React.Component { public render(): JSX.Element { @@ -56,9 +53,6 @@ export class AreaChart extends React.Component { - - - } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index 84d9ed208cf0d..de4ed71eae052 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -15,7 +15,6 @@ import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibi import { LineChartGapsExample } from './LineChart.Gaps.Example'; import { LineChartLargeDataExample } from './LineChart.LargeData.Example'; import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; -import { LineChartAxisTitleExample } from './LineChart.AxisTitle.Example'; const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; @@ -33,8 +32,6 @@ const LineChartLargeDataExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.LargeData.Example.tsx') as string; const LineChartCustomLocaleDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.CustomLocaleDateAxis.Example.tsx') as string; -const LineChartAxisTitleExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.AxisTitle.Example.tsx') as string; // All line charts locale is impacted. @@ -70,9 +67,6 @@ export class LineChartPage extends React.Component - - - } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx index 0b8136dd02a13..40498c9b9b464 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx @@ -13,7 +13,6 @@ import { VerticalBarChartDynamicExample } from './VerticalBarChart.Dynamic.Examp import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.Example'; import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example'; import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; -import { VerticalBarChartAxisTitleExample } from './VerticalBarChart.AxisTitle.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx') as string; @@ -27,8 +26,6 @@ const VerticalBarChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.CustomAccessibility.Example.tsx') as string; const VerticalBarChartRotateLabelsExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx') as string; -const VerticalBarChartAxisTitleLabelsExampleCode = - require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.AxisTitle.Example.tsx') as string; export class VerticalBarChartPage extends React.Component { public render(): JSX.Element { @@ -59,9 +56,6 @@ export class VerticalBarChartPage extends React.Component - - - } propertiesTables={