Integration with external JS lib

[marosiak]

Hi, I love this idea of creating frontend with Go, I've started making my side-project with go-app, and had no issues, untill..

I need to embed charts - my idea is to not reinvent wheel, so I had idea of using popular JS lib for charts - but then I've found that someone made binding for another lib in Go - It's great, because it gives me Html output

So far everything was cool, I had idea to extract html, then embed it into go-app with app.Raw(hereIsHtmlString)

TL;DR

I'd love to perform JS actions thru go-app, so I can use JS chart libs

Problem 1:

• app.Raw() seems to ignore <script> and <style>

And I don't mean main script - because I've attached it to app.Handler same as any other script (tailwind for example), but this script which is being loaded is manipulating chart

<script type="text/javascript">
    "use strict";
    let goecharts_RzqGdVyyqgiS = echarts.init(document.getElementById('RzqGdVyyqgiS'), "white", { renderer: "canvas" });
    let option_RzqGdVyyqgiS = {"color":["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],"legend":{},"series":[{"name":"Category A","type":"bar","data":[{"value":6},{"value":208},{"value":260},{"value":271},{"value":176},{"value":103},{"value":23}],"label":{}}],"title":{"text":"Chart"},"toolbox":{},"tooltip":{},"xAxis":[{"data":["A","B","C","D","E","F","G"]}],"yAxis":[{}]}

    goecharts_RzqGdVyyqgiS.setOption(option_RzqGdVyyqgiS);
</script>

Problem 2:

Even if I'd find any way to include this dynamically created script into my component, can I really relay that the HTML container will exist before execution of this script?

Solution?

It'd be great if I could call JS functions directly from go-app, but I haven't found any way yet

[marosiak]

Oh, seems like https://go-app.dev/js answer my question, anyway will keep this issue opened for a bit, just in case anyone already integrated any charts lib - sadly it's hard to search for any libs related with go-app as it's extremally generic name

[mlctrez]

An example that may help. Your code above implemented using go-app.

package compo

import (
	"fmt"
	"github.com/maxence-charriere/go-app/v10/pkg/app"
)

var _ app.Mounter = (*Chart)(nil)

type Chart struct {
	app.Compo
	Width  int
	Height int
}

func (c *Chart) Render() app.UI {
	return app.Div().Styles(map[string]string{
		"width":  fmt.Sprintf("%dpx", c.Width),
		"height": fmt.Sprintf("%dpx", c.Height),
	})
}

func (c *Chart) OnMount(ctx app.Context) {
	window := app.Window()
	optionsText := `
		{"color":[
			"#5470c6","#91cc75","#fac858","#ee6666","#73c0de",
			"#3ba272","#fc8452","#9a60b4","#ea7ccc"
		],
		"legend":{},"series":[{"name":"Category A","type":"bar",
		"data":[
			{"value":6},{"value":208},{"value":260},{"value":271},
			{"value":176},{"value":103},{"value":23}],"label":{}}
		],
		"title":{"text":"Chart"},"toolbox":{},"tooltip":{},
		"xAxis":[{"data":["A","B","C","D","E","F","G"]}],"yAxis":[{}]}`
	eChart := window.Get("echarts").Call(
		"init", c.JSValue(), "white",
		map[string]interface{}{"renderer": "canvas"})
	eChart.Call("setOption", window.Get("JSON").Call("parse", optionsText))
}

ECharts was included in the handler.Scripts

	s.handler.Scripts = append(s.handler.Scripts, 
               "https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js")

[kidandcat]

I used go-echarts for a pet project.

I crafted a render function that tweaks the output of go-echarts and do some evil'sh JS eval, but the final interface was very clean:

Renderer:
https://github.com/kidandcat/golive/blob/main/frontend/renderer.go#L21

Usage:

package frontend

import (
	"github.com/go-echarts/go-echarts/v2/charts"
	"github.com/go-echarts/go-echarts/v2/opts"
	"github.com/maxence-charriere/go-app/v10/pkg/app"
)

type Goroutines struct {
	app.Compo
	chartComponent
	Xaxis []string
	Stats Stats
}

func (h *Goroutines) Render() app.UI {
	gauge := charts.NewGauge()
	gauge.SetGlobalOptions(
		charts.WithInitializationOpts(opts.Initialization{
			Theme:  "dark",
			Height: "250px",
			Width:  "250px",
		}),
		charts.WithLegendOpts(opts.Legend{
			Show: opts.Bool(false),
		}),
	)
	gauge.AddSeries("Goroutines", []opts.GaugeData{{Name: "Goroutines", Value: h.Stats.NumGoroutine}})
	return h.renderChart(gauge)
}

[marosiak]

Thank you guys, I've also developed solution which is primitive binding, https://github.com/marosiak/makerworld-analytics/blob/master/echarts_wasm/component.go
The code should be refactored a bit as it could be simpler, but for now it works for me

Thanks to everyone involved into helping me :)

Regards,
Maciej Rosiak