chartifypdf 0.3.0 → 0.4.0

package/README.md

@@ -1,13 +1,19 @@
 # ChartifyPDF
 
-A zero-dependency React line chart component built with pure SVG. Supports zoom, tooltips, responsive sizing, and customizable styling.
+A zero-dependency React line chart component built with pure SVG. Supports semantic zoom, smooth curves, hover highlight, peak markers, context menu, export to PDF/PNG/SVG, and more.
 
 ## Features
 
 - **Pure SVG** — no external charting libraries
 - **TypeScript** — fully typed props and exports
 - **Responsive** — auto-resizes via ResizeObserver, or set fixed dimensions
-- **Zoom & Pan** — scroll to zoom, drag to pan, with configurable controls
+- **Semantic Zoom** — domain-based zoom with Ctrl+scroll, labels auto-update granularity
+- **Smooth Curves** — monotone cubic (Fritsch-Carlson) and natural cubic spline
+- **Hover Highlight** — hovered series stays bright, others dim with smooth transition
+- **Peak Markers** — configurable icons (arrow/diamond/star) at peak data points
+- **Right-Click Context Menu** — data table popover showing all series values
+- **Export** — export chart as PDF, PNG, or SVG with one click
+- **Click to Zoom** — click a data point to zoom in, double-click to reset
 - **Tooltips** — hover to see data values, with custom formatters and renderers
 - **Multi-series** — plot multiple data lines on one chart
 - **Customizable** — colors, axes, grid lines, fonts, margins, and more
@@ -67,6 +73,10 @@ function App() {
 | `className` | `string` | — | CSS class for container div |
 | `onPointClick` | `(point, series) => void` | — | Click handler for data points |
 | `ariaLabel` | `string` | `"Line chart"` | Accessibility label |
+| `curveType` | `CurveType` | `"linear"` | Global curve type: `"linear"` \| `"monotone"` \| `"natural"` |
+| `peaks` | `PeakConfig[]` | — | Peak date markers |
+| `contextMenu` | `ContextMenuConfig` | — | Right-click context menu config |
+| `export` | `ExportConfig` | — | Export button config |
 
 ### `DataSeries`
 
@@ -80,6 +90,7 @@ function App() {
 | `strokeDasharray` | `string` | — | SVG dash pattern (e.g. `"5 3"`) |
 | `showDots` | `boolean` | `false` | Show circles at data points |
 | `dotRadius` | `number` | `3.5` | Dot circle radius |
+| `curveType` | `CurveType` | — | Per-series curve override |
 
 ### `AxisConfig`
 
@@ -92,6 +103,7 @@ function App() {
 | `max` | `number` | auto | Override axis maximum |
 | `gridLines` | `boolean` | Y: `true`, X: `false` | Show grid lines |
 | `gridLineColor` | `string` | `"#e0e0e0"` | Grid line color |
+| `integerTicks` | `boolean` | `false` | Force integer-only ticks (useful for date timelines) |
 
 ### `TooltipConfig`
 
@@ -115,6 +127,35 @@ function App() {
 | `controlsPosition` | `string` | `"top-right"` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` |
 | `enableWheel` | `boolean` | `true` | Zoom with mouse wheel |
 | `enablePan` | `boolean` | `true` | Pan by dragging |
+| `requireCtrlKey` | `boolean` | `true` | Require Ctrl/Cmd key for wheel zoom (prevents accidental page scroll) |
+| `enableClickZoom` | `boolean` | `false` | Click to zoom into a data point, double-click to reset |
+
+### `PeakConfig`
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `x` | `number` | *required* | X position of the peak |
+| `label` | `string` | — | Label text above the marker |
+| `color` | `string` | `"#ef4444"` | Marker color |
+| `icon` | `string` | `"arrow"` | `"arrow"` \| `"diamond"` \| `"star"` |
+
+### `ContextMenuConfig`
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enabled` | `boolean` | `false` | Enable right-click context menu |
+| `backgroundColor` | `string` | `"#ffffff"` | Menu background color |
+| `textColor` | `string` | `"#1f2937"` | Menu text color |
+| `borderColor` | `string` | `"#e5e7eb"` | Menu border color |
+
+### `ExportConfig`
+
+| Field | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enabled` | `boolean` | `false` | Show export button |
+| `buttonPosition` | `string` | `"top-right"` | `"top-left"` \| `"top-right"` \| `"bottom-left"` \| `"bottom-right"` |
+| `fileName` | `string` | `"chart"` | Exported file name (without extension) |
+| `format` | `string` | `"pdf"` | `"pdf"` \| `"png"` \| `"svg"` |
 
 ### `ChartStyle`
 
@@ -144,6 +185,31 @@ function App() {
 
 The chart fills its parent container's width and updates on resize.
 
+### Smooth Curved Lines
+
+```tsx
+<LineChart
+  data={data}
+  curveType="monotone"
+  width={800}
+  height={400}
+/>
+```
+
+Available curve types:
+- `"linear"` — straight lines (default)
+- `"monotone"` — Fritsch-Carlson monotone cubic, no overshoot (best for data)
+- `"natural"` — natural cubic spline, smoother but may overshoot
+
+Per-series override:
+
+```tsx
+const data = [
+  { id: "a", name: "Smooth", data: [...], curveType: "monotone" },
+  { id: "b", name: "Linear", data: [...], curveType: "linear" },
+];
+```
+
 ### Multi-series with Custom Colors
 
 ```tsx
@@ -167,19 +233,91 @@ const data = [
 <LineChart data={data} width={800} height={400} />
 ```
 
-### With Zoom and Custom Axes
+Hover over any line to highlight it — the hovered series stays at full opacity while others dim to 20%.
+
+### Semantic Zoom with Integer Timeline
 
 ```tsx
 <LineChart
   data={data}
   width={800}
   height={400}
-  xAxis={{ label: "Month", tickCount: 12, gridLines: true }}
-  yAxis={{ label: "Revenue ($)", tickFormat: (v) => `$${v}` }}
-  zoom={{ enabled: true, maxScale: 5, controlsPosition: "top-left" }}
+  xAxis={{
+    label: "Day",
+    integerTicks: true,
+    tickFormat: (v) => `Day ${v}`,
+  }}
+  zoom={{
+    enabled: true,
+    maxScale: 5,
+    requireCtrlKey: true,
+    enableClickZoom: true,
+  }}
 />
 ```
 
+- **Ctrl + scroll** to zoom — page scrolls normally without Ctrl
+- **Click** a data point to zoom 2x centered at that point
+- **Double-click** to reset zoom
+- X-axis labels automatically update granularity when zoomed
+- `integerTicks: true` prevents decimal values on date timelines
+
+### Peak Markers
+
+```tsx
+<LineChart
+  data={data}
+  peaks={[
+    { x: 3, label: "Peak", icon: "star", color: "#ef4444" },
+    { x: 7, label: "ATH", icon: "arrow" },
+  ]}
+/>
+```
+
+### Right-Click Context Menu
+
+```tsx
+<LineChart
+  data={data}
+  contextMenu={{
+    enabled: true,
+    backgroundColor: "#1a1a2e",
+    textColor: "#eee",
+    borderColor: "#333",
+  }}
+/>
+```
+
+Right-click anywhere on the chart to see a data table showing all series values at the nearest X position. Press Escape or click outside to close.
+
+### Export to PDF/PNG/SVG
+
+```tsx
+<LineChart
+  data={data}
+  export={{
+    enabled: true,
+    format: "png",
+    fileName: "my-chart",
+    buttonPosition: "top-right",
+  }}
+/>
+```
+
+A download button appears in the chart. Click to export.
+
+For programmatic export:
+
+```tsx
+import { exportChart, exportChartAsPdf, exportChartAsPng, exportChartAsSvg } from "chartifypdf";
+
+// Using a ref to the SVG element
+const svgElement = document.querySelector("svg");
+await exportChart(svgElement, "pdf", "my-chart");
+await exportChartAsPng(svgElement, "my-chart");
+await exportChartAsSvg(svgElement, "my-chart");
+```
+
 ### Custom Tooltip
 
 ```tsx
@@ -231,20 +369,63 @@ const data = [
 
 Note: Set `showDots: true` on the series to make points clickable.
 
+### Full-featured Example
+
+```tsx
+<LineChart
+  data={data}
+  width={900}
+  height={500}
+  curveType="monotone"
+  xAxis={{ label: "Date", integerTicks: true, gridLines: true }}
+  yAxis={{ label: "Value ($)", tickFormat: (v) => `$${v}` }}
+  zoom={{
+    enabled: true,
+    maxScale: 8,
+    requireCtrlKey: true,
+    enableClickZoom: true,
+  }}
+  peaks={[{ x: 15, label: "Peak", icon: "star" }]}
+  contextMenu={{ enabled: true }}
+  export={{ enabled: true, format: "png", fileName: "report" }}
+  animation={{ enabled: true }}
+/>
+```
+
 ## Exported Hooks
 
 For advanced usage, you can import the hooks directly:
 
 ```tsx
-import { useChartDimensions, useScales, useZoom, useTooltip } from "chartifypdf";
+import {
+  useChartDimensions,
+  useDataDomain,
+  useScales,
+  useZoom,
+  useTooltip,
+} from "chartifypdf";
 ```
 
 | Hook | Purpose |
 |------|---------|
 | `useChartDimensions` | Responsive container measurement via ResizeObserver |
-| `useScales` | Compute linear scales, ticks, and domains from data |
-| `useZoom` | Manage zoom/pan state and event handlers |
-| `useTooltip` | Track mouse position and find nearest data point |
+| `useDataDomain` | Extract full X/Y domain from data series |
+| `useScales` | Compute linear scales, ticks, and domains (supports view domain override) |
+| `useZoom` | Domain-based semantic zoom/pan state and event handlers |
+| `useTooltip` | Track mouse position and find nearest data point with Y-proximity detection |
+
+## Exported Utilities
+
+```tsx
+import { exportChart, exportChartAsPdf, exportChartAsPng, exportChartAsSvg } from "chartifypdf";
+```
+
+| Utility | Description |
+|---------|-------------|
+| `exportChart(svg, format, fileName)` | Export SVG element as PDF, PNG, or SVG |
+| `exportChartAsPdf(svg, fileName)` | Export as PDF (opens print dialog) |
+| `exportChartAsPng(svg, fileName)` | Export as PNG (2x resolution) |
+| `exportChartAsSvg(svg, fileName)` | Export as SVG file |
 
 ## Browser Support
 
@@ -252,6 +433,7 @@ Works in all modern browsers that support:
 - SVG
 - ResizeObserver
 - CSS transitions (for animation)
+- Canvas API (for PNG/PDF export)
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartifypdf",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A zero-dependency React line chart component using pure SVG. Supports zoom, tooltip, responsive sizing, and customizable styling.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",