blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

Merge pull request #400 from documenso/feat/open-early-adopters

Browse Source 
feat: add early adopters graph
This commit is contained in:
Timur Ercan
2023-09-28 12:17:03 +02:00
committed by GitHub
parent 5bc9d625c2 21fedab707
commit 459e3dc45b
4 changed files with 98 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/marketing/src/app/(marketing)/open/gh-metrics.tsx → apps/marketing/src/app/(marketing)/open/bar-metrics.tsx
View File

@@ -7,26 +7,25 @@ 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 MetricsDataKey = 'stars' | 'forks' | 'mergedPRs' | 'openIssues';
export type GithubMetricProps = HTMLAttributes<HTMLDivElement> & {
data: StargazersType;
metricKey: MetricsDataKey;
export type BarMetricProps<T extends Record<string, unknown>> = HTMLAttributes<HTMLDivElement> & {
data: T;
metricKey: keyof T[string];
title: string;
label: string;
chartHeight?: number;
extraInfo?: JSX.Element;
};
export const GithubMetric = ({
export const BarMetric = <T extends Record<string, Record<keyof T[string], unknown>>>({
className,
data,
metricKey,
title,
label,
chartHeight = 400,
extraInfo,
...props
}: GithubMetricProps) => {
}: BarMetricProps<T>) => {
const formattedData = Object.keys(data)
.map((key) => ({
month: formatMonth(key),
@@ -36,7 +35,10 @@ export const GithubMetric = ({
return (
<div className={cn('flex flex-col', className)} {...props}>
<h3 className="px-4 text-lg font-semibold">{title}</h3>
<div className="flex items-center px-4">
<h3 className="text-lg font-semibold">{title}</h3>
<span>{extraInfo}</span>
</div>
<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}>
@@ -50,7 +52,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>

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

@@ -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, ...props }: FundingRaisedProps) => {
const formattedData = FUNDING_RAISED.map((item) => ({
export const FundingRaised = ({ className, data, ...props }: FundingRaisedProps) => {
const formattedData = data.map((item) => ({
amount: Number(item.amount),
date: formatMonth(item.date),
date: formatMonth(item.date as string),
}));
return (

51
apps/marketing/src/app/(marketing)/open/page.tsx
View File

@@ -1,12 +1,14 @@
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 { FundingRaised } from './funding-raised';
import { GithubMetric } from './gh-metrics';
import { TeamMembers } from './team-members';
import { OpenPageTooltip } from './tooltip';
export const revalidate = 3600;
@@ -29,9 +31,16 @@ const ZStargazersLiveResponse = z.record(
}),
);
export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
const ZEarlyAdoptersResponse = z.record(
z.object({
id: z.number(),
time: z.string().datetime(),
earlyAdopters: z.number(),
}),
);
// const ZOpenPullRequestsResponse = ZMergedPullRequestsResponse;
export type StargazersType = z.infer<typeof ZStargazersLiveResponse>;
export type EarlyAdoptersType = z.infer<typeof ZEarlyAdoptersResponse>;
export default async function OpenPage() {
const {
@@ -65,6 +74,14 @@ export default async function OpenPage() {
.then(async (res) => res.json())
.then((res) => ZStargazersLiveResponse.parse(res));
const EARLY_ADOPTERS_DATA = await fetch('https://stargrazer-live.onrender.com/api/stats/stripe', {
headers: {
accept: 'application/json',
},
})
.then(async (res) => res.json())
.then((res) => ZEarlyAdoptersResponse.parse(res));
return (
<div className="mx-auto mt-6 max-w-screen-lg sm:mt-12">
<div className="flex flex-col items-center justify-center">
@@ -107,10 +124,20 @@ 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" />
<GithubMetric
<BarMetric<EarlyAdoptersType>
data={EARLY_ADOPTERS_DATA}
metricKey="earlyAdopters"
title="Early Adopters"
label="Early Adopters"
className="col-span-12 lg:col-span-6"
extraInfo={<OpenPageTooltip />}
/>
<BarMetric<StargazersType>
data={STARGAZERS_DATA}
metricKey="stars"
title="Github: Total Stars"
@@ -118,29 +145,31 @@ 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"
label="Merged PRs"
chartHeight={300}
className="col-span-12 lg:col-span-4"
className="col-span-12 lg:col-span-6"
/>
<GithubMetric
<BarMetric<StargazersType>
data={STARGAZERS_DATA}
metricKey="forks"
title="Github: Total Forks"
label="Forks"
chartHeight={300}
className="col-span-12 lg:col-span-4"
className="col-span-12 lg:col-span-6"
/>
<GithubMetric
<BarMetric<StargazersType>
data={STARGAZERS_DATA}
metricKey="openIssues"
title="Github: Total Open Issues"
label="Open Issues"
chartHeight={300}
className="col-span-12 lg:col-span-4"
className="col-span-12 lg:col-span-6"
/>
<div className="col-span-12 mt-12 flex flex-col items-center justify-center">

40
apps/marketing/src/app/(marketing)/open/tooltip.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@documenso/ui/primitives/tooltip';
export function OpenPageTooltip() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
className="ml-2 mt-2.5"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z"
fill="currentColor"
fill-rule="evenodd"
clip-rule="evenodd"
></path>
</svg>
</TooltipTrigger>
<TooltipContent>
<p>
August and earlier: Active subscribers. September and beyond: Numbers of active
subscriptions.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}