@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/etl-monitor/renderers/components/summary-card-renderer.tsx

@@ -0,0 +1,160 @@
+/**
+ * Summary Card Renderer
+ * Renders SUMMARY_CARD component type
+ */
+
+import React from 'react';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+
+interface SummaryCardRendererProps {
+  config: DisplayConfigV2;
+  fields?: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+  }>;
+  arrayData?: any;
+  rawData?: any;
+  data?: any;
+}
+
+export function SummaryCardRenderer({ config, fields, data }: SummaryCardRendererProps) {
+  // If fields are not provided but data is, transform data into fields
+  const derivedFields = fields || (data ? transformDataToFields(data, config) : []);
+  const visibleFields = derivedFields.filter((f) => !f.hidden);
+
+  return (
+    <div className={styles['monitor-summary-card']}>
+      <div className={styles['monitor-summary-card__header']}>
+        {config.presentation?.title && (
+          <h4 className={styles['monitor-summary-card__title']}>{config.presentation.title}</h4>
+        )}
+      </div>
+
+      <div className={styles['monitor-summary-card__body']}>
+        <div className={styles['monitor-summary-card__metrics']}>
+          {visibleFields.map((field) => (
+            <div key={field.key} className={styles['monitor-summary-card__metric']}>
+              <div className={styles['monitor-summary-card__metric-label']}>{field.label}</div>
+              <div className={styles['monitor-summary-card__metric-value']}>{field.formattedValue}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Transform raw data into formatted fields for summary card
+ */
+function transformDataToFields(data: any, config: DisplayConfigV2) {
+  if (!data || typeof data !== 'object') return [];
+
+  const fields: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+    statusTone?: string;
+  }> = [];
+
+  // If config defines field mappings, apply them
+  if (config.fields && Array.isArray(config.fields)) {
+    for (const fieldConfig of config.fields) {
+      const value = resolveFieldValue(data, fieldConfig.key);
+
+      fields.push({
+        key: fieldConfig.key,
+        label: fieldConfig.label || fieldConfig.key,
+        value,
+        formattedValue: formatFieldValue(value, fieldConfig),
+        type: fieldConfig.type || 'string',
+        primary: fieldConfig.primary || false,
+        hidden: fieldConfig.hidden || false,
+        order: fieldConfig.order,
+        statusTone:
+          fieldConfig.type === 'STATUS' && value != null
+            ? mappingTone(value, fieldConfig)
+            : undefined,
+      });
+    }
+  } else {
+    // Otherwise, use all data properties
+    Object.keys(data).forEach((key, index) => {
+      const value = data[key];
+      fields.push({
+        key,
+        label: key,
+        value,
+        formattedValue: value,
+        type: typeof value,
+        primary: index === 0,
+        hidden: false,
+        order: index,
+      });
+    });
+  }
+
+  return fields;
+}
+
+function mappingTone(value: any, fieldConfig: any): string | undefined {
+  const stringValue = String(value);
+  const mapping =
+    fieldConfig.statusMap?.[stringValue] ?? fieldConfig.statusMap?.[stringValue.toLowerCase()];
+  return mapping?.tone;
+}
+
+/**
+ * Resolve field value from data object using key path
+ */
+function resolveFieldValue(data: any, key: string): any {
+  if (!data || !key) return undefined;
+
+  const keys = key.split('.');
+  let value = data;
+
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = value[k];
+    } else {
+      return undefined;
+    }
+  }
+
+  return value;
+}
+
+/**
+ * Format field value based on field configuration
+ */
+function formatFieldValue(value: any, fieldConfig: any): any {
+  if (value === null || value === undefined) return '-';
+
+  if (fieldConfig.type === 'date' && value) {
+    try {
+      return new Date(value).toLocaleDateString();
+    } catch {
+      return value;
+    }
+  }
+
+  if (fieldConfig.type === 'boolean') {
+    return value ? 'Yes' : 'No';
+  }
+
+  return value;
+}
+
+export default SummaryCardRenderer;

package/src/components/etl-monitor/renderers/components/table-renderer.tsx

@@ -0,0 +1,175 @@
+/**
+ * Table Renderer
+ * Renders TABLE/DATA_TABLE component type
+ */
+
+import React from 'react';
+import {
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Tag,
+} from '@carbon/react';
+import { ArrowRight } from '@carbon/icons-react';
+import styles from '../monitor-renderers.scss';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { formatSemanticValue, resolveRowFieldValue } from '../data-transformer';
+
+interface TableRendererProps {
+  config: DisplayConfigV2;
+  fields: Array<{
+    key: string;
+    label: string;
+    value: any;
+    formattedValue: any;
+    type: string;
+    primary: boolean;
+    hidden: boolean;
+    order?: number;
+    path?: string;
+  }>;
+  arrayData?: Array<Record<string, any>>;
+}
+
+export function TableRenderer({ config, fields, arrayData }: TableRendererProps) {
+  // Use arrayData provided by MonitorRenderer
+  const tableData = arrayData || [];
+
+  const visibleFields = (fields || []).filter((f) => !f.hidden);
+  const maxRows = config.componentConfig?.maxRows || 50;
+  const displayData = tableData.slice(0, maxRows);
+
+  /**
+   * Extract value from row data using field path.
+   * Delegates to the shared resolver so root-relative paths
+   * (e.g. $.data.startTime from a { data: [...] } envelope) and
+   * indexed paths resolve the same way as everywhere else.
+   */
+  const getRowValue = (row: any, field: any) => {
+    const value = resolveRowFieldValue(row, field, config.data?.arrayPath);
+    return value === undefined ? '-' : value;
+  };
+
+  /**
+   * Format a cell value for display
+   */
+  const formatCellValue = (value: any, field: any) => {
+    if (value === null || value === undefined) return '-';
+
+    // For status fields, apply status mapping
+    if (field.type === 'STATUS') {
+      const mapping = field.statusMap?.[String(value)];
+      if (mapping) {
+        const toneToTagType: Record<string, 'green' | 'red' | 'blue' | 'gray' | 'cyan' | 'purple' | 'magenta' | 'teal' | 'warm-gray' | 'cool-gray' | 'high-contrast' | 'outline'> = {
+          success: 'green',
+          critical: 'red',
+          warning: 'purple', // Use orange or other supported color for warnings
+          info: 'blue',
+          neutral: 'gray',
+        };
+        // Map warning to a supported color if needed
+        const tagType = toneToTagType[mapping.tone] || 'gray';
+        return (
+          <Tag type={tagType as any}>
+            {mapping.label || value}
+          </Tag>
+        );
+      }
+      // Fallback tone detection
+      const str = String(value).toLowerCase();
+      if (str.includes('up') || str.includes('success') || str.includes('ok')) {
+        return <Tag type="green">{value}</Tag>;
+      }
+      if (str.includes('down') || str.includes('error') || str.includes('fail')) {
+        return <Tag type="red">{value}</Tag>;
+      }
+      return <Tag type="gray">{value}</Tag>;
+    }
+
+    // Percentage cells render as value + inline progress bar (widget #5)
+    if (field.type === 'PERCENTAGE') {
+      const numeric =
+        typeof value === 'number'
+          ? Math.max(0, Math.min(100, value))
+          : parseFloat(String(value).replace('%', '')) || 0;
+      return (
+        <span className={styles['table-renderer__progress']}>
+          <span className={styles['table-renderer__progress-label']}>
+            {formatSemanticValue(value, field)}
+          </span>
+          <span className={styles['table-renderer__progress-track']}>
+            <span
+              className={styles['table-renderer__progress-fill']}
+              style={{ width: `${numeric}%` }}
+            />
+          </span>
+        </span>
+      );
+    }
+
+    return formatSemanticValue(value, field);
+  };
+
+  return (
+    <div className={styles['table-renderer']}>
+      <div className={styles['table-renderer__header']}>
+        {config.presentation?.title && (
+          <h4 className={styles['table-renderer__title']}>{config.presentation.title}</h4>
+        )}
+      </div>
+
+      {displayData.length === 0 ? (
+        <div className={styles['table-renderer__empty']}>No data to display</div>
+      ) : (
+        <div className={styles['table-renderer__table-wrapper']}>
+          <Table size="sm">
+            <TableHead>
+              <TableRow>
+                {visibleFields.map((field) => (
+                  <TableHeader key={field.key}>
+                    {field.label}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {displayData.map((row, rowIndex) => (
+                <TableRow key={row._id || rowIndex}>
+                  {visibleFields.map((field) => {
+                    const value = getRowValue(row, field);
+                    return (
+                      <TableCell key={field.key}>
+                        {formatCellValue(value, field)}
+                      </TableCell>
+                    );
+                  })}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {tableData.length > maxRows && (
+        <div className={styles['table-renderer__footer']}>
+          <span className={styles['table-renderer__footer-count']}>
+            Showing {maxRows} of {tableData.length} rows
+          </span>
+          {config.componentConfig?.viewAllUrl && (
+            <a
+              href={config.componentConfig.viewAllUrl}
+              className={styles['table-renderer__footer-link']}
+            >
+              {config.componentConfig.viewAllLabel || 'View all'} <ArrowRight size={12} />
+            </a>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TableRenderer;

package/src/components/etl-monitor/renderers/components/time-series-renderer.tsx

@@ -0,0 +1,310 @@
+/**
+ * Time Series Renderer
+ * Renders the TIME_SERIES component type (reference: widgets/timeseries.png):
+ * current value + delta vs the period start, and a compact area/line chart
+ * with a time axis, hairline gridlines, and a crosshair tooltip.
+ *
+ * Chart specs follow the dataviz method: 2px line (round cap/join), area wash
+ * ~10% opacity, >=8px end dot with a 2px surface ring, hairline solid
+ * gridlines, axis text in muted ink (never the series color), single series
+ * -> no legend, crosshair + tooltip on hover and keyboard.
+ */
+
+import React, { useMemo, useRef, useState } from 'react';
+import type { DisplayConfigV2 } from '../../../../types/etl-monitor/etl-monitor-v2.types';
+import { formatSemanticValue, resolveRowFieldValue } from '../data-transformer';
+import { getTileIcon } from '../component-icons';
+import styles from '../monitor-renderers.scss';
+
+interface TimeSeriesRendererProps {
+  config: DisplayConfigV2;
+  fields?: Array<{ key: string; label: string; path?: string; type: string; [k: string]: any }>;
+  arrayData?: any[];
+  rawData?: any;
+  data?: any;
+}
+
+const W_PAD_LEFT = 38;
+const W_PAD_RIGHT = 12;
+const H_PAD_TOP = 8;
+const H_PAD_BOTTOM = 18;
+
+/** Compact axis label: durations human, numbers compact */
+function compactAxis(value: number, type?: string): string {
+  if (type === 'DURATION') {
+    const totalSeconds = Math.floor(value / 1000);
+    if (totalSeconds < 60) return `${totalSeconds}s`;
+    const minutes = Math.floor(totalSeconds / 60);
+    if (minutes < 60) return `${minutes}m`;
+    return `${Math.floor(minutes / 60)}h`;
+  }
+  if (Math.abs(value) >= 1000) {
+    return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(value);
+  }
+  return String(Math.round(value));
+}
+
+function formatTime(ts: number, type?: string): string {
+  const d = new Date(ts);
+  if (isNaN(d.getTime())) return String(ts);
+  if (type === 'DATE') return d.toLocaleDateString();
+  return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+
+export function TimeSeriesRenderer({ config, fields, arrayData, rawData }: TimeSeriesRendererProps) {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const wrapRef = useRef<HTMLDivElement | null>(null);
+  const [width, setWidth] = useState(280);
+  const [active, setActive] = useState<number | null>(null);
+
+  const safeFields = fields || [];
+  const timeField = safeFields.find((f) => f.type === 'TIMESTAMP');
+  const valueField =
+    safeFields.find((f) => f.primary) ||
+    safeFields.find((f) => ['PERCENTAGE', 'NUMBER', 'INTEGER', 'DECIMAL', 'DURATION'].includes(f.type)) ||
+    safeFields.find((f) => f.type !== 'TIMESTAMP');
+  const headerIcon = getTileIcon(Object.values(config.componentConfig?.icons || {})[0]);
+
+  // Resolve the point series
+  const points = useMemo(() => {
+    const rows = arrayData && arrayData.length > 0
+      ? arrayData
+      : Array.isArray(rawData)
+        ? rawData
+        : [];
+
+    const get = (row: any, f: any): any =>
+      resolveRowFieldValue(row, f, config.data?.arrayPath);
+
+    if (!timeField || !valueField) return [];
+    return rows
+      .map((row: any) => ({
+        x: get(row, timeField),
+        y: get(row, valueField),
+      }))
+      .filter((p: any) => p.x != null && p.y != null && typeof p.y === 'number')
+      .sort((a: any, b: any) => a.x - b.x);
+  }, [arrayData, rawData, timeField, valueField, config]);
+
+  // Responsive width
+  React.useEffect(() => {
+    const el = wrapRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect?.width;
+      if (w && w > 40) setWidth(Math.floor(w));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const H = 120;
+  const plotW = Math.max(40, width - W_PAD_LEFT - W_PAD_RIGHT);
+  const plotH = H - H_PAD_TOP - H_PAD_BOTTOM;
+
+  const xMin = points.length ? points[0].x : 0;
+  const xMax = points.length ? points[points.length - 1].x : 1;
+  const yValues = points.map((p) => p.y);
+  const yMin = Math.min(0, ...yValues);
+  const yMax = points.length ? Math.max(...yValues) : 1;
+
+  const sx = (x: number) => W_PAD_LEFT + ((x - xMin) / (xMax - xMin || 1)) * plotW;
+  const sy = (y: number) => H_PAD_TOP + (1 - (y - yMin) / (yMax - yMin || 1)) * plotH;
+
+  const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${sx(p.x).toFixed(1)},${sy(p.y).toFixed(1)}`).join(' ');
+  const baseY = sy(yMin);
+  const areaPath = points.length
+    ? `${linePath} L${sx(points[points.length - 1].x).toFixed(1)},${baseY.toFixed(1)} L${sx(points[0].x).toFixed(1)},${baseY.toFixed(1)} Z`
+    : '';
+
+  // Delta: change from period start to current value
+  const delta = useMemo(() => {
+    if (points.length < 2) return null;
+    const first = points[0].y;
+    const last = points[points.length - 1].y;
+    if (!first) return null;
+    const pct = ((last - first) / Math.abs(first)) * 100;
+    if (!isFinite(pct)) return null;
+    return pct;
+  }, [points]);
+
+  const currentValue = points.length ? points[points.length - 1].y : null;
+  const currentLabel = currentValue != null ? formatSemanticValue(currentValue, valueField || {}) : '—';
+  const deltaLabel = config.componentConfig?.deltaLabel || 'vs previous period';
+  const gridTicks = [yMin, yMin + (yMax - yMin) / 2, yMax];
+
+  const handleMove = (e: React.MouseEvent<SVGSVGElement>) => {
+    if (!points.length || !svgRef.current) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    const px = ((e.clientX - rect.left) / rect.width) * width;
+    let nearest = 0;
+    let best = Infinity;
+    points.forEach((p, i) => {
+      const d = Math.abs(sx(p.x) - px);
+      if (d < best) {
+        best = d;
+        nearest = i;
+      }
+    });
+    setActive(nearest);
+  };
+
+  const handleKey = (e: React.KeyboardEvent) => {
+    if (!points.length) return;
+    if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+      e.preventDefault();
+      const step = e.key === 'ArrowLeft' ? -1 : 1;
+      setActive((prev) => {
+        const base = prev ?? points.length - 1;
+        return Math.max(0, Math.min(points.length - 1, base + step));
+      });
+    } else if (e.key === 'Escape') {
+      setActive(null);
+    }
+  };
+
+  const activePoint = active != null ? points[active] : null;
+
+  return (
+    <div className={styles['time-series-renderer']}>
+      {/* Header: icon tile + metric label + current value + delta */}
+      <div className={styles['time-series-renderer__head']}>
+        {(() => {
+          const Icon = headerIcon;
+          return Icon ? (
+            <span className={styles['time-series-renderer__icon']}>
+              <Icon size={20} />
+            </span>
+          ) : null;
+        })()}
+        <div className={styles['time-series-renderer__head-text']}>
+          <span className={styles['time-series-renderer__label']}>
+            {valueField?.label || config.presentation?.title || 'Trend'}
+          </span>
+          <span className={styles['time-series-renderer__value']}>{currentLabel}</span>
+        </div>
+        {delta != null && (
+          <span className={styles['time-series-renderer__head-delta']}>
+            <span className={`${styles['time-series-renderer__delta']} ${delta >= 0 ? styles['time-series-renderer__delta--up'] : styles['time-series-renderer__delta--down']}`}>
+              {delta >= 0 ? '↑' : '↓'} {Math.abs(delta).toFixed(1)}%
+            </span>
+            <span className={styles['time-series-renderer__delta-note']}>{deltaLabel}</span>
+          </span>
+        )}
+      </div>
+
+      {/* Chart */}
+      {points.length === 0 ? (
+        <div className={styles['time-series-renderer__empty']}>No time series data</div>
+      ) : (
+        <div className={styles['time-series-renderer__chart']} ref={wrapRef}>
+          <svg
+            ref={svgRef}
+            width={width}
+            height={H}
+            role="img"
+            aria-label={`${valueField?.label || 'Trend'} over time`}
+            tabIndex={0}
+            onMouseMove={handleMove}
+            onMouseLeave={() => setActive(null)}
+            onKeyDown={handleKey}
+            onBlur={() => setActive(null)}
+          >
+            {/* hairline gridlines + y ticks (muted ink) */}
+            {gridTicks.map((tick, i) => (
+              <g key={i}>
+                <line
+                  x1={W_PAD_LEFT}
+                  x2={width - W_PAD_RIGHT}
+                  y1={sy(tick)}
+                  y2={sy(tick)}
+                  className={styles['time-series-renderer__grid']}
+                />
+                <text
+                  x={W_PAD_LEFT - 6}
+                  y={sy(tick)}
+                  textAnchor="end"
+                  dominantBaseline="middle"
+                  className={styles['time-series-renderer__tick']}
+                >
+                  {compactAxis(tick, valueField?.type)}
+                </text>
+              </g>
+            ))}
+
+            {/* crosshair */}
+            {activePoint && (
+              <line
+                x1={sx(activePoint.x)}
+                x2={sx(activePoint.x)}
+                y1={H_PAD_TOP}
+                y2={H_PAD_TOP + plotH}
+                className={styles['time-series-renderer__crosshair']}
+              />
+            )}
+
+            {/* area wash + 2px line */}
+            <path d={areaPath} className={styles['time-series-renderer__area']} />
+            <path d={linePath} className={styles['time-series-renderer__line']} />
+
+            {/* hovered marker (surface ring) */}
+            {activePoint && (
+              <circle
+                cx={sx(activePoint.x)}
+                cy={sy(activePoint.y)}
+                r={4.5}
+                className={styles['time-series-renderer__dot']}
+              />
+            )}
+
+            {/* current-value end dot (surface ring) */}
+            {points.length > 0 && (
+              <circle
+                cx={sx(points[points.length - 1].x)}
+                cy={sy(points[points.length - 1].y)}
+                r={4.5}
+                className={styles['time-series-renderer__dot']}
+              />
+            )}
+
+            {/* x labels: first / middle / last (muted ink) */}
+            {[0, Math.floor((points.length - 1) / 2), points.length - 1].map((idx, i) => {
+              if (idx < 0 || !points[idx]) return null;
+              return (
+                <text
+                  key={i}
+                  x={sx(points[idx].x)}
+                  y={H - 4}
+                  textAnchor={i === 0 ? 'start' : i === 2 ? 'end' : 'middle'}
+                  className={styles['time-series-renderer__tick']}
+                >
+                  {formatTime(points[idx].x, timeField?.format?.timestamp?.display === 'date' ? 'DATE' : undefined)}
+                </text>
+              );
+            })}
+          </svg>
+
+          {/* tooltip (value leads, time follows) */}
+          {activePoint && (
+            <div
+              className={styles['time-series-renderer__tooltip']}
+              style={{
+                left: `${(sx(activePoint.x) / width) * 100}%`,
+                top: 0,
+              }}
+            >
+              <span className={styles['time-series-renderer__tooltip-value']}>
+                {formatSemanticValue(activePoint.y, valueField || {})}
+              </span>
+              <span className={styles['time-series-renderer__tooltip-time']}>
+                {formatTime(activePoint.x)}
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default TimeSeriesRenderer;