@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/charts/Doughnut/README.MD

@@ -1,296 +0,0 @@
-# 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

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

package/src/charts/PieChart/PieChart.tsx

@@ -1,148 +0,0 @@
-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/useChartUtils';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-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 } = useChartUtils(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>
-  );
-}