zhang1106
63f0cb570e
style(backend): 格式化模型文件代码 style(frontend): 调整组件代码格式 chore: 删除旧 ESLint 配置并添加新配置 refactor(backend): 重构模型定义语法 style: 统一箭头函数和对象属性简写
54 lines
1.5 KiB
React
54 lines
1.5 KiB
React
import React from 'react';
|
|
import { designTokens } from '../../config/theme';
|
|
|
|
const DeviceTrendChart = ({ data }) => {
|
|
const maxValue = Math.max(...data.map(d => d.value));
|
|
const chartHeight = 120;
|
|
|
|
return (
|
|
<div style={{ marginTop: '16px' }}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'flex-end',
|
|
justifyContent: 'space-between',
|
|
height: chartHeight,
|
|
gap: '8px',
|
|
padding: '0 8px',
|
|
}}
|
|
>
|
|
{data.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
maxWidth: '40px',
|
|
height: `${(item.value / maxValue) * chartHeight}px`,
|
|
borderRadius: '4px 4px 0 0',
|
|
background: `linear-gradient(180deg, ${item.color} 0%, ${item.color}80 100%)`,
|
|
transition: `height ${designTokens.transitions.slow}`,
|
|
boxShadow: `0 -2px 8px ${item.color}30`,
|
|
}}
|
|
/>
|
|
<span
|
|
style={{
|
|
fontSize: '0.7rem',
|
|
color: designTokens.colors.text.tertiary,
|
|
marginTop: '4px',
|
|
whiteSpace: 'nowrap',
|
|
}}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default React.memo(DeviceTrendChart);
|