Merge pull request #1923 from objectstack-ai/feat/chart-metric-customization

feat(charts,dashboard): data-screen customization — bare metric, chart palette, donut/horizontal-bar

Author: xuyushun441-sys

.changeset/chart-metric-customization.md

@@ -0,0 +1,14 @@
+---
+"@object-ui/plugin-charts": minor
+"@object-ui/plugin-dashboard": minor
+"@object-ui/types": minor
+---
+
+feat(charts,dashboard): data-screen customization primitives
+
+- object-metric `variant:'bare'` — big tinted number + label, no card chrome
+  (data-screen KPIs that stay data-bound).
+- object-chart `colors` prop overrides the theme `--chart-1..n` palette so a
+  page/dashboard can brand its charts; compact metric formatting (`'0.0a'` →
+  "1.1M").
+- ObjectChartSchema.chartType widened to donut/horizontal-bar/column.

.claude/launch.json

@@ -11,6 +11,15 @@
       ],
       "port": 5180
     },
+    {
+      "name": "console-build-test",
+      "runtimeExecutable": "bash",
+      "runtimeArgs": [
+        "-lc",
+        "cd /Users/zhuangjianguo/Documents/GitHub/objectui/.wt-aipicker/apps/console && VITE_SERVER_URL= DEV_PROXY_TARGET=http://localhost:4000 exec pnpm dev --port 5181 --strictPort"
+      ],
+      "port": 5181
+    },
     {
       "name": "gantt-demo",
       "runtimeExecutable": "pnpm",

packages/plugin-charts/src/AdvancedChartImpl.tsx

@@ -97,6 +97,9 @@ export interface AdvancedChartImplProps {
   xAxisKey?: string;
   series?: Array<{ dataKey: string; chartType?: 'bar' | 'line' | 'area'; variant?: 'current' | 'comparison'; opacity?: number; dashArray?: string; label?: string }>;
   className?: string;
+  /** Categorical/series colour palette. Overrides the theme's `--chart-1..n`
+   *  defaults so a page/dashboard can brand its charts (data-screens). */
+  colors?: string[];
   /**
    * Optional drill-down click handler. Fires when a chart segment is clicked
    * with `{ category, series, value }`. Wired for bar/horizontal-bar/line/
@@ -116,6 +119,7 @@ export default function AdvancedChartImpl({
   xAxisKey = 'name',
   series = [],
   className = '',
+  colors,
   onChartClick,
 }: AdvancedChartImplProps) {
   // Normalize 'column' → 'bar' (Recharts BarChart is already vertical).
@@ -234,14 +238,15 @@ export default function AdvancedChartImpl({
     [data, xAxisKey],
   );
 
-  // Helper function to get color palette
-  const getPalette = () => [
-    'hsl(var(--chart-1))', 
-    'hsl(var(--chart-2))', 
-    'hsl(var(--chart-3))', 
+  // Helper function to get color palette. An explicit `colors` prop (set by the
+  // page/dashboard) wins; otherwise fall back to the theme's --chart-1..5 vars.
+  const getPalette = () => (Array.isArray(colors) && colors.length > 0 ? colors : [
+    'hsl(var(--chart-1))',
+    'hsl(var(--chart-2))',
+    'hsl(var(--chart-3))',
     'hsl(var(--chart-4))',
     'hsl(var(--chart-5))'
-  ];
+  ]);
 
   // Compact numeric formatter for Y-axis ticks (1,200,000 → 1.2M).
   // Keeps the axis readable when bar/area series have large values.

packages/plugin-charts/src/ChartRenderer.tsx

@@ -48,6 +48,7 @@ export interface ChartRendererProps {
     config?: Record<string, any>;
     xAxisKey?: string;
     series?: Array<{ dataKey: string; label?: string; variant?: 'current' | 'comparison'; opacity?: number; dashArray?: string; chartType?: 'bar' | 'line' | 'area' }>;
+    colors?: string[];
   };
   /** Drill-down click handler — wired by ObjectChart when drillDown is enabled. */
   onChartClick?: (event: { category?: string; series?: string; value?: number }) => void;
@@ -108,6 +109,7 @@ export const ChartRenderer: React.FC<ChartRendererProps> = ({ schema, onChartCli
         xAxisKey={props.xAxisKey}
         series={props.series}
         className={props.className}
+        colors={(schema as any).colors}
         onChartClick={onChartClick}
       />
     </Suspense>

packages/plugin-dashboard/src/MetricWidget.tsx

@@ -80,6 +80,15 @@ function formatMetricValue(
   const decimalsMatch = trimmed.match(/0\.(0+)/);
   const decimals = decimalsMatch ? decimalsMatch[1].length : 0;
 
+  // Compact / abbreviated notation (numeral.js 'a' convention, e.g. '0.0a' →
+  // "1.1M", '$0a' → "$1M"). Keeps big KPI numbers from overflowing a tile.
+  const isCompact = /a/i.test(trimmed);
+  if (isCompact) {
+    const opts: Intl.NumberFormatOptions = { notation: 'compact', maximumFractionDigits: decimals || 1 };
+    if (isCurrency) { opts.style = 'currency'; opts.currency = currency || symbolMap[trimmed[0]] || 'USD'; }
+    try { return new Intl.NumberFormat('en-US', opts).format(value as number); } catch { /* fall through */ }
+  }
+
   if (isCurrency) {
     const code = currency || symbolMap[trimmed[0]] || 'USD';
     try {
@@ -133,6 +142,19 @@ const VARIANT_ICON_CLASSES: Record<MetricColorVariant, string> = {
   danger:  'bg-rose-500/10 text-rose-600 dark:text-rose-400',
 };
 
+/** Text-colour per variant — used by the `bare` layout to tint the big number
+ *  (data-screen KPIs) instead of an icon chip. */
+const VARIANT_TEXT_CLASSES: Record<MetricColorVariant, string> = {
+  default: 'text-foreground',
+  blue:    'text-blue-600 dark:text-blue-400',
+  teal:    'text-teal-600 dark:text-teal-400',
+  orange:  'text-orange-600 dark:text-orange-400',
+  purple:  'text-purple-600 dark:text-purple-400',
+  success: 'text-emerald-600 dark:text-emerald-400',
+  warning: 'text-amber-600 dark:text-amber-400',
+  danger:  'text-rose-600 dark:text-rose-400',
+};
+
 export interface MetricWidgetProps {
   label: string | { key?: string; defaultValue?: string };
   value: string | number;
@@ -160,6 +182,12 @@ export interface MetricWidgetProps {
   suffix?: string;
   /** When set, the entire card becomes clickable and emits this handler. */
   onClick?: () => void;
+  /**
+   * Layout variant. `'card'` (default) is the bordered KPI card; `'bare'` drops
+   * all card chrome and renders a large tinted number + label — the dense
+   * big-number look data-screens (大屏) want, while staying data-bound.
+   */
+  variant?: 'card' | 'bare';
 }
 
 export const MetricWidget = ({
@@ -177,6 +205,7 @@ export const MetricWidget = ({
   prefix,
   suffix,
   onClick,
+  variant = 'card',
   ...props
 }: MetricWidgetProps) => {
   const iconClasses = VARIANT_ICON_CLASSES[colorVariant] || VARIANT_ICON_CLASSES.default;
@@ -211,6 +240,34 @@ export const MetricWidget = ({
     return icon;
   }, [icon]);
 
+  if (variant === 'bare') {
+    const textClasses = VARIANT_TEXT_CLASSES[colorVariant] || VARIANT_TEXT_CLASSES.default;
+    return (
+      <div
+        className={cn('flex flex-col gap-1 min-w-0', onClick && 'cursor-pointer', className)}
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+        tabIndex={onClick ? 0 : undefined}
+        onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onClick(); } } : undefined}
+      >
+        {loading ? (
+          <div className="flex items-center gap-2 text-muted-foreground" data-testid="metric-loading">
+            <Loader2 className="h-4 w-4 animate-spin" /><span className="text-sm">Loading…</span>
+          </div>
+        ) : error ? (
+          <div className="flex items-center gap-2" data-testid="metric-error" role="alert">
+            <AlertCircle className="h-4 w-4 text-destructive shrink-0" /><span className="text-xs text-destructive truncate">{error}</span>
+          </div>
+        ) : (
+          <>
+            <div className={cn('text-[2rem] leading-none font-extrabold tabular-nums tracking-tight truncate', textClasses)}>{displayValue}</div>
+            <div className="text-xs font-medium text-muted-foreground truncate">{resolveLabel(label)}</div>
+          </>
+        )}
+      </div>
+    );
+  }
+
   return (
     <Card
       className={cn(

packages/plugin-dashboard/src/ObjectMetricWidget.tsx

@@ -102,6 +102,8 @@ export interface ObjectMetricWidgetProps {
   compareTo?: CompareToConfig;
   /** Optional i18n translator used to localize the trend label. */
   t?: (key: string, defaultValue: string) => string;
+  /** Layout variant forwarded to MetricWidget: 'card' (default) or 'bare'. */
+  variant?: 'card' | 'bare';
 }
 
 export const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps> = ({
@@ -125,6 +127,7 @@ export const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps> = ({
   title,
   compareTo,
   t: tProp,
+  variant,
 }) => {
   const context = useContext(SchemaRendererContext);
   const dataSource = propDataSource || context?.dataSource;
@@ -432,6 +435,7 @@ export const ObjectMetricWidget: React.FC<ObjectMetricWidgetProps> = ({
         currency={inferredCurrency}
         prefix={prefix}
         suffix={suffix}
+        variant={variant}
         onClick={drillEnabled ? () => setDrillOpen(true) : undefined}
       />
       {drillOpen && drillDrawer}

packages/types/src/objectql.ts

@@ -2083,8 +2083,9 @@ export interface ObjectChartSchema extends BaseSchema {
   type: 'object-chart';
   /** ObjectQL object name (legacy inline path; optional under ADR-0021 dataset binding) */
   objectName?: string;
-  /** Chart type */
-  chartType: 'bar' | 'line' | 'pie' | 'area' | 'scatter';
+  /** Chart type. Includes donut / horizontal-bar / column — all rendered by
+   *  AdvancedChartImpl (previously only reachable by passing an untyped string). */
+  chartType: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'scatter';
   /** Field for X axis (categories) — legacy inline path */
   xAxisField?: string;
   /** Fields for Y axis (values) — legacy */