tcjlj/OpenFlare
1
0
Fork 0
mirror of https://github.com/Rain-kl/OpenFlare.git synced 2026-10-04 23:16:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

prettier

Browse Source
This commit is contained in:
ryan
2026-07-13 15:08:40 +08:00
parent 08e8eea932
commit 1eff7878a1
441 changed files with 26491 additions and 18405 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/data/rank-chart.tsx
+11 -10
View File
@@ -1,7 +1,7 @@
'use client';
import {useMemo} from 'react';
import type {EChartsOption} from 'echarts';
import { useMemo } from 'react';
import type { EChartsOption } from 'echarts';
import ReactECharts from 'echarts-for-react';
type RankChartItem = {
@@ -22,7 +22,7 @@ function getChartValue(params: unknown) {
if (typeof params !== 'object' || params === null || !('value' in params)) {
return 0;
}
const rawValue = (params as {value?: unknown}).value;
const rawValue = (params as { value?: unknown }).value;
if (Array.isArray(rawValue)) {
const candidate = rawValue[0];
return typeof candidate === 'number' ? candidate : 0;
@@ -59,7 +59,7 @@ export function RankChart({
},
formatter: (params: unknown) => {
const item = Array.isArray(params) ? params[0] : params;
const data = item as {name?: string; value?: number};
const data = item as { name?: string; value?: number };
return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
},
},
@@ -78,8 +78,8 @@ export function RankChart({
yAxis: {
type: 'category',
data: items.map((item) => item.label),
axisTick: {show: false},
axisLine: {show: false},
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
color: '#cbd5e1',
width: 120,
@@ -104,7 +104,8 @@ export function RankChart({
show: true,
position: 'right',
color: '#e2e8f0',
formatter: (params: unknown) => valueFormatter(getChartValue(params)),
formatter: (params: unknown) =>
valueFormatter(getChartValue(params)),
},
},
],
@@ -114,7 +115,7 @@ export function RankChart({
if (items.length === 0) {
return (
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed bg-muted/30 text-sm text-muted-foreground">
<div className='flex h-[220px] items-center justify-center rounded-3xl border border-dashed bg-muted/30 text-sm text-muted-foreground'>
{emptyMessage}
</div>
);
@@ -125,7 +126,7 @@ export function RankChart({
option={option}
notMerge
lazyUpdate
style={{height: Math.max(220, items.length * 44), width: '100%'}}
style={{ height: Math.max(220, items.length * 44), width: '100%' }}
/>
);
}
}
frontend/components/data/trend-chart.tsx
+22 -18
View File
@@ -1,10 +1,10 @@
'use client';
import {useMemo} from 'react';
import type {EChartsOption} from 'echarts';
import { useMemo } from 'react';
import type { EChartsOption } from 'echarts';
import ReactECharts from 'echarts-for-react';
import {calculateNiceAxisMax, formatCompactNumber} from '@/lib/utils/metrics';
import { calculateNiceAxisMax, formatCompactNumber } from '@/lib/utils/metrics';
type TrendChartSeries = {
label: string;
@@ -57,7 +57,9 @@ export function TrendChart({
}: TrendChartProps) {
const option = useMemo<EChartsOption>(() => {
const axisFormatter = yAxisValueFormatter ?? defaultFormatter;
const maxValue = calculateNiceAxisMax(series.flatMap((item) => item.values));
const maxValue = calculateNiceAxisMax(
series.flatMap((item) => item.values),
);
return {
animationDuration: 500,
@@ -92,7 +94,9 @@ export function TrendChart({
matchedSeries?.valueFormatter ??
yAxisValueFormatter ??
defaultFormatter;
const rawValue = Array.isArray(item.value) ? item.value[1] : item.value;
const rawValue = Array.isArray(item.value)
? item.value[1]
: item.value;
const numericValue =
typeof rawValue === 'number' ? rawValue : Number(rawValue ?? 0);
@@ -175,38 +179,38 @@ export function TrendChart({
if (labels.length === 0 || series.length === 0) {
return (
<div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed bg-muted/30 text-sm text-muted-foreground">
<div className='flex h-[220px] items-center justify-center rounded-3xl border border-dashed bg-muted/30 text-sm text-muted-foreground'>
暂无趋势数据
</div>
);
}
return (
<div className="space-y-4">
<div className='space-y-4'>
{showSummary ? (
<div className="flex flex-wrap gap-3">
<div className='flex flex-wrap gap-3'>
{series.map((item) => {
const summaryValue = resolveSummaryValue(item.values, summaryScope);
const formatter = item.valueFormatter ?? defaultFormatter;
return (
<div
key={item.label}
className="min-w-[140px] rounded-2xl border bg-card px-4 py-3"
className='min-w-[140px] rounded-2xl border bg-card px-4 py-3'
>
<div className="flex items-center gap-2">
<div className='flex items-center gap-2'>
<span
className="h-2.5 w-2.5 rounded-full"
style={{backgroundColor: item.color}}
className='h-2.5 w-2.5 rounded-full'
style={{ backgroundColor: item.color }}
/>
<p className="text-xs tracking-[0.18em] text-muted-foreground uppercase">
<p className='text-xs tracking-[0.18em] text-muted-foreground uppercase'>
{item.label}
</p>
</div>
<p className="mt-2 text-lg font-semibold">
<p className='mt-2 text-lg font-semibold'>
{formatter(summaryValue)}
</p>
{summaryHint ? (
<p className="mt-1 text-[10px] text-muted-foreground">
<p className='mt-1 text-[10px] text-muted-foreground'>
{summaryHint}
</p>
) : null}
@@ -216,14 +220,14 @@ export function TrendChart({
</div>
) : null}
<div className="overflow-hidden rounded-[28px] border bg-linear-to-b from-white/3 to-transparent px-4 py-4 dark:from-white/3">
<div className='overflow-hidden rounded-[28px] border bg-linear-to-b from-white/3 to-transparent px-4 py-4 dark:from-white/3'>
<ReactECharts
option={option}
notMerge
lazyUpdate
style={{height, width: '100%'}}
style={{ height, width: '100%' }}
/>
</div>
</div>
);
}
}