@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/charts/scatterChart/README.MD

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

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

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