Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: ssr hydration error in piechart

Browse Source
This commit is contained in:
Ephraim Atta-Duncan
2023-08-15 18:02:10 +00:00
parent 29b4cb7793
commit b7543298e1
2 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/marketing/src/app/(marketing)/open/cap-table.tsx
View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import { HTMLAttributes } from 'react'; import { HTMLAttributes, useEffect, useState } from 'react';
import { Cell, Pie, PieChart, Tooltip } from 'recharts'; import { Cell, Pie, PieChart, Tooltip } from 'recharts';
@ -41,11 +41,17 @@ const renderCustomizedLabel = ({
export type CapTableProps = HTMLAttributes<HTMLDivElement>; export type CapTableProps = HTMLAttributes<HTMLDivElement>;
export const CapTable = ({ className, ...props }: CapTableProps) => { export const CapTable = ({ className, ...props }: CapTableProps) => {
const [isSSR, setIsSSR] = useState(true);
useEffect(() => {
setIsSSR(false);
}, []);
return ( return (
<div className={cn('flex flex-col', className)} {...props}> <div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">Cap Table</h3> <h3 className="px-4 text-lg font-semibold">Cap Table</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow"> <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
{!isSSR && (
<PieChart width={400} height={400}> <PieChart width={400} height={400}>
<Pie <Pie
data={CAP_TABLE} data={CAP_TABLE}
@ -68,6 +74,7 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
}} }}
/> />
</PieChart> </PieChart>
)}
</div> </div>
</div> </div>
); );

7
apps/marketing/src/app/(marketing)/open/gh-metrics.tsx
View File

@ -9,6 +9,7 @@ import { cn } from '@documenso/ui/lib/utils';
import { StargazersType } from './page'; import { StargazersType } from './page';
export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & { export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
data: StargazersType; data: StargazersType;
metricKey: MetricsDataKey; metricKey: MetricsDataKey;
@ -17,8 +18,6 @@ export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
chartHeight?: number; chartHeight?: number;
}; };
export type MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
export const GithubMetric = ({ export const GithubMetric = ({
className, className,
data, data,
@ -39,9 +38,9 @@ export const GithubMetric = ({
<div className={cn('flex flex-col', className)} {...props}> <div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">{title}</h3> <h3 className="px-4 text-lg font-semibold">{title}</h3>
<div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow"> <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border pr-2 shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={chartHeight}> <ResponsiveContainer width="100%" height={chartHeight}>
<BarChart data={formattedData} margin={{ top: 40, right: 20 }}> <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
<XAxis dataKey="month" /> <XAxis dataKey="month" />
<YAxis /> <YAxis />
<Tooltip <Tooltip