Skip to content

Commit dc91c25

Browse files
committed
Improve metrics page chart sizing on Safari
1 parent 4acc91f commit dc91c25

File tree

5 files changed

+27
-14
lines changed

5 files changed

+27
-14
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
*.untracked.*
33

44

5+
*.cpuprofile
6+
7+
58

69
.vercel
710

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/line-chart.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function LineChartDisplay({
3131
</CardDescription>
3232
</CardHeader>
3333
<CardContent>
34-
<ChartContainer config={config.chart} className='w-full max-h-[300px] p-0 ml-[-30px]'>
34+
<ChartContainer config={config.chart} className='w-full p-0 ml-[-30px]' maxHeight={300}>
3535
<BarChart accessibilityLayer data={datapoints}>
3636
<CartesianGrid
3737
horizontal={true}
@@ -157,7 +157,7 @@ export function DonutChartDisplay({
157157
</CardTitle>
158158
</CardHeader>
159159
<CardContent>
160-
<ChartContainer config={BRAND_CONFIG} className='w-full max-h-[300px] p-4'>
160+
<ChartContainer config={BRAND_CONFIG} className='w-full p-4' maxHeight={300}>
161161
<PieChart>
162162
<ChartTooltip
163163
cursor={false}

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/metrics/page-client.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ export default function PageClient() {
5757
<CardTitle>Recent Sign Ups</CardTitle>
5858
</CardHeader>
5959
<CardContent>
60+
{data.recently_registered.length === 0 && (
61+
<Typography variant='secondary'>No recent sign ups</Typography>
62+
)}
6063
<Table>
6164
<TableBody>
6265
{data.recently_registered.map((user: any) => <TableRow key={user.id}>
@@ -77,6 +80,9 @@ export default function PageClient() {
7780
<CardTitle>Recently Active Users</CardTitle>
7881
</CardHeader>
7982
<CardContent>
83+
{data.recently_active.length === 0 && (
84+
<Typography variant='secondary'>No recent active users</Typography>
85+
)}
8086
<Table>
8187
<TableBody>
8288
{data.recently_active.map((user: any) => <TableRow key={user.id}>

apps/dashboard/src/components/ui/chart.tsx

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,17 @@ function useChart() {
3737
const ChartContainer = React.forwardRef<
3838
HTMLDivElement,
3939
React.ComponentProps<"div"> & {
40+
/**
41+
* Some browsers follow the spec more closely and `height: 100%` does not inherit max-height (eg. Safari), so we
42+
* need to set the maxHeight for both the outer container and the ResponsiveContainer.
43+
*/
44+
maxHeight?: number,
4045
config: ChartConfig,
4146
children: React.ComponentProps<
4247
typeof RechartsPrimitive.ResponsiveContainer
4348
>["children"],
4449
}
45-
>(({ id, className, children, config, ...props }, ref) => {
50+
>(({ id, className, children, config, maxHeight, ...props }, ref) => {
4651
const uniqueId = React.useId();
4752
const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
4853

@@ -56,16 +61,20 @@ const ChartContainer = React.forwardRef<
5661
className
5762
)}
5863
{...props}
64+
style={{
65+
...props.style,
66+
maxHeight,
67+
}}
5968
>
6069
<ChartStyle id={chartId} config={config} />
61-
<RechartsPrimitive.ResponsiveContainer>
70+
<RechartsPrimitive.ResponsiveContainer maxHeight={maxHeight}>
6271
{children}
6372
</RechartsPrimitive.ResponsiveContainer>
6473
</div>
6574
</ChartContext.Provider>
6675
);
6776
});
68-
ChartContainer.displayName = "Chart";
77+
ChartContainer.displayName = "ChartContainer";
6978

7079
const ChartStyle = ({ id, config }: { id: string, config: ChartConfig }) => {
7180
const colorConfig = Object.entries(config).filter(

packages/stack-ui/src/components/ui/table.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
21
import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
2+
import React from "react";
33

44
import { cn } from "../../lib/utils";
55

@@ -111,12 +111,7 @@ const TableCaption = forwardRefIfNeeded<
111111
TableCaption.displayName = "TableCaption";
112112

113113
export {
114-
Table,
115-
TableHeader,
116-
TableBody,
117-
TableFooter,
118-
TableHead,
119-
TableRow,
120-
TableCell,
121-
TableCaption,
114+
Table, TableBody, TableCaption, TableCell, TableFooter,
115+
TableHead, TableHeader, TableRow
122116
};
117+

0 commit comments

Comments
 (0)