@perses-dev/components 0.53.1 → 0.54.0-beta.1

package/dist/model/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/model/utils.ts"],"names":[],"mappings":"AAaA,wBAAgB,mBAAmB,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAElE;AAED,wBAAgB,gBAAgB,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAEhE;AAKD,wBAAgB,kBAAkB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAUnE"}

package/dist/model/utils.js

@@ -0,0 +1,32 @@
+// 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.
+export function shouldShortenValues(shortValues) {
+    return shortValues !== false;
+}
+export function hasDecimalPlaces(decimalPlaces) {
+    return typeof decimalPlaces === 'number';
+}
+// Avoids maximumFractionDigits out-of-range error.
+// Allowed values are 0 to 20.
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits
+export function limitDecimalPlaces(num) {
+    if (!num) return num;
+    if (num < 0) {
+        num = 0;
+    } else if (num > 20) {
+        num = 20;
+    }
+    return num;
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/model/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/model/utils.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\nexport function shouldShortenValues(shortValues?: boolean): boolean {\n  return shortValues !== false;\n}\n\nexport function hasDecimalPlaces(decimalPlaces?: number): boolean {\n  return typeof decimalPlaces === 'number';\n}\n\n// Avoids maximumFractionDigits out-of-range error.\n// Allowed values are 0 to 20.\n// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#maximumfractiondigits\nexport function limitDecimalPlaces(num?: number): number | undefined {\n  if (!num) return num;\n\n  if (num < 0) {\n    num = 0;\n  } else if (num > 20) {\n    num = 20;\n  }\n\n  return num;\n}\n"],"names":["shouldShortenValues","shortValues","hasDecimalPlaces","decimalPlaces","limitDecimalPlaces","num"],"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,OAAO,SAASA,oBAAoBC,WAAqB;IACvD,OAAOA,gBAAgB;AACzB;AAEA,OAAO,SAASC,iBAAiBC,aAAsB;IACrD,OAAO,OAAOA,kBAAkB;AAClC;AAEA,mDAAmD;AACnD,8BAA8B;AAC9B,wIAAwI;AACxI,OAAO,SAASC,mBAAmBC,GAAY;IAC7C,IAAI,CAACA,KAAK,OAAOA;IAEjB,IAAIA,MAAM,GAAG;QACXA,MAAM;IACR,OAAO,IAAIA,MAAM,IAAI;QACnBA,MAAM;IACR;IAEA,OAAOA;AACT"}

package/dist/theme/theme.d.ts

@@ -8,6 +8,8 @@ import { createTheme, PaletteMode, Theme } from '@mui/material';
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
  */
-export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0]): Theme;
+export declare function getTheme(mode: PaletteMode, options?: Parameters<typeof createTheme>[0], disableBodyOverride?: boolean): Theme;
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,GAAG,KAAK,CAQlG"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAuB9E;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,WAAW,EACjB,OAAO,GAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAM,EAC/C,mBAAmB,GAAE,OAAe,GACnC,KAAK,CAQP"}

package/dist/theme/theme.js

@@ -33,44 +33,61 @@ const getModalBackgroundStyle = ({ theme })=>{
  *
  * Need to reinstantiate the theme everytime to support switching between light and dark themes
  * https://github.com/mui-org/material-ui/issues/18831
- */ export function getTheme(mode, options = {}) {
+ *
+ * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.
+ */ export function getTheme(mode, options = {}, disableBodyOverride = false) {
     return createTheme({
         palette: getPaletteOptions(mode),
         typography,
         mixins: {},
-        components,
+        components: getComponents(mode, disableBodyOverride),
         ...options
     });
 }
 // Overrides for component default prop values and styles go here
-const components = {
-    MuiAlert,
-    MuiFormControl: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiPaper,
-    MuiTextField: {
-        defaultProps: {
-            size: 'small'
-        }
-    },
-    MuiDrawer: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiDialog: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
-        }
-    },
-    MuiPopover: {
-        styleOverrides: {
-            paper: getModalBackgroundStyle
+function getComponents(mode, disableBodyOverride) {
+    const components = {
+        MuiAlert,
+        MuiFormControl: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiPaper,
+        MuiTextField: {
+            defaultProps: {
+                size: 'small'
+            }
+        },
+        MuiDrawer: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiDialog: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
+        },
+        MuiPopover: {
+            styleOverrides: {
+                paper: getModalBackgroundStyle
+            }
         }
+    };
+    if (disableBodyOverride) {
+        return components;
     }
-};
+    return {
+        MuiCssBaseline: {
+            styleOverrides: {
+                body: {
+                    colorScheme: mode
+                }
+            }
+        },
+        ...components
+    };
+}
 
 //# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme.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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n */\nexport function getTheme(mode: PaletteMode, options: Parameters<typeof createTheme>[0] = {}): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components,\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nconst components: ThemeOptions['components'] = {\n  MuiAlert,\n  MuiFormControl: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiPaper,\n  MuiTextField: {\n    defaultProps: {\n      size: 'small',\n    },\n  },\n  MuiDrawer: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiDialog: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n  MuiPopover: {\n    styleOverrides: {\n      paper: getModalBackgroundStyle,\n    },\n  },\n};\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","mixins","components","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover"],"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,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASO,SAASL,IAAiB,EAAEM,UAA6C,CAAC,CAAC;IACzF,OAAOf,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAY,QAAQ,CAAC;QACTC;QACA,GAAGF,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,MAAME,aAAyC;IAC7ChB;IACAiB,gBAAgB;QACdC,cAAc;YACZC,MAAM;QACR;IACF;IACAlB;IACAmB,cAAc;QACZF,cAAc;YACZC,MAAM;QACR;IACF;IACAE,WAAW;QACTC,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAoB,WAAW;QACTF,gBAAgB;YACdC,OAAOnB;QACT;IACF;IACAqB,YAAY;QACVH,gBAAgB;YACdC,OAAOnB;QACT;IACF;AACF"}
+{"version":3,"sources":["../../src/theme/theme.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 { createTheme, PaletteMode, ThemeOptions, Theme } from '@mui/material';\nimport { MuiAlert } from './component-overrides/alert';\nimport { MuiPaper } from './component-overrides/paper';\nimport { getPaletteOptions } from './palette';\nimport { typography } from './typography';\n\nconst getModalBackgroundStyle = ({\n  theme,\n}: {\n  theme: Omit<Theme, 'components'>;\n}): { backgroundImage?: string; backgroundColor?: string } => {\n  const backgroundStyle =\n    theme.palette.mode === 'light'\n      ? {}\n      : {\n          backgroundImage: 'unset',\n          backgroundColor: theme.palette.designSystem.grey[800],\n        };\n  return {\n    ...backgroundStyle,\n  };\n};\n\n/**\n * Gets theme used by all components for the provided mode. For more details, see:\n *   - Base colors, typography, sizing - go/chrono-ui-theme\n *   - Material UI defaults: https://material-ui.com/customization/default-theme/\n *   - Material UI variables: https://material-ui.com/customization/theming/#theme-configuration-variables\n *   - Material UI global overrides and default props: https://material-ui.com/customization/globals/#css\n *\n * Need to reinstantiate the theme everytime to support switching between light and dark themes\n * https://github.com/mui-org/material-ui/issues/18831\n *\n * Enable disableBodyOverride to prevent the theme from applying color scheme to the body element.\n */\nexport function getTheme(\n  mode: PaletteMode,\n  options: Parameters<typeof createTheme>[0] = {},\n  disableBodyOverride: boolean = false\n): Theme {\n  return createTheme({\n    palette: getPaletteOptions(mode),\n    typography,\n    mixins: {},\n    components: getComponents(mode, disableBodyOverride),\n    ...options,\n  });\n}\n\n// Overrides for component default prop values and styles go here\nfunction getComponents(mode: PaletteMode, disableBodyOverride: boolean): ThemeOptions['components'] {\n  const components: ThemeOptions['components'] = {\n    MuiAlert,\n    MuiFormControl: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiPaper,\n    MuiTextField: {\n      defaultProps: {\n        size: 'small',\n      },\n    },\n    MuiDrawer: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiDialog: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n    MuiPopover: {\n      styleOverrides: {\n        paper: getModalBackgroundStyle,\n      },\n    },\n  };\n\n  if (disableBodyOverride) {\n    return components;\n  }\n\n  return {\n    MuiCssBaseline: {\n      styleOverrides: {\n        body: {\n          colorScheme: mode,\n        },\n      },\n    },\n    ...components,\n  };\n}\n"],"names":["createTheme","MuiAlert","MuiPaper","getPaletteOptions","typography","getModalBackgroundStyle","theme","backgroundStyle","palette","mode","backgroundImage","backgroundColor","designSystem","grey","getTheme","options","disableBodyOverride","mixins","components","getComponents","MuiFormControl","defaultProps","size","MuiTextField","MuiDrawer","styleOverrides","paper","MuiDialog","MuiPopover","MuiCssBaseline","body","colorScheme"],"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,WAAW,QAA0C,gBAAgB;AAC9E,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,QAAQ,QAAQ,8BAA8B;AACvD,SAASC,iBAAiB,QAAQ,YAAY;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAE1C,MAAMC,0BAA0B,CAAC,EAC/BC,KAAK,EAGN;IACC,MAAMC,kBACJD,MAAME,OAAO,CAACC,IAAI,KAAK,UACnB,CAAC,IACD;QACEC,iBAAiB;QACjBC,iBAAiBL,MAAME,OAAO,CAACI,YAAY,CAACC,IAAI,CAAC,IAAI;IACvD;IACN,OAAO;QACL,GAAGN,eAAe;IACpB;AACF;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASO,SACdL,IAAiB,EACjBM,UAA6C,CAAC,CAAC,EAC/CC,sBAA+B,KAAK;IAEpC,OAAOhB,YAAY;QACjBQ,SAASL,kBAAkBM;QAC3BL;QACAa,QAAQ,CAAC;QACTC,YAAYC,cAAcV,MAAMO;QAChC,GAAGD,OAAO;IACZ;AACF;AAEA,iEAAiE;AACjE,SAASI,cAAcV,IAAiB,EAAEO,mBAA4B;IACpE,MAAME,aAAyC;QAC7CjB;QACAmB,gBAAgB;YACdC,cAAc;gBACZC,MAAM;YACR;QACF;QACApB;QACAqB,cAAc;YACZF,cAAc;gBACZC,MAAM;YACR;QACF;QACAE,WAAW;YACTC,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAsB,WAAW;YACTF,gBAAgB;gBACdC,OAAOrB;YACT;QACF;QACAuB,YAAY;YACVH,gBAAgB;gBACdC,OAAOrB;YACT;QACF;IACF;IAEA,IAAIW,qBAAqB;QACvB,OAAOE;IACT;IAEA,OAAO;QACLW,gBAAgB;YACdJ,gBAAgB;gBACdK,MAAM;oBACJC,aAAatB;gBACf;YACF;QACF;QACA,GAAGS,UAAU;IACf;AACF"}

package/dist/theme/typography.d.ts

@@ -1,7 +1,9 @@
-import '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 import { ThemeOptions } from '@mui/material';
 /**
  * Theme typography options that are the same across both the dark and light themes.

package/dist/theme/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAS7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAqEjD,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/theme/typography.ts"],"names":[],"mappings":"AAaA,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAQ7C;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,YAAY,CAsEjD,CAAC"}

package/dist/theme/typography.js

@@ -10,20 +10,21 @@
 // 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 '@fontsource/lato/300.css';
-import '@fontsource/lato/400.css';
-import '@fontsource/lato/700.css';
-import '@fontsource/lato/900.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
+import '@fontsource/inter/900.css';
 // Font weights need to correspond with the imports at the top of the file
-// (Lato supports 100, 300, 400, 700, 900)
 const fontWeightLight = 300;
 const fontWeightRegular = 400;
-const fontWeightMedium = 700;
+const fontWeightMedium = 600;
 const fontWeightBold = 900;
 /**
  * Theme typography options that are the same across both the dark and light themes.
  */ export const typography = {
-    fontFamily: '"Lato", sans-serif',
+    fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
     fontWeightLight,
     fontWeightRegular,
     fontWeightMedium,

package/dist/theme/typography.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/typography.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 '@fontsource/lato/300.css';\nimport '@fontsource/lato/400.css';\nimport '@fontsource/lato/700.css';\nimport '@fontsource/lato/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\n// (Lato supports 100, 300, 400, 700, 900)\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 700;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily: '\"Lato\", sans-serif',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"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,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAGlC,0EAA0E;AAC1E,0CAA0C;AAC1C,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YAAY;IAEZL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}
+{"version":3,"sources":["../../src/theme/typography.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 '@fontsource/inter/300.css';\nimport '@fontsource/inter/400.css';\nimport '@fontsource/inter/500.css';\nimport '@fontsource/inter/600.css';\nimport '@fontsource/inter/700.css';\nimport '@fontsource/inter/900.css';\nimport { ThemeOptions } from '@mui/material';\n\n// Font weights need to correspond with the imports at the top of the file\nconst fontWeightLight = 300;\nconst fontWeightRegular = 400;\nconst fontWeightMedium = 600;\nconst fontWeightBold = 900;\n\n/**\n * Theme typography options that are the same across both the dark and light themes.\n */\nexport const typography: ThemeOptions['typography'] = {\n  fontFamily:\n    'Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"',\n\n  fontWeightLight,\n  fontWeightRegular,\n  fontWeightMedium,\n  fontWeightBold,\n\n  h1: {\n    fontSize: '1.5rem', // 24px\n    fontWeight: fontWeightMedium,\n    lineHeight: '32px',\n  },\n  h2: {\n    fontSize: '1.25rem', // 20px\n    fontWeight: fontWeightMedium,\n    lineHeight: '28px',\n  },\n  h3: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightMedium,\n    lineHeight: '24px',\n  },\n  h4: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n  },\n  h5: undefined,\n  h6: undefined,\n\n  body1: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightRegular,\n    lineHeight: '20px',\n  },\n  body2: {\n    fontSize: '0.75rem', // 12px\n    fontWeight: fontWeightRegular,\n    lineHeight: '18px',\n  },\n  subtitle1: {\n    fontSize: '1rem', // 16px\n    fontWeight: fontWeightRegular,\n    lineHeight: '24px',\n    letterSpacing: '0.02rem',\n  },\n  subtitle2: {\n    fontSize: '0.875rem', // 14px\n    fontWeight: fontWeightMedium,\n    lineHeight: '22px',\n    letterSpacing: '0.03rem',\n    textTransform: 'uppercase',\n  },\n\n  button: {\n    // 14px\n    fontSize: '0.875rem',\n    fontWeight: fontWeightMedium,\n    // 20 px\n    lineHeight: '1.25rem',\n    textTransform: 'none',\n    letterSpacing: '0.03rem',\n  },\n  caption: {\n    fontSize: '0.6875rem', // 11px\n    fontWeight: fontWeightRegular,\n    lineHeight: '16px',\n  },\n};\n"],"names":["fontWeightLight","fontWeightRegular","fontWeightMedium","fontWeightBold","typography","fontFamily","h1","fontSize","fontWeight","lineHeight","h2","h3","h4","h5","undefined","h6","body1","body2","subtitle1","letterSpacing","subtitle2","textTransform","button","caption"],"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,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AACnC,OAAO,4BAA4B;AAGnC,0EAA0E;AAC1E,MAAMA,kBAAkB;AACxB,MAAMC,oBAAoB;AAC1B,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB;AAEvB;;CAEC,GACD,OAAO,MAAMC,aAAyC;IACpDC,YACE;IAEFL;IACAC;IACAC;IACAC;IAEAG,IAAI;QACFC,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAC,IAAI;QACFH,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAE,IAAI;QACFJ,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAG,IAAI;QACFL,UAAU;QACVC,YAAYN;QACZO,YAAY;IACd;IACAI,IAAIC;IACJC,IAAID;IAEJE,OAAO;QACLT,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAQ,OAAO;QACLV,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;IACAS,WAAW;QACTX,UAAU;QACVC,YAAYP;QACZQ,YAAY;QACZU,eAAe;IACjB;IACAC,WAAW;QACTb,UAAU;QACVC,YAAYN;QACZO,YAAY;QACZU,eAAe;QACfE,eAAe;IACjB;IAEAC,QAAQ;QACN,OAAO;QACPf,UAAU;QACVC,YAAYN;QACZ,QAAQ;QACRO,YAAY;QACZY,eAAe;QACfF,eAAe;IACjB;IACAI,SAAS;QACPhB,UAAU;QACVC,YAAYP;QACZQ,YAAY;IACd;AACF,EAAE"}

package/dist/utils/axis.d.ts

@@ -1,5 +1,5 @@
 import type { XAXisComponentOption, YAXisComponentOption } from 'echarts';
-import { FormatOptions } from '@perses-dev/core';
+import { FormatOptions } from '../model';
 export interface YAxisConfig {
     format?: FormatOptions;
     position?: 'left' | 'right';

package/dist/utils/axis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../src/utils/axis.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AA0BD,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,EAAE,CAWpH;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,oBAAoB,GAAG,SAAS,EAC1C,UAAU,EAAE,aAAa,GAAG,SAAS,EACrC,iBAAiB,EAAE,aAAa,EAAE,EAClC,SAAS,CAAC,EAAE,MAAM,EAAE,GACnB,oBAAoB,EAAE,CAkDxB"}
+{"version":3,"file":"axis.d.ts","sourceRoot":"","sources":["../../src/utils/axis.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAe,MAAM,UAAU,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AA0BD,wBAAgB,gBAAgB,CAAC,IAAI,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,EAAE,CAWpH;AAED;;;;;;;;;GASG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,oBAAoB,GAAG,SAAS,EAC1C,UAAU,EAAE,aAAa,GAAG,SAAS,EACrC,iBAAiB,EAAE,aAAa,EAAE,EAClC,SAAS,CAAC,EAAE,MAAM,EAAE,GACnB,oBAAoB,EAAE,CAkDxB"}

package/dist/utils/axis.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import merge from 'lodash/merge';
-import { formatValue } from '@perses-dev/core';
+import { formatValue } from '../model';
 // Character width multipliers (approximate for typical UI fonts)
 const CHAR_WIDTH_BASE = 6;
 const AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping

package/dist/utils/axis.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/axis.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 merge from 'lodash/merge';\nimport type { XAXisComponentOption, YAXisComponentOption } from 'echarts';\nimport { formatValue, FormatOptions } from '@perses-dev/core';\n\nexport interface YAxisConfig {\n  format?: FormatOptions;\n  position?: 'left' | 'right';\n  show?: boolean;\n  min?: number;\n  max?: number;\n}\n\n// Character width multipliers (approximate for typical UI fonts)\nconst CHAR_WIDTH_BASE = 6;\nconst AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping\n\n/**\n * Estimate the pixel width needed for an axis label using Canvas API.\n */\nfunction estimateLabelWidth(format: FormatOptions | undefined, maxValue: number): number {\n  const formattedLabel = formatValue(maxValue, format);\n  // Create a canvas element (reuse if possible for performance)\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) {\n    // Fallback to estimation if canvas not available\n    return formattedLabel.length * CHAR_WIDTH_BASE;\n  }\n  context.font = '12px sans-serif';\n  const metrics = context.measureText(formattedLabel);\n  return metrics.width;\n}\n\n/*\n * Populate yAxis or xAxis properties, returns an Array since multiple axes are supported\n */\nexport function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: FormatOptions): unknown[] {\n  const AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number): string => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(AXIS_DEFAULT, axis)];\n}\n\n/**\n * Create multiple Y axes configurations for ECharts\n * The first axis (index 0) is always on the left side (default axis from panel settings)\n * Additional axes are placed on the right side\n *\n * @param baseAxis - Base axis configuration from panel settings\n * @param baseFormat - Format for the base/default Y axis\n * @param additionalFormats - Array of formats for additional right-side Y axes\n * @param maxValues - Optional array of max values for each additional format (used to compute dynamic label widths)\n */\nexport function getFormattedMultipleYAxes(\n  baseAxis: YAXisComponentOption | undefined,\n  baseFormat: FormatOptions | undefined,\n  additionalFormats: FormatOptions[],\n  maxValues?: number[]\n): YAXisComponentOption[] {\n  const axes: YAXisComponentOption[] = [];\n\n  // Base/default Y axis (left side)\n  const baseAxisConfig: YAXisComponentOption = merge(\n    {\n      type: 'value',\n      position: 'left',\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, baseFormat);\n        },\n        // Let ECharts handle width automatically\n        overflow: 'truncate',\n      },\n    },\n    baseAxis\n  );\n  axes.push(baseAxisConfig);\n\n  // Calculate cumulative offsets based on actual formatted label widths\n  let cumulativeOffset = 0;\n\n  // Additional Y axes (right side) for each unique format\n  additionalFormats.forEach((format, index) => {\n    const rightAxisConfig: YAXisComponentOption = {\n      type: 'value',\n      position: 'right',\n      // Dynamic offset based on cumulative width of preceding axis labels\n      offset: cumulativeOffset,\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, format);\n        },\n      },\n      splitLine: {\n        show: false, // Hide grid lines for right-side axes to reduce visual noise\n      },\n      show: baseAxis?.show,\n    };\n    axes.push(rightAxisConfig);\n    // For subsequent axes, add the width of the previous axis's labels\n    if (maxValues) {\n      cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;\n    }\n  });\n\n  return axes;\n}\n"],"names":["merge","formatValue","CHAR_WIDTH_BASE","AXIS_LABEL_PADDING","estimateLabelWidth","format","maxValue","formattedLabel","canvas","document","createElement","context","getContext","length","font","metrics","measureText","width","getFormattedAxis","axis","unit","AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getFormattedMultipleYAxes","baseAxis","baseFormat","additionalFormats","maxValues","axes","baseAxisConfig","position","overflow","push","cumulativeOffset","forEach","index","rightAxisConfig","offset","splitLine","show"],"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,OAAOA,WAAW,eAAe;AAEjC,SAASC,WAAW,QAAuB,mBAAmB;AAU9D,iEAAiE;AACjE,MAAMC,kBAAkB;AACxB,MAAMC,qBAAqB,IAAI,wCAAwC;AAEvE;;CAEC,GACD,SAASC,mBAAmBC,MAAiC,EAAEC,QAAgB;IAC7E,MAAMC,iBAAiBN,YAAYK,UAAUD;IAC7C,8DAA8D;IAC9D,MAAMG,SAASC,SAASC,aAAa,CAAC;IACtC,MAAMC,UAAUH,OAAOI,UAAU,CAAC;IAClC,IAAI,CAACD,SAAS;QACZ,iDAAiD;QACjD,OAAOJ,eAAeM,MAAM,GAAGX;IACjC;IACAS,QAAQG,IAAI,GAAG;IACf,MAAMC,UAAUJ,QAAQK,WAAW,CAACT;IACpC,OAAOQ,QAAQE,KAAK;AACtB;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,IAAkD,EAAEC,IAAoB;IACvG,MAAMC,eAAe;QACnBC,MAAM;QACNC,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAON;YAC5B;QACF;IACF;IACA,OAAO;QAACpB,MAAMqB,cAAcF;KAAM;AACpC;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASQ,0BACdC,QAA0C,EAC1CC,UAAqC,EACrCC,iBAAkC,EAClCC,SAAoB;IAEpB,MAAMC,OAA+B,EAAE;IAEvC,kCAAkC;IAClC,MAAMC,iBAAuCjC,MAC3C;QACEsB,MAAM;QACNY,UAAU;QACVX,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAOG;YAC5B;YACA,yCAAyC;YACzCM,UAAU;QACZ;IACF,GACAP;IAEFI,KAAKI,IAAI,CAACH;IAEV,sEAAsE;IACtE,IAAII,mBAAmB;IAEvB,wDAAwD;IACxDP,kBAAkBQ,OAAO,CAAC,CAACjC,QAAQkC;QACjC,MAAMC,kBAAwC;YAC5ClB,MAAM;YACNY,UAAU;YACV,oEAAoE;YACpEO,QAAQJ;YACRd,aAAa;gBAAC;gBAAG;aAAM;YACvBC,WAAW;gBACTC,WAAW,CAACC;oBACV,OAAOzB,YAAYyB,OAAOrB;gBAC5B;YACF;YACAqC,WAAW;gBACTC,MAAM;YACR;YACAA,MAAMf,UAAUe;QAClB;QACAX,KAAKI,IAAI,CAACI;QACV,mEAAmE;QACnE,IAAIT,WAAW;YACbM,oBAAoBjC,mBAAmBC,QAAQ0B,SAAS,CAACQ,MAAM,IAAI,QAAQpC;QAC7E;IACF;IAEA,OAAO6B;AACT"}
+{"version":3,"sources":["../../src/utils/axis.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 merge from 'lodash/merge';\nimport type { XAXisComponentOption, YAXisComponentOption } from 'echarts';\nimport { FormatOptions, formatValue } from '../model';\n\nexport interface YAxisConfig {\n  format?: FormatOptions;\n  position?: 'left' | 'right';\n  show?: boolean;\n  min?: number;\n  max?: number;\n}\n\n// Character width multipliers (approximate for typical UI fonts)\nconst CHAR_WIDTH_BASE = 6;\nconst AXIS_LABEL_PADDING = 10; // Extra padding to avoid label clipping\n\n/**\n * Estimate the pixel width needed for an axis label using Canvas API.\n */\nfunction estimateLabelWidth(format: FormatOptions | undefined, maxValue: number): number {\n  const formattedLabel = formatValue(maxValue, format);\n  // Create a canvas element (reuse if possible for performance)\n  const canvas = document.createElement('canvas');\n  const context = canvas.getContext('2d');\n  if (!context) {\n    // Fallback to estimation if canvas not available\n    return formattedLabel.length * CHAR_WIDTH_BASE;\n  }\n  context.font = '12px sans-serif';\n  const metrics = context.measureText(formattedLabel);\n  return metrics.width;\n}\n\n/*\n * Populate yAxis or xAxis properties, returns an Array since multiple axes are supported\n */\nexport function getFormattedAxis(axis?: YAXisComponentOption | XAXisComponentOption, unit?: FormatOptions): unknown[] {\n  const AXIS_DEFAULT = {\n    type: 'value',\n    boundaryGap: [0, '10%'],\n    axisLabel: {\n      formatter: (value: number): string => {\n        return formatValue(value, unit);\n      },\n    },\n  };\n  return [merge(AXIS_DEFAULT, axis)];\n}\n\n/**\n * Create multiple Y axes configurations for ECharts\n * The first axis (index 0) is always on the left side (default axis from panel settings)\n * Additional axes are placed on the right side\n *\n * @param baseAxis - Base axis configuration from panel settings\n * @param baseFormat - Format for the base/default Y axis\n * @param additionalFormats - Array of formats for additional right-side Y axes\n * @param maxValues - Optional array of max values for each additional format (used to compute dynamic label widths)\n */\nexport function getFormattedMultipleYAxes(\n  baseAxis: YAXisComponentOption | undefined,\n  baseFormat: FormatOptions | undefined,\n  additionalFormats: FormatOptions[],\n  maxValues?: number[]\n): YAXisComponentOption[] {\n  const axes: YAXisComponentOption[] = [];\n\n  // Base/default Y axis (left side)\n  const baseAxisConfig: YAXisComponentOption = merge(\n    {\n      type: 'value',\n      position: 'left',\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, baseFormat);\n        },\n        // Let ECharts handle width automatically\n        overflow: 'truncate',\n      },\n    },\n    baseAxis\n  );\n  axes.push(baseAxisConfig);\n\n  // Calculate cumulative offsets based on actual formatted label widths\n  let cumulativeOffset = 0;\n\n  // Additional Y axes (right side) for each unique format\n  additionalFormats.forEach((format, index) => {\n    const rightAxisConfig: YAXisComponentOption = {\n      type: 'value',\n      position: 'right',\n      // Dynamic offset based on cumulative width of preceding axis labels\n      offset: cumulativeOffset,\n      boundaryGap: [0, '10%'],\n      axisLabel: {\n        formatter: (value: number): string => {\n          return formatValue(value, format);\n        },\n      },\n      splitLine: {\n        show: false, // Hide grid lines for right-side axes to reduce visual noise\n      },\n      show: baseAxis?.show,\n    };\n    axes.push(rightAxisConfig);\n    // For subsequent axes, add the width of the previous axis's labels\n    if (maxValues) {\n      cumulativeOffset += estimateLabelWidth(format, maxValues[index] ?? 1000) + AXIS_LABEL_PADDING;\n    }\n  });\n\n  return axes;\n}\n"],"names":["merge","formatValue","CHAR_WIDTH_BASE","AXIS_LABEL_PADDING","estimateLabelWidth","format","maxValue","formattedLabel","canvas","document","createElement","context","getContext","length","font","metrics","measureText","width","getFormattedAxis","axis","unit","AXIS_DEFAULT","type","boundaryGap","axisLabel","formatter","value","getFormattedMultipleYAxes","baseAxis","baseFormat","additionalFormats","maxValues","axes","baseAxisConfig","position","overflow","push","cumulativeOffset","forEach","index","rightAxisConfig","offset","splitLine","show"],"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,OAAOA,WAAW,eAAe;AAEjC,SAAwBC,WAAW,QAAQ,WAAW;AAUtD,iEAAiE;AACjE,MAAMC,kBAAkB;AACxB,MAAMC,qBAAqB,IAAI,wCAAwC;AAEvE;;CAEC,GACD,SAASC,mBAAmBC,MAAiC,EAAEC,QAAgB;IAC7E,MAAMC,iBAAiBN,YAAYK,UAAUD;IAC7C,8DAA8D;IAC9D,MAAMG,SAASC,SAASC,aAAa,CAAC;IACtC,MAAMC,UAAUH,OAAOI,UAAU,CAAC;IAClC,IAAI,CAACD,SAAS;QACZ,iDAAiD;QACjD,OAAOJ,eAAeM,MAAM,GAAGX;IACjC;IACAS,QAAQG,IAAI,GAAG;IACf,MAAMC,UAAUJ,QAAQK,WAAW,CAACT;IACpC,OAAOQ,QAAQE,KAAK;AACtB;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,IAAkD,EAAEC,IAAoB;IACvG,MAAMC,eAAe;QACnBC,MAAM;QACNC,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAON;YAC5B;QACF;IACF;IACA,OAAO;QAACpB,MAAMqB,cAAcF;KAAM;AACpC;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASQ,0BACdC,QAA0C,EAC1CC,UAAqC,EACrCC,iBAAkC,EAClCC,SAAoB;IAEpB,MAAMC,OAA+B,EAAE;IAEvC,kCAAkC;IAClC,MAAMC,iBAAuCjC,MAC3C;QACEsB,MAAM;QACNY,UAAU;QACVX,aAAa;YAAC;YAAG;SAAM;QACvBC,WAAW;YACTC,WAAW,CAACC;gBACV,OAAOzB,YAAYyB,OAAOG;YAC5B;YACA,yCAAyC;YACzCM,UAAU;QACZ;IACF,GACAP;IAEFI,KAAKI,IAAI,CAACH;IAEV,sEAAsE;IACtE,IAAII,mBAAmB;IAEvB,wDAAwD;IACxDP,kBAAkBQ,OAAO,CAAC,CAACjC,QAAQkC;QACjC,MAAMC,kBAAwC;YAC5ClB,MAAM;YACNY,UAAU;YACV,oEAAoE;YACpEO,QAAQJ;YACRd,aAAa;gBAAC;gBAAG;aAAM;YACvBC,WAAW;gBACTC,WAAW,CAACC;oBACV,OAAOzB,YAAYyB,OAAOrB;gBAC5B;YACF;YACAqC,WAAW;gBACTC,MAAM;YACR;YACAA,MAAMf,UAAUe;QAClB;QACAX,KAAKI,IAAI,CAACI;QACV,mEAAmE;QACnE,IAAIT,WAAW;YACbM,oBAAoBjC,mBAAmBC,QAAQ0B,SAAS,CAACQ,MAAM,IAAI,QAAQpC;QAC7E;IACF;IAEA,OAAO6B;AACT"}

package/dist/utils/chart-actions.d.ts

@@ -1,5 +1,5 @@
 import { ECharts as EChartsInstance } from 'echarts/core';
-import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';
+import { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';
 import { DatapointInfo, TimeChartSeriesMapping } from '../model';
 export interface ZoomEventData {
     start: number;

package/dist/utils/chart-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/chart-actions.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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/chart-actions.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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/spec';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}

package/dist/utils/index.d.ts

@@ -6,6 +6,7 @@ export * from './component-ids';
 export * from './data-field-interpolation';
 export * from './format';
 export * from './memo';
+export * from './request-interpolation';
 export * from './selection-interpolation';
 export * from './theme-gen';
 export * from './variable-interpolation';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAaA,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC"}

package/dist/utils/index.js

@@ -18,6 +18,7 @@ export * from './component-ids';
 export * from './data-field-interpolation';
 export * from './format';
 export * from './memo';
+export * from './request-interpolation';
 export * from './selection-interpolation';
 export * from './theme-gen';
 export * from './variable-interpolation';

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './component-ids';\nexport * from './data-field-interpolation';\nexport * from './format';\nexport * from './memo';\nexport * from './selection-interpolation';\nexport * from './theme-gen';\nexport * from './variable-interpolation';\n"],"names":[],"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,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,6BAA6B;AAC3C,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,4BAA4B;AAC1C,cAAc,cAAc;AAC5B,cAAc,2BAA2B"}
+{"version":3,"sources":["../../src/utils/index.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\nexport * from './axis';\nexport * from './browser-storage';\nexport * from './chart-actions';\nexport * from './combine-sx';\nexport * from './component-ids';\nexport * from './data-field-interpolation';\nexport * from './format';\nexport * from './memo';\nexport * from './request-interpolation';\nexport * from './selection-interpolation';\nexport * from './theme-gen';\nexport * from './variable-interpolation';\n"],"names":[],"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,cAAc,SAAS;AACvB,cAAc,oBAAoB;AAClC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,kBAAkB;AAChC,cAAc,6BAA6B;AAC3C,cAAc,WAAW;AACzB,cAAc,SAAS;AACvB,cAAc,0BAA0B;AACxC,cAAc,4BAA4B;AAC1C,cAAc,cAAc;AAC5B,cAAc,2BAA2B"}

package/dist/utils/request-interpolation.d.ts

@@ -0,0 +1,6 @@
+import { RequestHeaders } from '@perses-dev/core';
+import { VariableStateMap } from './variable-interpolation';
+export type QueryParamValues = Record<string, string | string[]>;
+export declare function interpolateHeaders(headers: Record<string, string>, variableState: VariableStateMap): RequestHeaders;
+export declare function interpolateQueryParams(queryParams: QueryParamValues, variableState: VariableStateMap): QueryParamValues;
+//# sourceMappingURL=request-interpolation.d.ts.map

package/dist/utils/request-interpolation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"request-interpolation.d.ts","sourceRoot":"","sources":["../../src/utils/request-interpolation.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAoB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE9E,MAAM,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,aAAa,EAAE,gBAAgB,GAAG,cAAc,CAMnH;AAED,wBAAgB,sBAAsB,CACpC,WAAW,EAAE,gBAAgB,EAC7B,aAAa,EAAE,gBAAgB,GAC9B,gBAAgB,CAUlB"}

package/dist/utils/request-interpolation.js

@@ -0,0 +1,33 @@
+// 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 { replaceVariables } from './variable-interpolation';
+export function interpolateHeaders(headers, variableState) {
+    const result = {};
+    for (const [key, value] of Object.entries(headers)){
+        result[key] = replaceVariables(value, variableState);
+    }
+    return result;
+}
+export function interpolateQueryParams(queryParams, variableState) {
+    const result = {};
+    for (const [key, value] of Object.entries(queryParams)){
+        if (Array.isArray(value)) {
+            result[key] = value.map((v)=>replaceVariables(v, variableState));
+        } else {
+            result[key] = replaceVariables(value, variableState);
+        }
+    }
+    return result;
+}
+
+//# sourceMappingURL=request-interpolation.js.map

package/dist/utils/request-interpolation.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/request-interpolation.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 { RequestHeaders } from '@perses-dev/core';\nimport { replaceVariables, VariableStateMap } from './variable-interpolation';\n\nexport type QueryParamValues = Record<string, string | string[]>;\n\nexport function interpolateHeaders(headers: Record<string, string>, variableState: VariableStateMap): RequestHeaders {\n  const result: RequestHeaders = {};\n  for (const [key, value] of Object.entries(headers)) {\n    result[key] = replaceVariables(value, variableState);\n  }\n  return result;\n}\n\nexport function interpolateQueryParams(\n  queryParams: QueryParamValues,\n  variableState: VariableStateMap\n): QueryParamValues {\n  const result: QueryParamValues = {};\n  for (const [key, value] of Object.entries(queryParams)) {\n    if (Array.isArray(value)) {\n      result[key] = value.map((v) => replaceVariables(v, variableState));\n    } else {\n      result[key] = replaceVariables(value, variableState);\n    }\n  }\n  return result;\n}\n"],"names":["replaceVariables","interpolateHeaders","headers","variableState","result","key","value","Object","entries","interpolateQueryParams","queryParams","Array","isArray","map","v"],"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,gBAAgB,QAA0B,2BAA2B;AAI9E,OAAO,SAASC,mBAAmBC,OAA+B,EAAEC,aAA+B;IACjG,MAAMC,SAAyB,CAAC;IAChC,KAAK,MAAM,CAACC,KAAKC,MAAM,IAAIC,OAAOC,OAAO,CAACN,SAAU;QAClDE,MAAM,CAACC,IAAI,GAAGL,iBAAiBM,OAAOH;IACxC;IACA,OAAOC;AACT;AAEA,OAAO,SAASK,uBACdC,WAA6B,EAC7BP,aAA+B;IAE/B,MAAMC,SAA2B,CAAC;IAClC,KAAK,MAAM,CAACC,KAAKC,MAAM,IAAIC,OAAOC,OAAO,CAACE,aAAc;QACtD,IAAIC,MAAMC,OAAO,CAACN,QAAQ;YACxBF,MAAM,CAACC,IAAI,GAAGC,MAAMO,GAAG,CAAC,CAACC,IAAMd,iBAAiBc,GAAGX;QACrD,OAAO;YACLC,MAAM,CAACC,IAAI,GAAGL,iBAAiBM,OAAOH;QACxC;IACF;IACA,OAAOC;AACT"}

package/dist/utils/variable-interpolation.d.ts

@@ -1,4 +1,4 @@
-import { VariableValue } from '@perses-dev/core';
+import { VariableValue } from '@perses-dev/spec';
 /**
  * Option for a variable with label and value
  */

package/dist/utils/variable-interpolation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/variable-interpolation.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 { VariableValue } from '@perses-dev/core';\n\n/**\n * Option for a variable with label and value\n */\nexport type VariableOption = { label: string; value: string };\n\n/**\n * State of a variable including its current value, options, and loading state\n */\nexport type VariableState = {\n  value: VariableValue;\n  options?: VariableOption[];\n  loading: boolean;\n  error?: Error;\n  /**\n   * If a local variable is overriding an external variable, local var will have the flag ``overriding=true``.\n   */\n  overriding?: boolean;\n  /**\n   * If a local variable is overriding an external variable, external var will have the flag ``overridden=true``.\n   */\n  overridden?: boolean;\n  defaultValue?: VariableValue;\n};\n\n/**\n * Map of variable names to their states\n */\nexport type VariableStateMap = Record<string, VariableState>;\n\n/**\n * Supported interpolation formats for variable values\n */\nexport enum InterpolationFormat {\n  CSV = 'csv',\n  DISTRIBUTED = 'distributed',\n  DOUBLEQUOTE = 'doublequote',\n  GLOB = 'glob',\n  JSON = 'json',\n  LUCENE = 'lucene',\n  PERCENTENCODE = 'percentencode',\n  PIPE = 'pipe',\n  PROMETHEUS = 'prometheus',\n  RAW = 'raw',\n  REGEX = 'regex',\n  SINGLEQUOTE = 'singlequote',\n  SQLSTRING = 'sqlstring',\n  TEXT = 'text',\n  QUERYPARAM = 'queryparam',\n}\n\nfunction stringToFormat(val: string | undefined): InterpolationFormat | undefined {\n  if (!val) return undefined;\n\n  const lowerVal = val.toLowerCase();\n  return Object.values(InterpolationFormat).find((format) => format === lowerVal) || undefined;\n}\n\n/**\n * Interpolate an array of values with a specific format\n */\nexport function interpolate(values: string[], name: string, format: InterpolationFormat): string {\n  switch (format) {\n    case InterpolationFormat.CSV:\n    case InterpolationFormat.RAW:\n      return values.join(',');\n    case InterpolationFormat.DISTRIBUTED: {\n      const [first, ...rest] = values;\n      return `${[first, ...rest.map((v) => `${name}=${v}`)].join(',')}`;\n    }\n    case InterpolationFormat.DOUBLEQUOTE:\n      return values.map((v) => `\"${v}\"`).join(',');\n    case InterpolationFormat.GLOB:\n      return `{${values.join(',')}}`;\n    case InterpolationFormat.JSON: {\n      // values might contain stringified JSON objects so we need to parse them first\n      // and then return a JSON stringified array to return valid JSON\n      const parsedValues = values.map((v) => {\n        try {\n          return JSON.parse(v);\n        } catch {\n          return v;\n        }\n      });\n\n      return JSON.stringify(parsedValues);\n    }\n    case InterpolationFormat.LUCENE:\n      return `(${values.map((v) => `\"${v}\"`).join(' OR ')})`;\n    case InterpolationFormat.PERCENTENCODE:\n      return encodeURIComponent(values.join(','));\n    case InterpolationFormat.PIPE:\n      return values.join('|');\n    case InterpolationFormat.REGEX: {\n      const escapedRegex = values.map((v) => v.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'));\n      return `(${escapedRegex.join('|')})`;\n    }\n    case InterpolationFormat.SINGLEQUOTE:\n      return values.map((v) => `'${v}'`).join(',');\n    case InterpolationFormat.SQLSTRING:\n      return values.map((v) => `'${v.replace(/'/g, \"''\")}'`).join(',');\n    case InterpolationFormat.TEXT:\n      return values.join(' + ');\n    case InterpolationFormat.QUERYPARAM:\n      return values.map((v) => `${name}=${encodeURIComponent(v)}`).join('&');\n    case InterpolationFormat.PROMETHEUS:\n    default:\n      return `(${values.join('|')})`;\n  }\n}\n\n/**\n * Replace a single variable in text with its value\n */\nexport function replaceVariable(\n  text: string,\n  varName: string,\n  variableValue: VariableValue,\n  varFormat?: InterpolationFormat\n): string {\n  const variableSyntax = '$' + varName;\n  const alternativeVariableSyntax = '${' + varName + (varFormat ? ':' + varFormat : '') + '}';\n\n  let replaceString = '';\n  if (Array.isArray(variableValue)) {\n    replaceString = interpolate(variableValue, varName, varFormat || InterpolationFormat.PROMETHEUS);\n  }\n  if (typeof variableValue === 'string') {\n    replaceString = interpolate([variableValue], varName, varFormat || InterpolationFormat.RAW);\n  }\n\n  text = text.replaceAll(variableSyntax, replaceString);\n  return text.replaceAll(alternativeVariableSyntax, replaceString);\n}\n\n// This regular expression is designed to identify variable references in a string.\n// It supports two formats for referencing variables:\n// 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\\w+ matches one or more word characters).\n// 2. ${variableName} - This is a more complex format and the regular expression captures the variable name (\\w+ matches one or more word characters) in the curly braces.\n// 3. ${variableName:format} - This is a more complex format that allows specifying a format interpolation.\n\nconst VARIABLE_REGEX = /\\$(\\w+)|\\${(\\w+)(?:\\.([^:^}]+))?(?::([^}]+))?}/gm;\n\n/**\n * Returns a list of variables\n */\nexport function parseVariables(text: string): string[] {\n  const matches = new Set<string>();\n  let match;\n\n  while ((match = VARIABLE_REGEX.exec(text)) !== null) {\n    if (match) {\n      if (match[1]) {\n        // \\$(\\w+)\\\n        matches.add(match[1]);\n      } else if (match[2]) {\n        // \\${(\\w+)}\\\n        matches.add(match[2]);\n      }\n    }\n  }\n  // return unique matches\n  return Array.from(matches.values());\n}\n\n/**\n * Returns a map of variable names and its format. If no format is specified, it will be undefined.\n */\nexport function parseVariablesAndFormat(text: string): Map<string, InterpolationFormat | undefined> {\n  const matches = new Map<string, InterpolationFormat | undefined>();\n  let match;\n\n  while ((match = VARIABLE_REGEX.exec(text)) !== null) {\n    if (match) {\n      let format = undefined;\n      if (match[4]) {\n        format = match[4];\n      }\n      if (match[1]) {\n        // \\$(\\w+)\\\n        matches.set(match[1], stringToFormat(format));\n      } else if (match[2]) {\n        // \\${(\\w+)}\\\n        matches.set(match[2], stringToFormat(format));\n      }\n    }\n  }\n  return matches;\n}\n\n/**\n * Replace all variables in text with their values from the variable state map\n */\nexport function replaceVariables(text: string, variableState: VariableStateMap): string {\n  const variablesMap = parseVariablesAndFormat(text);\n  const variables = Array.from(variablesMap.keys());\n  let finalText = text;\n  variables\n    // Sorting variables by their length.\n    // In order to not have a variable name have contained in another variable name.\n    // i.e.: $__range replacing $__range_ms => '3600_ms' instead of '3600000'\n    .sort((a, b) => b.length - a.length)\n    .forEach((v) => {\n      const variable = variableState[v];\n      if (variable && variable.value !== undefined) {\n        finalText = replaceVariable(finalText, v, variable?.value, variablesMap.get(v));\n      }\n    });\n\n  return finalText;\n}\n"],"names":["InterpolationFormat","stringToFormat","val","undefined","lowerVal","toLowerCase","Object","values","find","format","interpolate","name","join","first","rest","map","v","parsedValues","JSON","parse","stringify","encodeURIComponent","escapedRegex","replace","replaceVariable","text","varName","variableValue","varFormat","variableSyntax","alternativeVariableSyntax","replaceString","Array","isArray","replaceAll","VARIABLE_REGEX","parseVariables","matches","Set","match","exec","add","from","parseVariablesAndFormat","Map","set","replaceVariables","variableState","variablesMap","variables","keys","finalText","sort","a","b","length","forEach","variable","value","get"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/variable-interpolation.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 { VariableValue } from '@perses-dev/spec';\n\n/**\n * Option for a variable with label and value\n */\nexport type VariableOption = { label: string; value: string };\n\n/**\n * State of a variable including its current value, options, and loading state\n */\nexport type VariableState = {\n  value: VariableValue;\n  options?: VariableOption[];\n  loading: boolean;\n  error?: Error;\n  /**\n   * If a local variable is overriding an external variable, local var will have the flag ``overriding=true``.\n   */\n  overriding?: boolean;\n  /**\n   * If a local variable is overriding an external variable, external var will have the flag ``overridden=true``.\n   */\n  overridden?: boolean;\n  defaultValue?: VariableValue;\n};\n\n/**\n * Map of variable names to their states\n */\nexport type VariableStateMap = Record<string, VariableState>;\n\n/**\n * Supported interpolation formats for variable values\n */\nexport enum InterpolationFormat {\n  CSV = 'csv',\n  DISTRIBUTED = 'distributed',\n  DOUBLEQUOTE = 'doublequote',\n  GLOB = 'glob',\n  JSON = 'json',\n  LUCENE = 'lucene',\n  PERCENTENCODE = 'percentencode',\n  PIPE = 'pipe',\n  PROMETHEUS = 'prometheus',\n  RAW = 'raw',\n  REGEX = 'regex',\n  SINGLEQUOTE = 'singlequote',\n  SQLSTRING = 'sqlstring',\n  TEXT = 'text',\n  QUERYPARAM = 'queryparam',\n}\n\nfunction stringToFormat(val: string | undefined): InterpolationFormat | undefined {\n  if (!val) return undefined;\n\n  const lowerVal = val.toLowerCase();\n  return Object.values(InterpolationFormat).find((format) => format === lowerVal) || undefined;\n}\n\n/**\n * Interpolate an array of values with a specific format\n */\nexport function interpolate(values: string[], name: string, format: InterpolationFormat): string {\n  switch (format) {\n    case InterpolationFormat.CSV:\n    case InterpolationFormat.RAW:\n      return values.join(',');\n    case InterpolationFormat.DISTRIBUTED: {\n      const [first, ...rest] = values;\n      return `${[first, ...rest.map((v) => `${name}=${v}`)].join(',')}`;\n    }\n    case InterpolationFormat.DOUBLEQUOTE:\n      return values.map((v) => `\"${v}\"`).join(',');\n    case InterpolationFormat.GLOB:\n      return `{${values.join(',')}}`;\n    case InterpolationFormat.JSON: {\n      // values might contain stringified JSON objects so we need to parse them first\n      // and then return a JSON stringified array to return valid JSON\n      const parsedValues = values.map((v) => {\n        try {\n          return JSON.parse(v);\n        } catch {\n          return v;\n        }\n      });\n\n      return JSON.stringify(parsedValues);\n    }\n    case InterpolationFormat.LUCENE:\n      return `(${values.map((v) => `\"${v}\"`).join(' OR ')})`;\n    case InterpolationFormat.PERCENTENCODE:\n      return encodeURIComponent(values.join(','));\n    case InterpolationFormat.PIPE:\n      return values.join('|');\n    case InterpolationFormat.REGEX: {\n      const escapedRegex = values.map((v) => v.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&'));\n      return `(${escapedRegex.join('|')})`;\n    }\n    case InterpolationFormat.SINGLEQUOTE:\n      return values.map((v) => `'${v}'`).join(',');\n    case InterpolationFormat.SQLSTRING:\n      return values.map((v) => `'${v.replace(/'/g, \"''\")}'`).join(',');\n    case InterpolationFormat.TEXT:\n      return values.join(' + ');\n    case InterpolationFormat.QUERYPARAM:\n      return values.map((v) => `${name}=${encodeURIComponent(v)}`).join('&');\n    case InterpolationFormat.PROMETHEUS:\n    default:\n      return `(${values.join('|')})`;\n  }\n}\n\n/**\n * Replace a single variable in text with its value\n */\nexport function replaceVariable(\n  text: string,\n  varName: string,\n  variableValue: VariableValue,\n  varFormat?: InterpolationFormat\n): string {\n  const variableSyntax = '$' + varName;\n  const alternativeVariableSyntax = '${' + varName + (varFormat ? ':' + varFormat : '') + '}';\n\n  let replaceString = '';\n  if (Array.isArray(variableValue)) {\n    replaceString = interpolate(variableValue, varName, varFormat || InterpolationFormat.PROMETHEUS);\n  }\n  if (typeof variableValue === 'string') {\n    replaceString = interpolate([variableValue], varName, varFormat || InterpolationFormat.RAW);\n  }\n\n  text = text.replaceAll(variableSyntax, replaceString);\n  return text.replaceAll(alternativeVariableSyntax, replaceString);\n}\n\n// This regular expression is designed to identify variable references in a string.\n// It supports two formats for referencing variables:\n// 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\\w+ matches one or more word characters).\n// 2. ${variableName} - This is a more complex format and the regular expression captures the variable name (\\w+ matches one or more word characters) in the curly braces.\n// 3. ${variableName:format} - This is a more complex format that allows specifying a format interpolation.\n\nconst VARIABLE_REGEX = /\\$(\\w+)|\\${(\\w+)(?:\\.([^:^}]+))?(?::([^}]+))?}/gm;\n\n/**\n * Returns a list of variables\n */\nexport function parseVariables(text: string): string[] {\n  const matches = new Set<string>();\n  let match;\n\n  while ((match = VARIABLE_REGEX.exec(text)) !== null) {\n    if (match) {\n      if (match[1]) {\n        // \\$(\\w+)\\\n        matches.add(match[1]);\n      } else if (match[2]) {\n        // \\${(\\w+)}\\\n        matches.add(match[2]);\n      }\n    }\n  }\n  // return unique matches\n  return Array.from(matches.values());\n}\n\n/**\n * Returns a map of variable names and its format. If no format is specified, it will be undefined.\n */\nexport function parseVariablesAndFormat(text: string): Map<string, InterpolationFormat | undefined> {\n  const matches = new Map<string, InterpolationFormat | undefined>();\n  let match;\n\n  while ((match = VARIABLE_REGEX.exec(text)) !== null) {\n    if (match) {\n      let format = undefined;\n      if (match[4]) {\n        format = match[4];\n      }\n      if (match[1]) {\n        // \\$(\\w+)\\\n        matches.set(match[1], stringToFormat(format));\n      } else if (match[2]) {\n        // \\${(\\w+)}\\\n        matches.set(match[2], stringToFormat(format));\n      }\n    }\n  }\n  return matches;\n}\n\n/**\n * Replace all variables in text with their values from the variable state map\n */\nexport function replaceVariables(text: string, variableState: VariableStateMap): string {\n  const variablesMap = parseVariablesAndFormat(text);\n  const variables = Array.from(variablesMap.keys());\n  let finalText = text;\n  variables\n    // Sorting variables by their length.\n    // In order to not have a variable name have contained in another variable name.\n    // i.e.: $__range replacing $__range_ms => '3600_ms' instead of '3600000'\n    .sort((a, b) => b.length - a.length)\n    .forEach((v) => {\n      const variable = variableState[v];\n      if (variable && variable.value !== undefined) {\n        finalText = replaceVariable(finalText, v, variable?.value, variablesMap.get(v));\n      }\n    });\n\n  return finalText;\n}\n"],"names":["InterpolationFormat","stringToFormat","val","undefined","lowerVal","toLowerCase","Object","values","find","format","interpolate","name","join","first","rest","map","v","parsedValues","JSON","parse","stringify","encodeURIComponent","escapedRegex","replace","replaceVariable","text","varName","variableValue","varFormat","variableSyntax","alternativeVariableSyntax","replaceString","Array","isArray","replaceAll","VARIABLE_REGEX","parseVariables","matches","Set","match","exec","add","from","parseVariablesAndFormat","Map","set","replaceVariables","variableState","variablesMap","variables","keys","finalText","sort","a","b","length","forEach","variable","value","get"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.53.1",
+  "version": "0.54.0-beta.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -32,9 +32,11 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@codemirror/lang-json": "^6.0.1",
     "@date-fns/tz": "^1.4.1",
-    "@fontsource/lato": "^4.5.10",
+    "@fontsource/inter": "^5.0.0",
     "@mui/x-date-pickers": "^7.23.1",
     "@perses-dev/core": "0.53.0",
+    "@perses-dev/spec": "0.2.0-beta.0",
+    "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^4.1.0",
@@ -53,6 +55,8 @@
     "@types/lodash": "^4.17.20"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/material": "^6.1.10",
     "lodash": "^4.17.21",
     "react": "^17.0.2 || ^18.0.0",