@splunk/visualizations 28.3.0 → 28.4.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/Area/Area.d.ts.map +1 -1
- package/Area.config.js +0 -1
- package/Area.config.js.map +2 -2
- package/Area.js +495 -99
- package/Area.js.map +3 -3
- package/Bar/Bar.d.ts.map +1 -1
- package/Bar.config.js +0 -1
- package/Bar.config.js.map +2 -2
- package/Bar.js +505 -99
- package/Bar.js.map +3 -3
- package/Bubble.config.js +0 -1
- package/Bubble.config.js.map +2 -2
- package/Bubble.js +494 -86
- package/Bubble.js.map +3 -3
- package/CHANGELOG.external.md +76 -0
- package/ChoroplethSvg/ChoroplethSvg.d.ts +4 -3
- package/ChoroplethSvg/ChoroplethSvg.d.ts.map +1 -1
- package/ChoroplethSvg.config.js +1 -3
- package/ChoroplethSvg.config.js.map +2 -2
- package/ChoroplethSvg.js +539 -103
- package/ChoroplethSvg.js.map +4 -4
- package/Column/Column.d.ts.map +1 -1
- package/Column.config.js +0 -1
- package/Column.config.js.map +2 -2
- package/Column.js +495 -99
- package/Column.js.map +3 -3
- package/Ellipse.js +528 -104
- package/Ellipse.js.map +4 -4
- package/Events/PureEvents/PureEvents.d.ts.map +1 -1
- package/Events.js +612 -149
- package/Events.js.map +4 -4
- package/FillerGauge/FillerGauge.d.ts.map +1 -1
- package/FillerGauge/PureFillerGauge/FillerGauge.d.ts.map +1 -1
- package/FillerGauge.js +535 -140
- package/FillerGauge.js.map +4 -4
- package/Image/Image.d.ts.map +1 -1
- package/Image.js +564 -108
- package/Image.js.map +4 -4
- package/Line/Line.d.ts.map +1 -1
- package/Line/lineUtils.d.ts.map +1 -1
- package/Line/mockdata/LineData.d.ts +59 -0
- package/Line/mockdata/LineData.d.ts.map +1 -1
- package/Line.config.js +0 -1
- package/Line.config.js.map +2 -2
- package/Line.js +601 -100
- package/Line.js.map +3 -3
- package/LinkGraph/PureLinkGraph/PureLinkGraph.d.ts +5 -0
- package/LinkGraph/PureLinkGraph/PureLinkGraph.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/PureLinkGraphUtils.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/components/Graph.d.ts +9 -1
- package/LinkGraph/PureLinkGraph/components/Graph.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/components/GraphStyles.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/components/Node.d.ts +1 -0
- package/LinkGraph/PureLinkGraph/components/Node.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/components/Nodes.d.ts +1 -0
- package/LinkGraph/PureLinkGraph/components/Nodes.d.ts.map +1 -1
- package/LinkGraph/PureLinkGraph/measurementUtils.d.ts +16 -0
- package/LinkGraph/PureLinkGraph/measurementUtils.d.ts.map +1 -0
- package/LinkGraph/PureLinkGraph/utils/iconLoader.d.ts.map +1 -1
- package/LinkGraph/config.d.ts.map +1 -1
- package/LinkGraph.config.js +15 -1
- package/LinkGraph.config.js.map +2 -2
- package/LinkGraph.js +1355 -654
- package/LinkGraph.js.map +4 -4
- package/Map/Map.d.ts +2 -2
- package/Map/Map.d.ts.map +1 -1
- package/Map/PureMap/BubbleLayer.d.ts +5 -0
- package/Map/PureMap/BubbleLayer.d.ts.map +1 -1
- package/Map/PureMap/LocalChoroplethLayer.d.ts.map +1 -1
- package/Map/PureMap/PureMap.d.ts.map +1 -1
- package/Map/PureMap/PureMapContainer.d.ts.map +1 -1
- package/Map/PureMap/Tooltip.d.ts.map +1 -1
- package/Map/config.d.ts.map +1 -1
- package/Map.config.js +0 -1
- package/Map.config.js.map +2 -2
- package/Map.js +738 -228
- package/Map.js.map +4 -4
- package/Markdown/Markdown.d.ts.map +1 -1
- package/Markdown.js +548 -95
- package/Markdown.js.map +4 -4
- package/MarkerGauge/MarkerGauge.d.ts +5 -1
- package/MarkerGauge/MarkerGauge.d.ts.map +1 -1
- package/MarkerGauge/PureMarkerGauge/MarkerGauge.d.ts +4 -0
- package/MarkerGauge/PureMarkerGauge/MarkerGauge.d.ts.map +1 -1
- package/MarkerGauge/config.d.ts.map +1 -1
- package/MarkerGauge.config.js +121 -3
- package/MarkerGauge.config.js.map +3 -3
- package/MarkerGauge.js +1318 -142
- package/MarkerGauge.js.map +4 -4
- package/NetworkGraph/NetworkGraph.d.ts +22 -0
- package/NetworkGraph/NetworkGraph.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/PureNetworkGraph.d.ts +60 -0
- package/NetworkGraph/PureNetworkGraph/PureNetworkGraph.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/components/Link.d.ts +19 -0
- package/NetworkGraph/PureNetworkGraph/components/Link.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/components/NetworkGraphSvg.d.ts +29 -0
- package/NetworkGraph/PureNetworkGraph/components/NetworkGraphSvg.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/components/Node.d.ts +27 -0
- package/NetworkGraph/PureNetworkGraph/components/Node.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/components/Tooltip.d.ts +12 -0
- package/NetworkGraph/PureNetworkGraph/components/Tooltip.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/components/ZoomControls.d.ts +13 -0
- package/NetworkGraph/PureNetworkGraph/components/ZoomControls.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/mockdata/data.d.ts +140 -0
- package/NetworkGraph/PureNetworkGraph/mockdata/data.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/mockdata/datasource.d.ts +89 -0
- package/NetworkGraph/PureNetworkGraph/mockdata/datasource.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/utils/forceLayout.d.ts +47 -0
- package/NetworkGraph/PureNetworkGraph/utils/forceLayout.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/utils/iconLoader.d.ts +78 -0
- package/NetworkGraph/PureNetworkGraph/utils/iconLoader.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/utils/networkGraphShared.d.ts +111 -0
- package/NetworkGraph/PureNetworkGraph/utils/networkGraphShared.d.ts.map +1 -0
- package/NetworkGraph/PureNetworkGraph/utils/networkGraphUtils.d.ts +123 -0
- package/NetworkGraph/PureNetworkGraph/utils/networkGraphUtils.d.ts.map +1 -0
- package/NetworkGraph/config.d.ts +4 -0
- package/NetworkGraph/config.d.ts.map +1 -0
- package/NetworkGraph/index.d.ts +3 -0
- package/NetworkGraph/index.d.ts.map +1 -0
- package/NetworkGraph.config.js +938 -0
- package/NetworkGraph.config.js.map +7 -0
- package/NetworkGraph.js +6793 -0
- package/NetworkGraph.js.map +7 -0
- package/ParallelCoordinates.js +532 -93
- package/ParallelCoordinates.js.map +4 -4
- package/Pie/Pie.d.ts.map +1 -1
- package/Pie/pieUtils.d.ts.map +1 -1
- package/Pie.js +510 -101
- package/Pie.js.map +3 -3
- package/Punchcard.js +523 -84
- package/Punchcard.js.map +4 -4
- package/Rectangle.js +537 -113
- package/Rectangle.js.map +4 -4
- package/Sankey/PureSankey/SankeyTooltip.d.ts.map +1 -1
- package/Sankey.js +562 -111
- package/Sankey.js.map +4 -4
- package/Scatter/Scatter.d.ts.map +1 -1
- package/Scatter.config.js +0 -1
- package/Scatter.config.js.map +2 -2
- package/Scatter.js +505 -99
- package/Scatter.js.map +3 -3
- package/SingleValue/SingleValue.d.ts.map +1 -1
- package/SingleValue/config.d.ts.map +1 -1
- package/SingleValue.config.js +15 -2
- package/SingleValue.config.js.map +2 -2
- package/SingleValue.js +656 -173
- package/SingleValue.js.map +3 -3
- package/SingleValueBasic.js.map +1 -1
- package/SingleValueIcon/SingleValueIcon.d.ts.map +1 -1
- package/SingleValueIcon/config.d.ts.map +1 -1
- package/SingleValueIcon.config.js +0 -1
- package/SingleValueIcon.config.js.map +2 -2
- package/SingleValueIcon.js +512 -124
- package/SingleValueIcon.js.map +3 -3
- package/SingleValueRadial/PureSingleValueRadial/utils/gaugeUtils.d.ts +0 -8
- package/SingleValueRadial/PureSingleValueRadial/utils/gaugeUtils.d.ts.map +1 -1
- package/SingleValueRadial/SingleValueRadial.d.ts.map +1 -1
- package/SingleValueRadial.config.js +0 -1
- package/SingleValueRadial.config.js.map +2 -2
- package/SingleValueRadial.js +517 -124
- package/SingleValueRadial.js.map +4 -4
- package/SparkLine.js +46 -8
- package/SparkLine.js.map +2 -2
- package/Table/PureTable.d.ts +10 -0
- package/Table/PureTable.d.ts.map +1 -1
- package/Table/cells/SparklineCell.d.ts.map +1 -1
- package/Table/config.d.ts.map +1 -1
- package/Table/hooks.d.ts +4 -0
- package/Table/hooks.d.ts.map +1 -1
- package/Table.config.js +1 -1
- package/Table.config.js.map +2 -2
- package/Table.js +760 -223
- package/Table.js.map +4 -4
- package/Timeline/PureTimeline/src/CursorPlugin.d.ts.map +1 -1
- package/Timeline/PureTimeline/src/TimelineLegend.d.ts.map +1 -1
- package/Timeline/config.d.ts.map +1 -1
- package/Timeline.config.js +31 -12
- package/Timeline.config.js.map +4 -4
- package/Timeline.js +649 -211
- package/Timeline.js.map +4 -4
- package/common/Charting.d.ts +5 -0
- package/common/Charting.d.ts.map +1 -1
- package/common/Charting.js +12 -0
- package/common/Charting.js.map +2 -2
- package/common/OptionsDoc.js.map +1 -1
- package/common/ThemesDoc.js +0 -1
- package/common/ThemesDoc.js.map +2 -2
- package/common/TimeSeriesChartWrapper.d.ts +24 -11
- package/common/TimeSeriesChartWrapper.d.ts.map +1 -1
- package/common/TimeSeriesChartWrapper.js +561 -83
- package/common/TimeSeriesChartWrapper.js.map +4 -4
- package/common/chartingUtils.d.ts +45 -5
- package/common/chartingUtils.d.ts.map +1 -1
- package/common/chartingUtils.js +102 -8
- package/common/chartingUtils.js.map +3 -3
- package/common/editorConfig/AxesChartDataConfig.d.ts.map +1 -1
- package/common/hocs/withTrellis.d.ts.map +1 -1
- package/common/interfaces/DashboardVizProps.d.ts +0 -3
- package/common/interfaces/DashboardVizProps.d.ts.map +1 -1
- package/common/interfaces/DataSource.d.ts +1 -1
- package/common/interfaces/DataSource.d.ts.map +1 -1
- package/common/shapeUtils.js +5 -20
- package/common/shapeUtils.js.map +2 -2
- package/common/utils/dataUtils.d.ts.map +1 -1
- package/common/utils/dataUtils.js +5 -4
- package/common/utils/dataUtils.js.map +2 -2
- package/common/utils/mapUtils.js +16 -9
- package/common/utils/mapUtils.js.map +2 -2
- package/common/utils/singleValueUtils.js +17 -18
- package/common/utils/singleValueUtils.js.map +2 -2
- package/common/utils/textUtils.d.ts +20 -0
- package/common/utils/textUtils.d.ts.map +1 -0
- package/common/utils/textUtils.js +76 -0
- package/common/utils/textUtils.js.map +7 -0
- package/common/utils/trellisUtils.d.ts.map +1 -1
- package/common/utils/trellisUtils.js +12 -14
- package/common/utils/trellisUtils.js.map +2 -2
- package/common/withDashboardViz.d.ts.map +1 -1
- package/common/withDashboardViz.js +544 -84
- package/common/withDashboardViz.js.map +4 -4
- package/package.json +33 -26
- package/common/utils/styleUtils.d.ts +0 -2
- package/common/utils/styleUtils.d.ts.map +0 -1
- package/common/utils/styleUtils.js +0 -30
- package/common/utils/styleUtils.js.map +0 -7
package/Line.js
CHANGED
|
@@ -248,6 +248,7 @@ var DefaultVizActionHandler = class {
|
|
|
248
248
|
};
|
|
249
249
|
|
|
250
250
|
// src/common/utils/dataUtils.ts
|
|
251
|
+
var getFieldName = (field) => typeof field === "string" ? field : field.name;
|
|
251
252
|
var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices) => {
|
|
252
253
|
const dataLength = data.length;
|
|
253
254
|
const downsampledIndices = [];
|
|
@@ -421,9 +422,9 @@ var tryToCoerceAllDisplayedFields = (ds, xField, yFields, fieldTypes, options) =
|
|
|
421
422
|
let xColumn = [];
|
|
422
423
|
const yColumns = [];
|
|
423
424
|
const canDownsample = !ds.data.fields.some((field, index) => {
|
|
424
|
-
var _a
|
|
425
|
-
const fieldName = (
|
|
426
|
-
const fieldType = (
|
|
425
|
+
var _a;
|
|
426
|
+
const fieldName = getFieldName(field);
|
|
427
|
+
const fieldType = (_a = fieldTypes[index]) != null ? _a : "unknown";
|
|
427
428
|
const column = ds.data.columns[index];
|
|
428
429
|
let hasDisplayedColumnThatCantBeDownsampled = false;
|
|
429
430
|
if (fieldName === xField) {
|
|
@@ -627,6 +628,7 @@ var Charting = (props) => {
|
|
|
627
628
|
const timezone = (0, react_exports.useContext)(TimezoneContext_default);
|
|
628
629
|
const selectChartEvent = (0, react_exports.useRef)(null);
|
|
629
630
|
const trellisEnabled = useTrellisEnabled(props.splitByLayout);
|
|
631
|
+
const isResizing = (0, react_exports.useRef)(false);
|
|
630
632
|
const drawChartRef = (0, react_exports.useRef)(() => {
|
|
631
633
|
});
|
|
632
634
|
const debouncedDrawChart = (0, react_exports.useMemo)(
|
|
@@ -725,6 +727,9 @@ var Charting = (props) => {
|
|
|
725
727
|
recalculateDownsamplingThreshold();
|
|
726
728
|
}, [recalculateDownsamplingThreshold]);
|
|
727
729
|
const handleSelect = useEventCallback_default((chartEvent) => {
|
|
730
|
+
if (isResizing.current) {
|
|
731
|
+
return;
|
|
732
|
+
}
|
|
728
733
|
selectChartEvent.current = chartEvent;
|
|
729
734
|
recalculateDownsamplingThreshold();
|
|
730
735
|
const payload = appendTrellisToPayload(
|
|
@@ -859,6 +864,14 @@ var Charting = (props) => {
|
|
|
859
864
|
}
|
|
860
865
|
if (chart.current) {
|
|
861
866
|
if (Math.round(chart.current.height) !== Math.round(computedHeight) || Math.round(chart.current.width) !== Math.round(computedWidth)) {
|
|
867
|
+
isResizing.current = true;
|
|
868
|
+
queueMicrotask(() => {
|
|
869
|
+
try {
|
|
870
|
+
isResizing.current = false;
|
|
871
|
+
} catch (e) {
|
|
872
|
+
(0, lodash_exports.noop)(e);
|
|
873
|
+
}
|
|
874
|
+
});
|
|
862
875
|
chart.current.resize(computedWidth, computedHeight);
|
|
863
876
|
}
|
|
864
877
|
}
|
|
@@ -1159,7 +1172,6 @@ var AcceleratedRenderEditorLayout = [
|
|
|
1159
1172
|
"Render visualizations faster for large datasets. Some functionalities might not be available in this mode."
|
|
1160
1173
|
),
|
|
1161
1174
|
helpFormat: "under"
|
|
1162
|
-
// TODO: uncomment and replace link with real link (SCP-75907)
|
|
1163
1175
|
// helpTextLink: {
|
|
1164
1176
|
// href: 'https://splunkui.splunk.com/Packages/visualizations/Overview',
|
|
1165
1177
|
// label: 'Learn More.',
|
|
@@ -2729,7 +2741,7 @@ var Cover = styled_components_default.div`
|
|
|
2729
2741
|
bottom: 0;
|
|
2730
2742
|
`;
|
|
2731
2743
|
var Blocker = styled_components_default.div.attrs({
|
|
2732
|
-
"data-splunk-visualization-version": "28.
|
|
2744
|
+
"data-splunk-visualization-version": "28.4.0 - 002bd482f"
|
|
2733
2745
|
})`
|
|
2734
2746
|
position: relative;
|
|
2735
2747
|
width: 100%;
|
|
@@ -2810,7 +2822,7 @@ var withFixedSizeContainer = (Viz) => {
|
|
|
2810
2822
|
FixSizeItem,
|
|
2811
2823
|
{
|
|
2812
2824
|
"data-test": "fix-size-item",
|
|
2813
|
-
"data-splunk-visualization-version": "28.
|
|
2825
|
+
"data-splunk-visualization-version": "28.4.0 - 002bd482f",
|
|
2814
2826
|
width,
|
|
2815
2827
|
height,
|
|
2816
2828
|
backgroundColor
|
|
@@ -3086,7 +3098,7 @@ var trellisUtils_default = "default" in defaultImport33 ? defaultImport33.defaul
|
|
|
3086
3098
|
var AGGREGATIONS = "aggregations";
|
|
3087
3099
|
var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
|
|
3088
3100
|
var _a, _b, _c, _d;
|
|
3089
|
-
const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
|
|
3101
|
+
const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
|
|
3090
3102
|
const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
|
|
3091
3103
|
let splitDataSources = null;
|
|
3092
3104
|
let errorCode = null;
|
|
@@ -3107,7 +3119,7 @@ var dataSourcesSplitByAggregationsUnknown = (dataSource) => {
|
|
|
3107
3119
|
}
|
|
3108
3120
|
return { splitDataSources, errorCode };
|
|
3109
3121
|
};
|
|
3110
|
-
var toFieldEntries = (fields) => {
|
|
3122
|
+
var toFieldEntries = (fields = []) => {
|
|
3111
3123
|
return fields.map((field) => {
|
|
3112
3124
|
if (typeof field === "string") {
|
|
3113
3125
|
return { name: field };
|
|
@@ -3122,7 +3134,7 @@ var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
|
|
|
3122
3134
|
let splitDataSources = null;
|
|
3123
3135
|
let splitByFields = [];
|
|
3124
3136
|
let errorCode = null;
|
|
3125
|
-
if (
|
|
3137
|
+
if (fields.length > 0) {
|
|
3126
3138
|
splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysChart)(fields);
|
|
3127
3139
|
}
|
|
3128
3140
|
if (splitByFields && splitByFields.length > 0) {
|
|
@@ -3160,12 +3172,12 @@ var dataSourcesSplitByAggregationsTimechartAndChart = (dataSource) => {
|
|
|
3160
3172
|
};
|
|
3161
3173
|
var dataSourcesSplitByAggregationsStats = (dataSource) => {
|
|
3162
3174
|
var _a, _b, _c, _d;
|
|
3163
|
-
const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
|
|
3175
|
+
const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
|
|
3164
3176
|
const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
|
|
3165
3177
|
let splitDataSources = null;
|
|
3166
3178
|
let splitByFields = [];
|
|
3167
3179
|
let errorCode = null;
|
|
3168
|
-
if (
|
|
3180
|
+
if (fields.length > 0) {
|
|
3169
3181
|
splitByFields = (0, trellisUtils_exports.extractDataSourceAggregationKeysStats)(fields);
|
|
3170
3182
|
}
|
|
3171
3183
|
if (splitByFields && splitByFields.length > 0) {
|
|
@@ -3189,12 +3201,12 @@ var dataSourcesSplitByAggregationsStats = (dataSource) => {
|
|
|
3189
3201
|
};
|
|
3190
3202
|
var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
|
|
3191
3203
|
var _a, _b, _c, _d, _e;
|
|
3192
|
-
const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
|
|
3204
|
+
const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
|
|
3193
3205
|
const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
|
|
3194
3206
|
let splitDataSources = null;
|
|
3195
3207
|
let splitByFields = [];
|
|
3196
3208
|
let errorCode = null;
|
|
3197
|
-
if (
|
|
3209
|
+
if (fields.length > 0) {
|
|
3198
3210
|
splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
|
|
3199
3211
|
}
|
|
3200
3212
|
if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
|
|
@@ -3232,12 +3244,12 @@ var dataSourcesSplitByModeTimechart = (dataSource, splitBy) => {
|
|
|
3232
3244
|
};
|
|
3233
3245
|
var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
|
|
3234
3246
|
var _a, _b, _c, _d;
|
|
3235
|
-
const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
|
|
3247
|
+
const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
|
|
3236
3248
|
const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
|
|
3237
3249
|
let splitDataSources = null;
|
|
3238
3250
|
let splitByFields = [];
|
|
3239
3251
|
let errorCode = null;
|
|
3240
|
-
if (
|
|
3252
|
+
if (fields.length > 0) {
|
|
3241
3253
|
splitByFields = (0, trellisUtils_exports.extractSplitByFieldsChartFields)(fields);
|
|
3242
3254
|
}
|
|
3243
3255
|
if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
|
|
@@ -3325,17 +3337,15 @@ var dataSourcesSplitByModeChart = (dataSource, splitBy) => {
|
|
|
3325
3337
|
};
|
|
3326
3338
|
var dataSourcesSplitByModeStatsorUnknown = (dataSource, splitBy, splitMode) => {
|
|
3327
3339
|
var _a, _b, _c, _d, _e, _f;
|
|
3328
|
-
const fields = (_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields;
|
|
3340
|
+
const fields = toFieldEntries((_b = (_a = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _a.data) == null ? void 0 : _b.fields);
|
|
3329
3341
|
const columns = (_d = (_c = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _c.data) == null ? void 0 : _d.columns;
|
|
3330
3342
|
let splitDataSources = null;
|
|
3331
3343
|
let splitByFields = [];
|
|
3332
3344
|
let errorCode = null;
|
|
3333
|
-
if (
|
|
3345
|
+
if (fields.length > 0) {
|
|
3334
3346
|
splitByFields = splitMode !== trellisUtils_exports.UNKNOWN ? (0, trellisUtils_exports.extractSplitByFieldsForStats)(fields) : (0, trellisUtils_exports.extractSplitByFieldsForUnknown)(fields);
|
|
3335
3347
|
}
|
|
3336
|
-
const splitByIndex = fields
|
|
3337
|
-
(field) => field === splitBy || field.name === splitBy
|
|
3338
|
-
);
|
|
3348
|
+
const splitByIndex = fields.findIndex((field) => field.name === splitBy);
|
|
3339
3349
|
if (splitByFields && splitByFields.indexOf(splitBy) > -1) {
|
|
3340
3350
|
const splitByColumn = (_f = (_e = dataSource == null ? void 0 : dataSource.primary) == null ? void 0 : _e.data) == null ? void 0 : _f.columns[splitByIndex];
|
|
3341
3351
|
splitDataSources = {};
|
|
@@ -3549,6 +3559,32 @@ function constructAdditionalTooltipFieldsMap({ fields, columns, additionalToolti
|
|
|
3549
3559
|
});
|
|
3550
3560
|
return map;
|
|
3551
3561
|
}
|
|
3562
|
+
function extractAdditionalTooltipValues(columns, fields, additionalTooltipFields) {
|
|
3563
|
+
var _a;
|
|
3564
|
+
if (!(additionalTooltipFields == null ? void 0 : additionalTooltipFields.length) || !(columns == null ? void 0 : columns.length) || !(fields == null ? void 0 : fields.length)) {
|
|
3565
|
+
return [];
|
|
3566
|
+
}
|
|
3567
|
+
const fieldIndexMap = fields.reduce((acc, field, index) => {
|
|
3568
|
+
acc[field.name] = index;
|
|
3569
|
+
return acc;
|
|
3570
|
+
}, {});
|
|
3571
|
+
const numRows = ((_a = columns[0]) == null ? void 0 : _a.length) || 0;
|
|
3572
|
+
const additionalTooltipValuesArray = [];
|
|
3573
|
+
for (let i = 0; i < numRows; i += 1) {
|
|
3574
|
+
const tooltipObject = {};
|
|
3575
|
+
additionalTooltipFields.forEach((fieldName) => {
|
|
3576
|
+
var _a2, _b;
|
|
3577
|
+
if (fieldName in fieldIndexMap) {
|
|
3578
|
+
const columnIndex = fieldIndexMap[fieldName];
|
|
3579
|
+
tooltipObject[fieldName] = (_b = (_a2 = columns[columnIndex]) == null ? void 0 : _a2[i]) != null ? _b : null;
|
|
3580
|
+
} else {
|
|
3581
|
+
tooltipObject[fieldName] = null;
|
|
3582
|
+
}
|
|
3583
|
+
});
|
|
3584
|
+
additionalTooltipValuesArray.push(tooltipObject);
|
|
3585
|
+
}
|
|
3586
|
+
return additionalTooltipValuesArray;
|
|
3587
|
+
}
|
|
3552
3588
|
var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
|
|
3553
3589
|
const rangeSelectEventHandler = eventHandlers.find(
|
|
3554
3590
|
(eventHandler) => {
|
|
@@ -3579,16 +3615,31 @@ var filterChartDataFromInternalFields = (chartData) => {
|
|
|
3579
3615
|
var convert2DArrayToNumbers = (arr) => {
|
|
3580
3616
|
return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
|
|
3581
3617
|
};
|
|
3618
|
+
var parseAxisValue = (val) => {
|
|
3619
|
+
if (val === void 0 || val === null || val === "auto" || val === "") {
|
|
3620
|
+
return void 0;
|
|
3621
|
+
}
|
|
3622
|
+
const num = typeof val === "number" ? val : Number.parseFloat(val);
|
|
3623
|
+
return Number.isNaN(num) ? void 0 : num;
|
|
3624
|
+
};
|
|
3582
3625
|
var SideLegendWidth = 75;
|
|
3583
|
-
var
|
|
3626
|
+
var SeriesCompareLegendWidth = 200;
|
|
3584
3627
|
var getLegend = (props) => {
|
|
3585
3628
|
const legendPlacement = props == null ? void 0 : props.legendDisplay;
|
|
3629
|
+
const { isSeriesCompare } = props;
|
|
3630
|
+
const commonLegendProps = {
|
|
3631
|
+
center: true,
|
|
3632
|
+
fontSize: 12,
|
|
3633
|
+
largerTiles: true,
|
|
3634
|
+
hideSeriesValue: !isSeriesCompare
|
|
3635
|
+
// Show values if in seriesCompare mode
|
|
3636
|
+
};
|
|
3586
3637
|
switch (legendPlacement) {
|
|
3587
3638
|
case "off":
|
|
3588
3639
|
return false;
|
|
3589
3640
|
case "left":
|
|
3590
3641
|
return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
|
|
3591
|
-
width: SideLegendWidth
|
|
3642
|
+
width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
|
|
3592
3643
|
}, commonLegendProps));
|
|
3593
3644
|
case "bottom":
|
|
3594
3645
|
return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
|
|
@@ -3600,7 +3651,7 @@ var getLegend = (props) => {
|
|
|
3600
3651
|
}, commonLegendProps));
|
|
3601
3652
|
default:
|
|
3602
3653
|
return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
|
|
3603
|
-
width: SideLegendWidth
|
|
3654
|
+
width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
|
|
3604
3655
|
}, commonLegendProps));
|
|
3605
3656
|
}
|
|
3606
3657
|
};
|
|
@@ -3636,22 +3687,25 @@ var ellipsisAxisTitle = (axisTitle, containerSpacing, fontSize = 12) => {
|
|
|
3636
3687
|
const end = axisTitle.slice(-halfChars);
|
|
3637
3688
|
return `${start}...${end}`;
|
|
3638
3689
|
};
|
|
3639
|
-
var
|
|
3690
|
+
var getFieldName2 = (field) => {
|
|
3640
3691
|
const fieldName = typeof field === "object" ? field == null ? void 0 : field.name : field;
|
|
3641
3692
|
return fieldName;
|
|
3642
3693
|
};
|
|
3643
3694
|
var getFieldNames = (fields) => {
|
|
3644
|
-
return fields.map((field) =>
|
|
3695
|
+
return fields.map((field) => getFieldName2(field));
|
|
3645
3696
|
};
|
|
3646
|
-
var getXScaleConfig = (label, xAxisLabelVisibility) => {
|
|
3697
|
+
var getXScaleConfig = (label, xAxisLabelVisibility, xAxisLabelRotation) => {
|
|
3647
3698
|
const xConfig = { x: {} };
|
|
3648
3699
|
xConfig.x.label = label;
|
|
3649
3700
|
if (xAxisLabelVisibility === "hide") {
|
|
3650
3701
|
xConfig.x.hideLabels = true;
|
|
3651
3702
|
}
|
|
3703
|
+
if (xAxisLabelRotation !== void 0) {
|
|
3704
|
+
xConfig.x.labelRotation = xAxisLabelRotation;
|
|
3705
|
+
}
|
|
3652
3706
|
return xConfig;
|
|
3653
3707
|
};
|
|
3654
|
-
var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
|
|
3708
|
+
var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax) => {
|
|
3655
3709
|
const scaleType = yAxisScale != null ? yAxisScale : "linear";
|
|
3656
3710
|
const yConfig = { y: {} };
|
|
3657
3711
|
yConfig.y.label = label;
|
|
@@ -3667,14 +3721,20 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibilit
|
|
|
3667
3721
|
if (yAxisLabelVisibility === "hide") {
|
|
3668
3722
|
yConfig.y.hideLabels = true;
|
|
3669
3723
|
}
|
|
3724
|
+
if (yAxisMin !== void 0 || yAxisMax !== void 0) {
|
|
3725
|
+
yConfig.y.range = (u, dataMin, dataMax) => {
|
|
3726
|
+
const min = yAxisMin != null ? yAxisMin : dataMin;
|
|
3727
|
+
const max = yAxisMax != null ? yAxisMax : dataMax;
|
|
3728
|
+
return [min, max];
|
|
3729
|
+
};
|
|
3730
|
+
}
|
|
3670
3731
|
return yConfig;
|
|
3671
3732
|
};
|
|
3672
|
-
var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
|
|
3733
|
+
var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility, y2AxisMin, y2AxisMax) => {
|
|
3673
3734
|
const y2Config = { y2: {} };
|
|
3674
3735
|
const scaleType = axisScale != null ? axisScale : "linear";
|
|
3675
3736
|
y2Config.y2.label = label;
|
|
3676
3737
|
y2Config.y2.side = "right";
|
|
3677
|
-
y2Config.y2.showGrid = false;
|
|
3678
3738
|
y2Config.y2.type = scaleType;
|
|
3679
3739
|
if (axisAbbreviation !== "none") {
|
|
3680
3740
|
y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
|
|
@@ -3684,9 +3744,16 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
|
|
|
3684
3744
|
if (y2AxisLabelVisibility === "hide") {
|
|
3685
3745
|
y2Config.y2.hideLabels = true;
|
|
3686
3746
|
}
|
|
3747
|
+
if (y2AxisMin !== void 0 || y2AxisMax !== void 0) {
|
|
3748
|
+
y2Config.y2.range = (u, dataMin, dataMax) => {
|
|
3749
|
+
const min = y2AxisMin != null ? y2AxisMin : dataMin;
|
|
3750
|
+
const max = y2AxisMax != null ? y2AxisMax : dataMax;
|
|
3751
|
+
return [min, max];
|
|
3752
|
+
};
|
|
3753
|
+
}
|
|
3687
3754
|
return y2Config;
|
|
3688
3755
|
};
|
|
3689
|
-
var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
|
|
3756
|
+
var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
|
|
3690
3757
|
const seriesConfig = {};
|
|
3691
3758
|
let spanGaps;
|
|
3692
3759
|
let replaceNullsWithZero;
|
|
@@ -3721,12 +3788,45 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
|
|
|
3721
3788
|
if (markerDisplay !== void 0) {
|
|
3722
3789
|
seriesConfig[field].markerDisplay = markerDisplay;
|
|
3723
3790
|
}
|
|
3791
|
+
const fieldDashStyle = (lineDashStylesByField == null ? void 0 : lineDashStylesByField[field]) || lineDashStyle;
|
|
3792
|
+
if (fieldDashStyle) {
|
|
3793
|
+
seriesConfig[field].lineDashStyle = fieldDashStyle;
|
|
3794
|
+
}
|
|
3724
3795
|
if (replaceNullsWithZero !== void 0) {
|
|
3725
3796
|
seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
|
|
3726
3797
|
}
|
|
3727
3798
|
});
|
|
3728
3799
|
return seriesConfig;
|
|
3729
3800
|
};
|
|
3801
|
+
var findRangeIndices = (xData, startValue, endValue) => {
|
|
3802
|
+
let startXIndex = -1;
|
|
3803
|
+
let endXIndex = -1;
|
|
3804
|
+
const xDataEpoch = xData.map((val) => {
|
|
3805
|
+
if (typeof val === "string") {
|
|
3806
|
+
return new Date(val).getTime() / 1e3;
|
|
3807
|
+
}
|
|
3808
|
+
return val;
|
|
3809
|
+
});
|
|
3810
|
+
for (let i = 0; i < xDataEpoch.length; i += 1) {
|
|
3811
|
+
if (xDataEpoch[i] >= startValue) {
|
|
3812
|
+
startXIndex = i;
|
|
3813
|
+
break;
|
|
3814
|
+
}
|
|
3815
|
+
}
|
|
3816
|
+
if (startXIndex === -1 && xDataEpoch.length > 0) {
|
|
3817
|
+
startXIndex = xDataEpoch.length - 1;
|
|
3818
|
+
}
|
|
3819
|
+
for (let i = xDataEpoch.length - 1; i >= 0; i -= 1) {
|
|
3820
|
+
if (xDataEpoch[i] <= endValue) {
|
|
3821
|
+
endXIndex = i;
|
|
3822
|
+
break;
|
|
3823
|
+
}
|
|
3824
|
+
}
|
|
3825
|
+
if (endXIndex === -1 && xDataEpoch.length > 0) {
|
|
3826
|
+
endXIndex = 0;
|
|
3827
|
+
}
|
|
3828
|
+
return { startXIndex, endXIndex };
|
|
3829
|
+
};
|
|
3730
3830
|
|
|
3731
3831
|
// src/common/TimeSeriesChartWrapper.tsx
|
|
3732
3832
|
var TimeSeriesChartContainer = styled_components_default.div`
|
|
@@ -3737,38 +3837,123 @@ var TimeSeriesChartContainer = styled_components_default.div`
|
|
|
3737
3837
|
position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
|
|
3738
3838
|
}
|
|
3739
3839
|
`;
|
|
3740
|
-
var
|
|
3840
|
+
var appendTrellisToPayload2 = (payload, trellisKey, trellisSplitBy) => {
|
|
3841
|
+
const result = __spreadValues({}, payload);
|
|
3842
|
+
if (trellisSplitBy) {
|
|
3843
|
+
result["trellis.name"] = trellisSplitBy;
|
|
3844
|
+
}
|
|
3845
|
+
if (trellisKey) {
|
|
3846
|
+
result["trellis.value"] = trellisKey;
|
|
3847
|
+
}
|
|
3848
|
+
return result;
|
|
3849
|
+
};
|
|
3850
|
+
var hasMouseoverPayloadChanged = (currentPayload, previousPayload) => {
|
|
3851
|
+
if (!previousPayload) {
|
|
3852
|
+
return true;
|
|
3853
|
+
}
|
|
3854
|
+
if (currentPayload.index !== previousPayload.index) {
|
|
3855
|
+
return true;
|
|
3856
|
+
}
|
|
3857
|
+
if (currentPayload.seriesIndex !== previousPayload.seriesIndex) {
|
|
3858
|
+
return true;
|
|
3859
|
+
}
|
|
3860
|
+
if (currentPayload["trellis.name"] !== previousPayload["trellis.name"]) {
|
|
3861
|
+
return true;
|
|
3862
|
+
}
|
|
3863
|
+
if (currentPayload["trellis.value"] !== previousPayload["trellis.value"]) {
|
|
3864
|
+
return true;
|
|
3865
|
+
}
|
|
3866
|
+
return false;
|
|
3867
|
+
};
|
|
3868
|
+
var handleClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
|
|
3741
3869
|
const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
|
|
3742
3870
|
name: chartEvent.seriesKey
|
|
3743
3871
|
});
|
|
3744
3872
|
delete payload.seriesKey;
|
|
3745
3873
|
if (chartEvent.rowContext) {
|
|
3746
|
-
Object.
|
|
3747
|
-
payload
|
|
3748
|
-
|
|
3874
|
+
Object.assign(
|
|
3875
|
+
payload,
|
|
3876
|
+
Object.keys(chartEvent.rowContext).reduce((acc, fieldName) => {
|
|
3877
|
+
acc[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
|
|
3878
|
+
return acc;
|
|
3879
|
+
}, {})
|
|
3880
|
+
);
|
|
3749
3881
|
}
|
|
3882
|
+
const updatedPayload = appendTrellisToPayload2(payload, trellisKey, trellisSplitBy);
|
|
3750
3883
|
if (onClick) {
|
|
3751
3884
|
onClick({
|
|
3752
3885
|
type: "point.click",
|
|
3753
3886
|
originalEvent: chartEvent,
|
|
3754
|
-
payload
|
|
3887
|
+
payload: updatedPayload
|
|
3755
3888
|
});
|
|
3756
3889
|
}
|
|
3757
3890
|
};
|
|
3758
|
-
var handleLegendClick = (chartEvent, onClick) => {
|
|
3891
|
+
var handleLegendClick = (chartEvent, onClick, trellisKey, trellisSplitBy) => {
|
|
3759
3892
|
const payload = {
|
|
3760
3893
|
name: chartEvent
|
|
3761
3894
|
};
|
|
3895
|
+
const updatedPayload = appendTrellisToPayload2(payload, trellisKey, trellisSplitBy);
|
|
3762
3896
|
if (onClick) {
|
|
3763
3897
|
onClick({
|
|
3764
3898
|
type: "legend.click",
|
|
3765
3899
|
originalEvent: chartEvent,
|
|
3766
|
-
payload
|
|
3900
|
+
payload: updatedPayload
|
|
3901
|
+
});
|
|
3902
|
+
}
|
|
3903
|
+
};
|
|
3904
|
+
var handleRangeSelection = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
|
|
3905
|
+
var _a;
|
|
3906
|
+
if (!rangeEvent) {
|
|
3907
|
+
return;
|
|
3908
|
+
}
|
|
3909
|
+
const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
|
|
3910
|
+
const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
|
|
3911
|
+
const payload = {
|
|
3912
|
+
startXIndex,
|
|
3913
|
+
startXValue: rangeEvent.start,
|
|
3914
|
+
endXIndex,
|
|
3915
|
+
endXValue: rangeEvent.end
|
|
3916
|
+
};
|
|
3917
|
+
const updatedPayload = appendTrellisToPayload2(payload, trellisKey, trellisSplitBy);
|
|
3918
|
+
if (onSelect) {
|
|
3919
|
+
onSelect({
|
|
3920
|
+
type: "range.selectBeforeZoom",
|
|
3921
|
+
originalEvent: rangeEvent,
|
|
3922
|
+
payload: updatedPayload
|
|
3767
3923
|
});
|
|
3768
3924
|
}
|
|
3769
3925
|
};
|
|
3926
|
+
var handleRangeZoom = (rangeEvent, onSelect, chartData, trellisKey, trellisSplitBy) => {
|
|
3927
|
+
var _a;
|
|
3928
|
+
const xData = ((_a = chartData == null ? void 0 : chartData.columns) == null ? void 0 : _a[0]) || [];
|
|
3929
|
+
const { startXIndex, endXIndex } = findRangeIndices(xData, rangeEvent.start, rangeEvent.end);
|
|
3930
|
+
const payload = {
|
|
3931
|
+
startXIndex,
|
|
3932
|
+
startXValue: rangeEvent.start,
|
|
3933
|
+
endXIndex,
|
|
3934
|
+
endXValue: rangeEvent.end
|
|
3935
|
+
};
|
|
3936
|
+
const updatedPayload = appendTrellisToPayload2(payload, trellisKey, trellisSplitBy);
|
|
3937
|
+
if (onSelect) {
|
|
3938
|
+
onSelect({
|
|
3939
|
+
type: "range.select",
|
|
3940
|
+
originalEvent: rangeEvent,
|
|
3941
|
+
payload: updatedPayload
|
|
3942
|
+
});
|
|
3943
|
+
}
|
|
3944
|
+
};
|
|
3945
|
+
var parseArrayOption = (value) => {
|
|
3946
|
+
if (Array.isArray(value)) {
|
|
3947
|
+
return value;
|
|
3948
|
+
}
|
|
3949
|
+
if (value) {
|
|
3950
|
+
return JSON.parse(value);
|
|
3951
|
+
}
|
|
3952
|
+
return void 0;
|
|
3953
|
+
};
|
|
3770
3954
|
var TimeSeriesChartWrapper = (props) => {
|
|
3771
|
-
|
|
3955
|
+
var _b, _c, _d;
|
|
3956
|
+
const _a = props, {
|
|
3772
3957
|
width,
|
|
3773
3958
|
height,
|
|
3774
3959
|
chartData,
|
|
@@ -3781,12 +3966,49 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3781
3966
|
markerDisplay,
|
|
3782
3967
|
onClick,
|
|
3783
3968
|
onPointMouseOver,
|
|
3784
|
-
onPointMouseOut
|
|
3785
|
-
|
|
3786
|
-
|
|
3969
|
+
onPointMouseOut,
|
|
3970
|
+
onSelect,
|
|
3971
|
+
splitByLayout,
|
|
3972
|
+
trellisKey,
|
|
3973
|
+
trellisSplitBy,
|
|
3787
3974
|
backgroundColor,
|
|
3975
|
+
defaultFontColor,
|
|
3976
|
+
additionalTooltipValues,
|
|
3977
|
+
showYAxisWithZero: showYAxisWithZeroFromProps,
|
|
3978
|
+
showY2AxisWithZero: showY2AxisWithZeroFromProps
|
|
3979
|
+
} = _a, otherOptions = __objRest(_a, [
|
|
3980
|
+
"width",
|
|
3981
|
+
"height",
|
|
3982
|
+
"chartData",
|
|
3983
|
+
"options",
|
|
3984
|
+
"userLocale",
|
|
3985
|
+
"annotationX",
|
|
3986
|
+
"annotationLabel",
|
|
3987
|
+
"annotationColor",
|
|
3988
|
+
"legendDisplay",
|
|
3989
|
+
"markerDisplay",
|
|
3990
|
+
"onClick",
|
|
3991
|
+
"onPointMouseOver",
|
|
3992
|
+
"onPointMouseOut",
|
|
3993
|
+
"onSelect",
|
|
3994
|
+
"splitByLayout",
|
|
3995
|
+
"trellisKey",
|
|
3996
|
+
"trellisSplitBy",
|
|
3997
|
+
"backgroundColor",
|
|
3998
|
+
"defaultFontColor",
|
|
3999
|
+
"additionalTooltipValues",
|
|
4000
|
+
// Extract showYAxisWithZero directly from props for accelerated render mode
|
|
4001
|
+
"showYAxisWithZero",
|
|
4002
|
+
"showY2AxisWithZero"
|
|
4003
|
+
]);
|
|
4004
|
+
const { eventHandlers, xField: xFieldFromProps } = otherOptions;
|
|
4005
|
+
const trellisEnabled = useTrellisEnabled(splitByLayout);
|
|
4006
|
+
const {
|
|
4007
|
+
backgroundColor: bgColorFromOptions,
|
|
3788
4008
|
seriesColors: seriesColorsStr,
|
|
3789
4009
|
fieldColors,
|
|
4010
|
+
legendLabels: legendLabelsStr,
|
|
4011
|
+
legendMode,
|
|
3790
4012
|
"axisTitleX.text": xAxisTitleText,
|
|
3791
4013
|
"axisTitleY.text": yAxisTitleText,
|
|
3792
4014
|
"axisTitleY2.text": y2AxisTitleText,
|
|
@@ -3794,8 +4016,11 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3794
4016
|
"axisTitleY.visibility": yAxisTitleVisibility,
|
|
3795
4017
|
"axisTitleY2.visibility": y2AxisTitleVisibility,
|
|
3796
4018
|
"axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
|
|
4019
|
+
"axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
|
|
3797
4020
|
"axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
|
|
4021
|
+
"axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
|
|
3798
4022
|
"axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
|
|
4023
|
+
"axisLabelsY2.majorUnit": y2AxisMajorUnitFromSimpleXML,
|
|
3799
4024
|
"axisY.abbreviation": yAxisAbbreviation,
|
|
3800
4025
|
"axisY.scale": yAxisScale,
|
|
3801
4026
|
"axisY2.abbreviation": y2AxisAbbreviation,
|
|
@@ -3805,10 +4030,63 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3805
4030
|
"axisLabelsY2.integerUnits": y2IntegerUnits,
|
|
3806
4031
|
"chart.overlayFields": overlayFieldsStr,
|
|
3807
4032
|
"chart.nullValueMode": nullValueMode,
|
|
3808
|
-
|
|
4033
|
+
"chart.showDataLabels": showDataLabels,
|
|
4034
|
+
lineWidth,
|
|
4035
|
+
lineDashStyle,
|
|
4036
|
+
fieldDashStyles: lineDashStylesByFieldStr,
|
|
4037
|
+
yAxisMin: yAxisMinRaw,
|
|
4038
|
+
yAxisMax: yAxisMaxRaw,
|
|
4039
|
+
y2AxisMin: y2AxisMinRaw,
|
|
4040
|
+
y2AxisMax: y2AxisMaxRaw,
|
|
4041
|
+
showXMajorGridLines,
|
|
4042
|
+
showYMajorGridLines,
|
|
4043
|
+
showY2MajorGridLines,
|
|
4044
|
+
showYMinorGridLines,
|
|
4045
|
+
showY2MinorGridLines,
|
|
4046
|
+
showLineSmoothing,
|
|
4047
|
+
yAxisMajorTickVisibility,
|
|
4048
|
+
y2AxisMajorTickVisibility,
|
|
4049
|
+
yAxisMajorTickSize,
|
|
4050
|
+
y2AxisMajorTickSize,
|
|
4051
|
+
yAxisMajorTickInterval,
|
|
4052
|
+
y2AxisMajorTickInterval,
|
|
4053
|
+
yAxisMinorTickVisibility,
|
|
4054
|
+
y2AxisMinorTickVisibility,
|
|
4055
|
+
yAxisMinorTickSize,
|
|
4056
|
+
y2AxisMinorTickSize,
|
|
4057
|
+
showYAxisWithZero: showYAxisWithZeroFromOptions,
|
|
4058
|
+
showY2AxisWithZero: showY2AxisWithZeroFromOptions
|
|
3809
4059
|
} = options;
|
|
4060
|
+
const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
|
|
4061
|
+
const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
|
|
4062
|
+
const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
|
|
4063
|
+
const showYMajorTicks = yAxisMajorTickVisibility === "show";
|
|
4064
|
+
const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
|
|
4065
|
+
const showYMinorTicks = yAxisMinorTickVisibility === "show";
|
|
4066
|
+
const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
|
|
4067
|
+
const yAxisMin = parseAxisValue(yAxisMinRaw);
|
|
4068
|
+
const yAxisMax = parseAxisValue(yAxisMaxRaw);
|
|
4069
|
+
const y2AxisMin = parseAxisValue(y2AxisMinRaw);
|
|
4070
|
+
const y2AxisMax = parseAxisValue(y2AxisMaxRaw);
|
|
4071
|
+
const parseTickInterval = (simpleXMLValue, canvasValue) => {
|
|
4072
|
+
if (simpleXMLValue) return Number(simpleXMLValue);
|
|
4073
|
+
if (canvasValue) return Number(canvasValue);
|
|
4074
|
+
return void 0;
|
|
4075
|
+
};
|
|
4076
|
+
const yAxisMajorTickIntervalNum = parseTickInterval(yAxisMajorUnitFromSimpleXML, yAxisMajorTickInterval);
|
|
4077
|
+
const y2AxisMajorTickIntervalNum = parseTickInterval(
|
|
4078
|
+
y2AxisMajorUnitFromSimpleXML,
|
|
4079
|
+
y2AxisMajorTickInterval
|
|
4080
|
+
);
|
|
4081
|
+
const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
|
|
4082
|
+
const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
|
|
4083
|
+
const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
|
|
4084
|
+
const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
|
|
3810
4085
|
const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
|
|
3811
4086
|
const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
|
|
4087
|
+
const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
|
|
4088
|
+
const legendLabels = parseArrayOption(legendLabelsStr);
|
|
4089
|
+
const bgColor = backgroundColor || bgColorFromOptions;
|
|
3812
4090
|
const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
|
|
3813
4091
|
const [containerHeight, setContainerHeight] = react_exports.useState(Number(props.height));
|
|
3814
4092
|
const cachedHandleResize = react_exports.useCallback((w, h) => {
|
|
@@ -3819,31 +4097,64 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3819
4097
|
fields: chartData.fields,
|
|
3820
4098
|
columns: chartData.seriesList
|
|
3821
4099
|
});
|
|
3822
|
-
const xField =
|
|
4100
|
+
const xField = getFieldName2(filteredChartData.fields[0]);
|
|
3823
4101
|
const yFields = getFieldNames(
|
|
3824
4102
|
filteredChartData.fields.length > 1 ? filteredChartData.fields.slice(1) : []
|
|
3825
4103
|
);
|
|
3826
|
-
const y2Fields =
|
|
3827
|
-
|
|
4104
|
+
const y2Fields = (0, react_exports.useMemo)(
|
|
4105
|
+
() => y2FieldsStr ? y2FieldsStr.split(",").map((f) => f.trim()) : [],
|
|
4106
|
+
[y2FieldsStr]
|
|
4107
|
+
);
|
|
4108
|
+
const overlayFields = (0, react_exports.useMemo)(
|
|
4109
|
+
() => overlayFieldsStr ? overlayFieldsStr.split(",").map((f) => f.trim()) : [],
|
|
4110
|
+
[overlayFieldsStr]
|
|
4111
|
+
);
|
|
3828
4112
|
let xAxisTitle = getComputedAxisTitles(xAxisTitleText, [xField], xAxisTitleVisibility);
|
|
3829
4113
|
xAxisTitle = ellipsisAxisTitle(xAxisTitle, containerWidth);
|
|
3830
|
-
|
|
4114
|
+
const yFieldsForTitle = y2Enabled ? yFields.filter((field) => !y2Fields.includes(field)) : yFields;
|
|
4115
|
+
let yAxisTitle = getComputedAxisTitles(yAxisTitleText, yFieldsForTitle, yAxisTitleVisibility);
|
|
3831
4116
|
yAxisTitle = ellipsisAxisTitle(yAxisTitle, containerHeight);
|
|
3832
4117
|
const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
|
|
3833
4118
|
let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
|
|
3834
4119
|
y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
|
|
3835
|
-
const xScaleConfig =
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3845
|
-
|
|
3846
|
-
|
|
4120
|
+
const xScaleConfig = (0, react_exports.useMemo)(
|
|
4121
|
+
() => getXScaleConfig(xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation),
|
|
4122
|
+
[xAxisTitle, xAxisLabelVisibility, xAxisLabelRotation]
|
|
4123
|
+
);
|
|
4124
|
+
const yScaleConfig = (0, react_exports.useMemo)(
|
|
4125
|
+
() => getYScaleConfig(
|
|
4126
|
+
yAxisTitle,
|
|
4127
|
+
yAxisAbbreviation,
|
|
4128
|
+
yAxisScale,
|
|
4129
|
+
yAxisLabelVisibility,
|
|
4130
|
+
yAxisMin,
|
|
4131
|
+
yAxisMax
|
|
4132
|
+
),
|
|
4133
|
+
[yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility, yAxisMin, yAxisMax]
|
|
4134
|
+
);
|
|
4135
|
+
const y2ScaleConfig = (0, react_exports.useMemo)(() => {
|
|
4136
|
+
if (y2Enabled) {
|
|
4137
|
+
return getY2ScaleConfig(
|
|
4138
|
+
y2AxisTitle,
|
|
4139
|
+
y2AxisAbbreviation,
|
|
4140
|
+
y2AxisScale,
|
|
4141
|
+
y2IntegerUnits,
|
|
4142
|
+
y2AxisLabelVisibility,
|
|
4143
|
+
y2AxisMin,
|
|
4144
|
+
y2AxisMax
|
|
4145
|
+
);
|
|
4146
|
+
}
|
|
4147
|
+
return {};
|
|
4148
|
+
}, [
|
|
4149
|
+
y2Enabled,
|
|
4150
|
+
y2AxisTitle,
|
|
4151
|
+
y2AxisAbbreviation,
|
|
4152
|
+
y2AxisScale,
|
|
4153
|
+
y2IntegerUnits,
|
|
4154
|
+
y2AxisLabelVisibility,
|
|
4155
|
+
y2AxisMin,
|
|
4156
|
+
y2AxisMax
|
|
4157
|
+
]);
|
|
3847
4158
|
const uplotContainerElement = (0, react_exports.useRef)(null);
|
|
3848
4159
|
const seriesDataFormatted = [
|
|
3849
4160
|
filteredChartData.columns[0],
|
|
@@ -3859,9 +4170,21 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3859
4170
|
overlayFields,
|
|
3860
4171
|
y2Enabled,
|
|
3861
4172
|
nullValueMode,
|
|
3862
|
-
markerDisplay
|
|
4173
|
+
markerDisplay,
|
|
4174
|
+
lineDashStyle,
|
|
4175
|
+
lineDashStylesByField
|
|
3863
4176
|
),
|
|
3864
|
-
[
|
|
4177
|
+
[
|
|
4178
|
+
yFields,
|
|
4179
|
+
y2Fields,
|
|
4180
|
+
lineWidth,
|
|
4181
|
+
overlayFields,
|
|
4182
|
+
y2Enabled,
|
|
4183
|
+
nullValueMode,
|
|
4184
|
+
markerDisplay,
|
|
4185
|
+
lineDashStyle,
|
|
4186
|
+
lineDashStylesByField
|
|
4187
|
+
]
|
|
3865
4188
|
);
|
|
3866
4189
|
const chartingEventAnnotations = (0, react_exports.useMemo)(
|
|
3867
4190
|
() => getAnnotationsForCanvas({
|
|
@@ -3875,25 +4198,54 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3875
4198
|
() => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
|
|
3876
4199
|
[xScaleConfig, yScaleConfig, y2ScaleConfig]
|
|
3877
4200
|
);
|
|
3878
|
-
const legend = (0, react_exports.useMemo)(
|
|
4201
|
+
const legend = (0, react_exports.useMemo)(
|
|
4202
|
+
() => getLegend({ legendDisplay, isSeriesCompare: legendMode === "seriesCompare" }),
|
|
4203
|
+
[legendDisplay, legendMode]
|
|
4204
|
+
);
|
|
3879
4205
|
const handleChartClick = react_exports.useCallback(
|
|
3880
4206
|
(event) => {
|
|
3881
4207
|
if (onClick) {
|
|
3882
|
-
handleClick(event, onClick);
|
|
4208
|
+
handleClick(event, onClick, trellisKey, trellisSplitBy);
|
|
3883
4209
|
}
|
|
3884
4210
|
},
|
|
3885
|
-
[onClick]
|
|
4211
|
+
[onClick, trellisKey, trellisSplitBy]
|
|
3886
4212
|
);
|
|
3887
4213
|
const handleChartLegendClick = react_exports.useCallback(
|
|
3888
4214
|
(event) => {
|
|
3889
4215
|
if (onClick) {
|
|
3890
|
-
handleLegendClick(event, onClick);
|
|
4216
|
+
handleLegendClick(event, onClick, trellisKey, trellisSplitBy);
|
|
4217
|
+
}
|
|
4218
|
+
},
|
|
4219
|
+
[onClick, trellisKey, trellisSplitBy]
|
|
4220
|
+
);
|
|
4221
|
+
const handleChartRangeSelection = react_exports.useCallback(
|
|
4222
|
+
(range2) => {
|
|
4223
|
+
if (onSelect) {
|
|
4224
|
+
handleRangeSelection(range2, onSelect, chartData, trellisKey, trellisSplitBy);
|
|
3891
4225
|
}
|
|
3892
4226
|
},
|
|
3893
|
-
[
|
|
4227
|
+
[onSelect, chartData, trellisKey, trellisSplitBy]
|
|
4228
|
+
);
|
|
4229
|
+
const handleChartRangeZoom = react_exports.useCallback(
|
|
4230
|
+
(range2) => {
|
|
4231
|
+
if (onSelect) {
|
|
4232
|
+
handleRangeZoom(range2, onSelect, chartData, trellisKey, trellisSplitBy);
|
|
4233
|
+
}
|
|
4234
|
+
},
|
|
4235
|
+
[onSelect, chartData, trellisKey, trellisSplitBy]
|
|
4236
|
+
);
|
|
4237
|
+
const xFieldToUse = xFieldFromProps || xField;
|
|
4238
|
+
const enableSearchZoom = react_exports.useMemo(
|
|
4239
|
+
() => shouldEnableSearchZoom(eventHandlers, xFieldToUse),
|
|
4240
|
+
[eventHandlers, xFieldToUse]
|
|
3894
4241
|
);
|
|
3895
4242
|
const lastPayloadRef = react_exports.useRef(null);
|
|
3896
4243
|
const lastOriginalEventRef = react_exports.useRef(null);
|
|
4244
|
+
const previousMouseoverPayloadRef = react_exports.useRef(null);
|
|
4245
|
+
const additionalTooltipValuesRef = react_exports.useRef(additionalTooltipValues);
|
|
4246
|
+
react_exports.useEffect(() => {
|
|
4247
|
+
additionalTooltipValuesRef.current = additionalTooltipValues;
|
|
4248
|
+
}, [additionalTooltipValues]);
|
|
3897
4249
|
const handleChartCrosshairChange = react_exports.useCallback(
|
|
3898
4250
|
(event) => {
|
|
3899
4251
|
if (onPointMouseOver || onPointMouseOut) {
|
|
@@ -3905,6 +4257,7 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3905
4257
|
payload: lastPayloadRef.current
|
|
3906
4258
|
});
|
|
3907
4259
|
}
|
|
4260
|
+
previousMouseoverPayloadRef.current = null;
|
|
3908
4261
|
return;
|
|
3909
4262
|
}
|
|
3910
4263
|
const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
|
|
@@ -3912,25 +4265,36 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3912
4265
|
});
|
|
3913
4266
|
delete payload.seriesKey;
|
|
3914
4267
|
if (event.rowContext) {
|
|
3915
|
-
Object.
|
|
3916
|
-
payload
|
|
3917
|
-
|
|
4268
|
+
Object.assign(
|
|
4269
|
+
payload,
|
|
4270
|
+
Object.keys(event.rowContext).reduce((acc, fieldName) => {
|
|
4271
|
+
acc[`row.${fieldName}.value`] = event.rowContext[fieldName];
|
|
4272
|
+
return acc;
|
|
4273
|
+
}, {})
|
|
4274
|
+
);
|
|
4275
|
+
}
|
|
4276
|
+
const updatedPayload = appendTrellisToPayload2(payload, trellisKey, trellisSplitBy);
|
|
4277
|
+
if (!hasMouseoverPayloadChanged(updatedPayload, previousMouseoverPayloadRef.current)) {
|
|
4278
|
+
return;
|
|
3918
4279
|
}
|
|
3919
|
-
lastPayloadRef.current =
|
|
4280
|
+
lastPayloadRef.current = updatedPayload;
|
|
3920
4281
|
lastOriginalEventRef.current = event;
|
|
4282
|
+
previousMouseoverPayloadRef.current = __spreadValues({}, updatedPayload);
|
|
3921
4283
|
if (onPointMouseOver) {
|
|
3922
4284
|
onPointMouseOver({
|
|
3923
4285
|
type: "point.mouseover",
|
|
3924
4286
|
originalEvent: event,
|
|
3925
|
-
payload
|
|
4287
|
+
payload: updatedPayload
|
|
3926
4288
|
});
|
|
3927
4289
|
}
|
|
3928
4290
|
}
|
|
3929
4291
|
},
|
|
3930
|
-
[onPointMouseOver, onPointMouseOut]
|
|
4292
|
+
[onPointMouseOver, onPointMouseOut, trellisKey, trellisSplitBy]
|
|
3931
4293
|
);
|
|
3932
|
-
const
|
|
3933
|
-
|
|
4294
|
+
const dataKey = `${(_b = chartData.columns[0]) == null ? void 0 : _b[0]}-${(_c = chartData.columns[0]) == null ? void 0 : _c[chartData.columns[0].length - 1]}-${(_d = chartData.columns[0]) == null ? void 0 : _d.length}`;
|
|
4295
|
+
const memoizedChart = (0, react_exports.useMemo)(() => {
|
|
4296
|
+
const computedOnRangeZoom = onSelect ? handleChartRangeZoom : void 0;
|
|
4297
|
+
return /* @__PURE__ */ react_exports.createElement(visualization_canvas_exports.RangeSelectionProvider, { key: dataKey }, /* @__PURE__ */ react_exports.createElement(
|
|
3934
4298
|
visualization_canvas_exports.TimeSeriesChart,
|
|
3935
4299
|
{
|
|
3936
4300
|
data: chartData,
|
|
@@ -3940,49 +4304,107 @@ var TimeSeriesChartWrapper = (props) => {
|
|
|
3940
4304
|
seriesColorsByField,
|
|
3941
4305
|
seriesConfig: seriesOverrides,
|
|
3942
4306
|
legend,
|
|
4307
|
+
legendLabels,
|
|
4308
|
+
isSeriesCompare: legendMode === "seriesCompare",
|
|
4309
|
+
maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
|
|
3943
4310
|
scaleConfig,
|
|
3944
4311
|
timestampFormat: "expanded",
|
|
3945
4312
|
onCrosshairClick: onClick ? handleChartClick : void 0,
|
|
3946
4313
|
onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
|
|
3947
4314
|
onSeriesClick: onClick ? handleChartLegendClick : void 0,
|
|
4315
|
+
onRangeSelection: handleChartRangeSelection,
|
|
4316
|
+
onRangeZoom: computedOnRangeZoom,
|
|
4317
|
+
serverSideZoom: enableSearchZoom,
|
|
3948
4318
|
userLocale,
|
|
3949
4319
|
events: chartingEventAnnotations,
|
|
3950
|
-
eventsConfig: { renderer: triangleEventAnnotationRenderer }
|
|
4320
|
+
eventsConfig: { renderer: triangleEventAnnotationRenderer },
|
|
4321
|
+
additionalTooltipValuesRef,
|
|
4322
|
+
showXMajorGridLines,
|
|
4323
|
+
showYMajorGridLines,
|
|
4324
|
+
showY2MajorGridLines,
|
|
4325
|
+
showYMinorGridLines,
|
|
4326
|
+
showY2MinorGridLines,
|
|
4327
|
+
showLineSmoothing,
|
|
4328
|
+
dataValuesDisplay,
|
|
4329
|
+
showYMajorTicks,
|
|
4330
|
+
showY2MajorTicks,
|
|
4331
|
+
yAxisMajorTickSize: yAxisMajorTickSizeNum,
|
|
4332
|
+
y2AxisMajorTickSize: y2AxisMajorTickSizeNum,
|
|
4333
|
+
yAxisMajorTickInterval: yAxisMajorTickIntervalNum,
|
|
4334
|
+
y2AxisMajorTickInterval: y2AxisMajorTickIntervalNum,
|
|
4335
|
+
showYMinorTicks,
|
|
4336
|
+
showY2MinorTicks,
|
|
4337
|
+
yAxisMinorTickSize: yAxisMinorTickSizeNum,
|
|
4338
|
+
y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
|
|
4339
|
+
showYAxisWithZero,
|
|
4340
|
+
showY2AxisWithZero
|
|
3951
4341
|
}
|
|
3952
|
-
)
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
3962
|
-
|
|
3963
|
-
|
|
3964
|
-
|
|
3965
|
-
|
|
3966
|
-
|
|
3967
|
-
|
|
3968
|
-
|
|
3969
|
-
|
|
3970
|
-
|
|
3971
|
-
|
|
4342
|
+
));
|
|
4343
|
+
}, [
|
|
4344
|
+
onSelect,
|
|
4345
|
+
handleChartRangeZoom,
|
|
4346
|
+
dataKey,
|
|
4347
|
+
chartData,
|
|
4348
|
+
containerWidth,
|
|
4349
|
+
containerHeight,
|
|
4350
|
+
seriesColors,
|
|
4351
|
+
seriesColorsByField,
|
|
4352
|
+
seriesOverrides,
|
|
4353
|
+
legend,
|
|
4354
|
+
legendLabels,
|
|
4355
|
+
scaleConfig,
|
|
4356
|
+
onClick,
|
|
4357
|
+
handleChartClick,
|
|
4358
|
+
onPointMouseOver,
|
|
4359
|
+
onPointMouseOut,
|
|
4360
|
+
handleChartCrosshairChange,
|
|
4361
|
+
handleChartLegendClick,
|
|
4362
|
+
handleChartRangeSelection,
|
|
4363
|
+
enableSearchZoom,
|
|
4364
|
+
userLocale,
|
|
4365
|
+
chartingEventAnnotations,
|
|
4366
|
+
showXMajorGridLines,
|
|
4367
|
+
showYMajorGridLines,
|
|
4368
|
+
showY2MajorGridLines,
|
|
4369
|
+
showYMinorGridLines,
|
|
4370
|
+
showY2MinorGridLines,
|
|
4371
|
+
showLineSmoothing,
|
|
4372
|
+
dataValuesDisplay,
|
|
4373
|
+
showYMajorTicks,
|
|
4374
|
+
showY2MajorTicks,
|
|
4375
|
+
yAxisMajorTickSizeNum,
|
|
4376
|
+
y2AxisMajorTickSizeNum,
|
|
4377
|
+
yAxisMajorTickIntervalNum,
|
|
4378
|
+
y2AxisMajorTickIntervalNum,
|
|
4379
|
+
showYMinorTicks,
|
|
4380
|
+
showY2MinorTicks,
|
|
4381
|
+
yAxisMinorTickSizeNum,
|
|
4382
|
+
y2AxisMinorTickSizeNum,
|
|
4383
|
+
showYAxisWithZero,
|
|
4384
|
+
showY2AxisWithZero,
|
|
4385
|
+
legendMode
|
|
4386
|
+
]);
|
|
3972
4387
|
const memoizedVisualization = (0, react_exports.useMemo)(() => {
|
|
3973
|
-
return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
|
|
3974
|
-
}, [
|
|
3975
|
-
return /* @__PURE__ */ react_exports.createElement(
|
|
4388
|
+
return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
|
|
4389
|
+
}, [bgColor, memoizedChart]);
|
|
4390
|
+
return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, trellisEnabled && /* @__PURE__ */ react_exports.createElement(
|
|
4391
|
+
TrellisTitle,
|
|
4392
|
+
{
|
|
4393
|
+
trellisKey,
|
|
4394
|
+
backgroundColor: bgColor,
|
|
4395
|
+
fontColor: defaultFontColor
|
|
4396
|
+
}
|
|
4397
|
+
), /* @__PURE__ */ react_exports.createElement(
|
|
3976
4398
|
TimeSeriesChartContainer,
|
|
3977
4399
|
{
|
|
3978
|
-
height,
|
|
4400
|
+
height: trellisEnabled ? Number(height) - TRELLIS_TITLE_HEIGHT : height,
|
|
3979
4401
|
width,
|
|
3980
4402
|
ref: uplotContainerElement,
|
|
3981
4403
|
"data-test": "timeseries-chart-wrapper"
|
|
3982
4404
|
},
|
|
3983
4405
|
/* @__PURE__ */ react_exports.createElement(SizeAwareWrapper_default, { width, height, onResize: cachedHandleResize }),
|
|
3984
4406
|
memoizedVisualization
|
|
3985
|
-
);
|
|
4407
|
+
));
|
|
3986
4408
|
};
|
|
3987
4409
|
var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
|
|
3988
4410
|
|
|
@@ -4293,9 +4715,46 @@ var simpleXMLOptions_default = "default" in defaultImport37 ? defaultImport37.de
|
|
|
4293
4715
|
// src/Line/lineUtils.ts
|
|
4294
4716
|
var transformOptions = (originalOptions) => {
|
|
4295
4717
|
const returnOptions = (0, propUtils_exports.adjustOptionsToSchema)(originalOptions, config_default.optionsSchema);
|
|
4296
|
-
|
|
4718
|
+
const convertedOptions = convertToLineSCProperties(returnOptions);
|
|
4719
|
+
const transformed = __spreadProps(__spreadValues({}, (0, simpleXMLOptions_exports.getSimpleXMLOptionsForProps)(convertedOptions)), {
|
|
4297
4720
|
chart: "line"
|
|
4298
4721
|
});
|
|
4722
|
+
const canvasSpecificProps = [
|
|
4723
|
+
"yAxisMin",
|
|
4724
|
+
"yAxisMax",
|
|
4725
|
+
"y2AxisMin",
|
|
4726
|
+
"y2AxisMax",
|
|
4727
|
+
"showXMajorGridLines",
|
|
4728
|
+
"showYMajorGridLines",
|
|
4729
|
+
"showY2MajorGridLines",
|
|
4730
|
+
"showYMinorGridLines",
|
|
4731
|
+
"showY2MinorGridLines",
|
|
4732
|
+
"showLineSmoothing",
|
|
4733
|
+
"yAxisMajorTickVisibility",
|
|
4734
|
+
"y2AxisMajorTickVisibility",
|
|
4735
|
+
"yAxisMajorTickSize",
|
|
4736
|
+
"y2AxisMajorTickSize",
|
|
4737
|
+
"yAxisMinorTickVisibility",
|
|
4738
|
+
"y2AxisMinorTickVisibility",
|
|
4739
|
+
"yAxisMinorTickSize",
|
|
4740
|
+
"y2AxisMinorTickSize",
|
|
4741
|
+
"legendMode"
|
|
4742
|
+
// Note: yAxisMajorTickInterval, y2AxisMajorTickInterval, showYAxisWithZero, and showY2AxisWithZero
|
|
4743
|
+
// are NOT canvas-specific. They're mapped to SimpleXML props in lineOptionsSCMapping
|
|
4744
|
+
];
|
|
4745
|
+
const preservedProps = canvasSpecificProps.reduce(
|
|
4746
|
+
(acc, prop) => {
|
|
4747
|
+
if (returnOptions[prop] !== void 0) {
|
|
4748
|
+
acc[prop] = returnOptions[prop];
|
|
4749
|
+
}
|
|
4750
|
+
return acc;
|
|
4751
|
+
},
|
|
4752
|
+
{}
|
|
4753
|
+
);
|
|
4754
|
+
if (convertedOptions.legendLabels !== void 0) {
|
|
4755
|
+
preservedProps.legendLabels = convertedOptions.legendLabels;
|
|
4756
|
+
}
|
|
4757
|
+
return __spreadValues(__spreadValues({}, transformed), preservedProps);
|
|
4299
4758
|
};
|
|
4300
4759
|
var convertMarkerOptions = (originalOptions, lineOptionValuesSCMapping) => {
|
|
4301
4760
|
const originalOptionsWithAdditionalProps = originalOptions;
|
|
@@ -4630,6 +5089,37 @@ var withTrellis = (Viz) => {
|
|
|
4630
5089
|
var withTrellis_default = withTrellis;
|
|
4631
5090
|
|
|
4632
5091
|
// src/Line/Line.tsx
|
|
5092
|
+
var additionalTooltipValuesCache = {
|
|
5093
|
+
columns: null,
|
|
5094
|
+
fields: null,
|
|
5095
|
+
additionalTooltipFields: void 0,
|
|
5096
|
+
result: void 0
|
|
5097
|
+
};
|
|
5098
|
+
var areArraysEqual = (a, b) => {
|
|
5099
|
+
if (a === b) return true;
|
|
5100
|
+
if (!a || !b) return false;
|
|
5101
|
+
if (a.length !== b.length) return false;
|
|
5102
|
+
for (let i = 0; i < a.length; i += 1) {
|
|
5103
|
+
if (a[i] !== b[i]) return false;
|
|
5104
|
+
}
|
|
5105
|
+
return true;
|
|
5106
|
+
};
|
|
5107
|
+
var getMemoizedAdditionalTooltipValues = (columns, fields, additionalTooltipFields) => {
|
|
5108
|
+
if (additionalTooltipValuesCache.columns === columns && additionalTooltipValuesCache.fields === fields && areArraysEqual(additionalTooltipValuesCache.additionalTooltipFields, additionalTooltipFields)) {
|
|
5109
|
+
return additionalTooltipValuesCache.result;
|
|
5110
|
+
}
|
|
5111
|
+
let result;
|
|
5112
|
+
if ((additionalTooltipFields == null ? void 0 : additionalTooltipFields.length) && columns && fields) {
|
|
5113
|
+
result = extractAdditionalTooltipValues(columns, fields, additionalTooltipFields);
|
|
5114
|
+
}
|
|
5115
|
+
additionalTooltipValuesCache = {
|
|
5116
|
+
columns,
|
|
5117
|
+
fields,
|
|
5118
|
+
additionalTooltipFields,
|
|
5119
|
+
result
|
|
5120
|
+
};
|
|
5121
|
+
return result;
|
|
5122
|
+
};
|
|
4633
5123
|
var computeVizProps = (_a) => {
|
|
4634
5124
|
var _b = _a, {
|
|
4635
5125
|
dataSources,
|
|
@@ -4662,6 +5152,7 @@ var computeVizProps = (_a) => {
|
|
|
4662
5152
|
"trellisSplitBy",
|
|
4663
5153
|
"themeFunc"
|
|
4664
5154
|
]);
|
|
5155
|
+
var _a2;
|
|
4665
5156
|
const defaultFontColor = themeFunc("defaultFontColor");
|
|
4666
5157
|
const computedProps = {
|
|
4667
5158
|
visualizationApiRef,
|
|
@@ -4704,6 +5195,16 @@ var computeVizProps = (_a) => {
|
|
|
4704
5195
|
computedProps.onPointMouseOver = onEventTrigger;
|
|
4705
5196
|
computedProps.onPointMouseOut = onEventTrigger;
|
|
4706
5197
|
}
|
|
5198
|
+
computedProps.eventHandlers = eventHandlers;
|
|
5199
|
+
computedProps.xField = xField;
|
|
5200
|
+
if ((_a2 = dataSources == null ? void 0 : dataSources.primary) == null ? void 0 : _a2.data) {
|
|
5201
|
+
const { columns: originalColumns, fields: originalFields } = dataSources.primary.data;
|
|
5202
|
+
computedProps.additionalTooltipValues = getMemoizedAdditionalTooltipValues(
|
|
5203
|
+
originalColumns,
|
|
5204
|
+
originalFields,
|
|
5205
|
+
additionalTooltipFields
|
|
5206
|
+
);
|
|
5207
|
+
}
|
|
4707
5208
|
return computedProps;
|
|
4708
5209
|
};
|
|
4709
5210
|
var Line = withTrellis_default(
|