@spteck/fluentui-react-charts 0.1.8

package/package.json

@@ -0,0 +1,66 @@
+{
+  "version": "0.1.8",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "keywords": [
+    "fluentui",
+    "react",
+    "charts",
+    "visualization"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "prepare": "tsdx build",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "tsdx lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "name": "@spteck/fluentui-react-charts",
+  "author": "João Mendes",
+  
+  "module": "dist/fluentui-react-charts.esm.js",
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.2.0",
+     
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "husky": "^9.1.7",
+    "size-limit": "^11.2.0",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.8.1",
+    "typescript": "^3.9.10"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.13.5",
+    "@fluentui/react-components": "^9.66.2",
+    "@juggle/resize-observer": "^3.4.0",
+    "chart.js": "^4.5.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-charts": "^3.0.0-beta.57",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.15.4"
+  }
+}

package/src/charts/BarChart/BarChart.tsx

@@ -0,0 +1,227 @@
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { createAxisLabelFormatter, useGraphUtils } from '../../hooks/useGraphUtils';
+
+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 } = useGraphUtils(
+    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

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

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