@perses-dev/components 0.33.0 → 0.35.0

package/dist/cjs/EChart/EChart.js

@@ -22,7 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
-const _lodashEs = require("lodash-es");
+const _isEqual = /*#__PURE__*/ _interopRequireDefault(require("lodash/isEqual"));
+const _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -78,7 +84,7 @@ const batchEvents = [
     'downplay',
     'highlight'
 ];
-const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , onChartInitialized  }) {
+const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , syncGroup , onChartInitialized  }) {
     const initialOption = (0, _react.useRef)(option);
     const prevOption = (0, _react.useRef)(option);
     const containerRef = (0, _react.useRef)(null);
@@ -106,9 +112,20 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
         theme,
         renderer
     ]);
+    // When syncGroup is explicitly set, charts within same group share interactions such as crosshair
+    (0, _react.useEffect)(()=>{
+        if (!chartElement.current || !syncGroup) return;
+        chartElement.current.group = syncGroup;
+        (0, _core.connect)([
+            chartElement.current
+        ]); // more info: https://echarts.apache.org/en/api.html#echarts.connect
+    }, [
+        syncGroup,
+        chartElement
+    ]);
     // Update chart data when option changes
     (0, _react.useEffect)(()=>{
-        if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
+        if (prevOption.current === undefined || (0, _isEqual.default)(prevOption.current, option)) return;
         if (!chartElement.current) return;
         chartElement.current.setOption(option, true);
         prevOption.current = option;
@@ -117,7 +134,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     // Resize chart, cleanup listener on unmount
     (0, _react.useLayoutEffect)(()=>{
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200);
@@ -149,7 +166,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     (0, _react.useEffect)(()=>{
         // TODO: fix this debouncing. This likely isn't working as intended because
         // the debounced function is re-created every time this useEffect is called.
-        const updateSize = (0, _lodashEs.debounce)(()=>{
+        const updateSize = (0, _debounce.default)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
         }, 200, {

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -49,7 +49,7 @@ function GaugeChart(props) {
     // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
     const option = (0, _core.useDeepMemo)(()=>{
         var ref;
-        if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;
+        if (data.value === undefined) return chartsTheme.noDataOption;
         // adjusts fontSize depending on number of characters
         const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
         var ref1;
@@ -167,7 +167,10 @@ function GaugeChart(props) {
                         ],
                         color: 'inherit',
                         fontSize: valueSizeClamp,
-                        formatter: (value)=>{
+                        formatter: data.value === null ? // at this level because the `formatter` function argument is `NaN`
+                        // when the value is `null`, making it difficult to differentiate
+                        // `null` from a true `NaN` case.
+                        ()=>'null' : (value)=>{
                             return (0, _units.formatValue)(value, unit);
                         }
                     },
@@ -216,7 +219,7 @@ function getResponsiveValueSize(value, unit, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = (0, _units.formatValue)(value, unit);
+    const formattedValue = typeof value === 'number' ? (0, _units.formatValue)(value, unit) : `${value}`;
     var _length;
     const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;

package/dist/cjs/Legend/CompactLegend.js

@@ -20,8 +20,8 @@ Object.defineProperty(exports, "CompactLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
+const _legendModel = require("./legend-model");
 function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
@@ -39,7 +39,7 @@ function CompactLegend({ height , items , selectedItems , onLegendItemClick  })
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
-                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',

package/dist/cjs/Legend/Legend.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "Legend", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _immer = require("immer");
-const _model = require("../model");
+const _core = require("@perses-dev/core");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
 const _tableLegend = require("./TableLegend");
@@ -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  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange , tableProps  }) {
     const onLegendItemClick = (e, seriesId)=>{
         const isModifiedClick = e.metaKey || e.shiftKey;
         const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
@@ -64,7 +64,7 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         });
         onSelectedItemsChange(newSelected);
     };
-    const mode = (0, _model.getLegendMode)(options.mode);
+    const mode = (0, _core.getLegendMode)(options.mode);
     // The bottom legend is displayed as a list when the number of items is too
     // large and requires virtualization. Otherwise, it is rendered more compactly.
     // We do not need this check for the right-side legend because it is always
@@ -81,7 +81,8 @@ function Legend({ width , height , options , data , selectedItems , onSelectedIt
         legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
             ...commonLegendProps,
             onSelectedItemsChange: onSelectedItemsChange,
-            width: width
+            width: width,
+            ...tableProps
         });
     } else if (options.position === 'Right' || needsVirtualization) {
         legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {

package/dist/cjs/Legend/ListLegend.js

@@ -20,8 +20,8 @@ Object.defineProperty(exports, "ListLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _reactVirtuoso = require("react-virtuoso");
-const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
+const _legendModel = require("./legend-model");
 function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
@@ -35,7 +35,7 @@ function ListLegend({ items , height , width , selectedItems , onLegendItemClick
             return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                isVisuallySelected: (0, _legendModel.isLegendItemVisuallySelected)(item, selectedItems),
                 onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to

package/dist/cjs/Legend/TableLegend.js

@@ -40,7 +40,7 @@ const getRowId = (data)=>{
 const getCheckboxColor = (data)=>{
     return data.color;
 };
-function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width , columns: additionalColumns = []  }) {
     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.
@@ -52,13 +52,21 @@ function TableLegend({ items , selectedItems: initRowSelection , onSelectedItems
         initRowSelection,
         items
     ]);
+    const columns = (0, _react.useMemo)(()=>{
+        return [
+            ...COLUMNS,
+            ...additionalColumns
+        ];
+    }, [
+        additionalColumns
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
         height: height,
         width: width,
         rowSelection: rowSelection,
         onRowSelectionChange: onSelectedItemsChange,
         data: items,
-        columns: COLUMNS,
+        columns: columns,
         density: "compact",
         getRowId: getRowId,
         getCheckboxColor: getCheckboxColor,

package/dist/cjs/Legend/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Legend"), exports);
+_exportStar(require("./legend-model"), 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/Legend/legend-model.js

@@ -0,0 +1,25 @@
+// 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, "isLegendItemVisuallySelected", {
+    enumerable: true,
+    get: ()=>isLegendItemVisuallySelected
+});
+function isLegendItemVisuallySelected(item, selectedItems) {
+    // In the "ALL" case, technically all legend items are selected, but we do
+    // not render them differently.
+    return selectedItems !== 'ALL' && !!selectedItems[item.id];
+}

package/dist/cjs/LineChart/LineChart.js

@@ -84,7 +84,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
@@ -284,7 +284,8 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,
-                _instance: chartRef
+                _instance: chartRef,
+                syncGroup: syncGroup
             })
         ]
     });

package/dist/cjs/LineChart/utils.js

@@ -27,9 +27,14 @@ _export(exports, {
     getFormattedDate: ()=>getFormattedDate,
     getYAxes: ()=>getYAxes
 });
-const _lodashEs = require("lodash-es");
+const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
 const _model = require("../model");
 const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function enableDataZoom(chart) {
     const chartModel = chart['_model'];
     if (chartModel === undefined) return;
@@ -90,6 +95,6 @@ function getYAxes(yAxis, unit) {
         }
     };
     return [
-        (0, _lodashEs.merge)(Y_AXIS_DEFAULT, yAxis)
+        (0, _merge.default)(Y_AXIS_DEFAULT, yAxis)
     ];
 }

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/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/{LegendOptionsEditor → SettingsAutocomplete}/index.js

@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./LegendOptionsEditor"), exports);
+_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, {

package/dist/cjs/StatChart/StatChart.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "StatChart", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
-const _lodashEs = require("lodash-es");
+const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
@@ -29,6 +29,12 @@ 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)([
     _charts.LineChart,
     _components.GridComponent,
@@ -37,12 +43,48 @@ const _echart = require("../EChart");
     _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, _units.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;
@@ -50,15 +92,14 @@ 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,
                 silent: true
             };
-            const mergedSeries = (0, _lodashEs.merge)(lineSeries, sparkline);
+            const mergedSeries = (0, _merge.default)(lineSeries, sparkline);
             statSeries.push(mergedSeries);
         }
         const option = {
@@ -100,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',
@@ -119,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,
@@ -140,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/Table.js

@@ -37,7 +37,7 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
     const checkboxColumn = (0, _react.useMemo)(()=>{
         return {
             id: 'checkboxRowSelect',
-            size: 32,
+            size: 28,
             header: ({ table  })=>{
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),

package/dist/cjs/Table/TableCell.js

@@ -37,7 +37,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , ...otherProps }) {
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -83,7 +83,10 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
         ref: elRef,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
-                ...(0, _tableModel.getTableCellLayout)(theme, density),
+                ...(0, _tableModel.getTableCellLayout)(theme, density, {
+                    isLastColumn,
+                    isFirstColumn
+                }),
                 position: 'relative',
                 // Text truncation. Currently enforced on all cells. We may control
                 // this with a prop on column config in the future.