@fluentui/react-charting 5.23.80 → 5.23.82
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 +61 -1
- package/CHANGELOG.md +25 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib/components/AreaChart/AreaChart.base.js +192 -34
- package/lib/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib/components/CommonComponents/CartesianChart.styles.js +15 -15
- package/lib/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +3 -0
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +39 -20
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/Pie/Pie.styles.js +3 -3
- package/lib/components/DonutChart/Pie/Pie.styles.js.map +1 -1
- package/lib/components/GaugeChart/GaugeChart.styles.js +7 -7
- package/lib/components/GaugeChart/GaugeChart.styles.js.map +1 -1
- package/lib/components/PieChart/Arc/Arc.styles.js +2 -2
- package/lib/components/PieChart/Arc/Arc.styles.js.map +1 -1
- package/lib/components/SankeyChart/SankeyChart.styles.js +7 -7
- package/lib/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib/utilities/ChartHoverCard/ChartHoverCard.styles.js +5 -5
- package/lib/utilities/ChartHoverCard/ChartHoverCard.styles.js.map +1 -1
- package/lib-amd/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib-amd/components/AreaChart/AreaChart.base.js +192 -34
- package/lib-amd/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-amd/components/CommonComponents/CartesianChart.styles.js +14 -14
- package/lib-amd/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js +3 -0
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +39 -20
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/DonutChart/Pie/Pie.styles.js +2 -2
- package/lib-amd/components/DonutChart/Pie/Pie.styles.js.map +1 -1
- package/lib-amd/components/GaugeChart/GaugeChart.styles.js +6 -6
- package/lib-amd/components/GaugeChart/GaugeChart.styles.js.map +1 -1
- package/lib-amd/components/PieChart/Arc/Arc.styles.js +1 -1
- package/lib-amd/components/PieChart/Arc/Arc.styles.js.map +1 -1
- package/lib-amd/components/SankeyChart/SankeyChart.styles.js +6 -6
- package/lib-amd/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib-amd/utilities/ChartHoverCard/ChartHoverCard.styles.js +4 -4
- package/lib-amd/utilities/ChartHoverCard/ChartHoverCard.styles.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib-commonjs/components/AreaChart/AreaChart.base.js +192 -34
- package/lib-commonjs/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js +14 -14
- package/lib-commonjs/components/CommonComponents/CartesianChart.styles.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +3 -0
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +39 -20
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Pie/Pie.styles.js +2 -2
- package/lib-commonjs/components/DonutChart/Pie/Pie.styles.js.map +1 -1
- package/lib-commonjs/components/GaugeChart/GaugeChart.styles.js +6 -6
- package/lib-commonjs/components/GaugeChart/GaugeChart.styles.js.map +1 -1
- package/lib-commonjs/components/PieChart/Arc/Arc.styles.js +1 -1
- package/lib-commonjs/components/PieChart/Arc/Arc.styles.js.map +1 -1
- package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js +6 -6
- package/lib-commonjs/components/SankeyChart/SankeyChart.styles.js.map +1 -1
- package/lib-commonjs/utilities/ChartHoverCard/ChartHoverCard.styles.js +4 -4
- package/lib-commonjs/utilities/ChartHoverCard/ChartHoverCard.styles.js.map +1 -1
- package/package.json +4 -4
|
@@ -12,8 +12,8 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
|
|
|
12
12
|
fontWeight: Styling_1.FontWeights.semibold,
|
|
13
13
|
fill: theme.semanticColors.bodyText,
|
|
14
14
|
selectors: (_a = {},
|
|
15
|
-
_a[Styling_1.
|
|
16
|
-
fill: '
|
|
15
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
16
|
+
fill: 'CanvasText',
|
|
17
17
|
},
|
|
18
18
|
_a),
|
|
19
19
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAqB;;QACrC,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,IAAI,EAAE,EAAE;YACR,iBAAiB,EAAE;gBACjB,QAAQ,EAAE,mBAAS,CAAC,UAAU;gBAC9B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;gBACnC,SAAS;oBACP,GAAC,
|
|
1
|
+
{"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAAqB;;QACrC,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,IAAI,EAAE,EAAE;YACR,iBAAiB,EAAE;gBACjB,QAAQ,EAAE,mBAAS,CAAC,UAAU;gBAC9B,UAAU,EAAE,qBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;gBACnC,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAfW,QAAA,SAAS,aAepB","sourcesContent":["import { IPieStyleProps, IPieStyles } from './Pie.types';\nimport { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IPieStyleProps): IPieStyles => {\n const { theme } = props;\n return {\n root: {},\n insideDonutString: {\n fontSize: FontSizes.xLargePlus,\n fontWeight: FontWeights.semibold,\n fill: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n };\n};\n"]}
|
|
@@ -101,14 +101,14 @@ define(["require", "exports", "tslib", "@fluentui/react"], function (require, ex
|
|
|
101
101
|
marginRight: '8px',
|
|
102
102
|
},
|
|
103
103
|
calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', selectors: (_b = {},
|
|
104
|
-
_b[react_1.
|
|
105
|
-
color: '
|
|
104
|
+
_b[react_1.HighContrastSelector] = {
|
|
105
|
+
color: 'CanvasText',
|
|
106
106
|
},
|
|
107
107
|
_b), color: theme.semanticColors.bodySubtext }),
|
|
108
108
|
calloutContentY: [
|
|
109
109
|
tslib_1.__assign(tslib_1.__assign({}, theme.fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_c = {},
|
|
110
|
-
_c[react_1.
|
|
111
|
-
color: '
|
|
110
|
+
_c[react_1.HighContrastSelector] = {
|
|
111
|
+
color: 'CanvasText',
|
|
112
112
|
},
|
|
113
113
|
_c) }),
|
|
114
114
|
],
|
|
@@ -116,8 +116,8 @@ define(["require", "exports", "tslib", "@fluentui/react"], function (require, ex
|
|
|
116
116
|
theme.fonts.small,
|
|
117
117
|
{
|
|
118
118
|
selectors: (_d = {},
|
|
119
|
-
_d[react_1.
|
|
120
|
-
color: '
|
|
119
|
+
_d[react_1.HighContrastSelector] = {
|
|
120
|
+
color: 'CanvasText',
|
|
121
121
|
},
|
|
122
122
|
_d),
|
|
123
123
|
color: theme.semanticColors.bodyText,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA4B;;QAElD,IAAA,KAAK,GAUH,KAAK,MAVF,EACL,cAAc,GASZ,KAAK,eATO,EACd,UAAU,GAQR,KAAK,WARG,EACV,WAAW,GAOT,KAAK,YAPI,EACX,SAAS,GAMP,KAAK,UANE,EACT,SAAS,GAKP,KAAK,UALE,EACT,WAAW,GAIT,KAAK,YAJI,EACX,SAAS,GAGP,KAAK,UAHE,EACT,YAAY,GAEV,KAAK,aAFK,EACZ,OAAO,GACL,KAAK,QADA,CACC;QAEV,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB,eAAe;gBACf;oBACE,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE,MAAM;oBACf,aAAa,EAAE,QAAQ;oBACvB,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;iBACf;gBACD,SAAS;aACV;YAED,KAAK,EAAE;gBACL,OAAO,EAAE,OAAO;gBAChB,KAAK,EAAE,UAAU;gBACjB,MAAM,EAAE,WAAW;aACpB;YAED,MAAM,EAAE;gBACN,QAAQ,EAAE,iBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,mBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;YAED,UAAU,EAAE;gBACV,QAAQ,EAAE,cAAc;gBACxB,UAAU,EAAE,mBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;YAED,QAAQ,EAAE;gBACR,QAAQ,EAAE,iBAAS,CAAC,KAAK;gBACzB,UAAU,EAAE,mBAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;YAED,MAAM,EAAE;gBACN,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;gBACzB,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;aAC5C;YAED,UAAU,EAAE;gBACV,QAAQ,EAAE,iBAAS,CAAC,KAAK;gBACzB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;YAED,OAAO,EAAE;gBACP,OAAO,EAAE,MAAM;gBACf,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;gBACxC,IAAI,EAAE,SAAS;gBACf,WAAW,EAAE,OAAO;aACrB;YAED,eAAe,EAAE;gBACf,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,YAAY;gBACxB,OAAO,SAAA;aACR;YAED,gBAAgB,EAAE;gBAChB,KAAK,EAAE,UAAU;aAClB;YAED,kBAAkB,EAAE;gBAClB;oBACE,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,qBAAqB;oBAC9B,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;oBACpD,mBAAmB,EAAE,oBAAoB;iBAC1C;aACF;YACD,wBAAwB,EAAE;gBACxB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,eAAe;aAChC;YACD,eAAe,EAAE;sDAEV,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;aAE1C;YACD,qBAAqB,EAAE;gBACrB,KAAK,CAAC,KAAK,CAAC,UAAU;gBACtB;oBACE,SAAS,EAAE,MAAM;oBACjB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;iBACrC;gBACD,CAAC,WAAW,IAAI;oBACd,SAAS;wBACP,GAAC,4BAAoB,IAAG;4BACtB,iBAAiB,EAAE,MAAM;yBAC1B;2BACF;oBACD,UAAU,EAAE,oBAAa,SAAS,CAAE;oBACpC,WAAW,EAAE,KAAK;iBACnB;gBACD,WAAW,IAAI;oBACb,OAAO,EAAE,MAAM;iBAChB;aACF;YACD,WAAW,EAAE;gBACX,WAAW,EAAE,KAAK;aACnB;YACD,iBAAiB,wCACZ,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,MAAM,EAClB,SAAS;oBACP,GAAC,
|
|
1
|
+
{"version":3,"file":"GaugeChart.styles.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react';\nimport { IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\nexport const getStyles = (props: IGaugeChartStyleProps): IGaugeChartStyles => {\n const {\n theme,\n chartValueSize,\n chartWidth,\n chartHeight,\n className,\n lineColor,\n toDrawShape,\n solidFill,\n gradientFill,\n opacity,\n } = props;\n\n return {\n root: [\n theme.fonts.medium,\n 'ms-GaugeChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n\n limits: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n chartValue: {\n fontSize: chartValueSize,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n sublabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n\n needle: {\n fill: theme.palette.black,\n stroke: theme.semanticColors.bodyBackground,\n },\n\n chartTitle: {\n fontSize: FontSizes.small,\n fill: theme.palette.neutralPrimary,\n },\n\n segment: {\n outline: 'none',\n stroke: theme.semanticColors.focusBorder,\n fill: solidFill,\n fillOpacity: opacity,\n },\n\n gradientSegment: {\n width: '100%',\n height: '100%',\n background: gradientFill,\n opacity,\n },\n\n legendsContainer: {\n width: chartWidth,\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 ...theme.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 ...theme.fonts.small,\n lineHeight: '16px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n color: theme.semanticColors.bodySubtext,\n },\n calloutContentY: [\n {\n ...theme.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 };\n};\n"]}
|
|
@@ -13,7 +13,7 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
|
|
|
13
13
|
fill: (theme === null || theme === void 0 ? void 0 : theme.semanticColors.bodyText) || Styling_1.DefaultPalette.black,
|
|
14
14
|
outline: 'none',
|
|
15
15
|
selectors: (_a = {},
|
|
16
|
-
_a[Styling_1.
|
|
16
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
17
17
|
fill: 'CanvasText',
|
|
18
18
|
},
|
|
19
19
|
_a),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;;QAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;YACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACxB,OAAO,EAAE;gBACP,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,QAAQ,KAAI,wBAAc,CAAC,KAAK;gBAC5D,OAAO,EAAE,MAAM;gBACf,SAAS;oBACP,GAAC,
|
|
1
|
+
{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;;QAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;YACxB,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,wBAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;YACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;YACxB,OAAO,EAAE;gBACP,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,CAAC,QAAQ,KAAI,wBAAc,CAAC,KAAK;gBAC5D,OAAO,EAAE,MAAM;gBACf,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,SAAS,aAgBpB","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, ITheme, HighContrastSelector } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps, theme: ITheme | undefined): IArcStyles => {\n const { color } = props;\n return {\n arcRoot: { fill: color },\n arcRootFocussed: { fill: color, stroke: theme?.palette.black || DefaultPalette.black, strokeWidth: 2 },\n arc: { outline: 'none' },\n arcText: {\n fill: theme?.semanticColors.bodyText || DefaultPalette.black,\n outline: 'none',\n selectors: {\n [HighContrastSelector]: {\n fill: 'CanvasText',\n },\n },\n },\n };\n};\n"]}
|
|
@@ -23,16 +23,16 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
|
|
|
23
23
|
fill: theme ? theme.semanticColors.bodyBackground : '#F5F5F5',
|
|
24
24
|
strokeWidth: 3,
|
|
25
25
|
selectors: (_a = {},
|
|
26
|
-
_a[Styling_1.
|
|
27
|
-
fill: '
|
|
26
|
+
_a[Styling_1.HighContrastSelector] = {
|
|
27
|
+
fill: 'Canvas',
|
|
28
28
|
},
|
|
29
29
|
_a),
|
|
30
30
|
},
|
|
31
31
|
nodes: {
|
|
32
32
|
fill: '#F5F5F5',
|
|
33
33
|
selectors: (_b = {},
|
|
34
|
-
_b[Styling_1.
|
|
35
|
-
fill: '
|
|
34
|
+
_b[Styling_1.HighContrastSelector] = {
|
|
35
|
+
fill: 'Canvas',
|
|
36
36
|
},
|
|
37
37
|
_b),
|
|
38
38
|
},
|
|
@@ -41,8 +41,8 @@ define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function
|
|
|
41
41
|
selectors: {
|
|
42
42
|
text: {
|
|
43
43
|
selectors: (_c = {},
|
|
44
|
-
_c[Styling_1.
|
|
45
|
-
fill: '
|
|
44
|
+
_c[Styling_1.HighContrastSelector] = {
|
|
45
|
+
fill: 'CanvasText',
|
|
46
46
|
},
|
|
47
47
|
_c),
|
|
48
48
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA6B;;QAC7C,IAAA,SAAS,GAAqC,KAAK,UAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QACpD,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;QAC1B,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,aAAa,EAAE,QAAQ;oBACvB,QAAQ,EAAE,QAAQ;iBACnB;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;gBACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;gBAC7D,WAAW,EAAE,CAAC;gBACd,SAAS;oBACP,GAAC,
|
|
1
|
+
{"version":3,"file":"SankeyChart.styles.js","sourceRoot":"../src/","sources":["components/SankeyChart/SankeyChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA6B;;QAC7C,IAAA,SAAS,GAAqC,KAAK,UAA1C,EAAE,KAAK,GAA8B,KAAK,MAAnC,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QACpD,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;QAC1B,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,aAAa,EAAE,QAAQ;oBACvB,QAAQ,EAAE,QAAQ;iBACnB;gBACD,SAAS;aACV;YACD,KAAK,EAAE;gBACL,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;gBACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;gBAC7D,WAAW,EAAE,CAAC;gBACd,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,QAAQ;qBACf;uBACF;aACF;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,SAAS;gBACf,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,QAAQ;qBACf;uBACF;aACF;YACD,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;YACD,iBAAiB,EAAE;gBACjB,SAAS,EAAE;oBACT,IAAI,EAAE;wBACJ,SAAS;4BACP,GAAC,8BAAoB,IAAG;gCACtB,IAAI,EAAE,YAAY;6BACnB;+BACF;qBACF;iBACF;gBAED,SAAS,EAAE,KAAK;gBAChB,UAAU,EAAE,KAAK;gBACjB,YAAY,EAAE,KAAK;gBACnB,WAAW,EAAE,KAAK;aACnB;YACD,kBAAkB,EAAE;gBAClB,SAAS,EAAE,OAAO,CAAC,UAAU;aAC9B;YACD,YAAY,uBACP,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAC9C;SACF,CAAC;IACJ,CAAC,CAAC;IApEW,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"]}
|
|
@@ -49,8 +49,8 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
|
|
|
49
49
|
lineHeight: '16px',
|
|
50
50
|
color: theme.semanticColors.bodyText,
|
|
51
51
|
selectors: (_b = {},
|
|
52
|
-
_b[Styling_1.
|
|
53
|
-
color: '
|
|
52
|
+
_b[Styling_1.HighContrastSelector] = {
|
|
53
|
+
color: 'CanvasText',
|
|
54
54
|
},
|
|
55
55
|
_b),
|
|
56
56
|
},
|
|
@@ -62,8 +62,8 @@ define(["require", "exports", "@fluentui/react/lib/Styling"], function (require,
|
|
|
62
62
|
fontWeight: 'bold',
|
|
63
63
|
lineHeight: '36px',
|
|
64
64
|
selectors: (_c = {},
|
|
65
|
-
_c[Styling_1.
|
|
66
|
-
color: '
|
|
65
|
+
_c[Styling_1.HighContrastSelector] = {
|
|
66
|
+
color: 'CanvasText',
|
|
67
67
|
},
|
|
68
68
|
_c),
|
|
69
69
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChartHoverCard.styles.js","sourceRoot":"../src/","sources":["utilities/ChartHoverCard/ChartHoverCard.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,uBAAuB,GAAG,UAAC,KAAgC;;QAC9D,IAAA,KAAK,GAA4C,KAAK,MAAjD,EAAE,MAAM,GAAoC,KAAK,OAAzC,EAAE,KAAK,GAA6B,KAAK,MAAlC,EAAE,KAA2B,KAAK,eAAV,EAAtB,cAAc,mBAAG,KAAK,KAAA,CAAW;QAC/D,OAAO;YACL,kBAAkB,EAAE;gBAClB;oBACE,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,qBAAqB;oBAC9B,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;oBACpD,mBAAmB,EAAE,oBAAoB;iBAC1C;aACF;YACD,wBAAwB,EAAE;gBACxB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,eAAe;aAChC;YACD,eAAe,EAAE;gBACf,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;iBACxC;aACF;YACD,qBAAqB,EAAE;gBACrB,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB;oBACE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,WAAW,EAAE,KAAK;oBAClB,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,UAAU,EAAE,oBAAa,KAAK,CAAE;oBAChC,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,iBAAiB,EAAE,MAAM;yBAC1B;2BACF;iBACF;aACF;YACD,iBAAiB,EAAE;gBACjB,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,SAAS;wBACP,GAAC,
|
|
1
|
+
{"version":3,"file":"ChartHoverCard.styles.js","sourceRoot":"../src/","sources":["utilities/ChartHoverCard/ChartHoverCard.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,uBAAuB,GAAG,UAAC,KAAgC;;QAC9D,IAAA,KAAK,GAA4C,KAAK,MAAjD,EAAE,MAAM,GAAoC,KAAK,OAAzC,EAAE,KAAK,GAA6B,KAAK,MAAlC,EAAE,KAA2B,KAAK,eAAV,EAAtB,cAAc,mBAAG,KAAK,KAAA,CAAW;QAC/D,OAAO;YACL,kBAAkB,EAAE;gBAClB;oBACE,OAAO,EAAE,MAAM;oBACf,QAAQ,EAAE,QAAQ;oBAClB,OAAO,EAAE,qBAAqB;oBAC9B,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;oBACpD,mBAAmB,EAAE,oBAAoB;iBAC1C;aACF;YACD,wBAAwB,EAAE;gBACxB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK;gBACpB,cAAc,EAAE,eAAe;aAChC;YACD,eAAe,EAAE;gBACf,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,MAAM;oBACf,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;iBACxC;aACF;YACD,qBAAqB,EAAE;gBACrB,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB;oBACE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpC,WAAW,EAAE,KAAK;oBAClB,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,UAAU,EAAE,oBAAa,KAAK,CAAE;oBAChC,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,iBAAiB,EAAE,MAAM;yBAC1B;2BACF;iBACF;aACF;YACD,iBAAiB,EAAE;gBACjB,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,UAAU,EAAE,MAAM;oBAClB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,KAAK,EAAE,YAAY;yBACpB;2BACF;iBACF;aACF;YACD,eAAe,EAAE;gBACf,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB;oBACE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpD,UAAU,EAAE,MAAM;oBAClB,UAAU,EAAE,MAAM;oBAClB,SAAS;wBACP,GAAC,8BAAoB,IAAG;4BACtB,KAAK,EAAE,YAAY;yBACpB;2BACF;iBACF;aACF;YACD,oBAAoB,EAAE;gBACpB,cAAc,IAAI;oBAChB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,UAAU;iBACvB;aACF;YACD,KAAK,EAAE;gBACL,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,UAAU,EAAE,KAAK;oBACjB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;iBACrC;aACF;YACD,SAAS,EAAE;gBACT,UAAU,EAAE,qBAAW,CAAC,IAAI;aAC7B;YACD,WAAW,EAAE;gBACX,UAAU,EAAE,qBAAW,CAAC,QAAQ;aACjC;YACD,kBAAkB,EAAE;gBAClB,KAAK,CAAC,KAAK,CAAC,KAAK;gBACjB;oBACE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;oBACpC,SAAS,EAAE,MAAM;oBACjB,UAAU,EAAE,MAAM;oBAClB,SAAS,EAAE,oBAAa,KAAK,CAAC,cAAc,CAAC,WAAW,CAAE;iBAC3D;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IA9FW,QAAA,uBAAuB,2BA8FlC","sourcesContent":["import { IChartHoverCardStyles, IChartHoverCardStyleProps } from './ChartHoverCard.types';\nimport { FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';\n\nexport const getChartHoverCardStyles = (props: IChartHoverCardStyleProps): IChartHoverCardStyles => {\n const { color, XValue, theme, isRatioPresent = false } = props;\n return {\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 theme.fonts.small,\n {\n lineHeight: '16px',\n opacity: '0.85',\n color: theme.semanticColors.bodySubtext,\n },\n ],\n calloutBlockContainer: [\n theme.fonts.xxLarge,\n {\n marginTop: XValue ? '13px' : 'unset',\n paddingLeft: '8px',\n lineHeight: '22px',\n color: theme.semanticColors.bodyText,\n borderLeft: `4px solid ${color}`,\n selectors: {\n [HighContrastSelector]: {\n forcedColorAdjust: 'none',\n },\n },\n },\n ],\n calloutlegendText: [\n theme.fonts.small,\n {\n lineHeight: '16px',\n color: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n calloutContentY: [\n theme.fonts.xxLarge,\n {\n color: color ? color : theme.semanticColors.bodyText,\n fontWeight: 'bold',\n lineHeight: '36px',\n selectors: {\n [HighContrastSelector]: {\n color: 'CanvasText',\n },\n },\n },\n ],\n calloutInfoContainer: [\n isRatioPresent && {\n display: 'flex',\n alignItems: 'flex-end',\n },\n ],\n ratio: [\n theme.fonts.small,\n {\n marginLeft: '6px',\n color: theme.semanticColors.bodyText,\n },\n ],\n numerator: {\n fontWeight: FontWeights.bold,\n },\n denominator: {\n fontWeight: FontWeights.semibold,\n },\n descriptionMessage: [\n theme.fonts.small,\n {\n color: theme.semanticColors.bodyText,\n marginTop: '10px',\n paddingTop: '10px',\n borderTop: `1px solid ${theme.semanticColors.menuDivider}`,\n },\n ],\n };\n};\n"]}
|
|
@@ -61,6 +61,8 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
|
|
|
61
61
|
private _cartesianChartRef;
|
|
62
62
|
private _legendsRef;
|
|
63
63
|
private _containsSecondaryYAxis;
|
|
64
|
+
private _hasDuplicateXValues;
|
|
65
|
+
private _hasMissingXValues;
|
|
64
66
|
constructor(props: IAreaChartProps);
|
|
65
67
|
componentDidUpdate(prevProps: IAreaChartProps): void;
|
|
66
68
|
render(): JSX.Element;
|
|
@@ -76,6 +78,7 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
|
|
|
76
78
|
private _handleChartMouseLeave;
|
|
77
79
|
private _getDataPoints;
|
|
78
80
|
private _createDataSet;
|
|
81
|
+
private _createDatasetForXCoordinateWithMultipleYValues;
|
|
79
82
|
private _getCustomizedCallout;
|
|
80
83
|
private _getGraphData;
|
|
81
84
|
private _onLegendHover;
|
|
@@ -87,6 +90,7 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
|
|
|
87
90
|
private _getLineOpacity;
|
|
88
91
|
private _updateCircleFillColor;
|
|
89
92
|
private _drawGraph;
|
|
93
|
+
private _getOnClickHandler;
|
|
90
94
|
private _getCircleRadius;
|
|
91
95
|
private _closeCallout;
|
|
92
96
|
/**
|
|
@@ -108,6 +112,8 @@ export declare class AreaChartBase extends React.Component<IAreaChartProps, IAre
|
|
|
108
112
|
private _getAriaLabel;
|
|
109
113
|
private _isChartEmpty;
|
|
110
114
|
private _getChartTitle;
|
|
115
|
+
private _xCoordinateContainsMultipleY;
|
|
116
|
+
private _containsMissingXValues;
|
|
111
117
|
private _shouldFillToZeroY;
|
|
112
118
|
}
|
|
113
119
|
export {};
|
|
@@ -29,6 +29,8 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
29
29
|
var _a;
|
|
30
30
|
var _this = _super.call(this, props) || this;
|
|
31
31
|
_this._containsSecondaryYAxis = false;
|
|
32
|
+
_this._hasDuplicateXValues = false;
|
|
33
|
+
_this._hasMissingXValues = false;
|
|
32
34
|
_this.toImage = function (opts) {
|
|
33
35
|
var _a, _b;
|
|
34
36
|
return (0, image_export_utils_1.toImage)((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, (0, Utilities_1.getRTL)(), opts);
|
|
@@ -219,7 +221,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
219
221
|
};
|
|
220
222
|
};
|
|
221
223
|
_this._createDataSet = function (points) {
|
|
222
|
-
if (_this.props.enablePerfOptimization && _this._enableComputationOptimization) {
|
|
224
|
+
if (_this.props.enablePerfOptimization && _this._enableComputationOptimization && !_this._hasDuplicateXValues) {
|
|
223
225
|
var allChartPoints_1 = [];
|
|
224
226
|
var dataSet_1 = [];
|
|
225
227
|
var colors_1 = [];
|
|
@@ -276,40 +278,58 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
276
278
|
var colors_2 = [];
|
|
277
279
|
var opacity_2 = [];
|
|
278
280
|
var calloutPoints = (0, index_2.calloutData)(points);
|
|
281
|
+
var data = {};
|
|
282
|
+
var keys = [];
|
|
283
|
+
var index_4 = 0;
|
|
279
284
|
points &&
|
|
280
285
|
points.length &&
|
|
281
286
|
points.forEach(function (singleChartPoint) {
|
|
287
|
+
// if legend is not populated, then assign a legend
|
|
288
|
+
if (_this._hasDuplicateXValues && !singleChartPoint.legend) {
|
|
289
|
+
singleChartPoint.legend = "chart".concat(index_4);
|
|
290
|
+
++index_4;
|
|
291
|
+
}
|
|
292
|
+
singleChartPoint.data.forEach(function (point) {
|
|
293
|
+
point.legend = singleChartPoint.legend;
|
|
294
|
+
});
|
|
282
295
|
colors_2.push(singleChartPoint.color);
|
|
283
296
|
opacity_2.push(singleChartPoint.opacity || 1);
|
|
284
297
|
allChartPoints_2.push.apply(allChartPoints_2, singleChartPoint.data);
|
|
285
298
|
});
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
var
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
singleDataset
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
299
|
+
if (!_this._hasDuplicateXValues) {
|
|
300
|
+
var tempArr = allChartPoints_2;
|
|
301
|
+
var _loop_1 = function () {
|
|
302
|
+
var valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
|
|
303
|
+
var filteredChartPoints = tempArr.filter(function (point) {
|
|
304
|
+
return (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck;
|
|
305
|
+
});
|
|
306
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
307
|
+
var singleDataset = {};
|
|
308
|
+
filteredChartPoints.forEach(function (singleDataPoint, id) {
|
|
309
|
+
singleDataset.xVal = singleDataPoint.x;
|
|
310
|
+
singleDataset["chart".concat(id)] = singleDataPoint.y;
|
|
311
|
+
});
|
|
312
|
+
dataSet.push(singleDataset);
|
|
313
|
+
// removing compared objects from array
|
|
314
|
+
var val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
|
|
315
|
+
tempArr = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val; });
|
|
316
|
+
};
|
|
317
|
+
while (tempArr.length) {
|
|
318
|
+
_loop_1();
|
|
319
|
+
}
|
|
320
|
+
// get keys from dataset, used to create stacked data
|
|
321
|
+
var keysLength = dataSet && Object.keys(dataSet[0]).length;
|
|
322
|
+
for (var i = 0; i < keysLength - 1; i++) {
|
|
323
|
+
var keyVal = "chart".concat(i);
|
|
324
|
+
keys.push(keyVal);
|
|
325
|
+
}
|
|
326
|
+
// Data used to draw graph
|
|
327
|
+
data = _this._getDataPoints(keys, dataSet);
|
|
303
328
|
}
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
for (var i = 0; i < keysLength - 1; i++) {
|
|
308
|
-
var keyVal = "chart".concat(i);
|
|
309
|
-
keys.push(keyVal);
|
|
329
|
+
else {
|
|
330
|
+
var datasetForDuplicateValues = _this._createDatasetForXCoordinateWithMultipleYValues(allChartPoints_2);
|
|
331
|
+
data = _this._getDataPoints(datasetForDuplicateValues.keys, datasetForDuplicateValues.filteredDataSet);
|
|
310
332
|
}
|
|
311
|
-
// Data used to draw graph
|
|
312
|
-
var data = _this._getDataPoints(keys, dataSet);
|
|
313
333
|
return {
|
|
314
334
|
colors: colors_2,
|
|
315
335
|
opacity: opacity_2,
|
|
@@ -319,6 +339,54 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
319
339
|
};
|
|
320
340
|
}
|
|
321
341
|
};
|
|
342
|
+
_this._createDatasetForXCoordinateWithMultipleYValues = function (allChartPoints) {
|
|
343
|
+
var dataSet = [];
|
|
344
|
+
// Group data points by x-axis value
|
|
345
|
+
var groupedData = {};
|
|
346
|
+
allChartPoints.forEach(function (dataPoint) {
|
|
347
|
+
var xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
|
|
348
|
+
if (!groupedData[xValue]) {
|
|
349
|
+
groupedData[xValue] = [];
|
|
350
|
+
}
|
|
351
|
+
groupedData[xValue].push(dataPoint);
|
|
352
|
+
});
|
|
353
|
+
// Aggregate data points for each x-axis value
|
|
354
|
+
Object.keys(groupedData).forEach(function (xValue) {
|
|
355
|
+
var dataPoints = groupedData[xValue];
|
|
356
|
+
dataPoints.forEach(function (dataPoint, id) {
|
|
357
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
358
|
+
var singleDataset = { xVal: dataPoints[0].x };
|
|
359
|
+
var key = dataPoint.legend ? dataPoint.legend : "chart".concat(id);
|
|
360
|
+
singleDataset[key] = dataPoint.y;
|
|
361
|
+
dataSet.push(singleDataset);
|
|
362
|
+
});
|
|
363
|
+
});
|
|
364
|
+
// get all unique keys from each array within the dataSet
|
|
365
|
+
var allLegends = [];
|
|
366
|
+
dataSet.forEach(function (item) {
|
|
367
|
+
Object.keys(item).forEach(function (key) {
|
|
368
|
+
if (key !== 'xVal' && !allLegends.includes(key)) {
|
|
369
|
+
allLegends.push(key);
|
|
370
|
+
}
|
|
371
|
+
});
|
|
372
|
+
});
|
|
373
|
+
dataSet.forEach(function (item) {
|
|
374
|
+
allLegends.forEach(function (legend) {
|
|
375
|
+
if (!item[legend]) {
|
|
376
|
+
item[legend] = 0; // Fill with 0 if the legend is missing
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
});
|
|
380
|
+
// exclude all items within dataset having all legend values 0
|
|
381
|
+
var filteredDataSet = dataSet.filter(function (item) {
|
|
382
|
+
return allLegends.some(function (legend) { return item[legend] !== 0; });
|
|
383
|
+
});
|
|
384
|
+
var keys = Array.from(new Set(filteredDataSet.flatMap(function (item) { return Object.keys(item).filter(function (key) { return key !== 'xVal'; }); })));
|
|
385
|
+
return {
|
|
386
|
+
keys: keys,
|
|
387
|
+
filteredDataSet: filteredDataSet,
|
|
388
|
+
};
|
|
389
|
+
};
|
|
322
390
|
_this._getCustomizedCallout = function () {
|
|
323
391
|
return _this.props.onRenderCalloutPerStack
|
|
324
392
|
? _this.props.onRenderCalloutPerStack(_this.state.stackCalloutProps)
|
|
@@ -406,9 +474,9 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
406
474
|
var lineColor;
|
|
407
475
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
408
476
|
_this._data.forEach(function (singleStackedData, index) {
|
|
409
|
-
var _a, _b, _c, _d, _e, _f;
|
|
410
|
-
var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
411
|
-
var curveFactory = (0, index_2.getCurveFactory)((
|
|
477
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
478
|
+
var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
479
|
+
var curveFactory = (0, index_2.getCurveFactory)((_c = (_b = points[index]) === null || _b === void 0 ? void 0 : _b.lineOptions) === null || _c === void 0 ? void 0 : _c.curve, d3_shape_1.curveMonotoneX);
|
|
412
480
|
var area = (0, d3_shape_1.area)()
|
|
413
481
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
414
482
|
.x(function (d) { return xScale(d.xVal); })
|
|
@@ -429,7 +497,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
429
497
|
React.createElement("linearGradient", { id: "gradient_".concat(index), x1: "0%", x2: "0%", y1: "0%", y2: "100%" },
|
|
430
498
|
React.createElement("stop", { offset: "0", stopColor: _this._colors[index] }),
|
|
431
499
|
React.createElement("stop", { offset: "100%", stopColor: "transparent" })))),
|
|
432
|
-
React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (
|
|
500
|
+
React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (_f = (_e = (_d = points[index]) === null || _d === void 0 ? void 0 : _d.lineOptions) === null || _e === void 0 ? void 0 : _e.strokeWidth) !== null && _f !== void 0 ? _f : 3, stroke: _this._colors[index], opacity: _this._getLineOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, strokeDasharray: (_h = (_g = points[index]) === null || _g === void 0 ? void 0 : _g.lineOptions) === null || _h === void 0 ? void 0 : _h.strokeDasharray, strokeDashoffset: (_k = (_j = points[index]) === null || _j === void 0 ? void 0 : _j.lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDashoffset, strokeLinecap: (_m = (_l = points[index]) === null || _l === void 0 ? void 0 : _l.lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap }),
|
|
433
501
|
singleStackedData.length === 1 ? (React.createElement("circle", { id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), cx: xScale(singleStackedData[0].xVal), cy: yScale(singleStackedData[0].values[1]), r: 6, stroke: _this._colors[index], strokeWidth: 3, fill: _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove })) : (React.createElement("path", tslib_1.__assign({ id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), d: area(singleStackedData), fill: _this.props.enableGradient ? "url(#gradient_".concat(index, ")") : _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, (_this.props.optimizeLargeData && {
|
|
434
502
|
'data-is-focusable': _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(),
|
|
435
503
|
role: 'img',
|
|
@@ -439,10 +507,11 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
439
507
|
var circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
|
|
440
508
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
441
509
|
_this._data.forEach(function (singleStackedData, index) {
|
|
510
|
+
var _a;
|
|
442
511
|
if (points.length === index) {
|
|
443
512
|
return;
|
|
444
513
|
}
|
|
445
|
-
var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
514
|
+
var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
446
515
|
if (!_this.props.optimizeLargeData || singleStackedData.length === 1) {
|
|
447
516
|
// Render circles for all data points
|
|
448
517
|
graph.push(React.createElement("g", { key: "".concat(index, "-dots-").concat(_this._uniqueIdForGraph), clipPath: "url(#clip)", role: "region", "aria-label": "".concat(points[index].legend, ", series ").concat(index + 1, " of ").concat(points.length, " with ").concat(points[index].data.length, " data points.") }, singleStackedData.map(function (singlePoint, pointIndex) {
|
|
@@ -450,7 +519,8 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
450
519
|
var xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
|
|
451
520
|
lineColor = points[index].color;
|
|
452
521
|
var legend = points[index].legend;
|
|
453
|
-
return (React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove,
|
|
522
|
+
return (React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), { onFocus: function () { return _this._handleFocus(index, pointIndex, circleId); }, onBlur: _this._handleBlur }, (0, index_2.getSecureProps)(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend), role: "img", "aria-label": (!_this._hasDuplicateXValues && !_this._hasMissingXValues && _this._getAriaLabel(index, pointIndex)) ||
|
|
523
|
+
undefined })));
|
|
454
524
|
})));
|
|
455
525
|
}
|
|
456
526
|
else {
|
|
@@ -461,7 +531,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
461
531
|
var circleId = "".concat(_this._circleId, "_").concat(index * _this._data[0].length + pointIndex);
|
|
462
532
|
lineColor = points[index].color;
|
|
463
533
|
var legend = points[index].legend;
|
|
464
|
-
graph.push(React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove,
|
|
534
|
+
graph.push(React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), (0, index_2.getSecureProps)(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend) })));
|
|
465
535
|
}
|
|
466
536
|
});
|
|
467
537
|
}
|
|
@@ -495,6 +565,12 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
495
565
|
}
|
|
496
566
|
return graph;
|
|
497
567
|
};
|
|
568
|
+
_this._getOnClickHandler = function (points, index, pointIndex) {
|
|
569
|
+
return (!_this._hasDuplicateXValues &&
|
|
570
|
+
!_this._hasMissingXValues && {
|
|
571
|
+
onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick),
|
|
572
|
+
});
|
|
573
|
+
};
|
|
498
574
|
_this._getCircleRadius = function (xDataPoint, circleRadius, circleId, legend) {
|
|
499
575
|
var _a = _this.state, isCircleClicked = _a.isCircleClicked, nearestCircleToHighlight = _a.nearestCircleToHighlight, activePoint = _a.activePoint;
|
|
500
576
|
// Show the circle if no legends are selected or if the point's legend is in the selected legends
|
|
@@ -532,6 +608,38 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
532
608
|
return _this._getHighlightedLegend().length === 0;
|
|
533
609
|
};
|
|
534
610
|
_this._addDefaultColors = function (lineChartData) {
|
|
611
|
+
if (_this._hasMissingXValues) {
|
|
612
|
+
// get union of all x values
|
|
613
|
+
var allXValues_1 = new Set();
|
|
614
|
+
lineChartData &&
|
|
615
|
+
lineChartData.forEach(function (line) {
|
|
616
|
+
line.data.forEach(function (point) {
|
|
617
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
618
|
+
allXValues_1.add(xValue);
|
|
619
|
+
});
|
|
620
|
+
});
|
|
621
|
+
lineChartData &&
|
|
622
|
+
lineChartData.forEach(function (line) {
|
|
623
|
+
allXValues_1.forEach(function (xValue) {
|
|
624
|
+
var point = line.data.find(function (item) {
|
|
625
|
+
return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
|
|
626
|
+
});
|
|
627
|
+
if (!point) {
|
|
628
|
+
line.data.push({
|
|
629
|
+
x: typeof xValue === 'string' ? new Date(xValue) : xValue,
|
|
630
|
+
y: 0,
|
|
631
|
+
legend: line.legend,
|
|
632
|
+
});
|
|
633
|
+
}
|
|
634
|
+
});
|
|
635
|
+
// sort the data points by x value
|
|
636
|
+
line.data.sort(function (a, b) {
|
|
637
|
+
var xA = a.x instanceof Date ? a.x.getTime() : a.x;
|
|
638
|
+
var xB = b.x instanceof Date ? b.x.getTime() : b.x;
|
|
639
|
+
return xA < xB ? -1 : xA > xB ? 1 : 0;
|
|
640
|
+
});
|
|
641
|
+
});
|
|
642
|
+
}
|
|
535
643
|
return lineChartData
|
|
536
644
|
? lineChartData.map(function (item, index) {
|
|
537
645
|
var _a, _b;
|
|
@@ -606,6 +714,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
606
714
|
(0, Utilities_2.warnDeprecations)(COMPONENT_NAME, props, {
|
|
607
715
|
showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
|
|
608
716
|
});
|
|
717
|
+
_this._hasMissingXValues = _this._containsMissingXValues();
|
|
609
718
|
_this._uniqueIdForGraph = (0, Utilities_1.getId)('areaChart_');
|
|
610
719
|
_this._verticalLineId = (0, Utilities_1.getId)('verticalLine_');
|
|
611
720
|
_this._circleId = (0, Utilities_1.getId)('circle');
|
|
@@ -638,6 +747,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
638
747
|
if (!this._isChartEmpty()) {
|
|
639
748
|
var lineChartData = this.props.data.lineChartData;
|
|
640
749
|
var points = this._addDefaultColors(lineChartData);
|
|
750
|
+
this._hasDuplicateXValues = this._xCoordinateContainsMultipleY();
|
|
641
751
|
this._containsSecondaryYAxis =
|
|
642
752
|
!!this.props.secondaryYScaleOptions && points.some(function (point) { return point.useSecondaryYScale; });
|
|
643
753
|
var _a = this._createSet(points), colors = _a.colors, opacity = _a.opacity, data = _a.data, calloutPoints = _a.calloutPoints;
|
|
@@ -651,7 +761,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
651
761
|
tickValues: this.props.tickValues,
|
|
652
762
|
tickFormat: this.props.tickFormat,
|
|
653
763
|
};
|
|
654
|
-
var calloutProps = tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
|
|
764
|
+
var calloutProps = tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible && !this._hasDuplicateXValues && !this._hasMissingXValues, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
|
|
655
765
|
return (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_2.ChartTypes.AreaChart, calloutProps: calloutProps, legendBars: legends, createYAxis: index_2.createNumericYAxis, isCalloutForStack: true, xAxisType: isXAxisDateType ? index_2.XAxisTypes.DateAxis : index_2.XAxisTypes.NumericAxis, tickParams: tickParams, maxOfYVal: data.maxOfYVal, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findNumericMinMaxOfY, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef,
|
|
656
766
|
/* eslint-disable react/jsx-no-bind */
|
|
657
767
|
// eslint-disable-next-line react/no-children-prop
|
|
@@ -725,6 +835,54 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
725
835
|
// which means chart is not empty
|
|
726
836
|
);
|
|
727
837
|
};
|
|
838
|
+
AreaChartBase.prototype._xCoordinateContainsMultipleY = function () {
|
|
839
|
+
var lineChartData = this.props.data.lineChartData;
|
|
840
|
+
if (!lineChartData) {
|
|
841
|
+
return false;
|
|
842
|
+
}
|
|
843
|
+
for (var _i = 0, lineChartData_1 = lineChartData; _i < lineChartData_1.length; _i++) {
|
|
844
|
+
var item = lineChartData_1[_i];
|
|
845
|
+
var xValueMap = {};
|
|
846
|
+
for (var _a = 0, _b = item.data; _a < _b.length; _a++) {
|
|
847
|
+
var point = _b[_a];
|
|
848
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
849
|
+
if (!xValueMap[xValue]) {
|
|
850
|
+
xValueMap[xValue] = [];
|
|
851
|
+
}
|
|
852
|
+
xValueMap[xValue].push(point.y);
|
|
853
|
+
if (xValueMap[xValue].length > 1) {
|
|
854
|
+
return true;
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
}
|
|
858
|
+
return false;
|
|
859
|
+
};
|
|
860
|
+
AreaChartBase.prototype._containsMissingXValues = function () {
|
|
861
|
+
var lineChartData = this.props.data.lineChartData;
|
|
862
|
+
if (!lineChartData) {
|
|
863
|
+
return false;
|
|
864
|
+
}
|
|
865
|
+
var allXValues = new Set();
|
|
866
|
+
lineChartData.forEach(function (line) {
|
|
867
|
+
line.data.forEach(function (point) {
|
|
868
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
869
|
+
allXValues.add(xValue);
|
|
870
|
+
});
|
|
871
|
+
});
|
|
872
|
+
// for all x values, check if the x value is present in all series
|
|
873
|
+
var hasMissingValues = false;
|
|
874
|
+
lineChartData.forEach(function (line) {
|
|
875
|
+
allXValues.forEach(function (xValue) {
|
|
876
|
+
var point = line.data.find(function (item) {
|
|
877
|
+
return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
|
|
878
|
+
});
|
|
879
|
+
if (!point) {
|
|
880
|
+
hasMissingValues = true;
|
|
881
|
+
}
|
|
882
|
+
});
|
|
883
|
+
});
|
|
884
|
+
return hasMissingValues;
|
|
885
|
+
};
|
|
728
886
|
AreaChartBase.prototype._shouldFillToZeroY = function () {
|
|
729
887
|
return this.props.mode === 'tozeroy' || this._containsSecondaryYAxis;
|
|
730
888
|
};
|