Skip to content

fix: delta column width for leaderboards #9803

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
djbarnwal merged 1 commit into from
Aug 12, 2026
Merged

fix: delta column width for leaderboards #9803

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
4 changes: 3 additions & 1 deletion web-common/src/features/canvas/components/leaderboard/LeaderboardDisplay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
import {
COMPARISON_COLUMN_WIDTH,
deltaColumn,
valueColumn,
} from "@rilldata/web-common/features/dashboards/leaderboard/leaderboard-widths";
import Leaderboard from "@rilldata/web-common/features/dashboards/leaderboard/Leaderboard.svelte";
Expand Down Expand Up @@ -108,13 +109,14 @@
// Reset column widths when the measure changes
$: if (leaderboardMeasureNames) {
valueColumn.reset();
deltaColumn.reset();
}

$: totalContextWidth = leaderboardMeasureNames.reduce(
(sum, measureName) =>
sum +
$valueColumn +
(showTimeComparison ? COMPARISON_COLUMN_WIDTH * 2 : 0) +
(showTimeComparison ? $deltaColumn + COMPARISON_COLUMN_WIDTH : 0) +
(isValidPercentOfTotal(measureName) ? COMPARISON_COLUMN_WIDTH : 0),
0,
);
Expand Down
11 changes: 6 additions & 5 deletions web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,11 @@
getSort,
prepareLeaderboardItemData,
} from "./leaderboard-utils";
import { COMPARISON_COLUMN_WIDTH, valueColumn } from "./leaderboard-widths";
import {
COMPARISON_COLUMN_WIDTH,
deltaColumn,
valueColumn,
} from "./leaderboard-widths";

const runtimeClient = useRuntimeClient();
const gutterWidth = 24;
Expand Down Expand Up @@ -346,10 +350,7 @@
/>
{/if}
{#if isTimeComparisonActive && shouldShowContextColumns(measureName)}
<col
data-absolute-change-column
style:width="{COMPARISON_COLUMN_WIDTH}px"
/>
<col data-absolute-change-column style:width="{$deltaColumn}px" />
<col
data-percent-change-column
style:width="{COMPARISON_COLUMN_WIDTH}px"
Expand Down
4 changes: 3 additions & 1 deletion web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
import LeaderboardControls from "./LeaderboardControls.svelte";
import {
COMPARISON_COLUMN_WIDTH,
deltaColumn,
dimensionColumn,
MAX_DIMENSION_COLUMN_WIDTH,
MIN_DIMENSION_COLUMN_WIDTH,
Expand Down Expand Up @@ -63,6 +64,7 @@
// Reset column widths when the measure changes
$: if ($leaderboardSortByMeasureName) {
valueColumn.reset();
deltaColumn.reset();
}

$: dimensionColumnWidth = clamp(
Expand All @@ -80,7 +82,7 @@
dimensionColumnWidth +
$valueColumn +
(comparisonTimeRange
? COMPARISON_COLUMN_WIDTH * (showDeltaPercent ? 2 : 1)
? $deltaColumn + (showDeltaPercent ? COMPARISON_COLUMN_WIDTH : 0)
: showPercentOfTotal
? COMPARISON_COLUMN_WIDTH
: 0);
Expand Down
40 changes: 21 additions & 19 deletions web-common/src/features/dashboards/leaderboard/LeaderboardRow.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -299,25 +299,27 @@
: ""}
cellType="comparison"
>
<FormattedDataType
color="text-fg-secondary"
type="INTEGER"
value={deltaAbsMap[measureName]
? formatters[measureName]?.(deltaAbsMap[measureName])
: null}
customStyle={deltaAbsMap[measureName] !== null &&
(lowerIsBetterMap[measureName]
? deltaAbsMap[measureName] > 0
: deltaAbsMap[measureName] < 0)
? "text-kpi-negative"
: deltaAbsMap[measureName] !== null &&
(lowerIsBetterMap[measureName]
? deltaAbsMap[measureName] < 0
: deltaAbsMap[measureName] > 0)
? "text-kpi-positive"
: ""}
truncate={true}
/>
<div class="w-fit ml-auto bg-transparent" bind:contentRect={deltaRect}>
<FormattedDataType
color="text-fg-secondary"
type="INTEGER"
value={deltaAbsMap[measureName]
? formatters[measureName]?.(deltaAbsMap[measureName])
: null}
customStyle={deltaAbsMap[measureName] !== null &&
(lowerIsBetterMap[measureName]
? deltaAbsMap[measureName] > 0
: deltaAbsMap[measureName] < 0)
? "text-kpi-negative"
: deltaAbsMap[measureName] !== null &&
(lowerIsBetterMap[measureName]
? deltaAbsMap[measureName] < 0
: deltaAbsMap[measureName] > 0)
? "text-kpi-positive"
: ""}
truncate={true}
/>
</div>
</LeaderboardCell>
{/if}

Expand Down
27 changes: 23 additions & 4 deletions web-common/src/features/dashboards/leaderboard/leaderboard-widths.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,38 @@ export const MEASURES_PADDING = 16;
const MIN_COL_WIDTH = 56;
const MAX_COL_WIDTH = 164;

// A comparison cell loses 8px to its own horizontal padding. The rest is
// breathing room, so the value doesn't butt up against the previous column.
const COMPARISON_PADDING = 16;

export const DEFAULT_DIMENSION_COLUMN_WIDTH = 164;
export const MIN_DIMENSION_COLUMN_WIDTH = 120;
export const MAX_DIMENSION_COLUMN_WIDTH = 480;

class ColumnStore {
private value: Writable<number>;
private defaultWidth: number;
private minWidth: number;
private padding: number;

subscribe: (this: void, run: (value: number) => void) => () => void;

constructor(defaultWidth: number = DEFAULT_COLUMN_WIDTH) {
constructor(
defaultWidth: number = DEFAULT_COLUMN_WIDTH,
minWidth: number = MIN_COL_WIDTH,
padding: number = MEASURES_PADDING,
) {
this.defaultWidth = defaultWidth;
this.minWidth = minWidth;
this.padding = padding;
this.value = writable(defaultWidth);
this.subscribe = this.value.subscribe;
}

update = (newValue: number) => {
newValue = clamp(
MIN_COL_WIDTH,
Math.ceil(newValue) + MEASURES_PADDING,
this.minWidth,
Math.ceil(newValue) + this.padding,
MAX_COL_WIDTH,
);
const value = get(this.value);
Expand All @@ -44,7 +56,14 @@ class ColumnStore {
}

export const valueColumn = new ColumnStore(DEFAULT_COLUMN_WIDTH);
export const deltaColumn = new ColumnStore(COMPARISON_COLUMN_WIDTH);

// Delta columns hold formatted measure values, which can be far wider than the
// default comparison width, e.g. a currency delta like "-$1,234,567.89".
export const deltaColumn = new ColumnStore(
COMPARISON_COLUMN_WIDTH,
COMPARISON_COLUMN_WIDTH,
COMPARISON_PADDING,
);

// Width of the dimension column in explore leaderboards. Shared by all
// leaderboards so resizing one keeps them symmetric; persisted so the
Expand Down
Loading