@funnest/charts-cli 0.2.1 → 0.4.0

package/dist/cli.js

@@ -65,6 +65,15 @@ function suggestCharts(rows) {
   const out = [];
   const allPositive = (c) => rows.every((r) => typeof r[c] !== "number" || r[c] >= 0);
   const hasNegative = (c) => rows.some((r) => typeof r[c] === "number" && r[c] < 0);
+  const find = (...names) => numeric.find((c) => names.includes(c.toLowerCase()));
+  const ohlc = { open: find("open", "o", "\uC2DC\uAC00"), high: find("high", "h", "\uACE0\uAC00"), low: find("low", "l", "\uC800\uAC00"), close: find("close", "c", "\uC885\uAC00") };
+  if (ohlc.open && ohlc.high && ohlc.low && ohlc.close) {
+    const volume = find("volume", "vol", "v", "\uAC70\uB798\uB7C9");
+    out.push({
+      reason: { ko: "\uC2DC\uAC00\xB7\uACE0\uAC00\xB7\uC800\uAC00\xB7\uC885\uAC00\uAC00 \uC788\uC5B4 \uCE94\uB4E4 \uCC28\uD2B8\uAC00 \uC798 \uB9DE\uC544\uC694", en: "Open/high/low/close columns: candles" },
+      spec: { type: "candlestick", data: rows, ...time ? { x: time } : {}, open: ohlc.open, high: ohlc.high, low: ohlc.low, close: ohlc.close, ...volume ? { volume } : {} }
+    });
+  }
   if (time && numeric.length) {
     const magnitude = (c) => Math.max(...rows.map((r) => Math.abs(Number(r[c]) || 0)));
     const base = numeric.find(allPositive) ?? numeric[0];
@@ -96,11 +105,23 @@ function suggestCharts(rows) {
   }
   if (category && numeric.length) {
     const v = numeric[0];
+    const size = numeric.find(allPositive);
+    const change = numeric.find(hasNegative);
+    if (size && change && rows.length >= 4) {
+      out.push({
+        reason: { ko: `${size}\uB85C \uD06C\uAE30, ${change}\uB85C \uC0C9\uC744 \uC815\uD55C \uB9C8\uCF13\uB9F5`, en: `Market map: size by ${size}, color by ${change}` },
+        spec: { type: "treemap", data: rows, label: category, value: size, change }
+      });
+    }
     if (rows.length <= 8 && allPositive(v)) {
       out.push({
         reason: { ko: `${category}\uBCC4 ${v} \uBE44\uC911`, en: `Share of ${v} by ${category}` },
         spec: { type: "percentage-bar", data: rows, label: category, value: v }
       });
+      out.push({
+        reason: { ko: `${category}\uBCC4 ${v} \uBE44\uC911\uC744 \uB3C4\uB11B\uC73C\uB85C`, en: `Share of ${v} by ${category} as a donut` },
+        spec: { type: "donut", data: rows, label: category, value: v }
+      });
     }
     out.push({
       reason: { ko: `${category}\uBCC4 ${v} \uBE44\uAD50`, en: `Compare ${v} by ${category}` },
@@ -185,7 +206,7 @@ Every command accepts --locale ko|en.`,
 var messages = (locale = "ko") => MESSAGES[locale];
 
 // src/render.tsx
-import { AreaChart, BarChart, LineChart, Point, ReferenceLine } from "@funnest/charts-react";
+import { AreaChart, BarChart, CandlestickChart, DonutChart, LineChart, Point, ReferenceLine, TreemapChart } from "@funnest/charts-react";
 import { percentages, seriesColor } from "@funnest/charts-viz";
 import { renderToStaticMarkup } from "react-dom/server";
 import { jsx } from "react/jsx-runtime";
@@ -265,10 +286,63 @@ function element(spec, width, height) {
     ))
   ];
   switch (spec.type) {
+    case "candlestick": {
+      const candles = spec.data.map((r) => {
+        const o = num(r[spec.open]);
+        const h = num(r[spec.high]);
+        const l = num(r[spec.low]);
+        const c = num(r[spec.close]);
+        if (o === null || h === null || l === null || c === null) return null;
+        const v = spec.volume ? num(r[spec.volume]) : null;
+        return { open: o, high: h, low: l, close: c, ...v !== null ? { volume: v } : {} };
+      });
+      return /* @__PURE__ */ jsx(
+        CandlestickChart,
+        {
+          data: candles,
+          width,
+          height,
+          animate: false,
+          tooltip: false,
+          valueFormatter: fmt,
+          ...xAxis ? { xAxis } : {},
+          showXAxis: spec.showXAxis ?? !!spec.x,
+          showYAxis: spec.showYAxis === false ? false : { tickLabelFormatter: fmt, width: 64 },
+          children: (spec.referenceLines ?? []).map((r, i) => /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              yAxisId: "price",
+              ...r.y !== void 0 ? { dataY: r.y } : {},
+              ...r.x !== void 0 ? { dataX: indexOf(spec, r.x) } : {},
+              ...r.label !== void 0 ? { label: r.label } : {},
+              ...r.color ? { color: r.color } : {}
+            },
+            `r${i}`
+          ))
+        }
+      );
+    }
+    case "treemap":
+      return /* @__PURE__ */ jsx(
+        TreemapChart,
+        {
+          width,
+          height,
+          enableTooltip: false,
+          valueFormatter: fmt,
+          ...spec.maxChange !== void 0 ? { maxChange: spec.maxChange } : {},
+          data: spec.data.map((r, i) => {
+            const label = String(r[spec.label] ?? i);
+            const change = spec.change ? num(r[spec.change]) : null;
+            const color = spec.colors?.[label];
+            return { id: `${i}`, label, value: num(r[spec.value]) ?? 0, ...change !== null ? { change } : {}, ...color ? { color } : {} };
+          })
+        }
+      );
     case "area":
       return /* @__PURE__ */ jsx(AreaChart, { ...common, stacked: spec.stacked ?? false, ...spec.curve ? { curve: spec.curve } : {}, children: extras });
     case "bar":
-      return /* @__PURE__ */ jsx(BarChart, { ...common, stacked: spec.stacked ?? false, ...spec.colorBySign ? { getBarColor: (v) => v >= 0 ? UP : DOWN } : {}, children: extras });
+      return /* @__PURE__ */ jsx(BarChart, { ...common, stacked: spec.stacked ?? false, ...spec.layout === "horizontal" ? { layout: "horizontal" } : {}, ...spec.colorBySign ? { getBarColor: (v) => v >= 0 ? UP : DOWN } : {}, children: extras });
     case "sparkline": {
       const s = series[0];
       const vals = (s?.data ?? []).filter((v) => v !== null);
@@ -338,11 +412,43 @@ var percentBarSvg = (spec, width, top, p) => {
   return bars + labels;
 };
 var textWidth = (t, size) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
+var donutSvg = (spec, width, height, p) => {
+  const fmt = valueFormatter(spec);
+  const items = spec.data.map((r, i) => {
+    const label = String(r[spec.label] ?? i);
+    return { id: `${i}`, label, value: num(r[spec.value]) ?? 0, color: spec.colors?.[label] ?? seriesColor(i) };
+  });
+  const size = Math.max(60, Math.min(height, width * 0.5));
+  const markup = renderToStaticMarkup(
+    /* @__PURE__ */ jsx(
+      DonutChart,
+      {
+        data: items,
+        size,
+        showLegend: false,
+        valueFormatter: fmt,
+        ...spec.totalLabel ? { totalLabel: spec.totalLabel } : {},
+        ...spec.innerRadius !== void 0 ? { innerRadius: spec.innerRadius } : {}
+      }
+    )
+  );
+  const svg = markup.slice(markup.indexOf("<svg"), markup.indexOf("</svg>") + 6).replace("<svg", `<svg x="0" y="${(height - size) / 2}"`);
+  const segs = percentages(items);
+  const lx = size + 28;
+  const rowH = 24;
+  const top = height / 2 - items.length * rowH / 2 + rowH / 2;
+  const labels = items.map((it, i) => {
+    const y = top + i * rowH;
+    const pct = `${(Math.round(segs[i].fraction * 1e3) / 10).toString()}%`;
+    return `<circle cx="${lx + 4}" cy="${y}" r="4" fill="${it.color}"/><text x="${lx + 14}" y="${y}" dominant-baseline="central" font-size="13" fill="${p.muted}">${esc(it.label)} <tspan fill="${p.text}" font-weight="700">${pct}</tspan> <tspan fill="${p.muted}">${esc(fmt(it.value))}</tspan></text>`;
+  }).join("");
+  return svg + labels;
+};
 function renderSvg(spec, options = {}) {
   const theme = THEMES[options.theme ?? spec.theme ?? "light"];
   const isSpark = spec.type === "sparkline";
   const width = spec.width ?? (isSpark ? 120 : 640);
-  const height = spec.height ?? (isSpark ? 36 : spec.type === "percentage-bar" ? 96 : 320);
+  const height = spec.height ?? (isSpark ? 36 : spec.type === "percentage-bar" ? 96 : spec.type === "donut" ? 220 : 320);
   const pad = isSpark ? 0 : 16;
   const innerW = width - pad * 2;
   let y = pad;
@@ -355,6 +461,8 @@ function renderSvg(spec, options = {}) {
   if (spec.type === "percentage-bar") {
     body = percentBarSvg(spec, innerW, 0, theme);
     body = `<g transform="translate(${pad},${y})">${body}</g>`;
+  } else if (spec.type === "donut") {
+    body = `<g transform="translate(${pad},${y})">${donutSvg(spec, innerW, Math.max(60, height - y - pad), theme)}</g>`;
   } else {
     const series = seriesOf(spec);
     const legend = !isSpark && (spec.legend ?? series.length > 1);
@@ -434,6 +542,57 @@ export function Chart() {
     />
   );
 }
+`;
+  }
+  if (spec.type === "candlestick") {
+    const vol = spec.volume ? `, volume: d[${lit(spec.volume)}]` : "";
+    return `import { CandlestickChart${spec.referenceLines?.length ? ", ReferenceLine" : ""} } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <CandlestickChart
+      data={data.map((d) => ({ open: d[${lit(spec.open)}], high: d[${lit(spec.high)}], low: d[${lit(spec.low)}], close: d[${lit(spec.close)}]${vol} }))}
+      height={${spec.height ?? 320}}${spec.x ? `
+      xAxis={{ data: data.map((d) => d[${lit(spec.x)}]) }}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    >${(spec.referenceLines ?? []).map((r) => `
+      <ReferenceLine yAxisId="price"${r.y !== void 0 ? ` dataY={${r.y}}` : ""}${r.label ? ` label=${lit(r.label)}` : ""} />`).join("")}
+    </CandlestickChart>
+  );
+}
+`;
+  }
+  if (spec.type === "donut") {
+    return `import { DonutChart } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <DonutChart
+      data={data.map((d) => ({ id: String(d[${lit(spec.label)}]), label: String(d[${lit(spec.label)}]), value: d[${lit(spec.value)}]${spec.colors ? `, color: (${lit(spec.colors)} as Record<string, string>)[String(d[${lit(spec.label)}])]` : ""} }))}${spec.totalLabel ? `
+      totalLabel=${lit(spec.totalLabel)}` : ""}${spec.innerRadius !== void 0 ? `
+      innerRadius={${spec.innerRadius}}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    />
+  );
+}
+`;
+  }
+  if (spec.type === "treemap") {
+    return `import { TreemapChart } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <TreemapChart
+      height={${spec.height ?? 320}}
+      data={data.map((d, i) => ({ id: String(i), label: String(d[${lit(spec.label)}]), value: d[${lit(spec.value)}]${spec.change ? `, change: d[${lit(spec.change)}]` : ""} }))}${spec.maxChange !== void 0 ? `
+      maxChange={${spec.maxChange}}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    />
+  );
+}
 `;
   }
   const component = spec.type === "area" ? "AreaChart" : spec.type === "bar" ? "BarChart" : "LineChart";
@@ -455,6 +614,7 @@ export function Chart() {
   if (spec.stacked) props.push("stacked");
   if (spec.area && spec.area !== "none") props.push(`area=${lit(spec.area)}`);
   if (spec.curve) props.push(`curve=${lit(spec.curve)}`);
+  if (spec.type === "bar" && spec.layout === "horizontal") props.push('layout="horizontal"');
   if (spec.type === "bar" && spec.colorBySign) props.push("getBarColor={(v) => (v >= 0 ? '#F04452' : '#3182F6')}");
   if (ys.length > 1 || spec.legend) props.push("legend");
   const children = [
@@ -572,7 +732,8 @@ var CHARTS = {
       ...COMMON,
       ...SERIES,
       stacked: { kind: "boolean", default: false, ko: "\uC704\uB85C \uC313\uAE30", en: "Stack series" },
-      colorBySign: { kind: "boolean", default: false, ko: "0 \uC774\uC0C1 \uBE68\uAC15, \uBBF8\uB9CC \uD30C\uB791", en: "Red for \u2265 0, blue for < 0" }
+      colorBySign: { kind: "boolean", default: false, ko: "0 \uC774\uC0C1 \uBE68\uAC15, \uBBF8\uB9CC \uD30C\uB791", en: "Red for \u2265 0, blue for < 0" },
+      layout: { kind: "string", enum: ["vertical", "horizontal"], default: "vertical", ko: "'horizontal'\uC774\uBA74 \uAC00\uB85C \uB9C9\uB300 (\uC21C\uC704, \uC5C5\uC885\uBCC4 \uC218\uC775\uB960)", en: "'horizontal' for left-to-right bars (rankings, sector returns)" }
     },
     example: {
       title: "\uC77C\uBCC4 \uC190\uC775",
@@ -584,6 +745,108 @@ var CHARTS = {
       referenceLines: [{ y: 0 }]
     }
   },
+  candlestick: {
+    type: "candlestick",
+    ko: "\uCE94\uB4E4 \uCC28\uD2B8. \uC2DC\uAC00\xB7\uACE0\uAC00\xB7\uC800\uAC00\xB7\uC885\uAC00\uC640 \uAC70\uB798\uB7C9",
+    en: "Candlestick chart: open/high/low/close with volume",
+    component: "CandlestickChart",
+    fields: {
+      ...COMMON,
+      x: SERIES.x,
+      open: { kind: "string", required: true, column: "numeric", ko: "\uC2DC\uAC00 \uC5F4", en: "Open column" },
+      high: { kind: "string", required: true, column: "numeric", ko: "\uACE0\uAC00 \uC5F4", en: "High column" },
+      low: { kind: "string", required: true, column: "numeric", ko: "\uC800\uAC00 \uC5F4", en: "Low column" },
+      close: { kind: "string", required: true, column: "numeric", ko: "\uC885\uAC00 \uC5F4", en: "Close column" },
+      volume: { kind: "string", column: "numeric", ko: "\uAC70\uB798\uB7C9 \uC5F4 (\uC788\uC73C\uBA74 \uC544\uB798\uC5D0 \uB9C9\uB300)", en: "Volume column (bars along the bottom)" },
+      showXAxis: SERIES.showXAxis,
+      showYAxis: SERIES.showYAxis,
+      format: FORMAT,
+      referenceLines: SERIES.referenceLines
+    },
+    example: {
+      title: "\uC0BC\uC131\uC804\uC790 \uC77C\uBD09",
+      data: (() => {
+        let p = 71e3;
+        return days(24).map((date, i) => {
+          const open = p;
+          const close = Math.round(open * (1 + Math.sin(i * 1.3) * 0.018 + 2e-3));
+          p = close;
+          return { date, open, high: Math.round(Math.max(open, close) * 1.008), low: Math.round(Math.min(open, close) * 0.992), close, volume: 8e6 + i * 137e4 % 6e6 };
+        });
+      })(),
+      x: "date",
+      open: "open",
+      high: "high",
+      low: "low",
+      close: "close",
+      volume: "volume",
+      format: { suffix: "\uC6D0" }
+    }
+  },
+  donut: {
+    type: "donut",
+    ko: "\uB3C4\uB11B \uCC28\uD2B8. \uC790\uC0B0 \uBE44\uC911, \uAC00\uC6B4\uB370\uC5D0 \uD569\uACC4",
+    en: "Donut chart: portfolio shares with the total in the middle",
+    component: "DonutChart",
+    fields: {
+      ...COMMON,
+      height: { kind: "number", default: 220, ko: "\uB192\uC774(px)", en: "Height (px)" },
+      label: { kind: "string", required: true, column: "any", ko: "\uC774\uB984 \uC5F4", en: "Label column" },
+      value: { kind: "string", required: true, column: "numeric", ko: "\uAC12 \uC5F4", en: "Value column" },
+      colors: { kind: "record", ko: "\uC774\uB984 \u2192 \uC0C9", en: "Label \u2192 color" },
+      totalLabel: { kind: "string", ko: "\uAC00\uC6B4\uB370 \uD569\uACC4 \uC544\uB798 \uAE00\uC528", en: "Text under the total" },
+      innerRadius: { kind: "number", default: 0.68, ko: "\uAD6C\uBA4D \uD06C\uAE30 (0\uC774\uBA74 \uD30C\uC774)", en: "Hole size (0 = pie)" },
+      format: FORMAT
+    },
+    example: {
+      title: "\uC790\uC0B0 \uAD6C\uC131",
+      data: [
+        { asset: "\uAD6D\uB0B4\uC8FC\uC2DD", amount: 4200 },
+        { asset: "\uD574\uC678\uC8FC\uC2DD", amount: 3100 },
+        { asset: "\uCF54\uC778", amount: 1700 },
+        { asset: "\uD604\uAE08", amount: 1e3 }
+      ],
+      label: "asset",
+      value: "amount",
+      colors: { \uD604\uAE08: "#B0B8C1" },
+      totalLabel: "\uCD1D \uC790\uC0B0",
+      format: { suffix: "\uB9CC" }
+    }
+  },
+  treemap: {
+    type: "treemap",
+    ko: "\uD2B8\uB9AC\uB9F5. \uC2DC\uAC00\uCD1D\uC561\uC73C\uB85C \uD06C\uAE30, \uB4F1\uB77D\uB960\uB85C \uC0C9\uC744 \uC815\uD558\uB294 \uB9C8\uCF13\uB9F5",
+    en: "Treemap: market map sized by value, colored by change",
+    component: "TreemapChart",
+    fields: {
+      ...COMMON,
+      label: { kind: "string", required: true, column: "any", ko: "\uC774\uB984 \uC5F4", en: "Label column" },
+      value: { kind: "string", required: true, column: "numeric", ko: "\uD06C\uAE30 \uC5F4 (\uC2DC\uAC00\uCD1D\uC561 \uB4F1)", en: "Size column (market cap, \u2026)" },
+      change: { kind: "string", column: "numeric", ko: "\uB4F1\uB77D\uB960 \uC5F4 (%). \uC624\uB974\uBA74 \uBE68\uAC15, \uB0B4\uB9AC\uBA74 \uD30C\uB791", en: "Change column (%): red up, blue down" },
+      maxChange: { kind: "number", default: 5, ko: "\uAC00\uC7A5 \uC9C4\uD55C \uC0C9\uC774 \uB418\uB294 \uB4F1\uB77D\uB960", en: "Change for the full color" },
+      colors: { kind: "record", ko: "\uC774\uB984 \u2192 \uC0C9 (change \uB300\uC2E0)", en: "Label \u2192 color (instead of change)" },
+      format: FORMAT
+    },
+    example: {
+      title: "\uC624\uB298\uC758 \uC2DC\uC7A5",
+      data: [
+        { name: "\uC0BC\uC131\uC804\uC790", cap: 420, pct: 1.84 },
+        { name: "SK\uD558\uC774\uB2C9\uC2A4", cap: 130, pct: 4.12 },
+        { name: "LG\uC5D0\uB108\uC9C0\uC194\uB8E8\uC158", cap: 85, pct: -2.31 },
+        { name: "\uC0BC\uC131\uBC14\uC774\uC624", cap: 55, pct: -0.4 },
+        { name: "\uD604\uB300\uCC28", cap: 48, pct: 0.62 },
+        { name: "\uC140\uD2B8\uB9AC\uC628", cap: 40, pct: 2.95 },
+        { name: "\uAE30\uC544", cap: 38, pct: 1.05 },
+        { name: "NAVER", cap: 32, pct: -0.88 },
+        { name: "KB\uAE08\uC735", cap: 30, pct: 0.21 },
+        { name: "\uCE74\uCE74\uC624", cap: 18, pct: -3.4 }
+      ],
+      label: "name",
+      value: "cap",
+      change: "pct",
+      format: { suffix: "\uC870" }
+    }
+  },
   "percentage-bar": {
     type: "percentage-bar",
     ko: "\uBE44\uC911 \uB9C9\uB300. \uD3EC\uD2B8\uD3F4\uB9AC\uC624 \uBE44\uC911, \uB9E4\uC218\xB7\uB9E4\uB3C4 \uCCB4\uACB0 \uAC15\uB3C4",

package/dist/index.js

@@ -158,7 +158,8 @@ var CHARTS = {
       ...COMMON,
       ...SERIES,
       stacked: { kind: "boolean", default: false, ko: "\uC704\uB85C \uC313\uAE30", en: "Stack series" },
-      colorBySign: { kind: "boolean", default: false, ko: "0 \uC774\uC0C1 \uBE68\uAC15, \uBBF8\uB9CC \uD30C\uB791", en: "Red for \u2265 0, blue for < 0" }
+      colorBySign: { kind: "boolean", default: false, ko: "0 \uC774\uC0C1 \uBE68\uAC15, \uBBF8\uB9CC \uD30C\uB791", en: "Red for \u2265 0, blue for < 0" },
+      layout: { kind: "string", enum: ["vertical", "horizontal"], default: "vertical", ko: "'horizontal'\uC774\uBA74 \uAC00\uB85C \uB9C9\uB300 (\uC21C\uC704, \uC5C5\uC885\uBCC4 \uC218\uC775\uB960)", en: "'horizontal' for left-to-right bars (rankings, sector returns)" }
     },
     example: {
       title: "\uC77C\uBCC4 \uC190\uC775",
@@ -170,6 +171,108 @@ var CHARTS = {
       referenceLines: [{ y: 0 }]
     }
   },
+  candlestick: {
+    type: "candlestick",
+    ko: "\uCE94\uB4E4 \uCC28\uD2B8. \uC2DC\uAC00\xB7\uACE0\uAC00\xB7\uC800\uAC00\xB7\uC885\uAC00\uC640 \uAC70\uB798\uB7C9",
+    en: "Candlestick chart: open/high/low/close with volume",
+    component: "CandlestickChart",
+    fields: {
+      ...COMMON,
+      x: SERIES.x,
+      open: { kind: "string", required: true, column: "numeric", ko: "\uC2DC\uAC00 \uC5F4", en: "Open column" },
+      high: { kind: "string", required: true, column: "numeric", ko: "\uACE0\uAC00 \uC5F4", en: "High column" },
+      low: { kind: "string", required: true, column: "numeric", ko: "\uC800\uAC00 \uC5F4", en: "Low column" },
+      close: { kind: "string", required: true, column: "numeric", ko: "\uC885\uAC00 \uC5F4", en: "Close column" },
+      volume: { kind: "string", column: "numeric", ko: "\uAC70\uB798\uB7C9 \uC5F4 (\uC788\uC73C\uBA74 \uC544\uB798\uC5D0 \uB9C9\uB300)", en: "Volume column (bars along the bottom)" },
+      showXAxis: SERIES.showXAxis,
+      showYAxis: SERIES.showYAxis,
+      format: FORMAT,
+      referenceLines: SERIES.referenceLines
+    },
+    example: {
+      title: "\uC0BC\uC131\uC804\uC790 \uC77C\uBD09",
+      data: (() => {
+        let p = 71e3;
+        return days(24).map((date, i) => {
+          const open = p;
+          const close = Math.round(open * (1 + Math.sin(i * 1.3) * 0.018 + 2e-3));
+          p = close;
+          return { date, open, high: Math.round(Math.max(open, close) * 1.008), low: Math.round(Math.min(open, close) * 0.992), close, volume: 8e6 + i * 137e4 % 6e6 };
+        });
+      })(),
+      x: "date",
+      open: "open",
+      high: "high",
+      low: "low",
+      close: "close",
+      volume: "volume",
+      format: { suffix: "\uC6D0" }
+    }
+  },
+  donut: {
+    type: "donut",
+    ko: "\uB3C4\uB11B \uCC28\uD2B8. \uC790\uC0B0 \uBE44\uC911, \uAC00\uC6B4\uB370\uC5D0 \uD569\uACC4",
+    en: "Donut chart: portfolio shares with the total in the middle",
+    component: "DonutChart",
+    fields: {
+      ...COMMON,
+      height: { kind: "number", default: 220, ko: "\uB192\uC774(px)", en: "Height (px)" },
+      label: { kind: "string", required: true, column: "any", ko: "\uC774\uB984 \uC5F4", en: "Label column" },
+      value: { kind: "string", required: true, column: "numeric", ko: "\uAC12 \uC5F4", en: "Value column" },
+      colors: { kind: "record", ko: "\uC774\uB984 \u2192 \uC0C9", en: "Label \u2192 color" },
+      totalLabel: { kind: "string", ko: "\uAC00\uC6B4\uB370 \uD569\uACC4 \uC544\uB798 \uAE00\uC528", en: "Text under the total" },
+      innerRadius: { kind: "number", default: 0.68, ko: "\uAD6C\uBA4D \uD06C\uAE30 (0\uC774\uBA74 \uD30C\uC774)", en: "Hole size (0 = pie)" },
+      format: FORMAT
+    },
+    example: {
+      title: "\uC790\uC0B0 \uAD6C\uC131",
+      data: [
+        { asset: "\uAD6D\uB0B4\uC8FC\uC2DD", amount: 4200 },
+        { asset: "\uD574\uC678\uC8FC\uC2DD", amount: 3100 },
+        { asset: "\uCF54\uC778", amount: 1700 },
+        { asset: "\uD604\uAE08", amount: 1e3 }
+      ],
+      label: "asset",
+      value: "amount",
+      colors: { \uD604\uAE08: "#B0B8C1" },
+      totalLabel: "\uCD1D \uC790\uC0B0",
+      format: { suffix: "\uB9CC" }
+    }
+  },
+  treemap: {
+    type: "treemap",
+    ko: "\uD2B8\uB9AC\uB9F5. \uC2DC\uAC00\uCD1D\uC561\uC73C\uB85C \uD06C\uAE30, \uB4F1\uB77D\uB960\uB85C \uC0C9\uC744 \uC815\uD558\uB294 \uB9C8\uCF13\uB9F5",
+    en: "Treemap: market map sized by value, colored by change",
+    component: "TreemapChart",
+    fields: {
+      ...COMMON,
+      label: { kind: "string", required: true, column: "any", ko: "\uC774\uB984 \uC5F4", en: "Label column" },
+      value: { kind: "string", required: true, column: "numeric", ko: "\uD06C\uAE30 \uC5F4 (\uC2DC\uAC00\uCD1D\uC561 \uB4F1)", en: "Size column (market cap, \u2026)" },
+      change: { kind: "string", column: "numeric", ko: "\uB4F1\uB77D\uB960 \uC5F4 (%). \uC624\uB974\uBA74 \uBE68\uAC15, \uB0B4\uB9AC\uBA74 \uD30C\uB791", en: "Change column (%): red up, blue down" },
+      maxChange: { kind: "number", default: 5, ko: "\uAC00\uC7A5 \uC9C4\uD55C \uC0C9\uC774 \uB418\uB294 \uB4F1\uB77D\uB960", en: "Change for the full color" },
+      colors: { kind: "record", ko: "\uC774\uB984 \u2192 \uC0C9 (change \uB300\uC2E0)", en: "Label \u2192 color (instead of change)" },
+      format: FORMAT
+    },
+    example: {
+      title: "\uC624\uB298\uC758 \uC2DC\uC7A5",
+      data: [
+        { name: "\uC0BC\uC131\uC804\uC790", cap: 420, pct: 1.84 },
+        { name: "SK\uD558\uC774\uB2C9\uC2A4", cap: 130, pct: 4.12 },
+        { name: "LG\uC5D0\uB108\uC9C0\uC194\uB8E8\uC158", cap: 85, pct: -2.31 },
+        { name: "\uC0BC\uC131\uBC14\uC774\uC624", cap: 55, pct: -0.4 },
+        { name: "\uD604\uB300\uCC28", cap: 48, pct: 0.62 },
+        { name: "\uC140\uD2B8\uB9AC\uC628", cap: 40, pct: 2.95 },
+        { name: "\uAE30\uC544", cap: 38, pct: 1.05 },
+        { name: "NAVER", cap: 32, pct: -0.88 },
+        { name: "KB\uAE08\uC735", cap: 30, pct: 0.21 },
+        { name: "\uCE74\uCE74\uC624", cap: 18, pct: -3.4 }
+      ],
+      label: "name",
+      value: "cap",
+      change: "pct",
+      format: { suffix: "\uC870" }
+    }
+  },
   "percentage-bar": {
     type: "percentage-bar",
     ko: "\uBE44\uC911 \uB9C9\uB300. \uD3EC\uD2B8\uD3F4\uB9AC\uC624 \uBE44\uC911, \uB9E4\uC218\xB7\uB9E4\uB3C4 \uCCB4\uACB0 \uAC15\uB3C4",
@@ -358,7 +461,7 @@ function chartSchema(type, locale = "ko") {
 var exampleSpec = (type) => ({ type, ...structuredClone(CHARTS[type].example) });
 
 // src/render.tsx
-import { AreaChart, BarChart, LineChart, Point, ReferenceLine } from "@funnest/charts-react";
+import { AreaChart, BarChart, CandlestickChart, DonutChart, LineChart, Point, ReferenceLine, TreemapChart } from "@funnest/charts-react";
 import { percentages, seriesColor } from "@funnest/charts-viz";
 import { renderToStaticMarkup } from "react-dom/server";
 import { jsx } from "react/jsx-runtime";
@@ -438,10 +541,63 @@ function element(spec, width, height) {
     ))
   ];
   switch (spec.type) {
+    case "candlestick": {
+      const candles = spec.data.map((r) => {
+        const o = num(r[spec.open]);
+        const h = num(r[spec.high]);
+        const l = num(r[spec.low]);
+        const c = num(r[spec.close]);
+        if (o === null || h === null || l === null || c === null) return null;
+        const v = spec.volume ? num(r[spec.volume]) : null;
+        return { open: o, high: h, low: l, close: c, ...v !== null ? { volume: v } : {} };
+      });
+      return /* @__PURE__ */ jsx(
+        CandlestickChart,
+        {
+          data: candles,
+          width,
+          height,
+          animate: false,
+          tooltip: false,
+          valueFormatter: fmt,
+          ...xAxis ? { xAxis } : {},
+          showXAxis: spec.showXAxis ?? !!spec.x,
+          showYAxis: spec.showYAxis === false ? false : { tickLabelFormatter: fmt, width: 64 },
+          children: (spec.referenceLines ?? []).map((r, i) => /* @__PURE__ */ jsx(
+            ReferenceLine,
+            {
+              yAxisId: "price",
+              ...r.y !== void 0 ? { dataY: r.y } : {},
+              ...r.x !== void 0 ? { dataX: indexOf(spec, r.x) } : {},
+              ...r.label !== void 0 ? { label: r.label } : {},
+              ...r.color ? { color: r.color } : {}
+            },
+            `r${i}`
+          ))
+        }
+      );
+    }
+    case "treemap":
+      return /* @__PURE__ */ jsx(
+        TreemapChart,
+        {
+          width,
+          height,
+          enableTooltip: false,
+          valueFormatter: fmt,
+          ...spec.maxChange !== void 0 ? { maxChange: spec.maxChange } : {},
+          data: spec.data.map((r, i) => {
+            const label = String(r[spec.label] ?? i);
+            const change = spec.change ? num(r[spec.change]) : null;
+            const color = spec.colors?.[label];
+            return { id: `${i}`, label, value: num(r[spec.value]) ?? 0, ...change !== null ? { change } : {}, ...color ? { color } : {} };
+          })
+        }
+      );
     case "area":
       return /* @__PURE__ */ jsx(AreaChart, { ...common, stacked: spec.stacked ?? false, ...spec.curve ? { curve: spec.curve } : {}, children: extras });
     case "bar":
-      return /* @__PURE__ */ jsx(BarChart, { ...common, stacked: spec.stacked ?? false, ...spec.colorBySign ? { getBarColor: (v) => v >= 0 ? UP : DOWN } : {}, children: extras });
+      return /* @__PURE__ */ jsx(BarChart, { ...common, stacked: spec.stacked ?? false, ...spec.layout === "horizontal" ? { layout: "horizontal" } : {}, ...spec.colorBySign ? { getBarColor: (v) => v >= 0 ? UP : DOWN } : {}, children: extras });
     case "sparkline": {
       const s = series[0];
       const vals = (s?.data ?? []).filter((v) => v !== null);
@@ -511,11 +667,43 @@ var percentBarSvg = (spec, width, top, p) => {
   return bars + labels;
 };
 var textWidth = (t, size) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
+var donutSvg = (spec, width, height, p) => {
+  const fmt = valueFormatter(spec);
+  const items = spec.data.map((r, i) => {
+    const label = String(r[spec.label] ?? i);
+    return { id: `${i}`, label, value: num(r[spec.value]) ?? 0, color: spec.colors?.[label] ?? seriesColor(i) };
+  });
+  const size = Math.max(60, Math.min(height, width * 0.5));
+  const markup = renderToStaticMarkup(
+    /* @__PURE__ */ jsx(
+      DonutChart,
+      {
+        data: items,
+        size,
+        showLegend: false,
+        valueFormatter: fmt,
+        ...spec.totalLabel ? { totalLabel: spec.totalLabel } : {},
+        ...spec.innerRadius !== void 0 ? { innerRadius: spec.innerRadius } : {}
+      }
+    )
+  );
+  const svg = markup.slice(markup.indexOf("<svg"), markup.indexOf("</svg>") + 6).replace("<svg", `<svg x="0" y="${(height - size) / 2}"`);
+  const segs = percentages(items);
+  const lx = size + 28;
+  const rowH = 24;
+  const top = height / 2 - items.length * rowH / 2 + rowH / 2;
+  const labels = items.map((it, i) => {
+    const y = top + i * rowH;
+    const pct = `${(Math.round(segs[i].fraction * 1e3) / 10).toString()}%`;
+    return `<circle cx="${lx + 4}" cy="${y}" r="4" fill="${it.color}"/><text x="${lx + 14}" y="${y}" dominant-baseline="central" font-size="13" fill="${p.muted}">${esc(it.label)} <tspan fill="${p.text}" font-weight="700">${pct}</tspan> <tspan fill="${p.muted}">${esc(fmt(it.value))}</tspan></text>`;
+  }).join("");
+  return svg + labels;
+};
 function renderSvg(spec, options = {}) {
   const theme = THEMES[options.theme ?? spec.theme ?? "light"];
   const isSpark = spec.type === "sparkline";
   const width = spec.width ?? (isSpark ? 120 : 640);
-  const height = spec.height ?? (isSpark ? 36 : spec.type === "percentage-bar" ? 96 : 320);
+  const height = spec.height ?? (isSpark ? 36 : spec.type === "percentage-bar" ? 96 : spec.type === "donut" ? 220 : 320);
   const pad = isSpark ? 0 : 16;
   const innerW = width - pad * 2;
   let y = pad;
@@ -528,6 +716,8 @@ function renderSvg(spec, options = {}) {
   if (spec.type === "percentage-bar") {
     body = percentBarSvg(spec, innerW, 0, theme);
     body = `<g transform="translate(${pad},${y})">${body}</g>`;
+  } else if (spec.type === "donut") {
+    body = `<g transform="translate(${pad},${y})">${donutSvg(spec, innerW, Math.max(60, height - y - pad), theme)}</g>`;
   } else {
     const series = seriesOf(spec);
     const legend = !isSpark && (spec.legend ?? series.length > 1);
@@ -607,6 +797,57 @@ export function Chart() {
     />
   );
 }
+`;
+  }
+  if (spec.type === "candlestick") {
+    const vol = spec.volume ? `, volume: d[${lit(spec.volume)}]` : "";
+    return `import { CandlestickChart${spec.referenceLines?.length ? ", ReferenceLine" : ""} } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <CandlestickChart
+      data={data.map((d) => ({ open: d[${lit(spec.open)}], high: d[${lit(spec.high)}], low: d[${lit(spec.low)}], close: d[${lit(spec.close)}]${vol} }))}
+      height={${spec.height ?? 320}}${spec.x ? `
+      xAxis={{ data: data.map((d) => d[${lit(spec.x)}]) }}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    >${(spec.referenceLines ?? []).map((r) => `
+      <ReferenceLine yAxisId="price"${r.y !== void 0 ? ` dataY={${r.y}}` : ""}${r.label ? ` label=${lit(r.label)}` : ""} />`).join("")}
+    </CandlestickChart>
+  );
+}
+`;
+  }
+  if (spec.type === "donut") {
+    return `import { DonutChart } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <DonutChart
+      data={data.map((d) => ({ id: String(d[${lit(spec.label)}]), label: String(d[${lit(spec.label)}]), value: d[${lit(spec.value)}]${spec.colors ? `, color: (${lit(spec.colors)} as Record<string, string>)[String(d[${lit(spec.label)}])]` : ""} }))}${spec.totalLabel ? `
+      totalLabel=${lit(spec.totalLabel)}` : ""}${spec.innerRadius !== void 0 ? `
+      innerRadius={${spec.innerRadius}}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    />
+  );
+}
+`;
+  }
+  if (spec.type === "treemap") {
+    return `import { TreemapChart } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    <TreemapChart
+      height={${spec.height ?? 320}}
+      data={data.map((d, i) => ({ id: String(i), label: String(d[${lit(spec.label)}]), value: d[${lit(spec.value)}]${spec.change ? `, change: d[${lit(spec.change)}]` : ""} }))}${spec.maxChange !== void 0 ? `
+      maxChange={${spec.maxChange}}` : ""}${fmt ? "\n      valueFormatter={fmt}" : ""}
+    />
+  );
+}
 `;
   }
   const component = spec.type === "area" ? "AreaChart" : spec.type === "bar" ? "BarChart" : "LineChart";
@@ -628,6 +869,7 @@ export function Chart() {
   if (spec.stacked) props.push("stacked");
   if (spec.area && spec.area !== "none") props.push(`area=${lit(spec.area)}`);
   if (spec.curve) props.push(`curve=${lit(spec.curve)}`);
+  if (spec.type === "bar" && spec.layout === "horizontal") props.push('layout="horizontal"');
   if (spec.type === "bar" && spec.colorBySign) props.push("getBarColor={(v) => (v >= 0 ? '#F04452' : '#3182F6')}");
   if (ys.length > 1 || spec.legend) props.push("legend");
   const children = [
@@ -717,6 +959,15 @@ function suggestCharts(rows) {
   const out = [];
   const allPositive = (c) => rows.every((r) => typeof r[c] !== "number" || r[c] >= 0);
   const hasNegative = (c) => rows.some((r) => typeof r[c] === "number" && r[c] < 0);
+  const find = (...names) => numeric.find((c) => names.includes(c.toLowerCase()));
+  const ohlc = { open: find("open", "o", "\uC2DC\uAC00"), high: find("high", "h", "\uACE0\uAC00"), low: find("low", "l", "\uC800\uAC00"), close: find("close", "c", "\uC885\uAC00") };
+  if (ohlc.open && ohlc.high && ohlc.low && ohlc.close) {
+    const volume = find("volume", "vol", "v", "\uAC70\uB798\uB7C9");
+    out.push({
+      reason: { ko: "\uC2DC\uAC00\xB7\uACE0\uAC00\xB7\uC800\uAC00\xB7\uC885\uAC00\uAC00 \uC788\uC5B4 \uCE94\uB4E4 \uCC28\uD2B8\uAC00 \uC798 \uB9DE\uC544\uC694", en: "Open/high/low/close columns: candles" },
+      spec: { type: "candlestick", data: rows, ...time ? { x: time } : {}, open: ohlc.open, high: ohlc.high, low: ohlc.low, close: ohlc.close, ...volume ? { volume } : {} }
+    });
+  }
   if (time && numeric.length) {
     const magnitude = (c) => Math.max(...rows.map((r) => Math.abs(Number(r[c]) || 0)));
     const base = numeric.find(allPositive) ?? numeric[0];
@@ -748,11 +999,23 @@ function suggestCharts(rows) {
   }
   if (category && numeric.length) {
     const v = numeric[0];
+    const size = numeric.find(allPositive);
+    const change = numeric.find(hasNegative);
+    if (size && change && rows.length >= 4) {
+      out.push({
+        reason: { ko: `${size}\uB85C \uD06C\uAE30, ${change}\uB85C \uC0C9\uC744 \uC815\uD55C \uB9C8\uCF13\uB9F5`, en: `Market map: size by ${size}, color by ${change}` },
+        spec: { type: "treemap", data: rows, label: category, value: size, change }
+      });
+    }
     if (rows.length <= 8 && allPositive(v)) {
       out.push({
         reason: { ko: `${category}\uBCC4 ${v} \uBE44\uC911`, en: `Share of ${v} by ${category}` },
         spec: { type: "percentage-bar", data: rows, label: category, value: v }
       });
+      out.push({
+        reason: { ko: `${category}\uBCC4 ${v} \uBE44\uC911\uC744 \uB3C4\uB11B\uC73C\uB85C`, en: `Share of ${v} by ${category} as a donut` },
+        spec: { type: "donut", data: rows, label: category, value: v }
+      });
     }
     out.push({
       reason: { ko: `${category}\uBCC4 ${v} \uBE44\uAD50`, en: `Compare ${v} by ${category}` },

package/dist/spec.d.ts

@@ -1,7 +1,7 @@
 import { type CliLocale } from './i18n';
 /** A row of tabular data: column name → value. */
 export type Row = Record<string, unknown>;
-export type ChartType = 'line' | 'area' | 'bar' | 'percentage-bar' | 'sparkline';
+export type ChartType = 'line' | 'area' | 'bar' | 'candlestick' | 'donut' | 'treemap' | 'percentage-bar' | 'sparkline';
 export interface ReferenceLineSpec {
     y?: number;
     /** Row index, or a value of the x column. */
@@ -36,14 +36,30 @@ export interface ChartSpec {
     labels?: Record<string, string>;
     /** Colors per y column (or per row label for percentage-bar). */
     colors?: Record<string, string>;
-    /** percentage-bar: the label and value columns. */
+    /** percentage-bar / donut / treemap: the label and value columns. */
     label?: string;
     value?: string;
+    /** candlestick: OHLC (+ volume) columns. */
+    open?: string;
+    high?: string;
+    low?: string;
+    close?: string;
+    volume?: string;
+    /** treemap: change column (%) for the tile color. */
+    change?: string;
+    /** treemap: |change| that gets the full color. Default 5. */
+    maxChange?: number;
+    /** donut: text under the total. */
+    totalLabel?: string;
+    /** donut: hole size 0–0.95 (0 = pie). Default 0.68. */
+    innerRadius?: number;
     curve?: 'monotone' | 'linear' | 'step';
     area?: 'none' | 'gradient' | 'solid';
     stacked?: boolean;
     /** bar: red for ≥ 0, blue for < 0 (Korean convention). */
     colorBySign?: boolean;
+    /** bar: 'horizontal' draws one row per category (rankings, sector returns). */
+    layout?: 'vertical' | 'horizontal';
     showXAxis?: boolean;
     showYAxis?: boolean;
     legend?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnest/charts-cli",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "description": "Funnest Charts command line: list charts, validate JSON specs, render SVG/PNG/HTML, suggest charts for your data, generate React code",
   "keywords": [
     "chart",
@@ -48,8 +48,8 @@
   "dependencies": {
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
-    "@funnest/charts-react": "0.2.1",
-    "@funnest/charts-viz": "0.2.1"
+    "@funnest/charts-react": "0.4.0",
+    "@funnest/charts-viz": "0.4.0"
   },
   "optionalDependencies": {
     "@resvg/resvg-js": "^2.6.2"