@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/charts/areaChart/README.MD

@@ -1,236 +0,0 @@
-# AreaChart Component
-
-A flexible and customizable area chart component built with Chart.js and Fluent UI React. This component provides smooth area visualizations with interactive legends and responsive design.
-
-## Features
-
-- **Interactive Legend**: Toggle series visibility by clicking legend items
-- **Fluent UI Integration**: Seamlessly integrates with Fluent UI themes
-- **Responsive Design**: Automatically adapts to container size
-- **Customizable**: Support for titles, data labels, and stacked charts
-- **TypeScript Support**: Full TypeScript support with generic types
-- **Smooth Animations**: Built-in smooth transitions and hover effects
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { AreaChart } from './components/AreaChart/AreaChart';
-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' }}>
-      <AreaChart
-        data={[
-          { label: 'Sales', data: salesData }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getSecondary={(datum) => datum.revenue}
-        title="Monthly Sales Revenue"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### AreaChartProps<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 value 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 areas |
-| `title` | `string` | No | - | Chart title displayed at the top |
-| `showDatalabels` | `boolean` | No | `false` | Whether to show data labels on data points |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme for styling |
-
-## Advanced Usage
-
-### Multiple Series
-
-```tsx
-interface SalesData {
-  month: string;
-  product1: number;
-  product2: number;
-}
-
-const salesData: SalesData[] = [
-  { month: 'Jan', product1: 10000, product2: 8000 },
-  { month: 'Feb', product1: 15000, product2: 12000 },
-  { month: 'Mar', product1: 12000, product2: 9000 },
-];
-
-<AreaChart
-  data={[
-    { 
-      label: 'Product 1', 
-      data: salesData.map(d => ({ month: d.month, value: d.product1 }))
-    },
-    { 
-      label: 'Product 2', 
-      data: salesData.map(d => ({ month: d.month, value: d.product2 }))
-    }
-  ]}
-  getPrimary={(datum) => datum.month}
-  getSecondary={(datum) => datum.value}
-  title="Product Sales Comparison"
-  theme={webLightTheme}
-/>
-```
-
-### Stacked Areas
-
-```tsx
-<AreaChart
-  data={[
-    { label: 'Desktop', data: trafficData },
-    { label: 'Mobile', data: trafficData },
-    { label: 'Tablet', data: trafficData }
-  ]}
-  getPrimary={(datum) => datum.date}
-  getSecondary={(datum) => datum.visits}
-  stacked={true}
-  title="Website Traffic by Device"
-  showDatalabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Custom Theme
-
-```tsx
-import { webDarkTheme } from '@fluentui/react-components';
-
-<AreaChart
-  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 ChartData<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) - can be string or number
-- A secondary value (y-axis) - must be number
-
-## Styling
-
-The component uses Fluent UI theme tokens for consistent styling:
-
-- **Colors**: Automatically generated from theme palette
-- **Typography**: Uses theme font families and sizes
-- **Spacing**: Follows Fluent UI spacing guidelines
-- **Interaction**: Hover states and animations
-
-## Interactive Features
-
-### Legend Interaction
-- Click legend items to toggle series visibility
-- At least one series must remain visible
-- Colors are automatically assigned from the theme palette
-
-### Responsive Behavior
-- Chart automatically resizes to fit container
-- Legend adapts to available space
-- Maintains aspect ratio and readability
-
-## Performance Considerations
-
-The component uses React optimization techniques:
-- `useMemo` for expensive calculations
-- `useCallback` for event handlers
-- Efficient re-rendering when data changes
-
-## Browser Support
-
-- Modern browsers with ES6+ support
-- Canvas API required for Chart.js
-- ResizeObserver for responsive features
-
-## Examples
-
-### Time Series Data
-```tsx
-interface TimeSeriesData {
-  timestamp: Date;
-  value: number;
-}
-
-<AreaChart
-  data={[{ label: 'Temperature', data: temperatureData }]}
-  getPrimary={(datum) => datum.timestamp.toLocaleDateString()}
-  getSecondary={(datum) => datum.value}
-  title="Temperature Over Time"
-/>
-```
-
-### Percentage Data
-```tsx
-interface PercentageData {
-  category: string;
-  percentage: number;
-}
-
-<AreaChart
-  data={[{ label: 'Market Share', data: marketData }]}
-  getPrimary={(datum) => datum.category}
-  getSecondary={(datum) => datum.percentage}
-  title="Market Share Distribution"
-  showDatalabels={true}
-/>
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Chart not rendering**: Ensure container has explicit width and height
-2. **Data not showing**: Check that `getPrimary` and `getSecondary` return valid values
-3. **Legend overlapping**: Increase container width or adjust legend positioning
-4. **Theme not applied**: Verify theme object is properly imported and passed
-
-### Performance Tips
-
-- Limit data points for better performance (< 1000 points recommended)
-- Use `useMemo` when transforming data props
-- Consider virtualization for very large datasets
-
-## License
-
-This component is part of the FluentUI React Graphs library.

package/src/charts/areaChart/index.ts

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

package/src/charts/barHorizontalChart/BarHotizontalChart.tsx

@@ -1,200 +0,0 @@
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  ChartOptions,
-  Legend,
-  LinearScale,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import React, { useMemo, useState } from 'react';
-
-import { Bar } from 'react-chartjs-2';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import RenderLegend from '../../components/RenderLegend/RenderLegend';
-import { Theme } from '@fluentui/react-theme';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Tooltip,
-  Legend,
-  Title,
-  ChartDataLabels,
-  
-   
-);
-
-
-
-export interface BarHorizontalProps<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 BarHorizontalChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  stacked = false,
-  showDatalabels = false,
-    title,
-    theme
-}: BarHorizontalProps<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]);
-
-  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 categorySet = new Set<string | number>();
-    data.forEach(series => {
-      series.data.forEach(datum => {
-        categorySet.add(getPrimary(datum));
-      });
-    });
-    return Array.from(categorySet);
-  }, [data, getPrimary]);
-
-  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;
-          }),
-        })),
-    };
-  }, [data, visibleSeries, allCategories, 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'> = useMemo(() =>    ({
-    indexAxis: 'y',
-    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: {
-          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}>
-            <Bar data={chartData} options={options} />
-          </div>
-          <div className={styles.legendArea} >
-            <RenderLegend
-              data={data}
-              visibleSeries={visibleSeries}
-              seriesColors={seriesColors}
-              toggleSeries={toggleSeries}
-            />
-          </div>
-        </div>
-  
-  );
-}

package/src/charts/barHorizontalChart/README.MD

@@ -1,278 +0,0 @@
-# BarHorizontalChart Component
-
-A flexible horizontal bar chart component built with Chart.js and Fluent UI React. This component displays data as horizontal bars, making it ideal for displaying categories with longer names or when you want to emphasize the comparison of values across different categories.
-
-## Features
-
-- **Horizontal Orientation**: Bars extend horizontally for better readability of category labels
-- **Multiple Series Support**: Display multiple data series with different colors
-- **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 { BarHorizontalChart } from './components/barHorizontalChart/BarHorizontalChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface ProductData {
-  product: string;
-  sales: number;
-}
-
-const salesData: ProductData[] = [
-  { product: 'Laptop Computers', sales: 15000 },
-  { product: 'Desktop Computers', sales: 8000 },
-  { product: 'Tablets', sales: 12000 },
-  { product: 'Smartphones', sales: 25000 },
-  { product: 'Smart Watches', sales: 6000 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '400px' }}>
-      <BarHorizontalChart
-        data={[
-          { label: 'Product Sales', data: salesData }
-        ]}
-        getPrimary={(datum) => datum.product}
-        getSecondary={(datum) => datum.sales}
-        title="Product Sales Performance"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### BarHorizontalProps<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 y-axis category from each data point |
-| `getSecondary` | `(datum: T) => number` | Yes | - | Function to extract the x-axis value from each data point |
-| `stacked` | `boolean` | No | `false` | Whether to stack the bars horizontally |
-| `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 Comparison
-
-```tsx
-interface RegionData {
-  region: string;
-  q1Sales: number;
-  q2Sales: number;
-  q3Sales: number;
-  q4Sales: number;
-}
-
-const regionData: RegionData[] = [
-  { region: 'North America', q1Sales: 120000, q2Sales: 135000, q3Sales: 125000, q4Sales: 150000 },
-  { region: 'Europe', q1Sales: 95000, q2Sales: 105000, q3Sales: 98000, q4Sales: 115000 },
-  { region: 'Asia Pacific', q1Sales: 85000, q2Sales: 92000, q3Sales: 88000, q4Sales: 105000 },
-  { region: 'Latin America', q1Sales: 45000, q2Sales: 52000, q3Sales: 48000, q4Sales: 58000 },
-];
-
-<BarHorizontalChart
-  data={[
-    { 
-      label: 'Q1 2024', 
-      data: regionData.map(d => ({ region: d.region, value: d.q1Sales }))
-    },
-    { 
-      label: 'Q2 2024', 
-      data: regionData.map(d => ({ region: d.region, value: d.q2Sales }))
-    },
-    { 
-      label: 'Q3 2024', 
-      data: regionData.map(d => ({ region: d.region, value: d.q3Sales }))
-    },
-    { 
-      label: 'Q4 2024', 
-      data: regionData.map(d => ({ region: d.region, value: d.q4Sales }))
-    }
-  ]}
-  getPrimary={(datum) => datum.region}
-  getSecondary={(datum) => datum.value}
-  title="Quarterly Sales by Region"
-  showDatalabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Stacked Horizontal Bars
-
-```tsx
-interface BudgetData {
-  department: string;
-  allocated: number;
-  spent: number;
-  remaining: number;
-}
-
-<BarHorizontalChart
-  data={[
-    { label: 'Allocated', data: budgetData },
-    { label: 'Spent', data: budgetData },
-    { label: 'Remaining', data: budgetData }
-  ]}
-  getPrimary={(datum) => datum.department}
-  getSecondary={(datum) => datum.allocated} // or spent/remaining based on series
-  stacked={true}
-  title="Department Budget Analysis"
-  theme={webLightTheme}
-/>
-```
-
-### Survey Results Visualization
-
-```tsx
-interface SurveyData {
-  question: string;
-  stronglyAgree: number;
-  agree: number;
-  neutral: number;
-  disagree: number;
-  stronglyDisagree: number;
-}
-
-<BarHorizontalChart
-  data={[
-    { label: 'Strongly Agree', data: surveyData },
-    { label: 'Agree', data: surveyData },
-    { label: 'Neutral', data: surveyData },
-    { label: 'Disagree', data: surveyData },
-    { label: 'Strongly Disagree', data: surveyData }
-  ]}
-  getPrimary={(datum) => datum.question}
-  getSecondary={(datum) => datum.stronglyAgree} // adjust per series
-  stacked={true}
-  title="Customer Satisfaction Survey Results"
-  showDatalabels={true}
-  theme={webLightTheme}
-/>
-```
-
-## When to Use Horizontal Bar Charts
-
-Horizontal bar charts are particularly effective for:
-
-### Long Category Names
-
-```tsx
-// Perfect for lengthy category labels
-const categoryData = [
-  { category: 'Enterprise Software Solutions', value: 450000 },
-  { category: 'Cloud Infrastructure Services', value: 380000 },
-  { category: 'Cybersecurity and Compliance', value: 290000 },
-  { category: 'Data Analytics and Business Intelligence', value: 320000 },
-];
-```
-
-### Ranking and Comparison
-
-```tsx
-// Great for showing rankings
-const performanceData = [
-  { employee: 'Alice Johnson - Senior Developer', score: 95 },
-  { employee: 'Bob Smith - Product Manager', score: 88 },
-  { employee: 'Carol Davis - UX Designer', score: 92 },
-  { employee: 'David Wilson - DevOps Engineer', score: 85 },
-];
-```
-
-### Progress Tracking
-
-```tsx
-// Ideal for progress visualization
-const projectProgress = [
-  { phase: 'Requirements Gathering', completion: 100 },
-  { phase: 'Design & Architecture', completion: 85 },
-  { phase: 'Development', completion: 60 },
-  { phase: 'Testing & QA', completion: 25 },
-  { phase: 'Deployment', completion: 0 },
-];
-```
-
-## 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 (y-axis category) - string or number
-- A secondary value (x-axis value) - number
-
-## Styling and Theme Integration
-
-The component automatically applies Fluent UI theme styles:
-
-```tsx
-// Typography
-fontFamily: theme.fontFamilyBase
-fontSize: theme.fontSizeBase200
-fontWeight: theme.fontWeightSemibold
-
-// Colors
-labelColor: theme.colorNeutralForeground1
-gridColor: theme.colorNeutralStroke2
-seriesColors: Derived from theme palette
-```
-
-## Interactive Features
-
-### Legend Controls
-
-- Click legend items to show/hide data series
-- Visual feedback on hover states
-- At least one series must remain visible
-- Colors automatically assigned from theme palette
-
-### Responsive Layout
-
-- Chart automatically resizes to container dimensions
-- Legend positioning adapts to available space
-- Maintains readability across different screen sizes
-
-## Performance Optimizations
-
-The component includes several React optimizations:
-
-````tsx
-// Memoized calculations
-const seriesColors = useMemo(() => {
-  // Color calculation logic
-}, [data, theme]);
-
-const chartData = useMemo(() => {
-  // Chart data transformation
-}, [data, visibleSeries, allCategories, seriesColors]);
-
-const options = useMemo(() => {
-  // Chart options configuration
-}, [title, showDatalabels, theme, ...]);

package/src/charts/barHorizontalChart/index.ts

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