Make all charts responsive

src/ui/code-blocks/ReadingStatsCodeBlock.ts

@@ -46,7 +46,6 @@ const PieChart = z.object({
 	unit: z.optional(z.string()),
 	unitPlural: z.optional(z.string()),
 	groups: z.optional(z.array(PieGroupingSchema)),
-	responsive: z.optional(z.boolean()),
 	color: z.optional(PieChartColorSchema),
 });
 
@@ -58,7 +57,6 @@ const BarChart = z.object({
 	topN: z.optional(z.number()),
 	unit: z.optional(z.string()),
 	unitPlural: z.optional(z.string()),
-	responsive: z.optional(z.boolean()),
 	color: z.optional(color),
 });
 
@@ -70,7 +68,6 @@ const LineChart = z.object({
 	secondProperty: z.optional(z.keyof(BookMetadataSchema)),
 	secondUnit: z.optional(z.string()),
 	secondUnitPlural: z.optional(z.string()),
-	responsive: z.optional(z.boolean()),
 });
 
 const BooksAndPagesChart = z.object({

src/ui/code-blocks/ReadingStatsCodeBlockView.svelte

@@ -138,15 +138,11 @@
 						<div
 							class="chart bar"
 							class:horizontal={chart.horizontal}
-							class:responsive={chart.responsive}
 						>
 							<Bar {...chart} />
 						</div>
 					{:else if chart.type === "pie"}
-						<div
+						<div class="chart pie">
-							class="chart pie"
-							class:responsive={chart.responsive}
-						>
 							<Pie {...chart} />
 						</div>
 					{:else if chart.type === "books-and-pages"}
@@ -197,7 +193,7 @@
 					margin: 0 auto 1rem;
 				}
 
-				&.bar.responsive {
+				&.bar.horizontal {
 					height: 35rem;
 				}
 			}

src/ui/components/charts/Bar.svelte

@@ -12,7 +12,6 @@
 		topN?: number;
 		unit?: string;
 		unitPlural?: string;
-		responsive?: boolean;
 		color?: "rainbow" | ColorName;
 	};
 
@@ -23,7 +22,6 @@
 		topN,
 		unit,
 		unitPlural,
-		responsive,
 		color,
 	}: Props = $props();
 
@@ -107,8 +105,8 @@
 			},
 			options: {
 				indexAxis: horizontal ? "y" : "x",
-				responsive,
+				responsive: true,
-				maintainAspectRatio: !responsive,
+				maintainAspectRatio: !horizontal,
 				plugins: {
 					tooltip: {
 						yAlign: horizontal ? "center" : "bottom",

src/ui/components/charts/BookAndPages.svelte

@@ -99,6 +99,7 @@
 				datasets,
 			},
 			options: {
+				responsive: true,
 				scales: {
 					y: {
 						type: "linear",

src/ui/components/charts/Pie.svelte

@@ -14,12 +14,10 @@
 		groups?: PieGrouping[];
 		unit?: string;
 		unitPlural?: string;
-		responsive?: boolean;
 		color?: PieChartColor;
 	};
 
-	const { property, groups, unit, unitPlural, responsive, color }: Props =
+	const { property, groups, unit, unitPlural, color }: Props = $props();
-		$props();
 
 	const store = createPropertyStore(property);
 
@@ -114,7 +112,7 @@
 		return {
 			type: "pie",
 			data: { labels, datasets: [{ data, backgroundColor }] },
-			options: { responsive },
+			options: { responsive: true },
 		} as ChartConfiguration;
 	});
 </script>