<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">
                <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>
            </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>
