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);
|