Chart lines look messed up on the analytics page

[Foretack]

Describe the bug

Steps to reproduce

Enable analytics and go visit the web page, increase in channel points should reproduce this

Expected behavior

The lines should not be smoothed and should be completely straight horizontally and vertically instead

Operating system

Ubuntu 22.04

Python version

3.10.12

Miner version

latest (1.8.8)

Other relevant software versions

No response

Logs

no errors, logs are the standard claim & watchtime logs, nothing out of the ordinary

Additional context

No response

[rdavydov]

No foul language in the title, please maintain common decency.

[rdavydov]

Attach/upload your analytics/streamername.json file so this issue can be reproduced and investigated.

[Foretack]

forsen.json
ohnepixel.json

[Le0Developer]

This seems to be a bug in an apexcharts update, replacing <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> with <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.42.0"></script> in assets/charts.html fixes the issue for me.

[rdavydov]

apexcharts/apexcharts.js#1188

Regarding the staircase effect - this is due to the data points having the same x-values. When multiple data points share the same x-value, the line chart connects them vertically first and then horizontally, creating a step-like appearance.

@Le0Developer Indeed, 3.42.0 doesn't have this weird backspikes. Good find!

[rdavydov]

x is a timestamp:

    def __save_json(self, key, data={}, event_type="Watch"):
        # https://stackoverflow.com/questions/4676195/why-do-i-need-to-multiply-unix-timestamps-by-1000-in-javascript
        now = datetime.now().replace(microsecond=0)
        data.update({"x": round(datetime.timestamp(now) * 1000)})

[rdavydov]

in ohnepixel.json we can see:

        {
            "x": 1698253100000, // same timestamp
            "y": 58920,
            "z": "Watch"
        },
        {
            "x": 1698253100000, // same timestamp
            "y": 59370,
            "z": "Watch Streak"
        },

This is because we get WATCH and WATCH_STREAK points at the same time.

Same with the WATCH and CLAIM points. We get them simultaneously.

        {
            "x": 1698254603000, // same timestamp
            "y": 59470,
            "z": "Watch"
        },
        {
            "x": 1698254603000, // same timestamp
            "y": 59520,
            "z": "Claim"
        },

[rdavydov]

function getStreamerData(streamer) {
    if (currentStreamer == streamer) {
        $.getJSON(`./json/${streamer}`, {
            startDate: formatDate(startDate),
            endDate: formatDate(endDate)
        }, function (response) {
            var data = response.series;

            // Adjust x-values to prevent staircase effect
            for (var i = 1; i < data.length; i++) {
                if (data[i].x === data[i - 1].x) {
                    data[i].x += 1000; // Increment by 1 second (1000 milliseconds)
                }
            }

            chart.updateSeries([{
                name: streamer.replace(".json", ""),
                data: data
            }], true);

            clearAnnotations();
            annotations = response.annotations;
            updateAnnotations();

            setTimeout(function () {
                getStreamerData(streamer);
            }, 300000); // 5 minutes
        });
    }
}

Tried incrementing x by 1s, but the staircase effect is still present. I guess this is just how the ApexCharts library works, no wonder that issue was closed with no fix.