관련링크

明けましておめでとうございます😇 2月の月刊WhaTapで皆さんにうかがいます。今月のWhaTapでは、WhaTap Labsのフロントエンド開発者の’サンウ’様に手伝ってもらったTopNチャートの開発過程と活用法を紹介したいと思います。 🙆🏼‍

今月はどのような内容が確認できますか？

• シリーズチャートの限界を克服したTopNチャート！

シリーズチャートの致命的な欠点?!

シリーズチャートは、モニタリング指標の時間帯別の推移の変化を表現するために最もよく使用される方法です。

チャート内で異なる性格を持つデータを線で区切って推移を比較する場合があります。しかし、描画すべき線の数が多い場合、線が重なる中で重要な推移変化を示す線を特定することが難しいという欠点もあります。

チャートの性質上、避けられない問題だと思って進めてしまうかもしれませんが、表示が無意味な線を描く過程で発生する資源の無駄は無視できませんでした。

問題発生

プロジェクトごとに数百台のエージェントをインストールし、使用している顧客が統合監視用にダッシュボードを構成していたときにホワイトアウトが発生しました。

ブラウザで膨大な量のデータを処理する過程でCPUを過度に占有し、タイムリーにデータ消去作業が行われず、メモリ不足とともにブラウザが機能を停止しました。

これまで時系列データを効率的に管理する方法やチャートレンダリング性能面で数多くの試行錯誤を経験してきたため、「これなら問題はないだろう。」という考えを持っていましたが、いざ問題が発生するとレンダリング効率を改善することだけで解決が難しいと思いました。

現象をもう少し覗いてみましたが、一つ以上の線を一度に描くことが求められました。フロントエンド開発者として、ブラウザに申し訳ありませんでした。

結局、この問題を解決するためにTopNシリーズチャートを考案することになりました。

TopNチャートは、線ごとに優先順位を付けて、上位の数行でチャートに表示する方法です。

'TopN' なら、通常、比較ソートのために単一の値だけを持つ瞬間データを利用するため、シリーズチャートで使用する時系列データと関連付けてチャートを構成できるとは思わなかったです。そんな中、キムソンジョCTOがチャートのアイデアと一緒にデータの移植方法を提案してくれました。

それで誕生された、TopNチャート

データの移植方法はどのように？

• TopNチャートで使用するデータは、内部的に**'MQL'**と呼ぶ質・疑問の形のメトリクス照会APIを利用します。チャート初期化のための最初のデータ照会時、そして更新が2分が経過した時点でチャートに描く線の優先順位を先に決めます。

画面表現はどのように？

• 最後の照会時点から最近のデータを更新する従来の時系列データ処理方式を維持する代わりに、ランク更新時点をチャートに表示してランク更新によるチャート変化がぎこちなく感じないようにしました。
• 一般シリーズチャートと区別される「上位」の概念に従って上部にランキングラベルを追加し、
• 視認性を強調するためにY軸を右に移動、最近の値をタグで表示しました。

既存のチャートとの比較

左：TopNシリーズチャート | 右：従来のシリーズチャート

優先順位は、過去30秒間の時系列データの平均値または最大値を計算してソートします。不規則な傾向の変化が頻繁に描画される線の数が多い場合、既存のシリーズチャートでは個々の線を識別することはできません。一方、TopNチャートは識別可能な形式で表現できます。特にCPUのように瞬間的に値が高く測定され、再び低下して分析に大きく意味のない線を選別する場合に便利です。その結果、改善されたパフォーマンスと分析をする観点からも有用なチャートが追加されたと思います。

最後に

TopNチャートは、ベータ版のWhaTap Flexボードを介してウィジェットの形で提供しています。今後、さまざまな種類のウィジェットとダッシュボードテンプレートを追加して、ユーザーフレンドリーなダッシュボードと分析サービスを提供することを目指して、現在開発中です。

より便利なモニタリングサービスを提供するために、お客様のフィードバックはいつも歓迎です！ もっと知りたい事や必要な機能で提案したい内容がある場合は、[email protected]までメールしてください。