@perses-dev/components 0.39.0 → 0.40.0

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "TimeRangeSelector", {
     enumerable: true,
-    get: ()=>TimeRangeSelector
+    get: function() {
+        return TimeRangeSelector;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _calendar = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Calendar"));
+const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
 const _core = require("@perses-dev/core");
-const _timeZoneProvider = require("../context/TimeZoneProvider");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -32,12 +34,12 @@ function _interopRequireDefault(obj) {
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function TimeRangeSelector(props) {
     const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
-    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const { timeZone  } = (0, _TimeZoneProvider.useTimeZone)();
     const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
         value: formattedValue,
         onChange: onSelectChange,
-        IconComponent: _calendar.default,
+        IconComponent: _Calendar.default,
         inputProps: {
             'aria-label': `Select time range. Currently set to ${formattedValue}`
         },
@@ -57,16 +59,16 @@ function TimeRangeSelector(props) {
             } : {}
         },
         children: [
-            timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+            timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                     value: item.value.pastDuration,
                     children: item.display
                 }, idx)),
-            (0, _core.isRelativeTimeRange)(value) ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+            (0, _core.isRelativeTimeRange)(value) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                 onClick: ()=>{
                     onCustomClick();
                 },
                 children: "Custom time range"
-            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                 value: formattedValue,
                 onClick: ()=>{
                     onCustomClick();

package/dist/cjs/DateTimeRangePicker/index.js

@@ -14,17 +14,19 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./DateTimeRangePicker"), exports);
-_exportStar(require("./TimeRangeSelector"), exports);
-_exportStar(require("./AbsoluteTimePicker"), exports);
-function _exportStar(from, to) {
+_export_star(require("./DateTimeRangePicker"), exports);
+_export_star(require("./TimeRangeSelector"), exports);
+_export_star(require("./AbsoluteTimePicker"), exports);
+function _export_star(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];
-            }
-        });
+        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/DateTimeRangePicker/utils.js

@@ -21,18 +21,22 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    validateDateRange: ()=>validateDateRange,
-    formatAbsoluteRange: ()=>formatAbsoluteRange
+    validateDateRange: function() {
+        return validateDateRange;
+    },
+    formatAbsoluteRange: function() {
+        return formatAbsoluteRange;
+    }
 });
-const _dateFns = require("date-fns");
+const _datefns = require("date-fns");
 const _utils = require("../utils");
 function validateDateRange(startDate, endDate) {
     // TODO: display error as helperText
-    if (!(0, _dateFns.isValid)(startDate) || !(0, _dateFns.isValid)(endDate)) {
+    if (!(0, _datefns.isValid)(startDate) || !(0, _datefns.isValid)(endDate)) {
         console.error('Invalid Date');
         return false;
     }
-    if (!(0, _dateFns.isBefore)(startDate, endDate)) {
+    if (!(0, _datefns.isBefore)(startDate, endDate)) {
         console.error('End Time is before Start Time');
         return false;
     }

package/dist/cjs/Dialog/Dialog.js

@@ -16,35 +16,37 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Dialog", {
     enumerable: true,
-    get: ()=>Dialog
+    get: function() {
+        return Dialog;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _material = require("@mui/material");
-const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
 const _utils = require("../utils");
-function _interopRequireDefault(obj) {
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
 const Header = ({ children , onClose , ...props })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogTitle, {
                 ...props,
                 children: children
             }),
-            onClose && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+            onClose && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                 "aria-label": "Close",
                 onClick: onClose,
                 sx: dialogCloseIconButtonStyle,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
             })
         ]
     });
 };
-const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
         dividers: true,
         ...props,
         sx: (0, _utils.combineSx)({
@@ -52,13 +54,13 @@ const Content = ({ children , width =500 , sx , ...props })=>/*#__PURE__*/ (0, _
         }, sx),
         children: children
     });
-const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+const PrimaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         variant: "contained",
         type: "submit",
         ...props,
         children: children
     });
-const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
         variant: "outlined",
         color: "secondary",
         ...props,
@@ -84,7 +86,7 @@ const SecondaryButton = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime
         right: theme.spacing(0.5)
     };
 };
-const Dialog = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Dialog, {
+const Dialog = ({ children , ...props })=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
         ...props,
         children: children
     });

package/dist/cjs/Dialog/DiscardChangesConfirmationDialog.js

@@ -16,31 +16,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "DiscardChangesConfirmationDialog", {
     enumerable: true,
-    get: ()=>DiscardChangesConfirmationDialog
+    get: function() {
+        return DiscardChangesConfirmationDialog;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _dialog = require("./Dialog");
+const _Dialog = require("./Dialog");
 const DiscardChangesConfirmationDialog = (props)=>{
     const { description , isOpen , onCancel , onDiscardChanges  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Dialog.Dialog, {
         open: isOpen,
         "aria-labelledby": "discard-dialog",
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Header, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dialog.Dialog.Header, {
                 children: "Discard Changes"
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Content, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dialog.Dialog.Content, {
                 children: description
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog.Actions, {
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Dialog.Dialog.Actions, {
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         variant: "contained",
                         onClick: onDiscardChanges,
                         children: "Discard Changes"
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                         variant: "outlined",
                         color: "secondary",
                         onClick: onCancel,

package/dist/cjs/Dialog/index.js

@@ -14,16 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Dialog"), exports);
-_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
-function _exportStar(from, to) {
+_export_star(require("./Dialog"), exports);
+_export_star(require("./DiscardChangesConfirmationDialog"), exports);
+function _export_star(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];
-            }
-        });
+        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/Drawer/Drawer.js

@@ -16,14 +16,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "Drawer", {
     enumerable: true,
-    get: ()=>Drawer
+    get: function() {
+        return Drawer;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _utils = require("../utils");
 const DRAWER_DEFAULT_WIDTH = 1080;
 const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , children , ...rest })=>{
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Drawer, {
         ...rest,
         open: isOpen,
         onClose: onClose,

package/dist/cjs/Drawer/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./Drawer"), exports);
-function _exportStar(from, to) {
+_export_star(require("./Drawer"), exports);
+function _export_star(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];
-            }
-        });
+        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/EChart/EChart.js

@@ -16,15 +16,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "EChart", {
     enumerable: true,
-    get: ()=>EChart
+    get: function() {
+        return EChart;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
-const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
-const _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
-function _interopRequireDefault(obj) {
+const _isEqual = /*#__PURE__*/ _interop_require_default(require("lodash/isEqual"));
+const _debounce = /*#__PURE__*/ _interop_require_default(require("lodash/debounce"));
+function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
@@ -37,7 +39,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -176,7 +178,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     }, [
         sx
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         ref: containerRef,
         sx: sx
     });
@@ -197,8 +199,8 @@ function bindEvents(instance, events) {
     }
     for(const eventName in events){
         if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-            var _eventName;
-            const customEvent = (_eventName = events[eventName]) !== null && _eventName !== void 0 ? _eventName : null;
+            var _events_eventName;
+            const customEvent = (_events_eventName = events[eventName]) !== null && _events_eventName !== void 0 ? _events_eventName : null;
             if (customEvent) {
                 bindEvent(eventName, customEvent);
             }

package/dist/cjs/EChart/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./EChart"), exports);
-function _exportStar(from, to) {
+_export_star(require("./EChart"), exports);
+function _export_star(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];
-            }
-        });
+        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/ErrorAlert.js

@@ -16,13 +16,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ErrorAlert", {
     enumerable: true,
-    get: ()=>ErrorAlert
+    get: function() {
+        return ErrorAlert;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 function ErrorAlert(props) {
     const { error  } = props;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Alert, {
         severity: "error",
         children: error.message
     });

package/dist/cjs/ErrorBoundary.js

@@ -17,6 +17,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ErrorBoundary", {
     enumerable: true,
-    get: ()=>_reactErrorBoundary.ErrorBoundary
+    get: function() {
+        return _reacterrorboundary.ErrorBoundary;
+    }
 });
-const _reactErrorBoundary = require("react-error-boundary");
+const _reacterrorboundary = require("react-error-boundary");

package/dist/cjs/FontSizeSelector/FontSizeSelector.js

@@ -16,11 +16,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "FontSizeSelector", {
     enumerable: true,
-    get: ()=>FontSizeSelector
+    get: function() {
+        return FontSizeSelector;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _jsxruntime = require("react/jsx-runtime");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const FONT_SIZE_OPTIONS = [
     {
         id: 'default',
@@ -117,9 +119,9 @@ function FontSizeSelector({ value , onChange  }) {
     const handleFontSizeChange = (_, { value  })=>{
         onChange(value);
     };
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
         label: "Font Size",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
             value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
             options: FONT_SIZE_OPTIONS,
             getOptionLabel: (o)=>o.label,

package/dist/cjs/FontSizeSelector/index.js

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./FontSizeSelector"), exports);
-function _exportStar(from, to) {
+_export_star(require("./FontSizeSelector"), exports);
+function _export_star(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];
-            }
-        });
+        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/{UnitSelector/UnitSelector.js → FormatControls/FormatControls.js}

@@ -14,15 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "UnitSelector", {
+Object.defineProperty(exports, "FormatControls", {
     enumerable: true,
-    get: ()=>UnitSelector
+    get: function() {
+        return FormatControls;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
-const _optionsEditorLayout = require("../OptionsEditorLayout");
-const _settingsAutocomplete = require("../SettingsAutocomplete");
+const _OptionsEditorLayout = require("../OptionsEditorLayout");
+const _SettingsAutocomplete = require("../SettingsAutocomplete");
 const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -33,78 +35,78 @@ const DECIMAL_PLACES_OPTIONS = [
     {
         id: 'default',
         label: 'Default',
-        decimal_places: undefined
+        decimalPlaces: undefined
     },
     {
         id: '0',
         label: '0',
-        decimal_places: 0
+        decimalPlaces: 0
     },
     {
         id: '1',
         label: '1',
-        decimal_places: 1
+        decimalPlaces: 1
     },
     {
         id: '2',
         label: '2',
-        decimal_places: 2
+        decimalPlaces: 2
     },
     {
         id: '3',
         label: '3',
-        decimal_places: 3
+        decimalPlaces: 3
     },
     {
         id: '4',
         label: '4',
-        decimal_places: 4
+        decimalPlaces: 4
     }
 ];
-function getOptionByDecimalPlaces(decimal_places) {
-    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
+function getOptionByDecimalPlaces(decimalPlaces) {
+    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimalPlaces === decimalPlaces);
 }
-function UnitSelector({ value , onChange , disabled =false  }) {
+function FormatControls({ value , onChange , disabled =false  }) {
     const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
-    const hasAbbreviate = (0, _core.isUnitWithAbbreviate)(value);
+    const hasShortValues = (0, _core.isUnitWithShortValues)(value);
     const handleKindChange = (_, newValue)=>{
         onChange({
-            kind: newValue.id
+            unit: newValue.id
         });
     };
-    const handleDecimalPlacesChange = (_, { decimal_places  })=>{
+    const handleDecimalPlacesChange = (_, { decimalPlaces  })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,
-                decimal_places: decimal_places
+                decimalPlaces: decimalPlaces
             });
         }
     };
-    const handleAbbreviateChange = (_, checked)=>{
-        if (hasAbbreviate) {
+    const handleShortValuesChange = (_, checked)=>{
+        if (hasShortValues) {
             onChange({
                 ...value,
-                abbreviate: checked
+                shortValues: checked
             });
         }
     };
-    const kindConfig = _core.UNIT_CONFIG[value.kind];
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    const unitConfig = _core.UNIT_CONFIG[value.unit];
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
-                label: "Abbreviate",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? (0, _core.shouldAbbreviate)(value.abbreviate) : false,
-                    onChange: handleAbbreviateChange,
-                    disabled: !hasAbbreviate
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
+                label: "Short values",
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                    checked: hasShortValues ? (0, _core.shouldShortenValues)(value.shortValues) : false,
+                    onChange: handleShortValuesChange,
+                    disabled: !hasShortValues
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
                     value: {
-                        id: value.kind,
-                        ...kindConfig
+                        id: value.unit,
+                        ...unitConfig
                     },
                     options: KIND_OPTIONS,
                     groupBy: (option)=>option.group,
@@ -113,10 +115,10 @@ function UnitSelector({ value , onChange , disabled =false  }) {
                     disabled: disabled
                 })
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
-                    value: getOptionByDecimalPlaces(value.decimal_places),
+                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SettingsAutocomplete.SettingsAutocomplete, {
+                    value: getOptionByDecimalPlaces(value.decimalPlaces),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
                     onChange: handleDecimalPlacesChange,