Alternate charts panning

web-common/src/components/icons/LeftPanIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let className = "";
+</script>
+
+<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg" class={className}>
+  <path
+    class="pan-button"
+    role="presentation"
+    d="M9.335 16.795L21.678 5.756C22.129 5.352 22.844 5.672 22.844 6.277L22.844 27.342C22.844 27.948 22.128 28.268 21.677 27.863L9.335 16.795Z"
+  />
+</svg>

web-common/src/components/icons/RightPanIcon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let className = "";
+</script>
+
+<svg viewBox="0 0 33 33" xmlns="http://www.w3.org/2000/svg" class={className}>
+  <path
+    class="pan-button"
+    role="presentation"
+    d="M24.265 16.805L11.922 27.844C11.471 28.248 10.756 27.928 10.756 27.323L10.756 6.258C10.756 5.652 11.472 5.332 11.923 5.737L24.265 16.805Z"
+  />
+</svg>

web-common/src/features/canvas-components/render/VegaRenderer.svelte

@@ -11,8 +11,12 @@
   } from "svelte-vega";
   import { ExpressionFunction, VLTooltipFormatter } from "../types";
   import { VegaLiteTooltipHandler } from "./vega-tooltip";
-  import { onDestroy } from "svelte";
   import { getRillTheme } from "./vega-config";
+  import { createEventDispatcher, onDestroy } from "svelte";
+  import { getStateManagers } from "../../dashboards/state-managers/state-managers";
+  import { PanDirection } from "../../dashboards/time-dimension-details/types";
+  import LeftPanIcon from "@rilldata/web-common/components/icons/LeftPanIcon.svelte";
+  import RightPanIcon from "@rilldata/web-common/components/icons/RightPanIcon.svelte";
 
   export let data: Record<string, unknown> = {};
   export let spec: VisualizationSpec;
@@ -28,6 +32,13 @@
   let contentRect = new DOMRect(0, 0, 0, 0);
   let jwt = get(runtime).jwt;
 
+  const dispatch = createEventDispatcher();
+  const {
+    selectors: {
+      charts: { canPanLeft, canPanRight, getNewPanRange },
+    },
+  } = getStateManagers();
+
   $: width = contentRect.width;
   $: height = contentRect.height * 0.95 - 80;
 
@@ -92,14 +103,40 @@
       clearTimeout(tooltipTimer);
     }
   });
+
+  function panCharts(direction: PanDirection) {
+    const panRange = $getNewPanRange(direction);
+    if (!panRange) return;
+    const { start, end } = panRange;
+    dispatch("pan", { start, end });
+  }
+
+  let showControls = true;
+
+  function handleMouseEnter() {
+    showControls = true;
+  }
+
+  function handleMouseLeave() {
+    showControls = true;
+  }
+
+  $: midY = contentRect.height / 2;
+  $: translateXLeft = `translateX(-12px)`;
+  $: translateXRight = `translateX(20px)`;
 </script>
 
 <div
   bind:contentRect
   class:bg-white={canvasDashboard}
   class:px-4={canvasDashboard}
   class:pb-2={canvasDashboard}
-  class="overflow-hidden size-full flex flex-col items-center justify-center"
+  class="vega-renderer no-scrollbars size-full flex flex-col items-center justify-center relative mr-6"
+  data-width={width}
+  data-height={height}
+  on:mouseenter={handleMouseEnter}
+  on:mouseleave={handleMouseLeave}
+  role="figure"
 >
   {#if error}
     <div
@@ -117,6 +154,30 @@
       bind:view
       on:onError={onError}
     />
+    {#if showControls}
+      <div class="vega-pan-controls">
+        {#if $canPanLeft}
+          <button
+            class="pan-button absolute left-0 -translate-y-1/2 w-8 h-8 pointer-events-auto cursor-pointer fill-slate-400 hover:fill-slate-300"
+            style="top: {midY}px; transform: ${translateXLeft};"
+            on:click={() => panCharts("left")}
+            aria-label="Pan left"
+          >
+            <LeftPanIcon />
+          </button>
+        {/if}
+        {#if $canPanRight}
+          <button
+            class="pan-button absolute right-0 -translate-y-1/2 w-8 h-8 pointer-events-auto cursor-pointer fill-slate-400 hover:fill-slate-300"
+            style="top: {midY}px; transform: {translateXRight};"
+            on:click={() => panCharts("right")}
+            aria-label="Pan right"
+          >
+            <RightPanIcon />
+          </button>
+        {/if}
+      </div>
+    {/if}
   {/if}
 </div>
 
@@ -150,4 +211,15 @@
       max-width: 250px;
     }
   }
+
+  .no-scrollbars {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+  }
+
+  .no-scrollbars::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
 </style>

web-common/src/features/dashboards/time-dimension-details/charts/TDDAlternateChart.svelte

@@ -38,6 +38,7 @@
   export let timeGrain: V1TimeGrain | undefined;
   export let isTimeComparison: boolean;
   export let isScrubbing: boolean;
+  export let updatePanRange: (start: Date, end: Date) => void;
 
   let viewVL: View;
   let vegaSpec: VegaSpec;
@@ -217,6 +218,7 @@
     {expressionFunctions}
     {tooltipFormatter}
     {isScrubbing}
+    on:pan={(e) => updatePanRange(e.detail.start, e.detail.end)}
   />
 {:else}
   <!-- JIC we add a new chart type without brush param -->

web-common/src/features/dashboards/time-dimension-details/types.ts

@@ -60,3 +60,5 @@ export interface TablePosition {
   y0?: number;
   y1?: number;
 }
+
+export type PanDirection = "left" | "right";

web-common/src/features/dashboards/time-series/MeasurePan.svelte

@@ -6,11 +6,10 @@
 
   import { createEventDispatcher, getContext } from "svelte";
   import type { Writable } from "svelte/store";
+  import { PanDirection } from "../time-dimension-details/types";
 
   export let hovering = true;
 
-  type PanDirection = "left" | "right";
-
   const dispatch = createEventDispatcher();
   const plotConfig: Writable<PlotConfig> = getContext(contexts.config);
 

web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte

@@ -32,6 +32,8 @@
   import { getAdjustedChartTime } from "@rilldata/web-common/lib/time/ranges";
   import {
     AvailableTimeGrain,
+    DashboardTimeControls,
+    TimeComparisonOption,
     TimeRangePreset,
   } from "@rilldata/web-common/lib/time/types";
   import { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
@@ -297,6 +299,29 @@
       },
     );
   }
+
+  function updatePanRange(start: Date, end: Date) {
+    if (!interval) return;
+    const timeRange = {
+      name: TimeRangePreset.CUSTOM,
+      start: start,
+      end: end,
+    };
+
+    const comparisonTimeRange = showComparison
+      ? ({
+          name: TimeComparisonOption.CONTIGUOUS,
+        } as DashboardTimeControls) // FIXME wrong typecasting across application
+      : undefined;
+
+    metricsExplorerStore.selectTimeRange(
+      metricViewName,
+      timeRange,
+      interval,
+      comparisonTimeRange,
+      $metricsView.data ?? {},
+    );
+  }
 </script>
 
 <TimeSeriesChartContainer
@@ -367,7 +392,7 @@
   {#if renderedMeasures}
     <div
       class:pb-4={!isInTimeDimensionView}
-      class="flex flex-col gap-y-2 overflow-y-scroll h-full max-h-fit"
+      class="flex flex-col gap-y-2 overflow-y-scroll h-full max-h-fit no-scrollbars"
     >
       <!-- FIXME: this is pending the remaining state work for show/hide measures and dimensions -->
       {#each renderedMeasures as measure (measure.name)}
@@ -425,6 +450,7 @@
               xMax={endValue}
               isTimeComparison={showComparison}
               isScrubbing={Boolean(isScrubbing)}
+              {updatePanRange}
               on:chart-hover={(e) => {
                 const { dimension, ts } = e.detail;
 
@@ -521,3 +547,16 @@
   }}
   on:replace={() => createPivot()}
 />
+
+<style lang="postcss">
+  .no-scrollbars {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer and Edge */
+  }
+
+  .no-scrollbars::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+    background: transparent; /* Chrome/Safari/Webkit */
+  }
+</style>