@fluentui/react-charts 0.0.0-nightly-20250423-1342.1 → 0.0.0-nightly-20250423-1415.1

package/lib/components/CommonComponents/useChartPopoverStyles.styles.js

@@ -0,0 +1,178 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */
+export const popoverClassNames = {
+  calloutContentRoot: 'fui-cart__calloutContentRoot',
+  calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',
+  calloutContentX: 'fui-cart__calloutContentX',
+  calloutBlockContainer: 'fui-cart__calloutBlockContainer',
+  calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',
+  calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',
+  shapeStyles: 'fui-cart__shapeStyles',
+  calloutlegendText: 'fui-cart__calloutlegendText',
+  calloutContentY: 'fui-cart__calloutContentY',
+  descriptionMessage: 'fui-cart__descriptionMessage',
+  ratio: 'fui-cart__ratio',
+  numerator: 'fui-cart__numerator',
+  denominator: 'fui-cart__denominator',
+  calloutInfoContainer: 'fui-cart__calloutInfoContainer',
+  calloutContainer: 'fui-cart__calloutContainer'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  calloutContentRoot: {
+    mc9l5x: "f1bxpd7w",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    z8tnut: "f1dvrhzg",
+    z189sj: ["fjnv7mu", "fae8789"],
+    Byoj8tv: "f1av7aef",
+    uwmqm3: ["fae8789", "fjnv7mu"],
+    De3pzq: "fxugw4r",
+    jy2i9i: "fronft5"
+  },
+  calloutDateTimeContainer: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f1869bpl"
+  },
+  calloutContentX: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    abs64n: "fp25eh",
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainer: {
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainerCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    B6of3ja: "f7jvbu2"
+  },
+  calloutBlockContainerNonCartesian: {
+    Be2twd7: "fojgt09",
+    Bg96gwp: "f82itaf",
+    bo4z9n: "fg7a56h"
+  },
+  calloutBlockContainertoDrawShapefalse: {
+    bo4z9n: "fg7a56h",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  calloutBlockContainertoDrawShapetrue: {
+    mc9l5x: "fwk3njj"
+  },
+  shapeStyles: {
+    t21cq0: ["f1vcna3q", "foyynoy"]
+  },
+  calloutLegendText: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    B1cpy0k: "fig6os7"
+  },
+  calloutContentY: {
+    B1cpy0k: "fig6os7"
+  },
+  calloutContentYCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "flh3ekv",
+    Bg96gwp: "faaz57k"
+  },
+  calloutContentYNonCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fojgt09",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcen8rp"
+  },
+  descriptionMessage: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    B6of3ja: "f1gaxbfw",
+    z8tnut: "f1ngh7ph",
+    B4j52fo: "f1pgliyk"
+  },
+  ratio: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fcpl73t",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"],
+    sj55zd: "f19n0e5"
+  },
+  numerator: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  denominator: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  calloutInfoContainer: {
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  calloutContainer: {
+    a6j6cd: "f1j86lqe",
+    B93v9kj: "f15mrrko"
+  }
+}, {
+  d: [".f1bxpd7w{display:contents;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f1dvrhzg{padding-top:11px 16px 10px 16px;}", ".fjnv7mu{padding-right:11px 16px 10px 16px;}", ".fae8789{padding-left:11px 16px 10px 16px;}", ".f1av7aef{padding-bottom:11px 16px 10px 16px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fp25eh{opacity:0.8;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f7jvbu2{margin-top:13px;}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".f82itaf{line-height:22px;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fwk3njj{display:inline-grid;}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".flh3ekv{font-weight:var(--fontWeightBold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f1pgliyk{border-top-width:1px solid var(--colorNeutralStroke2);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f19n0e5{color:var(--colorNeutralForeground1);}"],
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fg7a56h selectors{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.fig6os7 selectors{color:rgb(255, 255, 255);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1j86lqe{fill:WindowText;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const usePopoverStyles_unstable = props => {
+  const {
+    isCartesian
+  } = props;
+  const baseStyles = useStyles();
+  return {
+    calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/),
+    calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/),
+    calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/),
+    calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/, isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),
+    calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/),
+    calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/),
+    shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),
+    calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/),
+    calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/, isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),
+    descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/),
+    ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/),
+    numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/),
+    denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/),
+    calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),
+    calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)
+  };
+};
+//# sourceMappingURL=useChartPopoverStyles.styles.js.map

package/lib/components/CommonComponents/useChartPopoverStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","HighContrastSelectorBlack","HighContrastSelector","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","calloutBlockContainerCartesian","B6of3ja","calloutBlockContainerNonCartesian","bo4z9n","t21cq0","calloutLegendText","B1cpy0k","calloutContentYCartesian","calloutContentYNonCartesian","B4j52fo","Frg6f3","a6j6cd","B93v9kj","d","p","m","usePopoverStyles_unstable","props","isCartesian","baseStyles"],"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const popoverClassNames = {\n    calloutContentRoot: 'fui-cart__calloutContentRoot',\n    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n    calloutContentX: 'fui-cart__calloutContentX',\n    calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n    shapeStyles: 'fui-cart__shapeStyles',\n    calloutlegendText: 'fui-cart__calloutlegendText',\n    calloutContentY: 'fui-cart__calloutContentY',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    ratio: 'fui-cart__ratio',\n    numerator: 'fui-cart__numerator',\n    denominator: 'fui-cart__denominator',\n    calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n    calloutContainer: 'fui-cart__calloutContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    calloutContentRoot: {\n        display: 'contents',\n        overflow: 'hidden',\n        ...shorthands.padding('11px 16px 10px 16px'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundBlendMode: 'normal, luminosity'\n    },\n    calloutDateTimeContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between'\n    },\n    calloutContentX: {\n        ...typographyStyles.caption1,\n        opacity: '0.8',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainer: {\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainerCartesian: {\n        ...typographyStyles.caption1,\n        marginTop: '13px'\n    },\n    calloutBlockContainerNonCartesian: {\n        fontSize: tokens.fontSizeHero700,\n        lineHeight: '22px',\n        '& selectors': {\n            [HighContrastSelector]: {\n                forcedColorAdjust: 'none'\n            }\n        }\n    },\n    calloutBlockContainertoDrawShapefalse: {\n        '& selectors': {\n            [HighContrastSelector]: {\n                forcedColorAdjust: 'none'\n            }\n        },\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    calloutBlockContainertoDrawShapetrue: {\n        display: 'inline-grid'\n    },\n    shapeStyles: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    calloutLegendText: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        '& selectors': {\n            [HighContrastSelectorBlack]: {\n                color: 'rgb(255, 255, 255)'\n            }\n        }\n    },\n    calloutContentY: {\n        '& selectors': {\n            [HighContrastSelectorBlack]: {\n                color: 'rgb(255, 255, 255)'\n            }\n        }\n    },\n    calloutContentYCartesian: {\n        ...typographyStyles.subtitle2Stronger\n    },\n    calloutContentYNonCartesian: {\n        ...typographyStyles.title2\n    },\n    descriptionMessage: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        marginTop: tokens.spacingVerticalMNudge,\n        paddingTop: tokens.spacingVerticalMNudge,\n        ...shorthands.borderTop(`1px solid ${tokens.colorNeutralStroke2}`)\n    },\n    ratio: {\n        ...typographyStyles.caption2,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        color: tokens.colorNeutralForeground1\n    },\n    numerator: {\n        ...typographyStyles.caption2Strong\n    },\n    denominator: {\n        ...typographyStyles.caption2Strong\n    },\n    calloutInfoContainer: {\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    calloutContainer: {\n        [HighContrastSelector]: {\n            fill: 'WindowText',\n            forcedColorAdjust: 'none'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const usePopoverStyles_unstable = (props)=>{\n    const { isCartesian } = props;\n    const baseStyles = useStyles();\n    return {\n        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/ ),\n        calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),\n        calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),\n        calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n        calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),\n        calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),\n        shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),\n        calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),\n        calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n        descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ ),\n        ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/ ),\n        numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/ ),\n        denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/ ),\n        calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n        calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -0,0 +1,197 @@
+/* eslint-disable @typescript-eslint/naming-convention */ import * as React from 'react';
+import { decodeBase64Fields, isArrayOrTypedArray, isDateArray, isNumberArray, mapFluentChart, sanitizeJson } from '@fluentui/chart-utilities';
+import { tokens } from '@fluentui/react-theme';
+import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';
+import { webLightTheme } from '@fluentui/tokens';
+import * as d3Color from 'd3-color';
+import { isMonthArray, correctYearMonth, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps } from './PlotlySchemaAdapter';
+import { DonutChart } from '../DonutChart/index';
+import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
+import { LineChart } from '../LineChart/index';
+import { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';
+import { AreaChart } from '../AreaChart/index';
+import { HeatMapChart } from '../HeatMapChart/index';
+import { SankeyChart } from '../SankeyChart/SankeyChart';
+import { GaugeChart } from '../GaugeChart/index';
+import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
+import { VerticalBarChart } from '../VerticalBarChart/index';
+import { toImage } from './imageExporter';
+import { ScatterChart } from '../ScatterChart/index';
+const useColorMapping = ()=>{
+    const colorMap = React.useRef(new Map());
+    return colorMap;
+};
+const useIsDarkTheme = ()=>{
+    const parentV9Theme = React.useContext(V9ThemeContext);
+    const v9Theme = parentV9Theme ? parentV9Theme : webLightTheme;
+    // Get background and foreground colors
+    const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);
+    const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);
+    const isDarkTheme = backgroundColor.l < foregroundColor.l;
+    return isDarkTheme;
+};
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */ export const DeclarativeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { plotlySchema } = sanitizeJson(props.chartSchema);
+    const chart = mapFluentChart(plotlySchema);
+    if (!chart.isValid) {
+        throw new Error(`Invalid chart schema: ${chart.errorMessage}`);
+    }
+    let plotlyInput = plotlySchema;
+    try {
+        plotlyInput = decodeBase64Fields(plotlyInput);
+    } catch (error) {
+        throw new Error(`Failed to decode plotly schema: ${error}`);
+    }
+    const plotlyInputWithValidData = {
+        ...plotlyInput,
+        data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace[0]])
+    };
+    let { selectedLegends } = plotlySchema;
+    const colorMap = useColorMapping();
+    const isDarkTheme = useIsDarkTheme();
+    const chartRef = React.useRef(null);
+    if (!isArrayOrTypedArray(selectedLegends)) {
+        selectedLegends = [];
+    }
+    const [activeLegends, setActiveLegends] = React.useState(selectedLegends);
+    const onActiveLegendsChange = (keys)=>{
+        setActiveLegends(keys);
+        if (props.onSchemaChange) {
+            props.onSchemaChange({
+                plotlySchema: {
+                    plotlyInput,
+                    selectedLegends: keys
+                }
+            });
+        }
+    };
+    React.useEffect(()=>{
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { plotlySchema } = sanitizeJson(props.chartSchema);
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { selectedLegends } = plotlySchema;
+        setActiveLegends(selectedLegends !== null && selectedLegends !== void 0 ? selectedLegends : []);
+    }, [
+        props.chartSchema
+    ]);
+    const multiSelectLegendProps = {
+        canSelectMultipleLegends: true,
+        onChange: onActiveLegendsChange,
+        selectedLegends: activeLegends
+    };
+    const commonProps = {
+        legendProps: multiSelectLegendProps,
+        componentRef: chartRef
+    };
+    const renderLineAreaScatter = (plotlyData, isAreaChart)=>{
+        var _plotlyData_;
+        const isScatterMarkers = ((_plotlyData_ = plotlyData[0]) === null || _plotlyData_ === void 0 ? void 0 : _plotlyData_.mode) === 'markers';
+        const chartProps = {
+            ...transformPlotlyJsonToScatterChartProps({
+                data: plotlyData,
+                layout: plotlyInput.layout
+            }, isAreaChart, colorMap, isDarkTheme),
+            ...commonProps
+        };
+        if (isAreaChart) {
+            return /*#__PURE__*/ React.createElement(AreaChart, chartProps);
+        }
+        if (isScatterMarkers) {
+            return /*#__PURE__*/ React.createElement(ScatterChart, chartProps);
+        }
+        return /*#__PURE__*/ React.createElement(LineChart, chartProps);
+    };
+    const checkAndRenderChart = (isAreaChart = false)=>{
+        let fallbackVSBC = false;
+        const xValues = plotlyInputWithValidData.data[0].x;
+        const isXDate = isDateArray(xValues);
+        const isXNumber = isNumberArray(xValues);
+        const isXMonth = isMonthArray(xValues);
+        if (isXDate || isXNumber) {
+            return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);
+        } else if (isXMonth) {
+            const updatedData = plotlyInputWithValidData.data.map((dataPoint)=>({
+                    ...dataPoint,
+                    x: correctYearMonth(dataPoint.x)
+                }));
+            return renderLineAreaScatter(updatedData, isAreaChart);
+        }
+        // Unsupported schema, render as VerticalStackedBarChart
+        fallbackVSBC = true;
+        return /*#__PURE__*/ React.createElement(VerticalStackedBarChart, {
+            ...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC),
+            ...commonProps
+        });
+    };
+    // TODO
+    const exportAsImage = React.useCallback((opts)=>{
+        var _chartRef_current;
+        return toImage((_chartRef_current = chartRef.current) === null || _chartRef_current === void 0 ? void 0 : _chartRef_current.chartContainer, {
+            background: tokens.colorNeutralBackground1,
+            scale: 5,
+            ...opts
+        });
+    }, []);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            exportAsImage
+        }), [
+        exportAsImage
+    ]);
+    switch(chart.type){
+        case 'donut':
+            return /*#__PURE__*/ React.createElement(DonutChart, {
+                ...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'horizontalbar':
+            return /*#__PURE__*/ React.createElement(HorizontalBarChartWithAxis, {
+                ...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'groupedverticalbar':
+            return /*#__PURE__*/ React.createElement(GroupedVerticalBarChart, {
+                ...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'verticalstackedbar':
+            return /*#__PURE__*/ React.createElement(VerticalStackedBarChart, {
+                ...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'heatmap':
+            return /*#__PURE__*/ React.createElement(HeatMapChart, {
+                ...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData),
+                ...commonProps,
+                legendProps: {}
+            });
+        case 'sankey':
+            return /*#__PURE__*/ React.createElement(SankeyChart, {
+                ...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'gauge':
+            return /*#__PURE__*/ React.createElement(GaugeChart, {
+                ...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'verticalbar':
+            return /*#__PURE__*/ React.createElement(VerticalBarChart, {
+                ...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        // TODO: Add 'scatter' as a separate chart type
+        case 'area':
+        case 'line':
+        case 'fallback':
+            // Need recheck for area chart as we don't have ability to check for valid months in previous step
+            const isAreaChart = plotlyInputWithValidData.data.some((series)=>series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup);
+            return checkAndRenderChart(isAreaChart);
+        default:
+            var _plotlyInputWithValidData_data_;
+            throw new Error(`Unsupported chart type :${(_plotlyInputWithValidData_data_ = plotlyInputWithValidData.data[0]) === null || _plotlyInputWithValidData_data_ === void 0 ? void 0 : _plotlyInputWithValidData_data_.type}`);
+    }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';

package/lib/components/DeclarativeChart/DeclarativeChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType } from '@fluentui/chart-utilities';\nimport {\n  decodeBase64Fields,\n  isArrayOrTypedArray,\n  isDateArray,\n  isNumberArray,\n  mapFluentChart,\n  sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';\nimport { Theme, webLightTheme } from '@fluentui/tokens';\nimport * as d3Color from 'd3-color';\n\nimport {\n  isMonthArray,\n  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart, LineChartProps } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart, AreaChartProps } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\nimport { ImageExportOptions, toImage } from './imageExporter';\nimport { Chart } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n// TODO\n// import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\n// const ResponsiveDonutChart = withResponsiveContainer(DonutChart);\n// const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\n// const ResponsiveLineChart = withResponsiveContainer(LineChart);\n// const ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\n// const ResponsiveAreaChart = withResponsiveContainer(AreaChart);\n// const ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\n// const ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\n// const ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\n// const ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\n// const ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<IDeclarativeChart>;\n}\n\n/**\n * {@docCategory DeclarativeChart}\n */\nexport interface IDeclarativeChart {\n  exportAsImage: (opts?: ImageExportOptions) => Promise<string>;\n}\n\nconst useColorMapping = () => {\n  const colorMap = React.useRef(new Map<string, string>());\n  return colorMap;\n};\n\nconst useIsDarkTheme = (): boolean => {\n  const parentV9Theme = React.useContext(V9ThemeContext) as Theme;\n  const v9Theme: Theme = parentV9Theme ? parentV9Theme : webLightTheme;\n\n  // Get background and foreground colors\n  const backgroundColor = d3Color.hsl(v9Theme.colorNeutralBackground1);\n  const foregroundColor = d3Color.hsl(v9Theme.colorNeutralForeground1);\n\n  const isDarkTheme = backgroundColor.l < foregroundColor.l;\n\n  return isDarkTheme;\n};\n\n/**\n * DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n  HTMLDivElement,\n  DeclarativeChartProps\n>((props, forwardedRef) => {\n  const { plotlySchema } = sanitizeJson(props.chartSchema);\n  const chart: OutputChartType = mapFluentChart(plotlySchema);\n  if (!chart.isValid) {\n    throw new Error(`Invalid chart schema: ${chart.errorMessage}`);\n  }\n  let plotlyInput = plotlySchema as PlotlySchema;\n  try {\n    plotlyInput = decodeBase64Fields(plotlyInput);\n  } catch (error) {\n    throw new Error(`Failed to decode plotly schema: ${error}`);\n  }\n  const plotlyInputWithValidData: PlotlySchema = {\n    ...plotlyInput,\n    data: chart.validTracesInfo!.map(trace => plotlyInput.data[trace[0]]),\n  };\n\n  let { selectedLegends } = plotlySchema;\n  const colorMap = useColorMapping();\n  const isDarkTheme = useIsDarkTheme();\n  const chartRef = React.useRef<Chart>(null);\n\n  if (!isArrayOrTypedArray(selectedLegends)) {\n    selectedLegends = [];\n  }\n\n  const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);\n  const onActiveLegendsChange = (keys: string[]) => {\n    setActiveLegends(keys);\n    if (props.onSchemaChange) {\n      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });\n    }\n  };\n\n  React.useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { plotlySchema } = sanitizeJson(props.chartSchema);\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { selectedLegends } = plotlySchema;\n    setActiveLegends(selectedLegends ?? []);\n  }, [props.chartSchema]);\n\n  const multiSelectLegendProps = {\n    canSelectMultipleLegends: true,\n    onChange: onActiveLegendsChange,\n    selectedLegends: activeLegends,\n  };\n\n  const commonProps = {\n    legendProps: multiSelectLegendProps,\n    componentRef: chartRef,\n  };\n\n  const renderLineAreaScatter = (plotlyData: Data[], isAreaChart: boolean): JSX.Element => {\n    const isScatterMarkers = (plotlyData[0] as PlotData)?.mode === 'markers';\n    const chartProps: LineChartProps | AreaChartProps = {\n      ...transformPlotlyJsonToScatterChartProps(\n        { data: plotlyData, layout: plotlyInput.layout },\n        isAreaChart,\n        colorMap,\n        isDarkTheme,\n      ),\n      ...commonProps,\n    };\n    if (isAreaChart) {\n      return <AreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ScatterChart {...chartProps} />;\n    }\n    return <LineChart {...chartProps} />;\n  };\n\n  const checkAndRenderChart = (isAreaChart: boolean = false) => {\n    let fallbackVSBC = false;\n    const xValues = (plotlyInputWithValidData.data[0] as PlotData).x;\n    const isXDate = isDateArray(xValues);\n    const isXNumber = isNumberArray(xValues);\n    const isXMonth = isMonthArray(xValues);\n    if (isXDate || isXNumber) {\n      return renderLineAreaScatter(plotlyInputWithValidData.data, isAreaChart);\n    } else if (isXMonth) {\n      const updatedData = plotlyInputWithValidData.data.map((dataPoint: PlotData) => ({\n        ...dataPoint,\n        x: correctYearMonth(dataPoint.x),\n      }));\n      return renderLineAreaScatter(updatedData, isAreaChart);\n    }\n    // Unsupported schema, render as VerticalStackedBarChart\n    fallbackVSBC = true;\n    return (\n      <VerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {\n    return toImage(chartRef.current?.chartContainer, {\n      background: tokens.colorNeutralBackground1,\n      scale: 5,\n      ...opts,\n    });\n  }, []);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      exportAsImage,\n    }),\n    [exportAsImage],\n  );\n\n  switch (chart.type) {\n    case 'donut':\n      return (\n        <DonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <HorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <GroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <VerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <HeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <SankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <GaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <VerticalBarChart\n          {...transformPlotlyJsonToVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    // TODO: Add 'scatter' as a separate chart type\n    case 'area':\n    case 'line':\n    case 'fallback':\n      // Need recheck for area chart as we don't have ability to check for valid months in previous step\n      const isAreaChart = plotlyInputWithValidData.data.some(\n        (series: PlotData) => series.fill === 'tonexty' || series.fill === 'tozeroy' || !!series.stackgroup,\n      );\n      return checkAndRenderChart(isAreaChart);\n    default:\n      throw new Error(`Unsupported chart type :${plotlyInputWithValidData.data[0]?.type}`);\n  }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isDateArray","isNumberArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","isMonthArray","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","toImage","ScatterChart","useColorMapping","colorMap","useRef","Map","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","plotlyInput","error","plotlyInputWithValidData","data","validTracesInfo","map","trace","selectedLegends","chartRef","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","commonProps","legendProps","componentRef","renderLineAreaScatter","plotlyData","isAreaChart","isScatterMarkers","mode","chartProps","layout","checkAndRenderChart","fallbackVSBC","xValues","x","isXDate","isXNumber","isXMonth","updatedData","dataPoint","exportAsImage","useCallback","opts","current","chartContainer","background","scale","useImperativeHandle","type","some","series","fill","stackgroup","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}