@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './components';
 export * from './hooks';
 export { useChartUtils as useGraphUtils } from './hooks/useChartUtils';
 export * from './models';
+export * from './charts';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.7",
+  "version": "1.0.9",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,8 +10,8 @@
     "visualization"
   ],
   "files": [
-    "dist",
-    "src"
+    "dist"
+    
   ],
   "engines": {
     "node": ">=10"
@@ -54,11 +54,11 @@
     "@fluentui/react-components": "^9.66.2",
     "@iconify/react": "^6.0.0",
     "@juggle/resize-observer": "^3.4.0",
-    "chart.js": "^4.5.0",
+    "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "idb": "^8.0.3",
     "react": "^18.3.1",
-    "react-chartjs-2": "^5.3.0",
+    "react-chartjs-2": "^5.3.1",
     "react-charts": "^3.0.0-beta.57",
     "react-dom": "^18.3.1",
     "recharts": "^2.15.4"

package/src/charts/BarChart/BarChart.tsx

@@ -1,227 +0,0 @@
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  ChartOptions,
-  Legend,
-  LinearScale,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import React, { useMemo, useState } from 'react';
-import { createAxisLabelFormatter, useChartUtils } from '../../hooks/useChartUtils';
-
-import { Bar } from 'react-chartjs-2';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import RenderLegend from '../../components/RenderLegend/RenderLegend';
-import { Theme } from '@fluentui/react-components';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Tooltip,
-  Legend,
-  ChartDataLabels,
-  Title
-);
-
-export interface BarProps<T> {
-  data: { label: string; data: T[]; type?: 'bar' | 'line' }[];
-  getPrimary: (datum: T) => string | number;
-  getSecondary: (datum: T) => number;
-  stacked?: boolean;
-  title?: string;
-  showDatalabels?: boolean;
-  theme: Theme;
-}
-
-export default function BarChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  title,
-  showDatalabels = false,
-  stacked = false,
-  theme,
-}: BarProps<T>) {
-  const [visibleSeries, setVisibleSeries] = useState(() =>
-    data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
-  );
-
-  const { lightenColor, getFluentPalette, createFluentTooltip } = useChartUtils(
-    theme
-  );
-  const styles = useGraphGlobalStyles();
-  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]);
-
-  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;
-    });
-  };
-
-  // Extract all unique x-axis categories (from all series)
-  const allCategories = useMemo(() => {
-    const categorySet = new Set<string | number>();
-    data.forEach(series => {
-      series.data.forEach(datum => {
-        categorySet.add(getPrimary(datum));
-      });
-    });
-    return Array.from(categorySet);
-  }, [data, getPrimary]);
-
-  // Construct Chart.js datasets
-  const chartData = useMemo(() => {
-    return {
-      labels: allCategories,
-      datasets: data
-        .filter(series => visibleSeries.includes(series.label))
-        .map(series => ({
-          label: series.label,
-          backgroundColor: seriesColors[series.label],
-          data: allCategories.map(cat => {
-            const found = series.data.find(d => getPrimary(d) === cat);
-            return found ? getSecondary(found) : 0;
-          }),
-          // Assign y-axis based on series type when stacked
-          yAxisID: stacked ? (series.type === 'line' ? 'y1' : 'y') : 'y',
-        })),
-    };
-  }, [data, visibleSeries, allCategories, seriesColors, stacked]);
-
-  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'> = 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'>(theme),
-      },
-      scales: {
-        x: {
-          stacked,
-          ticks: {
-            callback: createAxisLabelFormatter({ maxLength: 10 }),
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize,
-            },
-          },
-          grid: {
-            color: gridColor,
-          },
-        },
-        y: {
-          type: 'linear',
-          position: 'left',
-          stacked,
-          ticks: {
-            callback: createAxisLabelFormatter({ maxLength: 10 }),
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize,
-            },
-          },
-          grid: {
-            color: gridColor,
-          },
-        },
-        ...(stacked && {
-          y1: {
-            type: 'linear',
-            position: 'right',
-            ticks: {
-              callback: createAxisLabelFormatter({ maxLength: 10 }),
-              color: labelColor,
-              font: {
-                family: fontFamily,
-                size: fontSize,
-              },
-            },
-            grid: {
-              drawOnChartArea: false,
-            },
-          },
-        }),
-      },
-    }),
-    [
-      title,
-      showDatalabels,
-      theme,
-      fontFamily,
-      fontSize,
-      labelColor,
-      gridColor,
-      stacked,
-      createFluentTooltip,
-    ]
-  );
-
-  return (
-    <div className={styles.chartWithLegend}>
-      <div className={styles.chartArea}>
-        <Bar data={chartData} options={options} />
-      </div>
-      <div className={styles.legendArea}>
-        <RenderLegend
-          data={data}
-          visibleSeries={visibleSeries}
-          seriesColors={seriesColors}
-          toggleSeries={toggleSeries}
-        />
-      </div>
-    </div>
-  );
-}

package/src/charts/BarChart/README.MD

@@ -1,335 +0,0 @@
-# BarChart Component
-
-A versatile and interactive bar chart component built with Chart.js and Fluent UI React. This component supports multiple series, stacking, mixed chart types (bar + line), and provides an intuitive legend interface.
-
-## Features
-
-- **Multiple Series Support**: Display multiple data series with different colors
-- **Mixed Chart Types**: Support for both bar and line series in the same chart
-- **Interactive Legend**: Toggle series visibility with click interactions
-- **Stacked Charts**: Option to stack bars for comparative analysis
-- **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**: Fluent UI styled tooltips with rich information
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { BarChart } from './components/BarChart/BarChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface SalesData {
-  month: string;
-  revenue: number;
-}
-
-const salesData: SalesData[] = [
-  { month: 'Jan', revenue: 10000 },
-  { month: 'Feb', revenue: 15000 },
-  { month: 'Mar', revenue: 12000 },
-  { month: 'Apr', revenue: 18000 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '400px' }}>
-      <BarChart
-        data={[
-          { label: 'Monthly Sales', data: salesData }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getSecondary={(datum) => datum.revenue}
-        title="Sales Performance"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### BarProps<T>
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `{ label: string; data: T[]; type?: 'bar' \| 'line' }[]` | Yes | - | Array of data series with labels, data points, and optional chart type |
-| `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 |
-| `stacked` | `boolean` | No | `false` | Whether to stack the bars and enable dual y-axes for mixed types |
-| `title` | `string` | No | - | Chart title displayed at the top |
-| `showDatalabels` | `boolean` | No | `false` | Whether to show data values on chart elements |
-| `theme` | `Theme` | Yes | - | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Multiple Series
-
-```tsx
-interface ProductData {
-  quarter: string;
-  product1: number;
-  product2: number;
-  product3: number;
-}
-
-const productData: ProductData[] = [
-  { quarter: 'Q1', product1: 15000, product2: 12000, product3: 8000 },
-  { quarter: 'Q2', product1: 18000, product2: 14000, product3: 9500 },
-  { quarter: 'Q3', product1: 16500, product2: 13500, product3: 8800 },
-  { quarter: 'Q4', product1: 20000, product2: 16000, product3: 11000 },
-];
-
-<BarChart
-  data={[
-    { 
-      label: 'Product A', 
-      data: productData.map(d => ({ quarter: d.quarter, value: d.product1 }))
-    },
-    { 
-      label: 'Product B', 
-      data: productData.map(d => ({ quarter: d.quarter, value: d.product2 }))
-    },
-    { 
-      label: 'Product C', 
-      data: productData.map(d => ({ quarter: d.quarter, value: d.product3 }))
-    }
-  ]}
-  getPrimary={(datum) => datum.quarter}
-  getSecondary={(datum) => datum.value}
-  title="Quarterly Product Sales"
-  showDatalabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Stacked Bar Chart
-
-```tsx
-<BarChart
-  data={[
-    { label: 'Desktop Sales', data: salesData },
-    { label: 'Mobile Sales', data: salesData },
-    { label: 'Tablet Sales', data: salesData }
-  ]}
-  getPrimary={(datum) => datum.region}
-  getSecondary={(datum) => datum.amount}
-  stacked={true}
-  title="Sales by Platform and Region"
-  theme={webLightTheme}
-/>
-```
-
-### Mixed Chart Types (Bar + Line)
-
-```tsx
-<BarChart
-  data={[
-    { 
-      label: 'Revenue', 
-      data: monthlyData, 
-      type: 'bar' 
-    },
-    { 
-      label: 'Growth Rate', 
-      data: monthlyData, 
-      type: 'line' 
-    }
-  ]}
-  getPrimary={(datum) => datum.month}
-  getSecondary={(datum) => datum.value}
-  stacked={true} // Enables dual y-axes
-  title="Revenue vs Growth Rate"
-  theme={webLightTheme}
-/>
-```
-
-### Dark Theme
-
-```tsx
-import { webDarkTheme } from '@fluentui/react-components';
-
-<BarChart
-  data={chartData}
-  getPrimary={(datum) => datum.category}
-  getSecondary={(datum) => datum.value}
-  title="Dark Theme Chart"
-  theme={webDarkTheme}
-/>
-```
-
-## 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
-  type?: 'bar' | 'line'; // Chart type (default: 'bar')
-}
-```
-
-Each data point `T` should contain:
-- A primary value (x-axis category) - string or number
-- A secondary value (y-axis value) - number
-
-## Features in Detail
-
-### Interactive Legend
-- Click legend items to show/hide series
-- At least one series must remain visible
-- Colors automatically assigned from Fluent UI theme palette
-- Visual feedback on hover and selection states
-
-### Stacked Mode
-When `stacked={true}`:
-- Bar series stack on the left y-axis
-- Line series display on the right y-axis (when mixed with bars)
-- Enables comparative analysis between different data types
-
-### Responsive Behavior
-- Chart automatically resizes to fit container
-- Legend adapts to available space
-- Maintains readability across different screen sizes
-- Uses CSS Grid for optimal layout
-
-### Theme Integration
-- Automatically uses theme colors, fonts, and spacing
-- Supports both light and dark themes
-- Consistent with Fluent UI design language
-- Accessible color contrasts
-
-## Styling
-
-The component uses Fluent UI theme tokens:
-
-```tsx
-// Colors from theme palette
-const seriesColors = getFluentPalette(theme);
-
-// Typography
-font-family: theme.fontFamilyBase;
-font-size: theme.fontSizeBase200;
-font-weight: theme.fontWeightSemibold;
-
-// Colors
-color: theme.colorNeutralForeground1;
-grid-color: theme.colorNeutralStroke2;
-```
-
-## Performance Optimizations
-
-The component includes several performance optimizations:
-
-- `useMemo` for expensive color calculations
-- `useMemo` for chart data transformation
-- `useMemo` for chart options configuration
-- Efficient series visibility state management
-- Minimal re-renders on data changes
-
-## Examples
-
-### Sales Dashboard
-```tsx
-interface SalesMetrics {
-  region: string;
-  currentYear: number;
-  previousYear: number;
-}
-
-<BarChart
-  data={[
-    { label: '2024', data: salesMetrics },
-    { label: '2023', data: salesMetrics }
-  ]}
-  getPrimary={(datum) => datum.region}
-  getSecondary={(datum) => datum.currentYear}
-  title="Sales by Region - Year over Year"
-  showDatalabels={true}
-/>
-```
-
-### Performance Metrics
-```tsx
-interface PerformanceData {
-  metric: string;
-  actual: number;
-  target: number;
-}
-
-<BarChart
-  data={[
-    { label: 'Actual', data: performanceData, type: 'bar' },
-    { label: 'Target', data: performanceData, type: 'line' }
-  ]}
-  getPrimary={(datum) => datum.metric}
-  getSecondary={(datum) => datum.actual}
-  stacked={true}
-  title="Performance vs Targets"
-/>
-```
-
-## Accessibility
-
-- Keyboard navigation support
-- Screen reader compatible
-- High contrast theme support
-- Focus indicators on interactive elements
-- ARIA labels for chart elements
-
-## Browser Support
-
-- Modern browsers with ES6+ support
-- Canvas API required for Chart.js
-- ResizeObserver for responsive features
-- CSS Grid for layout
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Chart not rendering**: Ensure container has explicit width and height
-2. **Data not displaying**: Verify `getPrimary` and `getSecondary` return valid values
-3. **Legend not working**: Check that series labels are unique
-4. **Stacked mode issues**: Ensure mixed types are properly configured
-5. **Theme not applied**: Verify theme object is properly imported
-
-### Performance Tips
-
-- Limit data points for optimal performance (< 500 points per series)
-- Use `React.memo` for parent components when data changes frequently
-- Consider data virtualization for very large datasets
-- Debounce resize events if needed
-
-### Debug Mode
-
-```tsx
-// Add this to see chart configuration
-console.log('Chart Data:', chartData);
-console.log('Chart Options:', options);
-```
-
-## API Reference
-
-### Utility Functions
-
-The component uses several utility functions from `useGraphUtils`:
-
-- `getFluentPalette(theme)`: Gets color palette from theme
-- `lightenColor(color, amount)`: Lightens colors for better contrast
-- `createFluentTooltip(theme)`: Creates theme-aware tooltips
-- `createAxisLabelFormatter(options)`: Formats axis labels
-
-## License
-
-This component is part of the FluentUI React Graphs library.

package/src/charts/BarChart/index.ts

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