calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-08-19 10:42:57 +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 { useState } from "react";
import { cn } from "@app/lib/cn"; import { cn } from "@app/lib/cn";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { BarChart3, LineChart as LineChartIcon, LoaderIcon } from "lucide-react"; import {
BarChart3,
LineChart as LineChartIcon,
LoaderIcon
} from "lucide-react";
import { import {
Bar, Bar,
BarChart, BarChart,
@@ -63,7 +67,12 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
const hasData = props.data.length > 0; const hasData = props.data.length > 0;
return ( 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"> <div className="flex items-center justify-between gap-2">
<h3 className="font-semibold">{props.title}</h3> <h3 className="font-semibold">{props.title}</h3>
<div className="flex gap-1"> <div className="flex gap-1">
@@ -102,17 +111,23 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
) : ( ) : (
<ChartContainer <ChartContainer
config={chartConfig} 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" ? ( {chartType === "bar" ? (
<BarChart accessibilityLayer data={props.data}> <BarChart accessibilityLayer data={props.data}>
<ChartLegend content={<ChartLegendContent />} /> <ChartLegend
content={
<ChartLegendContent className="flex-wrap" />
}
/>
<ChartTooltip <ChartTooltip
content={ content={
<ChartTooltipContent <ChartTooltipContent
indicator="dot" indicator="dot"
labelFormatter={(_value, payload) => labelFormatter={(_value, payload) =>
formatDay(payload?.[0]?.payload?.day) formatDay(
payload?.[0]?.payload?.day
)
} }
/> />
} }
@@ -143,13 +158,19 @@ export function ToggleableTrendChart(props: ToggleableTrendChartProps) {
</BarChart> </BarChart>
) : ( ) : (
<LineChart accessibilityLayer data={props.data}> <LineChart accessibilityLayer data={props.data}>
<ChartLegend content={<ChartLegendContent />} /> <ChartLegend
content={
<ChartLegendContent className="flex-wrap" />
}
/>
<ChartTooltip <ChartTooltip
content={ content={
<ChartTooltipContent <ChartTooltipContent
indicator="line" indicator="line"
labelFormatter={(_value, payload) => 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} data-chart={chartId}
ref={ref} ref={ref}
className={cn( 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 className
)} )}
{...props} {...props}