@marimo-team/frontend 0.16.0 → 0.16.1

package/src/components/data-table/charts/components/form-fields.tsx

@@ -342,7 +342,7 @@ interface SliderFieldProps {
   fieldName: FieldName;
   label: string;
   className?: string;
-  value: number;
+  defaultValue: number;
   start: number;
   stop: number;
   step?: number;
@@ -351,53 +351,57 @@ interface SliderFieldProps {
 export const SliderField = ({
   fieldName,
   label,
-  value,
+  defaultValue,
   start,
   stop,
   step,
   className,
 }: SliderFieldProps) => {
-  const [internalValue, setInternalValue] = React.useState(value);
   const form = useFormContext();
 
-  // Update internal value on prop change
-  React.useEffect(() => {
-    setInternalValue(value);
-  }, [value]);
-
   return (
     <FormField
       control={form.control}
       name={fieldName}
-      render={({ field }) => (
-        <FormItem
-          className={cn("flex flex-row items-center gap-2 w-1/2", className)}
-        >
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            <Slider
-              {...field}
-              id={fieldName}
-              className="relative flex items-center select-none"
-              value={[internalValue]}
-              min={start}
-              max={stop}
-              step={step}
-              // Triggered on slider drag
-              onValueChange={([nextValue]) => {
-                setInternalValue(nextValue);
-                field.onChange(nextValue);
-              }}
-              // Triggered on mouse up
-              onValueCommit={([nextValue]) => {
-                field.onChange(nextValue);
-                form.setValue(fieldName, nextValue);
-              }}
-              valueMap={(value) => value}
-            />
-          </FormControl>
-        </FormItem>
-      )}
+      render={({ field }) => {
+        const currentValue = field.value ?? defaultValue;
+        const numericValue = Number(currentValue);
+
+        const saveValue = (value: number | string) => {
+          if (typeof value === "string") {
+            value = Number(value);
+          }
+          field.onChange(value);
+        };
+
+        return (
+          <FormItem
+            className={cn("flex flex-row items-center gap-2 w-1/2", className)}
+          >
+            <FormLabel>{label}</FormLabel>
+            <FormControl>
+              <Slider
+                {...field}
+                id={fieldName}
+                className="relative flex items-center select-none"
+                value={[numericValue]}
+                min={start}
+                max={stop}
+                step={step}
+                // Triggered on slider drag
+                onValueChange={([nextValue]) => {
+                  saveValue(nextValue);
+                }}
+                // Triggered on mouse up
+                onValueCommit={([nextValue]) => {
+                  saveValue(nextValue);
+                }}
+                valueMap={(value) => value}
+              />
+            </FormControl>
+          </FormItem>
+        );
+      }}
     />
   );
 };

package/src/components/data-table/charts/forms/common-chart.tsx

@@ -102,7 +102,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="xAxis.width"
             label="Width"
-            value={400}
+            defaultValue={400}
             start={200}
             stop={800}
           />
@@ -118,7 +118,7 @@ export const StyleForm: React.FC = () => {
           <SliderField
             fieldName="yAxis.height"
             label="Height"
-            value={300}
+            defaultValue={300}
             start={150}
             stop={600}
           />

package/src/components/data-table/column-explorer-panel/column-explorer.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
 import { useState } from "react";
+import { useLocale } from "react-aria";
 import {
   AddDataframeChart,
   renderChart,
@@ -53,6 +54,7 @@ export const ColumnExplorerPanel = ({
   tableId,
 }: ColumnExplorerPanelProps) => {
   const [searchValue, setSearchValue] = useState("");
+  const { locale } = useLocale();
   const columns = fieldTypes?.filter(([columnName]) => {
     if (
       columnName === SELECT_COLUMN_ID ||
@@ -71,7 +73,7 @@ export const ColumnExplorerPanel = ({
   return (
     <div className="mt-5 mb-3">
       <span className="text-xs font-semibold ml-2 flex">
-        {prettifyRowColumnCount(totalRows, totalColumns)}
+        {prettifyRowColumnCount(totalRows, totalColumns, locale)}
         <CopyClipboardIcon
           tooltip="Copy column names"
           value={columns?.map(([columnName]) => columnName).join(",\n") || ""}
@@ -169,6 +171,7 @@ const ColumnPreview = ({
   dataType: DataType;
 }) => {
   const { theme } = useTheme();
+  const { locale } = useLocale();
 
   const {
     data,
@@ -208,7 +211,7 @@ const ColumnPreview = ({
       refetchPreview,
     });
 
-  const previewStats = stats && renderStats(stats, dataType);
+  const previewStats = stats && renderStats(stats, dataType, locale);
 
   const chart = chart_spec && renderChart(chart_spec, theme);
 

package/src/components/data-table/column-formatting/feature.ts

@@ -16,6 +16,7 @@ import {
   prettyNumber,
   prettyScientificNumber,
 } from "@/utils/numbers";
+import { memoizeLastValue } from "@/utils/once";
 import type {
   ColumnFormattingOptions,
   ColumnFormattingState,
@@ -39,6 +40,7 @@ export const ColumnFormattingFeature: TableFeature = {
     return {
       enableColumnFormatting: true,
       onColumnFormattingChange: makeStateUpdater("columnFormatting", table),
+      locale: navigator.language,
     } as ColumnFormattingOptions;
   },
 
@@ -74,36 +76,50 @@ export const ColumnFormattingFeature: TableFeature = {
       const dataType = column.columnDef.meta?.dataType;
       const format = column.getColumnFormatting?.();
       if (format) {
-        return applyFormat(value, { format, dataType });
+        return applyFormat(value, {
+          format,
+          dataType,
+          locale: table.options.locale,
+        });
       }
       return value;
     };
   },
 };
 
-const percentFormatter = new Intl.NumberFormat(undefined, {
-  style: "percent",
-  minimumFractionDigits: 0,
-  maximumFractionDigits: 2,
-});
+export const getFormatters = memoizeLastValue((locale: string) => {
+  const percentFormatter = new Intl.NumberFormat(locale, {
+    style: "percent",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
 
-const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  dateStyle: "short", // 3/4/2024
-});
+  const dateFormatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: "short", // 3/4/2024
+  });
 
-const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
-  dateStyle: "short", // 3/4/2024
-  timeStyle: "long", // 3:04:05 PM
-  timeZone: "UTC",
-});
+  const dateTimeFormatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: "short", // 3/4/2024
+    timeStyle: "long", // 3:04:05 PM
+    timeZone: "UTC",
+  });
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  timeStyle: "long", // 3:04:05 PM
-  timeZone: "UTC",
-});
+  const timeFormatter = new Intl.DateTimeFormat(locale, {
+    timeStyle: "long", // 3:04:05 PM
+    timeZone: "UTC",
+  });
 
-const integerFormatter = new Intl.NumberFormat(undefined, {
-  maximumFractionDigits: 0, // 1,000,000
+  const integerFormatter = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 0, // 1,000,000
+  });
+
+  return {
+    percentFormatter,
+    dateFormatter,
+    dateTimeFormatter,
+    timeFormatter,
+    integerFormatter,
+  };
 });
 
 // Apply formatting to a value given a format and data type
@@ -112,9 +128,18 @@ export const applyFormat = (
   options: {
     format: FormatOption;
     dataType: DataType | undefined;
+    locale: string;
   },
 ) => {
-  const { format, dataType } = options;
+  const { format, dataType, locale } = options;
+  const {
+    percentFormatter,
+    dateFormatter,
+    dateTimeFormatter,
+    timeFormatter,
+    integerFormatter,
+  } = getFormatters(locale);
+
   // If the value is null, return an empty string
   if (value === null || value === undefined || value === "") {
     return "";
@@ -143,13 +168,13 @@ export const applyFormat = (
       const num = Number.parseFloat(value as string);
       switch (format) {
         case "Auto":
-          return prettyNumber(num);
+          return prettyNumber(num, locale);
         case "Percent":
           return percentFormatter.format(num);
         case "Scientific":
-          return prettyScientificNumber(num, { shouldRound: true });
+          return prettyScientificNumber(num, { shouldRound: true, locale });
         case "Engineering":
-          return prettyEngineeringNumber(num);
+          return prettyEngineeringNumber(num, locale);
         case "Integer":
           return integerFormatter.format(num);
         default:
@@ -198,32 +223,35 @@ export const applyFormat = (
 
 export function formattingExample(
   format: FormatOption,
+  locale: string,
 ): string | number | undefined | null {
   switch (format) {
     case "Date":
       return String(
-        applyFormat(new Date(), { format: "Date", dataType: "date" }),
+        applyFormat(new Date(), { format: "Date", dataType: "date", locale }),
       );
     case "Datetime":
       return String(
         applyFormat(new Date(), {
           format: "Datetime",
           dataType: "date",
+          locale,
         }),
       );
     case "Time":
       return String(
-        applyFormat(new Date(), { format: "Time", dataType: "date" }),
+        applyFormat(new Date(), { format: "Time", dataType: "date", locale }),
       );
     case "Percent":
       return String(
-        applyFormat(0.1234, { format: "Percent", dataType: "number" }),
+        applyFormat(0.1234, { format: "Percent", dataType: "number", locale }),
       );
     case "Scientific":
       return String(
         applyFormat(12_345_678_910, {
           format: "Scientific",
           dataType: "number",
+          locale,
         }),
       );
     case "Engineering":
@@ -231,15 +259,20 @@ export function formattingExample(
         applyFormat(12_345_678_910, {
           format: "Engineering",
           dataType: "number",
+          locale,
         }),
       );
     case "Integer":
       return String(
-        applyFormat(1234.567, { format: "Integer", dataType: "number" }),
+        applyFormat(1234.567, {
+          format: "Integer",
+          dataType: "number",
+          locale,
+        }),
       );
     case "Auto":
       return String(
-        applyFormat(1234.567, { format: "Auto", dataType: "number" }),
+        applyFormat(1234.567, { format: "Auto", dataType: "number", locale }),
       );
     default:
       return null;

package/src/components/data-table/column-formatting/types.ts

@@ -28,6 +28,7 @@ export interface ColumnFormattingTableState {
 
 // define types for column formatting's table options
 export interface ColumnFormattingOptions {
+  locale: string;
   enableColumnFormatting?: boolean;
   onColumnFormattingChange?: OnChangeFn<ColumnFormattingState>;
 }

package/src/components/data-table/column-header.tsx

@@ -5,6 +5,7 @@ import type { Column } from "@tanstack/react-table";
 import { capitalize } from "lodash-es";
 import { FilterIcon, MinusIcon, TextIcon, XIcon } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
+import { useLocale } from "react-aria";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +77,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   calculateTopKRows,
 }: DataTableColumnHeaderProps<TData, TValue>) => {
   const [isFilterValueOpen, setIsFilterValueOpen] = useState(false);
+  const { locale } = useLocale();
 
   // No header
   if (!header) {
@@ -119,7 +121,7 @@ export const DataTableColumnHeader = <TData, TValue>({
           {renderCopyColumn(column)}
           {renderColumnPinning(column)}
           {renderColumnWrapping(column)}
-          {renderFormatOptions(column)}
+          {renderFormatOptions(column, locale)}
           <DropdownMenuSeparator />
           {renderMenuItemFilter(column)}
           {renderFilterByValues(column, setIsFilterValueOpen)}

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

@@ -64,17 +64,34 @@ export class ColumnChartSpecModel<T> {
   private dataSpec: TopLevelSpec["data"];
   private sourceName: "data_0" | "source_0";
 
+  private readonly data: T[] | string;
+  private readonly fieldTypes: FieldTypes;
+  readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>;
+  readonly binValues: Record<ColumnName, BinValues>;
+  readonly valueCounts: Record<ColumnName, ValueCounts>;
+  private readonly opts: {
+    includeCharts: boolean;
+    usePreComputedValues?: boolean;
+  };
+
   constructor(
-    private readonly data: T[] | string,
-    private readonly fieldTypes: FieldTypes,
-    readonly stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
-    readonly binValues: Record<ColumnName, BinValues>,
-    readonly valueCounts: Record<ColumnName, ValueCounts>,
-    private readonly opts: {
+    data: T[] | string,
+    fieldTypes: FieldTypes,
+    stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
+    binValues: Record<ColumnName, BinValues>,
+    valueCounts: Record<ColumnName, ValueCounts>,
+    opts: {
       includeCharts: boolean;
       usePreComputedValues?: boolean;
     },
   ) {
+    this.data = data;
+    this.fieldTypes = fieldTypes;
+    this.stats = stats;
+    this.binValues = binValues;
+    this.valueCounts = valueCounts;
+    this.opts = opts;
+
     // Data may come in from a few different sources:
     // - A URL
     // - A CSV data URI (e.g. "data:text/csv;base64,...")
@@ -93,9 +110,9 @@ export class ColumnChartSpecModel<T> {
         const decoded = typedAtob(base64);
 
         if (decoded.startsWith(ARROW_MAGIC_NUMBER)) {
+          // @ts-expect-error vega-typings does not include arrow format
           this.dataSpec = {
             values: byteStringToBinary(decoded),
-            // @ts-expect-error vega-typings does not include arrow format
             format: { type: "arrow" },
           };
         } else {

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

@@ -1,5 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React, { Suspense } from "react";
+import { useLocale } from "react-aria";
 import { createBatchedLoader } from "@/plugins/impl/vega/batched";
 import { useTheme } from "@/theme/useTheme";
 import { logNever } from "@/utils/assertNever";
@@ -29,6 +30,8 @@ const batchedLoader = createBatchedLoader();
 export const TableColumnSummary = <TData, TValue>({
   columnId,
 }: Props<TData, TValue>) => {
+  const { locale } = useLocale();
+
   const chartSpecModel = React.use(ColumnChartContext);
   const { theme } = useTheme();
   const { spec, type, stats } = chartSpecModel.getHeaderSummary(columnId);
@@ -65,7 +68,7 @@ export const TableColumnSummary = <TData, TValue>({
   ) => {
     return (
       <DatePopover date={date} type={type}>
-        {prettyDate(date, type)}
+        {prettyDate(date, type, locale)}
       </DatePopover>
     );
   };
@@ -84,7 +87,7 @@ export const TableColumnSummary = <TData, TValue>({
             <div className="flex flex-col whitespace-pre">
               <span>min: {renderDate(stats.min, type)}</span>
               <span>max: {renderDate(stats.max, type)}</span>
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -106,16 +109,22 @@ export const TableColumnSummary = <TData, TValue>({
               <span>
                 min:{" "}
                 {typeof stats.min === "number"
-                  ? prettyScientificNumber(stats.min, { shouldRound: true })
+                  ? prettyScientificNumber(stats.min, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.min}
               </span>
               <span>
                 max:{" "}
                 {typeof stats.max === "number"
-                  ? prettyScientificNumber(stats.max, { shouldRound: true })
+                  ? prettyScientificNumber(stats.max, {
+                      shouldRound: true,
+                      locale,
+                    })
                   : stats.max}
               </span>
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -127,8 +136,8 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>true: {prettyNumber(stats.true)}</span>
-              <span>false: {prettyNumber(stats.false)}</span>
+              <span>true: {prettyNumber(stats.true, locale)}</span>
+              <span>false: {prettyNumber(stats.false, locale)}</span>
             </div>
           );
         }
@@ -140,7 +149,7 @@ export const TableColumnSummary = <TData, TValue>({
         if (!spec) {
           return (
             <div className="flex flex-col whitespace-pre">
-              <span>unique: {prettyNumber(stats.unique)}</span>
+              <span>unique: {prettyNumber(stats.unique, locale)}</span>
             </div>
           );
         }
@@ -148,7 +157,7 @@ export const TableColumnSummary = <TData, TValue>({
       case "unknown":
         return (
           <div className="flex flex-col whitespace-pre">
-            <span>nulls: {prettyNumber(stats.nulls)}</span>
+            <span>nulls: {prettyNumber(stats.nulls, locale)}</span>
           </div>
         );
       default:

package/src/components/data-table/columns.tsx

@@ -4,6 +4,7 @@
 import { PopoverClose } from "@radix-ui/react-popover";
 import type { Column, ColumnDef } from "@tanstack/react-table";
 import { formatDate } from "date-fns";
+import { WithLocale } from "@/core/i18n/with-locale";
 import type { DataType } from "@/core/kernel/messages";
 import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
@@ -227,13 +228,13 @@ export function generateColumns<T>({
           isCellSelected,
         );
 
-        const renderedCell = renderCellValue(
+        const renderedCell = renderCellValue({
           column,
           renderValue,
           getValue,
           selectCell,
           cellStyles,
-        );
+        });
 
         // Row headers are bold
         if (rowHeadersSet.has(key)) {
@@ -403,18 +404,25 @@ function renderAny(value: unknown): string {
   }
 }
 
-function renderDate(
-  value: Date,
-  dataType?: DataType,
-  dtype?: string,
-  format?: DateFormat | null,
-): React.ReactNode {
+function renderDate({
+  value,
+  dataType,
+  dtype,
+  format,
+  locale,
+}: {
+  value: Date;
+  dataType?: DataType;
+  dtype?: string;
+  format?: DateFormat | null;
+  locale: string;
+}): React.ReactNode {
   const type = dataType === "date" ? "date" : "datetime";
   const timezone = extractTimezone(dtype);
 
   const exactValue = format
     ? formatDate(value, format)
-    : exactDateTime(value, timezone);
+    : exactDateTime(value, timezone, locale);
 
   return (
     <DatePopover date={value} type={type}>
@@ -423,13 +431,19 @@ function renderDate(
   );
 }
 
-export function renderCellValue<TData, TValue>(
-  column: Column<TData, TValue>,
-  renderValue: () => TValue | null,
-  getValue: () => TValue,
-  selectCell?: () => void,
-  cellStyles?: string,
-) {
+export function renderCellValue<TData, TValue>({
+  column,
+  renderValue,
+  getValue,
+  selectCell,
+  cellStyles,
+}: {
+  column: Column<TData, TValue>;
+  renderValue: () => TValue | null;
+  getValue: () => TValue;
+  selectCell?: () => void;
+  cellStyles?: string;
+}) {
   const value = getValue();
   const format = column.getColumnFormatting?.();
 
@@ -440,7 +454,13 @@ export function renderCellValue<TData, TValue>(
     try {
       const date = new Date(value);
       const format = getDateFormat(value);
-      return renderDate(date, dataType, dtype, format);
+      return (
+        <WithLocale>
+          {(locale) =>
+            renderDate({ value: date, dataType, dtype, format, locale })
+          }
+        </WithLocale>
+      );
     } catch (error) {
       Logger.error("Error parsing datetime, fallback to string", error);
     }
@@ -448,7 +468,11 @@ export function renderCellValue<TData, TValue>(
 
   if (value instanceof Date) {
     // e.g. 2010-10-07 17:15:00
-    return renderDate(value, dataType, dtype);
+    return (
+      <WithLocale>
+        {(locale) => renderDate({ value, dataType, dtype, locale })}
+      </WithLocale>
+    );
   }
 
   if (typeof value === "string") {