@perses-dev/components 0.15.0 → 0.16.0

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -0,0 +1,32 @@
+// Copyright 2022 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, "OptionsEditorColumn", {
+    enumerable: true,
+    get: ()=>OptionsEditorColumn
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorColumn = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 4,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+            spacing: 3,
+            children: children
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -0,0 +1,61 @@
+// Copyright 2022 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, "OptionsEditorControl", {
+    enumerable: true,
+    get: ()=>OptionsEditorControl
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const OptionsEditorControl = ({ label , control  })=>{
+    // Make sure we have a unique ID we can use for associating labels and
+    // controls for a11y.
+    const generatedControlId = (0, _utils.useId)('EditorSectionControl');
+    const controlId = `${generatedControlId}-control`;
+    const controlProps = {
+        id: controlId
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                    htmlFor: controlId,
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        width: '160px',
+                        textAlign: 'right'
+                    },
+                    children: [
+                        " ",
+                        /*#__PURE__*/ _react.default.cloneElement(control, controlProps)
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -0,0 +1,29 @@
+// Copyright 2022 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, "OptionsEditorGrid", {
+    enumerable: true,
+    get: ()=>OptionsEditorGrid
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGrid = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        container: true,
+        spacing: 8,
+        children: children
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -0,0 +1,40 @@
+// Copyright 2022 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, "OptionsEditorGroup", {
+    enumerable: true,
+    get: ()=>OptionsEditorGroup
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGroup = ({ title , children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "overline",
+                component: "h4",
+                borderBottom: 1,
+                borderColor: "grey.300",
+                marginBottom: (theme)=>theme.spacing(1),
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                spacing: 1,
+                children: children
+            })
+        ]
+    });
+};

package/dist/cjs/OptionsEditorLayout/index.js

@@ -0,0 +1,31 @@
+// Copyright 2022 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("./OptionsEditorColumn"), exports);
+_exportStar(require("./OptionsEditorControl"), exports);
+_exportStar(require("./OptionsEditorGrid"), exports);
+_exportStar(require("./OptionsEditorGroup"), 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/Tooltip/SeriesInfo.js

@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _seriesMarker = require("./SeriesMarker");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , y , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
     // TODO (sjcobb): regex to remove __name__, improve series labels
     const formattedSeriesLabels = seriesName.replace(/[{}"]/g, '');
     if (totalSeries === 1) {
@@ -56,7 +56,7 @@ function SeriesInfo(props) {
                                             fontWeight: 700,
                                             paddingLeft: '2px'
                                         }),
-                                    children: y
+                                    children: formattedY
                                 })
                             ]
                         })
@@ -142,7 +142,7 @@ function SeriesInfo(props) {
                     textAlign: 'right',
                     verticalAlign: 'top'
                 },
-                children: y
+                children: formattedY
             })
         ]
     });

package/dist/cjs/Tooltip/Tooltip.js

@@ -64,14 +64,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip  }) {
+const Tooltip = /*#__PURE__*/ _react.default.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     if (mousePos === null || mousePos.target === null) return null;
     // ensure user is hovering over a chart before checking for nearby series
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart);
+    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
     var ref1;

package/dist/cjs/Tooltip/TooltipContent.js

@@ -75,12 +75,13 @@ function TooltipContent(props) {
                     sx: {
                         display: 'table'
                     },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , markerColor  })=>{
+                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
                         if (datumIdx === null || seriesIdx === null) return null;
                         const key = seriesIdx.toString() + datumIdx.toString();
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
                             seriesName: seriesName,
                             y: y,
+                            formattedY: formattedY,
                             markerColor: markerColor,
                             totalSeries: sortedFocusedSeries.length,
                             wrapLabels: wrapLabels

package/dist/cjs/Tooltip/focused-series.js

@@ -24,8 +24,9 @@ _export(exports, {
     getNearbySeries: ()=>getNearbySeries,
     getFocusedSeriesData: ()=>getFocusedSeriesData
 });
+const _model = require("../model");
 const _tooltipModel = require("./tooltip-model");
-function getNearbySeries(data, pointInGrid, yBuffer) {
+function getNearbySeries(data, pointInGrid, yBuffer, unit) {
     const currentFocusedData = [];
     var ref;
     const focusedX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
@@ -53,6 +54,7 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
                                 const formattedDate = _tooltipModel.TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
+                                const formattedY = (0, _model.formatValue)(yValue, unit);
                                 currentFocusedData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
@@ -60,6 +62,7 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
                                     date: formattedDate,
                                     x: xValue,
                                     y: yValue,
+                                    formattedY: formattedY,
                                     markerColor: markerColor.toString()
                                 });
                             }
@@ -71,7 +74,7 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
     }
     return currentFocusedData;
 }
-function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart) {
+function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
     if (chart === undefined || mousePos === null) return [];
     // prevents multiple tooltips showing from adjacent charts
     let cursorTargetMatchesChart = false;
@@ -107,7 +110,7 @@ function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart) {
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
         if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return getNearbySeries(chartData, pointInGrid, yBuffer);
+            return getNearbySeries(chartData, pointInGrid, yBuffer, unit);
         }
     }
     return [];

package/dist/cjs/Tooltip/focused-series.test.js

@@ -68,10 +68,28 @@ describe('getNearbySeries', ()=>{
             seriesName: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
             seriesIdx: 1,
             x: 1654007895000,
-            y: 0.0524463040446356
+            y: 0.0524463040446356,
+            formattedY: '0.05'
         }
     ];
     it('should return focused series data for points nearby the cursor', ()=>{
-        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer)).toEqual(focusedSeriesOutput);
+        const decimalUnit = {
+            kind: 'Decimal',
+            decimal_places: 2
+        };
+        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, decimalUnit)).toEqual(focusedSeriesOutput);
+    });
+    it('should return series values formatted as a percent', ()=>{
+        const percentFormattedOutput = [
+            ...focusedSeriesOutput
+        ];
+        if (percentFormattedOutput[0]) {
+            percentFormattedOutput[0].formattedY = '5%';
+        }
+        const percentFormattedUnit = {
+            kind: 'PercentDecimal',
+            decimal_places: 0
+        };
+        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, percentFormattedUnit)).toEqual(percentFormattedOutput);
     });
 });

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -0,0 +1,118 @@
+// Copyright 2022 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, "UnitSelector", {
+    enumerable: true,
+    get: ()=>UnitSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _model = require("../model");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+}).filter((config)=>!config.disableSelectorOption);
+const DECIMAL_OPTIONS = [
+    0,
+    1,
+    2,
+    3,
+    4
+];
+function UnitSelector({ value , onChange  }) {
+    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
+    const hasAbbreviate = (0, _model.isUnitWithAbbreviate)(value);
+    const handleKindChange = (_, newValue)=>{
+        onChange({
+            kind: newValue.id
+        });
+    };
+    const handleDecimalChange = (_, newValue)=>{
+        if (hasDecimalPlaces) {
+            onChange({
+                ...value,
+                decimal_places: newValue
+            });
+        }
+    };
+    const handleAbbreviateChange = (_, checked)=>{
+        if (hasAbbreviate) {
+            onChange({
+                ...value,
+                abbreviate: checked
+            });
+        }
+    };
+    const kindConfig = _model.UNIT_CONFIG[value.kind];
+    var _decimal_places;
+    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 ? !!value.abbreviate : false,
+                    onChange: handleAbbreviateChange,
+                    disabled: !hasAbbreviate
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Units",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    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: "Decimal",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: hasDecimalPlaces ? (_decimal_places = value.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _model.DEFAULT_DECIMAL_PLACES : 0,
+                    options: DECIMAL_OPTIONS,
+                    getOptionLabel: (option)=>`${option}`,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleDecimalChange,
+                    disabled: !hasDecimalPlaces,
+                    disableClearable: true
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/UnitSelector/UnitSelector.test.js

@@ -0,0 +1,218 @@
+// Copyright 2022 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _unitSelector = require("./UnitSelector");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('UnitSelector', ()=>{
+    const renderUnitSelector = (value, onChange = jest.fn())=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_unitSelector.UnitSelector, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getUnitSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Units'
+        });
+    };
+    const getDecimalSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Decimal'
+        });
+    };
+    const getAbbreviateSwitch = ()=>{
+        return _react.screen.getByRole('checkbox', {
+            name: 'Abbreviate'
+        });
+    };
+    it('can change the unit kind by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Minutes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        _userEvent.default.click(unitSelector);
+        const decimalOption = _react.screen.getByRole('option', {
+            name: 'Decimal'
+        });
+        _userEvent.default.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal'
+        });
+    });
+    it('can change the unit kind using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Bytes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        // Note that this tab order can change depending on the type because the
+        // abbreviate comes first and is disabled in some cases.
+        _userEvent.default.tab();
+        expect(unitSelector).toHaveFocus();
+        _userEvent.default.clear(unitSelector);
+        _userEvent.default.keyboard('years');
+        _react.screen.getByRole('option', {
+            name: 'Years'
+        });
+        _userEvent.default.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Years'
+        });
+    });
+    it('can change the decimal places by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        }, onChange);
+        _userEvent.default.click(getDecimalSelector());
+        const decimalOption = _react.screen.getByRole('option', {
+            name: '1'
+        });
+        _userEvent.default.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 1,
+            abbreviate: true
+        });
+    });
+    it('can change the decimal places using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Percent'
+        }, onChange);
+        const decimalSelector = getDecimalSelector();
+        _userEvent.default.tab();
+        _userEvent.default.tab();
+        expect(decimalSelector).toHaveFocus();
+        _userEvent.default.clear(decimalSelector);
+        _userEvent.default.keyboard('3');
+        _react.screen.getByRole('option', {
+            name: '3'
+        });
+        _userEvent.default.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Percent',
+            decimal_places: 3
+        });
+    });
+    it('can change abbreviate by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: true
+        }, onChange);
+        _userEvent.default.click(getAbbreviateSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: false
+        });
+    });
+    it('can change abbreviate using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0
+        }, onChange);
+        _userEvent.default.tab();
+        _userEvent.default.keyboard('{space}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        });
+    });
+    describe('with a time unit selected', ()=>{
+        it('does not allow the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Hours'
+            });
+            expect(getDecimalSelector()).toBeDisabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Minutes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a percent unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Percent'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'PercentDecimal'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a decimal unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('allows the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getAbbreviateSwitch()).toBeEnabled();
+        });
+    });
+    describe('with a bytes unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    it('should not show an option for disabled units', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal'
+        }, onChange);
+        _userEvent.default.click(getUnitSelector());
+        const percentShorthandOption = _react.screen.queryByRole('option', {
+            name: '%'
+        });
+        expect(percentShorthandOption).not.toBeInTheDocument();
+    });
+});