mirror of
https://github.com/azaion/ui.git
synced 2026-04-22 20:06:34 +00:00
Oleksandr Hutsul
274800e508
- Port mission-planner flight planning to main app (Tailwind, react-leaflet v5, react-i18next) - Add FlightMap with click-to-add waypoints, draggable markers, polyline with arrows - Add FlightParamsPanel with action modes, waypoint list (drag-reorder), altitude chart, wind, JSON import/export - Add FlightListSidebar with create/delete and telemetry date - Add collapsible left panel with quick action mode shortcuts - Add work area / no-go zone drawing via manual mouse events (L.rectangle) - Add AltitudeDialog and JsonEditorDialog (Tailwind modals) - Add battery/time/distance calculations per waypoint segment - Add satellite/classic map toggle and mini-map on point drag - Add Camera FOV and Communication Addr fields - Add current position display under location search - Merge mission-planner translations under flights.planner.* - Gitignore .superpowers session data
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { Line } from 'react-chartjs-2'
|
|
import 'chart.js/auto'
|
|
import { useTranslation } from 'react-i18next'
|
|
import type { FlightPoint } from './types'
|
|
|
|
interface Props {
|
|
points: FlightPoint[]
|
|
}
|
|
|
|
export default function AltitudeChart({ points }: Props) {
|
|
const { t } = useTranslation()
|
|
|
|
if (points.length === 0) return null
|
|
|
|
const data = {
|
|
labels: points.map((_, i) => i + 1),
|
|
datasets: [{
|
|
label: t('flights.planner.altitude'),
|
|
data: points.map(p => p.altitude),
|
|
borderColor: '#228be6',
|
|
backgroundColor: 'rgba(34,139,230,0.2)',
|
|
pointBackgroundColor: '#fd7e14',
|
|
pointBorderColor: '#1e1e1e',
|
|
pointBorderWidth: 1,
|
|
tension: 0.1,
|
|
}],
|
|
}
|
|
|
|
const options = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
x: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
|
|
y: { ticks: { font: { size: 10 }, color: '#6c757d' }, grid: { color: '#495057' } },
|
|
},
|
|
}
|
|
|
|
return (
|
|
<div className="h-16">
|
|
<Line data={data} options={options} />
|
|
</div>
|
|
)
|
|
}
|