portal-echarts-dashboards

Builds Apache ECharts dashboards in Nuxt with server-side Polars aggregation for million-point series.

Updated Jul 27, 2026
One-click install
npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-echarts-dashboards-arthurzizumbo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: portal-echarts-dashboards
Source: https://github.com/ArthurZizumbo/karisma-data/tree/main/.claude/skills/portal-echarts-dashboards
Command: npx skills add https://github.com/ArthurZizumbo/karisma-data --skill portal-echarts-dashboards-arthurzizumbo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires echarts, vue-echarts, polars.

What problem does it solve? Rendering large time-series datasets in a Nuxt dashboard causes slow initial loads and janky pan/zoom interactions. This Skill enforces a proven architecture: lazy-loaded vue-echarts components, server-side Polars aggregation, ECharts sampling, and SWR caching so dashboards stay fast even with one-million-point series. ## Core Features & Use Cases - Lazy chart loading: All charts use LazyVChart with modular echarts/core imports to keep them out of the initial bundle and improve Time to Interactive. - Million-point series: Server-side Polars group_by_dynamic aggregation combined with sampling: 'lttb' and large: true keeps pan/zoom fluid on huge datasets, with a documented 500K fallback if the performance gate fails. - SWR route rules and drill-down: routeRules provide instant perceived loads on executive dashboard routes, and chart interactions emit drill-down events into the Pinia workspace store shared with the chat. - Use Case: Build a liquidity time-series view where an analyst zooms into a date range on a 1M-point chart and the selection automatically filters the rest of the dashboard via the Pinia store. ## Quick Start Create a liquidity time-series dashboard chart using LazyVChart with server-side Polars aggregation and lttb sampling for a one-million-point series.

Frequently Asked Questions about portal-echarts-dashboards

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

FAQPage Schema
How do I render one million data points in ECharts without lag?▼

Aggregate data server-side with Polars group_by_dynamic so the endpoint returns bucketed points, then enable sampling: 'lttb' and large: true on the ECharts series. Never send raw rows to the client; request a target bucket and max_points from the aggregation endpoint.

How do I lazy-load vue-echarts in a Nuxt app?▼

Wrap charts in LazyVChart so they stay out of the initial bundle, and import only the needed modules from echarts/core such as LineChart, GridComponent, and CanvasRenderer. Never use import * as echarts, which defeats tree-shaking.

How do I add SWR caching to Nuxt dashboard routes?▼

Define routeRules in nuxt.config.ts with swr values per route, for example '/dashboard': { swr: 60 } for instant perceived loads with background revalidation. Use ssr: true instead for analyst views that need fresh data per filter change.

How do I connect ECharts click or zoom events to a Pinia store?▼

Listen to chart events like datazoom or bar clicks and call a store action such as workspace.applyDrillDown with the extracted dimension, for example a date range or product. This keeps dashboard and chat state synchronized through the shared Pinia store.

Why does my ECharts dashboard stutter during pan and zoom?▼

Stutter usually comes from deep reactivity on large point arrays or missing large-mode optimizations. Use Nuxt useFetch shallowRef defaults for series data, enable sampling and large mode, and measure frame drops with a requestAnimationFrame counter to verify the performance gate.

What is the fallback when a 1M-point ECharts series fails the performance gate?▼

The agreed degradation is 500K pre-aggregated points if pan/zoom over the full million-point series shows jank on team hardware. This must be an explicit team decision documented in the user story, not a silent change.