feat(chart): add links to data point tooltips - #1438
Conversation
| 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"]}, | ||
| {"series": "Phase 1", "label": "Operations", "value": ["2021-12-29", "2022-01-02"], "link": "/examples/chart.sql?phase=1"}, |
There was a problem hiding this comment.
when I go to http://127.0.0.1:7071/component.sql?component=chart I see that there is an open link button, but the tooltip dissappears when I try to click it. also the link seems visually disabled
| const series = w.config.series[seriesIndex]; | ||
| const name = series?.name || w.config.labels?.[dataPointIndex] || ""; | ||
| const point = series?.data?.[dataPointIndex] || {}; | ||
| const link = point.link || raw_points[dataPointIndex]?.[5]; |
There was a problem hiding this comment.
the screenshot also shows that rows without links still show the Open Link hyperlink. I think it's leaking into other rows from here
| custom: points.some((point) => point[5]) | ||
| ? (args) => chartTooltip(args, points) | ||
| : chart_type === "bubble" || chart_type === "scatter" |
There was a problem hiding this comment.
I think this may be skipping the formatter. when you check on the live website, the dates are formatted
| expect(chart.shapes).toHaveLength(2); | ||
| }); | ||
|
|
||
| test("shows a data point link in its tooltip", async ({ page }) => { |
There was a problem hiding this comment.
I think it would be worth to test multiple different kinds of charts since not all of them use the rows in the same way. claude is pointing out that there may be a code smell with pie charts
| axisValue.appendChild(valueSpan); | ||
| tooltip.appendChild(axisValue); | ||
| } | ||
| add_link_to_tooltip(tooltip, link); |
| SELECT 'chart' AS component, 'It works !' AS title; | ||
| SELECT 'plain' AS x, '1' AS y; | ||
| SELECT 'colored' AS x, '2' AS y, 'red' AS color; | ||
| SELECT 'sized' AS x, '3' AS y, '30' AS z; | ||
| SELECT 'both' AS x, '4' AS y, 'green' AS color, '40' AS z; | ||
| SELECT 'linked' AS x, '5' AS y, '/edit.sql?id=5' AS link; | ||
| SELECT '70' AS yline, 'limit' AS label, 'orange' AS color; |
There was a problem hiding this comment.
I think this test is orphaned and doesn't run
https://github.com/search?q=repo%3Asqlpage%2FSQLPage+chart_point_serialization.sql&type=code
2 participants
Summary
Closes #945.
Adds an optional row-level
linkparameter to thechartcomponent. When a chart data row has a link, the chart tooltip includes an accessibleOpen linkanchor pointing to that URL.Implementation
linkthrough the chart template's point data without changing the existing color/z positions.Tests
npm testcargo testcd tests/end-to-end && npm run test -- --grep "data point link"