aerbim-ht-monitor/frontend/components/dashboard/BarChart.tsx

'use client'

import React from 'react'

interface ChartDataPoint {
  value: number
  label?: string
  color?: string
}

interface BarChartProps {
  className?: string
  data?: ChartDataPoint[]
}

const BarChart: React.FC<BarChartProps> = ({ className = '', data }) => {
  const width = 635
  const height = 280
  const margin = { top: 20, right: 30, bottom: 50, left: 60 }
  const plotWidth = width - margin.left - margin.right
  const plotHeight = height - margin.top - margin.bottom
  const baselineY = margin.top + plotHeight

  const barData = (Array.isArray(data) && data.length > 0)
    ? data.map(d => ({ value: d.value, label: d.label || '', color: d.color || 'rgb(37, 99, 235)' }))
    : Array.from({ length: 12 }, (_, i) => ({ value: 0, label: `${i + 1}`, color: 'rgb(37, 99, 235)' }))

  const maxVal = Math.max(...barData.map(b => b.value || 0), 1)

  // Генерируем Y-оси метки
  const ySteps = 4
  const yLabels = Array.from({ length: ySteps + 1 }, (_, i) => {
    const value = (maxVal / ySteps) * (ySteps - i)
    const y = margin.top + (i * plotHeight) / ySteps
    return { value: value.toFixed(1), y }
  })

  // Генерируем X-оси метки (показываем каждую 2-ю или 3-ю)
  const xLabelStep = Math.ceil(barData.length / 8)
  const xLabels = barData
    .map((d, i) => {
      const barWidth = Math.max(30, plotWidth / barData.length - 8)
      const barSpacing = (plotWidth - barWidth * barData.length) / (barData.length - 1 || 1)
      const x = margin.left + i * (barWidth + barSpacing) + barWidth / 2
      return { label: d.label || `${i + 1}`, x, index: i }
    })
    .filter((_, i) => i % xLabelStep === 0 || i === barData.length - 1)

  return (
    <div className={`w-full h-full ${className}`}>
      <svg className="w-full h-full" viewBox={`0 0 ${width} ${height}`}>
        {/* Сетка Y */}
        {yLabels.map((label, i) => (
          <line
            key={`grid-y-${i}`}
            x1={margin.left}
            y1={label.y}
            x2={width - margin.right}
            y2={label.y}
            stroke="rgba(148, 163, 184, 0.2)"
            strokeWidth="1"
            strokeDasharray="4,4"
          />
        ))}

        {/* Ось X */}
        <line
          x1={margin.left}
          y1={baselineY}
          x2={width - margin.right}
          y2={baselineY}
          stroke="rgb(148, 163, 184)"
          strokeWidth="2"
        />

        {/* Ось Y */}
        <line
          x1={margin.left}
          y1={margin.top}
          x2={margin.left}
          y2={baselineY}
          stroke="rgb(148, 163, 184)"
          strokeWidth="2"
        />

        {/* Y-оси метки и подписи */}
        {yLabels.map((label, i) => (
          <g key={`y-label-${i}`}>
            <line
              x1={margin.left - 5}
              y1={label.y}
              x2={margin.left}
              y2={label.y}
              stroke="rgb(148, 163, 184)"
              strokeWidth="1"
            />
            <text
              x={margin.left - 10}
              y={label.y + 4}
              textAnchor="end"
              fontSize="12"
              fill="rgb(148, 163, 184)"
              fontFamily="Arial, sans-serif"
            >
              {label.value}
            </text>
          </g>
        ))}

        {/* X-оси метки и подписи */}
        {xLabels.map((label, i) => (
          <g key={`x-label-${i}`}>
            <line
              x1={label.x}
              y1={baselineY}
              x2={label.x}
              y2={baselineY + 5}
              stroke="rgb(148, 163, 184)"
              strokeWidth="1"
            />
            <text
              x={label.x}
              y={baselineY + 20}
              textAnchor="middle"
              fontSize="11"
              fill="rgb(148, 163, 184)"
              fontFamily="Arial, sans-serif"
            >
              {typeof label.label === 'string' ? label.label.substring(0, 8) : `${label.index + 1}`}
            </text>
          </g>
        ))}

        {/* Подпись оси Y */}
        <text
          x={20}
          y={margin.top + plotHeight / 2}
          textAnchor="middle"
          fontSize="13"
          fill="rgb(148, 163, 184)"
          fontFamily="Arial, sans-serif"
          transform={`rotate(-90, 20, ${margin.top + plotHeight / 2})`}
        >
          Значение
        </text>

        {/* Подпись оси X */}
        <text
          x={margin.left + plotWidth / 2}
          y={height - 10}
          textAnchor="middle"
          fontSize="13"
          fill="rgb(148, 163, 184)"
          fontFamily="Arial, sans-serif"
        >
          Период
        </text>

        {/* Столбцы */}
        {barData.map((bar, index) => {
          const barWidth = Math.max(30, plotWidth / barData.length - 8)
          const barSpacing = (plotWidth - barWidth * barData.length) / (barData.length - 1 || 1)
          const x = margin.left + index * (barWidth + barSpacing)
          const barHeight = (bar.value / maxVal) * plotHeight
          const y = baselineY - barHeight

          return (
            <g key={`bar-${index}`}>
              <rect
                x={x}
                y={y}
                width={barWidth}
                height={barHeight}
                fill={bar.color}
                rx="4"
                ry="4"
                opacity="0.9"
              />
              {/* Тень для глубины */}
              <rect
                x={x}
                y={y}
                width={barWidth}
                height={barHeight}
                fill="none"
                stroke={bar.color}
                strokeWidth="1"
                rx="4"
                ry="4"
                opacity="0.3"
              />
            </g>
          )
        })}
      </svg>
    </div>
  )
}

export default BarChart