@lightdash/cli 2.245.2 → 2.247.0

package/dist/vendor/template/.claude/skills/sdk-features/SKILL.md

@@ -121,7 +121,9 @@ order, `sortBy` describes result ordering, `totalColumnCount` exposes truncation
   view (headline, summary, limitations, anomalies) plus `analyse()`;
   `useInsights(result)` narrows to one chart and adds `matches(row)` so flagged
   points can be marked, with `investigate(id)` / `continueInAskAi(id)` for the
-  action menu. Render a summary block and markers; render nothing when
+  action menu. Render a summary block and markers (only `high`, `medium`,
+  `positive`; never `info`); on line charts the marker must also be the
+  `activeDot` so hover does not cover it. Render nothing when
   `status === 'unavailable'`. Full contract in `/app/references/ai-analysis.md`.
 - `ai-prompt`: `useAiPrompt()` returns `{ available, ask, loading, text, error }`;
   `ask({ prompt, sources: [{ result, label }], focus?: { row } })` sends an

package/dist/vendor/template/references/ai-analysis.md

@@ -149,11 +149,15 @@ Each anomaly:
 }
 ```
 
-Mark the flagged rows on the chart. `matches(row)` takes the raw result row, so call it per datum:
+Mark the flagged rows on the chart. `matches(row)` takes the raw result row, so call it per datum. Only `high`, `medium` and `positive` earn a marker; `info` is context for the summary (a gap, a partial period), so never paint it on the chart:
 
 ```tsx
 import { Bar, BarChart, Cell } from 'recharts';
 
+const MARKED = new Set(['high', 'medium', 'positive']);
+const marker = (insights, row) =>
+    insights.matches(row).find((a) => MARKED.has(a.severity)) ?? null;
+
 function OrdersByStatus() {
     const orders = useLightdash(ordersQuery);
     const insights = useInsights(orders);
@@ -162,7 +166,7 @@ function OrdersByStatus() {
         <BarChart data={orders.data}>
             <Bar dataKey="orders_count">
                 {orders.data.map((row) => {
-                    const flagged = insights.matches(row).length > 0;
+                    const flagged = marker(insights, row) !== null;
                     return (
                         <Cell
                             key={row.orders_status}
@@ -177,7 +181,46 @@ function OrdersByStatus() {
 }
 ```
 
-Keep the marker subtle (an outline, a dot, a badge in the tooltip), and show the anomaly `text` on hover so the viewer learns why the point is marked.
+Keep the marker subtle (an outline, a dot, a badge in the tooltip), and show the anomaly `text` on hover so the viewer learns why the point is marked. Tint by severity: `positive` is not a warning.
+
+### Markers on line and area charts must stay clickable on hover
+
+Recharts draws `activeDot` on top of `dot` while the cursor is over a point. With the default `activeDot={{ r: 5 }}` the hover dot covers the marker and takes the click, so the action menu only opens from a one-pixel rim. Render the same marker component for both, with the same click handler, or turn the hover dot off:
+
+```tsx
+// Recharts clones the dot element and merges cx, cy and payload into its
+// props, so extra props like insights and onOpenMenu pass straight through.
+const Marker = ({ cx, cy, payload, insights, onOpenMenu }) => {
+    const anomaly = marker(insights, payload);
+    return (
+        <circle
+            cx={cx}
+            cy={cy}
+            r={anomaly ? 5 : 3}
+            fill={anomaly ? 'var(--destructive)' : 'var(--chart-1)'}
+            style={{ cursor: 'pointer' }}
+            onClick={(e) => onOpenMenu(payload, e)}
+        />
+    );
+};
+
+function OrdersOverTime() {
+    const orders = useLightdash(ordersQuery);
+    const insights = useInsights(orders);
+    const [menu, setMenu] = useState(null);
+    const openMenu = (row, e) => setMenu({ row, x: e.clientX, y: e.clientY });
+    const dot = <Marker insights={insights} onOpenMenu={openMenu} />;
+
+    return (
+        <LineChart data={orders.data}>
+            <Line dataKey="orders_count" dot={dot} activeDot={dot} />
+            {/* or: activeDot={false} */}
+        </LineChart>
+    );
+}
+```
+
+Whatever element carries the click handler must be the topmost one at that position: render markers after the series, never under a hover overlay or a tooltip cursor.
 
 ## Investigate from the action menu
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightdash/cli",
-  "version": "2.245.2",
+  "version": "2.247.0",
   "description": "Lightdash CLI tool",
   "license": "MIT",
   "repository": {
@@ -22,8 +22,8 @@
     "@actions/core": "1.11.1",
     "@aws-sdk/credential-providers": "3.995.0",
     "@casl/ability": "6.8.0",
-    "@lightdash/common": "2.245.2",
-    "@lightdash/warehouses": "2.245.2",
+    "@lightdash/common": "2.247.0",
+    "@lightdash/warehouses": "2.247.0",
     "@sidvind/better-ajv-errors": "7.0.0",
     "@types/columnify": "1.5.1",
     "ajv": "8.18.0",