<svelte:head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js" type="text/javascript"></script>
</svelte:head>


<script>
    import Canvas from './properties/Canvas.svelte';
    import download_image from './properties/Canvas.svelte';
    import clear_canvas from './properties/Canvas.svelte'
    import {
        width,
        height,
    } from './canvas_properties'
    import { onMount } from 'svelte';

    let chart_border;
    window.addEventListener('resize', () => {
        chart_border = document.getElementById("chart_border")
        $width = chart_border.clientWidth;
        $height = window.innerHeight-window.innerHeight/5;
    })

    onMount(()=>{
        chart_border = document.getElementById("chart_border");
        console.log("WWW", $width)
        $width = chart_border.offsetWidth;
        console.log("WWW", $width)
    })

</script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="row">
    <div class="col col-1" id="vertical_col" style="padding-right: 0px; padding-left: 0px">
        <button type="button"
                id="download_image"
                on:click={download_image}
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            <i class="material-icons">download</i>
        </button>
        <button type="button"
                id="clear_canvas"
                on:click={clear_canvas}
                class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
            <i class="material-icons">delete</i>
        </button>
        <h2 id="vertical" style="padding-top: {$height*0.3}%">&#8593 Time &#8595</h2>
    </div>
    <div class="col" id="chart">
        <div class="border rounded" id="chart_border" >
            <Canvas />     
        </div>
        <div id="xAxis"></div>
    </div>
    <h2> &#8592 Channels &#8594 </h2>
</div>

<style>
    #vertical {
        writing-mode: vertical-lr;
        text-orientation: upright;
        float: right;
    }

    h2 {
        font-size:xx-large;
    }
    button {
        margin-top: 5px;
        margin-bottom: 5px;
    }
</style>