@lightdash/cli 2.265.0 → 2.267.0

package/dist/vendor/template/src/components/insights/Markdown.tsx

@@ -0,0 +1,111 @@
+/**
+ * Renders the small Markdown subset an investigation explanation uses:
+ * headings, paragraphs, bullet and numbered lists, bold, italics and inline
+ * code. Anything else is shown as plain text. Never renders HTML.
+ */
+import type { ReactNode } from 'react';
+
+const inline = (text: string): ReactNode[] => {
+    const parts: ReactNode[] = [];
+    const pattern = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`)/g;
+    let last = 0;
+    let key = 0;
+    for (const match of text.matchAll(pattern)) {
+        const start = match.index ?? 0;
+        if (start > last) parts.push(text.slice(last, start));
+        const token = match[0];
+        if (token.startsWith('**')) {
+            parts.push(<strong key={key++}>{token.slice(2, -2)}</strong>);
+        } else if (token.startsWith('`')) {
+            parts.push(
+                <code key={key++} className="rounded bg-muted px-1 font-mono text-xs">
+                    {token.slice(1, -1)}
+                </code>,
+            );
+        } else {
+            parts.push(<em key={key++}>{token.slice(1, -1)}</em>);
+        }
+        last = start + token.length;
+    }
+    if (last < text.length) parts.push(text.slice(last));
+    return parts;
+};
+
+type Block =
+    | { kind: 'heading'; text: string }
+    | { kind: 'paragraph'; text: string }
+    | { kind: 'bullets'; items: string[] }
+    | { kind: 'numbered'; items: string[] };
+
+const parse = (source: string): Block[] => {
+    const blocks: Block[] = [];
+    const lines = source.replace(/\r\n/g, '\n').split('\n');
+    let paragraph: string[] = [];
+    const flush = () => {
+        if (paragraph.length) {
+            blocks.push({ kind: 'paragraph', text: paragraph.join(' ') });
+            paragraph = [];
+        }
+    };
+    for (const raw of lines) {
+        const line = raw.trim();
+        const heading = /^#{1,6}\s+(.*)$/.exec(line);
+        const bullet = /^[-*]\s+(.*)$/.exec(line);
+        const numbered = /^\d+[.)]\s+(.*)$/.exec(line);
+        if (line === '') {
+            flush();
+        } else if (heading) {
+            flush();
+            blocks.push({ kind: 'heading', text: heading[1] });
+        } else if (bullet) {
+            flush();
+            const prev = blocks[blocks.length - 1];
+            if (prev?.kind === 'bullets') prev.items.push(bullet[1]);
+            else blocks.push({ kind: 'bullets', items: [bullet[1]] });
+        } else if (numbered) {
+            flush();
+            const prev = blocks[blocks.length - 1];
+            if (prev?.kind === 'numbered') prev.items.push(numbered[1]);
+            else blocks.push({ kind: 'numbered', items: [numbered[1]] });
+        } else {
+            paragraph.push(line);
+        }
+    }
+    flush();
+    return blocks;
+};
+
+export function Markdown({ text }: { text: string }) {
+    return (
+        <div className="space-y-2 leading-relaxed">
+            {parse(text).map((block, index) => {
+                switch (block.kind) {
+                    case 'heading':
+                        return (
+                            <p key={index} className="pt-1 font-semibold">
+                                {inline(block.text)}
+                            </p>
+                        );
+                    case 'bullets':
+                        return (
+                            <ul key={index} className="list-disc space-y-1 pl-5">
+                                {block.items.map((item, i) => (
+                                    <li key={i}>{inline(item)}</li>
+                                ))}
+                            </ul>
+                        );
+                    case 'numbered':
+                        return (
+                            <ol key={index} className="list-decimal space-y-1 pl-5">
+                                {block.items.map((item, i) => (
+                                    <li key={i}>{inline(item)}</li>
+                                ))}
+                            </ol>
+                        );
+                    default:
+                        return <p key={index}>{inline(block.text)}</p>;
+                }
+            })}
+        </div>
+    );
+}

package/dist/vendor/template/src/components/insights/index.ts

@@ -0,0 +1,10 @@
+export { InsightsSummary } from './InsightsSummary';
+export { InvestigationCard } from './InvestigationCard';
+export { InvestigateMenuItem } from './InvestigateMenuItem';
+export {
+    InsightMarker,
+    insightCellProps,
+    insightTooltipText,
+    markerFor,
+    MARKER_COLOR,
+} from './markers';

package/dist/vendor/template/src/components/insights/markers.tsx

@@ -0,0 +1,111 @@
+/**
+ * Severity-aware markers for query-bound charts. `high`, `medium` and
+ * `positive` earn a marker; `info` is context for the summary and never
+ * paints a data point. `fieldId` is the series' `dataKey`, so an anomaly on
+ * one metric never marks the other series of the same chart.
+ */
+import type { CSSProperties, MouseEvent } from 'react';
+import type { Insight, QueryInsights } from '@lightdash/query-sdk';
+
+const MARKED = new Set<Insight['severity']>(['high', 'medium', 'positive']);
+
+export const MARKER_COLOR: Record<Insight['severity'], string> = {
+    high: 'var(--destructive)',
+    medium: 'var(--chart-4)',
+    positive: 'var(--chart-2)',
+    info: 'var(--muted-foreground)',
+};
+
+/** The anomaly that should mark this row of this series, or null. */
+export function markerFor(
+    insights: QueryInsights,
+    row: Record<string, unknown> | null | undefined,
+    fieldId?: string,
+): Insight | null {
+    return (
+        insights
+            .matches(row as never, fieldId)
+            .find((a) => MARKED.has(a.severity)) ?? null
+    );
+}
+
+type MarkerProps = {
+    insights: QueryInsights;
+    /** The series' `dataKey`; passed through to `onOpenMenu`. */
+    fieldId: string;
+    /** Opens the point's action menu with the row, the event and the series. */
+    onOpenMenu: (
+        row: Record<string, unknown>,
+        event: MouseEvent,
+        fieldId: string,
+    ) => void;
+    /** Series colour for unflagged points; defaults to the first chart colour. */
+    color?: string;
+    // Recharts fills these in when the element is used as `dot` / `activeDot`.
+    cx?: number;
+    cy?: number;
+    payload?: Record<string, unknown>;
+};
+
+/**
+ * Line / area dot renderer. Pass the same element as both `dot` and
+ * `activeDot` so the hover dot never covers the marker and steals the click:
+ *
+ *   const dot = <InsightMarker insights={insights} fieldId="revenue" onOpenMenu={openMenu} />;
+ *   <Line dataKey="revenue" dot={dot} activeDot={dot} />
+ */
+export function InsightMarker({
+    insights,
+    fieldId,
+    onOpenMenu,
+    color = 'var(--chart-1)',
+    cx,
+    cy,
+    payload,
+}: MarkerProps) {
+    if (cx == null || cy == null || !payload) return null;
+    const anomaly = markerFor(insights, payload, fieldId);
+    const style: CSSProperties = { cursor: 'pointer' };
+    return (
+        <circle
+            cx={cx}
+            cy={cy}
+            r={anomaly ? 5 : 3}
+            fill={anomaly ? MARKER_COLOR[anomaly.severity] : color}
+            stroke={anomaly ? 'var(--background)' : 'none'}
+            strokeWidth={anomaly ? 1.5 : 0}
+            style={style}
+            onClick={(event) => onOpenMenu(payload, event, fieldId)}
+        />
+    );
+}
+
+/**
+ * Bar / cell props for the same treatment on categorical charts:
+ *
+ *   <Bar dataKey="revenue" onClick={(d, _i, e) => openMenu(d.payload, e, 'revenue')}>
+ *     {rows.map((row) => <Cell key={row.status} {...insightCellProps(insights, row, 'revenue')} />)}
+ *   </Bar>
+ */
+export function insightCellProps(
+    insights: QueryInsights,
+    row: Record<string, unknown>,
+    fieldId: string,
+): { stroke?: string; strokeWidth?: number; style: CSSProperties } {
+    const anomaly = markerFor(insights, row, fieldId);
+    return {
+        stroke: anomaly ? MARKER_COLOR[anomaly.severity] : undefined,
+        strokeWidth: anomaly ? 2 : 0,
+        style: { cursor: 'pointer' },
+    };
+}
+
+/** Text for a tooltip line under a value; null when that series' row is not
+ *  flagged. Omit `fieldId` to take the first flagged series of the row. */
+export function insightTooltipText(
+    insights: QueryInsights,
+    row: Record<string, unknown> | null | undefined,
+    fieldId?: string,
+): string | null {
+    return markerFor(insights, row, fieldId)?.text ?? null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightdash/cli",
-  "version": "2.265.0",
+  "version": "2.267.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.265.0",
-    "@lightdash/warehouses": "2.265.0",
+    "@lightdash/common": "2.267.0",
+    "@lightdash/warehouses": "2.267.0",
     "@sidvind/better-ajv-errors": "7.0.0",
     "@types/columnify": "1.5.1",
     "ajv": "8.18.0",