@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/charts/bubbleChart/BubbleChart.tsx

@@ -1,184 +0,0 @@
-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 { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-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 } = 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, 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

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

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

package/src/charts/floatBarChart/FloatBarChart.tsx

@@ -1,178 +0,0 @@
-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 { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-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 } = 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 ? 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>
-  );
-}