@spteck/fluentui-react-charts 0.1.8

package/src/charts/radarChart/README.MD

@@ -0,0 +1,388 @@
+# RadarChart Component
+
+A powerful radar (spider/web) chart component built with Chart.js and Fluent UI React. This component displays multivariate data on a circular grid with multiple axes radiating from the center, making it perfect for comparing multiple quantitative variables across different entities or showing performance profiles.
+
+## Features
+
+- **Multi-dimensional Data Visualization**: Display multiple metrics on radial axes
+- **Multiple Series Support**: Compare different entities or time periods on the same chart
+- **Interactive Legend**: Toggle series visibility with click interactions
+- **Filled Areas**: Semi-transparent fill areas for better visual comparison
+- **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 metric information
+- **Radial Grid**: Concentric circles and radial lines for value reference
+
+## Installation
+
+```bash
+npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
+```
+
+## Basic Usage
+
+```tsx
+import React from 'react';
+import { RadarChart } from './components/radarChart/RadarChart';
+import { webLightTheme } from '@fluentui/react-components';
+
+interface SkillAssessment {
+  skill: string;
+  score: number;
+}
+
+const skillData: SkillAssessment[] = [
+  { skill: 'Communication', score: 85 },
+  { skill: 'Technical Skills', score: 92 },
+  { skill: 'Leadership', score: 78 },
+  { skill: 'Problem Solving', score: 88 },
+  { skill: 'Teamwork', score: 90 },
+  { skill: 'Creativity', score: 82 },
+];
+
+function App() {
+  return (
+    <div style={{ width: '600px', height: '500px' }}>
+      <RadarChart
+        data={[
+          { label: 'Employee Skills', data: skillData }
+        ]}
+        getLabel={(datum) => datum.skill}
+        getValue={(datum) => datum.score}
+        title="Skill Assessment Profile"
+        theme={webLightTheme}
+      />
+    </div>
+  );
+}
+```
+
+## Props
+
+### RadarChartProps<T>
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `data` | `{ label: string; data: T[] }[]` | Yes | - | Array of data series with labels and data points |
+| `getLabel` | `(datum: T) => string` | Yes | - | Function to extract the axis label from each data point |
+| `getValue` | `(datum: T) => number` | Yes | - | Function to extract the 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
+
+### Employee Performance Comparison
+
+```tsx
+interface PerformanceMetric {
+  metric: string;
+  employee1: number;
+  employee2: number;
+  employee3: number;
+}
+
+const performanceData: PerformanceMetric[] = [
+  { metric: 'Quality', employee1: 88, employee2: 92, employee3: 85 },
+  { metric: 'Productivity', employee1: 85, employee2: 78, employee3: 90 },
+  { metric: 'Innovation', employee1: 90, employee2: 95, employee3: 82 },
+  { metric: 'Collaboration', employee1: 82, employee2: 88, employee3: 95 },
+  { metric: 'Leadership', employee1: 78, employee2: 85, employee3: 88 },
+  { metric: 'Communication', employee1: 92, employee2: 90, employee3: 90 },
+];
+
+<RadarChart
+  data={[
+    {
+      label: 'Alice Johnson',
+      data: performanceData.map(d => ({ metric: d.metric, value: d.employee1 }))
+    },
+    {
+      label: 'Bob Smith',
+      data: performanceData.map(d => ({ metric: d.metric, value: d.employee2 }))
+    },
+    {
+      label: 'Carol Davis',
+      data: performanceData.map(d => ({ metric: d.metric, value: d.employee3 }))
+    }
+  ]}
+  getLabel={(datum) => datum.metric}
+  getValue={(datum) => datum.value}
+  title="Employee Performance Comparison"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Product Feature Analysis
+
+```tsx
+interface ProductFeature {
+  feature: string;
+  currentVersion: number;
+  competitorA: number;
+  competitorB: number;
+  targetVersion: number;
+}
+
+const featureData: ProductFeature[] = [
+  { feature: 'User Experience', currentVersion: 85, competitorA: 90, competitorB: 82, targetVersion: 95 },
+  { feature: 'Performance', currentVersion: 88, competitorA: 85, competitorB: 92, targetVersion: 95 },
+  { feature: 'Security', currentVersion: 92, competitorA: 88, competitorB: 90, targetVersion: 98 },
+  { feature: 'Scalability', currentVersion: 78, competitorA: 85, competitorB: 80, targetVersion: 90 },
+  { feature: 'Integration', currentVersion: 82, competitorA: 88, competitorB: 85, targetVersion: 92 },
+  { feature: 'Support', currentVersion: 90, competitorA: 85, competitorB: 88, targetVersion: 95 },
+];
+
+<RadarChart
+  data={[
+    {
+      label: 'Our Product',
+      data: featureData.map(d => ({ feature: d.feature, value: d.currentVersion }))
+    },
+    {
+      label: 'Competitor A',
+      data: featureData.map(d => ({ feature: d.feature, value: d.competitorA }))
+    },
+    {
+      label: 'Target Goals',
+      data: featureData.map(d => ({ feature: d.feature, value: d.targetVersion }))
+    }
+  ]}
+  getLabel={(datum) => datum.feature}
+  getValue={(datum) => datum.value}
+  title="Product Feature Competitive Analysis"
+  theme={webLightTheme}
+/>
+```
+
+### Financial Health Assessment
+
+```tsx
+interface FinancialMetric {
+  category: string;
+  q1Score: number;
+  q2Score: number;
+  q3Score: number;
+  q4Score: number;
+}
+
+const financialData: FinancialMetric[] = [
+  { category: 'Liquidity', q1Score: 85, q2Score: 88, q3Score: 82, q4Score: 90 },
+  { category: 'Profitability', q1Score: 78, q2Score: 82, q3Score: 85, q4Score: 88 },
+  { category: 'Efficiency', q1Score: 88, q2Score: 85, q3Score: 90, q4Score: 92 },
+  { category: 'Leverage', q1Score: 75, q2Score: 78, q3Score: 80, q4Score: 82 },
+  { category: 'Growth', q1Score: 82, q2Score: 85, q3Score: 88, q4Score: 90 },
+];
+
+<RadarChart
+  data={[
+    {
+      label: 'Q1 2024',
+      data: financialData.map(d => ({ category: d.category, value: d.q1Score }))
+    },
+    {
+      label: 'Q4 2024',
+      data: financialData.map(d => ({ category: d.category, value: d.q4Score }))
+    }
+  ]}
+  getLabel={(datum) => datum.category}
+  getValue={(datum) => datum.value}
+  title="Financial Health: Q1 vs Q4 Comparison"
+  showDataLabels={true}
+  theme={webLightTheme}
+/>
+```
+
+### Technology Stack Evaluation
+
+```tsx
+interface TechnologyAssessment {
+  criterion: string;
+  react: number;
+  vue: number;
+  angular: number;
+}
+
+const techData: TechnologyAssessment[] = [
+  { criterion: 'Learning Curve', react: 85, vue: 90, angular: 70 },
+  { criterion: 'Performance', react: 88, vue: 85, angular: 82 },
+  { criterion: 'Community Support', react: 95, vue: 85, angular: 88 },
+  { criterion: 'Ecosystem', react: 92, vue: 82, angular: 90 },
+  { criterion: 'Developer Experience', react: 90, vue: 88, angular: 78 },
+  { criterion: 'Enterprise Readiness', react: 85, vue: 80, angular: 92 },
+];
+
+<RadarChart
+  data={[
+    {
+      label: 'React',
+      data: techData.map(d => ({ criterion: d.criterion, value: d.react }))
+    },
+    {
+      label: 'Vue.js',
+      data: techData.map(d => ({ criterion: d.criterion, value: d.vue }))
+    },
+    {
+      label: 'Angular',
+      data: techData.map(d => ({ criterion: d.criterion, value: d.angular }))
+    }
+  ]}
+  getLabel={(datum) => datum.criterion}
+  getValue={(datum) => datum.value}
+  title="Frontend Framework Comparison"
+  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 label value (axis name) - string
+- A numeric value (distance from center) - number
+
+## Radar Chart Characteristics
+
+### Axes Configuration
+
+- **Radial Axes**: Each metric becomes a spoke radiating from center
+- **Equal Spacing**: Axes are evenly distributed around the circle
+- **Scale**: All axes share the same scale (0 to maximum value)
+
+### Visual Elements
+
+- **Points**: Data values plotted on each axis
+- **Lines**: Connect points to form polygonal shapes
+- **Fill Areas**: Semi-transparent areas enclosed by the polygon
+- **Grid**: Concentric circles and radial lines for reference
+
+## Use Cases
+
+Radar charts are particularly effective for:
+
+### Performance Analysis
+
+- **Employee Evaluation**: Multi-dimensional skill assessment
+- **Product Comparison**: Feature-by-feature analysis
+- **Team Performance**: Various performance metrics
+
+### Competitive Analysis
+
+- **Market Positioning**: Compare products across multiple criteria
+- **SWOT Analysis**: Strengths, weaknesses, opportunities, threats
+- **Vendor Evaluation**: Multi-criteria decision analysis
+
+### Quality Assessment
+
+- **Customer Satisfaction**: Various satisfaction dimensions
+- **System Performance**: Multiple performance metrics
+- **Risk Assessment**: Different risk factors
+
+### Portfolio Analysis
+
+- **Investment Options**: Risk vs return across multiple factors
+- **Project Evaluation**: Multiple project criteria
+- **Technology Selection**: Various technical and business criteria
+
+## Interactive Features
+
+### Legend Controls
+
+- Click legend items to show/hide data series
+- Visual feedback on hover states
+- Color-coded entries matching chart areas
+- Series can be toggled independently
+
+### Point Interactions
+
+- Hover effects on data points
+- Rich tooltips showing metric details
+- Smooth transitions and animations
+
+### Radial Grid
+
+- Concentric circles showing value scales
+- Radial lines for each metric axis
+- Theme-aware styling and colors
+
+## Styling and Theme Integration
+
+The component uses Fluent UI theme tokens:
+
+```tsx
+// Area styling
+backgroundColor: seriesColor + '33' (20% opacity)
+borderColor: seriesColor
+borderWidth: 2
+pointBackgroundColor: seriesColor
+
+// Grid styling
+angleLines: { color: theme.colorNeutralStroke2 }
+grid: { color: theme.colorNeutralStroke2 }
+
+// Typography
+fontFamily: theme.fontFamilyBase
+fontSize: theme.fontSizeBase200
+color: theme.colorNeutralForeground1
+
+// Point labels (axis names)
+color: theme.colorNeutralForeground1
+font: { family: fontFamily, size: fontSize }
+```
+
+## 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, getFluentPalette, lightenColor, theme]);
+
+// Memoized axis labels
+const allLabels = useMemo(() => {
+  const set = new Set<string>();
+  data.forEach(series => {
+    series.data.forEach(d => set.add(getLabel(d)));
+  });
+  return Array.from(set);
+}, [data, getLabel]);
+
+// Memoized chart data transformation
+const chartData = useMemo(() => {
+  return {
+    labels: allLabels,
+    datasets: data
+      .filter(series => visibleSeries.includes(series.label))
+      .map(series => ({
+        label: series.label,
+        data: allLabels.map(label => {
+          const match = series.data.find(d => getLabel(d) === label);
+          return match ? getValue(match) : 0;
+        }),
+        backgroundColor: seriesColors[series.label] + '33',
+        borderColor: seriesColors[series.label],
+        borderWidth: 2,
+        pointBackgroundColor: seriesColors[series.label],
+      })),
+  };
+}, [data, visibleSeries, allLabels, getLabel, getValue, seriesColors]);

package/src/charts/radarChart/RadarChart.tsx

@@ -0,0 +1,173 @@
+import {
+  Chart as ChartJS,
+  ChartOptions,
+  Filler,
+  Legend,
+  LineElement,
+  PointElement,
+  RadialLinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
+import React, { useMemo, useState } from 'react';
+import { Theme, webLightTheme } from '@fluentui/react-components';
+import { createFluentTooltip, useGraphUtils } from '../../hooks/useGraphUtils';
+
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Radar } from 'react-chartjs-2';
+import RenderLegend from '../../components/RenderLegend/RenderLegend';
+import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
+
+ChartJS.register(ChartDataLabels);
+ChartJS.register(
+  RadialLinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend,
+  Title
+);
+
+export interface RadarChartProps<T> {
+  data: { label: string; data: T[] }[];
+  getLabel: (datum: T) => string;
+  getValue: (datum: T) => number;
+  title?: string; 
+  showDataLabels?: boolean;
+  theme?: Theme;
+}
+
+export default function RadarChart<T extends object>({
+  data,
+  getLabel,
+  getValue,
+  title,
+  showDataLabels = false,
+  theme = webLightTheme,  
+}: RadarChartProps<T>) {
+  const [visibleSeries, setVisibleSeries] = useState(() =>
+    data.map(s => s.label)
+  );
+
+   const styles = useGraphGlobalStyles();
+  const { lightenColor, getFluentPalette } = 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, getFluentPalette, lightenColor, theme]);
+
+  const toggleSeries = (label: string) => {
+    setVisibleSeries(prev =>
+      prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
+    );
+  };
+
+  const allLabels = useMemo(() => {
+    const set = new Set<string>();
+    data.forEach(series => {
+      series.data.forEach(d => set.add(getLabel(d)));
+    });
+    return Array.from(set);
+  }, [data, getLabel]);
+
+  const chartData = useMemo(() => {
+    return {
+      labels: allLabels,
+      datasets: data
+        .filter(series => visibleSeries.includes(series.label))
+        .map(series => ({
+          label: series.label,
+          data: allLabels.map(label => {
+            const match = series.data.find(d => getLabel(d) === label);
+            return match ? getValue(match) : 0;
+          }),
+          backgroundColor: seriesColors[series.label] + '33',
+          borderColor: seriesColors[series.label],
+          borderWidth: 2,
+          pointBackgroundColor: seriesColors[series.label],
+        })),
+    };
+  }, [data, visibleSeries, allLabels, getLabel, getValue, 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<'radar'>>(() => ({
+    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,
+        },
+      },
+      tooltip: createFluentTooltip<'radar'>(theme),
+      legend: { display: false },
+    },
+    scales: {
+      r: {
+        angleLines: { color: gridColor },
+        grid: { color: gridColor },
+        pointLabels: {
+          color: labelColor,
+          font: { family: fontFamily, size: fontSize },
+        },
+        ticks: {
+          color: labelColor,
+          font: { family: fontFamily, size: fontSize },
+        },
+      },
+    },
+  }), [
+    theme,
+    title,
+    showDataLabels,
+    createFluentTooltip,
+    gridColor,
+    labelColor,
+    fontFamily,
+    fontSize,
+  ]);
+
+  return (
+    <div className={styles.chartWithLegend}>
+      <div className={styles.chartArea}>
+        <Radar data={chartData} options={options} />
+      </div>
+      <RenderLegend
+        data={data}
+        visibleSeries={visibleSeries}
+        seriesColors={seriesColors}
+        toggleSeries={toggleSeries}
+      />
+    </div>
+  );
+}

package/src/charts/radarChart/index.ts

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