@fluentui/react-charts 9.3.5 → 9.3.7

package/lib-commonjs/AnnotationOnlyChart.js

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

package/lib-commonjs/AnnotationOnlyChart.js.map

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

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

@@ -0,0 +1,205 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AnnotationOnlyChart", {
+    enumerable: true,
+    get: function() {
+        return AnnotationOnlyChart;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _ChartAnnotationLayer = require("../CommonComponents/Annotations/ChartAnnotationLayer");
+const _utilities = require("../../utilities");
+const _useAnnotationOnlyChartStylesstyles = require("./useAnnotationOnlyChartStyles.styles");
+const _hooks = require("../../utilities/hooks");
+const DEFAULT_HEIGHT = 650;
+const FALLBACK_WIDTH = 400;
+const buildPadding = (margin)=>{
+    if (!margin) {
+        return undefined;
+    }
+    var _margin_t;
+    const top = (_margin_t = margin.t) !== null && _margin_t !== void 0 ? _margin_t : 0;
+    var _margin_r;
+    const right = (_margin_r = margin.r) !== null && _margin_r !== void 0 ? _margin_r : 0;
+    var _margin_b;
+    const bottom = (_margin_b = margin.b) !== null && _margin_b !== void 0 ? _margin_b : 0;
+    var _margin_l;
+    const left = (_margin_l = margin.l) !== null && _margin_l !== void 0 ? _margin_l : 0;
+    if (top === 0 && right === 0 && bottom === 0 && left === 0) {
+        return undefined;
+    }
+    return `${top}px ${right}px ${bottom}px ${left}px`;
+};
+const AnnotationOnlyChart = (props)=>{
+    const { annotations, chartTitle, description, width, height, paperBackgroundColor, plotBackgroundColor, fontColor, fontFamily, margin, componentRef } = props;
+    const isRtl = (0, _utilities.useRtl)();
+    const classes = (0, _useAnnotationOnlyChartStylesstyles.useAnnotationOnlyChartStyles)();
+    const { chartContainerRef: containerRef } = (0, _hooks.useImageExport)(componentRef, true, false);
+    const contentRef = _react.useRef(null);
+    const [measuredWidth, setMeasuredWidth] = _react.useState(width !== null && width !== void 0 ? width : 0);
+    const [contentHeight, setContentHeight] = _react.useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT);
+    _react.useEffect(()=>{
+        if (typeof width === 'number' && width > 0) {
+            setMeasuredWidth(width);
+            return;
+        }
+        const node = containerRef.current;
+        if (!node || typeof ResizeObserver === 'undefined') {
+            const rect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+            if (rect && rect.width > 0) {
+                setMeasuredWidth(rect.width);
+            } else {
+                setMeasuredWidth((prev)=>prev > 0 ? prev : FALLBACK_WIDTH);
+            }
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const newWidth = entry.contentRect.width;
+            if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {
+                setMeasuredWidth(newWidth);
+            }
+        });
+        const rect = node.getBoundingClientRect();
+        if (rect.width > 0) {
+            setMeasuredWidth(rect.width);
+        }
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, [
+        width,
+        measuredWidth
+    ]);
+    const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);
+    const resolvedHeight = Math.max(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT, 1);
+    _react.useEffect(()=>{
+        const node = contentRef.current;
+        if (!node) {
+            setContentHeight((prev)=>prev > 0 ? prev : resolvedHeight);
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            const rect = node.getBoundingClientRect();
+            setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
+            return;
+        }
+        const observer = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            const newHeight = entry.contentRect.height;
+            if (newHeight > 0) {
+                setContentHeight((prev)=>Math.abs(prev - newHeight) > 0.5 ? newHeight : prev);
+            }
+        });
+        const rect = node.getBoundingClientRect();
+        setContentHeight((prev)=>rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight);
+        observer.observe(node);
+        return ()=>observer.disconnect();
+    }, [
+        resolvedHeight,
+        resolvedWidth,
+        annotations,
+        chartTitle,
+        description,
+        margin,
+        plotBackgroundColor,
+        paperBackgroundColor,
+        fontColor,
+        fontFamily
+    ]);
+    const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);
+    const context = {
+        plotRect: {
+            x: 0,
+            y: 0,
+            width: resolvedWidth,
+            height: resolvedHeight
+        },
+        svgRect: {
+            width: resolvedWidth,
+            height: resolvedHeight
+        },
+        isRtl
+    };
+    const padding = buildPadding(margin);
+    // Inline styles for dynamic values that can't be in makeStyles
+    const rootStyle = _react.useMemo(()=>({
+            width: width ? `${width}px` : '100%',
+            minHeight: resolvedHeight,
+            ...paperBackgroundColor && {
+                backgroundColor: paperBackgroundColor
+            },
+            ...fontColor && {
+                color: fontColor
+            },
+            ...fontFamily && {
+                fontFamily
+            },
+            ...padding && {
+                padding
+            }
+        }), [
+        fontColor,
+        fontFamily,
+        paperBackgroundColor,
+        padding,
+        resolvedHeight,
+        width
+    ]);
+    const contentStyle = _react.useMemo(()=>({
+            ...plotBackgroundColor && {
+                backgroundColor: plotBackgroundColor
+            }
+        }), [
+        plotBackgroundColor
+    ]);
+    const resolvedAnnotations = annotations !== null && annotations !== void 0 ? annotations : [];
+    const hasAnnotations = resolvedAnnotations.length > 0;
+    const ariaLabel = hasAnnotations ? description !== null && description !== void 0 ? description : chartTitle : undefined;
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: containerRef,
+        "data-chart-annotation-container": "true"
+    }, /*#__PURE__*/ _react.createElement("svg", {
+        width: resolvedWidth,
+        height: svgHeight,
+        viewBox: `0 0 ${resolvedWidth} ${svgHeight}`,
+        style: {
+            width: width ? `${width}px` : '100%',
+            height: `${svgHeight}px`,
+            display: 'block'
+        },
+        role: ariaLabel ? 'img' : undefined,
+        "aria-label": ariaLabel
+    }, /*#__PURE__*/ _react.createElement("foreignObject", {
+        x: 0,
+        y: 0,
+        width: resolvedWidth,
+        height: svgHeight
+    }, /*#__PURE__*/ _react.createElement("div", {
+        ref: contentRef,
+        className: classes.root,
+        style: rootStyle,
+        "data-chart-annotation-only": "true",
+        "aria-label": ariaLabel
+    }, chartTitle && /*#__PURE__*/ _react.createElement("span", {
+        className: classes.title,
+        "aria-hidden": "true"
+    }, chartTitle), /*#__PURE__*/ _react.createElement("div", {
+        className: classes.content,
+        style: contentStyle,
+        role: "presentation"
+    }, hasAnnotations ? /*#__PURE__*/ _react.createElement(_ChartAnnotationLayer.ChartAnnotationLayer, {
+        annotations: resolvedAnnotations,
+        context: context
+    }) : null)))));
+};
+AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { useRtl } from '../../utilities';\nimport { useAnnotationOnlyChartStyles } from './useAnnotationOnlyChartStyles.styles';\nimport type { AnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { ChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\nimport { useImageExport } from '../../utilities/hooks';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: AnnotationOnlyChartProps['margin']): string | undefined => {\n  if (!margin) {\n    return undefined;\n  }\n\n  const top = margin.t ?? 0;\n  const right = margin.r ?? 0;\n  const bottom = margin.b ?? 0;\n  const left = margin.l ?? 0;\n\n  if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n    return undefined;\n  }\n\n  return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<AnnotationOnlyChartProps> = props => {\n  const {\n    annotations,\n    chartTitle,\n    description,\n    width,\n    height,\n    paperBackgroundColor,\n    plotBackgroundColor,\n    fontColor,\n    fontFamily,\n    margin,\n    componentRef,\n  } = props;\n\n  const isRtl = useRtl();\n  const classes = useAnnotationOnlyChartStyles();\n  const { chartContainerRef: containerRef } = useImageExport(componentRef, true, false);\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n  const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n  React.useEffect(() => {\n    if (typeof width === 'number' && width > 0) {\n      setMeasuredWidth(width);\n      return;\n    }\n\n    const node = containerRef.current;\n    if (!node || typeof ResizeObserver === 'undefined') {\n      const rect = node?.getBoundingClientRect();\n      if (rect && rect.width > 0) {\n        setMeasuredWidth(rect.width);\n      } else {\n        setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n      }\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n      const newWidth = entry.contentRect.width;\n      if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n        setMeasuredWidth(newWidth);\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    if (rect.width > 0) {\n      setMeasuredWidth(rect.width);\n    }\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [width, measuredWidth]);\n\n  const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);\n  const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n  React.useEffect(() => {\n    const node = contentRef.current;\n    if (!node) {\n      setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    if (typeof ResizeObserver === 'undefined') {\n      const rect = node.getBoundingClientRect();\n      setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n\n      const newHeight = entry.contentRect.height;\n      if (newHeight > 0) {\n        setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [\n    resolvedHeight,\n    resolvedWidth,\n    annotations,\n    chartTitle,\n    description,\n    margin,\n    plotBackgroundColor,\n    paperBackgroundColor,\n    fontColor,\n    fontFamily,\n  ]);\n\n  const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);\n\n  const context: ChartAnnotationContext = {\n    plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n    svgRect: { width: resolvedWidth, height: resolvedHeight },\n    isRtl,\n  };\n\n  const padding = buildPadding(margin);\n\n  // Inline styles for dynamic values that can't be in makeStyles\n  const rootStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      width: width ? `${width}px` : '100%',\n      minHeight: resolvedHeight,\n      ...(paperBackgroundColor && { backgroundColor: paperBackgroundColor }),\n      ...(fontColor && { color: fontColor }),\n      ...(fontFamily && { fontFamily }),\n      ...(padding && { padding }),\n    }),\n    [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, width],\n  );\n\n  const contentStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...(plotBackgroundColor && { backgroundColor: plotBackgroundColor }),\n    }),\n    [plotBackgroundColor],\n  );\n\n  const resolvedAnnotations = annotations ?? [];\n  const hasAnnotations = resolvedAnnotations.length > 0;\n  const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n  return (\n    <div ref={containerRef} data-chart-annotation-container=\"true\">\n      <svg\n        width={resolvedWidth}\n        height={svgHeight}\n        viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n        style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n      >\n        <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n          <div\n            ref={contentRef}\n            className={classes.root}\n            style={rootStyle}\n            data-chart-annotation-only=\"true\"\n            aria-label={ariaLabel}\n          >\n            {chartTitle && (\n              <span className={classes.title} aria-hidden=\"true\">\n                {chartTitle}\n              </span>\n            )}\n            <div className={classes.content} style={contentStyle} role=\"presentation\">\n              {hasAnnotations ? <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} /> : null}\n            </div>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"],"names":["React","ChartAnnotationLayer","useRtl","useAnnotationOnlyChartStyles","useImageExport","DEFAULT_HEIGHT","FALLBACK_WIDTH","buildPadding","margin","undefined","top","t","right","r","bottom","b","left","l","AnnotationOnlyChart","props","annotations","chartTitle","description","width","height","paperBackgroundColor","plotBackgroundColor","fontColor","fontFamily","componentRef","isRtl","classes","chartContainerRef","containerRef","contentRef","useRef","measuredWidth","setMeasuredWidth","useState","contentHeight","setContentHeight","useEffect","node","current","ResizeObserver","rect","getBoundingClientRect","prev","observer","entries","entry","newWidth","contentRect","Math","abs","observe","disconnect","resolvedWidth","max","resolvedHeight","newHeight","svgHeight","ceil","context","plotRect","x","y","svgRect","padding","rootStyle","useMemo","minHeight","backgroundColor","color","contentStyle","resolvedAnnotations","hasAnnotations","length","ariaLabel","div","ref","data-chart-annotation-container","svg","viewBox","style","display","role","aria-label","foreignObject","className","root","data-chart-annotation-only","span","title","aria-hidden","content","displayName"],"mappings":"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"}

package/lib-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.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/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/AnnotationOnlyChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ChartAnnotation } from '../../types/ChartAnnotation';\nimport type { Chart } from '../../types/index';\nimport type { Margin } from '@fluentui/chart-utilities';\n\n/**\n * Props for the annotation-only chart renderer.\n */\nexport interface AnnotationOnlyChartProps {\n  /**\n   * Collection of annotations to render.\n   */\n  annotations: ChartAnnotation[];\n  /** Optional layout title extracted from the Plotly schema. */\n  chartTitle?: string;\n  /** Optional descriptive text for accessibility. */\n  description?: string;\n  /** Desired width in pixels (if absent the chart will grow to fit the container). */\n  width?: number;\n  /** Desired height in pixels. */\n  height?: number;\n  /** Paper/background colour specified in the Plotly layout. */\n  paperBackgroundColor?: string;\n  /** Plot area background colour specified in the Plotly layout. */\n  plotBackgroundColor?: string;\n  /** Global layout font colour. */\n  fontColor?: string;\n  /** Global layout font family. */\n  fontFamily?: string;\n  /** Layout margin converted to padding for the outer wrapper. */\n  margin?: Partial<Margin>;\n  /** Component ref propagated by the DeclarativeChart surface. */\n  componentRef?: React.Ref<Chart>;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/index.ts"],"sourcesContent":["export * from './AnnotationOnlyChart';\nexport * from './AnnotationOnlyChart.types';\n"],"names":[],"mappings":";;;;;uBAAc,wBAAwB;uBACxB,8BAA8B"}

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAnnotationOnlyChartStyles", {
+    enumerable: true,
+    get: function() {
+        return useAnnotationOnlyChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useAnnotationOnlyChartStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        qhf8xq: "f10pi13n",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        Belr9w4: "fn67r4l",
+        De3pzq: "fxugw4r",
+        sj55zd: "f19n0e5",
+        Bahqtrf: "fk6fouc"
+    },
+    content: {
+        qhf8xq: "f10pi13n",
+        Bh6795r: "fqerorx",
+        De3pzq: "f3rmtva",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        B7ck84d: "f1ewtqcl"
+    },
+    title: {
+        fsow6f: "f17mccla"
+    }
+}, {
+    d: [
+        ".f10pi13n{position:relative;}",
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".fn67r4l{row-gap:8px;}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fqerorx{flex-grow:1;}",
+        ".f3rmtva{background-color:transparent;}",
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f17mccla{text-align:center;}"
+    ]
+});

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAnnotationOnlyChartStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const useAnnotationOnlyChartStyles = makeStyles({\n    root: {\n        position: 'relative',\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: '8px',\n        backgroundColor: tokens.colorNeutralBackground1,\n        color: tokens.colorNeutralForeground1,\n        fontFamily: typographyStyles.body1.fontFamily\n    },\n    content: {\n        position: 'relative',\n        flexGrow: 1,\n        backgroundColor: 'transparent',\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box'\n    },\n    title: {\n        textAlign: 'center'\n    }\n});\n"],"names":["__styles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","qhf8xq","mc9l5x","Beiy3e4","Belr9w4","De3pzq","sj55zd","Bahqtrf","content","Bh6795r","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","title","fsow6f","d","p"],"mappings":";;;;+BAEaG,4BAA4B;;;;;;uBAFd,gBAAgB;AAEpC,qCAAkC,WAAA,OAAGH,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAAP,MAAA,EAAA;QAAAQ,OAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAoB3C,CAAC"}

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAnnotationOnlyChartStyles", {
+    enumerable: true,
+    get: function() {
+        return useAnnotationOnlyChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const useAnnotationOnlyChartStyles = (0, _react.makeStyles)({
+    root: {
+        position: 'relative',
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '8px',
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        fontFamily: _reacttheme.typographyStyles.body1.fontFamily
+    },
+    content: {
+        position: 'relative',
+        flexGrow: 1,
+        backgroundColor: 'transparent',
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        boxSizing: 'border-box'
+    },
+    title: {
+        textAlign: 'center'
+    }
+});

package/lib-commonjs/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AnnotationOnlyChart/useAnnotationOnlyChartStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const useAnnotationOnlyChartStyles = makeStyles({\n  root: {\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: '8px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    fontFamily: typographyStyles.body1.fontFamily,\n  },\n  content: {\n    position: 'relative',\n    flexGrow: 1,\n    backgroundColor: 'transparent',\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n  },\n  title: {\n    textAlign: 'center',\n  },\n});\n"],"names":["makeStyles","tokens","typographyStyles","useAnnotationOnlyChartStyles","root","position","display","flexDirection","rowGap","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","fontFamily","body1","content","flexGrow","borderRadius","borderRadiusMedium","boxSizing","title","textAlign"],"mappings":";;;;+BAGaG;;;;;;uBAHc,iBAAiB;4BACH,wBAAwB;AAE1D,yCAAqCH,iBAAAA,EAAW;IACrDI,MAAM;QACJC,UAAU;QACVC,SAAS;QACTC,eAAe;QACfC,QAAQ;QACRC,iBAAiBR,kBAAAA,CAAOS,uBAAuB;QAC/CC,OAAOV,kBAAAA,CAAOW,uBAAuB;QACrCC,YAAYX,4BAAAA,CAAiBY,KAAK,CAACD,UAAU;IAC/C;IACAE,SAAS;QACPV,UAAU;QACVW,UAAU;QACVP,iBAAiB;QACjBQ,cAAchB,kBAAAA,CAAOiB,kBAAkB;QACvCC,WAAW;IACb;IACAC,OAAO;QACLC,WAAW;IACb;AACF,GAAG"}

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

@@ -20,8 +20,8 @@ const _index = require("../../index");
 const _index1 = require("../../utilities/index");
 const _reactutilities = require("@fluentui/react-utilities");
 const _index2 = require("../Legends/index");
-const _imageexportutils = require("../../utilities/image-export-utils");
 const _chartutilities = require("@fluentui/chart-utilities");
+const _hooks = require("../../utilities/hooks");
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = (0, _d3array.bisector)((d)=>d.x).left;
 var InterceptVisibility = /*#__PURE__*/ function(InterceptVisibility) {
@@ -57,9 +57,7 @@ const AreaChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     let _xAxisRectScale;
     // determines if the given area chart has multiple stacked bar charts
     let _isMultiStackChart;
-    const cartesianChartRef = _react.useRef(null);
-    const _legendsRef = _react.useRef(null);
-    const _isRTL = (0, _index1.useRtl)();
+    const { cartesianChartRef, legendsRef: _legendsRef } = (0, _hooks.useImageExport)(props.componentRef, props.hideLegend);
     const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
     const [activeLegend, setActiveLegend] = _react.useState(undefined);
     const [hoverXValue, setHoverXValue] = _react.useState('');
@@ -92,17 +90,6 @@ const AreaChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
     }, [
         props
     ]);
-    _react.useImperativeHandle(props.componentRef, ()=>{
-        var _cartesianChartRef_current;
-        var _cartesianChartRef_current_chartContainer;
-        return {
-            chartContainer: (_cartesianChartRef_current_chartContainer = (_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer) !== null && _cartesianChartRef_current_chartContainer !== void 0 ? _cartesianChartRef_current_chartContainer : null,
-            toImage: (opts)=>{
-                var _cartesianChartRef_current, _legendsRef_current;
-                return (0, _imageexportutils.toImage)((_cartesianChartRef_current = cartesianChartRef.current) === null || _cartesianChartRef_current === void 0 ? void 0 : _cartesianChartRef_current.chartContainer, (_legendsRef_current = _legendsRef.current) === null || _legendsRef_current === void 0 ? void 0 : _legendsRef_current.toSVG, _isRTL, opts);
-            }
-        };
-    }, []);
     const classes = (0, _useAreaChartStylesstyles.useAreaChartStyles)(props);
     function _getMinMaxOfYAxis(points, yAxisType, useSecondaryYScale) {
         return (0, _index1.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale);