adds charts panel

frontend/src/views/ChartRenderView.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TelemetryDefinition } from '@/composables/telemetry.ts';
+import SvgGraph from '@/components/SvgGraph.vue';
+import { GraphSide } from '@/graph/graph.ts';
+import GraphAxis from '@/components/GraphAxis.vue';
+import TelemetryLine from '@/components/TelemetryLine.vue';
+
+defineProps<{
+    charts: TelemetryDefinition[][][];
+}>();
+</script>
+
+<template>
+    <div
+        class="chart grid grow"
+        :style="`grid-template: repeat(${charts[0].length} , 1fr) / repeat(${charts.length}, 1fr);`"
+        v-if="charts.length > 0"
+    >
+        <template v-for="y in charts[0].length" :key="y">
+            <template v-for="x in charts.length" :key="x">
+                <div class="no-min-height">
+                    <SvgGraph
+                        right_axis
+                        cursor
+                        :legend="GraphSide.Left"
+                        include_controls
+                    >
+                        <GraphAxis>
+                            <TelemetryLine
+                                v-for="tlm in charts[x - 1][y - 1]"
+                                :key="tlm.uuid"
+                                :data="tlm.name"
+                            ></TelemetryLine>
+                        </GraphAxis>
+                    </SvgGraph>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+
+.chart.grid {
+    display: grid;
+    grid-auto-flow: row;
+    place-content: stretch;
+    height: 100%;
+}
+</style>