@perses-dev/plugin-system 0.34.0 → 0.35.0

package/dist/cjs/components/CalculationSelector/CalculationSelector.js

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "CalculationSelector", {
     get: ()=>CalculationSelector
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
 const CALC_OPTIONS = Object.entries(_core.CALCULATIONS_CONFIG).map(([id, config])=>{
@@ -35,16 +34,12 @@ function CalculationSelector({ value , onChange  }) {
     const calcConfig = _core.CALCULATIONS_CONFIG[value];
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
         label: "Calculation",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
             value: {
                 ...calcConfig,
                 id: value
             },
             options: CALC_OPTIONS,
-            isOptionEqualToValue: (option, value)=>option.id === value.id,
-            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                    ...params
-                }),
             onChange: handleCalculationChange,
             disableClearable: true
         })

package/dist/cjs/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -35,6 +35,12 @@ const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config]
         ...config
     };
 });
+const VALUE_OPTIONS = Object.entries(_model.LEGEND_VALUE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -56,11 +62,31 @@ function LegendOptionsEditor({ value , onChange  }) {
             mode: newValue.id
         });
     };
+    const handleLegendValueChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            values: newValue.map((value)=>{
+                return value.id;
+            })
+        });
+    };
     const isValidLegend = (0, _model.validateLegendSpec)(value);
     const currentPosition = (0, _core.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
     const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
     const currentMode = (0, _core.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
     const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
+    const currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    const legendValuesConfig = currentValues.reduce((result, item)=>{
+        const config = _model.LEGEND_VALUE_CONFIG[item];
+        if (config) {
+            result.push({
+                ...config,
+                id: item
+            });
+        }
+        return result;
+    }, []);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorAlert, {
@@ -78,16 +104,12 @@ function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
                 label: "Position",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendPositionChange,
                     disabled: value === undefined,
                     disableClearable: true
@@ -95,20 +117,36 @@ function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
                 label: "Mode",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendModeConfig,
                         id: currentMode
                     },
                     options: MODE_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendModeChange,
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Values",
+                description: "Computed values ignore nulls.",
+                control: // For some reason, the inferred option type doesn't always seem to work
+                // quite right when `multiple` is true. Explicitly setting the generics
+                // to work around this.
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    multiple: true,
+                    disableCloseOnSelect: true,
+                    disableClearable: true,
+                    value: legendValuesConfig,
+                    options: VALUE_OPTIONS,
+                    onChange: handleLegendValueChange,
+                    disabled: value === undefined || currentMode !== 'Table',
+                    limitTags: 1,
+                    ChipProps: {
+                        size: 'small'
+                    }
+                })
             })
         ]
     });

package/dist/cjs/model/legend.js

@@ -21,11 +21,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    legendValues: ()=>legendValues,
     LEGEND_POSITIONS_CONFIG: ()=>LEGEND_POSITIONS_CONFIG,
     LEGEND_MODE_CONFIG: ()=>LEGEND_MODE_CONFIG,
+    LEGEND_VALUE_CONFIG: ()=>LEGEND_VALUE_CONFIG,
     validateLegendSpec: ()=>validateLegendSpec
 });
 const _core = require("@perses-dev/core");
+const legendValues = [
+    'Mean',
+    'First',
+    'FirstNumber',
+    'Last',
+    'LastNumber',
+    'Min',
+    'Max',
+    'Sum'
+];
 const LEGEND_POSITIONS_CONFIG = {
     Bottom: {
         label: 'Bottom'
@@ -42,6 +54,10 @@ const LEGEND_MODE_CONFIG = {
         label: 'Table'
     }
 };
+const LEGEND_VALUE_CONFIG = legendValues.reduce((config, value)=>{
+    config[value] = _core.CALCULATIONS_CONFIG[value];
+    return config;
+}, {});
 function validateLegendSpec(legend) {
     if (legend === undefined) {
         // undefined is valid since this is how legend is hidden by default

package/dist/components/CalculationSelector/CalculationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAyBhF"}
+{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAuBhF"}

package/dist/components/CalculationSelector/CalculationSelector.js

@@ -11,8 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField, Autocomplete } from '@mui/material';
-import { OptionsEditorControl } from '@perses-dev/components';
+import { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
 import { CALCULATIONS_CONFIG } from '@perses-dev/core';
 const CALC_OPTIONS = Object.entries(CALCULATIONS_CONFIG).map(([id, config])=>{
     return {
@@ -27,16 +26,12 @@ export function CalculationSelector({ value , onChange  }) {
     const calcConfig = CALCULATIONS_CONFIG[value];
     return /*#__PURE__*/ _jsx(OptionsEditorControl, {
         label: "Calculation",
-        control: /*#__PURE__*/ _jsx(Autocomplete, {
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
             value: {
                 ...calcConfig,
                 id: value
             },
             options: CALC_OPTIONS,
-            isOptionEqualToValue: (option, value)=>option.id === value.id,
-            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                    ...params
-                }),
             onChange: handleCalculationChange,
             disableClearable: true
         })

package/dist/components/CalculationSelector/CalculationSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { TextField, Autocomplete } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps) {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption) => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <Autocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          isOptionEqualToValue={(option, value) => option.id === value.id}\n          renderInput={(params) => <TextField {...params} />}\n          onChange={handleCalculationChange}\n          disableClearable\n        ></Autocomplete>\n      }\n    />\n  );\n}\n"],"names":["TextField","Autocomplete","OptionsEditorControl","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","isOptionEqualToValue","option","renderInput","params","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,EAAEC,YAAY,QAAQ,eAAe,CAAC;AACxD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAC9D,SAASC,mBAAmB,QAA4C,kBAAkB,CAAC;AAG3F,MAAMC,YAAY,GAAoCC,MAAM,CAACC,OAAO,CAACH,mBAAmB,CAAC,CAACI,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC9G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,uBAAuB,GAAG,CAACC,CAAU,EAAEC,QAAuC,GAAK;QACvFH,QAAQ,CAACG,QAAQ,CAACP,EAAE,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMQ,UAAU,GAAGb,mBAAmB,CAACQ,KAAK,CAAC,AAAC;IAE9C,qBACE,KAACT,oBAAoB;QACnBe,KAAK,EAAC,aAAa;QACnBC,OAAO,gBACL,KAACjB,YAAY;YACXU,KAAK,EAAE;gBACL,GAAGK,UAAU;gBACbR,EAAE,EAAEG,KAAK;aACV;YACDQ,OAAO,EAAEf,YAAY;YACrBgB,oBAAoB,EAAE,CAACC,MAAM,EAAEV,KAAK,GAAKU,MAAM,CAACb,EAAE,KAAKG,KAAK,CAACH,EAAE;YAC/Dc,WAAW,EAAE,CAACC,MAAM,iBAAK,KAACvB,SAAS;oBAAE,GAAGuB,MAAM;kBAAI;YAClDX,QAAQ,EAAEC,uBAAuB;YACjCW,gBAAgB;UACF;MAElB,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps) {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption) => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        ></SettingsAutocomplete>\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,wBAAwB,CAAC;AACpF,SAASC,mBAAmB,QAA4C,kBAAkB,CAAC;AAG3F,MAAMC,YAAY,GAAoCC,MAAM,CAACC,OAAO,CAACH,mBAAmB,CAAC,CAACI,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC9G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,uBAAuB,GAAG,CAACC,CAAU,EAAEC,QAAuC,GAAK;QACvFH,QAAQ,CAACG,QAAQ,CAACP,EAAE,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMQ,UAAU,GAAGb,mBAAmB,CAACQ,KAAK,CAAC,AAAC;IAE9C,qBACE,KAACV,oBAAoB;QACnBgB,KAAK,EAAC,aAAa;QACnBC,OAAO,gBACL,KAAChB,oBAAoB;YACnBS,KAAK,EAAE;gBACL,GAAGK,UAAU;gBACbR,EAAE,EAAEG,KAAK;aACV;YACDQ,OAAO,EAAEf,YAAY;YACrBQ,QAAQ,EAAEC,uBAAuB;YACjCO,gBAAgB;UACM;MAE1B,CACF;AACJ,CAAC"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAGL,iBAAiB,EAGlB,MAAM,aAAa,CAAC;AAoBrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAwEhF"}
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAGL,iBAAiB,EAKlB,MAAM,aAAa,CAAC;AA4BrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eA6GhF"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Switch, TextField } from '@mui/material';
+import { Switch } from '@mui/material';
 import { DEFAULT_LEGEND, getLegendMode, getLegendPosition } from '@perses-dev/core';
-import { ErrorAlert, OptionsEditorControl } from '@perses-dev/components';
-import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec } from '../../model';
+import { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
+import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG } from '../../model';
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -27,6 +27,12 @@ const MODE_OPTIONS = Object.entries(LEGEND_MODE_CONFIG).map(([id, config])=>{
         ...config
     };
 });
+const VALUE_OPTIONS = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 export function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -48,11 +54,31 @@ export function LegendOptionsEditor({ value , onChange  }) {
             mode: newValue.id
         });
     };
+    const handleLegendValueChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            values: newValue.map((value)=>{
+                return value.id;
+            })
+        });
+    };
     const isValidLegend = validateLegendSpec(value);
     const currentPosition = getLegendPosition(value === null || value === void 0 ? void 0 : value.position);
     const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];
     const currentMode = getLegendMode(value === null || value === void 0 ? void 0 : value.mode);
     const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];
+    const currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    const legendValuesConfig = currentValues.reduce((result, item)=>{
+        const config = LEGEND_VALUE_CONFIG[item];
+        if (config) {
+            result.push({
+                ...config,
+                id: item
+            });
+        }
+        return result;
+    }, []);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ _jsx(ErrorAlert, {
@@ -70,16 +96,12 @@ export function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Position",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: {
                         ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendPositionChange,
                     disabled: value === undefined,
                     disableClearable: true
@@ -87,20 +109,36 @@ export function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Mode",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: {
                         ...legendModeConfig,
                         id: currentMode
                     },
                     options: MODE_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendModeChange,
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Values",
+                description: "Computed values ignore nulls.",
+                control: // For some reason, the inferred option type doesn't always seem to work
+                // quite right when `multiple` is true. Explicitly setting the generics
+                // to work around this.
+                /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                    multiple: true,
+                    disableCloseOnSelect: true,
+                    disableClearable: true,
+                    value: legendValuesConfig,
+                    options: VALUE_OPTIONS,
+                    onChange: handleLegendValueChange,
+                    disabled: value === undefined || currentMode !== 'Table',
+                    limitTags: 1,
+                    ChipProps: {
+                        size: 'small'
+                    }
+                })
             })
         ]
     });

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Autocomplete, Switch, SwitchProps, TextField } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl } from '@perses-dev/components';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendModeOption = LegendSingleSelectConfig & { id: LegendSpecOptions['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['mode'],\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <Autocomplete\n            value={{\n              ...legendPositionConfig,\n              id: currentPosition,\n            }}\n            options={POSITION_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <Autocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n    </>\n  );\n}\n"],"names":["Autocomplete","Switch","TextField","DEFAULT_LEGEND","getLegendMode","getLegendPosition","ErrorAlert","OptionsEditorControl","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","error","name","message","label","control","options","isOptionEqualToValue","option","renderInput","params","disabled","disableClearable"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <>\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendPositionConfig,\n              id: currentPosition,\n            }}\n            options={POSITION_OPTIONS}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Values\"\n        description=\"Computed values ignore nulls.\"\n        control={\n          // For some reason, the inferred option type doesn't always seem to work\n          // quite right when `multiple` is true. Explicitly setting the generics\n          // to work around this.\n          <SettingsAutocomplete<LegendValueOption, true, true>\n            multiple={true}\n            disableCloseOnSelect\n            disableClearable\n            value={legendValuesConfig}\n            options={VALUE_OPTIONS}\n            onChange={handleLegendValueChange}\n            disabled={value === undefined || currentMode !== 'Table'}\n            limitTags={1}\n            ChipProps={{\n              size: 'small',\n            }}\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","ErrorAlert","OptionsEditorControl","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentValues","legendValuesConfig","reduce","result","item","push","error","name","message","label","control","options","disabled","disableClearable","description","multiple","disableCloseOnSelect","limitTags","ChipProps","size"],"mappings":"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"}

package/dist/model/legend.d.ts

@@ -1,9 +1,15 @@
-import { LegendMode, LegendOptionsBase, LegendPositions } from '@perses-dev/core';
-export declare type LegendSpecOptions = LegendOptionsBase;
+import { CalculationType, LegendMode, LegendOptionsBase, LegendPositions } from '@perses-dev/core';
+export declare const legendValues: CalculationType[];
+export declare type LegendValue = (typeof legendValues)[number];
+export interface LegendSpecOptions extends LegendOptionsBase {
+    values?: LegendValue[];
+}
 export declare type LegendSingleSelectConfig = {
     label: string;
+    description?: string;
 };
 export declare const LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendSingleSelectConfig>>;
 export declare const LEGEND_MODE_CONFIG: Readonly<Record<LegendMode, LegendSingleSelectConfig>>;
+export declare const LEGEND_VALUE_CONFIG: Partial<Record<"First" | "Last" | "FirstNumber" | "LastNumber" | "Mean" | "Sum" | "Min" | "Max", LegendSingleSelectConfig>>;
 export declare function validateLegendSpec(legend?: LegendOptionsBase): boolean;
 //# sourceMappingURL=legend.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/model/legend.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,EAGhB,MAAM,kBAAkB,CAAC;AAS1B,oBAAY,iBAAiB,GAAG,iBAAiB,CAAC;AAElD,oBAAY,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,wBAAwB,CAAC,CAG/F,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,wBAAwB,CAAC,CAGrF,CAAC;AAEF,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,iBAAiB,WAa5D"}
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/model/legend.ts"],"names":[],"mappings":"AAaA,OAAO,EAEL,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,eAAe,EAGhB,MAAM,kBAAkB,CAAC;AAU1B,eAAO,MAAM,YAAY,EAAE,eAAe,EASzC,CAAC;AACF,oBAAY,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAKxD,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC1D,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,oBAAY,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,eAAe,EAAE,wBAAwB,CAAC,CAG/F,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,wBAAwB,CAAC,CAGrF,CAAC;AAEF,eAAO,MAAM,mBAAmB,6HAIgC,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,MAAM,CAAC,EAAE,iBAAiB,WAa5D"}

package/dist/model/legend.js

@@ -10,7 +10,24 @@
 // 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 { isValidLegendMode, isValidLegendPosition } from '@perses-dev/core';
+import { CALCULATIONS_CONFIG, isValidLegendMode, isValidLegendPosition } from '@perses-dev/core';
+// This file contains legend-related model code specific to panel plugin specs.
+// See the `core` package for common/shared legend model code and the
+// `components` package for legend model code specific to the Legend component.
+// Explicity listing the calculations we intend to use for legend values because
+// we want them ordered in a specific way, and it may be possible in the future
+// that we only use a subset of calculations for the legend because the calculations
+// are also used by other features.
+export const legendValues = [
+    'Mean',
+    'First',
+    'FirstNumber',
+    'Last',
+    'LastNumber',
+    'Min',
+    'Max',
+    'Sum'
+];
 export const LEGEND_POSITIONS_CONFIG = {
     Bottom: {
         label: 'Bottom'
@@ -27,6 +44,10 @@ export const LEGEND_MODE_CONFIG = {
         label: 'Table'
     }
 };
+export const LEGEND_VALUE_CONFIG = legendValues.reduce((config, value)=>{
+    config[value] = CALCULATIONS_CONFIG[value];
+    return config;
+}, {});
 export function validateLegendSpec(legend) {
     if (legend === undefined) {
         // undefined is valid since this is how legend is hidden by default

package/dist/model/legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/legend.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  LegendMode,\n  LegendOptionsBase,\n  LegendPositions,\n  isValidLegendMode,\n  isValidLegendPosition,\n} from '@perses-dev/core';\n\n// This file contains legend-related model code specific to panel plugin specs.\n// See the `core` package for common/shared legend model code and the\n// `components` package for legend model code specific to the Legend component.\n\n// Note: explicitly defining different options for the legend spec and\n// legend component that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport type LegendSpecOptions = LegendOptionsBase;\n\nexport type LegendSingleSelectConfig = {\n  label: string;\n};\n\nexport const LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendSingleSelectConfig>> = {\n  Bottom: { label: 'Bottom' },\n  Right: { label: 'Right' },\n};\n\nexport const LEGEND_MODE_CONFIG: Readonly<Record<LegendMode, LegendSingleSelectConfig>> = {\n  List: { label: 'List' },\n  Table: { label: 'Table' },\n};\n\nexport function validateLegendSpec(legend?: LegendOptionsBase) {\n  if (legend === undefined) {\n    // undefined is valid since this is how legend is hidden by default\n    return true;\n  }\n  if (!isValidLegendPosition(legend.position)) {\n    return false;\n  }\n  if (legend.mode && !isValidLegendMode(legend.mode)) {\n    return false;\n  }\n\n  return true;\n}\n"],"names":["isValidLegendMode","isValidLegendPosition","LEGEND_POSITIONS_CONFIG","Bottom","label","Right","LEGEND_MODE_CONFIG","List","Table","validateLegendSpec","legend","undefined","position","mode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAIEA,iBAAiB,EACjBC,qBAAqB,QAChB,kBAAkB,CAAC;AAe1B,OAAO,MAAMC,uBAAuB,GAAgE;IAClGC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,MAAME,kBAAkB,GAA2D;IACxFC,IAAI,EAAE;QAAEH,KAAK,EAAE,MAAM;KAAE;IACvBI,KAAK,EAAE;QAAEJ,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,SAASK,kBAAkB,CAACC,MAA0B,EAAE;IAC7D,IAAIA,MAAM,KAAKC,SAAS,EAAE;QACxB,mEAAmE;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAACV,qBAAqB,CAACS,MAAM,CAACE,QAAQ,CAAC,EAAE;QAC3C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAIF,MAAM,CAACG,IAAI,IAAI,CAACb,iBAAiB,CAACU,MAAM,CAACG,IAAI,CAAC,EAAE;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"sources":["../../src/model/legend.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  CALCULATIONS_CONFIG,\n  CalculationType,\n  LegendMode,\n  LegendOptionsBase,\n  LegendPositions,\n  isValidLegendMode,\n  isValidLegendPosition,\n} from '@perses-dev/core';\n\n// This file contains legend-related model code specific to panel plugin specs.\n// See the `core` package for common/shared legend model code and the\n// `components` package for legend model code specific to the Legend component.\n\n// Explicity listing the calculations we intend to use for legend values because\n// we want them ordered in a specific way, and it may be possible in the future\n// that we only use a subset of calculations for the legend because the calculations\n// are also used by other features.\nexport const legendValues: CalculationType[] = [\n  'Mean',\n  'First',\n  'FirstNumber',\n  'Last',\n  'LastNumber',\n  'Min',\n  'Max',\n  'Sum',\n];\nexport type LegendValue = (typeof legendValues)[number];\n\n// Note: explicitly defining different options for the legend spec and\n// legend component that extend from some common options, so we can allow the\n// component and the spec to diverge in some upcoming work.\nexport interface LegendSpecOptions extends LegendOptionsBase {\n  values?: LegendValue[];\n}\n\nexport type LegendSingleSelectConfig = {\n  label: string;\n  description?: string;\n};\n\nexport const LEGEND_POSITIONS_CONFIG: Readonly<Record<LegendPositions, LegendSingleSelectConfig>> = {\n  Bottom: { label: 'Bottom' },\n  Right: { label: 'Right' },\n};\n\nexport const LEGEND_MODE_CONFIG: Readonly<Record<LegendMode, LegendSingleSelectConfig>> = {\n  List: { label: 'List' },\n  Table: { label: 'Table' },\n};\n\nexport const LEGEND_VALUE_CONFIG = legendValues.reduce((config, value) => {\n  config[value] = CALCULATIONS_CONFIG[value];\n\n  return config;\n}, {} as Partial<Record<LegendValue, LegendSingleSelectConfig>>);\n\nexport function validateLegendSpec(legend?: LegendOptionsBase) {\n  if (legend === undefined) {\n    // undefined is valid since this is how legend is hidden by default\n    return true;\n  }\n  if (!isValidLegendPosition(legend.position)) {\n    return false;\n  }\n  if (legend.mode && !isValidLegendMode(legend.mode)) {\n    return false;\n  }\n\n  return true;\n}\n"],"names":["CALCULATIONS_CONFIG","isValidLegendMode","isValidLegendPosition","legendValues","LEGEND_POSITIONS_CONFIG","Bottom","label","Right","LEGEND_MODE_CONFIG","List","Table","LEGEND_VALUE_CONFIG","reduce","config","value","validateLegendSpec","legend","undefined","position","mode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SACEA,mBAAmB,EAKnBC,iBAAiB,EACjBC,qBAAqB,QAChB,kBAAkB,CAAC;AAE1B,+EAA+E;AAC/E,qEAAqE;AACrE,+EAA+E;AAE/E,gFAAgF;AAChF,+EAA+E;AAC/E,oFAAoF;AACpF,mCAAmC;AACnC,OAAO,MAAMC,YAAY,GAAsB;IAC7C,MAAM;IACN,OAAO;IACP,aAAa;IACb,MAAM;IACN,YAAY;IACZ,KAAK;IACL,KAAK;IACL,KAAK;CACN,CAAC;AAeF,OAAO,MAAMC,uBAAuB,GAAgE;IAClGC,MAAM,EAAE;QAAEC,KAAK,EAAE,QAAQ;KAAE;IAC3BC,KAAK,EAAE;QAAED,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,MAAME,kBAAkB,GAA2D;IACxFC,IAAI,EAAE;QAAEH,KAAK,EAAE,MAAM;KAAE;IACvBI,KAAK,EAAE;QAAEJ,KAAK,EAAE,OAAO;KAAE;CAC1B,CAAC;AAEF,OAAO,MAAMK,mBAAmB,GAAGR,YAAY,CAACS,MAAM,CAAC,CAACC,MAAM,EAAEC,KAAK,GAAK;IACxED,MAAM,CAACC,KAAK,CAAC,GAAGd,mBAAmB,CAACc,KAAK,CAAC,CAAC;IAE3C,OAAOD,MAAM,CAAC;AAChB,CAAC,EAAE,EAAE,CAA2D,CAAC;AAEjE,OAAO,SAASE,kBAAkB,CAACC,MAA0B,EAAE;IAC7D,IAAIA,MAAM,KAAKC,SAAS,EAAE;QACxB,mEAAmE;QACnE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,IAAI,CAACf,qBAAqB,CAACc,MAAM,CAACE,QAAQ,CAAC,EAAE;QAC3C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAIF,MAAM,CAACG,IAAI,IAAI,CAAClB,iBAAiB,CAACe,MAAM,CAACG,IAAI,CAAC,EAAE;QAClD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/plugin-system",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "The plugin feature in Pereses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -28,14 +28,14 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.34.0",
-    "@perses-dev/core": "0.34.0",
+    "@perses-dev/components": "0.35.0",
+    "@perses-dev/core": "0.35.0",
     "immer": "^9.0.15",
     "use-immer": "^0.7.0",
     "use-query-params": "^2.1.2"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.34.0"
+    "@perses-dev/storybook": "0.35.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",