Skip to content

Add group_pad hierarchal axis plugin_config option for `viewer-ch… #3255

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
texodus merged 1 commit into from
Oct 16, 2026
Merged

Add group_pad hierarchal axis plugin_config option for `viewer-ch… #3255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions packages/viewer-charts/src/ts/axis/categorical-axis-core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,3 +123,71 @@ export function runsInRange(

return out;
}

/**
* Inclusive `[first, last]` index range of the ascending `positions[0..n)` entries inside `[lo, hi]`, empty when `first > last`.
*/
export function positionsInRange(
positions: ArrayLike<number>,
n: number,
lo: number,
hi: number,
): [number, number] {
let l = 0;
let r = n;
while (l < r) {
const m = (l + r) >>> 1;
if (positions[m] < lo) {
l = m + 1;
} else {
r = m;
}
}

const first = l;
r = n;
while (l < r) {
const m = (l + r) >>> 1;
if (positions[m] <= hi) {
l = m + 1;
} else {
r = m;
}
}

return [first, l - 1];
}

/**
* Index of the ascending `positions[0..n)` entry nearest to `x`, or `-1` when `n` is 0.
*/
export function nearestPosition(
positions: ArrayLike<number>,
n: number,
x: number,
): number {
if (n === 0) {
return -1;
}

let l = 0;
let r = n;
while (l < r) {
const m = (l + r) >>> 1;
if (positions[m] < x) {
l = m + 1;
} else {
r = m;
}
}

if (l === 0) {
return 0;
}

if (l === n) {
return n - 1;
}

return x - positions[l - 1] <= positions[l] - x ? l - 1 : l;
}
71 changes: 57 additions & 14 deletions packages/viewer-charts/src/ts/axis/categorical-axis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,11 @@ import {
rotatedLabelsOverlap,
truncateLabel,
} from "./label-geometry";
import { type GroupRun, runsInRange } from "./categorical-axis-core";
import {
type GroupRun,
positionsInRange,
runsInRange,
} from "./categorical-axis-core";
import type { Theme } from "../theme/theme";

export interface CategoricalLevel {
Expand All @@ -32,6 +36,11 @@ export interface CategoricalDomain {
levels: CategoricalLevel[];
numRows: number;
levelLabels: string[];

/**
* Ascending per-row axis coordinate; absent means row `i` sits at `i`.
*/
positions?: ArrayLike<number>;
}

interface LevelTickLayout {
Expand All @@ -48,12 +57,27 @@ const LEAF_LEVEL_WIDTH_MIN = 55;
const OUTER_LEVEL_WIDTH = 60;
const LEAF_LABEL_PADDING = 10;

function categoryIndexToPixelX(layout: PlotLayout, index: number): number {
return layout.dataToPixel(index, 0).px;
function categoryCoord(
positions: ArrayLike<number> | undefined,
index: number,
): number {
return positions ? positions[index] : index;
}

function categoryIndexToPixelY(layout: PlotLayout, index: number): number {
return layout.dataToPixel(0, index).py;
function categoryIndexToPixelX(
layout: PlotLayout,
positions: ArrayLike<number> | undefined,
index: number,
): number {
return layout.dataToPixel(categoryCoord(positions, index), 0).px;
}

function categoryIndexToPixelY(
layout: PlotLayout,
positions: ArrayLike<number> | undefined,
index: number,
): number {
return layout.dataToPixel(0, categoryCoord(positions, index)).py;
}

function leafLevelLayout(
Expand Down Expand Up @@ -190,9 +214,15 @@ function visibleRowWindow(
a: number,
b: number,
flip: boolean,
positions: ArrayLike<number> | undefined,
): [number, number] | null {
const lo = flip ? Math.min(a, b) : a;
const hi = flip ? Math.max(a, b) : b;
if (positions) {
const [first, last] = positionsInRange(positions, numRows, lo, hi);
return last < first ? null : [first, last];
}

const visMin = Math.max(0, Math.ceil(lo));
const visMax = Math.min(numRows - 1, Math.floor(hi));
return visMax < visMin ? null : [visMin, visMax];
Expand All @@ -206,7 +236,8 @@ function visibleRowWindow(
*/
function clippedRuns(
runs: GroupRun[],
pixelOf: (idx: number) => number,
positions: ArrayLike<number> | undefined,
pixelOf: (coord: number) => number,
mainStart: number,
mainEnd: number,
): Array<{
Expand All @@ -218,8 +249,8 @@ function clippedRuns(
}> {
const out = [];
for (const run of runs) {
const nearEdge = pixelOf(run.startIdx - 0.5);
const farEdge = pixelOf(run.endIdx + 0.5);
const nearEdge = pixelOf(categoryCoord(positions, run.startIdx) - 0.5);
const farEdge = pixelOf(categoryCoord(positions, run.endIdx) + 0.5);
const nearClip = Math.max(mainStart, Math.min(nearEdge, farEdge));
const farClip = Math.min(mainEnd, Math.max(nearEdge, farEdge));
if (farClip > nearClip) {
Expand Down Expand Up @@ -255,6 +286,7 @@ export function renderCategoricalXTicks(
layout.paddedXMin,
layout.paddedXMax,
false,
domain.positions,
);
if (!win) {
return;
Expand All @@ -275,6 +307,7 @@ export function renderCategoricalXTicks(
ctx,
layout,
level,
domain.positions,
visMin,
visMax,
rowTop,
Expand All @@ -287,6 +320,7 @@ export function renderCategoricalXTicks(
ctx,
layout,
level,
domain.positions,
visMin,
visMax,
rowTop,
Expand All @@ -310,6 +344,7 @@ function renderLeafLevel(
ctx: Context2D,
layout: PlotLayout,
level: CategoricalLevel,
positions: ArrayLike<number> | undefined,
visMin: number,
visMax: number,
rowTop: number,
Expand All @@ -334,7 +369,7 @@ function renderLeafLevel(
ctx.fillStyle = tickColor;
ctx.beginPath();
for (const r of tickRows) {
const px = categoryIndexToPixelX(layout, r);
const px = categoryIndexToPixelX(layout, positions, r);
if (px < plot.x - 1 || px > plot.x + plot.width + 1) {
continue;
}
Expand All @@ -360,7 +395,7 @@ function renderLeafLevel(
height: number;
}[] = [];
for (const r of tickRows) {
const px = categoryIndexToPixelX(layout, r);
const px = categoryIndexToPixelX(layout, positions, r);
if (px < plot.x - 1 || px > plot.x + plot.width + 1) {
continue;
}
Expand Down Expand Up @@ -402,6 +437,7 @@ function renderOuterLevel(
ctx: Context2D,
layout: PlotLayout,
level: CategoricalLevel,
positions: ArrayLike<number> | undefined,
visMin: number,
visMax: number,
rowTop: number,
Expand All @@ -416,7 +452,8 @@ function renderOuterLevel(

const clipped = clippedRuns(
runs,
(idx) => categoryIndexToPixelX(layout, idx),
positions,
(coord) => layout.dataToPixel(coord, 0).px,
plot.x,
plot.x + plot.width,
);
Expand Down Expand Up @@ -518,6 +555,7 @@ export function renderCategoricalYTicks(
layout.paddedYMin,
layout.paddedYMax,
true,
domain.positions,
);
if (!win) {
return;
Expand All @@ -538,6 +576,7 @@ export function renderCategoricalYTicks(
ctx,
layout,
level,
domain.positions,
visMin,
visMax,
colRight,
Expand All @@ -549,6 +588,7 @@ export function renderCategoricalYTicks(
ctx,
layout,
level,
domain.positions,
visMin,
visMax,
colRight,
Expand Down Expand Up @@ -577,6 +617,7 @@ function renderLeafLevelY(
ctx: Context2D,
layout: PlotLayout,
level: CategoricalLevel,
positions: ArrayLike<number> | undefined,
visMin: number,
visMax: number,
colRight: number,
Expand All @@ -594,7 +635,7 @@ function renderLeafLevelY(
ctx.fillStyle = tickColor;
ctx.beginPath();
for (let r = visMin; r <= visMax; r += step) {
const py = categoryIndexToPixelY(layout, r);
const py = categoryIndexToPixelY(layout, positions, r);
if (py < plot.y - 1 || py > plot.y + plot.height + 1) {
continue;
}
Expand All @@ -609,7 +650,7 @@ function renderLeafLevelY(
ctx.textAlign = "right";
ctx.textBaseline = "middle";
for (let r = visMin; r <= visMax; r += step) {
const py = categoryIndexToPixelY(layout, r);
const py = categoryIndexToPixelY(layout, positions, r);
if (py < plot.y - 1 || py > plot.y + plot.height + 1) {
continue;
}
Expand All @@ -627,6 +668,7 @@ function renderOuterLevelY(
ctx: Context2D,
layout: PlotLayout,
level: CategoricalLevel,
positions: ArrayLike<number> | undefined,
visMin: number,
visMax: number,
colRight: number,
Expand All @@ -642,7 +684,8 @@ function renderOuterLevelY(

const clipped = clippedRuns(
runs,
(idx) => categoryIndexToPixelY(layout, idx),
positions,
(coord) => layout.dataToPixel(0, coord).py,
plot.y,
plot.y + plot.height,
);
Expand Down
11 changes: 6 additions & 5 deletions packages/viewer-charts/src/ts/charts/chart-base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,9 +221,9 @@ export abstract class AbstractChart implements ChartImplementation {
* (driven from the host's `plugin.restore()`) and read by render-
* path glyphs (`line_width_px`, `point_size_px`, etc.) and by the
* build pipelines (`auto_alt_y_axis`, `band_inner_frac`,
* `bar_inner_pad`). Defaults preserve the previous compile-time
* constants so first-frame rendering before `restore()` matches
* the pre-refactor output.
* `bar_inner_pad`, `group_pad`). Defaults preserve the previous
* compile-time constants so first-frame rendering before `restore()`
* matches the pre-refactor output.
*/
_pluginConfig: PluginConfig = { ...DEFAULT_PLUGIN_CONFIG };

Expand Down Expand Up @@ -601,8 +601,9 @@ export abstract class AbstractChart implements ChartImplementation {
* `wick_width_px`, `ohlc_line_width_px`) are read directly from
* `_pluginConfig` by their respective glyphs on each draw — no
* sync needed. Build-time fields (`auto_alt_y_axis`,
* `band_inner_frac`, `bar_inner_pad`) are read by the pipeline
* inputs in `uploadAndRender`; they take effect on next data load.
* `band_inner_frac`, `bar_inner_pad`, `group_pad`) are read by
* the pipeline inputs in `uploadAndRender`; they take effect on next
* data load.
*/
setPluginConfig(cfg: PluginConfig): void {
// Persistence echo vs. real change: a restore whose legend
Expand Down
6 changes: 6 additions & 0 deletions packages/viewer-charts/src/ts/charts/chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,11 @@ export interface PluginConfig {
*/
bar_inner_pad: number;

/**
* Extra category gap, in leaf-band units, added per outer `group_by` level that changes across a category boundary.
*/
group_pad: number;

/**
* Candlestick wick stroke width in CSS pixels. Replaces
* `WICK_WIDTH_PX`.
Expand Down Expand Up @@ -547,6 +552,7 @@ export const DEFAULT_PLUGIN_CONFIG: PluginConfig = {
point_size_px: 8.0,
band_inner_frac: 0.5,
bar_inner_pad: 0.1,
group_pad: 0,
wick_width_px: 1.0,
ohlc_line_width_px: 1.0,
gradient_radius_px: 32.0,
Expand Down
30 changes: 30 additions & 0 deletions packages/viewer-charts/src/ts/charts/common/category-axis-resolver.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,36 @@ export function resolveNumericCategoryDomain(
};
}

/**
* Category-mode axis coordinates that widen each boundary by `pad` per outer `group_by` level starting a new run there, or `null` when no gap applies.
*/
export function resolveGroupedCategoryPositions(
rowPaths: CategoricalLevel[],
numCategories: number,
pad: number,
): Float64Array | null {
if (!(pad > 0) || rowPaths.length < 2 || numCategories === 0) {
return null;
}

const positions = new Float64Array(numCategories);
for (let d = 0; d < rowPaths.length - 1; d++) {
for (const run of rowPaths[d].runs) {
if (run.startIdx > 0 && run.startIdx < numCategories) {
positions[run.startIdx] += pad;
}
}
}

let acc = 0;
for (let i = 0; i < numCategories; i++) {
acc += positions[i];
positions[i] = i + acc;
}

return positions;
}

/**
* Decide whether the categorical axis should render as a stringified
* category axis or a true numeric axis. Numeric mode is only used when
Expand Down
Loading
Loading