From 06a2bb165c898efa0458ac0965bfc4a00475dc3e Mon Sep 17 00:00:00 2001 From: Dhiraj Kumar Date: Sat, 9 Sep 2023 03:41:32 +0530 Subject: [PATCH] get top7, fix menu --- .../src/components/icons/CheckCircle.svelte | 1 + web-common/src/components/icons/Circle.svelte | 1 + .../src/components/menu/core/MenuItem.svelte | 1 + web-common/src/features/dashboards/config.ts | 2 - .../LeaderboardItemFilterIcon.svelte | 3 +- .../time-controls/ComparisonSelector.svelte | 40 +++++----- .../MetricsTimeSeriesCharts.svelte | 75 ++++++++++++++++++- .../time-series/multiple-dimension-queries.ts | 19 ++--- 8 files changed, 105 insertions(+), 37 deletions(-) diff --git a/web-common/src/components/icons/CheckCircle.svelte b/web-common/src/components/icons/CheckCircle.svelte index 5c62b2b8f5a..24482281603 100644 --- a/web-common/src/components/icons/CheckCircle.svelte +++ b/web-common/src/components/icons/CheckCircle.svelte @@ -6,6 +6,7 @@ = 0; function getColor(i) { + if (i >= 7) return "fill-gray-300"; return "fill-" + CHECKMARK_COLORS[i]; } @@ -22,7 +23,7 @@ {#if selected && isBeingCompared} {:else if isBeingCompared && !atLeastOneActive} - + {:else if selected && !excluded} {:else if selected && excluded} diff --git a/web-common/src/features/dashboards/time-controls/ComparisonSelector.svelte b/web-common/src/features/dashboards/time-controls/ComparisonSelector.svelte index 8b85a7ecd36..289db8c695c 100644 --- a/web-common/src/features/dashboards/time-controls/ComparisonSelector.svelte +++ b/web-common/src/features/dashboards/time-controls/ComparisonSelector.svelte @@ -113,24 +113,26 @@ This component needs to do the following: - {#each options as option} - { - intermediateSelection = option.name; - }} - on:select={() => { - dispatch("enable-comparison", { - type: "dimension", - name: option.name, - }); - toggleFloatingElement(); - }} - > - - {option.label} - - - {/each} +
+ {#each options as option} + { + intermediateSelection = option.name; + }} + on:select={() => { + dispatch("enable-comparison", { + type: "dimension", + name: option.name, + }); + toggleFloatingElement(); + }} + > + + {option.label} + + + {/each} +
diff --git a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte index 8cd4ff31cb8..3c5231b275d 100644 --- a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte +++ b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte @@ -12,7 +12,10 @@ FormatPreset, nicelyFormattedTypesToNumberKind, } from "@rilldata/web-common/features/dashboards/humanize-numbers"; - import { useMetaQuery } from "@rilldata/web-common/features/dashboards/selectors"; + import { + getFilterForDimension, + useMetaQuery, + } from "@rilldata/web-common/features/dashboards/selectors"; import { createShowHideMeasuresStore } from "@rilldata/web-common/features/dashboards/show-hide-selectors"; import { getStateManagers } from "@rilldata/web-common/features/dashboards/state-managers/state-managers"; import { useTimeControlStore } from "@rilldata/web-common/features/dashboards/time-controls/time-control-store"; @@ -21,6 +24,7 @@ import { getAdjustedChartTime } from "@rilldata/web-common/lib/time/ranges"; import { createQueryServiceMetricsViewTimeSeries, + createQueryServiceMetricsViewToplist, createQueryServiceMetricsViewTotals, V1MetricsViewTimeSeriesResponse, } from "@rilldata/web-common/runtime-client"; @@ -34,6 +38,7 @@ import { getOrderedStartEnd, prepareTimeSeries } from "./utils"; import { adjustOffsetForZone } from "@rilldata/web-common/lib/convertTimestampPreview"; import { TimeRangePreset } from "@rilldata/web-common/lib/time/types"; + import { SortDirection } from "@rilldata/web-common/features/dashboards/proto-state/derived-types"; export let metricViewName; export let workspaceWidth: number; @@ -195,19 +200,85 @@ endValue = adjustedChartValue?.end; } + let topListQuery; $: if (comparisonDimension && $timeControlsStore.ready) { + const dimensionFilters = $dashboardStore.filters.include.filter( + (filter) => filter.name === comparisonDimension + ); + if (dimensionFilters) { + includedValues = dimensionFilters[0]?.in.slice(0, 7) || []; + } + + if (includedValues.length === 0) { + // TODO: Create a central store for topList + // Fetch top 7 values for the dimension + const filterForDimension = getFilterForDimension( + $dashboardStore?.filters, + comparisonDimension + ); + topListQuery = createQueryServiceMetricsViewToplist( + $runtime.instanceId, + metricViewName, + { + dimensionName: comparisonDimension, + measureNames: [$dashboardStore?.leaderboardMeasureName], + timeStart: $timeControlsStore.timeStart, + timeEnd: $timeControlsStore.timeEnd, + filter: filterForDimension, + limit: "7", + offset: "0", + sort: [ + { + name: $dashboardStore?.leaderboardMeasureName, + ascending: + $dashboardStore.sortDirection === SortDirection.ASCENDING, + }, + ], + }, + { + query: { + enabled: $timeControlsStore.ready && !!filterForDimension, + }, + } + ); + } + } + + $: if (includedValues?.length || (topListQuery && $topListQuery.isSuccess)) { + let filters = $dashboardStore.filters; + + // Handle case when there are no filters + if (!includedValues?.length) { + includedValues = $topListQuery?.data?.data.map( + (d) => d[comparisonDimension] + ); + + // Add dimension to filter + filters = { + ...$dashboardStore.filters, + include: [ + ...$dashboardStore.filters.include, + { + name: comparisonDimension, + in: includedValues, + }, + ], + }; + } allDimQuery = getDimensionValueTimeSeries( + includedValues, instanceId, metricViewName, comparisonDimension, selectedMeasureNames, - $dashboardStore.filters, + filters, $timeControlsStore.adjustedStart, $timeControlsStore.adjustedEnd, interval, $dashboardStore?.selectedTimezone ); } + $: dimensionData = comparisonDimension ? $allDimQuery : []; $: showHideMeasures = createShowHideMeasuresStore(metricViewName, metaQuery); diff --git a/web-common/src/features/dashboards/time-series/multiple-dimension-queries.ts b/web-common/src/features/dashboards/time-series/multiple-dimension-queries.ts index 8b6d205eabd..a5b1a4bd5fb 100644 --- a/web-common/src/features/dashboards/time-series/multiple-dimension-queries.ts +++ b/web-common/src/features/dashboards/time-series/multiple-dimension-queries.ts @@ -1,6 +1,10 @@ // Throw away code for fetching timeseries data for individual dimension values import { derived, writable } from "svelte/store"; -import { createQueryServiceMetricsViewTimeSeries } from "@rilldata/web-common/runtime-client"; + +import { + createQueryServiceMetricsViewToplist, + createQueryServiceMetricsViewTimeSeries, +} from "@rilldata/web-common/runtime-client"; import { prepareTimeSeries } from "./utils"; import { CHECKMARK_COLORS, @@ -15,6 +19,7 @@ import { TIME_GRAIN } from "@rilldata/web-common/lib/time/config"; */ export function getDimensionValueTimeSeries( + values, instanceId, metricViewName, dimensionName, @@ -25,18 +30,6 @@ export function getDimensionValueTimeSeries( interval, zone ) { - let values = []; - const dimensionFilters = filters.include.filter( - (filter) => filter.name === dimensionName - ); - if (dimensionFilters) { - values = dimensionFilters[0]?.in.slice(-7) || []; - } - - if (values.length === 0) { - // fetch top 7 values - } - if (!values && values.length == 0) return; return derived( values.map((value, i) => {