@spteck/fluentui-react-charts 1.0.6 → 1.0.8

package/src/charts/polarChart/README.MD

@@ -1,336 +0,0 @@
-# PolarChart Component
-
-A specialized polar area chart component built with Chart.js and Fluent UI React. This component displays data as circular segments with variable radii, making it perfect for visualizing multi-dimensional data where both the angle and radius represent different aspects of the data. It combines the circular nature of pie charts with the radial scaling of radar charts.
-
-## Features
-
-- **Radial Data Visualization**: Display data with both angular and radial dimensions
-- **Value Aggregation**: Automatically aggregates values across multiple series for the same labels
-- **Interactive Slice Legend**: Toggle segments visibility with click interactions
-- **Radial Grid System**: Concentric circles showing value scales
-- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
-- **Data Labels**: Optional display of values directly on chart segments
-- **Responsive Design**: Automatically adapts to container dimensions
-- **TypeScript Support**: Full TypeScript support with generic types
-- **Custom Tooltips**: Rich tooltips showing detailed segment information
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { PolarChart } from './components/polarChart/PolarChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface PerformanceData {
-  metric: string;
-  score: number;
-}
-
-const performanceData: PerformanceData[] = [
-  { metric: 'Speed', score: 85 },
-  { metric: 'Reliability', score: 92 },
-  { metric: 'Usability', score: 78 },
-  { metric: 'Security', score: 88 },
-  { metric: 'Scalability', score: 75 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '600px', height: '500px' }}>
-      <PolarChart
-        data={[
-          { label: 'Performance Metrics', data: performanceData }
-        ]}
-        getLabel={(datum) => datum.metric}
-        getValue={(datum) => datum.score}
-        title="System Performance Analysis"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### PolarChartProps<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 segment label from each data point |
-| `getValue` | `(datum: T) => number` | Yes | - | Function to extract the radial value from each data point |
-| `title` | `string` | No | - | Chart title displayed at the top |
-| `showDataLabels` | `boolean` | No | `true` | Whether to show data values on chart segments |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Multi-dimensional Performance Analysis
-
-```tsx
-interface TeamPerformance {
-  skill: string;
-  currentLevel: number;
-  targetLevel: number;
-  importance: number;
-}
-
-const teamSkills: TeamPerformance[] = [
-  { skill: 'Technical Skills', currentLevel: 85, targetLevel: 90, importance: 95 },
-  { skill: 'Communication', currentLevel: 78, targetLevel: 85, importance: 88 },
-  { skill: 'Leadership', currentLevel: 72, targetLevel: 80, importance: 82 },
-  { skill: 'Problem Solving', currentLevel: 88, targetLevel: 92, importance: 90 },
-  { skill: 'Teamwork', currentLevel: 82, targetLevel: 88, importance: 85 },
-];
-
-<PolarChart
-  data={[
-    {
-      label: 'Current Performance',
-      data: teamSkills.map(s => ({ skill: s.skill, value: s.currentLevel }))
-    },
-    {
-      label: 'Target Performance',
-      data: teamSkills.map(s => ({ skill: s.skill, value: s.targetLevel }))
-    }
-  ]}
-  getLabel={(datum) => datum.skill}
-  getValue={(datum) => datum.value}
-  title="Team Skills Assessment"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Product Feature Satisfaction
-
-```tsx
-interface FeatureSatisfaction {
-  feature: string;
-  satisfaction: number;
-  usage: number;
-  priority: number;
-}
-
-const featureData: FeatureSatisfaction[] = [
-  { feature: 'User Interface', satisfaction: 88, usage: 95, priority: 90 },
-  { feature: 'Performance', satisfaction: 82, usage: 88, priority: 95 },
-  { feature: 'Security', satisfaction: 90, usage: 75, priority: 88 },
-  { feature: 'Mobile Support', satisfaction: 75, usage: 85, priority: 82 },
-  { feature: 'Integration', satisfaction: 78, usage: 70, priority: 75 },
-];
-
-<PolarChart
-  data={[{ label: 'Feature Satisfaction', data: featureData }]}
-  getLabel={(datum) => datum.feature}
-  getValue={(datum) => datum.satisfaction}
-  title="Product Feature Satisfaction Scores"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Risk Assessment Matrix
-
-```tsx
-interface RiskFactor {
-  category: string;
-  probability: number;
-  impact: number;
-  riskScore: number;
-}
-
-const riskData: RiskFactor[] = [
-  { category: 'Market Risk', probability: 60, impact: 85, riskScore: 75 },
-  { category: 'Technical Risk', probability: 40, impact: 70, riskScore: 55 },
-  { category: 'Financial Risk', probability: 30, impact: 90, riskScore: 65 },
-  { category: 'Operational Risk', probability: 50, impact: 60, riskScore: 55 },
-  { category: 'Regulatory Risk', probability: 25, impact: 95, riskScore: 70 },
-];
-
-<PolarChart
-  data={[{ label: 'Risk Assessment', data: riskData }]}
-  getLabel={(datum) => datum.category}
-  getValue={(datum) => datum.riskScore}
-  title="Project Risk Analysis"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Customer Satisfaction by Region
-
-```tsx
-interface RegionalSatisfaction {
-  region: string;
-  satisfaction: number;
-  customerCount: number;
-  responseRate: number;
-}
-
-const satisfactionData: RegionalSatisfaction[] = [
-  { region: 'North America', satisfaction: 88, customerCount: 1500, responseRate: 75 },
-  { region: 'Europe', satisfaction: 82, customerCount: 1200, responseRate: 68 },
-  { region: 'Asia Pacific', satisfaction: 85, customerCount: 1800, responseRate: 72 },
-  { region: 'Latin America', satisfaction: 78, customerCount: 800, responseRate: 65 },
-  { region: 'Middle East', satisfaction: 80, customerCount: 600, responseRate: 70 },
-];
-
-<PolarChart
-  data={[{ label: 'Customer Satisfaction', data: satisfactionData }]}
-  getLabel={(datum) => datum.region}
-  getValue={(datum) => datum.satisfaction}
-  title="Customer Satisfaction by Region"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-## Data Structure
-
-The component expects data in the following format:
-
-```tsx
-interface ChartSeries<T> {
-  label: string;  // Series name (for multiple data sources)
-  data: T[];      // Array of data points
-}
-```
-
-Each data point `T` should contain:
-
-- A label value (segment name) - string
-- A numeric value (radial distance) - number
-
-## Polar Area Chart Characteristics
-
-### Radial Scaling
-
-- **Angle**: Represents categories (equally spaced)
-- **Radius**: Represents values (proportional to data)
-- **Area**: Combination of angle and radius creates segment area
-
-### Visual Interpretation
-
-- Larger values extend further from center
-- Equal angles for all categories
-- Area represents the magnitude of each category
-
-## Use Cases
-
-Polar area charts are particularly effective for:
-
-### Performance Analysis
-
-- **Skill Assessment**: Multi-dimensional skill evaluation
-- **Quality Metrics**: Various quality dimensions
-- **System Performance**: Different performance aspects
-
-### Comparative Analysis
-
-- **Feature Comparison**: Product features across different dimensions
-- **Regional Analysis**: Performance metrics across different regions
-- **Time-based Comparison**: Same metrics at different time periods
-
-### Risk and Assessment
-
-- **Risk Factors**: Different risk categories and their impact
-- **Satisfaction Surveys**: Various satisfaction dimensions
-- **Audit Results**: Compliance scores across different areas
-
-## Interactive Features
-
-### Slice Legend
-
-- Click legend items to show/hide segments
-- Visual feedback on hover states
-- Maintains proportional relationships when segments are hidden
-- Color-coded entries matching chart segments
-
-### Segment Interactions
-
-- Hover effects on polar segments
-- Rich tooltips showing detailed information
-- Smooth animations and transitions
-
-### Radial Grid
-
-- Concentric circles showing value scales
-- Customizable grid lines and labels
-- Theme-aware styling
-
-## Styling and Theme Integration
-
-The component uses Fluent UI theme tokens:
-
-```tsx
-// Segment colors
-backgroundColor: Derived from theme palette with lightening
-borderWidth: 1
-
-// Radial scale
-tickColor: theme.colorNeutralForeground1
-gridColor: theme.colorNeutralStroke2
-backdropColor: 'transparent'
-
-// Typography
-fontFamily: theme.fontFamilyBase
-fontSize: theme.fontSizeBase200
-fontWeight: theme.fontWeightSemibold
-color: theme.colorNeutralForeground1
-```
-
-## Performance Optimizations
-
-The component includes several React optimizations:
-
-````tsx
-// Memoized value aggregation
-const valueMap = useMemo(() => {
-  const map = new Map<string, number>();
-  data.forEach(series => {
-    series.data.forEach(d => {
-      const label = getLabel(d);
-      const value = getValue(d);
-      map.set(label, (map.get(label) || 0) + value);
-    });
-  });
-  return map;
-}, [data, getLabel, getValue]);
-
-// Memoized color and data calculations
-const { allLabels, colors, filteredLabels, values, visibleColors } = useMemo(() => {
-  const allLabels = Array.from(valueMap.keys());
-  const palette = getFluentPalette(theme);
-  const colors = allLabels.map((_, i) =>
-    lightenColor(palette[i % palette.length], 0.3)
-  );
-
-  const filteredLabels = allLabels.filter(
-    label => !hiddenLabels.includes(label)
-  );
-  const values = filteredLabels.map(label => valueMap.get(label) || 0);
-  const visibleColors = filteredLabels.map(label => {
-    const idx = allLabels.indexOf(label);
-    return colors[idx];
-  });
-
-  return { allLabels, colors, filteredLabels, values, visibleColors };
-}, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]);
-
-// Memoized chart data
-const chartData = useMemo(() => ({
-  labels: filteredLabels,
-  datasets: [{
-    data: values,
-    backgroundColor: visibleColors,
-    borderWidth: 1,
-  }],
-}), [filteredLabels, values, visibleColors]);

package/src/charts/polarChart/index.ts

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