@spteck/fluentui-react-charts 0.1.8

package/src/charts/scatterChart/README.MD

@@ -0,0 +1,335 @@
+# ScatterChart Component
+
+A versatile scatter chart component built with Chart.js and Fluent UI React. This component displays data as points on a two-dimensional coordinate system, making it perfect for visualizing correlations, distributions, and relationships between two continuous variables.
+
+## Features
+
+- **Two-Dimensional Data Visualization**: Plot data points using X and Y coordinates
+- **Multiple Series Support**: Compare multiple datasets with different colored point series
+- **Interactive Legend**: Toggle series visibility with click interactions
+- **Correlation Analysis**: Ideal for identifying patterns and relationships
+- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
+- **Data Labels**: Optional display of values directly on data points
+- **Responsive Design**: Automatically adapts to container dimensions
+- **TypeScript Support**: Full TypeScript support with generic types
+- **Custom Tooltips**: Rich tooltips showing detailed point information
+- **Linear Scaling**: Automatic scaling for both X and Y axes
+
+## Installation
+
+```bash
+npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { ScatterChart } from './components/scatterChart/ScatterChart';
+import { webLightTheme } from '@fluentui/react-components';
+
+interface SalesData {
+  adSpend: number;
+  revenue: number;
+  region: string;
+}
+
+const salesData: SalesData[] = [
+  { adSpend: 1000, revenue: 15000, region: 'North' },
+  { adSpend: 1500, revenue: 22000, region: 'North' },
+  { adSpend: 800, revenue: 12000, region: 'North' },
+  { adSpend: 2000, revenue: 28000, region: 'North' },
+  { adSpend: 1200, revenue: 18000, region: 'North' },
+];
+
+function App() {
+  return (
+    <div style={{ width: '800px', height: '500px' }}>
+      <ScatterChart
+        data={[
+          { label: 'Sales Performance', data: salesData }
+        ]}
+        getX={(datum) => datum.adSpend}
+        getY={(datum) => datum.revenue}
+        title="Advertising Spend vs Revenue"
+        theme={webLightTheme}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### ScatterChartProps<T>
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `data` | `{ label: string; data: T[] }[]` | Yes | - | Array of data series with labels and data points |
+| `getX` | `(datum: T) => number` | Yes | - | Function to extract the X-axis value from each data point |
+| `getY` | `(datum: T) => number` | Yes | - | Function to extract the Y-axis value from each data point |
+| `title` | `string` | No | - | Chart title displayed at the top |
+| `showDataLabels` | `boolean` | No | `false` | Whether to show data values on data points |
+| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
+
+## Advanced Usage
+
+### Multi-Variable Analysis
+
+```tsx
+interface ProductMetrics {
+  price: number;
+  quality: number;
+  customerSatisfaction: number;
+  marketShare: number;
+  category: string;
+}
+
+const productData: ProductMetrics[] = [
+  { price: 299, quality: 85, customerSatisfaction: 88, marketShare: 15, category: 'Electronics' },
+  { price: 149, quality: 78, customerSatisfaction: 82, marketShare: 22, category: 'Electronics' },
+  { price: 599, quality: 95, customerSatisfaction: 94, marketShare: 8, category: 'Electronics' },
+  { price: 899, quality: 92, customerSatisfaction: 90, marketShare: 5, category: 'Electronics' },
+];
+
+<ScatterChart
+  data={[{ label: 'Product Analysis', data: productData }]}
+  getX={(datum) => datum.price}
+  getY={(datum) => datum.quality}
+  title="Price vs Quality Analysis"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Comparative Market Analysis
+
+```tsx
+interface CompanyPerformance {
+  revenue: number;
+  profitMargin: number;
+  employees: number;
+  marketCap: number;
+  industry: string;
+}
+
+const techCompanies: CompanyPerformance[] = [
+  { revenue: 50000, profitMargin: 25, employees: 500, marketCap: 1000000, industry: 'Tech' },
+  { revenue: 75000, profitMargin: 18, employees: 750, marketCap: 1500000, industry: 'Tech' },
+  { revenue: 120000, profitMargin: 22, employees: 1200, marketCap: 2500000, industry: 'Tech' },
+];
+
+const financeCompanies: CompanyPerformance[] = [
+  { revenue: 80000, profitMargin: 15, employees: 800, marketCap: 1800000, industry: 'Finance' },
+  { revenue: 95000, profitMargin: 12, employees: 950, marketCap: 2100000, industry: 'Finance' },
+  { revenue: 110000, profitMargin: 18, employees: 1100, marketCap: 2800000, industry: 'Finance' },
+];
+
+<ScatterChart
+  data={[
+    { label: 'Technology Companies', data: techCompanies },
+    { label: 'Financial Companies', data: financeCompanies }
+  ]}
+  getX={(datum) => datum.revenue}
+  getY={(datum) => datum.profitMargin}
+  title="Revenue vs Profit Margin by Industry"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Performance vs Resource Analysis
+
+```tsx
+interface TeamMetrics {
+  teamSize: number;
+  productivity: number;
+  satisfaction: number;
+  experience: number;
+  department: string;
+}
+
+const teamData: TeamMetrics[] = [
+  { teamSize: 8, productivity: 85, satisfaction: 88, experience: 3.2, department: 'Engineering' },
+  { teamSize: 12, productivity: 78, satisfaction: 82, experience: 2.8, department: 'Engineering' },
+  { teamSize: 6, productivity: 92, satisfaction: 90, experience: 4.1, department: 'Engineering' },
+  { teamSize: 15, productivity: 75, satisfaction: 79, experience: 2.5, department: 'Engineering' },
+];
+
+<ScatterChart
+  data={[{ label: 'Engineering Teams', data: teamData }]}
+  getX={(datum) => datum.teamSize}
+  getY={(datum) => datum.productivity}
+  title="Team Size vs Productivity"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Risk vs Return Analysis
+
+```tsx
+interface InvestmentOption {
+  risk: number;        // Risk percentage
+  expectedReturn: number; // Expected return percentage
+  volatility: number;  // Volatility measure
+  liquidity: number;   // Liquidity score
+  assetClass: string;
+}
+
+const investments: InvestmentOption[] = [
+  { risk: 15, expectedReturn: 8, volatility: 12, liquidity: 95, assetClass: 'Bonds' },
+  { risk: 35, expectedReturn: 15, volatility: 25, liquidity: 88, assetClass: 'Stocks' },
+  { risk: 50, expectedReturn: 22, volatility: 40, liquidity: 70, assetClass: 'Growth Stocks' },
+  { risk: 25, expectedReturn: 12, volatility: 18, liquidity: 82, assetClass: 'Balanced Fund' },
+];
+
+<ScatterChart
+  data={[{ label: 'Investment Options', data: investments }]}
+  getX={(datum) => datum.risk}
+  getY={(datum) => datum.expectedReturn}
+  title="Investment Risk vs Expected Return"
+  showDataLabels={true}
+  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:
+
+- An X-axis value (horizontal position) - number
+- A Y-axis value (vertical position) - number
+
+## Coordinate System
+
+### X-Axis (Horizontal)
+
+- Represents the independent variable
+- Linear scale with automatic range detection
+- Left-to-right increases in value
+
+### Y-Axis (Vertical)
+
+- Represents the dependent variable
+- Linear scale with automatic range detection
+- Bottom-to-top increases in value
+
+## Use Cases
+
+Scatter charts are particularly effective for:
+
+### Correlation Analysis
+
+- **Sales Performance**: Marketing spend vs revenue
+- **Quality Control**: Input variables vs output quality
+- **Resource Optimization**: Input resources vs productivity
+
+### Market Research
+
+- **Competitive Analysis**: Price vs quality positioning
+- **Customer Segmentation**: Spend vs frequency analysis
+- **Product Portfolio**: Performance vs investment analysis
+
+### Scientific Data
+
+- **Experimental Results**: Variable relationships
+- **Performance Metrics**: Multiple factor analysis
+- **Trend Identification**: Pattern recognition in data
+
+### Financial Analysis
+
+- **Risk Assessment**: Risk vs return portfolios
+- **Performance Evaluation**: Benchmark comparisons
+- **Market Analysis**: Valuation vs fundamentals
+
+## 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
+
+### Point Interactions
+
+- Hover effects on data points
+- Rich tooltips showing X and Y coordinates
+- Smooth transitions and animations
+
+### Zoom and Pan
+
+- Mouse wheel zoom functionality
+- Pan by dragging (when enabled)
+- Reset zoom controls
+
+## Styling and Theme Integration
+
+The component uses Fluent UI theme tokens:
+
+```tsx
+// Point styling
+backgroundColor: Derived from theme palette
+borderColor: Same as background color
+pointRadius: 4
+pointHoverRadius: 6
+
+// Typography
+fontFamily: theme.fontFamilyBase
+fontSize: theme.fontSizeBase200
+fontWeight: theme.fontWeightSemibold
+color: theme.colorNeutralForeground1
+
+// Grid and axes
+labelColor: theme.colorNeutralForeground1
+gridColor: theme.colorNeutralStroke2
+```
+
+## Performance Optimizations
+
+The component includes several React optimizations:
+
+````tsx
+// Memoized color calculations
+const seriesColors = useMemo(() => {
+  return data.reduce((acc, series, idx) => {
+    const base = getFluentPalette(theme)[
+      idx % getFluentPalette(theme).length
+    ];
+    acc[series.label] = lightenColor(base, 0.3);
+    return acc;
+  }, {} as Record<string, string>);
+}, [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: getX(d), y: getY(d) })),
+        backgroundColor: seriesColors[series.label],
+        borderColor: seriesColors[series.label],
+        pointRadius: 4,
+      })),
+  };
+}, [data, visibleSeries, getX, getY, seriesColors]);
+
+// Memoized theme properties
+const { fontFamily, fontSize, labelColor, gridColor } = useMemo(() => ({
+  fontFamily: theme.fontFamilyBase,
+  fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
+  labelColor: theme.colorNeutralForeground1,
+  gridColor: theme.colorNeutralStroke2,
+}), [theme]);

package/src/charts/scatterChart/ScatterChart.tsx

@@ -0,0 +1,155 @@
+import {
+  Chart as ChartJS,
+  ChartOptions,
+  Legend,
+  LinearScale,
+  PointElement,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { Scatter } from 'react-chartjs-2';
+import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
+import { useGraphUtils } from '../../hooks/useGraphUtils';
+
+ChartJS.register(ChartDataLabels);
+ChartJS.register(LinearScale, PointElement, Tooltip, Legend);
+
+export interface ScatterChartProps<T> {
+  data: { label: string; data: T[] }[];
+  getX: (datum: T) => number;
+  getY: (datum: T) => number;
+  title?: string;
+    showDataLabels?: boolean;
+    theme?: Theme;
+}
+
+export default function ScatterChart<T extends object>({
+  data,
+  getX,
+  getY,
+    title,
+    showDataLabels = false,
+    theme =  webLightTheme,
+}: ScatterChartProps<T>) {
+  const [visibleSeries, setVisibleSeries] = useState(() =>
+    data.map(s => s.label)
+  );
+ const styles = useGraphGlobalStyles();
+  const { getFluentPalette, lightenColor, createFluentTooltip } = useGraphUtils(
+    theme
+  );
+
+  const seriesColors = useMemo(() => {
+    return data.reduce((acc, series, idx) => {
+      const base = getFluentPalette(theme)[
+        idx % getFluentPalette(theme).length
+      ];
+      acc[series.label] = lightenColor(base, 0.3);
+      return acc;
+    }, {} as Record<string, string>);
+  }, [data, theme]);
+
+  const toggleSeries = React.useCallback((label: string) => {
+    setVisibleSeries(prev =>
+      prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+    );
+  }, []);
+
+  const chartData = useMemo(() => {
+    return {
+      datasets: data
+        .filter(series => visibleSeries.includes(series.label))
+        .map(series => ({
+          label: series.label,
+          data: series.data.map(d => ({ x: getX(d), y: getY(d) })),
+          backgroundColor: seriesColors[series.label],
+          borderColor: seriesColors[series.label],
+          pointRadius: 4,
+        })),
+    };
+  }, [data, visibleSeries, getX, getY, 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 = useMemo<ChartOptions<'scatter'>>(() => ({
+    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<'scatter'>(theme),
+    },
+    scales: {
+        x: {
+            type: 'linear',
+            position: 'bottom',
+            ticks: {
+                color: labelColor,
+                font: { family: fontFamily, size: fontSize },
+            },
+            grid: { color: gridColor },
+        },
+        y: {
+            type: 'linear',
+            ticks: {
+                color: labelColor,
+                font: { family: fontFamily, size: fontSize },
+            },
+            grid: { color: gridColor },
+        },
+    },
+}), [
+    theme,
+    title,
+    showDataLabels,
+    createFluentTooltip,
+    labelColor,
+    fontFamily,
+    fontSize,
+    gridColor,
+]);
+
+  return (
+    <div className={styles.chartWithLegend}>
+      <div className={styles.chartArea}>
+        <Scatter data={chartData} options={options} />
+      </div>
+      <RenderLegend
+        data={data}
+        visibleSeries={visibleSeries}
+        seriesColors={seriesColors}
+        toggleSeries={toggleSeries}
+      />
+    </div>
+  );
+}

package/src/charts/scatterChart/index.ts

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