next: ai part 3

website_next/ask/conversation/message/chart/index.js

@@ -0,0 +1,32 @@
+import { createChart } from "../../../../chart/index.js";
+import { units } from "../../../../chart/units.js";
+import { colors } from "../../../../utils/colors.js";
+import { createMetric } from "../../../tools/metrics/index.js";
+
+/** @typedef {import("../../../storage.js").ChartArtifact} ChartArtifact */
+
+/** @param {ChartArtifact} artifact */
+export function createAskChart(artifact) {
+  const section = document.createElement("section");
+  const spec = artifact.chart;
+
+  section.dataset.askChart = "";
+  try {
+    const chart = {
+      title: spec.title,
+      unit: units[spec.unit],
+      defaultType: spec.view,
+      defaultScale: spec.scale,
+      series: spec.series.map((item) => ({
+        label: item.label,
+        color: colors[item.color],
+        metric: createMetric(item.path),
+      })),
+    };
+    section.append(createChart(chart, `ask-${artifact.id}`));
+  } catch {
+    section.dataset.state = "unavailable";
+    section.textContent = "Chart unavailable";
+  }
+  return section;
+}

website_next/ask/conversation/message/chart/style.css

@@ -0,0 +1,20 @@
+main[data-page="ask"] [data-ask-chart] {
+  margin-top: 1rem;
+
+  &[data-state="unavailable"] {
+    color: var(--gray);
+  }
+
+  figure[data-chart="series"] {
+    --chart-plot-height: 16rem;
+    --chart-reserved-ui-height: 5rem;
+
+    margin: 0;
+  }
+}
+
+@media (max-width: 48rem) {
+  main[data-page="ask"] [data-ask-chart] figure[data-chart="series"] {
+    --chart-plot-height: 13rem;
+  }
+}