Charts using Plotly schema data

packages/charts/react-charting/etc/react-charting.api.md

@@ -39,6 +39,15 @@ export type ChartDataMode = 'default' | 'fraction' | 'percentage';
 // @public (undocumented)
 export const ChartHoverCard: React_2.FunctionComponent<IChartHoverCardProps>;
 
+// 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)
+export function convertPlotlyToILineChartProps(plotlySchema: IPlotlySchema): ILineChartProps;
+
 // @public (undocumented)
 export const DataVizGradientPalette: {
     gradient1: string;
@@ -1589,6 +1598,9 @@ export enum NodesComposition {
 // @public
 export const PieChart: React_2.FunctionComponent<IPieChartProps>;
 
+// @public (undocumented)
+export const renderChartFromPlotlyJson: (obj: any) => React_2.ReactNode;
+
 // @public
 export const SankeyChart: React_2.FunctionComponent<ISankeyChartProps>;
 

packages/charts/react-charting/src/index.ts

@@ -135,5 +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, convertPlotlyToHorizontalBarChartProps } from './plotly-utils';
+export { renderChartFromPlotlyJson } from './utilities/helpers';
 
 import './version';

packages/charts/react-charting/src/plotly-utils.tsx

@@ -0,0 +1,100 @@
+import { IChartProps } from './index';
+import { ILineChartProps } from './LineChart';
+
+interface IPlotlySchema {
+  data: Array<{
+    type: string;
+    mode: string;
+    name: string;
+    x: Array<number | string | Date>;
+    y: Array<number>;
+    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,
+    },
+  };
+}
+
+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,
+        },
+      ],
+    };
+  });
+}

packages/charts/react-charting/src/utilities/helpers.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { DonutChart, IDonutChartProps } from '../components/DonutChart/index';
+import { IChartProps, IVerticalStackedChartProps } from '../types/IDataPoint';
+import { getNextColor } from './colors';
+import { IVerticalStackedBarChartProps, VerticalStackedBarChart } from '../components/VerticalStackedBarChart/index';
+
+const transformPlotlyJsonToDonutProps = (obj: any): IDonutChartProps => {
+  const donutData: IChartProps = {
+    chartTitle: obj.layout.title,
+    chartData: obj.data[0].labels.map((label: string, index: number) => {
+      return {
+        legend: label,
+        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,
+  };
+};
+
+export const renderChartFromPlotlyJson = (obj: any): React.ReactNode => {
+  switch (obj.data[0].type) {
+    case 'pie':
+      return <DonutChart {...transformPlotlyJsonToDonutProps(obj)} />;
+    case 'bar':
+      return <VerticalStackedBarChart {...transformPlotlyJsonToColumnProps(obj)} />;
+    default:
+      return null;
+  }
+};

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);
+  }
+}

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: <DonutChartCustomAccessibilityExample />,
     },
+    {
+      title: 'DonutChart Plotly',
+      code: DonutChartPlotlyExampleCode,
+      view: <DonutChartPlotlyExample />,
+    },
   ],
   overview: require<string>('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartOverview.md'),
   bestPractices: require<string>('!raw-loader?esModule=false!@fluentui/react-examples/src/react-charting/DonutChart/docs/DonutChartBestPractices.md'),

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<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -42,6 +45,9 @@ export class DonutChartPage extends React.Component<IComponentDemoPageProps, {}>
             <ExampleCard title="DonutChart Custom Accessibility" code={DonutChartCustomAccessibilityExampleCode}>
               <DonutChartCustomAccessibilityExample />
             </ExampleCard>
+            <ExampleCard title="DonutChart Plotly" code={DonutChartPlotlyExampleCode}>
+              <DonutChartPlotlyExample />
+            </ExampleCard>
           </div>
         }
         propertiesTables={

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 = () => <DonutChartBasicExample />;
 
@@ -13,6 +14,8 @@ export const CustomCallout = () => <DonutChartCustomCalloutExample />;
 
 export const Dynamic = () => <DonutChartDynamicExample />;
 
+export const Plotly = () => <DonutChartPlotlyExample />;
+
 export default {
   title: 'Components/DonutChart',
 };