masc-echarts

masc-echarts lets you use go-echarts charts directly inside masc and Thunder apps without iframes or manual JavaScript hosting. The library embeds the ECharts runtime, injects it in a CSP-friendly way, and returns masc-compatible components that mount/adapt cleanly in browsers and LWC components.

Features

• One-line integration: wrap any go-echarts chart via mascecharts.FromCharter(chart)
• Embedded assets: ships echarts.min.js inside the WebAssembly bundle; no static resources to upload
• CSP-safe loader: works in Lightning’s strict CSP

Installation

go get github.com/octoberswimmer/masc-echarts

During development you might point at local masc/thunder checkouts:

replace github.com/octoberswimmer/masc => ../masc
replace github.com/octoberswimmer/thunder => ../thunder

Quick Start

bar := charts.NewBar()
bar.SetGlobalOptions(
    charts.WithTitleOpts(opts.Title{Title: "Sales"}),
    charts.WithInitializationOpts(opts.Initialization{Width: "640px", Height: "360px"}),
)
bar.SetXAxis([]string{"Mon", "Tue", "Wed"})
bar.AddSeries("Volume", []opts.BarData{{Value: 132}, {Value: 201}, {Value: 98}})

component := mascecharts.FromCharter(bar)
component.SetClassName("dashboard-chart")

Return component from your masc Render function or include it in an elem.Div.

Reusable Stacked Bar Component

For common stacked visualisations you can use the bundled helper instead of building the chart manually. Pass labels, series data, and copy strings via a plain struct:

chart, err := components.StackedBarChart(components.StackedBarChartProps{
	XAxisLabels: []string{"Q1", "Q2", "Q3", "Q4"},
	SeriesOrder: []string{"Bookings", "Pipeline"},
	SeriesValues: map[string][]float64{
		"Bookings": {420, 510, 480, 590},
		"Pipeline": {180, 220, 260, 310},
	},
	Totals:       []float64{600, 730, 740, 900},
	Title:        "Quarterly Revenue Outlook",
	PageTitle:    "Revenue Dashboard",
	YAxisLabel:   "Projected Revenue",
	TotalLabel:   "Total",
})
if err != nil {
	return components.Alert("Unable to render chart")
}

return chart

The helper sets sensible defaults (colours, tooltip, label formatter) and returns a ready-to-render masc component. Totals are added as a scatter overlay so the "Total" badge remains visible even when legend entries are toggled.

Thunder Deployment Example

1. (Optional) Preview locally during development: thunder serve ./example/thunderapp
2. Deploy the WASM bundle and LWC in one step: thunder deploy ./example/thunderapp
3. Drop the published mascEcharts component onto a Lightning page

See example/thunderapp for full code and LWC snippets.

Local Development

thunder serve ./example/thunderapp   # runs Thunder demo
masc serve ./example/pilot           # runs plain masc demo

Limitations & Roadmap

• Only ECharts core is embedded; add-ons (themes, maps, wordcloud) can be vendored by extending internal/assets and embeddedScripts
• Charts are rendered once per mount; dynamic data updates can be handled by re-rendering or diffing options in future versions
• Contributions welcome: feel free to open issues for additional asset needs or Thunder features

License

MIT