@jini-ai/ui 0.4.9 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/features/charts/browser.d.ts +39 -0
- package/dist/features/charts/browser.js +142 -0
- package/dist/features/charts/contract.d.ts +223 -0
- package/dist/features/charts/contract.js +21 -0
- package/dist/features/charts/index.d.ts +5 -0
- package/dist/features/charts/index.js +5 -0
- package/dist/features/charts/react.d.ts +27 -0
- package/dist/features/charts/react.js +73 -0
- package/dist/features/charts/registry.d.ts +35 -0
- package/dist/features/charts/registry.js +36 -0
- package/dist/features/charts/table.d.ts +14 -0
- package/dist/features/charts/table.js +60 -0
- package/dist/features/charts/wire.d.ts +88 -0
- package/dist/features/charts/wire.js +38 -0
- package/dist/features/interactive-ui/index.d.ts +3 -18
- package/dist/features/interactive-ui/index.js +12 -6
- package/dist/features/interactive-ui/interactive-ui.css +1 -1
- package/dist/features/interactive-ui/manifests.d.ts +3 -3
- package/dist/features/interactive-ui/manifests.js +6 -6
- package/dist/features/interactive-ui/registry.d.ts +12 -10
- package/dist/features/interactive-ui/registry.js +8 -6
- package/dist/styles/variables.css +1 -1
- package/package.json +24 -11
- package/dist/features/interactive-ui/providers/recharts/bar-chart.d.ts +0 -8
- package/dist/features/interactive-ui/providers/recharts/bar-chart.js +0 -12
- package/dist/features/interactive-ui/providers/recharts/bar-chart.manifest.d.ts +0 -21
- package/dist/features/interactive-ui/providers/recharts/bar-chart.manifest.js +0 -18
- package/dist/features/interactive-ui/providers/recharts/chart-config.d.ts +0 -40
- package/dist/features/interactive-ui/providers/recharts/chart-config.js +0 -32
- package/dist/features/interactive-ui/providers/recharts/chart-tokens.d.ts +0 -49
- package/dist/features/interactive-ui/providers/recharts/chart-tokens.js +0 -39
- package/dist/features/interactive-ui/providers/recharts/chart.d.ts +0 -31
- package/dist/features/interactive-ui/providers/recharts/chart.js +0 -34
- package/dist/features/interactive-ui/providers/recharts/index.d.ts +0 -7
- package/dist/features/interactive-ui/providers/recharts/index.js +0 -7
- package/dist/features/interactive-ui/providers/recharts/line-chart.d.ts +0 -8
- package/dist/features/interactive-ui/providers/recharts/line-chart.js +0 -14
- package/dist/features/interactive-ui/providers/recharts/line-chart.manifest.d.ts +0 -20
- package/dist/features/interactive-ui/providers/recharts/line-chart.manifest.js +0 -17
- package/dist/features/interactive-ui/providers/recharts/pie-chart.d.ts +0 -10
- package/dist/features/interactive-ui/providers/recharts/pie-chart.js +0 -12
- package/dist/features/interactive-ui/providers/recharts/pie-chart.manifest.d.ts +0 -41
- package/dist/features/interactive-ui/providers/recharts/pie-chart.manifest.js +0 -15
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Bar, BarChart as RechartsBarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
|
|
3
|
-
import { CHART_AXIS_PROPS, CHART_CURSOR, CHART_GRID_STROKE, CHART_PRIMARY_COLOR } from './chart-tokens.js';
|
|
4
|
-
import { chartTickFormatter, createChartConfig } from './chart-config.js';
|
|
5
|
-
import { ChartContainer, ChartTooltipContent } from './chart.js';
|
|
6
|
-
export function BarChart({ data, categoryKey, valueKey, color = CHART_PRIMARY_COLOR }) {
|
|
7
|
-
const config = createChartConfig({ series: [{ key: valueKey, label: valueKey }] }, { color });
|
|
8
|
-
const title = `${valueKey} by ${categoryKey}`;
|
|
9
|
-
const description = `Bar chart with ${data.length} categories. Use arrow keys to explore values.`;
|
|
10
|
-
return (_jsx(ChartContainer, { config: config, title: title, description: description, children: _jsxs(RechartsBarChart, { data: data, accessibilityLayer: true, title: title, desc: description, margin: { top: 16, right: 12, bottom: 8, left: 0 }, barCategoryGap: "24%", children: [_jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: CHART_GRID_STROKE, strokeOpacity: 0.6, vertical: false }), _jsx(XAxis, { dataKey: categoryKey, interval: "preserveStartEnd", minTickGap: 8, ...CHART_AXIS_PROPS }), _jsx(YAxis, { ...CHART_AXIS_PROPS, tickFormatter: chartTickFormatter, width: 48 }), _jsx(Tooltip, { cursor: CHART_CURSOR, content: _jsx(ChartTooltipContent, {}), isAnimationActive: false }), _jsx(Bar, { dataKey: valueKey, fill: config[valueKey].color, radius: [6, 6, 0, 0], maxBarSize: 40, isAnimationActive: false })] }) }));
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=bar-chart.js.map
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import type { InteractiveComponentManifest } from '../../types.js';
|
|
3
|
-
/** Same `.passthrough()`/`z.record` reasoning as `data-table.manifest.ts` — rows are arbitrary agent data. */
|
|
4
|
-
export declare const rechartsBarChartPropsSchema: z.ZodObject<{
|
|
5
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
6
|
-
categoryKey: z.ZodString;
|
|
7
|
-
valueKey: z.ZodString;
|
|
8
|
-
color: z.ZodOptional<z.ZodString>;
|
|
9
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
10
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
11
|
-
categoryKey: z.ZodString;
|
|
12
|
-
valueKey: z.ZodString;
|
|
13
|
-
color: z.ZodOptional<z.ZodString>;
|
|
14
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
15
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
16
|
-
categoryKey: z.ZodString;
|
|
17
|
-
valueKey: z.ZodString;
|
|
18
|
-
color: z.ZodOptional<z.ZodString>;
|
|
19
|
-
}, z.ZodTypeAny, "passthrough">>;
|
|
20
|
-
export declare const rechartsBarChartManifest: InteractiveComponentManifest;
|
|
21
|
-
//# sourceMappingURL=bar-chart.manifest.d.ts.map
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
/** Same `.passthrough()`/`z.record` reasoning as `data-table.manifest.ts` — rows are arbitrary agent data. */
|
|
3
|
-
export const rechartsBarChartPropsSchema = z
|
|
4
|
-
.object({
|
|
5
|
-
data: z.array(z.record(z.unknown())).min(1),
|
|
6
|
-
categoryKey: z.string(),
|
|
7
|
-
valueKey: z.string(),
|
|
8
|
-
color: z.string().optional(),
|
|
9
|
-
})
|
|
10
|
-
.passthrough();
|
|
11
|
-
export const rechartsBarChartManifest = {
|
|
12
|
-
id: 'recharts.bar-chart',
|
|
13
|
-
provider: 'recharts',
|
|
14
|
-
capabilities: ['chart', 'bar-chart', 'graph'],
|
|
15
|
-
propsSchema: rechartsBarChartPropsSchema,
|
|
16
|
-
description: 'recharts BarChart (real npm dependency): one categorical axis, one numeric value per bar.',
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=bar-chart.manifest.js.map
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
export interface ChartSeries {
|
|
2
|
-
readonly label: string;
|
|
3
|
-
readonly color: string;
|
|
4
|
-
readonly value?: number;
|
|
5
|
-
}
|
|
6
|
-
/** Provider-local configuration shared by marks, tooltip swatches and the legend. */
|
|
7
|
-
export type ChartConfig = Readonly<Record<string, ChartSeries>>;
|
|
8
|
-
interface SeriesInput {
|
|
9
|
-
readonly key: string;
|
|
10
|
-
readonly label: string;
|
|
11
|
-
readonly value?: number;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Assign the existing CSS palette to named series without mutating agent data.
|
|
15
|
-
* @param input Series in display order, with stable keys independent of display labels.
|
|
16
|
-
* @param options Optional legacy color override, applied to every series.
|
|
17
|
-
* @returns A config keyed by series identity, including duplicate display labels.
|
|
18
|
-
* @complexity O(n) time and space for n series; no I/O.
|
|
19
|
-
*/
|
|
20
|
-
export declare function createChartConfig({ series }: {
|
|
21
|
-
readonly series: readonly SeriesInput[];
|
|
22
|
-
}, { color }?: {
|
|
23
|
-
readonly color?: string | undefined;
|
|
24
|
-
}): ChartConfig;
|
|
25
|
-
/**
|
|
26
|
-
* Format chart numbers with Intl; preserve categorical strings without numeric coercion.
|
|
27
|
-
* @param input The value supplied by an axis, tooltip, legend or donut total.
|
|
28
|
-
* @param options Compact notation for ticks/totals, standard notation for exact values.
|
|
29
|
-
* @returns Display text, or an empty string for a missing value.
|
|
30
|
-
* @complexity O(k) time and space for k characters in the formatted value; no I/O.
|
|
31
|
-
*/
|
|
32
|
-
export declare function formatChartValue({ value }: {
|
|
33
|
-
readonly value: unknown;
|
|
34
|
-
}, { notation }?: {
|
|
35
|
-
readonly notation?: 'standard' | 'compact';
|
|
36
|
-
}): string;
|
|
37
|
-
/** Recharts callback convention is positional; all formatting delegates to the shared owner. */
|
|
38
|
-
export declare const chartTickFormatter: (value: unknown) => string;
|
|
39
|
-
export {};
|
|
40
|
-
//# sourceMappingURL=chart-config.d.ts.map
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { CHART_SERIES_COLORS } from './chart-tokens.js';
|
|
2
|
-
/**
|
|
3
|
-
* Assign the existing CSS palette to named series without mutating agent data.
|
|
4
|
-
* @param input Series in display order, with stable keys independent of display labels.
|
|
5
|
-
* @param options Optional legacy color override, applied to every series.
|
|
6
|
-
* @returns A config keyed by series identity, including duplicate display labels.
|
|
7
|
-
* @complexity O(n) time and space for n series; no I/O.
|
|
8
|
-
*/
|
|
9
|
-
export function createChartConfig({ series }, { color } = {}) {
|
|
10
|
-
return Object.fromEntries(series.map((entry, index) => [entry.key, {
|
|
11
|
-
label: entry.label,
|
|
12
|
-
color: color ?? CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length],
|
|
13
|
-
...(entry.value === undefined ? {} : { value: entry.value }),
|
|
14
|
-
}]));
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Format chart numbers with Intl; preserve categorical strings without numeric coercion.
|
|
18
|
-
* @param input The value supplied by an axis, tooltip, legend or donut total.
|
|
19
|
-
* @param options Compact notation for ticks/totals, standard notation for exact values.
|
|
20
|
-
* @returns Display text, or an empty string for a missing value.
|
|
21
|
-
* @complexity O(k) time and space for k characters in the formatted value; no I/O.
|
|
22
|
-
*/
|
|
23
|
-
export function formatChartValue({ value }, { notation = 'standard' } = {}) {
|
|
24
|
-
if (value == null)
|
|
25
|
-
return '';
|
|
26
|
-
if (typeof value !== 'number')
|
|
27
|
-
return String(value);
|
|
28
|
-
return new Intl.NumberFormat('en-US', { notation, maximumFractionDigits: notation === 'compact' ? 1 : 20 }).format(value);
|
|
29
|
-
}
|
|
30
|
-
/** Recharts callback convention is positional; all formatting delegates to the shared owner. */
|
|
31
|
-
export const chartTickFormatter = (value) => formatChartValue({ value }, { notation: 'compact' });
|
|
32
|
-
//# sourceMappingURL=chart-config.js.map
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @module chart-tokens
|
|
3
|
-
*
|
|
4
|
-
* The CSS variables every recharts provider paints with — the host's theme owns the colors.
|
|
5
|
-
*
|
|
6
|
-
* Why `--jini-chart-*` with fallbacks rather than bare `--jini-primary`: a host that styles its own
|
|
7
|
-
* chrome and never maps Jini's base tokens (an adopting admin shell) got Jini's near-black default bars, in
|
|
8
|
-
* dark mode too ("the color is ugly", demo V3, 2026-10-05). A host sets `--jini-chart-1`..`-6`,
|
|
9
|
-
* `--jini-chart-grid`, `--jini-chart-axis`, `--jini-chart-cursor`, `--jini-chart-surface` and
|
|
10
|
-
* `--jini-chart-text` in its own CSS; a host that sets none keeps the base-token look for the
|
|
11
|
-
* neutral tokens.
|
|
12
|
-
*
|
|
13
|
-
* Series colors fall back to Jini's default palette (`--jini-chart-default-1`..`-6`, warm orange
|
|
14
|
-
* first, light + dark, in `styles/variables.css`), not to `--jini-primary` and the status tokens:
|
|
15
|
-
* "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
|
|
16
|
-
* here, so a host's theme stays the single owner of color.
|
|
17
|
-
*/
|
|
18
|
-
/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
|
|
19
|
-
export declare const CHART_SERIES_COLORS: readonly ["var(--jini-chart-1, var(--jini-chart-default-1))", "var(--jini-chart-2, var(--jini-chart-default-2))", "var(--jini-chart-3, var(--jini-chart-default-3))", "var(--jini-chart-4, var(--jini-chart-default-4))", "var(--jini-chart-5, var(--jini-chart-default-5))", "var(--jini-chart-6, var(--jini-chart-default-6))"];
|
|
20
|
-
/** The single-series color (bar fill, line stroke). */
|
|
21
|
-
export declare const CHART_PRIMARY_COLOR: "var(--jini-chart-1, var(--jini-chart-default-1))";
|
|
22
|
-
/** Grid lines and axis lines: recessive. */
|
|
23
|
-
export declare const CHART_GRID_STROKE = "var(--jini-chart-grid, var(--jini-border))";
|
|
24
|
-
/** Axis tick label props: muted ink, never the series color. */
|
|
25
|
-
export declare const CHART_AXIS_TICK: {
|
|
26
|
-
readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
|
|
27
|
-
readonly fontSize: 12;
|
|
28
|
-
};
|
|
29
|
-
/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
|
|
30
|
-
export declare const CHART_AXIS_PROPS: {
|
|
31
|
-
readonly tick: {
|
|
32
|
-
readonly fill: "var(--jini-chart-axis, var(--jini-muted))";
|
|
33
|
-
readonly fontSize: 12;
|
|
34
|
-
};
|
|
35
|
-
readonly tickLine: false;
|
|
36
|
-
readonly axisLine: false;
|
|
37
|
-
readonly tickMargin: 10;
|
|
38
|
-
};
|
|
39
|
-
/** Hover points use the same series ink, with a surface halo in either color scheme. */
|
|
40
|
-
export declare const CHART_ACTIVE_DOT: {
|
|
41
|
-
readonly r: 5;
|
|
42
|
-
readonly stroke: "var(--jini-chart-surface, var(--jini-bg))";
|
|
43
|
-
readonly strokeWidth: 2;
|
|
44
|
-
};
|
|
45
|
-
/** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
|
|
46
|
-
export declare const CHART_CURSOR: {
|
|
47
|
-
readonly fill: "var(--jini-chart-cursor, var(--jini-accent-soft))";
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=chart-tokens.d.ts.map
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @module chart-tokens
|
|
3
|
-
*
|
|
4
|
-
* The CSS variables every recharts provider paints with — the host's theme owns the colors.
|
|
5
|
-
*
|
|
6
|
-
* Why `--jini-chart-*` with fallbacks rather than bare `--jini-primary`: a host that styles its own
|
|
7
|
-
* chrome and never maps Jini's base tokens (an adopting admin shell) got Jini's near-black default bars, in
|
|
8
|
-
* dark mode too ("the color is ugly", demo V3, 2026-10-05). A host sets `--jini-chart-1`..`-6`,
|
|
9
|
-
* `--jini-chart-grid`, `--jini-chart-axis`, `--jini-chart-cursor`, `--jini-chart-surface` and
|
|
10
|
-
* `--jini-chart-text` in its own CSS; a host that sets none keeps the base-token look for the
|
|
11
|
-
* neutral tokens.
|
|
12
|
-
*
|
|
13
|
-
* Series colors fall back to Jini's default palette (`--jini-chart-default-1`..`-6`, warm orange
|
|
14
|
-
* first, light + dark, in `styles/variables.css`), not to `--jini-primary` and the status tokens:
|
|
15
|
-
* "Claude orange should be the default color" (owner, 2026-10-05). The values live in CSS, never
|
|
16
|
-
* here, so a host's theme stays the single owner of color.
|
|
17
|
-
*/
|
|
18
|
-
/** Categorical series colors in fixed order; larger datasets repeat the palette with named legends. */
|
|
19
|
-
export const CHART_SERIES_COLORS = [
|
|
20
|
-
'var(--jini-chart-1, var(--jini-chart-default-1))',
|
|
21
|
-
'var(--jini-chart-2, var(--jini-chart-default-2))',
|
|
22
|
-
'var(--jini-chart-3, var(--jini-chart-default-3))',
|
|
23
|
-
'var(--jini-chart-4, var(--jini-chart-default-4))',
|
|
24
|
-
'var(--jini-chart-5, var(--jini-chart-default-5))',
|
|
25
|
-
'var(--jini-chart-6, var(--jini-chart-default-6))',
|
|
26
|
-
];
|
|
27
|
-
/** The single-series color (bar fill, line stroke). */
|
|
28
|
-
export const CHART_PRIMARY_COLOR = CHART_SERIES_COLORS[0];
|
|
29
|
-
/** Grid lines and axis lines: recessive. */
|
|
30
|
-
export const CHART_GRID_STROKE = 'var(--jini-chart-grid, var(--jini-border))';
|
|
31
|
-
/** Axis tick label props: muted ink, never the series color. */
|
|
32
|
-
export const CHART_AXIS_TICK = { fill: 'var(--jini-chart-axis, var(--jini-muted))', fontSize: 12 };
|
|
33
|
-
/** Shared axis chrome; category visibility and numeric formatting remain separate concerns. */
|
|
34
|
-
export const CHART_AXIS_PROPS = { tick: CHART_AXIS_TICK, tickLine: false, axisLine: false, tickMargin: 10 };
|
|
35
|
-
/** Hover points use the same series ink, with a surface halo in either color scheme. */
|
|
36
|
-
export const CHART_ACTIVE_DOT = { r: 5, stroke: 'var(--jini-chart-surface, var(--jini-bg))', strokeWidth: 2 };
|
|
37
|
-
/** The hover band behind a hovered bar (recharts' default is an opaque grey block). */
|
|
38
|
-
export const CHART_CURSOR = { fill: 'var(--jini-chart-cursor, var(--jini-accent-soft))' };
|
|
39
|
-
//# sourceMappingURL=chart-tokens.js.map
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import { type ReactElement, type ReactNode } from 'react';
|
|
2
|
-
import { type ChartConfig } from './chart-config.js';
|
|
3
|
-
interface ChartContainerProps {
|
|
4
|
-
readonly config: ChartConfig;
|
|
5
|
-
readonly title: string;
|
|
6
|
-
readonly description: string;
|
|
7
|
-
readonly children: ReactElement;
|
|
8
|
-
}
|
|
9
|
-
/** Shared, measurable chart frame with an accessible caption and a wrapping legend. */
|
|
10
|
-
export declare function ChartContainer({ config, title, description, children }: ChartContainerProps): ReactElement;
|
|
11
|
-
interface ChartTooltipEntry {
|
|
12
|
-
readonly dataKey?: unknown;
|
|
13
|
-
readonly name?: string | number;
|
|
14
|
-
readonly value?: unknown;
|
|
15
|
-
readonly color?: string;
|
|
16
|
-
readonly type?: string;
|
|
17
|
-
readonly payload?: {
|
|
18
|
-
readonly _jiniChartKey?: string;
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
interface ChartTooltipContentProps {
|
|
22
|
-
readonly active?: boolean;
|
|
23
|
-
readonly label?: ReactNode;
|
|
24
|
-
readonly payload?: readonly ChartTooltipEntry[];
|
|
25
|
-
}
|
|
26
|
-
/** Shadcn-style tooltip card; series config owns both labels and swatch colors. */
|
|
27
|
-
export declare function ChartTooltipContent({ active, label, payload }: ChartTooltipContentProps): ReactElement | null;
|
|
28
|
-
/** Compact named legend; pie values remain readable without hover or outside labels. */
|
|
29
|
-
export declare function ChartLegendContent(): ReactElement | null;
|
|
30
|
-
export {};
|
|
31
|
-
//# sourceMappingURL=chart.d.ts.map
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { createContext, useContext, useId } from 'react';
|
|
3
|
-
import { ResponsiveContainer } from 'recharts';
|
|
4
|
-
import { formatChartValue } from './chart-config.js';
|
|
5
|
-
import { CHART_PRIMARY_COLOR } from './chart-tokens.js';
|
|
6
|
-
const ChartContext = createContext({});
|
|
7
|
-
/** Shared, measurable chart frame with an accessible caption and a wrapping legend. */
|
|
8
|
-
export function ChartContainer({ config, title, description, children }) {
|
|
9
|
-
const id = useId();
|
|
10
|
-
return (_jsx(ChartContext.Provider, { value: config, children: _jsxs("figure", { className: "jini-chart", "aria-label": title, "aria-describedby": `${id}-description`, children: [_jsxs("figcaption", { className: "jini-chart-caption", children: [_jsx("span", { children: title }), _jsx("span", { id: `${id}-description`, children: description })] }), _jsx(ResponsiveContainer, { width: "100%", height: 300, minWidth: 0, children: children }), _jsx(ChartLegendContent, {})] }) }));
|
|
11
|
-
}
|
|
12
|
-
/** Shadcn-style tooltip card; series config owns both labels and swatch colors. */
|
|
13
|
-
export function ChartTooltipContent({ active, label, payload = [] }) {
|
|
14
|
-
const config = useContext(ChartContext);
|
|
15
|
-
const entries = payload.filter((entry) => entry.type !== 'none' && entry.value != null);
|
|
16
|
-
if (!active || entries.length === 0)
|
|
17
|
-
return null;
|
|
18
|
-
return (_jsxs("div", { className: "jini-chart-tooltip", role: "tooltip", "aria-live": "polite", "aria-atomic": "true", children: [label != null && _jsx("div", { className: "jini-chart-tooltip-label", children: label }), _jsx("div", { className: "jini-chart-tooltip-items", children: entries.map((entry, index) => {
|
|
19
|
-
// Pie names may repeat; its internal key keeps swatches tied to the actual slice.
|
|
20
|
-
const dataKey = String(entry.dataKey ?? entry.name);
|
|
21
|
-
const key = Object.hasOwn(config, dataKey) ? dataKey : entry.payload?._jiniChartKey ?? dataKey;
|
|
22
|
-
const series = Object.hasOwn(config, key) ? config[key] : undefined;
|
|
23
|
-
return (_jsxs("div", { className: "jini-chart-tooltip-item", children: [_jsx("span", { className: "jini-chart-swatch", style: { backgroundColor: series?.color ?? entry.color ?? CHART_PRIMARY_COLOR }, "aria-hidden": "true" }), _jsx("span", { className: "jini-chart-tooltip-name", children: series?.label ?? String(entry.name ?? entry.dataKey ?? 'Value') }), _jsx("span", { className: "jini-chart-tooltip-value", children: formatChartValue({ value: entry.value }) })] }, `${key}-${index}`));
|
|
24
|
-
}) })] }));
|
|
25
|
-
}
|
|
26
|
-
/** Compact named legend; pie values remain readable without hover or outside labels. */
|
|
27
|
-
export function ChartLegendContent() {
|
|
28
|
-
const config = useContext(ChartContext);
|
|
29
|
-
const entries = Object.entries(config);
|
|
30
|
-
if (entries.length === 0)
|
|
31
|
-
return null;
|
|
32
|
-
return (_jsx("ul", { className: "jini-chart-legend", "aria-label": "Chart legend", children: entries.map(([key, series]) => (_jsxs("li", { className: "jini-chart-legend-item", children: [_jsx("span", { className: "jini-chart-swatch", style: { backgroundColor: series.color }, "aria-hidden": "true" }), _jsx("span", { children: series.label }), series.value !== undefined && _jsx("span", { className: "jini-chart-legend-value", children: formatChartValue({ value: series.value }) })] }, key))) }));
|
|
33
|
-
}
|
|
34
|
-
//# sourceMappingURL=chart.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { rechartsBarChartManifest, rechartsBarChartPropsSchema } from './bar-chart.manifest.js';
|
|
2
|
-
export { BarChart, type BarChartProps } from './bar-chart.js';
|
|
3
|
-
export { rechartsLineChartManifest, rechartsLineChartPropsSchema } from './line-chart.manifest.js';
|
|
4
|
-
export { LineChart, type LineChartProps } from './line-chart.js';
|
|
5
|
-
export { rechartsPieChartManifest, rechartsPieChartPropsSchema } from './pie-chart.manifest.js';
|
|
6
|
-
export { PieChart, type PieChartProps, type PieDatum } from './pie-chart.js';
|
|
7
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
export { rechartsBarChartManifest, rechartsBarChartPropsSchema } from './bar-chart.manifest.js';
|
|
2
|
-
export { BarChart } from './bar-chart.js';
|
|
3
|
-
export { rechartsLineChartManifest, rechartsLineChartPropsSchema } from './line-chart.manifest.js';
|
|
4
|
-
export { LineChart } from './line-chart.js';
|
|
5
|
-
export { rechartsPieChartManifest, rechartsPieChartPropsSchema } from './pie-chart.manifest.js';
|
|
6
|
-
export { PieChart } from './pie-chart.js';
|
|
7
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
export interface LineChartProps {
|
|
2
|
-
readonly data: readonly Record<string, unknown>[];
|
|
3
|
-
readonly categoryKey: string;
|
|
4
|
-
readonly valueKey: string;
|
|
5
|
-
readonly color?: string;
|
|
6
|
-
}
|
|
7
|
-
export declare function LineChart({ data, categoryKey, valueKey, color }: LineChartProps): import("react").JSX.Element;
|
|
8
|
-
//# sourceMappingURL=line-chart.d.ts.map
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useId } from 'react';
|
|
3
|
-
import { Area, CartesianGrid, ComposedChart, Line, Tooltip, XAxis, YAxis } from 'recharts';
|
|
4
|
-
import { CHART_ACTIVE_DOT, CHART_AXIS_PROPS, CHART_GRID_STROKE, CHART_PRIMARY_COLOR } from './chart-tokens.js';
|
|
5
|
-
import { chartTickFormatter, createChartConfig } from './chart-config.js';
|
|
6
|
-
import { ChartContainer, ChartTooltipContent } from './chart.js';
|
|
7
|
-
export function LineChart({ data, categoryKey, valueKey, color = CHART_PRIMARY_COLOR }) {
|
|
8
|
-
const gradientId = `jini-chart-area-${useId().replace(/:/g, '')}`;
|
|
9
|
-
const config = createChartConfig({ series: [{ key: valueKey, label: valueKey }] }, { color });
|
|
10
|
-
const title = `${valueKey} by ${categoryKey}`;
|
|
11
|
-
const description = `Line chart with ${data.length} points. Use arrow keys to explore values.`;
|
|
12
|
-
return (_jsx(ChartContainer, { config: config, title: title, description: description, children: _jsxs(ComposedChart, { data: data, accessibilityLayer: true, title: title, desc: description, margin: { top: 16, right: 12, bottom: 8, left: 0 }, children: [_jsx("defs", { children: _jsxs("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: config[valueKey].color, stopOpacity: 0.22 }), _jsx("stop", { offset: "100%", stopColor: config[valueKey].color, stopOpacity: 0.02 })] }) }), _jsx(CartesianGrid, { strokeDasharray: "3 3", stroke: CHART_GRID_STROKE, strokeOpacity: 0.6, vertical: false }), _jsx(XAxis, { dataKey: categoryKey, interval: "preserveStartEnd", minTickGap: 8, ...CHART_AXIS_PROPS }), _jsx(YAxis, { ...CHART_AXIS_PROPS, tickFormatter: chartTickFormatter, width: 48 }), _jsx(Tooltip, { cursor: { stroke: CHART_GRID_STROKE, strokeDasharray: '3 3' }, content: _jsx(ChartTooltipContent, {}), payloadUniqBy: (entry) => entry.graphicalItemId, isAnimationActive: false }), _jsx(Area, { type: "monotone", dataKey: valueKey, stroke: "none", fill: `url(#${gradientId})`, tooltipType: "none", legendType: "none", activeDot: false, isAnimationActive: false }), _jsx(Line, { type: "monotone", dataKey: valueKey, stroke: config[valueKey].color, strokeWidth: 2.5, dot: false, activeDot: CHART_ACTIVE_DOT, isAnimationActive: false })] }) }));
|
|
13
|
-
}
|
|
14
|
-
//# sourceMappingURL=line-chart.js.map
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import type { InteractiveComponentManifest } from '../../types.js';
|
|
3
|
-
export declare const rechartsLineChartPropsSchema: z.ZodObject<{
|
|
4
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
5
|
-
categoryKey: z.ZodString;
|
|
6
|
-
valueKey: z.ZodString;
|
|
7
|
-
color: z.ZodOptional<z.ZodString>;
|
|
8
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
9
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
10
|
-
categoryKey: z.ZodString;
|
|
11
|
-
valueKey: z.ZodString;
|
|
12
|
-
color: z.ZodOptional<z.ZodString>;
|
|
13
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
14
|
-
data: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
|
|
15
|
-
categoryKey: z.ZodString;
|
|
16
|
-
valueKey: z.ZodString;
|
|
17
|
-
color: z.ZodOptional<z.ZodString>;
|
|
18
|
-
}, z.ZodTypeAny, "passthrough">>;
|
|
19
|
-
export declare const rechartsLineChartManifest: InteractiveComponentManifest;
|
|
20
|
-
//# sourceMappingURL=line-chart.manifest.d.ts.map
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
export const rechartsLineChartPropsSchema = z
|
|
3
|
-
.object({
|
|
4
|
-
data: z.array(z.record(z.unknown())).min(1),
|
|
5
|
-
categoryKey: z.string(),
|
|
6
|
-
valueKey: z.string(),
|
|
7
|
-
color: z.string().optional(),
|
|
8
|
-
})
|
|
9
|
-
.passthrough();
|
|
10
|
-
export const rechartsLineChartManifest = {
|
|
11
|
-
id: 'recharts.line-chart',
|
|
12
|
-
provider: 'recharts',
|
|
13
|
-
capabilities: ['chart', 'line-chart', 'graph'],
|
|
14
|
-
propsSchema: rechartsLineChartPropsSchema,
|
|
15
|
-
description: 'recharts LineChart (real npm dependency): one categorical axis, one numeric value per point.',
|
|
16
|
-
};
|
|
17
|
-
//# sourceMappingURL=line-chart.manifest.js.map
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export interface PieDatum {
|
|
2
|
-
readonly name: string;
|
|
3
|
-
readonly value: number;
|
|
4
|
-
}
|
|
5
|
-
export interface PieChartProps {
|
|
6
|
-
readonly data: readonly PieDatum[];
|
|
7
|
-
readonly color?: string;
|
|
8
|
-
}
|
|
9
|
-
export declare function PieChart({ data, color }: PieChartProps): import("react").JSX.Element;
|
|
10
|
-
//# sourceMappingURL=pie-chart.d.ts.map
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Cell, Pie, PieChart as RechartsPieChart, Tooltip } from 'recharts';
|
|
3
|
-
import { createChartConfig, formatChartValue } from './chart-config.js';
|
|
4
|
-
import { ChartContainer, ChartTooltipContent } from './chart.js';
|
|
5
|
-
export function PieChart({ data, color }) {
|
|
6
|
-
const slices = data.map((entry, index) => ({ ...entry, _jiniChartKey: `slice-${index}` }));
|
|
7
|
-
const config = createChartConfig({ series: slices.map((entry) => ({ key: entry._jiniChartKey, label: entry.name, value: entry.value })) }, { color });
|
|
8
|
-
const total = data.reduce((sum, entry) => sum + entry.value, 0);
|
|
9
|
-
const description = `Donut chart with ${data.length} categories. Total: ${formatChartValue({ value: total })}. Values are listed in the legend.`;
|
|
10
|
-
return (_jsx(ChartContainer, { config: config, title: "Distribution", description: description, children: _jsxs(RechartsPieChart, { accessibilityLayer: true, title: "Distribution", desc: description, margin: { top: 12, right: 12, bottom: 12, left: 12 }, children: [_jsx(Tooltip, { content: _jsx(ChartTooltipContent, {}), isAnimationActive: false }), _jsx(Pie, { data: slices, dataKey: "value", nameKey: "name", cx: "50%", cy: "50%", innerRadius: "55%", outerRadius: "78%", paddingAngle: 3, cornerRadius: 5, stroke: "none", label: false, labelLine: false, isAnimationActive: false, children: slices.map((entry) => (_jsx(Cell, { fill: config[entry._jiniChartKey].color }, entry._jiniChartKey))) }), _jsxs("text", { x: "50%", y: "50%", textAnchor: "middle", dominantBaseline: "middle", className: "jini-chart-total", "aria-hidden": "true", children: [_jsx("tspan", { x: "50%", dy: "-0.2em", children: formatChartValue({ value: total }, { notation: 'compact' }) }), _jsx("tspan", { x: "50%", dy: "1.8em", className: "jini-chart-total-label", children: "Total" })] })] }) }));
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=pie-chart.js.map
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import type { InteractiveComponentManifest } from '../../types.js';
|
|
3
|
-
export declare const rechartsPieChartPropsSchema: z.ZodObject<{
|
|
4
|
-
data: z.ZodArray<z.ZodObject<{
|
|
5
|
-
name: z.ZodString;
|
|
6
|
-
value: z.ZodNumber;
|
|
7
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
8
|
-
name: z.ZodString;
|
|
9
|
-
value: z.ZodNumber;
|
|
10
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
11
|
-
name: z.ZodString;
|
|
12
|
-
value: z.ZodNumber;
|
|
13
|
-
}, z.ZodTypeAny, "passthrough">>, "many">;
|
|
14
|
-
color: z.ZodOptional<z.ZodString>;
|
|
15
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
16
|
-
data: z.ZodArray<z.ZodObject<{
|
|
17
|
-
name: z.ZodString;
|
|
18
|
-
value: z.ZodNumber;
|
|
19
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
20
|
-
name: z.ZodString;
|
|
21
|
-
value: z.ZodNumber;
|
|
22
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
23
|
-
name: z.ZodString;
|
|
24
|
-
value: z.ZodNumber;
|
|
25
|
-
}, z.ZodTypeAny, "passthrough">>, "many">;
|
|
26
|
-
color: z.ZodOptional<z.ZodString>;
|
|
27
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
28
|
-
data: z.ZodArray<z.ZodObject<{
|
|
29
|
-
name: z.ZodString;
|
|
30
|
-
value: z.ZodNumber;
|
|
31
|
-
}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
|
|
32
|
-
name: z.ZodString;
|
|
33
|
-
value: z.ZodNumber;
|
|
34
|
-
}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
|
|
35
|
-
name: z.ZodString;
|
|
36
|
-
value: z.ZodNumber;
|
|
37
|
-
}, z.ZodTypeAny, "passthrough">>, "many">;
|
|
38
|
-
color: z.ZodOptional<z.ZodString>;
|
|
39
|
-
}, z.ZodTypeAny, "passthrough">>;
|
|
40
|
-
export declare const rechartsPieChartManifest: InteractiveComponentManifest;
|
|
41
|
-
//# sourceMappingURL=pie-chart.manifest.d.ts.map
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
export const rechartsPieChartPropsSchema = z
|
|
3
|
-
.object({
|
|
4
|
-
data: z.array(z.object({ name: z.string(), value: z.number() }).passthrough()).min(1),
|
|
5
|
-
color: z.string().optional(),
|
|
6
|
-
})
|
|
7
|
-
.passthrough();
|
|
8
|
-
export const rechartsPieChartManifest = {
|
|
9
|
-
id: 'recharts.pie-chart',
|
|
10
|
-
provider: 'recharts',
|
|
11
|
-
capabilities: ['chart', 'pie-chart', 'graph'],
|
|
12
|
-
propsSchema: rechartsPieChartPropsSchema,
|
|
13
|
-
description: 'recharts PieChart (real npm dependency): a set of named, weighted slices.',
|
|
14
|
-
};
|
|
15
|
-
//# sourceMappingURL=pie-chart.manifest.js.map
|