aliencharts 0.1.1 → 0.1.3

package/README.md

@@ -1,4 +1,7 @@
-# AlienCharts
+<h1 align="center">
+  <img src="./assets/aliencharts_logo_small.png" alt="AlienCharts logo" width="88" height="88"><br>
+  <img src="./assets/aliencharts_title.svg" alt="AlienCharts" height="42">
+</h1>
 
 GPU-rendered chart grid for multi-metric dashboards — such as monitoring AI training runs, where you need many live-updating charts with millions of points each.
 
@@ -64,6 +67,43 @@ export default function Dashboard() {
 
 For a fuller example, including live appending and theming — see [`examples/DemoPage.jsx`](./examples/DemoPage.jsx).
 
+### Drawings
+
+Drawings are controlled by your app. Keep the drawing array and active tool in state, then pass that state into `ChartGrid`:
+
+```jsx
+import { useCallback, useState } from "react";
+import { ChartGrid } from "aliencharts";
+
+export default function Dashboard({ charts }) {
+  const [drawings, setDrawings] = useState([]);
+  const [activeDrawingTool, setActiveDrawingTool] = useState(null);
+  const [selectedDrawingId, setSelectedDrawingId] = useState(null);
+
+  const createDrawingId = useCallback(
+    ({ chartId, type }) => `${chartId}:${type}:${crypto.randomUUID()}`,
+    [],
+  );
+
+  return (
+    <ChartGrid
+      charts={charts}
+      drawings={drawings}
+      onDrawingsChange={setDrawings}
+      activeDrawingTool={activeDrawingTool}
+      onActiveDrawingToolChange={setActiveDrawingTool}
+      selectedDrawingId={selectedDrawingId}
+      onSelectedDrawingIdChange={setSelectedDrawingId}
+      createDrawingId={createDrawingId}
+    />
+  );
+}
+```
+
+Supported drawing tools are `"trendline"`, `"hline"`, `"vline"`, and `"pin"`. Since drawings live outside the component, you can persist them however you want, such as local storage, a database, or app state.
+
+Set `disableDrawings` when you want a read-only chart toolbar without drawing or moving-average tools.
+
 ## API
 
 ### `createSeries(options)`
@@ -97,6 +137,15 @@ Renders a responsive grid of charts. Commonly used props:
 | `xAxisLabel` | `string` | `"STEP"` | Label shown on the x-axis. |
 | `backgroundColor` | `string` | — | Chart background color. |
 | `antialiasLines` | `boolean` | `false` | Enable line antialiasing. |
+| `drawings` | `Drawing[]` | `[]` | Controlled drawing objects. |
+| `onDrawingsChange` | `(drawings) => void` | — | Called when drawings are created, edited, deleted, or styled. |
+| `activeDrawingTool` | `"trendline" \| "hline" \| "vline" \| "pin" \| null` | `null` | Controlled active drawing tool. |
+| `onActiveDrawingToolChange` | `(tool) => void` | — | Called when the toolbar or hotkeys change the active drawing tool. |
+| `selectedDrawingId` | `string \| null` | `null` | Controlled selected drawing id. |
+| `onSelectedDrawingIdChange` | `(id) => void` | — | Called when a drawing is selected or deselected. |
+| `createDrawingId` | `({ chartId, type }) => string` | — | Optional id factory for new drawings. |
+| `disableDrawings` | `boolean` | `false` | Hide and disable drawing and moving-average tools. |
+| `onChartContextMenu` | `({ chart, event, point }) => void` | — | Called on chart right-click. Use it to render your own context menu. |
 
 ## License
 

package/assets/aliencharts_title.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="194" height="46" viewBox="0 0 194 46" role="img" aria-label="AlienCharts">
+  <text x="2" y="34" fill="#92FF72" stroke="#18303D" stroke-width="2" stroke-linejoin="round" paint-order="stroke fill" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" font-size="34" font-weight="600">AlienCharts</text>
+</svg>