@spteck/fluentui-react-charts 0.1.8

package/src/charts/Doughnut/README.MD

@@ -0,0 +1,296 @@
+# DoughnutChart Component
+
+A customizable doughnut chart component built with Chart.js and Fluent UI React. This component displays data as a circular chart with a hollow center, making it perfect for showing proportions, percentages, and part-to-whole relationships with an elegant visual presentation.
+
+## Features
+
+- **Circular Data Visualization**: Display proportional data in an intuitive circular format
+- **Value Aggregation**: Automatically aggregates values across multiple series for the same labels
+- **Interactive Legend**: Toggle segments visibility with click interactions and value display
+- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
+- **Data Labels**: Optional display of values directly on chart segments
+- **Responsive Design**: Automatically adapts to container dimensions
+- **TypeScript Support**: Full TypeScript support with generic types
+- **Custom Tooltips**: Rich tooltips showing detailed segment information
+- **Hollow Center**: Classic doughnut design with customizable center space
+
+## Installation
+
+```bash
+npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { DoughnutChart } from './components/Doughnut/DoughnutChart';
+import { webLightTheme } from '@fluentui/react-components';
+
+interface SalesData {
+  category: string;
+  amount: number;
+}
+
+const salesData: SalesData[] = [
+  { category: 'Electronics', amount: 125000 },
+  { category: 'Clothing', amount: 85000 },
+  { category: 'Books', amount: 45000 },
+  { category: 'Home & Garden', amount: 95000 },
+  { category: 'Sports', amount: 65000 },
+];
+
+function App() {
+  return (
+    <div style={{ width: '600px', height: '400px' }}>
+      <DoughnutChart
+        data={[
+          { label: 'Sales by Category', data: salesData }
+        ]}
+        getLabel={(datum) => datum.category}
+        getValue={(datum) => datum.amount}
+        title="Sales Distribution by Category"
+        theme={webLightTheme}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### DoughnutChartProps<T>
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `data` | `{ label: string; data: T[] }[]` | Yes | - | Array of data series with labels and data points |
+| `getLabel` | `(datum: T) => string` | Yes | - | Function to extract the segment label from each data point |
+| `getValue` | `(datum: T) => number` | Yes | - | Function to extract the segment value from each data point |
+| `title` | `string` | No | - | Chart title displayed at the top |
+| `showDataLabels` | `boolean` | No | `true` | Whether to show data values on chart segments |
+| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
+
+## Advanced Usage
+
+### Budget Allocation
+
+```tsx
+interface BudgetItem {
+  department: string;
+  allocation: number;
+  priority: 'high' | 'medium' | 'low';
+}
+
+const budgetData: BudgetItem[] = [
+  { department: 'Engineering', allocation: 450000, priority: 'high' },
+  { department: 'Marketing', allocation: 280000, priority: 'high' },
+  { department: 'Sales', allocation: 320000, priority: 'high' },
+  { department: 'Operations', allocation: 180000, priority: 'medium' },
+  { department: 'HR', allocation: 120000, priority: 'medium' },
+  { department: 'Legal', allocation: 80000, priority: 'low' },
+];
+
+<DoughnutChart
+  data={[{ label: 'Budget Allocation', data: budgetData }]}
+  getLabel={(datum) => datum.department}
+  getValue={(datum) => datum.allocation}
+  title="Annual Budget Allocation by Department"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Multiple Series Aggregation
+
+```tsx
+interface RegionalSales {
+  product: string;
+  region: string;
+  sales: number;
+}
+
+const salesData: RegionalSales[] = [
+  { product: 'Product A', region: 'North', sales: 15000 },
+  { product: 'Product A', region: 'South', sales: 12000 },
+  { product: 'Product B', region: 'North', sales: 18000 },
+  { product: 'Product B', region: 'South', sales: 14000 },
+  { product: 'Product C', region: 'North', sales: 10000 },
+  { product: 'Product C', region: 'South', sales: 8000 },
+];
+
+// This will automatically aggregate sales by product across all regions
+<DoughnutChart
+  data={[
+    { label: 'North Region', data: salesData.filter(d => d.region === 'North') },
+    { label: 'South Region', data: salesData.filter(d => d.region === 'South') }
+  ]}
+  getLabel={(datum) => datum.product}
+  getValue={(datum) => datum.sales}
+  title="Total Sales by Product (All Regions Combined)"
+  theme={webLightTheme}
+/>
+```
+
+### Survey Results
+
+```tsx
+interface SurveyResponse {
+  answer: string;
+  count: number;
+  percentage: number;
+}
+
+const surveyData: SurveyResponse[] = [
+  { answer: 'Very Satisfied', count: 156, percentage: 39 },
+  { answer: 'Satisfied', count: 124, percentage: 31 },
+  { answer: 'Neutral', count: 68, percentage: 17 },
+  { answer: 'Dissatisfied', count: 32, percentage: 8 },
+  { answer: 'Very Dissatisfied', count: 20, percentage: 5 },
+];
+
+<DoughnutChart
+  data={[{ label: 'Customer Satisfaction', data: surveyData }]}
+  getLabel={(datum) => datum.answer}
+  getValue={(datum) => datum.count}
+  title="Customer Satisfaction Survey Results"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Market Share Analysis
+
+```tsx
+interface MarketShare {
+  company: string;
+  marketShare: number;
+  revenue: number;
+}
+
+const marketData: MarketShare[] = [
+  { company: 'Company A', marketShare: 28.5, revenue: 2850000 },
+  { company: 'Company B', marketShare: 22.1, revenue: 2210000 },
+  { company: 'Company C', marketShare: 18.7, revenue: 1870000 },
+  { company: 'Company D', marketShare: 15.3, revenue: 1530000 },
+  { company: 'Others', marketShare: 15.4, revenue: 1540000 },
+];
+
+<DoughnutChart
+  data={[{ label: 'Market Share', data: marketData }]}
+  getLabel={(datum) => datum.company}
+  getValue={(datum) => datum.marketShare}
+  title="Industry Market Share Distribution"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+## Data Structure
+
+The component expects data in the following format:
+
+```tsx
+interface ChartSeries<T> {
+  label: string;  // Series name (for multiple data sources)
+  data: T[];      // Array of data points
+}
+```
+
+Each data point `T` should contain:
+
+- A label value (segment name) - string
+- A numeric value (segment size) - number
+
+## Data Aggregation
+
+The component automatically aggregates values when multiple data points have the same label:
+
+```tsx
+// Input data
+const data = [
+  { category: 'Electronics', value: 100 },
+  { category: 'Electronics', value: 50 },  // Will be aggregated
+  { category: 'Clothing', value: 75 },
+];
+
+// Result: Electronics = 150, Clothing = 75
+```
+
+## Interactive Features
+
+### Legend with Values
+
+- Displays both label and actual value for each segment
+- Click legend items to show/hide segments
+- Visual feedback on hover states
+- Maintains proportional relationships when segments are hidden
+
+### Segment Interactions
+
+- Hover effects on chart segments
+- Rich tooltips showing detailed information
+- Smooth animations and transitions
+
+### Responsive Layout
+
+- Chart automatically resizes to container dimensions
+- Legend positioning adapts to available space
+- Maintains readability across different screen sizes
+
+## Styling and Theme Integration
+
+The component uses Fluent UI theme tokens:
+
+```tsx
+// Segment colors
+backgroundColor: Derived from theme palette with lightening
+borderWidth: 1
+
+// Typography
+fontFamily: theme.fontFamilyBase
+fontSize: theme.fontSizeBase200
+fontWeight: theme.fontWeightSemibold
+color: theme.colorNeutralForeground1
+
+// Data labels
+color: theme.colorNeutralForeground1
+font: theme font properties
+```
+
+## Performance Optimizations
+
+The component includes several React optimizations:
+
+````tsx
+// Memoized value aggregation
+const valueMap = useMemo(() => {
+  const map = new Map<string, number>();
+  data.forEach(series => {
+    series.data.forEach(d => {
+      const label = getLabel(d);
+      const value = getValue(d);
+      map.set(label, (map.get(label) || 0) + value);
+    });
+  });
+  return map;
+}, [data, getLabel, getValue]);
+
+// Memoized color calculations
+const { allLabels, colors } = useMemo(() => {
+  const allLabels = Array.from(valueMap.keys());
+  const palette = getFluentPalette(theme);
+  const colors = allLabels.map((_, i) =>
+    lightenColor(palette[i % palette.length], 0.3)
+  );
+  return { allLabels, colors };
+}, [valueMap, getFluentPalette, theme, lightenColor]);
+
+// Memoized chart data
+const chartData = useMemo(() => ({
+  labels: filteredLabels,
+  datasets: [{
+    data: values,
+    backgroundColor: visibleColors,
+    borderWidth: 1,
+  }],
+}), [filteredLabels, values, visibleColors]);

package/src/charts/Doughnut/index.ts

@@ -0,0 +1 @@
+export * from './DoughnutChart';

package/src/charts/PieChart/PieChart.tsx

@@ -0,0 +1,148 @@
+import {
+  ArcElement,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Pie } from 'react-chartjs-2';
+import RenderValueLegend from '../../components/renderValueLegend/RenderValueLegend';
+import { createFluentTooltip } from '../../hooks/useGraphUtils';
+import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
+import { useGraphUtils } from '../../hooks/useGraphUtils';
+
+ChartJS.register(ChartDataLabels);
+ChartJS.register(ArcElement, Tooltip, Legend, Title);
+
+export interface PieChartProps<T> {
+  data: {
+    label: string;
+    data: T[];
+  }[];
+  getLabel: (datum: T) => string;
+  getValue: (datum: T) => number;
+  title?: string;
+  showDataLabels?: boolean;
+  theme?: Theme;
+}
+
+export default function PieChart<T extends object>({
+  data,
+  getLabel,
+  getValue,
+  title,
+  showDataLabels = false,
+  theme = webLightTheme,
+}: PieChartProps<T>) {
+  const { getFluentPalette, lightenColor } = useGraphUtils(theme);
+  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
+  const styles = useGraphGlobalStyles();
+  const toggleLabel = (label: string): void => {
+    setHiddenLabels(prev =>
+      prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+    );
+  };
+
+  const valueMap = useMemo(() => {
+    const map = new Map<string, number>();
+    data.forEach(series => {
+      series.data.forEach(d => {
+        const label = getLabel(d);
+        const value = getValue(d);
+        map.set(label, (map.get(label) || 0) + value);
+      });
+    });
+    return map;
+  }, [data, getLabel, getValue]);
+
+const { allLabels,  colors, filteredLabels, values, visibleColors } = useMemo(() => {
+    const allLabels = Array.from(valueMap.keys());
+    const palette = getFluentPalette(theme);
+    const colors = allLabels.map((_, i) =>
+        lightenColor(palette[i % palette.length], 0.3)
+    );
+
+    const filteredLabels = allLabels.filter(
+        label => !hiddenLabels.includes(label)
+    );
+    const values = filteredLabels.map(label => valueMap.get(label) || 0);
+    const visibleColors = filteredLabels.map(label => {
+        const idx = allLabels.indexOf(label);
+        return colors[idx];
+    });
+
+    return { allLabels,  colors, filteredLabels, values, visibleColors };
+}, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]);
+
+const { chartData, legendEntries } = useMemo(() => {
+    const chartData = {
+        labels: filteredLabels,
+        datasets: [
+            {
+                data: values,
+                backgroundColor: visibleColors,
+                borderWidth: 1,
+            },
+        ],
+    };
+
+    const legendEntries = allLabels.map((label, i) => ({
+        label,
+        value: valueMap.get(label) || 0,
+        color: colors[i],
+    }));
+
+    return { chartData, legendEntries };
+}, [filteredLabels, values, visibleColors, allLabels, valueMap, colors]);
+
+const options = useMemo<ChartOptions<'pie'>>(() => ({
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+        tooltip: createFluentTooltip<'pie'>(theme),
+        legend: { display: false },
+        title: {
+            display: !!title,
+            text: title,
+            font: {
+                size: 14,
+                family: theme.fontFamilyBase,
+                weight: theme.fontWeightSemibold,
+            },
+            color: theme.colorNeutralForeground1,
+            padding: {
+                top: 20,
+                bottom: 20,
+            },
+        },
+        datalabels: {
+            display: showDataLabels,
+            color: theme.colorNeutralForeground1,
+            font: {
+                family: theme.fontFamilyBase,
+                size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
+            },
+        },
+    },
+}), [theme, title, showDataLabels]);
+
+  return (
+    <div className={styles.chartWithLegend}>
+      <div className={styles.chartArea}>
+        <Pie data={chartData} options={options} />
+      </div>
+      <div className={styles.legendArea}>
+        <RenderValueLegend
+          entries={legendEntries}
+          visibleLabels={filteredLabels}
+          toggleLabel={toggleLabel}
+        />
+      </div>
+    </div>
+  );
+}