diff --git a/web-common/src/features/dashboards/config.ts b/web-common/src/features/dashboards/config.ts
index e43239977c1..1534b1e3d74 100644
--- a/web-common/src/features/dashboards/config.ts
+++ b/web-common/src/features/dashboards/config.ts
@@ -4,9 +4,6 @@ export const MEASURE_CONFIG = {
height: 125,
fullHeight: 220,
},
- container: {
- width: { full: 580, breakpoint: 420 },
- },
bigNumber: {
widthWithChart: 140,
widthWithoutChart: {
diff --git a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
index e463d095922..00a139c4779 100644
--- a/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
+++ b/web-common/src/features/dashboards/time-series/MetricsTimeSeriesCharts.svelte
@@ -49,6 +49,7 @@
export let exploreName: string;
export let workspaceWidth: number;
+ export let timeSeriesWidth: number;
export let hideStartPivotButton = false;
const {
@@ -290,6 +291,7 @@
end={endValue}
start={startValue}
{workspaceWidth}
+ {timeSeriesWidth}
>
{#if isInTimeDimensionView}
diff --git a/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte b/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte
index db547f6adcf..020730dc131 100644
--- a/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte
+++ b/web-common/src/features/dashboards/time-series/TimeSeriesChartContainer.svelte
@@ -8,9 +8,11 @@ A container GraphicContext for the time series in a metrics dashboard.
export let start: Date | undefined;
export let end: Date | undefined;
export let workspaceWidth: number;
+ export let timeSeriesWidth: number;
export let enableFullWidth = false;
const paddingForFullWidth = 80;
+ const paddingForSplitView = 30;
@@ -26,10 +28,7 @@ A container GraphicContext for the time series in a metrics dashboard.
width={Math.max(
enableFullWidth
? workspaceWidth - paddingForFullWidth
- : workspaceWidth >= MEASURE_CONFIG.breakpoint
- ? MEASURE_CONFIG.container.width.full
- : MEASURE_CONFIG.container.width.breakpoint,
- 400,
+ : timeSeriesWidth - paddingForSplitView,
) - MEASURE_CONFIG.bigNumber.widthWithChart}
xMax={end}
xMaxTweenProps={{ duration: 400 }}
diff --git a/web-common/src/features/dashboards/workspace/Dashboard.svelte b/web-common/src/features/dashboards/workspace/Dashboard.svelte
index 0fb01cabe92..9da0119faef 100644
--- a/web-common/src/features/dashboards/workspace/Dashboard.svelte
+++ b/web-common/src/features/dashboards/workspace/Dashboard.svelte
@@ -6,6 +6,7 @@
import { useExploreValidSpec } from "@rilldata/web-common/features/explores/selectors";
import { featureFlags } from "@rilldata/web-common/features/feature-flags";
import { navigationOpen } from "@rilldata/web-common/layout/navigation/Navigation.svelte";
+ import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
import { useExploreState } from "web-common/src/features/dashboards/stores/dashboard-stores";
import { runtime } from "../../../runtime-client/runtime-store";
import MeasuresContainer from "../big-number/MeasuresContainer.svelte";
@@ -83,6 +84,10 @@
: undefined;
$: metricsView = $validSpecStore.data?.metricsView ?? {};
+
+ let metricsWidth = 580; // Default width for metrics section
+ const MIN_METRICS_WIDTH = 440;
+ let resizing = false;
-
+
{#key exploreName}
{#if hasTimeSeries}
@@ -146,7 +152,19 @@
hideStartPivotButton={hidePivot}
/>
{:else}
-
+
+ {
+ metricsWidth = width;
+ }}
+ />
+
+
{#if selectedDimension}
{