@fluentui/react-charting 5.23.59 → 5.23.60

package/lib-commonjs/utilities/image-export-utils.d.ts

@@ -0,0 +1,13 @@
+import { IImageExportOptions } from '../types/index';
+import { ILegend, ILegendContainer } from '../Legends';
+export declare function toImage(chartContainer: HTMLElement | null | undefined, legendsToSvgCallback?: ILegendContainer['toSVG'], isRTL?: boolean, opts?: IImageExportOptions): Promise<string>;
+export declare function cloneLegendsToSVG(legends: ILegend[], svgWidth: number, config: {
+    selectedLegends: Record<string, boolean>;
+    centerLegends: boolean;
+    textClassName: string;
+    isRTL: boolean;
+}, legendContainer?: HTMLElement | null): {
+    node: SVGGElement | null;
+    width: number;
+    height: number;
+};

package/lib-commonjs/{components/DeclarativeChart/imageExporter.js → utilities/image-export-utils.js}

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toImage = void 0;
+exports.cloneLegendsToSVG = exports.toImage = void 0;
 var tslib_1 = require("tslib");
 var d3_selection_1 = require("d3-selection");
-var index_1 = require("../../utilities/index");
-function toImage(chartContainer, opts) {
+var index_1 = require("./index");
+var Legends_styles_1 = require("../components/Legends/Legends.styles");
+function toImage(chartContainer, legendsToSvgCallback, isRTL, opts) {
+    if (isRTL === void 0) { isRTL = false; }
     if (opts === void 0) { opts = {}; }
     return new Promise(function (resolve, reject) {
         if (!chartContainer) {
@@ -12,7 +14,7 @@ function toImage(chartContainer, opts) {
         }
         try {
             var background = typeof opts.background === 'string' ? (0, index_1.resolveCSSVariables)(chartContainer, opts.background) : 'transparent';
-            var svg = toSVG(chartContainer, background);
+            var svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);
             var svgData = new XMLSerializer().serializeToString(svg.node);
             var svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));
             svgToPng(svgDataUrl, {
@@ -31,7 +33,7 @@ function toImage(chartContainer, opts) {
 exports.toImage = toImage;
 var SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];
 var SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];
-function toSVG(chartContainer, background) {
+function toSVG(chartContainer, legendsToSvgCallback, isRTL, background) {
     var svg = chartContainer.querySelector('svg');
     if (!svg) {
         throw new Error('SVG not found');
@@ -44,17 +46,20 @@ function toSVG(chartContainer, background) {
     var clonedSvgElements = clonedSvg.node().getElementsByTagName('*');
     for (var i = 0; i < svgElements.length; i++) {
         if (svgElements[i].tagName.toLowerCase() === 'text') {
-            copyStyle(tslib_1.__spreadArray(tslib_1.__spreadArray([], SVG_STYLE_PROPERTIES, true), SVG_TEXT_STYLE_PROPERTIES, true), svgElements[i], clonedSvgElements[i]);
+            (0, index_1.copyStyle)(tslib_1.__spreadArray(tslib_1.__spreadArray([], SVG_STYLE_PROPERTIES, true), SVG_TEXT_STYLE_PROPERTIES, true), svgElements[i], clonedSvgElements[i]);
         }
         else {
-            copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);
+            (0, index_1.copyStyle)(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);
         }
     }
     var _a = svg.getBoundingClientRect(), svgWidth = _a.width, svgHeight = _a.height;
-    var legendGroup = cloneLegendsToSVG(chartContainer, svgWidth, svgHeight);
+    var legendGroup = typeof legendsToSvgCallback === 'function'
+        ? legendsToSvgCallback(svgWidth, isRTL)
+        : { node: null, width: 0, height: 0 };
     var w1 = Math.max(svgWidth, legendGroup.width);
     var h1 = svgHeight + legendGroup.height;
     if (legendGroup.node) {
+        (0, d3_selection_1.select)(legendGroup.node).attr('transform', "translate(0, ".concat(svgHeight, ")"));
         clonedSvg.append(function () { return legendGroup.node; });
     }
     clonedSvg
@@ -64,91 +69,102 @@ function toSVG(chartContainer, background) {
         .attr('width', w1)
         .attr('height', h1)
         .attr('fill', background);
-    clonedSvg.attr('width', w1).attr('height', h1).attr('viewBox', "0 0 ".concat(w1, " ").concat(h1));
+    clonedSvg
+        .attr('width', w1)
+        .attr('height', h1)
+        .attr('viewBox', "0 0 ".concat(w1, " ").concat(h1))
+        .attr('direction', isRTL ? 'rtl' : 'ltr');
     return {
         node: clonedSvg.node(),
         width: w1,
         height: h1,
     };
 }
-var LEGEND_RECT_STYLE_PROPERTIES_MAP = {
-    'background-color': 'fill',
-    'border-color': 'stroke',
-};
 var LEGEND_TEXT_STYLE_PROPERTIES_MAP = {
     color: 'fill',
     'font-family': 'font-family',
     'font-size': 'font-size',
     'font-weight': 'font-weight',
-    opacity: 'opacity',
 };
-function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight) {
-    var legendButtons = chartContainer.querySelectorAll("\n    button[class^=\"legend-\"],\n    [class^=\"legendContainer-\"] div[class^=\"overflowIndicationTextStyle-\"],\n    [class^=\"legendsContainer-\"] div[class^=\"overflowIndicationTextStyle-\"]\n  ");
-    if (legendButtons.length === 0) {
+function cloneLegendsToSVG(legends, svgWidth, config, legendContainer) {
+    if (legends.length === 0) {
         return {
             node: null,
             width: 0,
             height: 0,
         };
     }
+    var selectedLegends = config.selectedLegends, centerLegends = config.centerLegends, textClassName = config.textClassName, isRTL = config.isRTL;
     var legendGroup = (0, d3_selection_1.create)('svg:g');
-    var legendX = 0;
-    var legendY = 8;
+    var legendX = centerLegends ? 0 : Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+    var legendY = Legends_styles_1.LEGEND_CONTAINER_MARGIN_TOP;
     var legendLine = [];
     var legendLines = [];
     var legendLineWidths = [];
+    var noLegendsSelected = Object.keys(selectedLegends).length === 0;
     var _loop_1 = function (i) {
-        var legendWidth = legendButtons[i].getBoundingClientRect().width;
+        var textOffset = Legends_styles_1.LEGEND_PADDING + Legends_styles_1.LEGEND_SHAPE_SIZE + Legends_styles_1.LEGEND_SHAPE_MARGIN_END;
+        var legendText = (0, index_1.createMeasurementSpan)(legends[i].title, textClassName, legendContainer);
+        var legendWidth = textOffset + legendText.getBoundingClientRect().width + Legends_styles_1.LEGEND_PADDING;
         var legendItem = legendGroup.append('g');
-        legendLine.push(legendItem);
+        legendLine.push({ elem: legendItem, width: legendWidth });
         if (legendX + legendWidth > svgWidth && legendLine.length > 1) {
             legendLine.pop();
             legendLines.push(legendLine);
             legendLineWidths.push(legendX);
-            legendLine = [legendItem];
-            legendX = 0;
-            legendY += 32;
-        }
-        var legendText;
-        var textOffset = 0;
-        if (legendButtons[i].tagName.toLowerCase() === 'button') {
-            var legendRect_1 = legendButtons[i].querySelector('[class^="rect"]');
-            legendText = legendButtons[i].querySelector('[class^="text"]');
-            legendItem
-                .append('rect')
-                .attr('x', legendX + 8)
-                .attr('y', svgHeight + legendY + 8)
-                .attr('width', 12)
-                .attr('height', 12)
-                .attr('stroke-width', 1)
-                .call(function (selection) { return copyStyle(LEGEND_RECT_STYLE_PROPERTIES_MAP, legendRect_1, selection.node()); });
-            textOffset = 28;
-        }
-        else {
-            legendText = legendButtons[i];
-            textOffset = 8;
+            legendLine = [{ elem: legendItem, width: legendWidth }];
+            legendX = centerLegends ? 0 : Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+            legendY += Legends_styles_1.LEGEND_HEIGHT;
         }
+        var isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;
+        legendItem
+            .append('rect')
+            .attr('x', legendX + (isRTL ? legendWidth - Legends_styles_1.LEGEND_PADDING - Legends_styles_1.LEGEND_SHAPE_SIZE : Legends_styles_1.LEGEND_PADDING))
+            .attr('y', legendY + Legends_styles_1.LEGEND_PADDING)
+            .attr('width', Legends_styles_1.LEGEND_SHAPE_SIZE)
+            .attr('height', Legends_styles_1.LEGEND_SHAPE_SIZE)
+            .style('fill', isLegendActive ? legends[i].color : 'transparent')
+            .style('stroke-width', Legends_styles_1.LEGEND_SHAPE_BORDER)
+            .style('stroke', legends[i].color);
         legendItem
             .append('text')
-            .attr('x', legendX + textOffset)
-            .attr('y', svgHeight + legendY + 8)
+            .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))
+            .attr('y', legendY + Legends_styles_1.LEGEND_PADDING)
             .attr('dominant-baseline', 'hanging')
-            .text(legendText.textContent)
-            .call(function (selection) { return copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()); });
+            .style('opacity', isLegendActive ? 1 : Legends_styles_1.INACTIVE_LEGEND_TEXT_OPACITY)
+            .text(legends[i].title)
+            .call(function (selection) { return (0, index_1.copyStyle)(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()); });
         legendX += legendWidth;
     };
-    for (var i = 0; i < legendButtons.length; i++) {
+    for (var i = 0; i < legends.length; i++) {
         _loop_1(i);
     }
     legendLines.push(legendLine);
     legendLineWidths.push(legendX);
-    legendY += 32;
-    var centerLegends = true;
+    legendY += Legends_styles_1.LEGEND_HEIGHT;
     if (centerLegends) {
         legendLines.forEach(function (ln, idx) {
-            var offsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
+            var lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);
+            var remLineWidth = legendLineWidths[idx];
+            var itemOffsetX = 0;
             ln.forEach(function (item) {
-                item.attr('transform', "translate(".concat(offsetX, ", 0)"));
+                var newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);
+                item.elem.attr('transform', "translate(".concat(newOffsetX, ", 0)"));
+                remLineWidth -= item.width;
+                itemOffsetX += item.width;
+            });
+        });
+    }
+    else if (isRTL) {
+        var w1_1 = Math.max.apply(Math, tslib_1.__spreadArray([svgWidth], legendLineWidths, false));
+        legendLines.forEach(function (ln) {
+            var remLineWidth = w1_1 - Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+            var itemOffsetX = Legends_styles_1.LEGEND_CONTAINER_MARGIN_START;
+            ln.forEach(function (item) {
+                var newOffsetX = remLineWidth - item.width - itemOffsetX;
+                item.elem.attr('transform', "translate(".concat(newOffsetX, ", 0)"));
+                remLineWidth -= item.width;
+                itemOffsetX += item.width;
             });
         });
     }
@@ -158,6 +174,7 @@ function cloneLegendsToSVG(chartContainer, svgWidth, svgHeight) {
         height: legendY,
     };
 }
+exports.cloneLegendsToSVG = cloneLegendsToSVG;
 function svgToPng(svgDataUrl, opts) {
     if (opts === void 0) { opts = {}; }
     return new Promise(function (resolve, reject) {
@@ -223,18 +240,4 @@ function unescapePonyfill(str) {
     }
     return result;
 }
-function copyStyle(properties, fromEl, toEl) {
-    var styles = getComputedStyle(fromEl);
-    if (Array.isArray(properties)) {
-        properties.forEach(function (prop) {
-            (0, d3_selection_1.select)(toEl).style(prop, styles.getPropertyValue(prop));
-        });
-    }
-    else {
-        Object.entries(properties).forEach(function (_a) {
-            var fromProp = _a[0], toProp = _a[1];
-            (0, d3_selection_1.select)(toEl).style(toProp, styles.getPropertyValue(fromProp));
-        });
-    }
-}
-//# sourceMappingURL=imageExporter.js.map
+//# sourceMappingURL=image-export-utils.js.map

package/lib-commonjs/utilities/image-export-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-export-utils.js","sourceRoot":"../src/","sources":["utilities/image-export-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { create as d3Create, select as d3Select, Selection } from 'd3-selection';\nimport { copyStyle, createMeasurementSpan, resolveCSSVariables } from './index';\nimport { IImageExportOptions } from '../types/index';\nimport { ILegend, ILegendContainer } from '../Legends';\nimport {\n  LEGEND_CONTAINER_MARGIN_TOP,\n  LEGEND_CONTAINER_MARGIN_START,\n  LEGEND_PADDING,\n  LEGEND_HEIGHT,\n  LEGEND_SHAPE_BORDER,\n  LEGEND_SHAPE_SIZE,\n  LEGEND_SHAPE_MARGIN_END,\n  INACTIVE_LEGEND_TEXT_OPACITY,\n} from '../components/Legends/Legends.styles';\n\nexport function toImage(\n  chartContainer: HTMLElement | null | undefined,\n  legendsToSvgCallback?: ILegendContainer['toSVG'],\n  isRTL: boolean = false,\n  opts: IImageExportOptions = {},\n): Promise<string> {\n  return new Promise((resolve, reject) => {\n    if (!chartContainer) {\n      return reject(new Error('Chart container is not defined'));\n    }\n\n    try {\n      const background =\n        typeof opts.background === 'string' ? resolveCSSVariables(chartContainer, opts.background) : 'transparent';\n      const svg = toSVG(chartContainer, legendsToSvgCallback, isRTL, background);\n\n      const svgData = new XMLSerializer().serializeToString(svg.node);\n      const svgDataUrl = 'data:image/svg+xml;base64,' + btoa(unescapePonyfill(encodeURIComponent(svgData)));\n\n      svgToPng(svgDataUrl, {\n        width: opts.width || svg.width,\n        height: opts.height || svg.height,\n        scale: opts.scale,\n      })\n        .then(resolve)\n        .catch(reject);\n    } catch (err) {\n      return reject(err);\n    }\n  });\n}\n\nconst SVG_STYLE_PROPERTIES = ['display', 'fill', 'fill-opacity', 'opacity', 'stroke', 'stroke-width', 'transform'];\nconst SVG_TEXT_STYLE_PROPERTIES = ['font-family', 'font-size', 'font-weight', 'text-anchor'];\n\nfunction toSVG(\n  chartContainer: HTMLElement,\n  legendsToSvgCallback: ILegendContainer['toSVG'] | undefined,\n  isRTL: boolean,\n  background: string,\n) {\n  const svg = chartContainer.querySelector<SVGSVGElement>('svg');\n  if (!svg) {\n    throw new Error('SVG not found');\n  }\n\n  const clonedSvg = d3Select(svg.cloneNode(true) as SVGSVGElement)\n    .attr('width', null)\n    .attr('height', null)\n    .attr('viewBox', null);\n  const svgElements = svg.getElementsByTagName('*');\n  const clonedSvgElements = clonedSvg.node()!.getElementsByTagName('*');\n\n  for (let i = 0; i < svgElements.length; i++) {\n    if (svgElements[i].tagName.toLowerCase() === 'text') {\n      copyStyle([...SVG_STYLE_PROPERTIES, ...SVG_TEXT_STYLE_PROPERTIES], svgElements[i], clonedSvgElements[i]);\n    } else {\n      copyStyle(SVG_STYLE_PROPERTIES, svgElements[i], clonedSvgElements[i]);\n    }\n  }\n\n  const { width: svgWidth, height: svgHeight } = svg.getBoundingClientRect();\n  const legendGroup =\n    typeof legendsToSvgCallback === 'function'\n      ? legendsToSvgCallback(svgWidth, isRTL)\n      : { node: null, width: 0, height: 0 };\n  const w1 = Math.max(svgWidth, legendGroup.width);\n  const h1 = svgHeight + legendGroup.height;\n\n  if (legendGroup.node) {\n    d3Select(legendGroup.node).attr('transform', `translate(0, ${svgHeight})`);\n    clonedSvg.append(() => legendGroup.node);\n  }\n  clonedSvg\n    .insert('rect', ':first-child')\n    .attr('x', 0)\n    .attr('y', 0)\n    .attr('width', w1)\n    .attr('height', h1)\n    .attr('fill', background);\n  clonedSvg\n    .attr('width', w1)\n    .attr('height', h1)\n    .attr('viewBox', `0 0 ${w1} ${h1}`)\n    .attr('direction', isRTL ? 'rtl' : 'ltr');\n\n  return {\n    node: clonedSvg.node()!,\n    width: w1,\n    height: h1,\n  };\n}\n\nconst LEGEND_TEXT_STYLE_PROPERTIES_MAP = {\n  color: 'fill',\n  'font-family': 'font-family',\n  'font-size': 'font-size',\n  'font-weight': 'font-weight',\n};\n\nexport function cloneLegendsToSVG(\n  legends: ILegend[],\n  svgWidth: number,\n  config: {\n    selectedLegends: Record<string, boolean>;\n    centerLegends: boolean;\n    textClassName: string;\n    isRTL: boolean;\n  },\n  legendContainer?: HTMLElement | null,\n) {\n  if (legends.length === 0) {\n    return {\n      node: null,\n      width: 0,\n      height: 0,\n    };\n  }\n\n  const { selectedLegends, centerLegends, textClassName, isRTL } = config;\n  const legendGroup = d3Create<SVGGElement>('svg:g');\n  let legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n  let legendY = LEGEND_CONTAINER_MARGIN_TOP;\n  let legendLine: { elem: Selection<SVGGElement, unknown, null, undefined>; width: number }[] = [];\n  const legendLines: (typeof legendLine)[] = [];\n  const legendLineWidths: number[] = [];\n  const noLegendsSelected = Object.keys(selectedLegends).length === 0;\n\n  for (let i = 0; i < legends.length; i++) {\n    const textOffset = LEGEND_PADDING + LEGEND_SHAPE_SIZE + LEGEND_SHAPE_MARGIN_END;\n    const legendText = createMeasurementSpan(legends[i].title, textClassName, legendContainer);\n    const legendWidth = textOffset + legendText.getBoundingClientRect().width + LEGEND_PADDING;\n    const legendItem = legendGroup.append('g');\n\n    legendLine.push({ elem: legendItem, width: legendWidth });\n    if (legendX + legendWidth > svgWidth && legendLine.length > 1) {\n      legendLine.pop();\n      legendLines.push(legendLine);\n      legendLineWidths.push(legendX);\n\n      legendLine = [{ elem: legendItem, width: legendWidth }];\n      legendX = centerLegends ? 0 : LEGEND_CONTAINER_MARGIN_START;\n      legendY += LEGEND_HEIGHT;\n    }\n\n    const isLegendActive = selectedLegends[legends[i].title] || noLegendsSelected;\n\n    legendItem\n      .append('rect')\n      .attr('x', legendX + (isRTL ? legendWidth - LEGEND_PADDING - LEGEND_SHAPE_SIZE : LEGEND_PADDING))\n      .attr('y', legendY + LEGEND_PADDING)\n      .attr('width', LEGEND_SHAPE_SIZE)\n      .attr('height', LEGEND_SHAPE_SIZE)\n      .style('fill', isLegendActive ? legends[i].color : 'transparent')\n      .style('stroke-width', LEGEND_SHAPE_BORDER)\n      .style('stroke', legends[i].color);\n\n    legendItem\n      .append('text')\n      .attr('x', legendX + (isRTL ? legendWidth - textOffset : textOffset))\n      .attr('y', legendY + LEGEND_PADDING)\n      .attr('dominant-baseline', 'hanging')\n      .style('opacity', isLegendActive ? 1 : INACTIVE_LEGEND_TEXT_OPACITY)\n      .text(legends[i].title)\n      .call(selection => copyStyle(LEGEND_TEXT_STYLE_PROPERTIES_MAP, legendText, selection.node()!));\n\n    legendX += legendWidth;\n  }\n\n  legendLines.push(legendLine);\n  legendLineWidths.push(legendX);\n  legendY += LEGEND_HEIGHT;\n\n  if (centerLegends) {\n    legendLines.forEach((ln, idx) => {\n      const lineOffsetX = Math.max((svgWidth - legendLineWidths[idx]) / 2, 0);\n      let remLineWidth = legendLineWidths[idx];\n      let itemOffsetX = 0;\n      ln.forEach(item => {\n        const newOffsetX = lineOffsetX + (isRTL ? remLineWidth - item.width - itemOffsetX : 0);\n        item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n        remLineWidth -= item.width;\n        itemOffsetX += item.width;\n      });\n    });\n  } else if (isRTL) {\n    const w1 = Math.max(svgWidth, ...legendLineWidths);\n    legendLines.forEach(ln => {\n      let remLineWidth = w1 - LEGEND_CONTAINER_MARGIN_START;\n      let itemOffsetX = LEGEND_CONTAINER_MARGIN_START;\n      ln.forEach(item => {\n        const newOffsetX = remLineWidth - item.width - itemOffsetX;\n        item.elem.attr('transform', `translate(${newOffsetX}, 0)`);\n        remLineWidth -= item.width;\n        itemOffsetX += item.width;\n      });\n    });\n  }\n\n  return {\n    node: legendGroup.node(),\n    width: Math.max(...legendLineWidths),\n    height: legendY,\n  };\n}\n\nfunction svgToPng(svgDataUrl: string, opts: IImageExportOptions = {}): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const scale = opts.scale || 1;\n    const w0 = opts.width || 300;\n    const h0 = opts.height || 150;\n    const w1 = scale * w0;\n    const h1 = scale * h0;\n\n    const canvas = document.createElement('canvas');\n    const img = new Image();\n\n    canvas.width = w1;\n    canvas.height = h1;\n\n    img.onload = function () {\n      const ctx = canvas.getContext('2d');\n      if (!ctx) {\n        return reject(new Error('Canvas context is null'));\n      }\n\n      ctx.clearRect(0, 0, w1, h1);\n      ctx.drawImage(img, 0, 0, w1, h1);\n\n      const imgData = canvas.toDataURL('image/png');\n      resolve(imgData);\n    };\n\n    img.onerror = function (err) {\n      reject(err);\n    };\n\n    img.src = svgDataUrl;\n  });\n}\n\nconst hex2 = /^[\\da-f]{2}$/i;\nconst hex4 = /^[\\da-f]{4}$/i;\n\n/**\n * A ponyfill for the deprecated `unescape` method, taken from the `core-js` library.\n *\n * Source: {@link https://github.com/zloirock/core-js/blob/167136f479d3b8519953f2e4c534ecdd1031d3cf/packages/core-js/modules/es.unescape.js core-js/packages/core-js/modules/es.unescape.js}\n */\nfunction unescapePonyfill(str: string) {\n  let result = '';\n  const length = str.length;\n  let index = 0;\n  let chr;\n  let part;\n  while (index < length) {\n    chr = str.charAt(index++);\n    if (chr === '%') {\n      if (str.charAt(index) === 'u') {\n        part = str.slice(index + 1, index + 5);\n        if (hex4.exec(part)) {\n          result += String.fromCharCode(parseInt(part, 16));\n          index += 5;\n          continue;\n        }\n      } else {\n        part = str.slice(index, index + 2);\n        if (hex2.exec(part)) {\n          result += String.fromCharCode(parseInt(part, 16));\n          index += 2;\n          continue;\n        }\n      }\n    }\n    result += chr;\n  }\n  return result;\n}\n"]}

package/lib-commonjs/utilities/utilities.d.ts

@@ -413,4 +413,6 @@ export declare const formatDate: (date: Date, useUTC?: boolean) => string;
 export declare function getSecureProps(props?: Record<string, any>): Record<string, any>;
 export declare function areArraysEqual(arr1?: string[], arr2?: string[]): boolean;
 export declare function resolveCSSVariables(chartContainer: HTMLElement, styleRules: string): string;
+export declare function copyStyle(properties: string[] | Record<string, string>, fromEl: Element, toEl: Element): void;
+export declare const createMeasurementSpan: (text: string | number, className: string, parentElement?: HTMLElement | null) => HTMLElement;
 export {};

package/lib-commonjs/utilities/utilities.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueWithSIPrefix = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
+exports.createMeasurementSpan = exports.copyStyle = exports.resolveCSSVariables = exports.areArraysEqual = exports.getSecureProps = exports.formatDate = exports.isScalePaddingDefined = exports.getScalePadding = exports.getBarWidth = exports.formatValueWithSIPrefix = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.domainRageOfVerticalNumeric = exports.domainRangeOfDateForAreaLineVerticalBarChart = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.wrapContent = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxis = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createNumericYAxis = exports.createYAxisForHorizontalBarChartWithAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
 var tslib_1 = require("tslib");
 var d3_axis_1 = require("d3-axis");
 var d3_array_1 = require("d3-array");
@@ -11,6 +11,7 @@ var d3_format_1 = require("d3-format");
 var d3_time_format_1 = require("d3-time-format");
 var d3_time_1 = require("d3-time");
 var d3_format_2 = require("d3-format");
+var react_1 = require("@fluentui/react");
 var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -1220,4 +1221,49 @@ function resolveCSSVariables(chartContainer, styleRules) {
     });
 }
 exports.resolveCSSVariables = resolveCSSVariables;
+function copyStyle(properties, fromEl, toEl) {
+    var styles = getComputedStyle(fromEl);
+    if (Array.isArray(properties)) {
+        properties.forEach(function (prop) {
+            (0, d3_selection_1.select)(toEl).style(prop, styles.getPropertyValue(prop));
+        });
+    }
+    else {
+        Object.entries(properties).forEach(function (_a) {
+            var fromProp = _a[0], toProp = _a[1];
+            (0, d3_selection_1.select)(toEl).style(toProp, styles.getPropertyValue(fromProp));
+        });
+    }
+}
+exports.copyStyle = copyStyle;
+var MEASUREMENT_SPAN_STYLE = {
+    position: 'absolute',
+    visibility: 'hidden',
+    top: '-20000px',
+    left: 0,
+    padding: 0,
+    margin: 0,
+    border: 'none',
+    whiteSpace: 'pre',
+};
+var MEASUREMENT_SPAN_ID = (0, react_1.getId)('measurement_span_');
+var createMeasurementSpan = function (text, className, parentElement) {
+    var measurementSpan = document.getElementById(MEASUREMENT_SPAN_ID);
+    if (!measurementSpan) {
+        measurementSpan = document.createElement('span');
+        measurementSpan.setAttribute('id', MEASUREMENT_SPAN_ID);
+        measurementSpan.setAttribute('aria-hidden', 'true');
+        if (parentElement) {
+            parentElement.appendChild(measurementSpan);
+        }
+        else {
+            document.body.appendChild(measurementSpan);
+        }
+    }
+    measurementSpan.setAttribute('class', className);
+    Object.assign(measurementSpan.style, MEASUREMENT_SPAN_STYLE);
+    measurementSpan.textContent = "".concat(text);
+    return measurementSpan;
+};
+exports.createMeasurementSpan = createMeasurementSpan;
 //# sourceMappingURL=utilities.js.map