Make chart point links clickable

Author: lovasoa

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## unreleased
 
-- Chart data points can now include a `link`, which is shown as a clickable link in the point's tooltip.
+- **Beta:** Chart data points can now include a `link`. The link is shown in an interactive tooltip, and clicking the data point itself also follows it. Interactive tooltips depend on [upstream ApexCharts support](https://github.com/apexcharts/apexcharts.js/issues/4469).
 
 ## v0.46.2
 

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -688,7 +688,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('label', 'An alias for parameter "x". On a row that draws a reference line, the text to display next to the line.', 'TEXT', FALSE, TRUE),
     ('value', 'An alias for parameter "y"', 'REAL', FALSE, TRUE),
     ('series', 'If multiple series are represented and share the same y-axis, this parameter can be used to distinguish between them.', 'TEXT', FALSE, TRUE),
-    ('link', 'Adds a clickable link to this point in its tooltip.', 'URL', FALSE, TRUE),
+    ('link', 'Beta: makes this data point clickable and adds the same link to its tooltip. Interactive tooltips depend on ApexCharts issue #4469.', 'URL', FALSE, TRUE),
     ('yline', 'Draws a reference line across the chart at this value of the y axis instead of plotting a point, to show a limit such as a quota or an alarm threshold. Not drawn if it falls outside of the axis, so set ymax when the limit is above the data.', 'REAL', FALSE, TRUE),
     ('yline_end', 'Makes the yline a band instead of a line, reaching to this value.', 'REAL', FALSE, TRUE),
     ('xline', 'Draws a reference line across the chart at this position of the x axis instead of plotting a point, to mark an event such as a deployment. A date or a timestamp when time is set, otherwise one of the x values.', 'TEXT', FALSE, TRUE),
@@ -790,7 +790,7 @@ The `color` property sets the color of each series separately, in order.
         { "series": "PostgreSQL", "x": "2010", "y": 65},{ "series": "SQLite", "x": "2010", "y": 62},{ "series": "MySQL", "x": "2010", "y": 83},
         { "series": "PostgreSQL", "x": "2020", "y": 73},{ "series": "SQLite", "x": "2020", "y": 38},{ "series": "MySQL", "x": "2020", "y": 87}
       ]')),
-    ('chart', 'A timeline displaying events with a start and an end date. A data row can include a `link` to make it available as a clickable action in the tooltip.',
+    ('chart', 'A timeline displaying events with a start and an end date. A data row can include a beta `link` to make both the bar and its tooltip clickable; see [ApexCharts issue #4469](https://github.com/apexcharts/apexcharts.js/issues/4469).',
     json('[
         {"component":"chart", "title": "Project Timeline", "type": "rangeBar", "time": true, "color": ["teal", "cyan"], "labels": true, "xmin": "2021-12-28", "xmax": "2022-01-04" },
         {"series": "Phase 1", "label": "Operations", "value": ["2021-12-29", "2022-01-02"], "link": "/examples/chart.sql?phase=1"},

sqlpage/apexcharts.js

@@ -258,6 +258,7 @@ sqlpage_chart = (() => {
       chart_type === "rangeBar" || (chart_type === "bar" && !!data.horizontal);
     const value_axis = inverted ? "x" : "y";
     const category_axis = inverted ? "y" : "x";
+    const has_point_links = points.some((point) => point[5]);
     const options = {
       annotations: {
         [`${value_axis}axis`]: reference_lines(
@@ -289,6 +290,12 @@ sqlpage_chart = (() => {
         zoom: {
           enabled: false,
         },
+        events: {
+          dataPointSelection: (_event, _chart, args) => {
+            const link = pointLink(args, points);
+            if (link) window.location.assign(link);
+          },
+        },
       },
       theme: {
         mode: isDarkTheme ? "dark" : "light",
@@ -361,7 +368,7 @@ sqlpage_chart = (() => {
       },
       tooltip: {
         fillSeriesColor: false,
-        custom: points.some((point) => point[5])
+        custom: has_point_links
           ? (args) => chartTooltip(args, points)
           : chart_type === "bubble" || chart_type === "scatter"
             ? bubbleTooltip
@@ -413,7 +420,7 @@ sqlpage_chart = (() => {
     const point = has_series_data
       ? series.data[dataPointIndex]
       : { y: raw_point?.[2], z: raw_point?.[4] };
-    const link = has_series_data ? point?.link : raw_point?.[5];
+    const link = pointLink({ seriesIndex, dataPointIndex, w }, raw_points);
 
     const tooltip = document.createElement("div");
     tooltip.className = "apexcharts-tooltip-text";
@@ -452,6 +459,13 @@ sqlpage_chart = (() => {
     return tooltip.outerHTML;
   }
 
+  function pointLink({ seriesIndex, dataPointIndex, w }, raw_points) {
+    const series = w.config.series[seriesIndex];
+    return Array.isArray(series?.data)
+      ? series.data[dataPointIndex]?.link
+      : raw_points[seriesIndex]?.[5];
+  }
+
   function bubbleTooltip(args) {
     return chartTooltip(args, []);
   }

sqlpage/sqlpage.css

@@ -64,15 +64,28 @@ code {
   color: inherit;
 }
 
-.apexcharts-tooltip:has(a) {
+.apexcharts-tooltip.apexcharts-active:has(a) {
+  isolation: isolate;
   pointer-events: auto;
 }
 
+.apexcharts-tooltip.apexcharts-active:has(a)::before {
+  content: "";
+  position: absolute;
+  inset: -12px;
+  z-index: -1;
+}
+
 .apexcharts-tooltip a {
   color: currentColor;
   text-decoration: underline;
 }
 
+.apexcharts-canvas:has(.apexcharts-tooltip.apexcharts-active a)
+  .apexcharts-svg {
+  cursor: pointer;
+}
+
 /** table **/
 .table-freeze-headers thead {
   position: sticky;

tests/end-to-end/fixtures/chart/test.ts

@@ -385,6 +385,14 @@ test("shows an interactive data point link in a rangeBar tooltip", async ({
     "pointer-events",
     "auto",
   );
+  await expect(
+    page.locator("#test-chart .apexcharts-rangebar-area").first(),
+  ).toHaveCSS("cursor", "pointer");
+  await page.locator("#test-chart .apexcharts-rangebar-area").nth(1).hover();
+  await expect(
+    page.locator("#test-chart .apexcharts-rangebar-area").nth(1),
+  ).not.toHaveCSS("cursor", "pointer");
+  await page.locator("#test-chart .apexcharts-rangebar-area").first().hover();
   const colors = await link.evaluate((anchor) => {
     const tooltip = anchor.closest(".apexcharts-tooltip");
     if (!tooltip) throw new Error("Link has no tooltip");
@@ -394,13 +402,16 @@ test("shows an interactive data point link in a rangeBar tooltip", async ({
     };
   });
   expect(colors.link).toBe(colors.tooltip);
-  await link.hover();
-  await expect(link).toBeVisible();
-  await page.locator("#test-chart .apexcharts-rangebar-area").nth(1).hover();
-  await expect(page.locator("#test-chart .apexcharts-tooltip a")).toHaveCount(
-    0,
-  );
-  await page.locator("#test-chart .apexcharts-rangebar-area").first().hover();
+  for (let attempt = 0; attempt < 10; attempt++) {
+    await link.hover();
+    await expect(link).toBeVisible();
+    await page.locator("#test-chart .apexcharts-rangebar-area").nth(1).hover();
+    await expect(page.locator("#test-chart .apexcharts-tooltip a")).toHaveCount(
+      0,
+    );
+    await page.locator("#test-chart .apexcharts-rangebar-area").first().hover();
+    await expect(link).toBeVisible();
+  }
   await link.click();
   await expect(page).toHaveURL(/workpackage_edit/);
 });