<template>
    <div style="width: 100%; height: 430px">
        <div class="bs-font-large-1-semi-bold" style="color: #333e48">
            {{ title }}
        </div>
        <VChart
            autoresize
            :init-options="{
                renderer: 'canvas',
                width: 'auto',
                height: '400px',
            }"
            :option="chartOptions"
        />
    </div>
</template>
<script lang="ts">
import VChart from "vue-echarts";
import { ChartType, tooltipOptions } from "./tooltipConfig";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import { LegendComponent } from "echarts/components";
import { chartLabelsStyle, formatNumbers } from "./utils";
use([CanvasRenderer, LineChart, LegendComponent]);
export default {
    name: "LineChart",
    components: {
        VChart,
    },
    props: {
        title: { type: String, default: "" },
        data: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            chartOptions: this.getChartOptions(),
        };
    },
    watch: {
        data: {
            deep: true,
            handler() {
                this.chartOptions = this.getChartOptions();
            },
        },
    },
    methods: {
        getChartOptions() {
            return {
                tooltip: tooltipOptions(ChartType.LineChart, this.title),
                legend: {
                    type: "scroll",
                    data: this.data.map((d) => d.name),
                    orient: "horizontal",
                    bottom: 15,
                    left: "3%",
                    itemHeight: 5,
                    textStyle: {
                        ...chartLabelsStyle,
                        fontWeight: "400",
                    },
                    width: "85%",
                },
                xAxis: {
                    type: "value",
                    name: "Price Markdown %",
                    bottom: 0,
                    axisLabel: {
                        ...chartLabelsStyle,
                    },
                    nameTextStyle: {
                        ...chartLabelsStyle,
                        lineHeight: 38,
                    },
                    nameLocation: "middle",
                },
                yAxis: {
                    type: "value",
                    name: this.data.yAxisName,
                    axisLabel: {
                        ...chartLabelsStyle,
                        formatter: (val: any) => formatNumbers(val),
                    },
                    nameTextStyle: {
                        ...chartLabelsStyle,
                    },
                },
                grid: {
                    containLabel: true,
                    left: 39,
                },
                series: this.data,
            };
        },
    },
};
</script>
