External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactoring charts in statistics in organization.

Browse Source
This commit is contained in:
charlesgauthereau
2025-12-30 16:26:28 +01:00
parent f111946592
commit 4447180e9e
3 changed files with 52 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wrappers/dashboard/statistics/charts/evolution-line-chart.tsx
+2 -2
View File
@@ -28,9 +28,9 @@ export type EvolutionLineChartProps = {
export function EvolutionLineChart(props: EvolutionLineChartProps) { export function EvolutionLineChart(props: EvolutionLineChartProps) {
const {data} = props; const {data} = props;
const fakeData = generateFakeEvolutionData(14, 2, 10) // const fakeData = generateFakeEvolutionData(14, 2, 10)
const dailyData = fakeData const dailyData = data
.reduce((acc, backup) => { .reduce((acc, backup) => {
const date = backup.createdAt.toISOString().split("T")[0]; const date = backup.createdAt.toISOString().split("T")[0];
src/components/wrappers/dashboard/statistics/charts/line-chart.tsx
+49 -56
View File
@@ -42,65 +42,58 @@ export const LineChartCustom = <T extends { date: string }>({
return ( return (
<Card className="w-full">
<CardHeader className="flex items-center gap-4 space-y-0 border-b py-0 sm:flex-row">
<CardTitle className="text-sm md:text-lg">{title}</CardTitle>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger
className=" rounded-lg sm:ml-auto sm:flex"
aria-label="Select a value"
>
<SelectValue placeholder="Last 3 months"/>
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="7d" className="rounded-lg">
Last 7 days
</SelectItem>
<SelectItem value="30d" className="rounded-lg">
Last 30 days
</SelectItem>
<SelectItem value="90d" className="rounded-lg">
Last 3 months
</SelectItem>
</SelectContent>
</Select>
<> </CardHeader>
{data.length > 0 ? ( <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6 md:pt-0 md:px-6 h-full w-full">
<Card className="w-full">
<CardHeader className="flex items-center gap-4 space-y-0 border-b py-0 sm:flex-row">
<CardTitle className="text-sm md:text-lg">{title}</CardTitle>
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger
className=" rounded-lg sm:ml-auto sm:flex"
aria-label="Select a value"
>
<SelectValue placeholder="Last 3 months"/>
</SelectTrigger>
<SelectContent className="rounded-xl">
<SelectItem value="7d" className="rounded-lg">
Last 7 days
</SelectItem>
<SelectItem value="30d" className="rounded-lg">
Last 30 days
</SelectItem>
<SelectItem value="90d" className="rounded-lg">
Last 3 months
</SelectItem>
</SelectContent>
</Select>
</CardHeader>
<CardContent className="px-2 pt-4 sm:px-6 sm:pt-6 md:pt-0 md:px-6 ">
<ChartContainer config={config}>
<LineChart
accessibilityLayer
data={filteredData}
margin={margin ? margin : {
left: -35,
right: 12,
}}
>
{children}
<Line
dataKey={dataKey}
type="linear"
strokeWidth={2}
stroke="#fc6504"
dot={false}
/>
</LineChart>
</ChartContainer>
</CardContent>
</Card>
) : (
<PlaceholderChart text="No backup data available"/>
)}
</>
{data.length > 0 ? (
<ChartContainer config={config}>
<LineChart
accessibilityLayer
data={filteredData}
margin={margin ? margin : {
left: -35,
right: 12,
}}
>
{children}
<Line
dataKey={dataKey}
type="linear"
strokeWidth={2}
stroke="#fc6504"
dot={false}
/>
</LineChart>
</ChartContainer>
) : (
<PlaceholderChart text="No data available"/>
)}
</CardContent>
</Card>
) )
} }
src/components/wrappers/dashboard/statistics/charts/utils/placeholder.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
export const PlaceholderChart = ({text}: { text: string }) => ( export const PlaceholderChart = ({text}: { text: string }) => (
<div className="flex h-48 items-center justify-center text-sm text-muted-foreground">{text}</div> <div className="flex h-100 w-full items-center justify-center text-sm text-muted-foreground">{text}</div>
); );