status-desktop/ui/app/AppLayouts/Communities/panels/OverviewSettingsChart.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml 2.15

import StatusQ.Popups 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1

import utils 1.0

StatusChartPanel {
    id: root
    /**
        *  Flat model to use for the chart containing timestamps
        *  type: {Array}
        *  default: []
        *  example:  {"communityId": "", "metricsType": "MessagesCount", "intervals": [{"startTimestamp": 1691047800000, "endTimestamp": 1691062200000, "timestamps": [], "count": 0}]}
    */
    property var model: []

    signal collectCommunityMetricsMessagesCount(var intervals)

    function reset() {
        d.now = Date.now()
        d.requestCommunityMetrics()
    }

    onVisibleChanged: if(visible) d.resetWithSpamProtection()
    onTimeRangeTabBarIndexChanged: reset()
    onModelChanged: chart.refresh()
    onCollectCommunityMetricsMessagesCount: d.lastRequestModelMetadata = d.selectedTabInfo.modelItems

    QtObject {
        id: d

        //visual properties
        readonly property string baseColor1: Theme.palette.baseColor1
        readonly property string twentyPercentBaseColor1: Theme.palette.alphaColor(baseColor1, 0.2)
        readonly property string barColor: Theme.palette.primaryColor2
        readonly property string barBorderColor: Theme.palette.primaryColor1
    
        readonly property string messagesLabel: qsTr("Messages")

        property int hoveredBarIndex: 0
        property int hoveredBarValue: 0
        readonly property var hoveredModelMetadata: modelMetadata[root.timeRangeTabBarIndex].modelItems[hoveredBarIndex]
        readonly property var tooltipConfig: modelMetadata[root.timeRangeTabBarIndex].tooltipConfig
        readonly property var graphTabsModel: [{text: messagesLabel, enabled: true}]
        property double now: Date.now()
        property var lastRequestModelMetadata: null

        readonly property var chartData: selectedTabInfo.modelItems.map(x => d.itemsCountInRange(root.model, x.start, x.end))
        readonly property var labels: selectedTabInfo.modelItems.map(x => x.label)
        readonly property var selectedTabInfo: modelMetadata[root.timeRangeTabBarIndex]
        readonly property var modelMetadata: [
            {
                text: qsTr("1H"),
                modelItems: [
                    { start: LocaleUtils.minutes(60, now), end: LocaleUtils.minutes(50, now), label: minutesStr(55)},
                    { start: LocaleUtils.minutes(50, now), end: LocaleUtils.minutes(40, now), label: minutesStr(45)},
                    { start: LocaleUtils.minutes(40, now), end: LocaleUtils.minutes(30, now), label: minutesStr(35)},
                    { start: LocaleUtils.minutes(30, now), end: LocaleUtils.minutes(20, now), label: minutesStr(25)},
                    { start: LocaleUtils.minutes(20, now), end: LocaleUtils.minutes(10, now), label: minutesStr(15)},
                    { start: LocaleUtils.minutes(10, now), end: LocaleUtils.minutes(0, now, false), label: minutesStr(5)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Time period"),
                    timeRangeFormatter: d.hoursRangeStr
                },
            },
            {
                text: qsTr("1D"),
                modelItems: [
                    { start: LocaleUtils.hours(24, now), end: LocaleUtils.hours(20, now), label: hourStr(22)},
                    { start: LocaleUtils.hours(20, now), end: LocaleUtils.hours(16, now), label: hourStr(18)},
                    { start: LocaleUtils.hours(16, now), end: LocaleUtils.hours(12, now), label: hourStr(14)},
                    { start: LocaleUtils.hours(12, now), end: LocaleUtils.hours(8, now), label: hourStr(10)},
                    { start: LocaleUtils.hours(8, now), end: LocaleUtils.hours(4, now), label: hourStr(6)},
                    { start: LocaleUtils.hours(4, now), end: LocaleUtils.hours(0, now, false), label: hourStr(2)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Time period"),
                    timeRangeFormatter: d.hoursRangeStr
                },
            },
            {
                text: qsTr("7D"),
                modelItems: [
                    { start: LocaleUtils.days(6, now), end: LocaleUtils.days(5, now), label: dayStr(6)},
                    { start: LocaleUtils.days(5, now), end: LocaleUtils.days(4, now), label: dayStr(5)},
                    { start: LocaleUtils.days(4, now), end: LocaleUtils.days(3, now), label: dayStr(4)},
                    { start: LocaleUtils.days(3, now), end: LocaleUtils.days(2, now), label: dayStr(3)},
                    { start: LocaleUtils.days(2, now), end: LocaleUtils.days(1, now), label: dayStr(2)},
                    { start: LocaleUtils.days(1, now), end: LocaleUtils.days(0, now), label: dayStr(1)},
                    { start: LocaleUtils.days(0, now), end: LocaleUtils.days(0, now, false), label: dayStr(0)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Date"),
                    timeRangeFormatter: d.daysRangeStr
                },
            },
            {
                text: qsTr("1M"),
                modelItems: [
                    { start: LocaleUtils.days(30, now), end: LocaleUtils.days(25, now), label: dayStr(30)},
                    { start: LocaleUtils.days(25, now),  end: LocaleUtils.days(20, now), label: dayStr(25)},
                    { start: LocaleUtils.days(20, now),  end: LocaleUtils.days(15, now), label: dayStr(20)},
                    { start: LocaleUtils.days(15, now),  end: LocaleUtils.days(10, now), label: dayStr(15)},
                    { start: LocaleUtils.days(10, now),   end: LocaleUtils.days(5, now), label: dayStr(10)},
                    { start: LocaleUtils.days(5, now),   end: LocaleUtils.days(0, now, false), label: dayStr(5)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Time period"),
                    timeRangeFormatter: d.daysRangeStr
                },
            },
            {
                text: qsTr("6M"),
                modelItems: [
                    { start: LocaleUtils.months(5, now), end: LocaleUtils.months(4, now), label: monthStr(5)},
                    { start: LocaleUtils.months(4, now), end: LocaleUtils.months(3, now), label: monthStr(4)},
                    { start: LocaleUtils.months(3, now), end: LocaleUtils.months(2, now), label: monthStr(3)},
                    { start: LocaleUtils.months(2, now), end: LocaleUtils.months(1, now), label: monthStr(2)},
                    { start: LocaleUtils.months(1, now), end: LocaleUtils.months(0, now), label: monthStr(1)},
                    { start: LocaleUtils.months(0, now), end: LocaleUtils.months(0, now, false), label: monthStr(0)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Month"),
                    timeRangeFormatter: d.monthsRangeStr
                },
            },
            {
                text: qsTr("1Y"),
                modelItems: [
                    { start: LocaleUtils.months(12, now), end: LocaleUtils.months(10, now), label: monthStr(11)},
                    { start: LocaleUtils.months(10, now), end: LocaleUtils.months(8, now),  label: monthStr(9)},
                    { start: LocaleUtils.months(8, now),  end: LocaleUtils.months(6, now),  label: monthStr(7)},
                    { start: LocaleUtils.months(6, now),  end: LocaleUtils.months(4, now),  label: monthStr(5)},
                    { start: LocaleUtils.months(4, now),  end: LocaleUtils.months(2, now),  label: monthStr(3)},
                    { start: LocaleUtils.months(2, now),  end: LocaleUtils.months(0, now, false),  label: monthStr(1)}
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Time period"),
                    timeRangeFormatter: d.monthsRangeStr
                },
            },
            {
                text: qsTr("ALL"),
                modelItems: [
                    { start: LocaleUtils.years(7, now), end: LocaleUtils.years(6, now), label: yearsStr(7) },
                    { start: LocaleUtils.years(6, now), end: LocaleUtils.years(5, now), label: yearsStr(6) },
                    { start: LocaleUtils.years(5, now), end: LocaleUtils.years(4, now), label: yearsStr(5) },
                    { start: LocaleUtils.years(4, now), end: LocaleUtils.years(3, now), label: yearsStr(4) },
                    { start: LocaleUtils.years(3, now), end: LocaleUtils.years(2, now), label: yearsStr(3) },
                    { start: LocaleUtils.years(2, now), end: LocaleUtils.years(1, now), label: yearsStr(2) },
                    { start: LocaleUtils.years(1, now), end: LocaleUtils.years(0, now), label: yearsStr(1) },
                    { start: LocaleUtils.years(0, now), end: LocaleUtils.years(0, now, false), label: yearsStr(0) }
                ],
                tooltipConfig: {
                    timeRangeString: qsTr("Year"),
                    timeRangeFormatter: d.yearsRangeStr
                },
            }
        ]

        function resetWithSpamProtection() {
            if(Date.now() - d.now > LocaleUtils.minutesToMs(5) || d.lastRequestModelMetadata != selectedTabInfo.modelItems) {
                root.reset()
            }
        }

        function requestCommunityMetrics() {
            let intervals = d.selectedTabInfo.modelItems.map(item => {
                return {
                    startTimestamp: item.start,
                    endTimestamp: item.end
                }
            })
            root.collectCommunityMetricsMessagesCount(JSON.stringify(intervals))
        }

        function itemsCountInRange(model, start, end) {
            if (model == undefined || model.intervals == undefined)
                return 0

            const interval = model.intervals.find(x => x.startTimestamp == start && x.endTimestamp == end)

            if (!interval)
                return 0
            
            if(model.metricsType === "MessagesTimestamps")
                return interval.timestamps.length

            return interval.count
        }

        function minutesStr(before = 0, timeReference = now, roundCurrentTime = true) {
            return LocaleUtils.formatTime(LocaleUtils.minutes(before, timeReference, roundCurrentTime), Locale.ShortFormat)
        }

        function hourStr(before = 0, timeReference = now, roundCurrentTime = true) {
            return LocaleUtils.formatTime(LocaleUtils.hours(before, timeReference, roundCurrentTime), Locale.ShortFormat)
        }

        function dayStr(before = 0, timeReference = now, roundCurrentTime = true) {
            return LocaleUtils.getDayMonth(LocaleUtils.days(before, timeReference, roundCurrentTime), Locale.ShortFormat)
        }

        function monthStr(before = 0, timeReference = now, roundCurrentTime = true, shortFormat = true) {
            const timeStamp = LocaleUtils.months(before, timeReference, roundCurrentTime)
            return Qt.locale().standaloneMonthName(new Date(timeStamp).getMonth(), shortFormat ? Locale.ShortFormat : Locale.LongFormat)
        }

        function yearsStr(before = 0, timeReference = now, roundCurrentTime = true) {
            return LocaleUtils.formatDate(LocaleUtils.years(before, timeReference, roundCurrentTime), "yyyy");
        }

        function hoursRangeStr(start, end) {
            return "%1 - %2".arg(hourStr(0, start, false)).arg(hourStr(0, end, false))
        }

        function daysRangeStr(start, end) {
            return (end - start > LocaleUtils.daysToMs(1)) ?
                        "%1 - %2".arg(dayStr(0, start, false)).arg(dayStr(0, end, false)) :
                        dayStr(0, start, false)
        }

        function monthsRangeStr(start, end) {
            //End date excluded
            //Adjust by one ms to exclude the end date
            //To avoid considering the end date as a new month
            end = end - 1
            const startDate = monthStr(0, start, false)
            const endDate = monthStr(0, end, false)
            return (startDate !== endDate) ?
                        "%1 - %2".arg(startDate).arg(endDate) :
                        monthStr(0, start, false, false)
        }

        function yearsRangeStr(start, end) {
            //End date excluded
            //Adjust by one ms to exclude the end date
            //To avoid considering the end date as a new year
            end = end - 1
            const startYear = yearsStr(0, start, false)
            const endYear = yearsStr(0, end, false)
            return (startYear !== endYear) ?
                        "%1 - %2".arg(startYear).arg(endYear) :
                        startYear
        }

        function getAdjustedTooltipPosition(event) {
            // By default the popup is displayed on the right of the cursor
            // If there is not enough space on the right, display it on the left
            const relativeMousePoint = event.target.mapToItem(toolTip.parent, event.x, event.y) // relative to tooltip parent
            const leftPositon = (toolTip.parent.width - (toolTip.width + toolTip.rightPadding + relativeMousePoint.x + 15)) < 0
            return leftPositon ? Qt.point(relativeMousePoint.x - toolTip.width - 15, relativeMousePoint.y - 5)
                               : Qt.point(relativeMousePoint.x + 15, relativeMousePoint.y - 5)
        }
    }

    headerLeftPadding: 0
    headerBottomPadding: Theme.bigPadding
    graphsModel: d.graphTabsModel
    timeRangeModel: d.modelMetadata
    onHeaderTabClicked: {
        chart.refresh()
    }

    /////////////////////////////
    // Chartjs configuration   //
    /////////////////////////////
    chart.type: 'bar'
    chart.labels: d.labels
    chart.datasets: [{
                xAxisId: 'x-axis-1',
                yAxisId: 'y-axis-1',
                backgroundColor: d.barColor,
                pointRadius: 0,
                hoverBackgroundColor: d.barColor,
                hoverBorderColor: d.barBorderColor,
                hoverBorderWidth: 2,
                data: d.chartData
            }]

    chart.options: {
        return {
            // Popup follows the cursor
            onHover: function(arg1, hoveredItems) {
                if(!arg1 || hoveredItems.length == 0) {
                    toolTip.close()
                    return
                }
                arg1.target = chart
                d.hoveredBarIndex = hoveredItems[0]._index
                d.hoveredBarValue = hoveredItems[0]._chart.config.data.datasets[0].data[hoveredItems[0]._index]
                const position = d.getAdjustedTooltipPosition(arg1)
                toolTip.popup(position.x, position.y)
            },
            tooltips: {
                enabled: false,
            },
            legend: {
                display: false
            },
            scales: {
                xAxes: [{
                    id: 'x-axis-1',
                    position: 'bottom',
                    stacked: false,
                    gridLines: {
                        drawOnChartArea: false,
                        drawBorder: false,
                        drawTicks: false,
                    },
                    ticks: {
                        fontSize: Theme.asideTextFontSize,
                        fontColor: d.baseColor1,
                        padding: Theme.padding,
                    }
                }],
                yAxes: [{
                    position: 'left',
                    id: 'y-axis-1',
                    stacked: false,
                    gridLines: {
                        borderDash: [5, 3],
                        lineWidth: 1,
                        drawBorder: false,
                        drawTicks: false,
                        color: d.twentyPercentBaseColor1,
                    },
                    beforeDataLimits: (axis) => {
                        axis.paddingTop = 25;
                        axis.paddingBottom = 0;
                    },
                    ticks: {
                        fontSize: 10,
                        fontColor: d.baseColor1,
                        padding: Theme.halfPadding,
                        maxTicksLimit: Theme.asideTextFontSize,
                        beginAtZero: true,
                        stepSize: 1,
                        callback: function(value, index, values) {
                            return LocaleUtils.numberToLocaleString(value)
                        }
                    }
                }]
            }
        }
    }

    StatusMenu {
        id: toolTip
        width: 243 //By design
        topPadding: Theme.padding
        bottomPadding: topPadding
        leftPadding: topPadding
        rightPadding: topPadding
        parent: Overlay.overlay

        ColumnLayout {
            spacing: Theme.padding
            RowLayout {
                Layout.fillWidth: true
                StatusBaseText {
                    elide: Qt.ElideRight
                    color: Theme.palette.baseColor1
                    text: d.tooltipConfig.timeRangeString
                }
                Item {
                    Layout.fillWidth: true
                }
                StatusBaseText {
                    Layout.alignment: Qt.AlignRight
                    elide: Qt.ElideRight
                    text: d.hoveredModelMetadata ? d.tooltipConfig.timeRangeFormatter(d.hoveredModelMetadata.start, d.hoveredModelMetadata.end)
                                                 : ""
                }
            }

            RowLayout {
                Layout.fillWidth: true
                StatusBaseText {
                    elide: Qt.ElideRight
                    font.pixelSize: Theme.primaryTextFontSize
                    color: Theme.palette.baseColor1
                    text: qsTr("No. of Messages")
                }
                Item {  Layout.fillWidth: true }
                StatusBaseText {
                    Layout.alignment: Qt.AlignRight
                    elide: Qt.ElideRight
                    font.pixelSize: Theme.primaryTextFontSize
                    color: Theme.palette.directColor1
                    text: LocaleUtils.numberToLocaleString(d.hoveredBarValue)
                }
            }
        }
    }
}