fix(chart) :: change tootltip title colour to be visible (#1401)

Co-authored-by: Ophir LOJKINE <contact@ophir.dev>

Author: 81reap

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

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;

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,