@fluentui/react-charting 5.25.1 → 5.25.3

package/lib-commonjs/AnnotationOnlyChart.d.ts

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

package/lib-commonjs/AnnotationOnlyChart.js

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

package/lib-commonjs/AnnotationOnlyChart.js.map

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

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

@@ -0,0 +1,162 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnnotationOnlyChart = void 0;
+var React = require("react");
+var react_1 = require("@fluentui/react");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var ChartAnnotationLayer_1 = require("../CommonComponents/Annotations/ChartAnnotationLayer");
+var image_export_utils_1 = require("../../utilities/image-export-utils");
+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-commonjs/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-commonjs/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-commonjs/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js

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

package/lib-commonjs/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-commonjs/components/AnnotationOnlyChart/index.d.ts

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

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

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

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

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

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

@@ -34,7 +34,7 @@ var AreaChartBase = /** @class */ (function (_super) {
         _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);