From 6f4ad652f70f8f8b256c542e30a0eb7adb3ffc74 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Thu, 21 Nov 2024 11:56:04 +0530 Subject: [PATCH 1/5] Add donut chart plotly adapter and example (#33303) --- .../react-charting/etc/react-charting.api.md | 3 ++ packages/charts/react-charting/src/index.ts | 1 + .../react-charting/src/utilities/helpers.tsx | 33 +++++++++++++++++++ .../DonutChart/DonutChart.Plotly.Example.tsx | 23 +++++++++++++ .../DonutChart/DonutChart.doc.tsx | 8 +++++ .../DonutChart/DonutChartPage.tsx | 6 ++++ .../DonutChart/index.stories.tsx | 3 ++ 7 files changed, 77 insertions(+) create mode 100644 packages/charts/react-charting/src/utilities/helpers.tsx create mode 100644 packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 782f87f357e8b..eb1bb5745af6f 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -1589,6 +1589,9 @@ export enum NodesComposition { // @public export const PieChart: React_2.FunctionComponent; +// @public (undocumented) +export const renderChartFromPlotlyJson: (obj: any) => React_2.ReactNode; + // @public export const SankeyChart: React_2.FunctionComponent; diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index b07e003e52748..64acf7029b6f7 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -135,5 +135,6 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; +export { renderChartFromPlotlyJson } from './utilities/helpers'; import './version'; diff --git a/packages/charts/react-charting/src/utilities/helpers.tsx b/packages/charts/react-charting/src/utilities/helpers.tsx new file mode 100644 index 0000000000000..4dcfc7367f6b9 --- /dev/null +++ b/packages/charts/react-charting/src/utilities/helpers.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { DonutChart, IDonutChartProps } from '../components/DonutChart/index'; +import { IChartProps } from '../types/IDataPoint'; +import { getNextColor } from './colors'; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => { + const donutData: IChartProps = { + chartTitle: obj.layout.title, + chartData: (obj.data[0].labels as string[]).map((label, index) => { + return { + legend: label, + data: obj.data[0].values[index] as number, + color: getNextColor(index), + }; + }), + }; + + return { + data: donutData, + hideLegend: !obj.layout.showlegend, + }; +}; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +export const renderChartFromPlotlyJson = (obj: any): React.ReactNode => { + switch (obj.data[0].type) { + case 'pie': + return ; + default: + return null; + } +}; diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..5b4e5568549d2 --- /dev/null +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { renderChartFromPlotlyJson } from '@fluentui/react-charting'; + +const plotlyJson = { + data: [ + { + hole: 0.6, + type: 'pie', + labels: ['Rural', 'Suburban', 'Urban'], + values: [125, 625, 1625], + }, + ], + layout: { + title: 'Donut w Ply', + showlegend: false, + }, +}; + +export class DonutChartPlotlyExample extends React.Component<{}, {}> { + public render(): React.ReactNode { + return renderChartFromPlotlyJson(plotlyJson); + } +} diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx index 6c49316833cf8..db7fdbeff26f8 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.doc.tsx @@ -6,6 +6,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; const DonutChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx') as string; @@ -15,6 +16,8 @@ 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; +const DonutChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx') as string; export const DonutChartPageProps: IDocPageProps = { title: 'DonutChart', @@ -42,6 +45,11 @@ export const DonutChartPageProps: IDocPageProps = { code: DonutChartCustomAccessibilityExampleCode, view: , }, + { + title: 'DonutChart Plotly', + code: DonutChartPlotlyExampleCode, + 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'), diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx index 10d3a75feeb85..f6a912156633a 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChartPage.tsx @@ -12,6 +12,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; const DonutChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Basic.Example.tsx') as string; @@ -21,6 +22,8 @@ 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; +const DonutChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx') as string; export class DonutChartPage extends React.Component { public render(): JSX.Element { @@ -42,6 +45,9 @@ export class DonutChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx index 94732d49f5959..5f1189ecb53d0 100644 --- a/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/index.stories.tsx @@ -4,6 +4,7 @@ import { DonutChartBasicExample } from './DonutChart.Basic.Example'; import { DonutChartCustomAccessibilityExample } from './DonutChart.CustomAccessibility.Example'; import { DonutChartCustomCalloutExample } from './DonutChart.CustomCallout.Example'; import { DonutChartDynamicExample } from './DonutChart.Dynamic.Example'; +import { DonutChartPlotlyExample } from './DonutChart.Plotly.Example'; export const Basic = () => ; @@ -13,6 +14,8 @@ export const CustomCallout = () => ; export const Dynamic = () => ; +export const Plotly = () => ; + export default { title: 'Components/DonutChart', }; From 2a9c8795d03f9617403c943d3e23954958508e8f Mon Sep 17 00:00:00 2001 From: srmukher <120183316+srmukher@users.noreply.github.com> Date: Thu, 21 Nov 2024 13:18:44 +0530 Subject: [PATCH 2/5] Line chart plotly adapter (#33299) --- .../react-charting/etc/react-charting.api.md | 5 + packages/charts/react-charting/src/index.ts | 1 + .../react-charting/src/plotly-utils.tsx | 58 ++++++ .../LineChart/LineChart.Plotly.Example.tsx | 187 ++++++++++++++++++ .../LineChart/LineChart.doc.tsx | 8 + .../LineChart/LineChartPage.tsx | 6 + .../LineChart/index.stories.tsx | 3 + .../LineChart/plotly-schema-line.json | 29 +++ 8 files changed, 297 insertions(+) create mode 100644 packages/charts/react-charting/src/plotly-utils.tsx create mode 100644 packages/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx create mode 100644 packages/react-examples/src/react-charting/LineChart/plotly-schema-line.json diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index eb1bb5745af6f..30597a009e536 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -39,6 +39,11 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage'; // @public (undocumented) export const ChartHoverCard: React_2.FunctionComponent; +// Warning: (ae-forgotten-export) The symbol "IPlotlySchema" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export function convertPlotlyToILineChartProps(plotlySchema: IPlotlySchema): ILineChartProps; + // @public (undocumented) export const DataVizGradientPalette: { gradient1: string; diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index 64acf7029b6f7..8a9ddfe566c4e 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -135,6 +135,7 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; +export { convertPlotlyToILineChartProps } from './plotly-utils'; export { renderChartFromPlotlyJson } from './utilities/helpers'; import './version'; diff --git a/packages/charts/react-charting/src/plotly-utils.tsx b/packages/charts/react-charting/src/plotly-utils.tsx new file mode 100644 index 0000000000000..b69e1d0c0bf4f --- /dev/null +++ b/packages/charts/react-charting/src/plotly-utils.tsx @@ -0,0 +1,58 @@ +import { ILineChartProps } from './LineChart'; + +interface IPlotlySchema { + data: Array<{ + type: string; + mode: string; + name: string; + x: Array; + y: Array; + line: { + color: string; + width: number; + dash: string; + }; + marker: { + opacity: number; + }; + connectgaps: boolean; + }>; + layout: { + title: string; + xaxis: { + title: string; + }; + yaxis: { + title: string; + }; + }; +} + +export function convertPlotlyToILineChartProps(plotlySchema: IPlotlySchema): ILineChartProps { + const { data, layout } = plotlySchema; + + const lineChartData = data.map(d => ({ + legend: d.name, + color: d.line.color, + data: d.x + .filter((x): x is number | Date => typeof x !== 'string') + .map((x, index) => ({ + x, + y: d.y[index], + })), + styles: { + legend: d.name, + color: d.line.color, + width: d.line.width, + dash: d.line.dash, + opacity: d.marker.opacity, + }, + })); + + return { + data: { + chartTitle: layout.title, + lineChartData, + }, + }; +} diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..6735d28f1cc07 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx @@ -0,0 +1,187 @@ +import * as React from 'react'; +import { LineChart, DataVizPalette, ILineChartProps, convertPlotlyToILineChartProps } from '@fluentui/react-charting'; +import { Toggle } from '@fluentui/react/lib/Toggle'; +import { Checkbox } from '@fluentui/react/lib/Checkbox'; + +interface ILineChartBasicState { + width: number; + height: number; + allowMultipleShapes: boolean; + showAxisTitles: boolean; + useUTC: boolean; +} + +const plotlyData = { + data: [ + { + type: 'scatter', + mode: 'lines+markers', + name: 'From_Legacy_to_O365', + x: [ + new Date('2020-03-03T00:00:00.000Z'), + new Date('2020-03-03T10:00:00.000Z'), + new Date('2020-03-03T11:00:00.000Z'), + new Date('2020-03-04T00:00:00.000Z'), + new Date('2020-03-05T00:00:00.000Z'), + new Date('2020-03-06T00:00:00.000Z'), + new Date('2020-03-07T00:00:00.000Z'), + new Date('2020-03-08T00:00:00.000Z'), + new Date('2020-03-09T00:00:00.000Z'), + ], + y: [216000, 218123, 217124, 248000, 252000, 274000, 260000, 304000, 218000], + line: { + color: DataVizPalette.color3, + width: 4, + dash: 'solid', + }, + marker: { + opacity: 1, + }, + connectgaps: false, + }, + { + type: 'scatter', + mode: 'lines+markers', + name: 'All', + x: [ + new Date('2020-03-03T00:00:00.000Z'), + new Date('2020-03-04T00:00:00.000Z'), + new Date('2020-03-05T00:00:00.000Z'), + new Date('2020-03-06T00:00:00.000Z'), + new Date('2020-03-07T00:00:00.000Z'), + new Date('2020-03-08T00:00:00.000Z'), + new Date('2020-03-09T00:00:00.000Z'), + ], + y: [297000, 284000, 282000, 294000, 224000, 300000, 298000], + line: { + color: DataVizPalette.color4, + width: 4, + dash: 'solid', + }, + marker: { + opacity: 1, + }, + connectgaps: false, + }, + { + type: 'scatter', + mode: 'lines+markers', + name: 'single point', + x: ['2020-03-05T12:00:00.000Z'], + y: [232000], + line: { + color: DataVizPalette.color5, + width: 4, + dash: 'solid', + }, + marker: { + opacity: 1, + }, + connectgaps: false, + }, + ], + layout: { + title: 'Line Chart', + xaxis: { + title: 'Values of each category', + }, + yaxis: { + title: 'Different categories of mail flow', + }, + }, +}; + +export class LineChartPlotlyExample extends React.Component<{}, ILineChartBasicState> { + constructor(props: ILineChartProps) { + super(props); + this.state = { + width: 700, + height: 300, + allowMultipleShapes: false, + showAxisTitles: true, + useUTC: 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 _onCheckChange = (ev: React.FormEvent, checked: boolean) => { + this.setState({ useUTC: checked }); + }; + + private _basicExample(): JSX.Element { + const data: ILineChartProps = convertPlotlyToILineChartProps(plotlyData); + + const rootStyle = { width: `${this.state.width}px`, height: `${this.state.height}px` }; + + return ( + <> + + + + + + + +
+ +
+ + ); + } +} diff --git a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx index c6eeacc190d2c..bd2496b9baa87 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChart.doc.tsx @@ -9,6 +9,7 @@ import { LineChartEventsExample } from './LineChart.Events.Example'; import { LineChartCustomAccessibilityExample } from './LineChart.CustomAccessibility.Example'; import { LineChartGapsExample } from './LineChart.Gaps.Example'; import { LineChartCustomLocaleDateAxisExample } from './LineChart.CustomLocaleDateAxis.Example'; +import { LineChartPlotlyExample } from './LineChart.Plotly.Example'; const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; @@ -24,6 +25,8 @@ 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; +const LineChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx') as string; export const LineChartPageProps: IDocPageProps = { title: 'LineChart', @@ -66,6 +69,11 @@ export const LineChartPageProps: IDocPageProps = { code: LineChartCustomLocaleDateAxisExampleCode, view: , }, + { + title: 'LineChart plotly', + code: LineChartPlotlyExampleCode, + 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'), diff --git a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx index 9b594e51234b5..91c400b5d9af8 100644 --- a/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx +++ b/packages/react-examples/src/react-charting/LineChart/LineChartPage.tsx @@ -16,6 +16,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 { LineChartPlotlyExample } from './LineChart.Plotly.Example'; const LineChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Basic.Example.tsx') as string; @@ -33,6 +34,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 LineChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/LineChart/LineChart.Plotly.Example.tsx') as string; // All line charts locale is impacted. @@ -68,6 +71,9 @@ export class LineChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/LineChart/index.stories.tsx b/packages/react-examples/src/react-charting/LineChart/index.stories.tsx index da3527f653375..419da64305856 100644 --- a/packages/react-examples/src/react-charting/LineChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/LineChart/index.stories.tsx @@ -8,6 +8,7 @@ import { LineChartGapsExample } from './LineChart.Gaps.Example'; import { LineChartLargeDataExample } from './LineChart.LargeData.Example'; import { LineChartMultipleExample } from './LineChart.Multiple.Example'; import { LineChartStyledExample } from './LineChart.Styled.Example'; +import { LineChartPlotlyExample } from './LineChart.Plotly.Example'; export const Basic = () => ; @@ -25,6 +26,8 @@ export const Multiple = () => ; export const Styled = () => ; +export const Plotly = () => ; + export default { title: 'Components/LineChart', }; diff --git a/packages/react-examples/src/react-charting/LineChart/plotly-schema-line.json b/packages/react-examples/src/react-charting/LineChart/plotly-schema-line.json new file mode 100644 index 0000000000000..1037a4f76cf31 --- /dev/null +++ b/packages/react-examples/src/react-charting/LineChart/plotly-schema-line.json @@ -0,0 +1,29 @@ +{ + "data": [ + { + "type": "scatter", + "mode": "lines+markers", + "name": "string", + "x": "array", + "y": "array", + "line": { + "color": "string", + "width": "number", + "dash": "string" + }, + "marker": { + "opacity": "number" + }, + "connectgaps": "boolean" + } + ], + "layout": { + "title": "string", + "xaxis": { + "title": "string" + }, + "yaxis": { + "title": "string" + } + } +} From 8c087f9cc8dd19c7d53bd5e7c85ff33e006e6b36 Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:09:48 +0530 Subject: [PATCH 3/5] Add vertical bar chart plotly adapter and example (#33313) --- .../react-charting/src/utilities/helpers.tsx | 57 +++++++++++-- .../VerticalBarChart.Plotly.Example.tsx | 40 +++++++++ .../VerticalBarChart/VerticalBarChart.doc.tsx | 8 ++ .../VerticalBarChart/VerticalBarChartPage.tsx | 6 ++ .../VerticalBarChart/index.stories.tsx | 3 + ...VerticalStackedBarChart.Plotly.Example.tsx | 82 +++++++++++++++++++ .../VerticalStackedBarChart.doc.tsx | 8 ++ .../VerticalStackedBarChartPage.tsx | 6 ++ .../VerticalStackedBarChart/index.stories.tsx | 3 + 9 files changed, 207 insertions(+), 6 deletions(-) create mode 100644 packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx create mode 100644 packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx diff --git a/packages/charts/react-charting/src/utilities/helpers.tsx b/packages/charts/react-charting/src/utilities/helpers.tsx index 4dcfc7367f6b9..b26032ce05cf7 100644 --- a/packages/charts/react-charting/src/utilities/helpers.tsx +++ b/packages/charts/react-charting/src/utilities/helpers.tsx @@ -1,32 +1,77 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react'; import { DonutChart, IDonutChartProps } from '../components/DonutChart/index'; -import { IChartProps } from '../types/IDataPoint'; +import { IChartProps, IVerticalStackedChartProps } from '../types/IDataPoint'; import { getNextColor } from './colors'; +import { IVerticalStackedBarChartProps, VerticalStackedBarChart } from '../components/VerticalStackedBarChart/index'; -// eslint-disable-next-line @typescript-eslint/no-explicit-any const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => { const donutData: IChartProps = { chartTitle: obj.layout.title, - chartData: (obj.data[0].labels as string[]).map((label, index) => { + chartData: obj.data[0].labels.map((label: string, index: number) => { return { legend: label, - data: obj.data[0].values[index] as number, - color: getNextColor(index), + data: obj.data[0].values[index], + color: obj.data[0].marker?.color || getNextColor(index), }; }), }; + // const width: number = obj.layout.width; + // const height: number = obj.layout.height; + // const innerRadius: number = (Math.min(width, height) * obj.data[0].hole) / 2; + return { data: donutData, hideLegend: !obj.layout.showlegend, + // width, + // height, + // innerRadius, + }; +}; + +const transformPlotlyJsonToColumnProps = (obj: any): IVerticalStackedBarChartProps => { + const mapXToDataPoints: { [key: string]: IVerticalStackedChartProps } = {}; + let yMaxValue = 0; + + obj.data.forEach((series: any, index1: number) => { + series.x.forEach((x: string | number, index2: number) => { + if (!mapXToDataPoints[x]) { + mapXToDataPoints[x] = { xAxisPoint: x, chartData: [], lineData: [] }; + } + if (series.type === 'bar') { + mapXToDataPoints[x].chartData.push({ + legend: series.name, + data: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } else if (series.type === 'line') { + mapXToDataPoints[x].lineData!.push({ + legend: series.name, + y: series.y[index2], + color: series.marker?.color || getNextColor(index1), + }); + } + yMaxValue = Math.max(yMaxValue, series.y[index2]); + }); + }); + + return { + data: Object.values(mapXToDataPoints), + chartTitle: obj.layout.title, + // width: obj.layout.width, + // height: obj.layout.height, + barWidth: 'auto', + yMaxValue, }; }; -// eslint-disable-next-line @typescript-eslint/no-explicit-any export const renderChartFromPlotlyJson = (obj: any): React.ReactNode => { switch (obj.data[0].type) { case 'pie': return ; + case 'bar': + return ; default: return null; } diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..c62672bbc38b1 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { renderChartFromPlotlyJson } from '@fluentui/react-charting'; + +const plotlyJson = { + data: [ + { + x: [1, 2, 3, 4], + y: [1, 3, 2, 6], + type: 'bar', + marker: { + color: '#ab63fa', + }, + name: 'Bar', + }, + { + x: [1, 2, 3, 4], + y: [3, 2, 7, 4], + type: 'line', + marker: { + color: '#19d3f3', + }, + name: 'Line', + }, + ], + layout: { + plotBackground: '#f3f6fa', + margin: { + t: 0, + r: 0, + l: 20, + b: 30, + }, + }, +}; + +export class VerticalBarChartPlotlyExample extends React.Component<{}, {}> { + public render(): React.ReactNode { + return renderChartFromPlotlyJson(plotlyJson); + } +} diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx index e9eb85c996de6..93b08210fd46b 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.doc.tsx @@ -9,6 +9,7 @@ import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.E import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example'; import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; import { VerticalBarChartDateAxisExample } from './VerticalBarChart.DateAxis.Example'; +import { VerticalBarChartPlotlyExample } from './VerticalBarChart.Plotly.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx') as string; @@ -24,6 +25,8 @@ const VerticalBarChartRotateLabelsExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx') as string; const VerticalBarChartDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.DateAxis.Example.tsx') as string; +const VerticalBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx') as string; export const VerticalBarChartPageProps: IDocPageProps = { title: 'VerticalBarChart', @@ -66,6 +69,11 @@ export const VerticalBarChartPageProps: IDocPageProps = { code: VerticalBarChartDateAxisExampleCode, view: , }, + { + title: 'VerticalBarChart Plotly', + code: VerticalBarChartPlotlyExampleCode, + 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'), diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx index 46ab459ef37ff..e275195c2b741 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/VerticalBarChartPage.tsx @@ -15,6 +15,7 @@ import { VerticalBarChartTooltipExample } from './VerticalBarChart.AxisTooltip.E import { VerticalBarChartCustomAccessibilityExample } from './VerticalBarChart.CustomAccessibility.Example'; import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; import { VerticalBarChartDateAxisExample } from './VerticalBarChart.DateAxis.Example'; +import { VerticalBarChartPlotlyExample } from './VerticalBarChart.Plotly.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Basic.Example.tsx') as string; @@ -30,6 +31,8 @@ const VerticalBarChartRotateLabelsExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.RotateLabels.Example.tsx') as string; const VerticalBarChartDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.DateAxis.Example.tsx') as string; +const VerticalBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalBarChart/VerticalBarChart.Plotly.Example.tsx') as string; export class VerticalBarChartPage extends React.Component { public render(): JSX.Element { @@ -63,6 +66,9 @@ export class VerticalBarChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx index 58c8330bcdf1c..07a18cf8c1ac3 100644 --- a/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/VerticalBarChart/index.stories.tsx @@ -7,6 +7,7 @@ import { VerticalBarChartDateAxisExample } from './VerticalBarChart.DateAxis.Exa import { VerticalBarChartDynamicExample } from './VerticalBarChart.Dynamic.Example'; import { VerticalBarChartRotatedLabelExample } from './VerticalBarChart.RotateLabels.Example'; import { VerticalBarChartStyledExample } from './VerticalBarChart.Styled.Example'; +import { VerticalBarChartPlotlyExample } from './VerticalBarChart.Plotly.Example'; export const Basic = () => ; @@ -22,6 +23,8 @@ export const RotatedLabel = () => ; export const Tooltip = () => ; +export const Plotly = () => ; + export default { title: 'Components/VerticalBarChart', }; diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..ddd0af4f6fa37 --- /dev/null +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import { renderChartFromPlotlyJson } from '@fluentui/react-charting'; + +const plotlyJson = { + data: [ + { + uid: 'c3086e', + name: 'Very interested (5)', + type: 'bar', + x: ['Dinosaurs', 'Conservation', 'Fish and reptiles', 'Fossils', 'Birds', 'Insects'], + y: [107, 14, 27, 18, 27, 19], + hoverinfo: 'y+name', + }, + { + uid: '772abd', + name: 'Slightly interested (4)', + type: 'bar', + x: ['Dinosaurs', 'Conservation', 'Fish and reptiles', 'Fossils', 'Birds', 'Insects'], + y: [113, 30, 45, 25, 32, 27], + hoverinfo: 'y+name', + }, + { + uid: 'f9fdc4', + name: 'No opinion (3)', + type: 'bar', + x: ['Dinosaurs', 'Conservation', 'Fish and reptiles', 'Fossils', 'Birds', 'Insects'], + y: [27, 7, 28, 15, 18, 18], + hoverinfo: 'y+name', + }, + { + uid: '25937d', + name: 'Not particularly interested (2)', + type: 'bar', + x: ['Dinosaurs', 'Conservation', 'Fish and reptiles', 'Fossils', 'Birds', 'Insects'], + y: [1, 2, 5, 1, 8, 2], + hoverinfo: 'y+name', + }, + { + uid: 'd92300', + name: 'Not at all interested (1)', + type: 'bar', + x: ['Dinosaurs', 'Conservation', 'Fish and reptiles', 'Fossils', 'Birds', 'Insects'], + y: [10, 3, 6, 6, 9, 13], + marker: { + color: 'rgb(49, 44, 53)', + }, + hoverinfo: 'y+name', + }, + ], + layout: { + title: 'Column Clustered', + width: 1620, + xaxis: { + type: 'category', + range: [-0.5250841834579578, 6.803332365503061], + autorange: false, + }, + yaxis: { + type: 'linear', + range: [-35.418056222479095, 296.289219151546], + autorange: false, + }, + height: 781, + legend: { + x: -0.12, + y: 1, + xanchor: 'center', + yanchor: 'bottom', + }, + shapes: [], + barmode: 'stack', + autosize: true, + hovermode: 'x', + }, + frames: [], +}; + +export class VerticalStackedBarChartPlotlyExample extends React.Component<{}, {}> { + public render(): React.ReactNode { + return renderChartFromPlotlyJson(plotlyJson); + } +} diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx index 4476896f7159b..16b27a66f55b3 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.doc.tsx @@ -8,6 +8,7 @@ import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart.AxisTooltip.Example'; import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; import { VerticalStackedBarChartDateAxisExample } from './VerticalStackedBarChart.DateAxis.Example'; +import { VerticalStackedBarChartPlotlyExample } from './VerticalStackedBarChart.Plotly.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx') as string; @@ -21,6 +22,8 @@ const VerticalBarChartCustomAccessibilityExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.CustomAccessibility.Example.tsx') as string; const VerticalStackedBarChartDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example.tsx') as string; +const VerticalStackedBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx') as string; export const VerticalStackedBarChartPageProps: IDocPageProps = { title: 'VerticalStackedBarChart', @@ -58,6 +61,11 @@ export const VerticalStackedBarChartPageProps: IDocPageProps = { code: VerticalStackedBarChartDateAxisExampleCode, view: , }, + { + title: 'VerticalStackedBarChart Plotly', + code: VerticalStackedBarChartPlotlyExampleCode, + 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'), diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx index d692b6253b5a5..febf71e2b7a7d 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChartPage.tsx @@ -15,6 +15,7 @@ import { VerticalStackedBarChartTooltipExample } from './VerticalStackedBarChart import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; import { VerticalStackedBarChartDateAxisExample } from './VerticalStackedBarChart.DateAxis.Example'; import { VerticalStackedBarChartReflowExample } from './VerticalStackedBarChart.Reflow.Example'; +import { VerticalStackedBarChartPlotlyExample } from './VerticalStackedBarChart.Plotly.Example'; const VerticalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Basic.Example.tsx') as string; @@ -30,6 +31,8 @@ const VerticalBarChartDateAxisExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.DateAxis.Example') as string; const VerticalBarChartReflowExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Reflow.Example.tsx') as string; +const VerticalBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/VerticalStackedBarChart/VerticalStackedBarChart.Plotly.Example.tsx') as string; export class VerticalBarChartPage extends React.Component { public render(): JSX.Element { @@ -63,6 +66,9 @@ export class VerticalBarChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx index 6027f9efd3523..17872efd4698e 100644 --- a/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/VerticalStackedBarChart/index.stories.tsx @@ -6,6 +6,7 @@ import { VerticalStackedBarChartCalloutExample } from './VerticalStackedBarChart import { VerticalStackedBarChartCustomAccessibilityExample } from './VerticalStackedBarChart.CustomAccessibility.Example'; import { VerticalStackedBarChartDateAxisExample } from './VerticalStackedBarChart.DateAxis.Example'; import { VerticalStackedBarChartStyledExample } from './VerticalStackedBarChart.Styled.Example'; +import { VerticalStackedBarChartPlotlyExample } from './VerticalStackedBarChart.Plotly.Example'; export const Basic = () => ; @@ -19,6 +20,8 @@ export const Styled = () => ; export const Tooltip = () => ; +export const Plotly = () => ; + export default { title: 'Components/VerticalStackedBarChart', }; From 65fa8fde6c72fb97aea99a5de2f2bc7f958bc6a4 Mon Sep 17 00:00:00 2001 From: srmukher <120183316+srmukher@users.noreply.github.com> Date: Thu, 21 Nov 2024 17:20:06 +0530 Subject: [PATCH 4/5] Rendering Horizontal bar chart with data in Plotly schema (#33310) --- .../react-charting/etc/react-charting.api.md | 4 + packages/charts/react-charting/src/index.ts | 2 +- .../react-charting/src/plotly-utils.tsx | 42 ++++++ .../HorizontalBarChart.Plotly.Example.tsx | 122 ++++++++++++++++++ .../HorizontalBarChart.doc.tsx | 8 ++ .../HorizontalBarChartPage.tsx | 6 + .../HorizontalBarChart/index.stories.tsx | 3 + 7 files changed, 186 insertions(+), 1 deletion(-) create mode 100644 packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Plotly.Example.tsx diff --git a/packages/charts/react-charting/etc/react-charting.api.md b/packages/charts/react-charting/etc/react-charting.api.md index 30597a009e536..a57b748d2fba3 100644 --- a/packages/charts/react-charting/etc/react-charting.api.md +++ b/packages/charts/react-charting/etc/react-charting.api.md @@ -39,6 +39,10 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage'; // @public (undocumented) export const ChartHoverCard: React_2.FunctionComponent; +// Warning: (ae-forgotten-export) The symbol "IPlotlySchemaHBC" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export function convertPlotlyToHorizontalBarChartProps(plotlyData: IPlotlySchemaHBC): IChartProps[]; // Warning: (ae-forgotten-export) The symbol "IPlotlySchema" needs to be exported by the entry point index.d.ts // // @public (undocumented) diff --git a/packages/charts/react-charting/src/index.ts b/packages/charts/react-charting/src/index.ts index 8a9ddfe566c4e..1d4db07fa31b0 100644 --- a/packages/charts/react-charting/src/index.ts +++ b/packages/charts/react-charting/src/index.ts @@ -135,7 +135,7 @@ export { DataVizPalette, getColorFromToken, getNextColor } from './utilities/col export { DataVizGradientPalette, getGradientFromToken, getNextGradient } from './utilities/gradients'; export type { IGaugeChartProps, IGaugeChartSegment, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart'; export { GaugeChart, GaugeChartVariant, GaugeValueFormat } from './GaugeChart'; -export { convertPlotlyToILineChartProps } from './plotly-utils'; +export { convertPlotlyToILineChartProps, convertPlotlyToHorizontalBarChartProps } from './plotly-utils'; export { renderChartFromPlotlyJson } from './utilities/helpers'; import './version'; diff --git a/packages/charts/react-charting/src/plotly-utils.tsx b/packages/charts/react-charting/src/plotly-utils.tsx index b69e1d0c0bf4f..c80cc65ae65e3 100644 --- a/packages/charts/react-charting/src/plotly-utils.tsx +++ b/packages/charts/react-charting/src/plotly-utils.tsx @@ -1,3 +1,4 @@ +import { IChartProps } from './index'; import { ILineChartProps } from './LineChart'; interface IPlotlySchema { @@ -56,3 +57,44 @@ export function convertPlotlyToILineChartProps(plotlySchema: IPlotlySchema): ILi }, }; } + +export interface IPlotlySchemaHBC { + data: Array<{ + type: string; + orientation: string; + x: number[]; + y: string[]; + hovertext: string[]; + marker: { + color: string[]; + }; + }>; + layout: { + title: string; + xaxis: { + title: string; + }; + yaxis: { + title: string; + }; + }; +} + +export function convertPlotlyToHorizontalBarChartProps(plotlyData: IPlotlySchemaHBC): IChartProps[] { + return plotlyData.data[0].y.map((title: string, index: number) => { + const [xAxisCalloutData, yAxisCalloutData] = plotlyData.data[0].hovertext[index].split(', '); + + return { + chartTitle: title, + chartData: [ + { + legend: title, + horizontalBarChartdata: { x: plotlyData.data[0].x[index], y: 15000 }, + color: plotlyData.data[0].marker.color[index], + xAxisCalloutData, + yAxisCalloutData, + }, + ], + }; + }); +} diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Plotly.Example.tsx new file mode 100644 index 0000000000000..c167f9939b833 --- /dev/null +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Plotly.Example.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import { + ChartDataMode, + HorizontalBarChart, + IHorizontalBarChartProps, + DataVizPalette, + getColorFromToken, + convertPlotlyToHorizontalBarChartProps, +} from '@fluentui/react-charting'; +import { Toggle } from '@fluentui/react/lib/Toggle'; + +interface IHorizontalBarChartState { + chartMode: ChartDataMode; + enableGradient: boolean; + roundCorners: boolean; +} + +export class HorizontalBarChartPlotlyExample extends React.Component< + IHorizontalBarChartProps, + IHorizontalBarChartState +> { + constructor(props: IHorizontalBarChartProps) { + super(props); + this.state = { + chartMode: 'default', + enableGradient: false, + roundCorners: false, + }; + } + + public render(): JSX.Element { + return
{this._basicExample()}
; + } + + private _onChangeChartMode = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ chartMode: checked ? ('percentage' as ChartDataMode) : ('default' as ChartDataMode) }); + }; + + private _onToggleGradient = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ enableGradient: checked }); + }; + + private _onToggleRoundCorners = (ev: React.MouseEvent, checked: boolean) => { + this.setState({ roundCorners: checked }); + }; + + private _basicExample() { + const hideRatio: boolean[] = [true, false]; + + const data = { + data: [ + { + type: 'bar', + orientation: 'h', + x: [1543, 800, 8888, 15888, 11444, 14000, 9855, 4250], + y: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'], + hovertext: [ + '2020/04/30, 10%', + '2020/04/30, 5%', + '2020/04/30, 59%', + '2020/04/30, 106%', + '2020/04/30, 76%', + '2020/04/30, 93%', + '2020/04/30, 66%', + '2020/04/30, 28%', + ], + marker: { + color: [ + getColorFromToken(DataVizPalette.color1), + getColorFromToken(DataVizPalette.color2), + getColorFromToken(DataVizPalette.color3), + getColorFromToken(DataVizPalette.color4), + getColorFromToken(DataVizPalette.color5), + getColorFromToken(DataVizPalette.color6), + getColorFromToken(DataVizPalette.color7), + getColorFromToken(DataVizPalette.color8), + ], + }, + }, + ], + layout: { + title: 'Horizontal Bar Chart', + xaxis: { + title: 'Values', + }, + yaxis: { + title: 'Categories', + }, + }, + }; + + const dataToRender = convertPlotlyToHorizontalBarChartProps(data); + + return ( + <> +
+ +    + +    + +
+ +
+ +
+ + ); + } +} diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx index e96b24c691307..bef653e2fb98b 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.doc.tsx @@ -7,6 +7,7 @@ import { HorizontalBarChartCustomCalloutExample } from './HorizontalBarChart.Cus import { HorizontalBarChartBenchmarkExample } from './HorizontalBarChart.Benchmark.Example'; import { HorizontalBarChartCustomAccessibilityExample } from './HorizontalBarChart.CustomAccessibility.Example'; import { HorizontalBarChartVariantExample } from './HorizontalBarChart.Variant.Example'; +import { HorizontalBarChartPlotlyExample } from './HorizontalBarChart.Plotly.Example'; const HorizontalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx') as string; @@ -18,6 +19,8 @@ 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; +const HorizontalBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Plotly.Example.tsx') as string; export const HorizontalBarChartPageProps: IDocPageProps = { title: 'HorizontalBarChart', @@ -50,6 +53,11 @@ export const HorizontalBarChartPageProps: IDocPageProps = { code: HorizontalBarChartCustomCalloutExampleCode, view: , }, + { + title: 'HorizontalBarChart Plotly', + code: HorizontalBarChartPlotlyExampleCode, + 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'), diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx index 0f4b992775e2f..1e5c2c184017c 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChartPage.tsx @@ -13,6 +13,7 @@ import { HorizontalBarChartCustomCalloutExample } from './HorizontalBarChart.Cus import { HorizontalBarChartBenchmarkExample } from './HorizontalBarChart.Benchmark.Example'; import { HorizontalBarChartCustomAccessibilityExample } from './HorizontalBarChart.CustomAccessibility.Example'; import { HorizontalBarChartVariantExample } from './HorizontalBarChart.Variant.Example'; +import { HorizontalBarChartPlotlyExample } from './HorizontalBarChart.Plotly.Example'; const HorizontalBarChartBasicExampleCode = require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Basic.Example.tsx') as string; @@ -24,6 +25,8 @@ 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; +const HorizontalBarChartPlotlyExampleCode = + require('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.plotly.Example.tsx') as string; export class HorizontalBarChartPage extends React.Component { public render(): JSX.Element { @@ -51,6 +54,9 @@ export class HorizontalBarChartPage extends React.Component + + + } propertiesTables={ diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx index 2f1818191f11d..9cb762dd47d51 100644 --- a/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx +++ b/packages/react-examples/src/react-charting/HorizontalBarChart/index.stories.tsx @@ -5,6 +5,7 @@ import { HorizontalBarChartBenchmarkExample } from './HorizontalBarChart.Benchma import { HorizontalBarChartCustomAccessibilityExample } from './HorizontalBarChart.CustomAccessibility.Example'; import { HorizontalBarChartCustomCalloutExample } from './HorizontalBarChart.CustomCallout.Example'; import { HorizontalBarChartVariantExample } from './HorizontalBarChart.Variant.Example'; +import { HorizontalBarChartPlotlyExample } from './HorizontalBarChart.Plotly.Example'; export const Basic = () => ; @@ -16,6 +17,8 @@ export const CustomCallout = () => ; export const Variant = () => ; +export const Plotly = () => ; + export default { title: 'Components/HorizontalBarChart', }; From 184793172d65637e6aa736db203c065fafb5cb2f Mon Sep 17 00:00:00 2001 From: krkshitij <110246001+krkshitij@users.noreply.github.com> Date: Thu, 21 Nov 2024 18:02:29 +0530 Subject: [PATCH 5/5] Update donut chart plotly example (#33315) --- .../react-charting/src/utilities/helpers.tsx | 14 ++++----- .../DonutChart/DonutChart.Plotly.Example.tsx | 30 ++++++++++++++++++- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/charts/react-charting/src/utilities/helpers.tsx b/packages/charts/react-charting/src/utilities/helpers.tsx index b26032ce05cf7..671974ca85dda 100644 --- a/packages/charts/react-charting/src/utilities/helpers.tsx +++ b/packages/charts/react-charting/src/utilities/helpers.tsx @@ -12,21 +12,21 @@ const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => { return { legend: label, data: obj.data[0].values[index], - color: obj.data[0].marker?.color || getNextColor(index), + color: getNextColor(index), }; }), }; - // const width: number = obj.layout.width; - // const height: number = obj.layout.height; - // const innerRadius: number = (Math.min(width, height) * obj.data[0].hole) / 2; + const width: number = obj.layout.width || 440; + const height: number = obj.layout.height || 220; + const innerRadius: number = (Math.min(width, height - 40) * (obj.data[0].hole || 0.5)) / 2; return { data: donutData, hideLegend: !obj.layout.showlegend, - // width, - // height, - // innerRadius, + width, + height, + innerRadius, }; }; diff --git a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx index 5b4e5568549d2..4f87f49d0d620 100644 --- a/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx +++ b/packages/react-examples/src/react-charting/DonutChart/DonutChart.Plotly.Example.tsx @@ -6,14 +6,42 @@ const plotlyJson = { { hole: 0.6, type: 'pie', + frame: null, + marker: { + line: { + color: 'transparent', + }, + color: 'rgba(31,119,180,1)', + fillcolor: 'rgba(31,119,180,1)', + }, + labelssrc: 'koolio:2:346057', labels: ['Rural', 'Suburban', 'Urban'], + valuessrc: 'koolio:2:95d156', values: [125, 625, 1625], }, ], layout: { title: 'Donut w Ply', - showlegend: false, + xaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + yaxis: { + showgrid: false, + zeroline: false, + showticklabels: false, + }, + margin: { + b: 40, + l: 60, + r: 10, + t: 25, + }, + hovermode: 'closest', + showlegend: true, }, + frames: [], }; export class DonutChartPlotlyExample extends React.Component<{}, {}> {