@perses-dev/plugin-system 0.33.0 → 0.35.0

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

@@ -19,10 +19,9 @@ Object.defineProperty(exports, "CalculationSelector", {
     get: ()=>CalculationSelector
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _calculations = require("../../model/calculations");
-const CALC_OPTIONS = Object.entries(_calculations.CALCULATIONS_CONFIG).map(([id, config])=>{
+const _core = require("@perses-dev/core");
+const CALC_OPTIONS = Object.entries(_core.CALCULATIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -32,19 +31,15 @@ function CalculationSelector({ value , onChange  }) {
     const handleCalculationChange = (_, newValue)=>{
         onChange(newValue.id);
     };
-    const calcConfig = _calculations.CALCULATIONS_CONFIG[value];
+    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

@@ -0,0 +1,153 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LegendOptionsEditor", {
+    enumerable: true,
+    get: ()=>LegendOptionsEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _components = require("@perses-dev/components");
+const _model = require("../../model");
+const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...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
+        const legendValue = checked === true ? {
+            position: _core.DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            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, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...legendPositionConfig,
+                        id: currentPosition
+                    },
+                    options: POSITION_OPTIONS,
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    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/components/LegendOptionsEditor/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./LegendOptionsEditor"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./CalculationSelector"), exports);
 _exportStar(require("./DatasourceSelect"), exports);
+_exportStar(require("./LegendOptionsEditor"), exports);
 _exportStar(require("./OptionsEditorTabs"), exports);
 _exportStar(require("./PanelSpecEditor"), exports);
 _exportStar(require("./PluginEditor"), exports);

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./components"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./runtime"), exports);
 _exportStar(require("./test-utils"), exports);
+_exportStar(require("./utils"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/model/index.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./calculations"), exports);
 _exportStar(require("./datasource"), exports);
+_exportStar(require("./legend"), exports);
 _exportStar(require("./panels"), exports);
 _exportStar(require("./plugins"), exports);
 _exportStar(require("./plugin-base"), exports);

package/dist/cjs/model/legend.js

@@ -0,0 +1,73 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_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'
+    },
+    Right: {
+        label: 'Right'
+    }
+};
+const LEGEND_MODE_CONFIG = {
+    List: {
+        label: 'List'
+    },
+    Table: {
+        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
+        return true;
+    }
+    if (!(0, _core.isValidLegendPosition)(legend.position)) {
+        return false;
+    }
+    if (legend.mode && !(0, _core.isValidLegendMode)(legend.mode)) {
+        return false;
+    }
+    return true;
+}

package/dist/cjs/runtime/template-variables.js

@@ -23,9 +23,11 @@ function _export(target, all) {
 _export(exports, {
     DEFAULT_ALL_VALUE: ()=>DEFAULT_ALL_VALUE,
     TemplateVariableContext: ()=>TemplateVariableContext,
-    useTemplateVariableValues: ()=>useTemplateVariableValues
+    useTemplateVariableValues: ()=>useTemplateVariableValues,
+    useReplaceVariablesInString: ()=>useReplaceVariablesInString
 });
 const _react = require("react");
+const _utils = require("../utils");
 const DEFAULT_ALL_VALUE = '$__all';
 const TemplateVariableContext = (0, _react.createContext)(undefined);
 function useTemplateVariableContext() {
@@ -55,3 +57,9 @@ function useTemplateVariableValues(names) {
     }
     return values;
 }
+function useReplaceVariablesInString(str) {
+    const variablesInString = str ? (0, _utils.parseTemplateVariables)(str) : [];
+    const variableValues = useTemplateVariableValues(variablesInString);
+    if (!str) return undefined;
+    return (0, _utils.replaceTemplateVariables)(str, variableValues);
+}

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./variables"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/utils/variables.js

@@ -0,0 +1,68 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    replaceTemplateVariables: ()=>replaceTemplateVariables,
+    replaceTemplateVariable: ()=>replaceTemplateVariable,
+    parseTemplateVariables: ()=>parseTemplateVariables
+});
+function replaceTemplateVariables(text, variableState) {
+    const variables = parseTemplateVariables(text);
+    let finalText = text;
+    variables.forEach((v)=>{
+        const variable = variableState[v];
+        if (variable && (variable === null || variable === void 0 ? void 0 : variable.value)) {
+            finalText = replaceTemplateVariable(finalText, v, variable === null || variable === void 0 ? void 0 : variable.value);
+        }
+    });
+    return finalText;
+}
+function replaceTemplateVariable(text, varName, templateVariableValue) {
+    const variableTemplate = '$' + varName;
+    let replaceString = '';
+    if (Array.isArray(templateVariableValue)) {
+        replaceString = `(${templateVariableValue.join('|')})`; // regex style
+    }
+    if (typeof templateVariableValue === 'string') {
+        replaceString = templateVariableValue;
+    }
+    return text.replaceAll(variableTemplate, replaceString);
+}
+// This regular expression is designed to identify variable references in a template string.
+// It supports two formats for referencing variables:
+// 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\w+ matches one or more word characters).
+// 2. [COMING SOON] ${variableName:value} - This is a more complex format that allows specifying a format function as well.
+// TODO: Fix this lint error
+// eslint-disable-next-line no-useless-escape
+const TEMPLATE_VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/gm;
+const parseTemplateVariables = (text)=>{
+    const regex = TEMPLATE_VARIABLE_REGEX;
+    const matches = new Set();
+    let match;
+    while((match = regex.exec(text)) !== null){
+        if (match && match.length > 1 && match[1]) {
+            matches.add(match[1]);
+        }
+    }
+    // return unique matches
+    return Array.from(matches.values());
+};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CalculationType } from '../../model/calculations';
+import { CalculationType } from '@perses-dev/core';
 export interface CalculationSelectorProps {
     value: CalculationType;
     onChange: (unit: CalculationType) => void;

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,0BAA0B,CAAC;AAUnG,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,9 +11,8 @@
 // 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 { CALCULATIONS_CONFIG } from '../../model/calculations';
+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 {
         id: id,
@@ -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 '../../model/calculations';\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,0BAA0B,CAAC;AAGnG,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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LegendSpecOptions } from '../../model';
+export interface LegendOptionsEditorProps {
+    value?: LegendSpecOptions;
+    onChange: (legend?: LegendSpecOptions) => void;
+}
+export declare function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps): JSX.Element;
+//# sourceMappingURL=LegendOptionsEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,147 @@
+// Copyright 2023 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 { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch } from '@mui/material';
+import { DEFAULT_LEGEND, getLegendMode, getLegendPosition } from '@perses-dev/core';
+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,
+        ...config
+    };
+});
+const MODE_OPTIONS = Object.entries(LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...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
+        const legendValue = checked === true ? {
+            position: DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            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, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ _jsx(Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                    value: {
+                        ...legendPositionConfig,
+                        id: currentPosition
+                    },
+                    options: POSITION_OPTIONS,
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    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'
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LegendOptionsEditor.js.map