Merge branch 'sqlpage:main' into feature_divider

Author: Corentin755727

Cargo.lock

@@ -37,7 +37,7 @@ panic = "abort"
 codegen-units = 2
 
 [dependencies]
-sqlx = { package = "sqlx-core-oldapi", version = "0.6.57", default-features = false, features = [
+sqlx = { package = "sqlx-core-oldapi", version = "0.6.59", default-features = false, features = [
     "any",
     "runtime-tokio-rustls",
     "migrate",

Cargo.toml

@@ -18,6 +18,8 @@ type DataPoint = {
   link?: string;
 };
 
+type AxisTitles = Record<"x" | "y" | "z", string | undefined>;
+
 type TooltipArgs = {
   seriesIndex: number;
   dataPointIndex: number;
@@ -29,13 +31,25 @@ function formatTooltipX(
   value: string | number | null,
   link: string | undefined,
 ) {
-  if (!link || !value) return value;
+  const text = value == null ? "" : String(value);
+  if (!link || !value) return text;
   const anchor = document.createElement("a");
   anchor.setAttribute("href", link);
-  anchor.textContent = String(value);
+  anchor.textContent = text;
   return anchor.outerHTML;
 }
 
+const rangeBarLabel = (_value: string | number, args?: TooltipArgs) =>
+  args ? args.w.config.series[args.seriesIndex].name : "";
+
+const pieLabel = (value: string | number, args?: TooltipArgs) =>
+  args
+    ? `${args.w.config.labels[args.seriesIndex]}: ${Number(value).toFixed()}%`
+    : "";
+
+const numberLabel = (value: string | number) =>
+  value == null ? "" : value.toLocaleString?.() || String(value);
+
 const sqlpage_chart = (() => {
   function sqlpage_chart() {
     const charts = document.querySelectorAll<HTMLElement>(
@@ -195,7 +209,9 @@ const sqlpage_chart = (() => {
     );
 
     const labels =
-      chart_type === "pie" ? points.map(({ name, x }) => x || name) : undefined;
+      chart_type === "pie"
+        ? points.map(({ name, x }) => String(x || name))
+        : undefined;
     const series =
       chart_type === "pie"
         ? points.map(({ y }) => Number.parseFloat(String(y)))
@@ -217,11 +233,16 @@ const sqlpage_chart = (() => {
       chart_type === "rangeBar" || (chart_type === "bar" && !!data.horizontal);
     const value_axis = inverted ? "x" : "y";
     const category_axis = inverted ? "y" : "x";
+    const axis_titles: AxisTitles = {
+      x: data.xtitle || undefined,
+      y: data.ytitle || undefined,
+      z: data.ztitle || undefined,
+    };
     const has_point_links = points.some((point) => point.link);
     const text_x_values = chart_series.every(({ data }) =>
       data.every(({ x }) => x == null || typeof x === "string"),
     );
-    const options = {
+    const options: ApexOptions = {
       annotations: {
         [`${value_axis}axis`]: reference_lines(
           reference_rows,
@@ -254,7 +275,7 @@ const sqlpage_chart = (() => {
         },
         events: {
           dataPointSelection: (_event, _chart, args) => {
-            const link = pointLink(args, points);
+            const link = args && pointLink(args, points);
             if (link) window.location.assign(link);
           },
         },
@@ -274,11 +295,10 @@ const sqlpage_chart = (() => {
         },
         formatter:
           chart_type === "rangeBar"
-            ? (_val, { seriesIndex, w }) => w.config.series[seriesIndex].name
+            ? rangeBarLabel
             : chart_type === "pie"
-              ? (value, { seriesIndex, w }) =>
-                  `${w.config.labels[seriesIndex]}: ${value.toFixed()}%`
-              : (value) => value?.toLocaleString?.() || value,
+              ? pieLabel
+              : numberLabel,
       },
       fill: {
         type: chart_type === "area" ? "gradient" : "solid",
@@ -295,12 +315,15 @@ const sqlpage_chart = (() => {
         min: data.xmin,
         max: data.xmax,
         title: {
-          text: data.xtitle || undefined,
+          text: axis_titles.x,
         },
         type: xaxis_type,
         labels: {
           datetimeUTC: false,
         },
+        // Numeric axes count intervals; category and time axes use tickAmount
+        // as a target for label density.
+        tickAmount: data.xticks || undefined,
       },
       yaxis: {
         logarithmic: !!data.logarithmic,
@@ -309,12 +332,7 @@ const sqlpage_chart = (() => {
         stepSize: data.ystep,
         tickAmount: data.yticks,
         title: {
-          text: data.ytitle || undefined,
-        },
-      },
-      zaxis: {
-        title: {
-          text: data.ztitle || undefined,
+          text: axis_titles.y,
         },
       },
       markers: {
@@ -329,7 +347,7 @@ const sqlpage_chart = (() => {
         interactive: has_point_links,
         custom:
           chart_type === "bubble" || chart_type === "scatter"
-            ? bubbleTooltip
+            ? (args: TooltipArgs) => chartTooltip(args, axis_titles)
             : undefined,
         x: {
           formatter:
@@ -363,19 +381,18 @@ const sqlpage_chart = (() => {
       colors,
       series,
     };
-    if (labels) (options as { labels?: unknown }).labels = labels;
-    // Numeric axes count intervals; category and time axes use tickAmount as a
-    // target for label density.
-    if (data.xticks)
-      (options.xaxis as { tickAmount?: number }).tickAmount = data.xticks;
-    const chart = new ApexCharts(chartContainer, options as ApexOptions);
+    if (labels) options.labels = labels;
+    const chart = new ApexCharts(chartContainer, options);
     chart.render().catch(console.error);
     if (window.charts) window.charts.push(chart);
     else window.charts = [chart];
     c.removeAttribute("data-pre-init");
   }
 
-  function chartTooltip({ seriesIndex, dataPointIndex, w }: TooltipArgs) {
+  function chartTooltip(
+    { seriesIndex, dataPointIndex, w }: TooltipArgs,
+    titles: AxisTitles,
+  ) {
     const series = w.config.series[seriesIndex];
     const name = series?.name || "";
     const point = series?.data[dataPointIndex];
@@ -390,14 +407,12 @@ const sqlpage_chart = (() => {
     seriesName.innerText = name;
     tooltip.appendChild(seriesName);
 
-    for (const axis of ["x", "y", "z"]) {
+    for (const axis of ["x", "y", "z"] as const) {
       const value = point[axis];
       if (value == null) continue;
       const axisValue = document.createElement("div");
       axisValue.className = "apexcharts-tooltip-y-group";
-      let axis_conf = w.config[`${axis}axis`];
-      if (axis_conf.length) axis_conf = axis_conf[0];
-      const title = axis_conf.title.text || axis;
+      const title = titles[axis] || axis;
       const labelSpan = document.createElement("span");
       labelSpan.className = "apexcharts-tooltip-text-y-label";
       labelSpan.innerText = `${title}: `;
@@ -426,10 +441,6 @@ const sqlpage_chart = (() => {
       : points[seriesIndex]?.link;
   }
 
-  function bubbleTooltip(args: TooltipArgs) {
-    return chartTooltip(args);
-  }
-
   return sqlpage_chart;
 })();
 

frontend/src/apexcharts.ts

@@ -1,15 +1,4 @@
-// Names the browser bundle relies on at runtime rather than through an import:
-// libraries loaded on demand, and what a page may provide for our scripts.
-
-/**
- * A library this project ships no type definitions for. Saying `unknown`
- * instead would only move the guesswork to a cast at every call site.
- */
-// biome-ignore lint/suspicious/noExplicitAny: that is what an untyped library is
-type Untyped = any;
-
-/** Leaflet, loaded from a CDN by sqlpage_map when a page holds a map. */
-declare const L: Untyped;
+// Names the browser bundle relies on at runtime rather than through an import.
 
 interface Window {
   /** Every chart rendered on the page, in the order they were built. */