@eshal-bot/chat-widget 0.2.26 → 0.2.27

package/dist/chat-widget-markdown-chunk.js

@@ -87838,11 +87838,81 @@
     return null;
   }
 
+  // ── Figures side by side ───────────────────────────────────────────────────
+  // A chart that compares figures (pre vs post GRP, the 1+/3+/5+ reach curves)
+  // arrives with `props.series`, [{ key, dataKey, name }] built by A2uiBlock's
+  // chartSeries() from the spec's `ys` and `names`: one bar or one line per
+  // figure, named in a legend, its colour fixed by its place in the order. The
+  // colours: the brand blue (docs/design-system), then amber, pink and cyan from
+  // the frontend chart palette's families, an order checked for colour-blind
+  // separation and 3:1 contrast on the widget's light and dark surfaces (on dark,
+  // blue-500 stands in for the brand blue-700, which falls under 3:1 there).
+  // Mirrors SERIES_PALETTE in the frontend's chartShared.tsx.
+  const SERIES_COLORS = ['#1d4ed8', '#d97706', '#db2777', '#0891b2'];
+  const SERIES_COLORS_DARK = ['#3b82f6', '#d97706', '#db2777', '#0891b2'];
+  function seriesColor(i, isDark = false) {
+    const colors = isDark ? SERIES_COLORS_DARK : SERIES_COLORS;
+    return colors[i % colors.length];
+  }
+
+  // The figures drawn side by side, or [] for a one-figure chart.
+  function sideBySide(props) {
+    return Array.isArray(props.series) && props.series.length > 1 ? props.series : [];
+  }
+
+  // Each figure's money formatting (moneyFormatters by its own key, so spend
+  // reads as money beside GRP), and the one axis's: money only when every
+  // figure on it is.
+  function seriesMoney(series, currency) {
+    const each = series.map(s => moneyFormatters(currency, s.key));
+    return {
+      each,
+      axis: each.length > 0 && each.every(Boolean) ? each[0] : null
+    };
+  }
+
+  // The tooltip value of a figure side by side, formatted as that figure. Its
+  // line names the figure, so it is written in ink (seriesTooltipItem): amber
+  // text on white falls under 4.5:1.
+  function seriesTooltip(series, each, unit) {
+    return (v, name, item) => {
+      const money = each[series.findIndex(s => s.dataKey === (item && item.dataKey))];
+      if (money) return money.full(v);
+      return unit ? `${Number(v).toLocaleString()} ${unit}` : Number(v).toLocaleString();
+    };
+  }
+  function seriesTooltipItem(series, inkColor) {
+    return series.length > 0 ? {
+      color: inkColor
+    } : undefined;
+  }
+
+  // The legend of figures side by side: above the plot, clear of slanted
+  // category labels; its words in ink, the swatch carrying the colour.
+  function seriesLegend(inkColor) {
+    return /*#__PURE__*/jsxRuntimeExports.jsx(Legend, {
+      verticalAlign: "top",
+      iconSize: 10,
+      wrapperStyle: {
+        fontSize: 11,
+        paddingBottom: 6
+      },
+      formatter: value => /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+        style: {
+          color: inkColor
+        },
+        children: value
+      })
+    });
+  }
+
   /**
    * Recharts bar chart - mirrors agent-sdk's eshalRenderers.BarChart.
    *
    * Expects `props.data` to be an array of `{ label, value }` objects
-   * (already normalized by A2uiBlock's numericData helper).
+   * (already normalized by A2uiBlock's numericData helper), or, for figures
+   * side by side, `{ label, s0, s1, ... }` points with `props.series`: grouped
+   * bars, one per figure, named in a legend.
    */
   function BarChartRenderer({
     props,
@@ -87855,6 +87925,9 @@
     // Human series name for the tooltip ("Average Salary"), so it no longer
     // reads the generic dataKey "value".
     const seriesName = props.valueLabel || undefined;
+    const series = sideBySide(props);
+    const figures = seriesMoney(series, props.currency);
+    const axisMoney = series.length > 0 ? figures.axis : money;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -87964,9 +88037,10 @@
                 fontSize: 11,
                 fill: labelColor
               } : undefined,
-              tickFormatter: v => money ? money.compact(v) : props.unit ? `${formatCompactNumber(v)} ${props.unit}` : formatCompactNumber(v)
+              tickFormatter: v => axisMoney ? axisMoney.compact(v) : props.unit ? `${formatCompactNumber(v)} ${props.unit}` : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => money ? money.full(v) : props.unit ? `${Number(v).toLocaleString()} ${props.unit}` : Number(v).toLocaleString(),
+              formatter: series.length > 0 ? seriesTooltip(series, figures.each, props.unit) : v => money ? money.full(v) : props.unit ? `${Number(v).toLocaleString()} ${props.unit}` : Number(v).toLocaleString(),
+              itemStyle: seriesTooltipItem(series, titleColor),
               contentStyle: {
                 background: tooltipBg,
                 border: `1px solid ${borderColor}`,
@@ -87974,7 +88048,12 @@
                 fontSize: 12,
                 color: titleColor
               }
-            }), /*#__PURE__*/jsxRuntimeExports.jsx(Bar, {
+            }), series.length > 0 && seriesLegend(labelColor), series.length > 0 ? series.map((s, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Bar, {
+              dataKey: s.dataKey,
+              name: s.name,
+              fill: seriesColor(i, isDark),
+              radius: [2, 2, 0, 0]
+            }, s.dataKey)) : /*#__PURE__*/jsxRuntimeExports.jsx(Bar, {
               dataKey: "value",
               name: seriesName,
               fill: "#3b82f6",
@@ -88243,7 +88322,9 @@
 
   /**
    * Recharts line / area chart - replaces hand-rolled LineSvg.
-   * `props.data` must be an array of `{ label, value }` objects.
+   * `props.data` must be an array of `{ label, value }` objects, or, for
+   * figures side by side, `{ label, s0, s1, ... }` points with `props.series`:
+   * one line each, named in a legend.
    * Set `area={true}` to fill under the line.
    */
   function LineChartRenderer({
@@ -88254,6 +88335,12 @@
     const data = Array.isArray(props.data) ? props.data : [];
     const money = moneyFormatters(props.currency, props.yKey);
     const seriesName = props.valueLabel || undefined;
+    const series = sideBySide(props);
+    const figures = seriesMoney(series, props.currency);
+    const axisMoney = series.length > 0 ? figures.axis : money;
+    // Several lines over a long run of periods (26 weeks of reach): every few
+    // ticks and no dots, so the lines stay legible at the widget's width.
+    const crowded = series.length > 0 && data.length > 12;
     const borderColor = isDark ? '#374151' : '#e2e8f0';
     const bgColor = isDark ? '#1f2937' : '#ffffff';
     const labelColor = isDark ? '#9ca3af' : '#64748b';
@@ -88333,7 +88420,7 @@
               },
               angle: 0,
               textAnchor: "middle",
-              interval: 0,
+              interval: crowded ? 'preserveStartEnd' : 0,
               label: props.xAxisLabel ? {
                 value: props.xAxisLabel,
                 position: 'insideBottom',
@@ -88347,9 +88434,10 @@
                 fontSize: 11,
                 fill: labelColor
               },
-              tickFormatter: v => money ? money.compact(v) : props.unit ? `${formatCompactNumber(v)} ${props.unit}` : formatCompactNumber(v)
+              tickFormatter: v => axisMoney ? axisMoney.compact(v) : props.unit ? `${formatCompactNumber(v)} ${props.unit}` : formatCompactNumber(v)
             }), /*#__PURE__*/jsxRuntimeExports.jsx(Tooltip, {
-              formatter: v => money ? money.full(v) : props.unit ? `${Number(v).toLocaleString()} ${props.unit}` : Number(v).toLocaleString(),
+              formatter: series.length > 0 ? seriesTooltip(series, figures.each, props.unit) : v => money ? money.full(v) : props.unit ? `${Number(v).toLocaleString()} ${props.unit}` : Number(v).toLocaleString(),
+              itemStyle: seriesTooltipItem(series, titleColor),
               contentStyle: {
                 background: tooltipBg,
                 border: `1px solid ${borderColor}`,
@@ -88357,7 +88445,33 @@
                 fontSize: 12,
                 color: titleColor
               }
-            }), area ? /*#__PURE__*/jsxRuntimeExports.jsx(Area, {
+            }), series.length > 0 && seriesLegend(labelColor), series.length > 0 ? series.map((s, i) => {
+              const color = seriesColor(i, isDark);
+              const dot = crowded ? false : {
+                r: 3,
+                fill: color
+              };
+              return area ? /*#__PURE__*/jsxRuntimeExports.jsx(Area, {
+                type: "monotone",
+                dataKey: s.dataKey,
+                name: s.name,
+                stroke: color,
+                fill: color,
+                fillOpacity: 0.15,
+                strokeWidth: 2,
+                dot: dot
+              }, s.dataKey) : /*#__PURE__*/jsxRuntimeExports.jsx(Line, {
+                type: "monotone",
+                dataKey: s.dataKey,
+                name: s.name,
+                stroke: color,
+                strokeWidth: 2,
+                dot: dot,
+                activeDot: {
+                  r: 5
+                }
+              }, s.dataKey);
+            }) : area ? /*#__PURE__*/jsxRuntimeExports.jsx(Area, {
               type: "monotone",
               dataKey: "value",
               name: seriesName,
@@ -88739,6 +88853,40 @@
     }).filter(d => Number.isFinite(d.value));
   }
 
+  // The figures a chart compares side by side: the spec's `ys` (the runtime's
+  // agents/data_charts.py writes them for pre vs post GRP, the 1+/3+/5+ reach
+  // curves), each named by `names` or else its prettified key. Two or more that
+  // the rows carry, else none, and a one-figure spec renders as before. Each
+  // figure is read under its own data key (s0, s1, ...), so a figure whose name
+  // matches the category's key ("label") cannot overwrite it.
+  function chartSeries(spec) {
+    const ys = Array.isArray(spec.ys) ? spec.ys.filter(k => typeof k === 'string' && k) : [];
+    const sample = Array.isArray(spec.data) ? spec.data.find(row => row && typeof row === 'object') : null;
+    const keys = sample ? [...new Set(ys)].filter(k => Object.prototype.hasOwnProperty.call(sample, k)) : [];
+    if (keys.length < 2) return [];
+    const names = spec.names && typeof spec.names === 'object' ? spec.names : {};
+    return keys.map((key, i) => ({
+      key,
+      dataKey: `s${i}`,
+      name: typeof names[key] === 'string' && names[key].trim() ? names[key].trim() : prettifyLabel(key)
+    }));
+  }
+
+  // numericData() for figures side by side: the label and each figure under its
+  // series' data key, null where a row has none; a row with none of them goes.
+  function seriesData(data, xKey, series) {
+    return (data || []).filter(row => row && typeof row === 'object').map(row => {
+      const point = {
+        label: formatAxisTick(row[xKey], xKey)
+      };
+      for (const s of series) {
+        const value = row[s.key] == null ? NaN : Number(row[s.key]);
+        point[s.dataKey] = Number.isFinite(value) ? value : null;
+      }
+      return point;
+    }).filter(point => series.some(s => point[s.dataKey] !== null));
+  }
+
   // ── Chart (SVG: line / bar / pie / donut + everything-else fallback) ─────
 
   function Chart({
@@ -88746,12 +88894,16 @@
     type,
     isDark
   }) {
+    const series = chartSeries(spec);
     const {
       x,
       y
-    } = inferKeys(spec.data, spec.x, spec.y);
-    const rows = numericData(spec.data, x, y);
+    } = inferKeys(spec.data, spec.x, series.length > 0 ? series[0].key : spec.y);
     const t = String(type || '').trim().toLowerCase();
+    // Figures side by side draw as grouped bars or one line each; a pie holds
+    // one figure, so a spec of several typed pie draws its first.
+    const sideBySide = series.length > 0 && t !== 'pie' && t !== 'donut';
+    const rows = sideBySide ? seriesData(spec.data, x, series) : numericData(spec.data, x, y);
     const chartProps = {
       title: spec.title,
       data: rows,
@@ -88766,7 +88918,9 @@
       valueLabel: prettifyLabel(y),
       // The currency the chart states ("USD", "INR", "₹"): the only source of
       // a currency symbol (widgetCatalog moneyFormatters).
-      currency: spec.currency
+      currency: spec.currency,
+      // Figures side by side (chartSeries): one bar or line each, in a legend.
+      series: sideBySide ? series : undefined
     };
     if (t === 'pie') return /*#__PURE__*/jsxRuntimeExports.jsx(PieChartRenderer, {
       props: chartProps,