103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
'use client'
|
||
|
||
import React from 'react'
|
||
|
||
interface DetectorDataPoint {
|
||
value: number
|
||
label?: string
|
||
timestamp?: string
|
||
status?: string
|
||
}
|
||
|
||
interface DetectorChartProps {
|
||
className?: string
|
||
data?: DetectorDataPoint[]
|
||
type?: 'line' | 'bar'
|
||
}
|
||
|
||
const DetectorChart: React.FC<DetectorChartProps> = ({
|
||
className = '',
|
||
type = 'line'
|
||
}) => {
|
||
if (type === 'bar') {
|
||
const barData = [
|
||
{ value: 85, label: 'Янв' },
|
||
{ value: 70, label: 'Фев' },
|
||
{ value: 90, label: 'Мар' },
|
||
{ value: 65, label: 'Апр' },
|
||
{ value: 80, label: 'Май' },
|
||
{ value: 95, label: 'Июн' }
|
||
]
|
||
|
||
return (
|
||
<div className={`w-full h-full ${className}`}>
|
||
<svg className="w-full h-full" viewBox="0 0 400 200">
|
||
<g>
|
||
{barData.map((bar, index) => {
|
||
const barWidth = 50
|
||
const barSpacing = 15
|
||
const x = index * (barWidth + barSpacing) + 20
|
||
const barHeight = (bar.value / 100) * 150
|
||
const y = 160 - barHeight
|
||
|
||
return (
|
||
<g key={index}>
|
||
<rect
|
||
x={x}
|
||
y={y}
|
||
width={barWidth}
|
||
height={barHeight}
|
||
fill="rgb(42, 157, 144)"
|
||
rx="4"
|
||
ry="4"
|
||
/>
|
||
<text
|
||
x={x + barWidth / 2}
|
||
y={180}
|
||
textAnchor="middle"
|
||
fill="#71717a"
|
||
fontSize="12"
|
||
>
|
||
{bar.label}
|
||
</text>
|
||
</g>
|
||
)
|
||
})}
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className={`w-full h-full ${className}`}>
|
||
<svg className="w-full h-full" viewBox="0 0 400 200">
|
||
<defs>
|
||
<linearGradient id="detectorGradient" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0%" stopColor="rgb(231, 110, 80)" stopOpacity="0.3" />
|
||
<stop offset="100%" stopColor="rgb(231, 110, 80)" stopOpacity="0" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path
|
||
d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60 L380,180 L20,180 Z"
|
||
fill="url(#detectorGradient)"
|
||
/>
|
||
<path
|
||
d="M20,150 L80,120 L140,100 L200,80 L260,90 L320,70 L380,60"
|
||
stroke="rgb(231, 110, 80)"
|
||
strokeWidth="2"
|
||
fill="none"
|
||
/>
|
||
<circle cx="20" cy="150" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="80" cy="120" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="140" cy="100" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="200" cy="80" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="260" cy="90" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="320" cy="70" r="3" fill="rgb(231, 110, 80)" />
|
||
<circle cx="380" cy="60" r="3" fill="rgb(231, 110, 80)" />
|
||
</svg>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default DetectorChart |