@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/charts/stackedLineChart/README.MD

@@ -1,396 +0,0 @@
-# StackedLineChart Component
-
-A specialized stacked line chart component built with Chart.js and Fluent UI React. This component displays multiple data series as stacked areas with smooth line boundaries, making it perfect for visualizing cumulative data, part-to-whole relationships over time, and how different components contribute to a total value.
-
-## Features
-
-- **Stacked Area Visualization**: Display multiple data series as cumulative stacked areas
-- **Smooth Line Boundaries**: Configurable line tension for smooth area transitions
-- **Interactive Legend**: Toggle series visibility with click interactions
-- **Cumulative Values**: Show how individual series contribute to total values
-- **Filled Areas**: Semi-transparent filled areas for better visual distinction
-- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
-- **Data Labels**: Optional display of values directly on data points
-- **Responsive Design**: Automatically adapts to container dimensions
-- **TypeScript Support**: Full TypeScript support with generic types
-- **Custom Tooltips**: Rich tooltips showing detailed breakdown information
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { StackedLineChart } from './components/stackedLineChart/StackedLineChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface RevenueData {
-  month: string;
-  subscriptions: number;
-  oneTime: number;
-  consulting: number;
-}
-
-const revenueData: RevenueData[] = [
-  { month: 'Jan', subscriptions: 45000, oneTime: 12000, consulting: 8000 },
-  { month: 'Feb', subscriptions: 48000, oneTime: 15000, consulting: 10000 },
-  { month: 'Mar', subscriptions: 52000, oneTime: 18000, consulting: 12000 },
-  { month: 'Apr', subscriptions: 55000, oneTime: 14000, consulting: 15000 },
-  { month: 'May', subscriptions: 58000, oneTime: 16000, consulting: 18000 },
-  { month: 'Jun', subscriptions: 62000, oneTime: 20000, consulting: 20000 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '500px' }}>
-      <StackedLineChart
-        data={[
-          {
-            label: 'Subscriptions',
-            data: revenueData.map(d => ({ month: d.month, value: d.subscriptions }))
-          },
-          {
-            label: 'One-time Sales',
-            data: revenueData.map(d => ({ month: d.month, value: d.oneTime }))
-          },
-          {
-            label: 'Consulting',
-            data: revenueData.map(d => ({ month: d.month, value: d.consulting }))
-          }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getSecondary={(datum) => datum.value}
-        title="Revenue Breakdown Over Time"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### StackedLineChartProps<T>
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `{ label: string; data: T[] }[]` | Yes | - | Array of data series with labels and data points |
-| `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 data points |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Website Traffic Sources
-
-```tsx
-interface TrafficData {
-  date: string;
-  organic: number;
-  paid: number;
-  social: number;
-  direct: number;
-  email: number;
-}
-
-const trafficData: TrafficData[] = [
-  { date: '2024-01', organic: 12000, paid: 5000, social: 3000, direct: 8000, email: 2000 },
-  { date: '2024-02', organic: 13500, paid: 5500, social: 3500, direct: 8500, email: 2200 },
-  { date: '2024-03', organic: 15000, paid: 6000, social: 4000, direct: 9000, email: 2500 },
-  { date: '2024-04', organic: 16500, paid: 6500, social: 4500, direct: 9500, email: 2800 },
-];
-
-<StackedLineChart
-  data={[
-    {
-      label: 'Organic Search',
-      data: trafficData.map(d => ({ date: d.date, visitors: d.organic }))
-    },
-    {
-      label: 'Paid Advertising',
-      data: trafficData.map(d => ({ date: d.date, visitors: d.paid }))
-    },
-    {
-      label: 'Social Media',
-      data: trafficData.map(d => ({ date: d.date, visitors: d.social }))
-    },
-    {
-      label: 'Direct Traffic',
-      data: trafficData.map(d => ({ date: d.date, visitors: d.direct }))
-    },
-    {
-      label: 'Email Marketing',
-      data: trafficData.map(d => ({ date: d.date, visitors: d.email }))
-    }
-  ]}
-  getPrimary={(datum) => datum.date}
-  getSecondary={(datum) => datum.visitors}
-  title="Website Traffic Sources Over Time"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Expense Categories
-
-```tsx
-interface ExpenseData {
-  quarter: string;
-  personnel: number;
-  infrastructure: number;
-  marketing: number;
-  operations: number;
-  research: number;
-}
-
-const expenseData: ExpenseData[] = [
-  { quarter: 'Q1 2024', personnel: 150000, infrastructure: 45000, marketing: 35000, operations: 25000, research: 40000 },
-  { quarter: 'Q2 2024', personnel: 165000, infrastructure: 50000, marketing: 40000, operations: 28000, research: 45000 },
-  { quarter: 'Q3 2024', personnel: 180000, infrastructure: 55000, marketing: 45000, operations: 30000, research: 50000 },
-  { quarter: 'Q4 2024', personnel: 195000, infrastructure: 60000, marketing: 50000, operations: 35000, research: 55000 },
-];
-
-<StackedLineChart
-  data={[
-    {
-      label: 'Personnel',
-      data: expenseData.map(d => ({ quarter: d.quarter, amount: d.personnel }))
-    },
-    {
-      label: 'Infrastructure',
-      data: expenseData.map(d => ({ quarter: d.quarter, amount: d.infrastructure }))
-    },
-    {
-      label: 'Marketing',
-      data: expenseData.map(d => ({ quarter: d.quarter, amount: d.marketing }))
-    },
-    {
-      label: 'Operations',
-      data: expenseData.map(d => ({ quarter: d.quarter, amount: d.operations }))
-    },
-    {
-      label: 'Research & Development',
-      data: expenseData.map(d => ({ quarter: d.quarter, amount: d.research }))
-    }
-  ]}
-  getPrimary={(datum) => datum.quarter}
-  getSecondary={(datum) => datum.amount}
-  title="Quarterly Expense Breakdown"
-  theme={webLightTheme}
-/>
-```
-
-### Population Demographics
-
-```tsx
-interface DemographicData {
-  year: number;
-  age18_25: number;
-  age26_35: number;
-  age36_45: number;
-  age46_55: number;
-  age56_65: number;
-  age65Plus: number;
-}
-
-const demographicData: DemographicData[] = [
-  { year: 2020, age18_25: 15000, age26_35: 22000, age36_45: 18000, age46_55: 16000, age56_65: 12000, age65Plus: 8000 },
-  { year: 2021, age18_25: 15500, age26_35: 23000, age36_45: 18500, age46_55: 16200, age56_65: 12500, age65Plus: 8500 },
-  { year: 2022, age18_25: 16000, age26_35: 24000, age36_45: 19000, age46_55: 16500, age56_65: 13000, age65Plus: 9000 },
-  { year: 2023, age18_25: 16500, age26_35: 25000, age36_45: 19500, age46_55: 16800, age56_65: 13500, age65Plus: 9500 },
-];
-
-<StackedLineChart
-  data={[
-    {
-      label: '18-25',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age18_25 }))
-    },
-    {
-      label: '26-35',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age26_35 }))
-    },
-    {
-      label: '36-45',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age36_45 }))
-    },
-    {
-      label: '46-55',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age46_55 }))
-    },
-    {
-      label: '56-65',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age56_65 }))
-    },
-    {
-      label: '65+',
-      data: demographicData.map(d => ({ year: d.year.toString(), count: d.age65Plus }))
-    }
-  ]}
-  getPrimary={(datum) => datum.year}
-  getSecondary={(datum) => datum.count}
-  title="Population by Age Group"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-## Data Structure
-
-The component expects data in the following format:
-
-```tsx
-interface ChartSeries<T> {
-  label: string;  // Series name (appears in legend)
-  data: T[];      // Array of data points
-}
-```
-
-Each data point `T` should contain:
-
-- A primary value (x-axis category) - string or number
-- A secondary value (y-axis value) - number
-
-## Stacking Behavior
-
-### Cumulative Values
-
-- Each series is stacked on top of the previous ones
-- The total height at any point represents the sum of all series values
-- Series order matters - bottom series appears first in the data array
-
-### Visual Interpretation
-
-- **Area Size**: Represents the contribution of each series
-- **Total Height**: Shows the cumulative total across all series
-- **Trends**: Individual series trends are visible through area thickness changes
-
-## Use Cases
-
-Stacked line charts are particularly effective for:
-
-### Financial Analysis
-
-- **Revenue Breakdown**: Different revenue streams over time
-- **Expense Categories**: Cost distribution across departments
-- **Investment Portfolio**: Asset allocation changes over time
-
-### Business Metrics
-
-- **Traffic Sources**: Website visitor sources and their evolution
-- **Sales Channels**: Performance of different sales channels
-- **Customer Segments**: Customer base composition over time
-
-### Operational Data
-
-- **Resource Usage**: Computing resources, storage, bandwidth
-- **Production Output**: Different product lines or categories
-- **Team Performance**: Contribution of different teams to goals
-
-### Market Analysis
-
-- **Market Share**: How different competitors' shares change
-- **Product Mix**: Sales composition by product category
-- **Geographic Performance**: Regional contribution to totals
-
-## Interactive Features
-
-### Legend Controls
-
-- Click legend items to show/hide data series
-- Visual feedback on hover states
-- At least one series must remain visible
-- Maintains stacking relationship when series are hidden
-
-### Area Interactions
-
-- Hover effects on stacked areas
-- Rich tooltips showing breakdown of values
-- Smooth transitions and animations
-
-### 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
-// Area styling
-backgroundColor: seriesColor (semi-transparent fill)
-borderColor: seriesColor
-borderWidth: 2
-fill: true
-tension: 0.4 (smooth curves)
-
-// Points
-pointRadius: 3
-pointBackgroundColor: seriesColor
-pointBorderColor: seriesColor
-
-// Typography
-fontFamily: theme.fontFamilyBase
-fontSize: theme.fontSizeBase200
-fontWeight: theme.fontWeightSemibold
-color: theme.colorNeutralForeground1
-
-// Grid and axes
-labelColor: theme.colorNeutralForeground1
-gridColor: theme.colorNeutralStroke2
-```
-
-## Performance Optimizations
-
-The component includes several React optimizations:
-
-````tsx
-// Memoized color calculations
-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]);
-
-// Memoized category aggregation
-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]);
-
-// Memoized chart data transformation
-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) : 0;
-        }),
-        borderColor: seriesColors[series.label],
-        backgroundColor: seriesColors[series.label],
-        fill: true,
-        tension: 0.4,
-        pointRadius: 3,
-      })),
-  };
-}, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);

package/src/charts/stackedLineChart/StackedLineChart.tsx

@@ -1,188 +0,0 @@
-import {
-  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 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(ChartDataLabels);
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Tooltip,
-  Legend,
-  Title
-);
-
-export interface StackedLineChartProps<T> {
-  data: { label: string; data: T[] }[]; 
-  getPrimary: (datum: T) => string | number;
-  getSecondary: (datum: T) => number;
-  title?: string;
-    showDataLabels?: boolean;
-    theme?: Theme;
-}
-
-export default function StackedLineChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  title,
-  showDataLabels = false,
-  theme = webLightTheme,
-}: StackedLineChartProps<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) : 0;
-          }),
-          borderColor: seriesColors[series.label],
-          backgroundColor: seriesColors[series.label],
-          fill: true,
-          tension: 0.4,
-          pointRadius: 3,
-        })),
-    };
-  }, [
-    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 = useMemo<ChartOptions<'line'>>(() => ({
-    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: true,
-            ticks: {
-                color: labelColor,
-                font: { family: fontFamily, size: fontSize },
-            },
-            grid: { color: gridColor },
-        },
-        y: {
-            stacked: true,
-            ticks: {
-                color: labelColor,
-                font: { family: fontFamily, size: fontSize },
-            },
-            grid: { color: gridColor },
-        },
-    },
-}), [
-    theme,
-    title,
-    showDataLabels,
-    createFluentTooltip,
-    labelColor,
-    fontFamily,
-    fontSize,
-    gridColor,
-]);
-
-  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>
-  );
-}

package/src/charts/stackedLineChart/index.ts

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