Function generateMultiPanelDashboardSection

generateMultiPanelDashboardSection(
opts: MultiPanelDashboardOptions,
): TemplateSection

Generate an embeddable multi-panel AI-driven dashboard section.

Returns a TemplateSection containing a responsive grid of panels, each of which may contain a Chart.js chart, a CSS-only heat map, or a CSS-only gauge dial, plus AI-generated interpretation text and confidence indicators. Cross-panel AI insights are rendered at the bottom.

Accessibility: every chart canvas carries role="img" + aria-label; heat maps use role="table" with row/column headers; gauges use role="figure" + aria-label; confidence bars use role="meter".

Parameters

opts: MultiPanelDashboardOptions

Returns TemplateSection

Example

const section = generateMultiPanelDashboardSection({
  data: {
    title: 'Coalition Stability Monitor',
    summary: 'AI-driven analysis of current coalition dynamics.',
    layout: 'grid-2x2',
    panels: [
      {
        id: 'alignment',
        title: 'Political Alignment',
        chart: { id: 'alignment-chart', type: 'radar', title: 'Party Positions', labels: ['Economy', 'Security'], datasets: [{ label: 'SD', data: [80, 70] }] },
        interpretation: 'SD leads on security issues.',
        confidenceLevel: 78,
      },
    ],
    aiInsights: [{ id: 'ins-1', text: 'Coalition majority at risk.', relevance: 'high' }],
  },
  lang: 'en',
});
articleData.sections = [...(articleData.sections ?? []), section];

Function generateMultiPanelDashboardSection

Parameters

Returns TemplateSection

Example

Settings