@perses-dev/components 0.38.0 → 0.40.0

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,

package/dist/cjs/{UnitSelector → FormatControls}/index.js

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

@@ -21,17 +21,21 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    GaugeChart: ()=>GaugeChart,
-    getResponsiveValueSize: ()=>getResponsiveValueSize
+    GaugeChart: function() {
+        return GaugeChart;
+    },
+    getResponsiveValueSize: function() {
+        return getResponsiveValueSize;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _echart = require("../EChart");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _EChart = require("../EChart");
 (0, _core1.use)([
     _charts.GaugeChart,
     _components.GridComponent,
@@ -43,15 +47,15 @@ const PROGRESS_WIDTH = 16;
 // adjusts when to show pointer icon
 const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
-    const { width , height , data , unit , axisLine , max  } = props;
-    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const { width , height , data , format , axisLine , max  } = props;
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
-        var ref;
+        var _chartsTheme_echartsTheme_textStyle;
         if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
-        const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
-        var ref1;
+        const valueSizeClamp = getResponsiveValueSize(data.value, format, width, height);
+        var _chartsTheme_echartsTheme_textStyle_color;
         return {
             title: {
                 show: false
@@ -170,7 +174,7 @@ function GaugeChart(props) {
                         // when the value is `null`, making it difficult to differentiate
                         // `null` from a true `NaN` case.
                         ()=>'null' : (value)=>{
-                            return (0, _core.formatValue)(value, unit);
+                            return (0, _core.formatValue)(value, format);
                         }
                     },
                     data: [
@@ -181,7 +185,7 @@ function GaugeChart(props) {
                             // https://echarts.apache.org/en/option.html#series-gauge.data.title
                             title: {
                                 show: true,
-                                color: (ref1 = (ref = chartsTheme.echartsTheme.textStyle) === null || ref === void 0 ? void 0 : ref.color) !== null && ref1 !== void 0 ? ref1 : 'inherit',
+                                color: (_chartsTheme_echartsTheme_textStyle_color = (_chartsTheme_echartsTheme_textStyle = chartsTheme.echartsTheme.textStyle) === null || _chartsTheme_echartsTheme_textStyle === void 0 ? void 0 : _chartsTheme_echartsTheme_textStyle.color) !== null && _chartsTheme_echartsTheme_textStyle_color !== void 0 ? _chartsTheme_echartsTheme_textStyle_color : 'inherit',
                                 offsetCenter: [
                                     0,
                                     '55%'
@@ -200,11 +204,11 @@ function GaugeChart(props) {
         width,
         height,
         chartsTheme,
-        unit,
+        format,
         axisLine,
         max
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
         sx: {
             width: width,
             height: height,
@@ -214,13 +218,13 @@ function GaugeChart(props) {
         theme: chartsTheme.echartsTheme
     });
 }
-function getResponsiveValueSize(value, unit, width, height) {
+function getResponsiveValueSize(value, format, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, unit) : `${value}`;
-    var _length;
-    const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
+    const formattedValue = typeof value === 'number' ? (0, _core.formatValue)(value, format) : `${value}`;
+    var _formattedValue_length;
+    const valueCharacters = (_formattedValue_length = formattedValue.length) !== null && _formattedValue_length !== void 0 ? _formattedValue_length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
     return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
 }