Skip to content
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

fix: leaderboard column percent of total width #6243

Merged
merged 2 commits into from
Dec 11, 2024
Merged

fix: leaderboard column percent of total width #6243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
24cd7d9
fix: leaderboard column percent of total width
briangregoryholmes Dec 9, 2024
325a855
Merge branch 'main' into bgh/leaderboard-column-tweaks
briangregoryholmes Dec 11, 2024
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
52 changes: 14 additions & 38 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 @@ -18,7 +18,6 @@
cleanUpComparisonValue,
compareLeaderboardValues,
getSort,
type LeaderboardItemData,
prepareLeaderboardItemData,
} from "./leaderboard-utils";
import type { DimensionThresholdFilter } from "../stores/metrics-explorer-entity";
Expand All @@ -39,13 +38,14 @@
getFiltersForOtherDimensions,
} from "../selectors";
import { getIndependentMeasures } from "../state-managers/selectors/measures";
import {
LEADERBOARD_DEFAULT_COLUMN_WIDTHS,
type ColumnWidths,
} from "./leaderboard-widths";
import LeaderboardHeader from "./LeaderboardHeader.svelte";
import LeaderboardRow from "./LeaderboardRow.svelte";
import LoadingRows from "./LoadingRows.svelte";
import {
valueColumn,
deltaColumn,
DEFAULT_COL_WIDTH,
} from "./leaderboard-widths";

const slice = 7;
const gutterWidth = 24;
Expand All @@ -62,20 +62,16 @@
export let metricsViewName: string;
export let metricsView: V1MetricsViewSpec;
export let sortType: SortType;
export let tableWidth: number;
export let sortedAscending: boolean;
export let isValidPercentOfTotal: boolean;
export let timeControlsReady: boolean;
export let firstColumnWidth: number;
export let isSummableMeasure: boolean;
export let filterExcludeMode: boolean;
export let atLeastOneActive: boolean;
export let isBeingCompared: boolean;
export let parentElement: HTMLElement;
export let columnWidths: ColumnWidths = LEADERBOARD_DEFAULT_COLUMN_WIDTHS;
export let estimateAndUpdateLeaderboardWidths: (
dimensionName: string,
aboveTheFold: LeaderboardItemData[],
belowTheFold: LeaderboardItemData[],
) => void;
export let toggleDimensionValueSelection: (
dimensionName: string,
dimensionValue: string,
Expand Down Expand Up @@ -260,24 +256,6 @@
);

$: columnCount = comparisonTimeRange ? 3 : isValidPercentOfTotal ? 2 : 1;

// Estimate the common column widths for all leaderboards
$: if (aboveTheFold.length || belowTheFoldRows.length) {
estimateAndUpdateLeaderboardWidths(
dimensionName,
aboveTheFold,
belowTheFoldRows,
);
}

$: tableWidth =
columnWidths.dimension +
columnWidths.value +
(comparisonTimeRange
? columnWidths.delta + columnWidths.deltaPercent
: isValidPercentOfTotal
? columnWidths.percentOfTotal
: 0);
</script>

<div
Expand All @@ -291,13 +269,13 @@
<table style:width="{tableWidth + gutterWidth}px">
<colgroup>
<col style:width="{gutterWidth}px" />
<col style:width="{columnWidths.dimension}px" />
<col style:width="{columnWidths.value}px" />
<col style:width="{firstColumnWidth}px" />
<col style:width="{$valueColumn}px" />
{#if !!comparisonTimeRange}
<col style:width="{columnWidths.delta}px" />
<col style:width="{columnWidths.deltaPercent}px" />
<col style:width="{$deltaColumn}px" />
<col style:width="{DEFAULT_COL_WIDTH}px" />
{:else if isValidPercentOfTotal}
<col style:width="{columnWidths.percentOfTotal}px" />
<col style:width="{DEFAULT_COL_WIDTH}px" />
{/if}
</colgroup>

Expand All @@ -324,6 +302,7 @@
{#each aboveTheFold as itemData (itemData.dimensionValue)}
<LeaderboardRow
{tableWidth}
{firstColumnWidth}
{isSummableMeasure}
{isBeingCompared}
{filterExcludeMode}
Expand All @@ -332,8 +311,6 @@
{itemData}
{isValidPercentOfTotal}
isTimeComparisonActive={!!comparisonTimeRange}
{columnWidths}
{gutterWidth}
{toggleDimensionValueSelection}
{formatter}
/>
Expand All @@ -343,6 +320,7 @@
{#each belowTheFoldRows as itemData, i (itemData.dimensionValue)}
<LeaderboardRow
{itemData}
{firstColumnWidth}
{isSummableMeasure}
{tableWidth}
{dimensionName}
Expand All @@ -351,8 +329,6 @@
{atLeastOneActive}
{isValidPercentOfTotal}
isTimeComparisonActive={!!comparisonTimeRange}
{columnWidths}
{gutterWidth}
borderTop={i === 0}
borderBottom={i === belowTheFoldRows.length - 1}
{toggleDimensionValueSelection}
Expand Down
51 changes: 22 additions & 29 deletions web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<script lang="ts">
import type { LeaderboardItemData } from "@rilldata/web-common/features/dashboards/leaderboard/leaderboard-utils";
import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers";
import type {
V1Expression,
Expand All @@ -11,9 +10,9 @@
import Leaderboard from "./Leaderboard.svelte";
import LeaderboardControls from "./LeaderboardControls.svelte";
import {
calculateAndUpdateAllLeaderboardWidths,
columnWidths,
resetColumnWidths,
DEFAULT_COL_WIDTH,
deltaColumn,
valueColumn,
} from "./leaderboard-widths";

export let metricsViewName: string;
Expand Down Expand Up @@ -50,31 +49,25 @@

let parentElement: HTMLDivElement;

function estimateAndUpdateLeaderboardWidths(
dimensionName: string,
aboveTheFold: LeaderboardItemData[],
selectedBelowTheFold: LeaderboardItemData[],
) {
const firstColumnWidth =
!comparisonTimeRange && !$isValidPercentOfTotal ? 240 : 164;
calculateAndUpdateAllLeaderboardWidths(
dimensionName,
firstColumnWidth,
aboveTheFold,
selectedBelowTheFold,
$activeMeasureFormatter,
);
}
$: ({ instanceId } = $runtime);

// Reset column widths when relevant data changes
$: {
activeMeasureName;
!!comparisonTimeRange;
!!timeRange;
$isValidPercentOfTotal;
resetColumnWidths();
// Reset column widths when the measure changes
$: if (activeMeasureName) {
valueColumn.reset();
deltaColumn.reset();
}
$: ({ instanceId } = $runtime);

$: firstColumnWidth =
!comparisonTimeRange && !$isValidPercentOfTotal ? 240 : 164;

$: tableWidth =
firstColumnWidth +
$valueColumn +
(comparisonTimeRange
? $deltaColumn + DEFAULT_COL_WIDTH
: $isValidPercentOfTotal
? DEFAULT_COL_WIDTH
: 0);
</script>

<div class="flex flex-col overflow-hidden size-full">
Expand All @@ -93,7 +86,9 @@
{whereFilter}
{dimensionThresholdFilters}
{instanceId}
{tableWidth}
{timeRange}
{firstColumnWidth}
sortedAscending={$sortedAscending}
sortType={$sortType}
filterExcludeMode={$isFilterExcludeMode(dimension.name)}
Expand All @@ -106,8 +101,6 @@
{timeControlsReady}
selectedValues={$selectedDimensionValues(dimension.name)}
isBeingCompared={$isBeingComparedReadable(dimension.name)}
columnWidths={$columnWidths}
{estimateAndUpdateLeaderboardWidths}
formatter={$activeMeasureFormatter}
{setPrimaryDimension}
{toggleSort}
Expand Down
Loading
Loading