@fluentui/react-charts 1.2.0 → 9.0.1

package/lib/components/ResponsiveContainer/ResponsiveContainer.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { useResponsiveContainerStyles } from './useResponsiveContainerStyles.styles';
+export const ResponsiveContainer = (props)=>{
+    const containerRef = React.useRef(null);
+    const onResizeRef = React.useRef();
+    const { targetDocument } = useFluent_unstable();
+    const classes = 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/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":["React","useFluent_unstable","useResponsiveContainerStyles","ResponsiveContainer","props","containerRef","useRef","onResizeRef","targetDocument","classes","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","div","ref","className","root","style","Children","map","children","child","cloneElement","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,4BAA4B,QAAQ,wCAAwC;AAErF,OAAO,MAAMC,sBAA0DC,CAAAA;IACrE,MAAMC,eAAeL,MAAMM,MAAM,CAAiB;IAClD,MAAMC,cAAcP,MAAMM,MAAM;IAChC,MAAM,EAAEE,cAAc,EAAE,GAAGP;IAC3B,MAAMQ,UAAUP,6BAA6BE;IAE7C,MAAM,CAACM,MAAMC,QAAQ,GAAGX,MAAMY,QAAQ,CAAwD,CAAC;IAE/FL,YAAYM,OAAO,GAAGT,MAAMU,QAAQ;IACpC,MAAMC,UAAUP,2BAAAA,qCAAAA,eAAgBQ,WAAW;IAE3ChB,MAAMiB,SAAS,CAAC;QACd,IAAIC;QACJ,iDAAiD;QACjD,IAAIC;QAEJ,MAAMC,iBAAiB,CAACC;gBAetBd;YAdA,MAAM,EAAEe,OAAOC,cAAc,EAAEC,QAAQC,eAAe,EAAE,GAAGJ,OAAO,CAAC,EAAE,CAACK,WAAW;YACjF,sEAAsE;YACtE,gGAAgG;YAChGR,mBAAmBH,oBAAAA,8BAAAA,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;aACAzB,uBAAAA,YAAYM,OAAO,cAAnBN,2CAAAA,0BAAAA,aAAsBgB,gBAAgBE;QACxC;QAEA,IAAIV,oBAAAA,8BAAAA,QAASkB,cAAc,EAAE;YAC3Bd,iBAAiB,IAAIJ,QAAQkB,cAAc,CAACb;YAC5C,IAAIf,aAAaQ,OAAO,EAAE;gBACxBM,eAAee,OAAO,CAAC7B,aAAaQ,OAAO;YAC7C;QACF;QAEA,OAAO;YACL,IAAIK,kBAAkB;gBACpBH,oBAAAA,8BAAAA,QAASoB,oBAAoB,CAACjB;YAChC;YAEAC,2BAAAA,qCAAAA,eAAgBiB,UAAU;QAC5B;IACF,GAAG;QAACrB;KAAQ;IAEZ,qBACE,oBAACsB;QAAIC,KAAKjC;QAAckC,WAAW9B,QAAQ+B,IAAI;QAAEC,OAAO;YAAEnB,OAAOlB,MAAMkB,KAAK;YAAEE,QAAQpB,MAAMoB,MAAM;QAAC;OAChGxB,MAAM0C,QAAQ,CAACC,GAAG,CAACvC,MAAMwC,QAAQ,EAAEC,CAAAA;QAClC,qBAAO7C,MAAM8C,YAAY,CAACD,OAAO;YAC/BvB,OAAOZ,KAAKa,cAAc;YAC1BC,QAAQd,KAAKe,eAAe;QAC9B;IACF;AAGN,EAAE;AACFtB,oBAAoB4C,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ResponsiveContainer/index.js

@@ -0,0 +1 @@
+export * from './ResponsiveContainer';

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

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

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

@@ -0,0 +1,23 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const responsiveContainerClassNames = {
+  root: 'fui-charts-resp__root'
+};
+const useStyles = /*#__PURE__*/__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%;}"]
+});
+export const useResponsiveContainerStyles = props => {
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(responsiveContainerClassNames.root, baseStyles.root)
+  };
+};
+//# sourceMappingURL=useResponsiveContainerStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","responsiveContainerClassNames","root","useStyles","a9b677","Bqenvij","Bvcz5cu","Bjw6159","B5pe6w7","p4uzdd","d","useResponsiveContainerStyles","props","baseStyles"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAejB,CAAC;AACF,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACjD,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHD,IAAI,EAAEF,YAAY,CAACC,6BAA6B,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI;EAC1E,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/components/Sparkline/Sparkline.js

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { useSparklineStyles } from './useSparklineStyles.styles';
+import { scaleLinear as d3ScaleLinear } from 'd3-scale';
+import { area as d3Area, line as d3Line, curveLinear as d3curveLinear } from 'd3-shape';
+import { max as d3Max, extent as d3Extent } from 'd3-array';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { useRtl } from '../../utilities/index';
+/**
+ * Sparkline is the context wrapper and container for all Sparkline content/controls,
+ * It has no direct style or slot opinions.
+ *
+ * Sparkline also provides API interfaces for callbacks that will occur on navigation events.
+ */ export 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 = useRtl();
+    const [points, setPoints] = React.useState([]);
+    const width = 80;
+    const height = 20;
+    const valueTextWidth = 80;
+    const line = React.useMemo(()=>{
+        return d3Line().x((d)=>x(d.x)).y((d)=>y(d.y)).curve(d3curveLinear);
+    }, [
+        x,
+        y
+    ]);
+    const area = React.useMemo(()=>{
+        return d3Area().x((d)=>x(d.x)).y0(height).y1((d)=>y(d.y)).curve(d3curveLinear);
+    }, [
+        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] = d3Extent(_points, (d)=>d.x);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            x = d3ScaleLinear().domain([
+                xMin,
+                xMax
+            ]).range([
+                margin.left,
+                width - margin.right
+            ]);
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            y = d3ScaleLinear()/* eslint-disable @typescript-eslint/no-explicit-any */ .domain([
+                0,
+                d3Max(_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 = useSparklineStyles(props);
+    const focusAttributes = 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/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":["React","useSparklineStyles","scaleLinear","d3ScaleLinear","area","d3Area","line","d3Line","curveLinear","d3curveLinear","max","d3Max","extent","d3Extent","useFocusableGroup","useRtl","Sparkline","forwardRef","props","forwardedRef","margin","top","right","bottom","left","x","y","_emptyChartId","_isRTL","points","setPoints","useState","width","height","valueTextWidth","useMemo","d","curve","y0","y1","useEffect","_isChartEmpty","_points","data","lineChartData","xMin","xMax","domain","range","length","filter","item","drawSparkline","path","className","fill","opacity","strokeWidth","stroke","color","fillOpacity","role","aria-hidden","classes","focusAttributes","div","inlineBlock","svg","aria-label","legend","tabIndex","showLegend","text","textAnchor","dx","dy","valueText","id","style","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -0,0 +1,4 @@
+/**
+ * Sparkline styles
+ * {@docCategory SparklineChart}
+ */ export { };

package/lib/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,GACD,WAGC"}

package/lib/components/Sparkline/index.js

@@ -0,0 +1,3 @@
+export * from './Sparkline';
+export * from './Sparkline.types';
+export * from '../../types/index';

package/lib/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":"AAAA,cAAc,cAAc;AAC5B,cAAc,oBAAoB;AAClC,cAAc,oBAAoB"}

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

@@ -0,0 +1,49 @@
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { HighContrastSelector } from '../../utilities/index';
+/**
+ * @internal
+ */
+export const sparklineClassNames = {
+  inlineBlock: 'fui-sprk__inlineBlock',
+  valueText: 'fui-sprk__valueText'
+};
+/**
+ * Base Styles
+ */
+const useStyles = /*#__PURE__*/__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)"
+  }]]
+});
+/**
+ * Apply styling to the Carousel slots based on the state
+ */
+export const useSparklineStyles = props => {
+  var _props_styles, _props_styles1;
+  const baseStyles = useStyles();
+  return {
+    inlineBlock: mergeClasses(sparklineClassNames.inlineBlock, baseStyles.inlineBlock, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.inlineBlock),
+    valueText: 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/components/Sparkline/useSparklineStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","typographyStyles","HighContrastSelector","sparklineClassNames","inlineBlock","valueText","useStyles","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Bkfmm31","Bcwlslt","Bpvj6i6","B93v9kj","d","m","useSparklineStyles","props","_props_styles","_props_styles1","baseStyles","styles"],"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"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAASC,oBAAoB,QAAQ,uBAAuB;AAC5D;AACA;AACA;AAAI,OAAO,MAAMC,mBAAmB,GAAG;EACnCC,WAAW,EAAE,uBAAuB;EACpCC,SAAS,EAAE;AACf,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,QAAA;EAAAM,WAAA;IAAAG,MAAA;EAAA;EAAAF,SAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kBAAkB,GAAIC,KAAK,IAAG;EAC3C,IAAIC,aAAa,EAAEC,cAAc;EACjC,MAAMC,UAAU,GAAGhB,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHF,WAAW,EAAEL,YAAY,CAACI,mBAAmB,CAACC,WAAW,EAAEkB,UAAU,CAAClB,WAAW,EAAE,CAACgB,aAAa,GAAGD,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIH,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAAChB,WAAW,CAAC;IAC5LC,SAAS,EAAEN,YAAY,CAACI,mBAAmB,CAACE,SAAS,EAAEiB,UAAU,CAACjB,SAAS,EAAE,CAACgB,cAAc,GAAGF,KAAK,CAACI,MAAM,MAAM,IAAI,IAAIF,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAAChB,SAAS;EAC1L,CAAC;AACL,CAAC","ignoreList":[]}