eCharts common things into bundle but options on the element

[DoneItInnovations]

Dear Folks,

I have the following code in my project for display eChart diagrams.
I would like to pull out the common parts (chart: null, init(){...} and destroy(){...}) into the app.js bundle, only the get options() {...} left here in the div's x-data because it is always different.

<div wire:ignore
    class="overflow-hidden relative h-96 w-full"
    x-on:resize.window="chart.resize()"
    x-data="{
        chart: null,
    
        init() {
            this.chart = echarts.init(this.$el)
            this.chart.setOption(this.options)
    
            this.$wire.$watch('data', () => {
                this.chart.setOption(this.options)
            })
        },
    
        destroy() {
            this.chart.dispose()
        },
    
        get options() {
            let {
                labels,
                values
            } = this.$wire.dataset
    
            return {
                /* All the eCharts options here with the values and labels */
            }
        },
    }" ></div>

I tried something like this in the bundle is:

document.addEventListener('alpine:init', () => {
    Alpine.data('echart', (options) => ({
        chart: null,

        init() {
            this.chart = echarts.init(this.$el)
            this.chart.setOption(options)

            this.$wire.$watch('dataset', () => {
                this.chart.setOption(options)
            })
        },
    }))
})

But in this way when I update public $dataset in livewire, the $watch is not getting the newest options, because get options() does not runs again. How could I fix this? Thank you so much!

[ekwoka]

getters only run when they are gotten.

What is getting them?

Here you don't have anything getting them. you're just passing in a fixed set of options.

[DoneItInnovations]

I figured out a solution with nested x-data in a Laravel component.
So in the parent's div's x-data I pass the getter of options:

<x-chart class="h-96"
    x-data="{
        get options() {........}
        },
    }" />

and this is how x-chart component looks like:

<div wire:ignore
    {{ $attributes->class(['relative overflow-hidden']) }}>

    <div class="h-full w-full"
        x-data="echart"
        x-on:resize.window="chart.resize()">
    </div>

</div>

and in the app.js bundle i define data('echart'):

document.addEventListener('alpine:init', () => {
    Alpine.data('echart', () => ({
        chart: null,

        init() {
            this.chart = echarts.init(this.$el)
            this.chart.setOption(this.options)

            this.$wire.$watch('data', () => {
                this.chart.setOption(this.options)
            })
        },

        destroy() {
            this.chart.dispose()
        },
    }))
})

With this I can make a lot of charts with different options but common things like init, update and destroy are in one place.
Now my only problem is that the initial size of chart in Tailwindcss col sized container. I think this is because Alpine inits chart before container should have size at render.

[ekwoka]

The css will apply before Alpine runs. Generally speaking.

You could use nextTick to delay