@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/charts/ComboChart/ComboChart.tsx

@@ -1,209 +0,0 @@
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  ChartOptions,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import React, { useMemo, useState } from 'react';
-import { Theme, webLightTheme } from '@fluentui/react-components';
-
-import { Chart } from 'react-chartjs-2';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import RenderLegend from '../../components/RenderLegend/RenderLegend';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(ChartDataLabels);
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Legend,
-  Title
-);
-
-export interface ComboChartProps<T> {
-  data: {
-    label: string;
-    type: 'bar' | 'line';
-    data: T[];
-    yAxisID?: string;
-  }[];
-  getPrimary: (datum: T) => string | number;
-  getSecondary: (datum: T) => number;
-  title?: string;
-  showDataLabels?: boolean;
-  theme?: Theme;
-}
-
-export default function ComboChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  title,
-  showDataLabels = false,
-  theme = webLightTheme,
-}: ComboChartProps<T>) {
-  const [visibleSeries, setVisibleSeries] = useState(() =>
-    data.map(s => s.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
-      ];
-      acc[series.label] = lightenColor(base, 0.3);
-      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[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(() => {
-    const sortedSeries = data
-      .filter(series => visibleSeries.includes(series.label))
-      .sort((a, b) => {
-        // Ensure bars come before lines
-        if (a.type === 'bar' && b.type === 'line') return -1;
-        if (a.type === 'line' && b.type === 'bar') return 1;
-        return 0;
-      });
-
-    return {
-      labels: allCategories,
-      datasets: sortedSeries.map(series => ({
-        type: series.type,
-        label: series.label,
-        yAxisID: series.yAxisID ?? 'y',
-        data: allCategories.map(cat => {
-          const found = series.data.find(d => getPrimary(d) === cat);
-          return found ? getSecondary(found) : 0;
-        }),
-        backgroundColor: seriesColors[series.label],
-        borderColor: seriesColors[series.label],
-        fill: series.type === 'bar',
-        tension: series.type === 'line' ? 0.4 : 0,
-        pointRadius: series.type === 'line' ? 3 : 0,
-        borderWidth: series.type === 'line' ? 2 : 1,
-        order: series.type === 'bar' ? 1 : 0, // Ensure bars are drawn first
-      })),
-    };
-  }, [
-    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<'bar' | '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<'bar' | 'line'>(theme),
-    },
-    scales: {
-      x: {
-        ticks: {
-          color: labelColor,
-          font: { family: fontFamily, size: fontSize },
-        },
-        grid: { color: gridColor },
-      },
-      y: {
-        position: 'left',
-        ticks: {
-          color: labelColor,
-          font: { family: fontFamily, size: fontSize },
-        },
-        grid: { color: gridColor },
-        stacked: false,
-      },
-    },
-  }), [
-    title,
-    showDataLabels,
-    theme,
-    fontFamily,
-    fontSize,
-    labelColor,
-    gridColor,
-    createFluentTooltip,
-  ]);
-
-  return (
-    <>
-      <div className={styles.chartWithLegend}>
-        <div className={styles.chartArea}>
-          <Chart type="bar" data={chartData} options={options} />
-        </div>
-        <div className={styles.legendArea}>
-          <RenderLegend
-            data={data}
-            visibleSeries={visibleSeries}
-            seriesColors={seriesColors}
-            toggleSeries={toggleSeries}
-          />
-        </div>
-      </div>
-    </>
-  );
-}

package/src/charts/ComboChart/README.MD

@@ -1,347 +0,0 @@
-# ComboChart Component
-
-A versatile combination chart component built with Chart.js and Fluent UI React. This component allows you to display multiple chart types (bars and lines) in a single visualization, making it perfect for comparing different types of metrics or showing relationships between various data series.
-
-## Features
-
-- **Mixed Chart Types**: Combine bar and line charts in a single visualization
-- **Dual Y-Axes Support**: Optional secondary y-axis for different data scales
-- **Multiple Series Support**: Display multiple data series with different chart types
-- **Interactive Legend**: Toggle series visibility with click interactions
-- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
-- **Data Labels**: Optional display of values directly on chart elements
-- **Responsive Design**: Automatically adapts to container dimensions
-- **TypeScript Support**: Full TypeScript support with generic types
-- **Custom Tooltips**: Rich tooltips showing detailed information
-- **Smart Rendering Order**: Bars render behind lines for optimal visibility
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { ComboChart } from './components/ComboChart/ComboChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface SalesData {
-  month: string;
-  revenue: number;
-  units: number;
-}
-
-const salesData: SalesData[] = [
-  { month: 'Jan', revenue: 150000, units: 1200 },
-  { month: 'Feb', revenue: 180000, units: 1450 },
-  { month: 'Mar', revenue: 165000, units: 1320 },
-  { month: 'Apr', revenue: 200000, units: 1600 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '400px' }}>
-      <ComboChart
-        data={[
-          {
-            label: 'Revenue',
-            type: 'bar',
-            data: salesData
-          },
-          {
-            label: 'Units Sold',
-            type: 'line',
-            data: salesData
-          }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getSecondary={(datum) => datum.revenue} // Will use different values per series
-        title="Revenue and Units Sold Over Time"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### ComboChartProps<T>
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `{ label: string; type: 'bar' \| 'line'; data: T[]; yAxisID?: string }[]` | Yes | - | Array of data series with labels, chart types, and optional y-axis assignment |
-| `getPrimary` | `(datum: T) => string \| number` | Yes | - | Function to extract the x-axis category from each data point |
-| `getSecondary` | `(datum: T) => number` | Yes | - | Function to extract the y-axis 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 elements |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Revenue vs Performance Metrics
-
-```tsx
-interface BusinessMetrics {
-  quarter: string;
-  revenue: number;
-  customerSatisfaction: number;
-  marketShare: number;
-}
-
-const businessData: BusinessMetrics[] = [
-  { quarter: 'Q1 2024', revenue: 2500000, customerSatisfaction: 85, marketShare: 15.2 },
-  { quarter: 'Q2 2024', revenue: 2800000, customerSatisfaction: 87, marketShare: 16.1 },
-  { quarter: 'Q3 2024', revenue: 3100000, customerSatisfaction: 89, marketShare: 17.3 },
-  { quarter: 'Q4 2024', revenue: 3400000, customerSatisfaction: 91, marketShare: 18.7 },
-];
-
-<ComboChart
-  data={[
-    {
-      label: 'Revenue ($)',
-      type: 'bar',
-      data: businessData.map(d => ({ quarter: d.quarter, value: d.revenue })),
-      yAxisID: 'y'
-    },
-    {
-      label: 'Customer Satisfaction (%)',
-      type: 'line',
-      data: businessData.map(d => ({ quarter: d.quarter, value: d.customerSatisfaction })),
-      yAxisID: 'y1'
-    },
-    {
-      label: 'Market Share (%)',
-      type: 'line',
-      data: businessData.map(d => ({ quarter: d.quarter, value: d.marketShare })),
-      yAxisID: 'y1'
-    }
-  ]}
-  getPrimary={(datum) => datum.quarter}
-  getSecondary={(datum) => datum.value}
-  title="Business Performance Dashboard"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Sales Performance Analysis
-
-```tsx
-interface SalesPerformance {
-  region: string;
-  actualSales: number;
-  targetSales: number;
-  growthRate: number;
-}
-
-const performanceData: SalesPerformance[] = [
-  { region: 'North America', actualSales: 450000, targetSales: 420000, growthRate: 12.5 },
-  { region: 'Europe', actualSales: 380000, targetSales: 400000, growthRate: 8.2 },
-  { region: 'Asia Pacific', actualSales: 520000, targetSales: 480000, growthRate: 15.7 },
-  { region: 'Latin America', actualSales: 280000, targetSales: 300000, growthRate: 6.3 },
-];
-
-<ComboChart
-  data={[
-    {
-      label: 'Actual Sales',
-      type: 'bar',
-      data: performanceData.map(d => ({ region: d.region, value: d.actualSales }))
-    },
-    {
-      label: 'Target Sales',
-      type: 'bar',
-      data: performanceData.map(d => ({ region: d.region, value: d.targetSales }))
-    },
-    {
-      label: 'Growth Rate (%)',
-      type: 'line',
-      data: performanceData.map(d => ({ region: d.region, value: d.growthRate })),
-      yAxisID: 'y1'
-    }
-  ]}
-  getPrimary={(datum) => datum.region}
-  getSecondary={(datum) => datum.value}
-  title="Regional Sales Performance vs Growth"
-  theme={webLightTheme}
-/>
-```
-
-### Financial KPIs Dashboard
-
-```tsx
-interface FinancialKPIs {
-  month: string;
-  revenue: number;
-  expenses: number;
-  profitMargin: number;
-  cashFlow: number;
-}
-
-<ComboChart
-  data={[
-    {
-      label: 'Revenue',
-      type: 'bar',
-      data: financialData.map(d => ({ month: d.month, value: d.revenue }))
-    },
-    {
-      label: 'Expenses',
-      type: 'bar',
-      data: financialData.map(d => ({ month: d.month, value: d.expenses }))
-    },
-    {
-      label: 'Profit Margin (%)',
-      type: 'line',
-      data: financialData.map(d => ({ month: d.month, value: d.profitMargin })),
-      yAxisID: 'y1'
-    },
-    {
-      label: 'Cash Flow',
-      type: 'line',
-      data: financialData.map(d => ({ month: d.month, value: d.cashFlow }))
-    }
-  ]}
-  getPrimary={(datum) => datum.month}
-  getSecondary={(datum) => datum.value}
-  title="Financial Performance Overview"
-  showDataLabels={true}
-/>
-```
-
-## Data Structure
-
-The component expects data in the following format:
-
-```tsx
-interface ChartSeries<T> {
-  label: string;           // Series name (appears in legend)
-  type: 'bar' | 'line';   // Chart type for this series
-  data: T[];              // Array of data points
-  yAxisID?: string;       // Optional y-axis assignment ('y' or 'y1')
-}
-```
-
-Each data point `T` should contain:
-
-- A primary value (x-axis category) - string or number
-- A secondary value (y-axis value) - number
-
-## Chart Type Characteristics
-
-### Bar Series
-
-- Rendered as vertical bars
-- Ideal for discrete categories and comparisons
-- Supports stacking (when all series are bars)
-- Better for showing absolute values
-
-### Line Series
-
-- Rendered as connected points with lines
-- Perfect for trends and continuous data
-- Smooth curves with configurable tension
-- Better for showing changes over time
-
-## Y-Axis Configuration
-
-### Single Y-Axis (Default)
-
-All series share the same y-axis scale:
-
-```tsx
-data={[
-  { label: 'Series 1', type: 'bar', data: data1 },
-  { label: 'Series 2', type: 'line', data: data2 }
-]}
-```
-
-### Dual Y-Axes
-
-Different series can use different y-axis scales:
-
-```tsx
-data={[
-  { label: 'Revenue ($)', type: 'bar', data: revenueData, yAxisID: 'y' },
-  { label: 'Growth (%)', type: 'line', data: growthData, yAxisID: 'y1' }
-]}
-```
-
-## Rendering Order
-
-The component automatically optimizes rendering order:
-
-1. **Bar series** are rendered first (background layer)
-2. **Line series** are rendered on top (foreground layer)
-3. This ensures lines are always visible over bars
-
-## Interactive Features
-
-### Legend Controls
-
-- Click legend items to show/hide series
-- Visual feedback on hover states
-- At least one series must remain visible
-- Colors automatically assigned from theme palette
-
-### Smart Data Handling
-
-- Automatic category aggregation across all series
-- Missing data points default to 0
-- Efficient data transformation and caching
-
-### Responsive Behavior
-
-- Chart automatically resizes to container dimensions
-- Legend adapts to available space
-- Maintains readability across different screen sizes
-
-## Styling and Theme Integration
-
-The component uses Fluent UI theme tokens:
-
-```tsx
-// Bar styling
-backgroundColor: Theme color palette
-borderWidth: 1
-
-// Line styling
-borderColor: Theme color palette
-borderWidth: 2
-tension: 0.4 (smooth curves)
-pointRadius: 3
-
-// Typography
-fontFamily: theme.fontFamilyBase
-fontSize: theme.fontSizeBase200
-color: theme.colorNeutralForeground1
-```
-
-## Performance Optimizations
-
-````tsx
-// Memoized color calculations
-const seriesColors = useMemo(() => {
-  return data.reduce((acc, series, idx) => {
-    const base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
-    acc[series.label] = lightenColor(base, 0.3);
-    return acc;
-  }, {} as Record<string, string>);
-}, [data, theme]);
-
-// Memoized chart data with optimized sorting
-const chartData = useMemo(() => {
-  const sortedSeries = data
-    .filter(series => visibleSeries.includes(series.label))
-    .sort((a, b) => {
-      // Ensure bars come before lines
-      if (a.type === 'bar' && b.type === 'line') return -1;
-      if (a.type === 'line' && b.type === 'bar') return 1;
-      return 0;
-    });
-  // ... rest of transformation
-}, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);

package/src/charts/ComboChart/index.ts

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

package/src/charts/Doughnut/DoughnutChart.tsx

@@ -1,152 +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 { Doughnut } from 'react-chartjs-2';
-import RenderValueLegend from '../../components/renderValueLegend/RenderValueLegend';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(ChartDataLabels);
-ChartJS.register(ArcElement, Tooltip, Legend, Title);
-
-export interface DoughnutChartProps<T> {
-  data: {
-    label: string;
-    data: T[];
-  }[];
-  getLabel: (datum: T) => string;
-  getValue: (datum: T) => number;
-  title?: string;
-  showDataLabels?: boolean;
-  theme?: Theme;
-}
-
-export default function DoughnutChart<T extends object>({
-  data,
-  getLabel,
-  getValue,
-  title,
-  showDataLabels = true,
-  theme = webLightTheme,
-}: DoughnutChartProps<T>) {
-  const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
-    theme
-  );
-  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
-
-  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 } = 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]);
-
-  const { filteredLabels, values, visibleColors } = useMemo(() => {
-    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 { filteredLabels, values, visibleColors };
-  }, [allLabels, hiddenLabels, valueMap, colors]);
-
-  const chartData = useMemo(() => ({
-    labels: filteredLabels,
-    datasets: [
-      {
-        data: values,
-        backgroundColor: visibleColors,
-        borderWidth: 1,
-      },
-    ],
-  }), [filteredLabels, values, visibleColors]);
-
-  const legendEntries = useMemo(() => {
-    return allLabels.map((label, idx) => ({
-      label,
-      value: valueMap.get(label) || 0,
-      color: colors[idx],
-    }));
-  }, [allLabels, valueMap, colors]);
-
-  const options: ChartOptions<'doughnut'> = useMemo(
-    () => ({
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        legend: { display: false },
-        tooltip: createFluentTooltip<'doughnut'>(theme),
-        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,
-          },
-          formatter: (value: number) => value,
-        },
-      },
-    }),
-    [title, theme, showDataLabels, createFluentTooltip]
-  );
-
-  return (
-    <div className={styles.chartWithLegend}>
-      <div className={styles.chartArea}>
-        <Doughnut data={chartData} options={options} />
-      </div>
-      <div className={styles.legendArea}>
-        <RenderValueLegend
-          entries={legendEntries}
-          visibleLabels={filteredLabels}
-          toggleLabel={toggleLabel}
-        />
-      </div>
-    </div>
-  );
-}