@fluentui/react-charts 1.2.0 → 9.0.0

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

@@ -0,0 +1,229 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { useRtl } from '../../utilities/utilities';
+/**
+ * @internal
+ */
+export const cartesianchartClassNames = {
+  root: 'fui-cart__root',
+  chartWrapper: 'fui-cart__chartWrapper',
+  axisTitle: 'fui-cart__axisTitle',
+  xAxis: 'fui-cart__xAxis',
+  yAxis: 'fui-cart__yAxis',
+  opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
+  legendContainer: 'fui-cart__legendContainer',
+  calloutContentRoot: 'fui-cart__calloutContentRoot',
+  calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',
+  calloutContentX: 'fui-cart__calloutContentX',
+  calloutBlockContainer: 'fui-cart__calloutBlockContainer',
+  calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',
+  calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',
+  shapeStyles: 'fui-cart__shapeStyles',
+  calloutlegendText: 'fui-cart__calloutlegendText',
+  calloutContentY: 'fui-cart__calloutContentY',
+  descriptionMessage: 'fui-cart__descriptionMessage',
+  hover: 'fui-cart__hover',
+  calloutInfoContainer: 'fui-cart__calloutInfoContainer',
+  tooltip: 'fui-cart__tooltip',
+  chartTitle: 'fui-cart__chartTitle'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    mc9l5x: "f22iagw",
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl",
+    Beiy3e4: "f1vx9l62",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  },
+  chartWrapper: {
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1enuhaj"
+  },
+  axisTitle: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t",
+    B80ckks: "fmd4ok8",
+    fsow6f: "f17mccla",
+    sj55zd: "fkfq4zb",
+    Bkfmm31: "fhuob2q"
+  },
+  xAxis: {
+    Bifops1: "fk6onyz",
+    lr70ht: "f17odlr9",
+    D01gh: "f1wvrikb",
+    vxuu72: "fidmvdy",
+    lclgl4: "f1noc3f3",
+    Dzfv0s: "f1rtcel9",
+    s17mou: "f4w8oyz",
+    jxu3ei: "fkuun",
+    B3i31d3: "f1u7a78k",
+    Bhcy8il: "f1myyn02",
+    t7r2jy: "f1ypwncy",
+    Bpf2t2a: "fs22wna",
+    J19x1g: "f19ju15u",
+    se2xxg: "f1x8lysa"
+  },
+  yAxis: {
+    lr70ht: "f17odlr9",
+    D01gh: "f1wvrikb",
+    vxuu72: "fidmvdy",
+    lclgl4: "f1noc3f3",
+    Bifops1: "fk6onyz",
+    Dzfv0s: "f1rtcel9",
+    s17mou: "f4w8oyz",
+    jxu3ei: "fkuun",
+    B3i31d3: "f1u7a78k",
+    t7r2jy: "f1ypwncy",
+    Bpf2t2a: "fs22wna",
+    J19x1g: "f19ju15u",
+    se2xxg: "f1x8lysa"
+  },
+  rtl: {
+    Bkw34lo: "f1j2g1si"
+  },
+  ltr: {},
+  opacityChangeOnHover: {
+    abs64n: "f9das1l",
+    Bceei9c: "f158kwzp"
+  },
+  legendContainer: {
+    B6of3ja: "frnwi6n",
+    Frg6f3: ["ff3wqvv", "f1l2akhw"]
+  },
+  calloutContentRoot: {
+    mc9l5x: "f13qh94s",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    z8tnut: "f1dvrhzg",
+    z189sj: ["fjnv7mu", "fae8789"],
+    Byoj8tv: "f1av7aef",
+    uwmqm3: ["fae8789", "fjnv7mu"],
+    De3pzq: "fxugw4r",
+    jy2i9i: "fronft5"
+  },
+  calloutDateTimeContainer: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f1869bpl"
+  },
+  calloutContentX: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    abs64n: "fp25eh",
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainer: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "faaz57k",
+    B6of3ja: "f7jvbu2",
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainertoDrawShapefalse: {
+    B93v9kj: "f15mrrko",
+    ibv6hh: ["frjpdoz", "fm1xp1g"],
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  calloutBlockContainertoDrawShapetrue: {
+    mc9l5x: "f22iagw"
+  },
+  shapeStyles: {
+    t21cq0: ["f1vcna3q", "foyynoy"]
+  },
+  calloutLegendText: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    Bd6j3yi: "f5klfrb",
+    hbub2c: "f1f0smcx"
+  },
+  calloutContentY: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "flh3ekv",
+    Bg96gwp: "faaz57k",
+    Bd6j3yi: "f5klfrb",
+    hbub2c: "f1f0smcx"
+  },
+  descriptionMessage: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    B6of3ja: "f1gaxbfw",
+    z8tnut: "f1ngh7ph",
+    B4j52fo: "f1pgliyk"
+  }
+}, {
+  d: [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f22iagw{display:flex;}", ".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f1vx9l62{flex-direction:column;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".f1enuhaj{overflow:auto;}", {
+    p: -1
+  }], ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".fmd4ok8{font-style:normal;}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".fhuob2q{fill:var(--colorNeutralForeground1);}", ".fk6onyz text{fill:var(--colorNeutralForeground1);}", ".f17odlr9 text{font-family:var(--fontFamilyBase);}", ".f1wvrikb text{font-size:var(--fontSizeBase100);}", ".fidmvdy text{font-weight:var(--fontWeightSemibold);}", ".f1noc3f3 text{line-height:var(--lineHeightBase100);}", ".fkuun line{opacity:0.2;}", ".f1u7a78k line{stroke:var(--colorNeutralForeground1);}", ".f1myyn02 line{width:1px;}", ".f1x8lysa path{display:none;}", ".f1j2g1si g{text-anchor:end;}", ".f9das1l{opacity:0.1;}", ".f158kwzp{cursor:default;}", ".frnwi6n{margin-top:var(--spacingVerticalS);}", ".ff3wqvv{margin-left:var(--spacingHorizontalXL);}", ".f1l2akhw{margin-right:var(--spacingHorizontalXL);}", ".f13qh94s{display:grid;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f1dvrhzg{padding-top:11px 16px 10px 16px;}", ".fjnv7mu{padding-right:11px 16px 10px 16px;}", ".fae8789{padding-left:11px 16px 10px 16px;}", ".f1av7aef{padding-bottom:11px 16px 10px 16px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fp25eh{opacity:0.8;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f7jvbu2{margin-top:13px;}", ".frjpdoz{border-left-width:4px solid;}", ".fm1xp1g{border-right-width:4px solid;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".flh3ekv{font-weight:var(--fontWeightBold);}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f1pgliyk{border-top-width:1px solid var(--colorNeutralStroke2);}"],
+  m: [["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1rtcel9 text{fill:rgb(179, 179, 179);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f4w8oyz text{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1ypwncy line{opacity:0.1;}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.fs22wna line{stroke:rgb(179, 179, 179);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f19ju15u line{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f5klfrb{color:rgb(255, 255, 255);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1f0smcx{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const useCartesianChartStyles = props => {
+  const _useRtl = useRtl();
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/),
+    chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/),
+    axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/),
+    xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/),
+    yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/),
+    opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/),
+    legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/),
+    calloutContentRoot: mergeClasses(cartesianchartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/),
+    calloutDateTimeContainer: mergeClasses(cartesianchartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/),
+    calloutContentX: mergeClasses(cartesianchartClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/),
+    calloutBlockContainer: mergeClasses(cartesianchartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainer*/),
+    calloutBlockContainertoDrawShapefalse: mergeClasses(cartesianchartClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/),
+    calloutBlockContainertoDrawShapetrue: mergeClasses(cartesianchartClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/),
+    shapeStyles: mergeClasses(cartesianchartClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),
+    calloutlegendText: mergeClasses(cartesianchartClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/),
+    calloutContentY: mergeClasses(cartesianchartClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentY*/),
+    descriptionMessage: mergeClasses(cartesianchartClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/)
+  };
+};
+//# sourceMappingURL=useCartesianChartStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","HighContrastSelectorBlack","HighContrastSelector","tokens","typographyStyles","useRtl","cartesianchartClassNames","root","chartWrapper","axisTitle","xAxis","yAxis","opacityChangeOnHover","legendContainer","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","hover","calloutInfoContainer","tooltip","chartTitle","useStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","a9b677","Bqenvij","Beiy3e4","B68tc82","Bmxbyg5","Bpg54ce","B80ckks","fsow6f","sj55zd","Bkfmm31","Bifops1","lr70ht","D01gh","vxuu72","lclgl4","Dzfv0s","s17mou","jxu3ei","B3i31d3","Bhcy8il","t7r2jy","Bpf2t2a","J19x1g","se2xxg","rtl","Bkw34lo","ltr","abs64n","Bceei9c","B6of3ja","Frg6f3","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","jy2i9i","Brf1p80","B93v9kj","ibv6hh","t21cq0","calloutLegendText","Bd6j3yi","hbub2c","B4j52fo","d","p","m","useCartesianChartStyles","props","_useRtl","baseStyles"],"sources":["useCartesianChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useRtl } from '../../utilities/utilities';\n/**\n * @internal\n */ export const cartesianchartClassNames = {\n    root: 'fui-cart__root',\n    chartWrapper: 'fui-cart__chartWrapper',\n    axisTitle: 'fui-cart__axisTitle',\n    xAxis: 'fui-cart__xAxis',\n    yAxis: 'fui-cart__yAxis',\n    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',\n    legendContainer: 'fui-cart__legendContainer',\n    calloutContentRoot: 'fui-cart__calloutContentRoot',\n    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n    calloutContentX: 'fui-cart__calloutContentX',\n    calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n    shapeStyles: 'fui-cart__shapeStyles',\n    calloutlegendText: 'fui-cart__calloutlegendText',\n    calloutContentY: 'fui-cart__calloutContentY',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    hover: 'fui-cart__hover',\n    calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n    tooltip: 'fui-cart__tooltip',\n    chartTitle: 'fui-cart__chartTitle'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        ...typographyStyles.body1,\n        display: 'flex',\n        width: '100%',\n        height: '100%',\n        flexDirection: 'column',\n        overflow: 'hidden'\n    },\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    },\n    xAxis: {\n        '& text': {\n            fill: tokens.colorNeutralForeground1,\n            ...typographyStyles.caption2Strong,\n            [HighContrastSelectorBlack]: {\n                fill: 'rgb(179, 179, 179)',\n                forcedColorAdjust: 'none'\n            }\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            width: '1px',\n            [HighContrastSelectorBlack]: {\n                opacity: 0.1,\n                stroke: 'rgb(179, 179, 179)',\n                forcedColorAdjust: 'none'\n            }\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    yAxis: {\n        '& text': {\n            ...typographyStyles.caption2Strong,\n            fill: tokens.colorNeutralForeground1,\n            [HighContrastSelectorBlack]: {\n                fill: 'rgb(179, 179, 179)',\n                forcedColorAdjust: 'none'\n            }\n        },\n        '& line': {\n            opacity: 0.2,\n            stroke: tokens.colorNeutralForeground1,\n            [HighContrastSelectorBlack]: {\n                opacity: 0.1,\n                stroke: 'rgb(179, 179, 179)',\n                forcedColorAdjust: 'none'\n            }\n        },\n        '& path': {\n            display: 'none'\n        }\n    },\n    rtl: {\n        '& g': {\n            textAnchor: 'end'\n        }\n    },\n    ltr: {},\n    opacityChangeOnHover: {\n        opacity: '0.1',\n        cursor: 'default'\n    },\n    legendContainer: {\n        marginTop: tokens.spacingVerticalS,\n        marginLeft: tokens.spacingHorizontalXL\n    },\n    calloutContentRoot: {\n        display: 'grid',\n        overflow: 'hidden',\n        ...shorthands.padding('11px 16px 10px 16px'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundBlendMode: 'normal, luminosity'\n    },\n    calloutDateTimeContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between'\n    },\n    calloutContentX: {\n        ...typographyStyles.caption1,\n        opacity: '0.8',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainer: {\n        ...typographyStyles.body2,\n        marginTop: '13px',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainertoDrawShapefalse: {\n        [HighContrastSelector]: {\n            forcedColorAdjust: 'none'\n        },\n        ...shorthands.borderLeft('4px solid'),\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    calloutBlockContainertoDrawShapetrue: {\n        display: 'flex'\n    },\n    shapeStyles: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    calloutLegendText: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n            forcedColorAdjust: 'none'\n        }\n    },\n    calloutContentY: {\n        ...typographyStyles.subtitle2Stronger,\n        [HighContrastSelectorBlack]: {\n            color: 'rgb(255, 255, 255)',\n            forcedColorAdjust: 'none'\n        }\n    },\n    descriptionMessage: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        marginTop: tokens.spacingVerticalMNudge,\n        paddingTop: tokens.spacingVerticalMNudge,\n        ...shorthands.borderTop(`1px solid ${tokens.colorNeutralStroke2}`)\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useCartesianChartStyles = (props)=>{\n    const _useRtl = useRtl();\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),\n        chartWrapper: mergeClasses(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/ ),\n        axisTitle: mergeClasses(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),\n        xAxis: mergeClasses(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),\n        yAxis: mergeClasses(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),\n        opacityChangeOnHover: mergeClasses(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),\n        legendContainer: mergeClasses(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),\n        calloutContentRoot: mergeClasses(cartesianchartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/ ),\n        calloutDateTimeContainer: mergeClasses(cartesianchartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),\n        calloutContentX: mergeClasses(cartesianchartClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),\n        calloutBlockContainer: mergeClasses(cartesianchartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainer*/ ),\n        calloutBlockContainertoDrawShapefalse: mergeClasses(cartesianchartClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),\n        calloutBlockContainertoDrawShapetrue: mergeClasses(cartesianchartClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),\n        shapeStyles: mergeClasses(cartesianchartClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),\n        calloutlegendText: mergeClasses(cartesianchartClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),\n        calloutContentY: mergeClasses(cartesianchartClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentY*/ ),\n        descriptionMessage: mergeClasses(cartesianchartClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ )\n    };\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,178 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+/**
+ * @internal
+ */
+export const popoverClassNames = {
+  calloutContentRoot: 'fui-cart__calloutContentRoot',
+  calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',
+  calloutContentX: 'fui-cart__calloutContentX',
+  calloutBlockContainer: 'fui-cart__calloutBlockContainer',
+  calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',
+  calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',
+  shapeStyles: 'fui-cart__shapeStyles',
+  calloutlegendText: 'fui-cart__calloutlegendText',
+  calloutContentY: 'fui-cart__calloutContentY',
+  descriptionMessage: 'fui-cart__descriptionMessage',
+  ratio: 'fui-cart__ratio',
+  numerator: 'fui-cart__numerator',
+  denominator: 'fui-cart__denominator',
+  calloutInfoContainer: 'fui-cart__calloutInfoContainer',
+  calloutContainer: 'fui-cart__calloutContainer'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__styles({
+  calloutContentRoot: {
+    mc9l5x: "f1bxpd7w",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    z8tnut: "f1dvrhzg",
+    z189sj: ["fjnv7mu", "fae8789"],
+    Byoj8tv: "f1av7aef",
+    uwmqm3: ["fae8789", "fjnv7mu"],
+    De3pzq: "fxugw4r",
+    jy2i9i: "fronft5"
+  },
+  calloutDateTimeContainer: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f1869bpl"
+  },
+  calloutContentX: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    abs64n: "fp25eh",
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainer: {
+    sj55zd: "fkfq4zb"
+  },
+  calloutBlockContainerCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    B6of3ja: "f7jvbu2"
+  },
+  calloutBlockContainerNonCartesian: {
+    Be2twd7: "fojgt09",
+    Bg96gwp: "f82itaf",
+    bo4z9n: "fg7a56h"
+  },
+  calloutBlockContainertoDrawShapefalse: {
+    bo4z9n: "fg7a56h",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  calloutBlockContainertoDrawShapetrue: {
+    mc9l5x: "fwk3njj"
+  },
+  shapeStyles: {
+    t21cq0: ["f1vcna3q", "foyynoy"]
+  },
+  calloutLegendText: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    B1cpy0k: "fig6os7"
+  },
+  calloutContentY: {
+    B1cpy0k: "fig6os7"
+  },
+  calloutContentYCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "flh3ekv",
+    Bg96gwp: "faaz57k"
+  },
+  calloutContentYNonCartesian: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fojgt09",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcen8rp"
+  },
+  descriptionMessage: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    sj55zd: "fkfq4zb",
+    B6of3ja: "f1gaxbfw",
+    z8tnut: "f1ngh7ph",
+    B4j52fo: "f1pgliyk"
+  },
+  ratio: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fcpl73t",
+    Frg6f3: ["f1t5qyk5", "f1ikr372"],
+    sj55zd: "f19n0e5"
+  },
+  numerator: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  denominator: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f13mqy1h",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fcpl73t"
+  },
+  calloutInfoContainer: {
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  calloutContainer: {
+    a6j6cd: "f1j86lqe",
+    B93v9kj: "f15mrrko"
+  }
+}, {
+  d: [".f1bxpd7w{display:contents;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f1dvrhzg{padding-top:11px 16px 10px 16px;}", ".fjnv7mu{padding-right:11px 16px 10px 16px;}", ".fae8789{padding-left:11px 16px 10px 16px;}", ".f1av7aef{padding-bottom:11px 16px 10px 16px;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fronft5{background-blend-mode:normal,luminosity;}", ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fp25eh{opacity:0.8;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f7jvbu2{margin-top:13px;}", ".fojgt09{font-size:var(--fontSizeHero700);}", ".f82itaf{line-height:22px;}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fwk3njj{display:inline-grid;}", ".f1vcna3q{margin-right:var(--spacingHorizontalS);}", ".foyynoy{margin-left:var(--spacingHorizontalS);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".flh3ekv{font-weight:var(--fontWeightBold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".fcen8rp{line-height:var(--lineHeightHero700);}", ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}", ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}", ".f1pgliyk{border-top-width:1px solid var(--colorNeutralStroke2);}", ".f13mqy1h{font-size:var(--fontSizeBase100);}", ".fcpl73t{line-height:var(--lineHeightBase100);}", ".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}", ".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}", ".f19n0e5{color:var(--colorNeutralForeground1);}"],
+  m: [["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fg7a56h selectors{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.fig6os7 selectors{color:rgb(255, 255, 255);}}", {
+    m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f1j86lqe{fill:WindowText;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }], ["@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}", {
+    m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const usePopoverStyles_unstable = props => {
+  const {
+    isCartesian
+  } = props;
+  const baseStyles = useStyles();
+  return {
+    calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/),
+    calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/),
+    calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/),
+    calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/, isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),
+    calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/),
+    calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/),
+    shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/),
+    calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/),
+    calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/, isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),
+    descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/),
+    ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/),
+    numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/),
+    denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/),
+    calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),
+    calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)
+  };
+};
+//# sourceMappingURL=useChartPopoverStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","HighContrastSelectorBlack","HighContrastSelector","tokens","typographyStyles","popoverClassNames","calloutContentRoot","calloutDateTimeContainer","calloutContentX","calloutBlockContainer","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","shapeStyles","calloutlegendText","calloutContentY","descriptionMessage","ratio","numerator","denominator","calloutInfoContainer","calloutContainer","useStyles","mc9l5x","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","jy2i9i","Beiy3e4","Brf1p80","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","abs64n","sj55zd","calloutBlockContainerCartesian","B6of3ja","calloutBlockContainerNonCartesian","bo4z9n","t21cq0","calloutLegendText","B1cpy0k","calloutContentYCartesian","calloutContentYNonCartesian","B4j52fo","Frg6f3","a6j6cd","B93v9kj","d","p","m","usePopoverStyles_unstable","props","isCartesian","baseStyles"],"sources":["useChartPopoverStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { HighContrastSelectorBlack, HighContrastSelector } from '../../utilities/index';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const popoverClassNames = {\n    calloutContentRoot: 'fui-cart__calloutContentRoot',\n    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',\n    calloutContentX: 'fui-cart__calloutContentX',\n    calloutBlockContainer: 'fui-cart__calloutBlockContainer',\n    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',\n    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',\n    shapeStyles: 'fui-cart__shapeStyles',\n    calloutlegendText: 'fui-cart__calloutlegendText',\n    calloutContentY: 'fui-cart__calloutContentY',\n    descriptionMessage: 'fui-cart__descriptionMessage',\n    ratio: 'fui-cart__ratio',\n    numerator: 'fui-cart__numerator',\n    denominator: 'fui-cart__denominator',\n    calloutInfoContainer: 'fui-cart__calloutInfoContainer',\n    calloutContainer: 'fui-cart__calloutContainer'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    calloutContentRoot: {\n        display: 'contents',\n        overflow: 'hidden',\n        ...shorthands.padding('11px 16px 10px 16px'),\n        backgroundColor: tokens.colorNeutralBackground1,\n        backgroundBlendMode: 'normal, luminosity'\n    },\n    calloutDateTimeContainer: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between'\n    },\n    calloutContentX: {\n        ...typographyStyles.caption1,\n        opacity: '0.8',\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainer: {\n        color: tokens.colorNeutralForeground2\n    },\n    calloutBlockContainerCartesian: {\n        ...typographyStyles.caption1,\n        marginTop: '13px'\n    },\n    calloutBlockContainerNonCartesian: {\n        fontSize: tokens.fontSizeHero700,\n        lineHeight: '22px',\n        '& selectors': {\n            [HighContrastSelector]: {\n                forcedColorAdjust: 'none'\n            }\n        }\n    },\n    calloutBlockContainertoDrawShapefalse: {\n        '& selectors': {\n            [HighContrastSelector]: {\n                forcedColorAdjust: 'none'\n            }\n        },\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    calloutBlockContainertoDrawShapetrue: {\n        display: 'inline-grid'\n    },\n    shapeStyles: {\n        marginRight: tokens.spacingHorizontalS\n    },\n    calloutLegendText: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        '& selectors': {\n            [HighContrastSelectorBlack]: {\n                color: 'rgb(255, 255, 255)'\n            }\n        }\n    },\n    calloutContentY: {\n        '& selectors': {\n            [HighContrastSelectorBlack]: {\n                color: 'rgb(255, 255, 255)'\n            }\n        }\n    },\n    calloutContentYCartesian: {\n        ...typographyStyles.subtitle2Stronger\n    },\n    calloutContentYNonCartesian: {\n        ...typographyStyles.title2\n    },\n    descriptionMessage: {\n        ...typographyStyles.caption1,\n        color: tokens.colorNeutralForeground2,\n        marginTop: tokens.spacingVerticalMNudge,\n        paddingTop: tokens.spacingVerticalMNudge,\n        ...shorthands.borderTop(`1px solid ${tokens.colorNeutralStroke2}`)\n    },\n    ratio: {\n        ...typographyStyles.caption2,\n        marginLeft: tokens.spacingHorizontalSNudge,\n        color: tokens.colorNeutralForeground1\n    },\n    numerator: {\n        ...typographyStyles.caption2Strong\n    },\n    denominator: {\n        ...typographyStyles.caption2Strong\n    },\n    calloutInfoContainer: {\n        paddingLeft: tokens.spacingHorizontalS\n    },\n    calloutContainer: {\n        [HighContrastSelector]: {\n            fill: 'WindowText',\n            forcedColorAdjust: 'none'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const usePopoverStyles_unstable = (props)=>{\n    const { isCartesian } = props;\n    const baseStyles = useStyles();\n    return {\n        calloutContentRoot: mergeClasses(popoverClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/ ),\n        calloutDateTimeContainer: mergeClasses(popoverClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),\n        calloutContentX: mergeClasses(popoverClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),\n        calloutBlockContainer: mergeClasses(popoverClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainerCartesian*/ , isCartesian ? baseStyles.calloutBlockContainerCartesian : baseStyles.calloutBlockContainerNonCartesian),\n        calloutBlockContainertoDrawShapefalse: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),\n        calloutBlockContainertoDrawShapetrue: mergeClasses(popoverClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),\n        shapeStyles: mergeClasses(popoverClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),\n        calloutlegendText: mergeClasses(popoverClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),\n        calloutContentY: mergeClasses(popoverClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentYNonCartesian*/ , isCartesian ? baseStyles.calloutContentYCartesian : baseStyles.calloutContentYNonCartesian),\n        descriptionMessage: mergeClasses(popoverClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ ),\n        ratio: mergeClasses(popoverClassNames.ratio, baseStyles.ratio /*props.styles?.ratio*/ ),\n        numerator: mergeClasses(popoverClassNames.numerator, baseStyles.numerator /*props.styles?.numerator*/ ),\n        denominator: mergeClasses(popoverClassNames.denominator, baseStyles.denominator /*props.styles?.denominator*/ ),\n        calloutInfoContainer: mergeClasses(popoverClassNames.calloutInfoContainer, baseStyles.calloutInfoContainer),\n        calloutContainer: mergeClasses(popoverClassNames.calloutContainer, baseStyles.calloutContainer)\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/DeclarativeChart/DeclarativeChart.js

@@ -0,0 +1,150 @@
+/* eslint-disable @typescript-eslint/naming-convention */ import * as React from 'react';
+import { DonutChart } from '../DonutChart/index';
+import { isArrayOrTypedArray, isDateArray, isNumberArray, isMonthArray, sanitizeJson, updateXValues, transformPlotlyJsonToDonutProps, transformPlotlyJsonToScatterChartProps, transformPlotlyJsonToVBCProps } from './PlotlySchemaAdapter';
+import { LineChart } from '../LineChart/index';
+import { VerticalBarChart } from '../VerticalBarChart/index';
+import { toImage } from './imageExporter';
+import { tokens } from '@fluentui/react-theme';
+const useColorMapping = ()=>{
+    const colorMap = React.useRef(new Map());
+    return colorMap;
+};
+/**
+ * DeclarativeChart component.
+ * {@docCategory DeclarativeChart}
+ */ export const DeclarativeChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { plotlySchema } = sanitizeJson(props.chartSchema);
+    const plotlyInput = plotlySchema;
+    let { selectedLegends } = plotlySchema;
+    const colorMap = useColorMapping();
+    const isDarkTheme = false;
+    const chartRef = React.useRef(null);
+    if (!isArrayOrTypedArray(selectedLegends)) {
+        selectedLegends = [];
+    }
+    const [activeLegends, setActiveLegends] = React.useState(selectedLegends);
+    const onActiveLegendsChange = (keys)=>{
+        setActiveLegends(keys);
+        if (props.onSchemaChange) {
+            props.onSchemaChange({
+                plotlySchema: {
+                    plotlyInput,
+                    selectedLegends: keys
+                }
+            });
+        }
+    };
+    React.useEffect(()=>{
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { plotlySchema } = sanitizeJson(props.chartSchema);
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { selectedLegends } = plotlySchema;
+        setActiveLegends(selectedLegends !== null && selectedLegends !== void 0 ? selectedLegends : []);
+    }, [
+        props.chartSchema
+    ]);
+    const multiSelectLegendProps = {
+        canSelectMultipleLegends: true,
+        onChange: onActiveLegendsChange,
+        selectedLegends: activeLegends
+    };
+    const commonProps = {
+        legendProps: multiSelectLegendProps,
+        componentRef: chartRef
+    };
+    const checkAndRenderChart = (renderChartJsx, isAreaChart = false)=>{
+        var _plotlyInput_data_;
+        const xValues = plotlyInput.data[0].x;
+        const isXDate = isDateArray(xValues);
+        const isXNumber = isNumberArray(xValues);
+        const isXMonth = isMonthArray(xValues);
+        if (isXDate || isXNumber) {
+            const chartProps = {
+                ...transformPlotlyJsonToScatterChartProps({
+                    data: plotlyInput.data,
+                    layout: plotlyInput.layout
+                }, isAreaChart, colorMap, isDarkTheme),
+                ...commonProps
+            };
+            return renderChartJsx(chartProps);
+        } else if (isXMonth) {
+            const updatedData = plotlyInput.data.map((dataPoint)=>({
+                    ...dataPoint,
+                    x: updateXValues(dataPoint.x)
+                }));
+            const chartProps = {
+                ...transformPlotlyJsonToScatterChartProps({
+                    data: updatedData,
+                    layout: plotlyInput.layout
+                }, isAreaChart, colorMap, isDarkTheme),
+                ...commonProps
+            };
+            return renderChartJsx(chartProps);
+        }
+        throw new Error(`Unsupported chart type :${(_plotlyInput_data_ = plotlyInput.data[0]) === null || _plotlyInput_data_ === void 0 ? void 0 : _plotlyInput_data_.type}`);
+    };
+    const exportAsImage = React.useCallback((opts)=>{
+        var _chartRef_current;
+        return toImage((_chartRef_current = chartRef.current) === null || _chartRef_current === void 0 ? void 0 : _chartRef_current.chartContainer, {
+            background: tokens.colorNeutralBackground1,
+            scale: 5,
+            ...opts
+        });
+    }, []);
+    React.useImperativeHandle(props.componentRef, ()=>({
+            exportAsImage
+        }), [
+        exportAsImage
+    ]);
+    switch(plotlyInput.data[0].type){
+        case 'pie':
+            return /*#__PURE__*/ React.createElement(DonutChart, {
+                ...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        case 'bar':
+            var _plotlyInput_data_;
+            throw new Error(`Unsupported chart type :${(_plotlyInput_data_ = plotlyInput.data[0]) === null || _plotlyInput_data_ === void 0 ? void 0 : _plotlyInput_data_.type}`);
+        case 'scatter':
+            if (plotlyInput.data[0].mode === 'markers') {
+                var _plotlyInput_data_1, _plotlyInput_data_2;
+                throw new Error(`Unsupported chart - type :${(_plotlyInput_data_1 = plotlyInput.data[0]) === null || _plotlyInput_data_1 === void 0 ? void 0 : _plotlyInput_data_1.type}, mode: ${(_plotlyInput_data_2 = plotlyInput.data[0]) === null || _plotlyInput_data_2 === void 0 ? void 0 : _plotlyInput_data_2.mode}`);
+            }
+            const isAreaChart = plotlyInput.data.some((series)=>series.fill === 'tonexty' || series.fill === 'tozeroy');
+            const renderChartJsx = (chartProps)=>{
+                if (isAreaChart) {
+                    var _plotlyInput_data_, _plotlyInput_data_1;
+                    throw new Error(`Unsupported chart type :${(_plotlyInput_data_ = plotlyInput.data[0]) === null || _plotlyInput_data_ === void 0 ? void 0 : _plotlyInput_data_.type}, fill: ${(_plotlyInput_data_1 = plotlyInput.data[0]) === null || _plotlyInput_data_1 === void 0 ? void 0 : _plotlyInput_data_1.fill}`);
+                }
+                return /*#__PURE__*/ React.createElement(LineChart, chartProps);
+            };
+            return checkAndRenderChart(renderChartJsx, isAreaChart);
+        case 'heatmap':
+            var _plotlyInput_data_3;
+            throw new Error(`Unsupported chart type :${(_plotlyInput_data_3 = plotlyInput.data[0]) === null || _plotlyInput_data_3 === void 0 ? void 0 : _plotlyInput_data_3.type}`);
+        case 'sankey':
+            var _plotlyInput_data_4;
+            throw new Error(`Unsupported chart type :${(_plotlyInput_data_4 = plotlyInput.data[0]) === null || _plotlyInput_data_4 === void 0 ? void 0 : _plotlyInput_data_4.type}`);
+        case 'indicator':
+        case 'gauge':
+            var _plotlyInput_data_5, _plotlyInput_data_6;
+            throw new Error(`Unsupported chart - type: ${(_plotlyInput_data_5 = plotlyInput.data[0]) === null || _plotlyInput_data_5 === void 0 ? void 0 : _plotlyInput_data_5.type}, mode: ${(_plotlyInput_data_6 = plotlyInput.data[0]) === null || _plotlyInput_data_6 === void 0 ? void 0 : _plotlyInput_data_6.mode}`);
+        case 'histogram':
+            return /*#__PURE__*/ React.createElement(VerticalBarChart, {
+                ...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme),
+                ...commonProps
+            });
+        default:
+            var _plotlyInput_data_7;
+            const xValues = plotlyInput.data[0].x;
+            const yValues = plotlyInput.data[0].y;
+            if (xValues && yValues && xValues.length > 0 && yValues.length > 0) {
+                const renderLineChartJsx = (chartProps)=>{
+                    return /*#__PURE__*/ React.createElement(LineChart, chartProps);
+                };
+                return checkAndRenderChart(renderLineChartJsx);
+            }
+            throw new Error(`Unsupported chart type :${(_plotlyInput_data_7 = plotlyInput.data[0]) === null || _plotlyInput_data_7 === void 0 ? void 0 : _plotlyInput_data_7.type}`);
+    }
+});
+DeclarativeChart.displayName = 'DeclarativeChart';