@perses-dev/components 0.34.0 → 0.35.0

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -23,6 +23,7 @@ const _material = require("@mui/material");
 const _model = require("../model");
 const _utils = require("../model/units/utils");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _settingsAutocomplete = require("../SettingsAutocomplete");
 const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -31,26 +32,32 @@ const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
 }).filter((config)=>!config.disableSelectorOption);
 const DECIMAL_PLACES_OPTIONS = [
     {
+        id: 'default',
         label: 'Default',
         decimal_places: undefined
     },
     {
+        id: '0',
         label: '0',
         decimal_places: 0
     },
     {
+        id: '1',
         label: '1',
         decimal_places: 1
     },
     {
+        id: '2',
         label: '2',
         decimal_places: 2
     },
     {
+        id: '3',
         label: '3',
         decimal_places: 3
     },
     {
+        id: '4',
         label: '4',
         decimal_places: 4
     }
@@ -95,42 +102,23 @@ function UnitSelector({ value , onChange  }) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: {
                         id: value.kind,
                         ...kindConfig
                     },
                     options: KIND_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
                     groupBy: (option)=>option.group,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
-                    renderOption: (renderOptsProps, option)=>{
-                        // Custom option needed to get some increased left padding to make
-                        // the items more distinct from the group label.
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
-                            ...renderOptsProps,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                paddingLeft: (theme)=>theme.spacing(1),
-                                children: option.label
-                            })
-                        });
-                    },
                     onChange: handleKindChange,
                     disableClearable: true
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: getOptionByDecimalPlaces(value.decimal_places),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    isOptionEqualToValue: (option, value)=>option.label === value.label,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true

package/dist/cjs/YAxisLabel.js

@@ -26,7 +26,7 @@ function YAxisLabel({ name , height  }) {
             display: 'inline-block',
             maxWidth: height,
             position: 'absolute',
-            top: '45%',
+            top: `calc(${height}px / 2)`,
             transform: 'translateX(-50%) rotate(-90deg)',
             transformOrigin: 'top',
             textAlign: 'center',

package/dist/cjs/index.js

@@ -28,6 +28,7 @@ _exportStar(require("./JSONEditor"), exports);
 _exportStar(require("./Legend"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
+_exportStar(require("./SettingsAutocomplete"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./Table"), exports);
 _exportStar(require("./ThresholdsEditor"), exports);

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
+export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -24,6 +24,7 @@ export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
+export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.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\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"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,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/index.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\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"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,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/model/theme.d.ts

@@ -1,7 +1,7 @@
-import type { EChartsOption, EChartsCoreOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption } from 'echarts';
+import type { EChartsOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption, TitleComponentOption, ComposeOption, XAXisComponentOption, YAXisComponentOption } from 'echarts';
 export interface PersesChartsTheme {
     echartsTheme: EChartsTheme;
-    noDataOption: EChartsCoreOption;
+    noDataOption: NoDataOption;
     sparkline: {
         width: number;
         color: string;
@@ -28,4 +28,5 @@ export interface ThresholdColorPalette {
     defaultColor: string;
     palette: string[];
 }
+export declare type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;
 //# sourceMappingURL=theme.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEtH,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,iBAAiB,CAAC;IAChC,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,SAAS,EAAE;QACT;;WAEG;QACH,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;IACF,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/model/theme.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EACV,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,oBAAoB,EACpB,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,EAAE,YAAY,CAAC;IAC3B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF;;OAEG;IACH,SAAS,EAAE;QACT;;WAEG;QACH,OAAO,EAAE;YACP,OAAO,EAAE,MAAM,CAAC;SACjB,CAAC;KACH,CAAC;IACF,UAAU,EAAE,qBAAqB,CAAC;CACnC;AAGD,MAAM,WAAW,YAAa,SAAQ,aAAa;IACjD,GAAG,CAAC,EAAE,eAAe,CAAC;IACtB,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,KAAK,CAAC,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,oBAAY,YAAY,GAAG,aAAa,CAAC,oBAAoB,GAAG,oBAAoB,GAAG,oBAAoB,CAAC,CAAC"}

package/dist/model/theme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/theme.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 type { EChartsOption, EChartsCoreOption, BarSeriesOption, LineSeriesOption, GaugeSeriesOption } from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: EChartsCoreOption;\n  sparkline: {\n    width: number;\n    color: string;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport interface ThresholdColorPalette {\n  defaultColor: string;\n  palette: string[];\n}\n"],"names":[],"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,WAiCC"}
+{"version":3,"sources":["../../src/model/theme.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 type {\n  EChartsOption,\n  BarSeriesOption,\n  LineSeriesOption,\n  GaugeSeriesOption,\n  TitleComponentOption,\n  ComposeOption,\n  XAXisComponentOption,\n  YAXisComponentOption,\n} from 'echarts';\n\nexport interface PersesChartsTheme {\n  echartsTheme: EChartsTheme;\n  noDataOption: NoDataOption;\n  sparkline: {\n    width: number;\n    color: string;\n  };\n  /**\n   * Theming for the container that wraps a chart.\n   */\n  container: {\n    /**\n     * Padding in pixels.\n     */\n    padding: {\n      default: number;\n    };\n  };\n  thresholds: ThresholdColorPalette;\n}\n\n// https://github.com/apache/echarts/issues/12489#issuecomment-643185207\nexport interface EChartsTheme extends EChartsOption {\n  bar?: BarSeriesOption;\n  line?: LineSeriesOption;\n  gauge?: GaugeSeriesOption;\n}\n\nexport interface ThresholdColorPalette {\n  defaultColor: string;\n  palette: string[];\n}\n\nexport type NoDataOption = ComposeOption<TitleComponentOption | XAXisComponentOption | YAXisComponentOption>;\n"],"names":[],"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,WA4C6G"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.34.0",
+    "@perses-dev/core": "0.35.0",
     "@tanstack/react-table": "^8.9.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
@@ -51,7 +51,7 @@
     "react-virtuoso": "^4.3.6"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.34.0"
+    "@perses-dev/storybook": "0.35.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",