fix(chart) :: make xticks count tick positions

Author: lovasoa

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## unreleased
 
 - Numeric x values on Cartesian charts now explicitly use a continuous numeric axis, preventing fractional tick positions from being displayed as misleading rounded integers.
+- `xticks` now represents the requested number of tick positions on numeric x-axes, rather than the number of intervals between them.
 
 ## v0.46.1
 

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

@@ -669,7 +669,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('xtitle', 'Title of the x axis, displayed below it.', 'TEXT', TRUE, TRUE),
     ('ytitle', 'Title of the y axis, displayed to its left.', 'TEXT', TRUE, TRUE),
     ('ztitle', 'Title of the z axis, displayed in tooltips.', 'TEXT', TRUE, TRUE),
-    ('xticks', 'Number of intervals used to generate a numeric x-axis, normally producing one more tick position. On category and time axes, this is a target for label density, so the visible label count may differ.', 'INTEGER', TRUE, TRUE),
+    ('xticks', 'Number of tick positions on a numeric x-axis. On category and time axes, this is a target for label density, so the visible label count may differ.', 'INTEGER', TRUE, TRUE),
     ('yticks', 'Number of ticks on the y axis.', 'INTEGER', TRUE, TRUE),
     ('ystep', 'Step between ticks on the y axis.', 'REAL', TRUE, TRUE),
     ('marker', 'Marker size', 'REAL', TRUE, TRUE),

sqlpage/apexcharts.js

@@ -386,9 +386,10 @@ sqlpage_chart = (() => {
       series,
     };
     if (labels) options.labels = labels;
-    // Numeric axes count intervals; category and time axes use tickAmount as a
-    // target for label density.
-    if (data.xticks) options.xaxis.tickAmount = data.xticks;
+    // ApexCharts counts numeric intervals rather than tick positions.
+    if (data.xticks)
+      options.xaxis.tickAmount =
+        xaxis_type === "numeric" ? Math.max(1, data.xticks - 1) : data.xticks;
     const chart = new ApexCharts(chartContainer, options);
     chart.render();
     if (window.charts) window.charts.push(chart);

tests/end-to-end/fixtures/chart/numeric-axis-xticks.sql

@@ -1,9 +1,9 @@
 SELECT
     'chart' AS component,
     'test-chart' AS id,
-    'Explicit numeric x intervals' AS title,
+    'Explicit numeric x tick count' AS title,
     'bar' AS type,
-    2 AS xticks;
+    3 AS xticks;
 
 SELECT 'A' AS series, 1 AS x, 1 AS y
 UNION ALL SELECT 'A', 4, 4

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

@@ -175,11 +175,12 @@ test("keeps irregular numeric x values proportionately spaced", async ({
   );
 });
 
-test("keeps an explicit x interval count", async ({ page }) => {
+test("renders the requested number of numeric x ticks", async ({ page }) => {
   const chart = await renderChart(page, "numeric-axis-xticks");
 
   expect(chart.failures).toEqual([]);
   expect(chart.xaxis).toEqual({ type: "numeric", tickAmount: 2 });
+  expect(chart.axisLabels).toHaveLength(3);
 });
 
 test("keeps text x values as categories", async ({ page }) => {