diff --git a/src/ui/code-blocks/ReadingStatsCodeBlock.ts b/src/ui/code-blocks/ReadingStatsCodeBlock.ts index f0fee29..5f9374c 100644 --- a/src/ui/code-blocks/ReadingStatsCodeBlock.ts +++ b/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({ diff --git a/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte b/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte index 1b710e4..4ddf551 100644 --- a/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte +++ b/src/ui/code-blocks/ReadingStatsCodeBlockView.svelte @@ -138,15 +138,11 @@
{:else if chart.type === "pie"} -
+
{:else if chart.type === "books-and-pages"} @@ -197,7 +193,7 @@ margin: 0 auto 1rem; } - &.bar.responsive { + &.bar.horizontal { height: 35rem; } } diff --git a/src/ui/components/charts/Bar.svelte b/src/ui/components/charts/Bar.svelte index eb22a8d..b6f982d 100644 --- a/src/ui/components/charts/Bar.svelte +++ b/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, - maintainAspectRatio: !responsive, + responsive: true, + maintainAspectRatio: !horizontal, plugins: { tooltip: { yAlign: horizontal ? "center" : "bottom", diff --git a/src/ui/components/charts/BookAndPages.svelte b/src/ui/components/charts/BookAndPages.svelte index ff62c20..e0c61e8 100644 --- a/src/ui/components/charts/BookAndPages.svelte +++ b/src/ui/components/charts/BookAndPages.svelte @@ -99,6 +99,7 @@ datasets, }, options: { + responsive: true, scales: { y: { type: "linear", diff --git a/src/ui/components/charts/Pie.svelte b/src/ui/components/charts/Pie.svelte index 3a9cadc..6747c0c 100644 --- a/src/ui/components/charts/Pie.svelte +++ b/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 = - $props(); + const { property, groups, unit, unitPlural, color }: 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; });