TWLogAIAN:Wails v2+ SvelteにApache echartsを組み込んでグラフ表示できた

昨日からログ分析ツールの開発を始めました。まずはWails v2

The Wails Project | Wails

でテンプレートにSvelte

Svelte • サイバネティクスで強化されたwebアプリ

を使った環境で他のパッケージが動作するかテストしています。
使いたいパッケージを全部組み込んでしまうと問題が起こった時に調べるのが難しくなってしまうので１つづつ組み込んで簡単なサンプルを動かしています。
最初はグラフを表示するためのライブラリApache echarts

Apache ECharts

です。最初に連携するnpmパッケージ

echarts-for-svelte

を見つけて、これは楽勝かと思ったのですが、残念ながら使えませんでした。よく見るとのパッケージは２年前からメンテナスされていないようです。対応しているechartsのバージョンもv3.0 & v4.0です。今はv5.2です。
便利そうですが、これを使うのは諦めました。
結局 echartsだけを組み込む方法にしました。その方法は、

wails v2でプロジェクトを作成

テンプレートにsvelteを選んで作成します。gitも使います。

＄wails init -t svelte -n echarts -g
....
$cd echarts

npmで追加パッケージをインストール

echarts本体とエラー対策のために@rollup/plugin-replaceをインストールします。

＄cd frontend
$npm i echarts
$npm i -D @rollup/plugin-replace

rollup.config.jsにエラー対策のための行を追加

import replace from '@rollup/plugin-replace';
...

plugins: [
...
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'development' )
    }),

のような部分です。ファイル添付しておきます。

rollup.config.js

2072 Bytes

ファイルダウンロードについて

ダウンロード

やっていることは、echartsのソースコードの中に

process.env.NODE_ENV

という部分がでてきたら書き換えるということだと思います。そうしないとprocessが未定義というエラーでechartsが使えないためです。

App.svelteをグラフ表示のサンプルに書き換える

<!-- App.svelte -->
<script>
  import { onMount } from "svelte";
  // Import the main module of echarts.
  import * as echarts from "echarts";
  // Render line chart and components.
  onMount(async () => {
    echarts.init(document.getElementById("main")).setOption({
      title: { text: "Test Chart" },
      backgroundColor: "#eee",
      tooltip: {},
      xAxis: {},
      yAxis: {},
      series: [
        {
          type: "line",
          smooth: true,
          data: [
            [12, 5],
            [24, 20],
            [36, 36],
            [48, 10],
            [60, 10],
            [72, 20],
          ],
        },
      ],
    });
  });

  console.log(echarts);
</script>

<div id="main" />

<style>
  #main {
    width: 600px;
    height: 400px;
    margin: 5% auto;
  }
</style>

のように書き換えます。ポイントはonMountの中でechartsを初期化するとことです。そうしないと表示されません。画面の幅と高さが０になるためだと思います。

wails devで試してみる

＄wails dev

で起動すれば、

Wails + Svelte + Apache echarts

のように表示されます。