feat: per-widget hide_comparison toggle for canvas components

docs/docs/developers/build/dashboards/canvas-widgets/data.md

@@ -25,6 +25,16 @@ KPI grids display key performance indicators in a compact grid format with compa
   codeLanguage="yaml"
 />
 
+Comparison follows the canvas-level time comparison by default. Set `comparison_range` on a widget to override it: `none` turns delta and comparison off for that widget only, while a comparison range such as `rill-PW` (previous week) or `rill-PY` (previous year) compares the widget against its own previous period. This works on KPI grids, tables, pivots, leaderboards, and time-series charts.
+
+```yaml
+- kpi_grid:
+    metrics_view: auction_metrics
+    measures:
+      - requests
+    comparison_range: none
+```
+
 ## Leaderboard
 
 Leaderboards show ranked data with the top performers highlighted.

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

@@ -1219,6 +1219,20 @@ stacked_bar:
   # ... other config
 ```
 
+### Comparison Per Widget
+
+Components inherit the canvas-level time comparison. Set `comparison_range` to override it for one component: `none` turns comparison off, and a comparison range (`rill-PP`, `rill-PD`, `rill-PW`, `rill-PM`, `rill-PQ`, `rill-PY`, or a custom `<start>,<end>` pair) compares against that period even when the canvas comparison is off. Applies to `kpi_grid`, `table`, `pivot`, `leaderboard`, and time-series charts:
+
+```yaml
+kpi_grid:
+  metrics_view: sales_metrics
+  measures:
+    - total_revenue
+  comparison_range: none
+```
+
+Prefer `comparison_range` over `compare_tr` inside `time_filters`; the latter is still read for older projects but only applies together with a local time range.
+
 ### Vega-Lite Configuration
 
 Customize chart appearance with Vega-Lite config:

web-common/src/features/canvas/ComponentHeader.svelte

@@ -3,6 +3,7 @@
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
   import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
+  import { resolveComparisonRange } from "@rilldata/web-common/features/canvas/components/comparison-range";
   import type { ComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/types";
   import LocalFiltersHeader from "@rilldata/web-common/features/canvas/LocalFiltersHeader.svelte";
   import { onDestroy, onMount } from "svelte";
@@ -20,9 +21,12 @@
   let wide = false;
   let resizeObserver: ResizeObserver;
 
-  $: atleastOneFilter = Boolean(
-    filters?.time_filters || filters?.dimension_filters,
-  );
+  $: ({ specStore } = component);
+
+  $: atleastOneFilter =
+    Boolean(filters?.time_filters || filters?.dimension_filters) ||
+    resolveComparisonRange($specStore as ComponentFilterProperties).mode ===
+      "local";
 
   onMount(() => {
     resizeObserver = new ResizeObserver(([entry]) => {

web-common/src/features/canvas/LocalFiltersHeader.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import Filter from "@rilldata/web-common/components/icons/Filter.svelte";
   import type { BaseCanvasComponent } from "@rilldata/web-common/features/canvas/components/BaseCanvasComponent";
+  import { resolveComparisonRange } from "@rilldata/web-common/features/canvas/components/comparison-range";
+  import type { ComponentFilterProperties } from "@rilldata/web-common/features/canvas/components/types";
   import type { V1TimeRange } from "@rilldata/web-common/runtime-client";
   import ReadonlyExpressionFilters from "@rilldata/web-common/features/dashboards/filters/ReadonlyExpressionFilters.svelte";
 
@@ -13,21 +15,10 @@
     localTimeControls,
   } = component);
 
-  $: ({
-    showTimeComparisonStore,
-    interval: intervalStore,
-    rangeStore,
-    grainStore,
-    comparisonRangeStore,
-    comparisonIntervalStore,
-  } = localTimeControls);
+  $: ({ interval: intervalStore, rangeStore, grainStore } = localTimeControls);
 
-  $: showTimeComparison = $showTimeComparisonStore;
   $: activeTimeGrain = $grainStore;
 
-  $: comparisonRange = $comparisonRangeStore;
-  $: comparisonInterval = $comparisonIntervalStore;
-
   $: interval = $intervalStore;
   $: selectedRangeAlias = $rangeStore;
 
@@ -40,14 +31,23 @@
       }
     : undefined;
 
-  // $: selectedTimeRange = $timeRangeStateStore?.selectedTimeRange;
+  $: ({ showTimeComparison, comparisonTimeRangeState, timeGrain } =
+    $timeAndFilterStore);
+  $: selectedComparisonTimeRange =
+    comparisonTimeRangeState?.selectedComparisonTimeRange;
+
+  // Only a comparison the component sets itself counts as a local filter.
+  $: hasLocalComparison =
+    resolveComparisonRange($specStore as ComponentFilterProperties).mode ===
+    "local";
+
   $: displayComparisonTimeRange =
-    showTimeComparison && comparisonInterval && comparisonRange
+    hasLocalComparison && showTimeComparison && selectedComparisonTimeRange
       ? <V1TimeRange>{
-          name: comparisonRange,
-          start: comparisonInterval.start.toISO(),
-          end: comparisonInterval.end.toISO(),
-          interval: activeTimeGrain,
+          name: selectedComparisonTimeRange.name,
+          start: selectedComparisonTimeRange.start.toISOString(),
+          end: selectedComparisonTimeRange.end.toISOString(),
+          interval: timeGrain,
         }
       : undefined;