@fluentui/react-charts 9.1.10 → 9.2.0

package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  chartTitle: 'fui-cart__chartTitle',\n  chart: 'fui-cart__chart',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    width: '100%',\n    height: '100%',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: {\n    ...typographyStyles.caption2Strong,\n    fontStyle: 'normal',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const useCartesianChartStyles = (props: CartesianChartProps): CartesianChartStyles => {\n  const _useRtl = useRtl();\n  const baseStyles = useStyles();\n  return {\n    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, props.styles?.root),\n    chartWrapper: mergeClasses(\n      cartesianchartClassNames.chartWrapper,\n      props.reflowProps?.mode === 'min-width' ? baseStyles.chartWrapper : '',\n      props.styles?.chartWrapper,\n    ),\n    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),\n    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),\n    yAxis: mergeClasses(\n      cartesianchartClassNames.yAxis,\n      baseStyles.yAxis,\n      _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/,\n    ),\n    opacityChangeOnHover: mergeClasses(\n      cartesianchartClassNames.opacityChangeOnHover,\n      baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/,\n    ),\n    legendContainer: mergeClasses(\n      cartesianchartClassNames.legendContainer,\n      baseStyles.legendContainer /*props.styles?.legendContainer*/,\n    ),\n    svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, props.styles?.svgTooltip),\n    tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),\n    chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n  };\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","caption2Strong","fontStyle","textAlign","color","colorNeutralForeground2","fill","colorNeutralForeground1","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","padding","spacingHorizontalS","position","top","spacingVerticalNone","backgroundColor","borderRadius","borderRadiusSmall","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

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

@@ -169,5 +169,4 @@ export const usePopoverStyles_unstable = props => {
     calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),
     calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)
   };
-};
-//# sourceMappingURL=useChartPopoverStyles.styles.js.map
+};

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

@@ -0,0 +1,126 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+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 = makeStyles({
+    calloutContentRoot: {
+        display: 'grid',
+        overflow: 'hidden',
+        ...shorthands.padding('11px 16px 10px 16px'),
+        backgroundColor: tokens.colorNeutralBackground1,
+        backgroundBlendMode: 'normal, luminosity'
+    },
+    calloutDateTimeContainer: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between'
+    },
+    calloutContentX: {
+        ...typographyStyles.caption1,
+        opacity: '0.8',
+        color: tokens.colorNeutralForeground2
+    },
+    calloutBlockContainer: {
+        color: tokens.colorNeutralForeground2
+    },
+    calloutBlockContainerCartesian: {
+        ...typographyStyles.caption1,
+        marginTop: '13px',
+        forcedColorAdjust: 'none'
+    },
+    calloutBlockContainerNonCartesian: {
+        fontSize: tokens.fontSizeHero700,
+        lineHeight: '22px',
+        forcedColorAdjust: 'none'
+    },
+    calloutBlockContainertoDrawShapefalse: {
+        paddingLeft: tokens.spacingHorizontalS,
+        forcedColorAdjust: 'none'
+    },
+    calloutBlockContainertoDrawShapetrue: {
+        display: 'inline-grid'
+    },
+    shapeStyles: {
+        marginRight: tokens.spacingHorizontalS
+    },
+    calloutLegendText: {
+        ...typographyStyles.caption1,
+        color: tokens.colorNeutralForeground2,
+        forcedColorAdjust: 'auto'
+    },
+    calloutContentY: {
+        forcedColorAdjust: 'auto'
+    },
+    calloutContentYCartesian: {
+        ...typographyStyles.subtitle2Stronger
+    },
+    calloutContentYNonCartesian: {
+        ...typographyStyles.title2
+    },
+    descriptionMessage: {
+        ...typographyStyles.caption1,
+        color: tokens.colorNeutralForeground2,
+        marginTop: tokens.spacingVerticalMNudge,
+        paddingTop: tokens.spacingVerticalMNudge,
+        borderTop: `1px solid ${tokens.colorNeutralStroke2}`
+    },
+    ratio: {
+        ...typographyStyles.caption2,
+        marginLeft: tokens.spacingHorizontalSNudge,
+        color: tokens.colorNeutralForeground1
+    },
+    numerator: {
+        ...typographyStyles.caption2Strong
+    },
+    denominator: {
+        ...typographyStyles.caption2Strong
+    },
+    calloutInfoContainer: {
+        paddingLeft: tokens.spacingHorizontalS,
+        forcedColorAdjust: 'none'
+    },
+    calloutContainer: {}
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */ export const usePopoverStyles_unstable = (props)=>{
+    var _props_styles;
+    const { isCartesian } = props;
+    const baseStyles = useStyles();
+    return {
+        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _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)
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CommonComponents/useChartPopoverStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { ChartPopoverProps, PopoverComponentStyles } from './ChartPopover.types';\n\n/**\n * @internal\n */\nexport const popoverClassNames: SlotClassNames<PopoverComponentStyles> = {\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/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  calloutContentRoot: {\n    display: 'grid',\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    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainerNonCartesian: {\n    fontSize: tokens.fontSizeHero700,\n    lineHeight: '22px',\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapefalse: {\n    paddingLeft: tokens.spacingHorizontalS,\n    forcedColorAdjust: 'none',\n  },\n  calloutBlockContainertoDrawShapetrue: { display: 'inline-grid' },\n  shapeStyles: {\n    marginRight: tokens.spacingHorizontalS,\n  },\n  calloutLegendText: {\n    ...typographyStyles.caption1,\n    color: tokens.colorNeutralForeground2,\n    forcedColorAdjust: 'auto',\n  },\n  calloutContentY: {\n    forcedColorAdjust: 'auto',\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    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    forcedColorAdjust: 'none',\n  },\n  calloutContainer: {},\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */\nexport const usePopoverStyles_unstable = (props: ChartPopoverProps): PopoverComponentStyles => {\n  const { isCartesian } = props;\n  const baseStyles = useStyles();\n  return {\n    calloutContentRoot: mergeClasses(\n      popoverClassNames.calloutContentRoot,\n      baseStyles.calloutContentRoot,\n      props.styles?.calloutContentRoot,\n    ),\n    calloutDateTimeContainer: mergeClasses(\n      popoverClassNames.calloutDateTimeContainer,\n      baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/,\n    ),\n    calloutContentX: mergeClasses(\n      popoverClassNames.calloutContentX,\n      baseStyles.calloutContentX /*props.styles?.calloutContentX*/,\n    ),\n    calloutBlockContainer: mergeClasses(\n      popoverClassNames.calloutBlockContainer,\n      baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/,\n      isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian,\n    ),\n    calloutBlockContainertoDrawShapefalse: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapefalse,\n      baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/,\n    ),\n    calloutBlockContainertoDrawShapetrue: mergeClasses(\n      popoverClassNames.calloutBlockContainertoDrawShapetrue,\n      baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/,\n    ),\n    shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),\n    calloutlegendText: mergeClasses(\n      popoverClassNames.calloutlegendText,\n      baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/,\n    ),\n    calloutContentY: mergeClasses(\n      popoverClassNames.calloutContentY,\n      baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/,\n      isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian,\n    ),\n    descriptionMessage: mergeClasses(\n      popoverClassNames.descriptionMessage,\n      baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/,\n    ),\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"],"names":["makeStyles","mergeClasses","shorthands","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","display","overflow","padding","backgroundColor","colorNeutralBackground1","backgroundBlendMode","flexDirection","justifyContent","caption1","opacity","color","colorNeutralForeground2","calloutBlockContainerCartesian","marginTop","forcedColorAdjust","calloutBlockContainerNonCartesian","fontSize","fontSizeHero700","lineHeight","paddingLeft","spacingHorizontalS","marginRight","calloutLegendText","calloutContentYCartesian","subtitle2Stronger","calloutContentYNonCartesian","title2","spacingVerticalMNudge","paddingTop","borderTop","colorNeutralStroke2","caption2","marginLeft","spacingHorizontalSNudge","colorNeutralForeground1","caption2Strong","usePopoverStyles_unstable","props","isCartesian","baseStyles","styles"],"mappings":"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"}

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -4,7 +4,7 @@ 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 { correctYearMonth, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps } from './PlotlySchemaAdapter';
+import { correctYearMonth, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, projectPolarToCartesian } from './PlotlySchemaAdapter';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
 import { LineChart } from '../LineChart/index';
@@ -15,7 +15,6 @@ 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';
 import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
 const ResponsiveDonutChart = withResponsiveContainer(DonutChart);
@@ -145,11 +144,15 @@ const useIsDarkTheme = ()=>{
     };
     // 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
+        return new Promise((resolve, reject)=>{
+            if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
+                return reject(Error('Chart cannot be exported as image'));
+            }
+            chartRef.current.toImage({
+                background: tokens.colorNeutralBackground1,
+                scale: 5,
+                ...opts
+            }).then(resolve).catch(reject);
         });
     }, []);
     React.useImperativeHandle(props.componentRef, ()=>({
@@ -203,6 +206,11 @@ const useIsDarkTheme = ()=>{
         case 'area':
         case 'line':
         case 'fallback':
+        case 'scatterpolar':
+            if (chart.type === 'scatterpolar') {
+                const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
+                plotlyInputWithValidData.data = cartesianProjection.data;
+            }
             // 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);

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

@@ -1 +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  isMonthArray,\n  isNumberArray,\n  isYearArray,\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  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\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\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.index]),\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 <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ResponsiveScatterChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...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\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear) {\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      <ResponsiveVerticalStackedBarChart\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        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\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","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","toImage","ScatterChart","withResponsiveContainer","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","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","index","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","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","current","chartContainer","background","scale","useImperativeHandle","type","some","series","fill","stackgroup","displayName"],"mappings":"AAAA,uDAAuD,GACvD,YAAYA,WAAW,QAAQ;AAE/B,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,cAAc,EACdC,YAAY,QACP,4BAA4B;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,yBAAyBC,cAAc,QAAQ,kCAAkC;AAC1F,SAAgBC,aAAa,QAAQ,mBAAmB;AACxD,YAAYC,aAAa,WAAW;AAEpC,SACEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,sCAAsC,EACtCC,+CAA+C,EAC/CC,iCAAiC,EACjCC,gCAAgC,EAChCC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,6BAA6B,QACxB,wBAAwB;AAC/B,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAA6BC,OAAO,QAAQ,kBAAkB;AAE9D,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,uBAAuB,QAAQ,iDAAiD;AAEzF,MAAMC,uBAAuBD,wBAAwBZ;AACrD,MAAMc,oCAAoCF,wBAAwBX;AAClE,MAAMc,sBAAsBH,wBAAwBV;AACpD,MAAMc,uCAAuCJ,wBAAwBT;AACrE,MAAMc,sBAAsBL,wBAAwBR;AACpD,MAAMc,yBAAyBN,wBAAwBP;AACvD,MAAMc,wBAAwBP,wBAAwBN;AACtD,MAAMc,uBAAuBR,wBAAwBL;AACrD,MAAMc,oCAAoCT,wBAAwBJ;AAClE,MAAMc,6BAA6BV,wBAAwBH;AAC3D,MAAMc,yBAAyBX,wBAAwBD;AA2CvD,MAAMa,kBAAkB;IACtB,MAAMC,WAAWjD,MAAMkD,MAAM,CAAC,IAAIC;IAClC,OAAOF;AACT;AAEA,MAAMG,iBAAiB;IACrB,MAAMC,gBAAgBrD,MAAMsD,UAAU,CAAC3C;IACvC,MAAM4C,UAAiBF,gBAAgBA,gBAAgBzC;IAEvD,uCAAuC;IACvC,MAAM4C,kBAAkB3C,QAAQ4C,GAAG,CAACF,QAAQG,uBAAuB;IACnE,MAAMC,kBAAkB9C,QAAQ4C,GAAG,CAACF,QAAQK,uBAAuB;IAEnE,MAAMC,cAAcL,gBAAgBM,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAEA;;;CAGC,GACD,OAAO,MAAME,iCAAmE/D,MAAMgE,UAAU,CAG9F,CAACC,OAAOC;IACR,MAAM,EAAEC,YAAY,EAAE,GAAG3D,aAAayD,MAAMG,WAAW;IACvD,MAAMC,QAAyB9D,eAAe4D;IAC9C,IAAI,CAACE,MAAMC,OAAO,EAAE;QAClB,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEF,MAAMG,YAAY,EAAE;IAC/D;IACA,IAAIC,cAAcN;IAClB,IAAI;QACFM,cAAcxE,mBAAmBwE;IACnC,EAAE,OAAOC,OAAO;QACd,MAAM,IAAIH,MAAM,CAAC,gCAAgC,EAAEG,OAAO;IAC5D;IACA,MAAMC,2BAAyC;QAC7C,GAAGF,WAAW;QACdG,MAAMP,MAAMQ,eAAe,CAAEC,GAAG,CAACC,CAAAA,QAASN,YAAYG,IAAI,CAACG,MAAMC,KAAK,CAAC;IACzE;IAEA,IAAI,EAAEC,eAAe,EAAE,GAAGd;IAC1B,MAAMlB,WAAWD;IACjB,MAAMa,cAAcT;IACpB,MAAM8B,WAAWlF,MAAMkD,MAAM,CAAQ;IAErC,IAAI,CAAChD,oBAAoB+E,kBAAkB;QACzCA,kBAAkB,EAAE;IACtB;IAEA,MAAM,CAACE,eAAeC,iBAAiB,GAAGpF,MAAMqF,QAAQ,CAAWJ;IACnE,MAAMK,wBAAwB,CAACC;QAC7BH,iBAAiBG;QACjB,IAAItB,MAAMuB,cAAc,EAAE;YACxBvB,MAAMuB,cAAc,CAAC;gBAAErB,cAAc;oBAAEM;oBAAaQ,iBAAiBM;gBAAK;YAAE;QAC9E;IACF;IAEAvF,MAAMyF,SAAS,CAAC;QACd,wDAAwD;QACxD,MAAM,EAAEtB,YAAY,EAAE,GAAG3D,aAAayD,MAAMG,WAAW;QACvD,wDAAwD;QACxD,MAAM,EAAEa,eAAe,EAAE,GAAGd;QAC5BiB,iBAAiBH,4BAAAA,6BAAAA,kBAAmB,EAAE;IACxC,GAAG;QAAChB,MAAMG,WAAW;KAAC;IAEtB,MAAMsB,yBAAyB;QAC7BC,0BAA0B;QAC1BC,UAAUN;QACVL,iBAAiBE;IACnB;IAEA,MAAMU,cAAc;QAClBC,aAAaJ;QACbK,cAAcb;IAChB;IAEA,MAAMc,wBAAwB,CAACC,YAAoBC;YACvBD;QAA1B,MAAME,mBAAmB,EAACF,eAAAA,UAAU,CAAC,EAAE,cAAbA,mCAAD,AAACA,aAA4BG,IAAI,MAAK;QAC/D,MAAMC,aAA8C;YAClD,GAAGpF,uCACD;gBAAE2D,MAAMqB;gBAAYK,QAAQ7B,YAAY6B,MAAM;YAAC,GAC/CJ,aACAjD,UACAY,YACD;YACD,GAAGgC,WAAW;QAChB;QACA,IAAIK,aAAa;YACf,qBAAO,oBAACzD,qBAAwB4D;QAClC;QACA,IAAIF,kBAAkB;YACpB,qBAAO,oBAACpD,wBAA2BsD;QACrC;QACA,qBAAO,oBAAC9D,qBAAwB8D;IAClC;IAEA,MAAME,sBAAsB,CAACL,cAAuB,KAAK;QACvD,IAAIM,eAAe;QACnB,MAAMC,UAAU,AAAC9B,yBAAyBC,IAAI,CAAC,EAAE,CAAc8B,CAAC;QAChE,MAAMC,UAAUxG,YAAYsG;QAC5B,MAAMG,YAAYvG,cAAcoG;QAChC,MAAMI,WAAWzG,aAAaqG;QAE9B,wEAAwE;QACxE,8EAA8E;QAC9E,2EAA2E;QAC3E,8DAA8D;QAC9D,MAAMK,UAAUxG,YAAYmG;QAE5B,IAAI,AAACE,CAAAA,WAAWC,SAAQ,KAAM,CAACE,SAAS;YACtC,OAAOd,sBAAsBrB,yBAAyBC,IAAI,EAAEsB;QAC9D,OAAO,IAAIW,UAAU;YACnB,MAAME,cAAcpC,yBAAyBC,IAAI,CAACE,GAAG,CAAC,CAACkC,YAAyB,CAAA;oBAC9E,GAAGA,SAAS;oBACZN,GAAG5F,iBAAiBkG,UAAUN,CAAC;gBACjC,CAAA;YACA,OAAOV,sBAAsBe,aAAab;QAC5C;QACA,wDAAwD;QACxDM,eAAe;QACf,qBACE,oBAAClE;YACE,GAAGtB,+BAA+B2D,0BAA0B1B,UAAUY,aAAa2C,aAAa;YAChG,GAAGX,WAAW;;IAGrB;IAEA,OAAO;IACP,MAAMoB,gBAAgBjH,MAAMkH,WAAW,CAAC,CAACC;YACxBjC;QAAf,OAAOhD,SAAQgD,oBAAAA,SAASkC,OAAO,cAAhBlC,wCAAAA,kBAAkBmC,cAAc,EAAE;YAC/CC,YAAY7G,OAAOiD,uBAAuB;YAC1C6D,OAAO;YACP,GAAGJ,IAAI;QACT;IACF,GAAG,EAAE;IAELnH,MAAMwH,mBAAmB,CACvBvD,MAAM8B,YAAY,EAClB,IAAO,CAAA;YACLkB;QACF,CAAA,GACA;QAACA;KAAc;IAGjB,OAAQ5C,MAAMoD,IAAI;QAChB,KAAK;YACH,qBACE,oBAACpF;gBACE,GAAGtB,gCAAgC4D,0BAA0B1B,UAAUY,YAAY;gBACnF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACrD;gBACE,GAAGtB,gDAAgDyD,0BAA0B1B,UAAUY,YAAY;gBACnG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAChD;gBACE,GAAGvB,+BAA+BqD,0BAA0B1B,UAAUY,YAAY;gBAClF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACvD;gBACE,GAAGtB,+BAA+B2D,0BAA0B1B,UAAUY,YAAY;gBAClF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACnD;gBACE,GAAGvB,kCAAkCwD,yBAAyB;gBAC9D,GAAGkB,WAAW;gBACfC,aAAa,CAAC;;QAGpB,KAAK;YACH,qBACE,oBAACnD;gBACE,GAAGvB,iCAAiCuD,0BAA0B1B,UAAUY,YAAY;gBACpF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACjD;gBACE,GAAGvB,gCAAgCsD,0BAA0B1B,UAAUY,YAAY;gBACnF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAC/C;gBACE,GAAGvB,8BAA8BoD,0BAA0B1B,UAAUY,YAAY;gBACjF,GAAGgC,WAAW;;QAGrB,+CAA+C;QAC/C,KAAK;QACL,KAAK;QACL,KAAK;YACH,kGAAkG;YAClG,MAAMK,cAAcvB,yBAAyBC,IAAI,CAAC8C,IAAI,CACpD,CAACC,SAAqBA,OAAOC,IAAI,KAAK,aAAaD,OAAOC,IAAI,KAAK,aAAa,CAAC,CAACD,OAAOE,UAAU;YAErG,OAAOtB,oBAAoBL;QAC7B;gBAC6CvB;YAA3C,MAAM,IAAIJ,MAAM,CAAC,wBAAwB,GAAEI,kCAAAA,yBAAyBC,IAAI,CAAC,EAAE,cAAhCD,sDAAAA,gCAAkC8C,IAAI,EAAE;IACvF;AACF,GAAG;AACH1D,iBAAiB+D,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/DeclarativeChart/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  isMonthArray,\n  isNumberArray,\n  isYearArray,\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  correctYearMonth,\n  transformPlotlyJsonToDonutProps,\n  transformPlotlyJsonToVSBCProps,\n  transformPlotlyJsonToScatterChartProps,\n  transformPlotlyJsonToHorizontalBarWithAxisProps,\n  transformPlotlyJsonToHeatmapProps,\n  transformPlotlyJsonToSankeyProps,\n  transformPlotlyJsonToGaugeProps,\n  transformPlotlyJsonToGVBCProps,\n  transformPlotlyJsonToVBCProps,\n  projectPolarToCartesian,\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 { Chart, ImageExportOptions } from '../../types/index';\nimport { ScatterChart } from '../ScatterChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\n\nconst ResponsiveDonutChart = withResponsiveContainer(DonutChart);\nconst ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);\nconst ResponsiveLineChart = withResponsiveContainer(LineChart);\nconst ResponsiveHorizontalBarChartWithAxis = withResponsiveContainer(HorizontalBarChartWithAxis);\nconst ResponsiveAreaChart = withResponsiveContainer(AreaChart);\nconst ResponsiveHeatMapChart = withResponsiveContainer(HeatMapChart);\nconst ResponsiveSankeyChart = withResponsiveContainer(SankeyChart);\nconst ResponsiveGaugeChart = withResponsiveContainer(GaugeChart);\nconst ResponsiveGroupedVerticalBarChart = withResponsiveContainer(GroupedVerticalBarChart);\nconst ResponsiveVerticalBarChart = withResponsiveContainer(VerticalBarChart);\nconst ResponsiveScatterChart = withResponsiveContainer(ScatterChart);\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.index]),\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 <ResponsiveAreaChart {...chartProps} />;\n    }\n    if (isScatterMarkers) {\n      return <ResponsiveScatterChart {...chartProps} />;\n    }\n    return <ResponsiveLineChart {...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\n    // Consider year as categorical variable not numeric continuous variable\n    // Also year is not considered a date variable as it is represented as a point\n    // in time and brings additional complexity of handling timezone and locale\n    // formatting given the current design of the charting library\n    const isXYear = isYearArray(xValues);\n\n    if ((isXDate || isXNumber) && !isXYear) {\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      <ResponsiveVerticalStackedBarChart\n        {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme, fallbackVSBC)}\n        {...commonProps}\n      />\n    );\n  };\n\n  // TODO\n  const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n    return new Promise((resolve, reject) => {\n      if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {\n        return reject(Error('Chart cannot be exported as image'));\n      }\n\n      chartRef.current\n        .toImage({\n          background: tokens.colorNeutralBackground1,\n          scale: 5,\n          ...opts,\n        })\n        .then(resolve)\n        .catch(reject);\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        <ResponsiveDonutChart\n          {...transformPlotlyJsonToDonutProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'horizontalbar':\n      return (\n        <ResponsiveHorizontalBarChartWithAxis\n          {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'groupedverticalbar':\n      return (\n        <ResponsiveGroupedVerticalBarChart\n          {...transformPlotlyJsonToGVBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalstackedbar':\n      return (\n        <ResponsiveVerticalStackedBarChart\n          {...transformPlotlyJsonToVSBCProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'heatmap':\n      return (\n        <ResponsiveHeatMapChart\n          {...transformPlotlyJsonToHeatmapProps(plotlyInputWithValidData)}\n          {...commonProps}\n          legendProps={{}}\n        />\n      );\n    case 'sankey':\n      return (\n        <ResponsiveSankeyChart\n          {...transformPlotlyJsonToSankeyProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'gauge':\n      return (\n        <ResponsiveGaugeChart\n          {...transformPlotlyJsonToGaugeProps(plotlyInputWithValidData, colorMap, isDarkTheme)}\n          {...commonProps}\n        />\n      );\n    case 'verticalbar':\n      return (\n        <ResponsiveVerticalBarChart\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    case 'scatterpolar':\n      if (chart.type === 'scatterpolar') {\n        const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n        plotlyInputWithValidData.data = cartesianProjection.data;\n      }\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","isMonthArray","isNumberArray","isYearArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToScatterChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","projectPolarToCartesian","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","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","index","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","isXYear","updatedData","dataPoint","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","type","cartesianProjection","some","series","fill","stackgroup","displayName"],"mappings":"AAAA,uDAAuD,GACvD,YAAYA,WAAW,QAAQ;AAE/B,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,WAAW,EACXC,YAAY,EACZC,aAAa,EACbC,WAAW,EACXC,cAAc,EACdC,YAAY,QACP,4BAA4B;AACnC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,yBAAyBC,cAAc,QAAQ,kCAAkC;AAC1F,SAAgBC,aAAa,QAAQ,mBAAmB;AACxD,YAAYC,aAAa,WAAW;AAEpC,SACEC,gBAAgB,EAChBC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,sCAAsC,EACtCC,+CAA+C,EAC/CC,iCAAiC,EACjCC,gCAAgC,EAChCC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,uBAAuB,QAClB,wBAAwB;AAC/B,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,SAAS,QAAwB,qBAAqB;AAC/D,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,YAAY,QAAQ,wBAAwB;AAErD,SAASC,uBAAuB,QAAQ,iDAAiD;AAEzF,MAAMC,uBAAuBD,wBAAwBX;AACrD,MAAMa,oCAAoCF,wBAAwBV;AAClE,MAAMa,sBAAsBH,wBAAwBT;AACpD,MAAMa,uCAAuCJ,wBAAwBR;AACrE,MAAMa,sBAAsBL,wBAAwBP;AACpD,MAAMa,yBAAyBN,wBAAwBN;AACvD,MAAMa,wBAAwBP,wBAAwBL;AACtD,MAAMa,uBAAuBR,wBAAwBJ;AACrD,MAAMa,oCAAoCT,wBAAwBH;AAClE,MAAMa,6BAA6BV,wBAAwBF;AAC3D,MAAMa,yBAAyBX,wBAAwBD;AA2CvD,MAAMa,kBAAkB;IACtB,MAAMC,WAAWjD,MAAMkD,MAAM,CAAC,IAAIC;IAClC,OAAOF;AACT;AAEA,MAAMG,iBAAiB;IACrB,MAAMC,gBAAgBrD,MAAMsD,UAAU,CAAC3C;IACvC,MAAM4C,UAAiBF,gBAAgBA,gBAAgBzC;IAEvD,uCAAuC;IACvC,MAAM4C,kBAAkB3C,QAAQ4C,GAAG,CAACF,QAAQG,uBAAuB;IACnE,MAAMC,kBAAkB9C,QAAQ4C,GAAG,CAACF,QAAQK,uBAAuB;IAEnE,MAAMC,cAAcL,gBAAgBM,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAEA;;;CAGC,GACD,OAAO,MAAME,iCAAmE/D,MAAMgE,UAAU,CAG9F,CAACC,OAAOC;IACR,MAAM,EAAEC,YAAY,EAAE,GAAG3D,aAAayD,MAAMG,WAAW;IACvD,MAAMC,QAAyB9D,eAAe4D;IAC9C,IAAI,CAACE,MAAMC,OAAO,EAAE;QAClB,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEF,MAAMG,YAAY,EAAE;IAC/D;IACA,IAAIC,cAAcN;IAClB,IAAI;QACFM,cAAcxE,mBAAmBwE;IACnC,EAAE,OAAOC,OAAO;QACd,MAAM,IAAIH,MAAM,CAAC,gCAAgC,EAAEG,OAAO;IAC5D;IACA,MAAMC,2BAAyC;QAC7C,GAAGF,WAAW;QACdG,MAAMP,MAAMQ,eAAe,CAAEC,GAAG,CAACC,CAAAA,QAASN,YAAYG,IAAI,CAACG,MAAMC,KAAK,CAAC;IACzE;IAEA,IAAI,EAAEC,eAAe,EAAE,GAAGd;IAC1B,MAAMlB,WAAWD;IACjB,MAAMa,cAAcT;IACpB,MAAM8B,WAAWlF,MAAMkD,MAAM,CAAQ;IAErC,IAAI,CAAChD,oBAAoB+E,kBAAkB;QACzCA,kBAAkB,EAAE;IACtB;IAEA,MAAM,CAACE,eAAeC,iBAAiB,GAAGpF,MAAMqF,QAAQ,CAAWJ;IACnE,MAAMK,wBAAwB,CAACC;QAC7BH,iBAAiBG;QACjB,IAAItB,MAAMuB,cAAc,EAAE;YACxBvB,MAAMuB,cAAc,CAAC;gBAAErB,cAAc;oBAAEM;oBAAaQ,iBAAiBM;gBAAK;YAAE;QAC9E;IACF;IAEAvF,MAAMyF,SAAS,CAAC;QACd,wDAAwD;QACxD,MAAM,EAAEtB,YAAY,EAAE,GAAG3D,aAAayD,MAAMG,WAAW;QACvD,wDAAwD;QACxD,MAAM,EAAEa,eAAe,EAAE,GAAGd;QAC5BiB,iBAAiBH,4BAAAA,6BAAAA,kBAAmB,EAAE;IACxC,GAAG;QAAChB,MAAMG,WAAW;KAAC;IAEtB,MAAMsB,yBAAyB;QAC7BC,0BAA0B;QAC1BC,UAAUN;QACVL,iBAAiBE;IACnB;IAEA,MAAMU,cAAc;QAClBC,aAAaJ;QACbK,cAAcb;IAChB;IAEA,MAAMc,wBAAwB,CAACC,YAAoBC;YACvBD;QAA1B,MAAME,mBAAmB,EAACF,eAAAA,UAAU,CAAC,EAAE,cAAbA,mCAAD,AAACA,aAA4BG,IAAI,MAAK;QAC/D,MAAMC,aAA8C;YAClD,GAAGpF,uCACD;gBAAE2D,MAAMqB;gBAAYK,QAAQ7B,YAAY6B,MAAM;YAAC,GAC/CJ,aACAjD,UACAY,YACD;YACD,GAAGgC,WAAW;QAChB;QACA,IAAIK,aAAa;YACf,qBAAO,oBAACzD,qBAAwB4D;QAClC;QACA,IAAIF,kBAAkB;YACpB,qBAAO,oBAACpD,wBAA2BsD;QACrC;QACA,qBAAO,oBAAC9D,qBAAwB8D;IAClC;IAEA,MAAME,sBAAsB,CAACL,cAAuB,KAAK;QACvD,IAAIM,eAAe;QACnB,MAAMC,UAAU,AAAC9B,yBAAyBC,IAAI,CAAC,EAAE,CAAc8B,CAAC;QAChE,MAAMC,UAAUxG,YAAYsG;QAC5B,MAAMG,YAAYvG,cAAcoG;QAChC,MAAMI,WAAWzG,aAAaqG;QAE9B,wEAAwE;QACxE,8EAA8E;QAC9E,2EAA2E;QAC3E,8DAA8D;QAC9D,MAAMK,UAAUxG,YAAYmG;QAE5B,IAAI,AAACE,CAAAA,WAAWC,SAAQ,KAAM,CAACE,SAAS;YACtC,OAAOd,sBAAsBrB,yBAAyBC,IAAI,EAAEsB;QAC9D,OAAO,IAAIW,UAAU;YACnB,MAAME,cAAcpC,yBAAyBC,IAAI,CAACE,GAAG,CAAC,CAACkC,YAAyB,CAAA;oBAC9E,GAAGA,SAAS;oBACZN,GAAG5F,iBAAiBkG,UAAUN,CAAC;gBACjC,CAAA;YACA,OAAOV,sBAAsBe,aAAab;QAC5C;QACA,wDAAwD;QACxDM,eAAe;QACf,qBACE,oBAAClE;YACE,GAAGtB,+BAA+B2D,0BAA0B1B,UAAUY,aAAa2C,aAAa;YAChG,GAAGX,WAAW;;IAGrB;IAEA,OAAO;IACP,MAAMoB,gBAAgBjH,MAAMkH,WAAW,CAAC,CAACC;QACvC,OAAO,IAAIC,QAAQ,CAACC,SAASC;YAC3B,IAAI,CAACpC,SAASqC,OAAO,IAAI,OAAOrC,SAASqC,OAAO,CAACC,OAAO,KAAK,YAAY;gBACvE,OAAOF,OAAO/C,MAAM;YACtB;YAEAW,SAASqC,OAAO,CACbC,OAAO,CAAC;gBACPC,YAAYhH,OAAOiD,uBAAuB;gBAC1CgE,OAAO;gBACP,GAAGP,IAAI;YACT,GACCQ,IAAI,CAACN,SACLO,KAAK,CAACN;QACX;IACF,GAAG,EAAE;IAELtH,MAAM6H,mBAAmB,CACvB5D,MAAM8B,YAAY,EAClB,IAAO,CAAA;YACLkB;QACF,CAAA,GACA;QAACA;KAAc;IAGjB,OAAQ5C,MAAMyD,IAAI;QAChB,KAAK;YACH,qBACE,oBAACzF;gBACE,GAAGtB,gCAAgC4D,0BAA0B1B,UAAUY,YAAY;gBACnF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACrD;gBACE,GAAGtB,gDAAgDyD,0BAA0B1B,UAAUY,YAAY;gBACnG,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAChD;gBACE,GAAGvB,+BAA+BqD,0BAA0B1B,UAAUY,YAAY;gBAClF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACvD;gBACE,GAAGtB,+BAA+B2D,0BAA0B1B,UAAUY,YAAY;gBAClF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACnD;gBACE,GAAGvB,kCAAkCwD,yBAAyB;gBAC9D,GAAGkB,WAAW;gBACfC,aAAa,CAAC;;QAGpB,KAAK;YACH,qBACE,oBAACnD;gBACE,GAAGvB,iCAAiCuD,0BAA0B1B,UAAUY,YAAY;gBACpF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAACjD;gBACE,GAAGvB,gCAAgCsD,0BAA0B1B,UAAUY,YAAY;gBACnF,GAAGgC,WAAW;;QAGrB,KAAK;YACH,qBACE,oBAAC/C;gBACE,GAAGvB,8BAA8BoD,0BAA0B1B,UAAUY,YAAY;gBACjF,GAAGgC,WAAW;;QAGrB,+CAA+C;QAC/C,KAAK;QACL,KAAK;QACL,KAAK;QACL,KAAK;YACH,IAAIxB,MAAMyD,IAAI,KAAK,gBAAgB;gBACjC,MAAMC,sBAAsBvG,wBAAwBmD;gBACpDA,yBAAyBC,IAAI,GAAGmD,oBAAoBnD,IAAI;YAC1D;YACA,kGAAkG;YAClG,MAAMsB,cAAcvB,yBAAyBC,IAAI,CAACoD,IAAI,CACpD,CAACC,SAAqBA,OAAOC,IAAI,KAAK,aAAaD,OAAOC,IAAI,KAAK,aAAa,CAAC,CAACD,OAAOE,UAAU;YAErG,OAAO5B,oBAAoBL;QAC7B;gBAC6CvB;YAA3C,MAAM,IAAIJ,MAAM,CAAC,wBAAwB,GAAEI,kCAAAA,yBAAyBC,IAAI,CAAC,EAAE,cAAhCD,sDAAAA,gCAAkCmD,IAAI,EAAE;IACvF;AACF,GAAG;AACH/D,iBAAiBqE,WAAW,GAAG"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -296,6 +296,8 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
             return;
         }
         const isXString = isStringArray(series.x);
+        // TODO: In case of a single bin, add an empty bin of the same size to prevent the
+        // default bar width from being used and ensure the bar spans the full intended range.
         const xBins = createBins(series.x, (_series_xbins = series.xbins) === null || _series_xbins === void 0 ? void 0 : _series_xbins.start, (_series_xbins1 = series.xbins) === null || _series_xbins1 === void 0 ? void 0 : _series_xbins1.end, (_series_xbins2 = series.xbins) === null || _series_xbins2 === void 0 ? void 0 : _series_xbins2.size);
         const yBins = xBins.map(()=>[]);
         let total = 0;
@@ -336,8 +338,9 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         chartTitle,
         xAxisTitle,
         yAxisTitle,
-        mode: 'plotly',
-        hideTickOverlap: true
+        mode: 'histogram',
+        hideTickOverlap: true,
+        maxBarWidth: 50
     };
 };
 export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
@@ -427,7 +430,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
                 color
             };
         });
-    }).flat()//reversing the order to invert the Y bars order as required by plotly.
+    }).reverse().flat()//reversing the order to invert the Y bars order as required by plotly.
     .reverse();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
@@ -670,6 +673,24 @@ export const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
         variant: ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge7.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment'
     };
 };
+export const projectPolarToCartesian = (input)=>{
+    const projection = {
+        ...input
+    };
+    for(let sindex = 0; sindex < input.data.length; sindex++){
+        const series = input.data[sindex];
+        series.x = [];
+        series.y = [];
+        for(let ptindex = 0; ptindex < series.r.length; ptindex++){
+            const thetaRad = series.theta[ptindex] * Math.PI / 180;
+            const radius = series.r[ptindex];
+            series.x[ptindex] = radius * Math.cos(thetaRad);
+            series.y[ptindex] = radius * Math.sin(thetaRad);
+        }
+        projection.data[sindex] = series;
+    }
+    return projection;
+};
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
 }
@@ -744,7 +765,7 @@ const findBinIndex = (bins, value, isString)=>{
     if (typeof value === 'undefined' || value === null) {
         return -1;
     }
-    return isString ? bins.findIndex((bin)=>bin.includes(value)) : bins.findIndex((bin)=>value >= bin.x0 && value < bin.x1);
+    return isString ? bins.findIndex((bin)=>bin.includes(value)) : bins.findIndex((bin, index)=>value >= bin.x0 && (index === bins.length - 1 ? value <= bin.x1 : value < bin.x1));
 };
 const getBinSize = (bin)=>{
     return bin.x1 - bin.x0;
@@ -772,15 +793,13 @@ const createBins = (data, binStart, binEnd, binSize)=>{
         minVal,
         maxVal
     ]);
-    if (typeof binSize === 'number') {
-        var _binSize_toString_split_;
+    if (typeof binSize === 'number' && binSize > 0) {
         const thresholds = [];
-        let th = minVal;
-        var _binSize_toString_split__length;
-        const tolerance = 1 / Math.pow(10, (_binSize_toString_split__length = (_binSize_toString_split_ = binSize.toString().split('.')[1]) === null || _binSize_toString_split_ === void 0 ? void 0 : _binSize_toString_split_.length) !== null && _binSize_toString_split__length !== void 0 ? _binSize_toString_split__length : 0);
-        while(maxVal + binSize - th > tolerance){
+        const precision = Math.max(getPrecision(minVal), getPrecision(binSize));
+        let th = precisionRound(minVal, precision);
+        while(th < precisionRound(maxVal + binSize, precision)){
             thresholds.push(th);
-            th += binSize;
+            th = precisionRound(th + binSize, precision);
         }
         minVal = thresholds[0];
         maxVal = thresholds[thresholds.length - 1];
@@ -788,9 +807,12 @@ const createBins = (data, binStart, binEnd, binSize)=>{
             minVal,
             maxVal
         ]).thresholds(thresholds);
+        // When the domain ends at the last threshold (maxVal), d3Bin creates an extra final bin where
+        // both x0 and x1 are equal to maxVal and inclusive. The previous bin also has x1 equal to maxVal,
+        // but it is exclusive. To maintain consistent bin widths, remove the final bin,
+        // making the previous bin the last one, with both x0 and x1 inclusive.
+        return binGenerator(data).slice(0, -1);
     }
-    // NOTE: The last bin generated by d3Bin often has identical x0 and x1 values (both inclusive) and
-    // can be ignored if the highest value is already included in the previous bin.
     return binGenerator(data);
 };
 const calculateHistFunc = (histfunc, bin)=>{
@@ -823,3 +845,12 @@ const calculateHistNorm = (histnorm, value, total, dx, dy = 1)=>{
             return value;
     }
 };
+const getPrecision = (value)=>{
+    var _value_toString_split_;
+    var _value_toString_split__length;
+    return (_value_toString_split__length = (_value_toString_split_ = value.toString().split('.')[1]) === null || _value_toString_split_ === void 0 ? void 0 : _value_toString_split_.length) !== null && _value_toString_split__length !== void 0 ? _value_toString_split__length : 0;
+};
+const precisionRound = (value, precision)=>{
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+};