@fluentui/react-charts 0.0.0-nightly-20250826-0412.1 → 0.0.0-nightly-20250826-2140.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { 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  },\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","fill","colorNeutralForeground1","caption2Strong","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,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;IACZ;IACApB,cAAc;QACZoB,UAAU;IACZ;IACAnB,WAAWL;IACXe,gBAAgBf;IAChBM,OAAO;QACL,UAAU;YACRmB,MAAM7B,OAAO8B,uBAAuB;YACpC,GAAG7B,iBAAiB8B,cAAc;YAClCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQlC,OAAO8B,uBAAuB;YACtCL,OAAO;YACPO,mBAAmB;QACrB;QACA,UAAU;YACRR,SAAS;QACX;IACF;IACAb,OAAO;QACL,UAAU;YACR,GAAGV,iBAAiB8B,cAAc;YAClCF,MAAM7B,OAAO8B,uBAAuB;YACpCE,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQlC,OAAO8B,uBAAuB;YACtCE,mBAAmB;QACrB;QACA,UAAU;YACRR,SAAS;QACX;IACF;IACAW,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;IACNzB,sBAAsB;QACpBqB,SAAS;QACTK,QAAQ;IACV;IACAzB,iBAAiB;QACf0B,WAAWvC,OAAOwC,gBAAgB;QAClCC,YAAYzC,OAAO0C,mBAAmB;IACxC;IACA5B,YAAY;QACVe,MAAM7B,OAAO2C,uBAAuB;QACpC,CAACzC,qBAAqB,EAAE;YACtB2B,MAAM;QACR;IACF;IACAX,SAASb;AACX;AACA;;;CAGC,GACD,OAAO,MAAMuC,0BAA0B,CAACC;QAI+BA,eAGjEA,oBACAA,gBAiBmFA,gBAOjCA;IA/BtD,MAAMC,UAAU3C;IAChB,MAAM4C,aAAazB;IACnB,OAAO;QACLf,MAAMR,aAAaO,yBAAyBC,IAAI,EAAEwC,WAAWxC,IAAI,GAAEsC,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAActC,IAAI;QACrFC,cAAcT,aACZO,yBAAyBE,YAAY,EACrCqC,EAAAA,qBAAAA,MAAMI,WAAW,cAAjBJ,yCAAAA,mBAAmBK,IAAI,MAAK,cAAcH,WAAWvC,YAAY,GAAG,KACpEqC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrC,YAAY;QAE5BC,WAAWV,aAAaO,yBAAyBG,SAAS,EAAEsC,WAAWtC,SAAS,CAAC,yBAAyB;QAC1GC,OAAOX,aAAaO,yBAAyBI,KAAK,EAAEqC,WAAWrC,KAAK,CAAC,qBAAqB;QAC1FC,OAAOZ,aACLO,yBAAyBK,KAAK,EAC9BoC,WAAWpC,KAAK,EAChBmC,UAAUC,WAAWZ,GAAG,GAAGY,WAAWV,GAAG,CAAC,qBAAqB;QAEjEzB,sBAAsBb,aACpBO,yBAAyBM,oBAAoB,EAC7CmC,WAAWnC,oBAAoB,CAAC,oCAAoC;QAEtEC,iBAAiBd,aACfO,yBAAyBO,eAAe,EACxCkC,WAAWlC,eAAe,CAAC,+BAA+B;QAE5DC,YAAYf,aAAaO,yBAAyBQ,UAAU,EAAEiC,WAAWjC,UAAU,GAAE+B,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAc/B,UAAU;QAC7GI,SAASnB,aAAaO,yBAAyBY,OAAO,EAAE6B,WAAW7B,OAAO,CAAC,uBAAuB;QAClGC,gBAAgBpB,aACdO,yBAAyBa,cAAc,EACvC4B,WAAW5B,cAAc;QAG3BE,OAAOtB,aAAaO,yBAAyBe,KAAK,GAAEwB,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcxB,KAAK;IACzE;AACF,EAAE"}
+{"version":3,"sources":["../src/components/CommonComponents/useCartesianChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { CartesianChartProps, CartesianChartStyles } from './CartesianChart.types';\nimport { SlotClassNames } from '@fluentui/react-utilities/src/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector, useRtl } from '../../utilities/utilities';\n\n/**\n * @internal\n */\nexport const cartesianchartClassNames: SlotClassNames<CartesianChartStyles> = {\n  root: 'fui-cart__root',\n  chartWrapper: 'fui-cart__chartWrapper',\n  axisTitle: 'fui-cart__axisTitle',\n  xAxis: 'fui-cart__xAxis',\n  yAxis: 'fui-cart__yAxis',\n  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n  legendContainer: 'fui-cart__legendContainer',\n  svgTooltip: 'fui-cart_svgTooltip',\n  shapeStyles: 'fui-cart__shapeStyles',\n  descriptionMessage: 'fui-cart__descriptionMessage',\n  hover: 'fui-cart__hover',\n  tooltip: 'fui-cart__tooltip',\n  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  },\n  chartWrapper: {\n    overflow: 'auto',\n  },\n  axisTitle: {\n    ...typographyStyles.caption2Strong,\n    fontStyle: 'normal',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\n  },\n  xAxis: {\n    '& text': {\n      fill: tokens.colorNeutralForeground1,\n      ...typographyStyles.caption2Strong,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      width: '1px',\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  yAxis: {\n    '& text': {\n      ...typographyStyles.caption2Strong,\n      fill: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& line': {\n      opacity: 0.2,\n      stroke: tokens.colorNeutralForeground1,\n      forcedColorAdjust: 'auto',\n    },\n    '& path': {\n      display: 'none',\n    },\n  },\n  rtl: {\n    '& g': {\n      textAnchor: 'end',\n    },\n  },\n  ltr: {},\n  opacityChangeOnHover: {\n    opacity: '0.1', //supports custom opacity ??\n    cursor: 'default', //supports custom cursor ??\n  },\n  legendContainer: {\n    marginTop: tokens.spacingVerticalS,\n    marginLeft: tokens.spacingHorizontalXL,\n  },\n  svgTooltip: {\n    fill: tokens.colorNeutralBackground1,\n    [HighContrastSelector]: {\n      fill: 'Canvas',\n    },\n  },\n  tooltip: {\n    ...typographyStyles.body1,\n    display: 'flex',\n    flexDirection: 'column',\n    ...shorthands.padding(tokens.spacingHorizontalS),\n    position: 'absolute',\n    textAlign: 'center',\n    top: tokens.spacingVerticalNone,\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusSmall,\n    pointerEvents: 'none',\n  },\n  axisAnnotation: {\n    ...typographyStyles.caption2Strong,\n    textAlign: 'center',\n    fontStyle: 'normal',\n    color: tokens.colorNeutralForeground2,\n    fill: tokens.colorNeutralForeground1,\n    [HighContrastSelector]: {\n      fill: 'CanvasText',\n    },\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","shorthands","tokens","typographyStyles","HighContrastSelector","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","svgTooltip","shapeStyles","descriptionMessage","hover","tooltip","axisAnnotation","chartTitle","chart","useStyles","body1","display","width","height","flexDirection","overflow","caption2Strong","fontStyle","textAlign","color","colorNeutralForeground2","fill","colorNeutralForeground1","forcedColorAdjust","opacity","stroke","rtl","textAnchor","ltr","cursor","marginTop","spacingVerticalS","marginLeft","spacingHorizontalXL","colorNeutralBackground1","padding","spacingHorizontalS","position","top","spacingVerticalNone","backgroundColor","borderRadius","borderRadiusSmall","pointerEvents","useCartesianChartStyles","props","_useRtl","baseStyles","styles","reflowProps","mode"],"mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AACjE,SAASC,oBAAoB,EAAEC,MAAM,QAAQ,4BAA4B;AAEzE;;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,YAAYvB,WAAW;IAC3BQ,MAAM;QACJ,GAAGJ,iBAAiBoB,KAAK;QACzBC,SAAS;QACTC,OAAO;QACPC,QAAQ;QACRC,eAAe;QACfC,UAAU;IACZ;IACApB,cAAc;QACZoB,UAAU;IACZ;IACAnB,WAAW;QACT,GAAGN,iBAAiB0B,cAAc;QAClCC,WAAW;QACXC,WAAW;QACXC,OAAO9B,OAAO+B,uBAAuB;QACrCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtB8B,MAAM;QACR;IACF;IACAxB,OAAO;QACL,UAAU;YACRwB,MAAMhC,OAAOiC,uBAAuB;YACpC,GAAGhC,iBAAiB0B,cAAc;YAClCO,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQpC,OAAOiC,uBAAuB;YACtCV,OAAO;YACPW,mBAAmB;QACrB;QACA,UAAU;YACRZ,SAAS;QACX;IACF;IACAb,OAAO;QACL,UAAU;YACR,GAAGR,iBAAiB0B,cAAc;YAClCK,MAAMhC,OAAOiC,uBAAuB;YACpCC,mBAAmB;QACrB;QACA,UAAU;YACRC,SAAS;YACTC,QAAQpC,OAAOiC,uBAAuB;YACtCC,mBAAmB;QACrB;QACA,UAAU;YACRZ,SAAS;QACX;IACF;IACAe,KAAK;QACH,OAAO;YACLC,YAAY;QACd;IACF;IACAC,KAAK,CAAC;IACN7B,sBAAsB;QACpByB,SAAS;QACTK,QAAQ;IACV;IACA7B,iBAAiB;QACf8B,WAAWzC,OAAO0C,gBAAgB;QAClCC,YAAY3C,OAAO4C,mBAAmB;IACxC;IACAhC,YAAY;QACVoB,MAAMhC,OAAO6C,uBAAuB;QACpC,CAAC3C,qBAAqB,EAAE;YACtB8B,MAAM;QACR;IACF;IACAhB,SAAS;QACP,GAAGf,iBAAiBoB,KAAK;QACzBC,SAAS;QACTG,eAAe;QACf,GAAG1B,WAAW+C,OAAO,CAAC9C,OAAO+C,kBAAkB,CAAC;QAChDC,UAAU;QACVnB,WAAW;QACXoB,KAAKjD,OAAOkD,mBAAmB;QAC/BC,iBAAiBnD,OAAO6C,uBAAuB;QAC/CO,cAAcpD,OAAOqD,iBAAiB;QACtCC,eAAe;IACjB;IACArC,gBAAgB;QACd,GAAGhB,iBAAiB0B,cAAc;QAClCE,WAAW;QACXD,WAAW;QACXE,OAAO9B,OAAO+B,uBAAuB;QACrCC,MAAMhC,OAAOiC,uBAAuB;QACpC,CAAC/B,qBAAqB,EAAE;YACtB8B,MAAM;QACR;IACF;AACF;AACA;;CAEC,GACD,OAAO,MAAMuB,0BAA0B,CAACC;QAI+BA,eAGjEA,oBACAA,gBAiBmFA,gBAOjCA;IA/BtD,MAAMC,UAAUtD;IAChB,MAAMuD,aAAatC;IACnB,OAAO;QACLf,MAAMP,aAAaM,yBAAyBC,IAAI,EAAEqD,WAAWrD,IAAI,GAAEmD,gBAAAA,MAAMG,MAAM,cAAZH,oCAAAA,cAAcnD,IAAI;QACrFC,cAAcR,aACZM,yBAAyBE,YAAY,EACrCkD,EAAAA,qBAAAA,MAAMI,WAAW,cAAjBJ,yCAAAA,mBAAmBK,IAAI,MAAK,cAAcH,WAAWpD,YAAY,GAAG,KACpEkD,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAclD,YAAY;QAE5BC,WAAWT,aAAaM,yBAAyBG,SAAS,EAAEmD,WAAWnD,SAAS,CAAC,yBAAyB;QAC1GC,OAAOV,aAAaM,yBAAyBI,KAAK,EAAEkD,WAAWlD,KAAK,CAAC,qBAAqB;QAC1FC,OAAOX,aACLM,yBAAyBK,KAAK,EAC9BiD,WAAWjD,KAAK,EAChBgD,UAAUC,WAAWrB,GAAG,GAAGqB,WAAWnB,GAAG,CAAC,qBAAqB;QAEjE7B,sBAAsBZ,aACpBM,yBAAyBM,oBAAoB,EAC7CgD,WAAWhD,oBAAoB,CAAC,oCAAoC;QAEtEC,iBAAiBb,aACfM,yBAAyBO,eAAe,EACxC+C,WAAW/C,eAAe,CAAC,+BAA+B;QAE5DC,YAAYd,aAAaM,yBAAyBQ,UAAU,EAAE8C,WAAW9C,UAAU,GAAE4C,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAc5C,UAAU;QAC7GI,SAASlB,aAAaM,yBAAyBY,OAAO,EAAE0C,WAAW1C,OAAO,CAAC,uBAAuB;QAClGC,gBAAgBnB,aACdM,yBAAyBa,cAAc,EACvCyC,WAAWzC,cAAc;QAG3BE,OAAOrB,aAAaM,yBAAyBe,KAAK,GAAEqC,iBAAAA,MAAMG,MAAM,cAAZH,qCAAAA,eAAcrC,KAAK;IACzE;AACF,EAAE"}

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -4,7 +4,7 @@ import { tokens } from '@fluentui/react-theme';
 import { ThemeContext_unstable as V9ThemeContext } from '@fluentui/react-shared-contexts';
 import { webLightTheme } from '@fluentui/tokens';
 import * as d3Color from 'd3-color';
-import { correctYearMonth, getGridProperties, isNonPlotType, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToAreaChartProps, transformPlotlyJsonToLineChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, transformPlotlyJsonToScatterChartProps, projectPolarToCartesian, getAllupLegendsProps, NON_PLOT_KEY_PREFIX, SINGLE_REPEAT } from './PlotlySchemaAdapter';
+import { correctYearMonth, getGridProperties, transformPlotlyJsonToDonutProps, transformPlotlyJsonToVSBCProps, transformPlotlyJsonToAreaChartProps, transformPlotlyJsonToLineChartProps, transformPlotlyJsonToHorizontalBarWithAxisProps, transformPlotlyJsonToHeatmapProps, transformPlotlyJsonToSankeyProps, transformPlotlyJsonToGaugeProps, transformPlotlyJsonToGVBCProps, transformPlotlyJsonToVBCProps, transformPlotlyJsonToChartTableProps, transformPlotlyJsonToScatterChartProps, projectPolarToCartesian, getAllupLegendsProps } from './PlotlySchemaAdapter';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
 import { LineChart } from '../LineChart/index';
@@ -159,10 +159,10 @@ const useIsDarkTheme = ()=>{
         ...plotlyInput,
         data: chart.validTracesInfo.map((trace)=>plotlyInput.data[trace.index])
     };
-    const validTracesFilteredIndex = chart.validTracesInfo.map((trace, index)=>({
+    const validTracesFilteredIndex = chart.validTracesInfo.map((trace, index)=>[
             index,
-            type: trace.type
-        }));
+            trace.type
+        ]);
     let { selectedLegends } = plotlySchema;
     const colorMap = useColorMapping();
     const isDarkTheme = useIsDarkTheme();
@@ -234,39 +234,23 @@ const useIsDarkTheme = ()=>{
         const cartesianProjection = projectPolarToCartesian(plotlyInputWithValidData);
         plotlyInputWithValidData.data = cartesianProjection.data;
         validTracesFilteredIndex.forEach((trace, index)=>{
-            if (trace.type === 'scatterpolar') {
-                validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering
+            if (trace[1] === 'scatterpolar') {
+                validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering
             }
         });
     }
     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] = [];
+        var _trace_xaxis;
+        const xAxisKey = (_trace_xaxis = trace.xaxis) !== null && _trace_xaxis !== void 0 ? _trace_xaxis : DEFAULT_XAXIS;
+        if (!groupedTraces[xAxisKey]) {
+            groupedTraces[xAxisKey] = [];
         }
-        groupedTraces[traceKey].push(index);
+        groupedTraces[xAxisKey].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.
-    if (isMultiPlot.current && gridProperties.templateRows === SINGLE_REPEAT && gridProperties.templateColumns === SINGLE_REPEAT) {
-        Object.keys(groupedTraces).forEach((key, index)=>{
-            if (index > 0) {
-                delete groupedTraces[key];
-            }
-        });
-        isMultiPlot.current = false;
-    }
-    const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, chart.validTracesInfo, isDarkTheme);
+    const gridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);
+    const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);
     // map through the grouped traces and render the appropriate chart
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         style: {
@@ -279,9 +263,9 @@ const useIsDarkTheme = ()=>{
             ...plotlyInputWithValidData,
             data: index.map((idx)=>plotlyInputWithValidData.data[idx])
         };
-        const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace.index));
-        let chartType = validTracesFilteredIndex.some((trace)=>trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE ? FALLBACK_TYPE : filteredTracesInfo[0].type;
-        if (validTracesFilteredIndex.some((trace)=>trace.type === 'line') && validTracesFilteredIndex.some((trace)=>trace.type === 'scatter')) {
+        const filteredTracesInfo = validTracesFilteredIndex.filter((trace)=>index.includes(trace[0]));
+        let chartType = validTracesFilteredIndex.some((trace)=>trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE ? FALLBACK_TYPE : filteredTracesInfo[0][1];
+        if (validTracesFilteredIndex.some((trace)=>trace[1] === 'line') && validTracesFilteredIndex.some((trace)=>trace[1] === 'scatter')) {
             chartType = 'line';
         }
         const chartEntry = chartMap[chartType];

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { Data, PlotData, PlotlySchema, OutputChartType, 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} 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';\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);\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';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<IDeclarativeChart>;\n\n  /**\n   * 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  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  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>((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    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace.type === 'scatterpolar') {\n        validTracesFilteredIndex[index].type = 'line'; // Change type to line for rendering\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    Object.keys(groupedTraces).forEach((key, index) => {\n      if (index > 0) {\n        delete groupedTraces[key];\n      }\n    });\n    isMultiPlot.current = false;\n  }\n\n  const allupLegendsProps = getAllupLegendsProps(\n    plotlyInputWithValidData,\n    colorMap,\n    props.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            validTracesFilteredIndex.some(trace => trace.type === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n              ? FALLBACK_TYPE\n              : 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, props.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';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\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","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","DEFAULT_XAXIS","FALLBACK_TYPE","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","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","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","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","colorwayType","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","plotlyInputForGroup","idx","filteredTracesInfo","filter","includes","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/DeclarativeChart.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention */\nimport * as React from 'react';\nimport type { PlotData, PlotlySchema, OutputChartType } 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  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} 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';\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);\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';\nconst FALLBACK_TYPE = 'fallback';\n\n/**\n * DeclarativeChart schema.\n * {@docCategory DeclarativeChart}\n */\nexport interface Schema {\n  /**\n   * Plotly schema represented as JSON object\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  plotlySchema: any;\n}\n\n/**\n * DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n */\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * The schema representing the chart data, layout and configuration\n   */\n  chartSchema: Schema;\n\n  /**\n   * Callback when an event occurs\n   */\n  onSchemaChange?: (eventData: Schema) => void;\n\n  /**\n   * Optional callback to access the IDeclarativeChart interface. Use this instead of ref for accessing\n   * the public methods and properties of the component.\n   */\n  componentRef?: React.RefObject<IDeclarativeChart>;\n\n  /**\n   * 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  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  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>((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: [number, string][] = chart.validTracesInfo!.map((trace, index) => [\n    index,\n    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    validTracesFilteredIndex.forEach((trace, index) => {\n      if (trace[1] === 'scatterpolar') {\n        validTracesFilteredIndex[index][1] = 'line'; // Change type to line for rendering\n      }\n    });\n  }\n  const groupedTraces: Record<string, number[]> = {};\n  plotlyInputWithValidData.data.forEach((trace: Partial<PlotData>, index) => {\n    const xAxisKey = trace.xaxis ?? DEFAULT_XAXIS;\n    if (!groupedTraces[xAxisKey]) {\n      groupedTraces[xAxisKey] = [];\n    }\n    groupedTraces[xAxisKey].push(index);\n  });\n\n  isMultiPlot.current = Object.keys(groupedTraces).length > 1;\n  const gridProperties: GridProperties = getGridProperties(plotlyInputWithValidData.layout, isMultiPlot.current);\n\n  const allupLegendsProps = getAllupLegendsProps(plotlyInputWithValidData, colorMap, props.colorwayType, isDarkTheme);\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[0]));\n          let chartType =\n            validTracesFilteredIndex.some(trace => trace[1] === FALLBACK_TYPE) || chart.type === FALLBACK_TYPE\n              ? FALLBACK_TYPE\n              : filteredTracesInfo[0][1];\n\n          if (\n            validTracesFilteredIndex.some(trace => trace[1] === 'line') &&\n            validTracesFilteredIndex.some(trace => trace[1] === '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, props.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';\nDeclarativeChart.defaultProps = {\n  colorwayType: 'default',\n};\n"],"names":["React","decodeBase64Fields","isArrayOrTypedArray","isMonthArray","mapFluentChart","sanitizeJson","tokens","ThemeContext_unstable","V9ThemeContext","webLightTheme","d3Color","correctYearMonth","getGridProperties","transformPlotlyJsonToDonutProps","transformPlotlyJsonToVSBCProps","transformPlotlyJsonToAreaChartProps","transformPlotlyJsonToLineChartProps","transformPlotlyJsonToHorizontalBarWithAxisProps","transformPlotlyJsonToHeatmapProps","transformPlotlyJsonToSankeyProps","transformPlotlyJsonToGaugeProps","transformPlotlyJsonToGVBCProps","transformPlotlyJsonToVBCProps","transformPlotlyJsonToChartTableProps","transformPlotlyJsonToScatterChartProps","projectPolarToCartesian","getAllupLegendsProps","DonutChart","VerticalStackedBarChart","LineChart","HorizontalBarChartWithAxis","AreaChart","HeatMapChart","SankeyChart","GaugeChart","GroupedVerticalBarChart","VerticalBarChart","ScatterChart","withResponsiveContainer","ChartTable","Legends","ResponsiveDonutChart","ResponsiveVerticalStackedBarChart","ResponsiveLineChart","ResponsiveHorizontalBarChartWithAxis","ResponsiveAreaChart","ResponsiveHeatMapChart","ResponsiveSankeyChart","ResponsiveGaugeChart","ResponsiveGroupedVerticalBarChart","ResponsiveVerticalBarChart","ResponsiveScatterChart","ResponsiveChartTable","DEFAULT_XAXIS","FALLBACK_TYPE","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","fallback","useIsDarkTheme","parentV9Theme","useContext","v9Theme","backgroundColor","hsl","colorNeutralBackground1","foregroundColor","colorNeutralForeground1","isDarkTheme","l","DeclarativeChart","forwardRef","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","groupedTraces","xAxisKey","xaxis","push","Object","length","gridProperties","allupLegendsProps","colorwayType","display","gridTemplateRows","templateRows","gridTemplateColumns","templateColumns","entries","plotlyInputForGroup","idx","filteredTracesInfo","filter","includes","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"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"}

package/lib/components/DeclarativeChart/PlotlyColorAdapter.js

@@ -84,7 +84,7 @@ export const extractColor = (colorway, colorwayType, colors, colorMap, isDarkThe
 };
 export const resolveColor = (extractedColors, index, legend, colorMap, isDarkTheme)=>{
     let color = '';
-    if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {
+    if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {
         color = extractedColors[index % extractedColors.length];
     } else if (typeof extractedColors === 'string') {
         color = extractedColors;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors.length > 0) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DeclarativeChart/PlotlyColorAdapter.ts"],"sourcesContent":["import * as React from 'react';\nimport { color as d3Color } from 'd3-color';\nimport type { PieColors, Color, PlotData } from '@fluentui/chart-utilities';\nimport { isArrayOrTypedArray } from '@fluentui/chart-utilities';\nimport { areArraysEqual } from '../../utilities/utilities';\nimport { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';\n\ntype PlotlyColorway = 'plotly' | 'others';\n\n// The color sequences in plotly express are defined here:\n// https://plotly.com/python/discrete-color/#:~:text=Join%20now.-,Color%20Sequences%20in%20Plotly%20Express,-By%20default%2C%20Plotly\nexport type ColorwayType = 'default' | 'builtin' | 'others' | undefined;\n\nconst DEFAULT_PLOTLY_COLORWAY = [\n  '#636efa', //1\n  '#ef553b', //2\n  '#00cc96', //3\n  '#ab63fa', //4\n  '#ffa15a', //5\n  '#19d3f3', //6\n  '#ff6692', //7\n  '#b6e880', //8\n  '#ff97ff', //9\n  '#fecb52', //10\n];\n\nconst PLOTLY_FLUENTVIZ_COLORWAY_MAPPING = [\n  DataVizPalette.color1, //1\n  DataVizPalette.warning, //2\n  DataVizPalette.color8, //3\n  DataVizPalette.color4, //4\n  DataVizPalette.color7, //5\n  DataVizPalette.color6, //6\n  DataVizPalette.color2, //7\n  DataVizPalette.color5, //8\n  DataVizPalette.color9, //9\n  DataVizPalette.color10, //10\n];\n\nfunction getPlotlyColorway(colorway: string[] | undefined): PlotlyColorway {\n  const isPlotlyColorway =\n    isArrayOrTypedArray(colorway) &&\n    areArraysEqual(\n      colorway?.map(c => c.toLowerCase()),\n      DEFAULT_PLOTLY_COLORWAY,\n    );\n\n  return isPlotlyColorway ? 'plotly' : 'others';\n}\n\nfunction tryMapFluentDataViz(hexColor: string, templateColorway: PlotlyColorway, isDarkTheme?: boolean): string {\n  if (templateColorway !== 'plotly') {\n    return hexColor;\n  }\n  const index = DEFAULT_PLOTLY_COLORWAY.indexOf(hexColor.toLowerCase());\n  if (index !== -1) {\n    return getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[index], isDarkTheme);\n  }\n  return hexColor;\n}\n\nexport const getColor = (\n  legendLabel: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  if (!colorMap.current.has(legendLabel)) {\n    let nextColor: string;\n    if (colorMap.current.size < PLOTLY_FLUENTVIZ_COLORWAY_MAPPING.length) {\n      // Get first 10 colors from plotly-fluentviz colorway mapping\n      nextColor = getColorFromToken(PLOTLY_FLUENTVIZ_COLORWAY_MAPPING[colorMap.current.size], isDarkTheme);\n    } else {\n      nextColor = getNextColor(colorMap.current.size, 0, isDarkTheme);\n    }\n    colorMap.current.set(legendLabel, nextColor);\n    return nextColor;\n  }\n\n  return colorMap.current.get(legendLabel) as string;\n};\n\nexport const getSchemaColors = (\n  colorway: string[] | undefined,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string[] | string | undefined => {\n  const hexColors: string[] = [];\n  if (!colors) {\n    return undefined;\n  }\n  const templateColorway = getPlotlyColorway(colorway);\n  if (isArrayOrTypedArray(colors)) {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    (colors as any[]).forEach((element, index) => {\n      const colorString = element?.toString().trim();\n      const nextFluentColor = getColor(`Label_${index}`, colorMap, isDarkTheme);\n      if (colorString) {\n        const parsedColor = d3Color(colorString);\n        hexColors.push(\n          parsedColor ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme) : nextFluentColor,\n        );\n      } else {\n        hexColors.push(nextFluentColor);\n      }\n    });\n  } else if (typeof colors === 'string') {\n    const parsedColor = d3Color(colors);\n    return parsedColor\n      ? tryMapFluentDataViz(parsedColor.formatHex(), templateColorway, isDarkTheme)\n      : getColor('Label_0', colorMap, isDarkTheme);\n  }\n  return hexColors;\n};\n\nexport const extractColor = (\n  colorway: string[] | undefined,\n  colorwayType: ColorwayType,\n  colors: PieColors | Color | Color[] | string | null | undefined,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string | string[] | undefined => {\n  return colorwayType === 'default' && colors ? getSchemaColors(colorway, colors, colorMap, isDarkTheme) : undefined;\n};\n\nexport const resolveColor = (\n  extractedColors: string[] | string | null | undefined,\n  index: number,\n  legend: string,\n  colorMap: React.MutableRefObject<Map<string, string>>,\n  isDarkTheme?: boolean,\n): string => {\n  let color = '';\n  if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {\n    color = extractedColors[index % extractedColors.length];\n  } else if (typeof extractedColors === 'string') {\n    color = extractedColors;\n  } else {\n    color = getColor(legend, colorMap, isDarkTheme);\n  }\n  return color;\n};\n\nexport const getOpacity = (series: Partial<PlotData>, index: number): number => {\n  return series.marker?.opacity\n    ? isArrayOrTypedArray(series.marker?.opacity)\n      ? (series.marker?.opacity as number[])[index % (series.marker?.opacity as number[]).length]\n      : (series.marker?.opacity as number)\n    : series.opacity ?? 1;\n};\n"],"names":["React","color","d3Color","isArrayOrTypedArray","areArraysEqual","DataVizPalette","getColorFromToken","getNextColor","DEFAULT_PLOTLY_COLORWAY","PLOTLY_FLUENTVIZ_COLORWAY_MAPPING","color1","warning","color8","color4","color7","color6","color2","color5","color9","color10","getPlotlyColorway","colorway","isPlotlyColorway","map","c","toLowerCase","tryMapFluentDataViz","hexColor","templateColorway","isDarkTheme","index","indexOf","getColor","legendLabel","colorMap","current","has","nextColor","size","length","set","get","getSchemaColors","colors","hexColors","undefined","forEach","element","colorString","toString","trim","nextFluentColor","parsedColor","push","formatHex","extractColor","colorwayType","resolveColor","extractedColors","legend","getOpacity","series","marker","opacity"],"mappings":"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"}