@fluentui/react-charts 0.0.0-nightly-20250904-0406.1 → 0.0.0-nightly-20250909-0406.1

package/lib-commonjs/components/CommonComponents/ChartPopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                  marginTop: '11px',\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"mappings":"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"}
+{"version":3,"sources":["../src/components/CommonComponents/ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderInlineStart: `4px solid ${props.color}`,\n                  marginTop: '11px',\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>\n                    {formatToLocaleString(legend, props.culture) as React.ReactNode}\n                  </div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {formatToLocaleString(YValue, props.culture) as React.ReactNode}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>\n                        {formatToLocaleString(props.ratio[0], props.culture) as React.ReactNode}\n                      </span>\n                      /\n                      <span className={classes.denominator}>\n                        {formatToLocaleString(props.ratio[1], props.culture) as React.ReactNode}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {formatToLocaleString(props!.hoverXValue, props.culture) as React.ReactNode}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = formatToLocaleString(xValue.y, culture) as React.ReactNode;\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderInlineStart: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY} style={{ direction: 'ltr', unicodeBidi: 'isolate' }}>\n                {\n                  formatToLocaleString(\n                    xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                    culture,\n                  ) as React.ReactNode\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}>\n                  {' '}\n                  {formatToLocaleString(subcountName, culture) as React.ReactNode}\n                </div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {formatToLocaleString(subcounts[subcountName], culture) as React.ReactNode}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["React","Popover","PopoverSurface","mergeClasses","tokens","useId","getAccessibleDataObject","Points","pointTypes","formatToLocaleString","Shape","usePopoverStyles_unstable","ChartPopover","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","legend","xCalloutValue","YValue","yCalloutValue","div","id","ref","className","calloutContainer","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderInlineStart","color","marginTop","calloutBlockContainer","calloutlegendText","culture","calloutContentY","colorNeutralForeground1","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","svgProps","shapeStyles","pathProps","fill","shape","Object","keys","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","direction","unicodeBidi","data","subcounts","subcountName","displayName"],"mappings":"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"}

package/lib-commonjs/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  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';\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  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>((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    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","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","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","gantt","funnel","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","mode","includes","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","colorwayType","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","plotlyInputForGroup","idx","filteredTracesInfo","filter","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 { 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';\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 | 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>((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    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","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","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","gantt","funnel","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","mode","includes","groupedTraces","nonCartesianTraceCount","traceKey","xaxis","push","Object","length","gridProperties","templateRows","templateColumns","allupLegendsProps","colorwayType","display","gridTemplateRows","gridTemplateColumns","entries","xAxisKey","plotlyInputForGroup","idx","filteredTracesInfo","filter","chartType","some","chartEntry","preTransformCondition","undefined","transformedInput","cellProperties","xAxisAnnotation","xAnnotation","yAxisAnnotation","yAnnotation","row","column","displayName","defaultProps"],"mappings":"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"}

package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1300,6 +1300,18 @@ const formatValue = (value, colIndex, cells)=>{
     }
     return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
 };
+function resolveCellStyle(raw, rowIndex, colIndex) {
+    if (Array.isArray(raw)) {
+        var _raw_colIndex;
+        const rowEntry = (_raw_colIndex = raw[colIndex]) !== null && _raw_colIndex !== void 0 ? _raw_colIndex : raw[0];
+        if (Array.isArray(rowEntry)) {
+            var _rowEntry_rowIndex;
+            return (_rowEntry_rowIndex = rowEntry[rowIndex]) !== null && _rowEntry_rowIndex !== void 0 ? _rowEntry_rowIndex : rowEntry[0];
+        }
+        return rowEntry;
+    }
+    return raw;
+}
 const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _tableData_cells, _input_layout_template_data_table_, _input_layout_template_data_table, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _tableData_header, _input_layout_template_data1, _input_layout_template1, _input_layout2, _input_layout3, _input_layout4;
     const tableData = input.data[0];
@@ -1307,36 +1319,12 @@ const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colo
         const cleanedValues = Array.isArray(values[0]) ? values.map((row)=>row.map((cell)=>cleanText(cell)).filter(Boolean).join(' ')) : values.map((cell)=>cleanText(cell));
         return cleanedValues.map((value, colIndex)=>{
             var _header_font, _header_font1, _header_fill;
-            const fontColorRaw = header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color;
-            let fontColor;
-            if (Array.isArray(fontColorRaw)) {
-                var _fontColorRaw_colIndex;
-                const colorEntry = (_fontColorRaw_colIndex = fontColorRaw[colIndex]) !== null && _fontColorRaw_colIndex !== void 0 ? _fontColorRaw_colIndex : fontColorRaw[0];
-                if (Array.isArray(colorEntry)) {
-                    fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
-                } else if (typeof colorEntry === 'string') {
-                    fontColor = colorEntry;
-                }
-            } else if (typeof fontColorRaw === 'string') {
-                fontColor = fontColorRaw;
-            }
-            const fontSizeRaw = header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size;
-            let fontSize;
-            if (Array.isArray(fontSizeRaw)) {
-                var _fontSizeRaw_colIndex;
-                const fontSizeEntry = (_fontSizeRaw_colIndex = fontSizeRaw[colIndex]) !== null && _fontSizeRaw_colIndex !== void 0 ? _fontSizeRaw_colIndex : fontSizeRaw[0];
-                var _fontSizeRaw__colIndex;
-                fontSize = Array.isArray(fontSizeRaw[0]) ? (_fontSizeRaw__colIndex = fontSizeRaw[0][colIndex]) !== null && _fontSizeRaw__colIndex !== void 0 ? _fontSizeRaw__colIndex : fontSizeRaw[0][0] : typeof fontSizeEntry === 'number' ? fontSizeEntry : undefined;
-            } else if (typeof fontSizeRaw === 'number') {
-                fontSize = fontSizeRaw;
-            }
-            const updatedColIndex = colIndex >= 1 ? 1 : 0;
-            const fillColorRaw = header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color;
-            var _fillColorRaw_updatedColIndex;
-            const backgroundColor = Array.isArray(fillColorRaw) ? (_fillColorRaw_updatedColIndex = fillColorRaw[updatedColIndex]) !== null && _fillColorRaw_updatedColIndex !== void 0 ? _fillColorRaw_updatedColIndex : fillColorRaw[0] : fillColorRaw;
-            const textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
-            var _textAlignRaw_colIndex;
-            const textAlign = Array.isArray(textAlignRaw) ? (_textAlignRaw_colIndex = textAlignRaw[colIndex]) !== null && _textAlignRaw_colIndex !== void 0 ? _textAlignRaw_colIndex : textAlignRaw[0] : textAlignRaw;
+            //headers are at first row only
+            const rowIndex = 0;
+            const fontColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(header === null || header === void 0 ? void 0 : header.align, rowIndex, colIndex);
             const style = {
                 ...typeof fontColor === 'string' ? {
                     color: fontColor
@@ -1365,40 +1353,10 @@ const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colo
             const cellValue = col[rowIndex];
             const cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
             const formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number' ? formatValue(cleanValue, colIndex, cells) : cleanValue;
-            const rawFontColor = cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color;
-            let fontColor;
-            if (Array.isArray(rawFontColor)) {
-                var _rawFontColor_colIndex;
-                const entry = (_rawFontColor_colIndex = rawFontColor[colIndex]) !== null && _rawFontColor_colIndex !== void 0 ? _rawFontColor_colIndex : rawFontColor[0];
-                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontColor = typeof colorValue === 'string' ? colorValue : undefined;
-            } else if (typeof rawFontColor === 'string') {
-                fontColor = rawFontColor;
-            }
-            const rawFontSize = cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size;
-            let fontSize;
-            if (Array.isArray(rawFontSize)) {
-                var _rawFontSize_colIndex;
-                const entry = (_rawFontSize_colIndex = rawFontSize[colIndex]) !== null && _rawFontSize_colIndex !== void 0 ? _rawFontSize_colIndex : rawFontSize[0];
-                const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
-            } else if (typeof rawFontSize === 'number') {
-                fontSize = rawFontSize;
-            }
-            const updatedColIndex = colIndex >= 1 ? 1 : 0;
-            const rawBackgroundColor = cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color;
-            let backgroundColor;
-            if (Array.isArray(rawBackgroundColor)) {
-                var _rawBackgroundColor_updatedColIndex;
-                const entry = (_rawBackgroundColor_updatedColIndex = rawBackgroundColor[updatedColIndex]) !== null && _rawBackgroundColor_updatedColIndex !== void 0 ? _rawBackgroundColor_updatedColIndex : rawBackgroundColor[0];
-                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
-                backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
-            } else if (typeof rawBackgroundColor === 'string') {
-                backgroundColor = rawBackgroundColor;
-            }
-            var _cells_align_colIndex;
-            const rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? (_cells_align_colIndex = cells.align[colIndex]) !== null && _cells_align_colIndex !== void 0 ? _cells_align_colIndex : cells.align[0] : cells === null || cells === void 0 ? void 0 : cells.align;
-            const textAlign = rawTextAlign;
+            const fontColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(cells === null || cells === void 0 ? void 0 : cells.align, rowIndex, colIndex);
             const style = {
                 ...fontColor ? {
                     color: fontColor