feat: add configurable pivot totals for Explore and Canvas

docs/docs/reference/project-files/component.md

@@ -264,6 +264,10 @@ _[object]_ - (no description)
 
   - **`col_dimensions`** - _[array of string]_ - Dimensions for table columns 
 
+  - **`hide_totals_row`** - _[boolean]_ - Whether to hide the totals row. Defaults to false. 
+
+  - **`hide_totals_col`** - _[boolean]_ - Whether to hide the totals column. Defaults to false. 
+
   - **`comparison_range`** - _[string]_ - Comparison time range 
 
   - **`filter`** - _[string]_ - Filter expression 

proto/gen/rill/runtime/v1/runtime.swagger.yaml

@@ -5219,6 +5219,10 @@ definitions:
       pivotRowLimit:
         type: integer
         format: int32
+      pivotShowTotalsColumn:
+        type: boolean
+      pivotShowTotalsRow:
+        type: boolean
       chartDynamicYAxis:
         type: boolean
         title: Chart display settings (frontend-only; persisted in URL state)

proto/rill/runtime/v1/resources.proto

@@ -579,6 +579,8 @@ message ExplorePreset {
   optional bool pivot_sort_asc = 27;
   optional string pivot_table_mode = 28;
   optional int32 pivot_row_limit = 33;
+  optional bool pivot_show_totals_column = 37;
+  optional bool pivot_show_totals_row = 38;
 
   // Chart display settings (frontend-only; persisted in URL state)
   optional bool chart_dynamic_y_axis = 35;

proto/rill/ui/v1/dashboard.proto

@@ -147,6 +147,10 @@ message DashboardState {
   optional bool pivot_enable_comparison = 34;
   // Row limit for pivot table (number of child rows to show under each dimension)
   optional int32 pivot_row_limit = 41;
+  // Show the totals column (per-row totals) for pivot tables.
+  optional bool pivot_show_totals_column = 42;
+  // Show the totals row (per-column totals) for pivot/flat tables.
+  optional bool pivot_show_totals_row = 43;
 
   // List of all dimensions selected for rows
   repeated PivotElement pivot_row_all_dimensions = 35;

runtime/ai/instructions/data/resources/canvas.md

@@ -788,6 +788,8 @@ pivot:
     - total_revenue
     - order_count
     - average_order_value
+  hide_totals_row: false
+  hide_totals_col: false
 ```
 
 **Simple pivot (rows only):**
@@ -819,6 +821,7 @@ table:
     - total_revenue
     - order_count
     - average_price
+  hide_totals_row: false
 ```
 
 **With dimension filters:**

runtime/parser/schema/project.schema.yaml

@@ -3265,6 +3265,12 @@ definitions:
         items:
           type: string
         description: Dimensions for table columns
+      hide_totals_row:
+        type: boolean
+        description: Whether to hide the totals row. Defaults to false.
+      hide_totals_col:
+        type: boolean
+        description: Whether to hide the totals column. Defaults to false.
       comparison_range:
         type: string
         description: Comparison time range

web-common/src/components/forms/Checkbox.svelte

@@ -9,6 +9,7 @@
 
   type $$Props = CheckboxPrimitive.RootProps & {
     label?: string;
+    labelClass?: string;
     inverse?: boolean;
     hint?: string;
     optional?: boolean;
@@ -17,6 +18,7 @@
   export let checked: $$Props["checked"] = false;
   export let disabled: $$Props["disabled"] = undefined;
   export let label: $$Props["label"] = undefined;
+  export let labelClass: $$Props["labelClass"] = undefined;
   export let inverse = false;
   export let hint: string | undefined = undefined;
   export let optional: boolean = false;
@@ -49,7 +51,10 @@
   </CheckboxPrimitive.Root>
 
   {#if label}
-    <label for={$$props.id} class="flex items-center text-sm gap-x-1">
+    <label
+      for={$$props.id}
+      class={cn("flex items-center text-sm gap-x-1", labelClass)}
+    >
       {label}
       {#if optional}
         <span class="text-fg-secondary text-[12px] font-normal capitalize"

web-common/src/features/canvas/components/charts/custom-chart/index.ts

@@ -10,13 +10,13 @@ import type {
   CanvasEntity,
   ComponentPath,
 } from "@rilldata/web-common/features/canvas/stores/canvas-entity";
+import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import {
   PivotChipType,
   type PivotChipData,
   type PivotState,
 } from "@rilldata/web-common/features/dashboards/pivot/types";
 import type { ExploreState } from "@rilldata/web-common/features/dashboards/stores/explore-state";
-import { splitWhereFilter } from "@rilldata/web-common/features/dashboards/filters/measure-filters/measure-filter-utils";
 import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import type { V1Resource } from "@rilldata/web-common/runtime-client";
 import { get, writable, type Writable } from "svelte/store";
@@ -145,6 +145,8 @@ export class CustomChartComponent extends BaseCanvasComponent<CustomChart> {
       enableComparison: false,
       tableMode: "nest",
       activeCell: null,
+      showTotalsColumn: true,
+      showTotalsRow: true,
     };
 
     return {

web-common/src/features/canvas/components/charts/variants/ComboChart.ts

@@ -20,10 +20,10 @@ import type { TimeAndFilterStore } from "@rilldata/web-common/features/dashboard
 import { DashboardState_ActivePage } from "@rilldata/web-common/proto/gen/rill/ui/v1/dashboard_pb";
 import {
   MetricsViewSpecDimensionType,
+  V1TimeGrain,
   type V1MetricsViewSpec,
   type V1Resource,
 } from "@rilldata/web-common/runtime-client";
-import { V1TimeGrain } from "@rilldata/web-common/runtime-client";
 import { get, type Readable } from "svelte/store";
 import type { ChartDataQuery } from "../../../../components/charts/types";
 import type {
@@ -336,6 +336,8 @@ export class ComboChartComponent extends BaseChart<ComboCanvasChartSpec> {
       enableComparison: false,
       tableMode: "nest",
       activeCell: null,
+      showTotalsColumn: true,
+      showTotalsRow: true,
     };
 
     return {

web-common/src/features/canvas/components/pivot/CanvasPivotDisplay.svelte

@@ -46,21 +46,31 @@
       ...state,
       sorting: [],
       expanded: {},
+      activeCell: null,
+      columnPage: 1,
+      rowPage: 1,
       columns: tableFieldMapper(columns, metricsViewSpec),
+      showTotalsColumn: tableSpec.hide_totals_col !== true,
+      showTotalsRow: tableSpec.hide_totals_row !== true,
     }));
-  } else if ("col_dimensions" in tableSpec && schema.isValid) {
+  } else if (!("columns" in tableSpec) && schema.isValid) {
     const measures = tableSpec.measures || [];
     const colDimensions = tableSpec.col_dimensions || [];
     const rowDimensions = tableSpec.row_dimensions || [];
     pivotState.update((state) => ({
       ...state,
       sorting: [],
       expanded: {},
+      activeCell: null,
+      columnPage: 1,
+      rowPage: 1,
       columns: [
         ...tableFieldMapper(colDimensions, metricsViewSpec),
         ...tableFieldMapper(measures, metricsViewSpec),
       ],
       rows: tableFieldMapper(rowDimensions, metricsViewSpec),
+      showTotalsColumn: tableSpec.hide_totals_col !== true,
+      showTotalsRow: tableSpec.hide_totals_row !== true,
     }));
   }
 </script>

web-common/src/features/canvas/components/pivot/index.ts

@@ -32,13 +32,17 @@ export interface PivotSpec
   measures: string[];
   row_dimensions?: string[];
   col_dimensions?: string[];
+  hide_totals_row?: boolean;
+  hide_totals_col?: boolean;
 }
 
 export interface TableSpec
   extends ComponentCommonProperties,
     ComponentFilterProperties {
   metrics_view: string;
   columns: string[];
+  hide_totals_row?: boolean;
+  hide_totals_col?: boolean;
 }
 
 export { default as Pivot } from "./CanvasPivotDisplay.svelte";
@@ -121,6 +125,8 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
       enableComparison: false,
       tableMode: type === "pivot" ? "nest" : "flat",
       activeCell: null,
+      showTotalsColumn: true,
+      showTotalsRow: true,
     };
   }
 
@@ -136,7 +142,20 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
     };
   }
   inputParams(type: "pivot" | "table"): InputParams<PivotSpec | TableSpec> {
+    const spec = get(this.specStore);
+
     if (type === "pivot") {
+      const measureCount = ("measures" in spec && spec.measures?.length) || 0;
+      const rowDimensionCount =
+        ("row_dimensions" in spec && spec.row_dimensions?.length) || 0;
+      const colDimensionCount =
+        ("col_dimensions" in spec && spec.col_dimensions?.length) || 0;
+
+      // Mirror PivotToolbar: totals only apply when their constituent fields exist.
+      const canShowTotalRow = rowDimensionCount > 0 && measureCount > 0;
+      const canShowTotalColumn =
+        rowDimensionCount > 0 && colDimensionCount > 0 && measureCount > 0;
+
       return {
         options: {
           metrics_view: { type: "metrics", label: "Metrics view" },
@@ -155,11 +174,34 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
             meta: { allowedTypes: ["time", "dimension"] },
             label: "Row dimensions",
           },
+          hide_totals_col: {
+            type: "boolean",
+            label: "Hide total column",
+            meta: { defaultValue: false },
+            showInUI: canShowTotalColumn,
+          },
+          hide_totals_row: {
+            type: "boolean",
+            label: "Hide total row",
+            meta: { defaultValue: false },
+            showInUI: canShowTotalRow,
+          },
           ...commonOptions,
         },
         filter: getFilterOptions(true, false),
       };
     } else {
+      const columns = ("columns" in spec && spec.columns) || [];
+      const metricsViewSpec = get(
+        this.parent.metricsView.getMetricsViewFromName(spec.metrics_view),
+      ).metricsView;
+      const measureNames = new Set(
+        metricsViewSpec?.measures?.map((m) => m.name as string) || [],
+      );
+      const measureCount = columns.filter((c) => measureNames.has(c)).length;
+      const dimensionCount = columns.length - measureCount;
+      const canShowTotalRow = dimensionCount > 0 && measureCount > 0;
+
       return {
         options: {
           metrics_view: { type: "metrics", label: "Metrics view" },
@@ -168,6 +210,12 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
             label: "Columns",
             meta: { allowedTypes: ["time", "dimension", "measure"] },
           },
+          hide_totals_row: {
+            type: "boolean",
+            label: "Hide total row",
+            meta: { defaultValue: false },
+            showInUI: canShowTotalRow,
+          },
           ...commonOptions,
         },
         filter: getFilterOptions(true, false),
@@ -228,11 +276,14 @@ export class PivotCanvasComponent extends BaseCanvasComponent<
     let newSpec: PivotSpec | TableSpec;
 
     const commonProperties: ComponentCommonProperties &
-      ComponentFilterProperties = {
+      ComponentFilterProperties &
+      Pick<PivotSpec, "hide_totals_row" | "hide_totals_col"> = {
       title: currentSpec.title,
       description: currentSpec.description,
       dimension_filters: currentSpec.dimension_filters,
       time_filters: currentSpec.time_filters,
+      hide_totals_row: currentSpec.hide_totals_row,
+      hide_totals_col: currentSpec.hide_totals_col,
     };
 
     if ("columns" in currentSpec) {

web-common/src/features/canvas/inspector/ParamMapper.svelte

@@ -138,13 +138,13 @@
               label={config.label ?? key}
               id={key}
               faint={config.meta?.invertBoolean
-                ? localParamValues[key]
-                : !localParamValues[key]}
+                ? ($specStore[key] ?? config.meta?.defaultValue ?? false)
+                : !($specStore[key] ?? config.meta?.defaultValue ?? false)}
             />
             <Switch
               checked={config.meta?.invertBoolean
-                ? !$specStore[key]
-                : $specStore[key]}
+                ? !($specStore[key] ?? config.meta?.defaultValue ?? false)
+                : ($specStore[key] ?? config.meta?.defaultValue ?? false)}
               onCheckedChange={(next) => {
                 component.updateProperty(
                   key,

web-common/src/features/components/charts/explore-transformer.ts

@@ -83,6 +83,8 @@ export function transformChartSpecToPivotState(
     columnPage: 0,
     rowPage: 0,
     enableComparison: false,
+    showTotalsColumn: true,
+    showTotalsRow: true,
     tableMode: "nest",
     activeCell: null,
   };

web-common/src/features/dashboards/pivot/FlatTable.svelte

@@ -142,7 +142,7 @@
 <table
   role="presentation"
   style:width="{totalLength}px"
-  class:with-measure={measures.length > 0}
+  class:with-totals-row={!!totalsRow && measures.length > 0}
   onclick={modified({ shift: onCellCopy, click: onCellClick })}
   onmousemove={onMouseMove}
   onmouseleave={onTableLeave}
@@ -337,7 +337,7 @@
   }
 
   /* The totals row */
-  .with-measure tbody > tr:nth-of-type(2) {
+  .with-totals-row tbody > tr:nth-of-type(2) {
     @apply bg-surface-background sticky z-20;
     top: var(--total-header-height);
   }
@@ -371,7 +371,7 @@
     box-shadow: 0 0 0 1px theme(colors.primary.400);
   }
   /* The totals row is z-20 and covers the outset top shadow; use an inset top border instead */
-  .with-measure tbody > tr:nth-of-type(3) > td.selected-cell.cell {
+  .with-totals-row tbody > tr:nth-of-type(3) > td.selected-cell.cell {
     box-shadow:
       0 0 0 1px theme(colors.primary.400),
       inset 0 1px 0 0 theme(colors.primary.400);

web-common/src/features/dashboards/pivot/PivotDisplay.svelte

@@ -143,6 +143,12 @@
           )}
         setRowLimit={(limit) =>
           metricsExplorerStore.setPivotRowLimit($exploreName, limit)}
+        setShowTotals={(totals) =>
+          metricsExplorerStore.setPivotTotals(
+            $exploreName,
+            totals.showTotalsColumn,
+            totals.showTotalsRow,
+          )}
         collapseAll={() =>
           metricsExplorerStore.setPivotExpanded($exploreName, {})}
         {isFetching}

web-common/src/features/dashboards/pivot/PivotTable.svelte

@@ -115,7 +115,7 @@
   $: table = createSvelteTable(options);
 
   let containerRefElement: HTMLDivElement;
-  let stickyRows = [0];
+  let stickyRows: number[] = [];
   let rowScrollOffset = 0;
   let scrollLeft = 0;
   let timeout: ReturnType<typeof setTimeout>;
@@ -129,6 +129,7 @@
   $: assembled = $pivotDataStore.assembled;
   $: dataRows = $pivotDataStore.data;
   $: totalsRow = $pivotDataStore.totalsRowData;
+  $: stickyRows = totalsRow ? [0] : [];
   $: isFlat = $config.isFlat;
   $: hasMeasureContextColumns = $config.enableComparison;