@perses-dev/components 0.36.2 → 0.37.1
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/FontSizeSelector/FontSizeSelector.d.ts +8 -0
- package/dist/FontSizeSelector/FontSizeSelector.d.ts.map +1 -0
- package/dist/FontSizeSelector/FontSizeSelector.js +124 -0
- package/dist/FontSizeSelector/FontSizeSelector.js.map +1 -0
- package/dist/FontSizeSelector/index.d.ts +2 -0
- package/dist/FontSizeSelector/index.d.ts.map +1 -0
- package/dist/FontSizeSelector/index.js +15 -0
- package/dist/FontSizeSelector/index.js.map +1 -0
- package/dist/LineChart/LineChart.d.ts +5 -25
- package/dist/LineChart/LineChart.d.ts.map +1 -1
- package/dist/LineChart/LineChart.js +6 -6
- package/dist/LineChart/LineChart.js.map +1 -1
- package/dist/LineChart/index.d.ts +0 -1
- package/dist/LineChart/index.d.ts.map +1 -1
- package/dist/LineChart/index.js +0 -1
- package/dist/LineChart/index.js.map +1 -1
- package/dist/StatChart/StatChart.d.ts +2 -0
- package/dist/StatChart/StatChart.d.ts.map +1 -1
- package/dist/StatChart/StatChart.js +7 -5
- package/dist/StatChart/StatChart.js.map +1 -1
- package/dist/StatChart/calculateFontSize.d.ts +3 -1
- package/dist/StatChart/calculateFontSize.d.ts.map +1 -1
- package/dist/StatChart/calculateFontSize.js +5 -1
- package/dist/StatChart/calculateFontSize.js.map +1 -1
- package/dist/TimeChart/TimeChart.d.ts +23 -0
- package/dist/TimeChart/TimeChart.d.ts.map +1 -0
- package/dist/TimeChart/TimeChart.js +317 -0
- package/dist/TimeChart/TimeChart.js.map +1 -0
- package/dist/TimeChart/index.d.ts +2 -0
- package/dist/TimeChart/index.d.ts.map +1 -0
- package/dist/TimeChart/index.js +15 -0
- package/dist/TimeChart/index.js.map +1 -0
- package/dist/TimeSeriesTooltip/{TimeSeriesTooltip.d.ts → LineChartTooltip.d.ts} +2 -2
- package/dist/TimeSeriesTooltip/LineChartTooltip.d.ts.map +1 -0
- package/dist/TimeSeriesTooltip/{TimeSeriesTooltip.js → LineChartTooltip.js} +4 -4
- package/dist/TimeSeriesTooltip/LineChartTooltip.js.map +1 -0
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts +21 -0
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -0
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js +78 -0
- package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map +1 -0
- package/dist/TimeSeriesTooltip/TooltipHeader.js +6 -9
- package/dist/TimeSeriesTooltip/TooltipHeader.js.map +1 -1
- package/dist/TimeSeriesTooltip/index.d.ts +2 -1
- package/dist/TimeSeriesTooltip/index.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/index.js +2 -1
- package/dist/TimeSeriesTooltip/index.js.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.d.ts +23 -5
- package/dist/TimeSeriesTooltip/nearby-series.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.js +166 -4
- package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts +4 -0
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.js.map +1 -1
- package/dist/TimeSeriesTooltip/utils.d.ts +26 -1
- package/dist/TimeSeriesTooltip/utils.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/utils.js +41 -5
- package/dist/TimeSeriesTooltip/utils.js.map +1 -1
- package/dist/cjs/FontSizeSelector/FontSizeSelector.js +130 -0
- package/dist/cjs/FontSizeSelector/index.js +28 -0
- package/dist/cjs/LineChart/LineChart.js +5 -44
- package/dist/cjs/LineChart/index.js +0 -1
- package/dist/cjs/StatChart/StatChart.js +7 -5
- package/dist/cjs/StatChart/calculateFontSize.js +5 -1
- package/dist/cjs/TimeChart/TimeChart.js +323 -0
- package/dist/cjs/TimeChart/index.js +28 -0
- package/dist/cjs/TimeSeriesTooltip/{TimeSeriesTooltip.js → LineChartTooltip.js} +4 -4
- package/dist/cjs/TimeSeriesTooltip/TimeChartTooltip.js +89 -0
- package/dist/cjs/TimeSeriesTooltip/TooltipHeader.js +6 -9
- package/dist/cjs/TimeSeriesTooltip/index.js +2 -1
- package/dist/cjs/TimeSeriesTooltip/nearby-series.js +162 -4
- package/dist/cjs/TimeSeriesTooltip/utils.js +47 -7
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/utils/axis.js +58 -0
- package/dist/cjs/{LineChart/utils.js → utils/chart-actions.js} +0 -54
- package/dist/cjs/utils/format.js +47 -1
- package/dist/cjs/utils/index.js +3 -1
- package/dist/cjs/utils/theme-gen.js +42 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/model/graph.d.ts +19 -2
- package/dist/model/graph.d.ts.map +1 -1
- package/dist/model/graph.js.map +1 -1
- package/dist/model/theme.d.ts +5 -0
- package/dist/model/theme.d.ts.map +1 -1
- package/dist/model/theme.js.map +1 -1
- package/dist/utils/axis.d.ts +14 -0
- package/dist/utils/axis.d.ts.map +1 -0
- package/dist/utils/axis.js +45 -0
- package/dist/utils/axis.js.map +1 -0
- package/dist/utils/chart-actions.d.ts +18 -0
- package/dist/utils/chart-actions.d.ts.map +1 -0
- package/dist/utils/chart-actions.js +52 -0
- package/dist/utils/chart-actions.js.map +1 -0
- package/dist/utils/format.d.ts +6 -0
- package/dist/utils/format.d.ts.map +1 -1
- package/dist/utils/format.js +47 -0
- package/dist/utils/format.js.map +1 -1
- package/dist/utils/index.d.ts +3 -1
- package/dist/utils/index.d.ts.map +1 -1
- package/dist/utils/index.js +3 -1
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/theme-gen.d.ts +6 -1
- package/dist/utils/theme-gen.d.ts.map +1 -1
- package/dist/utils/theme-gen.js +42 -1
- package/dist/utils/theme-gen.js.map +1 -1
- package/package.json +3 -3
- package/dist/LineChart/utils.d.ts +0 -31
- package/dist/LineChart/utils.d.ts.map +0 -1
- package/dist/LineChart/utils.js +0 -103
- package/dist/LineChart/utils.js.map +0 -1
- package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map +0 -1
- package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map +0 -1
package/dist/LineChart/utils.js
DELETED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
// Copyright 2023 The Perses Authors
|
|
2
|
-
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
3
|
-
// you may not use this file except in compliance with the License.
|
|
4
|
-
// You may obtain a copy of the License at
|
|
5
|
-
//
|
|
6
|
-
// http://www.apache.org/licenses/LICENSE-2.0
|
|
7
|
-
//
|
|
8
|
-
// Unless required by applicable law or agreed to in writing, software
|
|
9
|
-
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
10
|
-
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
11
|
-
// See the License for the specific language governing permissions and
|
|
12
|
-
// limitations under the License.
|
|
13
|
-
import { formatValue } from '@perses-dev/core';
|
|
14
|
-
import merge from 'lodash/merge';
|
|
15
|
-
import { dateFormatOptionsWithTimeZone } from '../utils';
|
|
16
|
-
/**
|
|
17
|
-
* Enable dataZoom without requring user to click toolbox icon
|
|
18
|
-
*/ export function enableDataZoom(chart) {
|
|
19
|
-
const chartModel = chart['_model'];
|
|
20
|
-
if (chartModel === undefined) return;
|
|
21
|
-
if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
|
|
22
|
-
// check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
|
|
23
|
-
if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
|
|
24
|
-
chart.dispatchAction({
|
|
25
|
-
type: 'takeGlobalCursor',
|
|
26
|
-
key: 'dataZoomSelect',
|
|
27
|
-
dataZoomSelectActive: true
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Restore chart to original state before zoom or other actions were dispatched
|
|
34
|
-
*/ export function restoreChart(chart) {
|
|
35
|
-
// TODO: support incremental unzoom instead of restore to original state
|
|
36
|
-
chart.dispatchAction({
|
|
37
|
-
type: 'restore'
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* Calculate date range, used as a fallback when xAxis time range not passed as prop
|
|
42
|
-
*/ export function getDateRange(data) {
|
|
43
|
-
const defaultRange = 3600000; // hour in ms
|
|
44
|
-
if (data.length === 0) return defaultRange;
|
|
45
|
-
const lastDatum = data[data.length - 1];
|
|
46
|
-
if (data[0] === undefined || lastDatum === undefined) return defaultRange;
|
|
47
|
-
return lastDatum - data[0];
|
|
48
|
-
}
|
|
49
|
-
/*
|
|
50
|
-
* Determines time granularity for axis labels, defaults to hh:mm
|
|
51
|
-
*/ export function getFormattedDate(value, rangeMs, timeZone) {
|
|
52
|
-
const dateFormatOptions = dateFormatOptionsWithTimeZone({
|
|
53
|
-
hour: 'numeric',
|
|
54
|
-
minute: 'numeric',
|
|
55
|
-
hourCycle: 'h23'
|
|
56
|
-
}, timeZone);
|
|
57
|
-
const thirtyMinMs = 1800000;
|
|
58
|
-
const dayMs = 86400000;
|
|
59
|
-
if (rangeMs <= thirtyMinMs) {
|
|
60
|
-
dateFormatOptions.second = 'numeric';
|
|
61
|
-
} else if (rangeMs >= dayMs) {
|
|
62
|
-
dateFormatOptions.month = 'numeric';
|
|
63
|
-
dateFormatOptions.day = 'numeric';
|
|
64
|
-
}
|
|
65
|
-
const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
|
|
66
|
-
// remove comma when month / day present
|
|
67
|
-
return DATE_FORMAT.format(value).replace(/, /g, ' ');
|
|
68
|
-
}
|
|
69
|
-
/*
|
|
70
|
-
* Populate yAxis properties, returns an Array since multiple y axes will be supported in the future
|
|
71
|
-
*/ export function getYAxes(yAxis, unit) {
|
|
72
|
-
// TODO: support alternate yAxis that shows on right side
|
|
73
|
-
const Y_AXIS_DEFAULT = {
|
|
74
|
-
type: 'value',
|
|
75
|
-
boundaryGap: [
|
|
76
|
-
0,
|
|
77
|
-
'10%'
|
|
78
|
-
],
|
|
79
|
-
axisLabel: {
|
|
80
|
-
formatter: (value)=>{
|
|
81
|
-
return formatValue(value, unit);
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
return [
|
|
86
|
-
merge(Y_AXIS_DEFAULT, yAxis)
|
|
87
|
-
];
|
|
88
|
-
}
|
|
89
|
-
/*
|
|
90
|
-
* Clear all highlighted series when cursor exits canvas
|
|
91
|
-
* https://echarts.apache.org/en/api.html#action.downplay
|
|
92
|
-
*/ export function clearHighlightedSeries(chart, totalSeries) {
|
|
93
|
-
if (chart.dispatchAction !== undefined) {
|
|
94
|
-
for(let i = 0; i < totalSeries; i++){
|
|
95
|
-
chart.dispatchAction({
|
|
96
|
-
type: 'downplay',
|
|
97
|
-
seriesIndex: i
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/LineChart/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatValue, UnitOptions } from '@perses-dev/core';\nimport merge from 'lodash/merge';\nimport type { YAXisComponentOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { dateFormatOptionsWithTimeZone } from '../utils';\n\nexport interface ZoomEventData {\n start: number;\n end: number;\n startIndex: number;\n endIndex: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon\n */\nexport function enableDataZoom(chart: EChartsInstance) {\n const chartModel = chart['_model'];\n if (chartModel === undefined) return;\n if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n chart.dispatchAction({\n type: 'takeGlobalCursor',\n key: 'dataZoomSelect',\n dataZoomSelectActive: true,\n });\n }\n }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance) {\n // TODO: support incremental unzoom instead of restore to original state\n chart.dispatchAction({\n type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n });\n}\n\n/**\n * Calculate date range, used as a fallback when xAxis time range not passed as prop\n */\nexport function getDateRange(data: number[]) {\n const defaultRange = 3600000; // hour in ms\n if (data.length === 0) return defaultRange;\n const lastDatum = data[data.length - 1];\n if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n return lastDatum - data[0];\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string) {\n const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n {\n hour: 'numeric',\n minute: 'numeric',\n hourCycle: 'h23',\n },\n timeZone\n );\n const thirtyMinMs = 1800000;\n const dayMs = 86400000;\n if (rangeMs <= thirtyMinMs) {\n dateFormatOptions.second = 'numeric';\n } else if (rangeMs >= dayMs) {\n dateFormatOptions.month = 'numeric';\n dateFormatOptions.day = 'numeric';\n }\n const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n // remove comma when month / day present\n return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n/*\n * Populate yAxis properties, returns an Array since multiple y axes will be supported in the future\n */\nexport function getYAxes(yAxis?: YAXisComponentOption, unit?: UnitOptions) {\n // TODO: support alternate yAxis that shows on right side\n const Y_AXIS_DEFAULT = {\n type: 'value',\n boundaryGap: [0, '10%'],\n axisLabel: {\n formatter: (value: number) => {\n return formatValue(value, unit);\n },\n },\n };\n return [merge(Y_AXIS_DEFAULT, yAxis)];\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance, totalSeries: number) {\n if (chart.dispatchAction !== undefined) {\n for (let i = 0; i < totalSeries; i++) {\n chart.dispatchAction({\n type: 'downplay',\n seriesIndex: i,\n });\n }\n }\n}\n"],"names":["formatValue","merge","dateFormatOptionsWithTimeZone","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","timeZone","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace","getYAxes","yAxis","unit","Y_AXIS_DEFAULT","boundaryGap","axisLabel","formatter","clearHighlightedSeries","totalSeries","i","seriesIndex"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAG1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAI7C,OAAO,EACL,iBAAiB,EAOlB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,iBAAiB,8DAkF5B,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Portal, Stack } from '@mui/material';\nimport { UnitOptions } from '@perses-dev/core';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { memo, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { EChartsDataFormat } from '../model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { getNearbySeriesData } from './nearby-series';\nimport {\n CursorCoordinates,\n FALLBACK_CHART_WIDTH,\n TOOLTIP_BG_COLOR_FALLBACK,\n TOOLTIP_MAX_HEIGHT,\n TOOLTIP_MAX_WIDTH,\n TOOLTIP_MIN_WIDTH,\n useMousePosition,\n} from './tooltip-model';\nimport { assembleTransform } from './utils';\n\nexport interface TimeSeriesTooltipProps {\n chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n chartData: EChartsDataFormat;\n wrapLabels?: boolean;\n unit?: UnitOptions;\n onUnpinClick?: () => void;\n pinnedPos: CursorCoordinates | null;\n}\n\nexport const TimeSeriesTooltip = memo(function TimeSeriesTooltip({\n chartRef,\n chartData,\n wrapLabels,\n unit,\n onUnpinClick,\n pinnedPos,\n}: TimeSeriesTooltipProps) {\n const [showAllSeries, setShowAllSeries] = useState(false);\n const mousePos = useMousePosition();\n const { height, width, ref: tooltipRef } = useResizeObserver();\n\n const isTooltipPinned = pinnedPos !== null;\n\n if (mousePos === null || mousePos.target === null) return null;\n\n // Ensure user is hovering over a chart before checking for nearby series.\n if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n const chart = chartRef.current;\n const chartWidth = chart?.getWidth() ?? FALLBACK_CHART_WIDTH; // Fallback width not likely to ever be needed.\n const cursorTransform = assembleTransform(mousePos, chartWidth, pinnedPos, height ?? 0, width ?? 0);\n\n // Get series nearby the cursor and pass into tooltip content children.\n const nearbySeries = getNearbySeriesData({\n mousePos,\n chartData,\n pinnedPos,\n chart,\n unit,\n showAllSeries,\n });\n if (nearbySeries.length === 0) {\n return null;\n }\n\n const totalSeries = chartData.timeSeries.length;\n\n return (\n <Portal>\n <Box\n ref={tooltipRef}\n sx={(theme) => ({\n minWidth: TOOLTIP_MIN_WIDTH,\n maxWidth: TOOLTIP_MAX_WIDTH,\n maxHeight: TOOLTIP_MAX_HEIGHT,\n padding: 0,\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n borderRadius: '6px',\n color: '#fff',\n fontSize: '11px',\n visibility: 'visible',\n opacity: 1,\n transition: 'all 0.1s ease-out',\n // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n overflow: 'hidden',\n '&:hover': {\n overflowY: 'auto',\n },\n })}\n style={{\n transform: cursorTransform,\n }}\n >\n <Stack spacing={0.5}>\n <TooltipHeader\n nearbySeries={nearbySeries}\n totalSeries={totalSeries}\n isTooltipPinned={isTooltipPinned}\n showAllSeries={showAllSeries}\n onShowAllClick={(checked) => setShowAllSeries(checked)}\n onUnpinClick={onUnpinClick}\n />\n <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n </Stack>\n </Box>\n </Portal>\n );\n});\n"],"names":["Box","Portal","Stack","memo","useState","useResizeObserver","TooltipContent","TooltipHeader","getNearbySeriesData","FALLBACK_CHART_WIDTH","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","TOOLTIP_MIN_WIDTH","useMousePosition","assembleTransform","TimeSeriesTooltip","chartRef","chartData","wrapLabels","unit","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","mousePos","height","width","ref","tooltipRef","isTooltipPinned","target","tagName","chart","current","chartWidth","getWidth","cursorTransform","nearbySeries","length","totalSeries","timeSeries","theme","sx","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform","spacing","onShowAllClick","checked","series"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,MAAM,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAGnD,SAASC,IAAI,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACvC,OAAOC,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAClD,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAChD,SAASC,mBAAmB,QAAQ,iBAAiB,CAAC;AACtD,SAEEC,oBAAoB,EACpBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB,EACjBC,iBAAiB,EACjBC,gBAAgB,QACX,iBAAiB,CAAC;AACzB,SAASC,iBAAiB,QAAQ,SAAS,CAAC;AAW5C,OAAO,MAAMC,iBAAiB,iBAAGb,IAAI,CAAC,SAASa,iBAAiB,CAAC,EAC/DC,QAAQ,CAAA,EACRC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,IAAI,CAAA,EACJC,YAAY,CAAA,EACZC,SAAS,CAAA,EACc,EAAE;IACzB,MAAM,CAACC,aAAa,EAAEC,gBAAgB,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC1D,MAAMqB,QAAQ,GAAGX,gBAAgB,EAAE,AAAC;IACpC,MAAM,EAAEY,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAEC,GAAG,EAAEC,UAAU,CAAA,EAAE,GAAGxB,iBAAiB,EAAE,AAAC;IAE/D,MAAMyB,eAAe,GAAGR,SAAS,KAAK,IAAI,AAAC;IAE3C,IAAIG,QAAQ,KAAK,IAAI,IAAIA,QAAQ,CAACM,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;IAE/D,0EAA0E;IAC1E,IAAIT,SAAS,KAAK,IAAI,IAAI,AAACG,QAAQ,CAACM,MAAM,CAAiBC,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI,CAAC;IAE7F,MAAMC,KAAK,GAAGhB,QAAQ,CAACiB,OAAO,AAAC;QACZD,GAAiB;IAApC,MAAME,UAAU,GAAGF,CAAAA,GAAiB,GAAjBA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEG,QAAQ,EAAE,cAAjBH,GAAiB,cAAjBA,GAAiB,GAAIxB,oBAAoB,AAAC,EAAC,+CAA+C;IAC7G,MAAM4B,eAAe,GAAGtB,iBAAiB,CAACU,QAAQ,EAAEU,UAAU,EAAEb,SAAS,EAAEI,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,EAAEC,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,CAAC,CAAC,AAAC;IAEpG,uEAAuE;IACvE,MAAMW,YAAY,GAAG9B,mBAAmB,CAAC;QACvCiB,QAAQ;QACRP,SAAS;QACTI,SAAS;QACTW,KAAK;QACLb,IAAI;QACJG,aAAa;KACd,CAAC,AAAC;IACH,IAAIe,YAAY,CAACC,MAAM,KAAK,CAAC,EAAE;QAC7B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAMC,WAAW,GAAGtB,SAAS,CAACuB,UAAU,CAACF,MAAM,AAAC;QAcvBG,IAAqC;IAZ9D,qBACE,KAACzC,MAAM;kBACL,cAAA,KAACD,GAAG;YACF4B,GAAG,EAAEC,UAAU;YACfc,EAAE,EAAE,CAACD,KAAK;oBAQSA,GAA0B;gBAR7B,OAAA;oBACdE,QAAQ,EAAE/B,iBAAiB;oBAC3BgC,QAAQ,EAAEjC,iBAAiB;oBAC3BkC,SAAS,EAAEnC,kBAAkB;oBAC7BoC,OAAO,EAAE,CAAC;oBACVC,QAAQ,EAAE,UAAU;oBACpBC,GAAG,EAAE,CAAC;oBACNC,IAAI,EAAE,CAAC;oBACPC,eAAe,EAAET,CAAAA,IAAqC,GAArCA,CAAAA,GAA0B,GAA1BA,KAAK,CAACU,OAAO,CAACC,YAAY,cAA1BX,GAA0B,WAAM,GAAhCA,KAAAA,CAAgC,GAAhCA,GAA0B,CAAEY,IAAI,CAAC,GAAG,CAAC,cAArCZ,IAAqC,cAArCA,IAAqC,GAAIhC,yBAAyB;oBACnF6C,YAAY,EAAE,KAAK;oBACnBC,KAAK,EAAE,MAAM;oBACbC,QAAQ,EAAE,MAAM;oBAChBC,UAAU,EAAE,SAAS;oBACrBC,OAAO,EAAE,CAAC;oBACVC,UAAU,EAAE,mBAAmB;oBAC/B,yEAAyE;oBACzEC,MAAM,EAAEvC,SAAS,KAAK,IAAI,GAAG,MAAM,GAAGoB,KAAK,CAACmB,MAAM,CAACC,OAAO;oBAC1DC,QAAQ,EAAE,QAAQ;oBAClB,SAAS,EAAE;wBACTC,SAAS,EAAE,MAAM;qBAClB;iBACF,CAAA;aAAC;YACFC,KAAK,EAAE;gBACLC,SAAS,EAAE7B,eAAe;aAC3B;sBAED,cAAA,MAACnC,KAAK;gBAACiE,OAAO,EAAE,GAAG;;kCACjB,KAAC5D,aAAa;wBACZ+B,YAAY,EAAEA,YAAY;wBAC1BE,WAAW,EAAEA,WAAW;wBACxBV,eAAe,EAAEA,eAAe;wBAChCP,aAAa,EAAEA,aAAa;wBAC5B6C,cAAc,EAAE,CAACC,OAAO,GAAK7C,gBAAgB,CAAC6C,OAAO,CAAC;wBACtDhD,YAAY,EAAEA,YAAY;sBAC1B;kCACF,KAACf,cAAc;wBAACgE,MAAM,EAAEhC,YAAY;wBAAEnB,UAAU,EAAEA,UAAU;sBAAI;;cAC1D;UACJ;MACC,CACT;AACJ,CAAC,CAAC,CAAC"}
|