<script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue';
import Graph from '@/components/SvgGraph.vue';
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';

const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
</script>

<template>
    <main>
        <Graph
            :width="1500"
            :height="800"
            :border_top_bottom="24"
            :border_left_right="128"
        >
            <Axis>
                <Line data="simple_producer/sin"></Line>
                <Line data="simple_producer/cos"></Line>
                <!--                <Line data="simple_producer/sin2"></Line>-->
                <!--                <Line data="simple_producer/cos2"></Line>-->
                <!--                <Line data="simple_producer/sin3"></Line>-->
                <!--                <Line data="simple_producer/cos3"></Line>-->
                <!--                <Line data="simple_producer/sin4"></Line>-->
                <!--                <Line data="simple_producer/cos4"></Line>-->
                <!--                <Line data="simple_producer/sin5"></Line>-->
                <!--                <Line data="simple_producer/cos5"></Line>-->
                <!--                <Line data="simple_producer/sin6"></Line>-->
                <!--                <Line data="simple_producer/cos6"></Line>-->
            </Axis>
        </Graph>
    </main>
</template>

<style lang="scss">
@use '@/assets/variables';
</style>
