@fluentui/react-charts 1.1.0 → 9.0.0

package/lib-commonjs/components/CommonComponents/ChartPopover.js

@@ -0,0 +1,197 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChartPopover", {
+    enumerable: true,
+    get: function() {
+        return ChartPopover;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactpopover = require("@fluentui/react-popover");
+const _react1 = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reactutilities = require("@fluentui/react-utilities");
+const _index = require("../../utilities/index");
+const _localeutil = require("../../utilities/locale-util");
+const _shape = require("../Legends/shape");
+const _useChartPopoverStylesstyles = require("./useChartPopoverStyles.styles");
+const ChartPopover = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    var _props_customCallout;
+    const virtualElement = {
+        getBoundingClientRect: ()=>({
+                top: props.clickPosition.y,
+                left: props.clickPosition.x,
+                right: props.clickPosition.x,
+                bottom: props.clickPosition.y,
+                x: props.clickPosition.x,
+                y: props.clickPosition.y,
+                width: 0,
+                height: 0
+            })
+    };
+    props = {
+        ...props,
+        ...(_props_customCallout = props.customCallout) === null || _props_customCallout === void 0 ? void 0 : _props_customCallout.customCalloutProps
+    };
+    const classes = (0, _useChartPopoverStylesstyles.usePopoverStyles_unstable)(props);
+    const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;
+    const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;
+    return /*#__PURE__*/ _react.createElement("div", {
+        id: (0, _reactutilities.useId)('callout'),
+        ref: forwardedRef,
+        className: classes.calloutContainer
+    }, /*#__PURE__*/ _react.createElement(_reactpopover.Popover, {
+        positioning: {
+            target: virtualElement,
+            autoSize: 'always',
+            offset: 20,
+            coverTarget: false
+        },
+        open: props.isPopoverOpen,
+        inline: true
+    }, /*#__PURE__*/ _react.createElement(_reactpopover.PopoverSurface, null, props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout, (!props.customCallout || !props.customCallout.customizedCallout) && props.isCalloutForStack && _multiValueCallout(), (!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentRoot
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutDateTimeContainer
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentX
+    }, props.XValue, " ")), /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutInfoContainer,
+        style: {
+            ...props.ratio && {
+                display: 'flex',
+                alignItems: 'flex-end'
+            },
+            borderLeft: `4px solid ${props.color}`
+        }
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutBlockContainer
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutlegendText
+    }, (0, _localeutil.convertToLocaleString)(legend, props.culture)), /*#__PURE__*/ _react.createElement("div", {
+        className: classes.calloutContentY,
+        style: {
+            color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1
+        }
+    }, (0, _localeutil.convertToLocaleString)(YValue, props.culture))), !!props.ratio && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.ratio
+    }, /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("span", {
+        className: classes.numerator
+    }, (0, _localeutil.convertToLocaleString)(props.ratio[0], props.culture)), "/", /*#__PURE__*/ _react.createElement("span", {
+        className: classes.denominator
+    }, (0, _localeutil.convertToLocaleString)(props.ratio[1], props.culture))))), !!props.descriptionMessage && /*#__PURE__*/ _react.createElement("div", {
+        className: classes.descriptionMessage
+    }, props.descriptionMessage)))));
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    function _multiValueCallout() {
+        var _yValueHoverSubCountsExists1;
+        const yValueHoverSubCountsExists = (_yValueHoverSubCountsExists1 = _yValueHoverSubCountsExists(props.YValueHover)) !== null && _yValueHoverSubCountsExists1 !== void 0 ? _yValueHoverSubCountsExists1 : false;
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutContentRoot
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutDateTimeContainer,
+            style: yValueHoverSubCountsExists ? {
+                marginBottom: '11px'
+            } : {}
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.calloutContentX,
+            ...(0, _index.getAccessibleDataObject)(props.xAxisCalloutAccessibilityData, 'text', false)
+        }, (0, _localeutil.convertToLocaleString)(props.hoverXValue, props.culture))), /*#__PURE__*/ _react.createElement("div", {
+            style: yValueHoverSubCountsExists ? {
+                display: 'flex'
+            } : {}
+        }, props.YValueHover && props.YValueHover.map((yValue, index, yValues)=>{
+            const isLast = index + 1 === yValues.length;
+            const { shouldDrawBorderBottom = false } = yValue;
+            return /*#__PURE__*/ _react.createElement("div", {
+                ...(0, _index.getAccessibleDataObject)(yValue.callOutAccessibilityData, 'text', false),
+                key: `callout-content-${index}`,
+                style: yValueHoverSubCountsExists ? {
+                    display: 'inline-block',
+                    ...shouldDrawBorderBottom && {
+                        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+                        paddingBottom: '10px'
+                    }
+                } : {
+                    ...shouldDrawBorderBottom && {
+                        borderBottom: `1px solid ${_reacttheme.tokens.colorNeutralStroke2}`,
+                        paddingBottom: '10px'
+                    }
+                }
+            }, _getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast));
+        }), !!props.descriptionMessage && /*#__PURE__*/ _react.createElement("div", {
+            className: classes.descriptionMessage
+        }, props.descriptionMessage)));
+    }
+    function _yValueHoverSubCountsExists(yValueHover) {
+        return yValueHover && yValueHover.some((yValue)=>yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string');
+    }
+    function _getCalloutContent(xValue, index, yValueHoverSubCountsExists, isLast) {
+        const marginStyle = isLast ? {} : {
+            marginRight: '16px'
+        };
+        const toDrawShape = xValue.index !== undefined && xValue.index !== -1;
+        const { culture } = props;
+        const yValue = (0, _localeutil.convertToLocaleString)(xValue.y, culture);
+        if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
+            var _xValue_y;
+            return /*#__PURE__*/ _react.createElement("div", {
+                style: yValueHoverSubCountsExists ? marginStyle : {}
+            }, yValueHoverSubCountsExists && /*#__PURE__*/ _react.createElement("div", {
+                className: "ms-fontWeight-semibold",
+                style: {
+                    fontSize: '12pt'
+                }
+            }, xValue.legend, " (", yValue, ")"), /*#__PURE__*/ _react.createElement("div", {
+                id: `${index}_${xValue.y}`,
+                className: classes.calloutBlockContainer,
+                style: {
+                    marginTop: props.XValue ? '13px' : 'unset',
+                    ...!toDrawShape ? {
+                        borderLeft: `4px solid ${xValue.color}`
+                    } : {}
+                }
+            }, toDrawShape && /*#__PURE__*/ _react.createElement(_shape.Shape, {
+                svgProps: {
+                    className: classes.shapeStyles
+                },
+                pathProps: {
+                    fill: xValue.color
+                },
+                shape: _index.Points[xValue.index % Object.keys(_index.pointTypes).length]
+            }), /*#__PURE__*/ _react.createElement("div", {
+                className: (0, _react1.mergeClasses)(classes.calloutBlockContainer, toDrawShape ? classes.calloutBlockContainertoDrawShapetrue : classes.calloutBlockContainertoDrawShapefalse)
+            }, /*#__PURE__*/ _react.createElement("div", {
+                className: classes.calloutlegendText
+            }, " ", xValue.legend), /*#__PURE__*/ _react.createElement("div", {
+                className: classes.calloutContentY
+            }, (0, _localeutil.convertToLocaleString)(xValue.yAxisCalloutData ? xValue.yAxisCalloutData : (_xValue_y = xValue.y) !== null && _xValue_y !== void 0 ? _xValue_y : xValue.data, culture)))));
+        } else {
+            const subcounts = xValue.yAxisCalloutData;
+            return /*#__PURE__*/ _react.createElement("div", {
+                style: marginStyle
+            }, /*#__PURE__*/ _react.createElement("div", {
+                className: "ms-fontWeight-semibold",
+                style: {
+                    fontSize: '12pt'
+                }
+            }, xValue.legend, " (", yValue, ")"), Object.keys(subcounts).map((subcountName)=>{
+                return /*#__PURE__*/ _react.createElement("div", {
+                    key: subcountName,
+                    className: classes.calloutBlockContainer
+                }, /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.calloutlegendText
+                }, " ", (0, _localeutil.convertToLocaleString)(subcountName, culture)), /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.calloutContentY,
+                    style: {
+                        color: props.color ? props.color : _reacttheme.tokens.colorNeutralForeground1
+                    }
+                }, (0, _localeutil.convertToLocaleString)(subcounts[subcountName], culture)));
+            }));
+        }
+    }
+});
+ChartPopover.displayName = 'ChartPopover';

package/lib-commonjs/components/CommonComponents/ChartPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartPopover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover, PopoverSurface } from '@fluentui/react-popover';\nimport { mergeClasses } from '@griffel/react';\nimport type { PositioningVirtualElement } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { useId } from '@fluentui/react-utilities';\nimport { getAccessibleDataObject, Points, pointTypes } from '../../utilities/index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { Shape } from '../Legends/shape';\nimport { usePopoverStyles_unstable } from './useChartPopoverStyles.styles';\nimport { YValueHover } from './CartesianChart.types';\nimport { LegendShape } from '../Legends/Legends.types';\nimport { ChartPopoverProps } from './ChartPopover.types';\n\n/* This component is a wrapper over Popover component which implements the logic for rendering popovers for any chart\ncombining the logic for Callout and ChartHoverCard in v8 charts. */\nexport const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.forwardRef<\n  HTMLDivElement,\n  ChartPopoverProps\n>((props, forwardedRef) => {\n  const virtualElement: PositioningVirtualElement = {\n    getBoundingClientRect: () => ({\n      top: props.clickPosition!.y,\n      left: props.clickPosition!.x,\n      right: props.clickPosition!.x,\n      bottom: props.clickPosition!.y,\n      x: props.clickPosition!.x,\n      y: props.clickPosition!.y,\n      width: 0,\n      height: 0,\n    }),\n  };\n  props = { ...props, ...props.customCallout?.customCalloutProps };\n  const classes = usePopoverStyles_unstable(props);\n  const legend = props.xCalloutValue ? props.xCalloutValue : props.legend;\n  const YValue = props.yCalloutValue ? props.yCalloutValue : props.YValue;\n  return (\n    <div id={useId('callout')} ref={forwardedRef} className={classes.calloutContainer}>\n      <Popover\n        positioning={{ target: virtualElement, autoSize: 'always', offset: 20, coverTarget: false }}\n        open={props.isPopoverOpen}\n        inline\n      >\n        <PopoverSurface>\n          {/** Given custom callout, then it will render */}\n          {props.customCallout && props.customCallout.customizedCallout && props.customCallout.customizedCallout}\n          {/** single x point its corresponding y points of all the bars/lines in chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) &&\n            props.isCalloutForStack &&\n            _multiValueCallout()}\n          {/** single x point its corresponding y point of single line/bar in the chart will render in callout */}\n          {(!props.customCallout || !props.customCallout.customizedCallout) && !props.isCalloutForStack && (\n            <div className={classes.calloutContentRoot}>\n              <div className={classes.calloutDateTimeContainer}>\n                <div className={classes.calloutContentX}>{props.XValue} </div>\n                {/*TO DO  if we add time for callout then will use this */}\n                {/* <div className={classNames.calloutContentX}>07:00am</div> */}\n              </div>\n              <div\n                className={classes.calloutInfoContainer}\n                style={{\n                  ...(props.ratio && {\n                    display: 'flex',\n                    alignItems: 'flex-end',\n                  }),\n                  borderLeft: `4px solid ${props.color}`,\n                }}\n              >\n                <div className={classes.calloutBlockContainer}>\n                  <div className={classes.calloutlegendText}>{convertToLocaleString(legend, props.culture)}</div>\n                  <div\n                    className={classes.calloutContentY}\n                    style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                  >\n                    {convertToLocaleString(YValue, props.culture)}\n                  </div>\n                </div>\n                {!!props.ratio && (\n                  <div className={classes.ratio}>\n                    <>\n                      <span className={classes.numerator}>{convertToLocaleString(props.ratio[0], props.culture)}</span>/\n                      <span className={classes.denominator}>\n                        {convertToLocaleString(props.ratio[1], props.culture)}\n                      </span>\n                    </>\n                  </div>\n                )}\n              </div>\n              {!!props.descriptionMessage && (\n                <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>\n              )}\n            </div>\n          )}\n        </PopoverSurface>\n      </Popover>\n    </div>\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  function _multiValueCallout() {\n    const yValueHoverSubCountsExists: boolean = _yValueHoverSubCountsExists(props.YValueHover) ?? false;\n    return (\n      <div className={classes.calloutContentRoot}>\n        <div\n          className={classes.calloutDateTimeContainer}\n          style={yValueHoverSubCountsExists ? { marginBottom: '11px' } : {}}\n        >\n          <div\n            className={classes.calloutContentX}\n            {...getAccessibleDataObject(props!.xAxisCalloutAccessibilityData, 'text', false)}\n          >\n            {convertToLocaleString(props!.hoverXValue, props.culture)}\n          </div>\n        </div>\n        <div style={yValueHoverSubCountsExists ? { display: 'flex' } : {}}>\n          {props!.YValueHover &&\n            props!.YValueHover.map((yValue: YValueHover, index: number, yValues: YValueHover[]) => {\n              const isLast: boolean = index + 1 === yValues.length;\n              const { shouldDrawBorderBottom = false } = yValue;\n              return (\n                <div\n                  {...getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false)}\n                  key={`callout-content-${index}`}\n                  style={\n                    yValueHoverSubCountsExists\n                      ? {\n                          display: 'inline-block',\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                      : {\n                          ...(shouldDrawBorderBottom && {\n                            borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,\n                            paddingBottom: '10px',\n                          }),\n                        }\n                  }\n                >\n                  {_getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)}\n                </div>\n              );\n            })}\n          {!!props.descriptionMessage && <div className={classes.descriptionMessage}>{props.descriptionMessage}</div>}\n        </div>\n      </div>\n    );\n  }\n\n  function _yValueHoverSubCountsExists(yValueHover?: YValueHover[]): boolean | undefined {\n    return (\n      yValueHover &&\n      yValueHover.some(\n        (yValue: {\n          legend?: string;\n          y?: number;\n          color?: string;\n          yAxisCalloutData?: string | { [id: string]: number };\n        }) => yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string',\n      )\n    );\n  }\n\n  function _getCalloutContent(\n    xValue: YValueHover,\n    index: number,\n    yValueHoverSubCountsExists: boolean,\n    isLast: boolean,\n  ): React.ReactNode {\n    const marginStyle: React.CSSProperties = isLast ? {} : { marginRight: '16px' };\n    const toDrawShape = xValue.index !== undefined && xValue.index !== -1;\n    const { culture } = props;\n    const yValue = convertToLocaleString(xValue.y, culture);\n    if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {\n      return (\n        <div style={yValueHoverSubCountsExists ? marginStyle : {}}>\n          {yValueHoverSubCountsExists && (\n            <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n              {xValue.legend!} ({yValue})\n            </div>\n          )}\n          <div\n            id={`${index}_${xValue.y}`}\n            className={classes.calloutBlockContainer}\n            style={{\n              marginTop: props.XValue ? '13px' : 'unset',\n              ...(!toDrawShape\n                ? {\n                    borderLeft: `4px solid ${xValue.color}`,\n                  }\n                : {}),\n            }}\n          >\n            {toDrawShape && (\n              <Shape\n                svgProps={{\n                  className: classes.shapeStyles,\n                }}\n                pathProps={{ fill: xValue.color }}\n                shape={Points[xValue.index! % Object.keys(pointTypes).length] as LegendShape}\n              />\n            )}\n            <div\n              className={mergeClasses(\n                classes.calloutBlockContainer,\n                toDrawShape\n                  ? classes.calloutBlockContainertoDrawShapetrue\n                  : classes.calloutBlockContainertoDrawShapefalse,\n              )}\n            >\n              <div className={classes.calloutlegendText}> {xValue.legend}</div>\n              <div className={classes.calloutContentY}>\n                {convertToLocaleString(\n                  xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y ?? xValue.data,\n                  culture,\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      );\n    } else {\n      const subcounts: { [id: string]: number } = xValue.yAxisCalloutData as { [id: string]: number };\n      return (\n        <div style={marginStyle}>\n          <div className=\"ms-fontWeight-semibold\" style={{ fontSize: '12pt' }}>\n            {xValue.legend!} ({yValue})\n          </div>\n          {Object.keys(subcounts).map((subcountName: string) => {\n            return (\n              <div key={subcountName} className={classes.calloutBlockContainer}>\n                <div className={classes.calloutlegendText}> {convertToLocaleString(subcountName, culture)}</div>\n                <div\n                  className={classes.calloutContentY}\n                  style={{ color: props.color ? props.color : tokens.colorNeutralForeground1 }}\n                >\n                  {convertToLocaleString(subcounts[subcountName], culture)}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n  }\n});\nChartPopover.displayName = 'ChartPopover';\n"],"names":["ChartPopover","React","forwardRef","props","forwardedRef","virtualElement","getBoundingClientRect","top","clickPosition","y","left","x","right","bottom","width","height","customCallout","customCalloutProps","classes","usePopoverStyles_unstable","legend","xCalloutValue","YValue","yCalloutValue","createElement","div","id","useId","ref","className","calloutContainer","Popover","positioning","target","autoSize","offset","coverTarget","open","isPopoverOpen","inline","PopoverSurface","customizedCallout","isCalloutForStack","_multiValueCallout","calloutContentRoot","calloutDateTimeContainer","calloutContentX","XValue","calloutInfoContainer","style","ratio","display","alignItems","borderLeft","color","calloutBlockContainer","calloutlegendText","convertToLocaleString","culture","calloutContentY","tokens","colorNeutralForeground1","Fragment","span","numerator","denominator","descriptionMessage","_yValueHoverSubCountsExists","yValueHoverSubCountsExists","YValueHover","marginBottom","getAccessibleDataObject","xAxisCalloutAccessibilityData","hoverXValue","map","yValue","index","yValues","isLast","length","shouldDrawBorderBottom","callOutAccessibilityData","key","borderBottom","colorNeutralStroke2","paddingBottom","_getCalloutContent","yValueHover","some","yAxisCalloutData","xValue","marginStyle","marginRight","toDrawShape","undefined","fontSize","marginTop","Shape","svgProps","shapeStyles","pathProps","fill","shape","Points","Object","keys","pointTypes","mergeClasses","calloutBlockContainertoDrawShapetrue","calloutBlockContainertoDrawShapefalse","data","subcounts","subcountName","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/CommonComponents/ChartPopover.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/components/CommonComponents/ChartPopover.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ChartPopover.types.ts"],"sourcesContent":["import { YValueHover } from '../../index';\n\nexport interface ChartPopoverProps {\n  clickPosition?: { x: number; y: number };\n  isPopoverOpen?: boolean;\n  xCalloutValue?: string;\n  legend?: string | number | Date;\n  yCalloutValue?: string;\n  YValue?: string | number | Date;\n  XValue?: string;\n  color?: string;\n  culture?: string;\n  customCallout?: {\n    customizedCallout?: JSX.Element;\n    customCalloutProps?: ChartPopoverProps;\n  };\n  isCalloutForStack?: boolean;\n  xAxisCalloutAccessibilityData?: { ariaLabel?: string; data?: string };\n  hoverXValue?: string | number;\n  YValueHover?: YValueHover[];\n  descriptionMessage?: string;\n  ratio?: [number, number];\n  isCartesian?: boolean;\n}\n\nexport interface PopoverComponentStyles {\n  calloutContentRoot: string;\n  calloutDateTimeContainer: string;\n  calloutContentX: string;\n  calloutBlockContainer: string;\n  calloutBlockContainertoDrawShapefalse: string;\n  calloutBlockContainertoDrawShapetrue: string;\n  shapeStyles: string;\n  calloutlegendText: string;\n  calloutContentY: string;\n  descriptionMessage: string;\n  ratio: string;\n  numerator: string;\n  denominator: string;\n  calloutInfoContainer: string;\n  calloutContainer: string;\n}\n"],"names":[],"rangeMappings":"","mappings":""}

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./CartesianChart"), exports);
+_export_star._(require("./CartesianChart.types"), exports);
+_export_star._(require("./ChartPopover"), exports);
+_export_star._(require("./ChartPopover.types"), exports);

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './CartesianChart';\nexport * from './CartesianChart.types';\nexport * from './ChartPopover';\nexport * from './ChartPopover.types';\n"],"names":[],"rangeMappings":";;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/CommonComponents/useCartesianChartStyles.styles.js

@@ -0,0 +1,356 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    cartesianchartClassNames: function() {
+        return cartesianchartClassNames;
+    },
+    useCartesianChartStyles: function() {
+        return useCartesianChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _utilities = require("../../utilities/utilities");
+const cartesianchartClassNames = {
+    root: 'fui-cart__root',
+    chartWrapper: 'fui-cart__chartWrapper',
+    axisTitle: 'fui-cart__axisTitle',
+    xAxis: 'fui-cart__xAxis',
+    yAxis: 'fui-cart__yAxis',
+    opacityChangeOnHover: 'fui-cart__opacityChangeOnHover',
+    legendContainer: 'fui-cart__legendContainer',
+    calloutContentRoot: 'fui-cart__calloutContentRoot',
+    calloutDateTimeContainer: 'fui-cart__calloutDateTimeContainer',
+    calloutContentX: 'fui-cart__calloutContentX',
+    calloutBlockContainer: 'fui-cart__calloutBlockContainer',
+    calloutBlockContainertoDrawShapefalse: 'fui-cart__calloutBlockContainertoDrawShapefalse',
+    calloutBlockContainertoDrawShapetrue: 'fui-cart__calloutBlockContainertoDrawShapetrue',
+    shapeStyles: 'fui-cart__shapeStyles',
+    calloutlegendText: 'fui-cart__calloutlegendText',
+    calloutContentY: 'fui-cart__calloutContentY',
+    descriptionMessage: 'fui-cart__descriptionMessage',
+    hover: 'fui-cart__hover',
+    calloutInfoContainer: 'fui-cart__calloutInfoContainer',
+    tooltip: 'fui-cart__tooltip',
+    chartTitle: 'fui-cart__chartTitle'
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        mc9l5x: "f22iagw",
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl",
+        Beiy3e4: "f1vx9l62",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp"
+    },
+    chartWrapper: {
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1enuhaj"
+    },
+    axisTitle: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "f13mqy1h",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fcpl73t",
+        B80ckks: "fmd4ok8",
+        fsow6f: "f17mccla",
+        sj55zd: "fkfq4zb",
+        Bkfmm31: "fhuob2q"
+    },
+    xAxis: {
+        Bifops1: "fk6onyz",
+        lr70ht: "f17odlr9",
+        D01gh: "f1wvrikb",
+        vxuu72: "fidmvdy",
+        lclgl4: "f1noc3f3",
+        Dzfv0s: "f1rtcel9",
+        s17mou: "f4w8oyz",
+        jxu3ei: "fkuun",
+        B3i31d3: "f1u7a78k",
+        Bhcy8il: "f1myyn02",
+        t7r2jy: "f1ypwncy",
+        Bpf2t2a: "fs22wna",
+        J19x1g: "f19ju15u",
+        se2xxg: "f1x8lysa"
+    },
+    yAxis: {
+        lr70ht: "f17odlr9",
+        D01gh: "f1wvrikb",
+        vxuu72: "fidmvdy",
+        lclgl4: "f1noc3f3",
+        Bifops1: "fk6onyz",
+        Dzfv0s: "f1rtcel9",
+        s17mou: "f4w8oyz",
+        jxu3ei: "fkuun",
+        B3i31d3: "f1u7a78k",
+        t7r2jy: "f1ypwncy",
+        Bpf2t2a: "fs22wna",
+        J19x1g: "f19ju15u",
+        se2xxg: "f1x8lysa"
+    },
+    rtl: {
+        Bkw34lo: "f1j2g1si"
+    },
+    ltr: {},
+    opacityChangeOnHover: {
+        abs64n: "f9das1l",
+        Bceei9c: "f158kwzp"
+    },
+    legendContainer: {
+        B6of3ja: "frnwi6n",
+        Frg6f3: [
+            "ff3wqvv",
+            "f1l2akhw"
+        ]
+    },
+    calloutContentRoot: {
+        mc9l5x: "f13qh94s",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp",
+        z8tnut: "f1dvrhzg",
+        z189sj: [
+            "fjnv7mu",
+            "fae8789"
+        ],
+        Byoj8tv: "f1av7aef",
+        uwmqm3: [
+            "fae8789",
+            "fjnv7mu"
+        ],
+        De3pzq: "fxugw4r",
+        jy2i9i: "fronft5"
+    },
+    calloutDateTimeContainer: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        Brf1p80: "f1869bpl"
+    },
+    calloutContentX: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        abs64n: "fp25eh",
+        sj55zd: "fkfq4zb"
+    },
+    calloutBlockContainer: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k",
+        B6of3ja: "f7jvbu2",
+        sj55zd: "fkfq4zb"
+    },
+    calloutBlockContainertoDrawShapefalse: {
+        B93v9kj: "f15mrrko",
+        ibv6hh: [
+            "frjpdoz",
+            "fm1xp1g"
+        ],
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ]
+    },
+    calloutBlockContainertoDrawShapetrue: {
+        mc9l5x: "f22iagw"
+    },
+    shapeStyles: {
+        t21cq0: [
+            "f1vcna3q",
+            "foyynoy"
+        ]
+    },
+    calloutLegendText: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        sj55zd: "fkfq4zb",
+        Bd6j3yi: "f5klfrb",
+        hbub2c: "f1f0smcx"
+    },
+    calloutContentY: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "flh3ekv",
+        Bg96gwp: "faaz57k",
+        Bd6j3yi: "f5klfrb",
+        hbub2c: "f1f0smcx"
+    },
+    descriptionMessage: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        sj55zd: "fkfq4zb",
+        B6of3ja: "f1gaxbfw",
+        z8tnut: "f1ngh7ph",
+        B4j52fo: "f1pgliyk"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f22iagw{display:flex;}",
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".f1vx9l62{flex-direction:column;}",
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1enuhaj{overflow:auto;}",
+            {
+                p: -1
+            }
+        ],
+        ".f13mqy1h{font-size:var(--fontSizeBase100);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fcpl73t{line-height:var(--lineHeightBase100);}",
+        ".fmd4ok8{font-style:normal;}",
+        ".f17mccla{text-align:center;}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".fk6onyz text{fill:var(--colorNeutralForeground1);}",
+        ".f17odlr9 text{font-family:var(--fontFamilyBase);}",
+        ".f1wvrikb text{font-size:var(--fontSizeBase100);}",
+        ".fidmvdy text{font-weight:var(--fontWeightSemibold);}",
+        ".f1noc3f3 text{line-height:var(--lineHeightBase100);}",
+        ".fkuun line{opacity:0.2;}",
+        ".f1u7a78k line{stroke:var(--colorNeutralForeground1);}",
+        ".f1myyn02 line{width:1px;}",
+        ".f1x8lysa path{display:none;}",
+        ".f1j2g1si g{text-anchor:end;}",
+        ".f9das1l{opacity:0.1;}",
+        ".f158kwzp{cursor:default;}",
+        ".frnwi6n{margin-top:var(--spacingVerticalS);}",
+        ".ff3wqvv{margin-left:var(--spacingHorizontalXL);}",
+        ".f1l2akhw{margin-right:var(--spacingHorizontalXL);}",
+        ".f13qh94s{display:grid;}",
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ],
+        ".f1dvrhzg{padding-top:11px 16px 10px 16px;}",
+        ".fjnv7mu{padding-right:11px 16px 10px 16px;}",
+        ".fae8789{padding-left:11px 16px 10px 16px;}",
+        ".f1av7aef{padding-bottom:11px 16px 10px 16px;}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        ".fronft5{background-blend-mode:normal,luminosity;}",
+        ".f1063pyq{flex-direction:row;}",
+        ".f1869bpl{justify-content:space-between;}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".fp25eh{opacity:0.8;}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".f7jvbu2{margin-top:13px;}",
+        ".frjpdoz{border-left-width:4px solid;}",
+        ".fm1xp1g{border-right-width:4px solid;}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1vcna3q{margin-right:var(--spacingHorizontalS);}",
+        ".foyynoy{margin-left:var(--spacingHorizontalS);}",
+        ".flh3ekv{font-weight:var(--fontWeightBold);}",
+        ".f1gaxbfw{margin-top:var(--spacingVerticalMNudge);}",
+        ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
+        ".f1pgliyk{border-top-width:1px solid var(--colorNeutralStroke2);}"
+    ],
+    m: [
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1rtcel9 text{fill:rgb(179, 179, 179);}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f4w8oyz text{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1ypwncy line{opacity:0.1;}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.fs22wna line{stroke:rgb(179, 179, 179);}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f19ju15u line{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: active),screen and (forced-colors: active){.f15mrrko{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: active), screen and (forced-colors: active)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f5klfrb{color:rgb(255, 255, 255);}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ],
+        [
+            "@media screen and (-ms-high-contrast: white-on-black),screen and (forced-colors: active) and (prefers-color-scheme: dark){.f1f0smcx{forced-color-adjust:none;}}",
+            {
+                m: "screen and (-ms-high-contrast: white-on-black), screen and (forced-colors: active) and (prefers-color-scheme: dark)"
+            }
+        ]
+    ]
+});
+const useCartesianChartStyles = (props)=>{
+    const _useRtl = (0, _utilities.useRtl)();
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(cartesianchartClassNames.root, baseStyles.root /*props.styles?.root*/ ),
+        chartWrapper: (0, _react.mergeClasses)(cartesianchartClassNames.chartWrapper, baseStyles.chartWrapper /*props.styles?.chartWrapper*/ ),
+        axisTitle: (0, _react.mergeClasses)(cartesianchartClassNames.axisTitle, baseStyles.axisTitle /*props.styles?.axisTitle*/ ),
+        xAxis: (0, _react.mergeClasses)(cartesianchartClassNames.xAxis, baseStyles.xAxis /*props.styles?.xAxis*/ ),
+        yAxis: (0, _react.mergeClasses)(cartesianchartClassNames.yAxis, baseStyles.yAxis, _useRtl ? baseStyles.rtl : baseStyles.ltr /*props.styles?.yAxis*/ ),
+        opacityChangeOnHover: (0, _react.mergeClasses)(cartesianchartClassNames.opacityChangeOnHover, baseStyles.opacityChangeOnHover /*props.styles?.opacityChangeOnHover*/ ),
+        legendContainer: (0, _react.mergeClasses)(cartesianchartClassNames.legendContainer, baseStyles.legendContainer /*props.styles?.legendContainer*/ ),
+        calloutContentRoot: (0, _react.mergeClasses)(cartesianchartClassNames.calloutContentRoot, baseStyles.calloutContentRoot /*props.styles?. calloutContentRoot*/ ),
+        calloutDateTimeContainer: (0, _react.mergeClasses)(cartesianchartClassNames.calloutDateTimeContainer, baseStyles.calloutDateTimeContainer /*props.styles?.calloutDateTimeContainer*/ ),
+        calloutContentX: (0, _react.mergeClasses)(cartesianchartClassNames.calloutContentX, baseStyles.calloutContentX /*props.styles?.calloutContentX*/ ),
+        calloutBlockContainer: (0, _react.mergeClasses)(cartesianchartClassNames.calloutBlockContainer, baseStyles.calloutBlockContainer /*props.styles?.calloutBlockContainer*/ ),
+        calloutBlockContainertoDrawShapefalse: (0, _react.mergeClasses)(cartesianchartClassNames.calloutBlockContainertoDrawShapefalse, baseStyles.calloutBlockContainertoDrawShapefalse /*props.styles?.calloutBlockContainertoDrawShapefalse*/ ),
+        calloutBlockContainertoDrawShapetrue: (0, _react.mergeClasses)(cartesianchartClassNames.calloutBlockContainertoDrawShapetrue, baseStyles.calloutBlockContainertoDrawShapetrue /*props.styles?.calloutBlockContainertoDrawShapetrue*/ ),
+        shapeStyles: (0, _react.mergeClasses)(cartesianchartClassNames.shapeStyles, baseStyles.shapeStyles /*props.styles?.shapeStyles*/ ),
+        calloutlegendText: (0, _react.mergeClasses)(cartesianchartClassNames.calloutlegendText, baseStyles.calloutLegendText /*props.styles?.calloutlegendText*/ ),
+        calloutContentY: (0, _react.mergeClasses)(cartesianchartClassNames.calloutContentY, baseStyles.calloutContentY /*props.styles?.calloutContentY*/ ),
+        descriptionMessage: (0, _react.mergeClasses)(cartesianchartClassNames.descriptionMessage, baseStyles.descriptionMessage /*props.styles?. descriptionMessage*/ )
+    };
+}; //# sourceMappingURL=useCartesianChartStyles.styles.js.map