minerva-design 1.0.2 → 1.1.0

package/dist/charts/react/charts.js

@@ -0,0 +1,179 @@
+"use client";
+import { ChartBase as e, engineOptions as t } from "./Chart.js";
+import { useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/react/charts.tsx
+var i = (e, t, n) => e.map((e) => ({
+	...e,
+	type: e.type ?? t,
+	...n !== void 0 && (e.type ?? t) === "bar" ? { stack: e.stack ?? n } : {}
+})), a = (e) => ({
+	height: e.height,
+	width: e.width,
+	className: e.className,
+	style: e.style,
+	handleRef: e.ref,
+	onHover: e.onHover,
+	onPointClick: e.onPointClick,
+	onZoom: e.onZoom,
+	onRendererChange: e.onRendererChange
+});
+function o(o) {
+	let { series: s, area: c = !1 } = o, l = n(() => i(s, c ? "area" : "line"), [s, c]);
+	return /* @__PURE__ */ r(e, {
+		options: t({
+			...o,
+			series: l
+		}),
+		...a(o)
+	});
+}
+function s(o) {
+	let { series: s, stacked: c = !1 } = o, l = n(() => i(s, "bar", c ? "stack" : void 0), [s, c]);
+	return /* @__PURE__ */ r(e, {
+		options: t({
+			...o,
+			series: l
+		}),
+		...a(o)
+	});
+}
+function c(o) {
+	let { series: s } = o, c = n(() => i(s, "scatter"), [s]);
+	return /* @__PURE__ */ r(e, {
+		options: t({
+			...o,
+			series: c
+		}),
+		...a(o)
+	});
+}
+var l = {
+	topLeft: "var(--danger-color, #ef4444)",
+	topRight: "var(--primary-color, #4f46e5)",
+	bottomLeft: "var(--warning-color, #f59e0b)",
+	bottomRight: "var(--text-secondary-color, #64748b)"
+};
+function u(i) {
+	let { points: o, xDomain: s = [0, 10], yDomain: c = [0, 10], xSplit: u, ySplit: d, quadrants: f, xLabel: p, yLabel: m, reverseX: h = !1, showLabels: g = !0, pointSize: _ = 12, name: v, onPointClick: y } = i, [b, x] = s, [S, C] = c, w = u ?? (b + x) / 2, T = d ?? (S + C) / 2, E = n(() => {
+		let e = (e) => ({
+			...f?.[e],
+			color: f?.[e]?.color ?? l[e]
+		});
+		return {
+			topLeft: e("topLeft"),
+			topRight: e("topRight"),
+			bottomLeft: e("bottomLeft"),
+			bottomRight: e("bottomRight")
+		};
+	}, [f]), D = n(() => {
+		let e = (e, t) => {
+			let n = h ? e < w : e >= w;
+			return t >= T ? n ? "topRight" : "topLeft" : n ? "bottomRight" : "bottomLeft";
+		};
+		return [{
+			type: "scatter",
+			name: v ?? "",
+			pointSize: _,
+			showLabels: g,
+			opacity: .9,
+			data: o.map((t) => ({
+				x: t.x,
+				y: t.y,
+				label: t.label,
+				size: t.size,
+				color: t.color ?? E[e(t.x, t.y)].color
+			}))
+		}];
+	}, [
+		o,
+		E,
+		h,
+		w,
+		T,
+		v,
+		_,
+		g
+	]), O = n(() => {
+		let e = h ? [w, x] : [b, w], t = h ? [b, w] : [w, x], n = (e, [t, n], [r, i], a) => ({
+			type: "rect",
+			x0: t,
+			x1: n,
+			y0: r,
+			y1: i,
+			color: E[e].color,
+			opacity: .07,
+			label: E[e].label,
+			labelPosition: a
+		});
+		return [
+			n("topLeft", e, [T, C], "top-left"),
+			n("topRight", t, [T, C], "top-right"),
+			n("bottomLeft", e, [S, T], "bottom-left"),
+			n("bottomRight", t, [S, T], "bottom-right"),
+			{
+				type: "line",
+				axis: "x",
+				value: w,
+				dash: [],
+				color: "var(--border-strong-color, var(--border-color, #cbd5e1))"
+			},
+			{
+				type: "line",
+				axis: "y",
+				value: T,
+				dash: [],
+				color: "var(--border-strong-color, var(--border-color, #cbd5e1))"
+			},
+			...i.annotations ?? []
+		];
+	}, [
+		E,
+		h,
+		b,
+		x,
+		S,
+		C,
+		w,
+		T,
+		i.annotations
+	]), k = t({
+		...i,
+		series: D,
+		annotations: O,
+		xAxis: {
+			min: b,
+			max: x,
+			title: p,
+			reverse: h,
+			nice: !1,
+			grid: !1,
+			tickCount: 4
+		},
+		yAxis: {
+			min: S,
+			max: C,
+			title: m,
+			nice: !1,
+			grid: !1,
+			tickCount: 4
+		},
+		legend: i.legend ?? !1,
+		interaction: i.interaction ?? { zoom: !1 }
+	});
+	return /* @__PURE__ */ r(e, {
+		options: k,
+		...a({
+			...i,
+			onPointClick: void 0
+		}),
+		onPointClick: y ? (e) => {
+			let t = e.items[0]?.index;
+			t !== void 0 && o[t] && y(o[t], t);
+		} : void 0
+	});
+}
+//#endregion
+export { s as BarChart, o as LineChart, u as QuadrantChart, c as ScatterChart };
+
+//# sourceMappingURL=charts.js.map

package/dist/charts/react/charts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.js","names":["withType","series","s","type","stack","frameProps","props","LineChart","input","useMemo","area","ChartBase","engineOptions","BarChart","stacked","ScatterChart","DEFAULT_QUADRANT_COLORS","QuadrantChart","x0","x1","xDomain","y0","y1","yDomain","xs","xSplit","ys","ySplit","regions","region","quadrants","corner","cornerOf","right","reverseX","x","y","name","points","p","pointSize","showLabels","annotations","left","rect","xa","xb","ya","yb","position","options","xLabel","yLabel","onPointClick","index","event"],"sources":["../../../../charts/src/react/charts.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport type {\n  ChartAnnotation,\n  ChartSeries,\n  ChartSeriesType,\n} from \"../engine/types\";\nimport { ChartBase, engineOptions } from \"./Chart\";\nimport type {\n  BarChartProps,\n  ChartCommonProps,\n  LineChartProps,\n  QuadrantChartProps,\n  QuadrantRegion,\n  ScatterChartProps,\n} from \"./types\";\n\nconst withType = (\n  series: readonly ChartSeries[],\n  type: ChartSeriesType,\n  stack?: string,\n): ChartSeries[] =>\n  series.map((s) => ({\n    ...s,\n    type: s.type ?? type,\n    ...(stack !== undefined && (s.type ?? type) === \"bar\"\n      ? { stack: s.stack ?? stack }\n      : {}),\n  }));\n\nconst frameProps = (props: ChartCommonProps) => ({\n  height: props.height,\n  width: props.width,\n  className: props.className,\n  style: props.style,\n  handleRef: props.ref,\n  onHover: props.onHover,\n  onPointClick: props.onPointClick,\n  onZoom: props.onZoom,\n  onRendererChange: props.onRendererChange,\n});\n\n/** Line (or area) chart; handles millions of points on the GPU */\nexport function LineChart(props: LineChartProps) {\n  const { series: input, area = false } = props;\n  const series = useMemo(\n    () => withType(input, area ? \"area\" : \"line\"),\n    [input, area],\n  );\n  return (\n    <ChartBase\n      options={engineOptions({ ...props, series })}\n      {...frameProps(props)}\n    />\n  );\n}\n\n/** Bar chart: grouped side by side, or stacked */\nexport function BarChart(props: BarChartProps) {\n  const { series: input, stacked = false } = props;\n  const series = useMemo(\n    () => withType(input, \"bar\", stacked ? \"stack\" : undefined),\n    [input, stacked],\n  );\n  return (\n    <ChartBase\n      options={engineOptions({ ...props, series })}\n      {...frameProps(props)}\n    />\n  );\n}\n\n/** Scatter chart: zooms on both axes, hit testing through a spatial index */\nexport function ScatterChart(props: ScatterChartProps) {\n  const { series: input } = props;\n  const series = useMemo(() => withType(input, \"scatter\"), [input]);\n  return (\n    <ChartBase\n      options={engineOptions({ ...props, series })}\n      {...frameProps(props)}\n    />\n  );\n}\n\nconst DEFAULT_QUADRANT_COLORS = {\n  topLeft: \"var(--danger-color, #ef4444)\",\n  topRight: \"var(--primary-color, #4f46e5)\",\n  bottomLeft: \"var(--warning-color, #f59e0b)\",\n  bottomRight: \"var(--text-secondary-color, #64748b)\",\n} as const;\n\ntype Corner = keyof typeof DEFAULT_QUADRANT_COLORS;\n\n/**\n * Four-quadrant matrix (priority matrix, Eisenhower, BCG, ...): tinted\n * quadrants with titles, dividers, and labelled dots placed without\n * overlapping labels.\n */\nexport function QuadrantChart(props: QuadrantChartProps) {\n  const {\n    points,\n    xDomain = [0, 10],\n    yDomain = [0, 10],\n    xSplit,\n    ySplit,\n    quadrants,\n    xLabel,\n    yLabel,\n    reverseX = false,\n    showLabels = true,\n    pointSize = 12,\n    name,\n    onPointClick,\n  } = props;\n  const [x0, x1] = xDomain;\n  const [y0, y1] = yDomain;\n  const xs = xSplit ?? (x0 + x1) / 2;\n  const ys = ySplit ?? (y0 + y1) / 2;\n\n  const regions = useMemo(() => {\n    const region = (\n      corner: Corner,\n    ): Required<Pick<QuadrantRegion, \"color\">> & QuadrantRegion => ({\n      ...quadrants?.[corner],\n      color: quadrants?.[corner]?.color ?? DEFAULT_QUADRANT_COLORS[corner],\n    });\n    return {\n      topLeft: region(\"topLeft\"),\n      topRight: region(\"topRight\"),\n      bottomLeft: region(\"bottomLeft\"),\n      bottomRight: region(\"bottomRight\"),\n    };\n  }, [quadrants]);\n\n  const series = useMemo((): ChartSeries[] => {\n    const cornerOf = (x: number, y: number): Corner => {\n      const right = reverseX ? x < xs : x >= xs;\n      const top = y >= ys;\n      return top\n        ? right\n          ? \"topRight\"\n          : \"topLeft\"\n        : right\n          ? \"bottomRight\"\n          : \"bottomLeft\";\n    };\n    return [\n      {\n        type: \"scatter\",\n        name: name ?? \"\",\n        pointSize,\n        showLabels,\n        opacity: 0.9,\n        data: points.map((p) => ({\n          x: p.x,\n          y: p.y,\n          label: p.label,\n          size: p.size,\n          color: p.color ?? regions[cornerOf(p.x, p.y)].color,\n        })),\n      },\n    ];\n  }, [points, regions, reverseX, xs, ys, name, pointSize, showLabels]);\n\n  const annotations = useMemo((): ChartAnnotation[] => {\n    // visual left / right -> data ranges\n    const left: [number, number] = reverseX ? [xs, x1] : [x0, xs];\n    const right: [number, number] = reverseX ? [x0, xs] : [xs, x1];\n    const rect = (\n      corner: Corner,\n      [xa, xb]: [number, number],\n      [ya, yb]: [number, number],\n      position: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\",\n    ): ChartAnnotation => ({\n      type: \"rect\",\n      x0: xa,\n      x1: xb,\n      y0: ya,\n      y1: yb,\n      color: regions[corner].color,\n      opacity: 0.07,\n      label: regions[corner].label,\n      labelPosition: position,\n    });\n    return [\n      rect(\"topLeft\", left, [ys, y1], \"top-left\"),\n      rect(\"topRight\", right, [ys, y1], \"top-right\"),\n      rect(\"bottomLeft\", left, [y0, ys], \"bottom-left\"),\n      rect(\"bottomRight\", right, [y0, ys], \"bottom-right\"),\n      {\n        type: \"line\",\n        axis: \"x\",\n        value: xs,\n        dash: [],\n        color: \"var(--border-strong-color, var(--border-color, #cbd5e1))\",\n      },\n      {\n        type: \"line\",\n        axis: \"y\",\n        value: ys,\n        dash: [],\n        color: \"var(--border-strong-color, var(--border-color, #cbd5e1))\",\n      },\n      ...(props.annotations ?? []),\n    ];\n  }, [regions, reverseX, x0, x1, y0, y1, xs, ys, props.annotations]);\n\n  const options = engineOptions({\n    ...props,\n    series,\n    annotations,\n    xAxis: {\n      min: x0,\n      max: x1,\n      title: xLabel,\n      reverse: reverseX,\n      nice: false,\n      grid: false,\n      tickCount: 4,\n    },\n    yAxis: {\n      min: y0,\n      max: y1,\n      title: yLabel,\n      nice: false,\n      grid: false,\n      tickCount: 4,\n    },\n    legend: props.legend ?? false,\n    interaction: props.interaction ?? { zoom: false },\n  });\n\n  return (\n    <ChartBase\n      options={options}\n      {...frameProps({ ...props, onPointClick: undefined })}\n      onPointClick={\n        onPointClick\n          ? (event) => {\n              const index = event.items[0]?.index;\n              if (index !== undefined && points[index])\n                onPointClick(points[index], index);\n            }\n          : undefined\n      }\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/charts/react/types.d.cts

@@ -0,0 +1,168 @@
+import { CSSProperties, Ref } from 'react';
+import { ChartAnnotation, ChartAxisOptions, ChartHoverEvent, ChartInstance, ChartLegendOptions, ChartInteractionOptions, ChartPadding, ChartRendererKind, ChartRendererPreference, ChartSeries, ChartTooltipOptions, ChartView } from '../engine/types.cjs';
+/** Imperative handle of the chart components (`ref`) */
+export interface ChartHandle {
+    /** Shows the whole data range */
+    resetZoom(): void;
+    /** Visible range */
+    getView(): ChartView | null;
+    /** Sets the visible range */
+    setView(view: Partial<ChartView>): void;
+    /** Backend in use, `null` until ready */
+    getRenderer(): ChartRendererKind | null;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): ChartInstance | null;
+}
+/** Props shared by every chart component */
+export interface ChartCommonProps {
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 320
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** X axis */
+    xAxis?: ChartAxisOptions;
+    /** Y axis */
+    yAxis?: ChartAxisOptions;
+    /**
+     * Backend of the data layer: `auto` tries WebGPU, then WebGL2, then Canvas2D
+     * @default "auto"
+     */
+    renderer?: ChartRendererPreference;
+    /** Legend; shown by default when several series have a name */
+    legend?: boolean | ChartLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | ChartTooltipOptions;
+    /** Vertical guide line following the pointer */
+    crosshair?: boolean;
+    /** Background areas and reference lines */
+    annotations?: readonly ChartAnnotation[];
+    /**
+     * Zoom (Ctrl / ⌘ + wheel, pinch), pan (drag), double-click reset and keyboard navigation; `false` makes the chart static
+     * @default true
+     */
+    interaction?: boolean | ChartInteractionOptions;
+    /** Space around the plot area, in pixels */
+    padding?: ChartPadding;
+    /** Series colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+    /** Called when the hovered (or keyboard-focused) points change */
+    onHover?: (event: ChartHoverEvent | null) => void;
+    /** Called when a point (or bar) is clicked */
+    onPointClick?: (event: ChartHoverEvent) => void;
+    /** Called when the user zooms or pans */
+    onZoom?: (view: ChartView) => void;
+    /** Called with the backend once it is ready (and when it falls back after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** Additional class name of the root element */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: CSSProperties;
+    /** Imperative handle */
+    ref?: Ref<ChartHandle>;
+}
+/** Props of Chart: any mix of line, area, bar and scatter series */
+export interface ChartProps extends ChartCommonProps {
+    /** Data series; each sets its own `type` */
+    series: readonly ChartSeries[];
+}
+/** Props of LineChart */
+export interface LineChartProps extends ChartCommonProps {
+    /** Series drawn as lines (or areas with `area`) unless they set a `type` */
+    series: readonly ChartSeries[];
+    /**
+     * Fills the area under the lines
+     * @default false
+     */
+    area?: boolean;
+}
+/** Props of BarChart */
+export interface BarChartProps extends ChartCommonProps {
+    /** Series drawn as bars unless they set a `type` (e.g. a `line` overlay) */
+    series: readonly ChartSeries[];
+    /**
+     * Stacks the bars of every series (otherwise they are grouped side by side)
+     * @default false
+     */
+    stacked?: boolean;
+}
+/** Props of ScatterChart */
+export interface ScatterChartProps extends ChartCommonProps {
+    /** Series drawn as dots unless they set a `type` */
+    series: readonly ChartSeries[];
+}
+/** A point of a QuadrantChart */
+export interface QuadrantPoint {
+    /** Position on the horizontal axis */
+    x: number;
+    /** Position on the vertical axis */
+    y: number;
+    /** Text drawn next to the dot and shown in the tooltip */
+    label?: string;
+    /** Dot color (any CSS color); the color of its quadrant by default */
+    color?: string;
+    /** Dot diameter in pixels */
+    size?: number;
+}
+/** Title and color of a quadrant */
+export interface QuadrantRegion {
+    /** Title drawn in the outer corner of the quadrant */
+    label?: string;
+    /** Background tint and default dot color (any CSS color) */
+    color?: string;
+}
+/** The four quadrants of a QuadrantChart */
+export interface QuadrantRegions {
+    topLeft?: QuadrantRegion;
+    topRight?: QuadrantRegion;
+    bottomLeft?: QuadrantRegion;
+    bottomRight?: QuadrantRegion;
+}
+/** Props of QuadrantChart */
+export interface QuadrantChartProps extends Omit<ChartCommonProps, "onPointClick" | "xAxis" | "yAxis"> {
+    /** Points to place */
+    points: readonly QuadrantPoint[];
+    /**
+     * Range of the horizontal axis
+     * @default [0, 10]
+     */
+    xDomain?: [number, number];
+    /**
+     * Range of the vertical axis
+     * @default [0, 10]
+     */
+    yDomain?: [number, number];
+    /** X value of the vertical divider (the middle of `xDomain` by default) */
+    xSplit?: number;
+    /** Y value of the horizontal divider (the middle of `yDomain` by default) */
+    ySplit?: number;
+    /** Titles and colors of the quadrants */
+    quadrants?: QuadrantRegions;
+    /** Title of the horizontal axis */
+    xLabel?: string;
+    /** Title of the vertical axis */
+    yLabel?: string;
+    /** Reverses the horizontal axis (e.g. "urgent" on the left) */
+    reverseX?: boolean;
+    /**
+     * Draws the labels next to the dots (overlapping labels are skipped)
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Dot diameter in pixels
+     * @default 12
+     */
+    pointSize?: number;
+    /** Name of the points in the tooltip */
+    name?: string;
+    /** Called with the clicked point and its index */
+    onPointClick?: (point: QuadrantPoint, index: number) => void;
+}

package/dist/charts/react/types.d.ts

@@ -0,0 +1,168 @@
+import { CSSProperties, Ref } from 'react';
+import { ChartAnnotation, ChartAxisOptions, ChartHoverEvent, ChartInstance, ChartLegendOptions, ChartInteractionOptions, ChartPadding, ChartRendererKind, ChartRendererPreference, ChartSeries, ChartTooltipOptions, ChartView } from '../engine/types.js';
+/** Imperative handle of the chart components (`ref`) */
+export interface ChartHandle {
+    /** Shows the whole data range */
+    resetZoom(): void;
+    /** Visible range */
+    getView(): ChartView | null;
+    /** Sets the visible range */
+    setView(view: Partial<ChartView>): void;
+    /** Backend in use, `null` until ready */
+    getRenderer(): ChartRendererKind | null;
+    /** The underlying engine instance (minerva-design/charts/core) */
+    getInstance(): ChartInstance | null;
+}
+/** Props shared by every chart component */
+export interface ChartCommonProps {
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 320
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** X axis */
+    xAxis?: ChartAxisOptions;
+    /** Y axis */
+    yAxis?: ChartAxisOptions;
+    /**
+     * Backend of the data layer: `auto` tries WebGPU, then WebGL2, then Canvas2D
+     * @default "auto"
+     */
+    renderer?: ChartRendererPreference;
+    /** Legend; shown by default when several series have a name */
+    legend?: boolean | ChartLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | ChartTooltipOptions;
+    /** Vertical guide line following the pointer */
+    crosshair?: boolean;
+    /** Background areas and reference lines */
+    annotations?: readonly ChartAnnotation[];
+    /**
+     * Zoom (Ctrl / ⌘ + wheel, pinch), pan (drag), double-click reset and keyboard navigation; `false` makes the chart static
+     * @default true
+     */
+    interaction?: boolean | ChartInteractionOptions;
+    /** Space around the plot area, in pixels */
+    padding?: ChartPadding;
+    /** Series colors (defaults to the `--chart-series-1..8` CSS variables, then the theme colors) */
+    palette?: readonly string[];
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+    /** Called when the hovered (or keyboard-focused) points change */
+    onHover?: (event: ChartHoverEvent | null) => void;
+    /** Called when a point (or bar) is clicked */
+    onPointClick?: (event: ChartHoverEvent) => void;
+    /** Called when the user zooms or pans */
+    onZoom?: (view: ChartView) => void;
+    /** Called with the backend once it is ready (and when it falls back after a GPU loss) */
+    onRendererChange?: (renderer: ChartRendererKind) => void;
+    /** Additional class name of the root element */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: CSSProperties;
+    /** Imperative handle */
+    ref?: Ref<ChartHandle>;
+}
+/** Props of Chart: any mix of line, area, bar and scatter series */
+export interface ChartProps extends ChartCommonProps {
+    /** Data series; each sets its own `type` */
+    series: readonly ChartSeries[];
+}
+/** Props of LineChart */
+export interface LineChartProps extends ChartCommonProps {
+    /** Series drawn as lines (or areas with `area`) unless they set a `type` */
+    series: readonly ChartSeries[];
+    /**
+     * Fills the area under the lines
+     * @default false
+     */
+    area?: boolean;
+}
+/** Props of BarChart */
+export interface BarChartProps extends ChartCommonProps {
+    /** Series drawn as bars unless they set a `type` (e.g. a `line` overlay) */
+    series: readonly ChartSeries[];
+    /**
+     * Stacks the bars of every series (otherwise they are grouped side by side)
+     * @default false
+     */
+    stacked?: boolean;
+}
+/** Props of ScatterChart */
+export interface ScatterChartProps extends ChartCommonProps {
+    /** Series drawn as dots unless they set a `type` */
+    series: readonly ChartSeries[];
+}
+/** A point of a QuadrantChart */
+export interface QuadrantPoint {
+    /** Position on the horizontal axis */
+    x: number;
+    /** Position on the vertical axis */
+    y: number;
+    /** Text drawn next to the dot and shown in the tooltip */
+    label?: string;
+    /** Dot color (any CSS color); the color of its quadrant by default */
+    color?: string;
+    /** Dot diameter in pixels */
+    size?: number;
+}
+/** Title and color of a quadrant */
+export interface QuadrantRegion {
+    /** Title drawn in the outer corner of the quadrant */
+    label?: string;
+    /** Background tint and default dot color (any CSS color) */
+    color?: string;
+}
+/** The four quadrants of a QuadrantChart */
+export interface QuadrantRegions {
+    topLeft?: QuadrantRegion;
+    topRight?: QuadrantRegion;
+    bottomLeft?: QuadrantRegion;
+    bottomRight?: QuadrantRegion;
+}
+/** Props of QuadrantChart */
+export interface QuadrantChartProps extends Omit<ChartCommonProps, "onPointClick" | "xAxis" | "yAxis"> {
+    /** Points to place */
+    points: readonly QuadrantPoint[];
+    /**
+     * Range of the horizontal axis
+     * @default [0, 10]
+     */
+    xDomain?: [number, number];
+    /**
+     * Range of the vertical axis
+     * @default [0, 10]
+     */
+    yDomain?: [number, number];
+    /** X value of the vertical divider (the middle of `xDomain` by default) */
+    xSplit?: number;
+    /** Y value of the horizontal divider (the middle of `yDomain` by default) */
+    ySplit?: number;
+    /** Titles and colors of the quadrants */
+    quadrants?: QuadrantRegions;
+    /** Title of the horizontal axis */
+    xLabel?: string;
+    /** Title of the vertical axis */
+    yLabel?: string;
+    /** Reverses the horizontal axis (e.g. "urgent" on the left) */
+    reverseX?: boolean;
+    /**
+     * Draws the labels next to the dots (overlapping labels are skipped)
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Dot diameter in pixels
+     * @default 12
+     */
+    pointSize?: number;
+    /** Name of the points in the tooltip */
+    name?: string;
+    /** Called with the clicked point and its index */
+    onPointClick?: (point: QuadrantPoint, index: number) => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minerva-design",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Minerva Design: React, Vue, Angular, Web Components and native platform components with shared design tokens and contracts",
   "license": "MIT",
   "author": "fwx5618177 <fwx5618177@gmail.com>",
@@ -104,6 +104,26 @@
         "default": "./dist/core/styling-hooks.cjs"
       }
     },
+    "./charts": {
+      "import": {
+        "types": "./dist/charts/index.d.ts",
+        "default": "./dist/charts/index.js"
+      },
+      "require": {
+        "types": "./dist/charts/index.d.cts",
+        "default": "./dist/charts/index.cjs"
+      }
+    },
+    "./charts/core": {
+      "import": {
+        "types": "./dist/charts/core.d.ts",
+        "default": "./dist/charts/core.js"
+      },
+      "require": {
+        "types": "./dist/charts/core.d.cts",
+        "default": "./dist/charts/core.cjs"
+      }
+    },
     "./native": {
       "source": "./dist/native/source/index.ts",
       "react-native": {
@@ -934,6 +954,12 @@
       "styling-hooks": [
         "./dist/core/styling-hooks/index.d.ts"
       ],
+      "charts": [
+        "./dist/charts/index.d.ts"
+      ],
+      "charts/core": [
+        "./dist/charts/core.d.ts"
+      ],
       "native": [
         "./dist/native/index.d.ts"
       ]
@@ -1038,7 +1064,7 @@
   },
   "miniprogram": "dist/weapp",
   "scripts": {
-    "build": "pnpm --filter @minerva/core build && pnpm --filter @minerva/dom build && pnpm --filter @minerva/react build && pnpm --filter @minerva/web-components build && pnpm --filter @minerva/vue build && pnpm --filter @minerva/native build && pnpm --filter @minerva/angular build && pnpm --filter @minerva/taro build && pnpm --filter @minerva/uni build && pnpm --filter @minerva/weapp build",
+    "build": "pnpm --filter @minerva/core build && pnpm --filter @minerva/dom build && pnpm --filter @minerva/charts build && pnpm --filter @minerva/react build && pnpm --filter @minerva/web-components build && pnpm --filter @minerva/vue build && pnpm --filter @minerva/native build && pnpm --filter @minerva/angular build && pnpm --filter @minerva/taro build && pnpm --filter @minerva/uni build && pnpm --filter @minerva/weapp build",
     "sync:package": "node scripts/sync-package.mjs",
     "test:dist": "vitest run",
     "check:package": "node scripts/check-package.mjs",