@perses-dev/timeseries-chart-plugin 0.14.0-beta.7 → 0.14.0-rc.0

package/lib/VisualOptionsEditor.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Slider, Switch, ToggleButton, ToggleButtonGroup } from "@mui/material";
 import { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from "@perses-dev/components";
 import { produce } from "immer";
+import { PaletteSelector } from "./components/PaletteSelector.js";
 import { DEFAULT_AREA_OPACITY, DEFAULT_CONNECT_NULLS, DEFAULT_LINE_WIDTH, DEFAULT_LINE_STYLE, DEFAULT_POINT_RADIUS, POINT_SIZE_OFFSET, STACK_CONFIG, STACK_OPTIONS, LINE_STYLE_CONFIG, VISUAL_CONFIG, DEFAULT_DISPLAY } from "./time-series-chart-model.js";
 export function VisualOptionsEditor({ value, onChange }) {
     const handleLineWidthChange = (_, sliderValue)=>{
@@ -58,6 +59,13 @@ export function VisualOptionsEditor({ value, onChange }) {
                     disableClearable: true
                 })
             }),
+            /*#__PURE__*/ _jsx(PaletteSelector, {
+                value: value.palette,
+                onChange: (palette)=>onChange({
+                        ...value,
+                        palette
+                    })
+            }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Display",
                 control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {

package/lib/VisualOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/VisualOptionsEditor.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 { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport type { ReactElement } from 'react';\n\nimport type { StackOptions, TimeSeriesChartVisualOptions } from './time-series-chart-model';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_LINE_STYLE,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  STACK_OPTIONS,\n  LINE_STYLE_CONFIG,\n  VISUAL_CONFIG,\n  DEFAULT_DISPLAY,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      }),\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      }),\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id,\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display ?? DEFAULT_DISPLAY}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {value.display === 'line' && (\n        <>\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineWidth.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.lineWidth.testId}\n                value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.lineWidth.step}\n                marks\n                min={VISUAL_CONFIG.lineWidth.min}\n                max={VISUAL_CONFIG.lineWidth.max}\n                onChange={handleLineWidthChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineStyle.label}\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={value.lineStyle ?? DEFAULT_LINE_STYLE}\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    lineStyle: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                  <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.areaOpacity.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.areaOpacity.testId}\n                value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.areaOpacity.step}\n                marks\n                min={VISUAL_CONFIG.areaOpacity.min}\n                max={VISUAL_CONFIG.areaOpacity.max}\n                onChange={handleAreaOpacityChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.connectNulls.label}\n            control={\n              <Switch\n                checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n                onChange={(e) => {\n                  onChange({\n                    ...value,\n                    connectNulls: e.target.checked,\n                  });\n                }}\n              />\n            }\n          />\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","produce","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","LINE_STYLE_CONFIG","VISUAL_CONFIG","DEFAULT_DISPLAY","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","id","options","__","updatedValue","disabled","disableClearable","color","exclusive","display","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","lineStyle","Object","entries","map","styleValue","config","connectNulls","checked","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/VisualOptionsEditor.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 { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport type { ReactElement } from 'react';\n\nimport { PaletteSelector } from './components/PaletteSelector';\nimport type { StackOptions, TimeSeriesChartVisualOptions } from './time-series-chart-model';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_LINE_STYLE,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  STACK_OPTIONS,\n  LINE_STYLE_CONFIG,\n  VISUAL_CONFIG,\n  DEFAULT_DISPLAY,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      }),\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      }),\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id,\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <PaletteSelector value={value.palette} onChange={(palette) => onChange({ ...value, palette })} />\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display ?? DEFAULT_DISPLAY}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {value.display === 'line' && (\n        <>\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineWidth.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.lineWidth.testId}\n                value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.lineWidth.step}\n                marks\n                min={VISUAL_CONFIG.lineWidth.min}\n                max={VISUAL_CONFIG.lineWidth.max}\n                onChange={handleLineWidthChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineStyle.label}\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={value.lineStyle ?? DEFAULT_LINE_STYLE}\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    lineStyle: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                  <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.areaOpacity.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.areaOpacity.testId}\n                value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.areaOpacity.step}\n                marks\n                min={VISUAL_CONFIG.areaOpacity.min}\n                max={VISUAL_CONFIG.areaOpacity.max}\n                onChange={handleAreaOpacityChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.connectNulls.label}\n            control={\n              <Switch\n                checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n                onChange={(e) => {\n                  onChange({\n                    ...value,\n                    connectNulls: e.target.checked,\n                  });\n                }}\n              />\n            }\n          />\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","produce","PaletteSelector","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","LINE_STYLE_CONFIG","VISUAL_CONFIG","DEFAULT_DISPLAY","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","id","options","__","updatedValue","disabled","disableClearable","palette","color","exclusive","display","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","lineStyle","Object","entries","map","styleValue","config","connectNulls","checked","e","target"],"mappings":"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"}

package/lib/annotations/AnnotationTooltip.d.ts

@@ -1,6 +1,7 @@
 import type { CursorCoordinates } from '@perses-dev/components';
-import type { LineSeriesOption } from 'echarts';
+import type { LineSeriesOption, YAXisComponentOption } from 'echarts';
 import type { TimeSeriesAnnotation } from '../utils/annotation';
+export declare const ANNOTATION_Y_AXIS: YAXisComponentOption;
 export interface AnnotationTooltipProps {
     annotation: TimeSeriesAnnotation;
     containerId?: string;
@@ -14,5 +15,5 @@ export declare function AnnotationTooltip({ annotation, containerId, formatWithU
  * Build ECharts series options for rendering annotations as markArea (range),
  * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).
  */
-export declare function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined): LineSeriesOption[];
+export declare function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined, annotationYAxisIndex: number): LineSeriesOption[];
 //# sourceMappingURL=AnnotationTooltip.d.ts.map

package/lib/annotations/AnnotationTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotationTooltip.d.ts","sourceRoot":"","sources":["../../../src/annotations/AnnotationTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAYhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2G7C;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,oBAAoB,EAAE,GAAG,SAAS,GAAG,gBAAgB,EAAE,CAwHzG"}
+{"version":3,"file":"AnnotationTooltip.d.ts","sourceRoot":"","sources":["../../../src/annotations/AnnotationTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAYhE,OAAO,KAAK,EAAE,gBAAgB,EAA4B,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAKhG,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAGhE,eAAO,MAAM,iBAAiB,EAAE,oBAM/B,CAAC;AAEF,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,oBAAoB,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IACrE,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,SAAS,EACT,aAAoB,EACpB,YAAY,GACb,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2G7C;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,oBAAoB,EAAE,GAAG,SAAS,EAC/C,oBAAoB,EAAE,MAAM,GAC3B,gBAAgB,EAAE,CAiIpB"}

package/lib/annotations/AnnotationTooltip.js

@@ -17,6 +17,16 @@ import { DEFAULT_ANNOTATION_COLOR } from "@perses-dev/plugin-system";
 import Pin from "mdi-material-ui/Pin";
 import PinOutline from "mdi-material-ui/PinOutline";
 import useResizeObserver from "use-resize-observer";
+// Hidden Y axis to guarantee annotations being shown
+export const ANNOTATION_Y_AXIS = {
+    type: 'value',
+    show: false,
+    min: 0,
+    max: 1,
+    axisLabel: {
+        show: false
+    }
+};
 export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZone, pinnedPos, enablePinning = true, onUnpinClick }) {
     const mousePos = useMousePosition();
     const { height, width, ref: tooltipRef } = useResizeObserver();
@@ -198,11 +208,10 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
 /**
  * Build ECharts series options for rendering annotations as markArea (range),
  * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).
- */ export function buildAnnotationSeries(annotations) {
+ */ export function buildAnnotationSeries(annotations, annotationYAxisIndex) {
     if (!annotations?.length) return [];
     const markAreaData = [];
     const markLineData = [];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const markPointData = [];
     annotations.forEach((annotation, index)=>{
         const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;
@@ -251,6 +260,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
                 false
             ]){
                 markPointData.push({
+                    name: '',
                     coord: [
                         isStart ? annotation.start : annotation.end,
                         0
@@ -292,6 +302,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
             });
             // Add point marker
             markPointData.push({
+                name: '',
                 coord: [
                     annotation.start,
                     0
@@ -317,6 +328,7 @@ export function AnnotationTooltip({ annotation, containerId, formatWithUserTimeZ
     const series = {
         type: 'line',
         data: [],
+        yAxisIndex: annotationYAxisIndex,
         silent: false,
         markArea: markAreaData.length > 0 ? {
             silent: true,

package/lib/annotations/AnnotationTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/annotations/AnnotationTooltip.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, Divider, Portal, Stack, Typography } from '@mui/material';\nimport type { CursorCoordinates } from '@perses-dev/components';\nimport {\n  assembleTransform,\n  getDateAndTime,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '@perses-dev/components';\nimport { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system';\nimport type { LineSeriesOption } from 'echarts';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TimeSeriesAnnotation } from '../utils/annotation';\n\nexport interface AnnotationTooltipProps {\n  annotation: TimeSeriesAnnotation;\n  containerId?: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\nexport function AnnotationTooltip({\n  annotation,\n  containerId,\n  formatWithUserTimeZone,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: AnnotationTooltipProps): JSX.Element | null {\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const start = getDateAndTime(annotation.start, formatWithUserTimeZone);\n  const end = annotation.end !== undefined ? getDateAndTime(annotation.end, formatWithUserTimeZone) : null;\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box\n                sx={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: '50%',\n                  backgroundColor: annotation.color ?? DEFAULT_ANNOTATION_COLOR,\n                  marginRight: 1,\n                  flexShrink: 0,\n                }}\n              />\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography variant=\"caption\">\n                  {start.formattedDate} - <strong>{start.formattedTime}</strong>\n                </Typography>\n                {end && (\n                  <>\n                    <Typography variant=\"caption\">{' → '}</Typography>\n                    <Typography variant=\"caption\">\n                      {end.formattedDate} - <strong>{end.formattedTime}</strong>\n                    </Typography>\n                  </>\n                )}\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <Pin\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ fontSize: 16, cursor: 'pointer' }}\n                    />\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Box sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {annotation.title && (\n              <Typography variant=\"caption\" sx={{ display: 'block', fontWeight: 'bold', marginBottom: 0.5 }}>\n                {annotation.title}\n              </Typography>\n            )}\n            {annotation.legend && (\n              <Typography variant=\"caption\" sx={{ display: 'block', marginBottom: 0.5 }}>\n                {annotation.legend}\n              </Typography>\n            )}\n            {annotation.tags && Object.keys(annotation.tags).length > 0 && (\n              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, marginTop: 0.5 }}>\n                {Object.entries(annotation.tags).map(([key, value]) => (\n                  <Box\n                    key={key}\n                    sx={(theme) => ({\n                      backgroundColor: theme.palette.grey['700'],\n                      borderRadius: '4px',\n                      padding: '2px 6px',\n                      fontSize: '0.7rem',\n                      fontFamily: 'monospace',\n                    })}\n                  >\n                    {key}: {value}\n                  </Box>\n                ))}\n              </Box>\n            )}\n          </Box>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\n/**\n * Build ECharts series options for rendering annotations as markArea (range),\n * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).\n */\nexport function buildAnnotationSeries(annotations: TimeSeriesAnnotation[] | undefined): LineSeriesOption[] {\n  if (!annotations?.length) return [];\n\n  const markAreaData: Array<[{ xAxis: number; itemStyle?: { color: string; opacity: number } }, { xAxis: number }]> =\n    [];\n  const markLineData: Array<{\n    xAxis: number;\n    lineStyle?: { color: string; width: number; type: 'dashed' | 'solid' | 'dotted' };\n    label?: { show: boolean };\n    annotationIndex?: number;\n  }> = [];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const markPointData: any[] = [];\n\n  annotations.forEach((annotation, index) => {\n    const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;\n    const opacity = 0.3;\n\n    if (annotation.end !== undefined) {\n      // Range annotation - use markArea and markLine (silent) + markers at start/end\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markLineData.push({\n        xAxis: annotation.end,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markAreaData.push([\n        {\n          xAxis: annotation.start,\n          itemStyle: { color, opacity },\n        },\n        { xAxis: annotation.end },\n      ]);\n\n      // Add start and end markers\n      for (const isStart of [true, false]) {\n        markPointData.push({\n          coord: [isStart ? annotation.start : annotation.end, 0],\n          symbol: 'triangle',\n          symbolSize: [12, 12],\n          symbolRotate: 0,\n          symbolOffset: [0, 4], // Position below X-axis\n          itemStyle: { color },\n          annotationIndex: index,\n          emphasis: {\n            disabled: true,\n          },\n          isStart: isStart,\n          isEnd: !isStart,\n        });\n      }\n    } else {\n      // Point annotation - use markLine (silent) + single marker\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      // Add point marker\n      markPointData.push({\n        coord: [annotation.start, 0],\n        symbol: 'triangle',\n        symbolSize: [12, 10],\n        symbolRotate: 0,\n        symbolOffset: [0, '120%'], // Position below X-axis\n        itemStyle: { color },\n        annotationIndex: index,\n        isPoint: true,\n      });\n    }\n  });\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    data: [],\n    silent: false,\n    markArea:\n      markAreaData.length > 0\n        ? {\n            silent: true, // Make area silent, only markers are interactive\n            data: markAreaData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n    markLine:\n      markLineData.length > 0\n        ? {\n            silent: true, // Non-interactive: hovering the dashed line keeps the TimeSeries tooltip\n            symbol: ['none', 'none'],\n            data: markLineData,\n            lineStyle: {\n              type: 'dashed',\n            },\n          }\n        : undefined,\n    markPoint:\n      markPointData.length > 0\n        ? {\n            silent: false, // Markers are interactive\n            data: markPointData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n  };\n\n  return [series];\n}\n"],"names":["Box","Divider","Portal","Stack","Typography","assembleTransform","getDateAndTime","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","DEFAULT_ANNOTATION_COLOR","Pin","PinOutline","useResizeObserver","AnnotationTooltip","annotation","containerId","formatWithUserTimeZone","pinnedPos","enablePinning","onUnpinClick","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","start","end","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","borderRadius","color","marginRight","flexShrink","flexGrow","minWidth","variant","formattedDate","strong","formattedTime","direction","marginLeft","fontSize","verticalAlign","onClick","cursor","borderColor","title","fontWeight","marginBottom","legend","tags","Object","keys","length","flexWrap","gap","marginTop","entries","map","key","value","fontFamily","buildAnnotationSeries","annotations","markAreaData","markLineData","markPointData","forEach","index","opacity","push","xAxis","lineStyle","type","label","show","annotationIndex","itemStyle","isStart","coord","symbol","symbolSize","symbolRotate","symbolOffset","emphasis","disabled","isEnd","isPoint","series","data","silent","markArea","markLine","markPoint"],"mappings":"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"}
+{"version":3,"sources":["../../../src/annotations/AnnotationTooltip.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, Divider, Portal, Stack, Typography } from '@mui/material';\nimport type { CursorCoordinates } from '@perses-dev/components';\nimport {\n  assembleTransform,\n  getDateAndTime,\n  getTooltipStyles,\n  PIN_TOOLTIP_HELP_TEXT,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  UNPIN_TOOLTIP_HELP_TEXT,\n  useMousePosition,\n} from '@perses-dev/components';\nimport { DEFAULT_ANNOTATION_COLOR } from '@perses-dev/plugin-system';\nimport type { LineSeriesOption, MarkPointComponentOption, YAXisComponentOption } from 'echarts';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { TimeSeriesAnnotation } from '../utils/annotation';\n\n// Hidden Y axis to guarantee annotations being shown\nexport const ANNOTATION_Y_AXIS: YAXisComponentOption = {\n  type: 'value',\n  show: false,\n  min: 0,\n  max: 1,\n  axisLabel: { show: false },\n};\n\nexport interface AnnotationTooltipProps {\n  annotation: TimeSeriesAnnotation;\n  containerId?: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  pinnedPos: CursorCoordinates | null;\n  enablePinning?: boolean;\n  onUnpinClick?: () => void;\n}\n\nexport function AnnotationTooltip({\n  annotation,\n  containerId,\n  formatWithUserTimeZone,\n  pinnedPos,\n  enablePinning = true,\n  onUnpinClick,\n}: AnnotationTooltipProps): JSX.Element | null {\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver<HTMLDivElement>();\n\n  const isPinned = pinnedPos !== null;\n  if (!isPinned && mousePos === null) return null;\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n  const transform = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const start = getDateAndTime(annotation.start, formatWithUserTimeZone);\n  const end = annotation.end !== undefined ? getDateAndTime(annotation.end, formatWithUserTimeZone) : null;\n\n  return (\n    <Portal container={containerElement}>\n      <Box ref={tooltipRef} sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)} style={{ transform }}>\n        <Stack spacing={0.5}>\n          <Box\n            sx={(theme) => ({\n              width: '100%',\n              maxWidth: TOOLTIP_MAX_WIDTH,\n              padding: theme.spacing(1.5, 2, 0.5, 2),\n              backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n              position: 'sticky',\n              top: 0,\n              left: 0,\n            })}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', paddingBottom: 0.5, width: '100%' }}>\n              <Box\n                sx={{\n                  width: 8,\n                  height: 8,\n                  borderRadius: '50%',\n                  backgroundColor: annotation.color ?? DEFAULT_ANNOTATION_COLOR,\n                  marginRight: 1,\n                  flexShrink: 0,\n                }}\n              />\n              <Box sx={{ flexGrow: 1, minWidth: 0 }}>\n                <Typography variant=\"caption\">\n                  {start.formattedDate} - <strong>{start.formattedTime}</strong>\n                </Typography>\n                {end && (\n                  <>\n                    <Typography variant=\"caption\">{' → '}</Typography>\n                    <Typography variant=\"caption\">\n                      {end.formattedDate} - <strong>{end.formattedTime}</strong>\n                    </Typography>\n                  </>\n                )}\n              </Box>\n              {enablePinning && (\n                <Stack direction=\"row\" alignItems=\"center\" sx={{ marginLeft: 1, flexShrink: 0 }}>\n                  <Typography sx={{ marginRight: 0.5, fontSize: 11, verticalAlign: 'middle' }}>\n                    {isPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT}\n                  </Typography>\n                  {isPinned ? (\n                    <Pin\n                      onClick={() => {\n                        if (onUnpinClick !== undefined) onUnpinClick();\n                      }}\n                      sx={{ fontSize: 16, cursor: 'pointer' }}\n                    />\n                  ) : (\n                    <PinOutline sx={{ fontSize: 16 }} />\n                  )}\n                </Stack>\n              )}\n            </Box>\n            <Divider sx={(theme) => ({ width: '100%', borderColor: theme.palette.grey['500'] })} />\n          </Box>\n          <Box sx={(theme) => ({ padding: theme.spacing(0.5, 2, 1.5, 2) })}>\n            {annotation.title && (\n              <Typography variant=\"caption\" sx={{ display: 'block', fontWeight: 'bold', marginBottom: 0.5 }}>\n                {annotation.title}\n              </Typography>\n            )}\n            {annotation.legend && (\n              <Typography variant=\"caption\" sx={{ display: 'block', marginBottom: 0.5 }}>\n                {annotation.legend}\n              </Typography>\n            )}\n            {annotation.tags && Object.keys(annotation.tags).length > 0 && (\n              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, marginTop: 0.5 }}>\n                {Object.entries(annotation.tags).map(([key, value]) => (\n                  <Box\n                    key={key}\n                    sx={(theme) => ({\n                      backgroundColor: theme.palette.grey['700'],\n                      borderRadius: '4px',\n                      padding: '2px 6px',\n                      fontSize: '0.7rem',\n                      fontFamily: 'monospace',\n                    })}\n                  >\n                    {key}: {value}\n                  </Box>\n                ))}\n              </Box>\n            )}\n          </Box>\n        </Stack>\n      </Box>\n    </Portal>\n  );\n}\n\n/**\n * Build ECharts series options for rendering annotations as markArea (range),\n * markLine (vertical dashed lines) and markPoint (triangle markers under the X-axis).\n */\nexport function buildAnnotationSeries(\n  annotations: TimeSeriesAnnotation[] | undefined,\n  annotationYAxisIndex: number,\n): LineSeriesOption[] {\n  if (!annotations?.length) return [];\n\n  const markAreaData: Array<[{ xAxis: number; itemStyle?: { color: string; opacity: number } }, { xAxis: number }]> =\n    [];\n  const markLineData: Array<{\n    xAxis: number;\n    lineStyle?: { color: string; width: number; type: 'dashed' | 'solid' | 'dotted' };\n    label?: { show: boolean };\n    annotationIndex?: number;\n  }> = [];\n  const markPointData: Array<\n    NonNullable<MarkPointComponentOption['data']>[number] & {\n      annotationIndex: number;\n      isStart?: boolean;\n      isEnd?: boolean;\n      isPoint?: boolean;\n    }\n  > = [];\n\n  annotations.forEach((annotation, index) => {\n    const color = annotation.color ?? DEFAULT_ANNOTATION_COLOR;\n    const opacity = 0.3;\n\n    if (annotation.end !== undefined) {\n      // Range annotation - use markArea and markLine (silent) + markers at start/end\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markLineData.push({\n        xAxis: annotation.end,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      markAreaData.push([\n        {\n          xAxis: annotation.start,\n          itemStyle: { color, opacity },\n        },\n        { xAxis: annotation.end },\n      ]);\n\n      // Add start and end markers\n      for (const isStart of [true, false]) {\n        markPointData.push({\n          name: '',\n          coord: [isStart ? annotation.start : annotation.end, 0],\n          symbol: 'triangle',\n          symbolSize: [12, 12],\n          symbolRotate: 0,\n          symbolOffset: [0, 4], // Position below X-axis\n          itemStyle: { color },\n          annotationIndex: index,\n          emphasis: {\n            disabled: true,\n          },\n          isStart: isStart,\n          isEnd: !isStart,\n        });\n      }\n    } else {\n      // Point annotation - use markLine (silent) + single marker\n      markLineData.push({\n        xAxis: annotation.start,\n        lineStyle: { color, width: 2, type: 'dashed' as const },\n        label: { show: false },\n        annotationIndex: index,\n      });\n\n      // Add point marker\n      markPointData.push({\n        name: '',\n        coord: [annotation.start, 0],\n        symbol: 'triangle',\n        symbolSize: [12, 10],\n        symbolRotate: 0,\n        symbolOffset: [0, '120%'], // Position below X-axis\n        itemStyle: { color },\n        annotationIndex: index,\n        isPoint: true,\n      });\n    }\n  });\n\n  const series: LineSeriesOption = {\n    type: 'line',\n    data: [],\n    yAxisIndex: annotationYAxisIndex,\n    silent: false,\n    markArea:\n      markAreaData.length > 0\n        ? {\n            silent: true, // Make area silent, only markers are interactive\n            data: markAreaData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n    markLine:\n      markLineData.length > 0\n        ? {\n            silent: true, // Non-interactive: hovering the dashed line keeps the TimeSeries tooltip\n            symbol: ['none', 'none'],\n            data: markLineData,\n            lineStyle: {\n              type: 'dashed',\n            },\n          }\n        : undefined,\n    markPoint:\n      markPointData.length > 0\n        ? {\n            silent: false, // Markers are interactive\n            data: markPointData,\n            label: {\n              show: false,\n            },\n          }\n        : undefined,\n  };\n\n  return [series];\n}\n"],"names":["Box","Divider","Portal","Stack","Typography","assembleTransform","getDateAndTime","getTooltipStyles","PIN_TOOLTIP_HELP_TEXT","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","UNPIN_TOOLTIP_HELP_TEXT","useMousePosition","DEFAULT_ANNOTATION_COLOR","Pin","PinOutline","useResizeObserver","ANNOTATION_Y_AXIS","type","show","min","max","axisLabel","AnnotationTooltip","annotation","containerId","formatWithUserTimeZone","pinnedPos","enablePinning","onUnpinClick","mousePos","height","width","ref","tooltipRef","isPinned","containerElement","document","querySelector","undefined","maxHeight","getBoundingClientRect","transform","start","end","container","sx","theme","style","spacing","maxWidth","padding","backgroundColor","palette","designSystem","grey","position","top","left","display","alignItems","paddingBottom","borderRadius","color","marginRight","flexShrink","flexGrow","minWidth","variant","formattedDate","strong","formattedTime","direction","marginLeft","fontSize","verticalAlign","onClick","cursor","borderColor","title","fontWeight","marginBottom","legend","tags","Object","keys","length","flexWrap","gap","marginTop","entries","map","key","value","fontFamily","buildAnnotationSeries","annotations","annotationYAxisIndex","markAreaData","markLineData","markPointData","forEach","index","opacity","push","xAxis","lineStyle","label","annotationIndex","itemStyle","isStart","name","coord","symbol","symbolSize","symbolRotate","symbolOffset","emphasis","disabled","isEnd","isPoint","series","data","yAxisIndex","silent","markArea","markLine","markPoint"],"mappings":"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"}

package/lib/components/ColorSwatches.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react';
+export declare function ColorSwatches({ colors }: {
+    colors: readonly string[];
+}): ReactElement;
+//# sourceMappingURL=ColorSwatches.d.ts.map

package/lib/components/ColorSwatches.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSwatches.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSwatches.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,GAAG,YAAY,CAiBrF"}

package/lib/components/ColorSwatches.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { Box } from "@mui/material";
+export function ColorSwatches({ colors }) {
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            display: 'flex',
+            gap: '3px',
+            flexWrap: 'wrap',
+            p: '4px 2px'
+        },
+        children: colors.map((color, i)=>/*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    width: 14,
+                    height: 14,
+                    borderRadius: '2px',
+                    backgroundColor: color,
+                    flexShrink: 0
+                }
+            }, i))
+    });
+}
+
+//# sourceMappingURL=ColorSwatches.js.map

package/lib/components/ColorSwatches.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ColorSwatches.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';\n\nexport function ColorSwatches({ colors }: { colors: readonly string[] }): ReactElement {\n  return (\n    <Box sx={{ display: 'flex', gap: '3px', flexWrap: 'wrap', p: '4px 2px' }}>\n      {colors.map((color, i) => (\n        <Box\n          key={i}\n          sx={{\n            width: 14,\n            height: 14,\n            borderRadius: '2px',\n            backgroundColor: color,\n            flexShrink: 0,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ColorSwatches","colors","sx","display","gap","flexWrap","p","map","color","i","width","height","borderRadius","backgroundColor","flexShrink"],"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;AAGpC,OAAO,SAASC,cAAc,EAAEC,MAAM,EAAiC;IACrE,qBACE,KAACF;QAAIG,IAAI;YAAEC,SAAS;YAAQC,KAAK;YAAOC,UAAU;YAAQC,GAAG;QAAU;kBACpEL,OAAOM,GAAG,CAAC,CAACC,OAAOC,kBAClB,KAACV;gBAECG,IAAI;oBACFQ,OAAO;oBACPC,QAAQ;oBACRC,cAAc;oBACdC,iBAAiBL;oBACjBM,YAAY;gBACd;eAPKL;;AAYf"}

package/lib/components/PaletteSelector.d.ts

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { TimeSeriesChartPaletteOptions } from '../time-series-chart-model';
+export interface PaletteSelectorProps {
+    value: TimeSeriesChartPaletteOptions | undefined;
+    onChange: (palette: TimeSeriesChartPaletteOptions | undefined) => void;
+}
+export declare function PaletteSelector({ value, onChange }: PaletteSelectorProps): ReactElement;
+//# sourceMappingURL=PaletteSelector.d.ts.map

package/lib/components/PaletteSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PaletteSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,OAAO,CAAC;AAG1D,OAAO,KAAK,EAA0B,6BAA6B,EAAE,MAAM,4BAA4B,CAAC;AAexG,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,6BAA6B,GAAG,SAAS,CAAC;IACjD,QAAQ,EAAE,CAAC,OAAO,EAAE,6BAA6B,GAAG,SAAS,KAAK,IAAI,CAAC;CACxE;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAuEvF"}

package/lib/components/PaletteSelector.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { OptionsEditorControl, SettingsAutocomplete, useChartsTheme } from "@perses-dev/components";
+import { useCallback, useMemo } from "react";
+import { CATEGORICAL_PALETTE_NAMES, CATEGORICAL_PALETTE_SCHEMES, CATEGORICAL_SCHEME_METADATA, PALETTE_DROPDOWN_TOOLTIP, VISUAL_CONFIG } from "../time-series-chart-model.js";
+import { ColorSwatches } from "./ColorSwatches.js";
+export function PaletteSelector({ value, onChange }) {
+    const chartsTheme = useChartsTheme();
+    const themePalette = chartsTheme.echartsTheme.color;
+    const paletteOptions = useMemo(()=>{
+        const themeColors = Array.isArray(themePalette) && themePalette.length > 0 ? themePalette : [];
+        return [
+            {
+                id: 'auto',
+                label: 'Auto',
+                paletteMode: 'auto'
+            },
+            {
+                id: 'theme-colors',
+                label: 'Theme colors',
+                description: themeColors.length > 0 ? /*#__PURE__*/ _jsx(ColorSwatches, {
+                    colors: themeColors
+                }) : undefined,
+                paletteMode: 'categorical'
+            },
+            ...CATEGORICAL_PALETTE_NAMES.map((name)=>{
+                const meta = CATEGORICAL_SCHEME_METADATA[name];
+                const colors = CATEGORICAL_PALETTE_SCHEMES[name];
+                return {
+                    id: `categorical-${name}`,
+                    label: meta.label,
+                    description: /*#__PURE__*/ _jsx(ColorSwatches, {
+                        colors: colors
+                    }),
+                    paletteMode: 'categorical',
+                    paletteName: name
+                };
+            })
+        ];
+    }, [
+        themePalette
+    ]);
+    const currentPaletteOption = useMemo(()=>{
+        if (value?.mode !== 'categorical') {
+            return paletteOptions.find((o)=>o.id === 'auto');
+        }
+        const name = value.name;
+        if (!name) {
+            return paletteOptions.find((o)=>o.id === 'theme-colors');
+        }
+        return paletteOptions.find((o)=>o.paletteName === name) ?? paletteOptions.find((o)=>o.id === 'theme-colors');
+    }, [
+        value,
+        paletteOptions
+    ]);
+    const handleChange = useCallback((_, selected)=>{
+        if (selected.paletteMode === 'auto') {
+            onChange({
+                mode: 'auto'
+            });
+        } else {
+            onChange({
+                mode: 'categorical',
+                name: selected.paletteName
+            });
+        }
+    }, [
+        onChange
+    ]);
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: VISUAL_CONFIG.colorPalette.label,
+        description: PALETTE_DROPDOWN_TOOLTIP,
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: currentPaletteOption,
+            options: paletteOptions,
+            onChange: handleChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=PaletteSelector.js.map

package/lib/components/PaletteSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PaletteSelector.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 { OptionsEditorControl, SettingsAutocomplete, useChartsTheme } from '@perses-dev/components';\nimport type { SettingsAutocompleteOption } from '@perses-dev/components';\nimport type { ReactElement, SyntheticEvent } from 'react';\nimport { useCallback, useMemo } from 'react';\n\nimport type { CategoricalPaletteName, TimeSeriesChartPaletteOptions } from '../time-series-chart-model';\nimport {\n  CATEGORICAL_PALETTE_NAMES,\n  CATEGORICAL_PALETTE_SCHEMES,\n  CATEGORICAL_SCHEME_METADATA,\n  PALETTE_DROPDOWN_TOOLTIP,\n  VISUAL_CONFIG,\n} from '../time-series-chart-model';\nimport { ColorSwatches } from './ColorSwatches';\n\ninterface PaletteOption extends SettingsAutocompleteOption {\n  paletteMode: 'auto' | 'categorical';\n  paletteName?: CategoricalPaletteName;\n}\n\nexport interface PaletteSelectorProps {\n  value: TimeSeriesChartPaletteOptions | undefined;\n  onChange: (palette: TimeSeriesChartPaletteOptions | undefined) => void;\n}\n\nexport function PaletteSelector({ value, onChange }: PaletteSelectorProps): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const themePalette = chartsTheme.echartsTheme.color as string[] | undefined;\n\n  const paletteOptions = useMemo((): PaletteOption[] => {\n    const themeColors: string[] = Array.isArray(themePalette) && themePalette.length > 0 ? themePalette : [];\n    return [\n      {\n        id: 'auto',\n        label: 'Auto',\n        paletteMode: 'auto',\n      },\n      {\n        id: 'theme-colors',\n        label: 'Theme colors',\n        description: themeColors.length > 0 ? <ColorSwatches colors={themeColors} /> : undefined,\n        paletteMode: 'categorical',\n      },\n      ...CATEGORICAL_PALETTE_NAMES.map((name): PaletteOption => {\n        const meta = CATEGORICAL_SCHEME_METADATA[name];\n        const colors = CATEGORICAL_PALETTE_SCHEMES[name];\n        return {\n          id: `categorical-${name}`,\n          label: meta.label,\n          description: <ColorSwatches colors={colors} />,\n          paletteMode: 'categorical',\n          paletteName: name,\n        };\n      }),\n    ];\n  }, [themePalette]);\n\n  const currentPaletteOption = useMemo((): PaletteOption => {\n    if (value?.mode !== 'categorical') {\n      return paletteOptions.find((o) => o.id === 'auto')!;\n    }\n    const name = value.name;\n    if (!name) {\n      return paletteOptions.find((o) => o.id === 'theme-colors')!;\n    }\n    return paletteOptions.find((o) => o.paletteName === name) ?? paletteOptions.find((o) => o.id === 'theme-colors')!;\n  }, [value, paletteOptions]);\n\n  const handleChange = useCallback(\n    (_: SyntheticEvent, selected: PaletteOption): void => {\n      if (selected.paletteMode === 'auto') {\n        onChange({ mode: 'auto' });\n      } else {\n        onChange({\n          mode: 'categorical',\n          name: selected.paletteName,\n        });\n      }\n    },\n    [onChange],\n  );\n\n  return (\n    <OptionsEditorControl\n      label={VISUAL_CONFIG.colorPalette.label}\n      description={PALETTE_DROPDOWN_TOOLTIP}\n      control={\n        <SettingsAutocomplete\n          value={currentPaletteOption}\n          options={paletteOptions}\n          onChange={handleChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","useChartsTheme","useCallback","useMemo","CATEGORICAL_PALETTE_NAMES","CATEGORICAL_PALETTE_SCHEMES","CATEGORICAL_SCHEME_METADATA","PALETTE_DROPDOWN_TOOLTIP","VISUAL_CONFIG","ColorSwatches","PaletteSelector","value","onChange","chartsTheme","themePalette","echartsTheme","color","paletteOptions","themeColors","Array","isArray","length","id","label","paletteMode","description","colors","undefined","map","name","meta","paletteName","currentPaletteOption","mode","find","o","handleChange","_","selected","colorPalette","control","options","disableClearable"],"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,oBAAoB,EAAEC,oBAAoB,EAAEC,cAAc,QAAQ,yBAAyB;AAGpG,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAG7C,SACEC,yBAAyB,EACzBC,2BAA2B,EAC3BC,2BAA2B,EAC3BC,wBAAwB,EACxBC,aAAa,QACR,gCAA6B;AACpC,SAASC,aAAa,QAAQ,qBAAkB;AAYhD,OAAO,SAASC,gBAAgB,EAAEC,KAAK,EAAEC,QAAQ,EAAwB;IACvE,MAAMC,cAAcZ;IACpB,MAAMa,eAAeD,YAAYE,YAAY,CAACC,KAAK;IAEnD,MAAMC,iBAAiBd,QAAQ;QAC7B,MAAMe,cAAwBC,MAAMC,OAAO,CAACN,iBAAiBA,aAAaO,MAAM,GAAG,IAAIP,eAAe,EAAE;QACxG,OAAO;YACL;gBACEQ,IAAI;gBACJC,OAAO;gBACPC,aAAa;YACf;YACA;gBACEF,IAAI;gBACJC,OAAO;gBACPE,aAAaP,YAAYG,MAAM,GAAG,kBAAI,KAACZ;oBAAciB,QAAQR;qBAAkBS;gBAC/EH,aAAa;YACf;eACGpB,0BAA0BwB,GAAG,CAAC,CAACC;gBAChC,MAAMC,OAAOxB,2BAA2B,CAACuB,KAAK;gBAC9C,MAAMH,SAASrB,2BAA2B,CAACwB,KAAK;gBAChD,OAAO;oBACLP,IAAI,CAAC,YAAY,EAAEO,MAAM;oBACzBN,OAAOO,KAAKP,KAAK;oBACjBE,2BAAa,KAAChB;wBAAciB,QAAQA;;oBACpCF,aAAa;oBACbO,aAAaF;gBACf;YACF;SACD;IACH,GAAG;QAACf;KAAa;IAEjB,MAAMkB,uBAAuB7B,QAAQ;QACnC,IAAIQ,OAAOsB,SAAS,eAAe;YACjC,OAAOhB,eAAeiB,IAAI,CAAC,CAACC,IAAMA,EAAEb,EAAE,KAAK;QAC7C;QACA,MAAMO,OAAOlB,MAAMkB,IAAI;QACvB,IAAI,CAACA,MAAM;YACT,OAAOZ,eAAeiB,IAAI,CAAC,CAACC,IAAMA,EAAEb,EAAE,KAAK;QAC7C;QACA,OAAOL,eAAeiB,IAAI,CAAC,CAACC,IAAMA,EAAEJ,WAAW,KAAKF,SAASZ,eAAeiB,IAAI,CAAC,CAACC,IAAMA,EAAEb,EAAE,KAAK;IACnG,GAAG;QAACX;QAAOM;KAAe;IAE1B,MAAMmB,eAAelC,YACnB,CAACmC,GAAmBC;QAClB,IAAIA,SAASd,WAAW,KAAK,QAAQ;YACnCZ,SAAS;gBAAEqB,MAAM;YAAO;QAC1B,OAAO;YACLrB,SAAS;gBACPqB,MAAM;gBACNJ,MAAMS,SAASP,WAAW;YAC5B;QACF;IACF,GACA;QAACnB;KAAS;IAGZ,qBACE,KAACb;QACCwB,OAAOf,cAAc+B,YAAY,CAAChB,KAAK;QACvCE,aAAalB;QACbiC,uBACE,KAACxC;YACCW,OAAOqB;YACPS,SAASxB;YACTL,UAAUwB;YACVM,gBAAgB;;;AAK1B"}

package/lib/test/mock-query-results.d.ts

@@ -1,4 +1,4 @@
-import type { TimeSeriesData } from '@perses-dev/spec';
+import type { TimeSeriesData, TimeSeriesExemplars } from '@perses-dev/spec';
 export declare const MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE: {
     status: string;
     fetchStatus: string;
@@ -82,6 +82,7 @@ export declare const MOCK_TIME_SERIES_QUERY_RESULT_SINGLEVALUE: {
     isStale: boolean;
 }[];
 export declare const MOCK_TIME_SERIES_DATA_MULTIVALUE: TimeSeriesData;
+export declare const MOCK_TIME_SERIES_EXEMPLARS: TimeSeriesExemplars[];
 export declare const MOCK_TIME_SERIES_DATA_SINGLEVALUE: TimeSeriesData;
 export declare const MOCK_NULL_QUERY_RESULT: {
     status: string;

package/lib/test/mock-query-results.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mock-query-results.d.ts","sourceRoot":"","sources":["../../../src/test/mock-query-results.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,eAAO,MAAM,wCAAwC;;;;;;;;YAS7C,KAAK;YACL,GAAG;;;;;;;gBAWC,MAAM;gBACN,GAAG;gBACH,MAAM;gBACN,QAAQ;gBACR,GAAG;gBACH,UAAU;;;;;;;;;;;;;;;;;;;GAoCrB,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;;;;;YAS9C,KAAK;YACL,GAAG;;;;;;;gBAQC,MAAM;gBACN,GAAG;gBACH,MAAM;gBACN,QAAQ;gBACR,GAAG;gBACH,UAAU;;;;;;;;;;;;;;;;;;;GAiCrB,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,cAsC9C,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,cAgC/C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;YAS3B,KAAK;YACL,GAAG;;;;;;;;gBA+BC,GAAG;gBACH,QAAQ;gBACR,GAAG;;;;;;;;;;;;;;;;;;;GAqBd,CAAC"}
+{"version":3,"file":"mock-query-results.d.ts","sourceRoot":"","sources":["../../../src/test/mock-query-results.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,eAAO,MAAM,wCAAwC;;;;;;;;YAS7C,KAAK;YACL,GAAG;;;;;;;gBAWC,MAAM;gBACN,GAAG;gBACH,MAAM;gBACN,QAAQ;gBACR,GAAG;gBACH,UAAU;;;;;;;;;;;;;;;;;;;GAoCrB,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;;;;;YAS9C,KAAK;YACL,GAAG;;;;;;;gBAQC,MAAM;gBACN,GAAG;gBACH,MAAM;gBACN,QAAQ;gBACR,GAAG;gBACH,UAAU;;;;;;;;;;;;;;;;;;;GAiCrB,CAAC;AAEF,eAAO,MAAM,gCAAgC,EAAE,cAsC9C,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,mBAAmB,EAmC3D,CAAC;AAEF,eAAO,MAAM,iCAAiC,EAAE,cAgC/C,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;YAS3B,KAAK;YACL,GAAG;;;;;;;;gBA+BC,GAAG;gBACH,QAAQ;gBACR,GAAG;;;;;;;;;;;;;;;;;;;GAqBd,CAAC"}

package/lib/test/mock-query-results.js

@@ -203,6 +203,46 @@ export const MOCK_TIME_SERIES_DATA_MULTIVALUE = {
         }
     ]
 };
+export const MOCK_TIME_SERIES_EXEMPLARS = [
+    {
+        seriesLabels: {
+            device: '/dev/vda1',
+            env: 'demo',
+            fstype: 'ext4',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node',
+            mountpoint: '/'
+        },
+        exemplars: [
+            {
+                labels: {
+                    trace_id: 'trace-vda1'
+                },
+                value: 0.27700745551584494,
+                timestamp: 1666479357903
+            }
+        ]
+    },
+    {
+        seriesLabels: {
+            device: '/dev/vda15',
+            env: 'demo',
+            fstype: 'vfat',
+            instance: 'demo.do.prometheus.io:9100',
+            job: 'node',
+            mountpoint: '/boot/efi'
+        },
+        exemplars: [
+            {
+                labels: {
+                    trace_id: 'trace-vda15'
+                },
+                value: 0.08486496097624485,
+                timestamp: 1666479382282
+            }
+        ]
+    }
+];
 export const MOCK_TIME_SERIES_DATA_SINGLEVALUE = {
     timeRange: {
         start: new Date(1666625535000),

package/lib/test/mock-query-results.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/test/mock-query-results.ts"],"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 { TimeSeriesData } from '@perses-dev/spec';\n\nexport const MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1666625490000),\n        end: new Date(1666625535000),\n      },\n      stepMs: 24379,\n      series: [\n        {\n          name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n          values: [\n            [1666479357903, 0.27700745551584494],\n            [1666479382282, 0.27701284657366565],\n          ],\n          labels: {\n            device: '/dev/vda1',\n            env: 'demo',\n            fstype: 'ext4',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/',\n          },\n        },\n        {\n          name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n          values: [\n            [1666479357903, 0.08486496097624885],\n            [1666479382282, 0.08486496097624885],\n          ],\n          labels: {\n            device: '/dev/vda15',\n            env: 'demo',\n            fstype: 'vfat',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/boot/efi',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1666500979895,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TIME_SERIES_QUERY_RESULT_SINGLEVALUE = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1666625535000),\n        end: new Date(1666625535000),\n      },\n      stepMs: 24379,\n      series: [\n        {\n          name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n          values: [[1666479357903, 0.27700745551584494]],\n          labels: {\n            device: '/dev/vda1',\n            env: 'demo',\n            fstype: 'ext4',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/',\n          },\n        },\n        {\n          name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n          values: [[1666479357903, 0.08486496097624885]],\n          labels: {\n            device: '/dev/vda15',\n            env: 'demo',\n            fstype: 'vfat',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/boot/efi',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1666500979895,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TIME_SERIES_DATA_MULTIVALUE: TimeSeriesData = {\n  timeRange: {\n    start: new Date(1666625490000),\n    end: new Date(1666625535000),\n  },\n  stepMs: 24379,\n  series: [\n    {\n      name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n      values: [\n        [1666479357903, 0.27700745551584494],\n        [1666479382282, 0.27701284657366565],\n      ],\n      labels: {\n        device: '/dev/vda1',\n        env: 'demo',\n        fstype: 'ext4',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/',\n      },\n    },\n    {\n      name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n      values: [\n        [1666479357903, 0.08486496097624885],\n        [1666479382282, 0.08486496097624885],\n      ],\n      labels: {\n        device: '/dev/vda15',\n        env: 'demo',\n        fstype: 'vfat',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/boot/efi',\n      },\n    },\n  ],\n};\n\nexport const MOCK_TIME_SERIES_DATA_SINGLEVALUE: TimeSeriesData = {\n  timeRange: {\n    start: new Date(1666625535000),\n    end: new Date(1666625535000),\n  },\n  stepMs: 24379,\n  series: [\n    {\n      name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n      values: [[1666479357903, 0.27700745551584494]],\n      labels: {\n        device: '/dev/vda1',\n        env: 'demo',\n        fstype: 'ext4',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/',\n      },\n    },\n    {\n      name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n      values: [[1666479357903, 0.08486496097624885]],\n      labels: {\n        device: '/dev/vda15',\n        env: 'demo',\n        fstype: 'vfat',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/boot/efi',\n      },\n    },\n  ],\n};\n\nexport const MOCK_NULL_QUERY_RESULT = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1677376110000),\n        end: new Date(1677376410000),\n      },\n      stepMs: 15000,\n      series: [\n        {\n          name: 'node_memory_Buffers_bytes{env=\"demo\",instance=\"demo.do.prometheus.io:9100\",job=\"node\"}',\n          values: [\n            [1677376110000, 40000000],\n            [1677376125000, 40000000],\n            [1677376140000, null],\n            [1677376155000, null],\n            [1677376170000, null],\n            [1677376185000, null],\n            [1677376200000, null],\n            [1677376215000, 40013824],\n            [1677376230000, 40038400],\n            [1677376245000, 40054784],\n            [1677376260000, 40071168],\n            [1677376275000, 40075264],\n            [1677376290000, 40091648],\n            [1677376305000, 40099840],\n            [1677376320000, 40120320],\n            [1677376335000, 40128512],\n            [1677376350000, 40153088],\n            [1677376365000, 40165376],\n            [1677376380000, 40177664],\n            [1677376395000, 40194048],\n            [1677376410000, 40198144],\n          ],\n          formattedName: 'node_memory_Buffers_bytes{env=\"demo\",instance=\"demo.do.prometheus.io:9100\",job=\"node\"}',\n          labels: {\n            env: 'demo',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1677376410000,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n"],"names":["MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE","status","fetchStatus","isLoading","isSuccess","isError","data","timeRange","start","Date","end","stepMs","series","name","values","labels","device","env","fstype","instance","job","mountpoint","dataUpdatedAt","error","errorUpdatedAt","failureCount","errorUpdateCount","isFetched","isFetchedAfterMount","isFetching","isRefetching","isLoadingError","isPaused","isPlaceholderData","isPreviousData","isRefetchError","isStale","MOCK_TIME_SERIES_QUERY_RESULT_SINGLEVALUE","MOCK_TIME_SERIES_DATA_MULTIVALUE","MOCK_TIME_SERIES_DATA_SINGLEVALUE","MOCK_NULL_QUERY_RESULT","formattedName"],"mappings":"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"}
+{"version":3,"sources":["../../../src/test/mock-query-results.ts"],"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 { TimeSeriesData, TimeSeriesExemplars } from '@perses-dev/spec';\n\nexport const MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1666625490000),\n        end: new Date(1666625535000),\n      },\n      stepMs: 24379,\n      series: [\n        {\n          name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n          values: [\n            [1666479357903, 0.27700745551584494],\n            [1666479382282, 0.27701284657366565],\n          ],\n          labels: {\n            device: '/dev/vda1',\n            env: 'demo',\n            fstype: 'ext4',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/',\n          },\n        },\n        {\n          name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n          values: [\n            [1666479357903, 0.08486496097624885],\n            [1666479382282, 0.08486496097624885],\n          ],\n          labels: {\n            device: '/dev/vda15',\n            env: 'demo',\n            fstype: 'vfat',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/boot/efi',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1666500979895,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TIME_SERIES_QUERY_RESULT_SINGLEVALUE = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1666625535000),\n        end: new Date(1666625535000),\n      },\n      stepMs: 24379,\n      series: [\n        {\n          name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n          values: [[1666479357903, 0.27700745551584494]],\n          labels: {\n            device: '/dev/vda1',\n            env: 'demo',\n            fstype: 'ext4',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/',\n          },\n        },\n        {\n          name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n          values: [[1666479357903, 0.08486496097624885]],\n          labels: {\n            device: '/dev/vda15',\n            env: 'demo',\n            fstype: 'vfat',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n            mountpoint: '/boot/efi',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1666500979895,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n\nexport const MOCK_TIME_SERIES_DATA_MULTIVALUE: TimeSeriesData = {\n  timeRange: {\n    start: new Date(1666625490000),\n    end: new Date(1666625535000),\n  },\n  stepMs: 24379,\n  series: [\n    {\n      name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n      values: [\n        [1666479357903, 0.27700745551584494],\n        [1666479382282, 0.27701284657366565],\n      ],\n      labels: {\n        device: '/dev/vda1',\n        env: 'demo',\n        fstype: 'ext4',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/',\n      },\n    },\n    {\n      name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n      values: [\n        [1666479357903, 0.08486496097624885],\n        [1666479382282, 0.08486496097624885],\n      ],\n      labels: {\n        device: '/dev/vda15',\n        env: 'demo',\n        fstype: 'vfat',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/boot/efi',\n      },\n    },\n  ],\n};\n\nexport const MOCK_TIME_SERIES_EXEMPLARS: TimeSeriesExemplars[] = [\n  {\n    seriesLabels: {\n      device: '/dev/vda1',\n      env: 'demo',\n      fstype: 'ext4',\n      instance: 'demo.do.prometheus.io:9100',\n      job: 'node',\n      mountpoint: '/',\n    },\n    exemplars: [\n      {\n        labels: { trace_id: 'trace-vda1' },\n        value: 0.27700745551584494,\n        timestamp: 1666479357903,\n      },\n    ],\n  },\n  {\n    seriesLabels: {\n      device: '/dev/vda15',\n      env: 'demo',\n      fstype: 'vfat',\n      instance: 'demo.do.prometheus.io:9100',\n      job: 'node',\n      mountpoint: '/boot/efi',\n    },\n    exemplars: [\n      {\n        labels: { trace_id: 'trace-vda15' },\n        value: 0.08486496097624485,\n        timestamp: 1666479382282,\n      },\n    ],\n  },\n];\n\nexport const MOCK_TIME_SERIES_DATA_SINGLEVALUE: TimeSeriesData = {\n  timeRange: {\n    start: new Date(1666625535000),\n    end: new Date(1666625535000),\n  },\n  stepMs: 24379,\n  series: [\n    {\n      name: 'device=\"/dev/vda1\", env=\"demo\", fstype=\"ext4\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/\"',\n      values: [[1666479357903, 0.27700745551584494]],\n      labels: {\n        device: '/dev/vda1',\n        env: 'demo',\n        fstype: 'ext4',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/',\n      },\n    },\n    {\n      name: 'device=\"/dev/vda15\", env=\"demo\", fstype=\"vfat\", instance=\"demo.do.prometheus.io:9100\", job=\"node\", mountpoint=\"/boot/efi\"',\n      values: [[1666479357903, 0.08486496097624885]],\n      labels: {\n        device: '/dev/vda15',\n        env: 'demo',\n        fstype: 'vfat',\n        instance: 'demo.do.prometheus.io:9100',\n        job: 'node',\n        mountpoint: '/boot/efi',\n      },\n    },\n  ],\n};\n\nexport const MOCK_NULL_QUERY_RESULT = [\n  {\n    status: 'success',\n    fetchStatus: 'idle',\n    isLoading: false,\n    isSuccess: true,\n    isError: false,\n    data: {\n      timeRange: {\n        start: new Date(1677376110000),\n        end: new Date(1677376410000),\n      },\n      stepMs: 15000,\n      series: [\n        {\n          name: 'node_memory_Buffers_bytes{env=\"demo\",instance=\"demo.do.prometheus.io:9100\",job=\"node\"}',\n          values: [\n            [1677376110000, 40000000],\n            [1677376125000, 40000000],\n            [1677376140000, null],\n            [1677376155000, null],\n            [1677376170000, null],\n            [1677376185000, null],\n            [1677376200000, null],\n            [1677376215000, 40013824],\n            [1677376230000, 40038400],\n            [1677376245000, 40054784],\n            [1677376260000, 40071168],\n            [1677376275000, 40075264],\n            [1677376290000, 40091648],\n            [1677376305000, 40099840],\n            [1677376320000, 40120320],\n            [1677376335000, 40128512],\n            [1677376350000, 40153088],\n            [1677376365000, 40165376],\n            [1677376380000, 40177664],\n            [1677376395000, 40194048],\n            [1677376410000, 40198144],\n          ],\n          formattedName: 'node_memory_Buffers_bytes{env=\"demo\",instance=\"demo.do.prometheus.io:9100\",job=\"node\"}',\n          labels: {\n            env: 'demo',\n            instance: 'demo.do.prometheus.io:9100',\n            job: 'node',\n          },\n        },\n      ],\n    },\n    dataUpdatedAt: 1677376410000,\n    error: null,\n    errorUpdatedAt: 0,\n    failureCount: 0,\n    errorUpdateCount: 0,\n    isFetched: true,\n    isFetchedAfterMount: true,\n    isFetching: false,\n    isRefetching: false,\n    isLoadingError: false,\n    isPaused: false,\n    isPlaceholderData: false,\n    isPreviousData: false,\n    isRefetchError: false,\n    isStale: true,\n  },\n];\n"],"names":["MOCK_TIME_SERIES_QUERY_RESULT_MULTIVALUE","status","fetchStatus","isLoading","isSuccess","isError","data","timeRange","start","Date","end","stepMs","series","name","values","labels","device","env","fstype","instance","job","mountpoint","dataUpdatedAt","error","errorUpdatedAt","failureCount","errorUpdateCount","isFetched","isFetchedAfterMount","isFetching","isRefetching","isLoadingError","isPaused","isPlaceholderData","isPreviousData","isRefetchError","isStale","MOCK_TIME_SERIES_QUERY_RESULT_SINGLEVALUE","MOCK_TIME_SERIES_DATA_MULTIVALUE","MOCK_TIME_SERIES_EXEMPLARS","seriesLabels","exemplars","trace_id","value","timestamp","MOCK_TIME_SERIES_DATA_SINGLEVALUE","MOCK_NULL_QUERY_RESULT","formattedName"],"mappings":"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"}

package/lib/time-series-chart-model.d.ts

@@ -1,5 +1,5 @@
 import type { FormatOptions, ThresholdOptions } from '@perses-dev/components';
-import type { OptionsEditorProps, LegendSpecOptions } from '@perses-dev/plugin-system';
+import type { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';
 import type { Definition } from '@perses-dev/spec';
 /**
  * Line style options for time series charts.
@@ -49,9 +49,28 @@ export interface TimeSeriesChartYAxisOptions {
 export interface TooltipSpecOptions {
     enablePinning: boolean;
 }
-export interface TimeSeriesChartPaletteOptions {
-    mode: 'auto' | 'categorical';
+export type TimeSeriesChartPaletteMode = 'auto' | 'categorical';
+export declare const CATEGORICAL_PALETTE_SCHEMES: {
+    readonly category10: readonly string[];
+    readonly tableau10: readonly string[];
+    readonly set1: readonly string[];
+    readonly set2: readonly string[];
+    readonly set3: readonly string[];
+    readonly dark2: readonly string[];
+};
+export type CategoricalPaletteName = keyof typeof CATEGORICAL_PALETTE_SCHEMES;
+export declare const CATEGORICAL_PALETTE_NAMES: CategoricalPaletteName[];
+export interface CategoricalSchemeMetadata {
+    label: string;
 }
+export declare const CATEGORICAL_SCHEME_METADATA: Record<CategoricalPaletteName, CategoricalSchemeMetadata>;
+export type TimeSeriesChartPaletteOptions = {
+    mode: 'auto';
+} | {
+    mode: 'categorical';
+    name?: CategoricalPaletteName;
+};
+export declare const PALETTE_DROPDOWN_TOOLTIP: string;
 export type TimeSeriesChartVisualOptions = {
     display?: 'line' | 'bar';
     lineWidth?: number;
@@ -122,6 +141,9 @@ export declare const VISUAL_CONFIG: {
     stack: {
         label: string;
     };
+    colorPalette: {
+        label: string;
+    };
     connectNulls: {
         label: string;
     };