Can I persist dashboard layouts to a database?

Absolutely. The skill provides patterns for saving configuration objects to a backend API or local storage via the onSave and onConfigChange handlers.

What types of visualizations are supported?

The dashboard supports various chart types including bar charts, line charts, KPI numbers, and data tables, all defined via JSON configuration.

Does the dashboard support drag-and-drop editing?

Yes, by setting the 'editable' prop to true, users can resize and reposition portlets within the responsive 12-column grid.

What components are required for a Drizzle Cube dashboard?

You need the CubeProvider for the API context and the AnalyticsDashboard component to host your portlets and grid layout.

Is the dashboard mobile-friendly?

Yes, it uses a responsive grid system that automatically adjusts column counts across five breakpoints ranging from large monitors to mobile phones.

Drizzle Cube Dashboard

Name: Drizzle Cube Dashboard
Author: cliftonc

bycliftonc

0•

Analytics & Monitoring

Builds interactive, responsive analytics dashboards using Drizzle Cube React components and customizable grid layouts.

The Drizzle Cube Dashboard skill empowers developers to rapidly construct sophisticated analytics interfaces by leveraging the drizzle-cube/client library. It provides comprehensive guidance on implementing the CubeProvider for data connectivity, configuring the AnalyticsDashboard for responsive grid positioning, and defining various portlets such as charts, KPIs, and data tables. Whether you need to build a read-only reporting tool or an interactive, editable dashboard with drag-and-drop capabilities and persistent configuration, this skill offers the implementation patterns and best practices required to integrate professional-grade business intelligence directly into React applications.

Key Features

01Pre-configured portlets for charts, KPIs, and data tables

02Switchable editable and read-only modes for different user roles

03Configurable color palettes and visual display settings

040 GitHub stars

05Responsive 12-column grid layout with drag-and-drop support

06Seamless integration with CubeProvider for API and token management

Use Cases

01Building executive-level KPI dashboards with real-time data

02Creating internal administrative panels for tracking business metrics

03Developing interactive reporting tools with customizable user layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cliftonc/drizzle-cube-skills dashboard

For use in Claude.ai and ChatGPT

Download Skill