How can I refresh/update an Apache eChart based on data from a Sveltekit store?

Question

I am trying to refresh/redraw an Apache eChart diagram based on data from a Sveltekit store, but I do not now how to do it.
I have also tried to use a button and feed a simple data object, but this also does not work.
The diagram is drawn properly with the onMount function, but I cannot get it to refresh/redraw, either reactively (with a store) or with a button (onClick)

<!-- diagram.svelte -->
<script>
    import * as echarts from "echarts";
    import { onMount } from "svelte";
    import { dummyStoreObj } from "$lib/stores.js";

    // the {data} property of the component from the OnLoad function of the +page.js
    export let data;

    // chart and options
    let myChart;
    let chartDom;
    let myChart_option;

    // Draw
    function drawChart() {
        chartDom = document.getElementById("chartDiv");
        myChart = echarts.init(chartDom);

        myChart_option = {
            dataset: {
                dimensions: ["start_time", "bucket", "folder", "name"],
                source: data,
            },
            xAxis: {
                type: "time",
                name: "date/time",
                nameLocation: "middle",
                splitLine: { show: true },
            },
            yAxis: {
                type: "category",
                name: "# folder",
                nameGap: "1",
                splitLine: { show: true },
            },
            series: [
                {
                    type: "scatter",
                    encode: {
                        x: "start_time",
                        y: "folder",
                    },
                },
            ],
        };

        // Initialise
        myChart_option && myChart.setOption(myChart_option);
    }

    const reDrawChart = async () => {
        console.log("Redraw called");

        // Set other source
        myChart_option.source = dummyStoreObj.data;

        // Redraw
        myChart.setOption(myChart_option);
    };

    // Draw Chart
    onMount(async () => {
        drawChart();
    });
</script>

<div>
    <!-- Button -->
    <button on:click={reDrawChart}>Redraw Chart</button>
</div>
<div id="chartDiv" />

<style>
    #chartDiv {
        height: 200px;
        width: auto;
        border: 1px solid #141413;
    }
</style>

// stores.js
const dummyStoreObj = {
    data: [{
        start_time: '2023-01-31T07:45:11.286491+01:00',
        bucket: 'bucketName',
        folder: 'folderName',
        filename: 'filename.txt'
    }]
};
export const storeData = writable(
    JSON.parse(
        dummyStoreObj || '',
    ));

The diagram should render properly with the data provided:

echart render

score 1 · Answer 1 · answered Feb 16 '23 at 15:05

There are multiple issues here, the primary one is that option is set in the wrong location. It should be:

myChart_option.dataset.source = dummyStoreObj.data

JSON.parse on object like dummyStoreObj will throw an error, this looks like just an oversight and the stores.js code is incompatible in general because the object is exported.

Also, one should not query the DOM in Svelte, either use bind:this on the element to get it, or use actions, e.g.

function drawChart(node) { ...

<div use:drawChart />

How can I refresh/update an Apache eChart based on data from a Sveltekit store?

1 Answers1