<template>
  <div ref="chartdiv" style="width: 100%; height: 300px;"></div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue';
import { useNuxtApp } from '#app';

const chartdiv = ref(null);
const { $am5, $am5xy, $am5themes_Animated } = useNuxtApp();

onMounted(() => {
  let root = $am5.Root.new(chartdiv.value);

  root.setThemes([
    $am5themes_Animated.default.new(root)
  ]);

  let chart = root.container.children.push($am5xy.XYChart.new(root, {
    panX: true,
    panY: true,
    wheelX: "panX",
    wheelY: "zoomX",
    pinchZoomX: true
  }));

  let cursor = chart.set("cursor", $am5xy.XYCursor.new(root, {
    behavior: "none"
  }));
  cursor.lineY.set("visible", false);

  let xAxis = chart.xAxes.push($am5xy.DateAxis.new(root, {
    baseInterval: {
      timeUnit: "day",
      count: 1
    },
    renderer: $am5xy.AxisRendererX.new(root, {})
  }));

  let yAxis = chart.yAxes.push($am5xy.ValueAxis.new(root, {
    renderer: $am5xy.AxisRendererY.new(root, {})
  }));

  let series = chart.series.push($am5xy.LineSeries.new(root, {
    name: "Series 1",
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
    tooltip: $am5.Tooltip.new(root, {
      labelText: "{valueY}"
    })
  }));

  series.data.setAll([
    { date: new Date(2023, 0, 1).getTime(), value: 50 },
    { date: new Date(2023, 0, 2).getTime(), value: 70 },
    { date: new Date(2023, 0, 3).getTime(), value: 100 },
    { date: new Date(2023, 0, 4).getTime(), value: 85 },
    { date: new Date(2023, 0, 5).getTime(), value: 60 }
  ]);

  onBeforeUnmount(() => {
    root.dispose();
  });
});
</script>
