@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/charts/radarChart/README.MD

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

@@ -1,173 +0,0 @@
-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, useChartUtils } from '../../hooks/useChartUtils';
-
-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 } = 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, 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

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