chordia-ui 3.9.0 → 3.9.2

package/src/components/performance/performanceApiMap.js

@@ -0,0 +1,133 @@
+import { trendFromPoints } from "./performanceSparkline";
+
+const METRIC_PLACEHOLDER = "—";
+
+function isNullish(value) {
+  return value == null || (typeof value === "number" && Number.isNaN(value));
+}
+
+function trendFromDelta(delta) {
+  if (isNullish(delta) || delta === 0) return "up";
+  return delta > 0 ? "up" : "down";
+}
+
+function formatSignedDelta(delta, { suffix = "", decimals = 1 } = {}) {
+  if (isNullish(delta)) return null;
+  const n = Number(delta);
+  if (!Number.isFinite(n)) return null;
+  const sign = n > 0 ? "+" : n < 0 ? "" : "";
+  return `${sign}${n.toFixed(decimals)}${suffix}`;
+}
+
+/** Pull a numeric time series from API `trend[]` buckets (skips nulls). */
+export function extractTrendSeries(trend, key, { includeZero = true } = {}) {
+  if (!Array.isArray(trend)) return [];
+  return trend
+    .map((bucket) => bucket?.[key])
+    .filter((v) => {
+      if (v == null) return false;
+      const n = Number(v);
+      if (!Number.isFinite(n)) return false;
+      return includeZero || n !== 0;
+    })
+    .map(Number);
+}
+
+function formatPercent(value, decimals = 1) {
+  if (isNullish(value)) return METRIC_PLACEHOLDER;
+  return `${(Number(value) * 100).toFixed(decimals)}%`;
+}
+
+function formatPp(value, decimals = 1) {
+  if (isNullish(value)) return METRIC_PLACEHOLDER;
+  const n = Number(value) * 100;
+  const sign = n > 0 ? "+" : "";
+  return `${sign}${n.toFixed(decimals)}pp`;
+}
+
+function formatCount(value) {
+  if (isNullish(value)) return METRIC_PLACEHOLDER;
+  return Number(value).toLocaleString("en-US");
+}
+
+function formatCsat(value, decimals = 2) {
+  if (isNullish(value)) return METRIC_PLACEHOLDER;
+  return Number(value).toFixed(decimals);
+}
+
+function statLabel(base, delta, formatter) {
+  const deltaStr = formatter(delta);
+  return deltaStr ? `${base} (${deltaStr})` : base;
+}
+
+/**
+ * Map `/performance/agents/{projectId}/v2/__all__` (or agent-specific) payload
+ * to PerformancePanel KPI stat props. Pass each stat's `points` into the panel
+ * for real sparklines instead of the decorative fallback curve.
+ */
+export function mapPerformanceKpiStats(api) {
+  const current = api?.current ?? {};
+  const deltas = api?.deltas ?? {};
+  const trend = api?.trend ?? [];
+
+  const volumePoints = extractTrendSeries(trend, "count", { includeZero: true });
+  const csatPoints = extractTrendSeries(trend, "csat");
+  const baselinePoints = extractTrendSeries(trend, "baseline").map((v) => v * 100);
+  const liftPoints = extractTrendSeries(trend, "agent_lift").map((v) => v * 100);
+  const scorePoints = extractTrendSeries(trend, "score").map((v) => v * 100);
+
+  const volumeStat = {
+    value: formatCount(current.call_count),
+    label: "Volume",
+    trend: trendFromDelta(deltas.call_count),
+    points: volumePoints,
+  };
+
+  const compassStat = {
+    value: formatCsat(current.avg_csat),
+    label: statLabel("Compass Score", deltas.csat, (d) => formatSignedDelta(d, { decimals: 2 })),
+    trend: trendFromDelta(deltas.csat),
+    points: csatPoints,
+  };
+
+  const baselineSubStat = {
+    value: formatPercent(current.avg_baseline),
+    label: statLabel("Baseline", deltas.baseline, (d) =>
+      formatSignedDelta(Number(d) * 100, { suffix: "", decimals: 1 }),
+    ),
+    trend: trendFromDelta(deltas.baseline),
+    points: baselinePoints,
+  };
+
+  const agentLiftSubStat = {
+    value: formatPp(current.avg_agent_lift),
+    label: statLabel("Agent Lift", deltas.agent_lift, (d) =>
+      formatSignedDelta(Number(d) * 100, { suffix: "pp", decimals: 1 }),
+    ),
+    trend: trendFromDelta(deltas.agent_lift),
+    points: liftPoints,
+  };
+
+  const scoreSubStat = {
+    value: formatPercent(current.avg_score),
+    label: statLabel("Score", deltas.score, (d) =>
+      formatSignedDelta(Number(d) * 100, { suffix: "", decimals: 1 }),
+    ),
+    trend: trendFromDelta(deltas.score),
+    points: scorePoints,
+  };
+
+  // When points exist, prefer shape-derived direction for sparkline consistency.
+  for (const stat of [volumeStat, compassStat, baselineSubStat, agentLiftSubStat, scoreSubStat]) {
+    const derived = trendFromPoints(stat.points);
+    if (derived) stat.trend = derived;
+  }
+
+  return {
+    volumeStat,
+    compassStat,
+    baselineSubStat,
+    agentLiftSubStat,
+    scoreSubStat,
+  };
+}

package/src/components/performance/performanceMetrics.js

@@ -0,0 +1,63 @@
+import { trendFromPoints } from "./performanceSparkline.js";
+
+export const METRIC_PLACEHOLDER = "—";
+
+/** Hosts often send "-", "—", or empty strings when API delta/value is null. */
+export function isNullishMetric(value) {
+  if (value == null) return true;
+  const str = String(value).trim();
+  if (!str) return true;
+  if (/^[-−–—]$/.test(str)) return true;
+  if (/^(n\/a|null|undefined)$/i.test(str)) return true;
+  return false;
+}
+
+export function hasMeaningfulMetric(value) {
+  return !isNullishMetric(value);
+}
+
+export function formatMetricDisplay(value, fallback = METRIC_PLACEHOLDER) {
+  return isNullishMetric(value) ? fallback : String(value);
+}
+
+/** Non-empty host field — includes placeholder dashes the API uses for missing data. */
+export function hasHostMetricField(value) {
+  return value != null && String(value).trim() !== "";
+}
+
+/**
+ * Whether a chart card should render. Matches legacy `value || delta || points.length`
+ * while treating numeric zero as present data.
+ */
+export function hasChartData(chart) {
+  if (!chart) return false;
+  if (hasHostMetricField(chart.value) || hasHostMetricField(chart.delta)) return true;
+  return Array.isArray(chart.points) && chart.points.length > 0;
+}
+
+/** Derive up/down from signed deltas (+2.0%, -3pp, 95.5% (0.6pp), etc.). */
+export function trendFromSignedValue(text) {
+  if (isNullishMetric(text)) return null;
+  const str = String(text).trim();
+  const parenMatch = str.match(/\(\s*([+-])?\s*([\d.]+)/);
+  if (parenMatch) {
+    if (parenMatch[1] === "-") return "down";
+    if (parenMatch[1] === "+") return "up";
+    return parseFloat(parenMatch[2]) < 0 ? "down" : "up";
+  }
+  if (/^[-−]/.test(str)) return "down";
+  if (/^\+/.test(str)) return "up";
+  if (/-\d/.test(str)) return "down";
+  return null;
+}
+
+export function resolveTrend(trend, signedText) {
+  return trendFromSignedValue(signedText) ?? (trend === "down" ? "down" : "up");
+}
+
+export function resolveKpiTrend(trend, value, points) {
+  return (
+    trendFromPoints(points) ??
+    (hasMeaningfulMetric(value) ? resolveTrend(trend, value) : trend === "down" ? "down" : "up")
+  );
+}

package/src/components/performance/performanceRangeFormat.js

@@ -0,0 +1,92 @@
+// Shared en-US date/time formatting for time-range chips (8h / 1d / 7d / 30d).
+
+export const RANGE_TO_MS = {
+  "8h": 8 * 60 * 60 * 1000,
+  "1d": 24 * 60 * 60 * 1000,
+  "7d": 7 * 24 * 60 * 60 * 1000,
+  "30d": 30 * 24 * 60 * 60 * 1000,
+};
+
+const LOCALE = "en-US";
+const DATE_OPTS = { month: "2-digit", day: "2-digit", year: "numeric" };
+const TIME_OPTS = { hour: "numeric", minute: "2-digit", hour12: true };
+
+export function coalesceToDate(input) {
+  if (!input) return null;
+  if (input instanceof Date) {
+    return Number.isNaN(input.getTime()) ? null : input;
+  }
+  const str = String(input).trim();
+  const ymd = str.match(/^(\d{4})-(\d{1,2})-(\d{1,2})/);
+  if (ymd) {
+    const d = new Date(Number(ymd[1]), Number(ymd[2]) - 1, Number(ymd[3]));
+    return Number.isNaN(d.getTime()) ? null : d;
+  }
+  const parsed = new Date(str);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+
+function isSameLocalCalendarDay(a, b) {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+export function formatLocalDate(date) {
+  const d = date instanceof Date ? date : coalesceToDate(date);
+  if (!d) return "";
+  return d.toLocaleDateString(LOCALE, DATE_OPTS);
+}
+
+function formatLocalTime(date) {
+  return date.toLocaleTimeString(LOCALE, TIME_OPTS);
+}
+
+function formatLocalDateTime(date) {
+  return `${formatLocalDate(date)} ${formatLocalTime(date)}`;
+}
+
+/** Single-line label for the 8h chip (panel header). */
+export function formatEightHourWindowLabel(from, to) {
+  const f = coalesceToDate(from);
+  const t = coalesceToDate(to);
+  if (!f || !t) return "";
+  if (isSameLocalCalendarDay(f, t)) {
+    return `${formatLocalDateTime(f)} – ${formatLocalTime(t)}`;
+  }
+  return `${formatLocalDateTime(f)} – ${formatLocalDateTime(t)}`;
+}
+
+/** Start/end strings for the details page (arrow between). */
+export function formatEightHourRangeEndpoints(from, to) {
+  const f = coalesceToDate(from);
+  const t = coalesceToDate(to);
+  if (!f || !t) return null;
+  if (isSameLocalCalendarDay(f, t)) {
+    return { from: formatLocalDateTime(f), to: formatLocalTime(t) };
+  }
+  return { from: formatLocalDateTime(f), to: formatLocalDateTime(t) };
+}
+
+/** Rolling from/to for a preset chip (matches panel + details display). */
+export function getPresetWindowDates(windowId) {
+  const ms = RANGE_TO_MS[windowId];
+  if (!ms) return null;
+  const to = new Date();
+  const from = new Date(to.getTime() - ms);
+  return { from, to };
+}
+
+/** Label for preset window chips (8h shows time range; others show dates). */
+export function computeWindowLabel(windowId) {
+  const ms = RANGE_TO_MS[windowId];
+  if (!ms) return "";
+  const range = getPresetWindowDates(windowId);
+  if (!range) return "";
+  if (windowId === "8h") {
+    return formatEightHourWindowLabel(range.from, range.to);
+  }
+  return `${formatLocalDate(range.from)} – ${formatLocalDate(range.to)}`;
+}

package/src/components/performance/performanceSparkline.js

@@ -0,0 +1,52 @@
+// Sparkline path builders shared by PerformancePanel + PerformanceDetailsPage.
+
+export const SPARK_DEFAULT_LINE =
+  "M1.00049 13.5213C7.85975 11.7032 8.88149 4.73912 13.7838 4.73912C19.8344 4.73912 23.6237 17.166 29.1281 17.166C34.5998 17.166 37.4149 4.88121 43.4004 8.61051C47.9764 11.4616 50.6186 1.00024 50.6186 1.00024";
+
+export const SPARK_DEFAULT_AREA =
+  "M1.00049 16.692C8.88149 15.6975 8.88149 7.79403 13.7838 7.79403C19.8344 7.79403 23.6237 21.4034 29.1281 21.4034C34.5998 21.4034 37.4149 8.93821 43.4004 12.7223C47.9764 15.6152 50.6186 5.00024 50.6186 5.00024V36.0002C50.6186 36.0002 10.8223 36.0002 1.00049 36.0002C1.00049 28.8653 1.00049 19.4871 1.00049 16.692Z";
+
+/** Normalize host points — flat array of numbers or [x, y] pairs (y used). */
+export function normalizeSparkPoints(points) {
+  if (!Array.isArray(points)) return null;
+  const numeric = points
+    .map((p) => {
+      if (Array.isArray(p)) return Number(p[1]);
+      if (p == null || p === "") return NaN;
+      return Number(p);
+    })
+    .filter((n) => Number.isFinite(n));
+  return numeric.length >= 2 ? numeric : null;
+}
+
+/** Project a numeric series onto an SVG viewBox. Returns null when unusable. */
+export function buildSparkPaths(points, vbW = 52, vbH = 36) {
+  const numeric = normalizeSparkPoints(points);
+  if (!numeric) return null;
+  const min = Math.min(...numeric);
+  const max = Math.max(...numeric);
+  const padY = 4;
+  const span = max - min || 1;
+  const usableH = vbH - padY * 2 - 4;
+  const sx = (i) => (numeric.length === 1 ? 0 : (i / (numeric.length - 1)) * (vbW - 2)) + 1;
+  const sy = (v) => padY + (1 - (v - min) / span) * usableH;
+  let line = "";
+  for (let i = 0; i < numeric.length; i++) {
+    line += `${i === 0 ? "M" : "L"}${sx(i).toFixed(2)},${sy(numeric[i]).toFixed(2)}`;
+  }
+  const lastX = sx(numeric.length - 1);
+  const firstX = sx(0);
+  const area = `${line} L${lastX.toFixed(2)},${vbH} L${firstX.toFixed(2)},${vbH} Z`;
+  return { line, area };
+}
+
+/** Infer up/down from first vs last point when host omits `trend`. */
+export function trendFromPoints(points) {
+  const numeric = normalizeSparkPoints(points);
+  if (!numeric) return null;
+  const first = numeric[0];
+  const last = numeric[numeric.length - 1];
+  if (last > first) return "up";
+  if (last < first) return "down";
+  return "up";
+}

package/src/components/reports/ReportsList.jsx

@@ -14,6 +14,7 @@ import {
 } from "lucide-react";
 import DataTable2 from "../data/DataTable2";
 import { DateRangeButton } from "../performance/PerformancePanel";
+import { computeWindowLabel, formatLocalDate } from "../performance/performanceRangeFormat";
 import ConfirmationPopup from "../common/ConfirmationPopup";
 
 // Color values resolve to CSS variables declared in `src/tokens/colors.css`.
@@ -41,30 +42,6 @@ const DEFAULT_RANGE_OPTIONS = [
   { id: "30d", label: "30d" },
 ];
 
-const RANGE_TO_MS = {
-  "8h": 8 * 60 * 60 * 1000,
-  "1d": 24 * 60 * 60 * 1000,
-  "7d": 7 * 24 * 60 * 60 * 1000,
-  "30d": 30 * 24 * 60 * 60 * 1000,
-};
-
-function formatLocalDate(date) {
-  if (!(date instanceof Date)) return String(date ?? "");
-  return date.toLocaleDateString("en-US", {
-    month: "2-digit",
-    day: "2-digit",
-    year: "numeric",
-  });
-}
-
-function computeWindowLabel(windowId) {
-  const ms = RANGE_TO_MS[windowId];
-  if (!ms) return "";
-  const to = new Date();
-  const from = new Date(to.getTime() - ms);
-  return `${formatLocalDate(from)} – ${formatLocalDate(to)}`;
-}
-
 function RangeChip({ label, active = false, onClick }) {
   return (
     <button
@@ -331,7 +308,7 @@ export default function ReportsList({
 
   const dateLabel = customRangeActive
     ? `${formatLocalDate(effectiveDateRange.from)} – ${formatLocalDate(effectiveDateRange.to)}`
-    : dateRangeLabel || computeWindowLabel(selectedWindow);
+    : computeWindowLabel(selectedWindow) || dateRangeLabel;
 
   // Inject the actions column at the right edge of whatever column set the
   // host passed (or DEFAULT_REPORTS_COLUMNS). Built dynamically so the