analytics-dashboarder

Aggregate SQL data with Drizzle and visualize it using Recharts.

Updated Mar 4, 2024
One-click install
npx skills add https://github.com/juprem/sandbox-react --skill analytics-dashboarder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: analytics-dashboarder
Source: https://github.com/juprem/sandbox-react/tree/main/.gemini/skills/analytics-dashboarder
Command: npx skills add https://github.com/juprem/sandbox-react --skill analytics-dashboarder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill provides a pragmatic blueprint to build data-driven dashboards by coordinating server-side data aggregation with Drizzle and client-side visualization with Recharts, reducing boilerplate and boosting consistency across analytics tasks.

Core Features & Use Cases

  • Data Aggregation: Server-side SQL querying with Drizzle for time-series and categorical data to power performant dashboards.
  • Visualization: Recharts-based charts with responsive layouts, including Line, Bar, and Pie components.
  • Workflow & State: Filters managed via TanStack Router search params and cached with TanStack Query for repeatable analytics sessions.
  • Use Case: Build a sales dashboard showing daily revenue, category distribution, and trend analysis with shareable filters.

Quick Start

Create a dashboard page that uses Drizzle for data, renders a responsive Recharts chart, and exposes date-range and category filters via TanStack Router.

Frequently Asked Questions about analytics-dashboarder

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a React analytics dashboard with Drizzle and Recharts?▼

To build a React analytics dashboard with Drizzle and Recharts, you aggregate server-side SQL data with Drizzle and render responsive Line, Bar, and Pie charts on the client using Recharts. This blueprint coordinates server-side data aggregation with client-side visualization to reduce boilerplate.

What's the best way to manage dashboard filters using TanStack Router?▼

The best way to manage dashboard filters using TanStack Router is by storing date-range and category parameters as URL search params. This approach enables shareable analytics sessions and allows TanStack Query to cache the filtered data effectively.

Can I use Drizzle ORM for time-series data aggregation in a business analytics dashboard?▼

Yes, you can use Drizzle ORM for time-series data aggregation in a business analytics dashboard. Drizzle handles server-side SQL querying to compute daily revenue, category distributions, and trend analysis before the data reaches the client.

Does this dashboard approach work with NeonDB for database indexing?▼

Yes, this dashboard approach works with NeonDB by integrating NeonDB indexes to optimize server-side SQL queries. Drizzle ORM coordinates with these indexes to ensure performant data aggregation for large datasets.

How do I cache aggregated dataset queries with TanStack Query?▼

You cache aggregated dataset queries with TanStack Query by wrapping your Drizzle server-side data fetching logic in query hooks. This caches the results on the client, ensuring repeatable analytics sessions and faster dashboard loads.