@x-wave/blog 2.5.0 → 2.6.0

package/README.md

@@ -368,7 +368,85 @@ Images support automatic dark mode variants. If a dark variant exists at `image-
 
 ---
 
-> **Note**: Additional markdown features may be added in the future. Check back for updates.
+#### Charts
+
+Embed responsive charts directly in your Markdown using fenced code blocks with the `chart` language identifier. The body must be valid JSON.
+
+Supported chart types: `bar`, `line`, `pie`.
+
+**Bar chart:**
+
+````mdx
+```chart
+{
+  "type": "bar",
+  "title": "Monthly Revenue",
+  "xKey": "month",
+  "data": [
+    { "month": "Jan", "revenue": 4000 },
+    { "month": "Feb", "revenue": 3000 },
+    { "month": "Mar", "revenue": 5000 }
+  ],
+  "series": [{ "key": "revenue", "name": "Revenue" }]
+}
+```
+````
+
+**Line chart:**
+
+````mdx
+```chart
+{
+  "type": "line",
+  "title": "Daily Users",
+  "xKey": "day",
+  "data": [
+    { "day": "Mon", "users": 120, "sessions": 200 },
+    { "day": "Tue", "users": 150, "sessions": 230 },
+    { "day": "Wed", "users": 180, "sessions": 260 }
+  ],
+  "series": [
+    { "key": "users", "name": "Users", "color": "#6366f1" },
+    { "key": "sessions", "name": "Sessions", "color": "#10b981" }
+  ]
+}
+```
+````
+
+**Pie chart:**
+
+````mdx
+```chart
+{
+  "type": "pie",
+  "title": "Traffic Sources",
+  "data": [
+    { "name": "Organic", "value": 400 },
+    { "name": "Referral", "value": 300 },
+    { "name": "Direct", "value": 200 }
+  ]
+}
+```
+````
+
+**Chart JSON fields:**
+
+| Field | Type | Required | Description |
+|---|---|---|---|
+| `type` | `"bar" \| "line" \| "pie"` | Yes | Chart type |
+| `data` | `object[]` | Yes | Array of data points |
+| `title` | `string` | No | Chart title displayed above |
+| `xKey` | `string` | No | Key for X-axis categories (bar/line). Default: `"name"` |
+| `xLabel` | `string` | No | Label for the X-axis |
+| `yLabel` | `string` | No | Label for the Y-axis |
+| `series` | `{ key, name?, color? }[]` | No | Data series definitions (bar/line). Auto-detected from numeric keys if omitted |
+| `nameKey` | `string` | No | Key for slice labels (pie). Default: `"name"` |
+| `valueKey` | `string` | No | Key for slice values (pie). Default: `"value"` |
+| `height` | `number` | No | Chart height in pixels. Default: `350` |
+
+Charts are fully responsive and adapt to dark/light themes automatically.
+
+---
 
 ## API reference
 

package/components/Chart/index.d.ts

@@ -0,0 +1,27 @@
+interface SeriesConfig {
+    key: string;
+    name?: string;
+    color?: string;
+}
+interface ChartConfig {
+    type: 'bar' | 'line' | 'pie';
+    data: Record<string, unknown>[];
+    title?: string;
+    xKey?: string;
+    xLabel?: string;
+    yLabel?: string;
+    series?: SeriesConfig[];
+    nameKey?: string;
+    valueKey?: string;
+    height?: number;
+}
+interface ChartBlockProps {
+    config: ChartConfig;
+}
+export declare function ChartBlock({ config }: ChartBlockProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Parses a JSON string into a ChartConfig.
+ * Returns null if the JSON is invalid or missing required fields.
+ */
+export declare function parseChartConfig(json: string): ChartConfig | null;
+export {};

package/index.d.ts

@@ -5,6 +5,7 @@ export { BlogRoot } from './components/BlogRoot';
 export { BlogSidebar } from './components/BlogSidebar';
 export type { BreadcrumbProps } from './components/Breadcrumb';
 export { Breadcrumb } from './components/Breadcrumb';
+export { ChartBlock } from './components/Chart';
 export { ContentPage } from './components/ContentPage';
 export { DocumentationLayout } from './components/DocumentationLayout';
 export { DocumentationRoutes } from './components/DocumentationRoutes';