mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Saxon FletcherandClaude Opus 4.8
fb02182e86
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
132 lines
7.3 KiB
TypeScript
132 lines
7.3 KiB
TypeScript
'use client'
|
|
|
|
import { Area, AreaChart, ResponsiveContainer, XAxis, YAxis } from 'recharts'
|
|
|
|
const data = [
|
|
{ month: '2020-03', newDevelopers: 11, cumulativeDevelopers: 11 },
|
|
{ month: '2020-04', newDevelopers: 43, cumulativeDevelopers: 54 },
|
|
{ month: '2020-05', newDevelopers: 1020, cumulativeDevelopers: 1074 },
|
|
{ month: '2020-06', newDevelopers: 463, cumulativeDevelopers: 1537 },
|
|
{ month: '2020-07', newDevelopers: 194, cumulativeDevelopers: 1731 },
|
|
{ month: '2020-08', newDevelopers: 438, cumulativeDevelopers: 2169 },
|
|
{ month: '2020-09', newDevelopers: 208, cumulativeDevelopers: 2377 },
|
|
{ month: '2020-10', newDevelopers: 278, cumulativeDevelopers: 2655 },
|
|
{ month: '2020-11', newDevelopers: 560, cumulativeDevelopers: 3215 },
|
|
{ month: '2020-12', newDevelopers: 2450, cumulativeDevelopers: 5665 },
|
|
{ month: '2021-01', newDevelopers: 1476, cumulativeDevelopers: 7141 },
|
|
{ month: '2021-02', newDevelopers: 1639, cumulativeDevelopers: 8780 },
|
|
{ month: '2021-03', newDevelopers: 2156, cumulativeDevelopers: 10936 },
|
|
{ month: '2021-04', newDevelopers: 4149, cumulativeDevelopers: 15085 },
|
|
{ month: '2021-05', newDevelopers: 5148, cumulativeDevelopers: 20233 },
|
|
{ month: '2021-06', newDevelopers: 3713, cumulativeDevelopers: 23946 },
|
|
{ month: '2021-07', newDevelopers: 5225, cumulativeDevelopers: 29171 },
|
|
{ month: '2021-08', newDevelopers: 4945, cumulativeDevelopers: 34116 },
|
|
{ month: '2021-09', newDevelopers: 4699, cumulativeDevelopers: 38815 },
|
|
{ month: '2021-10', newDevelopers: 5426, cumulativeDevelopers: 44241 },
|
|
{ month: '2021-11', newDevelopers: 5732, cumulativeDevelopers: 49973 },
|
|
{ month: '2021-12', newDevelopers: 7326, cumulativeDevelopers: 57299 },
|
|
{ month: '2022-01', newDevelopers: 8997, cumulativeDevelopers: 66296 },
|
|
{ month: '2022-02', newDevelopers: 7345, cumulativeDevelopers: 73641 },
|
|
{ month: '2022-03', newDevelopers: 7092, cumulativeDevelopers: 80733 },
|
|
{ month: '2022-04', newDevelopers: 6832, cumulativeDevelopers: 87565 },
|
|
{ month: '2022-05', newDevelopers: 8260, cumulativeDevelopers: 95825 },
|
|
{ month: '2022-06', newDevelopers: 7383, cumulativeDevelopers: 103208 },
|
|
{ month: '2022-07', newDevelopers: 8611, cumulativeDevelopers: 111819 },
|
|
{ month: '2022-08', newDevelopers: 10412, cumulativeDevelopers: 122231 },
|
|
{ month: '2022-09', newDevelopers: 12814, cumulativeDevelopers: 135045 },
|
|
{ month: '2022-10', newDevelopers: 11597, cumulativeDevelopers: 146642 },
|
|
{ month: '2022-11', newDevelopers: 14469, cumulativeDevelopers: 161111 },
|
|
{ month: '2022-12', newDevelopers: 17947, cumulativeDevelopers: 179058 },
|
|
{ month: '2023-01', newDevelopers: 19400, cumulativeDevelopers: 198458 },
|
|
{ month: '2023-02', newDevelopers: 19748, cumulativeDevelopers: 218206 },
|
|
{ month: '2023-03', newDevelopers: 23798, cumulativeDevelopers: 242004 },
|
|
{ month: '2023-04', newDevelopers: 25803, cumulativeDevelopers: 267807 },
|
|
{ month: '2023-05', newDevelopers: 27584, cumulativeDevelopers: 295391 },
|
|
{ month: '2023-06', newDevelopers: 27800, cumulativeDevelopers: 323191 },
|
|
{ month: '2023-07', newDevelopers: 32598, cumulativeDevelopers: 355789 },
|
|
{ month: '2023-08', newDevelopers: 33368, cumulativeDevelopers: 389157 },
|
|
{ month: '2023-09', newDevelopers: 32046, cumulativeDevelopers: 421203 },
|
|
{ month: '2023-10', newDevelopers: 35087, cumulativeDevelopers: 456290 },
|
|
{ month: '2023-11', newDevelopers: 34990, cumulativeDevelopers: 491280 },
|
|
{ month: '2023-12', newDevelopers: 31492, cumulativeDevelopers: 522772 },
|
|
{ month: '2024-01', newDevelopers: 37766, cumulativeDevelopers: 560538 },
|
|
{ month: '2024-02', newDevelopers: 38748, cumulativeDevelopers: 599286 },
|
|
{ month: '2024-03', newDevelopers: 43861, cumulativeDevelopers: 643147 },
|
|
{ month: '2024-04', newDevelopers: 46842, cumulativeDevelopers: 689989 },
|
|
{ month: '2024-05', newDevelopers: 48851, cumulativeDevelopers: 738840 },
|
|
{ month: '2024-06', newDevelopers: 43734, cumulativeDevelopers: 782574 },
|
|
{ month: '2024-07', newDevelopers: 46589, cumulativeDevelopers: 829163 },
|
|
{ month: '2024-08', newDevelopers: 51743, cumulativeDevelopers: 880906 },
|
|
{ month: '2024-09', newDevelopers: 59597, cumulativeDevelopers: 940503 },
|
|
{ month: '2024-10', newDevelopers: 65080, cumulativeDevelopers: 1005583 },
|
|
{ month: '2024-11', newDevelopers: 79022, cumulativeDevelopers: 1084605 },
|
|
{ month: '2024-12', newDevelopers: 128379, cumulativeDevelopers: 1212984 },
|
|
{ month: '2025-01', newDevelopers: 183374, cumulativeDevelopers: 1396358 },
|
|
{ month: '2025-02', newDevelopers: 216920, cumulativeDevelopers: 1613278 },
|
|
{ month: '2025-03', newDevelopers: 281763, cumulativeDevelopers: 1895041 },
|
|
{ month: '2025-04', newDevelopers: 345266, cumulativeDevelopers: 2240307 },
|
|
{ month: '2025-05', newDevelopers: 367844, cumulativeDevelopers: 2608151 },
|
|
{ month: '2025-06', newDevelopers: 400607, cumulativeDevelopers: 3008758 },
|
|
{ month: '2025-07', newDevelopers: 473642, cumulativeDevelopers: 3482400 },
|
|
{ month: '2025-08', newDevelopers: 537866, cumulativeDevelopers: 4020266 },
|
|
{ month: '2025-09', newDevelopers: 516752, cumulativeDevelopers: 4537018 },
|
|
{ month: '2025-10', newDevelopers: 401057, cumulativeDevelopers: 4938075 },
|
|
{ month: '2025-11', newDevelopers: 419106, cumulativeDevelopers: 5357181 },
|
|
{ month: '2025-12', newDevelopers: 502051, cumulativeDevelopers: 5859232 },
|
|
{ month: '2026-01', newDevelopers: 650802, cumulativeDevelopers: 6510034 },
|
|
{ month: '2026-02', newDevelopers: 616304, cumulativeDevelopers: 7126338 },
|
|
{ month: '2026-03', newDevelopers: 846186, cumulativeDevelopers: 7972524 },
|
|
{ month: '2026-04', newDevelopers: 27476, cumulativeDevelopers: 8000000 },
|
|
]
|
|
|
|
const formatYAxis = (value: number): string => {
|
|
if (value >= 1_000_000) return `${value / 1_000_000}M`
|
|
if (value >= 1_000) return `${Math.round(value / 1_000)}K`
|
|
return String(value)
|
|
}
|
|
|
|
const isYearBoundary = (month: string, index: number): boolean => {
|
|
return index === 0 || month.endsWith('-01')
|
|
}
|
|
|
|
const DeveloperGrowthChart = () => {
|
|
return (
|
|
<div className="my-8 -mx-4 sm:mx-0">
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
|
|
<defs>
|
|
<linearGradient id="developerGrowthFill" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="hsl(var(--brand-600))" stopOpacity={0.3} />
|
|
<stop offset="100%" stopColor="hsl(var(--brand-600))" stopOpacity={0.02} />
|
|
</linearGradient>
|
|
</defs>
|
|
<XAxis
|
|
dataKey="month"
|
|
tick={{ fontSize: 12, fill: 'var(--foreground-lighter)' }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: 'var(--border-default)' }}
|
|
tickFormatter={(value) => value.substring(0, 4)}
|
|
ticks={data.filter((d, i) => isYearBoundary(d.month, i)).map((d) => d.month)}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 12, fill: 'var(--foreground-lighter)' }}
|
|
tickLine={false}
|
|
axisLine={false}
|
|
tickFormatter={formatYAxis}
|
|
width={40}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="cumulativeDevelopers"
|
|
stroke="hsl(var(--brand-600))"
|
|
strokeWidth={2}
|
|
fill="url(#developerGrowthFill)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DeveloperGrowthChart
|