@coral-ai/charts 0.4.1 → 3.8.1

package/dist/index.d.ts

@@ -1,2 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
 
-export {  }
+/**
+ * Declarative chart spec emitted by an agent's `render_chart` tool call or
+ * yielded as a streaming chunk. Keep this minimal — chart components in this
+ * package translate the spec into recharts under the hood.
+ */
+type CoralChartKind = "bar" | "line";
+type CoralChartSeries = {
+    /** Key into each `data` row that holds this series' numeric value. */
+    dataKey: string;
+    /** Display label shown in the legend + tooltip. */
+    label: string;
+};
+type CoralChartSpec = {
+    kind: CoralChartKind;
+    title: string;
+    /** Key into each `data` row that supplies the x-axis label. */
+    xKey: string;
+    series: CoralChartSeries[];
+    /** Each row: `{ [xKey]: string|number, [dataKey of each series]: number }`. */
+    data: Array<Record<string, string | number>>;
+};
+
+/**
+ * Default color palette used by built-in chart components. Designed to read
+ * cleanly against the Coral neutral surfaces in both light and dark themes.
+ * Override by passing `colors` to any chart, or by editing this list to align
+ * a project to a different brand palette.
+ */
+declare const CORAL_CHART_PALETTE: string[];
+declare function pickColor(index: number, palette?: readonly string[]): string;
+
+declare function ChartFrame({ title, children, }: {
+    title: string;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+type CoralBarChartProps = {
+    spec: CoralChartSpec;
+    /** Override the default palette. */
+    colors?: readonly string[];
+};
+declare function CoralBarChart({ spec, colors, }: CoralBarChartProps): react_jsx_runtime.JSX.Element;
+
+type CoralLineChartProps = {
+    spec: CoralChartSpec;
+    /** Override the default palette. */
+    colors?: readonly string[];
+};
+declare function CoralLineChart({ spec, colors, }: CoralLineChartProps): react_jsx_runtime.JSX.Element;
+
+type CoralChartProps = {
+    spec: CoralChartSpec;
+    colors?: readonly string[];
+};
+declare function CoralChart({ spec, colors }: CoralChartProps): react_jsx_runtime.JSX.Element;
+
+export { CORAL_CHART_PALETTE, ChartFrame, CoralBarChart, type CoralBarChartProps, CoralChart, type CoralChartKind, type CoralChartProps, type CoralChartSeries, type CoralChartSpec, CoralLineChart, type CoralLineChartProps, pickColor };

package/dist/index.js

@@ -1 +1,128 @@
+// src/palette.ts
+var CORAL_CHART_PALETTE = [
+  "#7287ff",
+  "#34c6a3",
+  "#f5a524",
+  "#e85d75",
+  "#9b6ad8",
+  "#4ab8d9"
+];
+function pickColor(index, palette = CORAL_CHART_PALETTE) {
+  return palette[index % palette.length];
+}
+
+// src/ChartFrame.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var frameStyle = {
+  margin: "12px 0",
+  padding: 12,
+  border: "1px solid var(--colorNeutralStroke2, #e0e0e0)",
+  borderRadius: 8
+};
+var titleStyle = {
+  fontWeight: 600,
+  marginBottom: 8
+};
+var bodyStyle = {
+  width: "100%",
+  height: 240
+};
+function ChartFrame({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: frameStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: titleStyle, children: title }),
+    /* @__PURE__ */ jsx("div", { style: bodyStyle, children })
+  ] });
+}
+
+// src/CoralBarChart.tsx
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from "recharts";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function CoralBarChart({
+  spec,
+  colors = CORAL_CHART_PALETTE
+}) {
+  return /* @__PURE__ */ jsx2(ChartFrame, { title: spec.title, children: /* @__PURE__ */ jsx2(ResponsiveContainer, { children: /* @__PURE__ */ jsxs2(BarChart, { data: spec.data, children: [
+    /* @__PURE__ */ jsx2(CartesianGrid, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx2(XAxis, { dataKey: spec.xKey }),
+    /* @__PURE__ */ jsx2(YAxis, {}),
+    /* @__PURE__ */ jsx2(Tooltip, {}),
+    /* @__PURE__ */ jsx2(Legend, {}),
+    spec.series.map((s, i) => /* @__PURE__ */ jsx2(
+      Bar,
+      {
+        dataKey: s.dataKey,
+        name: s.label,
+        fill: pickColor(i, colors)
+      },
+      s.dataKey
+    ))
+  ] }) }) });
+}
+
+// src/CoralLineChart.tsx
+import {
+  CartesianGrid as CartesianGrid2,
+  Legend as Legend2,
+  Line,
+  LineChart,
+  ResponsiveContainer as ResponsiveContainer2,
+  Tooltip as Tooltip2,
+  XAxis as XAxis2,
+  YAxis as YAxis2
+} from "recharts";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function CoralLineChart({
+  spec,
+  colors = CORAL_CHART_PALETTE
+}) {
+  return /* @__PURE__ */ jsx3(ChartFrame, { title: spec.title, children: /* @__PURE__ */ jsx3(ResponsiveContainer2, { children: /* @__PURE__ */ jsxs3(LineChart, { data: spec.data, children: [
+    /* @__PURE__ */ jsx3(CartesianGrid2, { strokeDasharray: "3 3" }),
+    /* @__PURE__ */ jsx3(XAxis2, { dataKey: spec.xKey }),
+    /* @__PURE__ */ jsx3(YAxis2, {}),
+    /* @__PURE__ */ jsx3(Tooltip2, {}),
+    /* @__PURE__ */ jsx3(Legend2, {}),
+    spec.series.map((s, i) => /* @__PURE__ */ jsx3(
+      Line,
+      {
+        type: "monotone",
+        dataKey: s.dataKey,
+        name: s.label,
+        stroke: pickColor(i, colors)
+      },
+      s.dataKey
+    ))
+  ] }) }) });
+}
+
+// src/CoralChart.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function CoralChart({ spec, colors }) {
+  switch (spec.kind) {
+    case "line":
+      return /* @__PURE__ */ jsx4(CoralLineChart, { spec, colors });
+    case "bar":
+    default:
+      return /* @__PURE__ */ jsx4(CoralBarChart, { spec, colors });
+  }
+}
+export {
+  CORAL_CHART_PALETTE,
+  ChartFrame,
+  CoralBarChart,
+  CoralChart,
+  CoralLineChart,
+  pickColor
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"sources":["../src/palette.ts","../src/ChartFrame.tsx","../src/CoralBarChart.tsx","../src/CoralLineChart.tsx","../src/CoralChart.tsx"],"sourcesContent":["/**\n * Default color palette used by built-in chart components. Designed to read\n * cleanly against the Coral neutral surfaces in both light and dark themes.\n * Override by passing `colors` to any chart, or by editing this list to align\n * a project to a different brand palette.\n */\nexport const CORAL_CHART_PALETTE = [\n  \"#7287ff\",\n  \"#34c6a3\",\n  \"#f5a524\",\n  \"#e85d75\",\n  \"#9b6ad8\",\n  \"#4ab8d9\",\n];\n\nexport function pickColor(index: number, palette: readonly string[] = CORAL_CHART_PALETTE): string {\n  return palette[index % palette.length];\n}\n","// Shared visual frame around any chart kind: titled bordered card with a\n// fixed-height body that hosts the recharts ResponsiveContainer.\n\nimport { ReactNode } from \"react\";\n\nconst frameStyle: React.CSSProperties = {\n  margin: \"12px 0\",\n  padding: 12,\n  border: \"1px solid var(--colorNeutralStroke2, #e0e0e0)\",\n  borderRadius: 8,\n};\n\nconst titleStyle: React.CSSProperties = {\n  fontWeight: 600,\n  marginBottom: 8,\n};\n\nconst bodyStyle: React.CSSProperties = {\n  width: \"100%\",\n  height: 240,\n};\n\nexport function ChartFrame({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}) {\n  return (\n    <div style={frameStyle}>\n      <div style={titleStyle}>{title}</div>\n      <div style={bodyStyle}>{children}</div>\n    </div>\n  );\n}\n","// Coral-styled bar chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralBarChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n};\n\nexport function CoralBarChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n}: CoralBarChartProps) {\n  return (\n    <ChartFrame title={spec.title}>\n      <ResponsiveContainer>\n        <BarChart data={spec.data}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey={spec.xKey} />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          {spec.series.map((s, i) => (\n            <Bar\n              key={s.dataKey}\n              dataKey={s.dataKey}\n              name={s.label}\n              fill={pickColor(i, colors)}\n            />\n          ))}\n        </BarChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Coral-styled line chart. Wraps recharts so consumers don't import recharts\n// directly — keeps the underlying library swappable and the public API tiny.\n\nimport {\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport { ChartFrame } from \"./ChartFrame\";\nimport { CORAL_CHART_PALETTE, pickColor } from \"./palette\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralLineChartProps = {\n  spec: CoralChartSpec;\n  /** Override the default palette. */\n  colors?: readonly string[];\n};\n\nexport function CoralLineChart({\n  spec,\n  colors = CORAL_CHART_PALETTE,\n}: CoralLineChartProps) {\n  return (\n    <ChartFrame title={spec.title}>\n      <ResponsiveContainer>\n        <LineChart data={spec.data}>\n          <CartesianGrid strokeDasharray=\"3 3\" />\n          <XAxis dataKey={spec.xKey} />\n          <YAxis />\n          <Tooltip />\n          <Legend />\n          {spec.series.map((s, i) => (\n            <Line\n              key={s.dataKey}\n              type=\"monotone\"\n              dataKey={s.dataKey}\n              name={s.label}\n              stroke={pickColor(i, colors)}\n            />\n          ))}\n        </LineChart>\n      </ResponsiveContainer>\n    </ChartFrame>\n  );\n}\n","// Dispatcher that renders the right Coral chart for a given spec.kind.\n// Use this when you want a single component that picks bar / line based on\n// what an agent decided to emit; reach for CoralBarChart / CoralLineChart\n// directly when you know the kind statically.\n\nimport { CoralBarChart } from \"./CoralBarChart\";\nimport { CoralLineChart } from \"./CoralLineChart\";\nimport type { CoralChartSpec } from \"./types\";\n\nexport type CoralChartProps = {\n  spec: CoralChartSpec;\n  colors?: readonly string[];\n};\n\nexport function CoralChart({ spec, colors }: CoralChartProps) {\n  switch (spec.kind) {\n    case \"line\":\n      return <CoralLineChart spec={spec} colors={colors} />;\n    case \"bar\":\n    default:\n      return <CoralBarChart spec={spec} colors={colors} />;\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs","CartesianGrid","Legend","ResponsiveContainer","Tooltip","XAxis","YAxis","jsx","jsxs","ResponsiveContainer","CartesianGrid","XAxis","YAxis","Tooltip","Legend","jsx"]}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@coral-ai/charts",
-  "version": "0.4.1",
+  "version": "3.8.1",
   "private": false,
-  "description": "Chart primitives for Coral (placeholder — components land in a future release).",
+  "description": "Chart primitives for Coral. Recharts-backed under the hood (CoralBarChart, CoralLineChart, CoralChart); version tracks the bundled recharts release.",
   "license": "MIT",
   "author": "Eunsoo Lee",
   "homepage": "https://github.com/mochimilk/coral-ai#readme",
@@ -27,12 +27,18 @@
     "README.md",
     "LICENSE"
   ],
+  "dependencies": {
+    "recharts": "3.8.1"
+  },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsup": "^8.5.1"
   },
   "publishConfig": {