mirror of
https://github.com/documenso/documenso.git
synced 2025-11-13 16:23:06 +10:00
chore: format date
This commit is contained in:
@ -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) =>
|
||||||
|
|||||||
@ -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 };
|
||||||
|
|
||||||
|
|||||||
18
packages/lib/client-only/format-month.ts
Normal file
18
packages/lib/client-only/format-month.ts
Normal 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}`;
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user