@juicemantics/veloiq-ui 0.8.4 → 0.9.0

package/dist/index.mjs

@@ -5080,6 +5080,39 @@ var getSortPriority = (columnSort, fieldKey) => {
   const index = columnSort.findIndex((item) => item.fieldKey === fieldKey);
   return index === -1 ? 1 : columnSort.length - index + 1;
 };
+var _TOKEN_KEY = "jm_access_token";
+function useAuthenticatedFileUrl(rawUrl) {
+  const [src, setSrc] = useState("");
+  useEffect(() => {
+    if (!rawUrl) {
+      setSrc("");
+      return;
+    }
+    if (!rawUrl.includes("/api/file/")) {
+      setSrc(rawUrl);
+      return;
+    }
+    const token = localStorage.getItem(_TOKEN_KEY) || "";
+    const controller = new AbortController();
+    let objectUrl = "";
+    fetch(rawUrl, {
+      headers: token ? { Authorization: `Bearer ${token}` } : {},
+      signal: controller.signal
+    }).then((r) => r.ok ? r.blob() : Promise.reject()).then((blob) => {
+      objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+    }).catch(() => setSrc(""));
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [rawUrl]);
+  return src;
+}
+var AuthenticatedImage = ({ url, alt, style }) => {
+  const src = useAuthenticatedFileUrl(url);
+  return src ? /* @__PURE__ */ jsx("img", { src, alt: alt ?? "", style }) : null;
+};
 var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set(["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "tif", "tiff"]);
 var isImageRecord = (record) => {
   if (record?.avatar_url || record?.image_url || record?.photo_url) return true;
@@ -5137,7 +5170,7 @@ var renderSharedGalleryCard = ({
       style: { width: imageWidth, display: "grid", gap: 6, cursor: onClick ? "pointer" : "default" },
       onClick,
       children: [
-        contentUrl ? /* @__PURE__ */ jsx("img", { src: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsx(FileTextOutlined, { style: { fontSize: 24 } }) }),
+        contentUrl ? /* @__PURE__ */ jsx(AuthenticatedImage, { url: contentUrl, alt: label, style: imageStyle }) : /* @__PURE__ */ jsx("div", { style: { ...imageStyle, display: "flex", alignItems: "center", justifyContent: "center", color: "#8c8c8c" }, children: /* @__PURE__ */ jsx(FileTextOutlined, { style: { fontSize: 24 } }) }),
         /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: textColor, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: label })
       ]
     },
@@ -6082,6 +6115,8 @@ var AnalysisChart = ({
   };
   const primarySeriesKey = seriesKeys[0] || "__count__";
   const secondarySeriesKey = seriesKeys[1];
+  const resolveNumericField = (fields, n) => fields[Math.min(n, fields.length - 1)] ?? { key: "__count__", label: _10("Count") };
+  const resolveCategoryField = (field1, field2) => field2 ?? field1;
   const getNumericValue = (record, key) => {
     if (key === "__count__") return 1;
     const value = Number(record?.[key]);
@@ -6498,11 +6533,11 @@ var AnalysisChart = ({
     ] });
   };
   const renderScatter = (isBubble) => {
-    if (numericFields.length < 2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Scatter needs at least two numeric fields." });
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Scatter needs at least one numeric field." });
     }
-    const xField = numericFields[0];
-    const yField = numericFields[1];
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
     const points = rawRows.map((row) => {
       const x = getNumericValue(row, xField.key);
       const y = getNumericValue(row, yField.key);
@@ -6780,11 +6815,12 @@ var AnalysisChart = ({
     ] });
   };
   const renderHeatmap = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Heatmap needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Heatmap needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     const rowLabels = [];
     const colLabels = [];
     const grid = /* @__PURE__ */ new Map();
@@ -6862,43 +6898,45 @@ var AnalysisChart = ({
     ] });
   };
   const renderCrosstab = () => {
-    if (!categoryField1 || !categoryField2) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Crosstab needs two category fields." });
+    if (!categoryField1) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Crosstab needs a category field." });
     }
+    const effectiveCat2 = resolveCategoryField(categoryField1, categoryField2);
     const cat1Field = modelField(categoryField1);
-    const cat2Field = modelField(categoryField2);
+    const cat2Field = modelField(effectiveCat2);
     return /* @__PURE__ */ jsx(
       CrosstabTable,
       {
         rows: rawRows,
         rowField: categoryField1,
-        colField: categoryField2,
+        colField: effectiveCat2 ?? categoryField1,
         cellFieldKeys: seriesKeys,
         cellFieldLabels: seriesLabels,
         allFields,
         summaryFn,
         formatCategoryValue,
         numericBarColor,
-        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || categoryField2} (${summaryFn})`
+        caption: `${_10("Crosstab")}: ${cat1Field?.label || categoryField1} \xD7 ${cat2Field?.label || effectiveCat2} (${summaryFn})`
       }
     );
   };
   const renderRadar = () => {
-    if (seriesKeys.length < 3) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Radar needs at least three series." });
+    if (seriesKeys.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "Radar needs at least one series." });
     }
+    const effectiveSeriesKeys = seriesKeys.length >= 3 ? seriesKeys : Array.from({ length: 3 }, (_43, i) => seriesKeys[i % seriesKeys.length]);
     const centerX = paddingLeft + chartWidth / 2;
     const centerY = paddingTop + chartHeight / 2;
     const radius = Math.min(chartWidth, chartHeight) * 0.35;
-    const maxBySeries = seriesKeys.reduce((acc, key) => {
+    const maxBySeries = effectiveSeriesKeys.reduce((acc, key) => {
       acc[key] = Math.max(...data.map((group) => group.values[key] || 0), 1);
       return acc;
     }, {});
-    const angleStep = Math.PI * 2 / seriesKeys.length;
+    const angleStep = Math.PI * 2 / effectiveSeriesKeys.length;
     return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderCaption("Radar chart"),
-      seriesKeys.map((seriesKey, index) => {
+      effectiveSeriesKeys.map((seriesKey, index) => {
         const angle = -Math.PI / 2 + index * angleStep;
         const x = centerX + radius * Math.cos(angle);
         const y = centerY + radius * Math.sin(angle);
@@ -6908,7 +6946,7 @@ var AnalysisChart = ({
         ] }, `radar-axis-${seriesKey}`);
       }),
       data.map((group, groupIndex) => {
-        const points = seriesKeys.map((seriesKey, index) => {
+        const points = effectiveSeriesKeys.map((seriesKey, index) => {
           const value = group.values[seriesKey] || 0;
           const ratio = value / Math.max(1, maxBySeries[seriesKey]);
           const angle = -Math.PI / 2 + index * angleStep;
@@ -6933,13 +6971,74 @@ var AnalysisChart = ({
       })
     ] });
   };
-  const renderCombo = () => {
-    if (!secondarySeriesKey) {
-      return /* @__PURE__ */ jsx(Empty, { description: "Combo needs at least two series selected." });
+  const render3D = () => {
+    if (numericFields.length === 0) {
+      return /* @__PURE__ */ jsx(Empty, { description: "3D scatter needs at least one numeric field." });
     }
+    const xField = resolveNumericField(numericFields, 0);
+    const yField = resolveNumericField(numericFields, 1);
+    const zField = resolveNumericField(numericFields, 2);
+    const points = rawRows.map((row) => {
+      const x = getNumericValue(row, xField.key);
+      const y = getNumericValue(row, yField.key);
+      const z = getNumericValue(row, zField.key);
+      if (x === null || y === null || z === null) return null;
+      return { x, y, z };
+    }).filter((p) => !!p);
+    if (points.length === 0) return renderNoChartDataMessage();
+    const xs = points.map((p) => p.x);
+    const ys = points.map((p) => p.y);
+    const zs = points.map((p) => p.z);
+    const xMin = Math.min(...xs), xMax = Math.max(...xs);
+    const yMin = Math.min(...ys), yMax = Math.max(...ys);
+    const zMin = Math.min(...zs), zMax = Math.max(...zs);
+    const norm = (v, lo, hi) => hi === lo ? 0.5 : (v - lo) / (hi - lo);
+    const isoScale = Math.min(chartWidth, chartHeight) * 0.38;
+    const cx = paddingLeft + chartWidth * 0.5;
+    const cy = paddingTop + chartHeight * 0.55;
+    const cos30 = Math.cos(Math.PI / 6);
+    const sin30 = Math.sin(Math.PI / 6);
+    const project = (nx, ny, nz) => ({
+      sx: cx + (nx - nz) * cos30 * isoScale,
+      sy: cy - ny * isoScale + (nx + nz) * sin30 * isoScale
+    });
+    const axisEnd = (nx, ny, nz) => project(nx, ny, nz);
+    const origin = project(0, 0, 0);
+    const xTip = axisEnd(1, 0, 0);
+    const yTip = axisEnd(0, 1, 0);
+    const zTip = axisEnd(0, 0, 1);
+    const projected = points.map(
+      (p) => project(norm(p.x, xMin, xMax), norm(p.y, yMin, yMax), norm(p.z, zMin, zMax))
+    );
+    return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+      renderTitle(),
+      renderCaption(`3D: ${xField.label} \xD7 ${yField.label} \xD7 ${zField.label}`),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: xTip.sx, y2: xTip.sy, stroke: colors[0], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: yTip.sx, y2: yTip.sy, stroke: colors[1], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("line", { x1: origin.sx, y1: origin.sy, x2: zTip.sx, y2: zTip.sy, stroke: colors[2], strokeWidth: 1.5, opacity: 0.6 }),
+      /* @__PURE__ */ jsx("text", { x: xTip.sx + 4, y: xTip.sy + 4, fontSize: "11", fill: colors[0], children: xField.label }),
+      /* @__PURE__ */ jsx("text", { x: yTip.sx + 4, y: yTip.sy, fontSize: "11", fill: colors[1], children: yField.label }),
+      /* @__PURE__ */ jsx("text", { x: zTip.sx + 4, y: zTip.sy + 4, fontSize: "11", fill: colors[2], children: zField.label }),
+      projected.map((p, i) => /* @__PURE__ */ jsx(
+        "circle",
+        {
+          className: "chart-item chart-point",
+          style: { "--delay": `${i * 8}ms` },
+          cx: p.sx,
+          cy: p.sy,
+          r: 4,
+          fill: colors[0],
+          opacity: 0.7
+        },
+        `3d-${i}`
+      ))
+    ] });
+  };
+  const renderCombo = () => {
+    const effectiveSecondaryKey = secondarySeriesKey ?? primarySeriesKey;
     const valuesCombo = data.flatMap((group) => [
       group.values[primarySeriesKey] || 0,
-      group.values[secondarySeriesKey] || 0
+      group.values[effectiveSecondaryKey] || 0
     ]);
     const maxCombo = Math.max(...valuesCombo, 1);
     const minCombo = Math.min(...valuesCombo, 0);
@@ -6948,7 +7047,7 @@ var AnalysisChart = ({
     const barWidth2 = groupWidth2 * 0.6;
     const points = data.map((group, index) => {
       const x = paddingLeft + index * groupWidth2 + groupWidth2 / 2;
-      const y = scaleYCombo(group.values[secondarySeriesKey] || 0);
+      const y = scaleYCombo(group.values[effectiveSecondaryKey] || 0);
       return `${x},${y}`;
     }).join(" ");
     return /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
@@ -6956,7 +7055,7 @@ var AnalysisChart = ({
       renderLegendItems(
         [
           { label: seriesLabels[primarySeriesKey] || primarySeriesKey, color: colors[0] },
-          { label: seriesLabels[secondarySeriesKey] || secondarySeriesKey, color: colors[2] }
+          { label: seriesLabels[effectiveSecondaryKey] || effectiveSecondaryKey, color: colors[2] }
         ],
         8
       ),
@@ -7007,13 +7106,14 @@ var AnalysisChart = ({
     chartType === "histogram" && renderHistogram(),
     chartType === "scatter" && renderScatter(false),
     chartType === "bubble" && renderScatter(true),
-    chartType === "box" && renderBoxPlot(),
+    (chartType === "box" || chartType === "boxplot") && renderBoxPlot(),
     chartType === "waterfall" && renderWaterfall(),
     chartType === "heatmap" && renderHeatmap(),
     chartType === "crosstab" && renderCrosstab(),
     chartType === "radar" && renderRadar(),
     chartType === "combo" && renderCombo(),
-    chartType !== "histogram" && chartType !== "scatter" && chartType !== "bubble" && chartType !== "box" && chartType !== "waterfall" && chartType !== "heatmap" && chartType !== "crosstab" && chartType !== "radar" && chartType !== "combo" && /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
+    chartType === "3d" && render3D(),
+    (chartType === "bar" || chartType === "line" || chartType === "area" || chartType === "stacked" || chartType === "bar-horizontal" || chartType === "stacked-horizontal" || chartType === "area-horizontal") && /* @__PURE__ */ jsxs("svg", { ref: svgRef, className: "chart-plot", viewBox: `0 0 ${width} ${height}`, width: "100%", height, role: "img", children: [
       renderTitle(),
       renderLegendItems(
         seriesKeys.map((seriesKey, index) => ({
@@ -7460,6 +7560,13 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       if (syncHeightTimerRef.current) clearTimeout(syncHeightTimerRef.current);
     };
   }, []);
+  const inlineHtml = useMemo(
+    () => (html || "").replace(
+      /<script\b[^>]*\bsrc=["']?[^"'>]*cdn\.plot\.ly[^"'>]*["']?[^>]*><\/script>/gi,
+      ""
+    ),
+    [html]
+  );
   if (mode === "iframe") {
     return /* @__PURE__ */ jsx(
       "iframe",
@@ -7470,7 +7577,7 @@ body, table, th, td, input, button, select, textarea, div, span, p, li, ul, ol {
       }
     );
   }
-  return /* @__PURE__ */ jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: html || "" }, style });
+  return /* @__PURE__ */ jsx("div", { ref: htmlRef, dangerouslySetInnerHTML: { __html: inlineHtml }, style });
 };
 
 // src/components/DynamicResource/relations/helpers.ts
@@ -8686,7 +8793,7 @@ function useRoleFilteredModel(model) {
   }, [model, userRoles]);
 }
 var _19 = window._ || ((text) => text);
-var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
+var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded, beforeTabs }) => {
   const model = useRoleFilteredModel(modelProp);
   applyI18nLabelsToModel(model);
   applyI18nLabelsToModels(allModels);
@@ -8748,6 +8855,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
     return /* @__PURE__ */ jsxs("div", { className: "jm-tone-scope", style: toneScopeStyle(modelTone), children: [
       /* @__PURE__ */ jsx(ToneSharedStyles, {}),
       !record ? /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", padding: 32 }, children: /* @__PURE__ */ jsx(Spin, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        beforeTabs,
         /* @__PURE__ */ jsx(Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
         /* @__PURE__ */ jsx(
           ShowFooterButtons,
@@ -8775,6 +8883,7 @@ var DynamicShow = ({ model: modelProp, allModels, idOverride, embedded }) => {
         })),
         headerButtons,
         children: [
+          beforeTabs,
           /* @__PURE__ */ jsx(Tabs, { activeKey: activeTabKey, onChange: setActiveTabKey, items: lazyItems, destroyInactiveTabPane: true }),
           /* @__PURE__ */ jsx(
             ShowFooterButtons,
@@ -9752,7 +9861,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: cell.min_width ?? "",
       max_width: cell.max_width ?? "",
       min_height: cell.min_height ?? "",
-      max_height: cell.max_height ?? ""
+      max_height: cell.max_height ?? "",
+      chart_url: cell.chart_url ?? "",
+      chart_title: cell.chart_title ?? ""
     });
   }, [cell, tabId, config, form]);
   const handleSave = () => {
@@ -9768,7 +9879,9 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
       min_width: values.min_width || null,
       max_width: values.max_width || null,
       min_height: values.min_height || null,
-      max_height: values.max_height || null
+      max_height: values.max_height || null,
+      chart_url: values.chart_url || void 0,
+      chart_title: values.chart_title || void 0
     };
     const currentTab = config.tabs.find((t) => t.id === tabId);
     const nameUnchanged = currentTab?.name.trim().toLowerCase() === newTabName.toLowerCase();
@@ -9815,7 +9928,7 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
   return /* @__PURE__ */ jsx(
     Drawer,
     {
-      title: cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
+      title: cell?.source_type === "plotly_chart" ? `Configure chart: ${cell?.chart_title ?? cell?.model ?? ""}` : cell?.source_type !== "model" ? `Configure section: ${cell?.section_name ?? cell?.model ?? ""}` : `Configure cell: ${cell?.model ?? ""}`,
       placement: "right",
       width: 380,
       open,
@@ -9843,6 +9956,11 @@ var CellConfigDrawer = ({ open, cell, tabId, config, onClose, onSave }) => {
           /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "View" }),
           /* @__PURE__ */ jsx(Form.Item, { name: "view_type", label: "View type", children: /* @__PURE__ */ jsx(Select, { options: VIEW_TYPE_OPTIONS }) })
         ] }),
+        cell?.source_type === "plotly_chart" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "Chart" }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "chart_title", label: "Chart title", children: /* @__PURE__ */ jsx(Input, { placeholder: "e.g. Confidence by Month" }) }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "chart_url", label: "Chart URL", children: /* @__PURE__ */ jsx(Input, { placeholder: "/api/nl-answers-confidence-by-month-chart" }) })
+        ] }),
         /* @__PURE__ */ jsx(Divider, { orientation: "left", children: "Size" }),
         /* @__PURE__ */ jsxs(Space, { wrap: true, children: [
           /* @__PURE__ */ jsx(Form.Item, { name: "min_width", label: "Min width", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx(Input, { placeholder: "e.g. 320px", style: { width: 130 } }) }),
@@ -10047,6 +10165,13 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
     if (!cells.length) return 1;
     return Math.max(...cells.map((c) => c.row)) + 1;
   }, [cells]);
+  const soloRows = useMemo(() => {
+    const counts = /* @__PURE__ */ new Map();
+    for (const c of cells) counts.set(c.row, (counts.get(c.row) ?? 0) + 1);
+    const solo = /* @__PURE__ */ new Set();
+    for (const [row, count] of counts) if (count === 1) solo.add(row);
+    return solo;
+  }, [cells]);
   const visibleCells = maximizedCellId ? cells.filter((c) => c.id === maximizedCellId) : cells;
   const gridStyle = {
     display: "grid",
@@ -10065,7 +10190,7 @@ var SectionsGrid = ({ cells, config, tabId, renderContent, onConfigChange, isCon
       "div",
       {
         style: {
-          gridColumn: maximizedCellId ? "1 / -1" : `${cell.col + 1}`,
+          gridColumn: maximizedCellId || soloRows.has(cell.row) ? "1 / -1" : `${cell.col + 1}`,
           gridRow: maximizedCellId ? "1 / -1" : `${cell.row + 1}`
         },
         children: /* @__PURE__ */ jsx(
@@ -15386,7 +15511,8 @@ var RelatedObjectsTable = ({ rel, record, relatedModel, parentModel, showActions
                                           { label: _34("Heatmap"), value: "heatmap" },
                                           { label: _34("Crosstab"), value: "crosstab" },
                                           { label: _34("Radar"), value: "radar" },
-                                          { label: _34("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _34("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _34("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -16661,7 +16787,7 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
         if (["true", "1", "t", "yes", "y"].includes(normalized)) value = true;
         if (["false", "0", "f", "no", "n"].includes(normalized)) value = false;
       }
-      return [{ field: searchField.key, operator: "eq", value }];
+      return [{ field: searchField.key, operator: "contains", value }];
     }
   });
   const [allRowsData, setAllRowsData] = useState([]);
@@ -19917,7 +20043,8 @@ var DynamicList = ({ model: modelProp, allModels, filter, relationConfig, isEmbe
                                           { label: _36("Heatmap"), value: "heatmap" },
                                           { label: _36("Crosstab"), value: "crosstab" },
                                           { label: _36("Radar"), value: "radar" },
-                                          { label: _36("Combo (Bar + Line)"), value: "combo" }
+                                          { label: _36("Combo (Bar + Line)"), value: "combo" },
+                                          { label: _36("3D Scatter"), value: "3d" }
                                         ]
                                       }
                                     )
@@ -21077,6 +21204,48 @@ function useDashboardConfig() {
   }, [apiUrl]);
   return { config, enabled, loading, save, reload: load };
 }
+var PlotlyChartContent = ({ chartUrl, refreshNonce }) => {
+  const [chartHtml, setChartHtml] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+  const fetchChart = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      const apiUrl = typeof API_URL3 === "string" ? API_URL3 : "";
+      const fullUrl = chartUrl.startsWith("http") ? chartUrl : `${apiUrl}${chartUrl}`;
+      const sep = fullUrl.includes("?") ? "&" : "?";
+      const lang = (() => {
+        try {
+          return (localStorage.getItem("locale") || navigator.language || "en").split("-")[0].toLowerCase();
+        } catch {
+          return "en";
+        }
+      })();
+      const res = await authenticatedFetch(`${fullUrl}${sep}lang=${encodeURIComponent(lang)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = await res.json();
+      setChartHtml(data.chart_html || "");
+    } catch (e) {
+      setError(e?.message ?? String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [chartUrl]);
+  useEffect(() => {
+    fetchChart();
+  }, [fetchChart, refreshNonce]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", minHeight: 200 }, children: /* @__PURE__ */ jsx(Spin, {}) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Empty, { description: `Chart error: ${error}`, style: { padding: 20 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  if (!chartHtml) {
+    return /* @__PURE__ */ jsx(Empty, { description: "No chart data", style: { padding: 20 }, image: Empty.PRESENTED_IMAGE_SIMPLE });
+  }
+  return /* @__PURE__ */ jsx(InlinePlotlyHtml, { html: chartHtml, style: { padding: 8, height: "100%", overflow: "auto" } });
+};
 var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigureLayout, onConfigure, onMaximize, onMinimize, onResize, onMove }) => {
   const { token } = theme.useToken();
   const model = findModelByName(allModels, cell.model);
@@ -21109,10 +21278,12 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
     minHeight: 32,
     position: "relative"
   };
+  const isPlotlyChart = cell.source_type === "plotly_chart";
   const resource = model?.resource || cell.model;
   const isModelLike = cell.source_type === "model" || cell.source_type === "named_query";
-  const cellTitle = isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
+  const cellTitle = isPlotlyChart ? cell.chart_title || cell.model : isModelLike ? model?.label || cell.model : cell.section_name || cell.model;
   const tone = isModelLike && model ? getModelTone(model) : null;
+  const [chartRefreshNonce, setChartRefreshNonce] = useState(0);
   const startResize = useCallback((e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -21266,7 +21437,7 @@ var DashboardGridCell = ({ cell, allModels, isMaximized, isMinimized, canConfigu
         ) })
       ] })
     ] }),
-    !isMinimized && /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: model ? /* @__PURE__ */ jsx(
+    !isMinimized && /* @__PURE__ */ jsx("div", { style: { flex: 1, overflow: "auto", minHeight: 0 }, children: isPlotlyChart && cell.chart_url ? /* @__PURE__ */ jsx(PlotlyChartContent, { chartUrl: cell.chart_url, refreshNonce: chartRefreshNonce }) : model ? /* @__PURE__ */ jsx(
       DynamicList,
       {
         model,
@@ -21942,6 +22113,6 @@ var authSystemModels = [
   }
 ];
 
-export { API_URL3 as API_URL, AllModelsProvider, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, CustomSider, DashboardPage, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, LoginPage, ModelHeading, MultiPaneLayout, NavConfigContext, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, RecentActivityPanel, ReferenceField, ResourceContext, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
+export { API_URL3 as API_URL, AllModelsProvider, AuthenticatedImage, ColorModeContext, ColorModeContextProvider, CommandCenterPortal, CustomSider, DashboardPage, DynamicCreate, DynamicEdit, DynamicList, DynamicShow, ExecutableHtml, GlobalSearch, HierarchyView, HorizontalMenu, InlinePlotlyHtml, LayoutWrapper, LoginPage, ModelHeading, MultiPaneLayout, NavConfigContext, PaneNavigationContext, PinnedRecordsPanel, PrimaryShowContext, RecentActivityPanel, ReferenceField, ResourceContext, SectionsGrid, ShowFooterButtons, StandardList, StandardShow, ViewsGrid, accessControlProvider, authProvider, authSystemModels, authenticatedFetch, buildShowTabFormOptions, generateResources, getModelTone, getNavEntry, guessIcon, httpClient, normalizeToneKey, renderRelationBlock, resolveIcon, setColorSchemas, sortItemsByNavConfig, useAllModels, useAuthenticatedFileUrl, useKeyboardShortcuts, useMetadataModal, useNavConfig, useNavModules, usePaneNavigation, useRecordSearch, useShowActionsPreferences, useShowEditableForm, useStandardShowTabs };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map