@spteck/fluentui-react-charts 1.0.7 → 1.0.8

package/src/charts/PieChart/README.MD

@@ -1,315 +0,0 @@
-# PieChart Component
-
-A customizable pie chart component built with Chart.js and Fluent UI React. This component displays data as circular segments, making it perfect for showing proportions, percentages, and part-to-whole relationships with clear visual representation of each category's contribution to the total.
-
-## 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 Value Legend**: Toggle segments visibility with click interactions and display actual values
-- **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
-- **Full Circle**: Classic pie chart design showing complete data distribution
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { PieChart } from './components/PieChart/PieChart';
-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' }}>
-      <PieChart
-        data={[
-          { label: 'Sales by Category', data: salesData }
-        ]}
-        getLabel={(datum) => datum.category}
-        getValue={(datum) => datum.amount}
-        title="Sales Distribution by Category"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### PieChartProps<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 | `false` | Whether to show data values on chart segments |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Revenue Breakdown
-
-```tsx
-interface RevenueData {
-  source: string;
-  amount: number;
-  percentage: number;
-}
-
-const revenueData: RevenueData[] = [
-  { source: 'Direct Sales', amount: 450000, percentage: 45 },
-  { source: 'Online Store', amount: 280000, percentage: 28 },
-  { source: 'Retail Partners', amount: 180000, percentage: 18 },
-  { source: 'Subscription', amount: 90000, percentage: 9 },
-];
-
-<PieChart
-  data={[{ label: 'Revenue Sources', data: revenueData }]}
-  getLabel={(datum) => datum.source}
-  getValue={(datum) => datum.amount}
-  title="Revenue Breakdown by Source"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Market Share Analysis
-
-```tsx
-interface MarketData {
-  company: string;
-  marketShare: number;
-  revenue: number;
-}
-
-const marketData: MarketData[] = [
-  { company: 'Our Company', marketShare: 28.5, revenue: 2850000 },
-  { company: 'Competitor A', marketShare: 22.1, revenue: 2210000 },
-  { company: 'Competitor B', marketShare: 18.7, revenue: 1870000 },
-  { company: 'Competitor C', marketShare: 15.3, revenue: 1530000 },
-  { company: 'Others', marketShare: 15.4, revenue: 1540000 },
-];
-
-<PieChart
-  data={[{ label: 'Market Share', data: marketData }]}
-  getLabel={(datum) => datum.company}
-  getValue={(datum) => datum.marketShare}
-  title="Industry Market Share Distribution"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Budget Allocation
-
-```tsx
-interface BudgetCategory {
-  department: string;
-  allocation: number;
-  spent: number;
-  priority: 'high' | 'medium' | 'low';
-}
-
-const budgetData: BudgetCategory[] = [
-  { department: 'Engineering', allocation: 450000, spent: 425000, priority: 'high' },
-  { department: 'Marketing', allocation: 280000, spent: 265000, priority: 'high' },
-  { department: 'Sales', allocation: 320000, spent: 310000, priority: 'high' },
-  { department: 'Operations', allocation: 180000, spent: 175000, priority: 'medium' },
-  { department: 'HR', allocation: 120000, spent: 115000, priority: 'medium' },
-];
-
-<PieChart
-  data={[{ label: 'Budget Allocation', data: budgetData }]}
-  getLabel={(datum) => datum.department}
-  getValue={(datum) => datum.allocation}
-  title="Annual Budget Distribution"
-  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
-<PieChart
-  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 Product Sales (All Regions Combined)"
-  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
-
-### Value Legend
-
-- Displays label, actual value, and color 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 pie 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 and data calculations
-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]);
-
-// Memoized chart data and legend entries
-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]);

package/src/charts/PieChart/index.ts

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

package/src/charts/areaChart/AreaChart.tsx

@@ -1,195 +0,0 @@
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  ChartOptions,
-  Filler,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  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 { Line } from 'react-chartjs-2';
-import RenderLegend from '../../components/RenderLegend/RenderLegend';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Tooltip,
-  Filler,
-  Legend,
-  ChartDataLabels,
-  Title
-);
-
-export interface AreaChartProps<T> {
-  data: { label: string; data: T[] }[];
-  getPrimary: (datum: T) => string | number;
-  getSecondary: (datum: T) => number;
-  stacked?: boolean;
-  title?: string;
-  showDatalabels?: boolean;
-  theme?: Theme;
-}
-
-export default function AreaChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  title,
-    showDatalabels = false,
-    theme =  webLightTheme,
-  stacked = false,
-}: AreaChartProps<T>) {
-  const [visibleSeries, setVisibleSeries] = useState(() =>
-    data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
-  );
-
- const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
-    theme
-  );
-
-  const seriesColors = useMemo(() => {
-    return data.reduce((acc, series, idx) => {
-      const base = getFluentPalette(theme)[
-        idx % getFluentPalette(theme).length
-      ];
-      const color = lightenColor(base, 0.3);
-      acc[series.label] = color;
-      return acc;
-    }, {} as Record<string, string>);
-  }, [data, theme]);
-
-  const toggleSeries = (label: string) => {
-    setVisibleSeries(prev => {
-      const isVisible = prev.includes(label);
-      const next = isVisible ? prev.filter(l => l !== label) : [...prev, label];
-      return next.length === 0 && data.length > 0 ? [data[0].label] : next;
-    });
-  };
-
-  const allCategories = useMemo(() => {
-    const set = new Set<string | number>();
-    data.forEach(series => {
-      series.data.forEach(d => set.add(getPrimary(d)));
-    });
-    return Array.from(set);
-  }, [data, getPrimary]);
-
-  const chartData = useMemo(() => {
-    return {
-      labels: allCategories,
-      datasets: data
-        .filter(series => visibleSeries.includes(series.label))
-        .map(series => ({
-          label: series.label,
-          data: allCategories.map(cat => {
-            const match = series.data.find(d => getPrimary(d) === cat);
-            return match ? getSecondary(match) : null;
-          }),
-          borderColor: seriesColors[series.label],
-          backgroundColor: seriesColors[series.label],
-          fill: true,
-          tension: 0.4,
-          pointRadius: 2,
-        })),
-    };
-  }, [
-    data,
-    visibleSeries,
-    allCategories,
-    getPrimary,
-    getSecondary,
-    seriesColors,
-  ]);
-
-const { fontFamily, fontSize, labelColor, gridColor } = useMemo(() => ({
-    fontFamily: theme.fontFamilyBase,
-    fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
-    labelColor: theme.colorNeutralForeground1,
-    gridColor: theme.colorNeutralStroke2,
-}), [theme]);
-
-  const options: ChartOptions<'line'> = useMemo(() => ({
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      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,
-        },
-      },
-      legend: { display: false },
-      tooltip: createFluentTooltip<'line'>(theme),
-    },
-    scales: {
-      x: {
-        stacked,
-        ticks: {
-          color: labelColor,
-          font: { family: fontFamily, size: fontSize },
-        },
-        grid: { color: gridColor },
-      },
-      y: {
-        stacked,
-        ticks: {
-          color: labelColor,
-          font: { family: fontFamily, size: fontSize },
-        },
-        grid: { color: gridColor },
-      },
-    },
-  }), [
-    title,
-    showDatalabels,
-    theme,
-    fontFamily,
-    fontSize,
-    labelColor,
-    gridColor,
-    stacked,
-    createFluentTooltip,
-  ]);
-
-  return (
-    <div className={styles.chartWithLegend}>
-      <div className={styles.chartArea}>
-        <Line data={chartData} options={options} />
-      </div>
-      <RenderLegend
-        data={data}
-        visibleSeries={visibleSeries}
-        seriesColors={seriesColors}
-        toggleSeries={toggleSeries}
-      />
-    </div>
-  );
-}