vibes-plug 2.14.1 → 3.9.0

package/skills/data-visualization-expert/SKILL.md

@@ -1,154 +1,155 @@
----
-name: data-visualization-expert
-description: "Expert guide for data visualization, charts, and dashboards using D3.js, Recharts, Chart.js, Nivo, and Tremor / Panduan ahli visualisasi data, chart, dan dashboard menggunakan D3.js, Recharts, Chart.js, Nivo, dan Tremor."
-author: "Roedy Rustam"
----
-
-# Data Visualization Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-- **`senior-frontend`**: React component architecture for chart components.
-- **`data-telemetry-expert`**: Analytics data pipelines feeding visualizations.
-- **`state-management-expert`**: Managing chart state, filters, and drill-down navigation.
-- **`performance-web-vitals`**: Optimizing chart rendering performance with large datasets.
-- **`sse-websocket-streaming-expert`**: Real-time data feeds for live dashboards.
-
-### Description
-Expert guide for building production-quality data visualizations and analytics dashboards. Covers D3.js v7 (low-level SVG/Canvas), Recharts (React-native charts), Chart.js 4 (lightweight canvas), Nivo (D3-powered React components), Tremor (dashboard components), and Apache ECharts. Includes responsive charts, real-time updates, accessibility, large dataset optimization, and dashboard layout patterns.
-
-### Trigger Conditions
-- Building analytics dashboards or admin panels with charts.
-- Creating data visualizations (line, bar, pie, scatter, heatmap, treemap).
-- Implementing real-time updating charts or live data feeds.
-- Choosing a charting library for React, Vue, or vanilla JS.
-- Optimizing chart performance with large datasets (10K+ data points).
-
----
-
-### Library Selection Guide
-
-| Library | Framework | Rendering | Customization | Learning Curve | Best For |
-|---------|-----------|-----------|---------------|----------------|----------|
-| D3.js v7 | Agnostic | SVG/Canvas | ★★★★★ | High | Custom visualizations |
-| Recharts | React | SVG | ★★★★ | Low | Standard React charts |
-| Nivo | React | SVG/Canvas | ★★★★★ | Medium | Beautiful, animated charts |
-| Tremor | React | SVG (Recharts) | ★★★ | Very Low | Dashboards, KPI cards |
-| Chart.js 4 | Agnostic | Canvas | ★★★ | Low | Lightweight, simple charts |
-| ECharts | Agnostic | Canvas/SVG | ★★★★★ | Medium | Complex, interactive, large data |
-
-**Recommendation:** Use **Tremor** for rapid dashboard prototyping. Use **Recharts** for standard React charts. Use **D3.js** only for highly custom visualizations.
-
-### Core Patterns
-
-#### 1. Recharts (React Standard)
-
-```tsx
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-
-function RevenueChart({ data }: { data: { date: string; revenue: number }[] }) {
-  return (
-    <ResponsiveContainer width="100%" height={400}>
-      <LineChart data={data}>
-        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
-        <XAxis dataKey="date" stroke="#9CA3AF" />
-        <YAxis stroke="#9CA3AF" tickFormatter={(v) => `$${(v / 1000).toFixed(0)}K`} />
-        <Tooltip
-          contentStyle={{ backgroundColor: '#1F2937', border: 'none', borderRadius: 8 }}
-          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Revenue']}
-        />
-        <Line type="monotone" dataKey="revenue" stroke="#8B5CF6" strokeWidth={2} dot={false} />
-      </LineChart>
-    </ResponsiveContainer>
-  );
-}
-```
-
-#### 2. Tremor Dashboard Components
-
-```tsx
-import { Card, Metric, Text, AreaChart, BarList, Grid } from '@tremor/react';
-
-function AnalyticsDashboard({ metrics, chartData, topPages }) {
-  return (
-    <Grid numItemsMd={2} numItemsLg={3} className="gap-6">
-      <Card>
-        <Text>Total Revenue</Text>
-        <Metric>$845,230</Metric>
-      </Card>
-      <Card>
-        <Text>Revenue Over Time</Text>
-        <AreaChart
-          data={chartData}
-          index="month"
-          categories={['Revenue', 'Expenses']}
-          colors={['violet', 'rose']}
-          valueFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}
-        />
-      </Card>
-      <Card>
-        <Text>Top Pages</Text>
-        <BarList data={topPages} className="mt-4" />
-      </Card>
-    </Grid>
-  );
-}
-```
-
-#### 3. Real-Time Chart Updates
-
-```tsx
-import { useEffect, useState } from 'react';
-
-function LiveMetricsChart() {
-  const [data, setData] = useState<{ time: string; value: number }[]>([]);
-
-  useEffect(() => {
-    const es = new EventSource('/api/metrics/stream');
-    es.onmessage = (event) => {
-      const point = JSON.parse(event.data);
-      setData((prev) => [...prev.slice(-60), point]); // Keep last 60 points
-    };
-    return () => es.close();
-  }, []);
-
-  return <LineChart data={data} /* ... */ />;
-}
-```
-
-#### 4. Large Dataset Optimization
-- Use **Canvas** rendering (ECharts, Chart.js) for >5K data points.
-- Implement **data aggregation** on the server (downsample to 500-1000 points for display).
-- Use **windowed rendering** — only render visible data points.
-- Apply **debounced zoom/pan** to prevent excessive re-renders.
-
-### Dashboard Layout Patterns
-- **KPI Row → Charts → Tables**: Top metrics cards, then charts, then detail tables.
-- **Filter Sidebar**: Global date range, category, and dimension filters.
-- **Drill-down**: Click chart segment → navigate to detail view.
-- **Export**: CSV/PNG/PDF export for all charts.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-- **`senior-frontend`**: Arsitektur komponen React untuk komponen chart.
-- **`data-telemetry-expert`**: Pipeline data analitik yang mengisi visualisasi.
-- **`state-management-expert`**: Mengelola state chart, filter, dan navigasi drill-down.
-
-### Deskripsi
-Panduan ahli untuk membangun visualisasi data dan dashboard analitik berkualitas produksi. Mencakup D3.js v7, Recharts, Chart.js 4, Nivo, Tremor, dan Apache ECharts. Termasuk chart responsif, update real-time, aksesibilitas, optimasi dataset besar, dan pola layout dashboard.
-
-### Kondisi Pemicu
-- Membangun dashboard analitik atau panel admin dengan chart.
-- Membuat visualisasi data (line, bar, pie, scatter, heatmap, treemap).
-- Mengimplementasikan chart yang update real-time atau feed data langsung.
-- Memilih library charting untuk React, Vue, atau vanilla JS.
+---
+name: data-visualization-expert
+description: "Expert guide for data visualization, charts, and dashboards using D3.js, Recharts, Chart.js, Nivo, and Tremor / Panduan ahli visualisasi data, chart, dan dashboard menggunakan D3.js, Recharts, Chart.js, Nivo, dan Tremor."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Data Visualization Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`senior-frontend`**: React component architecture for chart components.
+- **`data-telemetry-expert`**: Analytics data pipelines feeding visualizations.
+- **`state-management-expert`**: Managing chart state, filters, and drill-down navigation.
+- **`performance-web-vitals`**: Optimizing chart rendering performance with large datasets.
+- **`sse-websocket-streaming-expert`**: Real-time data feeds for live dashboards.
+
+### Description
+Expert guide for building production-quality data visualizations and analytics dashboards. Covers D3.js v7 (low-level SVG/Canvas), Recharts (React-native charts), Chart.js 4 (lightweight canvas), Nivo (D3-powered React components), Tremor (dashboard components), and Apache ECharts. Includes responsive charts, real-time updates, accessibility, large dataset optimization, and dashboard layout patterns.
+
+### Trigger Conditions
+- Building analytics dashboards or admin panels with charts.
+- Creating data visualizations (line, bar, pie, scatter, heatmap, treemap).
+- Implementing real-time updating charts or live data feeds.
+- Choosing a charting library for React, Vue, or vanilla JS.
+- Optimizing chart performance with large datasets (10K+ data points).
+
+---
+
+### Library Selection Guide
+
+| Library | Framework | Rendering | Customization | Learning Curve | Best For |
+|---------|-----------|-----------|---------------|----------------|----------|
+| D3.js v7 | Agnostic | SVG/Canvas | ★★★★★ | High | Custom visualizations |
+| Recharts | React | SVG | ★★★★ | Low | Standard React charts |
+| Nivo | React | SVG/Canvas | ★★★★★ | Medium | Beautiful, animated charts |
+| Tremor | React | SVG (Recharts) | ★★★ | Very Low | Dashboards, KPI cards |
+| Chart.js 4 | Agnostic | Canvas | ★★★ | Low | Lightweight, simple charts |
+| ECharts | Agnostic | Canvas/SVG | ★★★★★ | Medium | Complex, interactive, large data |
+
+**Recommendation:** Use **Tremor** for rapid dashboard prototyping. Use **Recharts** for standard React charts. Use **D3.js** only for highly custom visualizations.
+
+### Core Patterns
+
+#### 1. Recharts (React Standard)
+
+```tsx
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+
+function RevenueChart({ data }: { data: { date: string; revenue: number }[] }) {
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <LineChart data={data}>
+        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+        <XAxis dataKey="date" stroke="#9CA3AF" />
+        <YAxis stroke="#9CA3AF" tickFormatter={(v) => `$${(v / 1000).toFixed(0)}K`} />
+        <Tooltip
+          contentStyle={{ backgroundColor: '#1F2937', border: 'none', borderRadius: 8 }}
+          formatter={(value: number) => [`$${value.toLocaleString()}`, 'Revenue']}
+        />
+        <Line type="monotone" dataKey="revenue" stroke="#8B5CF6" strokeWidth={2} dot={false} />
+      </LineChart>
+    </ResponsiveContainer>
+  );
+}
+```
+
+#### 2. Tremor Dashboard Components
+
+```tsx
+import { Card, Metric, Text, AreaChart, BarList, Grid } from '@tremor/react';
+
+function AnalyticsDashboard({ metrics, chartData, topPages }) {
+  return (
+    <Grid numItemsMd={2} numItemsLg={3} className="gap-6">
+      <Card>
+        <Text>Total Revenue</Text>
+        <Metric>$845,230</Metric>
+      </Card>
+      <Card>
+        <Text>Revenue Over Time</Text>
+        <AreaChart
+          data={chartData}
+          index="month"
+          categories={['Revenue', 'Expenses']}
+          colors={['violet', 'rose']}
+          valueFormatter={(v) => `$${(v / 1000).toFixed(0)}K`}
+        />
+      </Card>
+      <Card>
+        <Text>Top Pages</Text>
+        <BarList data={topPages} className="mt-4" />
+      </Card>
+    </Grid>
+  );
+}
+```
+
+#### 3. Real-Time Chart Updates
+
+```tsx
+import { useEffect, useState } from 'react';
+
+function LiveMetricsChart() {
+  const [data, setData] = useState<{ time: string; value: number }[]>([]);
+
+  useEffect(() => {
+    const es = new EventSource('/api/metrics/stream');
+    es.onmessage = (event) => {
+      const point = JSON.parse(event.data);
+      setData((prev) => [...prev.slice(-60), point]); // Keep last 60 points
+    };
+    return () => es.close();
+  }, []);
+
+  return <LineChart data={data} /* ... */ />;
+}
+```
+
+#### 4. Large Dataset Optimization
+- Use **Canvas** rendering (ECharts, Chart.js) for >5K data points.
+- Implement **data aggregation** on the server (downsample to 500-1000 points for display).
+- Use **windowed rendering** — only render visible data points.
+- Apply **debounced zoom/pan** to prevent excessive re-renders.
+
+### Dashboard Layout Patterns
+- **KPI Row → Charts → Tables**: Top metrics cards, then charts, then detail tables.
+- **Filter Sidebar**: Global date range, category, and dimension filters.
+- **Drill-down**: Click chart segment → navigate to detail view.
+- **Export**: CSV/PNG/PDF export for all charts.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`senior-frontend`**: Arsitektur komponen React untuk komponen chart.
+- **`data-telemetry-expert`**: Pipeline data analitik yang mengisi visualisasi.
+- **`state-management-expert`**: Mengelola state chart, filter, dan navigasi drill-down.
+
+### Deskripsi
+Panduan ahli untuk membangun visualisasi data dan dashboard analitik berkualitas produksi. Mencakup D3.js v7, Recharts, Chart.js 4, Nivo, Tremor, dan Apache ECharts. Termasuk chart responsif, update real-time, aksesibilitas, optimasi dataset besar, dan pola layout dashboard.
+
+### Kondisi Pemicu
+- Membangun dashboard analitik atau panel admin dengan chart.
+- Membuat visualisasi data (line, bar, pie, scatter, heatmap, treemap).
+- Mengimplementasikan chart yang update real-time atau feed data langsung.
+- Memilih library charting untuk React, Vue, atau vanilla JS.