Your Guide to Building a Low-Code Dashboard

この投稿では、対処しようとしているニーズに合ったダッシュボードを設計するためのヒントと、ダッシュボードのデータを構築する方法について説明します。 また、外部のレポートダッシュボードと、それらが使用するデータを表示する方法についても触れます。

これらはすべてガイドラインであることに注意してください。 ダッシュボードには厳格なルールはありません。 アプリケーションにレポート・ダッシュボードが必要になる場合があります。 ダッシュボードに大量のデータが必要になる場合があります。 あなたは常に新しいアイデアや可能性にオープンである必要がありますが、必要に応じてプッシュバックすることも忘れないでください！

TL; DRバージョンが必要な場合は、以下のファイルをご参照ください。

Mendix – How To Dashboard quick guide!

ダッシュボードのタイプ

アプリケーションを開発しているとき、ダッシュボードが必要になる時期が来ます。最初に遭遇する可能性は、実用的なダッシュボードです。これは、ユーザーのランディングページとして使用するダッシュボードの種類です。

このタイプを使用して、管理者にその日のタスクと未解決の問題に関する警告を表示したり、顧客に最近の注文と気に入った新製品を表示したりできます。これらは、ユーザーがこれから行うことに関連するいくつかの情報をユーザーに表示するダッシュボードです。言い換えれば、現在のデータを反映し、彼らを次の行動に導くべきものです。

他の主要なタイプのダッシュボードは、レポートダッシュボードです。これらのダッシュボードは、大量のロールアップされたデータを処理することを目的としており、より広いスケールでパフォーマンスを分析するために使用されます。それは、特定の月にわたるチームのパフォーマンス、または1年にわたる会社全体のパフォーマンスである可能性があります。重要なのは、それがたくさんの情報であるということです。

これらの2つのタイプのうち、主に実用的なダッシュボードに関心があります。これらはダッシュボードの種類であり、Mendixアプリケーションに組み込む必要があるためです。レポートダッシュボードに触れて、データを公開する方法について説明しますが、レポートダッシュボードの設計は、ビジネスインテリジェンスの専門家に任せるのが最善の対策です。

実用的なローコードダッシュボードの設計

ダッシュボードを設計するときに事前に確立しておくとよいのは、データがカバーする期間です。 私があなたに与えることができる最善のアドバイスは、それを実際的に可能な限り短くすることです。 大規模なデータセットを集約する必要はありません。 通常、7日が適切です。 一般的には、1か月（30日）が上限です。

ダッシュボードを設計するときに従うべきいくつかの指針は次のとおりです。

• 少ないほど良い　–　ダッシュボードを過密にしないでください。ダッシュボード上のコンテンツはすべて、付加価値が付くものであるべきです。
• 1つの画面に収める　–　ダッシュボードのコンテンツは、ターゲットとするデバイスタイプの1つの画面に収まる必要があります。 ユーザーがスクロールして物事を確認する必要がある場合は、追加しすぎている可能性があります。 （これはモバイルダッシュボードでは少し重要度は落ちます）
• 短い読み込み時間　–　データを集約するため、読み込みに時間がかかるダッシュボードを簡単に作成できます。 （すべてのアプリページと同様に）読み込み時間をできるだけ短くするようにしてください。
• 優先順位　–　ほとんどのユーザーは上から下、左から右に読むので、情報を配置する順序を検討する必要があります。 たとえば、KPIは通常、最初の行に表示されます。これは、ユーザーが最初に検討する必要があるためです。 チャートは一般的に下に向かっている可能性があります。これは、有益ではありますが、通常は実用的ではないためです。 聴衆が右から左に読む場合は、レイアウトを反転することを検討してください。

実用的なダッシュボードを設計する際に考慮したいいくつかの重要な質問があります。

1. パフォーマンスが低い/高い、強調する必要のある重要な領域はありますか？ （KPI）
2. 短期間に継続的な進捗を確認する必要がある分野はありますか？ （チャート）
3. 視聴者は次に何をする必要がありますか？ （タスクリスト）

主要業績評価指標（KPI）の使用方法

ダッシュボードを見るとおそらく最初に目にするものの1つは、KPI（主要業績評価指標）です。 これを表す簡単な方法は、特定のメトリックがうまく機能しているか悪いかを示すために強調表示される大きな数値として表示することです。 ベースライン値を表示すると便利な場合もあります…

したがって、ここでは、一目で、この期間の合計注文数が緑色で表示されていることがわかります。つまり、平均を上回っており、心配する必要はありません。 ただし、遅延配信の値は赤で表示されているため、懸念事項です。 この値をクリック可能にして、遅延配信のリストに移動できるようにすることは、実用的なコンテンツにとって理想的です。

さまざまな種類のグラフとそれらをいつ使用するか

グラフのないダッシュボードとは何ですか？ それらは楽しく、ユーザーがデータをすぐに画像化するのに役立ちます。 ただし、グラフは悪い意味で非常に使いやすいです。 ダッシュボードに追加するときは、慎重に使用し、シンプルに保つようにしてください。 ここにいくつかの基本的なガイドラインがあります。

棒グラフ、折れ線グラフ、縦棒グラフに関するヒント

棒グラフ、折れ線グラフ、および縦棒グラフを使用して、データセットを比較します。 時間の経過とともに比較する場合は、日付順に並べてください。時間の経過がない場合は、適切な順序で表示してみてください。
これはアルファベット順または最大値から最小値まで可能です。

あまり多くのデータグループを表示しないでください。 折れ線グラフで5つ以下の系列、8つ以下の要素、または棒グラフまたは縦棒グラフに制限するようにしてください。

パイ型、ドーナツ型、ヒートマップ型グラフを使用しない場合

これらはしばしばひどく使用され、可能であれば一般的に避けるべきです。 ただし、それらを使用する必要がある場合は、あまり多くの値を比較しないようにし、データセットの値が非常に類似している場合は使用しないでください。

3Dグラフ、スタイルを変更したグラフ、ゲージを使用すべきでない理由

チャートをシンプルに保ちます。 3D効果や過剰なスタイルのグラフは、グラフの実際の目的から注意をそらす可能性があります。 重要な情報を最もよく強調するために、単純な色と形式を使用することを目指します。 また、ゲージは以前は非常に人気がありましたが、物理的なディスプレイをデジタルで再現することはしばしば悪い考えです。 たとえば、ゲージは通常、上記のようにKPIとしてより適切に表されます。

タスクリストには何を含める必要がありますか？

ユーザーにプロンプトを表示する良い方法は、タスクリストを使用することです。 これは、必ずしも明示的にタスクと呼ばれるものを意味するわけではありません。 タスクリストは、投稿が必要な注文または回答が必要な顧客のフィードバックで構成できます。 これは、ユーザーが完了する必要のあるアクションであり、近い将来にアクションが実行される予定であるか、期限が過ぎている必要があります。 リストは、可能であれば、画面上のアイテムを10個以下に短くし、最悪の場合、サブセットのみを前面に表示するようにページングする必要があります。

各エントリには、最も関連性の高い情報のみを表示し、表示しすぎないようにする必要があります。 アイテムをクリック可能にすることができるため、ユーザーは必要に応じてドリルダウンして詳細情報を見つけることができます。

ユーザーが実行する必要のあるタスクの種類が複数ある場合は、各タブに対するタスク数を表示するバッジ付きのタブコンテナーの使用を検討できます。 この形式は、使いすぎると簡単に乱雑に見える可能性があることに注意してください。 3つ以上のタブを使用しないようにしてください。

データを集約する方法

特にKPIを使用してダッシュボードを構築する場合、データの一部を集約（ロールアップ、カウント、合計）する必要があります。 これを行うにはいくつかの方法がありますが、他の方法よりもローコードがいくつかあります。

1. microflowデータソースを使用して必要なデータをロールアップします
2. 事前にロールアップされたデータのテーブルを作成して維持する
3. オブジェクトクエリ言語（OQL）を使用して、データをロールアップするための複雑なクエリを作成します

どちらを使用するかは、使用するデータの量、期間間の比較を行うかどうか、必要なビット数またはロールアップされたデータによって異なります。

マイクロフローデータソースを使用してデータを集約する

最も頻繁に使用するツールは、マイクロフローデータソースです。 これは、データソースがマイクロフローに設定されたページ上の単純なデータビューであり、ロールアップされたデータを含む非永続エンティティを返します。

マイクロフロー自体には、さまざまな方法でデータを集約するためのいくつかのデータ取得およびリストアクションがあります。 次に、非永続エンティティのインスタンスを作成して返します。 まったく単純です。

注意すべき点は、取得アクションとリストアクションを使用すると、Mendixはクエリを自動的に最適化して、取得を実行し、データをグループ化してから、結果を集計することです。 他のエンティティデータは返されません（クエリの後半で取得アクションを使用しない限り）。

より多くのKPI値を取得し始めたり、異なる期間を比較したり、より大きなデータセットを使用したりすると、効率が低下する可能性があるため、次のオプションに進むことを検討する必要があります。

データを事前に集計する時期と方法

データをその場で集約することが問題になる場合、通常は長いクエリが原因で、別の方法は事前に集約されたデータを保存することです。これは、集約された情報を保持するためのエンティティと、それが表す期間の日付スタンプを作成し、それをダッシュ​​ボードのソースとして使用することを意味します。

データは、マイクロフローを使用して前のオプションと同じ方法で集計される可能性がありますが、通常はスケジュールされたタスクとして実行されます。タスクの頻度は、集計するデータの期間によって異なりますが、通常は、前日のデータをロールアップするための夜間のルーチンになります（ただし、1週間または1か月になることもあります）。

事前集計のもう1つのオプションは、変更が加えられたときにインクリメントすることです。これは、create microflowの一部としての追加の更新によるものか、オブジェクトのコミット時にトリガーされるイベントである可能性があります。これもまた、期待するデータの量に依存します。トランザクション数が多い場合は、集計テーブルを常に更新するよりも、スケジュールする方がよいでしょう。リアルタイムデータを探している場合でも、このオプションを使用する必要があります。

オブジェクトクエリ言語（OQL）をいつどのように使用するか

最後の選択は、オブジェクトクエリ言語を使用することです。 これにより、データベースに対して直接実行される独自のクエリを作成できます。 複数のデータグループ間など、複数の集計を返す必要がある場合に最適です。 この選択は、真にローコードのアプローチを探している人向けではなく、SQLの予備知識を持っている人に合わせて調整されています。

これを使用するには、最初にマーケットプレイスからOQLウィジェットをインストールする必要があります。次に、ドキュメントサイトのOQLガイドを確認することをお勧めします。

この選択の中核は、クエリとなる文字列を作成し、[Execute OQL Statement]アクションを使用して、返されたデータを非永続エンティティにキャプチャすることです。

OQLの使用は、簡単に行う必要のあるタスクではありません。 プラットフォームでは最適化されないため、これが特定の問題に取り組むための最良の方法であるかどうかを検討し、クエリの効率を再確認してください。

Mendixでチャートを作成する方法

Mendixダッシュボードにグラフを含める場合は、グラフウィジェットから始めるのが最適です。 すぐに使用できるサポートがあります。

• 縦棒グラフ
• 棒グラフ
• バブルチャート
• ヒートマップ
• 円グラフ
• 折れ線グラフ
• 時系列

ドキュメントエリアには完全なチャートウィジェットガイドがありますが、ここで簡単に紹介します。

まず、追加するグラフの種類を選択し、ウィジェットをページにドラッグします。縦棒グラフを使用します。

注：古いバージョンのチャートウィジェットでは、ウィジェットは、データソースがオブジェクトを返す必要があるデータビューまたはリスト内にある必要がありました。 どんなオブジェクトでもかまいません。 これは、最新バージョンには当てはまりません。

次にウィジェットをダブルクリックすると、[Chart Properties]タブが表示されます。 このタブには[Series]セクションがあり、ここで最初のデータセットを追加できます。

Seriesリストの[New]ボタンを押すと、データの取得元を尋ねるポップアップが表示されます。 シンプルに保ち、動的なデータソースではなく静的なデータソース（つまり、カスタマイズ可能なデータポイントではなく事前設定されたデータポイント）を用意し、データベースからデータを取得します。

このシリーズの開始点は、グラフの作成に使用しているエンティティです。この場合は、注文エンティティであるとしましょう。 次に、XPath制約を使用して、今月これまでに行われた注文に制限できます。

[OrderPlacedDate > '[%BeginOfCurrentMonth%]'] 

次に、[Static Series]タブに移動し、シリーズに名前を付けます。たとえば、「1日あたりの注文数」と言ってから、[Data Points]タブに移動します。 ここでは、X軸を「OrderPlacedDate」に設定し、Y軸は「PricePaid」などの任意の値にすることができます。これは、下部にある[AggregationType]オプションを使用して次のように設定するためです。 カウント。 これは、データが日ごとに自動的にグループ化され、配置された総数が表示されることを意味します。

それが完了したら、ポップアップを閉じて[Chart Properties]ウィンドウに戻り、軸ラベルを「Date placed」や「Order count」などに設定できます。 それでおしまい！ すべて完了。 これで、次のような基本的なグラフが作成されます…

ルックアンドフィールをカスタマイズし、さまざまなソースとダイナミックレンジを使用してデータを読み込む方法を変更するためにできることは他にもたくさんあります。 これらの機能の詳細については、ドキュメントを確認してください。何よりも、実験してください。

グラフウィジェットはPlotlyライブラリを使用して構築されており、そこにアクセスして詳細を確認し、ライブラリの例からインスピレーションを得ることができます。 本当に自由になり、完全にオーダーメイドのチャートを使用したい場合は、AnyChartウィジェットを提供します。

AnyChartウィジェットは、より複雑なウィジェットであり、JSON形式でデータを提供することによって最もよく使用されます。 JSON構造ファイルとエクスポートマッピングを使用します。 Plotlyのほぼすべての種類のグラフを使用でき、スタイルを完全にカスタマイズできます。 ただし、これはローコードアプローチではなく、開発の経験がある人が試すのが最善であることに注意してください。

外部レポートオプションを実装する方法

つまり、実用的なダッシュボードを作成しましたが、それでも誰かがより高いレベルのレポートを望んでいます。 Mendixでそれをどのように処理しますか？

最も簡単なアプローチは、データをODataソースとして公開することです。 これは、Power BI、Grafana、Excelなどのほとんどのレポートプラットフォームで使用できます。 消費されたら、データをモデル化し、選択したプラットフォームのレポートツールを使用して提示できます。

ODataを公開すると、ソースがDataHubカタログで利用できるようになることにも言及する価値があります。 これにより、他のMendixアプリケーションですばやく簡単に使用できます。 Power BIやGrafanaなどのSaaSオファリングを使用する場合、Power BI EmbededやiFrameコンポーネントなどのウィジェットを使用して、必要に応じてこれらの高度なレポートをMendixに埋め込むこともできます。

長期的に見ると、ODataをデータレイクまたはウェアハウスに消費するのに役立ちます。これを使用してデータソースを事前にコンパイルおよび結合し、ビジネスでの消費を容易にすることができます。 これは主に、組織のレポート戦略またはデジタルトランスフォーメーション計画に帰着します。

このブログ投稿からの重要なポイント

ダッシュボードを作成する方法について、今すぐ理解しておく必要があります。 現在のユーザーのニーズに基づいて実用的なページを作成し、最も重要な情報のみを事前に提示します。 注意が必要なことと次に何をすべきかを指導します。

これらはすべてガイドラインであり、ユーザーのニーズにある程度柔軟に対応できる必要があることを忘れないでください。 「ある程度」と言うのは、Excelをダッシュボードとして再作成するなど、ユーザーが不合理なことを要求することがあり、いつプッシュバックするかを知る必要があるためです。

この投稿の要約された視覚的なコピーが必要な場合は、Mendix – How To Dashboardクイックガイドをダウンロードしてください。

最後に、何よりも実験してください！ Mendixを使用しているのは、何かをすばやく簡単に作成して試してみて、うまくいかない場合は破棄することです。 私たちは自分の過ちから最も多くを学ぶので、大胆になって新しいことに挑戦してください。