Skip to content

plugin-charts.mdx

Latest commit

 

History

History
284 lines (230 loc) · 6.03 KB

plugin-charts.mdx

File metadata and controls

284 lines (230 loc) · 6.03 KB
Raw
title Plugin Charts

import { InteractiveDemo } from '@/app/components/InteractiveDemo'; import { PluginLoader } from '@/app/components/PluginLoader';

Data visualization components powered by Recharts.

Installation

npm install @object-ui/plugin-charts

<PluginLoader plugins={['charts']}>

Interactive Examples

Usage

The plugin provides two chart APIs:

  1. Simple Bar Chart (bar-chart) - Simplified API for basic bar charts
  2. Advanced Charts (chart) - Full-featured API supporting multiple chart types (bar, line, area) and multiple data series

Basic Usage

// Import once in your app entry point
import '@object-ui/plugin-charts'

// Use in schemas
const schema = {
  type: 'bar-chart',
  data: [
    { name: 'Jan', value: 400 },
    { name: 'Feb', value: 300 },
    { name: 'Mar', value: 600 }
  ],
  dataKey: 'value',
  xAxisKey: 'name',
  height: 400
}

Features

  • Bar, line, and area charts
  • Responsive design
  • Customizable colors and styles
  • Lazy-loaded (~540 KB loads only when rendered)

Schema API

{
  type: 'bar-chart',
  data?: Array<Record<string, any>>,  // Chart data
  dataKey?: string,                    // Y-axis data key
  xAxisKey?: string,                   // X-axis label key
  height?: number,                     // Chart height
  color?: string,                      // Bar color
  className?: string                   // Tailwind classes
}

Properties

Property Type Default Description
data Array of objects [] Array of data objects to visualize
dataKey string 'value' Key in data objects for Y-axis values
xAxisKey string 'name' Key in data objects for X-axis labels
height number 400 Chart height in pixels
color string '#8884d8' Primary color for bars/lines
className string '' Additional Tailwind CSS classes

Chart Types

The plugin provides two different chart components:

Simple Bar Chart (bar-chart)

For basic single-series bar charts, use the simplified bar-chart type:

const schema = {
  type: 'bar-chart',
  data: [
    { month: 'Jan', sales: 400 },
    { month: 'Feb', sales: 300 },
    { month: 'Mar', sales: 600 }
  ],
  dataKey: 'sales',
  xAxisKey: 'month',
  color: '#3b82f6',
  height: 300
}

Advanced Charts (chart)

For multi-series charts or line/area charts, use the advanced chart type with the chartType property:

Bar Chart
const schema = {
  type: 'chart',
  chartType: 'bar',
  data: [
    { month: 'Jan', sales: 400, target: 350 },
    { month: 'Feb', sales: 300, target: 400 },
    { month: 'Mar', sales: 600, target: 550 }
  ],
  xAxisKey: 'month',
  series: [
    { dataKey: 'sales' },
    { dataKey: 'target' }
  ],
  config: {
    sales: { label: 'Sales', color: '#3b82f6' },
    target: { label: 'Target', color: '#10b981' }
  }
}
Line Chart
const schema = {
  type: 'chart',
  chartType: 'line',
  data: [
    { date: '2024-01', users: 120 },
    { date: '2024-02', users: 180 },
    { date: '2024-03', users: 250 }
  ],
  xAxisKey: 'date',
  series: [
    { dataKey: 'users' }
  ],
  config: {
    users: { label: 'Users', color: '#8884d8' }
  }
}
Area Chart
const schema = {
  type: 'chart',
  chartType: 'area',
  data: [
    { time: '9:00', value: 20 },
    { time: '10:00', value: 35 },
    { time: '11:00', value: 45 }
  ],
  xAxisKey: 'time',
  series: [
    { dataKey: 'value' }
  ],
  config: {
    value: { label: 'Value', color: '#10b981' }
  }
}

Examples

Revenue Dashboard

const revenueChart = {
  type: 'bar-chart',
  data: [
    { quarter: 'Q1 2024', revenue: 45000, target: 50000 },
    { quarter: 'Q2 2024', revenue: 52000, target: 50000 },
    { quarter: 'Q3 2024', revenue: 61000, target: 55000 },
    { quarter: 'Q4 2024', revenue: 58000, target: 60000 }
  ],
  dataKey: 'revenue',
  xAxisKey: 'quarter',
  height: 400,
  color: '#059669',
  className: 'rounded-lg shadow-md'
}

User Growth Chart

const growthChart = {
  type: 'chart',
  chartType: 'line',
  data: [
    { month: 'Jan', users: 1200, active: 980 },
    { month: 'Feb', users: 1450, active: 1150 },
    { month: 'Mar', users: 1680, active: 1380 },
    { month: 'Apr', users: 1920, active: 1620 }
  ],
  xAxisKey: 'month',
  series: [
    { dataKey: 'users' },
    { dataKey: 'active' }
  ],
  config: {
    users: { label: 'Total Users', color: '#8884d8' },
    active: { label: 'Active Users', color: '#82ca9d' }
  }
}

Bundle Size

The plugin uses lazy loading to optimize bundle size:

  • Initial load: ~0.2 KB (entry point)
  • Lazy chunk: ~541 KB minified (~136 KB gzipped)
  • Loads only when rendered

Without lazy loading, this would add 541 KB to your main bundle. With lazy loading, it's loaded only when charts are displayed.

Customization

Custom Colors

const schema = {
  type: 'bar-chart',
  data: salesData,
  color: '#f59e0b', // Amber color
  className: 'bg-white p-4 rounded-lg'
}

Responsive Height

const schema = {
  type: 'chart',
  chartType: 'line',
  data: metricsData,
  xAxisKey: 'date',
  series: [{ dataKey: 'value' }],
  config: {
    value: { label: 'Metrics', color: '#8884d8' }
  },
  className: 'h-64 sm:h-96 lg:h-[500px]'
}

TypeScript Support

import type { BarChartSchema } from '@object-ui/plugin-charts'

const chartSchema: BarChartSchema = {
  type: 'bar-chart',
  data: [
    { name: 'Product A', value: 400 },
    { name: 'Product B', value: 300 }
  ],
  dataKey: 'value',
  xAxisKey: 'name',
  height: 400
}

Related Documentation