@perses-dev/components 0.55.0-beta.6 → 0.55.0-beta.8
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/ColorPicker/ColorPicker.d.ts.map +1 -1
- package/dist/Dialog/Dialog.d.ts.map +1 -1
- package/dist/Dialog/DiscardChangesConfirmationDialog.d.ts.map +1 -1
- package/dist/Drawer/Drawer.d.ts.map +1 -1
- package/dist/EChart/EChart.d.ts +3 -3
- package/dist/EChart/EChart.d.ts.map +1 -1
- package/dist/EChart/timezone-formatter.d.ts.map +1 -1
- package/dist/InfoTooltip/InfoTooltip.d.ts.map +1 -1
- package/dist/Legend/LegendColorBadge.d.ts +2 -1
- package/dist/Legend/LegendColorBadge.d.ts.map +1 -1
- package/dist/LinksEditor/LinkEditorForm.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorColumn.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorControl.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGrid.d.ts.map +1 -1
- package/dist/OptionsEditorLayout/OptionsEditorGroup.d.ts.map +1 -1
- package/dist/Table/hooks/useTableKeyboardNav.js +3 -3
- package/dist/Table/hooks/useTableKeyboardNav.js.map +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.js +1 -1
- package/dist/ThresholdsEditor/ThresholdsEditor.js.map +1 -1
- package/dist/TimeRangeSelector/DateTimeRangePicker.d.ts.map +1 -1
- package/dist/TimeRangeSelector/TimeRangeSelector.d.ts.map +1 -1
- package/dist/TimeRangeSelector/TimeRangeSelector.js +1 -8
- package/dist/TimeRangeSelector/TimeRangeSelector.js.map +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts +1 -1
- package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.js +1 -1
- package/dist/TimeSeriesTooltip/TooltipContent.js.map +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.d.ts +1 -1
- package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.js +1 -1
- package/dist/TimeSeriesTooltip/nearby-series.js.map +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts +1 -1
- package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map +1 -1
- package/dist/model/legend.d.ts +3 -3
- package/dist/model/legend.d.ts.map +1 -1
- package/dist/model/temperature.d.ts.map +1 -1
- package/dist/model/transforms.d.ts.map +1 -1
- package/dist/model/units.d.ts +41 -41
- package/dist/theme/palette/background.d.ts +1 -1
- package/dist/theme/palette/background.d.ts.map +1 -1
- package/dist/theme/palette/error.d.ts.map +1 -1
- package/dist/theme/palette/grey.d.ts +1 -1
- package/dist/theme/palette/grey.d.ts.map +1 -1
- package/dist/theme/palette/primary.d.ts.map +1 -1
- package/dist/theme/palette/secondary.d.ts.map +1 -1
- package/dist/theme/palette/success.d.ts.map +1 -1
- package/dist/theme/palette/text.d.ts +1 -1
- package/dist/theme/palette/text.d.ts.map +1 -1
- package/dist/theme/palette/warning.d.ts.map +1 -1
- package/dist/theme/types/fonts.d.js +14 -0
- package/dist/theme/types/fonts.d.js.map +1 -0
- package/dist/utils/format.d.ts.map +1 -1
- package/dist/utils/regexp.js +3 -1
- package/dist/utils/regexp.js.map +1 -1
- package/dist/utils/transform-data.js +1 -1
- package/dist/utils/transform-data.js.map +1 -1
- package/dist/utils/variable-interpolation.js +1 -1
- package/dist/utils/variable-interpolation.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAIvD,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAC;AAIvD,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,0CAA2C,gBAAgB,KAAG,YAmDrF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,kBAAkB,IAAI,qBAAqB,EAE5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,KAAK,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,kBAAkB,IAAI,qBAAqB,EAE5C,MAAM,eAAe,CAAC;AACvB,OAAO,EAEL,aAAa,EAMd,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAItD,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAEhF,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC;AAEvD,QAAA,MAAM,MAAM,oCAAqC,iBAAiB,KAAG,YAapE,CAAC;AAEF,QAAA,MAAM,OAAO,+BAAgC,kBAAkB,KAAG,YAIjE,CAAC;AAEF,QAAA,MAAM,aAAa,2BAA4B,iBAAiB,KAAG,YAIlE,CAAC;AAEF,QAAA,MAAM,eAAe,2BAA4B,iBAAiB,KAAG,YAIpE,CAAC;AAQF,QAAA,MAAM,IAAI,EAAE,eAAe,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAItD,CAAC;AAUH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG;IAC3C,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,aAAa,CAAC;IACpC,eAAe,EAAE,OAAO,eAAe,CAAC;IACxC,OAAO,EAAE,OAAO,aAAa,CAAC;CAC4C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,
|
|
1
|
+
{"version":3,"file":"DiscardChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/DiscardChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,UAAU,qCAAqC;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,gCAAgC,UAAW,qCAAqC,KAAG,YAiB/F,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAID,eAAO,MAAM,MAAM,+DAOhB,WAAW,KAAG,YAwBhB,CAAC"}
|
package/dist/EChart/EChart.d.ts
CHANGED
|
@@ -16,7 +16,7 @@ export interface MouseEventsParameters<T> {
|
|
|
16
16
|
info: Record<string, unknown>;
|
|
17
17
|
}
|
|
18
18
|
type OnEventFunction<T> = (params: MouseEventsParameters<T>, instance?: ECharts) => void;
|
|
19
|
-
declare const mouseEvents: readonly [
|
|
19
|
+
declare const mouseEvents: readonly ['click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'];
|
|
20
20
|
export type MouseEventName = (typeof mouseEvents)[number];
|
|
21
21
|
export interface DataZoomPayloadBatchItem {
|
|
22
22
|
dataZoomId: string;
|
|
@@ -37,7 +37,7 @@ export interface BatchEventsParameters {
|
|
|
37
37
|
batch: DataZoomPayloadBatchItem[] & HighlightPayloadBatchItem[];
|
|
38
38
|
}
|
|
39
39
|
type OnBatchEventFunction = (params: BatchEventsParameters) => void;
|
|
40
|
-
declare const batchEvents: readonly [
|
|
40
|
+
declare const batchEvents: readonly ['datazoom', 'downplay', 'highlight'];
|
|
41
41
|
export type BatchEventName = (typeof batchEvents)[number];
|
|
42
42
|
type ChartEventName = 'finished';
|
|
43
43
|
export type OnEventsType<T> = {
|
|
@@ -58,6 +58,6 @@ export interface EChartsProps<T> {
|
|
|
58
58
|
syncGroup?: string;
|
|
59
59
|
onChartInitialized?: (instance: ECharts) => void;
|
|
60
60
|
}
|
|
61
|
-
export declare const EChart: import("react").MemoExoticComponent
|
|
61
|
+
export declare const EChart: import("react").MemoExoticComponent<<T>({ option, theme, renderer, sx, style, onEvents, _instance, syncGroup, onChartInitialized, }: EChartsProps<T>) => import("react/jsx-runtime").JSX.Element>;
|
|
62
62
|
export {};
|
|
63
63
|
//# sourceMappingURL=EChart.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAwBpD,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAK/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AA2B7C,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,KAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../../src/EChart/EChart.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../src/EChart/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../src/EChart/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WACxD,MAAM,KAAG,MAAM,CA0BxC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEnE,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,KAAG,YAqBrB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { BoxProps } from '@mui/material';
|
|
2
|
+
import type { ReactElement } from 'react';
|
|
2
3
|
export interface LegendColorBadgeProps extends BoxProps<'div'> {
|
|
3
4
|
color: string;
|
|
4
5
|
}
|
|
5
|
-
export declare const LegendColorBadge: import("react").
|
|
6
|
+
export declare const LegendColorBadge: import("react").MemoExoticComponent<({ color, sx, ...others }: LegendColorBadgeProps) => ReactElement>;
|
|
6
7
|
//# sourceMappingURL=LegendColorBadge.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"LegendColorBadge.d.ts","sourceRoot":"","sources":["../../src/Legend/LegendColorBadge.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,MAAM,WAAW,qBAAsB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IAC5D,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,iEAI1B,qBAAqB,KAAG,YAAY,CAerC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkEditorForm.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/LinkEditorForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,QAAQ,GAAG,eAAe,CAAC;IACjC,GAAG,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"LinkEditorForm.d.ts","sourceRoot":"","sources":["../../src/LinksEditor/LinkEditorForm.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACpD;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,QAAQ,GAAG,eAAe,CAAC;IACjC,GAAG,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;IAClD,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,CAAC;IACrD,UAAU,EAAE,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;CAC/D;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,KAAG,YAoE3D,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsEditorColumn.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"OptionsEditorColumn.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorColumn.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,iBAAkB,wBAAwB,KAAG,YAM5E,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"OptionsEditorControl.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorControl.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAG3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IACzF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,oBAAoB,oCAAqC,yBAAyB,KAAG,YAuCjG,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsEditorGrid.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"OptionsEditorGrid.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGrid.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iBAAkB,sBAAsB,KAAG,YAMxE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OptionsEditorGroup.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"OptionsEditorGroup.d.ts","sourceRoot":"","sources":["../../src/OptionsEditorLayout/OptionsEditorGroup.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,kBAAkB,8BAA+B,uBAAuB,KAAG,YAYvF,CAAC"}
|
|
@@ -15,14 +15,14 @@ const DEFAULT_ACTIVE_CELL = {
|
|
|
15
15
|
row: 0,
|
|
16
16
|
column: 0
|
|
17
17
|
};
|
|
18
|
-
const ARROW_KEYS = [
|
|
18
|
+
const ARROW_KEYS = new Set([
|
|
19
19
|
'ArrowRight',
|
|
20
20
|
'ArrowLeft',
|
|
21
21
|
'ArrowUp',
|
|
22
22
|
'ArrowDown'
|
|
23
|
-
];
|
|
23
|
+
]);
|
|
24
24
|
function isArrowKey(key) {
|
|
25
|
-
return ARROW_KEYS.
|
|
25
|
+
return ARROW_KEYS.has(key);
|
|
26
26
|
}
|
|
27
27
|
/**
|
|
28
28
|
* Hook for managing keyboard navigation for table components. It is intended
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 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 type { FocusEventHandler, KeyboardEventHandler } from 'react';\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined,\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'];\n\nfunction isArrowKey(key: string): boolean {\n return ARROW_KEYS.
|
|
1
|
+
{"version":3,"sources":["../../../src/Table/hooks/useTableKeyboardNav.tsx"],"sourcesContent":["// Copyright 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 type { FocusEventHandler, KeyboardEventHandler } from 'react';\nimport { useCallback, useState } from 'react';\n\nexport interface UseTableKeyboardNavProps {\n maxRows: number;\n maxColumns: number;\n\n /**\n * Function used to modify the active table cell based on the keyboard event,\n * the current position, and the default recommended next position (this value\n * will be `undefined` in cases where there is no default handler like `PageUp`\n * and `PageDown`). This can be used to modify the next position that will be\n * used and/or to handle side effects related to the new position (e.g.\n * pagination, scrolling the active cell into view).\n */\n onActiveCellChange?: (\n e: React.KeyboardEvent<HTMLTableElement>,\n currentActiveCell: TableCellPosition,\n defaultNextActiveCell: TableCellPosition | undefined,\n ) => TableCellPosition | undefined;\n}\n\ntype TableCellPosition = {\n row: number;\n column: number;\n};\n\nconst DEFAULT_ACTIVE_CELL: TableCellPosition = {\n row: 0,\n column: 0,\n};\n\nconst ARROW_KEYS = new Set(['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']);\n\nfunction isArrowKey(key: string): boolean {\n return ARROW_KEYS.has(key);\n}\n\n/**\n * Hook for managing keyboard navigation for table components. It is intended\n * to be wrapped by implementation-specific tables to account for differences\n * like pagination, infinite scroll, and virtualization. See `useVirtualizedKeyboardNav`\n * for an example.\n */\nexport function useTableKeyboardNav({ maxRows, maxColumns, onActiveCellChange }: UseTableKeyboardNavProps): {\n activeCell: TableCellPosition;\n isActive: boolean;\n onTableKeyDown: KeyboardEventHandler<HTMLTableElement>;\n onCellFocus: (cellPosition: TableCellPosition) => void;\n onTableBlur: FocusEventHandler<HTMLTableElement>;\n} {\n const [activeCell, setActiveCell] = useState<TableCellPosition>(DEFAULT_ACTIVE_CELL);\n const [isActive, setIsActive] = useState(false);\n\n const handleCellFocus = (cellPosition: TableCellPosition): void => {\n if (cellPosition.column === activeCell.column && cellPosition.row === activeCell.row && isActive) {\n return;\n }\n setIsActive(true);\n setActiveCell(cellPosition);\n };\n\n const handleKeyDown: React.KeyboardEventHandler<HTMLTableElement> = useCallback(\n (e) => {\n // Including some of the basic a11y keyboard interaction patterns from:\n // https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n // TODO: add other keyboard combos.\n const key = e.key;\n\n if (isArrowKey(key) || key === 'Home' || key === 'End' || key === 'PageDown' || key === 'PageUp') {\n setActiveCell((curActiveCell) => {\n let nextRow: number = curActiveCell.row;\n let nextColumn: number = curActiveCell.column;\n\n if (key === 'ArrowRight' && nextColumn < maxColumns - 1) {\n e.preventDefault();\n nextColumn += 1;\n } else if (key === 'ArrowLeft' && nextColumn > 0) {\n e.preventDefault();\n nextColumn -= 1;\n } else if (key === 'ArrowDown' && nextRow < maxRows - 1) {\n e.preventDefault();\n nextRow += 1;\n } else if (key === 'ArrowUp' && nextRow > 0) {\n e.preventDefault();\n nextRow -= 1;\n } else if (key === 'Home') {\n e.preventDefault();\n nextRow = 0;\n nextColumn = 0;\n } else if (key === 'End') {\n e.preventDefault();\n nextRow = maxRows - 1;\n nextColumn = maxColumns - 1;\n }\n\n const defaultNewPosition = { column: nextColumn, row: nextRow };\n\n const newPosition = onActiveCellChange?.(e, curActiveCell, defaultNewPosition) || defaultNewPosition;\n\n if (newPosition.row === curActiveCell.row && newPosition.column === curActiveCell.column) {\n // Return original to avoid creating a new object if nothing\n // changed.\n return curActiveCell;\n }\n\n return newPosition;\n });\n }\n },\n [maxColumns, maxRows, onActiveCellChange],\n );\n\n const handleTableBlur: FocusEventHandler<HTMLTableElement> = useCallback((e) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node)) {\n setIsActive(false);\n setActiveCell(DEFAULT_ACTIVE_CELL);\n }\n }, []);\n\n return {\n activeCell,\n isActive,\n onTableKeyDown: handleKeyDown,\n onCellFocus: handleCellFocus,\n onTableBlur: handleTableBlur,\n };\n}\n"],"names":["useCallback","useState","DEFAULT_ACTIVE_CELL","row","column","ARROW_KEYS","Set","isArrowKey","key","has","useTableKeyboardNav","maxRows","maxColumns","onActiveCellChange","activeCell","setActiveCell","isActive","setIsActive","handleCellFocus","cellPosition","handleKeyDown","e","curActiveCell","nextRow","nextColumn","preventDefault","defaultNewPosition","newPosition","handleTableBlur","currentTarget","contains","relatedTarget","onTableKeyDown","onCellFocus","onTableBlur"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,WAAW,EAAEC,QAAQ,QAAQ,QAAQ;AA0B9C,MAAMC,sBAAyC;IAC7CC,KAAK;IACLC,QAAQ;AACV;AAEA,MAAMC,aAAa,IAAIC,IAAI;IAAC;IAAc;IAAa;IAAW;CAAY;AAE9E,SAASC,WAAWC,GAAW;IAC7B,OAAOH,WAAWI,GAAG,CAACD;AACxB;AAEA;;;;;CAKC,GACD,OAAO,SAASE,oBAAoB,EAAEC,OAAO,EAAEC,UAAU,EAAEC,kBAAkB,EAA4B;IAOvG,MAAM,CAACC,YAAYC,cAAc,GAAGd,SAA4BC;IAChE,MAAM,CAACc,UAAUC,YAAY,GAAGhB,SAAS;IAEzC,MAAMiB,kBAAkB,CAACC;QACvB,IAAIA,aAAaf,MAAM,KAAKU,WAAWV,MAAM,IAAIe,aAAahB,GAAG,KAAKW,WAAWX,GAAG,IAAIa,UAAU;YAChG;QACF;QACAC,YAAY;QACZF,cAAcI;IAChB;IAEA,MAAMC,gBAA8DpB,YAClE,CAACqB;QACC,uEAAuE;QACvE,iDAAiD;QACjD,mCAAmC;QACnC,MAAMb,MAAMa,EAAEb,GAAG;QAEjB,IAAID,WAAWC,QAAQA,QAAQ,UAAUA,QAAQ,SAASA,QAAQ,cAAcA,QAAQ,UAAU;YAChGO,cAAc,CAACO;gBACb,IAAIC,UAAkBD,cAAcnB,GAAG;gBACvC,IAAIqB,aAAqBF,cAAclB,MAAM;gBAE7C,IAAII,QAAQ,gBAAgBgB,aAAaZ,aAAa,GAAG;oBACvDS,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAegB,aAAa,GAAG;oBAChDH,EAAEI,cAAc;oBAChBD,cAAc;gBAChB,OAAO,IAAIhB,QAAQ,eAAee,UAAUZ,UAAU,GAAG;oBACvDU,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,aAAae,UAAU,GAAG;oBAC3CF,EAAEI,cAAc;oBAChBF,WAAW;gBACb,OAAO,IAAIf,QAAQ,QAAQ;oBACzBa,EAAEI,cAAc;oBAChBF,UAAU;oBACVC,aAAa;gBACf,OAAO,IAAIhB,QAAQ,OAAO;oBACxBa,EAAEI,cAAc;oBAChBF,UAAUZ,UAAU;oBACpBa,aAAaZ,aAAa;gBAC5B;gBAEA,MAAMc,qBAAqB;oBAAEtB,QAAQoB;oBAAYrB,KAAKoB;gBAAQ;gBAE9D,MAAMI,cAAcd,qBAAqBQ,GAAGC,eAAeI,uBAAuBA;gBAElF,IAAIC,YAAYxB,GAAG,KAAKmB,cAAcnB,GAAG,IAAIwB,YAAYvB,MAAM,KAAKkB,cAAclB,MAAM,EAAE;oBACxF,4DAA4D;oBAC5D,WAAW;oBACX,OAAOkB;gBACT;gBAEA,OAAOK;YACT;QACF;IACF,GACA;QAACf;QAAYD;QAASE;KAAmB;IAG3C,MAAMe,kBAAuD5B,YAAY,CAACqB;QACxE,IAAI,CAACA,EAAEQ,aAAa,CAACC,QAAQ,CAACT,EAAEU,aAAa,GAAW;YACtDd,YAAY;YACZF,cAAcb;QAChB;IACF,GAAG,EAAE;IAEL,OAAO;QACLY;QACAE;QACAgB,gBAAgBZ;QAChBa,aAAaf;QACbgB,aAAaN;IACf;AACF"}
|
|
@@ -200,7 +200,7 @@ export function ThresholdsEditor({ thresholds, onChange, hideDefault, disablePer
|
|
|
200
200
|
deleteThreshold(i);
|
|
201
201
|
},
|
|
202
202
|
onBlur: handleThresholdBlur
|
|
203
|
-
}, i)).
|
|
203
|
+
}, i)).toReversed(),
|
|
204
204
|
!hideDefault && /*#__PURE__*/ _jsxs(Stack, {
|
|
205
205
|
flex: 1,
|
|
206
206
|
direction: "row",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 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 { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n onChange: (thresholds: ThresholdOptions) => void;\n thresholds?: ThresholdOptions;\n hideDefault?: boolean;\n disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n thresholds,\n onChange,\n hideDefault,\n disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n const chartsTheme = useChartsTheme();\n const {\n thresholds: { defaultColor, palette },\n } = chartsTheme;\n const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n const steps = thresholds?.steps;\n // every time a new threshold is added, we want to focus the recently added input\n const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n const focusRef = useRef(false);\n useEffect(() => {\n if (!recentlyAddedInputRef.current || !focusRef.current) return;\n recentlyAddedInputRef.current?.focus();\n focusRef.current = false;\n }, [steps?.length]);\n\n const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n const step = draft.steps?.[i];\n if (step) {\n step.value = Number(e.target.value);\n }\n }),\n );\n }\n };\n\n const handleThresholdColorChange = (color: string, i: number): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n if (draft.steps !== undefined) {\n const step = draft.steps[i];\n if (step) {\n step.color = color;\n }\n }\n }),\n );\n }\n };\n\n const handleDefaultColorChange = (color: string): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.defaultColor = color;\n }),\n );\n } else {\n onChange({\n defaultColor: color,\n });\n }\n };\n\n // sort thresholds in ascending order every time an input blurs\n const handleThresholdBlur = (): void => {\n if (steps !== undefined) {\n const sortedSteps = [...steps];\n sortedSteps.sort((a, b) => a.value - b.value);\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.steps = sortedSteps;\n }),\n );\n }\n }\n };\n\n const deleteThreshold = (i: number): void => {\n if (thresholds !== undefined) {\n const updatedThresholds = produce(thresholds, (draft) => {\n if (draft.steps) {\n draft.steps.splice(i, 1);\n }\n });\n onChange(updatedThresholds);\n }\n };\n\n const addThresholdInput = (): void => {\n focusRef.current = true;\n if (thresholds === undefined) {\n onChange({\n steps: [{ value: DEFAULT_STEP }],\n });\n } else if (thresholds && thresholds.steps === undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.steps = [{ value: DEFAULT_STEP }];\n }),\n );\n } else {\n onChange(\n produce(thresholds, (draft) => {\n const steps = draft.steps;\n if (steps?.length) {\n const lastStep = steps[steps.length - 1];\n const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n } else if (steps) {\n steps.push({ value: DEFAULT_STEP });\n }\n }),\n );\n }\n };\n\n const handleModeChange = (event: React.MouseEvent, value: string): void => {\n const mode = value === 'percent' ? 'percent' : undefined;\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.mode = mode;\n }),\n );\n } else {\n onChange({ mode });\n }\n };\n\n return (\n <OptionsEditorGroup\n title=\"Thresholds\"\n icon={\n <InfoTooltip description=\"Add threshold\">\n <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n <PlusIcon />\n </IconButton>\n </InfoTooltip>\n }\n >\n <OptionsEditorControl\n label=\"Mode\"\n description=\"Percentage means thresholds relative to min & max\"\n control={\n <ToggleButtonGroup\n exclusive\n disabled={disablePercentMode}\n value={thresholds?.mode ?? 'absolute'}\n onChange={handleModeChange}\n sx={{ height: '36px', marginLeft: 'auto' }}\n >\n <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n Absolute\n </ToggleButton>\n <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n Percent\n </ToggleButton>\n </ToggleButtonGroup>\n }\n />\n {steps &&\n steps\n .map((step, i) => (\n <ThresholdInput\n inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n key={i}\n label={`T${i + 1}`}\n color={step.color ?? palette[i] ?? defaultThresholdColor}\n value={step.value}\n mode={thresholds?.mode}\n onColorChange={(color) => handleThresholdColorChange(color, i)}\n onChange={(e) => {\n handleThresholdValueChange(e, i);\n }}\n onDelete={() => {\n deleteThreshold(i);\n }}\n onBlur={handleThresholdBlur}\n />\n ))\n .reverse()}\n {!hideDefault && (\n <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n <Typography>Default</Typography>\n </Stack>\n )}\n </OptionsEditorGroup>\n );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n return (\n '#' +\n Math.floor(Math.random() * 16777216)\n .toString(16)\n .padStart(6, '0')\n );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","reverse","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/ThresholdsEditor/ThresholdsEditor.tsx"],"sourcesContent":["// Copyright 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 { IconButton, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';\nimport { Stack } from '@mui/system';\nimport { produce } from 'immer';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useRef } from 'react';\n\nimport { OptionsColorPicker } from '../ColorPicker/OptionsColorPicker';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { InfoTooltip } from '../InfoTooltip';\nimport type { ThresholdOptions } from '../model';\nimport { OptionsEditorControl, OptionsEditorGroup } from '../OptionsEditorLayout';\nimport { ThresholdInput } from './ThresholdInput';\n\nexport interface ThresholdsEditorProps {\n onChange: (thresholds: ThresholdOptions) => void;\n thresholds?: ThresholdOptions;\n hideDefault?: boolean;\n disablePercentMode?: boolean;\n}\n\nconst DEFAULT_STEP = 10;\n\nexport function ThresholdsEditor({\n thresholds,\n onChange,\n hideDefault,\n disablePercentMode,\n}: ThresholdsEditorProps): ReactElement {\n const chartsTheme = useChartsTheme();\n const {\n thresholds: { defaultColor, palette },\n } = chartsTheme;\n const defaultThresholdColor = thresholds?.defaultColor ?? defaultColor;\n\n const steps = thresholds?.steps;\n // every time a new threshold is added, we want to focus the recently added input\n const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n const focusRef = useRef(false);\n useEffect(() => {\n if (!recentlyAddedInputRef.current || !focusRef.current) return;\n recentlyAddedInputRef.current?.focus();\n focusRef.current = false;\n }, [steps?.length]);\n\n const handleThresholdValueChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n const step = draft.steps?.[i];\n if (step) {\n step.value = Number(e.target.value);\n }\n }),\n );\n }\n };\n\n const handleThresholdColorChange = (color: string, i: number): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n if (draft.steps !== undefined) {\n const step = draft.steps[i];\n if (step) {\n step.color = color;\n }\n }\n }),\n );\n }\n };\n\n const handleDefaultColorChange = (color: string): void => {\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.defaultColor = color;\n }),\n );\n } else {\n onChange({\n defaultColor: color,\n });\n }\n };\n\n // sort thresholds in ascending order every time an input blurs\n const handleThresholdBlur = (): void => {\n if (steps !== undefined) {\n const sortedSteps = [...steps];\n sortedSteps.sort((a, b) => a.value - b.value);\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.steps = sortedSteps;\n }),\n );\n }\n }\n };\n\n const deleteThreshold = (i: number): void => {\n if (thresholds !== undefined) {\n const updatedThresholds = produce(thresholds, (draft) => {\n if (draft.steps) {\n draft.steps.splice(i, 1);\n }\n });\n onChange(updatedThresholds);\n }\n };\n\n const addThresholdInput = (): void => {\n focusRef.current = true;\n if (thresholds === undefined) {\n onChange({\n steps: [{ value: DEFAULT_STEP }],\n });\n } else if (thresholds && thresholds.steps === undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.steps = [{ value: DEFAULT_STEP }];\n }),\n );\n } else {\n onChange(\n produce(thresholds, (draft) => {\n const steps = draft.steps;\n if (steps?.length) {\n const lastStep = steps[steps.length - 1];\n const color = palette[steps.length] ?? getRandomColor(); // we will assign color from the palette first, then generate random color\n steps.push({ color, value: (lastStep?.value ?? 0) + DEFAULT_STEP }); // set new threshold value to last step value + 10\n } else if (steps) {\n steps.push({ value: DEFAULT_STEP });\n }\n }),\n );\n }\n };\n\n const handleModeChange = (event: React.MouseEvent, value: string): void => {\n const mode = value === 'percent' ? 'percent' : undefined;\n if (thresholds !== undefined) {\n onChange(\n produce(thresholds, (draft) => {\n draft.mode = mode;\n }),\n );\n } else {\n onChange({ mode });\n }\n };\n\n return (\n <OptionsEditorGroup\n title=\"Thresholds\"\n icon={\n <InfoTooltip description=\"Add threshold\">\n <IconButton size=\"small\" aria-label=\"add threshold\" onClick={addThresholdInput}>\n <PlusIcon />\n </IconButton>\n </InfoTooltip>\n }\n >\n <OptionsEditorControl\n label=\"Mode\"\n description=\"Percentage means thresholds relative to min & max\"\n control={\n <ToggleButtonGroup\n exclusive\n disabled={disablePercentMode}\n value={thresholds?.mode ?? 'absolute'}\n onChange={handleModeChange}\n sx={{ height: '36px', marginLeft: 'auto' }}\n >\n <ToggleButton aria-label=\"absolute\" value=\"absolute\" sx={{ fontWeight: 500 }}>\n Absolute\n </ToggleButton>\n <ToggleButton aria-label=\"percent\" value=\"percent\" sx={{ fontWeight: 500 }}>\n Percent\n </ToggleButton>\n </ToggleButtonGroup>\n }\n />\n {steps &&\n steps\n .map((step, i) => (\n <ThresholdInput\n inputRef={i === steps.length - 1 ? recentlyAddedInputRef : undefined}\n key={i}\n label={`T${i + 1}`}\n color={step.color ?? palette[i] ?? defaultThresholdColor}\n value={step.value}\n mode={thresholds?.mode}\n onColorChange={(color) => handleThresholdColorChange(color, i)}\n onChange={(e) => {\n handleThresholdValueChange(e, i);\n }}\n onDelete={() => {\n deleteThreshold(i);\n }}\n onBlur={handleThresholdBlur}\n />\n ))\n .toReversed()}\n {!hideDefault && (\n <Stack flex={1} direction=\"row\" alignItems=\"center\" spacing={1}>\n <OptionsColorPicker label=\"default\" color={defaultThresholdColor} onColorChange={handleDefaultColorChange} />\n <Typography>Default</Typography>\n </Stack>\n )}\n </OptionsEditorGroup>\n );\n}\n\n// https://www.paulirish.com/2009/random-hex-color-code-snippets/\nconst getRandomColor = (): string => {\n return (\n '#' +\n Math.floor(Math.random() * 16777216)\n .toString(16)\n .padStart(6, '0')\n );\n};\n"],"names":["IconButton","ToggleButton","ToggleButtonGroup","Typography","Stack","produce","PlusIcon","React","useEffect","useRef","OptionsColorPicker","useChartsTheme","InfoTooltip","OptionsEditorControl","OptionsEditorGroup","ThresholdInput","DEFAULT_STEP","ThresholdsEditor","thresholds","onChange","hideDefault","disablePercentMode","chartsTheme","defaultColor","palette","defaultThresholdColor","steps","recentlyAddedInputRef","focusRef","current","focus","length","handleThresholdValueChange","e","i","undefined","draft","step","value","Number","target","handleThresholdColorChange","color","handleDefaultColorChange","handleThresholdBlur","sortedSteps","sort","a","b","deleteThreshold","updatedThresholds","splice","addThresholdInput","lastStep","getRandomColor","push","handleModeChange","event","mode","title","icon","description","size","aria-label","onClick","label","control","exclusive","disabled","sx","height","marginLeft","fontWeight","map","inputRef","onColorChange","onDelete","onBlur","toReversed","flex","direction","alignItems","spacing","Math","floor","random","toString","padStart"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/DateTimeRangePicker.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,MAAM,WAAW,qBAAqB;IACpC,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,wDAK7B,qBAAqB,KAAG,YAuJ1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,cAAc,EAAqB,MAAM,kBAAkB,CAAC;AAI1E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAO9D,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,IAAI,CAAC;CACvD;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,mBAA0B,EAC1B,QAAQ,EAAE,YAAY,EACtB,eAAe,EACf,gBAAgB,GACjB,EAAE,sBAAsB,GAAG,YAAY,CAsJvC"}
|
|
@@ -52,14 +52,7 @@ import { buildCustomTimeOption, formatTimeRange } from "./utils.js";
|
|
|
52
52
|
id: o.value,
|
|
53
53
|
label: o.display
|
|
54
54
|
}));
|
|
55
|
-
|
|
56
|
-
{
|
|
57
|
-
const current = tzOptions.find((o)=>o.value === timeZone);
|
|
58
|
-
if (current) tzAutocompleteValue = {
|
|
59
|
-
id: current.value,
|
|
60
|
-
label: current.display
|
|
61
|
-
};
|
|
62
|
-
}
|
|
55
|
+
const tzAutocompleteValue = tzAutocompleteOptions.find((option)=>option.id === timeZone);
|
|
63
56
|
return /*#__PURE__*/ _jsxs(_Fragment, {
|
|
64
57
|
children: [
|
|
65
58
|
/*#__PURE__*/ _jsx(Popover, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 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, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport type { SettingsAutocompleteOption } from '../SettingsAutocomplete';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n /**\n * The current value of the time range.\n */\n value: TimeRangeValue;\n /**\n * The list of time options to display in the dropdown.\n * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n */\n timeOptions: TimeOption[];\n /**\n * The callback to call when the time range changes.\n */\n onChange: (value: TimeRangeValue) => void;\n /**\n * Custom line height for the select component.\n */\n height?: string;\n /**\n * Whether to show the custom time range option.\n * Defaults to true.\n */\n showCustomTimeRange?: boolean;\n /** Optional explicit timezone and change handler to enable changing tz from the selector */\n timeZone?: string;\n timeZoneOptions?: TimeZoneOption[];\n onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n value,\n timeOptions,\n onChange,\n height,\n showCustomTimeRange = true,\n timeZone: timeZoneProp,\n timeZoneOptions,\n onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n const { timeZone: ctxTimeZone } = useTimeZone();\n const timeZone = timeZoneProp ?? ctxTimeZone;\n\n const anchorEl = useRef();\n const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n const convertedTimeRange = useMemo(() => {\n return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n }, [value]);\n\n const lastOption = useMemo(\n () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n [value, timeZone],\n );\n\n const [open, setOpen] = useState(false);\n const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n const tzOpen = Boolean(tzAnchorEl);\n const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n const tzOffset = getGMTOffset(timeZone);\n const localOffset = getGMTOffset('local');\n const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n let tzAutocompleteValue: SettingsAutocompleteOption | undefined = undefined;\n {\n const current = tzOptions.find((o) => o.value === timeZone);\n if (current) tzAutocompleteValue = { id: current.value, label: current.display };\n }\n\n return (\n <>\n <Popover\n anchorEl={tzAnchorEl}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n open={tzOpen}\n onClose={() => setTzAnchorEl(null)}\n sx={(theme) => ({ padding: theme.spacing(1) })}\n >\n <Box\n sx={{ p: 1, minWidth: 260 }}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n <SettingsAutocomplete\n options={tzAutocompleteOptions}\n value={tzAutocompleteValue}\n onChange={(_e, option) => {\n if (option) {\n const selected = tzOptions.find((o) => o.value === option.id);\n if (selected) onTimeZoneChange?.(selected);\n }\n setTzAnchorEl(null);\n }}\n disableClearable\n renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n />\n </Box>\n </Popover>\n <Popover\n anchorEl={anchorEl.current}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n open={showCustomDateSelector}\n onClose={() => setShowCustomDateSelector(false)}\n sx={(theme) => ({ padding: theme.spacing(2) })}\n >\n <DateTimeRangePicker\n initialTimeRange={convertedTimeRange}\n onChange={(value: AbsoluteTimeRange) => {\n onChange(value);\n setShowCustomDateSelector(false);\n setOpen(false);\n }}\n onCancel={() => setShowCustomDateSelector(false)}\n timeZone={timeZone}\n />\n </Popover>\n <Box ref={anchorEl}>\n <Select\n open={open}\n value={formatTimeRange(value, timeZone)}\n onClick={() => setOpen(!open)}\n IconComponent={Calendar}\n renderValue={() => (\n <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n <span>\n {timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))\n ?.display ?? formatTimeRange(value, timeZone)}\n </span>\n {tzOffset !== localOffset && (\n <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n )}\n </Stack>\n )}\n inputProps={{ 'aria-label': `Select time range. Currently set to ${value}` }}\n sx={{\n '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n }}\n >\n <MenuItem\n disableRipple\n onClick={(e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n >\n <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n </Box>\n <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n <IconButton\n size=\"small\"\n aria-label=\"Select timezone\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n setTzAnchorEl(e.currentTarget);\n }}\n >\n <EarthIcon fontSize=\"small\" />\n </IconButton>\n </Box>\n </Box>\n </MenuItem>\n {timeOptions.map((item, idx) => (\n <MenuItem\n key={idx}\n value={formatTimeRange(item.value, timeZone)}\n onClick={() => {\n onChange(item.value);\n }}\n >\n {item.display}\n </MenuItem>\n ))}\n {showCustomTimeRange && (\n <MenuItem\n value={formatTimeRange(lastOption.value, timeZone)}\n onClick={() => setShowCustomDateSelector(true)}\n >\n {lastOption.display}\n </MenuItem>\n )}\n </Select>\n </Box>\n </>\n );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useMemo","useRef","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","current","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","option","selected","disableClearable","renderInput","params","placeholder","size","initialTimeRange","onCancel","ref","IconComponent","renderValue","direction","alignItems","span","opt","typography","color","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","disableRipple","preventDefault","cursor","backgroundColor","py","px","width","justifyContent","flexDirection","mt","pr","ml","aria-label","currentTarget","fontSize","item","idx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright 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, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n /**\n * The current value of the time range.\n */\n value: TimeRangeValue;\n /**\n * The list of time options to display in the dropdown.\n * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n */\n timeOptions: TimeOption[];\n /**\n * The callback to call when the time range changes.\n */\n onChange: (value: TimeRangeValue) => void;\n /**\n * Custom line height for the select component.\n */\n height?: string;\n /**\n * Whether to show the custom time range option.\n * Defaults to true.\n */\n showCustomTimeRange?: boolean;\n /** Optional explicit timezone and change handler to enable changing tz from the selector */\n timeZone?: string;\n timeZoneOptions?: TimeZoneOption[];\n onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n value,\n timeOptions,\n onChange,\n height,\n showCustomTimeRange = true,\n timeZone: timeZoneProp,\n timeZoneOptions,\n onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n const { timeZone: ctxTimeZone } = useTimeZone();\n const timeZone = timeZoneProp ?? ctxTimeZone;\n\n const anchorEl = useRef();\n const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n const convertedTimeRange = useMemo(() => {\n return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n }, [value]);\n\n const lastOption = useMemo(\n () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n [value, timeZone],\n );\n\n const [open, setOpen] = useState(false);\n const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n const tzOpen = Boolean(tzAnchorEl);\n const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n const tzOffset = getGMTOffset(timeZone);\n const localOffset = getGMTOffset('local');\n const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n const tzAutocompleteValue = tzAutocompleteOptions.find((option) => option.id === timeZone);\n\n return (\n <>\n <Popover\n anchorEl={tzAnchorEl}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n open={tzOpen}\n onClose={() => setTzAnchorEl(null)}\n sx={(theme) => ({ padding: theme.spacing(1) })}\n >\n <Box\n sx={{ p: 1, minWidth: 260 }}\n onClick={(e) => {\n e.stopPropagation();\n }}\n >\n <SettingsAutocomplete\n options={tzAutocompleteOptions}\n value={tzAutocompleteValue}\n onChange={(_e, option) => {\n if (option) {\n const selected = tzOptions.find((o) => o.value === option.id);\n if (selected) onTimeZoneChange?.(selected);\n }\n setTzAnchorEl(null);\n }}\n disableClearable\n renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n />\n </Box>\n </Popover>\n <Popover\n anchorEl={anchorEl.current}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n open={showCustomDateSelector}\n onClose={() => setShowCustomDateSelector(false)}\n sx={(theme) => ({ padding: theme.spacing(2) })}\n >\n <DateTimeRangePicker\n initialTimeRange={convertedTimeRange}\n onChange={(value: AbsoluteTimeRange) => {\n onChange(value);\n setShowCustomDateSelector(false);\n setOpen(false);\n }}\n onCancel={() => setShowCustomDateSelector(false)}\n timeZone={timeZone}\n />\n </Popover>\n <Box ref={anchorEl}>\n <Select\n open={open}\n value={formatTimeRange(value, timeZone)}\n onClick={() => setOpen(!open)}\n IconComponent={Calendar}\n renderValue={() => (\n <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n <span>\n {timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))\n ?.display ?? formatTimeRange(value, timeZone)}\n </span>\n {tzOffset !== localOffset && (\n <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n )}\n </Stack>\n )}\n inputProps={{ 'aria-label': `Select time range. Currently set to ${value}` }}\n sx={{\n '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n }}\n >\n <MenuItem\n disableRipple\n onClick={(e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n }}\n sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n >\n <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n </Box>\n <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n <IconButton\n size=\"small\"\n aria-label=\"Select timezone\"\n onClick={(e) => {\n e.preventDefault();\n e.stopPropagation();\n setTzAnchorEl(e.currentTarget);\n }}\n >\n <EarthIcon fontSize=\"small\" />\n </IconButton>\n </Box>\n </Box>\n </MenuItem>\n {timeOptions.map((item, idx) => (\n <MenuItem\n key={idx}\n value={formatTimeRange(item.value, timeZone)}\n onClick={() => {\n onChange(item.value);\n }}\n >\n {item.display}\n </MenuItem>\n ))}\n {showCustomTimeRange && (\n <MenuItem\n value={formatTimeRange(lastOption.value, timeZone)}\n onClick={() => setShowCustomDateSelector(true)}\n >\n {lastOption.display}\n </MenuItem>\n )}\n </Select>\n </Box>\n </>\n );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useMemo","useRef","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","option","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","selected","disableClearable","renderInput","params","placeholder","size","current","initialTimeRange","onCancel","ref","IconComponent","renderValue","direction","alignItems","span","opt","typography","color","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","disableRipple","preventDefault","cursor","backgroundColor","py","px","width","justifyContent","flexDirection","mt","pr","ml","aria-label","currentTarget","fontSize","item","idx"],"mappings":"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"}
|
|
@@ -22,5 +22,5 @@ export interface TimeChartTooltipProps {
|
|
|
22
22
|
seriesFormatMap?: Map<string, FormatOptions>;
|
|
23
23
|
wrapLabels?: boolean;
|
|
24
24
|
}
|
|
25
|
-
export declare const TimeChartTooltip: import("react").
|
|
25
|
+
export declare const TimeChartTooltip: import("react").MemoExoticComponent<({ containerId, chartRef, data, seriesMapping, enablePinning, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos, }: TimeChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null>;
|
|
26
26
|
//# sourceMappingURL=TimeChartTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMzD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMzD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,qKAW1B,qBAAqB,oDAsFtB,CAAC"}
|
|
@@ -18,7 +18,7 @@ export function TooltipContent(props) {
|
|
|
18
18
|
const { series, wrapLabels } = props;
|
|
19
19
|
const sortedFocusedSeries = useMemo(()=>{
|
|
20
20
|
if (series === null) return null;
|
|
21
|
-
return series.
|
|
21
|
+
return series.toSorted((a, b)=>a.y > b.y ? -1 : 1);
|
|
22
22
|
}, [
|
|
23
23
|
series
|
|
24
24
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport { SeriesInfo } from './SeriesInfo';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipContentProps {\n series: NearbySeriesArray | null;\n wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n const { series, wrapLabels } = props;\n\n const sortedFocusedSeries = useMemo(() => {\n if (series === null) return null;\n return series.
|
|
1
|
+
{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"sourcesContent":["// Copyright 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 } from '@mui/material';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport { SeriesInfo } from './SeriesInfo';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipContentProps {\n series: NearbySeriesArray | null;\n wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n const { series, wrapLabels } = props;\n\n const sortedFocusedSeries = useMemo(() => {\n if (series === null) return null;\n return series.toSorted((a, b) => (a.y > b.y ? -1 : 1));\n }, [series]);\n\n if (series === null || sortedFocusedSeries === null) {\n return null;\n }\n // TODO: use react-virtuoso to improve performance\n return (\n <Box\n sx={(theme) => ({\n display: 'table',\n padding: theme.spacing(0.5, 2),\n })}\n >\n {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n if (datumIdx === null || seriesIdx === null) return null;\n const key = seriesIdx.toString() + datumIdx.toString();\n\n return (\n <SeriesInfo\n key={key}\n seriesName={seriesName}\n y={y}\n formattedY={formattedY}\n markerColor={markerColor}\n totalSeries={sortedFocusedSeries.length}\n wrapLabels={wrapLabels}\n emphasizeText={isClosestToCursor}\n />\n );\n })}\n </Box>\n );\n}\n"],"names":["Box","useMemo","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","toSorted","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,UAAU,QAAQ,kBAAe;AAQ1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBN,QAAQ;QAClC,IAAII,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,QAAQ,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACrD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACP;QACCY,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}
|
|
@@ -8,5 +8,5 @@ export interface TooltipHeaderProps {
|
|
|
8
8
|
onShowAllClick?: (checked: boolean) => void;
|
|
9
9
|
onUnpinClick?: () => void;
|
|
10
10
|
}
|
|
11
|
-
export declare const TooltipHeader: import("react").
|
|
11
|
+
export declare const TooltipHeader: import("react").MemoExoticComponent<({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning, onShowAllClick, onUnpinClick, }: TooltipHeaderProps) => import("react/jsx-runtime").JSX.Element | null>;
|
|
12
12
|
//# sourceMappingURL=TooltipHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,oJAQvB,kBAAkB,oDAoHnB,CAAC"}
|
|
@@ -32,7 +32,7 @@ function gatherCandidates(data, seriesMapping, closestTimestamp, cursorX, cursor
|
|
|
32
32
|
sortedTimestamps.push(ts);
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
sortedTimestamps = sortedTimestamps.
|
|
35
|
+
sortedTimestamps = sortedTimestamps.toSorted((a, b)=>a - b);
|
|
36
36
|
}
|
|
37
37
|
// Bar-only indexes: ECharts groups bars independently of lines, so bar-relative index and count must exclude line series.
|
|
38
38
|
const barSeriesIndexes = [];
|