add categories subtext and add min-width for each bar

frontend/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -628,7 +628,34 @@ export class ColumnChartSpecModel<T> {
         const xMidField = "xMid";
         const yField = "value";
 
-        // Calculate xStart and xEnd for each value count
+        // Adjust bar widths to ensure minimum width
+        const MIN_BAR_WIDTH_PERCENT = 0.02; // 2% minimum width
+        let totalAdjustment = 0;
+        let totalLargeBarProportion = 0;
+        const proportions: number[] = [];
+
+        for (const vc of valueCounts) {
+          const prop = vc.count / total;
+          proportions.push(prop);
+
+          if (prop < MIN_BAR_WIDTH_PERCENT) {
+            totalAdjustment += MIN_BAR_WIDTH_PERCENT - prop;
+          } else {
+            totalLargeBarProportion += prop;
+          }
+        }
+
+        const adjustedProportions = proportions.map((prop) => {
+          if (prop < MIN_BAR_WIDTH_PERCENT) {
+            return MIN_BAR_WIDTH_PERCENT;
+          }
+          if (totalAdjustment > 0 && totalLargeBarProportion > 0) {
+            // Proportionally reduce large bars to make room for small bars
+            return prop - (prop / totalLargeBarProportion) * totalAdjustment;
+          }
+          return prop;
+        });
+
         const newValueCounts: {
           count: number;
           value: string;
@@ -637,19 +664,20 @@ export class ColumnChartSpecModel<T> {
           xMid: number;
           proportion: number;
         }[] = [];
+
         let xStart = 0;
-        for (const valueCount of valueCounts) {
-          const xEnd = xStart + valueCount.count;
+        for (const [i, valueCount] of valueCounts.entries()) {
+          const barWidth = adjustedProportions[i] * total;
+          const xEnd = xStart + barWidth;
           const xMid = (xStart + xEnd) / 2;
-          const proportion = (xEnd - xStart) / total;
 
           newValueCounts.push({
             count: valueCount.count,
             value: valueCount.value,
             xStart,
             xEnd,
             xMid,
-            proportion,
+            proportion: adjustedProportions[i],
           });
           xStart = xEnd;
         }

frontend/src/components/data-table/column-summary/column-summary.tsx

@@ -93,7 +93,7 @@ export const TableColumnSummary = <TData, TValue>({
         }
 
         return (
-          <div className="flex justify-between w-full px-2 whitespace-pre">
+          <div className="flex justify-between w-full px-2 whitespace-pre -mt-1.5">
             <span>{renderDate(stats.min, type)}</span>
             {stats.min === stats.max ? null : (
               <span>-{renderDate(stats.max, type)}</span>
@@ -145,15 +145,20 @@ export const TableColumnSummary = <TData, TValue>({
         return null;
       case "time":
         return null;
-      case "string":
-        if (!spec) {
-          return (
-            <div className="flex flex-col whitespace-pre">
-              <span>unique: {prettyNumber(stats.unique, locale)}</span>
-            </div>
-          );
+      case "string": {
+        const lessThan5Categories =
+          typeof stats.unique === "number" && stats.unique <= 5;
+        // Number of categories will be easily visible from the chart, so don't show it here.
+        if (spec && lessThan5Categories) {
+          return null;
         }
-        return null;
+
+        return (
+          <div className="flex flex-col whitespace-pre -mt-1.5">
+            <span>categories: {prettyNumber(stats.unique, locale)}</span>
+          </div>
+        );
+      }
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">

marimo/_plugins/ui/_impl/table.py

@@ -990,7 +990,10 @@ def _get_column_summaries(
                 ):
                     try:
                         val_counts = self._get_value_counts(
-                            column, DEFAULT_VALUE_COUNTS_SIZE, total_rows
+                            column=column,
+                            size=DEFAULT_VALUE_COUNTS_SIZE,
+                            total_rows=total_rows,
+                            others_threshold=1,
                         )
                         if len(val_counts) > 0:
                             value_counts[column] = val_counts
@@ -1043,7 +1046,12 @@ def _get_column_summaries(
         )
 
     def _get_value_counts(
-        self, column: ColumnName, size: int, total_rows: int
+        self,
+        *,
+        column: ColumnName,
+        size: int,
+        total_rows: int,
+        others_threshold: int | None = None,
     ) -> list[ValueCount]:
         """Get value counts for a column. The last item will be 'others' with the count of remaining
         unique values. If there are only unique values, we return 'unique values' instead.
@@ -1052,6 +1060,8 @@ def _get_value_counts(
             column (ColumnName): The column to get value counts for.
             size (int): The number of value counts to return.
             total_rows (int): The total number of rows in the table.
+            others_threshold (int | None): The threshold for values to be considered 'others'.
+                If a value has a count less than or equal to this threshold, it will be considered 'others'.
 
         Returns:
             list[ValueCount]: The value counts.
@@ -1076,6 +1086,9 @@ def _get_value_counts(
 
         sum_count = 0
         for value, count in top_k_rows:
+            if others_threshold is not None and count <= others_threshold:
+                break
+
             sum_count += count
             value = str(value) if value is not None else "null"
             value_counts.append(ValueCount(value=value, count=count))

tests/_plugins/ui/_impl/test_table.py

@@ -1100,6 +1100,28 @@ def test_with_search(self, table: ui.table) -> None:
         )
         assert value_counts == [ValueCount(value="1", count=2)]
 
+    def test_with_others_threshold(self, table: ui.table) -> None:
+        value_counts = table._get_value_counts(
+            column="repeat",
+            size=2,
+            total_rows=self.total_rows,
+            others_threshold=1,
+        )
+        assert value_counts == [
+            ValueCount(value="1", count=2),
+            ValueCount(value="others", count=3),
+        ]
+
+        value_counts = table._get_value_counts(
+            column="repeat",
+            size=2,
+            total_rows=self.total_rows,
+            others_threshold=2,
+        )
+        assert value_counts == [
+            ValueCount(value="others", count=5),
+        ]
+
 
 def test_table_with_frozen_columns() -> None:
     data = {