@fluentui/react-charting 5.25.1 → 5.25.3

package/lib-amd/AnnotationOnlyChart.d.ts

@@ -0,0 +1 @@
+export * from './components/AnnotationOnlyChart/index';

package/lib-amd/AnnotationOnlyChart.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/AnnotationOnlyChart/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=AnnotationOnlyChart.js.map

package/lib-amd/AnnotationOnlyChart.js.map

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

package/lib-amd/components/AnnotationOnlyChart/AnnotationOnlyChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IAnnotationOnlyChartProps } from './AnnotationOnlyChart.types';
+export declare const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps>;

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

@@ -0,0 +1,159 @@
+define(["require", "exports", "react", "@fluentui/react", "@fluentui/react/lib/Styling", "../CommonComponents/Annotations/ChartAnnotationLayer", "../../utilities/image-export-utils"], function (require, exports, React, react_1, Styling_1, ChartAnnotationLayer_1, image_export_utils_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AnnotationOnlyChart = void 0;
+    var DEFAULT_HEIGHT = 650;
+    var FALLBACK_WIDTH = 400;
+    var buildPadding = function (margin) {
+        var _a, _b, _c, _d;
+        if (!margin) {
+            return undefined;
+        }
+        var top = (_a = margin.t) !== null && _a !== void 0 ? _a : 0;
+        var right = (_b = margin.r) !== null && _b !== void 0 ? _b : 0;
+        var bottom = (_c = margin.b) !== null && _c !== void 0 ? _c : 0;
+        var left = (_d = margin.l) !== null && _d !== void 0 ? _d : 0;
+        if (top === 0 && right === 0 && bottom === 0 && left === 0) {
+            return undefined;
+        }
+        return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
+    };
+    var AnnotationOnlyChart = function (props) {
+        var annotations = props.annotations, chartTitle = props.chartTitle, description = props.description, width = props.width, height = props.height, paperBackgroundColor = props.paperBackgroundColor, plotBackgroundColor = props.plotBackgroundColor, fontColor = props.fontColor, fontFamily = props.fontFamily, margin = props.margin, componentRef = props.componentRef;
+        var theme = (0, react_1.useTheme)();
+        var containerRef = React.useRef(null);
+        var contentRef = React.useRef(null);
+        var _a = React.useState(width !== null && width !== void 0 ? width : 0), measuredWidth = _a[0], setMeasuredWidth = _a[1];
+        var _b = React.useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT), contentHeight = _b[0], setContentHeight = _b[1];
+        React.useEffect(function () {
+            if (typeof width === 'number' && width > 0) {
+                setMeasuredWidth(width);
+                return;
+            }
+            var node = containerRef.current;
+            if (!node || typeof ResizeObserver === 'undefined') {
+                var rect_1 = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+                if (rect_1 && rect_1.width > 0) {
+                    setMeasuredWidth(rect_1.width);
+                }
+                else {
+                    setMeasuredWidth(function (prev) { return (prev > 0 ? prev : FALLBACK_WIDTH); });
+                }
+                return;
+            }
+            var observer = new ResizeObserver(function (entries) {
+                var entry = entries[0];
+                if (!entry) {
+                    return;
+                }
+                var newWidth = entry.contentRect.width;
+                if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {
+                    setMeasuredWidth(newWidth);
+                }
+            });
+            var rect = node.getBoundingClientRect();
+            if (rect.width > 0) {
+                setMeasuredWidth(rect.width);
+            }
+            observer.observe(node);
+            return function () { return observer.disconnect(); };
+        }, [width, measuredWidth]);
+        var resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);
+        var resolvedHeight = Math.max(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT, 1);
+        React.useEffect(function () {
+            var node = contentRef.current;
+            if (!node) {
+                setContentHeight(function (prev) { return (prev > 0 ? prev : resolvedHeight); });
+                return;
+            }
+            if (typeof ResizeObserver === 'undefined') {
+                var rect_2 = node.getBoundingClientRect();
+                setContentHeight(function (prev) { return (rect_2.height > 0 ? rect_2.height : prev > 0 ? prev : resolvedHeight); });
+                return;
+            }
+            var observer = new ResizeObserver(function (entries) {
+                var entry = entries[0];
+                if (!entry) {
+                    return;
+                }
+                var newHeight = entry.contentRect.height;
+                if (newHeight > 0) {
+                    setContentHeight(function (prev) { return (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev); });
+                }
+            });
+            var rect = node.getBoundingClientRect();
+            setContentHeight(function (prev) { return (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight); });
+            observer.observe(node);
+            return function () { return observer.disconnect(); };
+        }, [
+            resolvedHeight,
+            resolvedWidth,
+            annotations,
+            chartTitle,
+            description,
+            margin,
+            plotBackgroundColor,
+            paperBackgroundColor,
+            fontColor,
+            fontFamily,
+            theme,
+        ]);
+        var svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);
+        var context = {
+            plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },
+            svgRect: { width: resolvedWidth, height: resolvedHeight },
+            isRtl: theme === null || theme === void 0 ? void 0 : theme.rtl,
+        };
+        var padding = buildPadding(margin);
+        var rootClassName = React.useMemo(function () {
+            return (0, Styling_1.mergeStyles)({
+                position: 'relative',
+                width: width ? "".concat(width, "px") : '100%',
+                minHeight: resolvedHeight,
+                backgroundColor: paperBackgroundColor !== null && paperBackgroundColor !== void 0 ? paperBackgroundColor : theme.semanticColors.bodyBackground,
+                color: fontColor !== null && fontColor !== void 0 ? fontColor : theme.semanticColors.bodyText,
+                fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : theme.fonts.medium.fontFamily,
+                padding: padding,
+                display: 'flex',
+                flexDirection: 'column',
+                rowGap: '8px',
+            });
+        }, [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, theme, width]);
+        var contentClassName = React.useMemo(function () {
+            var _a;
+            return (0, Styling_1.mergeStyles)({
+                position: 'relative',
+                flexGrow: 1,
+                backgroundColor: plotBackgroundColor !== null && plotBackgroundColor !== void 0 ? plotBackgroundColor : 'transparent',
+                borderRadius: (_a = theme.effects.roundedCorner2) !== null && _a !== void 0 ? _a : 4,
+                boxSizing: 'border-box',
+            });
+        }, [plotBackgroundColor, theme.effects.roundedCorner2]);
+        var titleClassName = React.useMemo(function () {
+            return (0, Styling_1.mergeStyles)({
+                textAlign: 'center',
+            });
+        }, []);
+        var resolvedAnnotations = annotations !== null && annotations !== void 0 ? annotations : [];
+        var hasAnnotations = resolvedAnnotations.length > 0;
+        var ariaLabel = hasAnnotations ? description !== null && description !== void 0 ? description : chartTitle : undefined;
+        React.useImperativeHandle(componentRef, function () {
+            var chartHandle = {
+                chartContainer: containerRef.current,
+                toImage: function (opts) {
+                    return (0, image_export_utils_1.exportChartsAsImage)([{ container: containerRef.current }], undefined, (0, react_1.getRTL)(), opts);
+                },
+            };
+            return chartHandle;
+        }, []);
+        return (React.createElement("div", { ref: containerRef, "data-chart-annotation-container": "true" },
+            React.createElement("svg", { width: resolvedWidth, height: svgHeight, viewBox: "0 0 ".concat(resolvedWidth, " ").concat(svgHeight), style: { width: width ? "".concat(width, "px") : '100%', height: "".concat(svgHeight, "px"), display: 'block' }, role: ariaLabel ? 'img' : undefined, "aria-label": ariaLabel },
+                React.createElement("foreignObject", { x: 0, y: 0, width: resolvedWidth, height: svgHeight },
+                    React.createElement("div", { ref: contentRef, className: rootClassName, "data-chart-annotation-only": "true", "aria-label": ariaLabel },
+                        chartTitle && (React.createElement("span", { className: titleClassName, "aria-hidden": "true" }, chartTitle)),
+                        React.createElement("div", { className: contentClassName, role: "presentation" }, hasAnnotations ? (React.createElement(ChartAnnotationLayer_1.ChartAnnotationLayer, { annotations: resolvedAnnotations, context: context, theme: theme })) : null))))));
+    };
+    exports.AnnotationOnlyChart = AnnotationOnlyChart;
+    exports.AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';
+});
+//# sourceMappingURL=AnnotationOnlyChart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationOnlyChart.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getRTL, useTheme } from '@fluentui/react';\nimport { mergeStyles } from '@fluentui/react/lib/Styling';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport type { IAnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { IChart, IImageExportOptions } from '../../types/index';\nimport type { IChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: IAnnotationOnlyChartProps['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<IAnnotationOnlyChartProps> = 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 theme = useTheme();\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\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    theme,\n  ]);\n\n  const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);\n\n  const context: IChartAnnotationContext = {\n    plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n    svgRect: { width: resolvedWidth, height: resolvedHeight },\n    isRtl: theme?.rtl,\n  };\n\n  const padding = buildPadding(margin);\n\n  const rootClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        position: 'relative',\n        width: width ? `${width}px` : '100%',\n        minHeight: resolvedHeight,\n        backgroundColor: paperBackgroundColor ?? theme.semanticColors.bodyBackground,\n        color: fontColor ?? theme.semanticColors.bodyText,\n        fontFamily: fontFamily ?? theme.fonts.medium.fontFamily,\n        padding,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: '8px',\n      }),\n    [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, theme, width],\n  );\n\n  const contentClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        position: 'relative',\n        flexGrow: 1,\n        backgroundColor: plotBackgroundColor ?? 'transparent',\n        borderRadius: theme.effects.roundedCorner2 ?? 4,\n        boxSizing: 'border-box',\n      }),\n    [plotBackgroundColor, theme.effects.roundedCorner2],\n  );\n\n  const titleClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        textAlign: 'center',\n      }),\n    [],\n  );\n\n  const resolvedAnnotations = annotations ?? [];\n  const hasAnnotations = resolvedAnnotations.length > 0;\n  const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n  React.useImperativeHandle(\n    componentRef,\n    () => {\n      const chartHandle: IChart = {\n        chartContainer: containerRef.current,\n        toImage: (opts?: IImageExportOptions) => {\n          return exportChartsAsImage([{ container: containerRef.current }], undefined, getRTL(), opts);\n        },\n      };\n\n      return chartHandle;\n    },\n    [],\n  );\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 ref={contentRef} className={rootClassName} data-chart-annotation-only=\"true\" aria-label={ariaLabel}>\n            {chartTitle && (\n              <span className={titleClassName} aria-hidden=\"true\">\n                {chartTitle}\n              </span>\n            )}\n            <div className={contentClassName} role=\"presentation\">\n              {hasAnnotations ? (\n                <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} theme={theme} />\n              ) : null}\n            </div>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"]}

package/lib-amd/components/AnnotationOnlyChart/AnnotationOnlyChart.types.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { IChartAnnotation } from '../../types/IChartAnnotation';
+import type { IChart } from '../../types/index';
+import type { Margin } from '@fluentui/chart-utilities';
+/**
+ * Props for the annotation-only chart renderer.
+ */
+export interface IAnnotationOnlyChartProps {
+    /**
+     * Collection of annotations to render.
+     */
+    annotations: IChartAnnotation[];
+    /** Optional layout title extracted from the Plotly schema. */
+    chartTitle?: string;
+    /** Optional descriptive text for accessibility. */
+    description?: string;
+    /** Desired width in pixels (if absent the chart will grow to fit the container). */
+    width?: number;
+    /** Desired height in pixels. */
+    height?: number;
+    /** Paper/background colour specified in the Plotly layout. */
+    paperBackgroundColor?: string;
+    /** Plot area background colour specified in the Plotly layout. */
+    plotBackgroundColor?: string;
+    /** Global layout font colour. */
+    fontColor?: string;
+    /** Global layout font family. */
+    fontFamily?: string;
+    /** Layout margin converted to padding for the outer wrapper. */
+    margin?: Partial<Margin>;
+    /** Component ref propagated by the DeclarativeChart surface. */
+    componentRef?: React.RefObject<IChart>;
+}

package/lib-amd/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=AnnotationOnlyChart.types.js.map

package/lib-amd/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationOnlyChart.types.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/AnnotationOnlyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IChartAnnotation } from '../../types/IChartAnnotation';\nimport type { IChart } from '../../types/index';\nimport type { Margin } from '@fluentui/chart-utilities';\n\n/**\n * Props for the annotation-only chart renderer.\n */\nexport interface IAnnotationOnlyChartProps {\n  /**\n   * Collection of annotations to render.\n   */\n  annotations: IChartAnnotation[];\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.RefObject<IChart>;\n}\n"]}

package/lib-amd/components/AnnotationOnlyChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnnotationOnlyChart';
+export * from './AnnotationOnlyChart.types';

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

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./AnnotationOnlyChart", "./AnnotationOnlyChart.types"], function (require, exports, tslib_1, AnnotationOnlyChart_1, AnnotationOnlyChart_types_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(AnnotationOnlyChart_1, exports);
+    tslib_1.__exportStar(AnnotationOnlyChart_types_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/index.ts"],"names":[],"mappings":";;;IAAA,qDAAsC;IACtC,2DAA4C","sourcesContent":["export * from './AnnotationOnlyChart';\nexport * from './AnnotationOnlyChart.types';\n"]}

package/lib-amd/components/AreaChart/AreaChart.base.js

@@ -21,7 +21,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
             _this._hasMissingXValues = false;
             _this.toImage = function (opts) {
                 var _a, _b;
-                return (0, image_export_utils_1.toImage)((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, (0, Utilities_1.getRTL)(), opts);
+                return (0, image_export_utils_1.exportChartsAsImage)([{ container: (_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer }], _this.props.hideLegend ? undefined : (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, (0, Utilities_1.getRTL)(), opts);
             };
             _this._getMinMaxOfYAxis = function (points, yAxisType, useSecondaryYScale) {
                 return (0, index_2.findNumericMinMaxOfY)(points, yAxisType, useSecondaryYScale);