@seed-ship/mcp-ui-solid 6.23.0 → 6.24.0

package/dist/components/ChartJSRenderer.js

@@ -2,12 +2,15 @@ import { createComponent, getNextElement, getNextMarker, insert, effect, setAttr
 import { createSignal, createMemo, createUniqueId, createEffect, untrack, onCleanup, Show, For } from "solid-js";
 import { ExpandableWrapper, useExpanded } from "./ExpandableWrapper.js";
 import { DegradedFallback } from "./DegradedFallback.js";
+import { MissingValueMark, MissingValueLegend } from "./MissingValue.js";
 import { chartToDataTable } from "./chart-data-table.js";
+import { missingNoteKind, applyUnitAxisTitle, createTooltipLabel, withDatasetsNoGapSpan, createMissingLegendGenerator, createMissingValuesPlugin } from "./chart-missing-plugin.js";
+import { summarizeChartMissing, PART_TO_WHOLE_CHART_TYPES } from "../utils/missing-value.js";
 import { useTelemetry } from "../context/MCPUITelemetryContext.js";
 import { useMCPUIConfig } from "../context/MCPUIConfigContext.js";
 import { useMCPUIStrings } from "../context/MCPUIStringsContext.js";
 import { formatMCPUIString } from "../utils/format-string.js";
-var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1"><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path></svg></button><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"></path></svg></button><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$5 = /* @__PURE__ */ template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-gray-50 dark:bg-gray-900/40"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">`), _tmpl$8 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/>`), _tmpl$9 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$0 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$1 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
+var _tmpl$ = /* @__PURE__ */ template(`<h3 class="text-sm font-semibold text-gray-900 dark:text-white">`), _tmpl$2 = /* @__PURE__ */ template(`<button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">`), _tmpl$3 = /* @__PURE__ */ template(`<div class="inline-flex items-center gap-1"><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM13.5 10.5h-6"></path></svg></button><button type=button class="opacity-60 hover:opacity-100 px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607zM10.5 7.5v6m3-3h-6"></path></svg></button><!$><!/>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class="opacity-0 group-hover:opacity-60 hover:!opacity-100 disabled:!opacity-30 disabled:cursor-not-allowed px-2 py-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-all shadow-sm"><svg class="w-3 h-3 text-gray-500 dark:text-gray-400"fill=none viewBox="0 0 24 24"stroke=currentColor><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">`), _tmpl$5 = /* @__PURE__ */ template(`<tr><td class="px-3 py-6 text-center text-gray-500 dark:text-gray-400">`), _tmpl$6 = /* @__PURE__ */ template(`<div><table class="w-full border-collapse text-left text-sm"><caption class=sr-only><!$><!/> — <!$><!/></caption><thead class="bg-gray-50 dark:bg-gray-900/40"><tr></tr></thead><tbody><!$><!/><!$><!/>`), _tmpl$7 = /* @__PURE__ */ template(`<div class="absolute inset-0 flex items-center justify-center bg-white/80 dark:bg-gray-800/80"><div class="flex flex-col items-center gap-2"><div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div><span class="text-sm text-gray-500 dark:text-gray-400">`), _tmpl$8 = /* @__PURE__ */ template(`<p>`), _tmpl$9 = /* @__PURE__ */ template(`<p data-mcp-chart-note=no-data>`), _tmpl$0 = /* @__PURE__ */ template(`<div data-mcp-chart-notes class="mt-2 space-y-0.5 text-xs text-gray-600 dark:text-gray-400"><!$><!/><!$><!/>`), _tmpl$1 = /* @__PURE__ */ template(`<div><div class="flex items-center justify-between gap-3 mb-3 flex-shrink-0"><div class=min-w-0></div><div class="flex items-center gap-2"><div class="inline-flex rounded-md border border-gray-200 p-0.5 dark:border-gray-600"role=group><button type=button></button><button type=button></button></div><!$><!/><!$><!/></div></div><p class=sr-only><!$><!/>. <!$><!/></p><!$><!/><!$><!/><div><canvas role=img></canvas><!$><!/></div><!$><!/>`), _tmpl$10 = /* @__PURE__ */ template(`<th scope=col class="px-3 py-2 font-medium text-gray-900 dark:text-gray-100">`), _tmpl$11 = /* @__PURE__ */ template(`<tr class="border-t border-gray-100 dark:border-gray-700">`), _tmpl$12 = /* @__PURE__ */ template(`<td class="px-3 py-2 text-gray-700 dark:text-gray-300">`);
 let ChartJS = null;
 let chartJSLoadPromise = null;
 const loadChartJS = async () => {
@@ -108,9 +111,33 @@ const ChartJSRenderer = (props) => {
     series: strings.chartTableSeries,
     point: strings.chartTablePoint,
     label: strings.degradedColLabel,
-    seriesName: strings.degradedSeries
+    seriesName: strings.degradedSeries,
+    withUnit: strings.chartLabelWithUnit
   }));
+  const missingSummary = createMemo(() => summarizeChartMissing(params()));
+  const unit = () => {
+    const value = params().unit;
+    return typeof value === "string" && value !== "" ? value : void 0;
+  };
+  const anyMissingCell = () => tableData().missing.some((row) => row.some(Boolean));
+  const notesShown = () => missingSummary().hasMissing && !PART_TO_WHOLE_CHART_TYPES.has(params().type) && activeView() === "chart" && !error();
+  const noteKind = () => missingNoteKind(params().type, params().options);
+  const conventionNoteShown = () => noteKind() === "bars" ? missingSummary().hasMissing : missingSummary().partiallyMissing.some(Boolean);
+  const noDataSeries = () => {
+    var _a;
+    const names = (((_a = params().data) == null ? void 0 : _a.datasets) ?? []).map((dataset, index) => missingSummary().fullyMissing[index] ? (dataset == null ? void 0 : dataset.label) || formatMCPUIString(strings.degradedSeries, {
+      n: index + 1
+    }) : null).filter((name) => name !== null);
+    try {
+      return new Intl.ListFormat(strings.locale, {
+        type: "conjunction"
+      }).format(names);
+    } catch {
+      return names.join(", ");
+    }
+  };
   const descriptionId = createUniqueId();
+  const notesId = createUniqueId();
   const title = () => params().title || strings.chartView;
   const exportEnabled = () => params().exportable !== false;
   const copyDataJSON = () => JSON.stringify({
@@ -180,9 +207,11 @@ const ChartJSRenderer = (props) => {
     a.click();
   };
   createEffect(async () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     if (!canvasRef) return;
     const chartParams = params();
+    const chartMissing = missingSummary();
+    const chartUnit = unit();
     const zoom = zoomOptions();
     const version = ++renderVersion;
     setIsLoading(true);
@@ -194,6 +223,9 @@ const ChartJSRenderer = (props) => {
         chartInstance.destroy();
         chartInstance = null;
       }
+      if (chartMissing.hasMissing && PART_TO_WHOLE_CHART_TYPES.has(chartParams.type)) {
+        throw new Error(strings.chartMissingUnsupported);
+      }
       const hostZoomOptions = (_b = (_a = chartParams.options) == null ? void 0 : _a.plugins) == null ? void 0 : _b.zoom;
       const baseOptions = {
         responsive: true,
@@ -239,11 +271,46 @@ const ChartJSRenderer = (props) => {
           }
         };
       }
-      chartInstance = new Chart(canvasRef, {
+      applyUnitAxisTitle(baseOptions, chartParams.type, chartUnit);
+      const chartConfig = {
         type: chartParams.type,
         data: chartParams.data,
         options: baseOptions
-      });
+      };
+      if (chartUnit !== void 0 || chartMissing.hasMissing) {
+        const tooltip = baseOptions.plugins.tooltip;
+        if (tooltip !== false && tooltip !== null && !((_g = tooltip == null ? void 0 : tooltip.callbacks) == null ? void 0 : _g.label)) {
+          baseOptions.plugins.tooltip = {
+            ...tooltip,
+            callbacks: {
+              ...tooltip == null ? void 0 : tooltip.callbacks,
+              label: createTooltipLabel(() => strings, chartUnit, chartParams.type)
+            }
+          };
+        }
+      }
+      if (chartMissing.hasMissing) {
+        chartConfig.data = withDatasetsNoGapSpan(chartParams.data);
+        const defaultGenerate = ((_i = (_h = baseOptions.plugins.legend) == null ? void 0 : _h.labels) == null ? void 0 : _i.generateLabels) ?? ((_m = (_l = (_k = (_j = Chart == null ? void 0 : Chart.defaults) == null ? void 0 : _j.plugins) == null ? void 0 : _k.legend) == null ? void 0 : _l.labels) == null ? void 0 : _m.generateLabels);
+        if (typeof defaultGenerate === "function") {
+          baseOptions.plugins.legend = {
+            ...baseOptions.plugins.legend,
+            labels: {
+              ...(_n = baseOptions.plugins.legend) == null ? void 0 : _n.labels,
+              generateLabels: createMissingLegendGenerator(defaultGenerate, chartMissing.fullyMissing, () => strings)
+            }
+          };
+        }
+        chartConfig.plugins = [createMissingValuesPlugin({
+          allMissing: chartMissing.allMissing,
+          getNoDataText: () => strings.chartNoData,
+          getFontFamily: () => {
+            var _a2, _b2;
+            return (_b2 = (_a2 = Chart == null ? void 0 : Chart.defaults) == null ? void 0 : _a2.font) == null ? void 0 : _b2.family;
+          }
+        })];
+      }
+      chartInstance = new Chart(canvasRef, chartConfig);
       setIsZoomed(false);
       setIsLoading(false);
     } catch (err) {
@@ -254,11 +321,11 @@ const ChartJSRenderer = (props) => {
       telemetry == null ? void 0 : telemetry.dispatch({
         type: "render:error",
         errorMessage: error2.message,
-        id: ((_g = props.component) == null ? void 0 : _g.id) ?? "",
+        id: ((_o = props.component) == null ? void 0 : _o.id) ?? "",
         componentType: "chart",
         ts: Date.now()
       });
-      (_h = props.onError) == null ? void 0 : _h.call(props, error2);
+      (_p = props.onError) == null ? void 0 : _p.call(props, error2);
     }
   });
   createEffect(() => {
@@ -292,7 +359,7 @@ const ChartJSRenderer = (props) => {
     get children() {
       return createComponent(ContextAwareChartLayout, {
         render: (isExpanded2) => (() => {
-          var _el$ = getNextElement(_tmpl$8), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$14 = _el$6.nextSibling, [_el$15, _co$2] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = getNextMarker(_el$22.nextSibling), _el$49 = _el$18.nextSibling, [_el$50, _co$1] = getNextMarker(_el$49.nextSibling), _el$51 = _el$50.nextSibling, [_el$52, _co$10] = getNextMarker(_el$51.nextSibling), _el$41 = _el$52.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling);
+          var _el$ = getNextElement(_tmpl$1), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$14 = _el$6.nextSibling, [_el$15, _co$2] = getNextMarker(_el$14.nextSibling), _el$16 = _el$15.nextSibling, [_el$17, _co$3] = getNextMarker(_el$16.nextSibling), _el$18 = _el$2.nextSibling, _el$20 = _el$18.firstChild, [_el$21, _co$4] = getNextMarker(_el$20.nextSibling), _el$19 = _el$21.nextSibling, _el$22 = _el$19.nextSibling, [_el$23, _co$5] = getNextMarker(_el$22.nextSibling), _el$56 = _el$18.nextSibling, [_el$57, _co$11] = getNextMarker(_el$56.nextSibling), _el$58 = _el$57.nextSibling, [_el$59, _co$12] = getNextMarker(_el$58.nextSibling), _el$41 = _el$59.nextSibling, _el$42 = _el$41.firstChild, _el$47 = _el$42.nextSibling, [_el$48, _co$0] = getNextMarker(_el$47.nextSibling), _el$60 = _el$41.nextSibling, [_el$61, _co$13] = getNextMarker(_el$60.nextSibling);
           insert(_el$3, createComponent(Show, {
             get when() {
               return params().title;
@@ -393,73 +460,94 @@ const ChartJSRenderer = (props) => {
                 }
               }, tableData));
             }
-          }), _el$50, _co$1);
+          }), _el$57, _co$11);
           insert(_el$, createComponent(Show, {
             get when() {
               return activeView() === "data";
             },
             get children() {
-              var _el$24 = getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = getNextMarker(_el$30.nextSibling), _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$8] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = getNextMarker(_el$39.nextSibling);
-              insert(_el$26, title, _el$29, _co$6);
-              insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
-              insert(_el$33, createComponent(For, {
-                get each() {
-                  return tableData().columns;
-                },
-                children: (column) => (() => {
-                  var _el$53 = getNextElement(_tmpl$9);
-                  insert(_el$53, column);
-                  return _el$53;
-                })()
-              }));
-              insert(_el$34, createComponent(For, {
-                get each() {
-                  return tableData().rows;
-                },
-                children: (row) => (() => {
-                  var _el$54 = getNextElement(_tmpl$0);
-                  insert(_el$54, createComponent(For, {
-                    get each() {
-                      return tableData().columns;
-                    },
-                    children: (_column, index) => (() => {
-                      var _el$55 = getNextElement(_tmpl$1);
-                      insert(_el$55, () => String(row[index()] ?? ""));
-                      return _el$55;
-                    })()
-                  }));
-                  return _el$54;
-                })()
-              }), _el$38, _co$8);
-              insert(_el$34, createComponent(Show, {
+              return [(() => {
+                var _el$24 = getNextElement(_tmpl$6), _el$25 = _el$24.firstChild, _el$26 = _el$25.firstChild, _el$28 = _el$26.firstChild, [_el$29, _co$6] = getNextMarker(_el$28.nextSibling), _el$27 = _el$29.nextSibling, _el$30 = _el$27.nextSibling, [_el$31, _co$7] = getNextMarker(_el$30.nextSibling), _el$32 = _el$26.nextSibling, _el$33 = _el$32.firstChild, _el$34 = _el$32.nextSibling, _el$37 = _el$34.firstChild, [_el$38, _co$8] = getNextMarker(_el$37.nextSibling), _el$39 = _el$38.nextSibling, [_el$40, _co$9] = getNextMarker(_el$39.nextSibling);
+                insert(_el$26, title, _el$29, _co$6);
+                insert(_el$26, () => strings.chartDataTable, _el$31, _co$7);
+                insert(_el$33, createComponent(For, {
+                  get each() {
+                    return tableData().columns;
+                  },
+                  children: (column) => (() => {
+                    var _el$62 = getNextElement(_tmpl$10);
+                    insert(_el$62, column);
+                    return _el$62;
+                  })()
+                }));
+                insert(_el$34, createComponent(For, {
+                  get each() {
+                    return tableData().rows;
+                  },
+                  children: (row, rowIndex) => (() => {
+                    var _el$63 = getNextElement(_tmpl$11);
+                    insert(_el$63, createComponent(For, {
+                      get each() {
+                        return tableData().columns;
+                      },
+                      children: (_column, index) => (() => {
+                        var _el$64 = getNextElement(_tmpl$12);
+                        insert(_el$64, createComponent(Show, {
+                          get when() {
+                            var _a;
+                            return (_a = tableData().missing[rowIndex()]) == null ? void 0 : _a[index()];
+                          },
+                          get fallback() {
+                            return String(row[index()] ?? "");
+                          },
+                          get children() {
+                            return createComponent(MissingValueMark, {});
+                          }
+                        }));
+                        return _el$64;
+                      })()
+                    }));
+                    return _el$63;
+                  })()
+                }), _el$38, _co$8);
+                insert(_el$34, createComponent(Show, {
+                  get when() {
+                    return tableData().rows.length === 0;
+                  },
+                  get children() {
+                    var _el$35 = getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
+                    insert(_el$36, () => strings.chartNoData);
+                    effect(() => setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
+                    return _el$35;
+                  }
+                }), _el$40, _co$9);
+                effect((_p$) => {
+                  var _v$0 = `w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
+                    height: params().height || "250px",
+                    "max-height": "70vh"
+                  };
+                  _v$0 !== _p$.e && className(_el$24, _p$.e = _v$0);
+                  _p$.t = style(_el$24, _v$1, _p$.t);
+                  return _p$;
+                }, {
+                  e: void 0,
+                  t: void 0
+                });
+                return _el$24;
+              })(), createComponent(Show, {
                 get when() {
-                  return tableData().rows.length === 0;
+                  return anyMissingCell();
                 },
                 get children() {
-                  var _el$35 = getNextElement(_tmpl$5), _el$36 = _el$35.firstChild;
-                  insert(_el$36, () => strings.chartNoData);
-                  effect(() => setAttribute(_el$36, "colspan", Math.max(1, tableData().columns.length)));
-                  return _el$35;
+                  return createComponent(MissingValueLegend, {
+                    "class": "mt-2"
+                  });
                 }
-              }), _el$40, _co$9);
-              effect((_p$) => {
-                var _v$0 = `w-full overflow-auto rounded border border-gray-200 dark:border-gray-700 ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$1 = isExpanded2() ? void 0 : {
-                  height: params().height || "250px",
-                  "max-height": "70vh"
-                };
-                _v$0 !== _p$.e && className(_el$24, _p$.e = _v$0);
-                _p$.t = style(_el$24, _v$1, _p$.t);
-                return _p$;
-              }, {
-                e: void 0,
-                t: void 0
-              });
-              return _el$24;
+              })];
             }
-          }), _el$52, _co$10);
+          }), _el$59, _co$12);
           var _ref$ = canvasRef;
           typeof _ref$ === "function" ? use(_ref$, _el$42) : canvasRef = _el$42;
-          setAttribute(_el$42, "aria-describedby", descriptionId);
           insert(_el$41, createComponent(Show, {
             get when() {
               return memo(() => !!isLoading())() && activeView() === "chart";
@@ -470,6 +558,42 @@ const ChartJSRenderer = (props) => {
               return _el$43;
             }
           }), _el$48, _co$0);
+          insert(_el$, createComponent(Show, {
+            get when() {
+              return notesShown();
+            },
+            get children() {
+              var _el$49 = getNextElement(_tmpl$0), _el$52 = _el$49.firstChild, [_el$53, _co$1] = getNextMarker(_el$52.nextSibling), _el$54 = _el$53.nextSibling, [_el$55, _co$10] = getNextMarker(_el$54.nextSibling);
+              setAttribute(_el$49, "id", notesId);
+              insert(_el$49, createComponent(Show, {
+                get when() {
+                  return conventionNoteShown();
+                },
+                get children() {
+                  var _el$50 = getNextElement(_tmpl$8);
+                  insert(_el$50, (() => {
+                    var _c$ = memo(() => noteKind() === "bars");
+                    return () => _c$() ? strings.chartMissingBars : memo(() => noteKind() === "omitted")() ? strings.chartMissingPoints : strings.chartMissingGaps;
+                  })());
+                  effect(() => setAttribute(_el$50, "data-mcp-chart-note", noteKind()));
+                  return _el$50;
+                }
+              }), _el$53, _co$1);
+              insert(_el$49, createComponent(Show, {
+                get when() {
+                  return missingSummary().fullyMissing.some(Boolean);
+                },
+                get children() {
+                  var _el$51 = getNextElement(_tmpl$9);
+                  insert(_el$51, () => formatMCPUIString(strings.chartSeriesNoData, {
+                    series: noDataSeries()
+                  }));
+                  return _el$51;
+                }
+              }), _el$55, _co$10);
+              return _el$49;
+            }
+          }), _el$61, _co$13);
           effect((_p$) => {
             var _v$10 = `relative w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden p-4 group ${isExpanded2() ? "flex-1 min-h-0 flex flex-col" : ""} ${params().className || ""}`, _v$11 = strings.chartViewSelector, _v$12 = activeView() === "chart", _v$13 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "chart" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$14 = activeView() === "data", _v$15 = `rounded px-2 py-1 text-xs font-medium transition-colors ${activeView() === "data" ? "bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900" : "text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"}`, _v$16 = `relative w-full ${isExpanded2() ? "flex-1 min-h-0" : ""}`, _v$17 = error() || activeView() === "data" ? {
               display: "none"
@@ -479,7 +603,7 @@ const ChartJSRenderer = (props) => {
             } : {
               height: params().height || "250px",
               display: "block"
-            }, _v$18 = title(), _v$19 = activeView() !== "chart" || Boolean(error());
+            }, _v$18 = title(), _v$19 = notesShown() ? `${descriptionId} ${notesId}` : descriptionId, _v$20 = activeView() !== "chart" || Boolean(error());
             _v$10 !== _p$.e && className(_el$, _p$.e = _v$10);
             _v$11 !== _p$.t && setAttribute(_el$6, "aria-label", _p$.t = _v$11);
             _v$12 !== _p$.a && setAttribute(_el$7, "aria-pressed", _p$.a = _v$12);
@@ -489,7 +613,8 @@ const ChartJSRenderer = (props) => {
             _v$16 !== _p$.s && className(_el$41, _p$.s = _v$16);
             _p$.h = style(_el$41, _v$17, _p$.h);
             _v$18 !== _p$.r && setAttribute(_el$42, "aria-label", _p$.r = _v$18);
-            _v$19 !== _p$.d && setAttribute(_el$42, "aria-hidden", _p$.d = _v$19);
+            _v$19 !== _p$.d && setAttribute(_el$42, "aria-describedby", _p$.d = _v$19);
+            _v$20 !== _p$.l && setAttribute(_el$42, "aria-hidden", _p$.l = _v$20);
             return _p$;
           }, {
             e: void 0,
@@ -501,7 +626,8 @@ const ChartJSRenderer = (props) => {
             s: void 0,
             h: void 0,
             r: void 0,
-            d: void 0
+            d: void 0,
+            l: void 0
           });
           runHydrationEvents();
           return _el$;