@sproutsocial/seeds-react-data-viz 0.7.32 → 0.15.0
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/dist/axis-DXzufRRj.d.mts +116 -0
- package/dist/axis-PJwu5Xmo.d.ts +116 -0
- package/dist/bar/index.d.mts +98 -0
- package/dist/bar/index.d.ts +98 -0
- package/dist/bar/index.js +186 -0
- package/dist/bar/index.js.map +1 -0
- package/dist/chartExport-CKYpuhik.d.mts +28 -0
- package/dist/chartExport-CKYpuhik.d.ts +28 -0
- package/dist/chunk-EEVKTTT3.js +968 -0
- package/dist/chunk-EEVKTTT3.js.map +1 -0
- package/dist/chunk-JXARPHQE.js +193 -0
- package/dist/chunk-JXARPHQE.js.map +1 -0
- package/dist/chunk-VSZSIN34.js +796 -0
- package/dist/chunk-VSZSIN34.js.map +1 -0
- package/dist/esm/bar/index.js +186 -0
- package/dist/esm/bar/index.js.map +1 -0
- package/dist/esm/chunk-HQM3EIZW.js +193 -0
- package/dist/esm/chunk-HQM3EIZW.js.map +1 -0
- package/dist/esm/chunk-LC3HGWDD.js +968 -0
- package/dist/esm/chunk-LC3HGWDD.js.map +1 -0
- package/dist/esm/chunk-OAN5VC7M.js +796 -0
- package/dist/esm/chunk-OAN5VC7M.js.map +1 -0
- package/dist/esm/export/index.js +41 -0
- package/dist/esm/export/index.js.map +1 -0
- package/dist/esm/index.js +262 -1315
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/line-area/index.js +151 -0
- package/dist/esm/line-area/index.js.map +1 -0
- package/dist/esm/pdfExportLibs-NWLZH5KL.js +10 -0
- package/dist/esm/pdfExportLibs-NWLZH5KL.js.map +1 -0
- package/dist/export/index.d.mts +25 -0
- package/dist/export/index.d.ts +25 -0
- package/dist/export/index.js +41 -0
- package/dist/export/index.js.map +1 -0
- package/dist/index.d.mts +56 -93
- package/dist/index.d.ts +56 -93
- package/dist/index.js +407 -1544
- package/dist/index.js.map +1 -1
- package/dist/line-area/index.d.mts +83 -0
- package/dist/line-area/index.d.ts +83 -0
- package/dist/line-area/index.js +151 -0
- package/dist/line-area/index.js.map +1 -0
- package/dist/pdfExportLibs-BZR2D3RA.js +10 -0
- package/dist/pdfExportLibs-BZR2D3RA.js.map +1 -0
- package/dist/types-B7ILUQ6_.d.mts +99 -0
- package/dist/types-B7ILUQ6_.d.ts +99 -0
- package/package.json +37 -11
package/dist/index.js
CHANGED
|
@@ -1,481 +1,87 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
|
|
30
|
-
// src/index.ts
|
|
31
|
-
var index_exports = {};
|
|
32
|
-
__export(index_exports, {
|
|
33
|
-
AreaChart: () => AreaChart,
|
|
34
|
-
ChartLegend: () => ChartLegend,
|
|
35
|
-
ChartLegendLabel: () => ChartLegendLabel,
|
|
36
|
-
ChartTable: () => ChartTable,
|
|
37
|
-
ChartTooltip: () => ChartTooltip,
|
|
38
|
-
ChartTooltipFooter: () => ChartTooltipFooter,
|
|
39
|
-
ChartTooltipHeader: () => ChartTooltipHeader,
|
|
40
|
-
ChartTooltipPortal: () => ChartTooltipPortal,
|
|
41
|
-
ChartTooltipTable: () => ChartTooltipTable,
|
|
42
|
-
ChartTooltipTitle: () => ChartTooltipTitle,
|
|
43
|
-
ChartXAnnotationDetails: () => ChartXAnnotationDetails,
|
|
44
|
-
ChartXAnnotationMarker: () => ChartXAnnotationMarker,
|
|
45
|
-
ColorBox: () => ColorBox,
|
|
46
|
-
DONUT_CHART_HALO_SIZE: () => DONUT_CHART_HALO_SIZE,
|
|
47
|
-
DONUT_CHART_HEIGHT: () => DONUT_CHART_HEIGHT,
|
|
48
|
-
DONUT_CHART_WIDTH: () => DONUT_CHART_WIDTH,
|
|
49
|
-
DatavizColorBox: () => DatavizColorBox,
|
|
50
|
-
DonutChart: () => DonutChart,
|
|
51
|
-
DonutChartLegendTable: () => DonutChartLegendTable,
|
|
52
|
-
GlobalChartStyleOverrides: () => GlobalChartStyleOverrides,
|
|
53
|
-
LineChart: () => LineChart,
|
|
54
|
-
NetworkColorBox: () => NetworkColorBox,
|
|
55
|
-
TIME_SERIES_CHART_HEIGHT: () => TIME_SERIES_CHART_HEIGHT,
|
|
56
|
-
VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT: () => VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT,
|
|
57
|
-
VerticalBarChart: () => VerticalBarChart,
|
|
58
|
-
areaChartOptions: () => areaChartOptions,
|
|
59
|
-
areaChartStyles: () => areaChartStyles,
|
|
60
|
-
baseChartOptions: () => baseChartOptions,
|
|
61
|
-
baseChartStyles: () => baseChartStyles,
|
|
62
|
-
columnChartOptions: () => columnChartOptions,
|
|
63
|
-
donutChartOptions: () => donutChartOptions,
|
|
64
|
-
donutChartStyles: () => donutChartStyles,
|
|
65
|
-
generateChartTooltipPortalId: () => generateChartTooltipPortalId,
|
|
66
|
-
getDatavizColor: () => getDatavizColor,
|
|
67
|
-
getDatavizColorWithAlpha: () => getDatavizColorWithAlpha,
|
|
68
|
-
getDatavizOpacity: () => getDatavizOpacity,
|
|
69
|
-
getStorybookCategoricalData: () => getStorybookCategoricalData,
|
|
70
|
-
getStorybookSparseTimelineData: () => getStorybookSparseTimelineData,
|
|
71
|
-
isCategoricalHourData: () => isCategoricalHourData,
|
|
72
|
-
isHourlyTimeData: () => isHourlyTimeData,
|
|
73
|
-
lineChartOptions: () => lineChartOptions,
|
|
74
|
-
lineChartStyles: () => lineChartStyles,
|
|
75
|
-
timeSeriesChartOptions: () => timeSeriesChartOptions,
|
|
76
|
-
timeSeriesChartStyles: () => timeSeriesChartStyles,
|
|
77
|
-
transformDataToSeries: () => transformDataToSeries,
|
|
78
|
-
transformTimeSeriesTooltipData: () => transformTimeSeriesTooltipData,
|
|
79
|
-
xAxisLabelFormatter: () => xAxisLabelFormatter,
|
|
80
|
-
yAxisLabelFormatter: () => yAxisLabelFormatter
|
|
81
|
-
});
|
|
82
|
-
module.exports = __toCommonJS(index_exports);
|
|
1
|
+
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
var _chunkJXARPHQEjs = require('./chunk-JXARPHQE.js');
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
83
22
|
|
|
84
|
-
// src/components/AreaChart/AreaChart.tsx
|
|
85
|
-
var import_react16 = require("react");
|
|
86
|
-
var import_highcharts3 = __toESM(require("highcharts"));
|
|
87
|
-
var import_highcharts_react_official = require("highcharts-react-official");
|
|
88
|
-
var import_accessibility = __toESM(require("highcharts/modules/accessibility"));
|
|
89
|
-
var import_annotations = __toESM(require("highcharts/modules/annotations"));
|
|
90
|
-
var import_styled_components8 = __toESM(require("styled-components"));
|
|
91
|
-
var import_seeds_react_box9 = require("@sproutsocial/seeds-react-box");
|
|
92
23
|
|
|
93
|
-
// src/components/AreaChart/components/AreaChartLegend.tsx
|
|
94
|
-
var import_react5 = require("react");
|
|
95
|
-
var import_seeds_react_theme5 = require("@sproutsocial/seeds-react-theme");
|
|
96
|
-
|
|
97
|
-
// src/components/ChartLegend/ChartLegend.tsx
|
|
98
|
-
var import_react3 = require("react");
|
|
99
|
-
var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
|
|
100
|
-
var import_seeds_react_theme4 = require("@sproutsocial/seeds-react-theme");
|
|
101
|
-
|
|
102
|
-
// src/components/ChartLegend/components/ChartLegendLabel.tsx
|
|
103
|
-
var import_styled_components4 = __toESM(require("styled-components"));
|
|
104
|
-
var import_react2 = require("react");
|
|
105
|
-
var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
|
|
106
|
-
var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
|
|
107
|
-
|
|
108
|
-
// src/components/ColorBox/ColorBox.tsx
|
|
109
|
-
var import_styled_components2 = require("styled-components");
|
|
110
|
-
var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
|
|
111
|
-
|
|
112
|
-
// ../seeds-react-theme-provider/dist/index.mjs
|
|
113
|
-
var import_react = require("react");
|
|
114
|
-
var import_styled_components = require("styled-components");
|
|
115
|
-
var import_seeds_react_theme = require("@sproutsocial/seeds-react-theme");
|
|
116
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
117
|
-
|
|
118
|
-
// src/components/ColorBox/ColorBox.tsx
|
|
119
|
-
var import_seeds_react_theme2 = require("@sproutsocial/seeds-react-theme");
|
|
120
|
-
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
121
|
-
var ColorBox = ({
|
|
122
|
-
display = "inline-block",
|
|
123
|
-
height = "16px",
|
|
124
|
-
width = "16px",
|
|
125
|
-
minWidth = width,
|
|
126
|
-
borderRadius = "400",
|
|
127
|
-
...props
|
|
128
|
-
}) => {
|
|
129
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
130
|
-
import_seeds_react_box.Box,
|
|
131
|
-
{
|
|
132
|
-
...props,
|
|
133
|
-
display,
|
|
134
|
-
height,
|
|
135
|
-
width,
|
|
136
|
-
minWidth,
|
|
137
|
-
borderRadius,
|
|
138
|
-
css: import_styled_components2.css`
|
|
139
|
-
cursor: ${(props2) => props2?.onClick ? "pointer" : "default"};
|
|
140
|
-
`
|
|
141
|
-
}
|
|
142
|
-
);
|
|
143
|
-
};
|
|
144
24
|
|
|
145
|
-
// src/components/ColorBox/DatavizColorBox.tsx
|
|
146
|
-
var import_styled_components3 = __toESM(require("styled-components"));
|
|
147
|
-
var import_seeds_react_theme3 = require("@sproutsocial/seeds-react-theme");
|
|
148
|
-
var DatavizColorBox = (0, import_styled_components3.default)(ColorBox).attrs(
|
|
149
|
-
({ colorIndex }) => ({
|
|
150
|
-
style: {
|
|
151
|
-
background: getDatavizColor(colorIndex),
|
|
152
|
-
opacity: getDatavizOpacity(colorIndex)
|
|
153
|
-
}
|
|
154
|
-
})
|
|
155
|
-
)``;
|
|
156
|
-
var getDatavizColor = (colorIndex) => import_seeds_react_theme3.theme.colors.DATAVIZ_COLORS_LIST[colorIndex % import_seeds_react_theme3.theme.colors.DATAVIZ_COLORS_LIST.length] || "";
|
|
157
|
-
var getDatavizOpacity = (colorIndex) => {
|
|
158
|
-
const opacitySteps = [1, 0.6, 0.4, 0.2];
|
|
159
|
-
const opacityStep = Math.floor(colorIndex / import_seeds_react_theme3.theme.colors.DATAVIZ_COLORS_LIST.length) % opacitySteps.length;
|
|
160
|
-
return opacitySteps[opacityStep];
|
|
161
|
-
};
|
|
162
|
-
var getDatavizColorWithAlpha = (colorIndex) => {
|
|
163
|
-
const color = getDatavizColor(colorIndex);
|
|
164
|
-
const opacity = getDatavizOpacity(colorIndex);
|
|
165
|
-
if (opacity < 0 || opacity > 1) {
|
|
166
|
-
return color;
|
|
167
|
-
}
|
|
168
|
-
return `${color}${Math.floor(opacity * 255).toString(16).padStart(2, "0")}`;
|
|
169
|
-
};
|
|
170
25
|
|
|
171
|
-
// src/components/ColorBox/NetworkColorBox.tsx
|
|
172
|
-
var import_seeds_networkcolor = __toESM(require("@sproutsocial/seeds-networkcolor"));
|
|
173
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
174
|
-
var NetworkColorBox = ({
|
|
175
|
-
networkColor,
|
|
176
|
-
...props
|
|
177
|
-
}) => {
|
|
178
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ColorBox, { ...props, bg: import_seeds_networkcolor.default[networkColor] });
|
|
179
|
-
};
|
|
180
26
|
|
|
181
|
-
// src/components/ChartLegend/components/ChartLegendLabel.tsx
|
|
182
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
183
|
-
var StyledBox = (0, import_styled_components4.default)(import_seeds_react_box2.Box)`
|
|
184
|
-
list-style: none;
|
|
185
|
-
display: flex;
|
|
186
|
-
align-items: center;
|
|
187
|
-
gap: ${({ theme: theme16 }) => theme16.space[300]};
|
|
188
|
-
`;
|
|
189
|
-
var ChartLegendLabel = (0, import_react2.memo)(
|
|
190
|
-
function ChartLegendLabel2({
|
|
191
|
-
children,
|
|
192
|
-
color = "#CCC",
|
|
193
|
-
containerBoxProps = {}
|
|
194
|
-
}) {
|
|
195
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(StyledBox, { ...containerBoxProps, children: [
|
|
196
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ColorBox, { bg: color }),
|
|
197
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_text.Text, { as: "div", fontSize: 200, color: "text.subtext", children })
|
|
198
|
-
] });
|
|
199
|
-
}
|
|
200
|
-
);
|
|
201
27
|
|
|
202
|
-
// src/components/ChartLegend/ChartLegend.tsx
|
|
203
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
204
|
-
var ChartLegend = (0, import_react3.memo)(function ChartLegend2({
|
|
205
|
-
legendLabels,
|
|
206
|
-
containerBoxProps = {},
|
|
207
|
-
stacked = false
|
|
208
|
-
}) {
|
|
209
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
210
|
-
import_seeds_react_box3.Box,
|
|
211
|
-
{
|
|
212
|
-
as: "ul",
|
|
213
|
-
"aria-hidden": "true",
|
|
214
|
-
display: "flex",
|
|
215
|
-
justifyContent: "center",
|
|
216
|
-
flexDirection: stacked ? "column" : "row",
|
|
217
|
-
flexWrap: "wrap",
|
|
218
|
-
columnGap: 450,
|
|
219
|
-
rowGap: 200,
|
|
220
|
-
m: 0,
|
|
221
|
-
p: 0,
|
|
222
|
-
...containerBoxProps,
|
|
223
|
-
children: legendLabels.map(({ color, content }, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
224
|
-
ChartLegendLabel,
|
|
225
|
-
{
|
|
226
|
-
color: color || import_seeds_react_theme4.theme.colors.DATAVIZ_COLORS_LIST[index],
|
|
227
|
-
containerBoxProps: { as: "li" },
|
|
228
|
-
children: content
|
|
229
|
-
},
|
|
230
|
-
`chart-legend-label-${index}`
|
|
231
|
-
))
|
|
232
|
-
}
|
|
233
|
-
);
|
|
234
|
-
});
|
|
235
28
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
var _chunkEEVKTTT3js = require('./chunk-EEVKTTT3.js');
|
|
48
|
+
|
|
49
|
+
// src/components/AreaChart/AreaChart.tsx
|
|
50
|
+
var _react = require('react');
|
|
51
|
+
var _highcharts = require('highcharts'); var _highcharts2 = _interopRequireDefault(_highcharts);
|
|
52
|
+
var _highchartsreactofficial = require('highcharts-react-official');
|
|
53
|
+
var _accessibility = require('highcharts/modules/accessibility'); var _accessibility2 = _interopRequireDefault(_accessibility);
|
|
54
|
+
var _annotations = require('highcharts/modules/annotations'); var _annotations2 = _interopRequireDefault(_annotations);
|
|
55
|
+
var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
|
|
56
|
+
var _seedsreactbox = require('@sproutsocial/seeds-react-box');
|
|
251
57
|
|
|
252
58
|
// src/components/AreaChart/components/AreaChartLegend.tsx
|
|
253
|
-
|
|
59
|
+
|
|
60
|
+
var _seedsreacttheme = require('@sproutsocial/seeds-react-theme');
|
|
61
|
+
var _jsxruntime = require('react/jsx-runtime');
|
|
254
62
|
var getAreaChartLegendLabels = ({
|
|
255
63
|
data
|
|
256
64
|
}) => {
|
|
257
65
|
return data.map((series, index) => ({
|
|
258
|
-
content: /* @__PURE__ */ (0,
|
|
259
|
-
color: series.styles
|
|
66
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
|
|
67
|
+
color: _optionalChain([series, 'access', _ => _.styles, 'optionalAccess', _2 => _2.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
|
|
260
68
|
}));
|
|
261
69
|
};
|
|
262
|
-
var AreaChartLegend = (0,
|
|
70
|
+
var AreaChartLegend = _react.memo.call(void 0,
|
|
263
71
|
function AreaChartLegend2({ data }) {
|
|
264
|
-
return /* @__PURE__ */ (0,
|
|
72
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getAreaChartLegendLabels({ data }) });
|
|
265
73
|
}
|
|
266
74
|
);
|
|
267
75
|
|
|
268
76
|
// src/components/AreaChart/components/AreaChartTooltip.tsx
|
|
269
|
-
var import_react13 = require("react");
|
|
270
|
-
var import_seeds_react_box8 = require("@sproutsocial/seeds-react-box");
|
|
271
|
-
var import_seeds_react_duration = require("@sproutsocial/seeds-react-duration");
|
|
272
|
-
var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
|
|
273
|
-
var import_seeds_react_numeral = require("@sproutsocial/seeds-react-numeral");
|
|
274
|
-
var import_seeds_react_text4 = require("@sproutsocial/seeds-react-text");
|
|
275
|
-
|
|
276
|
-
// src/components/ChartTooltip/ChartTooltip.tsx
|
|
277
|
-
var import_react6 = require("react");
|
|
278
|
-
var import_styled_components5 = __toESM(require("styled-components"));
|
|
279
|
-
var import_seeds_react_box5 = require("@sproutsocial/seeds-react-box");
|
|
280
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
281
|
-
var StyledBox2 = (0, import_styled_components5.default)(import_seeds_react_box5.Box)`
|
|
282
|
-
.Icon,
|
|
283
|
-
.logo {
|
|
284
|
-
stroke: none;
|
|
285
|
-
}
|
|
286
|
-
`;
|
|
287
|
-
var ChartTooltip = (0, import_react6.memo)(function ChartTooltip2({
|
|
288
|
-
children
|
|
289
|
-
}) {
|
|
290
|
-
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
291
|
-
StyledBox2,
|
|
292
|
-
{
|
|
293
|
-
bg: "container.background.base",
|
|
294
|
-
boxShadow: "medium",
|
|
295
|
-
border: 500,
|
|
296
|
-
borderColor: "container.border.base",
|
|
297
|
-
borderRadius: 500,
|
|
298
|
-
p: 400,
|
|
299
|
-
minWidth: 285,
|
|
300
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_box5.Box, { display: "flex", flexDirection: "column", gap: 350, children })
|
|
301
|
-
}
|
|
302
|
-
);
|
|
303
|
-
});
|
|
304
|
-
|
|
305
|
-
// src/components/ChartTooltip/components/ChartTooltipFooter.tsx
|
|
306
|
-
var import_react7 = require("react");
|
|
307
|
-
var import_seeds_react_box6 = require("@sproutsocial/seeds-react-box");
|
|
308
|
-
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
309
|
-
var ChartTooltipFooter = (0, import_react7.memo)(
|
|
310
|
-
function ChartTooltipFooter2({ children }) {
|
|
311
|
-
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
312
|
-
import_seeds_react_box6.Box,
|
|
313
|
-
{
|
|
314
|
-
borderTop: 500,
|
|
315
|
-
borderColor: "container.border.base",
|
|
316
|
-
mx: -400,
|
|
317
|
-
mb: -200,
|
|
318
|
-
px: 400,
|
|
319
|
-
pt: 350,
|
|
320
|
-
children
|
|
321
|
-
}
|
|
322
|
-
);
|
|
323
|
-
}
|
|
324
|
-
);
|
|
325
|
-
|
|
326
|
-
// src/components/ChartTooltip/components/ChartTooltipHeader.tsx
|
|
327
|
-
var import_react8 = require("react");
|
|
328
|
-
var import_seeds_react_box7 = require("@sproutsocial/seeds-react-box");
|
|
329
|
-
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
330
|
-
var ChartTooltipHeader = (0, import_react8.memo)(
|
|
331
|
-
function ChartTooltipHeader2({ children }) {
|
|
332
|
-
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
333
|
-
import_seeds_react_box7.Box,
|
|
334
|
-
{
|
|
335
|
-
borderBottom: 500,
|
|
336
|
-
borderColor: "container.border.base",
|
|
337
|
-
mx: -400,
|
|
338
|
-
mt: -200,
|
|
339
|
-
px: 400,
|
|
340
|
-
pb: 350,
|
|
341
|
-
children
|
|
342
|
-
}
|
|
343
|
-
);
|
|
344
|
-
}
|
|
345
|
-
);
|
|
346
|
-
|
|
347
|
-
// src/components/ChartTooltip/components/ChartTooltipPortal.tsx
|
|
348
|
-
var import_react9 = require("react");
|
|
349
|
-
var import_react_dom = require("react-dom");
|
|
350
|
-
var generateChartTooltipPortalId = (chartId) => `highcharts-custom-tooltip-${chartId}`;
|
|
351
|
-
var ChartTooltipPortal = (0, import_react9.memo)(
|
|
352
|
-
function ChartTooltipPortal2({
|
|
353
|
-
chart,
|
|
354
|
-
renderContent
|
|
355
|
-
}) {
|
|
356
|
-
const isInitialized = (0, import_react9.useRef)(false);
|
|
357
|
-
const [node, setNode] = (0, import_react9.useState)(null);
|
|
358
|
-
const [context, setContext] = (0, import_react9.useState)(null);
|
|
359
|
-
(0, import_react9.useEffect)(() => {
|
|
360
|
-
const formatter = function() {
|
|
361
|
-
if (!isInitialized.current) {
|
|
362
|
-
isInitialized.current = true;
|
|
363
|
-
chart.tooltip.refresh.apply(chart.tooltip, [this.point]);
|
|
364
|
-
chart.tooltip.hide(0);
|
|
365
|
-
}
|
|
366
|
-
setContext(this);
|
|
367
|
-
return `<div id="${generateChartTooltipPortalId(
|
|
368
|
-
chart.index
|
|
369
|
-
)}" role='tooltip'></div>`;
|
|
370
|
-
};
|
|
371
|
-
chart.update({ tooltip: { formatter } });
|
|
372
|
-
}, [chart]);
|
|
373
|
-
(0, import_react9.useEffect)(() => {
|
|
374
|
-
if (context?.series?.chart?.tooltip) {
|
|
375
|
-
const tooltip = context.series.chart.tooltip;
|
|
376
|
-
const textElement = tooltip.label.text.element;
|
|
377
|
-
tooltip.label.box.attr({
|
|
378
|
-
height: textElement.offsetHeight,
|
|
379
|
-
width: textElement.offsetWidth
|
|
380
|
-
});
|
|
381
|
-
setNode(
|
|
382
|
-
document.getElementById(generateChartTooltipPortalId(chart.index))
|
|
383
|
-
);
|
|
384
|
-
}
|
|
385
|
-
}, [context, chart.index]);
|
|
386
|
-
return node && context ? (0, import_react_dom.createPortal)(renderContent(context), node) : null;
|
|
387
|
-
}
|
|
388
|
-
);
|
|
389
|
-
|
|
390
|
-
// src/components/ChartTooltip/components/ChartTooltipTable.tsx
|
|
391
|
-
var import_react11 = require("react");
|
|
392
|
-
|
|
393
|
-
// src/components/ChartTable/ChartTable.tsx
|
|
394
|
-
var import_react10 = require("react");
|
|
395
|
-
var import_styled_components6 = __toESM(require("styled-components"));
|
|
396
|
-
var import_seeds_react_text2 = require("@sproutsocial/seeds-react-text");
|
|
397
|
-
var import_seeds_react_table = require("@sproutsocial/seeds-react-table");
|
|
398
|
-
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
399
|
-
var StyledSeedsTable = (0, import_styled_components6.default)(import_seeds_react_table.Table)`
|
|
400
|
-
tbody tr:last-child {
|
|
401
|
-
border-bottom: none;
|
|
402
|
-
}
|
|
403
|
-
tr:last-child td,
|
|
404
|
-
tr:last-child th {
|
|
405
|
-
padding-bottom: 0;
|
|
406
|
-
}
|
|
407
|
-
tr:first-child td,
|
|
408
|
-
tr:first-child th {
|
|
409
|
-
padding-top: 0;
|
|
410
|
-
}
|
|
411
|
-
tr th {
|
|
412
|
-
padding-left: 0;
|
|
413
|
-
}
|
|
414
|
-
tr td:last-child {
|
|
415
|
-
padding-right: 0;
|
|
416
|
-
}
|
|
417
|
-
`;
|
|
418
|
-
var StyledSeedsTableRow = (0, import_styled_components6.default)(import_seeds_react_table.Table.TableRow)`
|
|
419
|
-
${({ $isAppendedRow, theme: theme16 }) => $isAppendedRow ? `border-top: 2px solid ${theme16.colors.container.border.base}` : ""}
|
|
420
|
-
`;
|
|
421
|
-
var ChartTable = (0, import_react10.memo)(function ChartTable2({
|
|
422
|
-
rows
|
|
423
|
-
}) {
|
|
424
|
-
if (!rows || rows.length === 0) {
|
|
425
|
-
return null;
|
|
426
|
-
}
|
|
427
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StyledSeedsTable, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_table.Table.TableBody, { children: rows.map(({ cells, isAppendedRow }, rowIndex) => {
|
|
428
|
-
if (!cells || cells.length === 0) {
|
|
429
|
-
return null;
|
|
430
|
-
}
|
|
431
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
432
|
-
StyledSeedsTableRow,
|
|
433
|
-
{
|
|
434
|
-
$isAppendedRow: isAppendedRow,
|
|
435
|
-
children: cells.map(
|
|
436
|
-
({ content, align = "left", colSpan = 1 }, cellIndex) => {
|
|
437
|
-
const uniqueIdentifier = `chart-tooltip-table-cell-${cellIndex}`;
|
|
438
|
-
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
439
|
-
import_seeds_react_table.Table.Cell,
|
|
440
|
-
{
|
|
441
|
-
id: uniqueIdentifier,
|
|
442
|
-
scope: cellIndex === 0 ? "row" : void 0,
|
|
443
|
-
align,
|
|
444
|
-
colSpan,
|
|
445
|
-
py: 200,
|
|
446
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_text2.Text.SmallBodyCopy, { as: "div", children: content })
|
|
447
|
-
},
|
|
448
|
-
uniqueIdentifier
|
|
449
|
-
);
|
|
450
|
-
}
|
|
451
|
-
)
|
|
452
|
-
},
|
|
453
|
-
`chart-tooltip-table-row-${rowIndex}`
|
|
454
|
-
);
|
|
455
|
-
}) }) });
|
|
456
|
-
});
|
|
457
77
|
|
|
458
|
-
// src/components/ChartTooltip/components/ChartTooltipTable.tsx
|
|
459
|
-
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
460
|
-
var ChartTooltipTable = (0, import_react11.memo)(
|
|
461
|
-
function ChartTooltipTable2({ rows }) {
|
|
462
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChartTable, { rows });
|
|
463
|
-
}
|
|
464
|
-
);
|
|
465
78
|
|
|
466
|
-
|
|
467
|
-
var
|
|
468
|
-
var
|
|
469
|
-
var
|
|
470
|
-
var ChartTooltipTitle = (0, import_react12.memo)(
|
|
471
|
-
function ChartTooltipTitle2({ children }) {
|
|
472
|
-
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_text3.Text.SmallSubHeadline, { as: "p", children });
|
|
473
|
-
}
|
|
474
|
-
);
|
|
79
|
+
var _seedsreactduration = require('@sproutsocial/seeds-react-duration');
|
|
80
|
+
var _seedsreacticon = require('@sproutsocial/seeds-react-icon');
|
|
81
|
+
var _seedsreactnumeral = require('@sproutsocial/seeds-react-numeral');
|
|
82
|
+
var _seedsreacttext = require('@sproutsocial/seeds-react-text');
|
|
475
83
|
|
|
476
|
-
|
|
477
|
-
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
478
|
-
var AreaChartTooltip = (0, import_react13.memo)(
|
|
84
|
+
var AreaChartTooltip = _react.memo.call(void 0,
|
|
479
85
|
function AreaChartTooltip2({
|
|
480
86
|
data,
|
|
481
87
|
invalidNumberLabel,
|
|
@@ -496,11 +102,11 @@ var AreaChartTooltip = (0, import_react13.memo)(
|
|
|
496
102
|
return {
|
|
497
103
|
cells: [
|
|
498
104
|
{
|
|
499
|
-
content: /* @__PURE__ */ (0,
|
|
105
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
|
|
500
106
|
},
|
|
501
107
|
{
|
|
502
|
-
content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0,
|
|
503
|
-
|
|
108
|
+
content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
109
|
+
_seedsreactnumeral.Numeral,
|
|
504
110
|
{
|
|
505
111
|
abbreviate: false,
|
|
506
112
|
currency,
|
|
@@ -518,8 +124,8 @@ var AreaChartTooltip = (0, import_react13.memo)(
|
|
|
518
124
|
{
|
|
519
125
|
cells: [
|
|
520
126
|
{
|
|
521
|
-
content: /* @__PURE__ */ (0,
|
|
522
|
-
|
|
127
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
128
|
+
_seedsreacttext.Text,
|
|
523
129
|
{
|
|
524
130
|
fontWeight: "semibold",
|
|
525
131
|
"aria-label": `${tooltipTotalLabel}: `,
|
|
@@ -528,8 +134,8 @@ var AreaChartTooltip = (0, import_react13.memo)(
|
|
|
528
134
|
)
|
|
529
135
|
},
|
|
530
136
|
{
|
|
531
|
-
content: /* @__PURE__ */ (0,
|
|
532
|
-
|
|
137
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontWeight: "bold", children: total === null && invalidNumberLabel ? invalidNumberLabel : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
138
|
+
_seedsreactnumeral.Numeral,
|
|
533
139
|
{
|
|
534
140
|
abbreviate: false,
|
|
535
141
|
currency,
|
|
@@ -544,60 +150,61 @@ var AreaChartTooltip = (0, import_react13.memo)(
|
|
|
544
150
|
isAppendedRow: true
|
|
545
151
|
}
|
|
546
152
|
] : [];
|
|
547
|
-
return /* @__PURE__ */ (0,
|
|
153
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
|
|
548
154
|
xAnnotationDetails ? xAnnotationDetails() : void 0,
|
|
549
|
-
/* @__PURE__ */ (0,
|
|
550
|
-
/* @__PURE__ */ (0,
|
|
551
|
-
ChartTooltipTable,
|
|
155
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
|
|
156
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
157
|
+
_chunkEEVKTTT3js.ChartTooltipTable,
|
|
552
158
|
{
|
|
553
159
|
rows: [...rows, ...appendedRows]
|
|
554
160
|
}
|
|
555
161
|
),
|
|
556
|
-
onClick && tooltipClickLabel ? /* @__PURE__ */ (0,
|
|
557
|
-
/* @__PURE__ */ (0,
|
|
558
|
-
/* @__PURE__ */ (0,
|
|
162
|
+
onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
163
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
|
|
164
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
|
|
559
165
|
] }) : tooltipClickLabel }) : null
|
|
560
166
|
] });
|
|
561
167
|
}
|
|
562
168
|
);
|
|
563
169
|
|
|
564
170
|
// src/components/ChartXAnnotationMarker/components/ChartXAnnotationMarkerPortal.tsx
|
|
565
|
-
|
|
566
|
-
var
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
var ChartXAnnotationMarkerPortal = (0,
|
|
171
|
+
|
|
172
|
+
var _reactdom = require('react-dom');
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
var ChartXAnnotationMarkerPortal = _react.memo.call(void 0,
|
|
570
176
|
function ChartXAnnotationMarkerPortal2({
|
|
571
177
|
xAnnotations,
|
|
572
|
-
annotationContext
|
|
178
|
+
annotationContext,
|
|
179
|
+
chartContainer
|
|
573
180
|
}) {
|
|
574
|
-
const annotationContainers = (0,
|
|
575
|
-
const [renderCount, setRenderCount] = (0,
|
|
181
|
+
const annotationContainers = _react.useRef.call(void 0, {});
|
|
182
|
+
const [renderCount, setRenderCount] = _react.useState.call(void 0, 0);
|
|
576
183
|
const forceRender = () => setRenderCount((prev) => prev + 1);
|
|
577
|
-
(0,
|
|
184
|
+
_react.useEffect.call(void 0, () => {
|
|
578
185
|
if (annotationContext.labels) {
|
|
579
186
|
const newContainers = {};
|
|
580
|
-
const existingAnnotationContainers =
|
|
187
|
+
const existingAnnotationContainers = chartContainer.querySelectorAll(
|
|
581
188
|
"div[data-annotation-marker='true']"
|
|
582
189
|
);
|
|
583
190
|
existingAnnotationContainers.forEach(
|
|
584
191
|
(annotation) => annotation.setAttribute("data-annotation-marker", "false")
|
|
585
192
|
);
|
|
586
193
|
annotationContext.labels.forEach((label) => {
|
|
587
|
-
const labelElement = label.graphic
|
|
194
|
+
const labelElement = _optionalChain([label, 'access', _3 => _3.graphic, 'optionalAccess', _4 => _4.div]);
|
|
588
195
|
if (labelElement) {
|
|
589
196
|
labelElement.querySelectorAll("div[data-annotation-marker]").forEach((component) => component.remove());
|
|
590
197
|
const annotationDiv = document.createElement("div");
|
|
591
198
|
annotationDiv.setAttribute("data-annotation-marker", "true");
|
|
592
199
|
labelElement.appendChild(annotationDiv);
|
|
593
|
-
const xValue = label.options
|
|
200
|
+
const xValue = _optionalChain([label, 'access', _5 => _5.options, 'optionalAccess', _6 => _6.point, 'optionalAccess', _7 => _7.x]);
|
|
594
201
|
newContainers[xValue] = annotationDiv;
|
|
595
202
|
}
|
|
596
203
|
});
|
|
597
204
|
annotationContainers.current = newContainers;
|
|
598
205
|
forceRender();
|
|
599
206
|
requestAnimationFrame(() => {
|
|
600
|
-
|
|
207
|
+
chartContainer.querySelectorAll("div.highcharts-annotation").forEach((annotationDiv) => {
|
|
601
208
|
const reactAnnotations = annotationDiv.querySelectorAll(
|
|
602
209
|
"div[data-annotation-marker]"
|
|
603
210
|
);
|
|
@@ -610,570 +217,19 @@ var ChartXAnnotationMarkerPortal = (0, import_react14.memo)(
|
|
|
610
217
|
});
|
|
611
218
|
});
|
|
612
219
|
}
|
|
613
|
-
}, [annotationContext.labels, xAnnotations]);
|
|
614
|
-
return /* @__PURE__ */ (0,
|
|
220
|
+
}, [annotationContext.labels, xAnnotations, chartContainer]);
|
|
221
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: Object.entries(annotationContainers.current).map(
|
|
615
222
|
([xValue, container]) => {
|
|
616
|
-
const annotationComponent = xAnnotations
|
|
617
|
-
return annotationComponent ? (0,
|
|
223
|
+
const annotationComponent = _optionalChain([xAnnotations, 'optionalAccess', _8 => _8[Number(xValue)], 'optionalAccess', _9 => _9.marker]);
|
|
224
|
+
return annotationComponent ? _reactdom.createPortal.call(void 0, annotationComponent(), container) : null;
|
|
618
225
|
}
|
|
619
226
|
) });
|
|
620
227
|
}
|
|
621
228
|
);
|
|
622
229
|
|
|
623
|
-
// src/helpers/transformDataToSeries.ts
|
|
624
|
-
var transformDataToSeries = ({
|
|
625
|
-
data
|
|
626
|
-
}, type) => {
|
|
627
|
-
const hasCategoricalData = data.some(
|
|
628
|
-
(series) => series.points.some((point) => typeof point.x === "string")
|
|
629
|
-
);
|
|
630
|
-
return data.map((dataItem, dataIndex) => {
|
|
631
|
-
const points = dataItem.points || [];
|
|
632
|
-
const dataPoints = points.map((point, pointsIndex) => {
|
|
633
|
-
let enableMarker = false;
|
|
634
|
-
const isFirstPoint = pointsIndex === 0;
|
|
635
|
-
const isLastPoint = pointsIndex === points.length - 1;
|
|
636
|
-
const previousY = isFirstPoint ? null : points[pointsIndex - 1].y;
|
|
637
|
-
const nextY = isLastPoint ? null : points[pointsIndex + 1].y;
|
|
638
|
-
if (isFirstPoint && nextY === null) {
|
|
639
|
-
enableMarker = true;
|
|
640
|
-
} else if (isLastPoint && previousY === null) {
|
|
641
|
-
enableMarker = true;
|
|
642
|
-
} else if (previousY === null && nextY === null) {
|
|
643
|
-
enableMarker = true;
|
|
644
|
-
}
|
|
645
|
-
return {
|
|
646
|
-
x: hasCategoricalData ? pointsIndex : point.x,
|
|
647
|
-
y: point.y,
|
|
648
|
-
marker: {
|
|
649
|
-
enabled: enableMarker ? enableMarker : void 0,
|
|
650
|
-
symbol: enableMarker ? "circle" : void 0
|
|
651
|
-
},
|
|
652
|
-
// For categorical data, store the original category name
|
|
653
|
-
...hasCategoricalData && { name: point.x }
|
|
654
|
-
};
|
|
655
|
-
});
|
|
656
|
-
return {
|
|
657
|
-
colorIndex: dataIndex,
|
|
658
|
-
data: dataPoints,
|
|
659
|
-
name: dataItem.name,
|
|
660
|
-
type
|
|
661
|
-
};
|
|
662
|
-
});
|
|
663
|
-
};
|
|
664
|
-
|
|
665
|
-
// src/helpers/transformTimeSeriesTooltipData.ts
|
|
666
|
-
var import_seeds_react_theme6 = require("@sproutsocial/seeds-react-theme");
|
|
667
|
-
var transformTimeSeriesTooltipData = ({
|
|
668
|
-
context,
|
|
669
|
-
data
|
|
670
|
-
}) => {
|
|
671
|
-
return (context.series.chart.series || []).map((series, index) => {
|
|
672
|
-
const pointIndex = context.point.index;
|
|
673
|
-
const y = series?.points?.[pointIndex]?.y;
|
|
674
|
-
return {
|
|
675
|
-
color: data[index]?.styles?.color || import_seeds_react_theme6.theme.colors.DATAVIZ_COLORS_LIST[index],
|
|
676
|
-
...data[index]?.icon ? { icon: data[index]?.icon } : {},
|
|
677
|
-
name: series.name,
|
|
678
|
-
value: typeof y === "number" ? y : null
|
|
679
|
-
};
|
|
680
|
-
});
|
|
681
|
-
};
|
|
682
|
-
|
|
683
|
-
// src/helpers/yAxisLabelFormatter.ts
|
|
684
|
-
var import_seeds_react_duration2 = require("@sproutsocial/seeds-react-duration");
|
|
685
|
-
var import_seeds_react_numeral2 = require("@sproutsocial/seeds-react-numeral");
|
|
686
|
-
var yAxisLabelFormatter = ({
|
|
687
|
-
numberLocale,
|
|
688
|
-
textLocale,
|
|
689
|
-
tickPositions,
|
|
690
|
-
value,
|
|
691
|
-
currency = "USD",
|
|
692
|
-
numberFormat = "decimal"
|
|
693
|
-
}) => {
|
|
694
|
-
const numberValue = Number(value);
|
|
695
|
-
if (numberValue === 0) {
|
|
696
|
-
return (0, import_seeds_react_numeral2.formatNumeral)({
|
|
697
|
-
locale: numberLocale,
|
|
698
|
-
number: numberValue
|
|
699
|
-
});
|
|
700
|
-
}
|
|
701
|
-
if (numberFormat === "duration") {
|
|
702
|
-
return (0, import_seeds_react_duration2.formatDuration)({
|
|
703
|
-
display: "narrow",
|
|
704
|
-
locale: textLocale,
|
|
705
|
-
milliseconds: numberValue
|
|
706
|
-
});
|
|
707
|
-
}
|
|
708
|
-
const maxValue = tickPositions && tickPositions.length > 0 ? tickPositions[tickPositions.length - 1] : void 0;
|
|
709
|
-
const abbreviate = typeof maxValue === "number" && maxValue > 9999 ? 1e3 : true;
|
|
710
|
-
return (0, import_seeds_react_numeral2.formatNumeral)({
|
|
711
|
-
abbreviate,
|
|
712
|
-
currency,
|
|
713
|
-
format: numberFormat,
|
|
714
|
-
locale: numberLocale,
|
|
715
|
-
number: numberValue
|
|
716
|
-
});
|
|
717
|
-
};
|
|
718
|
-
|
|
719
|
-
// src/helpers/xAxisLabelFormatter.ts
|
|
720
|
-
var getDatePartsInTimezone = (date, timezone) => {
|
|
721
|
-
const formatter = new Intl.DateTimeFormat("en-US", {
|
|
722
|
-
year: "numeric",
|
|
723
|
-
month: "numeric",
|
|
724
|
-
day: "numeric",
|
|
725
|
-
timeZone: timezone
|
|
726
|
-
});
|
|
727
|
-
const parts = formatter.formatToParts(date);
|
|
728
|
-
return {
|
|
729
|
-
day: parseInt(parts.find((p) => p.type === "day")?.value ?? "0", 10),
|
|
730
|
-
month: parseInt(parts.find((p) => p.type === "month")?.value ?? "0", 10),
|
|
731
|
-
year: parseInt(parts.find((p) => p.type === "year")?.value ?? "0", 10)
|
|
732
|
-
};
|
|
733
|
-
};
|
|
734
|
-
var xAxisLabelFormatter = ({
|
|
735
|
-
textLocale,
|
|
736
|
-
tickPositions = [],
|
|
737
|
-
unitName,
|
|
738
|
-
value,
|
|
739
|
-
// optional
|
|
740
|
-
timeFormat = "12",
|
|
741
|
-
timezone = "UTC"
|
|
742
|
-
}) => {
|
|
743
|
-
if (typeof value === "string") {
|
|
744
|
-
return `<span>${value}</span>`;
|
|
745
|
-
}
|
|
746
|
-
const tickIndex = tickPositions.indexOf(value);
|
|
747
|
-
const isFirst = tickIndex === 0;
|
|
748
|
-
const previousValue = tickPositions[tickIndex - 1];
|
|
749
|
-
const valueDate = new Date(value);
|
|
750
|
-
const valueParts = getDatePartsInTimezone(valueDate, timezone);
|
|
751
|
-
const previousValueDate = previousValue ? new Date(previousValue) : void 0;
|
|
752
|
-
const previousValueParts = previousValueDate ? getDatePartsInTimezone(previousValueDate, timezone) : void 0;
|
|
753
|
-
let firstPartOptions = {};
|
|
754
|
-
let secondPartOptions = {};
|
|
755
|
-
switch (unitName) {
|
|
756
|
-
case "hour":
|
|
757
|
-
firstPartOptions = timeFormat === "24" ? { hour: "numeric", minute: "numeric", hour12: false } : { hour: "numeric" };
|
|
758
|
-
if (isFirst || valueParts.day !== previousValueParts?.day) {
|
|
759
|
-
secondPartOptions = { day: "numeric", month: "short" };
|
|
760
|
-
}
|
|
761
|
-
break;
|
|
762
|
-
case "day":
|
|
763
|
-
case "week":
|
|
764
|
-
firstPartOptions = { day: "numeric" };
|
|
765
|
-
if (isFirst || valueParts.month !== previousValueParts?.month) {
|
|
766
|
-
secondPartOptions = { month: "short" };
|
|
767
|
-
}
|
|
768
|
-
break;
|
|
769
|
-
case "month":
|
|
770
|
-
firstPartOptions = { month: "short" };
|
|
771
|
-
if (isFirst || valueParts.year !== previousValueParts?.year) {
|
|
772
|
-
secondPartOptions = { year: "numeric" };
|
|
773
|
-
}
|
|
774
|
-
break;
|
|
775
|
-
case "year":
|
|
776
|
-
firstPartOptions = { year: "numeric" };
|
|
777
|
-
break;
|
|
778
|
-
default:
|
|
779
|
-
firstPartOptions = {};
|
|
780
|
-
break;
|
|
781
|
-
}
|
|
782
|
-
const firstPart = new Intl.DateTimeFormat(textLocale, {
|
|
783
|
-
...firstPartOptions,
|
|
784
|
-
timeZone: timezone
|
|
785
|
-
}).format(valueDate);
|
|
786
|
-
const secondPart = Object.keys(secondPartOptions).length > 0 ? new Intl.DateTimeFormat(textLocale, {
|
|
787
|
-
...secondPartOptions,
|
|
788
|
-
timeZone: timezone
|
|
789
|
-
}).format(valueDate) : void 0;
|
|
790
|
-
return `<span>${firstPart}</span>${secondPart ? `<span>${secondPart}</span>` : ""}`;
|
|
791
|
-
};
|
|
792
|
-
|
|
793
|
-
// src/helpers/isHourlyTimeData.ts
|
|
794
|
-
function isHourlyTimeData(data) {
|
|
795
|
-
if (!data.length) return false;
|
|
796
|
-
const xVals = data.flatMap((series) => series.points.map((p) => p.x));
|
|
797
|
-
if (!xVals.length) return false;
|
|
798
|
-
if (xVals.some((x) => typeof x === "string")) return false;
|
|
799
|
-
const dates = xVals.map((x) => {
|
|
800
|
-
const d = new Date(x);
|
|
801
|
-
return `${d.getUTCFullYear()}-${d.getUTCMonth()}-${d.getUTCDate()}`;
|
|
802
|
-
});
|
|
803
|
-
const uniqueDates = new Set(dates);
|
|
804
|
-
if (uniqueDates.size !== 1) return false;
|
|
805
|
-
return xVals.every((x) => {
|
|
806
|
-
const d = new Date(x);
|
|
807
|
-
const hour = d.getUTCHours();
|
|
808
|
-
const minutes = d.getUTCMinutes();
|
|
809
|
-
const seconds = d.getUTCSeconds();
|
|
810
|
-
return hour >= 0 && hour <= 23 && minutes === 0 && seconds === 0;
|
|
811
|
-
});
|
|
812
|
-
}
|
|
813
|
-
|
|
814
|
-
// src/helpers/isCategoricalHourData.ts
|
|
815
|
-
function isCategoricalHourData(data) {
|
|
816
|
-
if (!data.length) return false;
|
|
817
|
-
const xVals = data.flatMap((series) => series.points.map((p) => p.x));
|
|
818
|
-
if (!xVals.length) return false;
|
|
819
|
-
if (xVals.some((x) => typeof x !== "string")) return false;
|
|
820
|
-
const hour12Pattern = /^\d{1,2} (AM|PM)$/;
|
|
821
|
-
const hour24Pattern = /^([01]?\d|2[0-3]):([0-5]\d)$/;
|
|
822
|
-
const stringValues = xVals;
|
|
823
|
-
const allMatch12Hour = stringValues.every((x) => hour12Pattern.test(x));
|
|
824
|
-
const allMatch24Hour = stringValues.every((x) => hour24Pattern.test(x));
|
|
825
|
-
return allMatch12Hour || allMatch24Hour;
|
|
826
|
-
}
|
|
827
|
-
|
|
828
|
-
// src/helpers/getStorybookRandomColor.ts
|
|
829
|
-
var getStorybookRandomColor = () => {
|
|
830
|
-
const letters = "0123456789ABCDEF";
|
|
831
|
-
let color = "#";
|
|
832
|
-
for (let i = 0; i < 6; i++) {
|
|
833
|
-
color += letters[Math.floor(Math.random() * 16)];
|
|
834
|
-
}
|
|
835
|
-
return color;
|
|
836
|
-
};
|
|
837
|
-
|
|
838
|
-
// src/helpers/getStorybookCategoricalData.ts
|
|
839
|
-
var getStorybookCategoricalData = ({
|
|
840
|
-
showNulls,
|
|
841
|
-
showNegativeValues,
|
|
842
|
-
numberOfSeries,
|
|
843
|
-
yAxisMax,
|
|
844
|
-
showCustomColors,
|
|
845
|
-
showDashedLines,
|
|
846
|
-
categoryType
|
|
847
|
-
}) => {
|
|
848
|
-
const categoryOptions = {
|
|
849
|
-
hours: [
|
|
850
|
-
"12 AM",
|
|
851
|
-
"1 AM",
|
|
852
|
-
"2 AM",
|
|
853
|
-
"3 AM",
|
|
854
|
-
"4 AM",
|
|
855
|
-
"5 AM",
|
|
856
|
-
"6 AM",
|
|
857
|
-
"7 AM",
|
|
858
|
-
"8 AM",
|
|
859
|
-
"9 AM",
|
|
860
|
-
"10 AM",
|
|
861
|
-
"11 AM",
|
|
862
|
-
"12 PM",
|
|
863
|
-
"1 PM",
|
|
864
|
-
"2 PM",
|
|
865
|
-
"3 PM",
|
|
866
|
-
"4 PM",
|
|
867
|
-
"5 PM",
|
|
868
|
-
"6 PM",
|
|
869
|
-
"7 PM",
|
|
870
|
-
"8 PM",
|
|
871
|
-
"9 PM",
|
|
872
|
-
"10 PM",
|
|
873
|
-
"11 PM"
|
|
874
|
-
],
|
|
875
|
-
hours24: [
|
|
876
|
-
"00:00",
|
|
877
|
-
"01:00",
|
|
878
|
-
"02:00",
|
|
879
|
-
"03:00",
|
|
880
|
-
"04:00",
|
|
881
|
-
"05:00",
|
|
882
|
-
"06:00",
|
|
883
|
-
"07:00",
|
|
884
|
-
"08:00",
|
|
885
|
-
"09:00",
|
|
886
|
-
"10:00",
|
|
887
|
-
"11:00",
|
|
888
|
-
"12:00",
|
|
889
|
-
"13:00",
|
|
890
|
-
"14:00",
|
|
891
|
-
"15:00",
|
|
892
|
-
"16:00",
|
|
893
|
-
"17:00",
|
|
894
|
-
"18:00",
|
|
895
|
-
"19:00",
|
|
896
|
-
"20:00",
|
|
897
|
-
"21:00",
|
|
898
|
-
"22:00",
|
|
899
|
-
"23:00"
|
|
900
|
-
],
|
|
901
|
-
days: [
|
|
902
|
-
"Monday",
|
|
903
|
-
"Tuesday",
|
|
904
|
-
"Wednesday",
|
|
905
|
-
"Thursday",
|
|
906
|
-
"Friday",
|
|
907
|
-
"Saturday",
|
|
908
|
-
"Sunday"
|
|
909
|
-
],
|
|
910
|
-
months: [
|
|
911
|
-
"January",
|
|
912
|
-
"February",
|
|
913
|
-
"March",
|
|
914
|
-
"April",
|
|
915
|
-
"May",
|
|
916
|
-
"June",
|
|
917
|
-
"July",
|
|
918
|
-
"August",
|
|
919
|
-
"September",
|
|
920
|
-
"October",
|
|
921
|
-
"November",
|
|
922
|
-
"December"
|
|
923
|
-
],
|
|
924
|
-
custom: [
|
|
925
|
-
"Category A",
|
|
926
|
-
"Category B",
|
|
927
|
-
"Category C",
|
|
928
|
-
"Category D",
|
|
929
|
-
"Category E"
|
|
930
|
-
]
|
|
931
|
-
};
|
|
932
|
-
const categories = categoryOptions[categoryType];
|
|
933
|
-
const numberOfPoints = categories.length;
|
|
934
|
-
return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
|
|
935
|
-
let nullsArray = [];
|
|
936
|
-
if (showNulls) {
|
|
937
|
-
const nullsArrayLength = Math.floor(numberOfPoints / 5);
|
|
938
|
-
nullsArray = [...Array(nullsArrayLength)].map(
|
|
939
|
-
() => Math.floor(Math.random() * numberOfPoints)
|
|
940
|
-
);
|
|
941
|
-
}
|
|
942
|
-
return {
|
|
943
|
-
points: categories.map((category, pointIndex) => {
|
|
944
|
-
const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
|
|
945
|
-
const randomValue = Math.random();
|
|
946
|
-
const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
|
|
947
|
-
return {
|
|
948
|
-
x: category,
|
|
949
|
-
y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
|
|
950
|
-
};
|
|
951
|
-
}),
|
|
952
|
-
name: `Series ${seriesIndex + 1}`,
|
|
953
|
-
styles: {
|
|
954
|
-
color: showCustomColors ? getStorybookRandomColor() : void 0,
|
|
955
|
-
pattern: showDashedLines ? "dashed" : "solid"
|
|
956
|
-
}
|
|
957
|
-
};
|
|
958
|
-
});
|
|
959
|
-
};
|
|
960
|
-
|
|
961
|
-
// src/helpers/getStorybookSparseTimelineData.ts
|
|
962
|
-
var getStorybookSparseTimelineData = ({
|
|
963
|
-
showNulls,
|
|
964
|
-
showNegativeValues,
|
|
965
|
-
numberOfSeries,
|
|
966
|
-
yAxisMax,
|
|
967
|
-
showCustomColors,
|
|
968
|
-
showDashedLines,
|
|
969
|
-
numberOfPoints = 5,
|
|
970
|
-
timeSpanHours = 24
|
|
971
|
-
}) => {
|
|
972
|
-
const seriesNames = [
|
|
973
|
-
"Posts Published",
|
|
974
|
-
"Comments",
|
|
975
|
-
"Likes",
|
|
976
|
-
"Shares",
|
|
977
|
-
"Clicks",
|
|
978
|
-
"Views",
|
|
979
|
-
"Saves",
|
|
980
|
-
"Reposts",
|
|
981
|
-
"Mentions",
|
|
982
|
-
"Reactions"
|
|
983
|
-
];
|
|
984
|
-
const baseDate = /* @__PURE__ */ new Date("2024-01-01T00:00:00Z");
|
|
985
|
-
const timeSpanMs = timeSpanHours * 60 * 60 * 1e3;
|
|
986
|
-
return [...Array(numberOfSeries).keys()].map((seriesIndex) => {
|
|
987
|
-
let nullsArray = [];
|
|
988
|
-
if (showNulls) {
|
|
989
|
-
const nullsArrayLength = Math.floor(numberOfPoints / 5);
|
|
990
|
-
nullsArray = [...Array(nullsArrayLength)].map(
|
|
991
|
-
() => Math.floor(Math.random() * numberOfPoints)
|
|
992
|
-
);
|
|
993
|
-
}
|
|
994
|
-
const timestamps = [...Array(numberOfPoints)].map(() => {
|
|
995
|
-
const randomOffset = Math.random() * timeSpanMs;
|
|
996
|
-
return baseDate.getTime() + randomOffset;
|
|
997
|
-
}).sort((a, b) => a - b);
|
|
998
|
-
return {
|
|
999
|
-
points: timestamps.map((timestamp, pointIndex) => {
|
|
1000
|
-
const showNull = nullsArray && nullsArray.length > 0 ? nullsArray.includes(pointIndex) : false;
|
|
1001
|
-
const randomValue = Math.random();
|
|
1002
|
-
const positiveOrNegativeYAxisMax = showNegativeValues ? randomValue < 0.5 ? -yAxisMax : yAxisMax : yAxisMax;
|
|
1003
|
-
return {
|
|
1004
|
-
x: timestamp,
|
|
1005
|
-
y: showNull ? null : Math.floor(randomValue * positiveOrNegativeYAxisMax)
|
|
1006
|
-
};
|
|
1007
|
-
}),
|
|
1008
|
-
name: seriesNames[seriesIndex] || `Series ${seriesIndex + 1}`,
|
|
1009
|
-
styles: {
|
|
1010
|
-
color: showCustomColors ? getStorybookRandomColor() : void 0,
|
|
1011
|
-
pattern: showDashedLines ? "dashed" : "solid"
|
|
1012
|
-
}
|
|
1013
|
-
};
|
|
1014
|
-
});
|
|
1015
|
-
};
|
|
1016
|
-
|
|
1017
230
|
// src/hooks/useTimeSeriesChartOptions.ts
|
|
1018
|
-
var import_react15 = require("react");
|
|
1019
|
-
|
|
1020
|
-
// src/constants/chartOptions.ts
|
|
1021
|
-
var import_lodash = __toESM(require("lodash"));
|
|
1022
|
-
var baseChartOptions = {
|
|
1023
|
-
chart: {
|
|
1024
|
-
animation: false,
|
|
1025
|
-
styledMode: true
|
|
1026
|
-
},
|
|
1027
|
-
credits: {
|
|
1028
|
-
enabled: false
|
|
1029
|
-
},
|
|
1030
|
-
exporting: {
|
|
1031
|
-
enabled: false,
|
|
1032
|
-
fallbackToExportServer: false
|
|
1033
|
-
},
|
|
1034
|
-
legend: {
|
|
1035
|
-
enabled: false
|
|
1036
|
-
},
|
|
1037
|
-
title: {
|
|
1038
|
-
text: void 0
|
|
1039
|
-
},
|
|
1040
|
-
tooltip: {
|
|
1041
|
-
hideDelay: 0,
|
|
1042
|
-
outside: true,
|
|
1043
|
-
padding: 0,
|
|
1044
|
-
shape: "rect",
|
|
1045
|
-
shared: true,
|
|
1046
|
-
useHTML: true
|
|
1047
|
-
}
|
|
1048
|
-
};
|
|
1049
|
-
var TIME_SERIES_CHART_HEIGHT = 275;
|
|
1050
|
-
var timeSeriesChartOptions = import_lodash.default.merge({}, baseChartOptions, {
|
|
1051
|
-
annotations: [
|
|
1052
|
-
{
|
|
1053
|
-
draggable: "",
|
|
1054
|
-
labelOptions: {
|
|
1055
|
-
useHTML: true,
|
|
1056
|
-
padding: 0
|
|
1057
|
-
// removes "left" property padding created by highcharts so that label is centered
|
|
1058
|
-
}
|
|
1059
|
-
}
|
|
1060
|
-
],
|
|
1061
|
-
chart: {
|
|
1062
|
-
// events.click is set at the component level because of the optional onClick prop
|
|
1063
|
-
height: TIME_SERIES_CHART_HEIGHT,
|
|
1064
|
-
spacing: [5, 1, 0, 2]
|
|
1065
|
-
},
|
|
1066
|
-
plotOptions: {
|
|
1067
|
-
series: {
|
|
1068
|
-
animation: false,
|
|
1069
|
-
clip: false,
|
|
1070
|
-
marker: {
|
|
1071
|
-
enabled: false,
|
|
1072
|
-
states: {
|
|
1073
|
-
hover: {
|
|
1074
|
-
enabled: false
|
|
1075
|
-
}
|
|
1076
|
-
}
|
|
1077
|
-
}
|
|
1078
|
-
}
|
|
1079
|
-
},
|
|
1080
|
-
xAxis: {
|
|
1081
|
-
crosshair: {
|
|
1082
|
-
zIndex: 3
|
|
1083
|
-
},
|
|
1084
|
-
minPadding: 0,
|
|
1085
|
-
// must be handled dynamically instead of css
|
|
1086
|
-
maxPadding: 0,
|
|
1087
|
-
// must be handled dynamically instead of css
|
|
1088
|
-
type: "datetime",
|
|
1089
|
-
labels: {
|
|
1090
|
-
useHTML: true
|
|
1091
|
-
// formatter is set at the component level because of the required text locale prop
|
|
1092
|
-
}
|
|
1093
|
-
},
|
|
1094
|
-
yAxis: {
|
|
1095
|
-
labels: {
|
|
1096
|
-
useHTML: true
|
|
1097
|
-
// formatter is set at the component level because of the optional yAxisLabelFormatter prop
|
|
1098
|
-
},
|
|
1099
|
-
softMax: 0,
|
|
1100
|
-
softMin: 0,
|
|
1101
|
-
title: {
|
|
1102
|
-
text: void 0
|
|
1103
|
-
},
|
|
1104
|
-
plotLines: [
|
|
1105
|
-
/* Adds a custom plotLine at y=0 to represent the chart baseline.
|
|
1106
|
-
This approach allows full control over the line's appearance (e.g., color, z-index),
|
|
1107
|
-
unlike relying on the default xAxis line, which always renders at the bottom of the chart
|
|
1108
|
-
even when y=0 appears elsewhere (e.g., with negative values).
|
|
1109
|
-
*/
|
|
1110
|
-
{
|
|
1111
|
-
className: "y-axis-zero-line",
|
|
1112
|
-
value: 0,
|
|
1113
|
-
zIndex: 3
|
|
1114
|
-
// ensures the line appears over the default y=0 line, which we can't seleect as specifically
|
|
1115
|
-
}
|
|
1116
|
-
]
|
|
1117
|
-
}
|
|
1118
|
-
});
|
|
1119
|
-
var lineChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
|
|
1120
|
-
// plotOptions.spline.events.click is set at the component level because of the optional onClick prop
|
|
1121
|
-
});
|
|
1122
|
-
var areaChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
|
|
1123
|
-
plotOptions: {
|
|
1124
|
-
areaspline: {
|
|
1125
|
-
// events.click is set at the component level because of the optional onClick prop
|
|
1126
|
-
stacking: "normal"
|
|
1127
|
-
}
|
|
1128
|
-
}
|
|
1129
|
-
});
|
|
1130
|
-
var columnChartOptions = import_lodash.default.merge({}, timeSeriesChartOptions, {
|
|
1131
|
-
plotOptions: {
|
|
1132
|
-
column: {
|
|
1133
|
-
stacking: "normal",
|
|
1134
|
-
pointPadding: 0.25,
|
|
1135
|
-
groupPadding: 0.25,
|
|
1136
|
-
borderRadius: 4
|
|
1137
|
-
}
|
|
1138
|
-
},
|
|
1139
|
-
xAxis: {
|
|
1140
|
-
crosshair: false
|
|
1141
|
-
},
|
|
1142
|
-
yAxis: {
|
|
1143
|
-
plotLines: [
|
|
1144
|
-
{
|
|
1145
|
-
// For stacked column charts with visible borders (e.g., white for contrast),
|
|
1146
|
-
// we raise the zIndex of the y=0 plotLine to ensure it remains visible
|
|
1147
|
-
// and isn't visually covered by overlapping column borders.
|
|
1148
|
-
zIndex: 5
|
|
1149
|
-
}
|
|
1150
|
-
]
|
|
1151
|
-
}
|
|
1152
|
-
});
|
|
1153
|
-
var VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
|
|
1154
|
-
var DONUT_CHART_HALO_SIZE = 10;
|
|
1155
|
-
var DONUT_CHART_HEIGHT = 250 + DONUT_CHART_HALO_SIZE * 2;
|
|
1156
|
-
var DONUT_CHART_WIDTH = DONUT_CHART_HEIGHT;
|
|
1157
|
-
var donutChartOptions = import_lodash.default.merge({}, baseChartOptions, {
|
|
1158
|
-
chart: {
|
|
1159
|
-
height: DONUT_CHART_HEIGHT,
|
|
1160
|
-
spacing: [0, 0, 0, 0]
|
|
1161
|
-
},
|
|
1162
|
-
plotOptions: {
|
|
1163
|
-
pie: {
|
|
1164
|
-
animation: false,
|
|
1165
|
-
borderRadius: 0,
|
|
1166
|
-
// must be handled here instead of css because of path rendering
|
|
1167
|
-
dataLabels: {
|
|
1168
|
-
enabled: false
|
|
1169
|
-
},
|
|
1170
|
-
innerSize: "50%"
|
|
1171
|
-
}
|
|
1172
|
-
}
|
|
1173
|
-
});
|
|
1174
231
|
|
|
1175
|
-
|
|
1176
|
-
var import_lodash2 = require("lodash");
|
|
232
|
+
var _lodash = require('lodash');
|
|
1177
233
|
var useTimeSeriesChartOptions = ({
|
|
1178
234
|
xAnnotations,
|
|
1179
235
|
data,
|
|
@@ -1189,15 +245,15 @@ var useTimeSeriesChartOptions = ({
|
|
|
1189
245
|
timezone = "UTC",
|
|
1190
246
|
xAxisLabelFormatter: xAxisLabelFormatter2
|
|
1191
247
|
}) => {
|
|
1192
|
-
const [chart, setChart] = (0,
|
|
1193
|
-
const callback = (0,
|
|
248
|
+
const [chart, setChart] = _react.useState.call(void 0, null);
|
|
249
|
+
const callback = _react.useCallback.call(void 0, (chartInstance) => {
|
|
1194
250
|
setChart(chartInstance);
|
|
1195
251
|
}, []);
|
|
1196
252
|
function attachTooltipEventListeners(series, tooltipId) {
|
|
1197
253
|
const handleFocus = (point) => point.series.chart.tooltip.refresh(point);
|
|
1198
254
|
const handleBlur = (point) => point.series.chart.tooltip.hide(0);
|
|
1199
255
|
series.flatMap((item) => item.data).forEach((point) => {
|
|
1200
|
-
const pointElement = point
|
|
256
|
+
const pointElement = _optionalChain([point, 'optionalAccess', _10 => _10.graphic, 'optionalAccess', _11 => _11.element]);
|
|
1201
257
|
if (pointElement) {
|
|
1202
258
|
pointElement.setAttribute("aria-describedby", tooltipId);
|
|
1203
259
|
pointElement.addEventListener("focus", () => handleFocus(point));
|
|
@@ -1224,23 +280,23 @@ var useTimeSeriesChartOptions = ({
|
|
|
1224
280
|
const getBaseChartOptions = (type) => {
|
|
1225
281
|
switch (type) {
|
|
1226
282
|
case "areaspline":
|
|
1227
|
-
return areaChartOptions;
|
|
283
|
+
return _chunkJXARPHQEjs.areaChartOptions;
|
|
1228
284
|
case "spline":
|
|
1229
|
-
return lineChartOptions;
|
|
285
|
+
return _chunkJXARPHQEjs.lineChartOptions;
|
|
1230
286
|
case "column":
|
|
1231
|
-
return columnChartOptions;
|
|
287
|
+
return _chunkJXARPHQEjs.columnChartOptions;
|
|
1232
288
|
default:
|
|
1233
|
-
return lineChartOptions;
|
|
289
|
+
return _chunkJXARPHQEjs.lineChartOptions;
|
|
1234
290
|
}
|
|
1235
291
|
};
|
|
1236
292
|
const baseChartOptions2 = getBaseChartOptions(seriesType);
|
|
1237
293
|
const hasCategoricalData = data.some(
|
|
1238
294
|
(series) => series.points.some((point) => typeof point.x === "string")
|
|
1239
295
|
);
|
|
1240
|
-
const categories = hasCategoricalData ? data[0]
|
|
296
|
+
const categories = hasCategoricalData ? _optionalChain([data, 'access', _12 => _12[0], 'optionalAccess', _13 => _13.points, 'access', _14 => _14.map, 'call', _15 => _15((point) => point.x)]) || [] : [];
|
|
1241
297
|
const hasSparseTimelineData = !hasCategoricalData && seriesType === "column";
|
|
1242
|
-
const options = (0,
|
|
1243
|
-
return (0,
|
|
298
|
+
const options = _react.useMemo.call(void 0, () => {
|
|
299
|
+
return _lodash.merge.call(void 0, {}, baseChartOptions2, {
|
|
1244
300
|
accessibility: {
|
|
1245
301
|
point: {
|
|
1246
302
|
descriptionFormatter: function() {
|
|
@@ -1257,10 +313,10 @@ var useTimeSeriesChartOptions = ({
|
|
|
1257
313
|
marginTop: chartMarginTop,
|
|
1258
314
|
events: {
|
|
1259
315
|
click: onClick ? function() {
|
|
1260
|
-
return onClick({ x: this
|
|
316
|
+
return onClick({ x: _optionalChain([this, 'optionalAccess', _16 => _16.hoverPoint, 'optionalAccess', _17 => _17.x]) });
|
|
1261
317
|
} : void 0,
|
|
1262
318
|
load: function() {
|
|
1263
|
-
const tooltipId = generateChartTooltipPortalId(this.index);
|
|
319
|
+
const tooltipId = _chunkEEVKTTT3js.generateChartTooltipPortalId.call(void 0, this.index);
|
|
1264
320
|
attachTooltipEventListeners(this.series, tooltipId);
|
|
1265
321
|
}
|
|
1266
322
|
}
|
|
@@ -1339,7 +395,7 @@ var useTimeSeriesChartOptions = ({
|
|
|
1339
395
|
}
|
|
1340
396
|
}
|
|
1341
397
|
},
|
|
1342
|
-
series: transformDataToSeries({ data }, seriesType),
|
|
398
|
+
series: _chunkEEVKTTT3js.transformDataToSeries.call(void 0, { data }, seriesType),
|
|
1343
399
|
time: { timezone },
|
|
1344
400
|
tooltip: {
|
|
1345
401
|
enabled: !disableTooltips
|
|
@@ -1351,7 +407,7 @@ var useTimeSeriesChartOptions = ({
|
|
|
1351
407
|
Number
|
|
1352
408
|
);
|
|
1353
409
|
const value = this.value;
|
|
1354
|
-
const unitName = this.tickPositionInfo
|
|
410
|
+
const unitName = _optionalChain([this, 'access', _18 => _18.tickPositionInfo, 'optionalAccess', _19 => _19.unitName]);
|
|
1355
411
|
if (typeof xAxisLabelFormatter2 === "function") {
|
|
1356
412
|
return xAxisLabelFormatter2({
|
|
1357
413
|
textLocale,
|
|
@@ -1387,7 +443,7 @@ var useTimeSeriesChartOptions = ({
|
|
|
1387
443
|
return yAxisLabelFormatter2 ? yAxisLabelFormatter2({
|
|
1388
444
|
y: this.value,
|
|
1389
445
|
yValues: this.axis.tickPositions
|
|
1390
|
-
}) : yAxisLabelFormatter({
|
|
446
|
+
}) : _chunkEEVKTTT3js.yAxisLabelFormatter.call(void 0, {
|
|
1391
447
|
currency,
|
|
1392
448
|
numberFormat,
|
|
1393
449
|
numberLocale,
|
|
@@ -1418,195 +474,21 @@ var useTimeSeriesChartOptions = ({
|
|
|
1418
474
|
]);
|
|
1419
475
|
return { options, chart, callback };
|
|
1420
476
|
};
|
|
1421
|
-
var xAxisLabelFormatterDefault = xAxisLabelFormatter;
|
|
1422
|
-
|
|
1423
|
-
// src/styles/chartStyles.ts
|
|
1424
|
-
var import_styled_components7 = require("styled-components");
|
|
1425
|
-
var import_seeds_react_theme7 = require("@sproutsocial/seeds-react-theme");
|
|
1426
|
-
var import_highcharts2 = require("highcharts/css/highcharts.css");
|
|
1427
|
-
var GlobalChartStyleOverrides = import_styled_components7.createGlobalStyle`
|
|
1428
|
-
// USAGE NOTE:
|
|
1429
|
-
// Put general styles in baseChartStyles instead when possible to avoid excessive global styling.
|
|
1430
|
-
// This global component is only for styles that can't override highcharts defaults when scoped.
|
|
1431
|
-
|
|
1432
|
-
.highcharts-tooltip-container {
|
|
1433
|
-
z-index: 7 !important;
|
|
1434
|
-
}
|
|
1435
|
-
.highcharts-tooltip-box {
|
|
1436
|
-
fill: transparent !important;
|
|
1437
|
-
}
|
|
1438
|
-
`;
|
|
1439
|
-
var baseChartStyles = import_styled_components7.css`
|
|
1440
|
-
--highcharts-background-color: ${({ theme: theme16 }) => theme16.colors.container.background.base};
|
|
1441
|
-
|
|
1442
|
-
// set color variables and map to each series
|
|
1443
|
-
${({ $colors }) => $colors.map((color, index) => {
|
|
1444
|
-
const chartColor = color || import_seeds_react_theme7.theme.colors.DATAVIZ_COLORS_LIST[index];
|
|
1445
|
-
return `
|
|
1446
|
-
// map colors to custom assigned colors or fallback to default data viz color rotation
|
|
1447
|
-
--highcharts-color-${index}: ${chartColor};
|
|
1448
|
-
|
|
1449
|
-
// highcharts already accounts for 10 series, but if we have more, we need to add them
|
|
1450
|
-
.highcharts-color-${index} {
|
|
1451
|
-
color: var(--highcharts-color-${index});
|
|
1452
|
-
stroke: var(--highcharts-color-${index});
|
|
1453
|
-
fill: var(--highcharts-color-${index});
|
|
1454
|
-
}`;
|
|
1455
|
-
}).join("\n")}
|
|
1456
|
-
|
|
1457
|
-
// set overall chart background color
|
|
1458
|
-
.highcharts-background {
|
|
1459
|
-
fill: ${({ theme: theme16 }) => theme16.colors.container.background.base};
|
|
1460
|
-
}
|
|
1461
|
-
|
|
1462
|
-
g.highcharts-annotation-label {
|
|
1463
|
-
display: none;
|
|
1464
|
-
}
|
|
1465
|
-
|
|
1466
|
-
div.highcharts-annotation-label {
|
|
1467
|
-
top: 0 !important;
|
|
1468
|
-
transform: translateX(-50%); // centers the label on the targeted axis point
|
|
1469
|
-
pointer-events: none; // prevents tooltip hover from being interrupted by this element since it renders after on the dom
|
|
1470
|
-
}
|
|
1471
|
-
`;
|
|
1472
|
-
var timeSeriesChartStyles = import_styled_components7.css`
|
|
1473
|
-
${baseChartStyles}
|
|
1474
|
-
|
|
1475
|
-
// vertical crosshair styles
|
|
1476
|
-
.highcharts-crosshair {
|
|
1477
|
-
stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
|
|
1478
|
-
stroke-width: 1;
|
|
1479
|
-
}
|
|
1480
|
-
|
|
1481
|
-
// axis and gridline styles
|
|
1482
|
-
.highcharts-grid-line {
|
|
1483
|
-
stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
|
|
1484
|
-
}
|
|
477
|
+
var xAxisLabelFormatterDefault = _chunkEEVKTTT3js.xAxisLabelFormatter;
|
|
1485
478
|
|
|
1486
|
-
|
|
1487
|
-
stroke: ${({ theme: theme16 }) => theme16.colors.container.border.base};
|
|
1488
|
-
}
|
|
1489
|
-
|
|
1490
|
-
.highcharts-tick {
|
|
1491
|
-
stroke: none;
|
|
1492
|
-
}
|
|
1493
|
-
.highcharts-xaxis-labels,
|
|
1494
|
-
.highcharts-yaxis-labels {
|
|
1495
|
-
> span {
|
|
1496
|
-
font-family: ${({ theme: theme16 }) => theme16.fontFamily};
|
|
1497
|
-
${({ theme: theme16 }) => theme16.typography[100]};
|
|
1498
|
-
font-weight: ${({ theme: theme16 }) => theme16.fontWeights.normal};
|
|
1499
|
-
color: ${({ theme: theme16 }) => theme16.colors.text.subtext};
|
|
1500
|
-
}
|
|
1501
|
-
}
|
|
1502
|
-
.highcharts-xaxis-labels {
|
|
1503
|
-
> span {
|
|
1504
|
-
display: flex;
|
|
1505
|
-
flex-direction: column;
|
|
1506
|
-
align-items: center;
|
|
1507
|
-
> span:nth-of-type(2) {
|
|
1508
|
-
font-weight: ${({ theme: theme16 }) => theme16.fontWeights.semibold};
|
|
1509
|
-
}
|
|
1510
|
-
}
|
|
1511
|
-
}
|
|
1512
|
-
|
|
1513
|
-
// we don't want to drop the opacity when another item is hovered
|
|
1514
|
-
.highcharts-series-inactive {
|
|
1515
|
-
opacity: 1;
|
|
1516
|
-
}
|
|
1517
|
-
|
|
1518
|
-
// apply cursor pointer when click functionality is turned on
|
|
1519
|
-
${({ $hasOnClick }) => $hasOnClick && `
|
|
1520
|
-
.highcharts-series,
|
|
1521
|
-
.highcharts-point {
|
|
1522
|
-
cursor: pointer;
|
|
1523
|
-
}
|
|
1524
|
-
.highcharts-plot-background,
|
|
1525
|
-
.highcharts-crosshair,
|
|
1526
|
-
.highcharts-grid-line {
|
|
1527
|
-
fill: transparent;
|
|
1528
|
-
cursor: pointer;
|
|
1529
|
-
}`}
|
|
1530
|
-
|
|
1531
|
-
path.highcharts-plot-line.y-axis-zero-line {
|
|
1532
|
-
stroke: ${({ theme: theme16 }) => theme16.colors.container.border.decorative.neutral};
|
|
1533
|
-
}
|
|
1534
|
-
`;
|
|
1535
|
-
var lineChartStyles = import_styled_components7.css`
|
|
1536
|
-
${timeSeriesChartStyles}
|
|
1537
|
-
|
|
1538
|
-
// set the line stroke
|
|
1539
|
-
.highcharts-graph {
|
|
1540
|
-
stroke-width: 3;
|
|
1541
|
-
}
|
|
1542
|
-
|
|
1543
|
-
// dashed line styles
|
|
1544
|
-
${({ $patterns }) => $patterns.map((pattern, index) => {
|
|
1545
|
-
return pattern === "dashed" ? `
|
|
1546
|
-
// highcharts already accounts for 10 series, but if we have more, we need to add them
|
|
1547
|
-
.highcharts-series-${index} {
|
|
1548
|
-
stroke-dasharray: 2, 8;
|
|
1549
|
-
}` : "";
|
|
1550
|
-
})}
|
|
1551
|
-
`;
|
|
1552
|
-
var areaChartStyles = import_styled_components7.css`
|
|
1553
|
-
${timeSeriesChartStyles}
|
|
1554
|
-
|
|
1555
|
-
// don't need to show a stroke for the line part of each area
|
|
1556
|
-
.highcharts-graph {
|
|
1557
|
-
stroke-width: 0;
|
|
1558
|
-
}
|
|
1559
|
-
|
|
1560
|
-
// fill areas to full opacity
|
|
1561
|
-
.highcharts-area {
|
|
1562
|
-
fill-opacity: 1;
|
|
1563
|
-
}
|
|
1564
|
-
`;
|
|
1565
|
-
var donutChartStyles = import_styled_components7.css`
|
|
1566
|
-
${baseChartStyles}
|
|
1567
|
-
|
|
1568
|
-
// remove 250ms fade in/out when hovering over different donut chart slices
|
|
1569
|
-
.highcharts-point {
|
|
1570
|
-
transition: opacity 0s;
|
|
1571
|
-
}
|
|
1572
|
-
|
|
1573
|
-
// remove stroke on donut slices
|
|
1574
|
-
.highcharts-pie-series .highcharts-point {
|
|
1575
|
-
stroke: none;
|
|
1576
|
-
}
|
|
1577
|
-
|
|
1578
|
-
// don't reduce opacity when hovering
|
|
1579
|
-
.highcharts-point-hover {
|
|
1580
|
-
fill-opacity: none;
|
|
1581
|
-
}
|
|
479
|
+
// src/components/AreaChart/AreaChart.tsx
|
|
1582
480
|
|
|
1583
|
-
// apply cursor pointer when click functionality is turned on
|
|
1584
|
-
${({ $hasOnClick }) => $hasOnClick && `
|
|
1585
|
-
.highcharts-series,
|
|
1586
|
-
.highcharts-point {
|
|
1587
|
-
cursor: pointer;
|
|
1588
|
-
}
|
|
1589
|
-
.highcharts-plot-background,
|
|
1590
|
-
.highcharts-crosshair,
|
|
1591
|
-
.highcharts-grid-line {
|
|
1592
|
-
fill: transparent;
|
|
1593
|
-
cursor: pointer;
|
|
1594
|
-
}`}
|
|
1595
|
-
`;
|
|
1596
481
|
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
var
|
|
1600
|
-
|
|
1601
|
-
(0, import_annotations.default)(import_highcharts3.default);
|
|
1602
|
-
var StyledBox3 = (0, import_styled_components8.default)(import_seeds_react_box9.Box)`
|
|
1603
|
-
${areaChartStyles}
|
|
482
|
+
_accessibility2.default.call(void 0, _highcharts2.default);
|
|
483
|
+
_annotations2.default.call(void 0, _highcharts2.default);
|
|
484
|
+
var StyledBox = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
|
|
485
|
+
${_chunkEEVKTTT3js.areaChartStyles}
|
|
1604
486
|
`;
|
|
1605
|
-
var AreaChart = (0,
|
|
487
|
+
var AreaChart = _react.memo.call(void 0, function AreaChart2(props) {
|
|
1606
488
|
const { data } = props;
|
|
1607
|
-
return data.length === 0 ? null : /* @__PURE__ */ (0,
|
|
489
|
+
return data.length === 0 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AreaChartWithData, { ...props });
|
|
1608
490
|
});
|
|
1609
|
-
var AreaChartWithData = (0,
|
|
491
|
+
var AreaChartWithData = _react.memo.call(void 0, function AreaChartWithData2({
|
|
1610
492
|
data,
|
|
1611
493
|
invalidNumberLabel,
|
|
1612
494
|
numberLocale = "en-us",
|
|
@@ -1640,45 +522,46 @@ var AreaChartWithData = (0, import_react16.memo)(function AreaChartWithData2({
|
|
|
1640
522
|
xAnnotations
|
|
1641
523
|
});
|
|
1642
524
|
const colors = data.map(
|
|
1643
|
-
(series, index) => series.styles
|
|
525
|
+
(series, index) => _nullishCoalesce(_optionalChain([series, 'access', _20 => _20.styles, 'optionalAccess', _21 => _21.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]))
|
|
1644
526
|
);
|
|
1645
|
-
return /* @__PURE__ */ (0,
|
|
1646
|
-
/* @__PURE__ */ (0,
|
|
1647
|
-
/* @__PURE__ */ (0,
|
|
1648
|
-
|
|
527
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
528
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
|
|
529
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
530
|
+
StyledBox,
|
|
1649
531
|
{
|
|
1650
532
|
$colors: colors,
|
|
1651
533
|
$hasOnClick: Boolean(onClick),
|
|
1652
534
|
bg: "container.background.base",
|
|
1653
535
|
children: [
|
|
1654
|
-
/* @__PURE__ */ (0,
|
|
1655
|
-
|
|
536
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
537
|
+
_highchartsreactofficial.HighchartsReact,
|
|
1656
538
|
{
|
|
1657
|
-
highcharts:
|
|
539
|
+
highcharts: _highcharts2.default,
|
|
1658
540
|
options,
|
|
1659
541
|
callback
|
|
1660
542
|
}
|
|
1661
543
|
),
|
|
1662
|
-
chart && chart.annotations
|
|
544
|
+
chart && _optionalChain([chart, 'access', _22 => _22.annotations, 'optionalAccess', _23 => _23.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1663
545
|
ChartXAnnotationMarkerPortal,
|
|
1664
546
|
{
|
|
1665
547
|
xAnnotations,
|
|
1666
|
-
annotationContext: chart.annotations
|
|
548
|
+
annotationContext: _optionalChain([chart, 'access', _24 => _24.annotations, 'optionalAccess', _25 => _25[0]]),
|
|
549
|
+
chartContainer: chart.container
|
|
1667
550
|
}
|
|
1668
551
|
) : null,
|
|
1669
|
-
chart && !disableTooltips ? /* @__PURE__ */ (0,
|
|
1670
|
-
ChartTooltipPortal,
|
|
552
|
+
chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
553
|
+
_chunkEEVKTTT3js.ChartTooltipPortal,
|
|
1671
554
|
{
|
|
1672
555
|
chart,
|
|
1673
556
|
renderContent: (context) => {
|
|
1674
|
-
const tooltipData = transformTimeSeriesTooltipData({
|
|
557
|
+
const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
|
|
1675
558
|
context,
|
|
1676
559
|
data
|
|
1677
560
|
});
|
|
1678
561
|
const x = context.x;
|
|
1679
562
|
const total = context.total;
|
|
1680
|
-
const xAnnotationDetails = xAnnotations
|
|
1681
|
-
return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ (0,
|
|
563
|
+
const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _26 => _26[x], 'optionalAccess', _27 => _27.details]);
|
|
564
|
+
return tooltip ? tooltip({ data: tooltipData, total, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1682
565
|
AreaChartTooltip,
|
|
1683
566
|
{
|
|
1684
567
|
currency,
|
|
@@ -1699,7 +582,7 @@ var AreaChartWithData = (0, import_react16.memo)(function AreaChartWithData2({
|
|
|
1699
582
|
}
|
|
1700
583
|
}
|
|
1701
584
|
) : null,
|
|
1702
|
-
/* @__PURE__ */ (0,
|
|
585
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { mt: 350, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AreaChartLegend, { data }) })
|
|
1703
586
|
]
|
|
1704
587
|
}
|
|
1705
588
|
)
|
|
@@ -1707,30 +590,30 @@ var AreaChartWithData = (0, import_react16.memo)(function AreaChartWithData2({
|
|
|
1707
590
|
});
|
|
1708
591
|
|
|
1709
592
|
// src/components/ChartXAnnotationDetails/ChartXAnnotationDetails.tsx
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
var ChartXAnnotationDetails = (0,
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
|
|
596
|
+
|
|
597
|
+
|
|
598
|
+
var ChartXAnnotationDetails = _react.memo.call(void 0,
|
|
1716
599
|
({ iconName, text }) => {
|
|
1717
|
-
return /* @__PURE__ */ (0,
|
|
1718
|
-
/* @__PURE__ */ (0,
|
|
1719
|
-
/* @__PURE__ */ (0,
|
|
600
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipHeader, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
601
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: iconName, size: "mini", color: "icon.base" }),
|
|
602
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontSize: 200, children: text })
|
|
1720
603
|
] }) });
|
|
1721
604
|
}
|
|
1722
605
|
);
|
|
1723
606
|
|
|
1724
607
|
// src/components/ChartXAnnotationMarker/ChartXAnnotationMarker.tsx
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
var ChartXAnnotationMarker = (0,
|
|
608
|
+
|
|
609
|
+
|
|
610
|
+
|
|
611
|
+
|
|
612
|
+
var ChartXAnnotationMarker = _react.memo.call(void 0,
|
|
1730
613
|
({ iconName }) => {
|
|
1731
|
-
return /* @__PURE__ */ (0,
|
|
1732
|
-
/* @__PURE__ */ (0,
|
|
1733
|
-
|
|
614
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 200, children: [
|
|
615
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
616
|
+
_seedsreactbox.Box,
|
|
1734
617
|
{
|
|
1735
618
|
display: "flex",
|
|
1736
619
|
alignItems: "center",
|
|
@@ -1739,49 +622,49 @@ var ChartXAnnotationMarker = (0, import_react18.memo)(
|
|
|
1739
622
|
height: "20px",
|
|
1740
623
|
bg: "icon.base",
|
|
1741
624
|
borderRadius: "50%",
|
|
1742
|
-
children: /* @__PURE__ */ (0,
|
|
625
|
+
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: iconName, size: "mini", color: "icon.inverse" })
|
|
1743
626
|
}
|
|
1744
627
|
),
|
|
1745
|
-
/* @__PURE__ */ (0,
|
|
628
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { height: `199px`, width: "0.5px", bg: "neutral.200" })
|
|
1746
629
|
] });
|
|
1747
630
|
}
|
|
1748
631
|
);
|
|
1749
632
|
|
|
1750
633
|
// src/components/DonutChart/DonutChart.tsx
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
634
|
+
|
|
635
|
+
|
|
636
|
+
|
|
637
|
+
|
|
638
|
+
|
|
639
|
+
|
|
1757
640
|
|
|
1758
641
|
// src/components/DonutChart/components/DonutChartLegend.tsx
|
|
1759
|
-
|
|
1760
|
-
|
|
1761
|
-
|
|
642
|
+
|
|
643
|
+
|
|
644
|
+
|
|
1762
645
|
var getDonutChartLegendLabels = ({
|
|
1763
646
|
data
|
|
1764
647
|
}) => {
|
|
1765
648
|
return data.map((slice, index) => ({
|
|
1766
|
-
content: /* @__PURE__ */ (0,
|
|
1767
|
-
color: slice.styles
|
|
649
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: slice.icon, children: slice.name }),
|
|
650
|
+
color: _optionalChain([slice, 'access', _28 => _28.styles, 'optionalAccess', _29 => _29.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
|
|
1768
651
|
}));
|
|
1769
652
|
};
|
|
1770
|
-
var DonutChartLegend = (0,
|
|
653
|
+
var DonutChartLegend = _react.memo.call(void 0,
|
|
1771
654
|
function DonutChartLegend2({ data }) {
|
|
1772
|
-
return /* @__PURE__ */ (0,
|
|
655
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getDonutChartLegendLabels({ data }) });
|
|
1773
656
|
}
|
|
1774
657
|
);
|
|
1775
658
|
|
|
1776
659
|
// src/components/DonutChart/components/DonutChartTooltip.tsx
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
1784
|
-
var DonutChartTooltip = (0,
|
|
660
|
+
|
|
661
|
+
|
|
662
|
+
|
|
663
|
+
|
|
664
|
+
|
|
665
|
+
|
|
666
|
+
|
|
667
|
+
var DonutChartTooltip = _react.memo.call(void 0,
|
|
1785
668
|
function DonutChartTooltip2({
|
|
1786
669
|
color,
|
|
1787
670
|
name,
|
|
@@ -1799,12 +682,12 @@ var DonutChartTooltip = (0, import_react20.memo)(
|
|
|
1799
682
|
{
|
|
1800
683
|
cells: [
|
|
1801
684
|
{
|
|
1802
|
-
content: /* @__PURE__ */ (0,
|
|
685
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
|
|
1803
686
|
},
|
|
1804
687
|
{
|
|
1805
|
-
content: /* @__PURE__ */ (0,
|
|
1806
|
-
/* @__PURE__ */ (0,
|
|
1807
|
-
|
|
688
|
+
content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
|
|
689
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
690
|
+
_seedsreactnumeral.Numeral,
|
|
1808
691
|
{
|
|
1809
692
|
number: percent,
|
|
1810
693
|
format: "percent",
|
|
@@ -1812,8 +695,8 @@ var DonutChartTooltip = (0, import_react20.memo)(
|
|
|
1812
695
|
locale: numberLocale
|
|
1813
696
|
}
|
|
1814
697
|
),
|
|
1815
|
-
/* @__PURE__ */ (0,
|
|
1816
|
-
|
|
698
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
699
|
+
_seedsreactnumeral.Numeral,
|
|
1817
700
|
{
|
|
1818
701
|
abbreviate: false,
|
|
1819
702
|
currency,
|
|
@@ -1828,26 +711,26 @@ var DonutChartTooltip = (0, import_react20.memo)(
|
|
|
1828
711
|
]
|
|
1829
712
|
}
|
|
1830
713
|
];
|
|
1831
|
-
return /* @__PURE__ */ (0,
|
|
1832
|
-
/* @__PURE__ */ (0,
|
|
1833
|
-
onClick && tooltipClickLabel ? /* @__PURE__ */ (0,
|
|
1834
|
-
/* @__PURE__ */ (0,
|
|
1835
|
-
/* @__PURE__ */ (0,
|
|
714
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
|
|
715
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
|
|
716
|
+
onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
717
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
|
|
718
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
|
|
1836
719
|
] }) : tooltipClickLabel }) : null
|
|
1837
720
|
] });
|
|
1838
721
|
}
|
|
1839
722
|
);
|
|
1840
723
|
|
|
1841
724
|
// src/components/DonutChart/helpers/transformDonutChartTooltipData.ts
|
|
1842
|
-
|
|
725
|
+
|
|
1843
726
|
var transformDonutChartTooltipData = ({
|
|
1844
727
|
context,
|
|
1845
728
|
data
|
|
1846
729
|
}) => {
|
|
1847
730
|
const colorIndex = context.colorIndex;
|
|
1848
731
|
return {
|
|
1849
|
-
color: data[colorIndex]
|
|
1850
|
-
...data[colorIndex]
|
|
732
|
+
color: _nullishCoalesce(_nullishCoalesce(_optionalChain([data, 'access', _30 => _30[colorIndex], 'optionalAccess', _31 => _31.styles, 'optionalAccess', _32 => _32.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[colorIndex])), () => ( "")),
|
|
733
|
+
..._optionalChain([data, 'access', _33 => _33[colorIndex], 'optionalAccess', _34 => _34.icon]) ? { icon: _optionalChain([data, 'access', _35 => _35[colorIndex], 'optionalAccess', _36 => _36.icon]) } : {},
|
|
1851
734
|
name: context.key,
|
|
1852
735
|
percent: context.percentage,
|
|
1853
736
|
value: context.y
|
|
@@ -1855,17 +738,17 @@ var transformDonutChartTooltipData = ({
|
|
|
1855
738
|
};
|
|
1856
739
|
|
|
1857
740
|
// src/components/DonutChart/DonutChart.tsx
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
(0,
|
|
1861
|
-
var
|
|
1862
|
-
${donutChartStyles}
|
|
741
|
+
|
|
742
|
+
|
|
743
|
+
_accessibility2.default.call(void 0, _highcharts2.default);
|
|
744
|
+
var StyledBox2 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
|
|
745
|
+
${_chunkEEVKTTT3js.donutChartStyles}
|
|
1863
746
|
`;
|
|
1864
|
-
var DonutChart = (0,
|
|
747
|
+
var DonutChart = _react.memo.call(void 0, function DonutChart2(props) {
|
|
1865
748
|
const { data } = props;
|
|
1866
|
-
return data.length === 0 ? null : /* @__PURE__ */ (0,
|
|
749
|
+
return data.length === 0 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DonutChartWithData, { ...props });
|
|
1867
750
|
});
|
|
1868
|
-
var DonutChartWithData = (0,
|
|
751
|
+
var DonutChartWithData = _react.memo.call(void 0,
|
|
1869
752
|
function DonutChartWithData2({
|
|
1870
753
|
data,
|
|
1871
754
|
numberLocale = "en-us",
|
|
@@ -1879,12 +762,12 @@ var DonutChartWithData = (0, import_react21.memo)(
|
|
|
1879
762
|
onClick,
|
|
1880
763
|
tooltipClickLabel
|
|
1881
764
|
}) {
|
|
1882
|
-
const [options, setOptions] = (0,
|
|
1883
|
-
const [chart, setChart] = (0,
|
|
1884
|
-
const callback = (0,
|
|
765
|
+
const [options, setOptions] = _react.useState.call(void 0, _chunkJXARPHQEjs.donutChartOptions);
|
|
766
|
+
const [chart, setChart] = _react.useState.call(void 0, null);
|
|
767
|
+
const callback = _react.useCallback.call(void 0, (chartInstance) => {
|
|
1885
768
|
setChart(chartInstance);
|
|
1886
769
|
}, []);
|
|
1887
|
-
(0,
|
|
770
|
+
_react.useEffect.call(void 0, () => {
|
|
1888
771
|
setOptions({
|
|
1889
772
|
accessibility: {
|
|
1890
773
|
point: {
|
|
@@ -1896,17 +779,17 @@ var DonutChartWithData = (0, import_react21.memo)(
|
|
|
1896
779
|
chart: {
|
|
1897
780
|
events: {
|
|
1898
781
|
render: function() {
|
|
1899
|
-
const allSlices = this.series[0]
|
|
1900
|
-
const tooltipId = generateChartTooltipPortalId(this.index);
|
|
782
|
+
const allSlices = _nullishCoalesce(_optionalChain([this, 'access', _37 => _37.series, 'access', _38 => _38[0], 'optionalAccess', _39 => _39.data]), () => ( []));
|
|
783
|
+
const tooltipId = _chunkEEVKTTT3js.generateChartTooltipPortalId.call(void 0, this.index);
|
|
1901
784
|
allSlices.forEach((slice) => {
|
|
1902
|
-
const sliceElement = slice
|
|
1903
|
-
sliceElement
|
|
1904
|
-
sliceElement
|
|
785
|
+
const sliceElement = _optionalChain([slice, 'optionalAccess', _40 => _40.graphic, 'optionalAccess', _41 => _41.element]);
|
|
786
|
+
_optionalChain([sliceElement, 'optionalAccess', _42 => _42.setAttribute, 'call', _43 => _43("aria-describedby", tooltipId)]);
|
|
787
|
+
_optionalChain([sliceElement, 'optionalAccess', _44 => _44.addEventListener, 'call', _45 => _45("focus", () => {
|
|
1905
788
|
slice.series.chart.tooltip.refresh(slice);
|
|
1906
|
-
});
|
|
1907
|
-
sliceElement
|
|
789
|
+
})]);
|
|
790
|
+
_optionalChain([sliceElement, 'optionalAccess', _46 => _46.addEventListener, 'call', _47 => _47("blur", () => {
|
|
1908
791
|
slice.series.chart.tooltip.hide(0);
|
|
1909
|
-
});
|
|
792
|
+
})]);
|
|
1910
793
|
});
|
|
1911
794
|
}
|
|
1912
795
|
}
|
|
@@ -1934,32 +817,32 @@ var DonutChartWithData = (0, import_react21.memo)(
|
|
|
1934
817
|
});
|
|
1935
818
|
}, [data]);
|
|
1936
819
|
const colors = data.map(
|
|
1937
|
-
(series, index) => series.styles
|
|
820
|
+
(series, index) => _nullishCoalesce(_nullishCoalesce(_optionalChain([series, 'access', _48 => _48.styles, 'optionalAccess', _49 => _49.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
|
|
1938
821
|
);
|
|
1939
|
-
return /* @__PURE__ */ (0,
|
|
1940
|
-
/* @__PURE__ */ (0,
|
|
1941
|
-
/* @__PURE__ */ (0,
|
|
1942
|
-
|
|
822
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
823
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
|
|
824
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
825
|
+
StyledBox2,
|
|
1943
826
|
{
|
|
1944
827
|
$colors: colors,
|
|
1945
828
|
$hasOnClick: Boolean(onClick),
|
|
1946
829
|
bg: "container.background.base",
|
|
1947
830
|
children: [
|
|
1948
|
-
/* @__PURE__ */ (0,
|
|
1949
|
-
|
|
831
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
832
|
+
_highchartsreactofficial.HighchartsReact,
|
|
1950
833
|
{
|
|
1951
|
-
highcharts:
|
|
834
|
+
highcharts: _highcharts2.default,
|
|
1952
835
|
options,
|
|
1953
836
|
callback
|
|
1954
837
|
}
|
|
1955
838
|
),
|
|
1956
|
-
chart && !disableTooltips ? /* @__PURE__ */ (0,
|
|
1957
|
-
ChartTooltipPortal,
|
|
839
|
+
chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
840
|
+
_chunkEEVKTTT3js.ChartTooltipPortal,
|
|
1958
841
|
{
|
|
1959
842
|
chart,
|
|
1960
843
|
renderContent: (context) => {
|
|
1961
844
|
const { color, icon, name, percent, value } = transformDonutChartTooltipData({ context, data });
|
|
1962
|
-
return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ (0,
|
|
845
|
+
return tooltip ? tooltip({ color, icon, name, percent, value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1963
846
|
DonutChartTooltip,
|
|
1964
847
|
{
|
|
1965
848
|
color,
|
|
@@ -1978,7 +861,7 @@ var DonutChartWithData = (0, import_react21.memo)(
|
|
|
1978
861
|
}
|
|
1979
862
|
}
|
|
1980
863
|
) : null,
|
|
1981
|
-
hideLegend ? null : /* @__PURE__ */ (0,
|
|
864
|
+
hideLegend ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { mt: 350, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DonutChartLegend, { data }) })
|
|
1982
865
|
]
|
|
1983
866
|
}
|
|
1984
867
|
)
|
|
@@ -1987,14 +870,14 @@ var DonutChartWithData = (0, import_react21.memo)(
|
|
|
1987
870
|
);
|
|
1988
871
|
|
|
1989
872
|
// src/components/DonutChart/components/DonutChartLegendTable.tsx
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
var DonutChartLegendTable = (0,
|
|
873
|
+
|
|
874
|
+
|
|
875
|
+
|
|
876
|
+
|
|
877
|
+
|
|
878
|
+
|
|
879
|
+
|
|
880
|
+
var DonutChartLegendTable = _react.memo.call(void 0,
|
|
1998
881
|
function DonutChartLegendTable2({
|
|
1999
882
|
data,
|
|
2000
883
|
numberLocale = "en-us",
|
|
@@ -2010,16 +893,16 @@ var DonutChartLegendTable = (0, import_react22.memo)(
|
|
|
2010
893
|
);
|
|
2011
894
|
const rows = data.map((dataPoint, index) => {
|
|
2012
895
|
const { name, icon, styles, value } = dataPoint;
|
|
2013
|
-
const color = styles
|
|
896
|
+
const color = _optionalChain([styles, 'optionalAccess', _50 => _50.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index];
|
|
2014
897
|
return {
|
|
2015
898
|
cells: [
|
|
2016
899
|
{
|
|
2017
|
-
content: /* @__PURE__ */ (0,
|
|
900
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: name }) })
|
|
2018
901
|
},
|
|
2019
902
|
{
|
|
2020
|
-
content: /* @__PURE__ */ (0,
|
|
2021
|
-
/* @__PURE__ */ (0,
|
|
2022
|
-
|
|
903
|
+
content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "inline-flex", alignItems: "center", gap: 350, children: [
|
|
904
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
905
|
+
_seedsreactnumeral.Numeral,
|
|
2023
906
|
{
|
|
2024
907
|
abbreviate: false,
|
|
2025
908
|
format: "percent",
|
|
@@ -2027,8 +910,8 @@ var DonutChartLegendTable = (0, import_react22.memo)(
|
|
|
2027
910
|
number: value / total * 100
|
|
2028
911
|
}
|
|
2029
912
|
) }),
|
|
2030
|
-
/* @__PURE__ */ (0,
|
|
2031
|
-
|
|
913
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontWeight: "semibold", children: numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
914
|
+
_seedsreactnumeral.Numeral,
|
|
2032
915
|
{
|
|
2033
916
|
abbreviate: false,
|
|
2034
917
|
currency,
|
|
@@ -2047,11 +930,11 @@ var DonutChartLegendTable = (0, import_react22.memo)(
|
|
|
2047
930
|
{
|
|
2048
931
|
cells: [
|
|
2049
932
|
{
|
|
2050
|
-
content: /* @__PURE__ */ (0,
|
|
933
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { fontWeight: "semibold", color: "text.headline", children: totalLabel })
|
|
2051
934
|
},
|
|
2052
935
|
{
|
|
2053
|
-
content: /* @__PURE__ */ (0,
|
|
2054
|
-
|
|
936
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.body", fontWeight: "bold", children: numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: total }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
937
|
+
_seedsreactnumeral.Numeral,
|
|
2055
938
|
{
|
|
2056
939
|
abbreviate: false,
|
|
2057
940
|
currency,
|
|
@@ -2066,8 +949,8 @@ var DonutChartLegendTable = (0, import_react22.memo)(
|
|
|
2066
949
|
isAppendedRow: true
|
|
2067
950
|
}
|
|
2068
951
|
];
|
|
2069
|
-
return /* @__PURE__ */ (0,
|
|
2070
|
-
ChartTable,
|
|
952
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
953
|
+
_chunkEEVKTTT3js.ChartTable,
|
|
2071
954
|
{
|
|
2072
955
|
rows: [...rows, ...totalRow]
|
|
2073
956
|
}
|
|
@@ -2076,41 +959,41 @@ var DonutChartLegendTable = (0, import_react22.memo)(
|
|
|
2076
959
|
);
|
|
2077
960
|
|
|
2078
961
|
// src/components/LineChart/LineChart.tsx
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
|
|
2082
|
-
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
|
|
962
|
+
|
|
963
|
+
|
|
964
|
+
|
|
965
|
+
|
|
966
|
+
|
|
967
|
+
|
|
968
|
+
|
|
2086
969
|
|
|
2087
970
|
// src/components/LineChart/components/LineChartLegend.tsx
|
|
2088
|
-
|
|
2089
|
-
|
|
2090
|
-
|
|
971
|
+
|
|
972
|
+
|
|
973
|
+
|
|
2091
974
|
var getLineChartLegendLabels = ({
|
|
2092
975
|
data
|
|
2093
976
|
}) => {
|
|
2094
977
|
return data.map((series, index) => ({
|
|
2095
|
-
content: /* @__PURE__ */ (0,
|
|
2096
|
-
color: series.styles
|
|
978
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
|
|
979
|
+
color: _optionalChain([series, 'access', _51 => _51.styles, 'optionalAccess', _52 => _52.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
|
|
2097
980
|
}));
|
|
2098
981
|
};
|
|
2099
|
-
var LineChartLegend = (0,
|
|
982
|
+
var LineChartLegend = _react.memo.call(void 0,
|
|
2100
983
|
function LineChartLegend2({ data }) {
|
|
2101
|
-
return /* @__PURE__ */ (0,
|
|
984
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getLineChartLegendLabels({ data }) });
|
|
2102
985
|
}
|
|
2103
986
|
);
|
|
2104
987
|
|
|
2105
988
|
// src/components/LineChart/components/LineChartTooltip.tsx
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
var LineChartTooltip = (0,
|
|
989
|
+
|
|
990
|
+
|
|
991
|
+
|
|
992
|
+
|
|
993
|
+
|
|
994
|
+
|
|
995
|
+
|
|
996
|
+
var LineChartTooltip = _react.memo.call(void 0,
|
|
2114
997
|
function LineChartTooltip2({
|
|
2115
998
|
data,
|
|
2116
999
|
invalidNumberLabel,
|
|
@@ -2129,11 +1012,11 @@ var LineChartTooltip = (0, import_react24.memo)(
|
|
|
2129
1012
|
return {
|
|
2130
1013
|
cells: [
|
|
2131
1014
|
{
|
|
2132
|
-
content: /* @__PURE__ */ (0,
|
|
1015
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
|
|
2133
1016
|
},
|
|
2134
1017
|
{
|
|
2135
|
-
content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0,
|
|
2136
|
-
|
|
1018
|
+
content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1019
|
+
_seedsreactnumeral.Numeral,
|
|
2137
1020
|
{
|
|
2138
1021
|
abbreviate: false,
|
|
2139
1022
|
currency,
|
|
@@ -2147,31 +1030,31 @@ var LineChartTooltip = (0, import_react24.memo)(
|
|
|
2147
1030
|
]
|
|
2148
1031
|
};
|
|
2149
1032
|
});
|
|
2150
|
-
return /* @__PURE__ */ (0,
|
|
1033
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
|
|
2151
1034
|
xAnnotationDetails ? xAnnotationDetails() : void 0,
|
|
2152
|
-
/* @__PURE__ */ (0,
|
|
2153
|
-
/* @__PURE__ */ (0,
|
|
2154
|
-
onClick && tooltipClickLabel ? /* @__PURE__ */ (0,
|
|
2155
|
-
/* @__PURE__ */ (0,
|
|
2156
|
-
/* @__PURE__ */ (0,
|
|
1035
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
|
|
1036
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
|
|
1037
|
+
onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
1038
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
|
|
1039
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
|
|
2157
1040
|
] }) : tooltipClickLabel }) : null
|
|
2158
1041
|
] });
|
|
2159
1042
|
}
|
|
2160
1043
|
);
|
|
2161
1044
|
|
|
2162
1045
|
// src/components/LineChart/LineChart.tsx
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
(0,
|
|
2166
|
-
(0,
|
|
2167
|
-
var
|
|
2168
|
-
${lineChartStyles}
|
|
1046
|
+
|
|
1047
|
+
|
|
1048
|
+
_accessibility2.default.call(void 0, _highcharts2.default);
|
|
1049
|
+
_annotations2.default.call(void 0, _highcharts2.default);
|
|
1050
|
+
var StyledBox3 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
|
|
1051
|
+
${_chunkEEVKTTT3js.lineChartStyles}
|
|
2169
1052
|
`;
|
|
2170
|
-
var LineChart = (0,
|
|
1053
|
+
var LineChart = _react.memo.call(void 0, function LineChart2(props) {
|
|
2171
1054
|
const { data } = props;
|
|
2172
|
-
return data.length === 0 ? null : /* @__PURE__ */ (0,
|
|
1055
|
+
return data.length === 0 ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartWithData, { ...props });
|
|
2173
1056
|
});
|
|
2174
|
-
var LineChartWithData = (0,
|
|
1057
|
+
var LineChartWithData = _react.memo.call(void 0, function LineChartWithData2({
|
|
2175
1058
|
data,
|
|
2176
1059
|
invalidNumberLabel,
|
|
2177
1060
|
numberLocale = "en-us",
|
|
@@ -2208,9 +1091,9 @@ var LineChartWithData = (0, import_react25.memo)(function LineChartWithData2({
|
|
|
2208
1091
|
const { colors, patterns } = data.reduce(
|
|
2209
1092
|
(acc, item, index) => {
|
|
2210
1093
|
acc.colors.push(
|
|
2211
|
-
item.styles
|
|
1094
|
+
_nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _53 => _53.styles, 'optionalAccess', _54 => _54.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
|
|
2212
1095
|
);
|
|
2213
|
-
acc.patterns.push(item.styles
|
|
1096
|
+
acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _55 => _55.styles, 'optionalAccess', _56 => _56.pattern]), () => ( "solid")));
|
|
2214
1097
|
return acc;
|
|
2215
1098
|
},
|
|
2216
1099
|
{
|
|
@@ -2218,43 +1101,44 @@ var LineChartWithData = (0, import_react25.memo)(function LineChartWithData2({
|
|
|
2218
1101
|
patterns: []
|
|
2219
1102
|
}
|
|
2220
1103
|
);
|
|
2221
|
-
return /* @__PURE__ */ (0,
|
|
2222
|
-
/* @__PURE__ */ (0,
|
|
2223
|
-
/* @__PURE__ */ (0,
|
|
2224
|
-
|
|
1104
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
1105
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
|
|
1106
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
1107
|
+
StyledBox3,
|
|
2225
1108
|
{
|
|
2226
1109
|
$colors: colors,
|
|
2227
1110
|
$patterns: patterns,
|
|
2228
1111
|
$hasOnClick: Boolean(onClick),
|
|
2229
1112
|
bg: "container.background.base",
|
|
2230
1113
|
children: [
|
|
2231
|
-
/* @__PURE__ */ (0,
|
|
2232
|
-
|
|
1114
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1115
|
+
_highchartsreactofficial.HighchartsReact,
|
|
2233
1116
|
{
|
|
2234
|
-
highcharts:
|
|
1117
|
+
highcharts: _highcharts2.default,
|
|
2235
1118
|
options,
|
|
2236
1119
|
callback
|
|
2237
1120
|
}
|
|
2238
1121
|
),
|
|
2239
|
-
chart && chart.annotations
|
|
1122
|
+
chart && _optionalChain([chart, 'access', _57 => _57.annotations, 'optionalAccess', _58 => _58.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2240
1123
|
ChartXAnnotationMarkerPortal,
|
|
2241
1124
|
{
|
|
2242
1125
|
xAnnotations,
|
|
2243
|
-
annotationContext: chart.annotations
|
|
1126
|
+
annotationContext: _optionalChain([chart, 'access', _59 => _59.annotations, 'optionalAccess', _60 => _60[0]]),
|
|
1127
|
+
chartContainer: chart.container
|
|
2244
1128
|
}
|
|
2245
1129
|
) : null,
|
|
2246
|
-
chart && !disableTooltips ? /* @__PURE__ */ (0,
|
|
2247
|
-
ChartTooltipPortal,
|
|
1130
|
+
chart && !disableTooltips ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1131
|
+
_chunkEEVKTTT3js.ChartTooltipPortal,
|
|
2248
1132
|
{
|
|
2249
1133
|
chart,
|
|
2250
1134
|
renderContent: (context) => {
|
|
2251
|
-
const tooltipData = transformTimeSeriesTooltipData({
|
|
1135
|
+
const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
|
|
2252
1136
|
context,
|
|
2253
1137
|
data
|
|
2254
1138
|
});
|
|
2255
1139
|
const x = context.x;
|
|
2256
|
-
const xAnnotationDetails = xAnnotations
|
|
2257
|
-
return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0,
|
|
1140
|
+
const xAnnotationDetails = _optionalChain([xAnnotations, 'optionalAccess', _61 => _61[x], 'optionalAccess', _62 => _62.details]);
|
|
1141
|
+
return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2258
1142
|
LineChartTooltip,
|
|
2259
1143
|
{
|
|
2260
1144
|
currency,
|
|
@@ -2273,7 +1157,7 @@ var LineChartWithData = (0, import_react25.memo)(function LineChartWithData2({
|
|
|
2273
1157
|
}
|
|
2274
1158
|
}
|
|
2275
1159
|
) : null,
|
|
2276
|
-
/* @__PURE__ */ (0,
|
|
1160
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { mt: 350, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LineChartLegend, { data }) })
|
|
2277
1161
|
]
|
|
2278
1162
|
}
|
|
2279
1163
|
)
|
|
@@ -2281,41 +1165,41 @@ var LineChartWithData = (0, import_react25.memo)(function LineChartWithData2({
|
|
|
2281
1165
|
});
|
|
2282
1166
|
|
|
2283
1167
|
// src/components/VerticalBarChart/VerticalBarChart.tsx
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
1168
|
+
|
|
1169
|
+
|
|
1170
|
+
|
|
1171
|
+
|
|
1172
|
+
|
|
1173
|
+
|
|
1174
|
+
|
|
2291
1175
|
|
|
2292
1176
|
// src/components/VerticalBarChart/components/VerticalBarChartLegend.tsx
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
|
|
1177
|
+
|
|
1178
|
+
|
|
1179
|
+
|
|
2296
1180
|
var getVerticalBarChartLegendLabels = ({
|
|
2297
1181
|
data
|
|
2298
1182
|
}) => {
|
|
2299
1183
|
return data.map((series, index) => ({
|
|
2300
|
-
content: /* @__PURE__ */ (0,
|
|
2301
|
-
color: series.styles
|
|
1184
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon: series.icon, children: series.name }),
|
|
1185
|
+
color: _optionalChain([series, 'access', _63 => _63.styles, 'optionalAccess', _64 => _64.color]) || _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index]
|
|
2302
1186
|
}));
|
|
2303
1187
|
};
|
|
2304
|
-
var VerticalBarChartLegend = (0,
|
|
1188
|
+
var VerticalBarChartLegend = _react.memo.call(void 0,
|
|
2305
1189
|
function VerticalbarChartLegend({ data }) {
|
|
2306
|
-
return /* @__PURE__ */ (0,
|
|
1190
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegend, { legendLabels: getVerticalBarChartLegendLabels({ data }) });
|
|
2307
1191
|
}
|
|
2308
1192
|
);
|
|
2309
1193
|
|
|
2310
1194
|
// src/components/VerticalBarChart/components/VerticalBarChartTooltip.tsx
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
var VerticalBarChartTooltip = (0,
|
|
1195
|
+
|
|
1196
|
+
|
|
1197
|
+
|
|
1198
|
+
|
|
1199
|
+
|
|
1200
|
+
|
|
1201
|
+
|
|
1202
|
+
var VerticalBarChartTooltip = _react.memo.call(void 0,
|
|
2319
1203
|
function VerticalBarChartTooltip2({
|
|
2320
1204
|
data,
|
|
2321
1205
|
invalidNumberLabel,
|
|
@@ -2334,11 +1218,11 @@ var VerticalBarChartTooltip = (0, import_react27.memo)(
|
|
|
2334
1218
|
return {
|
|
2335
1219
|
cells: [
|
|
2336
1220
|
{
|
|
2337
|
-
content: /* @__PURE__ */ (0,
|
|
1221
|
+
content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabel, { color, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartLegendLabelContentWithIcon, { icon, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { "aria-label": `${name}: `, children: name }) }) })
|
|
2338
1222
|
},
|
|
2339
1223
|
{
|
|
2340
|
-
content: value === null && invalidNumberLabel ? /* @__PURE__ */ (0,
|
|
2341
|
-
|
|
1224
|
+
content: value === null && invalidNumberLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { children: invalidNumberLabel }) : numberFormat === "duration" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactduration.Duration, { locale: textLocale, milliseconds: value }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1225
|
+
_seedsreactnumeral.Numeral,
|
|
2342
1226
|
{
|
|
2343
1227
|
abbreviate: false,
|
|
2344
1228
|
currency,
|
|
@@ -2352,51 +1236,30 @@ var VerticalBarChartTooltip = (0, import_react27.memo)(
|
|
|
2352
1236
|
]
|
|
2353
1237
|
};
|
|
2354
1238
|
});
|
|
2355
|
-
return /* @__PURE__ */ (0,
|
|
1239
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkEEVKTTT3js.ChartTooltip, { children: [
|
|
2356
1240
|
xAnnotationDetails ? xAnnotationDetails() : void 0,
|
|
2357
|
-
/* @__PURE__ */ (0,
|
|
2358
|
-
/* @__PURE__ */ (0,
|
|
2359
|
-
onClick && tooltipClickLabel ? /* @__PURE__ */ (0,
|
|
2360
|
-
/* @__PURE__ */ (0,
|
|
2361
|
-
/* @__PURE__ */ (0,
|
|
1241
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTitle, { children: tooltipDateFormatter({ x }) }),
|
|
1242
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipTable, { rows }),
|
|
1243
|
+
onClick && tooltipClickLabel ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.ChartTooltipFooter, { children: typeof tooltipClickLabel === "string" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _seedsreactbox.Box, { display: "flex", alignItems: "center", gap: 300, children: [
|
|
1244
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacticon.Icon, { name: "hand-pointer-clicking-outline", color: "icon.base" }),
|
|
1245
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreacttext.Text, { color: "text.subtext", fontSize: 200, children: tooltipClickLabel })
|
|
2362
1246
|
] }) : tooltipClickLabel }) : null
|
|
2363
1247
|
] });
|
|
2364
1248
|
}
|
|
2365
1249
|
);
|
|
2366
1250
|
|
|
2367
1251
|
// src/components/VerticalBarChart/VerticalBarChart.tsx
|
|
2368
|
-
var import_seeds_react_theme16 = require("@sproutsocial/seeds-react-theme");
|
|
2369
|
-
|
|
2370
|
-
// src/components/VerticalBarChart/styles.ts
|
|
2371
|
-
var import_styled_components11 = require("styled-components");
|
|
2372
|
-
var verticalBarChartStyles = import_styled_components11.css`
|
|
2373
|
-
${timeSeriesChartStyles}
|
|
2374
|
-
|
|
2375
|
-
/*
|
|
2376
|
-
When the chart container is hovered, reduce the opacity of all columns.
|
|
2377
|
-
Then, for the column that is being hovered, restore its opacity.
|
|
2378
|
-
This gives the effect of fading out the non-hovered columns.
|
|
2379
|
-
*/
|
|
2380
|
-
.highcharts-container:hover .highcharts-point {
|
|
2381
|
-
fill-opacity: 0.3;
|
|
2382
|
-
}
|
|
2383
1252
|
|
|
2384
|
-
.highcharts-point.column-hover {
|
|
2385
|
-
fill-opacity: 1 !important;
|
|
2386
|
-
}
|
|
2387
|
-
`;
|
|
2388
1253
|
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
(0,
|
|
2392
|
-
|
|
2393
|
-
var StyledBox6 = (0, import_styled_components12.default)(import_seeds_react_box18.Box)`
|
|
2394
|
-
${verticalBarChartStyles}
|
|
1254
|
+
_accessibility2.default.call(void 0, _highcharts2.default);
|
|
1255
|
+
_annotations2.default.call(void 0, _highcharts2.default);
|
|
1256
|
+
var StyledBox4 = _styledcomponents2.default.call(void 0, _seedsreactbox.Box)`
|
|
1257
|
+
${_chunkJXARPHQEjs.verticalBarChartStyles}
|
|
2395
1258
|
`;
|
|
2396
|
-
var VerticalBarChart = (0,
|
|
1259
|
+
var VerticalBarChart = _react.memo.call(void 0,
|
|
2397
1260
|
function VerticalBarChart2(props) {
|
|
2398
1261
|
const { data, showSeriesLimitWarning = true } = props;
|
|
2399
|
-
const seriesLimit = props.seriesLimit
|
|
1262
|
+
const seriesLimit = _nullishCoalesce(props.seriesLimit, () => ( _chunkJXARPHQEjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT));
|
|
2400
1263
|
const isSeriesLimitOverridden = props.seriesLimit !== void 0;
|
|
2401
1264
|
if (data.length === 0) {
|
|
2402
1265
|
return null;
|
|
@@ -2410,10 +1273,10 @@ var VerticalBarChart = (0, import_react28.memo)(
|
|
|
2410
1273
|
}
|
|
2411
1274
|
chartData = data.slice(0, seriesLimit);
|
|
2412
1275
|
}
|
|
2413
|
-
return /* @__PURE__ */ (0,
|
|
1276
|
+
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VerticalBarChartWithData, { ...props, data: chartData });
|
|
2414
1277
|
}
|
|
2415
1278
|
);
|
|
2416
|
-
var VerticalBarChartWithData = (0,
|
|
1279
|
+
var VerticalBarChartWithData = _react.memo.call(void 0,
|
|
2417
1280
|
function VerticalBarChartWithData2({
|
|
2418
1281
|
data,
|
|
2419
1282
|
invalidNumberLabel,
|
|
@@ -2431,7 +1294,7 @@ var VerticalBarChartWithData = (0, import_react28.memo)(
|
|
|
2431
1294
|
xAnnotations,
|
|
2432
1295
|
xAxisLabelFormatter: xAxisLabelFormatter2
|
|
2433
1296
|
}) {
|
|
2434
|
-
const shouldUseTimeFormatter = isHourlyTimeData(data) || isCategoricalHourData(data);
|
|
1297
|
+
const shouldUseTimeFormatter = _chunkEEVKTTT3js.isHourlyTimeData.call(void 0, data) || _chunkEEVKTTT3js.isCategoricalHourData.call(void 0, data);
|
|
2435
1298
|
const autoTimeXAxisLabelFormatter = ({
|
|
2436
1299
|
value,
|
|
2437
1300
|
timeFormat: timeFormat2
|
|
@@ -2487,9 +1350,9 @@ var VerticalBarChartWithData = (0, import_react28.memo)(
|
|
|
2487
1350
|
const { colors, patterns } = data.reduce(
|
|
2488
1351
|
(acc, item, index) => {
|
|
2489
1352
|
acc.colors.push(
|
|
2490
|
-
item.styles
|
|
1353
|
+
_nullishCoalesce(_nullishCoalesce(_optionalChain([item, 'access', _65 => _65.styles, 'optionalAccess', _66 => _66.color]), () => ( _seedsreacttheme.theme.colors.DATAVIZ_COLORS_LIST[index])), () => ( ""))
|
|
2491
1354
|
);
|
|
2492
|
-
acc.patterns.push(item.styles
|
|
1355
|
+
acc.patterns.push(_nullishCoalesce(_optionalChain([item, 'access', _67 => _67.styles, 'optionalAccess', _68 => _68.pattern]), () => ( "solid")));
|
|
2493
1356
|
return acc;
|
|
2494
1357
|
},
|
|
2495
1358
|
{
|
|
@@ -2497,42 +1360,43 @@ var VerticalBarChartWithData = (0, import_react28.memo)(
|
|
|
2497
1360
|
patterns: []
|
|
2498
1361
|
}
|
|
2499
1362
|
);
|
|
2500
|
-
return /* @__PURE__ */ (0,
|
|
2501
|
-
/* @__PURE__ */ (0,
|
|
2502
|
-
/* @__PURE__ */ (0,
|
|
2503
|
-
|
|
1363
|
+
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
|
|
1364
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkEEVKTTT3js.GlobalChartStyleOverrides, {}),
|
|
1365
|
+
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
|
|
1366
|
+
StyledBox4,
|
|
2504
1367
|
{
|
|
2505
1368
|
$colors: colors,
|
|
2506
1369
|
$hasOnClick: Boolean(onClick),
|
|
2507
1370
|
bg: "container.background.base",
|
|
2508
1371
|
children: [
|
|
2509
|
-
/* @__PURE__ */ (0,
|
|
2510
|
-
|
|
1372
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1373
|
+
_highchartsreactofficial.HighchartsReact,
|
|
2511
1374
|
{
|
|
2512
|
-
highcharts:
|
|
1375
|
+
highcharts: _highcharts2.default,
|
|
2513
1376
|
options,
|
|
2514
1377
|
callback
|
|
2515
1378
|
}
|
|
2516
1379
|
),
|
|
2517
|
-
chart && chart.annotations
|
|
1380
|
+
chart && _optionalChain([chart, 'access', _69 => _69.annotations, 'optionalAccess', _70 => _70.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2518
1381
|
ChartXAnnotationMarkerPortal,
|
|
2519
1382
|
{
|
|
2520
1383
|
xAnnotations,
|
|
2521
|
-
annotationContext: chart.annotations
|
|
1384
|
+
annotationContext: _optionalChain([chart, 'access', _71 => _71.annotations, 'optionalAccess', _72 => _72[0]]),
|
|
1385
|
+
chartContainer: chart.container
|
|
2522
1386
|
}
|
|
2523
1387
|
) : null,
|
|
2524
|
-
chart ? /* @__PURE__ */ (0,
|
|
2525
|
-
ChartTooltipPortal,
|
|
1388
|
+
chart ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
1389
|
+
_chunkEEVKTTT3js.ChartTooltipPortal,
|
|
2526
1390
|
{
|
|
2527
1391
|
chart,
|
|
2528
1392
|
renderContent: (context) => {
|
|
2529
|
-
const tooltipData = transformTimeSeriesTooltipData({
|
|
1393
|
+
const tooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData.call(void 0, {
|
|
2530
1394
|
context,
|
|
2531
1395
|
data
|
|
2532
1396
|
});
|
|
2533
1397
|
const x = context.x;
|
|
2534
|
-
const xAnnotationDetails = typeof x === "number" ? xAnnotations
|
|
2535
|
-
return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ (0,
|
|
1398
|
+
const xAnnotationDetails = typeof x === "number" ? _optionalChain([xAnnotations, 'optionalAccess', _73 => _73[x], 'optionalAccess', _74 => _74.details]) : void 0;
|
|
1399
|
+
return tooltip ? tooltip({ data: tooltipData, x }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
2536
1400
|
VerticalBarChartTooltip,
|
|
2537
1401
|
{
|
|
2538
1402
|
currency,
|
|
@@ -2551,62 +1415,61 @@ var VerticalBarChartWithData = (0, import_react28.memo)(
|
|
|
2551
1415
|
}
|
|
2552
1416
|
}
|
|
2553
1417
|
) : null,
|
|
2554
|
-
/* @__PURE__ */ (0,
|
|
1418
|
+
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _seedsreactbox.Box, { mt: 350, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, VerticalBarChartLegend, { data }) })
|
|
2555
1419
|
]
|
|
2556
1420
|
}
|
|
2557
1421
|
)
|
|
2558
1422
|
] });
|
|
2559
1423
|
}
|
|
2560
1424
|
);
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
|
|
2578
|
-
|
|
2579
|
-
|
|
2580
|
-
|
|
2581
|
-
|
|
2582
|
-
|
|
2583
|
-
|
|
2584
|
-
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
|
|
2601
|
-
|
|
2602
|
-
|
|
2603
|
-
|
|
2604
|
-
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
|
|
2611
|
-
});
|
|
1425
|
+
|
|
1426
|
+
|
|
1427
|
+
|
|
1428
|
+
|
|
1429
|
+
|
|
1430
|
+
|
|
1431
|
+
|
|
1432
|
+
|
|
1433
|
+
|
|
1434
|
+
|
|
1435
|
+
|
|
1436
|
+
|
|
1437
|
+
|
|
1438
|
+
|
|
1439
|
+
|
|
1440
|
+
|
|
1441
|
+
|
|
1442
|
+
|
|
1443
|
+
|
|
1444
|
+
|
|
1445
|
+
|
|
1446
|
+
|
|
1447
|
+
|
|
1448
|
+
|
|
1449
|
+
|
|
1450
|
+
|
|
1451
|
+
|
|
1452
|
+
|
|
1453
|
+
|
|
1454
|
+
|
|
1455
|
+
|
|
1456
|
+
|
|
1457
|
+
|
|
1458
|
+
|
|
1459
|
+
|
|
1460
|
+
|
|
1461
|
+
|
|
1462
|
+
|
|
1463
|
+
|
|
1464
|
+
|
|
1465
|
+
|
|
1466
|
+
|
|
1467
|
+
|
|
1468
|
+
|
|
1469
|
+
|
|
1470
|
+
|
|
1471
|
+
|
|
1472
|
+
|
|
1473
|
+
|
|
1474
|
+
exports.AreaChart = AreaChart; exports.ChartLegend = _chunkEEVKTTT3js.ChartLegend; exports.ChartLegendLabel = _chunkEEVKTTT3js.ChartLegendLabel; exports.ChartTable = _chunkEEVKTTT3js.ChartTable; exports.ChartTooltip = _chunkEEVKTTT3js.ChartTooltip; exports.ChartTooltipFooter = _chunkEEVKTTT3js.ChartTooltipFooter; exports.ChartTooltipHeader = _chunkEEVKTTT3js.ChartTooltipHeader; exports.ChartTooltipPortal = _chunkEEVKTTT3js.ChartTooltipPortal; exports.ChartTooltipTable = _chunkEEVKTTT3js.ChartTooltipTable; exports.ChartTooltipTitle = _chunkEEVKTTT3js.ChartTooltipTitle; exports.ChartXAnnotationDetails = ChartXAnnotationDetails; exports.ChartXAnnotationMarker = ChartXAnnotationMarker; exports.ColorBox = _chunkEEVKTTT3js.ColorBox; exports.DONUT_CHART_HALO_SIZE = _chunkJXARPHQEjs.DONUT_CHART_HALO_SIZE; exports.DONUT_CHART_HEIGHT = _chunkJXARPHQEjs.DONUT_CHART_HEIGHT; exports.DONUT_CHART_WIDTH = _chunkJXARPHQEjs.DONUT_CHART_WIDTH; exports.DatavizColorBox = _chunkEEVKTTT3js.DatavizColorBox; exports.DonutChart = DonutChart; exports.DonutChartLegendTable = DonutChartLegendTable; exports.GlobalChartStyleOverrides = _chunkEEVKTTT3js.GlobalChartStyleOverrides; exports.LineChart = LineChart; exports.NetworkColorBox = _chunkEEVKTTT3js.NetworkColorBox; exports.TIME_SERIES_CHART_HEIGHT = _chunkJXARPHQEjs.TIME_SERIES_CHART_HEIGHT; exports.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = _chunkJXARPHQEjs.VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT; exports.VerticalBarChart = VerticalBarChart; exports.areaChartOptions = _chunkJXARPHQEjs.areaChartOptions; exports.areaChartStyles = _chunkEEVKTTT3js.areaChartStyles; exports.baseChartOptions = _chunkJXARPHQEjs.baseChartOptions; exports.baseChartStyles = _chunkEEVKTTT3js.baseChartStyles; exports.columnChartOptions = _chunkJXARPHQEjs.columnChartOptions; exports.donutChartOptions = _chunkJXARPHQEjs.donutChartOptions; exports.donutChartStyles = _chunkEEVKTTT3js.donutChartStyles; exports.generateChartTooltipPortalId = _chunkEEVKTTT3js.generateChartTooltipPortalId; exports.getDatavizColor = _chunkEEVKTTT3js.getDatavizColor; exports.getDatavizColorWithAlpha = _chunkEEVKTTT3js.getDatavizColorWithAlpha; exports.getDatavizOpacity = _chunkEEVKTTT3js.getDatavizOpacity; exports.getStorybookCategoricalData = _chunkEEVKTTT3js.getStorybookCategoricalData; exports.getStorybookSparseTimelineData = _chunkEEVKTTT3js.getStorybookSparseTimelineData; exports.isCategoricalHourData = _chunkEEVKTTT3js.isCategoricalHourData; exports.isHourlyTimeData = _chunkEEVKTTT3js.isHourlyTimeData; exports.lineChartOptions = _chunkJXARPHQEjs.lineChartOptions; exports.lineChartStyles = _chunkEEVKTTT3js.lineChartStyles; exports.timeSeriesChartOptions = _chunkJXARPHQEjs.timeSeriesChartOptions; exports.timeSeriesChartStyles = _chunkEEVKTTT3js.timeSeriesChartStyles; exports.transformDataToSeries = _chunkEEVKTTT3js.transformDataToSeries; exports.transformTimeSeriesTooltipData = _chunkEEVKTTT3js.transformTimeSeriesTooltipData; exports.xAxisLabelFormatter = _chunkEEVKTTT3js.xAxisLabelFormatter; exports.yAxisLabelFormatter = _chunkEEVKTTT3js.yAxisLabelFormatter;
|
|
2612
1475
|
//# sourceMappingURL=index.js.map
|