`;
@@ -211,16 +222,22 @@
const renderRowCorner: PivotRenderCallback = (data) => {
data.element.classList.add("bg-white", "z-10");
- if (data.x === 0)
+ if (data.x === 0) {
+ const pinIcon = getPinIcon();
return `
-
-
${dimensionLabel}
+
+
${pinIcon}
+
+ ${dimensionLabel}
${
comparing === "dimension" && sortType === SortType.DIMENSION
? `${MeasureArrow(sortDirection)}`
: ``
}
+
`;
+ }
+
if (data.x === 1)
return `
${measureLabel}
@@ -273,6 +290,18 @@
return [250, 130, 50][x];
};
+ // Visible line list
+ const toggleVisible = (n) => {
+ n = parseInt(n);
+ if (comparing != "dimension" || n == 0) return;
+ const label = tableData?.rowHeaderData[n][0].value;
+ dispatch("toggle-filter", label);
+ };
+
+ const togglePin = () => {
+ dispatch("toggle-pin");
+ };
+
const handleEvent = (evt, table, attribute, callback) => {
let currentNode = evt.target;
@@ -290,17 +319,26 @@
const handleMouseDown = (evt, table) => {
handleEvent(evt, table, "__row", toggleVisible);
handleEvent(evt, table, "sort", (type) => dispatch("toggle-sort", type));
+ handleEvent(evt, table, "pin", togglePin);
};
const handleMouseHover = (evt, table) => {
let newRowIdxHover;
let newColIdxHover;
+ let newHoveringPin;
if (evt.type === "mouseout") {
newRowIdxHover = undefined;
newColIdxHover = undefined;
+ newHoveringPin = false;
} else {
handleEvent(evt, table, "__row", (n) => (newRowIdxHover = parseInt(n)));
handleEvent(evt, table, "__col", (n) => (newColIdxHover = parseInt(n)));
+ handleEvent(evt, table, "pin", () => (newHoveringPin = true));
+ }
+
+ if (hoveringPin !== newHoveringPin) {
+ hoveringPin = newHoveringPin;
+ pivot?.draw();
}
if (newRowIdxHover !== rowIdxHover && newColIdxHover !== colIdxHover) {
@@ -387,4 +425,8 @@
:global(regular-table table tbody tr:first-child, regular-table thead) {
cursor: default;
}
+ :global(.pin) {
+ cursor: pointer;
+ margin-top: 2px;
+ }
diff --git a/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte b/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
index 429803c7627..d46a72faa9e 100644
--- a/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
+++ b/web-common/src/features/dashboards/time-dimension-details/TimeDimensionDisplay.svelte
@@ -100,6 +100,7 @@
cancelDashboardQueries(queryClient, metricViewName);
metricsExplorerStore.toggleFilter(metricViewName, dimensionName, e.detail);
}
+
function toggleAllSearchItems() {
cancelDashboardQueries(queryClient, metricViewName);
if (areAllTableRowsSelected) {
@@ -117,6 +118,23 @@
);
}
}
+
+ function togglePin() {
+ cancelDashboardQueries(queryClient, metricViewName);
+
+ const pinIndex = $dashboardStore?.pinIndex;
+ let newPinIndex = -1;
+
+ // Pin if some selected items are not pinned yet
+ if (pinIndex > -1 && pinIndex < formattedData?.selectedValues?.length - 1) {
+ newPinIndex = formattedData?.selectedValues?.length - 1;
+ }
+ // Pin if no items are pinned yet
+ else if (pinIndex === -1) {
+ newPinIndex = formattedData?.selectedValues?.length - 1;
+ }
+ metricsExplorerStore.setPinIndex(metricViewName, newPinIndex);
+ }
{
cancelDashboardQueries(queryClient, metricViewName);
diff --git a/web-common/src/features/dashboards/time-dimension-details/time-dimension-data-store.ts b/web-common/src/features/dashboards/time-dimension-details/time-dimension-data-store.ts
index f40cfc5de5f..6edbb80a1b4 100644
--- a/web-common/src/features/dashboards/time-dimension-details/time-dimension-data-store.ts
+++ b/web-common/src/features/dashboards/time-dimension-details/time-dimension-data-store.ts
@@ -36,6 +36,33 @@ export type TimeDimensionDataState = {
export type TimeSeriesDataStore = Readable;
+function getHeaderDataForRow(
+ row: DimensionDataItem,
+ isAllTime: boolean,
+ measureName: string,
+ formatter: (v: number | undefined | null) => string,
+ validPercentOfTotal: boolean,
+ unfilteredTotal: number
+) {
+ const rowData = isAllTime ? row?.data?.slice(1) : row?.data?.slice(1, -1);
+ const dataRow = [
+ { value: row?.value },
+ {
+ value: formatter(row?.total),
+ spark: createSparkline(rowData, (v) => v[measureName]),
+ },
+ ];
+ if (validPercentOfTotal) {
+ const percOfTotal = (row?.total ?? 0) / unfilteredTotal;
+ dataRow.push({
+ value: isNaN(percOfTotal)
+ ? "...%"
+ : numberPartsToString(formatProperFractionAsPercent(percOfTotal)),
+ });
+ }
+ return dataRow;
+}
+
/***
* Add totals row from time series data
* Add rest of dimension values from dimension table data
@@ -46,16 +73,19 @@ function prepareDimensionData(
data: DimensionDataItem[],
total: number,
unfilteredTotal: number,
- measure: MetricsViewSpecMeasureV2,
+ measure: MetricsViewSpecMeasureV2 | undefined,
selectedValues: string[],
- isAllTime: boolean
+ isAllTime: boolean,
+ pinIndex: number
): TableData {
- if (!data || !totalsData) return;
+ if (!data || !totalsData || !measure || data?.length < selectedValues.length)
+ return;
const formatter = safeFormatter(createMeasureValueFormatter(measure));
- const measureName = measure?.name;
- const validPercentOfTotal = measure?.validPercentOfTotal;
+ const measureName = measure?.name as string;
+ const validPercentOfTotal = measure?.validPercentOfTotal as boolean;
+ // Prepare Columns
const totalsTableData = isAllTime
? totalsData?.slice(1)
: totalsData?.slice(1, -1);
@@ -63,6 +93,31 @@ function prepareDimensionData(
const columnCount = columnHeaderData?.length;
+ // Prepare Row order
+ let orderedData: DimensionDataItem[] = [];
+
+ if (pinIndex > -1 && selectedValues.length) {
+ const selectedValuesIndex = selectedValues
+ .slice(0, pinIndex + 1)
+ .map((v) => data.findIndex((d) => d.value === v))
+ .sort((a, b) => a - b);
+
+ // return if computing on old data
+ if (selectedValuesIndex.some((v) => v === -1)) return;
+
+ orderedData = orderedData.concat(
+ selectedValuesIndex?.map((i) => {
+ return data[i];
+ })
+ );
+
+ orderedData = orderedData.concat(
+ data?.filter((_, i) => !selectedValuesIndex.includes(i))
+ );
+ } else {
+ orderedData = data;
+ }
+
// Add totals row to count
const rowCount = data?.length + 1;
@@ -84,36 +139,26 @@ function prepareDimensionData(
: numberPartsToString(formatProperFractionAsPercent(percOfTotal)),
});
}
-
let rowHeaderData = [totalsRow];
rowHeaderData = rowHeaderData.concat(
- data?.map((row) => {
- const rowData = isAllTime ? row?.data?.slice(1) : row?.data?.slice(1, -1);
- const dataRow = [
- { value: row?.value },
- {
- value: formatter(row?.total),
- spark: createSparkline(rowData, (v) => v[measureName]),
- },
- ];
- if (validPercentOfTotal) {
- const percOfTotal = row?.total / unfilteredTotal;
- dataRow.push({
- value: isNaN(percOfTotal)
- ? "...%"
- : numberPartsToString(formatProperFractionAsPercent(percOfTotal)),
- });
- }
- return dataRow;
+ orderedData?.map((row) => {
+ return getHeaderDataForRow(
+ row,
+ isAllTime,
+ measureName,
+ formatter,
+ validPercentOfTotal,
+ unfilteredTotal
+ );
})
);
let body = [totalsTableData?.map((v) => formatter(v[measureName])) || []];
body = body?.concat(
- data?.map((v) => {
- if (v.isFetching) return new Array(columnCount).fill(undefined);
+ orderedData?.map((v) => {
+ if (v?.isFetching) return new Array(columnCount).fill(undefined);
const dimData = isAllTime ? v?.data?.slice(1) : v?.data?.slice(1, -1);
return dimData?.map((v) => formatter(v[measureName]));
})
@@ -147,11 +192,11 @@ function prepareTimeData(
comparisonTotal: number,
currentLabel: string,
comparisonLabel: string,
- measure: MetricsViewSpecMeasureV2,
+ measure: MetricsViewSpecMeasureV2 | undefined,
hasTimeComparison,
isAllTime: boolean
): TableData {
- if (!data) return;
+ if (!data || !measure) return;
const formatter = safeFormatter(createMeasureValueFormatter(measure));
const measureName = measure?.name ?? "";
@@ -301,6 +346,7 @@ export function createTimeDimensionDataStore(ctx: StateManagers) {
return;
const measureName = dashboardStore?.expandedMeasureName;
+ const pinIndex = dashboardStore?.pinIndex;
const dimensionName = dashboardStore?.selectedComparisonDimension;
const total = timeSeries?.total && timeSeries?.total[measureName];
const unfilteredTotal =
@@ -339,7 +385,8 @@ export function createTimeDimensionDataStore(ctx: StateManagers) {
unfilteredTotal,
measure,
selectedValues,
- isAllTime
+ isAllTime,
+ pinIndex
);
} else {
comparing = timeControls.showComparison ? "time" : "none";
diff --git a/web-common/src/proto/gen/rill/ui/v1/dashboard_pb.ts b/web-common/src/proto/gen/rill/ui/v1/dashboard_pb.ts
index ed5b297f5df..25a65fad714 100644
--- a/web-common/src/proto/gen/rill/ui/v1/dashboard_pb.ts
+++ b/web-common/src/proto/gen/rill/ui/v1/dashboard_pb.ts
@@ -122,6 +122,11 @@ export class DashboardState extends Message {
*/
expandedMeasure?: string;
+ /**
+ * @generated from field: optional int32 pin_index = 19;
+ */
+ pinIndex?: number;
+
constructor(data?: PartialMessage) {
super();
proto3.util.initPartial(data, this);
@@ -148,6 +153,7 @@ export class DashboardState extends Message {
{ no: 16, name: "leaderboard_sort_type", kind: "enum", T: proto3.getEnumType(DashboardState_LeaderboardSortType), opt: true },
{ no: 17, name: "comparison_dimension", kind: "scalar", T: 9 /* ScalarType.STRING */, opt: true },
{ no: 18, name: "expanded_measure", kind: "scalar", T: 9 /* ScalarType.STRING */, opt: true },
+ { no: 19, name: "pin_index", kind: "scalar", T: 5 /* ScalarType.INT32 */, opt: true },
]);
static fromBinary(bytes: Uint8Array, options?: Partial): DashboardState {
@@ -232,7 +238,7 @@ proto3.util.setEnumType(DashboardState_LeaderboardSortDirection, "rill.ui.v1.Das
]);
/**
- *
+ * *
* SortType is used to determine how to sort the leaderboard
* and dimension detail table, as well as where to place the
* sort arrow.