npm - @fluentui/react-charts - Versions diffs - 9.1.10 → 9.2.1 - Mend

@fluentui/react-charts 9.1.10 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (405) hide show

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
1	+ {"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":"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"}

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js CHANGED Viewed

@@ -43,9 +43,6 @@ const dashOptions = {
         lineBorderWidth: '4'
     }
 };
-const getLegend = (series, index)=>{
-    return series.name || `Series ${index + 1}`;
-};
 function getTitles(layout) {
     var _layout_title, _layout_xaxis, _layout_xaxis1, _layout_xaxis_title, _layout_xaxis2, _layout_yaxis, _layout_yaxis1, _layout_yaxis_title, _layout_yaxis2;
     var _layout_title_text, _layout_xaxis_title_text, _layout_yaxis_title_text;
@@ -181,6 +178,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
         var _series_x;
@@ -194,7 +192,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                     lineData: []
                 };
             }
-            const legend = getLegend(series, index1);
+            const legend = legends[index1];
             var _series_y_index2;
             const yVal = (_series_y_index2 = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2]) !== null && _series_y_index2 !== void 0 ? _series_y_index2 : 0;
             if (series.type === 'bar') {
@@ -206,10 +204,14 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
                 });
                 yMaxValue = Math.max(yMaxValue, yVal);
             } else if (series.type === 'scatter' || !!fallbackVSBC) {
+                var _series_line;
                 const color = getColor(legend, colorMap, isDarkTheme);
                 const lineOptions = getLineOptions(series.line);
+                const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+                const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
                 mapXToDataPoints[x].lineData.push({
                     legend,
+                    legendShape,
                     y: yVal,
                     color,
                     ...lineOptions ? {
@@ -240,13 +242,15 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        barGapMax: 2
+        barGapMax: 2,
+        hideLegend
     };
 };
 export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout1;
     const mapXToDataPoints = {};
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, index1)=>{
         var _series_x;
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
@@ -258,7 +262,7 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
             }
             if (series.type === 'bar') {
                 var _series_y;
-                const legend = getLegend(series, index1);
+                const legend = legends[index1];
                 const color = getColor(legend, colorMap, isDarkTheme);
                 var _series_y_index2;
                 mapXToDataPoints[x].series.push({
@@ -284,18 +288,22 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
         yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
-        hideTickOverlap: true
+        hideTickOverlap: true,
+        hideLegend
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout1;
     const vbcData = [];
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     input.data.forEach((series, seriesIdx)=>{
         var _series_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             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;
@@ -313,7 +321,7 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
             return yVal;
         });
         xBins.forEach((bin, index)=>{
-            const legend = getLegend(series, seriesIdx);
+            const legend = legends[seriesIdx];
             const color = getColor(legend, colorMap, isDarkTheme);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push({
@@ -336,24 +344,31 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         chartTitle,
         xAxisTitle,
         yAxisTitle,
-        mode: 'plotly',
-        hideTickOverlap: true
+        mode: 'histogram',
+        hideTickOverlap: true,
+        maxBarWidth: 50,
+        hideLegend
     };
 };
 export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, isDarkTheme)=>{
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
+        var _series_line;
         const xValues = series.x;
         const isString = typeof xValues[0] === 'string';
         const isXDate = isDateArray(xValues);
         const isXNumber = isNumberArray(xValues);
-        const legend = getLegend(series, index);
+        const legend = legends[index];
         const lineColor = getColor(legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         const lineOptions = getLineOptions(series.line);
+        const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
         return {
             legend,
+            legendShape,
             data: xValues.map((x, i)=>{
                 var _series_marker, _series_marker1;
                 return {
@@ -392,7 +407,8 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
             width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
             height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
             hideTickOverlap: true,
-            useUTC: false
+            useUTC: false,
+            hideLegend
         };
     } else {
         var _input_layout2, _input_layout3;
@@ -409,25 +425,26 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
             width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
             height: (_input_layout_height1 = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height1 !== void 0 ? _input_layout_height1 : 350,
             hideTickOverlap: true,
-            useUTC: false
+            useUTC: false,
+            hideLegend
         };
     }
 };
 export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
     const chartData = input.data.map((series, index)=>{
+        const legend = legends[index];
+        const color = getColor(legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
-            var _series_name;
-            const legendName = (_series_name = series.name) !== null && _series_name !== void 0 ? _series_name : yValue;
-            const color = getColor(legendName, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,
-                legend: legendName,
+                legend,
                 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;
@@ -453,7 +470,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        hideLegend
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input)=>{
@@ -670,6 +688,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 +780,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 +808,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 +822,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 +860,27 @@ 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;
+};
+const getLegendProps = (data, layout)=>{
+    const legends = [];
+    if (data.length === 1) {
+        legends.push(data[0].name || '');
+    } else {
+        data.forEach((series, index)=>{
+            legends.push(series.name || `Series ${index + 1}`);
+        });
+    }
+    const hideLegends = data.every((series)=>series.showlegend === false);
+    return {
+        legends,
+        hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : hideLegends
+    };
+};