refactor: metrics into reusable component

apps/marketing/src/app/(marketing)/open/bar-metrics.tsx

@@ -7,18 +7,15 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { StargazersType } from './page';
+export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
-
+  data: T;
-export type MetricsDataKey = keyof StargazersType[string];
+  metricKey: keyof T[string];
-export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
-  data: StargazersType;
-  metricKey: MetricsDataKey;
   title: string;
   label: string;
   chartHeight?: number;
 };
 
-export const GithubMetric = ({
+export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
   className,
   data,
   metricKey,
@@ -26,7 +23,7 @@ export const GithubMetric = ({
   label,
   chartHeight = 400,
   ...props
-}: GithubMetricProps) => {
+}: BarMetricProps<T>) => {
   const formattedData = Object.keys(data)
     .map((key) => ({
       month: formatMonth(key),
@@ -50,7 +47,7 @@ export const GithubMetric = ({
               formatter={(value) => [Number(value), label]}
               cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
             />
-            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
+            <Bar dataKey={metricKey as string} fill="hsl(var(--primary))" label={label} />{' '}
           </BarChart>
         </ResponsiveContainer>
       </div>

apps/marketing/src/app/(marketing)/open/early-adopter-metrics.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { HTMLAttributes } from 'react';
-
-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 { EarlyAdoptersType } from './page';
-
-export type MetricsDataKey = keyof Omit<EarlyAdoptersType[string], 'id'>;
-export type EarlyAdopterMetricsProps = HTMLAttributes<HTMLDivElement> & {
-  data: EarlyAdoptersType;
-  metricKey: MetricsDataKey;
-  title: string;
-  label: string;
-  chartHeight?: number;
-};
-
-export const EarlyAdopterMetrics = ({
-  className,
-  data,
-  metricKey,
-  title,
-  label,
-  chartHeight = 400,
-  ...props
-}: EarlyAdopterMetricsProps) => {
-  const formattedData = Object.keys(data)
-    .map((key) => ({
-      month: formatMonth(key),
-      [metricKey]: data[key][metricKey],
-    }))
-    .reverse();
-
-  return (
-    <div className={cn('flex flex-col', className)} {...props}>
-      <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 pr-2 shadow-sm hover:shadow">
-        <ResponsiveContainer width="100%" height={chartHeight}>
-          <BarChart data={formattedData} margin={{ top: 30, right: 20 }}>
-            <XAxis dataKey="month" />
-            <YAxis />
-            <Tooltip
-              itemStyle={{
-                color: 'hsl(var(--primary-foreground))',
-              }}
-              formatter={(value) => [Number(value), label]}
-              cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
-            />
-            <Bar dataKey={metricKey} fill="hsl(var(--primary))" label={label} />
-          </BarChart>
-        </ResponsiveContainer>
-      </div>
-    </div>
-  );
-};

apps/marketing/src/app/(marketing)/open/funding-raised.tsx

@@ -7,14 +7,14 @@ import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recha
 import { formatMonth } from '@documenso/lib/client-only/format-month';
 import { cn } from '@documenso/ui/lib/utils';
 
-import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
+export type FundingRaisedProps = HTMLAttributes<HTMLDivElement> & {
+  data: Record<string, string | number>[];
+};
 
-export type FundingRaisedProps = HTMLAttributes<HTMLDivElement>;
+export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
-
+  const formattedData = data.map((item) => ({
-export const FundingRaised = ({ className, ...props }: FundingRaisedProps) => {
-  const formattedData = FUNDING_RAISED.map((item) => ({
     amount: Number(item.amount),
-    date: formatMonth(item.date),
+    date: formatMonth(item.date as string),
   }));
 
   return (

apps/marketing/src/app/(marketing)/open/page.tsx

@@ -1,12 +1,12 @@
 import { z } from 'zod';
 
+import { FUNDING_RAISED } from '~/app/(marketing)/open/data';
 import { MetricCard } from '~/app/(marketing)/open/metric-card';
 import { SalaryBands } from '~/app/(marketing)/open/salary-bands';
 
+import { BarMetric } from './bar-metrics';
 import { CapTable } from './cap-table';
-import { EarlyAdopterMetrics } from './early-adopter-metrics';
 import { FundingRaised } from './funding-raised';
-import { GithubMetric } from './gh-metrics';
 import { TeamMembers } from './team-members';
 
 export const revalidate = 3600;
@@ -41,8 +41,6 @@ const ZEarlyAdoptersResponse = z.record(
 export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
 export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
 
-// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
-
 export default async function OpenPage() {
   const {
     forks_count: forksCount,
@@ -125,11 +123,11 @@ export default async function OpenPage() {
 
         <SalaryBands className="col-span-12 lg:col-span-6" />
 
-        <FundingRaised className="col-span-12 lg:col-span-6" />
+        <FundingRaised data={FUNDING_RAISED} className="col-span-12 lg:col-span-6" />
 
         <CapTable className="col-span-12 lg:col-span-6" />
 
-        <EarlyAdopterMetrics
+        <BarMetric<EarlyAdoptersType>
           data={EARLY_ADOPTERS_DATA}
           metricKey="earlyAdopters"
           title="Early Adopters"
@@ -137,7 +135,7 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="stars"
           title="Github: Total Stars"
@@ -145,7 +143,7 @@ export default async function OpenPage() {
           className="col-span-12 lg:col-span-6"
         />
 
-        <GithubMetric
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="mergedPRs"
           title="Github: Total Merged PRs"
@@ -153,7 +151,8 @@ export default async function OpenPage() {
           chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="forks"
           title="Github: Total Forks"
@@ -161,7 +160,8 @@ export default async function OpenPage() {
           chartHeight={300}
           className="col-span-12 lg:col-span-6"
         />
-        <GithubMetric
+
+        <BarMetric<StargazersType>
           data={STARGAZERS_DATA}
           metricKey="openIssues"
           title="Github: Total Open Issues"