見出し画像

TWLogAIAN:検索条件の画面から戻るとグラフが消える問題で悩む

今朝は5時から開発開始です。昨日ログの検索ができるようなりました。かなり楽しくなってきたのでログの検索条件を細かく設定できる画面を作りはじめました。

検索条件のボタン

<条件>ボタンをクリックした時に表示する画面です。
とりあえず最大件数だけ設定できる画面

検索条件画面(最大件数だけ)

を作って操作感を試してみました。<適用>か<キャンセル>をクリックして元の画面に戻ると

グラフが消えた

グラフが消えていました。グラフを再描画する必要がありますが、戻った瞬間に再描画してもだめでした。画面の他の部分が描画された後にグラフを再描画する必要があるようです。この問題の解決に1時間以上悩んで見つけた答えは

を使うことです。

  const handleDone = (e) => {
    page = "";
    updateChart();
  };

  const updateChart = async () => {
    await tick();
    makeLogCountChart("chart");
    updateLogCountChart(result.Logs);
  };

のような処理で再描画できました。また一つSvelet+echartsの技を習得できました。
今朝は、ここで時間切れです。

明日に続く


開発のための諸経費(機材、Appleの開発者、サーバー運用)に利用します。 ソフトウェアのマニュアルをnoteの記事で提供しています。 サポートによりnoteの運営にも貢献できるのでよろしくお願います。