@object-ui/plugin-charts 6.2.3 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,184 @@
 # @object-ui/plugin-charts
 
+## 7.1.0
+
+### Minor Changes
+
+- 677f7ed: 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.
+
+### Patch Changes
+
+- 08c47da: feat(dashboard): dataset chart widgets paint select/lookup dimensions in their option colors
+
+  A dashboard `DatasetWidget` chart grouped by a select/lookup dimension (e.g.
+  project `health`) painted its categories from the generic `--chart-1..5`
+  palette — the same gap the chart view (`object-chart`) had before #1932. It now
+  resolves the dimension field's option colors (using the dataset's base `object`
+  - dimension→field map the query already returns) and threads them to the
+    renderer as a per-category `categoryColors` map, so health green/red/yellow
+    paints semantically.
+
+  The value/label→color resolution is extracted into a shared `buildOptionColorMap`
+  (`@object-ui/core`) now used by both `DatasetWidget` and `ObjectChart`.
+
+- 93cf2b1: fix(charts): use field option colors for categorical chart dimensions
+
+  An `object-chart` grouped by a select/lookup field (e.g. project `health`)
+  painted its categories from the generic `--chart-1..5` palette, so a "Red"
+  health slice rendered teal and "Green" rendered blue. The chart now resolves
+  the category dimension's option colors — both the `objectName` + `groupBy`
+  path and the dataset path (via the dataset's `object` + dimension `field`) —
+  and threads them to the renderer as a per-category `categoryColors` map. That
+  map wins over the positional palette and falls back to it for categories
+  without an option color, so pie/donut slices and bar cells render in their
+  semantic colors.
+
+- Updated dependencies [677f7ed]
+- Updated dependencies [08c47da]
+- Updated dependencies [a71be60]
+- Updated dependencies [cb03bc3]
+  - @object-ui/types@7.1.0
+  - @object-ui/core@7.1.0
+  - @object-ui/react@7.1.0
+  - @object-ui/components@7.1.0
+  - @object-ui/i18n@7.1.0
+
+## 7.0.0
+
+### Patch Changes
+
+- c5a7d6f: Bar-chart X-axis labels no longer overlap on narrow widgets. When a chart has
+  many categories (>4) or any long label (>8 chars), the tick labels are angled
+  (-32°) and truncated with a hover `title`; few short labels stay horizontal.
+- cb2fdb1: feat(dashboard): expand drill-in — table/list row→record + scatter/treemap/sankey drill-through
+
+  Drill-in now covers the widgets that were missing it, and formalizes the two
+  interaction semantics mainstream BI/low-code platforms separate. `DrillDownConfig`
+  gains a `mode` discriminator: `'filter'` (drill-through: aggregate bucket → filtered
+  record list) and `'record'` (drill-to-record: a table/list row → that record's detail).
+
+  - Scatter, treemap and sankey charts now wire click → the existing filtered-record
+    drill drawer (radar excluded — no single clickable category point). The
+    Recharts-payload → drill-event mapping is extracted to pure, tested functions.
+  - Object-backed table/list widgets drill to the clicked record in a read-only detail
+    drawer (Sheet/Dialog), on by default (`drillDown:{enabled:false}` opts out). Field
+    labels and value formatting (incl. tenant-default currency) are shared with the
+    table cells so a value reads identically in both. An author-supplied `onRowClick`
+    still wins.
+  - The chart/KPI drill-through record lists now drill into a record too, completing the
+    segment → list → record chain.
+
+- c3749eb: feat(dashboard): dataset chart widgets drill through to records
+
+  Dataset-bound **chart** widgets (bar/line/pie/area/donut/funnel/…) are now
+  click-drillable, matching table/pivot. Clicking a segment maps it back to its
+  dataset row and opens the same governed drill drawer (raw group keys preserved),
+  so a chart-only dashboard is no longer an exploration dead-end. This closes the
+  "object-backed chart drills but dataset chart doesn't" inconsistency and aligns
+  with mainstream BI (click a chart → see records).
+
+  - `@object-ui/core`: `findChartSeriesRow` — inverse of `buildChartSeries`,
+    maps a clicked `{category, series}` back to the source dataset row index
+    (matches both dims when a 2nd dimension is pivoted into series).
+  - `ObjectChart`: optional `onSegmentClick` lets a host own the chart click
+    (and suppress the widget's own object-drill).
+  - `DatasetWidget`: lifts the drill machinery to cover both table/pivot and
+    chart, and wires the chart's segment click to the precise dataset drill.
+
+- 6cfa330: feat(dashboard): drill "Open in list" escape hatch + unify report drill
+
+  Adopts the mainstream BI peek-then-escalate drill model. Drill-through opens an
+  in-place drawer (keep context) and offers an "Open in list →" affordance to
+  escalate to the object's full list page (sort / bulk-select / export / shareable
+  URL) — the Looker / Power BI "see records → open in page" pattern.
+
+  - New `DrillNavigationContext` (`@object-ui/react`): the app shell provides
+    `openRecordList`; the renderer stays decoupled from console routing.
+  - The drill drawers (pivot / dataset / chart / KPI) render the escape hatch when
+    a host navigation handler is present, and hide it otherwise (self-contained
+    peek). `DashboardView` provides the handler via `useOpenRecordList`.
+  - `DrillDownConfig.target` gains `'navigate'` — skip the drawer and open the
+    list directly; degrades to `'drawer'` when no host handler is available.
+  - `ReportView` drill-through now opens the same in-place drawer (peek records →
+    click a row to open a record) instead of navigating away; the escape hatch
+    preserves the previous navigate-to-list behavior. Dashboard and report drill
+    are now unified.
+  - i18n: `dashboard.openInList` (en / zh).
+
+- e270c7d: fix(chart): consume ADR-0021 `dataset` binding in list/object chart views
+
+  Chart views authored to the current spec (ADR-0021: `dataset` + `dimensions` +
+  `values`) previously rendered nothing — the renderers only read the **removed**
+  legacy inline `xAxisField` / `yAxisFields` / `aggregation` shape, so a
+  spec-compliant chart view showed an empty canvas. `ObjectChart` now runs the
+  governed `queryDataset` path when a chart binds to a dataset (the same path the
+  dashboard `DatasetWidget` uses, so numbers stay consistent), and `ListView` /
+  `ObjectView` emit the dataset shape. The legacy inline aggregate is kept as a
+  deprecated fallback so pre-ADR-0021 metadata keeps rendering.
+
+  Refs objectstack-ai/framework#1890
+
+- ab168e4: Dashboard charts no longer render blank on first paint. Recharts'
+  `ResponsiveContainer` was a child of a `flex … justify-center` box, so it
+  collapsed to content width (0) on first paint inside react-grid-layout,
+  measured `width(-1)` and skipped drawing until a later resize fired its
+  ResizeObserver. The chart wrapper is now a definite-width block in both the
+  dashboard chart container (`plugin-charts/ChartContainerImpl`) and the shadcn
+  base (`components/ui/chart`). Follow-up changeset for #1634.
+- Updated dependencies [5976ba3]
+- Updated dependencies [a00e16d]
+- Updated dependencies [eaccefd]
+- Updated dependencies [f7f325d]
+- Updated dependencies [c12986e]
+- Updated dependencies [71d7ce0]
+- Updated dependencies [053c948]
+- Updated dependencies [89e113c]
+- Updated dependencies [ddbe4a2]
+- Updated dependencies [2d47e94]
+- Updated dependencies [9049bbe]
+- Updated dependencies [77cc6bb]
+- Updated dependencies [6c0c92c]
+- Updated dependencies [97c6831]
+- Updated dependencies [cb2fdb1]
+- Updated dependencies [c3749eb]
+- Updated dependencies [c09f44e]
+- Updated dependencies [6cfa330]
+- Updated dependencies [ad8ade6]
+- Updated dependencies [d54346c]
+- Updated dependencies [3870c20]
+- Updated dependencies [2eb3096]
+- Updated dependencies [b88c560]
+- Updated dependencies [0ad72a6]
+- Updated dependencies [3fa23a7]
+- Updated dependencies [18d0339]
+- Updated dependencies [59b6bbb]
+- Updated dependencies [d16566f]
+- Updated dependencies [90acb7f]
+- Updated dependencies [7913390]
+- Updated dependencies [1394e34]
+- Updated dependencies [e95cc25]
+- Updated dependencies [abe8ebc]
+- Updated dependencies [300d755]
+- Updated dependencies [bd8b054]
+- Updated dependencies [4eb9cb6]
+- Updated dependencies [7c239fd]
+- Updated dependencies [858ad94]
+- Updated dependencies [2270239]
+- Updated dependencies [2f31406]
+- Updated dependencies [8d1195d]
+  - @object-ui/core@7.0.0
+  - @object-ui/components@7.0.0
+  - @object-ui/react@7.0.0
+  - @object-ui/i18n@7.0.0
+  - @object-ui/types@7.0.0
+
 ## 6.2.3
 
 ### Patch Changes

package/dist/AdvancedChartImpl.d.ts

@@ -0,0 +1,61 @@
+import { ChartConfig } from './ChartContainerImpl';
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import * as React from "react";
+export interface AdvancedChartImplProps {
+    chartType?: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo' | 'treemap' | 'sankey';
+    data?: Array<Record<string, any>>;
+    config?: ChartConfig;
+    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[];
+    /**
+     * Per-category colour map keyed by the category value OR its display label
+     * (e.g. `{ green: '#10B981', Green: '#10B981' }`). When the chart's category
+     * dimension is a select/lookup field, ObjectChart resolves the field's option
+     * colours into this map so a "Red" health slice paints red instead of taking
+     * the next positional palette slot. A category found here WINS over `colors`;
+     * categories absent here fall back to the positional palette, then the theme.
+     */
+    categoryColors?: Record<string, string>;
+    /**
+     * Optional drill-down click handler. Fires when a chart segment is clicked
+     * with `{ category, series, value }`. Wired for bar/horizontal-bar/line/
+     * area/pie/donut. Other chart types are no-ops in L1.
+     */
+    onChartClick?: (event: {
+        category?: string;
+        series?: string;
+        value?: number;
+    }) => void;
+    /**
+     * Disable Recharts' entrance animation when `false`. Animations drive the
+     * reveal via `requestAnimationFrame`, which browsers throttle/pause in
+     * hidden/background tabs — so a chart rendered off-screen (analytics export,
+     * a report opened in an inactive tab, headless capture) can freeze at frame 0
+     * and look empty (esp. pie/donut: sectors at angle 0 = no ring, legend only).
+     * Reports pass `false` for a deterministic, instant, export-safe render.
+     * Omitted/true preserves the animated default everywhere else (dashboards).
+     */
+    isAnimationActive?: boolean;
+}
+/**
+ * AdvancedChartImpl - The heavy implementation that imports Recharts with full features
+ * This component is lazy-loaded to avoid including Recharts in the initial bundle
+ */
+export default function AdvancedChartImpl({ chartType: rawChartType, data: rawData, config, xAxisKey, series, className, colors, categoryColors, onChartClick, isAnimationActive, }: AdvancedChartImplProps): React.JSX.Element;

package/dist/{packages/plugin-charts/src/ChartContainerImpl.d.ts → ChartContainerImpl.d.ts}

@@ -26,13 +26,13 @@ export type ChartConfig = {
 declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof ResponsiveContainer>["children"];
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
     config: ChartConfig;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => React.JSX.Element | null;
 declare const ChartTooltip: typeof Tooltip;
-declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: any): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: any): React.JSX.Element | null;
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: import('recharts').LegendProps) => React.ReactPortal | null>;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: any): import("react/jsx-runtime").JSX.Element | null;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: any): React.JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/{packages/plugin-charts/src/ChartImpl.d.ts → ChartImpl.d.ts}

@@ -17,4 +17,4 @@ export interface ChartImplProps {
  * ChartImpl - The heavy implementation that imports Recharts
  * This component is lazy-loaded to avoid including Recharts in the initial bundle
  */
-export default function ChartImpl({ data, dataKey, xAxisKey, height, className, color, }: ChartImplProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartImpl({ data, dataKey, xAxisKey, height, className, color, }: ChartImplProps): import("react").JSX.Element;

package/dist/{packages/plugin-charts/src/ChartRenderer.d.ts → ChartRenderer.d.ts}

@@ -20,7 +20,7 @@ export interface ChartRendererProps {
         type: string;
         id?: string;
         className?: string;
-        chartType?: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo';
+        chartType?: 'bar' | 'column' | 'horizontal-bar' | 'line' | 'area' | 'pie' | 'donut' | 'radar' | 'scatter' | 'funnel' | 'combo' | 'treemap' | 'sankey';
         data?: Array<Record<string, any>>;
         config?: Record<string, any>;
         xAxisKey?: string;
@@ -32,6 +32,14 @@ export interface ChartRendererProps {
             dashArray?: string;
             chartType?: 'bar' | 'line' | 'area';
         }>;
+        colors?: string[];
+        /** Per-category colour map (value/label → colour). Wins over `colors` per
+         *  category; see AdvancedChartImpl. Set by ObjectChart from select/lookup
+         *  dimension option colours and/or an explicit author map. */
+        categoryColors?: Record<string, string>;
+        /** Pass `false` for a deterministic, export-safe render with no entrance
+         *  animation (see AdvancedChartImpl). Omitted → animated default. */
+        isAnimationActive?: boolean;
     };
     /** Drill-down click handler — wired by ObjectChart when drillDown is enabled. */
     onChartClick?: (event: {

package/dist/{packages/plugin-charts/src/ObjectChart.d.ts → ObjectChart.d.ts}

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 /**
  * Humanize a snake_case or kebab-case string into Title Case.
  * Local implementation to avoid a dependency on @object-ui/fields.
@@ -27,5 +28,5 @@ export declare function aggregateRecords(records: any[], aggregate: {
  * to perform any value→label conversion.
  */
 export declare function resolveGroupByLabels(data: any[], groupByField: string, objectSchema: any, dataSource?: any, translateOption?: (value: string, fallbackLabel: string) => string): Promise<any[]>;
-export { extractRecords } from '../../core/src';
-export declare const ObjectChart: (props: any) => import("react/jsx-runtime").JSX.Element;
+export { extractRecords } from '@object-ui/core';
+export declare const ObjectChart: (props: any) => React.JSX.Element;

package/dist/chartDrillEvents.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * Pure mappers from a Recharts element-click payload to the shared
+ * `{ category, series, value }` drill event consumed by ObjectChart's drill
+ * drawer. Kept separate from AdvancedChartImpl so the (Recharts-shape-sensitive)
+ * payload extraction can be unit-tested without rendering a chart.
+ */
+export interface ChartDrillEvent {
+    category?: string;
+    series?: string;
+    value?: number;
+}
+interface SeriesLike {
+    dataKey?: string;
+}
+/**
+ * Scatter point click. Recharts spreads the data row onto the node and also
+ * exposes it under `.payload`; we read the category (xAxisKey) and the
+ * y-measure from whichever is present. Returns `null` when there's no category.
+ */
+export declare function mapScatterClick(node: any, xAxisKey: string, series: SeriesLike[] | undefined): ChartDrillEvent | null;
+/**
+ * Treemap tile click. The node carries the category label as `name` and the
+ * measure as `value`/`size`. Returns `null` when there's no name.
+ */
+export declare function mapTreemapClick(node: any, series: SeriesLike[] | undefined): ChartDrillEvent | null;
+/**
+ * Sankey click. Drill only on flow *nodes* (categories): links carry
+ * source/target indices but no `name`, and the synthetic root node (depth 0)
+ * aggregates everything. Returns `null` for those so they don't drill.
+ */
+export declare function mapSankeyClick(payload: any, series: SeriesLike[] | undefined): ChartDrillEvent | null;
+export {};

package/dist/index.d.ts

@@ -1,2 +1,8 @@
-export * from './packages/plugin-charts/src/index'
-export {}
+import { ChartBarRenderer, ChartRenderer } from './ChartRenderer';
+export type { BarChartSchema } from './types';
+export { ChartBarRenderer, ChartRenderer };
+export { ObjectChart } from './ObjectChart';
+export declare const chartComponents: {
+    'bar-chart': import('react').FC<import('./ChartRenderer').ChartBarRendererProps>;
+    chart: import('react').FC<import('./ChartRenderer').ChartRendererProps>;
+};