export function statsChart() {
    return {
        tooltip:    null,
        showPicker: false,

        showTooltip(data, event) {
            const bar       = event.currentTarget;
            const chartEl   = this.$refs.chartArea;
            const barRect   = bar.getBoundingClientRect();
            const chartRect = chartEl.getBoundingClientRect();

            const tipWidth  = 224;
            const halfTip   = tipWidth / 2;
            const rawX      = barRect.left - chartRect.left + barRect.width / 2;
            const clampedX  = Math.max(halfTip, Math.min(rawX, chartRect.width - halfTip));

            this.tooltip = {
                date:      data.date,
                views:     data.views,
                visitors:  data.visitors,
                vpv:       data.visitors > 0 ? (data.views / data.visitors).toFixed(2) : '—',
                x:         clampedX,
                arrowLeft: halfTip + (rawX - clampedX), // keep arrow pointing at actual bar
            };
        },

        hideTooltip() {
            this.tooltip = null;
        },

        togglePicker() {
            this.showPicker = !this.showPicker;
        },

        closePicker() {
            this.showPicker = false;
        },
    };
}
