@fluentui/react-charting 5.24.4 → 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.
- package/CHANGELOG.json +55 -1
- package/CHANGELOG.md +24 -2
- package/config/tests.js +0 -12
- package/dist/react-charting.d.ts +4 -0
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +1 -0
- package/lib/components/AreaChart/AreaChart.styles.js +2 -2
- package/lib/components/AreaChart/AreaChart.styles.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.base.js +28 -21
- package/lib/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.styles.js +35 -58
- package/lib/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +38 -16
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +215 -139
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.base.js +1 -0
- package/lib/components/DonutChart/DonutChart.base.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.styles.js +2 -0
- package/lib/components/DonutChart/DonutChart.styles.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.types.d.ts +4 -0
- package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js +3 -14
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map +1 -1
- package/lib/components/LineChart/LineChart.styles.js +3 -11
- package/lib/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib/components/SankeyChart/SankeyChart.styles.js +2 -1
- package/lib/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.styles.js +3 -14
- package/lib/components/ScatterChart/ScatterChart.styles.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.styles.js +3 -14
- package/lib/components/VerticalBarChart/VerticalBarChart.styles.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js +3 -14
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map +1 -1
- package/lib/utilities/Common.styles.d.ts +6 -0
- package/lib/utilities/Common.styles.js +51 -0
- package/lib/utilities/Common.styles.js.map +1 -0
- package/lib/utilities/SVGTooltipText.d.ts +1 -1
- package/lib/utilities/SVGTooltipText.js +3 -3
- package/lib/utilities/SVGTooltipText.js.map +1 -1
- package/lib/utilities/index.d.ts +1 -0
- package/lib/utilities/index.js +1 -0
- package/lib/utilities/index.js.map +1 -1
- package/lib-amd/components/AreaChart/AreaChart.styles.js +2 -2
- package/lib-amd/components/AreaChart/AreaChart.styles.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.base.js +28 -21
- package/lib-amd/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.styles.js +33 -57
- package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +37 -15
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +216 -139
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/DonutChart/DonutChart.base.js +1 -0
- package/lib-amd/components/DonutChart/DonutChart.base.js.map +1 -1
- package/lib-amd/components/DonutChart/DonutChart.styles.js +2 -1
- package/lib-amd/components/DonutChart/DonutChart.styles.js.map +1 -1
- package/lib-amd/components/DonutChart/DonutChart.types.d.ts +4 -0
- package/lib-amd/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
- package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
- package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js +3 -13
- package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.styles.js +3 -10
- package/lib-amd/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib-amd/components/SankeyChart/SankeyChart.styles.js +2 -2
- package/lib-amd/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib-amd/components/ScatterChart/ScatterChart.styles.js +3 -13
- package/lib-amd/components/ScatterChart/ScatterChart.styles.js.map +1 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.styles.js +3 -13
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.styles.js.map +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js +3 -13
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map +1 -1
- package/lib-amd/utilities/Common.styles.d.ts +6 -0
- package/lib-amd/utilities/Common.styles.js +57 -0
- package/lib-amd/utilities/Common.styles.js.map +1 -0
- package/lib-amd/utilities/SVGTooltipText.d.ts +1 -1
- package/lib-amd/utilities/SVGTooltipText.js +3 -3
- package/lib-amd/utilities/SVGTooltipText.js.map +1 -1
- package/lib-amd/utilities/index.d.ts +1 -0
- package/lib-amd/utilities/index.js +2 -1
- package/lib-amd/utilities/index.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.styles.js +2 -2
- package/lib-commonjs/components/AreaChart/AreaChart.styles.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js +28 -21
- package/lib-commonjs/components/CommonComponents/CartesianChart.base.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js +33 -56
- package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +37 -15
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.d.ts +13 -3
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +216 -139
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.base.js +1 -0
- package/lib-commonjs/components/DonutChart/DonutChart.base.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.styles.js +2 -0
- package/lib-commonjs/components/DonutChart/DonutChart.styles.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.types.d.ts +4 -0
- package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js +3 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js +3 -14
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.styles.js +3 -11
- package/lib-commonjs/components/LineChart/LineChart.styles.js.map +1 -1
- package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js +2 -1
- package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.styles.js +3 -14
- package/lib-commonjs/components/ScatterChart/ScatterChart.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js +3 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.styles.js +3 -14
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.styles.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js +3 -14
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map +1 -1
- package/lib-commonjs/utilities/Common.styles.d.ts +6 -0
- package/lib-commonjs/utilities/Common.styles.js +58 -0
- package/lib-commonjs/utilities/Common.styles.js.map +1 -0
- package/lib-commonjs/utilities/SVGTooltipText.d.ts +1 -1
- package/lib-commonjs/utilities/SVGTooltipText.js +3 -3
- package/lib-commonjs/utilities/SVGTooltipText.js.map +1 -1
- package/lib-commonjs/utilities/index.d.ts +1 -0
- package/lib-commonjs/utilities/index.js +1 -0
- package/lib-commonjs/utilities/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/DonutChart/DonutChart.types.ts +5 -0
|
@@ -1,27 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.getStyles = void 0;
|
|
4
|
-
var
|
|
5
|
-
var Styling_1 = require("@fluentui/react/lib/Styling");
|
|
4
|
+
var index_1 = require("../../utilities/index");
|
|
6
5
|
var getStyles = function (props) {
|
|
7
|
-
var _a;
|
|
8
6
|
var shouldHighlight = props.shouldHighlight, href = props.href, theme = props.theme;
|
|
9
7
|
return {
|
|
10
8
|
opacityChangeOnHover: {
|
|
11
9
|
opacity: shouldHighlight ? '' : '0.1',
|
|
12
10
|
cursor: href ? 'pointer' : 'default',
|
|
13
11
|
},
|
|
14
|
-
tooltip:
|
|
15
|
-
barLabel:
|
|
16
|
-
fontSize: Styling_1.FontSizes.small,
|
|
17
|
-
fontWeight: Styling_1.FontWeights.semibold,
|
|
18
|
-
fill: theme.palette.neutralPrimary,
|
|
19
|
-
selectors: (_a = {},
|
|
20
|
-
_a[Styling_1.HighContrastSelector] = {
|
|
21
|
-
fill: 'CanvasText',
|
|
22
|
-
},
|
|
23
|
-
_a),
|
|
24
|
-
},
|
|
12
|
+
tooltip: (0, index_1.getTooltipStyle)(theme),
|
|
13
|
+
barLabel: (0, index_1.getBarLabelStyle)(theme),
|
|
25
14
|
};
|
|
26
15
|
};
|
|
27
16
|
exports.getStyles = getStyles;
|
package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/VerticalStackedBarChart/VerticalStackedBarChart.styles.ts"],"names":[],"mappings":"
|
|
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"]}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
|
|
2
|
+
import type { IRawStyle } from '@fluentui/merge-styles';
|
|
3
|
+
export declare const getTooltipStyle: (theme: ITheme) => IStyle;
|
|
4
|
+
export declare const getAxisTitleStyle: (theme: ITheme, font: IRawStyle) => IStyle;
|
|
5
|
+
export declare const getBarLabelStyle: (theme: ITheme) => IStyle;
|
|
6
|
+
export declare const getMarkerLabelStyle: (theme: ITheme) => IStyle;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getMarkerLabelStyle = exports.getBarLabelStyle = exports.getAxisTitleStyle = exports.getTooltipStyle = void 0;
|
|
4
|
+
var tslib_1 = require("tslib");
|
|
5
|
+
var Styling_1 = require("@fluentui/react/lib/Styling");
|
|
6
|
+
var react_1 = require("@fluentui/react");
|
|
7
|
+
var getTooltipStyle = function (theme) {
|
|
8
|
+
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 });
|
|
9
|
+
};
|
|
10
|
+
exports.getTooltipStyle = getTooltipStyle;
|
|
11
|
+
var getAxisTitleStyle = function (theme, font) {
|
|
12
|
+
var _a;
|
|
13
|
+
return [
|
|
14
|
+
font,
|
|
15
|
+
(_a = {
|
|
16
|
+
textAlign: 'center',
|
|
17
|
+
fontWeight: Styling_1.FontWeights.semibold,
|
|
18
|
+
fontStyle: 'normal',
|
|
19
|
+
lineHeight: Styling_1.FontSizes.medium,
|
|
20
|
+
color: react_1.NeutralColors.gray160,
|
|
21
|
+
fill: theme.semanticColors.bodyText
|
|
22
|
+
},
|
|
23
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
24
|
+
fill: 'CanvasText',
|
|
25
|
+
},
|
|
26
|
+
_a),
|
|
27
|
+
];
|
|
28
|
+
};
|
|
29
|
+
exports.getAxisTitleStyle = getAxisTitleStyle;
|
|
30
|
+
var getBarLabelStyle = function (theme) {
|
|
31
|
+
var _a;
|
|
32
|
+
return {
|
|
33
|
+
fontSize: Styling_1.FontSizes.small,
|
|
34
|
+
fontWeight: Styling_1.FontWeights.semibold,
|
|
35
|
+
fill: theme.palette.neutralPrimary,
|
|
36
|
+
selectors: (_a = {},
|
|
37
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
38
|
+
fill: 'CanvasText',
|
|
39
|
+
},
|
|
40
|
+
_a),
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
exports.getBarLabelStyle = getBarLabelStyle;
|
|
44
|
+
var getMarkerLabelStyle = function (theme) {
|
|
45
|
+
var _a;
|
|
46
|
+
return {
|
|
47
|
+
fontSize: Styling_1.FontSizes.medium,
|
|
48
|
+
fill: theme.semanticColors.bodyText,
|
|
49
|
+
textAnchor: 'middle',
|
|
50
|
+
selectors: (_a = {},
|
|
51
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
52
|
+
fill: 'CanvasText',
|
|
53
|
+
},
|
|
54
|
+
_a),
|
|
55
|
+
};
|
|
56
|
+
};
|
|
57
|
+
exports.getMarkerLabelStyle = getMarkerLabelStyle;
|
|
58
|
+
//# sourceMappingURL=Common.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { ITooltipHost, ITooltipProps, TooltipDelay } from '@fluentui/react/lib/Tooltip';
|
|
3
3
|
import { ITheme } from '@fluentui/react';
|
|
4
|
-
interface ISVGTooltipTextProps {
|
|
4
|
+
export interface ISVGTooltipTextProps {
|
|
5
5
|
/**
|
|
6
6
|
* Number of milliseconds to delay closing the tooltip, so that the user has time to hover over
|
|
7
7
|
* the tooltip and interact with it. Hovering over the tooltip will count as hovering over the
|
|
@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
|
|
|
5
5
|
var React = require("react");
|
|
6
6
|
var Tooltip_1 = require("@fluentui/react/lib/Tooltip");
|
|
7
7
|
var Utilities_1 = require("../Utilities");
|
|
8
|
-
var PADDING =
|
|
8
|
+
var PADDING = 3;
|
|
9
9
|
/**
|
|
10
10
|
* Component to render an SVG text element with an optional tooltip.
|
|
11
11
|
* The tooltip appears on hovering and focusing the element when its content overflows.
|
|
@@ -162,9 +162,9 @@ var SVGTooltipText = /** @class */ (function (_super) {
|
|
|
162
162
|
}, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, tooltipProps);
|
|
163
163
|
var showTooltip = (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);
|
|
164
164
|
var rectX = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.x) === 'number' ? textProps.x : 0) - (textWidth !== null && textWidth !== void 0 ? textWidth : 0) / 2 - PADDING;
|
|
165
|
-
var rectY = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.y) === 'number' ? textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - PADDING;
|
|
165
|
+
var rectY = (typeof (textProps === null || textProps === void 0 ? void 0 : textProps.y) === 'number' ? textProps.y : 0) - (textHeight !== null && textHeight !== void 0 ? textHeight : 0) / 2 - 2 * PADDING;
|
|
166
166
|
return (React.createElement(React.Fragment, null,
|
|
167
|
-
showBackground && (React.createElement("rect", { x: rectX, y: rectY, width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING, height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) +
|
|
167
|
+
showBackground && (React.createElement("rect", { x: rectX, y: rectY, width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING, height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + PADDING, transform: textProps === null || textProps === void 0 ? void 0 : textProps.transform, className: this.props.className })),
|
|
168
168
|
React.createElement("text", tslib_1.__assign({}, textProps, { id: this._tooltipHostId, ref: this._tooltipHost, onFocusCapture: this._onTooltipFocus, onBlurCapture: this._onTooltipBlur, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "data-is-focusable": shouldReceiveFocus && this.state.isOverflowing }), content),
|
|
169
169
|
showTooltip && React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipRenderProps))));
|
|
170
170
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\nimport { ITheme } from '@fluentui/react';\n\ninterface ISVGTooltipTextProps {\n /**\n * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n * host, so that the tooltip will stay open if the user is actively interacting with it.\n */\n closeDelay?: number;\n\n /**\n * Content to display in the Tooltip.\n */\n content?: string;\n\n /**\n * Length of delay before showing the tooltip on hover.\n * @defaultvalue TooltipDelay.medium\n */\n delay?: TooltipDelay;\n\n /**\n * Additional properties to pass through for Tooltip.\n */\n tooltipProps?: ITooltipProps;\n\n /**\n * Additional properties to pass through for SVG <text>.\n */\n textProps?: React.SVGAttributes<SVGTextElement>;\n\n /**\n * Max width of text\n */\n maxWidth?: number;\n\n /**\n * Max height of text\n */\n maxHeight?: number;\n\n /**\n * Pass false to make prevent the tooptip from receiving focus through keyboard\n * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to\n * avoid repitition of the same datapoint\n * @defaultvalue true\n */\n shouldReceiveFocus?: boolean;\n\n /**\n * Pass true to show tooltip directly\n * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,\n * to directly show the tooltip from this component\n * @defaultvalue false\n */\n isTooltipVisibleProp?: boolean;\n\n /**\n * Function to wrap text within specified width and height\n * and return a boolean value indicating whether the text overflowed\n */\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n\n /**\n * Theme provided by High Order Component\n */\n theme?: ITheme;\n\n /**\n * @default false\n * Prop to selectively display the tooltip background\n */\n showBackground?: boolean;\n\n /**\n * Prop to set classname\n */\n className?: string;\n}\n\ninterface ISVGTooltipTextState {\n isTooltipVisible: boolean;\n isOverflowing: boolean;\n textX?: number;\n textY?: number;\n textWidth?: number;\n textHeight?: number;\n}\n\nconst PADDING = 4;\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n implements ITooltipHost\n{\n public static defaultProps = {\n delay: TooltipDelay.medium,\n };\n\n private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n /** The element that gets the hover events */\n private _tooltipHost = React.createRef<SVGTextElement>();\n\n private _async: Async;\n private _dismissTimerId: number;\n private _openTimerId: number;\n private _tooltipHostId = getId('tooltip-host');\n private _ignoreNextFocusEvent: boolean;\n\n constructor(props: ISVGTooltipTextProps) {\n super(props);\n\n this.state = {\n isTooltipVisible: false,\n isOverflowing: false,\n };\n\n this._async = new Async(this);\n }\n\n public render(): React.ReactNode {\n const { content, tooltipProps, textProps, shouldReceiveFocus = true, showBackground = false } = this.props;\n const { isTooltipVisible, textWidth, textHeight } = this.state;\n const tooltipRenderProps: ITooltipProps = {\n content,\n targetElement: this._getTargetElement(),\n calloutProps: {\n onDismiss: this._hideTooltip,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n },\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n ...tooltipProps,\n };\n\n const showTooltip =\n (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);\n const rectX = (typeof textProps?.x === 'number' ? textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof textProps?.y === 'number' ? textProps.y : 0) - (textHeight ?? 0) / 2 - PADDING;\n return (\n <>\n {showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + 2 * PADDING}\n transform={textProps?.transform}\n className={this.props.className}\n />\n )}\n <text\n {...textProps}\n id={this._tooltipHostId}\n ref={this._tooltipHost}\n onFocusCapture={this._onTooltipFocus}\n onBlurCapture={this._onTooltipBlur}\n onMouseEnter={this._onTooltipMouseEnter}\n onMouseLeave={this._onTooltipMouseLeave}\n onKeyDown={this._onTooltipKeyDown}\n data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}\n >\n {content}\n </text>\n {showTooltip && <Tooltip {...tooltipRenderProps} />}\n </>\n );\n }\n\n public componentDidMount(): void {\n this._wrapContent();\n this._measureText();\n }\n\n public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n this._wrapContent();\n this._measureText();\n }\n }\n\n public componentWillUnmount(): void {\n if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n SVGTooltipText._currentVisibleTooltip = undefined;\n }\n\n this._async.dispose();\n }\n\n public show = (): void => {\n this._toggleTooltip(true);\n };\n\n public dismiss = (): void => {\n this._hideTooltip();\n };\n\n private _measureText = (): void => {\n if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') {\n const bbox = this._tooltipHost.current.getBBox();\n this.setState({\n textX: bbox.x,\n textY: bbox.y,\n textWidth: bbox.width,\n textHeight: bbox.height,\n });\n }\n };\n\n private _getTargetElement = (): HTMLElement | undefined => {\n if (!this._tooltipHost.current) {\n return undefined;\n }\n\n return this._tooltipHost.current as unknown as HTMLElement;\n };\n\n private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n if (this._ignoreNextFocusEvent) {\n this._ignoreNextFocusEvent = false;\n return;\n }\n\n this._onTooltipMouseEnter(ev);\n };\n\n private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement,\n // and ignoring when it next gets focus back.\n // See https://github.com/microsoft/fluentui/issues/13541\n this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n this._dismissTimerId = this._async.setTimeout(() => {\n this._hideTooltip();\n }, 0);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onTooltipMouseEnter = (ev: any): void => {\n const { delay } = this.props;\n\n if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n SVGTooltipText._currentVisibleTooltip.dismiss();\n }\n SVGTooltipText._currentVisibleTooltip = this;\n\n if (!this.state.isOverflowing) {\n return;\n }\n\n if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (delay !== TooltipDelay.zero) {\n const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n this._openTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(true);\n }, delayTime);\n } else {\n this._toggleTooltip(true);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onTooltipMouseLeave = (ev: any): void => {\n const { closeDelay } = this.props;\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (closeDelay) {\n this._dismissTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(false);\n }, closeDelay);\n } else {\n this._toggleTooltip(false);\n }\n\n if (SVGTooltipText._currentVisibleTooltip === this) {\n SVGTooltipText._currentVisibleTooltip = undefined;\n }\n };\n\n private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n this._hideTooltip();\n ev.stopPropagation();\n }\n };\n\n private _clearDismissTimer = (): void => {\n this._async.clearTimeout(this._dismissTimerId);\n };\n\n private _clearOpenTimer = (): void => {\n this._async.clearTimeout(this._openTimerId);\n };\n\n private _hideTooltip = (): void => {\n this._clearOpenTimer();\n this._clearDismissTimer();\n this._toggleTooltip(false);\n };\n\n private _toggleTooltip = (isTooltipVisible: boolean): void => {\n if (this.state.isTooltipVisible !== isTooltipVisible) {\n this.setState({ isTooltipVisible });\n }\n };\n\n private _getDelayTime = (delay: TooltipDelay): number => {\n switch (delay) {\n case TooltipDelay.medium:\n return 300;\n case TooltipDelay.long:\n return 500;\n default:\n return 0;\n }\n };\n\n private _wrapContent = () => {\n const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n let isOverflowing = false;\n if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n isOverflowing = true;\n }\n\n if (this.state.isOverflowing !== isOverflowing) {\n this.setState({ isOverflowing });\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\nimport { ITheme } from '@fluentui/react';\n\nexport interface ISVGTooltipTextProps {\n /**\n * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n * host, so that the tooltip will stay open if the user is actively interacting with it.\n */\n closeDelay?: number;\n\n /**\n * Content to display in the Tooltip.\n */\n content?: string;\n\n /**\n * Length of delay before showing the tooltip on hover.\n * @defaultvalue TooltipDelay.medium\n */\n delay?: TooltipDelay;\n\n /**\n * Additional properties to pass through for Tooltip.\n */\n tooltipProps?: ITooltipProps;\n\n /**\n * Additional properties to pass through for SVG <text>.\n */\n textProps?: React.SVGAttributes<SVGTextElement>;\n\n /**\n * Max width of text\n */\n maxWidth?: number;\n\n /**\n * Max height of text\n */\n maxHeight?: number;\n\n /**\n * Pass false to make prevent the tooptip from receiving focus through keyboard\n * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to\n * avoid repitition of the same datapoint\n * @defaultvalue true\n */\n shouldReceiveFocus?: boolean;\n\n /**\n * Pass true to show tooltip directly\n * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,\n * to directly show the tooltip from this component\n * @defaultvalue false\n */\n isTooltipVisibleProp?: boolean;\n\n /**\n * Function to wrap text within specified width and height\n * and return a boolean value indicating whether the text overflowed\n */\n wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n\n /**\n * Theme provided by High Order Component\n */\n theme?: ITheme;\n\n /**\n * @default false\n * Prop to selectively display the tooltip background\n */\n showBackground?: boolean;\n\n /**\n * Prop to set classname\n */\n className?: string;\n}\n\ninterface ISVGTooltipTextState {\n isTooltipVisible: boolean;\n isOverflowing: boolean;\n textX?: number;\n textY?: number;\n textWidth?: number;\n textHeight?: number;\n}\n\nconst PADDING = 3;\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n implements ITooltipHost\n{\n public static defaultProps = {\n delay: TooltipDelay.medium,\n };\n\n private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n /** The element that gets the hover events */\n private _tooltipHost = React.createRef<SVGTextElement>();\n\n private _async: Async;\n private _dismissTimerId: number;\n private _openTimerId: number;\n private _tooltipHostId = getId('tooltip-host');\n private _ignoreNextFocusEvent: boolean;\n\n constructor(props: ISVGTooltipTextProps) {\n super(props);\n\n this.state = {\n isTooltipVisible: false,\n isOverflowing: false,\n };\n\n this._async = new Async(this);\n }\n\n public render(): React.ReactNode {\n const { content, tooltipProps, textProps, shouldReceiveFocus = true, showBackground = false } = this.props;\n const { isTooltipVisible, textWidth, textHeight } = this.state;\n const tooltipRenderProps: ITooltipProps = {\n content,\n targetElement: this._getTargetElement(),\n calloutProps: {\n onDismiss: this._hideTooltip,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n },\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n ...tooltipProps,\n };\n\n const showTooltip =\n (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);\n const rectX = (typeof textProps?.x === 'number' ? textProps.x : 0) - (textWidth ?? 0) / 2 - PADDING;\n const rectY = (typeof textProps?.y === 'number' ? textProps.y : 0) - (textHeight ?? 0) / 2 - 2 * PADDING;\n return (\n <>\n {showBackground && (\n <rect\n x={rectX}\n y={rectY}\n width={(textWidth ?? 0) + 2 * PADDING}\n height={(textHeight ?? 0) + PADDING}\n transform={textProps?.transform}\n className={this.props.className}\n />\n )}\n <text\n {...textProps}\n id={this._tooltipHostId}\n ref={this._tooltipHost}\n onFocusCapture={this._onTooltipFocus}\n onBlurCapture={this._onTooltipBlur}\n onMouseEnter={this._onTooltipMouseEnter}\n onMouseLeave={this._onTooltipMouseLeave}\n onKeyDown={this._onTooltipKeyDown}\n data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}\n >\n {content}\n </text>\n {showTooltip && <Tooltip {...tooltipRenderProps} />}\n </>\n );\n }\n\n public componentDidMount(): void {\n this._wrapContent();\n this._measureText();\n }\n\n public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n this._wrapContent();\n this._measureText();\n }\n }\n\n public componentWillUnmount(): void {\n if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n SVGTooltipText._currentVisibleTooltip = undefined;\n }\n\n this._async.dispose();\n }\n\n public show = (): void => {\n this._toggleTooltip(true);\n };\n\n public dismiss = (): void => {\n this._hideTooltip();\n };\n\n private _measureText = (): void => {\n if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') {\n const bbox = this._tooltipHost.current.getBBox();\n this.setState({\n textX: bbox.x,\n textY: bbox.y,\n textWidth: bbox.width,\n textHeight: bbox.height,\n });\n }\n };\n\n private _getTargetElement = (): HTMLElement | undefined => {\n if (!this._tooltipHost.current) {\n return undefined;\n }\n\n return this._tooltipHost.current as unknown as HTMLElement;\n };\n\n private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n if (this._ignoreNextFocusEvent) {\n this._ignoreNextFocusEvent = false;\n return;\n }\n\n this._onTooltipMouseEnter(ev);\n };\n\n private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement,\n // and ignoring when it next gets focus back.\n // See https://github.com/microsoft/fluentui/issues/13541\n this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n this._dismissTimerId = this._async.setTimeout(() => {\n this._hideTooltip();\n }, 0);\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onTooltipMouseEnter = (ev: any): void => {\n const { delay } = this.props;\n\n if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n SVGTooltipText._currentVisibleTooltip.dismiss();\n }\n SVGTooltipText._currentVisibleTooltip = this;\n\n if (!this.state.isOverflowing) {\n return;\n }\n\n if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (delay !== TooltipDelay.zero) {\n const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n this._openTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(true);\n }, delayTime);\n } else {\n this._toggleTooltip(true);\n }\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _onTooltipMouseLeave = (ev: any): void => {\n const { closeDelay } = this.props;\n\n this._clearDismissTimer();\n this._clearOpenTimer();\n\n if (closeDelay) {\n this._dismissTimerId = this._async.setTimeout(() => {\n this._toggleTooltip(false);\n }, closeDelay);\n } else {\n this._toggleTooltip(false);\n }\n\n if (SVGTooltipText._currentVisibleTooltip === this) {\n SVGTooltipText._currentVisibleTooltip = undefined;\n }\n };\n\n private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n this._hideTooltip();\n ev.stopPropagation();\n }\n };\n\n private _clearDismissTimer = (): void => {\n this._async.clearTimeout(this._dismissTimerId);\n };\n\n private _clearOpenTimer = (): void => {\n this._async.clearTimeout(this._openTimerId);\n };\n\n private _hideTooltip = (): void => {\n this._clearOpenTimer();\n this._clearDismissTimer();\n this._toggleTooltip(false);\n };\n\n private _toggleTooltip = (isTooltipVisible: boolean): void => {\n if (this.state.isTooltipVisible !== isTooltipVisible) {\n this.setState({ isTooltipVisible });\n }\n };\n\n private _getDelayTime = (delay: TooltipDelay): number => {\n switch (delay) {\n case TooltipDelay.medium:\n return 300;\n case TooltipDelay.long:\n return 500;\n default:\n return 0;\n }\n };\n\n private _wrapContent = () => {\n const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n let isOverflowing = false;\n if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n isOverflowing = true;\n }\n\n if (this.state.isOverflowing !== isOverflowing) {\n this.setState({ isOverflowing });\n }\n };\n}\n"]}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
var tslib_1 = require("tslib");
|
|
4
4
|
tslib_1.__exportStar(require("./ChartHoverCard/index"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./Common.styles"), exports);
|
|
5
6
|
tslib_1.__exportStar(require("./utilities"), exports);
|
|
6
7
|
tslib_1.__exportStar(require("./colors"), exports);
|
|
7
8
|
tslib_1.__exportStar(require("./gradients"), exports);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;AAAA,iEAAuC;AACvC,sDAA4B;AAC5B,mDAAyB;AACzB,sDAA4B;AAC5B,sDAA4B","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './utilities';\nexport * from './colors';\nexport * from './gradients';\nexport * from './vbc-utils';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utilities/index.ts"],"names":[],"mappings":";;;AAAA,iEAAuC;AACvC,0DAAgC;AAChC,sDAA4B;AAC5B,mDAAyB;AACzB,sDAA4B;AAC5B,sDAA4B","sourcesContent":["export * from './ChartHoverCard/index';\nexport * from './Common.styles';\nexport * from './utilities';\nexport * from './colors';\nexport * from './gradients';\nexport * from './vbc-utils';\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-charting",
|
|
3
|
-
"version": "5.24.
|
|
3
|
+
"version": "5.24.6",
|
|
4
4
|
"description": "React web charting controls for Microsoft fluentui system.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"jest-canvas-mock": "2.4.0"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@fluentui/chart-utilities": "^1.1.
|
|
42
|
+
"@fluentui/chart-utilities": "^1.1.18",
|
|
43
43
|
"@fluentui/react-focus": "^8.9.25",
|
|
44
44
|
"@fluentui/theme-samples": "^8.7.209",
|
|
45
45
|
"@microsoft/load-themed-styles": "^1.10.26",
|