chore: format date

This commit is contained in:
Ephraim Atta-Duncan
2023-08-14 22:01:25 +00:00
parent bca048c026
commit 5f33b1da1e
3 changed files with 27 additions and 28 deletions

View File

@ -4,6 +4,7 @@ import { HTMLAttributes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { formatMonth } from '@documenso/lib/client-only/format-month';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
import { FUNDING_RAISED } from '~/app/(marketing)/open/data'; import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
@ -11,13 +12,18 @@ import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>; export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => { export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
const formattedData = FUNDING_RAISED.map((item) => ({
amount: Number(item.amount),
date: formatMonth(item.date),
}));
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">Total Funding Raised</h3> <h3 className="px-4 text-lg font-semibold">Total Funding Raised</h3>
<div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow"> <div className="border-border mt-2.5 flex flex-1 flex-col items-center justify-center rounded-2xl border p-4 shadow-sm hover:shadow">
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={400}>
<BarChart data={FUNDING_RAISED} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}> <BarChart data={formattedData} margin={{ top: 40, right: 40, bottom: 20, left: 40 }}>
<XAxis dataKey="date" /> <XAxis dataKey="date" />
<YAxis <YAxis
tickFormatter={(value) => tickFormatter={(value) =>

View File

@ -4,35 +4,10 @@ import { HTMLAttributes } from 'react';
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
import { formatMonth } from '@documenso/lib/client-only/format-month';
import { cn } from '@documenso/ui/lib/utils'; import { cn } from '@documenso/ui/lib/utils';
type StargazersType = { import { StargazersType } from './page';
[key: string]: {
stars?: number;
forks?: number;
mergedPRs?: number;
openIssues?: number;
};
};
function formatMonth(monthStr: string) {
const [year, month] = monthStr.split('-');
const monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
}
export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType }; export type GithubStarsProps = HTMLAttributes<HTMLDivElement> & { data: StargazersType };

View File

@ -0,0 +1,18 @@
export const formatMonth = (monthStr: string) => {
const [year, month] = monthStr.split('-');
const monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December',
];
return `${monthNames[parseInt(month, 10) - 1]} ${year}`;
};