@spteck/fluentui-react-charts 0.1.8

package/src/charts/bubbleChart/BubbleChart.tsx

@@ -0,0 +1,184 @@
+import {
+  BubbleDataPoint,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  PointElement,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+
+import { Bubble } from 'react-chartjs-2';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
+import { useGraphUtils } from '../../hooks/useGraphUtils';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  Tooltip,
+  Legend,
+  ChartDataLabels,
+  Title
+);
+
+export interface BubbleChartProps<T> {
+  data: { label: string; data: T[] }[];
+  getPrimary: (datum: T) => string | number | Date;
+  getSecondary: (datum: T) => number;
+  getRadius: (datum: T) => number;
+  title?: string;
+  showDataLabels?: boolean;
+  theme?: Theme;
+}
+
+export default function BubbleChart<T extends object>({
+  data,
+  getPrimary,
+  getSecondary,
+  getRadius,
+  showDataLabels,
+  title,
+  theme = webLightTheme,
+}: BubbleChartProps<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, 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 chartData = useMemo(() => {
+    return {
+      datasets: data
+        .filter(series => visibleSeries.includes(series.label))
+        .map(series => ({
+          label: series.label,
+          data: series.data.map(d => ({
+            x: getPrimary(d),
+            y: getSecondary(d),
+            r: getRadius(d),
+          })) as BubbleDataPoint[],
+          backgroundColor: seriesColors[series.label],
+          borderColor: theme.colorNeutralStroke1,
+          borderWidth: 1,
+          hoverBorderWidth: 2,
+        })),
+    };
+  }, [data, visibleSeries, getPrimary, getSecondary, getRadius, 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<'bubble'> = 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<'bubble'>(theme),
+    },
+    scales: {
+      x: {
+        type:
+          typeof getPrimary(data[0]?.data[0]) === 'number'
+            ? 'linear'
+            : 'category',
+        ticks: {
+          color: labelColor,
+          font: { family: fontFamily, size: fontSize },
+        },
+        grid: { color: gridColor },
+      },
+      y: {
+        ticks: {
+          color: labelColor,
+          font: { family: fontFamily, size: fontSize },
+        },
+        grid: { color: gridColor },
+      },
+    },
+  }), [
+    title,
+    showDataLabels,
+    theme,
+    getPrimary,
+    getSecondary,
+    data,
+    fontFamily,
+    fontSize,
+    labelColor,
+    gridColor,
+    createFluentTooltip,
+  ]);
+
+  return (
+    <>
+      <div className={styles.chartWithLegend}>
+        <div className={styles.chartArea}>
+          <Bubble data={chartData} options={options} />
+        </div>
+        <div className={styles.legendArea}>
+          <RenderLegend
+            data={data}
+            visibleSeries={visibleSeries}
+            seriesColors={seriesColors}
+            toggleSeries={toggleSeries}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

package/src/charts/bubbleChart/README.MD

@@ -0,0 +1,275 @@
+# BubbleChart Component
+
+A powerful bubble chart component built with Chart.js and Fluent UI React. This component visualizes three-dimensional data where each bubble represents a data point with X and Y coordinates, and the bubble size represents a third dimension, making it perfect for complex data analysis and correlation visualization.
+
+## Features
+
+- **Three-Dimensional Data Visualization**: Display X, Y, and size (radius) data in a single chart
+- **Multiple Series Support**: Compare multiple datasets with different colored bubble series
+- **Interactive Legend**: Toggle series visibility with click interactions
+- **Flexible Data Types**: Support for numeric, string, and Date values on axes
+- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
+- **Data Labels**: Optional display of values directly on bubbles
+- **Responsive Design**: Automatically adapts to container dimensions
+- **TypeScript Support**: Full TypeScript support with generic types
+- **Custom Tooltips**: Rich tooltips showing all three data dimensions
+- **Dynamic Scaling**: Automatic axis scaling based on data ranges
+
+## Installation
+
+```bash
+npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { BubbleChart } from './components/bubbleChart/BubbleChart';
+import { webLightTheme } from '@fluentui/react-components';
+
+interface SalesData {
+  product: string;
+  revenue: number;
+  profit: number;
+  marketShare: number;
+}
+
+const salesData: SalesData[] = [
+  { product: 'Product A', revenue: 150000, profit: 45000, marketShare: 15 },
+  { product: 'Product B', revenue: 200000, profit: 60000, marketShare: 22 },
+  { product: 'Product C', revenue: 120000, profit: 30000, marketShare: 12 },
+  { product: 'Product D', revenue: 180000, profit: 50000, marketShare: 18 },
+];
+
+function App() {
+  return (
+    <div style={{ width: '800px', height: '600px' }}>
+      <BubbleChart
+        data={[
+          { label: 'Product Performance', data: salesData }
+        ]}
+        getPrimary={(datum) => datum.revenue}     // X-axis: Revenue
+        getSecondary={(datum) => datum.profit}   // Y-axis: Profit
+        getRadius={(datum) => datum.marketShare} // Bubble size: Market Share
+        title="Product Performance Analysis"
+        theme={webLightTheme}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### BubbleChartProps<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 \| Date` | 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 |
+| `getRadius` | `(datum: T) => number` | Yes | - | Function to extract the bubble size from each data point |
+| `title` | `string` | No | - | Chart title displayed at the top |
+| `showDataLabels` | `boolean` | No | `false` | Whether to show data labels on bubbles |
+| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
+
+## Advanced Usage
+
+### Multiple Series Comparison
+
+```tsx
+interface CompanyMetrics {
+  company: string;
+  employees: number;
+  revenue: number;
+  satisfaction: number;
+}
+
+const techCompanies: CompanyMetrics[] = [
+  { company: 'TechCorp', employees: 5000, revenue: 2000000, satisfaction: 85 },
+  { company: 'DataSoft', employees: 3000, revenue: 1500000, satisfaction: 78 },
+  { company: 'CloudTech', employees: 8000, revenue: 3500000, satisfaction: 92 },
+];
+
+const startups: CompanyMetrics[] = [
+  { company: 'StartupA', employees: 50, revenue: 100000, satisfaction: 88 },
+  { company: 'StartupB', employees: 80, revenue: 150000, satisfaction: 82 },
+  { company: 'StartupC', employees: 120, revenue: 200000, satisfaction: 90 },
+];
+
+<BubbleChart
+  data={[
+    { label: 'Established Companies', data: techCompanies },
+    { label: 'Startups', data: startups }
+  ]}
+  getPrimary={(datum) => datum.employees}      // X-axis: Number of employees
+  getSecondary={(datum) => datum.revenue}     // Y-axis: Revenue
+  getRadius={(datum) => datum.satisfaction}   // Bubble size: Satisfaction score
+  title="Company Performance: Size vs Revenue vs Satisfaction"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Financial Portfolio Analysis
+
+```tsx
+interface Investment {
+  asset: string;
+  risk: number;      // 1-10 scale
+  return: number;    // Percentage
+  allocation: number; // Portfolio percentage
+}
+
+const portfolioData: Investment[] = [
+  { asset: 'Stocks', risk: 7, return: 12.5, allocation: 40 },
+  { asset: 'Bonds', risk: 3, return: 4.2, allocation: 30 },
+  { asset: 'Real Estate', risk: 5, return: 8.1, allocation: 20 },
+  { asset: 'Commodities', risk: 8, return: 6.8, allocation: 10 },
+];
+
+<BubbleChart
+  data={[{ label: 'Investment Portfolio', data: portfolioData }]}
+  getPrimary={(datum) => datum.risk}        // X-axis: Risk level
+  getSecondary={(datum) => datum.return}    // Y-axis: Expected return
+  getRadius={(datum) => datum.allocation}   // Bubble size: Portfolio allocation
+  title="Portfolio Risk vs Return Analysis"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Time-based Analysis
+
+```tsx
+interface ProjectData {
+  project: string;
+  startDate: Date;
+  duration: number;  // Days
+  budget: number;    // Dollars
+}
+
+const projects: ProjectData[] = [
+  { project: 'Project Alpha', startDate: new Date('2024-01-15'), duration: 90, budget: 150000 },
+  { project: 'Project Beta', startDate: new Date('2024-02-01'), duration: 120, budget: 200000 },
+  { project: 'Project Gamma', startDate: new Date('2024-03-10'), duration: 60, budget: 100000 },
+];
+
+<BubbleChart
+  data={[{ label: 'Project Timeline', data: projects }]}
+  getPrimary={(datum) => datum.startDate}   // X-axis: Start date
+  getSecondary={(datum) => datum.duration}  // Y-axis: Duration
+  getRadius={(datum) => datum.budget / 5000} // Bubble size: Budget (scaled)
+  title="Project Timeline vs Duration vs Budget"
+  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) - string, number, or Date
+- A secondary value (Y-axis) - number
+- A radius value (bubble size) - number
+
+## Use Cases
+
+Bubble charts are particularly effective for:
+
+### Business Intelligence
+
+- **Market Analysis**: Market size vs growth rate vs market share
+- **Product Portfolio**: Price vs demand vs profit margin
+- **Customer Segmentation**: Spend vs frequency vs lifetime value
+
+### Scientific Data
+
+- **Research Results**: Variable A vs Variable B vs sample size
+- **Performance Metrics**: Speed vs accuracy vs resource usage
+- **Correlation Analysis**: Three-variable relationship visualization
+
+### Financial Analysis
+
+- **Investment Comparison**: Risk vs return vs investment amount
+- **Asset Allocation**: Volatility vs yield vs portfolio weight
+- **Performance Tracking**: Time vs value vs volume
+
+## Styling and Theme Integration
+
+The component automatically applies Fluent UI theme styles:
+
+```tsx
+// Bubble styling
+backgroundColor: Derived from theme palette
+borderColor: theme.colorNeutralStroke1
+borderWidth: 1
+hoverBorderWidth: 2
+
+// Typography
+fontFamily: theme.fontFamilyBase
+fontSize: theme.fontSizeBase200
+fontWeight: theme.fontWeightSemibold
+
+// Colors
+labelColor: theme.colorNeutralForeground1
+gridColor: theme.colorNeutralStroke2
+```
+
+## 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
+
+### Bubble Interactions
+
+- Hover effects with border highlighting
+- Rich tooltips showing all three data dimensions
+- Smooth transitions and animations
+
+### Responsive Scaling
+
+- Automatic axis scaling based on data ranges
+- Dynamic bubble size scaling
+- Responsive layout for different screen sizes
+
+## Performance Optimizations
+
+The component includes several React optimizations:
+
+````tsx
+// Memoized color calculations
+const seriesColors = useMemo(() => {
+  // Color generation logic
+}, [data, theme]);
+
+// Memoized chart data transformation
+const chartData = useMemo(() => {
+  return {
+    datasets: data
+      .filter(series => visibleSeries.includes(series.label))
+      .map(series => ({
+        label: series.label,
+        data: series.data.map(d => ({
+          x: getPrimary(d),
+          y: getSecondary(d),
+          r: getRadius(d),
+        })) as BubbleDataPoint[],
+        // ... styling
+      })),
+  };
+}, [data, visibleSeries, getPrimary, getSecondary, getRadius, seriesColors]);

package/src/charts/bubbleChart/index.ts

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

package/src/charts/floatBarChart/FloatBarChart.tsx

@@ -0,0 +1,178 @@
+import {
+  BarElement,
+  CategoryScale,
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+
+import { Bar } from 'react-chartjs-2';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
+import { useGraphUtils } from '../../hooks/useGraphUtils';
+
+ChartJS.register(ChartDataLabels);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  Legend,
+  Title
+);
+
+export interface FloatingBarChartProps<T> {
+  data: { label: string; data: T[] }[];
+  getPrimary: (datum: T) => string | number;
+  getRange: (datum: T) => [number, number]; // e.g., [min, max]
+  title?: string;
+  showDataLabels?: boolean;
+  theme?: Theme;
+}
+
+export default function FloatingBarChart<T extends object>({
+  data,
+  getPrimary,
+  getRange,
+  title,
+  showDataLabels = false,
+  theme = webLightTheme,
+}: FloatingBarChartProps<T>) {
+  const [visibleSeries, setVisibleSeries] = useState(() =>
+    data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
+  );
+
+  const styles = useGraphGlobalStyles();
+  const { lightenColor, getFluentPalette, createFluentTooltip } = useGraphUtils(
+    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 ? getRange(match) : [0, 0];
+          }),
+          backgroundColor: seriesColors[series.label],
+          borderRadius: 2,
+        })),
+    };
+  }, [data, visibleSeries, allCategories, getPrimary, getRange, 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(() => ({
+    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: {
+            ticks: {
+                color: labelColor,
+                font: { family: fontFamily, size: fontSize },
+            },
+            grid: { color: gridColor },
+        },
+        y: {
+            ticks: {
+                color: labelColor,
+                font: { family: fontFamily, size: fontSize },
+            },
+            grid: { color: gridColor },
+        },
+    },
+}), [
+    title,
+    theme,
+    showDataLabels,
+    labelColor,
+    fontFamily,
+    fontSize,
+    gridColor,
+    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>
+  );
+}