Plot not not updating when setting all new data

[araldit]

I can show a plot and append new data points to it with "chartRef.addDataPoint".

For some reason I cant set all data new. Below is how my plot module is made:

init() is for upload data for the plot, server side. data_updated() is for when new data should be appended the current plot data_changed() is for creating a new plot. It is using init() to update the data variable.

Can anyone see what I am doing wrong, or a work around?

<script context="module">
        import Chart from 'svelte-frappe-charts';

        let active_tid = 0;
        let data = {};

        export async function init(msg){
                console.log("Create data for plot")
                active_tid = msg.tid;
                data = {
                        labels: msg.timestamps.map((epoch) => {
                                let d = new Date(epoch*1000).toLocaleTimeString(); //toLocaleString();
                                return d;
                        }),
                        datasets: [
                                {
                                        values: msg.values.map((dp) =>{
                                                return dp.toFixed(2);
                                        })
                                }
                        ],
                }
                return msg.timestamps[msg.timestamps.length - 1];
        }
</script>

<script>
        export let plotHeader = '';
        import {tid, ended, consumption_kwh, last_plotindex} from '../../transaction_store'
        import { onMount } from 'svelte';
        import {page} from '$app/stores';

        let tooltipOptions = {
                formatTooltipX: (d) => (d + "").toUpperCase(),
                formatTooltipY: (d) => (d + " kW")
        }
        let axisOptions = {
                xAxisMode: "tick",
                xIsSeries: true,
                yAxisMode: 'span'
        }
        let lineOptions = {
                dotSize: 3, // default: 4
                hideDots: 1,
                spline: 0
        }
        let chartRef;

        function addDataPoint(timestamp, value) {
                chartRef.addDataPoint(timestamp, [value]);
        }

        async function data_updated(consumption){
                if(consumption == 0){
                        return;
                }

                let plot_response = await fetch(`/${$page.params.stationid}/control/station_plotdata.json?tid=${$tid}&from=${$last_plotindex+1}`);
                let tinfo = {};
                try{
                        let msg = await plot_response.json();
                        if(msg.timestamps.length == 0){
                                return;
                        }
                        for (let i=0; i<msg.timestamps.length; i++){
                                addDataPoint(new Date(msg.timestamps[i]*1000).toLocaleTimeString(), msg.values[i].toFixed(2));
                        }
                        $last_plotindex = msg.timestamps[msg.timestamps.length - 1];
                }
                catch (err){
                        console.log("Request plot", err)
                }
        }

        async function data_changed(tid){
                console.log("Change plot data for TID:", tid);
                let plot_response = await fetch(`/${$page.params.stationid}/control/station_plotdata.json?tid=${tid}`);
                let tinfo = {};
                try{
                        let msg = await plot_response.json();
                        if(msg.timestamps.length == 0){
                                return;
                        }
                        init(msg);
                        $last_plotindex = msg.timestamps[msg.timestamps.length - 1];;
                }
                catch (err){
                        console.log("Request plot", err)
                }
        }

        onMount(async () => {
                //console.log("On mount", $page.params.stationid)

        });

        //Update the plot when the consumption changes
        //$: data_updated($consumption_kwh);
        $: $tid && $tid != active_tid && data_changed($tid);

</script>

<div id="chart">
        <Chart id="plotDiv" data={data} title={plotHeader} tooltipOptions={tooltipOptions} axisOptions={axisOptions} lineOptions={lineOptions} bind:this={chartRef}/>
</div>

[araldit]

I got help from a pro in Discord. The problem was quite simple - data is not reactive because I had in in the Githubissues.

Githubissues is a development platform for aggregating issues.