Skip to content

Instantly share code, notes, and snippets.

@aaronmyatt

aaronmyatt/bens_prototype.tsx

Created January 23, 2026 03:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save aaronmyatt/6a20f8fce789c6ff4f22a302c2aaea4e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save aaronmyatt/6a20f8fce789c6ff4f22a302c2aaea4e to your computer and use it in GitHub Desktop.
Download ZIP
Prototype comparison between echarts and recharts
Raw
bens_prototype.tsx
'use client';
import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart, BarChart, Bar, Legend } from 'recharts';
import ReactECharts from 'echarts-for-react';
export default function Dashboard() {
// Chart data for Recharts - Line/Area Chart
const chartData = [
{ day: 'Mon', cases: 45 },
{ day: 'Tue', cases: 62 },
{ day: 'Wed', cases: 38 },
{ day: 'Thu', cases: 71 },
{ day: 'Fri', cases: 58 },
{ day: 'Sat', cases: 23 },
{ day: 'Sun', cases: 19 },
];
// Bar chart data for Recharts - Passing/Failing
const barChartData = [
{ day: 'Mon', passing: 38, failing: 7 },
{ day: 'Tue', passing: 54, failing: 8 },
{ day: 'Wed', passing: 31, failing: 7 },
{ day: 'Thu', passing: 63, failing: 8 },
{ day: 'Fri', passing: 49, failing: 9 },
{ day: 'Sat', passing: 19, failing: 4 },
{ day: 'Sun', passing: 16, failing: 3 },
];
// Location demographic distribution data
const locationDemographicData = [
{ date: '2024-01', midwest: 245, northeast: 312, south: 428, west: 198, total: 1183, dominant_country: 'USA' },
{ date: '2024-02', midwest: 278, northeast: 345, south: 456, west: 221, total: 1300, dominant_country: 'USA' },
{ date: '2024-03', midwest: 298, northeast: 389, south: 489, west: 267, total: 1443, dominant_country: 'USA' },
{ date: '2024-04', midwest: 312, northeast: 412, south: 512, west: 289, total: 1525, dominant_country: 'USA' },
{ date: '2024-05', midwest: 334, northeast: 445, south: 545, west: 312, total: 1636, dominant_country: 'USA' },
{ date: '2024-06', midwest: 356, northeast: 478, south: 578, west: 334, total: 1746, dominant_country: 'USA' },
];
// Chart configuration for ECharts - Line Chart
const echartsOption = {
title: {
text: 'Weekly Cases (ECharts)',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Cases',
type: 'line',
smooth: true,
data: [45, 62, 38, 71, 58, 23, 19],
areaStyle: {
color: 'rgba(147, 51, 234, 0.1)',
},
itemStyle: {
color: '#9333ea',
},
lineStyle: {
width: 3,
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
};
// Chart configuration for ECharts - Bar Chart
const echartsBarOption = {
title: {
text: 'Passing vs Failing (ECharts)',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['Passing', 'Failing'],
bottom: 0,
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Passing',
type: 'bar',
data: [38, 54, 31, 63, 49, 19, 16],
itemStyle: {
color: '#10b981',
},
},
{
name: 'Failing',
type: 'bar',
data: [7, 8, 7, 8, 9, 4, 3],
itemStyle: {
color: '#ef4444',
},
},
],
grid: {
left: '3%',
right: '4%',
bottom: '12%',
containLabel: true,
},
};
// ECharts configuration for Location Demographics - Stacked Area
const echartsLocationOption = {
title: {
text: 'Regional Distribution Over Time (ECharts)',
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
legend: {
data: ['Midwest', 'Northeast', 'South', 'West'],
bottom: 0,
},
xAxis: {
type: 'category',
boundaryGap: false,
data: locationDemographicData.map(d => d.date),
},
yAxis: {
type: 'value',
},
series: [
{
name: 'Midwest',
type: 'line',
stack: 'Total',
smooth: true,
data: locationDemographicData.map(d => d.midwest),
areaStyle: {},
itemStyle: { color: '#3b82f6' },
},
{
name: 'Northeast',
type: 'line',
stack: 'Total',
smooth: true,
data: locationDemographicData.map(d => d.northeast),
areaStyle: {},
itemStyle: { color: '#10b981' },
},
{
name: 'South',
type: 'line',
stack: 'Total',
smooth: true,
data: locationDemographicData.map(d => d.south),
areaStyle: {},
itemStyle: { color: '#f59e0b' },
},
{
name: 'West',
type: 'line',
stack: 'Total',
smooth: true,
data: locationDemographicData.map(d => d.west),
areaStyle: {},
itemStyle: { color: '#ef4444' },
},
],
grid: {
left: '3%',
right: '4%',
bottom: '15%',
containLabel: true,
},
};
// ECharts configuration for Pie Chart - Latest Month Distribution
const latestMonthData = locationDemographicData[locationDemographicData.length - 1];
const echartsPieOption = {
title: {
text: `Regional Distribution - ${latestMonthData.date} (ECharts)`,
left: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
legend: {
bottom: 0,
data: ['Midwest', 'Northeast', 'South', 'West'],
},
series: [
{
name: 'Region',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2,
},
label: {
show: true,
formatter: '{b}: {d}%',
},
emphasis: {
label: {
show: true,
fontSize: 16,
fontWeight: 'bold',
},
},
data: [
{ value: latestMonthData.midwest, name: 'Midwest', itemStyle: { color: '#3b82f6' } },
{ value: latestMonthData.northeast, name: 'Northeast', itemStyle: { color: '#10b981' } },
{ value: latestMonthData.south, name: 'South', itemStyle: { color: '#f59e0b' } },
{ value: latestMonthData.west, name: 'West', itemStyle: { color: '#ef4444' } },
],
},
],
};
return (
<>
{/* Coming Soon Banner */}
<div className="bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg p-12 text-center text-white mb-8 shadow-xl">
<div className="max-w-2xl mx-auto">
<h2 className="text-5xl font-bold mb-4">Coming Soon</h2>
<p className="text-xl opacity-90">
We&apos;re working hard to bring you something amazing. Stay tuned!
</p>
<div className="mt-8 inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-3 rounded-full">
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
<span className="text-sm font-medium">Under Development</span>
</div>
</div>
</div>
{/* Placeholder Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-white rounded-lg p-6 shadow">
<h3 className="text-gray-500 text-sm font-semibold mb-2">KYC Identity Checks</h3>
<p className="text-3xl font-bold text-gray-800">1,247</p>
</div>
<div className="bg-white rounded-lg p-6 shadow">
<h3 className="text-gray-500 text-sm font-semibold mb-2">KYC Identity Checks</h3>
<p className="text-3xl font-bold text-gray-800">3,582</p>
</div>
<div className="bg-white rounded-lg p-6 shadow">
<h3 className="text-gray-500 text-sm font-semibold mb-2">Revenue</h3>
<p className="text-3xl font-bold text-gray-800">---</p>
</div>
</div>
{/* Chart Comparison - ECharts vs Recharts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
{/* ECharts Implementation */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-purple-600 bg-purple-50 px-2 py-1 rounded">ECharts</span>
</div>
<ReactECharts option={echartsOption} opts={{ renderer: 'svg' }} style={{ height: '400px' }} />
</div>
{/* Recharts Implementation */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded">Recharts</span>
</div>
<h3 className="text-center text-base font-normal mb-4">Weekly Cases (Recharts)</h3>
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={chartData}>
<defs>
<linearGradient id="colorCases" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#9333ea" stopOpacity={0.1}/>
<stop offset="95%" stopColor="#9333ea" stopOpacity={0}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis
dataKey="day"
stroke="#666"
style={{ fontSize: '12px' }}
/>
<YAxis
stroke="#666"
style={{ fontSize: '12px' }}
/>
<Tooltip
contentStyle={{
backgroundColor: '#fff',
border: '1px solid #ccc',
borderRadius: '4px'
}}
/>
<Area
type="monotone"
dataKey="cases"
stroke="#9333ea"
strokeWidth={3}
fill="url(#colorCases)"
name="Cases"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
{/* Bar Chart Comparison - Passing vs Failing */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
{/* ECharts Bar Chart */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-purple-600 bg-purple-50 px-2 py-1 rounded">ECharts</span>
</div>
<ReactECharts option={echartsBarOption} opts={{ renderer: 'svg' }} style={{ height: '400px' }} />
</div>
{/* Recharts Bar Chart */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded">Recharts</span>
</div>
<h3 className="text-center text-base font-normal mb-4">Passing vs Failing (Recharts)</h3>
<ResponsiveContainer width="100%" height={400}>
<BarChart data={barChartData}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis
dataKey="day"
stroke="#666"
style={{ fontSize: '12px' }}
/>
<YAxis
stroke="#666"
style={{ fontSize: '12px' }}
/>
<Tooltip
contentStyle={{
backgroundColor: '#fff',
border: '1px solid #ccc',
borderRadius: '4px'
}}
/>
<Legend
wrapperStyle={{ paddingTop: '20px' }}
iconType="square"
/>
<Bar
dataKey="passing"
fill="#10b981"
name="Passing"
radius={[4, 4, 0, 0]}
/>
<Bar
dataKey="failing"
fill="#ef4444"
name="Failing"
radius={[4, 4, 0, 0]}
/>
</BarChart>
</ResponsiveContainer>
</div>
</div>
{/* Location Demographic Distribution - Stacked Area Charts */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
{/* ECharts Stacked Area */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-purple-600 bg-purple-50 px-2 py-1 rounded">ECharts</span>
</div>
<ReactECharts option={echartsLocationOption} opts={{ renderer: 'svg' }} style={{ height: '400px' }} />
</div>
{/* Recharts Stacked Area */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded">Recharts</span>
</div>
<h3 className="text-center text-base font-normal mb-4">Regional Distribution Over Time (Recharts)</h3>
<ResponsiveContainer width="100%" height={400}>
<AreaChart data={locationDemographicData}>
<CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
<XAxis
dataKey="date"
stroke="#666"
style={{ fontSize: '12px' }}
/>
<YAxis
stroke="#666"
style={{ fontSize: '12px' }}
/>
<Tooltip
contentStyle={{
backgroundColor: '#fff',
border: '1px solid #ccc',
borderRadius: '4px'
}}
/>
<Legend
wrapperStyle={{ paddingTop: '20px' }}
iconType="square"
/>
<Area
type="monotone"
dataKey="midwest"
stackId="1"
stroke="#3b82f6"
fill="#3b82f6"
name="Midwest"
/>
<Area
type="monotone"
dataKey="northeast"
stackId="1"
stroke="#10b981"
fill="#10b981"
name="Northeast"
/>
<Area
type="monotone"
dataKey="south"
stackId="1"
stroke="#f59e0b"
fill="#f59e0b"
name="South"
/>
<Area
type="monotone"
dataKey="west"
stackId="1"
stroke="#ef4444"
fill="#ef4444"
name="West"
/>
</AreaChart>
</ResponsiveContainer>
</div>
</div>
{/* Location Demographic Distribution - Pie Chart & Summary */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
{/* ECharts Pie Chart */}
<div className="bg-white rounded-lg p-6 shadow">
<div className="mb-2 flex items-center justify-between">
<span className="text-xs font-semibold text-purple-600 bg-purple-50 px-2 py-1 rounded">ECharts</span>
</div>
<ReactECharts option={echartsPieOption} opts={{ renderer: 'svg' }} style={{ height: '400px' }} />
</div>
{/* Summary Stats */}
<div className="bg-white rounded-lg p-6 shadow">
<h3 className="text-lg font-semibold mb-4">Regional Summary</h3>
<div className="space-y-4">
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Total Cases</span>
<span className="text-2xl font-bold">{latestMonthData.total.toLocaleString()}</span>
</div>
<div className="flex justify-between items-center">
<span className="text-sm text-gray-600">Dominant Country</span>
<span className="text-lg font-semibold">{latestMonthData.dominant_country}</span>
</div>
<div className="border-t pt-4">
<div className="grid grid-cols-2 gap-4">
<div>
<div className="text-xs text-gray-500 mb-1">Midwest</div>
<div className="text-lg font-semibold text-blue-600">{latestMonthData.midwest}</div>
</div>
<div>
<div className="text-xs text-gray-500 mb-1">Northeast</div>
<div className="text-lg font-semibold text-green-600">{latestMonthData.northeast}</div>
</div>
<div>
<div className="text-xs text-gray-500 mb-1">South</div>
<div className="text-lg font-semibold text-amber-600">{latestMonthData.south}</div>
</div>
<div>
<div className="text-xs text-gray-500 mb-1">West</div>
<div className="text-lg font-semibold text-red-600">{latestMonthData.west}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment