calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-19 02:32:56 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix mobile responsiveness issues for charts

Browse Source
This commit is contained in:
miloschwartz
2026-08-18 16:27:33 -04:00
parent 987c0e992b
commit 6e3619fb1a
2 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ai-usage-analytics/ToggleableTrendChart.tsx
+28 -7
View File
@@ -3,7 +3,11 @@
import { useState } from "react";
import { cn } from "@app/lib/cn";
import { useTranslations } from "next-intl";
import { BarChart3, LineChart as LineChartIcon, LoaderIcon } from "lucide-react";
import {
BarChart3,
LineChart as LineChartIcon,
LoaderIcon
} from "lucide-react";
import {
Bar,
BarChart,
@@ -63,7 +67,12 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
const hasData = props.data.length > 0;
return (
<div className={cn("relative flex flex-col gap-2", props.className)}>
<div
className={cn(
"relative flex min-w-0 flex-col gap-2",
props.className
)}
>
<div className="flex items-center justify-between gap-2">
<h3 className="font-semibold">{props.title}</h3>
<div className="flex gap-1">
@@ -102,17 +111,23 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
) : (
<ChartContainer
config={chartConfig}
className="min-h-50 w-full h-64"
className="aspect-auto min-h-50 h-64 w-full min-w-0 overflow-hidden"
>
{chartType === "bar" ? (
<BarChart accessibilityLayer data={props.data}>
<ChartLegend content={<ChartLegendContent />} />
<ChartLegend
content={
<ChartLegendContent className="flex-wrap" />
}
/>
<ChartTooltip
content={
<ChartTooltipContent
indicator="dot"
labelFormatter={(_value, payload) =>
formatDay(payload?.[0]?.payload?.day)
formatDay(
payload?.[0]?.payload?.day
)
}
/>
}
@@ -143,13 +158,19 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
</BarChart>
) : (
<LineChart accessibilityLayer data={props.data}>
<ChartLegend content={<ChartLegendContent />} />
<ChartLegend
content={
<ChartLegendContent className="flex-wrap" />
}
/>
<ChartTooltip
content={
<ChartTooltipContent
indicator="line"
labelFormatter={(_value, payload) =>
formatDay(payload?.[0]?.payload?.day)
formatDay(
payload?.[0]?.payload?.day
)
}
/>
}
src/components/ui/chart.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef<
data-chart={chartId}
ref={ref}
className={cn(
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
"flex aspect-video w-full min-w-0 justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
className
)}
{...props}