@finos/legend-lego 2.0.202 → 2.0.203

package/src/legend-ai/components/LegendAIAnalysisPanel.tsx

@@ -18,7 +18,11 @@ import { useMemo } from 'react';
 import { LegendAIChartType } from '../LegendAI_LegendApplicationPlugin_Extension.js';
 import type { LegendAIGridData } from '../LegendAITypes.js';
 import { analyzeGridData } from './LegendAIAnalysisUtils.js';
-import { LegendAIBarChart, LegendAIDonutChart } from './LegendAICharts.js';
+import {
+  LegendAIBarChart,
+  LegendAIDonutChart,
+  LegendAILineChart,
+} from './LegendAICharts.js';
 
 export const LegendAIAnalysisPanel = (props: {
   gridData: LegendAIGridData;
@@ -27,21 +31,42 @@ export const LegendAIAnalysisPanel = (props: {
 }): React.ReactNode => {
   const { gridData, summary, SummaryRenderer } = props;
 
-  const { metrics, chartType, chartData, numericColumnName } = useMemo(
-    () => analyzeGridData(gridData),
-    [gridData],
-  );
+  const {
+    metrics,
+    chartType,
+    chartData,
+    numericColumnName,
+    categoryColumnName,
+  } = useMemo(() => analyzeGridData(gridData), [gridData]);
 
-  let chartTitle: string | undefined;
-  if (numericColumnName !== undefined) {
-    chartTitle =
-      chartType === LegendAIChartType.PIE
+  const chartTitle = useMemo(() => {
+    if (chartType === LegendAIChartType.LINE && numericColumnName) {
+      return categoryColumnName
+        ? `${numericColumnName} over ${categoryColumnName}`
+        : `${numericColumnName} Trend`;
+    }
+    if (numericColumnName !== undefined) {
+      return chartType === LegendAIChartType.PIE
         ? `${numericColumnName} Distribution`
         : `Top ${chartData.length} by ${numericColumnName}`;
-  }
+    }
+    if (categoryColumnName !== undefined) {
+      return `${categoryColumnName} Distribution`;
+    }
+    return undefined;
+  }, [chartType, numericColumnName, categoryColumnName, chartData.length]);
 
   const chartTitleProp = chartTitle === undefined ? {} : { title: chartTitle };
 
+  let chartElement: React.ReactNode;
+  if (chartType === LegendAIChartType.LINE) {
+    chartElement = <LegendAILineChart data={chartData} {...chartTitleProp} />;
+  } else if (chartType === LegendAIChartType.PIE) {
+    chartElement = <LegendAIDonutChart data={chartData} {...chartTitleProp} />;
+  } else {
+    chartElement = <LegendAIBarChart data={chartData} {...chartTitleProp} />;
+  }
+
   return (
     <div className="legend-ai-analysis">
       {metrics.length > 0 && (
@@ -65,13 +90,7 @@ export const LegendAIAnalysisPanel = (props: {
       )}
 
       {chartData.length > 0 && (
-        <div className="legend-ai-analysis__chart-section">
-          {chartType === LegendAIChartType.PIE ? (
-            <LegendAIDonutChart data={chartData} {...chartTitleProp} />
-          ) : (
-            <LegendAIBarChart data={chartData} {...chartTitleProp} />
-          )}
-        </div>
+        <div className="legend-ai-analysis__chart-section">{chartElement}</div>
       )}
 
       <div className="legend-ai-analysis__narrative">

package/src/legend-ai/components/LegendAIAnalysisUtils.ts

@@ -26,15 +26,17 @@ const CHART_PALETTE_COUNT = 10;
 const MAX_CHART_ITEMS = 10;
 const TOP_N_ITEMS = 5;
 const MAX_PROFILE_SAMPLE = 1000;
-const MAX_KEY_METRICS = 4;
+const MAX_KEY_METRICS = 6;
 const MAX_METRIC_COLUMNS = 5;
 const MAX_BAR_CHART_ROWS = 20;
 const MAX_PIE_CHART_ROWS = 6;
+const CONCENTRATION_THRESHOLD = 0.6;
 
 interface ColumnProfile {
   name: string;
   isNumeric: boolean;
   isString: boolean;
+  isDate: boolean;
   uniqueCount: number;
   nonNullCount: number;
   numericValues: number[];
@@ -45,6 +47,52 @@ export interface LegendAIGridAnalysis {
   chartType: LegendAIChartType;
   chartData: LegendAIChartDataPoint[];
   numericColumnName: string | undefined;
+  categoryColumnName: string | undefined;
+}
+
+const DATE_NAME_PATTERN = /(?:date|time|timestamp)|(?:_dt$)/i;
+
+function looksLikeDateValue(v: unknown): boolean {
+  if (!isString(v)) {
+    return false;
+  }
+  // ISO date patterns: 2024-01-15, 2024-01-15T10:30:00, etc.
+  return /^\d{4}-\d{2}-\d{2}/.test(v);
+}
+
+function profileRowValues(
+  rows: Record<string, unknown>[],
+  field: string,
+): {
+  nonNullCount: number;
+  stringCount: number;
+  dateCount: number;
+  numericValues: number[];
+  unique: Set<string>;
+} {
+  let nonNullCount = 0;
+  let stringCount = 0;
+  let dateCount = 0;
+  const numericValues: number[] = [];
+  const unique = new Set<string>();
+  for (const r of rows) {
+    const v = r[field];
+    if (v === null || v === undefined) {
+      continue;
+    }
+    nonNullCount++;
+    unique.add(isString(v) ? v : JSON.stringify(v));
+    if (isNumber(v)) {
+      numericValues.push(v);
+    }
+    if (isString(v)) {
+      stringCount++;
+      if (looksLikeDateValue(v)) {
+        dateCount++;
+      }
+    }
+  }
+  return { nonNullCount, stringCount, dateCount, numericValues, unique };
 }
 
 function profileColumns(gridData: LegendAIGridData): ColumnProfile[] {
@@ -55,29 +103,16 @@ function profileColumns(gridData: LegendAIGridData): ColumnProfile[] {
 
   return gridData.columnDefs.map((col) => {
     const field = col.field ?? col.colId ?? '';
-    let nonNullCount = 0;
-    let stringCount = 0;
-    const numericValues: number[] = [];
-    const unique = new Set<string>();
-
-    for (const r of rows) {
-      const v = r[field];
-      if (v !== null && v !== undefined) {
-        nonNullCount++;
-        unique.add(String(v));
-        if (isNumber(v)) {
-          numericValues.push(v);
-        }
-        if (isString(v)) {
-          stringCount++;
-        }
-      }
-    }
-
+    const { nonNullCount, stringCount, dateCount, numericValues, unique } =
+      profileRowValues(rows, field);
+    const isDateCol =
+      (dateCount > 0 && dateCount >= nonNullCount * 0.8) ||
+      (nonNullCount === 0 && DATE_NAME_PATTERN.test(field));
     return {
       name: field,
       isNumeric: numericValues.length === nonNullCount && nonNullCount > 0,
       isString: nonNullCount > 0 && stringCount === nonNullCount,
+      isDate: isDateCol,
       uniqueCount: unique.size,
       nonNullCount,
       numericValues,
@@ -143,9 +178,76 @@ function computeNumericMetrics(
   }
 }
 
+function computeConcentrationMetric(
+  profiles: ColumnProfile[],
+  gridData: LegendAIGridData,
+): LegendAIKeyMetric | undefined {
+  const catCol = findBestCategoricalColumn(profiles, gridData.rowData.length);
+  if (!catCol || catCol.uniqueCount < 3) {
+    return undefined;
+  }
+  const freqMap = new Map<string, number>();
+  for (const row of gridData.rowData) {
+    const val = String(row[catCol.name] ?? '');
+    if (val.length > 0) {
+      freqMap.set(val, (freqMap.get(val) ?? 0) + 1);
+    }
+  }
+  const sorted = [...freqMap.values()].sort((a, b) => b - a);
+  const topCount = Math.min(3, sorted.length);
+  let topSum = 0;
+  for (let i = 0; i < topCount; i++) {
+    const count = sorted[i];
+    if (count !== undefined) {
+      topSum += count;
+    }
+  }
+  const pct = topSum / gridData.rowData.length;
+  if (pct >= CONCENTRATION_THRESHOLD) {
+    return {
+      label: `Top ${topCount} ${catCol.name}`,
+      value: `${Math.round(pct * 100)}%`,
+      detail: 'of all records',
+    };
+  }
+  return undefined;
+}
+
+function computeDateRangeMetric(
+  profiles: ColumnProfile[],
+  gridData: LegendAIGridData,
+): LegendAIKeyMetric | undefined {
+  const dateCol = profiles.find((c) => c.isDate);
+  if (!dateCol) {
+    return undefined;
+  }
+  let minDate: string | undefined;
+  let maxDate: string | undefined;
+  for (const row of gridData.rowData) {
+    const v = row[dateCol.name];
+    if (isString(v) && v.length >= 10) {
+      const d = v.slice(0, 10);
+      if (!minDate || d < minDate) {
+        minDate = d;
+      }
+      if (!maxDate || d > maxDate) {
+        maxDate = d;
+      }
+    }
+  }
+  if (minDate && maxDate && minDate !== maxDate) {
+    return {
+      label: 'Date Range',
+      value: `${minDate} – ${maxDate}`,
+    };
+  }
+  return undefined;
+}
+
 function computeKeyMetricsFromProfiles(
   profiles: ColumnProfile[],
   rowCount: number,
+  gridData?: LegendAIGridData,
 ): LegendAIKeyMetric[] {
   const metrics: LegendAIKeyMetric[] = [];
 
@@ -154,9 +256,11 @@ function computeKeyMetricsFromProfiles(
     value: rowCount.toLocaleString(),
   });
 
-  const numericCol = profiles.find(
+  // Primary numeric column
+  const numericCols = profiles.filter(
     (c) => c.isNumeric && c.numericValues.length > 0,
   );
+  const numericCol = numericCols[0];
   if (numericCol) {
     computeNumericMetrics(numericCol, metrics);
   }
@@ -171,6 +275,36 @@ function computeKeyMetricsFromProfiles(
     });
   }
 
+  // Second numeric column (if distinct from primary)
+  const secondNumeric = numericCols[1];
+  if (secondNumeric && metrics.length < MAX_KEY_METRICS) {
+    let sum2 = 0;
+    for (const n of secondNumeric.numericValues) {
+      sum2 += n;
+    }
+    const avg2 = sum2 / secondNumeric.numericValues.length;
+    metrics.push({
+      label: `Avg ${secondNumeric.name}`,
+      value: formatNumber(avg2),
+    });
+  }
+
+  // Date range metric
+  if (gridData && metrics.length < MAX_KEY_METRICS) {
+    const dateMetric = computeDateRangeMetric(profiles, gridData);
+    if (dateMetric) {
+      metrics.push(dateMetric);
+    }
+  }
+
+  // Concentration metric (top-3 share)
+  if (gridData && metrics.length < MAX_KEY_METRICS) {
+    const concentrationMetric = computeConcentrationMetric(profiles, gridData);
+    if (concentrationMetric) {
+      metrics.push(concentrationMetric);
+    }
+  }
+
   return metrics.slice(0, MAX_KEY_METRICS);
 }
 
@@ -180,6 +314,7 @@ export function computeKeyMetrics(
   return computeKeyMetricsFromProfiles(
     profileColumns(gridData),
     gridData.rowData.length,
+    gridData,
   );
 }
 
@@ -189,6 +324,12 @@ function inferChartTypeFromProfiles(
 ): LegendAIChartType {
   const numericCols = profiles.filter((c) => c.isNumeric);
   const stringCols = profiles.filter((c) => c.isString && c.uniqueCount > 1);
+  const dateCols = profiles.filter((c) => c.isDate);
+
+  // Date + numeric → LINE chart (time series)
+  if (dateCols.length >= 1 && numericCols.length >= 1 && rowCount > 1) {
+    return LegendAIChartType.LINE;
+  }
 
   if (
     stringCols.length >= 1 &&
@@ -318,6 +459,20 @@ export function findNumericColumnName(
   return findNumericColumnNameFromProfiles(profileColumns(gridData), gridData);
 }
 
+function findCategoryColumnNameFromProfiles(
+  profiles: ColumnProfile[],
+  gridData: LegendAIGridData,
+): string | undefined {
+  const catCol = findBestCategoricalColumn(profiles, gridData.rowData.length);
+  if (!catCol) {
+    return undefined;
+  }
+  const colDef = gridData.columnDefs.find(
+    (c) => (c.field ?? c.colId ?? '') === catCol.name,
+  );
+  return colDef?.headerName ?? colDef?.field;
+}
+
 export function analyzeGridData(
   gridData: LegendAIGridData,
 ): LegendAIGridAnalysis {
@@ -325,12 +480,13 @@ export function analyzeGridData(
   const rowCount = gridData.rowData.length;
   const chartType = inferChartTypeFromProfiles(profiles, rowCount);
   return {
-    metrics: computeKeyMetricsFromProfiles(profiles, rowCount),
+    metrics: computeKeyMetricsFromProfiles(profiles, rowCount, gridData),
     chartType,
     chartData:
       chartType === LegendAIChartType.NONE
         ? []
         : computeChartDataFromProfiles(profiles, gridData),
     numericColumnName: findNumericColumnNameFromProfiles(profiles, gridData),
+    categoryColumnName: findCategoryColumnNameFromProfiles(profiles, gridData),
   };
 }

package/src/legend-ai/components/LegendAICharts.tsx

@@ -164,3 +164,163 @@ export const LegendAIDonutChart = (props: {
     </div>
   );
 };
+
+// ─── Line chart ──────────────────────────────────────────────────────────────
+
+const LINE_SVG_WIDTH = 400;
+const LINE_SVG_HEIGHT = 180;
+const LINE_PADDING = { top: 16, right: 16, bottom: 28, left: 52 };
+
+export const LegendAILineChart = (props: {
+  data: LegendAIChartDataPoint[];
+  title?: string;
+}): React.ReactNode => {
+  const { data, title } = props;
+
+  const { points, polyline, minVal, maxVal } = useMemo(() => {
+    if (data.length === 0) {
+      return { points: [], polyline: '', minVal: 0, maxVal: 0 };
+    }
+    const plotW = LINE_SVG_WIDTH - LINE_PADDING.left - LINE_PADDING.right;
+    const plotH = LINE_SVG_HEIGHT - LINE_PADDING.top - LINE_PADDING.bottom;
+    const firstVal = data[0];
+    if (!firstVal) {
+      return { points: [], polyline: '', minVal: 0, maxVal: 0 };
+    }
+    let lo = firstVal.value;
+    let hi = lo;
+    for (const d of data) {
+      if (d.value < lo) {
+        lo = d.value;
+      }
+      if (d.value > hi) {
+        hi = d.value;
+      }
+    }
+    const range = hi - lo || 1;
+    const pts = data.map((d, i) => {
+      const x =
+        LINE_PADDING.left +
+        (data.length > 1 ? (i / (data.length - 1)) * plotW : plotW / 2);
+      const y = LINE_PADDING.top + (1 - (d.value - lo) / range) * plotH;
+      return { x, y, ...d };
+    });
+    return {
+      points: pts,
+      polyline: pts.map((p) => `${p.x},${p.y}`).join(' '),
+      minVal: lo,
+      maxVal: hi,
+    };
+  }, [data]);
+
+  if (data.length === 0) {
+    return null;
+  }
+
+  const plotBottom = LINE_SVG_HEIGHT - LINE_PADDING.bottom;
+  const color = getChartColor(0);
+
+  return (
+    <div className="legend-ai-chart legend-ai-chart--line">
+      {title !== undefined && title.length > 0 && (
+        <div className="legend-ai-chart__title">{title}</div>
+      )}
+      <svg
+        viewBox={`0 0 ${LINE_SVG_WIDTH} ${LINE_SVG_HEIGHT}`}
+        className="legend-ai-chart__line-svg"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {/* Y-axis labels */}
+        <text
+          x={LINE_PADDING.left - 6}
+          y={LINE_PADDING.top + 4}
+          className="legend-ai-chart__axis-label"
+          textAnchor="end"
+        >
+          {Number.isInteger(maxVal)
+            ? maxVal.toLocaleString()
+            : maxVal.toFixed(1)}
+        </text>
+        <text
+          x={LINE_PADDING.left - 6}
+          y={plotBottom + 4}
+          className="legend-ai-chart__axis-label"
+          textAnchor="end"
+        >
+          {Number.isInteger(minVal)
+            ? minVal.toLocaleString()
+            : minVal.toFixed(1)}
+        </text>
+
+        {/* Grid lines */}
+        <line
+          x1={LINE_PADDING.left}
+          y1={LINE_PADDING.top}
+          x2={LINE_SVG_WIDTH - LINE_PADDING.right}
+          y2={LINE_PADDING.top}
+          className="legend-ai-chart__grid-line"
+        />
+        <line
+          x1={LINE_PADDING.left}
+          y1={plotBottom}
+          x2={LINE_SVG_WIDTH - LINE_PADDING.right}
+          y2={plotBottom}
+          className="legend-ai-chart__grid-line"
+        />
+
+        {/* Line */}
+        <polyline
+          points={polyline}
+          fill="none"
+          stroke={color}
+          strokeWidth="2"
+          className="legend-ai-chart__line-path"
+        />
+
+        {/* Dots */}
+        {points.map((p) => (
+          <circle
+            key={`${p.label}-${String(p.value)}`}
+            cx={p.x}
+            cy={p.y}
+            r={3}
+            fill={color}
+            className="legend-ai-chart__line-dot"
+          />
+        ))}
+
+        {/* X-axis labels (first, mid, last) */}
+        {points.length > 0 &&
+          (() => {
+            const firstPt = points[0];
+            const lastPt = points[points.length - 1];
+            if (!firstPt || !lastPt) {
+              return null;
+            }
+            return (
+              <>
+                <text
+                  x={firstPt.x}
+                  y={plotBottom + 16}
+                  className="legend-ai-chart__axis-label"
+                  textAnchor="start"
+                >
+                  {firstPt.label.slice(0, 10)}
+                </text>
+                {points.length > 2 && (
+                  <text
+                    x={lastPt.x}
+                    y={plotBottom + 16}
+                    className="legend-ai-chart__axis-label"
+                    textAnchor="end"
+                  >
+                    {lastPt.label.slice(0, 10)}
+                  </text>
+                )}
+              </>
+            );
+          })()}
+      </svg>
+    </div>
+  );
+};