refactor: modularize application domains

2026-08-13 12:03:34 +08:00
parent d610e4b841
commit 06fe75b4c7
142 changed files with 14645 additions and 8885 deletions
@@ -0,0 +1,133 @@
+import {
+  Bar,
+  BarChart,
+  Cell,
+  LabelList,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { HydrogenRegionShare, HydrogenStationTop } from '../../types';
+
+const REGION_COLORS = [
+  '#3b82f6', '#22d3ee', '#a855f7', '#f59e0b',
+  '#10b981', '#ef4444', '#6366f1', '#14b8a6',
+  '#94a3b8',
+];
+
+interface YAxisTickProps {
+  x?: number;
+  y?: number;
+  index?: number;
+  payload?: { value: string };
+}
+
+function RankYAxisTick({ x = 0, y = 0, index = 0, payload }: YAxisTickProps) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <circle cx={-172} cy={0} r={9} fill="#3b82f6" />
+      <text x={-172} y={3} textAnchor="middle" fontSize={10} fontWeight={700} fill="#fff">
+        {index + 1}
+      </text>
+      <text x={-154} y={4} textAnchor="start" fontSize={11} fill="#475569">
+        {payload?.value}
+      </text>
+    </g>
+  );
+}
+
+interface DistributionChartsProps {
+  top5: HydrogenStationTop[];
+  regions: HydrogenRegionShare[];
+  yearKg: number;
+}
+
+export function DistributionCharts({ top5, regions, yearKg }: DistributionChartsProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4">
+        <div className="flex items-center justify-between mb-3">
+          <span className="text-sm font-bold text-slate-700">加氢站加注量 Top5</span>
+          <span className="text-[11px] text-slate-400 font-bold">单位 Kg</span>
+        </div>
+        <ResponsiveContainer width="100%" height={260}>
+          <BarChart data={top5} layout="vertical" margin={{ top: 4, right: 80, bottom: 4, left: 12 }}>
+            <XAxis type="number" hide />
+            <YAxis
+              type="category"
+              dataKey="name"
+              width={188}
+              tick={<RankYAxisTick />}
+              tickLine={false}
+              axisLine={false}
+            />
+            <Tooltip
+              formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN')} Kg`}
+              contentStyle={{ borderRadius: 12, fontSize: 12 }}
+            />
+            <Bar dataKey="kg" radius={[6, 6, 6, 6]}>
+              {top5.map((_, i) => (
+                <Cell key={i} fill="url(#topBarGrad)" />
+              ))}
+              <LabelList
+                dataKey="kg"
+                position="right"
+                formatter={(v) => `${Number(v ?? 0).toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`}
+                fill="#475569"
+                fontSize={11}
+                fontWeight={700}
+              />
+            </Bar>
+            <defs>
+              <linearGradient id="topBarGrad" x1="0" x2="1" y1="0" y2="0">
+                <stop offset="0%" stopColor="#3b82f6" />
+                <stop offset="100%" stopColor="#22d3ee" />
+              </linearGradient>
+            </defs>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="bg-white rounded-2xl border border-slate-100 shadow-sm p-3 md:p-4 flex flex-col gap-2">
+        <span className="text-sm font-bold text-slate-700">各区域加氢占比</span>
+        <div className="flex items-center gap-2">
+          <div className="relative w-1/2 h-[200px]">
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={regions}
+                  dataKey="kg"
+                  nameKey="region"
+                  innerRadius={48}
+                  outerRadius={80}
+                  paddingAngle={1}
+                >
+                  {regions.map((_, i) => (
+                    <Cell key={i} fill={REGION_COLORS[i % REGION_COLORS.length]} />
+                  ))}
+                </Pie>
+                <Tooltip formatter={(v) => `${(Number(v ?? 0) / 1000).toFixed(2)}T`} contentStyle={{ borderRadius: 12, fontSize: 12 }} />
+              </PieChart>
+            </ResponsiveContainer>
+            <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+              <div className="text-[10px] text-slate-400 font-bold">年合计</div>
+              <div className="text-base font-bold text-slate-700 leading-tight">{(yearKg / 1000).toFixed(2)}T</div>
+            </div>
+          </div>
+          <div className="flex-1 grid grid-cols-1 md:grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
+            {regions.map((r, i) => (
+              <div key={r.region} className="flex items-center gap-1.5">
+                <span className="w-2 h-2 rounded-full flex-shrink-0" style={{ background: REGION_COLORS[i % REGION_COLORS.length] }} />
+                <span className="text-slate-600 truncate">{r.region}</span>
+                <span className="text-slate-400 ml-auto font-bold flex-shrink-0">{(r.share * 100).toFixed(1)}%</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}