@spteck/fluentui-react-charts 1.0.4 → 1.0.6

package/README.md

@@ -409,6 +409,261 @@ const metricsData = [
 
 *Interactive chart components with Fluent UI design system
 
+## 📊 Dashboard Component
+
+The Dashboard component provides a sophisticated grid-based layout for displaying multiple charts with drag & drop reordering and resizable grid spanning.
+
+### Features
+
+- **Grid-based Layout**: Responsive grid system with automatic column calculation
+- **Drag & Drop**: Reorder charts by dragging and dropping
+- **Grid Spanning**: Charts can span multiple columns and rows
+- **Zoom Controls**: Interactive zoom controls for resizing chart containers
+- **Responsive**: Automatically adapts to container width
+- **Theme Integration**: Full Fluent UI theme support
+
+### Basic Usage
+
+```tsx
+import React from 'react';
+import { Dashboard } from '@spteck/fluentui-react-charts';
+import { webLightTheme } from '@fluentui/react-components';
+
+// Define your chart containers
+const chartContainers = [
+  {
+    id: '1',
+    cardTitle: 'Monthly Sales',
+    chart: {
+      id: '1',
+      title: 'Sales Performance',
+      type: 'line',
+      data: [{ 
+        label: 'Sales', 
+        data: [
+          { name: 'Jan', value: 10000 },
+          { name: 'Feb', value: 15000 },
+          { name: 'Mar', value: 12000 },
+          { name: 'Apr', value: 18000 },
+        ]
+      }],
+    },
+    defaultSpan: { spanCols: 2, spanRows: 1 },
+  },
+  {
+    id: '2',
+    cardTitle: 'Revenue Distribution',
+    chart: {
+      id: '2',
+      title: 'Q2 Revenue',
+      type: 'pie',
+      data: [{ 
+        label: 'Revenue', 
+        data: [
+          { name: 'Product A', value: 35000 },
+          { name: 'Product B', value: 25000 },
+          { name: 'Product C', value: 18000 },
+          { name: 'Services', value: 15000 },
+        ]
+      }],
+    },
+    defaultSpan: { spanCols: 1, spanRows: 1 },
+  },
+];
+
+function MyDashboard() {
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <Dashboard
+        cardCharts={chartContainers}
+        theme={webLightTheme}
+        containerWidth={1200}
+        containerHeight={800}
+      />
+    </div>
+  );
+}
+```
+
+### Advanced Dashboard Example
+
+```tsx
+import React, { useState, useEffect } from 'react';
+import { Dashboard } from '@spteck/fluentui-react-charts';
+import { webDarkTheme, tokens, Text } from '@fluentui/react-components';
+
+function AdvancedDashboard() {
+  const [containerWidth, setContainerWidth] = useState(1200);
+  
+  // Sample data for multiple charts
+  const salesData = [
+    { month: 'Jan', sales: 10000, expenses: 8000 },
+    { month: 'Feb', sales: 15000, expenses: 9000 },
+    { month: 'Mar', sales: 12000, expenses: 7500 },
+    { month: 'Apr', sales: 18000, expenses: 10000 },
+    { month: 'May', sales: 16000, expenses: 8500 },
+    { month: 'Jun', sales: 22000, expenses: 11000 },
+  ];
+
+  const chartContainers = [
+    {
+      id: 'sales-trend',
+      cardTitle: 'Sales Trend',
+      chart: {
+        id: 'sales-trend',
+        title: 'Monthly Sales Performance',
+        type: 'line',
+        data: [{ 
+          label: 'Sales', 
+          data: salesData.map(d => ({ name: d.month, value: d.sales }))
+        }],
+      },
+      defaultSpan: { spanCols: 2, spanRows: 1 },
+    },
+    {
+      id: 'sales-vs-expenses',
+      cardTitle: 'Financial Overview',
+      chart: {
+        id: 'sales-vs-expenses',
+        title: 'Sales vs Expenses',
+        type: 'bar',
+        data: [
+          { 
+            label: 'Sales', 
+            data: salesData.map(d => ({ name: d.month, value: d.sales }))
+          },
+          { 
+            label: 'Expenses', 
+            data: salesData.map(d => ({ name: d.month, value: d.expenses }))
+          }
+        ],
+      },
+      defaultSpan: { spanCols: 2, spanRows: 2 },
+    },
+    {
+      id: 'revenue-breakdown',
+      cardTitle: 'Revenue Breakdown',
+      chart: {
+        id: 'revenue-breakdown',
+        title: 'Revenue by Category',
+        type: 'doughnut',
+        data: [{ 
+          label: 'Revenue', 
+          data: [
+            { name: 'Product A', value: 35000 },
+            { name: 'Product B', value: 25000 },
+            { name: 'Product C', value: 18000 },
+            { name: 'Services', value: 15000 },
+          ]
+        }],
+      },
+      defaultSpan: { spanCols: 1, spanRows: 1 },
+    },
+    {
+      id: 'growth-trend',
+      cardTitle: 'Growth Analysis',
+      chart: {
+        id: 'growth-trend',
+        title: 'Monthly Growth Rate',
+        type: 'area',
+        data: [{ 
+          label: 'Growth', 
+          data: salesData.map(d => {
+            const growthPercentage = ((d.sales - d.expenses) / d.expenses * 100);
+            return { name: d.month, value: Number(growthPercentage.toFixed(1)) };
+          })
+        }],
+      },
+      defaultSpan: { spanCols: 2, spanRows: 1 },
+    },
+  ];
+
+  // Handle responsive container width
+  useEffect(() => {
+    const handleResize = () => {
+      setContainerWidth(window.innerWidth - 40); // Account for padding
+    };
+    
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Initial call
+    
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <div style={{ 
+      padding: tokens.spacingHorizontalXL, 
+      backgroundColor: tokens.colorNeutralBackground1, 
+      minHeight: '100vh' 
+    }}>
+      <Text 
+       
+        size={900}
+        weight="bold"
+        style={{ 
+          color: tokens.colorNeutralForeground1, 
+          marginBottom: tokens.spacingVerticalL,
+          display: 'block'
+        }}
+      >
+        Analytics Dashboard
+      </Text>
+      <Dashboard
+        cardCharts={chartContainers}
+        theme={webDarkTheme}
+        containerWidth={containerWidth}
+        containerHeight={600}
+      />
+    </div>
+  );
+}
+```
+
+### Dashboard Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `cardCharts` | `ICardChartContainer[]` | ✅ | Array of chart container configurations |
+| `theme` | `Theme` | ✅ | Fluent UI theme object |
+| `containerWidth` | `number` | ✅ | Width of the dashboard container in pixels |
+| `containerHeight` | `number` | ✅ | Height of the dashboard container in pixels |
+
+### ICardChartContainer Interface
+
+```tsx
+interface ICardChartContainer {
+  id: string;                    // Unique identifier for the chart container
+  cardTitle: string;             // Title displayed in the card header
+  chart: IChart;                 // Chart configuration object
+  showZoom?: boolean;            // Whether to show zoom controls (optional)
+  defaultSpan?: {                // Default grid spanning (optional)
+    spanCols: number;            // Number of columns to span (1-4)
+    spanRows: number;            // Number of rows to span (1-4)
+  };
+}
+```
+
+### Dashboard Features
+
+#### Grid Spanning
+
+Charts can span multiple grid cells for larger visualizations:
+
+- `spanCols`: 1-4 columns
+- `spanRows`: 1-4 rows
+
+#### Responsive Behavior
+
+- Grid automatically calculates columns based on container width
+- Zoom controls are hidden on mobile devices (width < 600px)
+- Charts automatically resize to fit their containers
+
+#### Drag & Drop
+
+- Click and drag any chart card to reorder
+- Visual feedback during drag operations
+- Smooth animations and transitions
+
 ## 🎨 Theming
 
 All charts support Fluent UI themes for consistent styling: