diff --git a/app/src/app/api/widget-templates/__tests__/route.test.ts b/app/src/app/api/widget-templates/__tests__/route.test.ts
index 6b52e998..87774679 100644
--- a/app/src/app/api/widget-templates/__tests__/route.test.ts
+++ b/app/src/app/api/widget-templates/__tests__/route.test.ts
@@ -9,15 +9,14 @@ import { nextResponseMockFactory } from "@/__tests__/helpers/next-mocks";
// Mocks
// ---------------------------------------------------------------------------
-const mockRequireSession =
- vi.fn<
- () => Promise<{
- userId: string;
- role: string;
- canWrite: boolean;
- tenantId: string;
- }>
- >();
+const mockRequireSession = vi.fn<
+ () => Promise<{
+ userId: string;
+ role: string;
+ canWrite: boolean;
+ tenantId: string;
+ }>
+>();
const mockDb = {
select: vi.fn(),
diff --git a/app/src/components/__tests__/chart-error-boundary-unit.test.tsx b/app/src/components/__tests__/chart-error-boundary-unit.test.tsx
new file mode 100644
index 00000000..5fb5bcf5
--- /dev/null
+++ b/app/src/components/__tests__/chart-error-boundary-unit.test.tsx
@@ -0,0 +1,50 @@
+import { describe, it, expect, vi, afterAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import { ChartErrorBoundary } from "../chart-error-boundary";
+
+const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+
+function ThrowingChild(): React.JSX.Element {
+ throw new Error("test explosion");
+}
+
+function GoodChild() {
+ return OK
;
+}
+
+describe("ChartErrorBoundary", () => {
+ afterAll(() => consoleError.mockRestore());
+
+ it("renders children when no error", () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.getByTestId("good-child")).toBeDefined();
+ });
+
+ it("renders fallback UI when child throws", () => {
+ render(
+
+
+ ,
+ );
+ expect(screen.getByText("Chart failed to render")).toBeDefined();
+ expect(screen.getByText("test explosion")).toBeDefined();
+ });
+
+ it("logs error with chart type", () => {
+ render(
+
+
+ ,
+ );
+ expect(consoleError).toHaveBeenCalledWith(
+ expect.stringContaining("[ChartErrorBoundary] sankey crashed:"),
+ expect.any(Error),
+ expect.anything(),
+ );
+ });
+});
diff --git a/app/src/components/__tests__/chart-error-boundary.test.tsx b/app/src/components/__tests__/chart-error-boundary.test.tsx
new file mode 100644
index 00000000..0c97351e
--- /dev/null
+++ b/app/src/components/__tests__/chart-error-boundary.test.tsx
@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, afterAll } from "vitest";
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+// Mock @neoboard/components to avoid pulling in ECharts
+vi.mock("@neoboard/components", () => ({
+ Skeleton: ({ className }: { className?: string }) => (
+
+ ),
+ EmptyState: ({
+ title,
+ description,
+ }: {
+ title: string;
+ description?: string;
+ }) => (
+
+ {title}
+ {description && {description}}
+
+ ),
+ JsonViewer: () => ,
+ MarkdownWidget: () => ,
+ IframeWidget: () => ,
+}));
+
+// Mock next/dynamic to just render children synchronously
+vi.mock("next/dynamic", () => ({
+ default: () => {
+ return function DynamicStub() {
+ return ;
+ };
+ },
+}));
+
+vi.mock("@/lib/normalize-value", () => ({
+ normalizeValue: (v: unknown) => v,
+}));
+vi.mock("@/components/parameter-widget-renderer", () => ({
+ ParameterWidgetRenderer: () => ,
+}));
+vi.mock("@/components/graph-exploration-wrapper", () => ({
+ GraphExplorationWrapper: () => ,
+}));
+vi.mock("@/components/form-widget-renderer", () => ({
+ FormWidgetRenderer: () => ,
+}));
+
+// Suppress console.error from the error boundary during tests
+const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+
+import { ChartRenderer } from "../chart-renderer";
+
+describe("ChartRenderer error boundary", () => {
+ afterAll(() => {
+ consoleError.mockRestore();
+ });
+
+ it("renders fallback when a chart throws during render", () => {
+ // Force a render error by passing data that will cause JSON.stringify to throw
+ const circular: Record = {};
+ circular.self = circular;
+
+ // The table renderer will try to process this — but we need something
+ // that actually throws. Let's use a getter that throws.
+ const badData = [
+ new Proxy(
+ {},
+ {
+ get() {
+ throw new Error("Boom!");
+ },
+ ownKeys() {
+ throw new Error("Boom!");
+ },
+ },
+ ),
+ ];
+
+ render(
+ [0]["type"]}
+ data={badData}
+ />,
+ );
+
+ expect(screen.getByText("Chart failed to render")).toBeDefined();
+ expect(screen.getByText("Boom!")).toBeDefined();
+ });
+
+ it("renders chart normally when no error occurs", () => {
+ render(
+ [0]["type"]}
+ data={{ hello: "world" }}
+ />,
+ );
+
+ // JSON viewer should render (mocked)
+ expect(screen.getByTestId("json-viewer")).toBeDefined();
+ });
+
+ it("renders unknown chart type as empty state (not error boundary)", () => {
+ render(
+ [0]["type"]}
+ data={null}
+ />,
+ );
+
+ expect(screen.getByText("Unknown chart type")).toBeDefined();
+ });
+});
diff --git a/app/src/components/card-container.tsx b/app/src/components/card-container.tsx
index 1db9784c..55de5770 100644
--- a/app/src/components/card-container.tsx
+++ b/app/src/components/card-container.tsx
@@ -435,6 +435,7 @@ export function CardContainer({
type={chartConfig.type}
data={null}
settings={resolvedContentOptions}
+ meta={{ widgetId: widget.id }}
/>
diff --git a/app/src/components/chart-error-boundary.tsx b/app/src/components/chart-error-boundary.tsx
new file mode 100644
index 00000000..fd9ab924
--- /dev/null
+++ b/app/src/components/chart-error-boundary.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import React from "react";
+import { AlertCircle } from "lucide-react";
+
+interface ChartErrorBoundaryState {
+ error: Error | null;
+}
+
+/**
+ * Catches render errors from any chart component so one broken widget
+ * doesn't crash the entire dashboard.
+ */
+export class ChartErrorBoundary extends React.Component<
+ { chartType: string; children: React.ReactNode },
+ ChartErrorBoundaryState
+> {
+ state: ChartErrorBoundaryState = { error: null };
+
+ static getDerivedStateFromError(error: Error) {
+ return { error };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ console.error(
+ `[ChartErrorBoundary] ${this.props.chartType} crashed:`,
+ error,
+ info.componentStack,
+ );
+ }
+
+ render() {
+ if (this.state.error) {
+ return (
+
+
+
Chart failed to render
+
+ {this.state.error.message}
+
+
Population: 8M" },
+ {
+ id: "1",
+ lat: 40.7,
+ lng: -74.0,
+ popup: "New York
Population: 8M",
+ },
];
render();
- expect(mockBindPopup).toHaveBeenCalledWith("New York
Population: 8M");
+ expect(mockBindPopup).toHaveBeenCalledWith(
+ "New York
Population: 8M",
+ );
});
it("does not bind popup when marker has no popup", () => {
@@ -226,4 +243,48 @@ describe("MapChart", () => {
render();
expect(mockBindPopup).not.toHaveBeenCalled();
});
+
+ describe("rule-based styling", () => {
+ it("applies styling rule color to markers matching the rule", () => {
+ const markers = [
+ { id: "1", lat: 10, lng: 20, value: 80 },
+ { id: "2", lat: 30, lng: 40, value: 20 },
+ ];
+ const rules = [
+ { id: "r1", operator: ">=" as const, value: 50, color: "#ff0000" },
+ ];
+ render();
+
+ const calls = (L.circleMarker as ReturnType).mock.calls;
+ // First marker (value=80) matches >= 50 → red
+ expect(calls[0][1].fillColor).toBe("#ff0000");
+ // Second marker (value=20) does NOT match → default color
+ expect(calls[1][1].fillColor).not.toBe("#ff0000");
+ });
+
+ it("styling rule color takes priority over explicit marker.color", () => {
+ const markers = [
+ { id: "1", lat: 10, lng: 20, value: 100, color: "#00ff00" },
+ ];
+ const rules = [
+ { id: "r1", operator: ">=" as const, value: 50, color: "#ff0000" },
+ ];
+ render();
+
+ const calls = (L.circleMarker as ReturnType).mock.calls;
+ expect(calls[0][1].fillColor).toBe("#ff0000");
+ });
+
+ it("does not apply styling when marker has no value", () => {
+ const markers = [{ id: "1", lat: 10, lng: 20 }];
+ const rules = [
+ { id: "r1", operator: ">=" as const, value: 0, color: "#ff0000" },
+ ];
+ render();
+
+ const calls = (L.circleMarker as ReturnType).mock.calls;
+ // No value → rule not evaluated → default color
+ expect(calls[0][1].fillColor).not.toBe("#ff0000");
+ });
+ });
});
diff --git a/component/src/charts/base-chart.tsx b/component/src/charts/base-chart.tsx
index b5027498..caf64ed9 100644
--- a/component/src/charts/base-chart.tsx
+++ b/component/src/charts/base-chart.tsx
@@ -1,6 +1,12 @@
import { useEffect, useRef, useState } from "react";
import * as echarts from "echarts/core";
-import { BarChart as EBarChart, LineChart as ELineChart, PieChart as EPieChart, GraphChart as EGraphChart, RadarChart as ERadarChart } from "echarts/charts";
+import {
+ BarChart as EBarChart,
+ LineChart as ELineChart,
+ PieChart as EPieChart,
+ GraphChart as EGraphChart,
+ RadarChart as ERadarChart,
+} from "echarts/charts";
import {
TitleComponent,
TooltipComponent,
@@ -66,8 +72,16 @@ function resolveChartColors(): string[] {
}
const CHART_COLOR_VARS = [
- "--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5",
- "--chart-6", "--chart-7", "--chart-8", "--chart-9", "--chart-10",
+ "--chart-1",
+ "--chart-2",
+ "--chart-3",
+ "--chart-4",
+ "--chart-5",
+ "--chart-6",
+ "--chart-7",
+ "--chart-8",
+ "--chart-9",
+ "--chart-10",
];
const CHART_COLORS_FALLBACK = DEEP_OCEAN_LIGHT;
@@ -77,15 +91,34 @@ function isDarkMode(): boolean {
return document.documentElement.classList.contains("dark");
}
-/** Watch the `dark` class on `` and re-render when it toggles. */
+/**
+ * Reactive dark-mode hook that listens to theme changes via:
+ * 1. `neoboard-theme-change` custom event (dispatched by the app's useTheme)
+ * 2. OS `prefers-color-scheme` media query changes
+ * 3. `storage` events (cross-tab theme sync)
+ *
+ * Falls back to reading `` — works regardless of
+ * whether the host app uses NeoBoard's useTheme or any other theme library.
+ */
function useDarkMode(): boolean {
const [dark, setDark] = useState(isDarkMode);
useEffect(() => {
- const el = document.documentElement;
- const observer = new MutationObserver(() => setDark(el.classList.contains("dark")));
- observer.observe(el, { attributes: true, attributeFilter: ["class"] });
- return () => observer.disconnect();
+ const sync = () => setDark(isDarkMode());
+
+ // App-level theme change event (NeoBoard's useTheme dispatches this)
+ globalThis.addEventListener("neoboard-theme-change", sync);
+ // Cross-tab sync (localStorage theme key changed in another tab)
+ globalThis.addEventListener("storage", sync);
+ // OS-level dark mode toggle
+ const mql = globalThis.matchMedia?.("(prefers-color-scheme: dark)");
+ mql?.addEventListener("change", sync);
+
+ return () => {
+ globalThis.removeEventListener("neoboard-theme-change", sync);
+ globalThis.removeEventListener("storage", sync);
+ mql?.removeEventListener("change", sync);
+ };
}, []);
return dark;
@@ -172,7 +205,14 @@ function BaseChart({
},
};
instance.setOption(merged, { notMerge: true });
- }, [options, enableDataZoom, colorblindMode, colorPalette, dark, ariaDescription]);
+ }, [
+ options,
+ enableDataZoom,
+ colorblindMode,
+ colorPalette,
+ dark,
+ ariaDescription,
+ ]);
// Loading state
useEffect(() => {
@@ -181,9 +221,7 @@ function BaseChart({
if (loading) {
instance.showLoading("default", {
text: "",
- maskColor: dark
- ? "rgba(10, 15, 30, 0.6)"
- : "rgba(255, 255, 255, 0.6)",
+ maskColor: dark ? "rgba(10, 15, 30, 0.6)" : "rgba(255, 255, 255, 0.6)",
zlevel: 0,
});
} else {
@@ -197,7 +235,9 @@ function BaseChart({
if (!instance) return;
if (onClick) {
- instance.on("click", (params: unknown) => onClick(params as EChartsClickEvent));
+ instance.on("click", (params: unknown) =>
+ onClick(params as EChartsClickEvent),
+ );
}
if (onDataZoom) {
instance.on("dataZoom", onDataZoom);
@@ -235,4 +275,9 @@ function BaseChart({
);
}
-export { BaseChart, CHART_COLORS_FALLBACK as CHART_COLORS, resolveChartColors, useDarkMode };
+export {
+ BaseChart,
+ CHART_COLORS_FALLBACK as CHART_COLORS,
+ resolveChartColors,
+ useDarkMode,
+};
diff --git a/component/src/charts/graph-chart.tsx b/component/src/charts/graph-chart.tsx
index 41284527..4458abe9 100644
--- a/component/src/charts/graph-chart.tsx
+++ b/component/src/charts/graph-chart.tsx
@@ -12,6 +12,8 @@ import type {
GraphNodeEvent,
GraphEdgeEvent,
} from "./types";
+import type { StylingRule } from "./styling-rule";
+import { resolveStylingRuleColor } from "./styling-rule";
import {
Popover,
PopoverTrigger,
@@ -125,6 +127,10 @@ export interface GraphChartProps {
* Useful when the container size may change after initial render (e.g. fullscreen dialogs).
*/
autoFit?: boolean;
+ /** Rule-based styling rules for node color/size */
+ stylingRules?: StylingRule[];
+ /** Resolved parameter values for styling rule evaluation */
+ paramValues?: Record;
/** Additional CSS classes */
className?: string;
}
@@ -229,6 +235,8 @@ function toNvlNode(
captionMap: Record,
labelColorMap: Map,
nodeSizeScale: number,
+ stylingRules?: StylingRule[],
+ paramValues?: Record,
): NvlNode {
let x = node.x;
let y = node.y;
@@ -238,15 +246,26 @@ function toNvlNode(
x = Math.cos(angle) * radius;
y = Math.sin(angle) * radius;
}
- // Use the last label to determine the color (most specific label wins)
+
+ // Rule-based color: evaluate against node.value (numeric property)
+ const ruleColor =
+ stylingRules?.length && node.value != null
+ ? resolveStylingRuleColor(node.value, stylingRules, paramValues)
+ : undefined;
+
+ // Color priority: styling rule > explicit node.color > label palette
const color =
+ ruleColor ??
node.color ??
(node.labels?.length
? labelColorMap.get(node.labels[node.labels.length - 1])
: undefined);
+
+ // Size: base from node.value, scaled by nodeSizeScale
const baseSize = node.value
? Math.max(20, Math.min(60, node.value))
: undefined;
+
return {
id: node.id,
caption: showLabels ? resolveCaption(node, captionMap) : undefined,
@@ -304,6 +323,8 @@ export function GraphChart({
onLayoutChange,
onCaptionMapChange,
autoFit,
+ stylingRules,
+ paramValues,
className,
}: GraphChartProps) {
const nvlRef = useRef(null);
@@ -383,9 +404,19 @@ export function GraphChart({
captionMap,
labelColorMap,
nodeSizeScale,
+ stylingRules,
+ paramValues,
),
),
- [nodes, showLabels, captionMap, labelColorMap, nodeSizeScale],
+ [
+ nodes,
+ showLabels,
+ captionMap,
+ labelColorMap,
+ nodeSizeScale,
+ stylingRules,
+ paramValues,
+ ],
);
const nvlRels = useMemo(
diff --git a/component/src/charts/map-chart.tsx b/component/src/charts/map-chart.tsx
index 46b2baad..1dadc504 100644
--- a/component/src/charts/map-chart.tsx
+++ b/component/src/charts/map-chart.tsx
@@ -3,6 +3,8 @@ import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { cn } from "@/lib/utils";
import { MAP_MARKER_DEFAULT_COLOR } from "@/lib/design-tokens";
+import type { StylingRule } from "./styling-rule";
+import { resolveStylingRuleColor } from "./styling-rule";
import { useDarkMode } from "./base-chart";
export type TileLayerPreset = "osm" | "carto-light" | "carto-dark";
@@ -38,21 +40,31 @@ export interface MapChartProps {
loading?: boolean;
error?: Error | null;
onMarkerClick?: (marker: MapMarker) => void;
+ /** Rule-based styling rules for marker color/size */
+ stylingRules?: StylingRule[];
+ /** Resolved parameter values for styling rule evaluation */
+ paramValues?: Record;
className?: string;
}
-const TILE_PRESETS: Record = {
+const TILE_PRESETS: Record<
+ TileLayerPreset,
+ { url: string; attribution: string }
+> = {
osm: {
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
- attribution: '© OpenStreetMap',
+ attribution:
+ '© OpenStreetMap',
},
"carto-light": {
url: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png",
- attribution: '© OpenStreetMap © CARTO',
+ attribution:
+ '© OpenStreetMap © CARTO',
},
"carto-dark": {
url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
- attribution: '© OpenStreetMap © CARTO',
+ attribution:
+ '© OpenStreetMap © CARTO',
},
};
@@ -73,7 +85,9 @@ function resolveTileLayer(
}
return {
url: effectivePreset,
- attribution: attribution ?? '© OpenStreetMap',
+ attribution:
+ attribution ??
+ '© OpenStreetMap',
};
}
@@ -111,6 +125,8 @@ function MapChart({
loading = false,
error = null,
onMarkerClick,
+ stylingRules,
+ paramValues,
className,
}: MapChartProps) {
const containerRef = useRef(null);
@@ -134,7 +150,9 @@ function MapChart({
maxZoom,
});
- const tl = L.tileLayer(tile.url, { attribution: tile.attribution }).addTo(map);
+ const tl = L.tileLayer(tile.url, { attribution: tile.attribution }).addTo(
+ map,
+ );
tileLayerRef.current = tl;
markersLayerRef.current = L.layerGroup().addTo(map);
mapRef.current = map;
@@ -161,7 +179,9 @@ function MapChart({
if (tileLayerRef.current) {
map.removeLayer(tileLayerRef.current);
}
- const tl = L.tileLayer(tile.url, { attribution: tile.attribution }).addTo(map);
+ const tl = L.tileLayer(tile.url, { attribution: tile.attribution }).addTo(
+ map,
+ );
tileLayerRef.current = tl;
}, [tile.url, tile.attribution]);
@@ -181,10 +201,17 @@ function MapChart({
layer.clearLayers();
markers.forEach((m) => {
+ // Rule-based color: evaluate against marker.value
+ const ruleColor =
+ stylingRules?.length && m.value != null
+ ? resolveStylingRuleColor(m.value, stylingRules, paramValues)
+ : undefined;
+ const markerColor = ruleColor ?? m.color ?? MAP_MARKER_DEFAULT_COLOR;
+
const circleMarker = L.circleMarker([m.lat, m.lng], {
radius: m.value ? Math.min(Math.max(m.value, 4), 30) : markerSize,
- fillColor: m.color ?? MAP_MARKER_DEFAULT_COLOR,
- color: m.color ?? MAP_MARKER_DEFAULT_COLOR,
+ fillColor: markerColor,
+ color: markerColor,
weight: 1,
opacity: 0.8,
fillOpacity: 0.6,
@@ -212,10 +239,21 @@ function MapChart({
// Auto-fit bounds
if (autoFitBounds && map && markers.length > 0) {
- const bounds = L.latLngBounds(markers.map((m) => [m.lat, m.lng] as [number, number]));
+ const bounds = L.latLngBounds(
+ markers.map((m) => [m.lat, m.lng] as [number, number]),
+ );
map.fitBounds(bounds, { padding: fitBoundsPadding });
}
- }, [markers, onMarkerClick, autoFitBounds, fitBoundsPadding, markerSize, showPopup]);
+ }, [
+ markers,
+ onMarkerClick,
+ autoFitBounds,
+ fitBoundsPadding,
+ markerSize,
+ showPopup,
+ stylingRules,
+ paramValues,
+ ]);
if (error) {
return (
diff --git a/component/src/components/composed/__tests__/chart-options-schema.test.ts b/component/src/components/composed/__tests__/chart-options-schema.test.ts
index 4d9b6852..1010b939 100644
--- a/component/src/components/composed/__tests__/chart-options-schema.test.ts
+++ b/component/src/components/composed/__tests__/chart-options-schema.test.ts
@@ -420,8 +420,12 @@ describe("colorPalette option", () => {
const options = getChartOptions("bar");
const opt = options.find((o) => o.key === "colorPalette");
expect(opt?.options).toBeDefined();
- expect(opt?.options!.map((o) => o.value)).toContain("deep-ocean");
- expect(opt?.options!.map((o) => o.value)).toContain("warm-sunset");
+ expect(opt?.options!.map((o: { value: string }) => o.value)).toContain(
+ "deep-ocean",
+ );
+ expect(opt?.options!.map((o: { value: string }) => o.value)).toContain(
+ "warm-sunset",
+ );
});
it("colorPalette select options all have non-empty label and value", () => {
diff --git a/component/src/components/composed/chart-options-schema.ts b/component/src/components/composed/chart-options-schema.ts
index fbd8c043..02431dde 100644
--- a/component/src/components/composed/chart-options-schema.ts
+++ b/component/src/components/composed/chart-options-schema.ts
@@ -1,1098 +1,5 @@
-import { COLOR_PALETTES } from "@/charts/palettes";
-
-export interface ChartOptionDef {
- key: string;
- label: string;
- type: "boolean" | "select" | "text" | "number" | "column-multi-select";
- default: unknown;
- category: string;
- /** Only for type: "select" */
- options?: { label: string; value: string }[];
- /** Short description shown in a tooltip next to the option label. */
- description?: string;
-}
-
-// ---------------------------------------------------------------------------
-// Shared option constants — reused across multiple chart type definitions
-// to avoid duplication.
-// ---------------------------------------------------------------------------
-
-const SHARED_SHOW_LEGEND: ChartOptionDef = {
- key: "showLegend",
- label: "Show Legend",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the chart legend identifying each data series.",
-};
-
-const SHARED_X_AXIS_LABEL: ChartOptionDef = {
- key: "xAxisLabel",
- label: "X-Axis Label",
- type: "text",
- default: "",
- category: "Labels",
- description: "Custom label displayed below the horizontal axis.",
-};
-
-const SHARED_Y_AXIS_LABEL: ChartOptionDef = {
- key: "yAxisLabel",
- label: "Y-Axis Label",
- type: "text",
- default: "",
- category: "Labels",
- description: "Custom label displayed beside the vertical axis.",
-};
-
-const SHARED_SHOW_GRID_LINES: ChartOptionDef = {
- key: "showGridLines",
- label: "Show Grid Lines",
- type: "boolean",
- default: true,
- category: "Style",
- description: "Show faint horizontal reference lines behind the chart.",
-};
-
-const SHARED_REFERENCE_LINES: ChartOptionDef = {
- key: "referenceLines",
- label: "Reference Lines (JSON)",
- type: "text",
- default: "",
- category: "Annotations",
- description:
- 'Horizontal reference lines as JSON: [{"value":50,"label":"Target","color":"#ff0000"}]',
-};
-
-const SHARED_SHOW_LABELS: ChartOptionDef = {
- key: "showLabels",
- label: "Show Labels",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the name label on each element.",
-};
-
-/** DataZoom option for axis-based charts (bar, line). */
-const dataZoomOptions: ChartOptionDef[] = [
- {
- key: "enableDataZoom",
- label: "Enable Scroll Zoom",
- type: "boolean",
- default: false,
- category: "Interaction",
- description:
- "Allow scroll-to-zoom on the data axis to explore large datasets.",
- },
-];
-
-/** Shared number formatting options for tooltip values on axis-based charts. */
-const tooltipFormatOptions: ChartOptionDef[] = [
- {
- key: "decimalPlaces",
- label: "Decimal Places",
- type: "number",
- default: -1,
- category: "Labels",
- description:
- "Fixed number of decimal places in tooltips (0-6). Set to -1 for automatic.",
- },
-];
-
-const barOptions: ChartOptionDef[] = [
- {
- key: "orientation",
- label: "Orientation",
- type: "select",
- default: "vertical",
- category: "Layout",
- description:
- "Vertical bars grow upward; horizontal bars grow left-to-right.",
- options: [
- { label: "Vertical", value: "vertical" },
- { label: "Horizontal", value: "horizontal" },
- ],
- },
- {
- key: "stacked",
- label: "Stacked",
- type: "boolean",
- default: false,
- category: "Layout",
- description:
- "Stack series on top of each other instead of placing them side by side.",
- },
- {
- key: "barWidth",
- label: "Bar Width (px, 0=auto)",
- type: "number",
- default: 0,
- category: "Layout",
- description:
- "Width of each bar in pixels. Set to 0 to let the chart auto-size.",
- },
- {
- key: "barGap",
- label: "Bar Gap",
- type: "text",
- default: "30%",
- category: "Layout",
- description:
- "Gap between bar groups as a percentage of the bar width (e.g. '30%').",
- },
- {
- key: "showValues",
- label: "Show Values",
- type: "boolean",
- default: false,
- category: "Labels",
- description: "Display the numeric value as a label on each bar.",
- },
- SHARED_SHOW_LEGEND,
- SHARED_X_AXIS_LABEL,
- SHARED_Y_AXIS_LABEL,
- SHARED_SHOW_GRID_LINES,
- {
- key: "axisLabelRotation",
- label: "Axis Label Rotation (°)",
- type: "number",
- default: -1,
- category: "Labels",
- description:
- "Override axis label rotation angle (0-90). Set to -1 for automatic (rotates at 8+ categories).",
- },
- SHARED_REFERENCE_LINES,
-];
-
-const lineOptions: ChartOptionDef[] = [
- {
- key: "smooth",
- label: "Smooth Curve",
- type: "boolean",
- default: false,
- category: "Style",
- description:
- "Render lines as smooth Bézier curves instead of straight segments.",
- },
- {
- key: "area",
- label: "Fill Area",
- type: "boolean",
- default: false,
- category: "Style",
- description:
- "Fill the area beneath the line to emphasise volume over time.",
- },
- {
- key: "lineWidth",
- label: "Line Width (px)",
- type: "number",
- default: 2,
- category: "Style",
- description: "Stroke width of the line in pixels.",
- },
- {
- key: "stepped",
- label: "Stepped Line",
- type: "boolean",
- default: false,
- category: "Style",
- description:
- "Draw the line as a step function — useful for discrete state changes.",
- },
- {
- key: "showPoints",
- label: "Show Data Points",
- type: "boolean",
- default: false,
- category: "Style",
- description: "Draw a dot at each data point along the line.",
- },
- SHARED_SHOW_GRID_LINES,
- SHARED_X_AXIS_LABEL,
- SHARED_Y_AXIS_LABEL,
- SHARED_SHOW_LEGEND,
- SHARED_REFERENCE_LINES,
- {
- key: "samplingThreshold",
- label: "Sampling Threshold",
- type: "number",
- default: 1000,
- category: "Performance",
- description:
- "Enable LTTB downsampling when data points exceed this count. Set to 0 to disable.",
- },
- {
- key: "samplingMethod",
- label: "Sampling Method",
- type: "select",
- default: "lttb",
- options: [
- { label: "LTTB", value: "lttb" },
- { label: "Average", value: "average" },
- { label: "Max", value: "max" },
- { label: "Min", value: "min" },
- ],
- category: "Performance",
- description: "Algorithm for downsampling large datasets.",
- },
-];
-
-const pieOptions: ChartOptionDef[] = [
- {
- key: "donut",
- label: "Donut Style",
- type: "boolean",
- default: false,
- category: "Style",
- description:
- "Cut a circular hole in the centre to render the chart as a donut.",
- },
- {
- key: "roseMode",
- label: "Rose/Nightingale Mode",
- type: "boolean",
- default: false,
- category: "Style",
- description:
- "Vary each slice's radius by its value (Nightingale / rose chart).",
- },
- {
- key: "labelPosition",
- label: "Label Position",
- type: "select",
- default: "outside",
- category: "Labels",
- description: "Where to place the slice labels relative to the chart.",
- options: [
- { label: "Outside", value: "outside" },
- { label: "Inside", value: "inside" },
- { label: "Center", value: "center" },
- ],
- },
- {
- key: "showLabel",
- label: "Show Labels",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the category name on each slice.",
- },
- {
- key: "showPercentage",
- label: "Show Percentage",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the percentage value on each slice.",
- },
- {
- ...SHARED_SHOW_LEGEND,
- description: "Show the chart legend identifying each slice.",
- },
- {
- key: "sortSlices",
- label: "Sort Slices by Value",
- type: "boolean",
- default: false,
- category: "Layout",
- description:
- "Sort slices by value (largest first) for a cleaner visual layout.",
- },
- {
- key: "topN",
- label: "Top N Slices",
- type: "number",
- default: 0,
- category: "Layout",
- description:
- "Show only the top N slices and group the rest into 'Other'. Set to 0 to show all.",
- },
- {
- key: "donutCenterText",
- label: "Donut Center Text",
- type: "text",
- default: "",
- category: "Labels",
- description:
- "Custom text in the donut center. Leave blank to show the total.",
- },
-];
-
-const singleValueOptions: ChartOptionDef[] = [
- {
- key: "title",
- label: "Title",
- type: "text",
- default: "",
- category: "Display",
- description: "Custom heading shown above the value. Leave blank to hide.",
- },
- {
- key: "prefix",
- label: "Prefix",
- type: "text",
- default: "",
- category: "Display",
- description: "Text prepended to the value (e.g. '$', '€').",
- },
- {
- key: "suffix",
- label: "Suffix",
- type: "text",
- default: "",
- category: "Display",
- description: "Text appended to the value (e.g. '%', ' items').",
- },
- {
- key: "decimalPlaces",
- label: "Decimal Places",
- type: "number",
- default: -1,
- category: "Display",
- description:
- "Fixed number of decimal places (0-6). Set to -1 for automatic.",
- },
- {
- key: "fontSize",
- label: "Font Size",
- type: "select",
- default: "lg",
- category: "Display",
- description: "Size of the main displayed value.",
- options: [
- { label: "Small", value: "sm" },
- { label: "Medium", value: "md" },
- { label: "Large", value: "lg" },
- { label: "Extra Large", value: "xl" },
- ],
- },
- {
- key: "numberFormat",
- label: "Number Format",
- type: "select",
- default: "plain",
- category: "Display",
- description:
- "How to format the numeric value — plain, comma-separated, compact (1.2k), or percentage.",
- options: [
- { label: "Plain", value: "plain" },
- { label: "Comma", value: "comma" },
- { label: "Compact", value: "compact" },
- { label: "Percent", value: "percent" },
- ],
- },
- {
- key: "trendEnabled",
- label: "Show Trend Indicator",
- type: "boolean",
- default: false,
- category: "Display",
- description:
- "Show a trend arrow comparing the current value to the previous period (requires 2 rows in the query result).",
- },
-];
-
-const graphOptions: ChartOptionDef[] = [
- {
- key: "layout",
- label: "Layout",
- type: "select",
- default: "force",
- category: "Layout",
- description:
- "Algorithm used to position nodes: force simulation, circular ring, or hierarchical tree.",
- options: [
- { label: "Force", value: "force" },
- { label: "Circular", value: "circular" },
- { label: "Hierarchical", value: "hierarchical" },
- ],
- },
- {
- key: "nodeSize",
- label: "Node Size",
- type: "select",
- default: "medium",
- category: "Layout",
- description: "Visual size of each node circle.",
- options: [
- { label: "Small", value: "small" },
- { label: "Medium", value: "medium" },
- { label: "Large", value: "large" },
- ],
- },
- {
- ...SHARED_SHOW_LABELS,
- description: "Show the node label (first string property) on each node.",
- },
- {
- key: "showRelationshipLabels",
- label: "Show Relationship Labels",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the relationship type name on each edge.",
- },
- {
- key: "physics",
- label: "Enable Physics",
- type: "boolean",
- default: true,
- category: "Style",
- description:
- "Enable physics simulation so nodes repel and edges act as springs.",
- },
-];
-
-const mapOptions: ChartOptionDef[] = [
- {
- key: "tileLayer",
- label: "Tile Layer",
- type: "select",
- default: "osm",
- category: "Map",
- description:
- "Base-map tile provider. OpenStreetMap is open and free; Carto variants are cleaner for data overlays.",
- options: [
- { label: "OpenStreetMap", value: "osm" },
- { label: "Carto Light", value: "carto-light" },
- { label: "Carto Dark", value: "carto-dark" },
- ],
- },
- {
- key: "zoom",
- label: "Default Zoom",
- type: "number",
- default: 3,
- category: "Map",
- description:
- "Initial zoom level when the map first renders (1 = world view, 18 = street level).",
- },
- {
- key: "minZoom",
- label: "Min Zoom",
- type: "number",
- default: 2,
- category: "Map",
- description: "Minimum zoom level the user can zoom out to.",
- },
- {
- key: "maxZoom",
- label: "Max Zoom",
- type: "number",
- default: 18,
- category: "Map",
- description: "Maximum zoom level the user can zoom in to.",
- },
- {
- key: "autoFitBounds",
- label: "Auto-fit Bounds",
- type: "boolean",
- default: true,
- category: "Map",
- description:
- "Automatically pan and zoom to fit all markers on the initial load.",
- },
- {
- key: "markerSize",
- label: "Marker Size (px)",
- type: "number",
- default: 6,
- category: "Markers",
- description: "Radius of each map marker circle in pixels.",
- },
- {
- key: "clusterMarkers",
- label: "Cluster Markers",
- type: "boolean",
- default: false,
- category: "Markers",
- description:
- "Group nearby markers into a single cluster badge at lower zoom levels.",
- },
- {
- key: "showPopup",
- label: "Show Popup on Click",
- type: "boolean",
- default: true,
- category: "Markers",
- description:
- "Show a popup with the row data when the user clicks a marker.",
- },
-];
-
-const tableOptions: ChartOptionDef[] = [
- {
- key: "enableSorting",
- label: "Enable Sorting",
- type: "boolean",
- default: true,
- category: "Features",
- description:
- "Allow clicking column headers to sort rows ascending or descending.",
- },
- {
- key: "enableSelection",
- label: "Row Selection",
- type: "boolean",
- default: false,
- category: "Features",
- description: "Allow selecting individual rows by clicking them.",
- },
- {
- key: "enableGlobalFilter",
- label: "Global Search",
- type: "boolean",
- default: true,
- category: "Features",
- description: "Show a search box that filters all rows across all columns.",
- },
- {
- key: "enableColumnFilters",
- label: "Column Filters",
- type: "boolean",
- default: true,
- category: "Features",
- description: "Show per-column filter inputs below each column header.",
- },
- {
- key: "enableColumnResizing",
- label: "Column Resizing",
- type: "boolean",
- default: false,
- category: "Features",
- description:
- "Allow drag-to-resize column borders. Double-click to auto-fit.",
- },
- {
- key: "enablePagination",
- label: "Enable Pagination",
- type: "boolean",
- default: true,
- category: "Pagination",
- description:
- "Show Previous / Next controls to page through large result sets.",
- },
- {
- key: "pageSize",
- label: "Page Size",
- type: "number",
- default: 10,
- category: "Pagination",
- description: "Number of rows shown per page when pagination is enabled.",
- },
- {
- key: "emptyMessage",
- label: "Empty Message",
- type: "text",
- default: "No results",
- category: "Display",
- description: "Text displayed when the query returns no rows.",
- },
- {
- key: "enableGrouping",
- label: "Enable Row Grouping",
- type: "boolean",
- default: false,
- category: "Grouping",
- description:
- "Allow grouping rows by column values. Columns to group by are set in the groupBy field below.",
- },
- {
- key: "groupBy",
- label: "Group By Columns",
- type: "column-multi-select",
- default: "",
- category: "Grouping",
- description:
- "Select columns to group by. Nested grouping is supported — order determines nesting hierarchy.",
- },
- {
- key: "aggregationFn",
- label: "Aggregation Function",
- type: "select",
- default: "sum",
- category: "Grouping",
- description: "Aggregation function for numeric columns in grouped rows.",
- options: [
- { label: "Sum", value: "sum" },
- { label: "Average", value: "mean" },
- { label: "Median", value: "median" },
- { label: "Count", value: "count" },
- { label: "Min", value: "min" },
- { label: "Max", value: "max" },
- ],
- },
-];
-
-const jsonOptions: ChartOptionDef[] = [
- {
- key: "initialExpanded",
- label: "Initial Expand Depth",
- type: "number",
- default: 2,
- category: "Display",
- description:
- "How many levels deep the JSON tree is expanded when first rendered (0 = collapsed).",
- },
- {
- key: "fontSize",
- label: "Font Size",
- type: "select",
- default: "sm",
- category: "Display",
- description: "Font size used for the JSON syntax highlighting.",
- options: [
- { label: "Small", value: "sm" },
- { label: "Medium", value: "md" },
- { label: "Large", value: "lg" },
- ],
- },
- {
- key: "showCopyButton",
- label: "Show Copy Button",
- type: "boolean",
- default: true,
- category: "Display",
- description:
- "Show a button to copy the full JSON payload to the clipboard.",
- },
- {
- key: "theme",
- label: "Theme",
- type: "select",
- default: "dark",
- category: "Display",
- description: "Colour theme for the JSON syntax highlighting.",
- options: [
- { label: "Dark", value: "dark" },
- { label: "Light", value: "light" },
- ],
- },
-];
-
-const parameterSelectOptions: ChartOptionDef[] = [
- {
- key: "placeholder",
- label: "Placeholder",
- type: "text",
- default: "",
- category: "Parameter",
- description:
- "Hint text shown inside the selector when no value has been chosen.",
- },
- {
- key: "searchable",
- label: "Search-as-you-type",
- type: "boolean",
- default: true,
- category: "Parameter",
- description:
- "Allow the user to type to filter the option list in real time.",
- },
- {
- key: "defaultValue",
- label: "Default Value",
- type: "text",
- default: "",
- category: "Parameter",
- description:
- "Value used on dashboard load when no selection has been made. Leave empty for no default.",
- },
- {
- key: "syncToUrl",
- label: "Sync to URL",
- type: "boolean",
- default: true,
- category: "Parameter",
- description:
- "Include this parameter in the URL query string for deep-linking. Disable for noisy or internal params.",
- },
-];
-
-const formOptions: ChartOptionDef[] = [
- {
- key: "submitButtonText",
- label: "Submit Button Text",
- type: "text",
- default: "Submit",
- category: "Form",
- description: "Label for the form submit button.",
- },
- {
- key: "successMessage",
- label: "Success Message",
- type: "text",
- default: "Form submitted successfully",
- category: "Form",
- description: "Message shown after a successful submission.",
- },
- {
- key: "resetOnSuccess",
- label: "Reset on Success",
- type: "boolean",
- default: true,
- category: "Form",
- description: "Clear all form fields after a successful submission.",
- },
-];
-
-const markdownOptions: ChartOptionDef[] = [
- {
- key: "content",
- label: "Markdown Content",
- type: "text",
- default: "",
- category: "Content",
- description:
- "Markdown text to render. Supports headings, bold, italic, links, lists, code blocks, and blockquotes.",
- },
-];
-
-const iframeOptions: ChartOptionDef[] = [
- {
- key: "url",
- label: "URL",
- type: "text",
- default: "",
- category: "Content",
- description:
- "The URL of the external page to embed. Must be an https:// URL.",
- },
- {
- key: "iframeTitle",
- label: "Title",
- type: "text",
- default: "Embedded content",
- category: "Content",
- description:
- "Accessible title for the embedded content (used by screen readers).",
- },
- {
- key: "sandbox",
- label: "Sandbox Policy",
- type: "text",
- default: "allow-scripts allow-popups",
- category: "Security",
- description:
- "HTML sandbox attributes controlling what the embedded page can do. Restrict for untrusted content.",
- },
-];
-
-/** Accessibility options for ECharts-based chart types. */
-const accessibilityOptions: ChartOptionDef[] = [
- {
- key: "colorblindMode",
- label: "Colorblind Mode",
- type: "boolean",
- default: false,
- category: "Accessibility",
- description:
- "Overlay distinct patterns on chart elements so data series are distinguishable without relying on color alone.",
- },
-];
-
-/** Appearance options (color palette) for ECharts-based chart types. */
-const appearanceOptions: ChartOptionDef[] = [
- {
- key: "colorPalette",
- label: "Color Palette",
- type: "select",
- default: "deep-ocean",
- category: "Appearance",
- description: "Color scheme for chart series and data points.",
- options: Object.entries(COLOR_PALETTES).map(([k, v]) => ({
- value: k,
- label: v.label,
- })),
- },
-];
-
-/** Shared behavior options available to all chart types except parameter-select and form. */
-const behaviorOptions: ChartOptionDef[] = [
- {
- key: "showRefreshButton",
- label: "Show Refresh Button",
- type: "boolean",
- default: false,
- category: "Behavior",
- description:
- "Display a refresh button in the widget header to manually re-fetch the query.",
- },
- {
- key: "manualRun",
- label: "Manual Run",
- type: "boolean",
- default: false,
- category: "Behavior",
- description:
- "Start with the query disabled. A 'Run Query' button must be clicked to execute. On parameter change the widget resets to the overlay.",
- },
- {
- key: "cacheMode",
- label: "Cache Mode",
- type: "select",
- default: "ttl",
- category: "Behavior",
- description:
- "TTL re-fetches data based on the cache timeout. Forever fetches once and caches until manually refreshed.",
- options: [
- { label: "TTL (time-based)", value: "ttl" },
- { label: "Forever (until refresh)", value: "forever" },
- ],
- },
-];
-
-const gaugeOptions: ChartOptionDef[] = [
- {
- key: "min",
- label: "Min Value",
- type: "number",
- default: 0,
- category: "Range",
- description: "Minimum value on the gauge scale.",
- },
- {
- key: "max",
- label: "Max Value",
- type: "number",
- default: 100,
- category: "Range",
- description: "Maximum value on the gauge scale.",
- },
- {
- key: "showProgress",
- label: "Show Progress Arc",
- type: "boolean",
- default: true,
- category: "Style",
- description: "Fill the gauge arc to show progress toward the maximum.",
- },
- {
- key: "showPointer",
- label: "Show Pointer",
- type: "boolean",
- default: true,
- category: "Style",
- description: "Display a needle pointer on the gauge.",
- },
- {
- key: "showDetail",
- label: "Show Value Detail",
- type: "boolean",
- default: true,
- category: "Labels",
- description: "Show the numeric value and name below the gauge.",
- },
- {
- key: "startAngle",
- label: "Start Angle (°)",
- type: "number",
- default: 225,
- category: "Layout",
- description: "Starting angle of the gauge arc in degrees (0 = 3 o'clock).",
- },
- {
- key: "endAngle",
- label: "End Angle (°)",
- type: "number",
- default: -45,
- category: "Layout",
- description: "Ending angle of the gauge arc in degrees.",
- },
- {
- key: "thresholdZones",
- label: "Threshold Zones (JSON)",
- type: "text",
- default: "",
- category: "Style",
- description:
- 'Colored zones on the gauge arc: [{"value":30,"color":"#67e0e3"},{"value":70,"color":"#37a2da"},{"value":100,"color":"#fd666d"}]',
- },
-];
-
-const sankeyOptions: ChartOptionDef[] = [
- {
- key: "orient",
- label: "Orientation",
- type: "select",
- default: "horizontal",
- category: "Layout",
- description:
- "Direction of the flow: left-to-right (horizontal) or top-to-bottom (vertical).",
- options: [
- { label: "Horizontal", value: "horizontal" },
- { label: "Vertical", value: "vertical" },
- ],
- },
- {
- ...SHARED_SHOW_LABELS,
- label: "Show Node Labels",
- description: "Show the node name alongside each block.",
- },
- {
- key: "nodeWidth",
- label: "Node Width (px)",
- type: "number",
- default: 20,
- category: "Layout",
- description: "Width of each node block in pixels.",
- },
- {
- key: "nodeGap",
- label: "Node Gap (px)",
- type: "number",
- default: 8,
- category: "Layout",
- description: "Vertical gap between nodes at the same level in pixels.",
- },
-];
-
-const sunburstOptions: ChartOptionDef[] = [
- { ...SHARED_SHOW_LABELS, description: "Show the name of each segment." },
- {
- key: "sort",
- label: "Sort Segments",
- type: "select",
- default: "desc",
- category: "Layout",
- description: "Order in which segments are arranged around the chart.",
- options: [
- { label: "Largest First", value: "desc" },
- { label: "Smallest First", value: "asc" },
- { label: "Natural (data order)", value: "none" },
- ],
- },
- {
- key: "highlightOnHover",
- label: "Highlight on Hover",
- type: "boolean",
- default: true,
- category: "Style",
- description: "Enlarge and emphasise a segment when hovered.",
- },
-];
-
-const radarOptions: ChartOptionDef[] = [
- {
- key: "shape",
- label: "Shape",
- type: "select",
- default: "polygon",
- category: "Style",
- description: "Outline shape of the radar grid.",
- options: [
- { label: "Polygon", value: "polygon" },
- { label: "Circle", value: "circle" },
- ],
- },
- {
- key: "filled",
- label: "Fill Area",
- type: "boolean",
- default: true,
- category: "Style",
- description: "Fill the area enclosed by the data polygon.",
- },
- {
- ...SHARED_SHOW_LEGEND,
- description: "Show the legend identifying each series.",
- },
- {
- key: "showValues",
- label: "Show Values on Points",
- type: "boolean",
- default: false,
- category: "Labels",
- description: "Display the numeric value at each data point on the radar.",
- },
-];
-
-const treemapOptions: ChartOptionDef[] = [
- { ...SHARED_SHOW_LABELS, description: "Show the name of each rectangle." },
- {
- key: "showBreadcrumb",
- label: "Show Breadcrumb",
- type: "boolean",
- default: true,
- category: "Labels",
- description:
- "Show the navigation breadcrumb when drilling down into nested data.",
- },
- {
- key: "showValues",
- label: "Show Values",
- type: "boolean",
- default: false,
- category: "Labels",
- description: "Display the numeric value inside each rectangle.",
- },
- {
- key: "colorSaturation",
- label: "Color Saturation Range",
- type: "select",
- default: "medium",
- category: "Style",
- description:
- "Controls the saturation gradient used to shade child rectangles within a parent.",
- options: [
- { label: "Low", value: "low" },
- { label: "Medium", value: "medium" },
- { label: "High", value: "high" },
- ],
- },
-];
-
-const chartOptionsRegistry: Record = {
- bar: [
- ...barOptions,
- ...dataZoomOptions,
- ...tooltipFormatOptions,
- ...behaviorOptions,
- ...appearanceOptions,
- ...accessibilityOptions,
- ],
- line: [
- ...lineOptions,
- ...dataZoomOptions,
- ...tooltipFormatOptions,
- ...behaviorOptions,
- ...appearanceOptions,
- ...accessibilityOptions,
- ],
- pie: [
- ...pieOptions,
- ...tooltipFormatOptions,
- ...behaviorOptions,
- ...appearanceOptions,
- ...accessibilityOptions,
- ],
- "single-value": [...singleValueOptions, ...behaviorOptions],
- graph: [...graphOptions, ...behaviorOptions],
- map: [...mapOptions, ...behaviorOptions],
- table: [...tableOptions, ...behaviorOptions],
- json: [...jsonOptions, ...behaviorOptions],
- "parameter-select": parameterSelectOptions,
- form: formOptions,
- markdown: markdownOptions,
- iframe: iframeOptions,
- gauge: [...gaugeOptions, ...behaviorOptions, ...appearanceOptions],
- sankey: [...sankeyOptions, ...behaviorOptions, ...appearanceOptions],
- sunburst: [...sunburstOptions, ...behaviorOptions, ...appearanceOptions],
- radar: [...radarOptions, ...behaviorOptions, ...appearanceOptions],
- treemap: [...treemapOptions, ...behaviorOptions, ...appearanceOptions],
-};
-
-export function getChartOptions(chartType: string): ChartOptionDef[] {
- return chartOptionsRegistry[chartType] ?? [];
-}
-
-export function getDefaultChartSettings(
- chartType: string,
-): Record {
- const options = getChartOptions(chartType);
- const defaults: Record = {};
- for (const opt of options) {
- defaults[opt.key] = opt.default;
- }
- return defaults;
-}
+export {
+ getChartOptions,
+ getDefaultChartSettings,
+ type ChartOptionDef,
+} from "./chart-options/index";
diff --git a/component/src/components/composed/chart-options/bar.ts b/component/src/components/composed/chart-options/bar.ts
new file mode 100644
index 00000000..0c4b4857
--- /dev/null
+++ b/component/src/components/composed/chart-options/bar.ts
@@ -0,0 +1,73 @@
+import {
+ type ChartOptionDef,
+ SHARED_SHOW_LEGEND,
+ SHARED_X_AXIS_LABEL,
+ SHARED_Y_AXIS_LABEL,
+ SHARED_SHOW_GRID_LINES,
+ SHARED_REFERENCE_LINES,
+} from "./shared";
+
+export const barOptions: ChartOptionDef[] = [
+ {
+ key: "orientation",
+ label: "Orientation",
+ type: "select",
+ default: "vertical",
+ category: "Layout",
+ description:
+ "Vertical bars grow upward; horizontal bars grow left-to-right.",
+ options: [
+ { label: "Vertical", value: "vertical" },
+ { label: "Horizontal", value: "horizontal" },
+ ],
+ },
+ {
+ key: "stacked",
+ label: "Stacked",
+ type: "boolean",
+ default: false,
+ category: "Layout",
+ description:
+ "Stack series on top of each other instead of placing them side by side.",
+ },
+ {
+ key: "barWidth",
+ label: "Bar Width (px, 0=auto)",
+ type: "number",
+ default: 0,
+ category: "Layout",
+ description:
+ "Width of each bar in pixels. Set to 0 to let the chart auto-size.",
+ },
+ {
+ key: "barGap",
+ label: "Bar Gap",
+ type: "text",
+ default: "30%",
+ category: "Layout",
+ description:
+ "Gap between bar groups as a percentage of the bar width (e.g. '30%').",
+ },
+ {
+ key: "showValues",
+ label: "Show Values",
+ type: "boolean",
+ default: false,
+ category: "Labels",
+ description: "Display the numeric value as a label on each bar.",
+ },
+ SHARED_SHOW_LEGEND,
+ SHARED_X_AXIS_LABEL,
+ SHARED_Y_AXIS_LABEL,
+ SHARED_SHOW_GRID_LINES,
+ {
+ key: "axisLabelRotation",
+ label: "Axis Label Rotation (°)",
+ type: "number",
+ default: -1,
+ category: "Labels",
+ description:
+ "Override axis label rotation angle (0-90). Set to -1 for automatic (rotates at 8+ categories).",
+ },
+ SHARED_REFERENCE_LINES,
+];
diff --git a/component/src/components/composed/chart-options/form.ts b/component/src/components/composed/chart-options/form.ts
new file mode 100644
index 00000000..d79b3589
--- /dev/null
+++ b/component/src/components/composed/chart-options/form.ts
@@ -0,0 +1,28 @@
+import { type ChartOptionDef } from "./shared";
+
+export const formOptions: ChartOptionDef[] = [
+ {
+ key: "submitButtonText",
+ label: "Submit Button Text",
+ type: "text",
+ default: "Submit",
+ category: "Form",
+ description: "Label for the form submit button.",
+ },
+ {
+ key: "successMessage",
+ label: "Success Message",
+ type: "text",
+ default: "Form submitted successfully",
+ category: "Form",
+ description: "Message shown after a successful submission.",
+ },
+ {
+ key: "resetOnSuccess",
+ label: "Reset on Success",
+ type: "boolean",
+ default: true,
+ category: "Form",
+ description: "Clear all form fields after a successful submission.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/gauge.ts b/component/src/components/composed/chart-options/gauge.ts
new file mode 100644
index 00000000..fd7d3517
--- /dev/null
+++ b/component/src/components/composed/chart-options/gauge.ts
@@ -0,0 +1,69 @@
+import { type ChartOptionDef } from "./shared";
+
+export const gaugeOptions: ChartOptionDef[] = [
+ {
+ key: "min",
+ label: "Min Value",
+ type: "number",
+ default: 0,
+ category: "Range",
+ description: "Minimum value on the gauge scale.",
+ },
+ {
+ key: "max",
+ label: "Max Value",
+ type: "number",
+ default: 100,
+ category: "Range",
+ description: "Maximum value on the gauge scale.",
+ },
+ {
+ key: "showProgress",
+ label: "Show Progress Arc",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description: "Fill the gauge arc to show progress toward the maximum.",
+ },
+ {
+ key: "showPointer",
+ label: "Show Pointer",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description: "Display a needle pointer on the gauge.",
+ },
+ {
+ key: "showDetail",
+ label: "Show Value Detail",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the numeric value and name below the gauge.",
+ },
+ {
+ key: "startAngle",
+ label: "Start Angle (°)",
+ type: "number",
+ default: 225,
+ category: "Layout",
+ description: "Starting angle of the gauge arc in degrees (0 = 3 o'clock).",
+ },
+ {
+ key: "endAngle",
+ label: "End Angle (°)",
+ type: "number",
+ default: -45,
+ category: "Layout",
+ description: "Ending angle of the gauge arc in degrees.",
+ },
+ {
+ key: "thresholdZones",
+ label: "Threshold Zones (JSON)",
+ type: "text",
+ default: "",
+ category: "Style",
+ description:
+ 'Colored zones on the gauge arc: [{"value":30,"color":"#67e0e3"},{"value":70,"color":"#37a2da"},{"value":100,"color":"#fd666d"}]',
+ },
+];
diff --git a/component/src/components/composed/chart-options/graph.ts b/component/src/components/composed/chart-options/graph.ts
new file mode 100644
index 00000000..934d3293
--- /dev/null
+++ b/component/src/components/composed/chart-options/graph.ts
@@ -0,0 +1,52 @@
+import { type ChartOptionDef, SHARED_SHOW_LABELS } from "./shared";
+
+export const graphOptions: ChartOptionDef[] = [
+ {
+ key: "layout",
+ label: "Layout",
+ type: "select",
+ default: "force",
+ category: "Layout",
+ description:
+ "Algorithm used to position nodes: force simulation, circular ring, or hierarchical tree.",
+ options: [
+ { label: "Force", value: "force" },
+ { label: "Circular", value: "circular" },
+ { label: "Hierarchical", value: "hierarchical" },
+ ],
+ },
+ {
+ key: "nodeSize",
+ label: "Node Size",
+ type: "select",
+ default: "medium",
+ category: "Layout",
+ description: "Visual size of each node circle.",
+ options: [
+ { label: "Small", value: "small" },
+ { label: "Medium", value: "medium" },
+ { label: "Large", value: "large" },
+ ],
+ },
+ {
+ ...SHARED_SHOW_LABELS,
+ description: "Show the node label (first string property) on each node.",
+ },
+ {
+ key: "showRelationshipLabels",
+ label: "Show Relationship Labels",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the relationship type name on each edge.",
+ },
+ {
+ key: "physics",
+ label: "Enable Physics",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description:
+ "Enable physics simulation so nodes repel and edges act as springs.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/iframe.ts b/component/src/components/composed/chart-options/iframe.ts
new file mode 100644
index 00000000..6d980df6
--- /dev/null
+++ b/component/src/components/composed/chart-options/iframe.ts
@@ -0,0 +1,31 @@
+import { type ChartOptionDef } from "./shared";
+
+export const iframeOptions: ChartOptionDef[] = [
+ {
+ key: "url",
+ label: "URL",
+ type: "text",
+ default: "",
+ category: "Content",
+ description:
+ "The URL of the external page to embed. Must be an https:// URL.",
+ },
+ {
+ key: "iframeTitle",
+ label: "Title",
+ type: "text",
+ default: "Embedded content",
+ category: "Content",
+ description:
+ "Accessible title for the embedded content (used by screen readers).",
+ },
+ {
+ key: "sandbox",
+ label: "Sandbox Policy",
+ type: "text",
+ default: "",
+ category: "Security",
+ description:
+ "HTML sandbox attributes controlling what the embedded page can do. Restrict for untrusted content.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/index.ts b/component/src/components/composed/chart-options/index.ts
new file mode 100644
index 00000000..4ffe39ea
--- /dev/null
+++ b/component/src/components/composed/chart-options/index.ts
@@ -0,0 +1,81 @@
+import type { ChartOptionDef } from "./shared";
+export type { ChartOptionDef } from "./shared";
+import {
+ behaviorOptions,
+ appearanceOptions,
+ accessibilityOptions,
+ dataZoomOptions,
+ tooltipFormatOptions,
+} from "./shared";
+import { barOptions } from "./bar";
+import { lineOptions } from "./line";
+import { pieOptions } from "./pie";
+import { singleValueOptions } from "./single-value";
+import { graphOptions } from "./graph";
+import { mapOptions } from "./map";
+import { tableOptions } from "./table";
+import { jsonOptions } from "./json";
+import { parameterSelectOptions } from "./parameter-select";
+import { formOptions } from "./form";
+import { markdownOptions } from "./markdown";
+import { iframeOptions } from "./iframe";
+import { gaugeOptions } from "./gauge";
+import { sankeyOptions } from "./sankey";
+import { sunburstOptions } from "./sunburst";
+import { radarOptions } from "./radar";
+import { treemapOptions } from "./treemap";
+
+const chartOptionsRegistry: Record = {
+ bar: [
+ ...barOptions,
+ ...dataZoomOptions,
+ ...tooltipFormatOptions,
+ ...behaviorOptions,
+ ...appearanceOptions,
+ ...accessibilityOptions,
+ ],
+ line: [
+ ...lineOptions,
+ ...dataZoomOptions,
+ ...tooltipFormatOptions,
+ ...behaviorOptions,
+ ...appearanceOptions,
+ ...accessibilityOptions,
+ ],
+ pie: [
+ ...pieOptions,
+ ...tooltipFormatOptions,
+ ...behaviorOptions,
+ ...appearanceOptions,
+ ...accessibilityOptions,
+ ],
+ "single-value": [...singleValueOptions, ...behaviorOptions],
+ graph: [...graphOptions, ...behaviorOptions],
+ map: [...mapOptions, ...behaviorOptions],
+ table: [...tableOptions, ...behaviorOptions],
+ json: [...jsonOptions, ...behaviorOptions],
+ "parameter-select": parameterSelectOptions,
+ form: formOptions,
+ markdown: markdownOptions,
+ iframe: iframeOptions,
+ gauge: [...gaugeOptions, ...behaviorOptions, ...appearanceOptions],
+ sankey: [...sankeyOptions, ...behaviorOptions, ...appearanceOptions],
+ sunburst: [...sunburstOptions, ...behaviorOptions, ...appearanceOptions],
+ radar: [...radarOptions, ...behaviorOptions, ...appearanceOptions],
+ treemap: [...treemapOptions, ...behaviorOptions, ...appearanceOptions],
+};
+
+export function getChartOptions(chartType: string): ChartOptionDef[] {
+ return chartOptionsRegistry[chartType] ?? [];
+}
+
+export function getDefaultChartSettings(
+ chartType: string,
+): Record {
+ const options = getChartOptions(chartType);
+ const defaults: Record = {};
+ for (const opt of options) {
+ defaults[opt.key] = opt.default;
+ }
+ return defaults;
+}
diff --git a/component/src/components/composed/chart-options/json.ts b/component/src/components/composed/chart-options/json.ts
new file mode 100644
index 00000000..53c8d9a7
--- /dev/null
+++ b/component/src/components/composed/chart-options/json.ts
@@ -0,0 +1,47 @@
+import { type ChartOptionDef } from "./shared";
+
+export const jsonOptions: ChartOptionDef[] = [
+ {
+ key: "initialExpanded",
+ label: "Initial Expand Depth",
+ type: "number",
+ default: 2,
+ category: "Display",
+ description:
+ "How many levels deep the JSON tree is expanded when first rendered (0 = collapsed).",
+ },
+ {
+ key: "fontSize",
+ label: "Font Size",
+ type: "select",
+ default: "sm",
+ category: "Display",
+ description: "Font size used for the JSON syntax highlighting.",
+ options: [
+ { label: "Small", value: "sm" },
+ { label: "Medium", value: "md" },
+ { label: "Large", value: "lg" },
+ ],
+ },
+ {
+ key: "showCopyButton",
+ label: "Show Copy Button",
+ type: "boolean",
+ default: true,
+ category: "Display",
+ description:
+ "Show a button to copy the full JSON payload to the clipboard.",
+ },
+ {
+ key: "theme",
+ label: "Theme",
+ type: "select",
+ default: "dark",
+ category: "Display",
+ description: "Colour theme for the JSON syntax highlighting.",
+ options: [
+ { label: "Dark", value: "dark" },
+ { label: "Light", value: "light" },
+ ],
+ },
+];
diff --git a/component/src/components/composed/chart-options/line.ts b/component/src/components/composed/chart-options/line.ts
new file mode 100644
index 00000000..b4046183
--- /dev/null
+++ b/component/src/components/composed/chart-options/line.ts
@@ -0,0 +1,82 @@
+import {
+ type ChartOptionDef,
+ SHARED_SHOW_GRID_LINES,
+ SHARED_X_AXIS_LABEL,
+ SHARED_Y_AXIS_LABEL,
+ SHARED_SHOW_LEGEND,
+ SHARED_REFERENCE_LINES,
+} from "./shared";
+
+export const lineOptions: ChartOptionDef[] = [
+ {
+ key: "smooth",
+ label: "Smooth Curve",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description:
+ "Render lines as smooth Bézier curves instead of straight segments.",
+ },
+ {
+ key: "area",
+ label: "Fill Area",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description:
+ "Fill the area beneath the line to emphasise volume over time.",
+ },
+ {
+ key: "lineWidth",
+ label: "Line Width (px)",
+ type: "number",
+ default: 2,
+ category: "Style",
+ description: "Stroke width of the line in pixels.",
+ },
+ {
+ key: "stepped",
+ label: "Stepped Line",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description:
+ "Draw the line as a step function — useful for discrete state changes.",
+ },
+ {
+ key: "showPoints",
+ label: "Show Data Points",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description: "Draw a dot at each data point along the line.",
+ },
+ SHARED_SHOW_GRID_LINES,
+ SHARED_X_AXIS_LABEL,
+ SHARED_Y_AXIS_LABEL,
+ SHARED_SHOW_LEGEND,
+ SHARED_REFERENCE_LINES,
+ {
+ key: "samplingThreshold",
+ label: "Sampling Threshold",
+ type: "number",
+ default: 1000,
+ category: "Performance",
+ description:
+ "Enable LTTB downsampling when data points exceed this count. Set to 0 to disable.",
+ },
+ {
+ key: "samplingMethod",
+ label: "Sampling Method",
+ type: "select",
+ default: "lttb",
+ options: [
+ { label: "LTTB", value: "lttb" },
+ { label: "Average", value: "average" },
+ { label: "Max", value: "max" },
+ { label: "Min", value: "min" },
+ ],
+ category: "Performance",
+ description: "Algorithm for downsampling large datasets.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/map.ts b/component/src/components/composed/chart-options/map.ts
new file mode 100644
index 00000000..ad148c1a
--- /dev/null
+++ b/component/src/components/composed/chart-options/map.ts
@@ -0,0 +1,78 @@
+import { type ChartOptionDef } from "./shared";
+
+export const mapOptions: ChartOptionDef[] = [
+ {
+ key: "tileLayer",
+ label: "Tile Layer",
+ type: "select",
+ default: "osm",
+ category: "Map",
+ description:
+ "Base-map tile provider. OpenStreetMap is open and free; Carto variants are cleaner for data overlays.",
+ options: [
+ { label: "OpenStreetMap", value: "osm" },
+ { label: "Carto Light", value: "carto-light" },
+ { label: "Carto Dark", value: "carto-dark" },
+ ],
+ },
+ {
+ key: "zoom",
+ label: "Default Zoom",
+ type: "number",
+ default: 3,
+ category: "Map",
+ description:
+ "Initial zoom level when the map first renders (1 = world view, 18 = street level).",
+ },
+ {
+ key: "minZoom",
+ label: "Min Zoom",
+ type: "number",
+ default: 2,
+ category: "Map",
+ description: "Minimum zoom level the user can zoom out to.",
+ },
+ {
+ key: "maxZoom",
+ label: "Max Zoom",
+ type: "number",
+ default: 18,
+ category: "Map",
+ description: "Maximum zoom level the user can zoom in to.",
+ },
+ {
+ key: "autoFitBounds",
+ label: "Auto-fit Bounds",
+ type: "boolean",
+ default: true,
+ category: "Map",
+ description:
+ "Automatically pan and zoom to fit all markers on the initial load.",
+ },
+ {
+ key: "markerSize",
+ label: "Marker Size (px)",
+ type: "number",
+ default: 6,
+ category: "Markers",
+ description: "Radius of each map marker circle in pixels.",
+ },
+ {
+ key: "clusterMarkers",
+ label: "Cluster Markers",
+ type: "boolean",
+ default: false,
+ category: "Markers",
+ description:
+ "Group nearby markers into a single cluster badge at lower zoom levels.",
+ },
+ {
+ key: "showPopup",
+ label: "Show Popup on Click",
+ type: "boolean",
+ default: true,
+ category: "Markers",
+ description:
+ "Show a popup with the row data when the user clicks a marker.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/markdown.ts b/component/src/components/composed/chart-options/markdown.ts
new file mode 100644
index 00000000..f2c9b157
--- /dev/null
+++ b/component/src/components/composed/chart-options/markdown.ts
@@ -0,0 +1,13 @@
+import { type ChartOptionDef } from "./shared";
+
+export const markdownOptions: ChartOptionDef[] = [
+ {
+ key: "content",
+ label: "Markdown Content",
+ type: "text",
+ default: "",
+ category: "Content",
+ description:
+ "Markdown text to render. Supports headings, bold, italic, links, lists, code blocks, and blockquotes.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/parameter-select.ts b/component/src/components/composed/chart-options/parameter-select.ts
new file mode 100644
index 00000000..9329ae48
--- /dev/null
+++ b/component/src/components/composed/chart-options/parameter-select.ts
@@ -0,0 +1,31 @@
+import { type ChartOptionDef } from "./shared";
+
+export const parameterSelectOptions: ChartOptionDef[] = [
+ {
+ key: "placeholder",
+ label: "Placeholder",
+ type: "text",
+ default: "",
+ category: "Parameter",
+ description:
+ "Hint text shown inside the selector when no value has been chosen.",
+ },
+ {
+ key: "searchable",
+ label: "Search-as-you-type",
+ type: "boolean",
+ default: true,
+ category: "Parameter",
+ description:
+ "Allow the user to type to filter the option list in real time.",
+ },
+ {
+ key: "defaultValue",
+ label: "Default Value",
+ type: "text",
+ default: "",
+ category: "Parameter",
+ description:
+ "Value used on dashboard load when no selection has been made. Leave empty for no default.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/pie.ts b/component/src/components/composed/chart-options/pie.ts
new file mode 100644
index 00000000..f65ed5cb
--- /dev/null
+++ b/component/src/components/composed/chart-options/pie.ts
@@ -0,0 +1,82 @@
+import { type ChartOptionDef, SHARED_SHOW_LEGEND } from "./shared";
+
+export const pieOptions: ChartOptionDef[] = [
+ {
+ key: "donut",
+ label: "Donut Style",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description:
+ "Cut a circular hole in the centre to render the chart as a donut.",
+ },
+ {
+ key: "roseMode",
+ label: "Rose/Nightingale Mode",
+ type: "boolean",
+ default: false,
+ category: "Style",
+ description:
+ "Vary each slice's radius by its value (Nightingale / rose chart).",
+ },
+ {
+ key: "labelPosition",
+ label: "Label Position",
+ type: "select",
+ default: "outside",
+ category: "Labels",
+ description: "Where to place the slice labels relative to the chart.",
+ options: [
+ { label: "Outside", value: "outside" },
+ { label: "Inside", value: "inside" },
+ { label: "Center", value: "center" },
+ ],
+ },
+ {
+ key: "showLabel",
+ label: "Show Labels",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the category name on each slice.",
+ },
+ {
+ key: "showPercentage",
+ label: "Show Percentage",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the percentage value on each slice.",
+ },
+ {
+ ...SHARED_SHOW_LEGEND,
+ description: "Show the chart legend identifying each slice.",
+ },
+ {
+ key: "sortSlices",
+ label: "Sort Slices by Value",
+ type: "boolean",
+ default: false,
+ category: "Layout",
+ description:
+ "Sort slices by value (largest first) for a cleaner visual layout.",
+ },
+ {
+ key: "topN",
+ label: "Top N Slices",
+ type: "number",
+ default: 0,
+ category: "Layout",
+ description:
+ "Show only the top N slices and group the rest into 'Other'. Set to 0 to show all.",
+ },
+ {
+ key: "donutCenterText",
+ label: "Donut Center Text",
+ type: "text",
+ default: "",
+ category: "Labels",
+ description:
+ "Custom text in the donut center. Leave blank to show the total.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/radar.ts b/component/src/components/composed/chart-options/radar.ts
new file mode 100644
index 00000000..7f58ea31
--- /dev/null
+++ b/component/src/components/composed/chart-options/radar.ts
@@ -0,0 +1,36 @@
+import { type ChartOptionDef, SHARED_SHOW_LEGEND } from "./shared";
+
+export const radarOptions: ChartOptionDef[] = [
+ {
+ key: "shape",
+ label: "Shape",
+ type: "select",
+ default: "polygon",
+ category: "Style",
+ description: "Outline shape of the radar grid.",
+ options: [
+ { label: "Polygon", value: "polygon" },
+ { label: "Circle", value: "circle" },
+ ],
+ },
+ {
+ key: "filled",
+ label: "Fill Area",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description: "Fill the area enclosed by the data polygon.",
+ },
+ {
+ ...SHARED_SHOW_LEGEND,
+ description: "Show the legend identifying each series.",
+ },
+ {
+ key: "showValues",
+ label: "Show Values on Points",
+ type: "boolean",
+ default: false,
+ category: "Labels",
+ description: "Display the numeric value at each data point on the radar.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/sankey.ts b/component/src/components/composed/chart-options/sankey.ts
new file mode 100644
index 00000000..ba347b13
--- /dev/null
+++ b/component/src/components/composed/chart-options/sankey.ts
@@ -0,0 +1,38 @@
+import { type ChartOptionDef, SHARED_SHOW_LABELS } from "./shared";
+
+export const sankeyOptions: ChartOptionDef[] = [
+ {
+ key: "orient",
+ label: "Orientation",
+ type: "select",
+ default: "horizontal",
+ category: "Layout",
+ description:
+ "Direction of the flow: left-to-right (horizontal) or top-to-bottom (vertical).",
+ options: [
+ { label: "Horizontal", value: "horizontal" },
+ { label: "Vertical", value: "vertical" },
+ ],
+ },
+ {
+ ...SHARED_SHOW_LABELS,
+ label: "Show Node Labels",
+ description: "Show the node name alongside each block.",
+ },
+ {
+ key: "nodeWidth",
+ label: "Node Width (px)",
+ type: "number",
+ default: 20,
+ category: "Layout",
+ description: "Width of each node block in pixels.",
+ },
+ {
+ key: "nodeGap",
+ label: "Node Gap (px)",
+ type: "number",
+ default: 8,
+ category: "Layout",
+ description: "Vertical gap between nodes at the same level in pixels.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/shared.ts b/component/src/components/composed/chart-options/shared.ts
new file mode 100644
index 00000000..4eb5ca4a
--- /dev/null
+++ b/component/src/components/composed/chart-options/shared.ts
@@ -0,0 +1,163 @@
+import { COLOR_PALETTES } from "@/charts/palettes";
+
+export interface ChartOptionDef {
+ key: string;
+ label: string;
+ type: "boolean" | "select" | "text" | "number" | "column-multi-select";
+ default: unknown;
+ category: string;
+ /** Only for type: "select" */
+ options?: { label: string; value: string }[];
+ /** Short description shown in a tooltip next to the option label. */
+ description?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Shared option constants — reused across multiple chart type definitions
+// to avoid duplication.
+// ---------------------------------------------------------------------------
+
+export const SHARED_SHOW_LEGEND: ChartOptionDef = {
+ key: "showLegend",
+ label: "Show Legend",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the chart legend identifying each data series.",
+};
+
+export const SHARED_X_AXIS_LABEL: ChartOptionDef = {
+ key: "xAxisLabel",
+ label: "X-Axis Label",
+ type: "text",
+ default: "",
+ category: "Labels",
+ description: "Custom label displayed below the horizontal axis.",
+};
+
+export const SHARED_Y_AXIS_LABEL: ChartOptionDef = {
+ key: "yAxisLabel",
+ label: "Y-Axis Label",
+ type: "text",
+ default: "",
+ category: "Labels",
+ description: "Custom label displayed beside the vertical axis.",
+};
+
+export const SHARED_SHOW_GRID_LINES: ChartOptionDef = {
+ key: "showGridLines",
+ label: "Show Grid Lines",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description: "Show faint horizontal reference lines behind the chart.",
+};
+
+export const SHARED_REFERENCE_LINES: ChartOptionDef = {
+ key: "referenceLines",
+ label: "Reference Lines (JSON)",
+ type: "text",
+ default: "",
+ category: "Annotations",
+ description:
+ 'Horizontal reference lines as JSON: [{"value":50,"label":"Target","color":"#ff0000"}]',
+};
+
+export const SHARED_SHOW_LABELS: ChartOptionDef = {
+ key: "showLabels",
+ label: "Show Labels",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description: "Show the name label on each element.",
+};
+
+/** DataZoom option for axis-based charts (bar, line). */
+export const dataZoomOptions: ChartOptionDef[] = [
+ {
+ key: "enableDataZoom",
+ label: "Enable Scroll Zoom",
+ type: "boolean",
+ default: false,
+ category: "Interaction",
+ description:
+ "Allow scroll-to-zoom on the data axis to explore large datasets.",
+ },
+];
+
+/** Shared number formatting options for tooltip values on axis-based charts. */
+export const tooltipFormatOptions: ChartOptionDef[] = [
+ {
+ key: "decimalPlaces",
+ label: "Decimal Places",
+ type: "number",
+ default: -1,
+ category: "Labels",
+ description:
+ "Fixed number of decimal places in tooltips (0-6). Set to -1 for automatic.",
+ },
+];
+
+/** Shared behavior options available to all chart types except parameter-select and form. */
+export const behaviorOptions: ChartOptionDef[] = [
+ {
+ key: "showRefreshButton",
+ label: "Show Refresh Button",
+ type: "boolean",
+ default: false,
+ category: "Behavior",
+ description:
+ "Display a refresh button in the widget header to manually re-fetch the query.",
+ },
+ {
+ key: "manualRun",
+ label: "Manual Run",
+ type: "boolean",
+ default: false,
+ category: "Behavior",
+ description:
+ "Start with the query disabled. A 'Run Query' button must be clicked to execute. On parameter change the widget resets to the overlay.",
+ },
+ {
+ key: "cacheMode",
+ label: "Cache Mode",
+ type: "select",
+ default: "ttl",
+ category: "Behavior",
+ description:
+ "TTL re-fetches data based on the cache timeout. Forever fetches once and caches until manually refreshed.",
+ options: [
+ { label: "TTL (time-based)", value: "ttl" },
+ { label: "Forever (until refresh)", value: "forever" },
+ ],
+ },
+];
+
+/** Appearance options (color palette) for ECharts-based chart types. */
+export const appearanceOptions: ChartOptionDef[] = [
+ {
+ key: "colorPalette",
+ label: "Color Palette",
+ type: "select",
+ default: "deep-ocean",
+ category: "Appearance",
+ description: "Color scheme for chart series and data points.",
+ options: Object.entries(COLOR_PALETTES).map(([k, v]) => ({
+ value: k,
+ label: v.label,
+ })),
+ },
+];
+
+/** Accessibility options for ECharts-based chart types. */
+export const accessibilityOptions: ChartOptionDef[] = [
+ {
+ key: "colorblindMode",
+ label: "Colorblind Mode",
+ type: "boolean",
+ default: false,
+ category: "Accessibility",
+ description:
+ "Overlay distinct patterns on chart elements so data series are distinguishable without relying on color alone.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/single-value.ts b/component/src/components/composed/chart-options/single-value.ts
new file mode 100644
index 00000000..347c8fe3
--- /dev/null
+++ b/component/src/components/composed/chart-options/single-value.ts
@@ -0,0 +1,75 @@
+import { type ChartOptionDef } from "./shared";
+
+export const singleValueOptions: ChartOptionDef[] = [
+ {
+ key: "title",
+ label: "Title",
+ type: "text",
+ default: "",
+ category: "Display",
+ description: "Custom heading shown above the value. Leave blank to hide.",
+ },
+ {
+ key: "prefix",
+ label: "Prefix",
+ type: "text",
+ default: "",
+ category: "Display",
+ description: "Text prepended to the value (e.g. '$', '€').",
+ },
+ {
+ key: "suffix",
+ label: "Suffix",
+ type: "text",
+ default: "",
+ category: "Display",
+ description: "Text appended to the value (e.g. '%', ' items').",
+ },
+ {
+ key: "decimalPlaces",
+ label: "Decimal Places",
+ type: "number",
+ default: -1,
+ category: "Display",
+ description:
+ "Fixed number of decimal places (0-6). Set to -1 for automatic.",
+ },
+ {
+ key: "fontSize",
+ label: "Font Size",
+ type: "select",
+ default: "lg",
+ category: "Display",
+ description: "Size of the main displayed value.",
+ options: [
+ { label: "Small", value: "sm" },
+ { label: "Medium", value: "md" },
+ { label: "Large", value: "lg" },
+ { label: "Extra Large", value: "xl" },
+ ],
+ },
+ {
+ key: "numberFormat",
+ label: "Number Format",
+ type: "select",
+ default: "plain",
+ category: "Display",
+ description:
+ "How to format the numeric value — plain, comma-separated, compact (1.2k), or percentage.",
+ options: [
+ { label: "Plain", value: "plain" },
+ { label: "Comma", value: "comma" },
+ { label: "Compact", value: "compact" },
+ { label: "Percent", value: "percent" },
+ ],
+ },
+ {
+ key: "trendEnabled",
+ label: "Show Trend Indicator",
+ type: "boolean",
+ default: false,
+ category: "Display",
+ description:
+ "Show a trend arrow comparing the current value to the previous period (requires 2 rows in the query result).",
+ },
+];
diff --git a/component/src/components/composed/chart-options/sunburst.ts b/component/src/components/composed/chart-options/sunburst.ts
new file mode 100644
index 00000000..fbcada7b
--- /dev/null
+++ b/component/src/components/composed/chart-options/sunburst.ts
@@ -0,0 +1,26 @@
+import { type ChartOptionDef, SHARED_SHOW_LABELS } from "./shared";
+
+export const sunburstOptions: ChartOptionDef[] = [
+ { ...SHARED_SHOW_LABELS, description: "Show the name of each segment." },
+ {
+ key: "sort",
+ label: "Sort Segments",
+ type: "select",
+ default: "desc",
+ category: "Layout",
+ description: "Order in which segments are arranged around the chart.",
+ options: [
+ { label: "Largest First", value: "desc" },
+ { label: "Smallest First", value: "asc" },
+ { label: "Natural (data order)", value: "none" },
+ ],
+ },
+ {
+ key: "highlightOnHover",
+ label: "Highlight on Hover",
+ type: "boolean",
+ default: true,
+ category: "Style",
+ description: "Enlarge and emphasise a segment when hovered.",
+ },
+];
diff --git a/component/src/components/composed/chart-options/table.ts b/component/src/components/composed/chart-options/table.ts
new file mode 100644
index 00000000..1cf0d73b
--- /dev/null
+++ b/component/src/components/composed/chart-options/table.ts
@@ -0,0 +1,105 @@
+import { type ChartOptionDef } from "./shared";
+
+export const tableOptions: ChartOptionDef[] = [
+ {
+ key: "enableSorting",
+ label: "Enable Sorting",
+ type: "boolean",
+ default: true,
+ category: "Features",
+ description:
+ "Allow clicking column headers to sort rows ascending or descending.",
+ },
+ {
+ key: "enableSelection",
+ label: "Row Selection",
+ type: "boolean",
+ default: false,
+ category: "Features",
+ description: "Allow selecting individual rows by clicking them.",
+ },
+ {
+ key: "enableGlobalFilter",
+ label: "Global Search",
+ type: "boolean",
+ default: true,
+ category: "Features",
+ description: "Show a search box that filters all rows across all columns.",
+ },
+ {
+ key: "enableColumnFilters",
+ label: "Column Filters",
+ type: "boolean",
+ default: true,
+ category: "Features",
+ description: "Show per-column filter inputs below each column header.",
+ },
+ {
+ key: "enableColumnResizing",
+ label: "Column Resizing",
+ type: "boolean",
+ default: false,
+ category: "Features",
+ description:
+ "Allow drag-to-resize column borders. Double-click to auto-fit.",
+ },
+ {
+ key: "enablePagination",
+ label: "Enable Pagination",
+ type: "boolean",
+ default: true,
+ category: "Pagination",
+ description:
+ "Show Previous / Next controls to page through large result sets.",
+ },
+ {
+ key: "pageSize",
+ label: "Page Size",
+ type: "number",
+ default: 10,
+ category: "Pagination",
+ description: "Number of rows shown per page when pagination is enabled.",
+ },
+ {
+ key: "emptyMessage",
+ label: "Empty Message",
+ type: "text",
+ default: "No results",
+ category: "Display",
+ description: "Text displayed when the query returns no rows.",
+ },
+ {
+ key: "enableGrouping",
+ label: "Enable Row Grouping",
+ type: "boolean",
+ default: false,
+ category: "Grouping",
+ description:
+ "Allow grouping rows by column values. Columns to group by are set in the groupBy field below.",
+ },
+ {
+ key: "groupBy",
+ label: "Group By Columns",
+ type: "column-multi-select",
+ default: [],
+ category: "Grouping",
+ description:
+ "Select columns to group by. Nested grouping is supported — order determines nesting hierarchy.",
+ },
+ {
+ key: "aggregationFn",
+ label: "Aggregation Function",
+ type: "select",
+ default: "sum",
+ category: "Grouping",
+ description: "Aggregation function for numeric columns in grouped rows.",
+ options: [
+ { label: "Sum", value: "sum" },
+ { label: "Average", value: "mean" },
+ { label: "Median", value: "median" },
+ { label: "Count", value: "count" },
+ { label: "Min", value: "min" },
+ { label: "Max", value: "max" },
+ ],
+ },
+];
diff --git a/component/src/components/composed/chart-options/treemap.ts b/component/src/components/composed/chart-options/treemap.ts
new file mode 100644
index 00000000..d39170d9
--- /dev/null
+++ b/component/src/components/composed/chart-options/treemap.ts
@@ -0,0 +1,36 @@
+import { type ChartOptionDef, SHARED_SHOW_LABELS } from "./shared";
+
+export const treemapOptions: ChartOptionDef[] = [
+ { ...SHARED_SHOW_LABELS, description: "Show the name of each rectangle." },
+ {
+ key: "showBreadcrumb",
+ label: "Show Breadcrumb",
+ type: "boolean",
+ default: true,
+ category: "Labels",
+ description:
+ "Show the navigation breadcrumb when drilling down into nested data.",
+ },
+ {
+ key: "showValues",
+ label: "Show Values",
+ type: "boolean",
+ default: false,
+ category: "Labels",
+ description: "Display the numeric value inside each rectangle.",
+ },
+ {
+ key: "colorSaturation",
+ label: "Color Saturation Range",
+ type: "select",
+ default: "medium",
+ category: "Style",
+ description:
+ "Controls the saturation gradient used to shade child rectangles within a parent.",
+ options: [
+ { label: "Low", value: "low" },
+ { label: "Medium", value: "medium" },
+ { label: "High", value: "high" },
+ ],
+ },
+];