diff --git a/CHANGELOG.md b/CHANGELOG.md index 50039ca1..cf53785d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,8 @@ - List-valued configuration options, including OIDC paths and trusted audiences, can now be set through environment variables as space-separated lists. - `sqlpage.fetch_with_meta` now correctly documents server JSON responses sent under `json_body`, not `body`. - Datagrid rows with an icon or image no longer display an unnecessary en-dash placeholder, and an explicitly empty description remains empty. + - Tooltip title text is now inhertis the same colour as the tooltip text. + - Charts can display reference lines. A row with a `yline` is drawn as a line across the chart at that value of the y axis, with the row's `label` and `color` for its text and its color. Reference lines are rows, so a chart can have as many of them as the query returns. A line follows its axis, so on a `horizontal` bar chart a `yline` is drawn down the chart rather than across it. They are not added to the total of a `stacked` chart, and are not filled in an `area` chart. - Charts can display reference lines. A row with a `yline` is drawn as a line across the chart at that value of the y axis, and a row with `xline` marks a position on the x axis. `label` and `color` set the line's text and its color. Reference lines are rows, so a chart can have as many of them as the query returns. A line follows its axis, so on a `horizontal` bar chart a `yline` is drawn down the chart rather than across it. They are not added to the total of a `stacked` chart, and are not filled in an `area` chart. ## v0.45 diff --git a/sqlpage/sqlpage.css b/sqlpage/sqlpage.css index a6e0b769..f803bee2 100644 --- a/sqlpage/sqlpage.css +++ b/sqlpage/sqlpage.css @@ -60,6 +60,10 @@ code { font-weight: var(--tblr-body-font-weight); } +.apexcharts-tooltip .apexcharts-tooltip-title { + color: inherit; +} + /** table **/ .table-freeze-headers thead { position: sticky; diff --git a/tests/end-to-end/chart-component.spec.ts b/tests/end-to-end/chart-component.spec.ts index 1e5d8b12..c593b977 100644 --- a/tests/end-to-end/chart-component.spec.ts +++ b/tests/end-to-end/chart-component.spec.ts @@ -387,6 +387,22 @@ test("draws a rangeBar chart that asks to be stacked", async ({ page }) => { expect(chart.stacked).toBe(false); }); +test("gives the tooltip title the color of the tooltip around it", async ({ + page, +}) => { + await renderChart(page, { type: "line" }, A_DAY_OF_WORK); + await page.locator("#test-chart .apexcharts-inner").hover({ force: true }); + + const title = page.locator("#test-chart .apexcharts-tooltip-title"); + await expect(title).toHaveText("Tue"); + const colors = await title.evaluate((el) => ({ + title: getComputedStyle(el).color, + tooltip: getComputedStyle(el.parentElement as HTMLElement).color, + })); + + expect(colors.title).toBe(colors.tooltip); +}); + test("draws a reference line that carries no label", async ({ page }) => { const chart = await renderChart(page, { type: "line" }, [ ...A_IN_EVERY_QUARTER,