@spteck/fluentui-react-charts 1.0.7 → 1.0.9

package/src/charts/lineChart/README.MD

@@ -1,354 +0,0 @@
-# LineChart Component
-
-A versatile line chart component built with Chart.js and Fluent UI React. This component displays data as connected points with smooth lines, making it ideal for visualizing trends, time series data, and continuous data changes over categories or time periods.
-
-## Features
-
-- **Trend Visualization**: Display data trends with smooth, connected lines
-- **Multiple Series Support**: Compare multiple data series with different colored lines
-- **Interactive Legend**: Toggle series visibility with click interactions
-- **Smooth Curves**: Configurable line tension for smooth or angular connections
-- **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
-- **Missing Data Handling**: Graceful handling of null/missing data points
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { LineChart } from './components/lineChart/LineChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface SalesData {
-  month: string;
-  revenue: number;
-}
-
-const salesData: SalesData[] = [
-  { month: 'Jan', revenue: 150000 },
-  { month: 'Feb', revenue: 180000 },
-  { month: 'Mar', revenue: 165000 },
-  { month: 'Apr', revenue: 200000 },
-  { month: 'May', revenue: 220000 },
-  { month: 'Jun', revenue: 195000 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '400px' }}>
-      <LineChart
-        data={[
-          { label: 'Monthly Revenue', data: salesData }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getSecondary={(datum) => datum.revenue}
-        title="Revenue Trend Over Time"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### LineChartProps<T>
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `{ label: string; data: T[] }[]` | Yes | - | Array of data series with labels and data points |
-| `getPrimary` | `(datum: T) => string \| number` | Yes | - | Function to extract the x-axis value from each data point |
-| `getSecondary` | `(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
-
-### Multiple Time Series
-
-```tsx
-interface MetricsData {
-  date: string;
-  revenue: number;
-  expenses: number;
-  profit: number;
-}
-
-const metricsData: MetricsData[] = [
-  { date: '2024-01', revenue: 250000, expenses: 180000, profit: 70000 },
-  { date: '2024-02', revenue: 280000, expenses: 195000, profit: 85000 },
-  { date: '2024-03', revenue: 310000, expenses: 210000, profit: 100000 },
-  { date: '2024-04', revenue: 290000, expenses: 200000, profit: 90000 },
-];
-
-<LineChart
-  data={[
-    {
-      label: 'Revenue',
-      data: metricsData.map(d => ({ date: d.date, value: d.revenue }))
-    },
-    {
-      label: 'Expenses',
-      data: metricsData.map(d => ({ date: d.date, value: d.expenses }))
-    },
-    {
-      label: 'Profit',
-      data: metricsData.map(d => ({ date: d.date, value: d.profit }))
-    }
-  ]}
-  getPrimary={(datum) => datum.date}
-  getSecondary={(datum) => datum.value}
-  title="Financial Performance Trends"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Performance Monitoring
-
-```tsx
-interface PerformanceMetrics {
-  timestamp: string;
-  responseTime: number;
-  throughput: number;
-  errorRate: number;
-}
-
-const performanceData: PerformanceMetrics[] = [
-  { timestamp: '09:00', responseTime: 120, throughput: 850, errorRate: 0.2 },
-  { timestamp: '10:00', responseTime: 135, throughput: 920, errorRate: 0.3 },
-  { timestamp: '11:00', responseTime: 118, throughput: 1100, errorRate: 0.1 },
-  { timestamp: '12:00', responseTime: 145, throughput: 980, errorRate: 0.4 },
-];
-
-<LineChart
-  data={[
-    {
-      label: 'Response Time (ms)',
-      data: performanceData.map(d => ({ time: d.timestamp, value: d.responseTime }))
-    },
-    {
-      label: 'Error Rate (%)',
-      data: performanceData.map(d => ({ time: d.timestamp, value: d.errorRate }))
-    }
-  ]}
-  getPrimary={(datum) => datum.time}
-  getSecondary={(datum) => datum.value}
-  title="System Performance Over Time"
-  theme={webLightTheme}
-/>
-```
-
-### Growth Analysis
-
-```tsx
-interface GrowthData {
-  quarter: string;
-  userGrowth: number;
-  revenueGrowth: number;
-  marketShare: number;
-}
-
-const growthData: GrowthData[] = [
-  { quarter: 'Q1 2023', userGrowth: 15.2, revenueGrowth: 12.8, marketShare: 8.5 },
-  { quarter: 'Q2 2023', userGrowth: 18.7, revenueGrowth: 16.3, marketShare: 9.2 },
-  { quarter: 'Q3 2023', userGrowth: 22.1, revenueGrowth: 19.7, marketShare: 10.1 },
-  { quarter: 'Q4 2023', userGrowth: 25.8, revenueGrowth: 23.4, marketShare: 11.3 },
-];
-
-<LineChart
-  data={[
-    {
-      label: 'User Growth (%)',
-      data: growthData.map(d => ({ quarter: d.quarter, value: d.userGrowth }))
-    },
-    {
-      label: 'Revenue Growth (%)',
-      data: growthData.map(d => ({ quarter: d.quarter, value: d.revenueGrowth }))
-    },
-    {
-      label: 'Market Share (%)',
-      data: growthData.map(d => ({ quarter: d.quarter, value: d.marketShare }))
-    }
-  ]}
-  getPrimary={(datum) => datum.quarter}
-  getSecondary={(datum) => datum.value}
-  title="Growth Metrics Trends"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Stock Price Movement
-
-```tsx
-interface StockPrice {
-  date: Date;
-  price: number;
-  volume: number;
-}
-
-const stockData: StockPrice[] = [
-  { date: new Date('2024-01-01'), price: 145.50, volume: 2500000 },
-  { date: new Date('2024-01-02'), price: 148.25, volume: 3200000 },
-  { date: new Date('2024-01-03'), price: 152.10, volume: 2800000 },
-  { date: new Date('2024-01-04'), price: 149.75, volume: 3500000 },
-];
-
-<LineChart
-  data={[{ label: 'Stock Price', data: stockData }]}
-  getPrimary={(datum) => datum.date.toLocaleDateString()}
-  getSecondary={(datum) => datum.price}
-  title="Stock Price Movement"
-  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:
-
-- A primary value (x-axis) - string or number
-- A secondary value (y-axis) - number
-
-## Line Styling
-
-The component applies specific styling for optimal line visualization:
-
-```tsx
-// Line properties
-borderColor: Theme color from palette
-backgroundColor: Same as border color
-tension: 0.4          // Smooth curves
-fill: false          // No area fill
-pointRadius: 4       // Visible data points
-borderWidth: 2       // Line thickness
-```
-
-## Use Cases
-
-Line charts are particularly effective for:
-
-### Time Series Analysis
-
-- **Financial Data**: Stock prices, revenue trends, market indicators
-- **Performance Metrics**: Response times, throughput, error rates
-- **Business KPIs**: Growth rates, conversion rates, customer metrics
-
-### Trend Visualization
-
-- **Seasonal Patterns**: Sales cycles, website traffic, user engagement
-- **Comparative Analysis**: Year-over-year comparisons, A/B test results
-- **Forecasting**: Predictive analytics and trend projections
-
-### Scientific Data
-
-- **Experimental Results**: Measurement trends over time
-- **Environmental Data**: Temperature, humidity, pollution levels
-- **Research Analytics**: Survey responses, behavioral patterns
-
-## 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 detailed information
-- Smooth transitions and animations
-
-### Missing Data Handling
-
-- Null values create gaps in lines
-- Graceful handling of incomplete datasets
-- Maintains line continuity where data exists
-
-## Styling and Theme Integration
-
-The component uses Fluent UI theme tokens:
-
-```tsx
-// Line styling
-borderColor: Derived from theme palette
-backgroundColor: Same as border color
-pointBackgroundColor: White with border color outline
-
-// 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];
-    const color = lightenColor(base, 0.3);
-    acc[series.label] = color;
-    return acc;
-  }, {} as Record<string, string>);
-}, [data, theme]);
-
-// Memoized chart data transformation
-const chartData = useMemo(() => {
-  return {
-    labels: allCategories,
-    datasets: data
-      .filter(series => visibleSeries.includes(series.label))
-      .map(series => ({
-        label: series.label,
-        data: allCategories.map(cat => {
-          const match = series.data.find(d => getPrimary(d) === cat);
-          return match ? getSecondary(match) : null;
-        }),
-        borderColor: seriesColors[series.label],
-        backgroundColor: seriesColors[series.label],
-        tension: 0.4,
-        fill: false,
-        pointRadius: 4,
-      })),
-  };
-}, [data, visibleSeries, allCategories, getPrimary, getSecondary, 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/lineChart/index.ts

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

package/src/charts/polarChart/PolarChart.tsx

@@ -1,161 +0,0 @@
-import {
-  ArcElement,
-  Chart as ChartJS,
-  ChartOptions,
-  Legend,
-  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 { PolarArea } from 'react-chartjs-2';
-import RenderSliceLegend from '../../components/renderSliceLegend/RenderSliceLegend';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(
-  RadialLinearScale,
-  ArcElement,
-  Tooltip,
-  Legend,
-  Title,
-  ChartDataLabels
-);
-
-export interface PolarChartProps<T> {
-  data: {
-    label: string;
-    data: T[];
-  }[];
-  getLabel: (datum: T) => string;
-  getValue: (datum: T) => number;
-  title?: string;
-  showDataLabels?: boolean;
-  theme?: Theme;
-}
-
-export default function PolarChart<T extends object>({
-  data,
-  getLabel,
-  getValue,
-  title,
-  showDataLabels = true,
-  theme = webLightTheme,
-}: PolarChartProps<T>) {
-  const { getFluentPalette, lightenColor } = useChartUtils(theme);
-  const [hiddenLabels, setHiddenLabels] = useState<string[]>([]);
-  const styles = useGraphGlobalStyles();
-  const toggleLabel = (label: string) => {
-    setHiddenLabels(prev =>
-      prev.includes(label) ? prev.filter(l => l !== label) : [...prev, label]
-    );
-  };
-
-  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]);
-
-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]);
-
-const chartData = useMemo(() => ({
-    labels: filteredLabels,
-    datasets: [
-        {
-            data: values,
-            backgroundColor: visibleColors,
-            borderWidth: 1,
-        },
-    ],
-}), [filteredLabels, values, visibleColors]);
-
-const options = useMemo<ChartOptions<'polarArea'>>(() => ({
-    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,
-            },
-            formatter: (value: number) => value,
-        },
-        tooltip: createFluentTooltip<'polarArea'>(theme),
-        legend: { display: false },
-    },
-    scales: {
-        r: {
-            ticks: {
-                color: theme.colorNeutralForeground1,
-                backdropColor: 'transparent',
-                font: {
-                    family: theme.fontFamilyBase,
-                    size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
-                },
-            },
-            grid: {
-                color: theme.colorNeutralStroke2,
-            },
-        },
-    },
-}), [theme, title, showDataLabels, createFluentTooltip]);
-
-  return (
-    <div className={styles.chartWithLegend}>
-      <div className={styles.chartArea}>
-        <PolarArea data={chartData} options={options} />
-      </div>
-      <div className={styles.legendArea}>
-        <RenderSliceLegend
-          labels={allLabels}
-          colors={colors}
-          visibleLabels={filteredLabels}
-          toggleLabel={toggleLabel}
-        />
-      </div>
-    </div>
-  );
-}