Analytics Visualization Plugin #

Build beautiful, consistent analytics charts and dashboards using Highcharts with a curated design system.

Installation #

agent install analytics-visualization

Features #

• Curated Color Palette: Nord-inspired colors optimized for data visualization
• Semantic Color Mappings: Pre-defined colors for complexity, severity, and categorical data
• Chart Components: Ready-to-use patterns for pie, bar, area, and heatmap charts
• Shared Styling: Consistent typography, tooltips, and legends across all charts
• Data Utilities: Filtering, formatting, and transformation helpers

Quick Start #

1. Install Dependencies #

npm install highcharts highcharts-react-official

2. Copy Design System Constants #

Copy the design system from templates/utils/chart-constants.ts to your project:

import { COLORS, CHART_STYLES, COMMON_CHART_OPTIONS } from "@/lib/chart-constants";

3. Use Chart Components #

Reference the chart templates in templates/components/ or use the skill to generate custom charts.

Color Palette #

┌─────────────────────────────────────────────────────────────┐
│  GREEN        │  BLUE         │  CYAN         │  NEUTRAL    │
├───────────────┼───────────────┼───────────────┼─────────────┤
│  ■ #005C42    │  ■ #055180    │  ■ #1E5563    │  ■ fg var   │
│  ■ #1F8A65    │  ■ #3C7CAB    │  ■ #4C7F8C    │  ■ bg var   │
│  ■ #96C2AC    │               │  ■ #A2BBC2    │             │
├───────────────┴───────────────┴───────────────┴─────────────┤
│  YELLOW       │  ORANGE       │  MAGENTA                    │
├───────────────┼───────────────┼─────────────────────────────┤
│  ■ #A16900    │  ■ #A33900    │  ■ #89045E                  │
│               │  ■ #DB704B    │  ■ #D06BA6                  │
│               │  ■ #FCD4C7    │                             │
└───────────────┴───────────────┴─────────────────────────────┘

Chart Types #

Chart Type	Best For	Template
Donut Pie	Category distribution, composition	PieChart.tsx
Horizontal Bar	Rankings, long category labels	BarChart.tsx
Stacked Area	Time series with composition	StackedAreaChart.tsx
Dual-Axis Column	Volume + percentage over time	DualAxisChart.tsx
Comparison Bar	A/B testing, group comparisons	ComparisonChart.tsx
Contribution Heatmap	Activity patterns over time	HeatmapChart.tsx

Components #

Component	Description
Rules	Highcharts best practices and patterns
Agents	Chart builder agent for generating visualizations
Skills	Full analytics visualization skill guide
Templates	Ready-to-use React/TypeScript components

Directory Structure #

analytics-visualization/
├── .cursor/
│   └── plugin.json           # Plugin manifest
├── rules/
│   ├── highcharts-patterns.mdc
│   └── chart-accessibility.mdc
├── agents/
│   └── chart-builder.md
├── skills/
│   └── analytics-visualization/
│       └── SKILL.md
├── templates/
│   ├── components/           # React chart components
│   │   ├── PieChart.tsx
│   │   ├── BarChart.tsx
│   │   ├── StackedAreaChart.tsx
│   │   └── ...
│   └── utils/                # Shared utilities
│       ├── chart-constants.ts
│       └── data-utils.ts
├── hooks/
│   └── hooks.json
├── mcp.json
├── LICENSE
├── CHANGELOG.md
└── README.md

Usage Examples #

Basic Pie Chart #

import { CategoryPieChart } from "@/components/charts/PieChart";

<CategoryPieChart
  data={[
    { category: "write_code", count: 450 },
    { category: "ask_question", count: 280 },
    { category: "plan", count: 170 },
  ]}
  title="User Intent Distribution"
/>

Time Series Chart #

import { DailyCategoriesChart } from "@/components/charts/StackedAreaChart";

<DailyCategoriesChart
  data={dailyData}
  title="Daily Activity by Category"
  yAxisTitle="Conversations"
/>

Comparison Chart #

import { ComparisonBarChart } from "@/components/charts/ComparisonChart";

<ComparisonBarChart
  dataA={controlGroup}
  dataB={testGroup}
  labelA="Control"
  labelB="Test"
  title="A/B Test Results"
/>

Semantic Color Mappings #

Complexity (Low → High) #

COMPLEXITY_COLORS = {
  trivial: greenPrimary,     // ■ Easy
  simple: greenSecondary,    // ■ 
  moderate: yellowPrimary,   // ■ Medium
  complex: orangeSecondary,  // ■ 
  very_complex: orangePrimary // ■ Hard
}

Intent Categories #

INTENT_COLORS = {
  Plan: bluePrimary,          // ■ Planning
  Ask: cyanPrimary,           // ■ Questions
  "Task Automation": yellowPrimary, // ■ Automation
  "Write Code": greenPrimary  // ■ Coding
}

Best Practices #

1. Always use transparent backgrounds - Charts inherit page/card backgrounds
2. Limit pie chart categories - 7 or fewer for readability
3. Filter outliers - Remove items under 1% for LLM classification data
4. Use semantic colors - Match colors to data meaning (complexity, severity)
5. Handle empty states - Always show meaningful empty state UI
6. Disable animation in production - Use animation: false for performance

Related Skills #

• analytics-visualization - Full chart building guide

License #

MIT