<template>
    <svg :class="svgClass +' svgg'" :width="width" :height="height">
        <g>
            <rect v-for="(day ,id) in dataChart"
                  :alt="id"
                  :key="'bcs'+id"
                  :x="scales.x(new Date(day.date))"
                  :y="scales.y(day.value)"
                  :width="colsize"
                  :height="height-scales.y(day.value)"
                  class="barChartRect"
            ></rect>
            <!--            <path-->
            <!--                  :d="calculatePath(dataChart)"-->
            <!--            />-->
            <!--            :style="{stroke:cinfo.color}"-->
        </g>
        <g class="axisg"></g>

    </svg>
</template>

<script>

    import {scaleLinear, scaleLog, scalePow, scaleTime} from 'd3';
    import {axisLeft, axisBottom,timeDay} from 'd3';
    import {axisRight, axisTop} from 'd3';

    import {select, line} from 'd3';

    select, scaleLinear, scaleLog, scalePow, scaleTime,
        axisLeft, axisRight, axisTop, axisBottom, line

    export default {
        name: 'BarChartSingle',
        props: {
            dataChart: Array,   // [{date,value}]
            scaleType: String,
            dataType: String,
            width: Number,
            height: Number,
            country: String,
        },
        data() {
            return {
                margin: {
                    x: 5,
                    y: 0,
                },
                svgClass: "svg" + Math.random().toString(36).substring(7),
                overpoint: {
                    x: 0,
                    y: 0,
                    text: "",
                    country: ""
                }
            }
        },
        mounted() {
            this.drawAxis()
            //console.log('',this.country,this.dataType, this.dataChart.slice(-1)[0])
        },
        watch: {
            scaleType() {
                this.drawAxis()
            },
            dataChart() {
                this.drawAxis()
            },
        },
        computed: {
            colsize() {
                return this.scales.x(new Date(this.dataChart[1].date)) - 1
            },
            minmax() {

                let first = this.dataChart[0]
                let max = {x: new Date(first.date), y: first.value}
                let min = {x: new Date(first.date), y: first.value}

                this.dataChart.forEach(item => {

                    let value = item.value
                    let dayvalue = new Date(item.date)
                    max.x = max.x < dayvalue ? dayvalue : max.x
                    max.y = max.y < value ? value : max.y

                    min.x = min.x > dayvalue ? dayvalue : min.x
                    if (typeof min.y === "undefined") min.y = value
                    min.y = min.y > value ? value : min.y
                    if (min.y <= 0) min.y = 1   // for log scale
                })

                //console.log(' dd',this.dataChart)
                //console.log(' {min: min, max: max} ', min.y, max, this.scaleType)
                return {min: min, max: max}
            },

            scales() {

                let scales = {}
                scales.x = scaleTime()
                    .domain([this.minmax.min.x, this.minmax.max.x])
                    .range([0, this.width - 2 * this.margin.x])

                // !!scaleLog need to start at 1 not 0!!
                scales.y = this.scaleType === 'linear' ? scaleLinear() : scaleLog()
                scales.y = scales.y
                    .domain([this.minmax.min.y, this.minmax.max.y])
                    .range([this.height - 2 * this.margin.y, 1])

                return scales
            },
        },
        methods: {
            calculatePath(data) {

                //console.log('datata',data)
                const path = line()
                    .x((d) => this.scales.x(new Date(d.date)))
                    .y(d => this.scales.y(d.value === 0 ? 1 : d.value))

                return path(data)
            },
            drawAxis() {

                let axis = select("." + this.svgClass + "  .axisg")

                axis.selectAll("*").remove()


                axis.append("g")
                    .attr("class", "axis ")  // axis--y
                    //.attr("transform", "translate(" + 0 + ", 0)")
                    .call(axisRight(this.scales.y).ticks(3));

                axis.append("g")
                    .attr("class", "axis") // axis--x
                    .attr("transform", "translate( 0," + (this.height - 1) + ")")
                    .call(axisTop(this.scales.x).ticks(timeDay.every(10))
            );

            },

        },


    }
</script>

<style scoped>

    .barChartRect {
        fill: #87a2a8;
    }
</style>
