@fluentui/react-charting 5.16.43 → 5.16.45

package/lib-amd/components/LineChart/eventAnnotation/LabelLink.js

@@ -1,10 +1,11 @@
-define(["require", "exports", "react", "@fluentui/react", "./Textbox"], function (require, exports, React, react_1, Textbox_1) {
+define(["require", "exports", "react", "@fluentui/react", "./Textbox", "../../../utilities/colors"], function (require, exports, React, react_1, Textbox_1, colors_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.LabelLink = void 0;
     var LabelLink = function (props) {
+        var _a, _b;
         var gRef = React.useRef(null);
-        var _a = React.useState(false), showCard = _a[0], setShowCard = _a[1];
+        var _c = React.useState(false), showCard = _c[0], setShowCard = _c[1];
         var onDismiss = function () { return setShowCard(false); };
         var onClick = function () { return setShowCard(true); };
         var onRenderCell = function (i) { return React.createElement("div", { "data-is-focusable": true }, i && i()); };
@@ -22,8 +23,9 @@ define(["require", "exports", "react", "@fluentui/react", "./Textbox"], function
             }
         }
         var text;
-        var darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
-        var fill = darkThemeMq.matches ? 'rgb(255,255,255)' : props.textColor;
+        var fill = props.textColor
+            ? (0, colors_1.getColorFromToken)(props.textColor, (_a = props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
+            : (_b = props.theme) === null || _b === void 0 ? void 0 : _b.palette.black;
         if (props.labelDef.aggregatedIdx.length === 1) {
             text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;
         }

package/lib-amd/components/LineChart/eventAnnotation/LabelLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabelLink.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/LabelLink.tsx"],"names":[],"mappings":";;;;IA0BO,IAAM,SAAS,GAA6C,UAAA,KAAK;QACtE,IAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;QACvC,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA9C,QAAQ,QAAA,EAAE,WAAW,QAAyB,CAAC;QACtD,IAAM,SAAS,GAAG,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,CAAC;QAC3C,IAAM,OAAO,GAAG,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,CAAC;QACxC,IAAM,YAAY,GAAG,UAAC,CAAsC,IAAK,OAAA,kDAAwB,IAAI,IAAG,CAAC,IAAI,CAAC,EAAE,CAAO,EAA9C,CAA8C,CAAC;QAEhH,IAAI,OAAO,GAAoB,IAAI,CAAC;QACpC,IAAI,QAAQ,EAAE;YACZ,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAa,EAA/B,CAA+B,CAAC,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC;YACtG,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,OAAO,GAAG,CACR,oBAAC,eAAO,IACN,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,6CAA6C;oBAC7C,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,IAAI,EACrB,IAAI,EAAC,QAAQ;oBAEb,oBAAC,iBAAS,IAAC,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,0BAAkB,CAAC,QAAQ;wBAC3E,oBAAC,YAAI,IACH,KAAK,EAAE,KAAK;4BACZ,6CAA6C;4BAC7C,YAAY,EAAE,YAAY,GAC1B,CACQ,CACJ,CACX,CAAC;aACH;SACF;QAED,IAAI,IAAY,CAAC;QACjB,IAAM,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;QACtE,IAAM,IAAI,GAAuB,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC;QAC5F,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SAC9D;aAAM;YACL,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SAC/D;QAED,OAAO,CACL;YACE,2BAAG,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,uBAAqB,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;gBACpF,oBAAC,iBAAO,IACN,IAAI,EAAE,IAAI,EACV,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EACnB,CAAC,EAAE,KAAK,CAAC,KAAK,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,UAAU,EAAE,KAAK,CAAC,cAAc,EAChC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EACjC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAC5B,IAAI,EAAE,IAAI,GACV,CACA;YACH,OAAO,CACP,CACJ,CAAC;IACJ,CAAC,CAAC;IAzDW,QAAA,SAAS,aAyDpB","sourcesContent":["import * as React from 'react';\nimport { Callout, FocusZone, FocusZoneDirection, List } from '@fluentui/react';\nimport { IEventAnnotation } from '../../../types/IEventAnnotation';\nimport { Textbox } from './Textbox';\n\nexport interface ILineDef extends IEventAnnotation {\n  x: number;\n}\n\nexport interface ILabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface ILabelLinkProps {\n  lineDefs: ILineDef[];\n  labelDef: ILabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<ILabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onDismiss = () => setShowCard(false);\n  const onClick = () => setShowCard(true);\n  const onRenderCell = (i: (() => React.ReactNode) | undefined) => <div data-is-focusable={true}>{i && i()}</div>;\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = (\n        <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      );\n    }\n  }\n\n  let text: string;\n  const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');\n  const fill: string | undefined = darkThemeMq.matches ? 'rgb(255,255,255)' : props.textColor;\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }}>\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"LabelLink.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/LabelLink.tsx"],"names":[],"mappings":";;;;IA6BO,IAAM,SAAS,GAA6C,UAAA,KAAK;;QACtE,IAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;QACvC,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA9C,QAAQ,QAAA,EAAE,WAAW,QAAyB,CAAC;QACtD,IAAM,SAAS,GAAG,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,CAAC;QAC3C,IAAM,OAAO,GAAG,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,CAAC;QACxC,IAAM,YAAY,GAAG,UAAC,CAAsC,IAAK,OAAA,kDAAwB,IAAI,IAAG,CAAC,IAAI,CAAC,EAAE,CAAO,EAA9C,CAA8C,CAAC;QAEhH,IAAI,OAAO,GAAoB,IAAI,CAAC;QACpC,IAAI,QAAQ,EAAE;YACZ,IAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAa,EAA/B,CAA+B,CAAC,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC;YACtG,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBACpB,OAAO,GAAG,CACR,oBAAC,eAAO,IACN,MAAM,EAAE,IAAI,CAAC,OAAO;oBACpB,6CAA6C;oBAC7C,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,IAAI,EACrB,IAAI,EAAC,QAAQ;oBAEb,oBAAC,iBAAS,IAAC,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,0BAAkB,CAAC,QAAQ;wBAC3E,oBAAC,YAAI,IACH,KAAK,EAAE,KAAK;4BACZ,6CAA6C;4BAC7C,YAAY,EAAE,YAAY,GAC1B,CACQ,CACJ,CACX,CAAC;aACH;SACF;QAED,IAAI,IAAY,CAAC;QACjB,IAAM,IAAI,GAAuB,KAAK,CAAC,SAAS;YAC9C,CAAC,CAAC,IAAA,0BAAiB,EAAC,KAAK,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC;YAC7D,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,OAAO,CAAC,KAAK,CAAC;QAE/B,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAC7C,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;SAC9D;aAAM;YACL,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;SAC/D;QAED,OAAO,CACL;YACE,2BAAG,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,uBAAqB,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;gBACpF,oBAAC,iBAAO,IACN,IAAI,EAAE,IAAI,EACV,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,EACnB,CAAC,EAAE,KAAK,CAAC,KAAK,EACd,KAAK,EAAE,KAAK,CAAC,SAAS,EACtB,UAAU,EAAE,KAAK,CAAC,cAAc,EAChC,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,EACjC,QAAQ,EAAE,KAAK,CAAC,YAAY,EAC5B,IAAI,EAAE,IAAI,GACV,CACA;YACH,OAAO,CACP,CACJ,CAAC;IACJ,CAAC,CAAC;IA3DW,QAAA,SAAS,aA2DpB","sourcesContent":["import * as React from 'react';\nimport { Callout, FocusZone, FocusZoneDirection, List } from '@fluentui/react';\nimport { IEventAnnotation } from '../../../types/IEventAnnotation';\nimport { Textbox } from './Textbox';\nimport { ITheme } from '@fluentui/react/lib/Styling';\nimport { getColorFromToken } from '../../../utilities/colors';\n\nexport interface ILineDef extends IEventAnnotation {\n  x: number;\n}\n\nexport interface ILabelDef {\n  x: number;\n  aggregatedIdx: number[];\n  anchor: 'start' | 'end';\n}\n\ninterface ILabelLinkProps {\n  lineDefs: ILineDef[];\n  labelDef: ILabelDef;\n  textY: number;\n  textWidth: number;\n  textLineHeight: number;\n  textFontSize: string;\n  textColor: string | undefined;\n  theme: ITheme | undefined;\n  mergedLabel: (count: number) => string;\n}\n\nexport const LabelLink: React.FunctionComponent<ILabelLinkProps> = props => {\n  const gRef = React.useRef<SVGGElement>(null);\n  const [showCard, setShowCard] = React.useState(false);\n  const onDismiss = () => setShowCard(false);\n  const onClick = () => setShowCard(true);\n  const onRenderCell = (i: (() => React.ReactNode) | undefined) => <div data-is-focusable={true}>{i && i()}</div>;\n\n  let callout: React.ReactNode = null;\n  if (showCard) {\n    const cards = props.labelDef.aggregatedIdx.map(i => props.lineDefs[i].onRenderCard!).filter(c => !!c);\n    if (cards.length > 0) {\n      callout = (\n        <Callout\n          target={gRef.current}\n          // eslint-disable-next-line react/jsx-no-bind\n          onDismiss={onDismiss}\n          setInitialFocus={true}\n          role=\"dialog\"\n        >\n          <FocusZone isCircularNavigation={true} direction={FocusZoneDirection.vertical}>\n            <List<() => React.ReactNode>\n              items={cards}\n              // eslint-disable-next-line react/jsx-no-bind\n              onRenderCell={onRenderCell}\n            />\n          </FocusZone>\n        </Callout>\n      );\n    }\n  }\n\n  let text: string;\n  const fill: string | undefined = props.textColor\n    ? getColorFromToken(props.textColor, props.theme?.isInverted)\n    : props.theme?.palette.black;\n\n  if (props.labelDef.aggregatedIdx.length === 1) {\n    text = props.lineDefs[props.labelDef.aggregatedIdx[0]].event;\n  } else {\n    text = props.mergedLabel(props.labelDef.aggregatedIdx.length);\n  }\n\n  return (\n    <>\n      <g ref={gRef} onClick={onClick} data-is-focusable={false} style={{ cursor: 'pointer' }}>\n        <Textbox\n          text={text}\n          x={props.labelDef.x}\n          y={props.textY}\n          width={props.textWidth}\n          lineHeight={props.textLineHeight}\n          textAnchor={props.labelDef.anchor}\n          fontSize={props.textFontSize}\n          fill={fill}\n        />\n      </g>\n      {callout}\n    </>\n  );\n};\n"]}

package/lib-amd/index.d.ts

@@ -17,4 +17,5 @@ export * from './TreeChart';
 export * from './Sparkline';
 export * from './HorizontalBarChartWithAxis';
 export * from './utilities/colors';
+export * from './GaugeChart';
 import './version';

package/lib-amd/index.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "./Legends", "./LineChart", "./AreaChart", "./PieChart", "./StackedBarChart", "./VerticalBarChart", "./VerticalStackedBarChart", "./GroupedVerticalBarChart", "./CartesianChart", "./types/index", "./utilities/ChartHoverCard/index", "./HeatMapChart", "./SankeyChart", "./TreeChart", "./Sparkline", "./HorizontalBarChartWithAxis", "./utilities/colors", "./version"], function (require, exports, tslib_1, HorizontalBarChart_1, DonutChart_1, Legends_1, LineChart_1, AreaChart_1, PieChart_1, StackedBarChart_1, VerticalBarChart_1, VerticalStackedBarChart_1, GroupedVerticalBarChart_1, CartesianChart_1, index_1, index_2, HeatMapChart_1, SankeyChart_1, TreeChart_1, Sparkline_1, HorizontalBarChartWithAxis_1, colors_1) {
+define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "./Legends", "./LineChart", "./AreaChart", "./PieChart", "./StackedBarChart", "./VerticalBarChart", "./VerticalStackedBarChart", "./GroupedVerticalBarChart", "./CartesianChart", "./types/index", "./utilities/ChartHoverCard/index", "./HeatMapChart", "./SankeyChart", "./TreeChart", "./Sparkline", "./HorizontalBarChartWithAxis", "./utilities/colors", "./GaugeChart", "./version"], function (require, exports, tslib_1, HorizontalBarChart_1, DonutChart_1, Legends_1, LineChart_1, AreaChart_1, PieChart_1, StackedBarChart_1, VerticalBarChart_1, VerticalStackedBarChart_1, GroupedVerticalBarChart_1, CartesianChart_1, index_1, index_2, HeatMapChart_1, SankeyChart_1, TreeChart_1, Sparkline_1, HorizontalBarChartWithAxis_1, colors_1, GaugeChart_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     tslib_1.__exportStar(HorizontalBarChart_1, exports);
@@ -20,5 +20,6 @@ define(["require", "exports", "tslib", "./HorizontalBarChart", "./DonutChart", "
     tslib_1.__exportStar(Sparkline_1, exports);
     tslib_1.__exportStar(HorizontalBarChartWithAxis_1, exports);
     tslib_1.__exportStar(colors_1, exports);
+    tslib_1.__exportStar(GaugeChart_1, exports);
 });
 //# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,4CAA6B;IAC7B,yCAA0B;IAC1B,2CAA4B;IAC5B,2CAA4B;IAC5B,0CAA2B;IAC3B,iDAAkC;IAClC,kDAAmC;IACnC,yDAA0C;IAC1C,yDAA0C;IAC1C,gDAAiC;IACjC,uCAA8B;IAC9B,uCAAiD;IACjD,8CAA+B;IAC/B,6CAA8B;IAC9B,2CAA4B;IAC5B,2CAA4B;IAC5B,4DAA6C;IAC7C,wCAAmC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './TreeChart';\nexport * from './Sparkline';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './utilities/colors';\n\nimport './version';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,oDAAqC;IACrC,4CAA6B;IAC7B,yCAA0B;IAC1B,2CAA4B;IAC5B,2CAA4B;IAC5B,0CAA2B;IAC3B,iDAAkC;IAClC,kDAAmC;IACnC,yDAA0C;IAC1C,yDAA0C;IAC1C,gDAAiC;IACjC,uCAA8B;IAC9B,uCAAiD;IACjD,8CAA+B;IAC/B,6CAA8B;IAC9B,2CAA4B;IAC5B,2CAA4B;IAC5B,4DAA6C;IAC7C,wCAAmC;IACnC,4CAA6B","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './DonutChart';\nexport * from './Legends';\nexport * from './LineChart';\nexport * from './AreaChart';\nexport * from './PieChart';\nexport * from './StackedBarChart';\nexport * from './VerticalBarChart';\nexport * from './VerticalStackedBarChart';\nexport * from './GroupedVerticalBarChart';\nexport * from './CartesianChart';\nexport * from './types/index';\nexport * from './utilities/ChartHoverCard/index';\nexport * from './HeatMapChart';\nexport * from './SankeyChart';\nexport * from './TreeChart';\nexport * from './Sparkline';\nexport * from './HorizontalBarChartWithAxis';\nexport * from './utilities/colors';\nexport * from './GaugeChart';\n\nimport './version';\n"]}

package/lib-amd/utilities/SVGTooltipText.d.ts

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { ITooltipHost, ITooltipProps, TooltipDelay } from '@fluentui/react/lib/Tooltip';
+interface ISVGTooltipTextProps {
+    /**
+     * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over
+     * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the
+     * host, so that the tooltip will stay open if the user is actively interacting with it.
+     */
+    closeDelay?: number;
+    /**
+     * Content to display in the Tooltip.
+     */
+    content?: string;
+    /**
+     * Length of delay before showing the tooltip on hover.
+     * @defaultvalue TooltipDelay.medium
+     */
+    delay?: TooltipDelay;
+    /**
+     * Additional properties to pass through for Tooltip.
+     */
+    tooltipProps?: ITooltipProps;
+    /**
+     * Additional properties to pass through for SVG <text>.
+     */
+    textProps?: React.SVGAttributes<SVGTextElement>;
+    /**
+     * Max width of text
+     */
+    maxWidth?: number;
+    /**
+     * Max height of text
+     */
+    maxHeight?: number;
+    /**
+     * Function to wrap text within specified width and height
+     * and return a boolean value indicating whether the text overflowed
+     */
+    wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;
+}
+interface ISVGTooltipTextState {
+    isTooltipVisible: boolean;
+    isOverflowing: boolean;
+}
+/**
+ * Component to render an SVG text element with an optional tooltip.
+ * The tooltip appears on hovering and focusing the element when its content overflows.
+ */
+export declare class SVGTooltipText extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState> implements ITooltipHost {
+    static defaultProps: {
+        delay: TooltipDelay;
+    };
+    private static _currentVisibleTooltip;
+    /** The element that gets the hover events */
+    private _tooltipHost;
+    private _async;
+    private _dismissTimerId;
+    private _openTimerId;
+    private _tooltipHostId;
+    private _ignoreNextFocusEvent;
+    constructor(props: ISVGTooltipTextProps);
+    render(): React.ReactNode;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void;
+    componentWillUnmount(): void;
+    show: () => void;
+    dismiss: () => void;
+    private _getTargetElement;
+    private _onTooltipFocus;
+    private _onTooltipBlur;
+    private _onTooltipMouseEnter;
+    private _onTooltipMouseLeave;
+    private _onTooltipKeyDown;
+    private _clearDismissTimer;
+    private _clearOpenTimer;
+    private _hideTooltip;
+    private _toggleTooltip;
+    private _getDelayTime;
+    private _wrapContent;
+}
+export {};

package/lib-amd/utilities/SVGTooltipText.js

@@ -0,0 +1,174 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Tooltip", "../Utilities"], function (require, exports, tslib_1, React, Tooltip_1, Utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SVGTooltipText = void 0;
+    /**
+     * Component to render an SVG text element with an optional tooltip.
+     * The tooltip appears on hovering and focusing the element when its content overflows.
+     */
+    var SVGTooltipText = /** @class */ (function (_super) {
+        tslib_1.__extends(SVGTooltipText, _super);
+        function SVGTooltipText(props) {
+            var _this = _super.call(this, props) || this;
+            /** The element that gets the hover events */
+            _this._tooltipHost = React.createRef();
+            _this._tooltipHostId = (0, Utilities_1.getId)('tooltip-host');
+            _this.show = function () {
+                _this._toggleTooltip(true);
+            };
+            _this.dismiss = function () {
+                _this._hideTooltip();
+            };
+            _this._getTargetElement = function () {
+                if (!_this._tooltipHost.current) {
+                    return undefined;
+                }
+                return _this._tooltipHost.current;
+            };
+            _this._onTooltipFocus = function (ev) {
+                if (_this._ignoreNextFocusEvent) {
+                    _this._ignoreNextFocusEvent = false;
+                    return;
+                }
+                _this._onTooltipMouseEnter(ev);
+            };
+            _this._onTooltipBlur = function (ev) {
+                // The focused element gets a blur event when the document loses focus
+                // (e.g. switching tabs in the browser), but we don't want to show the
+                // tooltip again when the document gets focus back. Handle this case by
+                // checking if the blurred element is still the document's activeElement,
+                // and ignoring when it next gets focus back.
+                // See https://github.com/microsoft/fluentui/issues/13541
+                _this._ignoreNextFocusEvent = (document === null || document === void 0 ? void 0 : document.activeElement) === ev.target;
+                _this._dismissTimerId = _this._async.setTimeout(function () {
+                    _this._hideTooltip();
+                }, 0);
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._onTooltipMouseEnter = function (ev) {
+                var delay = _this.props.delay;
+                if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== _this) {
+                    SVGTooltipText._currentVisibleTooltip.dismiss();
+                }
+                SVGTooltipText._currentVisibleTooltip = _this;
+                if (!_this.state.isOverflowing) {
+                    return;
+                }
+                if (ev.target && (0, Utilities_1.portalContainsElement)(ev.target, _this._getTargetElement())) {
+                    // Do not show tooltip when target is inside a portal relative to TooltipHost.
+                    return;
+                }
+                _this._clearDismissTimer();
+                _this._clearOpenTimer();
+                if (delay !== Tooltip_1.TooltipDelay.zero) {
+                    var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`
+                    _this._openTimerId = _this._async.setTimeout(function () {
+                        _this._toggleTooltip(true);
+                    }, delayTime);
+                }
+                else {
+                    _this._toggleTooltip(true);
+                }
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._onTooltipMouseLeave = function (ev) {
+                var closeDelay = _this.props.closeDelay;
+                _this._clearDismissTimer();
+                _this._clearOpenTimer();
+                if (closeDelay) {
+                    _this._dismissTimerId = _this._async.setTimeout(function () {
+                        _this._toggleTooltip(false);
+                    }, closeDelay);
+                }
+                else {
+                    _this._toggleTooltip(false);
+                }
+                if (SVGTooltipText._currentVisibleTooltip === _this) {
+                    SVGTooltipText._currentVisibleTooltip = undefined;
+                }
+            };
+            _this._onTooltipKeyDown = function (ev) {
+                // eslint-disable-next-line deprecation/deprecation
+                if ((ev.which === Utilities_1.KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {
+                    _this._hideTooltip();
+                    ev.stopPropagation();
+                }
+            };
+            _this._clearDismissTimer = function () {
+                _this._async.clearTimeout(_this._dismissTimerId);
+            };
+            _this._clearOpenTimer = function () {
+                _this._async.clearTimeout(_this._openTimerId);
+            };
+            _this._hideTooltip = function () {
+                _this._clearOpenTimer();
+                _this._clearDismissTimer();
+                _this._toggleTooltip(false);
+            };
+            _this._toggleTooltip = function (isTooltipVisible) {
+                if (_this.state.isTooltipVisible !== isTooltipVisible) {
+                    _this.setState({ isTooltipVisible: isTooltipVisible });
+                }
+            };
+            _this._getDelayTime = function (delay) {
+                switch (delay) {
+                    case Tooltip_1.TooltipDelay.medium:
+                        return 300;
+                    case Tooltip_1.TooltipDelay.long:
+                        return 500;
+                    default:
+                        return 0;
+                }
+            };
+            _this._wrapContent = function () {
+                var _a = _this.props, content = _a.content, wrapContent = _a.wrapContent, _b = _a.maxWidth, maxWidth = _b === void 0 ? Number.POSITIVE_INFINITY : _b, maxHeight = _a.maxHeight;
+                var isOverflowing = false;
+                if (content && wrapContent && wrapContent(content, _this._tooltipHostId, maxWidth, maxHeight)) {
+                    isOverflowing = true;
+                }
+                if (_this.state.isOverflowing !== isOverflowing) {
+                    _this.setState({ isOverflowing: isOverflowing });
+                }
+            };
+            _this.state = {
+                isTooltipVisible: false,
+                isOverflowing: false,
+            };
+            _this._async = new Utilities_1.Async(_this);
+            return _this;
+        }
+        SVGTooltipText.prototype.render = function () {
+            var _a = this.props, content = _a.content, tooltipProps = _a.tooltipProps, textProps = _a.textProps;
+            var isTooltipVisible = this.state.isTooltipVisible;
+            var tooltipRenderProps = tslib_1.__assign({ content: content, targetElement: this._getTargetElement(), calloutProps: {
+                    onDismiss: this._hideTooltip,
+                    onMouseEnter: this._onTooltipMouseEnter,
+                    onMouseLeave: this._onTooltipMouseLeave,
+                }, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, tooltipProps);
+            var showTooltip = isTooltipVisible && !!content;
+            return (React.createElement(React.Fragment, null,
+                React.createElement("text", tslib_1.__assign({}, textProps, { id: this._tooltipHostId, ref: this._tooltipHost, onFocusCapture: this._onTooltipFocus, onBlurCapture: this._onTooltipBlur, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "data-is-focusable": this.state.isOverflowing }), content),
+                showTooltip && React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipRenderProps))));
+        };
+        SVGTooltipText.prototype.componentDidMount = function () {
+            this._wrapContent();
+        };
+        SVGTooltipText.prototype.componentDidUpdate = function (prevProps) {
+            if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {
+                this._wrapContent();
+            }
+        };
+        SVGTooltipText.prototype.componentWillUnmount = function () {
+            if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {
+                SVGTooltipText._currentVisibleTooltip = undefined;
+            }
+            this._async.dispose();
+        };
+        SVGTooltipText.defaultProps = {
+            delay: Tooltip_1.TooltipDelay.medium,
+        };
+        return SVGTooltipText;
+    }(React.Component));
+    exports.SVGTooltipText = SVGTooltipText;
+});
+//# sourceMappingURL=SVGTooltipText.js.map

package/lib-amd/utilities/SVGTooltipText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":";;;;IAuDA;;;OAGG;IACH;QACU,0CAA2D;QAkBnE,wBAAY,KAA2B;YAAvC,YACE,kBAAM,KAAK,CAAC,SAQb;YAlBD,6CAA6C;YACrC,kBAAY,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;YAKjD,oBAAc,GAAG,IAAA,iBAAK,EAAC,cAAc,CAAC,CAAC;YAuExC,UAAI,GAAG;gBACZ,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YAC5B,CAAC,CAAC;YAEK,aAAO,GAAG;gBACf,KAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC,CAAC;YAEM,uBAAiB,GAAG;gBAC1B,IAAI,CAAC,KAAI,CAAC,YAAY,CAAC,OAAO,EAAE;oBAC9B,OAAO,SAAS,CAAC;iBAClB;gBAED,OAAO,KAAI,CAAC,YAAY,CAAC,OAAiC,CAAC;YAC7D,CAAC,CAAC;YAEM,qBAAe,GAAG,UAAC,EAAgC;gBACzD,IAAI,KAAI,CAAC,qBAAqB,EAAE;oBAC9B,KAAI,CAAC,qBAAqB,GAAG,KAAK,CAAC;oBACnC,OAAO;iBACR;gBAED,KAAI,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC;YAChC,CAAC,CAAC;YAEM,oBAAc,GAAG,UAAC,EAAgC;gBACxD,sEAAsE;gBACtE,sEAAsE;gBACtE,uEAAuE;gBACvE,yEAAyE;gBACzE,6CAA6C;gBAC7C,yDAAyD;gBACzD,KAAI,CAAC,qBAAqB,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,aAAa,MAAK,EAAE,CAAC,MAAM,CAAC;gBAEnE,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC;oBAC5C,KAAI,CAAC,YAAY,EAAE,CAAC;gBACtB,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC,CAAC;YAEF,8DAA8D;YACtD,0BAAoB,GAAG,UAAC,EAAO;gBAC7B,IAAA,KAAK,GAAK,KAAI,CAAC,KAAK,MAAf,CAAgB;gBAE7B,IAAI,cAAc,CAAC,sBAAsB,IAAI,cAAc,CAAC,sBAAsB,KAAK,KAAI,EAAE;oBAC3F,cAAc,CAAC,sBAAsB,CAAC,OAAO,EAAE,CAAC;iBACjD;gBACD,cAAc,CAAC,sBAAsB,GAAG,KAAI,CAAC;gBAE7C,IAAI,CAAC,KAAI,CAAC,KAAK,CAAC,aAAa,EAAE;oBAC7B,OAAO;iBACR;gBAED,IAAI,EAAE,CAAC,MAAM,IAAI,IAAA,iCAAqB,EAAC,EAAE,CAAC,MAAqB,EAAE,KAAI,CAAC,iBAAiB,EAAE,CAAC,EAAE;oBAC1F,8EAA8E;oBAC9E,OAAO;iBACR;gBAED,KAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,KAAI,CAAC,eAAe,EAAE,CAAC;gBAEvB,IAAI,KAAK,KAAK,sBAAY,CAAC,IAAI,EAAE;oBAC/B,IAAM,SAAS,GAAG,KAAI,CAAC,aAAa,CAAC,KAAM,CAAC,CAAC,CAAC,yDAAyD;oBAEvG,KAAI,CAAC,YAAY,GAAG,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC;wBACzC,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC,EAAE,SAAS,CAAC,CAAC;iBACf;qBAAM;oBACL,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;iBAC3B;YACH,CAAC,CAAC;YAEF,8DAA8D;YACtD,0BAAoB,GAAG,UAAC,EAAO;gBAC7B,IAAA,UAAU,GAAK,KAAI,CAAC,KAAK,WAAf,CAAgB;gBAElC,KAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,KAAI,CAAC,eAAe,EAAE,CAAC;gBAEvB,IAAI,UAAU,EAAE;oBACd,KAAI,CAAC,eAAe,GAAG,KAAI,CAAC,MAAM,CAAC,UAAU,CAAC;wBAC5C,KAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;oBAC7B,CAAC,EAAE,UAAU,CAAC,CAAC;iBAChB;qBAAM;oBACL,KAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;iBAC5B;gBAED,IAAI,cAAc,CAAC,sBAAsB,KAAK,KAAI,EAAE;oBAClD,cAAc,CAAC,sBAAsB,GAAG,SAAS,CAAC;iBACnD;YACH,CAAC,CAAC;YAEM,uBAAiB,GAAG,UAAC,EAAmC;gBAC9D,mDAAmD;gBACnD,IAAI,CAAC,EAAE,CAAC,KAAK,KAAK,oBAAQ,CAAC,MAAM,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;oBAC/E,KAAI,CAAC,YAAY,EAAE,CAAC;oBACpB,EAAE,CAAC,eAAe,EAAE,CAAC;iBACtB;YACH,CAAC,CAAC;YAEM,wBAAkB,GAAG;gBAC3B,KAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAI,CAAC,eAAe,CAAC,CAAC;YACjD,CAAC,CAAC;YAEM,qBAAe,GAAG;gBACxB,KAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAI,CAAC,YAAY,CAAC,CAAC;YAC9C,CAAC,CAAC;YAEM,kBAAY,GAAG;gBACrB,KAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,KAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,KAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEM,oBAAc,GAAG,UAAC,gBAAyB;gBACjD,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,KAAK,gBAAgB,EAAE;oBACpD,KAAI,CAAC,QAAQ,CAAC,EAAE,gBAAgB,kBAAA,EAAE,CAAC,CAAC;iBACrC;YACH,CAAC,CAAC;YAEM,mBAAa,GAAG,UAAC,KAAmB;gBAC1C,QAAQ,KAAK,EAAE;oBACb,KAAK,sBAAY,CAAC,MAAM;wBACtB,OAAO,GAAG,CAAC;oBACb,KAAK,sBAAY,CAAC,IAAI;wBACpB,OAAO,GAAG,CAAC;oBACb;wBACE,OAAO,CAAC,CAAC;iBACZ;YACH,CAAC,CAAC;YAEM,kBAAY,GAAG;gBACf,IAAA,KAA2E,KAAI,CAAC,KAAK,EAAnF,OAAO,aAAA,EAAE,WAAW,iBAAA,EAAE,gBAAmC,EAAnC,QAAQ,mBAAG,MAAM,CAAC,iBAAiB,KAAA,EAAE,SAAS,eAAe,CAAC;gBAE5F,IAAI,aAAa,GAAG,KAAK,CAAC;gBAC1B,IAAI,OAAO,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,EAAE,KAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,SAAS,CAAC,EAAE;oBAC5F,aAAa,GAAG,IAAI,CAAC;iBACtB;gBAED,IAAI,KAAI,CAAC,KAAK,CAAC,aAAa,KAAK,aAAa,EAAE;oBAC9C,KAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,eAAA,EAAE,CAAC,CAAC;iBAClC;YACH,CAAC,CAAC;YA9MA,KAAI,CAAC,KAAK,GAAG;gBACX,gBAAgB,EAAE,KAAK;gBACvB,aAAa,EAAE,KAAK;aACrB,CAAC;YAEF,KAAI,CAAC,MAAM,GAAG,IAAI,iBAAK,CAAC,KAAI,CAAC,CAAC;;QAChC,CAAC;QAEM,+BAAM,GAAb;YACQ,IAAA,KAAuC,IAAI,CAAC,KAAK,EAA/C,OAAO,aAAA,EAAE,YAAY,kBAAA,EAAE,SAAS,eAAe,CAAC;YAChD,IAAA,gBAAgB,GAAK,IAAI,CAAC,KAAK,iBAAf,CAAgB;YAExC,IAAM,kBAAkB,sBACtB,OAAO,SAAA,EACP,aAAa,EAAE,IAAI,CAAC,iBAAiB,EAAE,EACvC,YAAY,EAAE;oBACZ,SAAS,EAAE,IAAI,CAAC,YAAY;oBAC5B,YAAY,EAAE,IAAI,CAAC,oBAAoB;oBACvC,YAAY,EAAE,IAAI,CAAC,oBAAoB;iBACxC,EACD,YAAY,EAAE,IAAI,CAAC,oBAAoB,EACvC,YAAY,EAAE,IAAI,CAAC,oBAAoB,IACpC,YAAY,CAChB,CAAC;YAEF,IAAM,WAAW,GAAG,gBAAgB,IAAI,CAAC,CAAC,OAAO,CAAC;YAElD,OAAO,CACL;gBACE,iDACM,SAAS,IACb,EAAE,EAAE,IAAI,CAAC,cAAc,EACvB,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,cAAc,EAAE,IAAI,CAAC,eAAe,EACpC,aAAa,EAAE,IAAI,CAAC,cAAc,EAClC,YAAY,EAAE,IAAI,CAAC,oBAAoB,EACvC,YAAY,EAAE,IAAI,CAAC,oBAAoB,EACvC,SAAS,EAAE,IAAI,CAAC,iBAAiB,uBACd,IAAI,CAAC,KAAK,CAAC,aAAa,KAE1C,OAAO,CACH;gBACN,WAAW,IAAI,oBAAC,iBAAO,uBAAK,kBAAkB,EAAI,CAClD,CACJ,CAAC;QACJ,CAAC;QAEM,0CAAiB,GAAxB;YACE,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;QAEM,2CAAkB,GAAzB,UAA0B,SAAyC;YACjE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,SAAS,EAAE;gBAC9F,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;QACH,CAAC;QAEM,6CAAoB,GAA3B;YACE,IAAI,cAAc,CAAC,sBAAsB,IAAI,cAAc,CAAC,sBAAsB,KAAK,IAAI,EAAE;gBAC3F,cAAc,CAAC,sBAAsB,GAAG,SAAS,CAAC;aACnD;YAED,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QACxB,CAAC;QAjFa,2BAAY,GAAG;YAC3B,KAAK,EAAE,sBAAY,CAAC,MAAM;SAC3B,CAAC;QA+NJ,qBAAC;KAAA,AArOD,CACU,KAAK,CAAC,SAAS,GAoOxB;IArOY,wCAAc","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\n\ninterface ISVGTooltipTextProps {\n  /**\n   * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n   * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n   * host, so that the tooltip will stay open if the user is actively interacting with it.\n   */\n  closeDelay?: number;\n\n  /**\n   * Content to display in the Tooltip.\n   */\n  content?: string;\n\n  /**\n   * Length of delay before showing the tooltip on hover.\n   * @defaultvalue TooltipDelay.medium\n   */\n  delay?: TooltipDelay;\n\n  /**\n   * Additional properties to pass through for Tooltip.\n   */\n  tooltipProps?: ITooltipProps;\n\n  /**\n   * Additional properties to pass through for SVG <text>.\n   */\n  textProps?: React.SVGAttributes<SVGTextElement>;\n\n  /**\n   * Max width of text\n   */\n  maxWidth?: number;\n\n  /**\n   * Max height of text\n   */\n  maxHeight?: number;\n\n  /**\n   * Function to wrap text within specified width and height\n   * and return a boolean value indicating whether the text overflowed\n   */\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n}\n\ninterface ISVGTooltipTextState {\n  isTooltipVisible: boolean;\n  isOverflowing: boolean;\n}\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n  extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n  implements ITooltipHost\n{\n  public static defaultProps = {\n    delay: TooltipDelay.medium,\n  };\n\n  private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n  /** The element that gets the hover events */\n  private _tooltipHost = React.createRef<SVGTextElement>();\n\n  private _async: Async;\n  private _dismissTimerId: number;\n  private _openTimerId: number;\n  private _tooltipHostId = getId('tooltip-host');\n  private _ignoreNextFocusEvent: boolean;\n\n  constructor(props: ISVGTooltipTextProps) {\n    super(props);\n\n    this.state = {\n      isTooltipVisible: false,\n      isOverflowing: false,\n    };\n\n    this._async = new Async(this);\n  }\n\n  public render(): React.ReactNode {\n    const { content, tooltipProps, textProps } = this.props;\n    const { isTooltipVisible } = this.state;\n\n    const tooltipRenderProps: ITooltipProps = {\n      content,\n      targetElement: this._getTargetElement(),\n      calloutProps: {\n        onDismiss: this._hideTooltip,\n        onMouseEnter: this._onTooltipMouseEnter,\n        onMouseLeave: this._onTooltipMouseLeave,\n      },\n      onMouseEnter: this._onTooltipMouseEnter,\n      onMouseLeave: this._onTooltipMouseLeave,\n      ...tooltipProps,\n    };\n\n    const showTooltip = isTooltipVisible && !!content;\n\n    return (\n      <>\n        <text\n          {...textProps}\n          id={this._tooltipHostId}\n          ref={this._tooltipHost}\n          onFocusCapture={this._onTooltipFocus}\n          onBlurCapture={this._onTooltipBlur}\n          onMouseEnter={this._onTooltipMouseEnter}\n          onMouseLeave={this._onTooltipMouseLeave}\n          onKeyDown={this._onTooltipKeyDown}\n          data-is-focusable={this.state.isOverflowing}\n        >\n          {content}\n        </text>\n        {showTooltip && <Tooltip {...tooltipRenderProps} />}\n      </>\n    );\n  }\n\n  public componentDidMount(): void {\n    this._wrapContent();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n    if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n      this._wrapContent();\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n\n    this._async.dispose();\n  }\n\n  public show = (): void => {\n    this._toggleTooltip(true);\n  };\n\n  public dismiss = (): void => {\n    this._hideTooltip();\n  };\n\n  private _getTargetElement = (): HTMLElement | undefined => {\n    if (!this._tooltipHost.current) {\n      return undefined;\n    }\n\n    return this._tooltipHost.current as unknown as HTMLElement;\n  };\n\n  private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n    if (this._ignoreNextFocusEvent) {\n      this._ignoreNextFocusEvent = false;\n      return;\n    }\n\n    this._onTooltipMouseEnter(ev);\n  };\n\n  private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n    // The focused element gets a blur event when the document loses focus\n    // (e.g. switching tabs in the browser), but we don't want to show the\n    // tooltip again when the document gets focus back. Handle this case by\n    // checking if the blurred element is still the document's activeElement,\n    // and ignoring when it next gets focus back.\n    // See https://github.com/microsoft/fluentui/issues/13541\n    this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n    this._dismissTimerId = this._async.setTimeout(() => {\n      this._hideTooltip();\n    }, 0);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseEnter = (ev: any): void => {\n    const { delay } = this.props;\n\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n      SVGTooltipText._currentVisibleTooltip.dismiss();\n    }\n    SVGTooltipText._currentVisibleTooltip = this;\n\n    if (!this.state.isOverflowing) {\n      return;\n    }\n\n    if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n      // Do not show tooltip when target is inside a portal relative to TooltipHost.\n      return;\n    }\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (delay !== TooltipDelay.zero) {\n      const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n      this._openTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(true);\n      }, delayTime);\n    } else {\n      this._toggleTooltip(true);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseLeave = (ev: any): void => {\n    const { closeDelay } = this.props;\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (closeDelay) {\n      this._dismissTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(false);\n      }, closeDelay);\n    } else {\n      this._toggleTooltip(false);\n    }\n\n    if (SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n  };\n\n  private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n    // eslint-disable-next-line deprecation/deprecation\n    if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n      this._hideTooltip();\n      ev.stopPropagation();\n    }\n  };\n\n  private _clearDismissTimer = (): void => {\n    this._async.clearTimeout(this._dismissTimerId);\n  };\n\n  private _clearOpenTimer = (): void => {\n    this._async.clearTimeout(this._openTimerId);\n  };\n\n  private _hideTooltip = (): void => {\n    this._clearOpenTimer();\n    this._clearDismissTimer();\n    this._toggleTooltip(false);\n  };\n\n  private _toggleTooltip = (isTooltipVisible: boolean): void => {\n    if (this.state.isTooltipVisible !== isTooltipVisible) {\n      this.setState({ isTooltipVisible });\n    }\n  };\n\n  private _getDelayTime = (delay: TooltipDelay): number => {\n    switch (delay) {\n      case TooltipDelay.medium:\n        return 300;\n      case TooltipDelay.long:\n        return 500;\n      default:\n        return 0;\n    }\n  };\n\n  private _wrapContent = () => {\n    const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n    let isOverflowing = false;\n    if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n      isOverflowing = true;\n    }\n\n    if (this.state.isOverflowing !== isOverflowing) {\n      this.setState({ isOverflowing });\n    }\n  };\n}\n"]}

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

@@ -106,14 +106,20 @@ export interface IYAxisParams {
  * @export
  * @param {IXAxisParams} xAxisParams
  */
-export declare function createNumericXAxis(xAxisParams: IXAxisParams, chartType: ChartTypes, culture?: string): import("d3-scale").ScaleLinear<number, number, never>;
+export declare function createNumericXAxis(xAxisParams: IXAxisParams, chartType: ChartTypes, culture?: string): {
+    xScale: import("d3-scale").ScaleLinear<number, number, never>;
+    tickValues: string[];
+};
 /**
  * Creating Date x axis of the Chart
  * @export
  * @param {IXAxisParams} xAxisParams
  * @param {ITickParams} tickParams
  */
-export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, culture?: string, options?: Intl.DateTimeFormatOptions, timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition, customDateTimeFormatter?: (dateTime: Date) => string): import("d3-scale").ScaleTime<number, number, never>;
+export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, culture?: string, options?: Intl.DateTimeFormatOptions, timeFormatLocale?: d3TimeFormat.TimeLocaleDefinition, customDateTimeFormatter?: (dateTime: Date) => string): {
+    xScale: import("d3-scale").ScaleTime<number, number, never>;
+    tickValues: string[];
+};
 /**
  * Create String X axis
  * Currently using for only Vetical stacked bar chart and grouped vertical bar chart
@@ -123,7 +129,10 @@ export declare function createDateXAxis(xAxisParams: IXAxisParams, tickParams: I
  * @param {string[]} dataset
  * @returns
  */
-export declare function createStringXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, dataset: string[], culture?: string): import("d3-scale").ScaleBand<string>;
+export declare function createStringXAxis(xAxisParams: IXAxisParams, tickParams: ITickParams, dataset: string[], culture?: string): {
+    xScale: import("d3-scale").ScaleBand<string>;
+    tickValues: string[];
+};
 /**
  * This method used for creating data points for the y axis.
  * @export
@@ -207,12 +216,9 @@ export declare function createWrapOfXLabels(wrapLabelProps: IWrapLabelProps): nu
  */
 export declare function createYAxisLabels(node: SVGElement | null, yAxis: any, noOfCharsToTruncate: number, truncateLabel: boolean, xValue: number, isRtl: boolean): void;
 /**
- * This function is calculating the length of longest Y axis label in px ,so that we are able to
- * create the cartesian chart by shifting that many points to the right/left.
- * @param points
- * @returns
+ * Calculates the width of the longest axis label in pixels
  */
-export declare function calculateLongestYAxisLabel(points: IHorizontalBarChartWithAxisDataPoint[], yAxisElement: SVGElement): number;
+export declare const calculateLongestLabelWidth: (labels: (string | number)[], query?: string) => number;
 /**
  * This method displays a tooltip to the x axis lables(tick values)
  * when prop 'showXAxisLablesTooltip' enables to the respected chart.
@@ -419,4 +425,5 @@ declare type LocaleStringDataProps = number | string | Date | undefined;
 export declare const convertToLocaleString: (data: LocaleStringDataProps, culture?: string) => LocaleStringDataProps;
 export declare function rotateXAxisLabels(rotateLabelProps: IRotateLabelProps): number | undefined;
 export declare function wrapTextInsideDonut(selectorClass: string, maxWidth: number): void;
+export declare function formatValueWithSIPrefix(value: number): string;
 export {};

package/lib-amd/utilities/utilities.js

@@ -1,8 +1,8 @@
-define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3TimeFormat, d3_time_1) {
+define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-selection", "d3-format", "d3-time-format", "d3-time", "d3-format"], function (require, exports, tslib_1, d3_axis_1, d3_array_1, d3_scale_1, d3_selection_1, d3_format_1, d3TimeFormat, d3_time_1, d3_format_2) {
     "use strict";
     var _a;
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.getMinMaxOfYAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.getDomainNRangeValues = exports.domainRageOfVerticalNumeric = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.domainRangeOfDateForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestYAxisLabel = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxisForOtherCharts = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createStringYAxis = exports.createYAxisForOtherCharts = exports.createYAxisForHorizontalBarChartWithAxis = exports.createYAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
+    exports.formatValueWithSIPrefix = exports.wrapTextInsideDonut = exports.rotateXAxisLabels = exports.convertToLocaleString = exports.getAccessibleDataObject = exports.pointTypes = exports.CustomPoints = exports.Points = exports.getTypeOfAxis = exports.getMinMaxOfYAxis = exports.findHBCWANumericMinMaxOfY = exports.findVerticalNumericMinMaxOfY = exports.findVSBCNumericMinMaxOfY = exports.findNumericMinMaxOfY = exports.getDomainNRangeValues = exports.domainRageOfVerticalNumeric = exports.domainRangeOfVSBCNumeric = exports.domainRangeOfXStringAxis = exports.domainRangeOfNumericForHorizontalBarChartWithAxis = exports.domainRangeOfNumericForAreaChart = exports.domainRangeOfDateForAreaChart = exports.getXAxisType = exports.tooltipOfXAxislabels = exports.calculateLongestLabelWidth = exports.createYAxisLabels = exports.createWrapOfXLabels = exports.silceOrAppendToArray = exports.getUnique = exports.calloutData = exports.createStringYAxisForOtherCharts = exports.createStringYAxisForHorizontalBarChartWithAxis = exports.createStringYAxis = exports.createYAxisForOtherCharts = exports.createYAxisForHorizontalBarChartWithAxis = exports.createYAxis = exports.prepareDatapoints = exports.createStringXAxis = exports.createDateXAxis = exports.createNumericXAxis = exports.YAxisType = exports.XAxisTypes = exports.ChartTypes = void 0;
     var ChartTypes;
     (function (ChartTypes) {
         ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -50,18 +50,20 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisElement) {
             (0, d3_selection_1.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        return xAxisScale;
+        var tickValues = xAxisScale.ticks(xAxisCount).map(xAxis.tickFormat());
+        return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createNumericXAxis = createNumericXAxis;
     function multiFormat(date, locale) {
-        var formatMillisecond = locale.format('.%L');
-        var formatSecond = locale.format(':%S');
-        var formatMinute = locale.format('%I:%M');
-        var formatHour = locale.format('%I %p');
-        var formatDay = locale.format('%a %d');
-        var formatWeek = locale.format('%b %d');
-        var formatMonth = locale.format('%B');
-        var formatYear = locale.format('%Y');
+        var timeFormat = locale ? locale.format : d3TimeFormat.timeFormat;
+        var formatMillisecond = timeFormat('.%L');
+        var formatSecond = timeFormat(':%S');
+        var formatMinute = timeFormat('%I:%M');
+        var formatHour = timeFormat('%I %p');
+        var formatDay = timeFormat('%a %d');
+        var formatWeek = timeFormat('%b %d');
+        var formatMonth = timeFormat('%B');
+        var formatYear = timeFormat('%Y');
         return ((0, d3_time_1.timeSecond)(date) < date
             ? formatMillisecond
             : (0, d3_time_1.timeMinute)(date) < date
@@ -85,7 +87,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
      * @param {ITickParams} tickParams
      */
     function createDateXAxis(xAxisParams, tickParams, culture, options, timeFormatLocale, customDateTimeFormatter) {
-        var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _a = xAxisParams.tickPadding, tickPadding = _a === void 0 ? 6 : _a, _b = xAxisParams.xAxistickSize, xAxistickSize = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxisCount, xAxisCount = _c === void 0 ? 6 : _c;
+        var _a;
+        var domainNRangeValues = xAxisParams.domainNRangeValues, xAxisElement = xAxisParams.xAxisElement, _b = xAxisParams.tickPadding, tickPadding = _b === void 0 ? 6 : _b, _c = xAxisParams.xAxistickSize, xAxistickSize = _c === void 0 ? 6 : _c, _d = xAxisParams.xAxisCount, xAxisCount = _d === void 0 ? 6 : _d;
         var xAxisScale = (0, d3_scale_1.scaleTime)()
             .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
             .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -113,7 +116,12 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisElement) {
             (0, d3_selection_1.select)(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        return xAxisScale;
+        var tickValues = ((_a = tickParams.tickValues) !== null && _a !== void 0 ? _a : xAxisScale.ticks(xAxisCount)).map(function (val, idx) {
+            var tickFormat = xAxis.tickFormat();
+            // val is a Date object. So when the tick format is not set, format val as a string to calculate its width
+            return tickFormat ? tickFormat(val, idx) : multiFormat(val);
+        });
+        return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createDateXAxis = createDateXAxis;
     /**
@@ -142,7 +150,8 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         if (xAxisParams.xAxisElement) {
             (0, d3_selection_1.select)(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
         }
-        return xAxisScale;
+        var tickValues = dataset.map(xAxis.tickFormat());
+        return { xScale: xAxisScale, tickValues: tickValues };
     }
     exports.createStringXAxis = createStringXAxis;
     /**
@@ -497,24 +506,32 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
     }
     exports.createYAxisLabels = createYAxisLabels;
     /**
-     * This function is calculating the length of longest Y axis label in px ,so that we are able to
-     * create the cartesian chart by shifting that many points to the right/left.
-     * @param points
-     * @returns
+     * Calculates the width of the longest axis label in pixels
      */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function calculateLongestYAxisLabel(points, yAxisElement) {
-        var maxLabelLength = 0;
-        points.forEach(function (point) {
-            var canvas = document.createElement('canvas');
-            var ctx = canvas.getContext('2d');
-            ctx.font = window.getComputedStyle(yAxisElement, null).getPropertyValue('font-size');
-            var wordLengthInPixel = ctx.measureText(point.y).width;
-            maxLabelLength = Math.max(wordLengthInPixel, maxLabelLength);
-        });
-        return maxLabelLength;
-    }
-    exports.calculateLongestYAxisLabel = calculateLongestYAxisLabel;
+    var calculateLongestLabelWidth = function (labels, query) {
+        if (query === void 0) { query = 'none'; }
+        var maxLabelWidth = 0;
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
+        if (ctx) {
+            var axisText = document.querySelector(query);
+            if (axisText) {
+                var styles = window.getComputedStyle(axisText, null);
+                var fontWeight = styles.getPropertyValue('font-weight');
+                var fontSize = styles.getPropertyValue('font-size');
+                var fontFamily = styles.getPropertyValue('font-family');
+                ctx.font = "".concat(fontWeight, " ").concat(fontSize, " ").concat(fontFamily);
+            }
+            else {
+                ctx.font = '600 10px "Segoe UI"';
+            }
+            labels.forEach(function (label) {
+                maxLabelWidth = Math.max(ctx.measureText(label.toString()).width, maxLabelWidth);
+            });
+        }
+        return maxLabelWidth;
+    };
+    exports.calculateLongestLabelWidth = calculateLongestLabelWidth;
     /**
      * This method displays a tooltip to the x axis lables(tick values)
      * when prop 'showXAxisLablesTooltip' enables to the respected chart.
@@ -1057,5 +1074,16 @@ define(["require", "exports", "tslib", "d3-axis", "d3-array", "d3-scale", "d3-se
         });
     }
     exports.wrapTextInsideDonut = wrapTextInsideDonut;
+    function formatValueWithSIPrefix(value) {
+        var specifier;
+        if (value < 1000) {
+            specifier = '.2~'; // upto 2 decimal places without insignificant trailing zeros
+        }
+        else {
+            specifier = '.1'; // upto 1 decimal place
+        }
+        return (0, d3_format_2.formatPrefix)(specifier, value)(value);
+    }
+    exports.formatValueWithSIPrefix = formatValueWithSIPrefix;
 });
 //# sourceMappingURL=utilities.js.map