Pie Charts

/**
 * Pie chart implementation extending BaseChart
 * @param query - CSS selector string or DOM element
 * @param data - Chart data with series and optional labels
 * @param options - Chart configuration options
 * @param responsiveOptions - Responsive breakpoint configurations
 */
class PieChart extends BaseChart {
  constructor(
    query: string | Element | null,
    data: PieChartData,
    options?: PieChartOptions,
    responsiveOptions?: ResponsiveOptions<PieChartOptions>[]
  );
  
  /** Update chart with new data and options */
  update(data?: PieChartData, options?: PieChartOptions, override?: boolean): PieChart;
  
  /** Detach chart from DOM and clean up */
  detach(): PieChart;
}

import { PieChart } from "chartist";

// Basic pie chart
const chart = new PieChart('.chart-container', {
  series: [20, 10, 30, 40]
});

// Pie chart with labels
const labeledChart = new PieChart('.chart-container', {
  labels: ['Bananas', 'Apples', 'Grapes', 'Oranges'],
  series: [20, 10, 30, 40]
}, {
  width: 300,
  height: 300
});

// Donut chart
const donutChart = new PieChart('.chart-container', {
  series: [20, 10, 30, 40]
}, {
  donut: true,
  donutWidth: 60,
  startAngle: 270,
  total: 200,
  showLabel: false
});

// Pie chart with custom series objects
const advancedChart = new PieChart('.chart-container', {
  labels: ['Desktop', 'Mobile', 'Tablet'],
  series: [
    { name: 'desktop', value: 70, className: 'ct-series-desktop', meta: 'Desktop Users' },
    { name: 'mobile', value: 20, className: 'ct-series-mobile', meta: 'Mobile Users' },
    { name: 'tablet', value: 10, className: 'ct-series-tablet', meta: 'Tablet Users' }
  ]
});

interface PieChartData {
  /** Data values as numbers or SeriesObject array */
  series: number[] | PieSeriesObject[];
  /** Optional labels for each slice */
  labels?: string[];
}

interface PieSeriesObject {
  /** Optional name for the series */
  name?: string;
  /** Numeric value for the slice */
  value: number;
  /** Optional CSS class name for styling */
  className?: string;
  /** Optional metadata object */
  meta?: any;
}

interface PieChartOptions {
  /** Chart width in pixels */
  width?: number;
  /** Chart height in pixels */
  height?: number;
  /** Create donut chart instead of pie */
  donut?: boolean;
  /** Width of donut ring in pixels */
  donutWidth?: number;
  /** Show labels on slices */
  showLabel?: boolean;
  /** Offset of labels from center */
  labelOffset?: number;
  /** Direction of label offset ('explode' moves outward, 'implode' moves inward) */
  labelDirection?: 'explode' | 'implode';
  /** Starting angle in degrees (0 = top, 90 = right, 180 = bottom, 270 = left) */
  startAngle?: number;
  /** Total value for percentage calculations (auto-calculated if not provided) */
  total?: number;
  /** Reverse the order of slices */
  reverseData?: boolean;
  /** Padding around chart content */
  chartPadding?: ChartPadding;
  /** Label interpolation function */
  labelInterpolationFnc?: (value: any, index: number) => string;
  /** CSS class names for styling */
  classNames?: {
    chart?: string;
    chartPie?: string;
    chartDonut?: string;
    series?: string;
    slice?: string;
    label?: string;
  };
}

interface PieChartCreatedEvent {
  type: 'created';
  svg: Svg;
  options: PieChartOptionsWithDefaults;
  responsiveOptions: ResponsiveOptions[];
}

interface SliceDrawEvent {
  type: 'draw';
  element: Svg;
  path: SvgPath;
  center: { x: number; y: number };
  radius: number;
  startAngle: number;
  endAngle: number;
  totalAngle: number;
  index: number;
  group: Svg;
  value: number;
  series: PieSeriesObject;
  meta: any;
}

interface LabelDrawEvent {
  type: 'draw';
  element: Svg;
  text: string;
  x: number;
  y: number;
  index: number;
  group: Svg;
  value: number;
  series: PieSeriesObject;
  meta: any;
}

const chart = new PieChart('.chart-container', data);

// Customize slice appearance
chart.on('draw', (data: SliceDrawEvent) => {
  if (data.type === 'slice') {
    // Add border to slices
    data.element.attr({
      'stroke-width': '2px',
      'stroke': '#fff'
    });
    
    // Add hover effect
    data.element.on('mouseenter', () => {
      data.element.attr({
        'stroke-width': '4px'
      });
    });
    
    data.element.on('mouseleave', () => {
      data.element.attr({
        'stroke-width': '2px'
      });
    });
  }
});

// Customize label positioning
chart.on('draw', (data: LabelDrawEvent) => {
  if (data.type === 'label') {
    // Format percentage labels
    const percentage = Math.round(data.value / data.series.sum * 100);
    data.element.text(`${percentage}%`);
  }
});

// Semi-circle pie chart
const semiCircleChart = new PieChart('.chart-container', {
  series: [20, 10, 30, 40]
}, {
  startAngle: 270,
  total: 200, // This creates a semi-circle by doubling the sum
  donut: true,
  donutWidth: 30
});

// Pie chart with custom label formatting
const formattedChart = new PieChart('.chart-container', {
  labels: ['Desktop', 'Mobile', 'Tablet'],
  series: [70, 20, 10]
}, {
  labelInterpolationFnc: (value, index) => {
    const series = data.series;
    const sum = series.reduce((a, b) => a + b, 0);
    const percentage = Math.round(value / sum * 100);
    return `${data.labels[index]}: ${percentage}%`;
  }
});

const responsiveChart = new PieChart('.chart-container', data, {
  donut: true,
  donutWidth: 60,
  showLabel: true
}, [
  // Mobile breakpoint
  ['screen and (max-width: 640px)', {
    width: 250,
    height: 250,
    donutWidth: 40,
    showLabel: false
  }],
  // Tablet breakpoint
  ['screen and (min-width: 641px) and (max-width: 1024px)', {
    width: 350,
    height: 350,
    donutWidth: 50,
    labelOffset: 40
  }]
]);