@fluentui/react-charts 1.2.0 → 9.0.1

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    linechartClassNames: function() {
+        return linechartClassNames;
+    },
+    useLineChartStyles: function() {
+        return useLineChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const linechartClassNames = {
+    tooltip: 'fui-line__tooltip',
+    root: 'fui-line__root',
+    xAxis: 'fui-line__xAxis',
+    yAxis: 'fui-line__yAxis',
+    legendContainer: 'fui-line__legendContainer',
+    hover: 'fui-line__hover',
+    calloutContentRoot: 'fui-line__calloutContentRoot',
+    calloutContentX: 'fui-line__calloutContentX',
+    calloutContentY: 'fui-line__calloutContentY',
+    descriptionMessage: 'fui-line__descriptionMessage',
+    calloutDateTimeContainer: 'fui-line__calloutDateTimeContainer',
+    calloutInfoContainer: 'fui-line__calloutInfoContainer',
+    calloutBlockContainer: 'fui-line__calloutBlockContainer',
+    calloutlegendText: 'fui-line__calloutLegendText',
+    axisTitle: 'fui-line__axisTitle',
+    chartTitle: 'fui-line__chartTitle',
+    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',
+    shapeStyles: 'fui-line__shapeStyles',
+    chartWrapper: 'fui-line__chartWrapper',
+    calloutBlockContainertoDrawShapefalse: '',
+    calloutBlockContainertoDrawShapetrue: ''
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    tooltip: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        qhf8xq: "f1euv43f",
+        fsow6f: "f17mccla",
+        Bhzewxz: "fr6rvge",
+        Bkfmm31: "f5q6cfr",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "fq9zq91",
+        Bkecrkj: "f1aehjj5"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        ".f1euv43f{position:absolute;}",
+        ".f17mccla{text-align:center;}",
+        ".fr6rvge{top:var(--spacingVerticalNone);}",
+        ".f5q6cfr{fill:var(--colorNeutralBackground1);}",
+        [
+            ".fq9zq91{border-radius:var(--borderRadiusSmall);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1aehjj5{pointer-events:none;}"
+    ]
+});
+const useLineChartStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        tooltip: (0, _react.mergeClasses)(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )
+    };
+}; //# sourceMappingURL=useLineChartStyles.styles.js.map

package/lib-commonjs/components/LineChart/useLineChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useLineChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const linechartClassNames = {\n    tooltip: 'fui-line__tooltip',\n    root: 'fui-line__root',\n    xAxis: 'fui-line__xAxis',\n    yAxis: 'fui-line__yAxis',\n    legendContainer: 'fui-line__legendContainer',\n    hover: 'fui-line__hover',\n    calloutContentRoot: 'fui-line__calloutContentRoot',\n    calloutContentX: 'fui-line__calloutContentX',\n    calloutContentY: 'fui-line__calloutContentY',\n    descriptionMessage: 'fui-line__descriptionMessage',\n    calloutDateTimeContainer: 'fui-line__calloutDateTimeContainer',\n    calloutInfoContainer: 'fui-line__calloutInfoContainer',\n    calloutBlockContainer: 'fui-line__calloutBlockContainer',\n    calloutlegendText: 'fui-line__calloutLegendText',\n    axisTitle: 'fui-line__axisTitle',\n    chartTitle: 'fui-line__chartTitle',\n    opacityChangeOnHover: 'fui-line__opacityChangeOnHover',\n    shapeStyles: 'fui-line__shapeStyles',\n    chartWrapper: 'fui-line__chartWrapper',\n    calloutBlockContainertoDrawShapefalse: '',\n    calloutBlockContainertoDrawShapetrue: ''\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    tooltip: {\n        display: 'flex',\n        flexDirection: 'column',\n        ...shorthands.padding(tokens.spacingHorizontalS),\n        position: 'absolute',\n        textAlign: 'center',\n        top: tokens.spacingVerticalNone,\n        fill: tokens.colorNeutralBackground1,\n        borderRadius: tokens.borderRadiusSmall,\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useLineChartStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        tooltip: mergeClasses(linechartClassNames.tooltip, baseStyles.tooltip /*props.styles?.tooltip*/ )\n    };\n};\n"],"names":["linechartClassNames","useLineChartStyles","tooltip","root","xAxis","yAxis","legendContainer","hover","calloutContentRoot","calloutContentX","calloutContentY","descriptionMessage","calloutDateTimeContainer","calloutInfoContainer","calloutBlockContainer","calloutlegendText","axisTitle","chartTitle","opacityChangeOnHover","shapeStyles","chartWrapper","calloutBlockContainertoDrawShapefalse","calloutBlockContainertoDrawShapetrue","useStyles","__styles","mc9l5x","Beiy3e4","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","fsow6f","Bhzewxz","Bkfmm31","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bkecrkj","d","p","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,mBAAmB;eAAnBA;;IAwCAC,kBAAkB;eAAlBA;;;uBA5CoC;AAI1C,MAAMD,sBAAsB;IACnCE,SAAS;IACTC,MAAM;IACNC,OAAO;IACPC,OAAO;IACPC,iBAAiB;IACjBC,OAAO;IACPC,oBAAoB;IACpBC,iBAAiB;IACjBC,iBAAiB;IACjBC,oBAAoB;IACpBC,0BAA0B;IAC1BC,sBAAsB;IACtBC,uBAAuB;IACvBC,mBAAmB;IACnBC,WAAW;IACXC,YAAY;IACZC,sBAAsB;IACtBC,aAAa;IACbC,cAAc;IACdC,uCAAuC;IACvCC,sCAAsC;AAC1C;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAtB,SAAA;QAAAuB,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAeX,MAAMzC,qBAAsB0C,CAAAA;IACnC,MAAMC,aAAarB;IACnB,OAAO;QACHrB,SAAS2C,IAAAA,mBAAY,EAAC7C,oBAAoBE,OAAO,EAAE0C,WAAW1C,OAAO,CAAC,uBAAA;IAC1E;AACJ"}

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ResponsiveContainer", {
+    enumerable: true,
+    get: function() {
+        return ResponsiveContainer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useResponsiveContainerStylesstyles = require("./useResponsiveContainerStyles.styles");
+const ResponsiveContainer = (props)=>{
+    const containerRef = _react.useRef(null);
+    const onResizeRef = _react.useRef();
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const classes = (0, _useResponsiveContainerStylesstyles.useResponsiveContainerStyles)(props);
+    const [size, setSize] = _react.useState({});
+    onResizeRef.current = props.onResize;
+    const _window = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    _react.useEffect(()=>{
+        let animationFrameId;
+        // eslint-disable-next-line no-restricted-globals
+        let resizeObserver;
+        const resizeCallback = (entries)=>{
+            var _onResizeRef_current;
+            const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
+            // rAF is an alternative to the throttle function. For more info, see:
+            // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
+            animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(()=>{
+                setSize((prevSize)=>{
+                    const roundedWidth = Math.floor(containerWidth);
+                    const roundedHeight = Math.floor(containerHeight);
+                    if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
+                        return prevSize;
+                    }
+                    return {
+                        containerWidth: roundedWidth,
+                        containerHeight: roundedHeight
+                    };
+                });
+            });
+            (_onResizeRef_current = onResizeRef.current) === null || _onResizeRef_current === void 0 ? void 0 : _onResizeRef_current.call(onResizeRef, containerWidth, containerHeight);
+        };
+        if (_window === null || _window === void 0 ? void 0 : _window.ResizeObserver) {
+            resizeObserver = new _window.ResizeObserver(resizeCallback);
+            if (containerRef.current) {
+                resizeObserver.observe(containerRef.current);
+            }
+        }
+        return ()=>{
+            if (animationFrameId) {
+                _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
+            }
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [
+        _window
+    ]);
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: containerRef,
+        className: classes.root,
+        style: {
+            width: props.width,
+            height: props.height
+        }
+    }, _react.Children.map(props.children, (child)=>{
+        return /*#__PURE__*/ _react.cloneElement(child, {
+            width: size.containerWidth,
+            height: size.containerHeight
+        });
+    }));
+};
+ResponsiveContainer.displayName = 'ResponsiveContainer';

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveContainerStyles } from './useResponsiveContainerStyles.styles';\n\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const { targetDocument } = useFluent_unstable();\n  const classes = useResponsiveContainerStyles(props);\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n  const _window = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    let animationFrameId: number | undefined;\n    // eslint-disable-next-line no-restricted-globals\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window?.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, [_window]);\n\n  return (\n    <div ref={containerRef} className={classes.root} style={{ width: props.width, height: props.height }}>\n      {React.Children.map(props.children, child => {\n        return React.cloneElement(child, {\n          width: size.containerWidth,\n          height: size.containerHeight,\n        });\n      })}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["ResponsiveContainer","props","containerRef","React","useRef","onResizeRef","targetDocument","useFluent_unstable","classes","useResponsiveContainerStyles","size","setSize","useState","current","onResize","_window","defaultView","useEffect","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","createElement","div","ref","className","root","style","Children","map","children","child","cloneElement","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;qCACY;oDAEU;AAEtC,MAAMA,sBAA0DC,CAAAA;IACrE,MAAMC,eAAeC,OAAMC,MAAM,CAAiB;IAClD,MAAMC,cAAcF,OAAMC,MAAM;IAChC,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAAA;IAC3B,MAAMC,UAAUC,IAAAA,gEAAAA,EAA6BR;IAE7C,MAAM,CAACS,MAAMC,QAAQ,GAAGR,OAAMS,QAAQ,CAAwD,CAAC;IAE/FP,YAAYQ,OAAO,GAAGZ,MAAMa,QAAQ;IACpC,MAAMC,UAAUT,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBU,WAAW;IAE3Cb,OAAMc,SAAS,CAAC;QACd,IAAIC;QACJ,iDAAiD;QACjD,IAAIC;QAEJ,MAAMC,iBAAiB,CAACC;gBAetBhB;YAdA,MAAM,EAAEiB,OAAOC,cAAc,EAAEC,QAAQC,eAAe,EAAE,GAAGJ,OAAO,CAAC,EAAE,CAACK,WAAW;YACjF,sEAAsE;YACtE,gGAAgG;YAChGR,mBAAmBH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASY,qBAAqB,CAAC;gBAChDhB,QAAQiB,CAAAA;oBACN,MAAMC,eAAeC,KAAKC,KAAK,CAACR;oBAChC,MAAMS,gBAAgBF,KAAKC,KAAK,CAACN;oBACjC,IAAIG,SAASL,cAAc,KAAKM,gBAAgBD,SAASH,eAAe,KAAKO,eAAe;wBAC1F,OAAOJ;oBACT;oBAEA,OAAO;wBAAEL,gBAAgBM;wBAAcJ,iBAAiBO;oBAAc;gBACxE;YACF;YACA3B,CAAAA,uBAAAA,YAAYQ,OAAO,AAAPA,MAAO,QAAnBR,yBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,qBAAAA,IAAAA,CAAAA,aAAsBkB,gBAAgBE;QACxC;QAEA,IAAIV,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASkB,cAAc,EAAE;YAC3Bd,iBAAiB,IAAIJ,QAAQkB,cAAc,CAACb;YAC5C,IAAIlB,aAAaW,OAAO,EAAE;gBACxBM,eAAee,OAAO,CAAChC,aAAaW,OAAO;YAC7C;QACF;QAEA,OAAO;YACL,IAAIK,kBAAkB;gBACpBH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASoB,oBAAoB,CAACjB;YAChC;YAEAC,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBiB,UAAU;QAC5B;IACF,GAAG;QAACrB;KAAQ;IAEZ,OAAA,WAAA,GACEZ,OAAAkC,aAAA,CAACC,OAAAA;QAAIC,KAAKrC;QAAcsC,WAAWhC,QAAQiC,IAAI;QAAEC,OAAO;YAAEpB,OAAOrB,MAAMqB,KAAK;YAAEE,QAAQvB,MAAMuB,MAAM;QAAC;OAChGrB,OAAMwC,QAAQ,CAACC,GAAG,CAAC3C,MAAM4C,QAAQ,EAAEC,CAAAA;QAClC,OAAA,WAAA,GAAO3C,OAAM4C,YAAY,CAACD,OAAO;YAC/BxB,OAAOZ,KAAKa,cAAc;YAC1BC,QAAQd,KAAKe,eAAe;QAC9B;IACF;AAGN;AACAzB,oBAAoBgD,WAAW,GAAG"}

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

package/lib-commonjs/components/ResponsiveContainer/ResponsiveContainer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ResponsiveContainerProps {\n  children: React.ReactElement;\n  onResize?: (width: number, height: number) => void;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport interface ResponsiveContainerStyles {\n  root: string;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}

package/lib-commonjs/components/ResponsiveContainer/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./ResponsiveContainer"), exports);

package/lib-commonjs/components/ResponsiveContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ResponsiveContainer';\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;uBAAc"}

package/lib-commonjs/components/ResponsiveContainer/useResponsiveContainerStyles.styles.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    responsiveContainerClassNames: function() {
+        return responsiveContainerClassNames;
+    },
+    useResponsiveContainerStyles: function() {
+        return useResponsiveContainerStyles;
+    }
+});
+const _react = require("@griffel/react");
+const responsiveContainerClassNames = {
+    root: 'fui-charts-resp__root'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl",
+        Bvcz5cu: "fx80qsw",
+        Bjw6159: "f4wz6dc",
+        B5pe6w7: "f17klwcu",
+        p4uzdd: "ffmg4tr"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".fx80qsw [class*=\"chartWrapper\"]{width:100%;}",
+        ".f4wz6dc [class*=\"chartWrapper\"]{height:100%;}",
+        ".f17klwcu svg{width:100%;}",
+        ".ffmg4tr svg{height:100%;}"
+    ]
+});
+const useResponsiveContainerStyles = (props)=>{
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(responsiveContainerClassNames.root, baseStyles.root)
+    };
+}; //# sourceMappingURL=useResponsiveContainerStyles.styles.js.map

package/lib-commonjs/components/ResponsiveContainer/useResponsiveContainerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useResponsiveContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveContainerClassNames = {\n    root: 'fui-charts-resp__root'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%',\n        '& [class*=\"chartWrapper\"]': {\n            width: '100%',\n            // To prevent chart height from collapsing while resizing\n            height: '100%'\n        },\n        '& svg': {\n            // This overrides the pixel width and height of svg allowing it to resize properly within flexbox\n            width: '100%',\n            height: '100%'\n        }\n    }\n});\nexport const useResponsiveContainerStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveContainerClassNames.root, baseStyles.root)\n    };\n};\n"],"names":["responsiveContainerClassNames","useResponsiveContainerStyles","root","useStyles","__styles","a9b677","Bqenvij","Bvcz5cu","Bjw6159","B5pe6w7","p4uzdd","d","props","baseStyles","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACaA,6BAA6B;eAA7BA;;IAmBAC,4BAA4B;eAA5BA;;;uBApB4B;AAClC,MAAMD,gCAAgC;IACzCE,MAAM;AACV;AACA,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAgBX,MAAMV,+BAAgCW,CAAAA;IACzC,MAAMC,aAAaV;IACnB,OAAO;QACHD,MAAMY,IAAAA,mBAAY,EAACd,8BAA8BE,IAAI,EAAEW,WAAWX,IAAI;IAC1E;AACJ"}

package/lib-commonjs/components/Sparkline/Sparkline.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Sparkline", {
+    enumerable: true,
+    get: function() {
+        return Sparkline;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSparklineStylesstyles = require("./useSparklineStyles.styles");
+const _d3scale = require("d3-scale");
+const _d3shape = require("d3-shape");
+const _d3array = require("d3-array");
+const _reacttabster = require("@fluentui/react-tabster");
+const _index = require("../../utilities/index");
+const Sparkline = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    let margin = {
+        top: 2,
+        right: 0,
+        bottom: 0,
+        left: 0
+    };
+    let x;
+    let y;
+    let _emptyChartId = '_SparklineChart_empty';
+    let _isRTL = (0, _index.useRtl)();
+    const [points, setPoints] = _react.useState([]);
+    const width = 80;
+    const height = 20;
+    const valueTextWidth = 80;
+    const line = _react.useMemo(()=>{
+        return (0, _d3shape.line)().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(_d3shape.curveLinear);
+    }, [
+        x,
+        y
+    ]);
+    const area = _react.useMemo(()=>{
+        return (0, _d3shape.area)().x((d)=>x(d.x)).y0(height).y1((d)=>y(d.y)).curve(_d3shape.curveLinear);
+    }, [
+        height,
+        x,
+        y
+    ]);
+    _react.useEffect(()=>{
+        if (!_isChartEmpty()) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            const _points = props.data.lineChartData[0].data;
+            /* eslint-disable @typescript-eslint/no-explicit-any */ const [xMin, xMax] = (0, _d3array.extent)(_points, (d)=>d.x);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            x = (0, _d3scale.scaleLinear)().domain([
+                xMin,
+                xMax
+            ]).range([
+                margin.left,
+                width - margin.right
+            ]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            y = (0, _d3scale.scaleLinear)()/* eslint-disable @typescript-eslint/no-explicit-any */ .domain([
+                0,
+                (0, _d3array.max)(_points, (d)=>d.y)
+            ]).range([
+                height - margin.bottom,
+                margin.top
+            ]);
+            setPoints(_points);
+        }
+    }, []);
+    const { data } = props;
+    function _isChartEmpty() {
+        return !(data && data.lineChartData && data.lineChartData.length > 0 && data.lineChartData.filter((item)=>item.data.length === 0).length === 0);
+    }
+    function drawSparkline() {
+        if (!line || !area) {
+            return null;
+        }
+        return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("path", {
+            className: "line",
+            d: line(points),
+            fill: 'transparent',
+            opacity: 1,
+            strokeWidth: 2,
+            stroke: data.lineChartData[0].color
+        }), /*#__PURE__*/ _react.createElement("path", {
+            className: "area",
+            d: area(points),
+            opacity: 1,
+            fillOpacity: 0.2,
+            fill: data.lineChartData[0].color,
+            role: "img",
+            "aria-hidden": true
+        }));
+    }
+    const classes = (0, _useSparklineStylesstyles.useSparklineStyles)(props);
+    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
+        className: classes.inlineBlock,
+        ...focusAttributes
+    }, width >= 50 && height >= 16 ? /*#__PURE__*/ _react.createElement("svg", {
+        width: width,
+        height: height,
+        "aria-label": `Sparkline with label ${data.lineChartData[0].legend}`,
+        tabIndex: 0
+    }, points ? drawSparkline() : null) : /*#__PURE__*/ _react.createElement(_react.Fragment, null), props.showLegend && props.data.lineChartData[0].legend ? /*#__PURE__*/ _react.createElement("svg", {
+        width: valueTextWidth,
+        height: height
+    }, /*#__PURE__*/ _react.createElement("text", {
+        x: "0%",
+        textAnchor: _isRTL ? 'end' : 'start',
+        dx: 8,
+        y: "100%",
+        dy: -5,
+        className: classes.valueText
+    }, props.data.lineChartData[0].legend)) : /*#__PURE__*/ _react.createElement(_react.Fragment, null)) : /*#__PURE__*/ _react.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+});
+Sparkline.displayName = 'Sparkline';

package/lib-commonjs/components/Sparkline/Sparkline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Sparkline.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSparklineStyles } from './useSparklineStyles.styles';\nimport { scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';\nimport { max as d3Max, extent as d3Extent } from 'd3-array';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { LineChartDataPoint } from '../../types/DataPoint';\nimport { useRtl } from '../../utilities/index';\nimport { SparklineProps } from '../../index';\n\n/**\n * Sparkline is the context wrapper and container for all Sparkline content/controls,\n * It has no direct style or slot opinions.\n *\n * Sparkline also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const Sparkline: React.FunctionComponent<SparklineProps> = React.forwardRef<HTMLDivElement, SparklineProps>(\n  (props, forwardedRef) => {\n    let margin = {\n      top: 2,\n      right: 0,\n      bottom: 0,\n      left: 0,\n    };\n    let x: any;\n    let y: any;\n    let _emptyChartId: string = '_SparklineChart_empty';\n    let _isRTL: boolean = useRtl();\n    const [points, setPoints] = React.useState<LineChartDataPoint[]>([]);\n    const width = 80;\n    const height = 20;\n    const valueTextWidth = 80;\n\n    const line = React.useMemo(() => {\n      return d3Line<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [x, y]);\n\n    const area = React.useMemo(() => {\n      return d3Area<LineChartDataPoint>()\n        .x((d: LineChartDataPoint) => x(d.x))\n        .y0(height)\n        .y1((d: LineChartDataPoint) => y(d.y))\n        .curve(d3curveLinear);\n    }, [height, x, y]);\n\n    React.useEffect(() => {\n      if (!_isChartEmpty()) {\n        // eslint-disable-next-line @typescript-eslint/no-shadow\n        const _points = props.data!.lineChartData![0].data;\n\n        /* eslint-disable @typescript-eslint/no-explicit-any */\n        const [xMin, xMax] = d3Extent(_points, (d: any) => d.x);\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        x = d3ScaleLinear()\n          .domain([xMin, xMax])\n          .range([margin.left!, width - margin.right!]);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        y = d3ScaleLinear()\n          /* eslint-disable @typescript-eslint/no-explicit-any */\n          .domain([0, d3Max(_points, (d: any) => d.y)])\n          .range([height - margin.bottom!, margin.top!]);\n\n        setPoints(_points);\n      }\n    }, []);\n\n    const { data } = props;\n    function _isChartEmpty(): boolean {\n      return !(\n        data &&\n        data.lineChartData &&\n        data.lineChartData.length > 0 &&\n        data.lineChartData.filter(item => item.data.length === 0).length === 0\n      );\n    }\n    function drawSparkline() {\n      if (!line || !area) {\n        return null;\n      }\n      return (\n        <>\n          <path\n            className=\"line\"\n            d={line(points)!}\n            fill={'transparent'}\n            opacity={1}\n            strokeWidth={2}\n            stroke={data!.lineChartData![0].color!}\n          />\n          <path\n            className=\"area\"\n            d={area(points)!}\n            opacity={1}\n            fillOpacity={0.2}\n            fill={data!.lineChartData![0].color!}\n            role=\"img\"\n            aria-hidden\n          />\n        </>\n      );\n    }\n\n    const classes = useSparklineStyles(props);\n    const focusAttributes = useFocusableGroup();\n    return !_isChartEmpty() ? (\n      <div className={classes.inlineBlock} {...focusAttributes}>\n        {width >= 50 && height >= 16 ? (\n          <svg\n            width={width}\n            height={height}\n            aria-label={`Sparkline with label ${data!.lineChartData![0].legend!}`}\n            tabIndex={0}\n          >\n            {points ? drawSparkline() : null}\n          </svg>\n        ) : (\n          <></>\n        )}\n        {props.showLegend && props.data!.lineChartData![0].legend ? (\n          <svg width={valueTextWidth} height={height}>\n            <text x=\"0%\" textAnchor={_isRTL ? 'end' : 'start'} dx={8} y=\"100%\" dy={-5} className={classes.valueText}>\n              {props.data!.lineChartData![0].legend!}\n            </text>\n          </svg>\n        ) : (\n          <></>\n        )}\n      </div>\n    ) : (\n      <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n    );\n  },\n);\nSparkline.displayName = 'Sparkline';\n"],"names":["Sparkline","React","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","useRtl","points","setPoints","useState","width","height","valueTextWidth","line","useMemo","d3Line","d","curve","d3curveLinear","area","d3Area","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","d3Extent","d3ScaleLinear","domain","range","d3Max","length","filter","item","drawSparkline","createElement","Fragment","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","useSparklineStyles","focusAttributes","useFocusableGroup","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/Sparkline/Sparkline.types.js

@@ -0,0 +1,7 @@
+/**
+ * Sparkline styles
+ * {@docCategory SparklineChart}
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/Sparkline/Sparkline.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Sparkline.types.ts"],"sourcesContent":["import { ChartProps } from './index';\nimport { CartesianChartStyleProps } from '../CommonComponents/index';\n\nexport interface SparklineStyleProps extends CartesianChartStyleProps {}\n\n/**\n * Sparkline properties\n * {@docCategory SparklineChart}\n */\nexport interface SparklineProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * An array of chart data points for the Sparkline chart\n   */\n  data?: ChartProps;\n\n  /**\n   * Width of chart\n   * * @default 80\n   */\n  width?: number;\n\n  /**\n   * Height of chart\n   * @default 20\n   */\n  height?: number;\n\n  /**\n   * Width of value text\n   * * @default 80\n   */\n  valueTextWidth?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the SparklineChart.\n   */\n  className?: string;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop used to determine whether to show the legend or not\n   */\n  showLegend?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: SparklineStyles;\n}\n\n/**\n * Sparkline styles\n * {@docCategory SparklineChart}\n */\nexport interface SparklineStyles {\n  inlineBlock?: string;\n  valueText?: string;\n}\n"],"names":[],"rangeMappings":";;;","mappings":"AAsDA;;;CAGC"}

package/lib-commonjs/components/Sparkline/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./Sparkline"), exports);
+_export_star._(require("./Sparkline.types"), exports);
+_export_star._(require("../../types/index"), exports);

package/lib-commonjs/components/Sparkline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Sparkline';\nexport * from './Sparkline.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}

package/lib-commonjs/components/Sparkline/useSparklineStyles.styles.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    sparklineClassNames: function() {
+        return sparklineClassNames;
+    },
+    useSparklineStyles: function() {
+        return useSparklineStyles;
+    }
+});
+const _react = require("@griffel/react");
+const sparklineClassNames = {
+    inlineBlock: 'fui-sprk__inlineBlock',
+    valueText: 'fui-sprk__valueText'
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    inlineBlock: {
+        mc9l5x: "f1w7gpdv"
+    },
+    valueText: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        Bkfmm31: "fhuob2q",
+        Bcwlslt: "fase104",
+        Bpvj6i6: "fzgeahw",
+        B93v9kj: "f15mrrko"
+    }
+}, {
+    d: [
+        ".f1w7gpdv{display:inline;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fase104{opacity:0.1;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.fzgeahw{stroke:rgb(179, 179, 179);}}",
+            {
+                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)"
+            }
+        ]
+    ]
+});
+const useSparklineStyles = (props)=>{
+    var _props_styles, _props_styles1;
+    const baseStyles = useStyles();
+    return {
+        inlineBlock: (0, _react.mergeClasses)(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.inlineBlock),
+        valueText: (0, _react.mergeClasses)(sparklineClassNames.valueText, baseStyles.valueText, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.valueText)
+    };
+}; //# sourceMappingURL=useSparklineStyles.styles.js.map

package/lib-commonjs/components/Sparkline/useSparklineStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useSparklineStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { HighContrastSelector } from '../../utilities/index';\n/**\n * @internal\n */ export const sparklineClassNames = {\n    inlineBlock: 'fui-sprk__inlineBlock',\n    valueText: 'fui-sprk__valueText'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    inlineBlock: {\n        display: 'inline'\n    },\n    valueText: {\n        ...typographyStyles.caption1,\n        fill: tokens.colorNeutralForeground1,\n        [HighContrastSelector]: {\n            opacity: 0.1,\n            stroke: 'rgb(179, 179, 179)',\n            forcedColorAdjust: 'none'\n        }\n    }\n});\n/**\n * Apply styling to the Carousel slots based on the state\n */ export const useSparklineStyles = (props)=>{\n    var _props_styles, _props_styles1;\n    const baseStyles = useStyles();\n    return {\n        inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.inlineBlock),\n        valueText: mergeClasses(sparklineClassNames.valueText, baseStyles.valueText, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.valueText)\n    };\n};\n"],"names":["sparklineClassNames","useSparklineStyles","inlineBlock","valueText","useStyles","__styles","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkfmm31","Bcwlslt","Bpvj6i6","B93v9kj","d","m","props","_props_styles","_props_styles1","baseStyles","mergeClasses","styles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAKiBA,mBAAmB;eAAnBA;;IAsBAC,kBAAkB;eAAlBA;;;uBA3BwB;AAK9B,MAAMD,sBAAsB;IACnCE,aAAa;IACbC,WAAW;AACf;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,aAAA;QAAAI,QAAA;IAAA;IAAAH,WAAA;QAAAI,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,GAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA;YAAA;SAAA;KAAA;AAAA;AAgBX,MAAMf,qBAAsBgB,CAAAA;IACnC,IAAIC,eAAeC;IACnB,MAAMC,aAAahB;IACnB,OAAO;QACHF,aAAamB,IAAAA,mBAAY,EAACrB,oBAAoBE,WAAW,EAAEkB,WAAWlB,WAAW,EAAE,AAACgB,CAAAA,gBAAgBD,MAAMK,MAAM,AAANA,MAAY,QAAQJ,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAchB,WAAW;QAC3LC,WAAWkB,IAAAA,mBAAY,EAACrB,oBAAoBG,SAAS,EAAEiB,WAAWjB,SAAS,EAAE,AAACgB,CAAAA,iBAAiBF,MAAMK,MAAM,AAANA,MAAY,QAAQH,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAehB,SAAS;IAC1L;AACJ"}