@spteck/fluentui-react-charts 1.0.7 → 1.0.8

package/src/charts/floatBarChart/README.MD

@@ -1,354 +0,0 @@
-# FloatingBarChart Component
-
-A specialized floating bar chart component built with Chart.js and Fluent UI React. This component displays bars that "float" between two values, making it perfect for visualizing ranges, intervals, temperature variations, price ranges, time periods, and other data that has both minimum and maximum values.
-
-## Features
-
-- **Range Visualization**: Display data with both minimum and maximum values as floating bars
-- **Multiple Series Support**: Compare multiple range datasets with different colors
-- **Interactive Legend**: Toggle series visibility with click interactions
-- **Fluent UI Integration**: Seamless integration with Fluent UI themes and design system
-- **Data Labels**: Optional display of range values directly on chart elements
-- **Responsive Design**: Automatically adapts to container dimensions
-- **TypeScript Support**: Full TypeScript support with generic types
-- **Custom Tooltips**: Rich tooltips showing detailed range information
-- **Rounded Corners**: Modern bar styling with configurable border radius
-
-## Installation
-
-```bash
-npm install chart.js react-chartjs-2 chartjs-plugin-datalabels @fluentui/react-components
-```
-
-## Basic Usage
-
-```tsx
-import React from 'react';
-import { FloatingBarChart } from './components/floatBarChart/FloatingBarChart';
-import { webLightTheme } from '@fluentui/react-components';
-
-interface TemperatureData {
-  month: string;
-  minTemp: number;
-  maxTemp: number;
-}
-
-const temperatureData: TemperatureData[] = [
-  { month: 'January', minTemp: 25, maxTemp: 45 },
-  { month: 'February', minTemp: 30, maxTemp: 50 },
-  { month: 'March', minTemp: 40, maxTemp: 65 },
-  { month: 'April', minTemp: 50, maxTemp: 75 },
-  { month: 'May', minTemp: 60, maxTemp: 85 },
-  { month: 'June', minTemp: 70, maxTemp: 95 },
-];
-
-function App() {
-  return (
-    <div style={{ width: '800px', height: '400px' }}>
-      <FloatingBarChart
-        data={[
-          { label: 'Temperature Range', data: temperatureData }
-        ]}
-        getPrimary={(datum) => datum.month}
-        getRange={(datum) => [datum.minTemp, datum.maxTemp]}
-        title="Monthly Temperature Ranges"
-        theme={webLightTheme}
-      />
-    </div>
-  );
-}
-```
-
-## Props
-
-### FloatingBarChartProps<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 category from each data point |
-| `getRange` | `(datum: T) => [number, number]` | Yes | - | Function to extract the [min, max] range from each data point |
-| `title` | `string` | No | - | Chart title displayed at the top |
-| `showDataLabels` | `boolean` | No | `false` | Whether to show range values on chart elements |
-| `theme` | `Theme` | No | `webLightTheme` | Fluent UI theme object for styling |
-
-## Advanced Usage
-
-### Stock Price Ranges
-
-```tsx
-interface StockData {
-  date: string;
-  low: number;
-  high: number;
-  open: number;
-  close: number;
-}
-
-const stockPrices: StockData[] = [
-  { date: '2024-01-01', low: 145.20, high: 152.80, open: 148.50, close: 151.25 },
-  { date: '2024-01-02', low: 149.75, high: 156.30, open: 151.25, close: 154.90 },
-  { date: '2024-01-03', low: 152.10, high: 159.45, open: 154.90, close: 157.80 },
-  { date: '2024-01-04', low: 155.25, high: 162.15, open: 157.80, close: 160.45 },
-];
-
-<FloatingBarChart
-  data={[{ label: 'Daily Price Range', data: stockPrices }]}
-  getPrimary={(datum) => datum.date}
-  getRange={(datum) => [datum.low, datum.high]}
-  title="Stock Price Daily Ranges"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Project Timeline Ranges
-
-```tsx
-interface ProjectPhase {
-  phase: string;
-  plannedStart: number; // Week number
-  plannedEnd: number;   // Week number
-  actualStart?: number;
-  actualEnd?: number;
-}
-
-const projectData: ProjectPhase[] = [
-  { phase: 'Planning', plannedStart: 1, plannedEnd: 4, actualStart: 1, actualEnd: 5 },
-  { phase: 'Design', plannedStart: 3, plannedEnd: 8, actualStart: 4, actualEnd: 9 },
-  { phase: 'Development', plannedStart: 6, plannedEnd: 16, actualStart: 7, actualEnd: 18 },
-  { phase: 'Testing', plannedStart: 14, plannedEnd: 20, actualStart: 16, actualEnd: 22 },
-  { phase: 'Deployment', plannedStart: 18, plannedEnd: 22, actualStart: 20, actualEnd: 24 },
-];
-
-<FloatingBarChart
-  data={[
-    {
-      label: 'Planned Timeline',
-      data: projectData.map(p => ({
-        phase: p.phase,
-        range: [p.plannedStart, p.plannedEnd]
-      }))
-    },
-    {
-      label: 'Actual Timeline',
-      data: projectData
-        .filter(p => p.actualStart && p.actualEnd)
-        .map(p => ({
-          phase: p.phase,
-          range: [p.actualStart!, p.actualEnd!]
-        }))
-    }
-  ]}
-  getPrimary={(datum) => datum.phase}
-  getRange={(datum) => datum.range}
-  title="Project Timeline: Planned vs Actual"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Salary Ranges by Position
-
-```tsx
-interface SalaryRange {
-  position: string;
-  minSalary: number;
-  maxSalary: number;
-  medianSalary: number;
-  experience: 'junior' | 'mid' | 'senior';
-}
-
-const salaryData: SalaryRange[] = [
-  { position: 'Software Engineer', minSalary: 70000, maxSalary: 120000, medianSalary: 95000, experience: 'mid' },
-  { position: 'Senior Engineer', minSalary: 110000, maxSalary: 180000, medianSalary: 145000, experience: 'senior' },
-  { position: 'Product Manager', minSalary: 85000, maxSalary: 150000, medianSalary: 117500, experience: 'mid' },
-  { position: 'Data Scientist', minSalary: 80000, maxSalary: 140000, medianSalary: 110000, experience: 'mid' },
-];
-
-<FloatingBarChart
-  data={[{ label: 'Salary Ranges', data: salaryData }]}
-  getPrimary={(datum) => datum.position}
-  getRange={(datum) => [datum.minSalary, datum.maxSalary]}
-  title="Salary Ranges by Position"
-  showDataLabels={true}
-  theme={webLightTheme}
-/>
-```
-
-### Performance Metrics Ranges
-
-```tsx
-interface PerformanceMetric {
-  metric: string;
-  target: number;
-  acceptable: number;
-  poor: number;
-  current: number;
-}
-
-const performanceData: PerformanceMetric[] = [
-  { metric: 'Response Time (ms)', target: 0, acceptable: 200, poor: 500, current: 150 },
-  { metric: 'CPU Usage (%)', target: 0, acceptable: 70, poor: 90, current: 45 },
-  { metric: 'Memory Usage (%)', target: 0, acceptable: 80, poor: 95, current: 65 },
-  { metric: 'Error Rate (%)', target: 0, acceptable: 1, poor: 5, current: 0.3 },
-];
-
-<FloatingBarChart
-  data={[
-    {
-      label: 'Acceptable Range',
-      data: performanceData.map(p => ({
-        metric: p.metric,
-        range: [p.target, p.acceptable]
-      }))
-    },
-    {
-      label: 'Poor Performance',
-      data: performanceData.map(p => ({
-        metric: p.metric,
-        range: [p.acceptable, p.poor]
-      }))
-    }
-  ]}
-  getPrimary={(datum) => datum.metric}
-  getRange={(datum) => datum.range}
-  title="Performance Metrics: Acceptable vs Poor Ranges"
-  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 category) - string or number
-- A range function that returns [min, max] - tuple of numbers
-
-## Range Data Format
-
-The `getRange` function should return a tuple with exactly two numbers:
-
-```tsx
-// Valid range formats
-getRange: (datum) => [datum.min, datum.max]
-getRange: (datum) => [0, datum.value]           // From zero to value
-getRange: (datum) => [datum.start, datum.end]   // Time periods
-getRange: (datum) => [datum.low, datum.high]    // Price ranges
-```
-
-## Use Cases
-
-Floating bar charts are particularly effective for:
-
-### Financial Data
-
-- **Stock Prices**: Daily high/low ranges
-- **Budget Ranges**: Min/max spending limits
-- **Price Variations**: Product price fluctuations
-- **Investment Returns**: Best/worst case scenarios
-
-### Project Management
-
-- **Timeline Ranges**: Planned vs actual durations
-- **Resource Allocation**: Min/max team sizes
-- **Budget Estimates**: Cost range projections
-- **Risk Assessment**: Impact range analysis
-
-### Scientific Data
-
-- **Temperature Ranges**: Daily, monthly, or seasonal variations
-- **Measurement Tolerances**: Acceptable value ranges
-- **Confidence Intervals**: Statistical data ranges
-- **Performance Metrics**: Acceptable operating ranges
-
-### Business Analytics
-
-- **Sales Forecasts**: Optimistic/pessimistic projections
-- **Capacity Planning**: Min/max resource requirements
-- **Quality Metrics**: Acceptable performance ranges
-- **Customer Satisfaction**: Score ranges by category
-
-## 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
-
-### Bar Interactions
-
-- Hover effects on floating bars
-- Rich tooltips showing range details
-- Smooth transitions and animations
-
-### Responsive Behavior
-
-- Chart automatically resizes to container dimensions
-- Legend adapts to available space
-- Maintains readability across different screen sizes
-
-## Styling and Theme Integration
-
-The component uses Fluent UI theme tokens:
-
-```tsx
-// Bar styling
-backgroundColor: Derived from theme palette
-borderRadius: 2 // Rounded corners
-borderWidth: 1
-
-// 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 ? getRange(match) : [0, 0];
-        }),
-        backgroundColor: seriesColors[series.label],
-        borderRadius: 2,
-      })),
-  };
-}, [data, visibleSeries, allCategories, getPrimary, getRange, seriesColors]);

package/src/charts/floatBarChart/index.ts

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

package/src/charts/lineChart/LineChart.tsx

@@ -1,200 +0,0 @@
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  ChartOptions,
-  Legend,
-  LineElement,
-  LinearScale,
-  PointElement,
-  Title,
-  Tooltip,
-} from 'chart.js';
-import React, { useMemo, useState } from 'react';
-import { Theme, webLightTheme } from '@fluentui/react-components';
-
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { Line } from 'react-chartjs-2';
-import RenderLegend from '../../components/RenderLegend/RenderLegend';
-import { useChartUtils } from '../../hooks/useChartUtils';
-import { useGraphGlobalStyles } from '../../graphGlobalStyles/useGraphGlobalStyles';
-
-ChartJS.register(ChartDataLabels);
-ChartJS.register(
-  LineElement,
-  PointElement,
-  CategoryScale,
-  LinearScale,
-  Tooltip,
-  Legend,
-  Title
-);
-
-export interface LineChartProps<T> {
-  data: { label: string; data: T[] }[];
-  getPrimary: (datum: T) => string | number;
-  getSecondary: (datum: T) => number;
-  title?: string;
-  showDataLabels?: boolean;
-  theme?: Theme;
-}
-
-export default function LineChart<T extends object>({
-  data,
-  getPrimary,
-  getSecondary,
-  title,
-  showDataLabels = false,
-  theme = webLightTheme,
-}: LineChartProps<T>) {
-  const [visibleSeries, setVisibleSeries] = useState(() =>
-    data.length > 1 ? data.map(s => s.label) : [data[0]?.label]
-  );
-
-  const styles = useGraphGlobalStyles();
-  const { lightenColor, getFluentPalette , createFluentTooltip} = useChartUtils(theme);
-
-  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]);
-
-  const toggleSeries = (label: string) => {
-    setVisibleSeries(prev => {
-      const isVisible = prev.includes(label);
-      const next = isVisible ? prev.filter(l => l !== label) : [...prev, label];
-      return next.length === 0 && data.length > 0 ? [data[0].label] : next;
-    });
-  };
-
-  const allCategories = useMemo(() => {
-    const set = new Set<string | number>();
-    data.forEach(series => {
-      series.data.forEach(d => set.add(getPrimary(d)));
-    });
-    return Array.from(set);
-  }, [data, getPrimary]);
-
-  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,
-  ]);
-
-  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: ChartOptions<'line'> = useMemo(() => ({
-    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<'line'>(theme),
-    },
-    scales: {
-      x: {
-        ticks: {
-          color: labelColor,
-          font: {
-            family: fontFamily,
-            size: fontSize,
-          },
-        },
-        grid: {
-          color: gridColor,
-        },
-      },
-      y: {
-        ticks: {
-          color: labelColor,
-          font: {
-            family: fontFamily,
-            size: fontSize,
-          },
-        },
-        grid: {
-          color: gridColor,
-        },
-      },
-    },
-  }), [
-    title,
-    theme,
-    showDataLabels,
-    labelColor,
-    fontFamily,
-    fontSize,
-    gridColor,
-    createFluentTooltip
-  ]);
-
-  return (
-
-       <div className={styles.chartWithLegend}>
-          <div className={styles.chartArea}>
-          <Line data={chartData} options={options} />
-          </div>
-          <div className={styles.legendArea} >
-            <RenderLegend
-              data={data}
-              visibleSeries={visibleSeries}
-              seriesColors={seriesColors}
-              toggleSeries={toggleSeries}
-            />
-          </div>
-        </div>
-    
-  );
-}