fix: hotfix beeswarm and radar sizes

zeno-ml · Oct 26, 2023 · 0e90d1f · 0e90d1f
1 parent 7ba49d3
commit 0e90d1f
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/frontend/src/lib/components/chart/chart-types/beeswarm-chart/BeeswarmChart.svelte b/frontend/src/lib/components/chart/chart-types/beeswarm-chart/BeeswarmChart.svelte
@@ -120,7 +120,7 @@
 			)}
 			options={{
 				actions: false,
-				width: width,
+				width: width - 200,
 				height: 80,
 				scaleFactor: {
 					png: 3

diff --git a/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts b/frontend/src/lib/components/chart/chart-types/beeswarm-chart/vegaSpec-beeswarm.ts
@@ -16,7 +16,6 @@ export default function generateSpec(
 		height: 100,
 		random_id: Date.now(), // used to force re-rendering of the chart
 		padding: { left: 5, right: 5, top: 0, bottom: 20 },
-		autosize: 'fit',
 		signals: [
 			{ name: 'cx', update: 'width / 2' },
 			{ name: 'cy', update: 'height / 2' },

diff --git a/frontend/src/lib/components/chart/chart-types/radar-chart/RadarChart.svelte b/frontend/src/lib/components/chart/chart-types/radar-chart/RadarChart.svelte
@@ -32,12 +32,12 @@
 
 <h4 class="m-0">{getFixedName()}</h4>
 <Vega
-	spec={generateSpec(parameters, width, height)}
+	spec={generateSpec(parameters, Math.min(height, width), Math.min(height, width))}
 	{data}
 	options={{
 		actions: { source: false, editor: false, compiled: false },
-		width: width,
-		height: height,
+		width: Math.min(height, width),
+		height: Math.min(height, width),
 		scaleFactor: {
 			png: 3
 		},

diff --git a/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts b/frontend/src/lib/components/chart/chart-types/radar-chart/vegaSpec-radar.ts
@@ -11,7 +11,7 @@ export default function generateSpec(
 		description: 'A radar chart example, showing multiple dimensions in a radial layout.',
 		random_id: Date.now(), // used to force re-rendering of the chart
 		autosize: { type: 'fit', contains: 'padding' },
-		padding: { left: 80, right: 200, top: 60, bottom: 50 },
+		padding: { left: 5, right: 5, top: 5, bottom: 5 },
 		width: width,
 		height: height,
 
@@ -84,7 +84,7 @@ export default function generateSpec(
 				orient: 'none',
 				title: parameters.layerChannel === SlicesOrModels.SLICES ? 'slice' : 'system',
 				encode: {
-					legend: { update: { x: { value: 300 }, y: { value: -250 } } }
+					legend: { update: { x: { value: -width / 2 }, y: { value: -height / 2 } } }
 				}
 			}
 		],