@moderneinc/react-charts 1.1.0 → 1.2.0-next.2f2ee2

package/dist/components/chrono-chart/chrono-chart.component.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { ChronoChartProps } from './chrono-chart.types';
+export declare const ChronoChart: FunctionComponent<ChronoChartProps>;

package/dist/components/chrono-chart/chrono-chart.types.d.ts

@@ -0,0 +1,58 @@
+import { TimelineEvent } from '../timeline-chart/timeline-chart.types';
+export type ChronoMode = 'point-in-time' | 'historical';
+export type ChronoCategory = {
+    id: string;
+    label: string;
+    color: string;
+    parliamentMapping?: {
+        isSpecialCategory: boolean;
+        hatchPattern?: string;
+    };
+};
+export type ChronoData = {
+    timeSeries: Array<{
+        timestamp: number;
+        values: Record<string, number>;
+    }>;
+    categories: ChronoCategory[];
+    metadata: {
+        total: number;
+        specialCounts?: {
+            notApplicable: number;
+            noLst: number;
+            unavailable: number;
+        };
+    };
+    events?: TimelineEvent[];
+};
+export type ChronoChartProps = {
+    data: ChronoData;
+    /**
+     * Index of the time series data point to display in point-in-time mode.
+     * - If set: Chart shows point-in-time view for data at this index
+     * - If undefined: Chart shows historical view (default)
+     * - If data.timeSeries.length === 1: Automatically shows point-in-time mode
+     *
+     * Note: Changing selectedIndex does NOT trigger animation. Animation only
+     * plays when toggling between point-in-time and historical modes.
+     */
+    selectedIndex?: number;
+    title?: string;
+    subtitle?: string;
+    showHeader?: boolean;
+    width?: number;
+    height?: number;
+    timeRange?: [number, number];
+    onTimeRangeChange?: (range: [number, number]) => void;
+    enableBrush?: boolean;
+    showLegend?: boolean;
+    showTooltip?: boolean;
+    showGrid?: boolean;
+    enableAnimation?: boolean;
+    animationDuration?: number;
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    onAnimationStateChange?: (isAnimating: boolean) => void;
+    onTimelineReady?: (timeline: unknown) => void;
+    onAnimationProgress?: (progress: number, stage: string) => void;
+};

package/dist/components/chrono-chart/components/category-table.component.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { CategoryTableProps } from './category-table.types';
+export declare const CategoryTable: FunctionComponent<CategoryTableProps>;

package/dist/components/chrono-chart/components/category-table.types.d.ts

@@ -0,0 +1,17 @@
+export type CategoryTableItem = {
+    id: string;
+    label: string;
+    value: number;
+    percentage: number;
+    color: string;
+    tooltip?: string;
+    max?: number;
+    min?: number;
+};
+export type CategoryTableProps = {
+    categories: CategoryTableItem[];
+    activeCategory: string | null;
+    onCategoryHover: (categoryId: string | null) => void;
+    mode: 'point-in-time' | 'historical';
+    visible?: boolean;
+};

package/dist/components/chrono-chart/utils/data-transformer.d.ts

@@ -0,0 +1,9 @@
+import { MorphChartCategory, MorphChartDataPoint } from '../../morph-chart/morph-chart.types';
+import { ChronoData } from '../chrono-chart.types';
+import { CategoryTableItem } from '../components/category-table.types';
+export declare const extractLatestValues: (data: ChronoData, mode?: "point-in-time" | "historical") => CategoryTableItem[];
+export declare const transformToMorphChart: (data: ChronoData) => {
+    data: MorphChartDataPoint[];
+    categories: MorphChartCategory[];
+};
+export declare const validateChronoData: (data: ChronoData) => void;

package/dist/components/d3-stacked-area-chart/d3-stacked-area-chart.component.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { D3StackedAreaChartProps } from './d3-stacked-area-chart.types';
+/**
+ * D3-based stacked area chart component
+ * Built for seamless morphing with parliament chart
+ */
+export declare const D3StackedAreaChart: FunctionComponent<D3StackedAreaChartProps>;

package/dist/components/d3-stacked-area-chart/d3-stacked-area-chart.types.d.ts

@@ -0,0 +1,89 @@
+/**
+ * D3-based stacked area chart types
+ * Built for seamless morphing with parliament chart
+ */
+export type D3StackedAreaDataPoint = {
+    timestamp: number;
+    [category: string]: number;
+};
+export type D3StackedAreaCategory = {
+    dataKey: string;
+    label: string;
+    color: string;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    fillOpacity?: number;
+};
+export type D3StackedAreaChartProps = {
+    /** Array of data points sorted by timestamp */
+    data: D3StackedAreaDataPoint[];
+    /** Array of category definitions */
+    categories: D3StackedAreaCategory[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Show header (title and subtitle) */
+    showHeader?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltips on hover */
+    showTooltip?: boolean;
+    /** Chart dimensions */
+    width?: number;
+    height?: number;
+    /** Margins for axes */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Time range for x-axis */
+    timeRange?: [number, number];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show axes (deprecated: use showXAxis and showYAxis instead) */
+    showAxes?: boolean;
+    /** Show X-axis */
+    showXAxis?: boolean;
+    /** Show Y-axis */
+    showYAxis?: boolean;
+    /** Enable animations */
+    enableAnimation?: boolean;
+    /** Animation duration */
+    animationDuration?: number;
+    /** Format date for axis */
+    formatDate?: (timestamp: number) => string;
+    /** Format value for axis */
+    formatValue?: (value: number) => string;
+    /** Callback when time range changes */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Enable brush selection */
+    enableBrush?: boolean;
+    /** Zoom to selection - when true, brush clears after selection and expects chart to zoom via timeRange update */
+    zoomToSelection?: boolean;
+    /** Markers (vertical lines for events) */
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+        strokeDasharray?: string;
+    }>;
+    /** Marker visibility mode: 'hover' shows only nearest marker on hover, 'always' shows all markers */
+    markerVisibilityMode?: 'always' | 'hover';
+    /** Mode for morphing animation */
+    morphMode?: 'area' | 'parliament' | 'morphing';
+    /** Parliament layout data (for morphing) */
+    parliamentData?: {
+        arcAngle: number;
+        radius: number;
+        seatPositions: Array<{
+            x: number;
+            y: number;
+            category: string;
+        }>;
+    };
+    /** Morph progress (0 = area, 1 = parliament) */
+    morphProgress?: number;
+};

package/dist/components/d3-stacked-area-chart/hooks/use-d3-stacked-area.hook.d.ts

@@ -0,0 +1,34 @@
+import { RefObject } from 'react';
+import { D3StackedAreaCategory, D3StackedAreaDataPoint } from '../d3-stacked-area-chart.types';
+type UseD3StackedAreaProps = {
+    containerRef: RefObject<SVGSVGElement>;
+    data: D3StackedAreaDataPoint[];
+    categories: D3StackedAreaCategory[];
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    timeRange?: [number, number];
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    enableBrush?: boolean;
+    zoomToSelection?: boolean;
+    onTimeRangeChange?: (range: [number, number]) => void;
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+        strokeDasharray?: string;
+    }>;
+    markerVisibilityMode?: 'always' | 'hover';
+    onMarkerHoverChange?: (isHovering: boolean) => void;
+};
+export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange }: UseD3StackedAreaProps) => void;
+export {};

package/dist/components/morph-chart/hooks/shared/computations.d.ts

@@ -0,0 +1,27 @@
+import { StageDurations } from './types';
+/**
+ * Calculate stage durations from total animation duration
+ *
+ * Splits the total duration into proportional stages for smooth timing:
+ * - 27% Seats to bar transformation
+ * - 3% Pause to appreciate seat-to-bar transition
+ * - 25% Bar slide to timeline + axes appear
+ * - 25% Other bars grow from baseline
+ * - 20% Bars morph to curved areas
+ *
+ * @param totalDuration - Total animation duration in milliseconds
+ * @returns Object with duration for each stage in milliseconds
+ *
+ * @example
+ * ```ts
+ * const durations = calculateStageDurations(2000);
+ * // {
+ * //   seatsToBar: 540,           // 27%
+ * //   crossFadePause: 60,        // 3%
+ * //   barSlideToTimeline: 500,   // 25%
+ * //   axesAndBarsGrow: 500,      // 25%
+ * //   barsToArea: 400            // 20%
+ * // }
+ * ```
+ */
+export declare function calculateStageDurations(totalDuration: number): StageDurations;

package/dist/components/morph-chart/hooks/shared/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Shared types for morph animation stages
+ *
+ * These types are used across multiple animation stages for consistent
+ * timing and duration calculations.
+ */
+/**
+ * Animation stage durations for parliament → area morph (4 stages)
+ * Calculated as fractions of total duration for smooth timing
+ */
+export type StageDurations = {
+    /** Frame 1→2: Seats directly transform to vertical bar (27% of total) */
+    seatsToBar: number;
+    /** Pause after cross-fade to appreciate seat-to-bar transition (3% of total) */
+    crossFadePause: number;
+    /** Frame 2→3: Bar slides to timeline + axes/grid appear (25% of total) */
+    barSlideToTimeline: number;
+    /** Frame 3→4: Other bars grow from baseline (25% of total) */
+    axesAndBarsGrow: number;
+    /** Frame 4→5: Bars morph to curved area (20% of total) */
+    barsToArea: number;
+};

package/dist/components/morph-chart/hooks/use-morph-chart.hook.d.ts

@@ -0,0 +1,85 @@
+import { RefObject } from 'react';
+import { HoveredData, MorphChartCategory, MorphChartDataPoint, MorphMode } from '../morph-chart.types';
+type UseMorphChartProps = {
+    containerRef: RefObject<SVGSVGElement>;
+    data: MorphChartDataPoint[];
+    categories: MorphChartCategory[];
+    mode: 'parliament' | 'stacked-area';
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    timeRange?: [number, number];
+    showGrid?: boolean;
+    showAxes?: boolean;
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+    }>;
+    arcAngle?: number;
+    parliamentRadius?: number;
+    seatSize?: number;
+    animationDuration?: number;
+    onMorphComplete?: () => void;
+    onAnimationStateChange?: (isAnimating: boolean) => void;
+    onTimelineReady?: (timeline: gsap.core.Timeline) => void;
+    onAnimationProgress?: (progress: number, stage: string) => void;
+    onHoveredDataChange?: (data: HoveredData) => void;
+    hoveredCategory?: string | null;
+    maxSeats?: number;
+    parliamentTimestamp?: number;
+    enableBrush?: boolean;
+    onTimeRangeChange?: (range: [number, number]) => void;
+    showScaleIndicator?: boolean;
+    reposPerSeat?: number;
+    timelineEvents?: Array<{
+        timestamp: number;
+        eventName: string;
+        color?: string;
+    }>;
+    showTimeline?: boolean;
+    timelineHeight?: number;
+    timelineOffset?: number;
+};
+export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset }: UseMorphChartProps) => {
+    isMorphing: boolean;
+    currentMode: MorphMode;
+    hoveredCategory: string | null;
+    scaleIndicatorOpacity: number;
+    visibleMarkers: {
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    }[];
+    hoveredMarker: {
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    } | null;
+    setHoveredMarker: import('react').Dispatch<import('react').SetStateAction<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    } | null>>;
+    hoveredTimelineEvent: {
+        timestamp: number;
+        eventName: string;
+        x: number;
+    } | null;
+    setHoveredTimelineEvent: import('react').Dispatch<import('react').SetStateAction<{
+        timestamp: number;
+        eventName: string;
+        x: number;
+    } | null>>;
+};
+export {};

package/dist/components/morph-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { MorphChart } from './morph-chart.component';
+export type { AreaLayout, AreaPoint, MorphChartCategory, MorphChartDataPoint, MorphChartProps, MorphMode, ParliamentLayout, SeatPosition } from './morph-chart.types';

package/dist/components/morph-chart/morph-chart.component.d.ts

@@ -0,0 +1,14 @@
+import { FunctionComponent } from 'react';
+import { MorphChartProps } from './morph-chart.types';
+/**
+ * MorphChart - Seamlessly morphs between parliament and stacked area visualizations
+ *
+ * This component uses D3 to create smooth transitions between a parliament chart
+ * (point-in-time view) and a stacked area chart (historical view).
+ *
+ * Key insight: The parliament chart represents the rightmost edge (latest timestamp)
+ * of the stacked area chart. During morphing:
+ * - Parliament → Stacked Area: Seats slide to the right edge, then areas expand leftward
+ * - Stacked Area → Parliament: Areas collapse to the right edge, then seats expand to parliament layout
+ */
+export declare const MorphChart: FunctionComponent<MorphChartProps>;

package/dist/components/morph-chart/morph-chart.types.d.ts

@@ -0,0 +1,154 @@
+import { D3StackedAreaCategory } from '../d3-stacked-area-chart/d3-stacked-area-chart.types';
+export type MorphMode = 'area' | 'parliament' | 'morphing';
+export type MorphChartDataPoint = {
+    timestamp: number;
+    values: Record<string, number>;
+};
+export type MorphChartCategory = D3StackedAreaCategory & {
+    /** Parliament chart mapping (for special categories) */
+    parliamentMapping?: {
+        isSpecialCategory?: boolean;
+    };
+};
+/**
+ * Hovered data state for tooltips and interactions
+ */
+export type HoveredData = {
+    label: string;
+    value: number;
+    color: string;
+} | null;
+export type MorphChartProps = {
+    /** Time series data for area chart */
+    data: MorphChartDataPoint[];
+    /** Category definitions */
+    categories: MorphChartCategory[];
+    /** Current visualization mode */
+    mode: 'parliament' | 'stacked-area';
+    /** Morph progress: 0 = fully area, 1 = fully parliament */
+    morphProgress?: number;
+    /** Chart dimensions */
+    width?: number;
+    height?: number;
+    /** Margins */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Time range for area chart */
+    timeRange?: [number, number];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show axes */
+    showAxes?: boolean;
+    /** Enable brush selection */
+    enableBrush?: boolean;
+    /** Callback when time range changes */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Format date for axis */
+    formatDate?: (timestamp: number) => string;
+    /** Format value for axis */
+    formatValue?: (value: number) => string;
+    /** Event markers */
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+    }>;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Callback when morphing animation completes */
+    onMorphComplete?: () => void;
+    /** Callback when animation state changes */
+    onAnimationStateChange?: (isAnimating: boolean) => void;
+    /** Callback when GSAP timeline is ready for control */
+    onTimelineReady?: (timeline: unknown) => void;
+    /** Callback for animation progress updates */
+    onAnimationProgress?: (progress: number, stage: string) => void;
+    /** Parliament arc angle (degrees) */
+    arcAngle?: number;
+    /** Parliament radius */
+    parliamentRadius?: number;
+    /** Parliament seat size */
+    seatSize?: number;
+    /** Use enhanced parliament rendering */
+    useEnhancedParliament?: boolean;
+    /** Callback when hover state changes */
+    onHoveredDataChange?: (data: HoveredData) => void;
+    /** Currently hovered category (for external control of highlighting) */
+    hoveredCategory?: string | null;
+    /** Max seats before scaling (default: 500) */
+    maxSeats?: number;
+    /** Show tooltip overlay (default: true) */
+    showTooltip?: boolean;
+    /** Show category summary table (default: false for MorphChart) */
+    showTable?: boolean;
+    /** Show scaled indicator when seats > maxSeats (default: true) */
+    showScaledIndicator?: boolean;
+    /**
+     * Explicit timestamp that the parliament represents.
+     * If provided, this overrides automatic timestamp detection and ensures
+     * the bar slides to the correct position on the timeline during animation.
+     * If not provided, defaults to the rightmost (most recent) timestamp.
+     */
+    parliamentTimestamp?: number;
+    /** Timeline events to display below the x-axis (area mode only) */
+    timelineEvents?: Array<{
+        timestamp: number;
+        eventName: string;
+        color?: string;
+    }>;
+    /** Show timeline track (default: false) */
+    showTimeline?: boolean;
+    /** Timeline track height in pixels (default: 40) */
+    timelineHeight?: number;
+    /** Space between x-axis and timeline in pixels (default: 35) */
+    timelineOffset?: number;
+};
+/**
+ * Seat position in parliament layout
+ */
+export type SeatPosition = {
+    x: number;
+    y: number;
+    category: string;
+    categoryIndex: number;
+    seatIndex: number;
+    ring: number;
+    angle: number;
+    radius: number;
+};
+/**
+ * Area chart point in cartesian space
+ */
+export type AreaPoint = {
+    x: number;
+    y: number;
+    y0: number;
+    y1: number;
+    category: string;
+    timestamp: number;
+};
+/**
+ * Parliament layout metadata
+ */
+export type ParliamentLayout = {
+    arcAngle: number;
+    radius: number;
+    innerRadius: number;
+    centerX: number;
+    centerY: number;
+    seatSize: number;
+    seats: SeatPosition[];
+    totalSeats: number;
+};
+/**
+ * Area chart layout metadata
+ */
+export type AreaLayout = {
+    chartWidth: number;
+    chartHeight: number;
+    points: AreaPoint[];
+};

package/dist/components/morph-chart/utils/animation-constants.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Animation constants for parliament to stacked area morphing
+ * Centralized configuration for timing, easing, and stage proportions
+ */
+/**
+ * GSAP easing functions for smooth transitions
+ * Uses GSAP's power easing for professional motion
+ */
+export declare const EASING: {
+    /** Smooth acceleration and deceleration - used for transformations */
+    readonly IN_OUT: "power2.inOut";
+    /** Smooth deceleration only - used for sliding and growing */
+    readonly OUT: "power2.out";
+};
+/**
+ * Timing constants for staggered animations
+ */
+export declare const TIMING: {
+    /** No stagger - all elements animate simultaneously */
+    readonly NO_STAGGER: 0;
+    /** Ripple effect delay - each bar delayed by distance × this value (50ms per unit) */
+    readonly RIPPLE_STAGGER_DELAY: 0.05;
+};

package/dist/components/morph-chart/utils/animation-utils.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Utility functions for animation path manipulation
+ * Shared helpers for creating SVG paths from bar geometries
+ */
+/**
+ * Create a rectangular SVG path from bar dimensions
+ * Used as the initial state for path morphing animations
+ *
+ * @param x - Left edge x-coordinate of the rectangle
+ * @param y - Top edge y-coordinate of the rectangle
+ * @param width - Width of the rectangle
+ * @param height - Height of the rectangle
+ * @returns SVG path string representing a closed rectangle
+ *
+ * @example
+ * ```ts
+ * const path = createRectPath(100, 50, 20, 80);
+ * // Returns: "M 100 130 L 100 50 L 120 50 L 120 130 Z"
+ * ```
+ */
+export declare function createRectPath(x: number, y: number, width: number, height: number): string;
+/**
+ * Create a combined SVG path from multiple bar segments for a single category
+ * Connects all bars into a single continuous path suitable for morphing
+ *
+ * The path traces along the top edges of all bars (left to right),
+ * then closes along the bottom baseline, creating a unified shape.
+ *
+ * @param bars - Array of SVG rect elements to combine
+ * @returns SVG path string representing the combined shape
+ *
+ * @example
+ * ```ts
+ * const bars = svg.selectAll('.category-java rect').nodes();
+ * const combinedPath = createCombinedBarPath(bars);
+ * // Returns path that traces outline of all bars
+ * ```
+ *
+ * @remarks
+ * - Bars are automatically sorted by x-position (left to right)
+ * - Empty array returns empty string
+ * - Path draws: bottom-left → tops (left-to-right) → bottom-right → close
+ */
+export declare function createCombinedBarPath(bars: SVGRectElement[]): string;

package/dist/components/morph-chart/utils/arc-path-calculator.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Arc path calculator for slinky-style seat → bar animations
+ * Generates pronounced bezier arc paths for smooth cascading motion
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface ArcPathData {
+    startX: number;
+    startY: number;
+    controlX: number;
+    controlY: number;
+    endX: number;
+    endY: number;
+    distance: number;
+}
+/**
+ * Calculate the control point for a quadratic bezier curve
+ * Creates a pronounced arc by offsetting perpendicular to the direct path
+ *
+ * @param start - Starting point (seat position)
+ * @param end - Ending point (bar segment position)
+ * @param arcIntensity - How pronounced the arc should be (0-1, default 0.35 for 35% offset)
+ * @returns Control point for the bezier curve
+ */
+export declare function calculateArcControlPoint(start: Point, end: Point, arcIntensity?: number): Point;
+/**
+ * Generate complete arc path data for animating a seat to a bar position
+ *
+ * @param seatPosition - Current seat position in parliament
+ * @param barPosition - Target bar segment position
+ * @param arcIntensity - How pronounced the arc should be (default 0.35)
+ * @returns Complete path data for GSAP animation
+ */
+export declare function generateArcPath(seatPosition: Point, barPosition: Point, arcIntensity?: number): ArcPathData;
+/**
+ * Generate SVG path string for a quadratic bezier arc
+ * Useful for debugging or visual representation
+ *
+ * @param pathData - Arc path data
+ * @returns SVG path string
+ */
+export declare function generateSVGPath(pathData: ArcPathData): string;
+/**
+ * Calculate points along a quadratic bezier curve
+ * Useful for visualizing or debugging the arc path
+ *
+ * @param pathData - Arc path data
+ * @param numPoints - Number of points to generate along the curve (default 20)
+ * @returns Array of points along the curve
+ */
+export declare function getPointsAlongArc(pathData: ArcPathData, numPoints?: number): Point[];