メインコンテンツまでスキップ

コンテキストメニューによるインサイト

このガイドでは、RevealView ダッシュボードのコンテキストメニューに AI を活用したインサイトオプションを追加する方法を説明します。ユーザーはダッシュボードや個々のビジュアライゼーションを右クリックして、要約、分析、予測を生成できるようになります。

インサイトメニュー項目の追加

onMenuOpening イベントを使用して、AI インサイトをトリガーするカスタムメニュー項目を追加します:

const client = RevealSdkClient.getInstance();

revealView.onMenuOpening = function (visualization, args) {
// Dashboard-level insights (right-click on dashboard background)
if (args.menuLocation === $.ig.RVMenuLocation.Dashboard) {
args.menuItems.push(new $.ig.RVMenuItem("Summary", null, async () => {
const insight = await client.ai.insights.get({
dashboard: revealView.dashboard,
type: 'summary',
});
displayInsight(insight.explanation);
}));

args.menuItems.push(new $.ig.RVMenuItem("Analysis", null, async () => {
const insight = await client.ai.insights.get({
dashboard: revealView.dashboard,
type: 'analysis',
});
displayInsight(insight.explanation);
}));

args.menuItems.push(new $.ig.RVMenuItem("Forecast", null, async () => {
const insight = await client.ai.insights.get({
dashboard: revealView.dashboard,
type: 'forecast',
});
displayInsight(insight.explanation);
}));
}

// Visualization-level insights (right-click on a specific visualization)
if (args.menuLocation === $.ig.RVMenuLocation.Visualization) {
args.menuItems.push(new $.ig.RVMenuItem("Analyze This", null, async () => {
const insight = await client.ai.insights.get({
dashboard: revealView.dashboard,
visualizationId: visualization.id,
type: 'analysis',
});
displayInsight(insight.explanation);
}));
}
};

ストリーミングサポートの追加

よりインタラクティブな体験のために、ストリーミングを使用してインサイトを生成しながら表示します:

function createInsightMenuItem(label, dashboard, insightType, visualizationId = null) {
return new $.ig.RVMenuItem(label, null, async () => {
const options = {
dashboard: dashboard,
type: insightType,
stream: true,
};

if (visualizationId) {
options.visualizationId = visualizationId;
}

let buffer = '';
const stream = await client.ai.insights.get(options);

stream.on('progress', (message) => {
showProgressIndicator(message);
});

stream.on('text', (content) => {
buffer += content;
displayInsight(buffer);
});

stream.on('error', (error) => {
showError(error);
});

await stream.finalResponse();
hideProgressIndicator();
});
}

// Use the helper in onMenuOpening
revealView.onMenuOpening = function (visualization, args) {
if (args.menuLocation === $.ig.RVMenuLocation.Dashboard) {
args.menuItems.push(createInsightMenuItem("Summary", revealView.dashboard, 'summary'));
args.menuItems.push(createInsightMenuItem("Analysis", revealView.dashboard, 'analysis'));
args.menuItems.push(createInsightMenuItem("Forecast", revealView.dashboard, 'forecast'));
}

if (args.menuLocation === $.ig.RVMenuLocation.Visualization) {
args.menuItems.push(createInsightMenuItem("Summary", revealView.dashboard, 'summary', visualization.id));
args.menuItems.push(createInsightMenuItem("Analysis", revealView.dashboard, 'analysis', visualization.id));
}
};