diff --git a/web-common/src/components/menu/DashboardVisibilityDropdown.svelte b/web-common/src/components/menu/DashboardVisibilityDropdown.svelte deleted file mode 100644 index 423a18619981..000000000000 --- a/web-common/src/components/menu/DashboardVisibilityDropdown.svelte +++ /dev/null @@ -1,72 +0,0 @@ - - - - - {#snippet child({ props })} - - - -
- - {tooltipText} - -
- - {/snippet} - - - - diff --git a/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte b/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte index ec9c91749532..c2bcd773d327 100644 --- a/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte +++ b/web-common/src/features/dashboards/big-number/MeasuresContainer.svelte @@ -2,53 +2,26 @@ import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers"; import { sanitiseExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils"; import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store"; - import { MEASURE_CONFIG } from "../config"; import MeasureBigNumber from "./MeasureBigNumber.svelte"; - import DashboardVisibilityDropdown from "@rilldata/web-common/components/menu/DashboardVisibilityDropdown.svelte"; import { mergeDimensionAndMeasureFilters } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils"; - import { m } from "@rilldata/web-common/lib/i18n/gen/messages"; + import DashboardMetricsDraggableList from "@rilldata/web-common/components/menu/DashboardMetricsDraggableList.svelte"; export let metricsViewName: string; - export let exploreContainerWidth: number; - - const MEASURE_HEIGHT = 60; - const MEASURE_HEIGHT_MULTILINE = 80; - const MEASURE_WIDTH = 175; - const MARGIN_TOP = 36; - const COLUMN_GAP = 28; - const GRID_MARGIN_TOP = 8; - - // external sizes - const MIN_LEADERBOARD_WIDTH = 355; - const MEASURES_PADDING_LEFT = 44; - const LEADERBOARD_PADDING_RIGHT = 16; - - $: maxWidthMeasuresContainer = - exploreContainerWidth - - MIN_LEADERBOARD_WIDTH - - MEASURES_PADDING_LEFT - - LEADERBOARD_PADDING_RIGHT; const ctx = getStateManagers(); const { dashboardStore, selectors: { measures: { allMeasures, visibleMeasures }, + tags: { measureTagIndex }, }, actions: { - measures: { toggleMeasureVisibility, toggleAllMeasuresVisibility }, + measures: { setMeasureVisibility }, }, } = ctx; const timeControlsStore = useTimeControlStore(ctx); - let metricsContainerHeight: number; - let measureNodes: HTMLDivElement[] = []; - let measuresWrapper; - let measuresHeight: number[] = []; - let measureGridHeights: number[] = []; - let containerWidths = MEASURE_CONFIG.bigNumber.widthWithoutChart; - $: visibleMeasureNames = $visibleMeasures .map(({ name }) => name) .filter(isDefined); @@ -57,76 +30,6 @@ return value !== undefined; } - function getMeasureHeightsForColumn(measuresHeight, numColumns) { - const recalculatedHeights = [...measuresHeight]; - if (numColumns == 1) return recalculatedHeights; - for (let i = 0; i < measuresHeight.length; i = i + numColumns) { - const row = measuresHeight.slice(i, i + numColumns); - if (row.indexOf(MEASURE_HEIGHT_MULTILINE) != -1) { - for (let j = i; j < i + numColumns && j < measuresHeight.length; j++) { - recalculatedHeights[j] = MEASURE_HEIGHT_MULTILINE; - } - } - } - return recalculatedHeights; - } - - function calculateGridColumns() { - measuresHeight = measureNodes.map( - (measureNode) => measureNode?.offsetHeight, - ); - - const minInMeasures = Math.min(...measuresHeight); - measuresHeight = measuresHeight.map((height) => - height > minInMeasures ? MEASURE_HEIGHT_MULTILINE : MEASURE_HEIGHT, - ); - const totalMeasuresHeight = measuresHeight.reduce( - (s, v) => s + v + MARGIN_TOP, - 0, - ); - - if (totalMeasuresHeight && metricsContainerHeight) { - let columns = totalMeasuresHeight / metricsContainerHeight; - if (columns <= 1 || columns > 2) { - numColumns = Math.min(Math.ceil(columns), 3); - measureGridHeights = getMeasureHeightsForColumn( - measuresHeight, - numColumns, - ); - } else { - numColumns = 2; - measureGridHeights = getMeasureHeightsForColumn(measuresHeight, 2); - - // Check if two columns can individually accommodate all measures without scroll - const measuresHeightInSingleColumn = measureGridHeights - .filter((_, i) => i % 2 == 0) - .reduce((s, v) => s + v + MARGIN_TOP, 0); - const extraHeight = - metricsContainerHeight - measuresHeightInSingleColumn; - if (extraHeight < 0) { - numColumns = 3; - measureGridHeights = getMeasureHeightsForColumn(measuresHeight, 3); - } - } - } - - // Check if there is any horizontal overlap between measures - if (maxWidthMeasuresContainer) { - while (numColumns > 1) { - const widthPerColumn = maxWidthMeasuresContainer / numColumns; - if (widthPerColumn < MEASURE_WIDTH + COLUMN_GAP / 2) { - numColumns = numColumns - 1; - measureGridHeights = getMeasureHeightsForColumn( - measuresHeight, - numColumns, - ); - } else break; - } - } - } - - $: numColumns = 3; - // Query-context props for MeasureBigNumber $: chartWhere = sanitiseExpression( mergeDimensionAndMeasureFilters( @@ -136,48 +39,20 @@ undefined, ); $: chartReady = !!$timeControlsStore.ready; - - $: if (metricsContainerHeight && measureNodes.length) { - calculateGridColumns(); - } - calculateGridColumns()} /> -
-
-
- toggleMeasureVisibility(allMeasureNames, name)} - selectableItems={$allMeasures.map(({ name, displayName }) => ({ - name: name || "", - label: displayName || name || "", - }))} - selectedItems={visibleMeasureNames} - onToggleSelectAll={() => { - toggleAllMeasuresVisibility(allMeasureNames); - }} - /> -
- - {#each $visibleMeasures as measure, index (measure.name)} -
+
+ setMeasureVisibility(items, allMeasureNames)} + allItems={$allMeasures} + tagIndex={$measureTagIndex} + selectedItems={visibleMeasureNames} + /> + +
+ {#each $visibleMeasures as measure (measure.name)} +
{:else} - + {/if} {/key}