npm - @fluentui/react-charts - Versions diffs - 0.0.0-nightly-20251106-0410.1 → 0.0.0-nightly-20251110-0407.1 - Mend

@fluentui/react-charts 0.0.0-nightly-20251106-0410.1 → 0.0.0-nightly-20251110-0407.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 (223) hide show

package/lib/components/CommonComponents/useCartesianChartStyles.styles.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
 export const cartesianchartClassNames = {
   root: 'fui-cart__root',
   chartWrapper: 'fui-cart__chartWrapper',
+  plotContainer: 'fui-cart__plotContainer',
   axisTitle: 'fui-cart__axisTitle',
   xAxis: 'fui-cart__xAxis',
   yAxis: 'fui-cart__yAxis',
@@ -22,7 +23,8 @@ export const cartesianchartClassNames = {
   tooltip: 'fui-cart__tooltip',
   axisAnnotation: 'fui-cart__axisAnnotation',
   chartTitle: 'fui-cart__chartTitle',
-  chart: 'fui-cart__chart'
+  chart: 'fui-cart__chart',
+  annotationLayer: 'fui-cart__annotationLayer'
 };
 /**
  * Base Styles
@@ -43,10 +45,16 @@ const useStyles = /*#__PURE__*/__styles({
     fsow6f: ["f1o700av", "fes3tcz"]
   },
   chartWrapper: {
+    qhf8xq: "f10pi13n",
     B68tc82: 0,
     Bmxbyg5: 0,
     Bpg54ce: "f1enuhaj"
   },
+  plotContainer: {
+    qhf8xq: "f10pi13n",
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl"
+  },
   axisTitle: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "f13mqy1h",
@@ -110,6 +118,9 @@ const useStyles = /*#__PURE__*/__styles({
     Bkfmm31: "f5q6cfr",
     a6j6cd: "f14egcv9"
   },
+  annotationLayer: {
+    Bkecrkj: "f1aehjj5"
+  },
   tooltip: {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -136,11 +147,11 @@ const useStyles = /*#__PURE__*/__styles({
 }, {
   d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
     p: -1
-  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", [".f1enuhaj{overflow:auto;}", {
+  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f10pi13n{position:relative;}", [".f1enuhaj{overflow:auto;}", {
     p: -1
-  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fmd4ok8{font-style:normal;}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fk6onyz text{fill:var(--colorNeutralForeground1);}", ".f17odlr9 text{font-family:var(--fontFamilyBase);}", ".f1wvrikb text{font-size:var(--fontSizeBase100);}", ".fidmvdy text{font-weight:var(--fontWeightSemibold);}", ".f1noc3f3 text{line-height:var(--lineHeightBase100);}", ".f44ebzg text{forced-color-adjust:auto;}", ".fkuun line{opacity:0.2;}", ".f1u7a78k line{stroke:var(--colorNeutralForeground1);}", ".f1myyn02 line{width:1px;}", ".f1oca6e6 line{forced-color-adjust:auto;}", ".f1x8lysa path{display:none;}", ".f1j2g1si g{text-anchor:end;}", ".f9das1l{opacity:0.1;}", ".f158kwzp{cursor:default;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".ff3wqvv{margin-left:var(--spacingHorizontalXL);}", ".f1l2akhw{margin-right:var(--spacingHorizontalXL);}", ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fmd4ok8{font-style:normal;}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fk6onyz text{fill:var(--colorNeutralForeground1);}", ".f17odlr9 text{font-family:var(--fontFamilyBase);}", ".f1wvrikb text{font-size:var(--fontSizeBase100);}", ".fidmvdy text{font-weight:var(--fontWeightSemibold);}", ".f1noc3f3 text{line-height:var(--lineHeightBase100);}", ".f44ebzg text{forced-color-adjust:auto;}", ".fkuun line{opacity:0.2;}", ".f1u7a78k line{stroke:var(--colorNeutralForeground1);}", ".f1myyn02 line{width:1px;}", ".f1oca6e6 line{forced-color-adjust:auto;}", ".f1x8lysa path{display:none;}", ".f1j2g1si g{text-anchor:end;}", ".f9das1l{opacity:0.1;}", ".f158kwzp{cursor:default;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".ff3wqvv{margin-left:var(--spacingHorizontalXL);}", ".f1l2akhw{margin-right:var(--spacingHorizontalXL);}", ".f5q6cfr{fill:var(--colorNeutralBackground1);}", ".f1aehjj5{pointer-events:none;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".f1euv43f{position:absolute;}", ".fr6rvge{top:var(--spacingVerticalNone);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
     p: -1
-  }], ".f1aehjj5{pointer-events:none;}", ".f19n0e5{color:var(--colorNeutralForeground1);}"],
+  }], ".f19n0e5{color:var(--colorNeutralForeground1);}"],
   m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.folz2wl{fill:CanvasText;}}", {
     m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
   }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f14egcv9{fill:Canvas;}}", {
@@ -158,12 +169,14 @@ export const useCartesianChartStyles = props => {
   return {
     root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
     chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
+    plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/),
     axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),
     xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),
     yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/),
     opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/),
     legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/),
     svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),
+    annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /*props.styles?.annotationLayer*/),
     tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/),
     axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),
     chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)

package/lib/components/CommonComponents/useCartesianChartStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","B80ckks","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/*\n @internal\n / export const cartesianchartClassNames = {\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 axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left'\n },\n chartWrapper: {\n overflow: 'auto'\n },\n axisTitle: getAxisTitleStyle(),\n axisAnnotation: getAxisTitleStyle(),\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',\n cursor: 'default'\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: getTooltipStyle()\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","qhf8xq","B80ckks","sj55zd","Bkfmm31","a6j6cd","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","zp1vxd","jxu3ei","B3i31d3","Bhcy8il","z3m6do","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","Bkecrkj","z8tnut","z189sj","Byoj8tv","uwmqm3","Bhzewxz","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","d","p","m","useCartesianChartStyles","props","_props_styles","_props_reflowProps","_props_styles1","_props_styles2","_props_styles3","_useRtl","baseStyles","styles","reflowProps","mode"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n/*\n @internal\n / export const cartesianchartClassNames = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\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 axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer'\n};\n/\n Base Styles\n / const useStyles = makeStyles({\n root: {\n ...typographyStyles.body1,\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n textAlign: 'left'\n },\n chartWrapper: {\n position: 'relative',\n overflow: 'auto'\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%'\n },\n axisTitle: getAxisTitleStyle(),\n axisAnnotation: getAxisTitleStyle(),\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',\n cursor: 'default'\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 annotationLayer: {\n pointerEvents: 'none'\n },\n tooltip: getTooltipStyle()\n});\n/\n \n * Apply styling to the Carousel slots based on the state\n / export const useCartesianChartStyles = (props)=>{\n var _props_styles, _props_reflowProps, _props_styles1, _props_styles2, _props_styles3;\n const _useRtl = useRtl();\n const baseStyles = useStyles();\n return {\n root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null \|\| _props_styles === void 0 ? void 0 : _props_styles.root),\n chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null \|\| _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null \|\| _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),\n plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /props.styles?.plotContainer/ ),\n axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /props.styles?.axisTitle/ ),\n xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /props.styles?.xAxis/ ),\n yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /props.styles?.yAxis/ ),\n opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /props.styles?.opacityChangeOnHover/ ),\n legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /props.styles?.legendContainer/ ),\n svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null \|\| _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),\n annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /props.styles?.annotationLayer/ ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip*/ ),\n axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),\n chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null \|\| _props_styles3 === void 0 ? void 0 : _props_styles3.chart)\n };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/CommonComponents/useCartesianChartStyles.styles.raw.js CHANGED Viewed

@@ -8,6 +8,7 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
  */ export const cartesianchartClassNames = {
     root: 'fui-cart__root',
     chartWrapper: 'fui-cart__chartWrapper',
+    plotContainer: 'fui-cart__plotContainer',
     axisTitle: 'fui-cart__axisTitle',
     xAxis: 'fui-cart__xAxis',
     yAxis: 'fui-cart__yAxis',
@@ -20,7 +21,8 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
     tooltip: 'fui-cart__tooltip',
     axisAnnotation: 'fui-cart__axisAnnotation',
     chartTitle: 'fui-cart__chartTitle',
-    chart: 'fui-cart__chart'
+    chart: 'fui-cart__chart',
+    annotationLayer: 'fui-cart__annotationLayer'
 };
 /**
  * Base Styles
@@ -35,8 +37,14 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
         textAlign: 'left'
     },
     chartWrapper: {
+        position: 'relative',
         overflow: 'auto'
     },
+    plotContainer: {
+        position: 'relative',
+        width: '100%',
+        height: '100%'
+    },
     axisTitle: getAxisTitleStyle(),
     axisAnnotation: getAxisTitleStyle(),
     xAxis: {
@@ -90,6 +98,9 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
             fill: 'Canvas'
         }
     },
+    annotationLayer: {
+        pointerEvents: 'none'
+    },
     tooltip: getTooltipStyle()
 });
 /**
@@ -102,12 +113,14 @@ import { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';
     return {
         root: mergeClasses(cartesianchartClassNames.root, baseStyles.root, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
         chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, ((_props_reflowProps = props.reflowProps) === null || _props_reflowProps === void 0 ? void 0 : _props_reflowProps.mode) === 'min-width' ? baseStyles.chartWrapper : '', (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chartWrapper),
+        plotContainer: mergeClasses(cartesianchartClassNames.plotContainer, baseStyles.plotContainer /*props.styles?.plotContainer*/ ),
         axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
         xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
         yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),
         opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
         legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),
         svgTooltip: mergeClasses(cartesianchartClassNames.svgTooltip, baseStyles.svgTooltip, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.svgTooltip),
+        annotationLayer: mergeClasses(cartesianchartClassNames.annotationLayer, baseStyles.annotationLayer /*props.styles?.annotationLayer*/ ),
         tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ ),
         axisAnnotation: mergeClasses(cartesianchartClassNames.axisAnnotation, baseStyles.axisAnnotation),
         chart: mergeClasses(cartesianchartClassNames.chart, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.chart)

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } 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';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\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 axisAnnotation: 'fui-cart__axisAnnotation',\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 textAlign: 'left',\n },\n chartWrapper: {\n overflow: 'auto',\n },\n axisTitle: getAxisTitleStyle() as GriffelStyle,\n axisAnnotation: getAxisTitleStyle() as GriffelStyle,\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: getTooltipStyle() as GriffelStyle,\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 axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA;AAEA,SAAuBA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAGxE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,4BAA4B;AACzE,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,wBAAwB;AAE3E;;CAEC,GACD,OAAO,MAAMC,2BAAiE;IAC5EC,MAAM;IACNC,cAAc;IACdC,WAAW;IACXC,OAAO;IACPC,OAAO;IACPC,sBAAsB;IACtBC,iBAAiB;IACjBC,YAAY;IACZC,aAAa;IACbC,oBAAoB;IACpBC,OAAO;IACPC,SAAS;IACTC,gBAAgB;IAChBC,YAAY;IACZC,OAAO;~~AACT~~,EAAE;AAEF;;CAEC,GACD,MAAMC,~~YAAYxB~~,WAAW;IAC3BS,MAAM;QACJ,GAAGN,~~iBAAiBsB~~,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;QACVC,WAAW;IACb;~~IACArB~~,cAAc;~~QACZoB~~,UAAU;IACZ;~~IACAnB~~,~~WAAWL~~;~~IACXe~~,~~gBAAgBf~~;~~IAChBM~~,OAAO;QACL,UAAU;~~YACRoB~~,~~MAAM9B~~,~~OAAO+B~~,uBAAuB;YACpC,~~GAAG9B~~,~~iBAAiB+B~~,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQnC~~,~~OAAO+B~~,uBAAuB;~~YACtCN~~,OAAO;~~YACPQ~~,mBAAmB;QACrB;QACA,UAAU;~~YACRT~~,SAAS;QACX;IACF;~~IACAb~~,OAAO;QACL,UAAU;YACR,~~GAAGV~~,~~iBAAiB+B~~,cAAc;YAClCF,~~MAAM9B~~,~~OAAO+B~~,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,~~QAAQnC~~,~~OAAO+B~~,uBAAuB;YACtCE,mBAAmB;QACrB;QACA,UAAU;~~YACRT~~,SAAS;QACX;IACF;~~IACAY~~,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;~~IACN1B~~,sBAAsB;~~QACpBsB~~,SAAS;QACTK,QAAQ;IACV;~~IACA1B~~,iBAAiB;~~QACf2B~~,~~WAAWxC~~,~~OAAOyC~~,gBAAgB;QAClCC,~~YAAY1C~~,~~OAAO2C~~,mBAAmB;IACxC;~~IACA7B~~,YAAY;~~QACVgB~~,~~MAAM9B~~,~~OAAO4C~~,uBAAuB;QACpC,~~CAAC1C~~,qBAAqB,EAAE;~~YACtB4B~~,MAAM;QACR;IACF;~~IACAZ~~,~~SAASb~~;AACX;AACA;;;CAGC,GACD,OAAO,~~MAAMwC~~,0BAA0B,CAACC;QAI+BA,eAGjEA,oBACAA,~~gBAiBmFA~~,~~gBAOjCA~~;~~IA/BtD~~,MAAMC,~~UAAU5C~~;IAChB,~~MAAM6C~~,~~aAAa1B~~;IACnB,OAAO;~~QACLf~~,MAAMR,aAAaO,yBAAyBC,IAAI,~~EAAEyC~~,~~WAAWzC~~,IAAI,~~GAAEuC~~,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,~~cAAcvC~~,IAAI;QACrFC,cAAcT,aACZO,yBAAyBE,YAAY,~~EACrCsC~~,EAAAA,qBAAAA,MAAMI,WAAW,cAAjBJ,yCAAAA,mBAAmBK,IAAI,MAAK,cAAcH,~~WAAWxC~~,YAAY,GAAG,~~KACpEsC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAActC~~,YAAY;QAE5BC,~~WAAWV~~,~~aAAaO~~,yBAAyBG,SAAS,~~EAAEuC~~,~~WAAWvC~~,SAAS,CAAC,yBAAyB;QAC1GC,~~OAAOX~~,aAAaO,~~yBAAyBI~~,KAAK,~~EAAEsC~~,~~WAAWtC~~,KAAK,CAAC,qBAAqB;QAC1FC,~~OAAOZ~~,aACLO,~~yBAAyBK~~,KAAK,~~EAC9BqC~~,~~WAAWrC~~,KAAK,~~EAChBoC~~,UAAUC,~~WAAWZ~~,GAAG,~~GAAGY~~,~~WAAWV~~,GAAG,CAAC,qBAAqB;~~QAEjE1B~~,~~sBAAsBb~~,aACpBO,~~yBAAyBM~~,oBAAoB,~~EAC7CoC~~,~~WAAWpC~~,oBAAoB,CAAC,oCAAoC;QAEtEC,~~iBAAiBd~~,aACfO,~~yBAAyBO~~,eAAe,~~EACxCmC~~,~~WAAWnC~~,eAAe,CAAC,+BAA+B;QAE5DC,~~YAAYf~~,aAAaO,~~yBAAyBQ~~,UAAU,~~EAAEkC~~,~~WAAWlC~~,UAAU,~~GAAEgC~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAchC~~,UAAU;~~QAC7GI~~,~~SAASnB~~,aAAaO,~~yBAAyBY~~,OAAO,~~EAAE8B~~,~~WAAW9B~~,OAAO,CAAC,uBAAuB;QAClGC,~~gBAAgBpB~~,aACdO,~~yBAAyBa~~,cAAc,~~EACvC6B~~,~~WAAW7B~~,cAAc;QAG3BE,~~OAAOtB~~,aAAaO,~~yBAAyBe~~,KAAK,~~GAAEyB~~,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,~~eAAczB~~,KAAK;IACzE;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { GriffelStyle, makeStyles, mergeClasses } 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';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\n/*\n @internal\n /\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n root: 'fui-cart__root',\n chartWrapper: 'fui-cart__chartWrapper',\n plotContainer: 'fui-cart__plotContainer',\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 axisAnnotation: 'fui-cart__axisAnnotation',\n chartTitle: 'fui-cart__chartTitle',\n chart: 'fui-cart__chart',\n annotationLayer: 'fui-cart__annotationLayer',\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 textAlign: 'left',\n },\n chartWrapper: {\n position: 'relative',\n overflow: 'auto',\n },\n plotContainer: {\n position: 'relative',\n width: '100%',\n height: '100%',\n },\n axisTitle: getAxisTitleStyle() as GriffelStyle,\n axisAnnotation: getAxisTitleStyle() as GriffelStyle,\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 annotationLayer: {\n pointerEvents: 'none',\n },\n tooltip: getTooltipStyle() as GriffelStyle,\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 plotContainer: mergeClasses(\n cartesianchartClassNames.plotContainer,\n baseStyles.plotContainer /props.styles?.plotContainer/,\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 annotationLayer: mergeClasses(\n cartesianchartClassNames.annotationLayer,\n baseStyles.annotationLayer /props.styles?.annotationLayer/,\n ),\n tooltip: mergeClasses(cartesianchartClassNames.tooltip, baseStyles.tooltip /props.styles?.tooltip/),\n axisAnnotation: mergeClasses(\n cartesianchartClassNames.axisAnnotation,\n baseStyles.axisAnnotation,\n /props.styles?.axisAnnotation,*/\n ),\n chart: mergeClasses(cartesianchartClassNames.chart, props.styles?.chart),\n };\n};\n"],"names":["makeStyles","mergeClasses","tokens","typographyStyles","HighContrastSelector","useRtl","getAxisTitleStyle","getTooltipStyle","cartesianchartClassNames","root","chartWrapper","plotContainer","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","annotationLayer","useStyles","body1","display","width","height","flexDirection","overflow","textAlign","position","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"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"}

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

@@ -5,7 +5,8 @@ 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, getGridProperties, isNonPlotType, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToAreaChartProps, transformPlotlyJsonToLineChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, transformPlotlyJsonToScatterChartProps, projectPolarToCartesian, getAllupLegendsProps, NON_PLOT_KEY_PREFIX, SINGLE_REPEAT, transformPlotlyJsonToFunnelChartProps, transformPlotlyJsonToGanttChartProps } from './PlotlySchemaAdapter';
+import { correctYearMonth, getGridProperties, isNonPlotType, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToAreaChartProps, transformPlotlyJsonToLineChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, transformPlotlyJsonToScatterChartProps, projectPolarToCartesian, getAllupLegendsProps, NON_PLOT_KEY_PREFIX, SINGLE_REPEAT, transformPlotlyJsonToFunnelChartProps, transformPlotlyJsonToGanttChartProps, transformPlotlyJsonToAnnotationChartProps } from './PlotlySchemaAdapter';
+import { AnnotationOnlyChart } from '../AnnotationOnlyChart/AnnotationOnlyChart';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
 import { LineChart } from '../LineChart/index';
@@ -76,6 +77,10 @@ const LineAreaPreTransformOp = (plotlyInput)=>{
     };
 };
 const chartMap = {
+    annotation: {
+        transformer: transformPlotlyJsonToAnnotationChartProps,
+        renderer: AnnotationOnlyChart
+    },
     // PieData category charts
     donut: {
         transformer: transformPlotlyJsonToDonutProps,
@@ -210,10 +215,13 @@ const useIsDarkTheme = ()=>{
         onChange: onActiveLegendsChange,
         selectedLegends: activeLegends
     };
-    const commonProps = {
-        legendProps: multiSelectLegendProps,
+    const baseCommonProps = {
         componentRef: chartRef
     };
+    const interactiveCommonProps = {
+        ...baseCommonProps,
+        legendProps: multiSelectLegendProps
+    };
     function createLegends(legendProps) {
         // eslint-disable-next-line react/jsx-no-bind
         return /*#__PURE__*/ React.createElement(Legends, {
@@ -264,20 +272,25 @@ const useIsDarkTheme = ()=>{
     }
     const groupedTraces = {};
     let nonCartesianTraceCount = 0;
-    plotlyInputWithValidData.data.forEach((trace, index)=>{
-        let traceKey = '';
-        if (isNonPlotType(chart.validTracesInfo[index].type)) {
-            traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
-            nonCartesianTraceCount++;
-        } else {
-            var _trace_xaxis;
-            traceKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
-        }
-        if (!groupedTraces[traceKey]) {
-            groupedTraces[traceKey] = [];
-        }
-        groupedTraces[traceKey].push(index);
-    });
+    // For annotation-only charts, create a single group entry
+    if (chart.type === 'annotation') {
+        groupedTraces[DEFAULT_XAXIS] = [];
+    } else {
+        plotlyInputWithValidData.data.forEach((trace, index)=>{
+            let traceKey = '';
+            if (isNonPlotType(chart.validTracesInfo[index].type)) {
+                traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;
+                nonCartesianTraceCount++;
+            } else {
+                var _trace_xaxis;
+                traceKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
+            }
+            if (!groupedTraces[traceKey]) {
+                groupedTraces[traceKey] = [];
+            }
+            groupedTraces[traceKey].push(index);
+        });
+    }
     isMultiPlot.current = Object.keys(groupedTraces).length > 1;
     const gridProperties = getGridProperties(plotlyInputWithValidData, isMultiPlot.current, chart.validTracesInfo);
     // Render only one plot if the grid properties cannot determine positioning of multiple plots.
@@ -308,12 +321,14 @@ const useIsDarkTheme = ()=>{
             gridTemplateColumns: gridProperties.templateColumns
         }
     }, Object.entries(groupedTraces).map(([xAxisKey, index])=>{
+        var _filteredTracesInfo_;
         const plotlyInputForGroup = {
             ...plotlyInputWithValidData,
             data: index.map((idx)=>plotlyInputWithValidData.data[idx])
         };
         const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace.index));
-        let chartType = chart.type === 'fallback' || chart.type === 'groupedverticalbar' ? chart.type : filteredTracesInfo[0].type;
+        var _filteredTracesInfo__type;
+        let chartType = chart.type === 'fallback' || chart.type === 'groupedverticalbar' ? chart.type : (_filteredTracesInfo__type = (_filteredTracesInfo_ = filteredTracesInfo[0]) === null || _filteredTracesInfo_ === void 0 ? void 0 : _filteredTracesInfo_.type) !== null && _filteredTracesInfo__type !== void 0 ? _filteredTracesInfo__type : chart.type;
         if (validTracesFilteredIndex.some((trace)=>trace.type === 'line') && validTracesFilteredIndex.some((trace)=>trace.type === 'scatter')) {
             chartType = 'line';
         }
@@ -323,6 +338,11 @@ const useIsDarkTheme = ()=>{
             if (preTransformCondition === undefined || preTransformCondition(plotlyInputForGroup)) {
                 const transformedInput = preTransformOperation ? preTransformOperation(plotlyInputForGroup) : plotlyInputForGroup;
                 const cellProperties = gridProperties.layout[xAxisKey];
+                const resolvedCommonProps = chartType === 'annotation' ? baseCommonProps : {
+                    ...interactiveCommonProps,
+                    xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
+                    yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
+                };
                 var _cellProperties_row, _cellProperties_column;
                 return renderChart(renderer, transformer, [
                     transformedInput,
@@ -331,7 +351,7 @@ const useIsDarkTheme = ()=>{
                     colorwayType,
                     isDarkTheme
                 ], {
-                    ...commonProps,
+                    ...resolvedCommonProps,
                     xAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.xAnnotation,
                     yAxisAnnotation: cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.yAnnotation
                 }, (_cellProperties_row = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.row) !== null && _cellProperties_row !== void 0 ? _cellProperties_row : 1, (_cellProperties_column = cellProperties === null || cellProperties === void 0 ? void 0 : cellProperties.column) !== null && _cellProperties_column !== void 0 ? _cellProperties_column : 1);

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isMonthArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport type { GridProperties } from './PlotlySchemaAdapter';\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 getGridProperties,\n isNonPlotType,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n NON_PLOT_KEY_PREFIX,\n SINGLE_REPEAT,\n transformPlotlyJsonToFunnelChartProps,\n transformPlotlyJsonToGanttChartProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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';\nimport { FunnelChart } from '../FunnelChart/FunnelChart';\nimport { GanttChart } from '../GanttChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\nimport { LegendsProps, Legends } from '../Legends/index';\nimport { JSXElement } from '@fluentui/react-utilities/src/index';\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);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\nconst ResponsiveGanttChart = withResponsiveContainer(GanttChart);\n// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart\n//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\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 \| null>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\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\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n): JSXElement {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n gantt: {\n transformer: typeof transformPlotlyJsonToGanttChartProps;\n renderer: typeof ResponsiveGanttChart;\n } & PreTransformHooks;\n funnel: {\n transformer: typeof transformPlotlyJsonToFunnelChartProps;\n renderer: typeof FunnelChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n gantt: {\n transformer: transformPlotlyJsonToGanttChartProps,\n renderer: ResponsiveGanttChart,\n },\n funnel: {\n transformer: transformPlotlyJsonToFunnelChartProps,\n renderer: FunnelChart,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\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>(({ colorwayType = 'default', ...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 const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n index,\n type: trace.type,\n }));\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n const isMultiPlot = React.useRef(false);\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 function createLegends(legendProps: LegendsProps): JSXElement {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\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 if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n plotlyInputWithValidData.layout = cartesianProjection.layout;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace.type === 'scatterpolar') {\n const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';\n if (mode.includes('line')) {\n validTracesFilteredIndex[index].type = 'line';\n } else if (mode.includes('markers') \|\| mode === 'text') {\n validTracesFilteredIndex[index].type = 'scatter';\n } else {\n validTracesFilteredIndex[index].type = 'line';\n }\n }\n });\n }\n const groupedTraces: Record<string, number[]> = {};\n let nonCartesianTraceCount = 0;\n plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n let traceKey = '';\n if (isNonPlotType(chart.validTracesInfo![index].type)) {\n traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n nonCartesianTraceCount++;\n } else {\n traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n }\n if (!groupedTraces[traceKey]) {\n groupedTraces[traceKey] = [];\n }\n groupedTraces[traceKey].push(index);\n });\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(\n plotlyInputWithValidData,\n isMultiPlot.current,\n chart.validTracesInfo!,\n );\n\n // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n if (\n isMultiPlot.current &&\n gridProperties.templateRows === SINGLE_REPEAT &&\n gridProperties.templateColumns === SINGLE_REPEAT\n ) {\n if (chart.type === 'donut') {\n // If there are multiple data traces for donut/pie, picking the last one similar to plotly\n const keys = Object.keys(groupedTraces);\n keys.forEach((key, index) => {\n if (index < keys.length - 1) {\n delete groupedTraces[key];\n }\n });\n } else {\n Object.keys(groupedTraces).forEach((key, index) => {\n if (index > 0) {\n delete groupedTraces[key];\n }\n });\n }\n isMultiPlot.current = false;\n }\n\n const allupLegendsProps = getAllupLegendsProps(\n plotlyInputWithValidData,\n colorMap,\n colorwayType,\n chart.validTracesInfo!,\n isDarkTheme,\n );\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n let chartType =\n chart.type === 'fallback' \|\| chart.type === 'groupedverticalbar' ? chart.type : filteredTracesInfo[0].type;\n\n if (\n validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined \|\| preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, colorwayType, isDarkTheme],\n {\n ...commonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","isNonPlotType","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","NON_PLOT_KEY_PREFIX","SINGLE_REPEAT","transformPlotlyJsonToFunnelChartProps","transformPlotlyJsonToGanttChartProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","FunnelChart","GanttChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","ResponsiveGanttChart","DEFAULT_XAXIS","useColorMapping","colorMap","useRef","Map","renderChart","Renderer","transformer","transformerArgs","commonProps","cellRow","cellColumn","chartProps","div","key","style","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","LineAreaPreTransformOp","plotlyInput","xValues","data","x","isXMonth","renderData","map","dataPoint","layout","chartMap","donut","renderer","sankey","table","horizontalbar","groupedverticalbar","verticalstackedbar","heatmap","gauge","verticalbar","area","preTransformOperation","line","scatter","gantt","funnel","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","colorwayType","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","error","plotlyInputWithValidData","validTracesInfo","trace","index","validTracesFilteredIndex","type","selectedLegends","chartRef","isMultiPlot","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","legendProps","componentRef","createLegends","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","cartesianProjection","forEach","mode","includes","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","plotlyInputForGroup","idx","filteredTracesInfo","filter","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["'use client';\n\n/* eslint-disable @typescript-eslint/naming-convention /\nimport as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, TraceInfo } from '@fluentui/chart-utilities';\nimport {\n decodeBase64Fields,\n isArrayOrTypedArray,\n isMonthArray,\n mapFluentChart,\n sanitizeJson,\n} from '@fluentui/chart-utilities';\nimport type { GridProperties } from './PlotlySchemaAdapter';\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 getGridProperties,\n isNonPlotType,\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToAreaChartProps,\n transformPlotlyJsonToLineChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n transformPlotlyJsonToChartTableProps,\n transformPlotlyJsonToScatterChartProps,\n projectPolarToCartesian,\n getAllupLegendsProps,\n NON_PLOT_KEY_PREFIX,\n SINGLE_REPEAT,\n transformPlotlyJsonToFunnelChartProps,\n transformPlotlyJsonToGanttChartProps,\n transformPlotlyJsonToAnnotationChartProps,\n} from './PlotlySchemaAdapter';\nimport type { ColorwayType } from './PlotlyColorAdapter';\nimport { AnnotationOnlyChart } from '../AnnotationOnlyChart/AnnotationOnlyChart';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } 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';\nimport { FunnelChart } from '../FunnelChart/FunnelChart';\nimport { GanttChart } from '../GanttChart/index';\n\nimport { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';\nimport { ChartTable } from '../ChartTable/index';\nimport { LegendsProps, Legends } from '../Legends/index';\nimport { JSXElement } from '@fluentui/react-utilities/src/index';\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);\nconst ResponsiveChartTable = withResponsiveContainer(ChartTable);\nconst ResponsiveGanttChart = withResponsiveContainer(GanttChart);\n// Removing responsive wrapper for FunnelChart as responsive container is not working with FunnelChart\n//const ResponsiveFunnelChart = withResponsiveContainer(FunnelChart);\n\n// Default x-axis key for grouping traces. Also applicable for PieData and SankeyData where x-axis is not defined.\nconst DEFAULT_XAXIS = 'x';\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 \| null>;\n\n /\n Optional prop to specify the colorway type of the chart.\n * - 'default': Use Fluent UI color palette aligning with plotly colorway.\n * - 'builtin': Use Fluent UI colorway.\n * - 'others': Reserved for future colorways.\n * @default 'default'\n /\n colorwayType?: ColorwayType;\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\nfunction renderChart<TProps>(\n Renderer: React.ComponentType<TProps>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformer: (...args: any[]) => TProps,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n transformerArgs: any[],\n commonProps: Partial<TProps>,\n cellRow: number,\n cellColumn: number,\n): JSXElement {\n const chartProps = transformer(...transformerArgs);\n return (\n <div\n key={`${cellRow}_${cellColumn}`}\n style={{\n gridRowStart: cellRow,\n gridRowEnd: cellRow + 1,\n gridColumnStart: cellColumn,\n gridColumnEnd: cellColumn + 1,\n }}\n >\n <Renderer {...chartProps} {...commonProps} />\n </div>\n );\n}\n\ntype PreTransformHooks = {\n preTransformCondition?: (plotlySchema: PlotlySchema) => boolean;\n preTransformOperation?: (plotlySchema: PlotlySchema) => PlotlySchema;\n};\n\nconst LineAreaPreTransformOp = (plotlyInput: PlotlySchema) => {\n const xValues = (plotlyInput.data[0] as PlotData).x;\n const isXMonth = isMonthArray(xValues);\n let renderData = plotlyInput.data;\n if (isXMonth) {\n renderData = plotlyInput.data.map((dataPoint: PlotData) => ({\n ...dataPoint,\n x: correctYearMonth(dataPoint.x),\n }));\n }\n return { data: renderData, layout: plotlyInput.layout };\n};\n\ntype ChartTypeMap = {\n annotation: {\n transformer: typeof transformPlotlyJsonToAnnotationChartProps;\n renderer: typeof AnnotationOnlyChart;\n } & PreTransformHooks;\n donut: {\n transformer: typeof transformPlotlyJsonToDonutProps;\n renderer: typeof ResponsiveDonutChart;\n } & PreTransformHooks;\n sankey: {\n transformer: typeof transformPlotlyJsonToSankeyProps;\n renderer: typeof ResponsiveSankeyChart;\n } & PreTransformHooks;\n table: {\n transformer: typeof transformPlotlyJsonToChartTableProps;\n renderer: typeof ResponsiveChartTable;\n } & PreTransformHooks;\n horizontalbar: {\n transformer: typeof transformPlotlyJsonToHorizontalBarWithAxisProps;\n renderer: typeof ResponsiveHorizontalBarChartWithAxis;\n } & PreTransformHooks;\n groupedverticalbar: {\n transformer: typeof transformPlotlyJsonToGVBCProps;\n renderer: typeof ResponsiveGroupedVerticalBarChart;\n } & PreTransformHooks;\n verticalstackedbar: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n heatmap: {\n transformer: typeof transformPlotlyJsonToHeatmapProps;\n renderer: typeof ResponsiveHeatMapChart;\n } & PreTransformHooks;\n gauge: {\n transformer: typeof transformPlotlyJsonToGaugeProps;\n renderer: typeof ResponsiveGaugeChart;\n } & PreTransformHooks;\n verticalbar: {\n transformer: typeof transformPlotlyJsonToVBCProps;\n renderer: typeof ResponsiveVerticalBarChart;\n } & PreTransformHooks;\n area: {\n transformer: typeof transformPlotlyJsonToAreaChartProps;\n renderer: typeof ResponsiveAreaChart;\n } & PreTransformHooks;\n line: {\n transformer: typeof transformPlotlyJsonToLineChartProps;\n renderer: typeof ResponsiveLineChart;\n } & PreTransformHooks;\n scatter: {\n transformer: typeof transformPlotlyJsonToScatterChartProps;\n renderer: typeof ResponsiveScatterChart;\n } & PreTransformHooks;\n gantt: {\n transformer: typeof transformPlotlyJsonToGanttChartProps;\n renderer: typeof ResponsiveGanttChart;\n } & PreTransformHooks;\n funnel: {\n transformer: typeof transformPlotlyJsonToFunnelChartProps;\n renderer: typeof FunnelChart;\n } & PreTransformHooks;\n fallback: {\n transformer: typeof transformPlotlyJsonToVSBCProps;\n renderer: typeof ResponsiveVerticalStackedBarChart;\n } & PreTransformHooks;\n};\n\nconst chartMap: ChartTypeMap = {\n annotation: {\n transformer: transformPlotlyJsonToAnnotationChartProps,\n renderer: AnnotationOnlyChart,\n },\n // PieData category charts\n donut: {\n transformer: transformPlotlyJsonToDonutProps,\n renderer: ResponsiveDonutChart,\n },\n // SankeyData category charts\n sankey: {\n transformer: transformPlotlyJsonToSankeyProps,\n renderer: ResponsiveSankeyChart,\n },\n // TableData category charts\n table: {\n transformer: transformPlotlyJsonToChartTableProps,\n renderer: ResponsiveChartTable,\n },\n // PlotData category charts\n horizontalbar: {\n transformer: transformPlotlyJsonToHorizontalBarWithAxisProps,\n renderer: ResponsiveHorizontalBarChartWithAxis,\n },\n groupedverticalbar: {\n transformer: transformPlotlyJsonToGVBCProps,\n renderer: ResponsiveGroupedVerticalBarChart,\n },\n verticalstackedbar: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\n heatmap: {\n transformer: transformPlotlyJsonToHeatmapProps,\n renderer: ResponsiveHeatMapChart,\n },\n gauge: {\n transformer: transformPlotlyJsonToGaugeProps,\n renderer: ResponsiveGaugeChart,\n },\n verticalbar: {\n transformer: transformPlotlyJsonToVBCProps,\n renderer: ResponsiveVerticalBarChart,\n },\n area: {\n transformer: transformPlotlyJsonToAreaChartProps,\n renderer: ResponsiveAreaChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n line: {\n transformer: transformPlotlyJsonToLineChartProps,\n renderer: ResponsiveLineChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n scatter: {\n transformer: transformPlotlyJsonToScatterChartProps,\n renderer: ResponsiveScatterChart,\n preTransformOperation: LineAreaPreTransformOp,\n },\n gantt: {\n transformer: transformPlotlyJsonToGanttChartProps,\n renderer: ResponsiveGanttChart,\n },\n funnel: {\n transformer: transformPlotlyJsonToFunnelChartProps,\n renderer: FunnelChart,\n },\n fallback: {\n transformer: transformPlotlyJsonToVSBCProps,\n renderer: ResponsiveVerticalStackedBarChart,\n },\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>(({ colorwayType = 'default', ...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 const validTracesFilteredIndex: TraceInfo[] = chart.validTracesInfo!.map((trace, index) => ({\n index,\n type: trace.type,\n }));\n\n let { selectedLegends } = plotlySchema;\n const colorMap = useColorMapping();\n const isDarkTheme = useIsDarkTheme();\n const chartRef = React.useRef<Chart>(null);\n const isMultiPlot = React.useRef(false);\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 baseCommonProps = {\n componentRef: chartRef,\n };\n\n const interactiveCommonProps = {\n ...baseCommonProps,\n legendProps: multiSelectLegendProps,\n };\n\n function createLegends(legendProps: LegendsProps): JSXElement {\n // eslint-disable-next-line react/jsx-no-bind\n return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;\n }\n\n // TODO\n const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {\n return new Promise((resolve, reject) => {\n if (isMultiPlot.current) {\n return reject(Error('Exporting multi plot charts as image is not supported'));\n }\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 if (chart.type === 'scatterpolar') {\n const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);\n plotlyInputWithValidData.data = cartesianProjection.data;\n plotlyInputWithValidData.layout = cartesianProjection.layout;\n validTracesFilteredIndex.forEach((trace, index) => {\n if (trace.type === 'scatterpolar') {\n const mode = (plotlyInputWithValidData.data[index] as PlotData)?.mode ?? '';\n if (mode.includes('line')) {\n validTracesFilteredIndex[index].type = 'line';\n } else if (mode.includes('markers') \|\| mode === 'text') {\n validTracesFilteredIndex[index].type = 'scatter';\n } else {\n validTracesFilteredIndex[index].type = 'line';\n }\n }\n });\n }\n const groupedTraces: Record<string, number[]> = {};\n let nonCartesianTraceCount = 0;\n\n // For annotation-only charts, create a single group entry\n if (chart.type === 'annotation') {\n groupedTraces[DEFAULT_XAXIS] = [];\n } else {\n plotlyInputWithValidData.data.forEach((trace: Data, index: number) => {\n let traceKey = '';\n if (isNonPlotType(chart.validTracesInfo![index].type)) {\n traceKey = `${NON_PLOT_KEY_PREFIX}${nonCartesianTraceCount + 1}`;\n nonCartesianTraceCount++;\n } else {\n traceKey = (trace as PlotData).xaxis ?? DEFAULT_XAXIS;\n }\n if (!groupedTraces[traceKey]) {\n groupedTraces[traceKey] = [];\n }\n groupedTraces[traceKey].push(index);\n });\n }\n\n isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n const gridProperties: GridProperties = getGridProperties(\n plotlyInputWithValidData,\n isMultiPlot.current,\n chart.validTracesInfo!,\n );\n\n // Render only one plot if the grid properties cannot determine positioning of multiple plots.\n if (\n isMultiPlot.current &&\n gridProperties.templateRows === SINGLE_REPEAT &&\n gridProperties.templateColumns === SINGLE_REPEAT\n ) {\n if (chart.type === 'donut') {\n // If there are multiple data traces for donut/pie, picking the last one similar to plotly\n const keys = Object.keys(groupedTraces);\n keys.forEach((key, index) => {\n if (index < keys.length - 1) {\n delete groupedTraces[key];\n }\n });\n } else {\n Object.keys(groupedTraces).forEach((key, index) => {\n if (index > 0) {\n delete groupedTraces[key];\n }\n });\n }\n isMultiPlot.current = false;\n }\n\n const allupLegendsProps = getAllupLegendsProps(\n plotlyInputWithValidData,\n colorMap,\n colorwayType,\n chart.validTracesInfo!,\n isDarkTheme,\n );\n\n type ChartType = keyof ChartTypeMap;\n // map through the grouped traces and render the appropriate chart\n return (\n <>\n <div\n style={{\n display: 'grid',\n gridTemplateRows: gridProperties.templateRows,\n gridTemplateColumns: gridProperties.templateColumns,\n }}\n >\n {Object.entries(groupedTraces).map(([xAxisKey, index]) => {\n const plotlyInputForGroup: PlotlySchema = {\n ...plotlyInputWithValidData,\n data: index.map(idx => plotlyInputWithValidData.data[idx]),\n };\n\n const filteredTracesInfo = validTracesFilteredIndex.filter(trace => index.includes(trace.index));\n let chartType =\n chart.type === 'fallback' \|\| chart.type === 'groupedverticalbar'\n ? chart.type\n : filteredTracesInfo[0]?.type ?? chart.type;\n\n if (\n validTracesFilteredIndex.some(trace => trace.type === 'line') &&\n validTracesFilteredIndex.some(trace => trace.type === 'scatter')\n ) {\n chartType = 'line';\n }\n\n const chartEntry = chartMap[chartType as ChartType];\n if (chartEntry) {\n const { transformer, renderer, preTransformCondition, preTransformOperation } = chartEntry;\n if (preTransformCondition === undefined \|\| preTransformCondition(plotlyInputForGroup)) {\n const transformedInput = preTransformOperation\n ? preTransformOperation(plotlyInputForGroup)\n : plotlyInputForGroup;\n const cellProperties = gridProperties.layout[xAxisKey];\n\n const resolvedCommonProps = (\n chartType === 'annotation'\n ? baseCommonProps\n : {\n ...interactiveCommonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n }\n ) as Partial<ReturnType<typeof transformer>>;\n\n return renderChart<ReturnType<typeof transformer>>(\n renderer,\n transformer,\n [transformedInput, isMultiPlot.current, colorMap, colorwayType, isDarkTheme],\n {\n ...resolvedCommonProps,\n xAxisAnnotation: cellProperties?.xAnnotation,\n yAxisAnnotation: cellProperties?.yAnnotation,\n },\n cellProperties?.row ?? 1,\n cellProperties?.column ?? 1,\n );\n }\n return <></>;\n } else {\n throw new Error(`Unsupported chart type :${plotlyInputForGroup.data[0]?.type}`);\n }\n })}\n </div>\n {isMultiPlot.current && createLegends(allupLegendsProps)}\n </>\n );\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","isNonPlotType","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","NON_PLOT_KEY_PREFIX","SINGLE_REPEAT","transformPlotlyJsonToFunnelChartProps","transformPlotlyJsonToGanttChartProps","transformPlotlyJsonToAnnotationChartProps","AnnotationOnlyChart","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","FunnelChart","GanttChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","ResponsiveGanttChart","DEFAULT_XAXIS","useColorMapping","colorMap","useRef","Map","renderChart","Renderer","transformer","transformerArgs","commonProps","cellRow","cellColumn","chartProps","div","key","style","gridRowStart","gridRowEnd","gridColumnStart","gridColumnEnd","LineAreaPreTransformOp","plotlyInput","xValues","data","x","isXMonth","renderData","map","dataPoint","layout","chartMap","annotation","renderer","donut","sankey","table","horizontalbar","groupedverticalbar","verticalstackedbar","heatmap","gauge","verticalbar","area","preTransformOperation","line","scatter","gantt","funnel","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","colorwayType","props","forwardedRef","plotlySchema","chartSchema","chart","isValid","Error","errorMessage","error","plotlyInputWithValidData","validTracesInfo","trace","index","validTracesFilteredIndex","type","selectedLegends","chartRef","isMultiPlot","activeLegends","setActiveLegends","useState","onActiveLegendsChange","keys","onSchemaChange","useEffect","multiSelectLegendProps","canSelectMultipleLegends","onChange","baseCommonProps","componentRef","interactiveCommonProps","legendProps","createLegends","exportAsImage","useCallback","opts","Promise","resolve","reject","current","toImage","background","scale","then","catch","useImperativeHandle","cartesianProjection","forEach","mode","includes","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","filteredTracesInfo","plotlyInputForGroup","idx","filter","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","resolvedCommonProps","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName"],"mappings":"AAAA;AAEA,uDAAuD,GACvD,YAAYA,WAAW,QAAQ;AAE/B,SACEC,kBAAkB,EAClBC,mBAAmB,EACnBC,YAAY,EACZC,cAAc,EACdC,YAAY,QACP,4BAA4B;AAEnC,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,yBAAyBC,cAAc,QAAQ,kCAAkC;AAC1F,SAAgBC,aAAa,QAAQ,mBAAmB;AACxD,YAAYC,aAAa,WAAW;AAEpC,SACEC,gBAAgB,EAChBC,iBAAiB,EACjBC,aAAa,EACbC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,mCAAmC,EACnCC,mCAAmC,EACnCC,+CAA+C,EAC/CC,iCAAiC,EACjCC,gCAAgC,EAChCC,+BAA+B,EAC/BC,8BAA8B,EAC9BC,6BAA6B,EAC7BC,oCAAoC,EACpCC,sCAAsC,EACtCC,uBAAuB,EACvBC,oBAAoB,EACpBC,mBAAmB,EACnBC,aAAa,EACbC,qCAAqC,EACrCC,oCAAoC,EACpCC,yCAAyC,QACpC,wBAAwB;AAE/B,SAASC,mBAAmB,QAAQ,6CAA6C;AACjF,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAASC,uBAAuB,QAAQ,mCAAmC;AAC3E,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,0BAA0B,QAAQ,sCAAsC;AACjF,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,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;AACrD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,UAAU,QAAQ,sBAAsB;AAEjD,SAASC,uBAAuB,QAAQ,iDAAiD;AACzF,SAASC,UAAU,QAAQ,sBAAsB;AACjD,SAAuBC,OAAO,QAAQ,mBAAmB;AAGzD,MAAMC,uBAAuBH,wBAAwBb;AACrD,MAAMiB,oCAAoCJ,wBAAwBZ;AAClE,MAAMiB,sBAAsBL,wBAAwBX;AACpD,MAAMiB,uCAAuCN,wBAAwBV;AACrE,MAAMiB,sBAAsBP,wBAAwBT;AACpD,MAAMiB,yBAAyBR,wBAAwBR;AACvD,MAAMiB,wBAAwBT,wBAAwBP;AACtD,MAAMiB,uBAAuBV,wBAAwBN;AACrD,MAAMiB,oCAAoCX,wBAAwBL;AAClE,MAAMiB,6BAA6BZ,wBAAwBJ;AAC3D,MAAMiB,yBAAyBb,wBAAwBH;AACvD,MAAMiB,uBAAuBd,wBAAwBC;AACrD,MAAMc,uBAAuBf,wBAAwBD;AACrD,sGAAsG;AACtG,qEAAqE;AAErE,kHAAkH;AAClH,MAAMiB,gBAAgB;AAoDtB,MAAMC,kBAAkB;IACtB,MAAMC,WAAWjE,MAAMkE,MAAM,CAAC,IAAIC;IAClC,OAAOF;AACT;AAEA,SAASG,YACPC,QAAqC,EACrC,8DAA8D;AAC9DC,WAAuC,EACvC,8DAA8D;AAC9DC,eAAsB,EACtBC,WAA4B,EAC5BC,OAAe,EACfC,UAAkB;IAElB,MAAMC,aAAaL,eAAeC;IAClC,qBACE,oBAACK;QACCC,KAAK,GAAGJ,QAAQ,CAAC,EAAEC,YAAY;QAC/BI,OAAO;YACLC,cAAcN;YACdO,YAAYP,UAAU;YACtBQ,iBAAiBP;YACjBQ,eAAeR,aAAa;QAC9B;qBAEA,oBAACL;QAAU,GAAGM,UAAU;QAAG,GAAGH,WAAW;;AAG/C;AAOA,MAAMW,yBAAyB,CAACC;IAC9B,MAAMC,UAAU,AAACD,YAAYE,IAAI,CAAC,EAAE,CAAcC,CAAC;IACnD,MAAMC,WAAWrF,aAAakF;IAC9B,IAAII,aAAaL,YAAYE,IAAI;IACjC,IAAIE,UAAU;QACZC,aAAaL,YAAYE,IAAI,CAACI,GAAG,CAAC,CAACC,YAAyB,CAAA;gBAC1D,GAAGA,SAAS;gBACZJ,GAAG5E,iBAAiBgF,UAAUJ,CAAC;YACjC,CAAA;IACF;IACA,OAAO;QAAED,MAAMG;QAAYG,QAAQR,YAAYQ,MAAM;IAAC;AACxD;AAqEA,MAAMC,WAAyB;IAC7BC,YAAY;QACVxB,aAAatC;QACb+D,UAAU9D;IACZ;IACA,0BAA0B;IAC1B+D,OAAO;QACL1B,aAAaxD;QACbiF,UAAU7C;IACZ;IACA,6BAA6B;IAC7B+C,QAAQ;QACN3B,aAAalD;QACb2E,UAAUvC;IACZ;IACA,4BAA4B;IAC5B0C,OAAO;QACL5B,aAAa9C;QACbuE,UAAUlC;IACZ;IACA,2BAA2B;IAC3BsC,eAAe;QACb7B,aAAapD;QACb6E,UAAU1C;IACZ;IACA+C,oBAAoB;QAClB9B,aAAahD;QACbyE,UAAUrC;IACZ;IACA2C,oBAAoB;QAClB/B,aAAavD;QACbgF,UAAU5C;IACZ;IACAmD,SAAS;QACPhC,aAAanD;QACb4E,UAAUxC;IACZ;IACAgD,OAAO;QACLjC,aAAajD;QACb0E,UAAUtC;IACZ;IACA+C,aAAa;QACXlC,aAAa/C;QACbwE,UAAUpC;IACZ;IACA8C,MAAM;QACJnC,aAAatD;QACb+E,UAAUzC;QACVoD,uBAAuBvB;IACzB;IACAwB,MAAM;QACJrC,aAAarD;QACb8E,UAAU3C;QACVsD,uBAAuBvB;IACzB;IACAyB,SAAS;QACPtC,aAAa7C;QACbsE,UAAUnC;QACV8C,uBAAuBvB;IACzB;IACA0B,OAAO;QACLvC,aAAavC;QACbgE,UAAUjC;IACZ;IACAgD,QAAQ;QACNxC,aAAaxC;QACbiE,UAAUlD;IACZ;IACAkE,UAAU;QACRzC,aAAavD;QACbgF,UAAU5C;IACZ;AACF;AAEA,MAAM6D,iBAAiB;IACrB,MAAMC,gBAAgBjH,MAAMkH,UAAU,CAAC1G;IACvC,MAAM2G,UAAiBF,gBAAgBA,gBAAgBxG;IAEvD,uCAAuC;IACvC,MAAM2G,kBAAkB1G,QAAQ2G,GAAG,CAACF,QAAQG,uBAAuB;IACnE,MAAMC,kBAAkB7G,QAAQ2G,GAAG,CAACF,QAAQK,uBAAuB;IAEnE,MAAMC,cAAcL,gBAAgBM,CAAC,GAAGH,gBAAgBG,CAAC;IAEzD,OAAOD;AACT;AAEA;;;CAGC,GACD,OAAO,MAAME,iCAAmE3H,MAAM4H,UAAU,CAG9F,CAAC,EAAEC,eAAe,SAAS,EAAE,GAAGC,OAAO,EAAEC;IACzC,MAAM,EAAEC,YAAY,EAAE,GAAG3H,aAAayH,MAAMG,WAAW;IACvD,MAAMC,QAAyB9H,eAAe4H;IAC9C,IAAI,CAACE,MAAMC,OAAO,EAAE;QAClB,MAAM,IAAIC,MAAM,CAAC,sBAAsB,EAAEF,MAAMG,YAAY,EAAE;IAC/D;IACA,IAAIjD,cAAc4C;IAClB,IAAI;QACF5C,cAAcnF,mBAAmBmF;IACnC,EAAE,OAAOkD,OAAO;QACd,MAAM,IAAIF,MAAM,CAAC,gCAAgC,EAAEE,OAAO;IAC5D;IACA,MAAMC,2BAAyC;QAC7C,GAAGnD,WAAW;QACdE,MAAM4C,MAAMM,eAAe,CAAE9C,GAAG,CAAC+C,CAAAA,QAASrD,YAAYE,IAAI,CAACmD,MAAMC,KAAK,CAAC;IACzE;IAEA,MAAMC,2BAAwCT,MAAMM,eAAe,CAAE9C,GAAG,CAAC,CAAC+C,OAAOC,QAAW,CAAA;YAC1FA;YACAE,MAAMH,MAAMG,IAAI;QAClB,CAAA;IAEA,IAAI,EAAEC,eAAe,EAAE,GAAGb;IAC1B,MAAM/D,WAAWD;IACjB,MAAMyD,cAAcT;IACpB,MAAM8B,WAAW9I,MAAMkE,MAAM,CAAQ;IACrC,MAAM6E,cAAc/I,MAAMkE,MAAM,CAAC;IAEjC,IAAI,CAAChE,oBAAoB2I,kBAAkB;QACzCA,kBAAkB,EAAE;IACtB;IAEA,MAAM,CAACG,eAAeC,iBAAiB,GAAGjJ,MAAMkJ,QAAQ,CAAWL;IACnE,MAAMM,wBAAwB,CAACC;QAC7BH,iBAAiBG;QACjB,IAAItB,MAAMuB,cAAc,EAAE;YACxBvB,MAAMuB,cAAc,CAAC;gBAAErB,cAAc;oBAAE5C;oBAAayD,iBAAiBO;gBAAK;YAAE;QAC9E;IACF;IAEApJ,MAAMsJ,SAAS,CAAC;QACd,wDAAwD;QACxD,MAAM,EAAEtB,YAAY,EAAE,GAAG3H,aAAayH,MAAMG,WAAW;QACvD,wDAAwD;QACxD,MAAM,EAAEY,eAAe,EAAE,GAAGb;QAC5BiB,iBAAiBJ,4BAAAA,6BAAAA,kBAAmB,EAAE;IACxC,GAAG;QAACf,MAAMG,WAAW;KAAC;IAEtB,MAAMsB,yBAAyB;QAC7BC,0BAA0B;QAC1BC,UAAUN;QACVN,iBAAiBG;IACnB;IAEA,MAAMU,kBAAkB;QACtBC,cAAcb;IAChB;IAEA,MAAMc,yBAAyB;QAC7B,GAAGF,eAAe;QAClBG,aAAaN;IACf;IAEA,SAASO,cAAcD,WAAyB;QAC9C,6CAA6C;QAC7C,qBAAO,oBAAC5G;YAAS,GAAG4G,WAAW;YAAEhB,iBAAiBG;YAAeS,UAAUN;;IAC7E;IAEA,OAAO;IACP,MAAMY,gBAAgB/J,MAAMgK,WAAW,CAAC,CAACC;QACvC,OAAO,IAAIC,QAAQ,CAACC,SAASC;YAC3B,IAAIrB,YAAYsB,OAAO,EAAE;gBACvB,OAAOD,OAAOhC,MAAM;YACtB;YACA,IAAI,CAACU,SAASuB,OAAO,IAAI,OAAOvB,SAASuB,OAAO,CAACC,OAAO,KAAK,YAAY;gBACvE,OAAOF,OAAOhC,MAAM;YACtB;YAEAU,SAASuB,OAAO,CACbC,OAAO,CAAC;gBACPC,YAAYjK,OAAOgH,uBAAuB;gBAC1CkD,OAAO;gBACP,GAAGP,IAAI;YACT,GACCQ,IAAI,CAACN,SACLO,KAAK,CAACN;QACX;IACF,GAAG,EAAE;IAELpK,MAAM2K,mBAAmB,CACvB7C,MAAM6B,YAAY,EAClB,IAAO,CAAA;YACLI;QACF,CAAA,GACA;QAACA;KAAc;IAGjB,IAAI7B,MAAMU,IAAI,KAAK,gBAAgB;QACjC,MAAMgC,sBAAsBlJ,wBAAwB6G;QACpDA,yBAAyBjD,IAAI,GAAGsF,oBAAoBtF,IAAI;QACxDiD,yBAAyB3C,MAAM,GAAGgF,oBAAoBhF,MAAM;QAC5D+C,yBAAyBkC,OAAO,CAAC,CAACpC,OAAOC;YACvC,IAAID,MAAMG,IAAI,KAAK,gBAAgB;oBACnBL;oBAAD;gBAAb,MAAMuC,OAAO,CAAA,6CAACvC,uCAAAA,yBAAyBjD,IAAI,CAACoD,MAAM,cAApCH,2DAAD,AAACA,qCAAmDuC,IAAI,cAAxD,uDAAA,4CAA4D;gBACzE,IAAIA,KAAKC,QAAQ,CAAC,SAAS;oBACzBpC,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC,OAAO,IAAIkC,KAAKC,QAAQ,CAAC,cAAcD,SAAS,QAAQ;oBACtDnC,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC,OAAO;oBACLD,wBAAwB,CAACD,MAAM,CAACE,IAAI,GAAG;gBACzC;YACF;QACF;IACF;IACA,MAAMoC,gBAA0C,CAAC;IACjD,IAAIC,yBAAyB;IAE7B,0DAA0D;IAC1D,IAAI/C,MAAMU,IAAI,KAAK,cAAc;QAC/BoC,aAAa,CAACjH,cAAc,GAAG,EAAE;IACnC,OAAO;QACLwE,yBAAyBjD,IAAI,CAACuF,OAAO,CAAC,CAACpC,OAAaC;YAClD,IAAIwC,WAAW;YACf,IAAIrK,cAAcqH,MAAMM,eAAe,AAAC,CAACE,MAAM,CAACE,IAAI,GAAG;gBACrDsC,WAAW,GAAGtJ,sBAAsBqJ,yBAAyB,GAAG;gBAChEA;YACF,OAAO;oBACM;gBAAXC,WAAW,CAAA,eAAA,AAACzC,MAAmB0C,KAAK,cAAzB,0BAAA,eAA6BpH;YAC1C;YACA,IAAI,CAACiH,aAAa,CAACE,SAAS,EAAE;gBAC5BF,aAAa,CAACE,SAAS,GAAG,EAAE;YAC9B;YACAF,aAAa,CAACE,SAAS,CAACE,IAAI,CAAC1C;QAC/B;IACF;IAEAK,YAAYsB,OAAO,GAAGgB,OAAOjC,IAAI,CAAC4B,eAAeM,MAAM,GAAG;IAC1D,MAAMC,iBAAiC3K,kBACrC2H,0BACAQ,YAAYsB,OAAO,EACnBnC,MAAMM,eAAe;IAGvB,8FAA8F;IAC9F,IACEO,YAAYsB,OAAO,IACnBkB,eAAeC,YAAY,KAAK3J,iBAChC0J,eAAeE,eAAe,KAAK5J,eACnC;QACA,IAAIqG,MAAMU,IAAI,KAAK,SAAS;YAC1B,0FAA0F;YAC1F,MAAMQ,OAAOiC,OAAOjC,IAAI,CAAC4B;YACzB5B,KAAKyB,OAAO,CAAC,CAAChG,KAAK6D;gBACjB,IAAIA,QAAQU,KAAKkC,MAAM,GAAG,GAAG;oBAC3B,OAAON,aAAa,CAACnG,IAAI;gBAC3B;YACF;QACF,OAAO;YACLwG,OAAOjC,IAAI,CAAC4B,eAAeH,OAAO,CAAC,CAAChG,KAAK6D;gBACvC,IAAIA,QAAQ,GAAG;oBACb,OAAOsC,aAAa,CAACnG,IAAI;gBAC3B;YACF;QACF;QACAkE,YAAYsB,OAAO,GAAG;IACxB;IAEA,MAAMqB,oBAAoB/J,qBACxB4G,0BACAtE,UACA4D,cACAK,MAAMM,eAAe,EACrBf;IAIF,kEAAkE;IAClE,qBACE,wDACE,oBAAC7C;QACCE,OAAO;YACL6G,SAAS;YACTC,kBAAkBL,eAAeC,YAAY;YAC7CK,qBAAqBN,eAAeE,eAAe;QACrD;OAECJ,OAAOS,OAAO,CAACd,eAAetF,GAAG,CAAC,CAAC,CAACqG,UAAUrD,MAAM;YAU7CsD;QATN,MAAMC,sBAAoC;YACxC,GAAG1D,wBAAwB;YAC3BjD,MAAMoD,MAAMhD,GAAG,CAACwG,CAAAA,MAAO3D,yBAAyBjD,IAAI,CAAC4G,IAAI;QAC3D;QAEA,MAAMF,qBAAqBrD,yBAAyBwD,MAAM,CAAC1D,CAAAA,QAASC,MAAMqC,QAAQ,CAACtC,MAAMC,KAAK;YAIxFsD;QAHN,IAAII,YACFlE,MAAMU,IAAI,KAAK,cAAcV,MAAMU,IAAI,KAAK,uBACxCV,MAAMU,IAAI,GACVoD,CAAAA,6BAAAA,uBAAAA,kBAAkB,CAAC,EAAE,cAArBA,2CAAAA,qBAAuBpD,IAAI,cAA3BoD,uCAAAA,4BAA+B9D,MAAMU,IAAI;QAE/C,IACED,yBAAyB0D,IAAI,CAAC5D,CAAAA,QAASA,MAAMG,IAAI,KAAK,WACtDD,yBAAyB0D,IAAI,CAAC5D,CAAAA,QAASA,MAAMG,IAAI,KAAK,YACtD;YACAwD,YAAY;QACd;QAEA,MAAME,aAAazG,QAAQ,CAACuG,UAAuB;QACnD,IAAIE,YAAY;YACd,MAAM,EAAEhI,WAAW,EAAEyB,QAAQ,EAAEwG,qBAAqB,EAAE7F,qBAAqB,EAAE,GAAG4F;YAChF,IAAIC,0BAA0BC,aAAaD,sBAAsBN,sBAAsB;gBACrF,MAAMQ,mBAAmB/F,wBACrBA,sBAAsBuF,uBACtBA;gBACJ,MAAMS,iBAAiBnB,eAAe3F,MAAM,CAACmG,SAAS;gBAEtD,MAAMY,sBACJP,cAAc,eACV1C,kBACA;oBACE,GAAGE,sBAAsB;oBACzBgD,eAAe,EAAEF,2BAAAA,qCAAAA,eAAgBG,WAAW;oBAC5CC,eAAe,EAAEJ,2BAAAA,qCAAAA,eAAgBK,WAAW;gBAC9C;oBAYJL,qBACAA;gBAVF,OAAOtI,YACL2B,UACAzB,aACA;oBAACmI;oBAAkB1D,YAAYsB,OAAO;oBAAEpG;oBAAU4D;oBAAcJ;iBAAY,EAC5E;oBACE,GAAGkF,mBAAmB;oBACtBC,eAAe,EAAEF,2BAAAA,qCAAAA,eAAgBG,WAAW;oBAC5CC,eAAe,EAAEJ,2BAAAA,qCAAAA,eAAgBK,WAAW;gBAC9C,GACAL,CAAAA,sBAAAA,2BAAAA,qCAAAA,eAAgBM,GAAG,cAAnBN,iCAAAA,sBAAuB,GACvBA,CAAAA,yBAAAA,2BAAAA,qCAAAA,eAAgBO,MAAM,cAAtBP,oCAAAA,yBAA0B;YAE9B;YACA,qBAAO;QACT,OAAO;gBACsCT;YAA3C,MAAM,IAAI7D,MAAM,CAAC,wBAAwB,GAAE6D,6BAAAA,oBAAoB3G,IAAI,CAAC,EAAE,cAA3B2G,iDAAAA,2BAA6BrD,IAAI,EAAE;QAChF;IACF,KAEDG,YAAYsB,OAAO,IAAIP,cAAc4B;AAG5C,GAAG;AACH/D,iBAAiBuF,WAAW,GAAG"}