@perses-dev/components 0.34.0 → 0.36.0

package/dist/cjs/Legend/Legend.js

@@ -31,7 +31,7 @@ const _tableLegend = require("./TableLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -74,7 +74,9 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         height,
         items: data,
         selectedItems,
-        onLegendItemClick
+        onLegendItemClick,
+        onItemMouseOver,
+        onItemMouseOut
     };
     let legendContent;
     if (mode === 'Table') {

package/dist/cjs/Legend/ListLegend.js

@@ -22,7 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _reactVirtuoso = require("react-virtuoso");
 const _listLegendItem = require("./ListLegendItem");
 const _legendModel = require("./legend-model");
-function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick , onItemMouseOver , onItemMouseOut  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
@@ -34,13 +34,14 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
         itemContent: (index, item)=>{
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                index: index,
                 truncateLabel: truncateLabels,
                 isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
+                onMouseOver: onItemMouseOver,
+                onMouseOut: onItemMouseOut,
                 sx: {
-                    // Having an explicit width is important for the ellipsizing to
-                    // work correctly. Subtract padding to simulate padding.
-                    width: width,
+                    width: '100%',
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,14 +62,14 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , onMouseOver , onMouseOut , index , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
-    function handleMouseOver() {
+    function handleTextMouseOver() {
         if (truncateLabel) {
             setNoWrap(false);
         }
     }
-    function handleMouseOut() {
+    function handleTextMouseOut() {
         if (truncateLabel) {
             setNoWrap(true);
         }
@@ -90,6 +90,18 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         dense: true,
         key: item.id,
         onClick: handleClick,
+        onMouseOver: (e)=>{
+            return onMouseOver === null || onMouseOver === void 0 ? void 0 : onMouseOver(e, {
+                id: item.id,
+                index
+            });
+        },
+        onMouseOut: (e)=>{
+            return onMouseOut === null || onMouseOut === void 0 ? void 0 : onMouseOut(e, {
+                id: item.id,
+                index
+            });
+        },
         selected: isVisuallySelected,
         ref: ref,
         children: [
@@ -107,8 +119,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
                 primaryTypographyProps: {
                     noWrap: noWrap
                 },
-                onMouseOver: handleMouseOver,
-                onMouseOut: handleMouseOut
+                onMouseOver: handleTextMouseOver,
+                onMouseOut: handleTextMouseOut
             })
         ]
     });

package/dist/cjs/Legend/TableLegend.js

@@ -25,6 +25,7 @@ const COLUMNS = [
     {
         accessorKey: 'label',
         header: 'Name',
+        enableSorting: true,
         // Starting with `title` attr instead of a tooltip because it is easier to
         // implement. We should try adding a tooltip in the future, but we'll need
         // to be very careful about performance when doing so with large tables.
@@ -40,7 +41,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , onItemMouseOver , onItemMouseOut , height , width , columns: additionalColumns = [] , sorting , onSortingChange  }) {
     const rowSelection = (0, _react.useMemo)(()=>{
         return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
         // TODO: clean this up if we switch to also using checkboxes in list legend.
@@ -65,11 +66,16 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
+        onRowMouseOver: onItemMouseOver,
+        onRowMouseOut: onItemMouseOut,
+        sorting: sorting,
+        onSortingChange: onSortingChange,
         data: items,
         columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,
-        checkboxSelection: true
+        checkboxSelection: true,
+        rowSelectionVariant: "legend"
     });
 }

package/dist/cjs/LineChart/LineChart.js

@@ -82,10 +82,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
-    var ref;
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -93,6 +93,29 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return {
+            highlightSeries ({ id  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: id
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
+        };
+    }, [
+        data.timeSeries.length
+    ]);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -247,6 +270,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            if (chartRef.current !== undefined) {
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -266,7 +292,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             }
         },
         children: [
-            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
@@ -289,4 +315,4 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             })
         ]
     });
-}
+});

package/dist/cjs/LineChart/utils.js

@@ -25,10 +25,11 @@ _export(exports, {
     restoreChart: ()=>restoreChart,
     getDateRange: ()=>getDateRange,
     getFormattedDate: ()=>getFormattedDate,
-    getYAxes: ()=>getYAxes
+    getYAxes: ()=>getYAxes,
+    clearHighlightedSeries: ()=>clearHighlightedSeries
 });
+const _core = require("@perses-dev/core");
 const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-const _model = require("../model");
 const _utils = require("../utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -90,7 +91,7 @@ function getYAxes(yAxis, unit) {
         ],
         axisLabel: {
             formatter: (value)=>{
-                return (0, _model.formatValue)(value, unit);
+                return (0, _core.formatValue)(value, unit);
             }
         }
     };
@@ -98,3 +99,13 @@ function getYAxes(yAxis, unit) {
         (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
     ];
 }
+function clearHighlightedSeries(chart, totalSeries) {
+    if (chart.dispatchAction !== undefined) {
+        for(let i = 0; i < totalSeries; i++){
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
+        }
+    }
+}

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -76,7 +76,7 @@ const OptionsEditorControl = ({ label , control , description  })=>{
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
-                        width: '150px',
+                        width: '180px',
                         textAlign: 'right'
                     },
                     children: [

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -0,0 +1,51 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RefreshIntervalPicker", {
+    enumerable: true,
+    get: ()=>RefreshIntervalPicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function RefreshIntervalPicker(props) {
+    const { value , onChange , timeOptions , height  } = props;
+    const formattedValue = value;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                id: "refreshInterval",
+                value: formattedValue,
+                onChange: (event)=>{
+                    const duration = event.target.value;
+                    onChange(duration);
+                },
+                inputProps: {
+                    'aria-label': `Select refresh interval. Currently set to ${formattedValue}`
+                },
+                sx: {
+                    '.MuiSelect-select': height ? {
+                        lineHeight: height,
+                        paddingY: 0
+                    } : {}
+                },
+                children: timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                        value: item.value.pastDuration,
+                        children: item.display
+                    }, idx))
+            })
+        })
+    });
+}

package/dist/cjs/{model/units → RefreshIntervalPicker}/index.js

@@ -14,9 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./units"), exports);
-_exportStar(require("./constants"), exports);
-_exportStar(require("./types"), exports);
+_exportStar(require("./RefreshIntervalPicker"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -0,0 +1,66 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SettingsAutocomplete", {
+    enumerable: true,
+    get: ()=>SettingsAutocomplete
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        ...params
+    }) , ...otherProps }) {
+    const getOptionLabel = (option)=>{
+        var _label;
+        return (_label = option.label) !== null && _label !== void 0 ? _label : option.id;
+    };
+    // Note: this component currently is not virtualized because it is specific
+    // to being used for settings, which generally have a pretty small list of
+    // options. If this changes to include values with many options, virtualization
+    // should be added using react-virtuoso.
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+        isOptionEqualToValue: (option, value)=>option.id === value.id,
+        getOptionDisabled: (option)=>!!option.disabled,
+        getOptionLabel: getOptionLabel,
+        options: options,
+        renderInput: renderInput,
+        renderOption: (props, option)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "body1",
+                            component: "div",
+                            children: getOptionLabel(option)
+                        }),
+                        option.description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            component: "div",
+                            color: (theme)=>theme.palette.text.secondary,
+                            children: option.description
+                        })
+                    ]
+                })
+            });
+        },
+        filterOptions: (0, _material.createFilterOptions)({
+            // Include the label and the description in search.
+            stringify: (option)=>`${getOptionLabel(option)} ${option.description || ''}`
+        }),
+        ...otherProps
+    });
+}

package/dist/cjs/{model/units/types.js → SettingsAutocomplete/index.js}

@@ -10,19 +10,19 @@
 // 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.
-// Common types needed across individual unit groups and the overall combined
-// units.
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "UNIT_GROUPS", {
-    enumerable: true,
-    get: ()=>UNIT_GROUPS
-});
-const UNIT_GROUPS = [
-    'Time',
-    'Percent',
-    'Decimal',
-    'Bytes'
-];
+_exportStar(require("./SettingsAutocomplete"), 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/StatChart/StatChart.js

@@ -20,21 +20,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
+const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
-const _core = require("echarts/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 _units = require("../model/units");
 const _echart = require("../EChart");
+const _calculateFontSize = require("./calculateFontSize");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-(0, _core.use)([
+(0, _core1.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -42,12 +43,48 @@ function _interopRequireDefault(obj) {
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const MIN_VALUE_SIZE = 12;
-const MAX_VALUE_SIZE = 36;
+const LINE_HEIGHT = 1.2;
+const SERIES_NAME_MAX_FONT_SIZE = 30;
+const SERIES_NAME_FONT_WEIGHT = 400;
+const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
-    const { width , height , data , unit , color , sparkline  } = props;
+    var ref, ref1;
+    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
-    const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
+    let formattedValue = '';
+    if (data.calculatedValue === null) {
+        formattedValue = 'null';
+    } else if (typeof data.calculatedValue === 'number') {
+        formattedValue = (0, _core.formatValue)(data.calculatedValue, unit);
+    }
+    const containerPadding = chartsTheme.container.padding.default;
+    var ref2;
+    // calculate series name font size and height
+    let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+        text: (ref2 = data === null || data === void 0 ? void 0 : (ref = data.seriesData) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : '',
+        fontWeight: SERIES_NAME_FONT_WEIGHT,
+        width,
+        height: height * 0.125,
+        lineHeight: LINE_HEIGHT,
+        maxSize: SERIES_NAME_MAX_FONT_SIZE
+    });
+    const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
+    // calculate value font size and height
+    const availableWidth = width - containerPadding * 2;
+    const availableHeight = height - seriesNameHeight;
+    const valueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+        text: formattedValue,
+        fontWeight: VALUE_FONT_WEIGHT,
+        // without sparkline, use only 50% of the available width so it looks better for multiseries
+        width: sparkline ? availableWidth : availableWidth * 0.5,
+        // with sparkline, use only 25% of available height to leave room for chart
+        // without sparkline, value should take up 90% of available space
+        height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
+        lineHeight: LINE_HEIGHT
+    });
+    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    // make sure the series name font size is slightly smaller than value font size
+    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
     const option = (0, _react.useMemo)(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -55,9 +92,8 @@ function StatChart(props) {
         if (sparkline !== undefined) {
             const lineSeries = {
                 type: 'line',
-                data: [
-                    ...series.values
-                ],
+                name: series.name,
+                data: series.values,
                 zlevel: 1,
                 symbol: 'none',
                 animation: false,
@@ -105,11 +141,6 @@ function StatChart(props) {
         chartsTheme,
         sparkline
     ]);
-    const isLargePanel = width > 250 && height > 180;
-    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
-    const charactersAdjust = formattedValue.length;
-    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
-    const containerPadding = `${chartsTheme.container.padding.default}px`;
     const textAlignment = sparkline ? 'auto' : 'center';
     const textStyles = {
         display: 'flex',
@@ -124,19 +155,22 @@ function StatChart(props) {
             ...textStyles
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            showSeriesName && /*#__PURE__*/ (0, _jsxRuntime.jsx)(SeriesName, {
+                padding: containerPadding,
+                fontSize: seriesNameFontSize,
+                children: (ref1 = data.seriesData) === null || ref1 === void 0 ? void 0 : ref1.name
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(Value, {
                 variant: "h3",
-                sx: (theme)=>({
-                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
-                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
-                    }),
+                color: color,
+                fontSize: valueFontSize,
+                padding: containerPadding,
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {
                     width: '100%',
-                    height: '100%'
+                    height: height - seriesNameHeight - valueFontHeight
                 },
                 option: option,
                 theme: chartsTheme.echartsTheme,
@@ -145,3 +179,22 @@ function StatChart(props) {
         ]
     });
 }
+const SeriesName = (0, _material.styled)(_material.Typography, {
+    shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
+})(({ theme , padding , fontSize  })=>({
+        color: theme.palette.text.secondary,
+        padding: `${padding}px`,
+        fontSize: `${fontSize}px`,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }));
+const Value = (0, _material.styled)(_material.Typography, {
+    shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
+})(({ theme , color , padding , fontSize , sparkline  })=>({
+        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        fontSize: `${fontSize}px`,
+        padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
+        whiteSpace: 'nowrap',
+        lineHeight: LINE_HEIGHT
+    }));

package/dist/cjs/StatChart/calculateFontSize.js

@@ -0,0 +1,51 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOptimalFontSize", {
+    enumerable: true,
+    get: ()=>useOptimalFontSize
+});
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+let canvasContext;
+function getGlobalCanvasContext() {
+    if (!canvasContext) {
+        canvasContext = document.createElement('canvas').getContext('2d');
+        if (canvasContext === null) {
+            throw new Error('Canvas context is null.');
+        }
+    }
+    return canvasContext;
+}
+function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+    const ctx = getGlobalCanvasContext();
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const textStyle = chartsTheme.echartsTheme.textStyle;
+    var ref;
+    const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;
+    var ref1;
+    const fontFamily = (ref1 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && ref1 !== void 0 ? ref1 : 'Lato';
+    // set the font on the canvas context
+    const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.font = fontStyle;
+    // measure the width of the text with the given font style
+    const textMetrics = ctx.measureText(text);
+    // check how much bigger we can make the font while staying within the width and height
+    const fontSizeBasedOnWidth = width / textMetrics.width * fontSize;
+    const fontSizeBasedOnHeight = height / lineHeight;
+    // return the smaller font size
+    const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
+    return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;
+}

package/dist/cjs/Table/InnerTable.js

@@ -31,14 +31,14 @@ const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , width , ...otherProps }, ref) {
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,
         size: TABLE_DENSITY_CONFIG[density],
         ref: ref,
         sx: {
-            width: width
+            width: '100%'
         }
     });
 });