@fluentui/react-charting 5.16.43 → 5.16.45

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { Callout, FocusZone, FocusZoneDirection, List } from '@fluentui/react';
 import { Textbox } from './Textbox';
+import { getColorFromToken } from '../../../utilities/colors';
 export 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()); };
@@ -21,8 +23,9 @@ export var LabelLink = function (props) {
         }
     }
     var text;
-    var darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
-    var fill = darkThemeMq.matches ? 'rgb(255,255,255)' : props.textColor;
+    var fill = props.textColor
+        ? 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/components/LineChart/eventAnnotation/LabelLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"LabelLink.js","sourceRoot":"../src/","sources":["components/LineChart/eventAnnotation/LabelLink.tsx"],"names":[],"mappings":"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","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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAwB9D,MAAM,CAAC,IAAM,SAAS,GAA6C,UAAA,KAAK;;IACtE,IAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IACvC,IAAA,KAA0B,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA9C,QAAQ,QAAA,EAAE,WAAW,QAAyB,CAAC;IACtD,IAAM,SAAS,GAAG,cAAM,OAAA,WAAW,CAAC,KAAK,CAAC,EAAlB,CAAkB,CAAC;IAC3C,IAAM,OAAO,GAAG,cAAM,OAAA,WAAW,CAAC,IAAI,CAAC,EAAjB,CAAiB,CAAC;IACxC,IAAM,YAAY,GAAG,UAAC,CAAsC,IAAK,OAAA,kDAAwB,IAAI,IAAG,CAAC,IAAI,CAAC,EAAE,CAAO,EAA9C,CAA8C,CAAC;IAEhH,IAAI,OAAO,GAAoB,IAAI,CAAC;IACpC,IAAI,QAAQ,EAAE;QACZ,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;QACtG,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACpB,OAAO,GAAG,CACR,oBAAC,OAAO,IACN,MAAM,EAAE,IAAI,CAAC,OAAO;gBACpB,6CAA6C;gBAC7C,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,IAAI,EACrB,IAAI,EAAC,QAAQ;gBAEb,oBAAC,SAAS,IAAC,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,CAAC,QAAQ;oBAC3E,oBAAC,IAAI,IACH,KAAK,EAAE,KAAK;wBACZ,6CAA6C;wBAC7C,YAAY,EAAE,YAAY,GAC1B,CACQ,CACJ,CACX,CAAC;SACH;KACF;IAED,IAAI,IAAY,CAAC;IACjB,IAAM,IAAI,GAAuB,KAAK,CAAC,SAAS;QAC9C,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAAE,MAAA,KAAK,CAAC,KAAK,0CAAE,UAAU,CAAC;QAC7D,CAAC,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,OAAO,CAAC,KAAK,CAAC;IAE/B,IAAI,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAC7C,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;KAC9D;SAAM;QACL,IAAI,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;KAC/D;IAED,OAAO,CACL;QACE,2BAAG,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,uBAAqB,KAAK,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;YACpF,oBAAC,OAAO,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;QACH,OAAO,CACP,CACJ,CAAC;AACJ,CAAC,CAAC","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/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/index.js

@@ -17,5 +17,6 @@ export * from './TreeChart';
 export * from './Sparkline';
 export * from './HorizontalBarChartWithAxis';
 export * from './utilities/colors';
+export * from './GaugeChart';
 import './version';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AAEnC,OAAO,WAAW,CAAC","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":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAE7B,OAAO,WAAW,CAAC","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/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/utilities/SVGTooltipText.js

@@ -0,0 +1,173 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';
+import { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';
+/**
+ * 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) {
+    __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 = 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 && 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 !== 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 === 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 TooltipDelay.medium:
+                    return 300;
+                case 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 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 = __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", __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, __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: TooltipDelay.medium,
+    };
+    return SVGTooltipText;
+}(React.Component));
+export { SVGTooltipText };
+//# sourceMappingURL=SVGTooltipText.js.map

package/lib/utilities/SVGTooltipText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","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/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/utilities/utilities.js

@@ -7,6 +7,7 @@ import { select as d3Select, event as d3Event, selectAll as d3SelectAll } from '
 import { format as d3Format } from 'd3-format';
 import * as d3TimeFormat from 'd3-time-format';
 import { timeSecond as d3TimeSecond, timeMinute as d3TimeMinute, timeHour as d3TimeHour, timeDay as d3TimeDay, timeMonth as d3TimeMonth, timeWeek as d3TimeWeek, timeYear as d3TimeYear, } from 'd3-time';
+import { formatPrefix as d3FormatPrefix } from 'd3-format';
 export var ChartTypes;
 (function (ChartTypes) {
     ChartTypes[ChartTypes["AreaChart"] = 0] = "AreaChart";
@@ -54,17 +55,19 @@ export function createNumericXAxis(xAxisParams, chartType, culture) {
     if (xAxisElement) {
         d3Select(xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    return xAxisScale;
+    var tickValues = xAxisScale.ticks(xAxisCount).map(xAxis.tickFormat());
+    return { xScale: xAxisScale, tickValues: tickValues };
 }
 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 (d3TimeSecond(date) < date
         ? formatMillisecond
         : d3TimeMinute(date) < date
@@ -88,7 +91,8 @@ function multiFormat(date, locale) {
  * @param {ITickParams} tickParams
  */
 export 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 = d3ScaleTime()
         .domain([domainNRangeValues.dStartValue, domainNRangeValues.dEndValue])
         .range([domainNRangeValues.rStartValue, domainNRangeValues.rEndValue]);
@@ -116,7 +120,12 @@ export function createDateXAxis(xAxisParams, tickParams, culture, options, timeF
     if (xAxisElement) {
         d3Select(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 };
 }
 /**
  * Create String X axis
@@ -144,7 +153,8 @@ export function createStringXAxis(xAxisParams, tickParams, dataset, culture) {
     if (xAxisParams.xAxisElement) {
         d3Select(xAxisParams.xAxisElement).call(xAxis).selectAll('text').attr('aria-hidden', 'true');
     }
-    return xAxisScale;
+    var tickValues = dataset.map(xAxis.tickFormat());
+    return { xScale: xAxisScale, tickValues: tickValues };
 }
 /**
  * This method used for creating data points for the y axis.
@@ -486,23 +496,31 @@ yAxis, noOfCharsToTruncate, truncateLabel, xValue, isRtl) {
     });
 }
 /**
- * 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
-export 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;
-}
+export 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;
+};
 /**
  * This method displays a tooltip to the x axis lables(tick values)
  * when prop 'showXAxisLablesTooltip' enables to the respected chart.
@@ -1026,4 +1044,14 @@ export function wrapTextInsideDonut(selectorClass, maxWidth) {
         idx += 1;
     });
 }
+export 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 d3FormatPrefix(specifier, value)(value);
+}
 //# sourceMappingURL=utilities.js.map