埋め込みチャートは、以下を追加してカスタマイズできます。
事前フィルター。 Charts 埋め込み SDK で
preFilterオプションを使用するか、さまざまなクエリ パラメータを iFrame URL に追加します。フィルター。 Charts 埋め込み SDK で
filterオプションを使用するか、さまざまなクエリ パラメータを iFrame URL に追加します。
使用は任意ですが、同じダッシュボードで事前フィルターとフィルターの両方を使用できます。 指定すると、チャート ビューの後、ダッシュボードのクエリとフィルターの前に常に事前フィルターが実行されます。
注意
ダッシュボードからチャートを埋め込むには、データソースで埋め込みオプションを設定する必要があります。 手順については、以下を参照してください。
フィルタ可能なフィールドの指定
チャート作成者は、埋め込みアプリケーションコードによって設定される、またはチャートビューアによって追加される事前フィルターとフィルターに含めることができるフィールドを指定します。 チャート作成者は、特定のフィールドのみを事前フィルタリングまたはフィルタリングすることを許可することで、データへのアクセスを制限できます。 デフォルトでは、フィールドは許可されていません。つまり、少なくとも 1 つのフィールドを明示的に許可するまで、チャートを事前フィルタリングまたはフィルタリングすることはできません。
事前フィルターとフィルターのフィルタ可能なフィールドを定義するには、次の手順に従います。
フィルタ可能なフィールドを定義するチャートを含むダッシュボードに移動します。
目的のグラフで、次をクリックします。 [] ボタンをクリックし、ドロップダウンから [ Embed Chart ] を選択します。
Allowed filter fieldsセクションでは、 ドロップダウンを使用して、チャートユーザーがチャート内のフィルター データを使用できるフィールドを選択します。 ドロップダウンにリストされていないフィールドを追加するために、手動で値を入力することもできます。
注意
このオプションは、 非認証または認証済みの埋め込みアクセスがすでに有効になっている場合にのみ表示されます。
チャート ビューアがデータを事前フィルタリングまたはフィルタリングできるフィールドを指定するには、次の方法があります。
ドロップダウンを使用してフィールドを選択します。
ドロップダウンにリストされていないフィールドを追加するには、値を手動で入力します。
Allow all fields in the data source used in this chart を選択します。
必要なフィールドをすべて選択したら、ドロップダウンの下の [ Save ] をクリックします。
チャートビューアとチャートをレンダリングするアプリケーションは、指定されたフィールドに基づいて事前フィルターとフィルターを使用して、元のチャートデータのサブセットを表示できるようになりました。 許可されているフィルター フィールドリストに含まれていないフィールドにフィルターを使用しようとすると、Atlas Charts はエラーを返します。
埋め込みドキュメントを持つフィールドのフィルタ可能なサブフィールドの指定
値が埋め込みドキュメントであるフィールドをAllowed filter fieldsリストに追加する場合は、許可する個々のサブフィールドも指定する必要があります。
例
次の文書をご覧ください。
{ "name": "Alice", "favorites" : { "color": "green", "animal": "turtle", "season": "autumn" } }
許可されたフィールドのリストにfavoritesフィールドのみを追加した場合、 favoritesのサブフィールドをフィルタリングする権限はビューアに付与されません。 代わりに、 favorites.color 、 favorites.animal 、またはfavorites.seasonを指定することで、1 つ以上のサブフィールドを個別にリストに追加できます。
iFrame に埋め込まれたChartsのデータの事前フィルタリング
多数のコレクションを持つ埋め込みチャートとダッシュボードには事前フィルターを使用します。 プレフィルターは埋め込みチャートのパイプラインの早い段階で実行され、次の操作を実行できます。
データを早期にフィルタリングして、クエリの実行時間を短縮します。
集計を含むチャートクエリのクエリ実行前にフィルターを適用します。
プレフィルターは フィルターと完全に一致し、同じ構文を使用します。 唯一の違いは、チャート ビューの後、チャート クエリとフィルターが開始される前に が実行されることです。 パイプライン セグメントの順序の詳細については、「集計パイプライン 」を参照してください。
preFilterクエリ パラメータを使用して、iFrame に埋め込まれたグラフのデータをフィルタリングします。
フィルタで使用されるフィールドが許可されているフィルタ可能なフィールドのリストに含まれている場合は、 クエリ パラメータとしてMQLドキュメントを指定できます。preFilter
フィルター前の例
次の例では、チャート ビュー、クエリ バーのクエリ、フィルター、事前フィルターがどのように連携するかについて説明しています。
次のシナリオを検討してみましょう。
Chartsビューには次の機能があります。
[ { $project: { accommodates: 1, "bedrooms": 1, "address.country": 1 } } ] クエリ バーには次のものが含まれます。
[ { $match: { accommodates: { $gte: 3 } } }, { $project: { address: 0 } } ] 埋め込みチャートの フィルター には、次のものが含まれます。
{ "bedrooms": { $lte: 3 } } 埋め込みチャートの 事前フィルター には次のものが含まれます。
{ "address.country": "Australia" }
前の例では、チャートのクエリの実行が開始される前に、事前フィルターが適用され、オーストラリアのアパートのみが検索されています。 その後、チャートのクエリが実行され、3 人を超えるするには、すべてのアパートメントが識別されます。
iFrame に埋め込まれた Atlas Charts のデータのフィルタリング
filterクエリ パラメータを使用して、指定されたMQLフィルターに一致するデータのみを iFrame に埋め込まれたチャートに表示します。
クエリ パラメータは、 チャートと チャートの両方で使用できます。filterUnauthenticatedVerified Signatureフィルタリングの動作は、各認証設定によって異なります。
認証されていないチャートの場合、チャート作成者は、埋め込みアプリケーションコードによって設定されるフィルターまたはチャートビューによって追加されるフィルターに含めることができるフィールドを指定します。フィルタ可能なフィールドを指定する方法については、「 フィルタ可能なフィールドの指定 」を参照してください。
検証済み署名を必要とするチャートでは、すべてのドキュメント フィールドをフィルタリングできますが、サーバー側のコードでフィルターを生成し、署名されたペイロードの一部としてフィルターを含める必要があります。
フィルター構文
UnauthenticatedチャートとVerified Signatureチャートのデータをフィルタリングする方法の例については、適切なタブを選択してください。
フィルタで使用されるフィールドが許可されているフィルタ可能なフィールドのリストに含まれている場合は、 クエリ パラメータとしてMQLドキュメントを指定できます。filter
フィルターは$match クエリで使用される形式と一致し、次のいずれかである必要があります。
トップ レベル クエリ
例
{ "quantity": { $gte: 20 } }
注意
フィルター パラメーターの特殊文字を URL エンコードする必要があります。
例
次の iFrame src URL では、 imdb.ratingが8以上のドキュメントのみが表示されるチャートがレンダリングされます。
https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts? id=93584ddb-1115-4a12-afd9-5129e47bbb0d& filter={"imdb.rating":%20{$gte:%208}}& autoRefresh=60
URL では、 {"imdb.rating":%20{$gte:%208}}のエンコードされたfilterパラメータが使用されます。 デコードすると、このフィルターは次のようになります。
{"imdb.rating": {$gte: 8}}
filterクエリ パラメータとして MQL ドキュメントを指定します。
$match次の例に示すように、フィルターは クエリで使用される形式と一致する必要があります。
例
{ "quantity": { $gte: 20 } }
例
{ $or: [ { quantity: { $lt: 20 } }, { price: 10 } ] }
検証済み署名でフィルターを使用する場合、 MQLクエリには、サーバー側コードが署名を計算する前にURLエンコードする必要がある文字が含まれます。Charts が署名を検証すると、 JavaScript encodeURIComponent 関数を使用してフィルターを再度URLエンコードします。フィルターをエンコードするには、同じエンコードアルゴリズムを使用する必要があります。
重要
フィルターには、 +や未加工のスペースではなく、 %20としてスペースをエンコードする必要があります。
さまざまなサーバー側プログラミング言語を使用してMQLフィルターを正しくエンコードする方法については、 Githubでの Atlas Charts 埋め込み例 を参照してください。
例
次の iFrame src URL では、 imdb.ratingが8以上のドキュメントのみが表示されるチャートがレンダリングされます。
https://charts.mongodb.com/charts-atlasproject1-piocy/embed/charts? id=93584ddb-1115-4a12-afd9-5129e47bbb0d& timestamp=1564156636& expires-in=300& filter=%7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7D& autoRefresh=60& signature=8e0d92b33934c928f6c6974e2f0102ace77f56d851cb0d33893e84c359ab1043
URL では、 %7B%22imdb.rating%22%3A%20%7B%24gte%3A%208%7D%7Dのエンコードされたfilterパラメータが使用されます。 デコードすると、このフィルターは次のようになります。
{"imdb.rating": {$gte: 8}}
SDK に埋め込まれたChartsのデータの事前フィルタリング
オプションを使用して埋め込みチャートに preFilter を追加できます。事前フィルタリングにより、チャート作成者は、チャートビューの後、チャートクエリの実行とチャートのフィルターの前にフィルターを実行できます。preFilter
Embed Chartモーダルで、事前フィルターに含めるフィールドを指定する必要があります。 Embed Chartモーダルには、フィルタリングを許可するフィールドのドロップダウン メニューが含まれています。
次の例では、 preFilterオプションを使用してオーストラリア内のドキュメントのみを表します。
createChart({ baseUrl: '<your-base-url>', chartId: '<your-chart-id>', width: 500, height: 500, preFilter: { "address.country": "Australia" } })
SDK に埋め込まれた Atlas Charts のデータをフィルタリング
filterオプションを使用して埋め込みチャートにフィルターを追加できます。フィルタリングにより、チャート作成者は指定されたMQLフィルターに一致する埋め込みチャート内のデータのみを表示できます。
Embed Chartモーダルで、フィルターに含めるフィールドを指定する必要があります。 Embed Chartモーダルには、フィルタリングを許可するフィールドのドロップダウン メニューが含まれています。
次の では、 filterオプションを使用して、 totalフィールドが100より大きいドキュメントのみを表します。
createChart({ baseUrl: '<your-base-url>', chartId: '<your-chart-id>', width: 500, height: 500, filter: { "total": { "$gt": 100 } } })
ユーザー固有のフィルターを挿入する
Authenticatedアクセスを必要とするグラフを埋め込む場合、 Injected function設定を使用して、グラフを表示する各ユーザーに固有の MongoDB フィルター ドキュメントを挿入できます。 この関数はcontext.token経由で埋め込み認証プロバイダのトークンにアクセスし、トークンに基づいてチャート データをフィルタリングできます。
このフィルターにより、埋め込みチャートのユーザーは自分のデータのみが表示されるようになります。これは、機密情報を含むチャートを埋め込む場合に便利です。
各ユーザーに固有のフィルターを適用するには、 Embed ChartダイアログのAuthenticatedタブで、 Injected functionの設定をOnに設定します。 関数を指定し、 Saveをクリックします。
例
次のフィルター関数は、ドキュメントのownerIdフィールドが埋め込み認証プロバイダのトークンのsubフィールドの値と一致するデータのみをレンダリングします。
function getFilter(context) { return { ownerId: context.token.sub }; }