SVG Dashboard

SVG Dashboard Generator

Renders SVG data visualization dashboards — either from a skill's svg-widgets.yaml manifest (structured dashboards) or freeform from ad-hoc investigation data in context.

Mode Detection

Before rendering, determine which mode applies:

Decision flow:

1. Is there an svg-widgets.yaml for the current skill?
   → YES + user said "dashboard" or "SVG from the report" → Manifest Mode
   → NO  → Freeform Mode

2. Does the user have structured data in context (query results, tables, metrics)?
   → YES → Freeform Mode (use data shape to pick widgets)
   → NO  → Ask user what data to visualize

Manifest Mode — Structured Dashboard

Used when a skill provides an svg-widgets.yaml manifest (e.g., mcp-usage-monitoring, sentinel-ingestion-report).

Execution

Step 1:  Read the calling skill's svg-widgets.yaml (widget manifest)
Step 2:  Read this file's Rendering Rules below (component library + quality standards)
Step 3:  Read the completed report file (data source)
         — If same chat: report data is already in context
         — If new chat: read the file path provided by user or find latest in the skill's reports/ subfolder
Step 4:  Map manifest fields → report data using data_sources.field_mapping_notes
Step 5:  Render SVG → save to the same directory as the report: {report_basename}_dashboard.svg

Data Extraction (Manifest Mode)

• Read the report markdown or scratchpad JSON.
• Match fields from the manifest's data_sources.field_mapping_notes to locate values.
• For arrays (top_tables, anomalies, etc.), extract the full dataset and render up to max_items.
• For single values (KPIs), extract the number and apply the specified unit.
• If a field is not found in the report data, render the widget with "N/A" in muted text — never omit the widget.

Freeform Mode — Adaptive Visualization

Used when no manifest exists or the user wants an ad-hoc visualization from investigation data already in context.

Execution

Step 1:  Identify the data in context (query results, investigation findings, report sections, inline tables)
Step 2:  Analyze data shape — what dimensions, metrics, categories, and time series are present?
Step 3:  Read this file's Rendering Rules below (component library + quality standards)
Step 4:  Select appropriate widget types from the Component Library (see Data Shape Guide below)
Step 5:  Design a layout: title banner → KPI summary → detail charts/tables → optional assessment
Step 6:  Render SVG → save to temp/{descriptive_name}_dashboard.svg or user-specified path

Data Shape → Widget Selection Guide

Layout Heuristics (Freeform)

• Row 1: Always start with a title-banner (data source, date range, scope)
• Row 2: KPI cards for key metrics (3-6 cards, one row)
• Rows 3+: Charts and tables arranged by importance — most critical findings first
• Final row: Assessment banner or recommendation cards if actionable findings exist
• Canvas size: Default 1400×900, increase height proportionally for more rows (~100-200px per row)
• Use the default SharePoint Dark palette (defined below) unless the data context suggests otherwise

Token Budget & Data Limits (Freeform Mode)

Why this matters: SVG is verbose — every <rect>, <text>, and <path> consumes output tokens. Without limits, freeform dashboards with rich investigation data routinely exceed the model's output token budget, producing truncated/broken SVGs. Manifest-mode dashboards avoid this because the YAML max_items and fixed row count act as natural constraints.

Hard Limits — Always Enforced:

Per-Widget Data Limits:

Data Triage Strategy:

When the data in context exceeds these limits, apply this priority filter:

1. Summarize first — Extract the 3-5 most important KPIs before plotting details
2. Top-N everything — For ranked data, show top 10 max; group the rest as "Other"
3. Aggregate time series — If >30 daily points, resample to weekly; if >30 weekly, resample to monthly
4. One chart per insight — Don't render the same data as both a bar chart AND a table; pick the one that communicates better
5. Cut, don't shrink — Rather than making unreadable tiny widgets, remove the lowest-priority widget entirely

If the data is too rich for 6 rows / 12 widgets: Tell the user what was included vs omitted, and suggest they request a second dashboard for the remaining data or provide an svg-widgets.yaml manifest for full control.

Creative Freedom (Freeform)

In freeform mode, you have latitude to:

• Decide which widget types best represent the data
• Choose how many rows and how to arrange widgets (within the limits above)
• Add contextual annotations on charts (peak markers, threshold lines)
• Combine multiple data points into composite widgets
• Adjust canvas dimensions to fit the content (up to 1400×1200 max)

You are still bound by the Quality Standards and Color & Typography rules below — these ensure visual consistency regardless of mode.

Rendering Rules (Both Modes)

Canvas & Layout

• Output a single <svg> element with xmlns="http://www.w3.org/2000/svg" and the width/height from the manifest (or chosen dimensions in freeform mode).
• Fill the background with canvas.background (manifest) or #1b1a19 (freeform default).
• Apply canvas.padding (manifest) or 40px (freeform default) on all sides. Usable width = width - 2 * padding.
• Render rows top-to-bottom with canvas.row_gap (manifest) or 24px (freeform default) spacing between rows.
• Within each row, widgets are laid out left-to-right. If a widget specifies width_pct, it gets that percentage of usable width. Otherwise, widgets share remaining space equally.
• Use canvas.col_gap (manifest) or 20px (freeform default) for spacing between widgets in the same row.

Color & Typography

• Use palette.* values from the manifest. In freeform mode, use the default palette below.
• 🔴 GLOBAL TEXT FILL RULE: SVG defaults fill to black — which is invisible on dark backgrounds. Every <text> element MUST have an explicit fill attribute. Set fill="{palette.text_primary}" on the root <svg> or a top-level <g> so all text inherits white by default. Never rely on SVG's implicit black fill.
• All text uses canvas.font_family (manifest) or Segoe UI, sans-serif (freeform default).
• KPI values: bold, 28-36px, colored with palette.primary or widget's highlight_color.
• KPI labels: 11-12px, palette.text_secondary.
• Widget titles: bold, 14-16px, palette.text_primary.
• Axis labels and table headers: 10-12px, palette.text_secondary.
• Data labels and value labels: 10-11px, palette.text_primary. Never place value labels inside bars — always position them after/outside the bar.
• The default palette uses a cool dark theme consistent across all skill manifests. Skills may override with their own palette in svg-widgets.yaml.

Default Palette (Freeform Mode)

palette:
  background: "#0d1117"
  card_bg: "#161b22"
  primary: "#409AE1"       # Blue — KPI highlights
  secondary: "#b4a0ff"     # Purple — secondary charts
  success: "#40C5AF"       # Teal-green — healthy metrics
  warning: "#ff8c00"       # Orange — moderate risk
  danger: "#EF6950"        # Red — critical findings
  text_primary: "#e6edf3"
  text_secondary: "#b2b2b2"
  accent: "#FFC83D"        # Yellow — warnings, anomalies
  grid_line: "#30363d"

Widget Type Reference — Component Library

title-banner

Full-width banner. Render the title large and centered horizontally on the canvas, subtitle fields centered below on the same line separated by " · ". Optional accent underline. Use text-anchor="middle" with x at canvas midpoint. If the manifest specifies title_align: left, left-align instead — but the default is always center.

kpi-card

Rounded rectangle (rx="12"). Show the value large and centered, label below in small text, optional unit suffix. Color the value with highlight_color if specified, otherwise palette.primary. No actual icon rendering needed — use a colored dot or small indicator instead.

delta-kpi-card

Extends kpi-card with a period-over-period change indicator. Render the primary value the same as kpi-card. Below (or beside) the value, show a delta line: an arrow (▲ or ▼) followed by the percentage or absolute change. Color the delta with palette.success for favorable changes and palette.danger for unfavorable changes. If invert_color is true, reverse the color logic (e.g., for metrics where "down" is good, like error rate). Show the comparison period label in palette.text_secondary at 10px (e.g., "vs prior 7d"). If no delta data is available, render as a standard kpi-card with no delta line.

score-card

Rounded rectangle card (rx="12") with card_bg background. Render the numeric score value large and centered (bold, 42-48px), colored by whichever range it falls into (from the widget's ranges array). Below the number, show the rating label (e.g., "CONCERNING") in 14px bold, same color as the number. Above both, render the widget title in 14-16px bold, palette.text_primary. Add a subtle /100 suffix after the score in smaller muted text (18px, palette.text_secondary). Keep it visually clean — no gauge arcs, needles, or scale markers.

stacked-bar-chart

Vertical or horizontal bars where each bar is subdivided into colored segments representing categories (e.g., severity levels, sources, status). Include a legend mapping segment colors to category names. If orientation: horizontal, render left-to-right stacked rows with labels on the left. If orientation: vertical (default), render bottom-to-top stacked columns with labels on the x-axis. Show segment values on hover via <title> elements. If show_totals is true, display the total above each bar. Use segment_colors from the manifest or assign from palette automatically.

horizontal-bar-chart

Horizontal bars sorted by value descending. Layout per row (left to right): label → optional inline badges → bar (proportional to max value) → value label → optional extra column (rightmost). Value labels MUST be positioned outside (after) the bar, never inside it — use fill="{palette.text_primary}" (white on dark themes). Append value_suffix if specified. If show_rule_count: right, render the rule count as the rightmost column, right-aligned. If a value is 0, render it in palette.danger. If show_tier_badge is true, render a small colored badge after each label using colors from the YAML segments or badge_colors definitions. If bar_color_by: severity is set, color bars by severity level. If show_error_overlay is true, render a red overlay segment proportional to failure count. If highlight_sensitive is true, mark flagged items with a warning indicator.