npm - @fluentui/react-charting - Versions diffs - 5.24.5 → 5.24.6 - Mend

@fluentui/react-charting 5.24.5 → 5.24.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js CHANGED Viewed

@@ -4,10 +4,11 @@ exports.getStyles = void 0;
 var tslib_1 = require("tslib");
 var Styling_1 = require("@fluentui/react/lib/Styling");
 var react_1 = require("@fluentui/react");
+var index_1 = require("../../utilities/index");
 var isIE11Var = (0, react_1.isIE11)();
 var getStyles = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var className = props.className, theme = props.theme, isRtl = props.isRtl, shouldHighlight = props.shouldHighlight, href = props.href, _m = props.lineColor, lineColor = _m === void 0 ? 'transparent' : _m, toDrawShape = props.toDrawShape, enableReflow = props.enableReflow;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var className = props.className, theme = props.theme, isRtl = props.isRtl, shouldHighlight = props.shouldHighlight, href = props.href, _k = props.lineColor, lineColor = _k === void 0 ? 'transparent' : _k, toDrawShape = props.toDrawShape, enableReflow = props.enableReflow;
     var fonts = theme.fonts;
     return {
         root: [
@@ -22,36 +23,8 @@ var getStyles = function (props) {
             className,
         ],
         chartWrapper: tslib_1.__assign({}, (enableReflow ? { overflow: 'auto' } : {})),
-        axisTitle: [
-            theme.fonts.xSmall,
-            (_a = {
-                    textAlign: 'center',
-                    fontWeight: Styling_1.FontWeights.semibold,
-                    fontStyle: 'normal',
-                    lineHeight: Styling_1.FontSizes.medium,
-                    color: react_1.NeutralColors.gray160,
-                    fill: theme.semanticColors.bodyText
-                },
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        ],
-        axisAnnotation: [
-            theme.fonts.small,
-            (_b = {
-                    textAlign: 'center',
-                    fontWeight: Styling_1.FontWeights.semibold,
-                    fontStyle: 'normal',
-                    lineHeight: Styling_1.FontSizes.medium,
-                    color: react_1.NeutralColors.gray160,
-                    fill: theme.semanticColors.bodyText
-                },
-                _b[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _b),
-        ],
+        axisTitle: (0, index_1.getAxisTitleStyle)(theme, theme.fonts.xSmall),
+        axisAnnotation: (0, index_1.getAxisTitleStyle)(theme, theme.fonts.small),
         xAxis: {
             selectors: {
                 text: [
@@ -59,23 +32,23 @@ var getStyles = function (props) {
                     {
                         fill: theme.semanticColors.bodyText,
                         fontWeight: '600',
-                        selectors: (_c = {},
-                            _c[Styling_1.HighContrastSelector] = {
+                        selectors: (_a = {},
+                            _a[Styling_1.HighContrastSelector] = {
                                 fill: 'CanvasText',
                             },
-                            _c),
+                            _a),
                     },
                 ],
                 line: {
                     opacity: 0.2,
                     stroke: theme.semanticColors.bodyText,
                     width: '1px',
-                    selectors: (_d = {},
-                        _d[Styling_1.HighContrastSelector] = {
+                    selectors: (_b = {},
+                        _b[Styling_1.HighContrastSelector] = {
                             opacity: 0.1,
                             stroke: 'CanvasText',
                         },
-                        _d),
+                        _b),
                 },
                 path: {
                     display: 'none',
@@ -89,11 +62,11 @@ var getStyles = function (props) {
                     {
                         fill: theme.semanticColors.bodyText,
                         fontWeight: '600',
-                        selectors: (_e = {},
-                            _e[Styling_1.HighContrastSelector] = {
+                        selectors: (_c = {},
+                            _c[Styling_1.HighContrastSelector] = {
                                 fill: 'CanvasText',
                             },
-                            _e),
+                            _c),
                     },
                 ],
                 path: {
@@ -102,12 +75,12 @@ var getStyles = function (props) {
                 line: {
                     opacity: 0.2,
                     stroke: theme.semanticColors.bodyText,
-                    selectors: (_f = {},
-                        _f[Styling_1.HighContrastSelector] = {
+                    selectors: (_d = {},
+                        _d[Styling_1.HighContrastSelector] = {
                             opacity: 0.1,
                             stroke: 'CanvasText',
                         },
-                        _f),
+                        _d),
                 },
                 g: [
                     isRtl &&
@@ -151,11 +124,11 @@ var getStyles = function (props) {
                 color: theme.semanticColors.bodyText,
             },
             !toDrawShape && {
-                selectors: (_g = {},
-                    _g[Styling_1.HighContrastSelector] = {
+                selectors: (_e = {},
+                    _e[Styling_1.HighContrastSelector] = {
                         forcedColorAdjust: 'none',
                     },
-                    _g),
+                    _e),
                 borderLeft: "4px solid ".concat(lineColor),
                 paddingLeft: '8px',
             },
@@ -166,40 +139,40 @@ var getStyles = function (props) {
         shapeStyles: {
             marginRight: '8px',
         },
-        calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', selectors: (_h = {},
-                _h[Styling_1.HighContrastSelector] = {
+        calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, fonts.small), { lineHeight: '16px', selectors: (_f = {},
+                _f[Styling_1.HighContrastSelector] = {
                     color: 'CanvasText',
                 },
-                _h), color: theme.semanticColors.bodySubtext }),
+                _f), color: theme.semanticColors.bodySubtext }),
         calloutContentY: [
-            tslib_1.__assign(tslib_1.__assign({}, fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_j = {},
-                    _j[Styling_1.HighContrastSelector] = {
+            tslib_1.__assign(tslib_1.__assign({}, fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_g = {},
+                    _g[Styling_1.HighContrastSelector] = {
                         color: 'CanvasText',
                     },
-                    _j) }),
+                    _g) }),
         ],
         descriptionMessage: [
             theme.fonts.small,
             {
-                selectors: (_k = {},
-                    _k[Styling_1.HighContrastSelector] = {
+                selectors: (_h = {},
+                    _h[Styling_1.HighContrastSelector] = {
                         color: 'CanvasText',
                     },
-                    _k),
+                    _h),
                 color: theme.semanticColors.bodyText,
                 marginTop: '10px',
                 paddingTop: '10px',
                 borderTop: "1px solid ".concat(theme.semanticColors.menuDivider),
             },
         ],
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
-        svgTooltip: (_l = {
+        tooltip: (0, index_1.getTooltipStyle)(theme),
+        svgTooltip: (_j = {
                 fill: theme.semanticColors.bodyBackground
             },
-            _l[Styling_1.HighContrastSelector] = {
+            _j[Styling_1.HighContrastSelector] = {
                 fill: 'Canvas',
             },
-            _l),
+            _j),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CartesianChart.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors, isIE11 } from '@fluentui/react';\n\nconst isIE11Var: boolean = isIE11();\n\nexport const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {\n const {\n className,\n theme,\n isRtl,\n shouldHighlight,\n href,\n lineColor = 'transparent',\n toDrawShape,\n enableReflow,\n } = props;\n const { fonts } = theme!;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n axisTitle: [\n theme.fonts.xSmall,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n axisAnnotation: [\n theme.fonts.small,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n xAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n width: '1px',\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n path: {\n display: 'none',\n },\n },\n },\n yAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n path: {\n display: 'none',\n },\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n g: [\n isRtl &&\n !isIE11Var && {\n textAnchor: 'end',\n },\n ],\n },\n },\n\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n\n legendContainer: [\n {\n marginTop: '8px',\n marginLeft: '20px',\n },\n ],\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n tooltip: {\n ...theme.fonts.medium,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n },\n svgTooltip: {\n fill: theme.semanticColors.bodyBackground,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"CartesianChart.styles.js","sourceRoot":"../src/","sources":["components/CommonComponents/CartesianChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ICartesianChartStyleProps, ICartesianChartStyles } from './CartesianChart.types';\nimport { HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { isIE11 } from '@fluentui/react';\nimport { getAxisTitleStyle, getTooltipStyle } from '../../utilities/index';\n\nconst isIE11Var: boolean = isIE11();\n\nexport const getStyles = (props: ICartesianChartStyleProps): ICartesianChartStyles => {\n const {\n className,\n theme,\n isRtl,\n shouldHighlight,\n href,\n lineColor = 'transparent',\n toDrawShape,\n enableReflow,\n } = props;\n const { fonts } = theme!;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n axisTitle: getAxisTitleStyle(theme!, theme.fonts.xSmall),\n axisAnnotation: getAxisTitleStyle(theme!, theme.fonts.small),\n xAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n width: '1px',\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n path: {\n display: 'none',\n },\n },\n },\n yAxis: {\n selectors: {\n text: [\n theme.fonts.tiny,\n {\n fill: theme.semanticColors.bodyText,\n fontWeight: '600',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n ],\n path: {\n display: 'none',\n },\n line: {\n opacity: 0.2,\n stroke: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n opacity: 0.1,\n stroke: 'CanvasText',\n },\n },\n },\n g: [\n isRtl &&\n !isIE11Var && {\n textAnchor: 'end',\n },\n ],\n },\n },\n\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n\n legendContainer: [\n {\n marginTop: '8px',\n marginLeft: '20px',\n },\n ],\n calloutContentRoot: [\n {\n display: 'grid',\n overflow: 'hidden',\n padding: '11px 16px 10px 16px',\n backgroundColor: theme.semanticColors.bodyBackground,\n backgroundBlendMode: 'normal, luminosity',\n },\n ],\n calloutDateTimeContainer: {\n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n },\n calloutContentX: [\n {\n ...fonts.small,\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.mediumPlus,\n {\n marginTop: '13px',\n color: theme.semanticColors.bodyText,\n },\n !toDrawShape && {\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n borderLeft: `4px solid ${lineColor}`,\n paddingLeft: '8px',\n },\n toDrawShape && {\n display: 'flex',\n },\n ],\n shapeStyles: {\n marginRight: '8px',\n },\n calloutlegendText: {\n ...fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...fonts.mediumPlus,\n fontWeight: 'bold',\n lineHeight: '22px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n descriptionMessage: [\n theme.fonts.small,\n {\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n tooltip: getTooltipStyle(theme),\n svgTooltip: {\n fill: theme.semanticColors.bodyBackground,\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n };\n};\n"]}

package/lib-commonjs/components/DonutChart/DonutChart.styles.js CHANGED Viewed

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var Styling_1 = require("@fluentui/react/lib/Styling");
-var react_1 = require("@fluentui/react");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     var className = props.className, width = props.width, height = props.height, theme = props.theme;
     return {
         root: [
@@ -31,21 +29,7 @@ var getStyles = function (props) {
             paddingTop: '16px',
             width: "".concat(width, "px"),
         },
-        axisAnnotation: [
-            theme.fonts.small,
-            (_a = {
-                    textAlign: 'center',
-                    fontWeight: Styling_1.FontWeights.semibold,
-                    fontStyle: 'normal',
-                    lineHeight: Styling_1.FontSizes.medium,
-                    color: react_1.NeutralColors.gray160,
-                    fill: theme.semanticColors.bodyText
-                },
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        ],
+        axisAnnotation: (0, index_1.getAxisTitleStyle)(theme, theme.fonts.small),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/DonutChart/DonutChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;AACA~~,uDAA2F~~;~~AAC3F~~,~~yCAAgD;AAEzC,~~IAAM,SAAS,GAAG,UAAC,KAA4B;;IAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAClD,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,eAAe;YACf;gBACE,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,KAAK,OAAA;YACL,MAAM,QAAA;YACN,SAAS,EAAE,aAAa;YACxB,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,QAAQ;YACzB,OAAO,EAAE,OAAO;SACjB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;QACD,cAAc,EAAE~~;YACd~~,~~KAAK~~,~~CAAC~~,~~KAAK~~,~~CAAC,~~KAAK~~;;oBAEf~~,~~SAAS,~~EAAE,~~QAAQ;oBACnB~~,~~UAAU,EAAE,qBAAW,~~CAAC,~~QAAQ;oBAChC,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,mBAAS,CAAC,MAAM;oBAC5B,~~KAAK,~~EAAE,qBAAa,~~CAAC,~~OAAO;oBAC5B,IAAI,EAAE,~~KAAK,CAAC~~,cAAc,CAAC,QAAQ;;gBACnC,GAAC,8BAAoB,IAAG~~;~~oBACtB~~,~~IAAI,EAAE,YAAY;iBACnB;;SAEJ;KACF,~~CAAC;AACJ,CAAC,CAAC;~~AA1CW~~,QAAA,SAAS,~~aA0CpB~~","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { ~~FontSizes,~~ ~~FontWeights, HighContrastSelector~~ } from '~~@fluentui~~/~~react/lib/Styling~~';\~~nimport { NeutralColors } from '@fluentui/react';\~~n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, width, height, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n width,\n height,\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: `${width}px`,\n },\n axisAnnotation: ~~[\n~~ theme.fonts.small,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ],\n };\n};\n"]}
1	+ {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA0D;AAEnD,IAAM,SAAS,GAAG,UAAC,KAA4B;IAC5C,IAAA,SAAS,GAA2B,KAAK,UAAhC,EAAE,KAAK,GAAoB,KAAK,MAAzB,EAAE,MAAM,GAAY,KAAK,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAClD,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,eAAe;YACf;gBACE,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,KAAK,OAAA;YACL,MAAM,QAAA;YACN,SAAS,EAAE,aAAa;YACxB,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,QAAQ;YACzB,OAAO,EAAE,OAAO;SACjB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,UAAG,KAAK,OAAI;SACpB;QACD,cAAc,EAAE,IAAA,yBAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;KAC5D,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,SAAS,aA6BpB","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { getAxisTitleStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, width, height, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n width,\n height,\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: `${width}px`,\n },\n axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),\n };\n};\n"]}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js CHANGED Viewed

@@ -1,26 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     var theme = props.theme, href = props.href;
     return {
         opacityChangeOnHover: {
             cursor: href ? 'pointer' : 'default',
         },
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText }),
-        barLabel: {
-            fontSize: Styling_1.FontSizes.small,
-            fontWeight: Styling_1.FontWeights.semibold,
-            fill: theme.palette.neutralPrimary,
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: (0, index_1.getTooltipStyle)(theme),
+        barLabel: (0, index_1.getBarLabelStyle)(theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedVerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.ts"],"names":[],"mappings":"~~;;;;AAAA,uDAA2F~~;~~AAGpF~~,IAAM,SAAS,GAAG,UAAC,KAAyC;;IACzD,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC9B,OAAO;QACL,oBAAoB,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;~~QAED~~,OAAO,~~wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC~~,cAAc,CAAC,cAAc,EAC~~/C,~~YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,~~QAAQ,~~GACrC;QAED,QAAQ,~~EAAE~~;YACR~~,~~QAAQ~~,~~EAAE~~,~~mBAAS~~,~~CAAC,~~KAAK~~;YACzB~~,~~UAAU,EAAE,qBAAW,~~CAAC~~,QAAQ~~;~~YAChC~~,~~IAAI,EAAE,KAAK,~~CAAC~~,OAAO,CAAC,cAAc~~;~~YAClC,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;~~AACJ,CAAC,CAAC;~~AAhCW~~,QAAA,SAAS,~~aAgCpB~~","sourcesContent":["import { ~~FontSizes~~, ~~FontWeights,~~ ~~HighContrastSelector~~ } from '~~@fluentui/react/lib/Styling~~';\nimport { ~~IGroupedVerticalBarChartStyleProps~~, ~~IGroupedVerticalBarChartStyles~~ } from '../../index';\n\nexport const getStyles = (props: IGroupedVerticalBarChartStyleProps): IGroupedVerticalBarChartStyles => {\n const { theme, href } = props;\n return {\n opacityChangeOnHover: {\n cursor: href ? 'pointer' : 'default',\n },\n\n tooltip: ~~{\n ...~~theme~~.fonts.medium~~,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: theme.semanticColors.bodyText,\n ~~},\n\n~~ barLabel: ~~{\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill:~~ theme~~.palette.neutralPrimary~~,\n ~~selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n~~ };\n};\n"]}
1	+ {"version":3,"file":"GroupedVerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA0E;AAEnE,IAAM,SAAS,GAAG,UAAC,KAAyC;IACzD,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC9B,OAAO;QACL,oBAAoB,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;QACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;QAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;KAClC,CAAC;AACJ,CAAC,CAAC;AATW,QAAA,SAAS,aASpB","sourcesContent":["import { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IGroupedVerticalBarChartStyleProps): IGroupedVerticalBarChartStyles => {\n const { theme, href } = props;\n return {\n opacityChangeOnHover: {\n cursor: href ? 'pointer' : 'default',\n },\n tooltip: getTooltipStyle(theme),\n barLabel: getBarLabelStyle(theme),\n };\n};\n"]}

package/lib-commonjs/components/LineChart/LineChart.styles.js CHANGED Viewed

@@ -1,19 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     return {
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: props.theme.semanticColors.bodyText }),
-        markerLabel: {
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: (0, index_1.getTooltipStyle)(props.theme),
+        markerLabel: (0, index_1.getMarkerLabelStyle)(props.theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/LineChart/LineChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":"~~;;;;AAAA,uDAAmE~~;~~AAG5D~~,IAAM,SAAS,GAAG,UAAC,KAA2B;;IACnD,OAAO;QACL,OAAO,~~wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC,KAAM,CAAC,~~cAAc~~,~~CAAC,cAAc,EACtD,YAAY,~~EAAE,~~KAAK~~,~~EACnB~~,~~aAAa~~,~~EAAE,MAAM,EACrB,~~KAAK,~~EAAE,KAAK,~~CAAC,KAAM,CAAC~~,cAAc,CAAC,QAAQ,GAC5C~~;~~QACD~~,~~WAAW,EAAE;YACX,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,~~CAAC;AACJ,CAAC,CAAC;~~AAvBW~~,QAAA,SAAS,~~aAuBpB~~","sourcesContent":["import { ~~HighContrastSelector~~ } from '~~@fluentui/react/lib/Styling~~';\nimport { ~~ILineChartStyleProps~~, ~~ILineChartStyles~~ } from '~~./LineChart.types~~';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\n return {\n tooltip: ~~{\n ...~~props.theme~~!.fonts.medium~~,\n ~~display~~: ~~'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background:~~ props.theme~~!.semanticColors.bodyBackground~~,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: props.theme!.semanticColors.bodyText,\n },\n markerLabel: {\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA6E;AAEtE,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC,KAAM,CAAC;QACtC,WAAW,EAAE,IAAA,2BAAmB,EAAC,KAAK,CAAC,KAAM,CAAC;KAC/C,CAAC;AACJ,CAAC,CAAC;AALW,QAAA,SAAS,aAKpB","sourcesContent":["import { ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\n return {\n tooltip: getTooltipStyle(props.theme!),\n markerLabel: getMarkerLabelStyle(props.theme!),\n };\n};\n"]}

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js CHANGED Viewed

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
 var tslib_1 = require("tslib");
 var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
     var _a, _b, _c;
     var className = props.className, theme = props.theme, pathColor = props.pathColor, enableReflow = props.enableReflow;
@@ -37,7 +38,7 @@ var getStyles = function (props) {
                 },
                 _b),
         },
-        toolTip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+        toolTip: (0, index_1.getTooltipStyle)(props.theme),
         nodeTextContainer: {
             selectors: {
                 text: {

package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;AACA,uDAAmE;~~AAE5D~~,IAAM,SAAS,GAAG,UAAC,KAA6B;;IAC7C,IAAA,SAAS,GAAqC,KAAK,UAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IACpD,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;YACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC7D,WAAW,EAAE,CAAC;YACd,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,QAAQ;iBACf;mBACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;YACf,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,QAAQ;iBACf;mBACF;SACF;QACD,OAAO,~~wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC,KAAM,CAAC~~,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB~~;~~QACD~~,iBAAiB,EAAE;YACjB,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,IAAI,EAAE,YAAY;yBACnB;2BACF;iBACF;aACF;YAED,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;SACnB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,OAAO,CAAC,UAAU;SAC9B;QACD,YAAY,uBACP,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAC9C;KACF,CAAC;AACJ,CAAC,CAAC;~~AApEW~~,QAAA,SAAS,~~aAoEpB~~","sourcesContent":["import { ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { HighContrastSelector } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: ISankeyChartStyleProps): ISankeyChartStyles => {\n const { className, theme, pathColor, enableReflow } = props;\n const { effects } = theme;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n links: {\n stroke: pathColor ? pathColor : theme.palette.black,\n fill: theme ? theme.semanticColors.bodyBackground : '#F5F5F5',\n strokeWidth: 3,\n selectors: {\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n },\n nodes: {\n fill: '#F5F5F5',\n selectors: {\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n },\n toolTip: ~~{\n ...~~props.theme~~!.fonts.medium~~,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: props.theme!.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n ~~},\n~~ nodeTextContainer: {\n selectors: {\n text: {\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n },\n\n marginTop: '4px',\n marginLeft: '8px',\n marginBottom: '4px',\n marginRight: '8px',\n },\n calloutContentRoot: {\n boxShadow: effects.elevation4,\n },\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n };\n};\n"]}
1	+ {"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;AACA,uDAAmE;AACnE,+CAAwD;AAEjD,IAAM,SAAS,GAAG,UAAC,KAA6B;;IAC7C,IAAA,SAAS,GAAqC,KAAK,UAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;IACpD,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAC1B,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,aAAa,EAAE,QAAQ;gBACvB,QAAQ,EAAE,QAAQ;aACnB;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;YACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;YAC7D,WAAW,EAAE,CAAC;YACd,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,QAAQ;iBACf;mBACF;SACF;QACD,KAAK,EAAE;YACL,IAAI,EAAE,SAAS;YACf,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,QAAQ;iBACf;mBACF;SACF;QACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC,KAAM,CAAC;QACtC,iBAAiB,EAAE;YACjB,SAAS,EAAE;gBACT,IAAI,EAAE;oBACJ,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,IAAI,EAAE,YAAY;yBACnB;2BACF;iBACF;aACF;YAED,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,KAAK;YACjB,YAAY,EAAE,KAAK;YACnB,WAAW,EAAE,KAAK;SACnB;QACD,kBAAkB,EAAE;YAClB,SAAS,EAAE,OAAO,CAAC,UAAU;SAC9B;QACD,YAAY,uBACP,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAC9C;KACF,CAAC;AACJ,CAAC,CAAC;AAzDW,QAAA,SAAS,aAyDpB","sourcesContent":["import { ISankeyChartStyleProps, ISankeyChartStyles } from './SankeyChart.types';\nimport { HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: ISankeyChartStyleProps): ISankeyChartStyles => {\n const { className, theme, pathColor, enableReflow } = props;\n const { effects } = theme;\n return {\n root: [\n theme.fonts.medium,\n {\n display: 'flex',\n width: '100%',\n height: '100%',\n flexDirection: 'column',\n overflow: 'hidden',\n },\n className,\n ],\n links: {\n stroke: pathColor ? pathColor : theme.palette.black,\n fill: theme ? theme.semanticColors.bodyBackground : '#F5F5F5',\n strokeWidth: 3,\n selectors: {\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n },\n nodes: {\n fill: '#F5F5F5',\n selectors: {\n [HighContrastSelector]: {\n fill: 'Canvas',\n },\n },\n },\n toolTip: getTooltipStyle(props.theme!),\n nodeTextContainer: {\n selectors: {\n text: {\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n },\n\n marginTop: '4px',\n marginLeft: '8px',\n marginBottom: '4px',\n marginRight: '8px',\n },\n calloutContentRoot: {\n boxShadow: effects.elevation4,\n },\n chartWrapper: {\n ...(enableReflow ? { overflow: 'auto' } : {}),\n },\n };\n};\n"]}

package/lib-commonjs/components/ScatterChart/ScatterChart.styles.js CHANGED Viewed

@@ -1,22 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     return {
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: props.theme.semanticColors.bodyText }),
-        markerLabel: {
-            fontSize: Styling_1.FontSizes.medium,
-            fill: props.theme.semanticColors.bodyText,
-            textAnchor: 'middle',
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: (0, index_1.getTooltipStyle)(props.theme),
+        markerLabel: (0, index_1.getMarkerLabelStyle)(props.theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/ScatterChart/ScatterChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScatterChart.styles.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.styles.ts"],"names":[],"mappings":"~~;;;;AAAA,uDAA8E~~;~~AAGvE~~,IAAM,SAAS,GAAG,UAAC,KAA8B;;IACtD,OAAO;QACL,OAAO,~~wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC,KAAM,CAAC~~,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ,GAC5C~~;~~QACD~~,WAAW,EAAE~~;YACX~~,~~QAAQ~~,~~EAAE~~,~~mBAAS~~,~~CAAC,MAAM;YAC1B,IAAI,EAAE,~~KAAK,CAAC,KAAM,CAAC~~,cAAc,CAAC,QAAQ~~;~~YAC1C~~,~~UAAU,EAAE,QAAQ;YACpB,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,~~CAAC;AACJ,CAAC,CAAC;~~AA1BW~~,QAAA,SAAS,~~aA0BpB~~","sourcesContent":["import { ~~FontSizes~~, ~~HighContrastSelector~~ } from '~~@fluentui/react/lib/Styling~~';\nimport { ~~IScatterChartStyleProps~~, ~~IScatterChartStyles~~ } from '~~./ScatterChart.types~~';\n\nexport const getStyles = (props: IScatterChartStyleProps): IScatterChartStyles => {\n return {\n tooltip: ~~{\n ...~~props.theme~~!.fonts.medium~~,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: props.theme!.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: props.theme!.semanticColors.bodyText,\n ~~},\n~~ markerLabel: ~~{\n fontSize: FontSizes.medium,\n fill:~~ props.theme~~!.semanticColors.bodyText~~,\n ~~textAnchor: 'middle',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n~~ };\n};\n"]}
1	+ {"version":3,"file":"ScatterChart.styles.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA6E;AAEtE,IAAM,SAAS,GAAG,UAAC,KAA8B;IACtD,OAAO;QACL,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC,KAAM,CAAC;QACtC,WAAW,EAAE,IAAA,2BAAmB,EAAC,KAAK,CAAC,KAAM,CAAC;KAC/C,CAAC;AACJ,CAAC,CAAC;AALW,QAAA,SAAS,aAKpB","sourcesContent":["import { IScatterChartStyleProps, IScatterChartStyles } from './ScatterChart.types';\nimport { getMarkerLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IScatterChartStyleProps): IScatterChartStyles => {\n return {\n tooltip: getTooltipStyle(props.theme!),\n markerLabel: getMarkerLabelStyle(props.theme!),\n };\n};\n"]}

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.styles.js CHANGED Viewed

@@ -1,10 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     var shouldHighlight = props.shouldHighlight, theme = props.theme;
     return {
         opacityChangeOnHover: {
@@ -21,17 +19,8 @@ var getStyles = function (props) {
                 transform: 'scaleX(-1)',
             },
         ],
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText }),
-        barLabel: {
-            fontSize: Styling_1.FontSizes.small,
-            fontWeight: Styling_1.FontWeights.semibold,
-            fill: theme.palette.neutralPrimary,
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: (0, index_1.getTooltipStyle)(theme),
+        barLabel: (0, index_1.getBarLabelStyle)(theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":"~~;;;;AAAA,uDAA2F~~;~~AAGpF~~,IAAM,SAAS,GAAG,UAAC,KAAkC;;IAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACzC,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;SACtC;QAED,UAAU,EAAE,EAAE;QAEd,UAAU,EAAE;YACV;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,WAAW,EAAE;YACX;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;~~QAED~~,OAAO,~~wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC~~,cAAc,CAAC,cAAc,EAC~~/C,~~YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,~~QAAQ,~~GACrC;QAED,QAAQ,~~EAAE~~;YACR~~,~~QAAQ~~,~~EAAE~~,~~mBAAS~~,~~CAAC,~~KAAK~~;YACzB~~,~~UAAU,EAAE,qBAAW,~~CAAC~~,QAAQ~~;~~YAChC~~,~~IAAI,EAAE,KAAK,~~CAAC~~,OAAO,CAAC,cAAc~~;~~YAClC,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;~~AACJ,CAAC,CAAC;~~AA7CW~~,QAAA,SAAS,~~aA6CpB~~","sourcesContent":["import { ~~FontSizes~~, ~~FontWeights,~~ ~~HighContrastSelector~~ } from '~~@fluentui/react/lib/Styling~~';\nimport { ~~IVerticalBarChartStyleProps~~, ~~IVerticalBarChartStyles~~ } from '../../index';\n\nexport const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChartStyles => {\n const { shouldHighlight, theme } = props;\n return {\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n },\n\n xAxisTicks: [],\n\n yAxisTicks: [\n {\n transform: 'scaleX(-1)',\n },\n ],\n yAxisDomain: [\n {\n transform: 'scaleX(-1)',\n },\n ],\n\n tooltip: ~~{\n ...~~theme~~.fonts.medium~~,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: theme.semanticColors.bodyText,\n ~~},\n\n~~ barLabel: ~~{\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill:~~ theme~~.palette.neutralPrimary~~,\n ~~selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n~~ };\n};\n"]}
1	+ {"version":3,"file":"VerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA0E;AAEnE,IAAM,SAAS,GAAG,UAAC,KAAkC;IAClD,IAAA,eAAe,GAAY,KAAK,gBAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACzC,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;SACtC;QAED,UAAU,EAAE,EAAE;QAEd,UAAU,EAAE;YACV;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,WAAW,EAAE;YACX;gBACE,SAAS,EAAE,YAAY;aACxB;SACF;QACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;QAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;KAClC,CAAC;AACJ,CAAC,CAAC;AAtBW,QAAA,SAAS,aAsBpB","sourcesContent":["import { IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IVerticalBarChartStyleProps): IVerticalBarChartStyles => {\n const { shouldHighlight, theme } = props;\n return {\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n },\n\n xAxisTicks: [],\n\n yAxisTicks: [\n {\n transform: 'scaleX(-1)',\n },\n ],\n yAxisDomain: [\n {\n transform: 'scaleX(-1)',\n },\n ],\n tooltip: getTooltipStyle(theme),\n barLabel: getBarLabelStyle(theme),\n };\n};\n"]}

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js CHANGED Viewed

@@ -1,27 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
-var tslib_1 = require("tslib");
-var Styling_1 = require("@fluentui/react/lib/Styling");
+var index_1 = require("../../utilities/index");
 var getStyles = function (props) {
-    var _a;
     var shouldHighlight = props.shouldHighlight, href = props.href, theme = props.theme;
     return {
         opacityChangeOnHover: {
             opacity: shouldHighlight ? '' : '0.1',
             cursor: href ? 'pointer' : 'default',
         },
-        tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText }),
-        barLabel: {
-            fontSize: Styling_1.FontSizes.small,
-            fontWeight: Styling_1.FontWeights.semibold,
-            fill: theme.palette.neutralPrimary,
-            selectors: (_a = {},
-                _a[Styling_1.HighContrastSelector] = {
-                    fill: 'CanvasText',
-                },
-                _a),
-        },
+        tooltip: (0, index_1.getTooltipStyle)(theme),
+        barLabel: (0, index_1.getBarLabelStyle)(theme),
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VerticalStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalStackedBarChart/VerticalStackedBarChart.styles.ts"],"names":[],"mappings":"~~;;;;AAAA,uDAA2F~~;~~AAGpF~~,IAAM,SAAS,GAAG,UAAC,KAAyC;;IACzD,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAC/C,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;YACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;~~QAED~~,OAAO,~~wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,~~EAAE,~~MAAM~~,~~EACf~~,~~aAAa~~,~~EAAE,QAAQ,EACvB,OAAO,EAAE,~~KAAK,~~EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,~~CAAC~~,cAAc,CAAC,cAAc,EAC~~/C,~~YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,~~QAAQ,~~GACrC;QAED,QAAQ,~~EAAE~~;YACR~~,~~QAAQ~~,~~EAAE~~,~~mBAAS~~,~~CAAC,~~KAAK~~;YACzB~~,~~UAAU,EAAE,qBAAW,~~CAAC~~,QAAQ~~;~~YAChC~~,~~IAAI,EAAE,KAAK,~~CAAC~~,OAAO,CAAC,cAAc~~;~~YAClC,SAAS;gBACP,GAAC,8BAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;~~AACJ,CAAC,CAAC;~~AAjCW~~,QAAA,SAAS,~~aAiCpB~~","sourcesContent":["import { ~~FontSizes~~, ~~FontWeights,~~ ~~HighContrastSelector~~ } from '~~@fluentui/react/lib/Styling~~';\nimport { ~~IVerticalStackedBarChartStyleProps~~, ~~IVerticalStackedBarChartStyles~~ } from '~~./VerticalStackedBarChart.types~~';\n\nexport const getStyles = (props: IVerticalStackedBarChartStyleProps): IVerticalStackedBarChartStyles => {\n const { shouldHighlight, href, theme } = props;\n return {\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n\n tooltip: ~~{\n ...~~theme~~.fonts.medium~~,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: theme.semanticColors.bodyText,\n ~~},\n\n~~ barLabel: ~~{\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill:~~ theme~~.palette.neutralPrimary~~,\n ~~selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n~~ };\n};\n"]}
1	+ {"version":3,"file":"VerticalStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalStackedBarChart/VerticalStackedBarChart.styles.ts"],"names":[],"mappings":";;;AACA,+CAA0E;AAEnE,IAAM,SAAS,GAAG,UAAC,KAAyC;IACzD,IAAA,eAAe,GAAkB,KAAK,gBAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAC/C,OAAO;QACL,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;YACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;QACD,OAAO,EAAE,IAAA,uBAAe,EAAC,KAAK,CAAC;QAC/B,QAAQ,EAAE,IAAA,wBAAgB,EAAC,KAAK,CAAC;KAClC,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,SAAS,aAUpB","sourcesContent":["import { IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles } from './VerticalStackedBarChart.types';\nimport { getBarLabelStyle, getTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IVerticalStackedBarChartStyleProps): IVerticalStackedBarChartStyles => {\n const { shouldHighlight, href, theme } = props;\n return {\n opacityChangeOnHover: {\n opacity: shouldHighlight ? '' : '0.1',\n cursor: href ? 'pointer' : 'default',\n },\n tooltip: getTooltipStyle(theme),\n barLabel: getBarLabelStyle(theme),\n };\n};\n"]}

package/lib-commonjs/utilities/Common.styles.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import type { IRawStyle } from '@fluentui/merge-styles';
+export declare const getTooltipStyle: (theme: ITheme) => IStyle;
+export declare const getAxisTitleStyle: (theme: ITheme, font: IRawStyle) => IStyle;
+export declare const getBarLabelStyle: (theme: ITheme) => IStyle;
+export declare const getMarkerLabelStyle: (theme: ITheme) => IStyle;

package/lib-commonjs/utilities/Common.styles.js ADDED Viewed

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkerLabelStyle = exports.getBarLabelStyle = exports.getAxisTitleStyle = exports.getTooltipStyle = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var react_1 = require("@fluentui/react");
+var getTooltipStyle = function (theme) {
+    return tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: theme.semanticColors.bodyText });
+};
+exports.getTooltipStyle = getTooltipStyle;
+var getAxisTitleStyle = function (theme, font) {
+    var _a;
+    return [
+        font,
+        (_a = {
+                textAlign: 'center',
+                fontWeight: Styling_1.FontWeights.semibold,
+                fontStyle: 'normal',
+                lineHeight: Styling_1.FontSizes.medium,
+                color: react_1.NeutralColors.gray160,
+                fill: theme.semanticColors.bodyText
+            },
+            _a[Styling_1.HighContrastSelector] = {
+                fill: 'CanvasText',
+            },
+            _a),
+    ];
+};
+exports.getAxisTitleStyle = getAxisTitleStyle;
+var getBarLabelStyle = function (theme) {
+    var _a;
+    return {
+        fontSize: Styling_1.FontSizes.small,
+        fontWeight: Styling_1.FontWeights.semibold,
+        fill: theme.palette.neutralPrimary,
+        selectors: (_a = {},
+            _a[Styling_1.HighContrastSelector] = {
+                fill: 'CanvasText',
+            },
+            _a),
+    };
+};
+exports.getBarLabelStyle = getBarLabelStyle;
+var getMarkerLabelStyle = function (theme) {
+    var _a;
+    return {
+        fontSize: Styling_1.FontSizes.medium,
+        fill: theme.semanticColors.bodyText,
+        textAnchor: 'middle',
+        selectors: (_a = {},
+            _a[Styling_1.HighContrastSelector] = {
+                fill: 'CanvasText',
+            },
+            _a),
+    };
+};
+exports.getMarkerLabelStyle = getMarkerLabelStyle;
+//# sourceMappingURL=Common.styles.js.map

package/lib-commonjs/utilities/Common.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Common.styles.js","sourceRoot":"../src/","sources":["utilities/Common.styles.ts"],"names":[],"mappings":";;;;AAEA,uDAA2F;AAC3F,yCAAgD;AAEzC,IAAM,eAAe,GAAG,UAAC,KAAa;IAC3C,6CACK,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,IACpC;AACJ,CAAC,CAAC;AAdW,QAAA,eAAe,mBAc1B;AAEK,IAAM,iBAAiB,GAAG,UAAC,KAAa,EAAE,IAAe;;IAC9D,OAAO;QACL,IAAI;;gBAEF,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,SAAS,EAAE,QAAQ;gBACnB,UAAU,EAAE,mBAAS,CAAC,MAAM;gBAC5B,KAAK,EAAE,qBAAa,CAAC,OAAO;gBAC5B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;;YACnC,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;;KAEJ,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,iBAAiB,qBAe5B;AAEK,IAAM,gBAAgB,GAAG,UAAC,KAAa;;IAC5C,OAAO;QACL,QAAQ,EAAE,mBAAS,CAAC,KAAK;QACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;QAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAClC,SAAS;YACP,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,gBAAgB,oBAW3B;AAEK,IAAM,mBAAmB,GAAG,UAAC,KAAa;;IAC/C,OAAO;QACL,QAAQ,EAAE,mBAAS,CAAC,MAAM;QAC1B,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;QACnC,UAAU,EAAE,QAAQ;QACpB,SAAS;YACP,GAAC,8BAAoB,IAAG;gBACtB,IAAI,EAAE,YAAY;aACnB;eACF;KACF,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,mBAAmB,uBAW9B","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport type { IRawStyle } from '@fluentui/merge-styles';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { NeutralColors } from '@fluentui/react';\n\nexport const getTooltipStyle = (theme: ITheme): IStyle => {\n return {\n ...theme.fonts.medium,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n color: theme.semanticColors.bodyText,\n };\n};\n\nexport const getAxisTitleStyle = (theme: ITheme, font: IRawStyle): IStyle => {\n return [\n font,\n {\n textAlign: 'center',\n fontWeight: FontWeights.semibold,\n fontStyle: 'normal',\n lineHeight: FontSizes.medium,\n color: NeutralColors.gray160,\n fill: theme.semanticColors.bodyText,\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n ];\n};\n\nexport const getBarLabelStyle = (theme: ITheme): IStyle => {\n return {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n };\n};\n\nexport const getMarkerLabelStyle = (theme: ITheme): IStyle => {\n return {\n fontSize: FontSizes.medium,\n fill: theme.semanticColors.bodyText,\n textAnchor: 'middle',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n };\n};\n"]}

package/lib-commonjs/utilities/SVGTooltipText.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ITooltipHost, ITooltipProps, TooltipDelay } from '@fluentui/react/lib/Tooltip';
 import { ITheme } from '@fluentui/react';
-interface ISVGTooltipTextProps {
+export 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