@moderneinc/react-charts 1.1.0 → 1.2.0

package/dist/components/parliament-chart/hooks/{useParliamentChart.d.ts → use-parliament-chart.hook.d.ts}

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { ChartConfig, HoveredData, ProcessedDataItem } from '../ParliamentChart.types';
+import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
 type UseParliamentChartProps = {
     containerRef: RefObject<HTMLDivElement>;
     processedData: ProcessedDataItem[];

package/dist/components/parliament-chart/{ParliamentChart.d.ts → parliament-chart.component.d.ts}

@@ -1,5 +1,5 @@
 import { FunctionComponent } from 'react';
-import { ParliamentChartProps } from './ParliamentChart.types';
+import { ParliamentChartProps } from './parliament-chart.types';
 /**
  * Renders an interactive parliament-style chart visualization for repository statistics.
  * Displays repository counts as seats in a semi-circular or arc layout, with scaling

package/dist/components/parliament-chart/{ParliamentChart.types.d.ts → parliament-chart.types.d.ts}

@@ -1,4 +1,4 @@
-import { ParliamentChartTheme } from '../../theme/defaultColors';
+import { ParliamentChartTheme } from '../../theme/default-colors';
 type ParliamentDataSeries = {
     value: number;
     label: string;

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

@@ -0,0 +1,2 @@
+import { UseTimelineChartProps, UseTimelineChartReturn } from '../timeline-chart.types';
+export declare const useTimelineChart: ({ events, selectedRange, onSelectionChange, enableZoom, zoomToSelection, visibleRange, onVisibleRangeChange }: UseTimelineChartProps) => UseTimelineChartReturn;

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { TimelineChartProps } from './timeline-chart.types';
+/**
+ * TimelineChart component - Interactive timeline with drag selection and zoom
+ *
+ * Displays events on a timeline with interactive selection capabilities.
+ * Users can click and drag to select date ranges, and use mouse wheel to zoom.
+ */
+export declare const TimelineChart: FunctionComponent<TimelineChartProps>;

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

@@ -0,0 +1,112 @@
+import { BoxProps, StackProps, TypographyProps } from '@mui/material';
+export type TimelineEvent = {
+    date: Date;
+    timestamp: number;
+    eventName: string;
+    [key: string]: unknown;
+};
+export type TimelineSelection = {
+    start: number | null;
+    end: number | null;
+};
+export type TimelineChartSlotProps = {
+    /** Props for the header container (Stack) */
+    header?: StackProps;
+    /** Props for the title Typography component */
+    title?: TypographyProps;
+    /** Props for the instructions Typography component */
+    instructions?: TypographyProps;
+    /** Props for the month labels container (Stack) */
+    monthLabelsContainer?: StackProps;
+    /** Props for individual month label Typography components */
+    monthLabel?: TypographyProps;
+    /** Props for the timeline container (Box) */
+    timeline?: BoxProps;
+    /** Props for individual event markers (Box) */
+    event?: BoxProps;
+    /** Props for the selection highlight overlay (Box) */
+    selection?: BoxProps;
+    /** Props for the hover tooltip container (Box) */
+    tooltip?: BoxProps;
+    /** Props for the tooltip event name Typography component */
+    tooltipEventName?: TypographyProps;
+    /** Props for the tooltip date Typography component */
+    tooltipDate?: TypographyProps;
+};
+export type TimelineChartProps = {
+    /** Array of events to display on the timeline (must be sorted by timestamp) */
+    events: TimelineEvent[];
+    /** Callback when selection changes */
+    onSelectionChange?: (selection: TimelineSelection) => void;
+    /** Controlled selection state (optional) */
+    selectedRange?: TimelineSelection;
+    /** Height of the timeline container in pixels (default: 32) */
+    height?: number;
+    /** Custom date formatter */
+    formatDate?: (timestamp: number) => string;
+    /** Custom month/year formatter */
+    formatMonthYear?: (timestamp: number) => string;
+    /** Show month labels at top */
+    showMonthLabels?: boolean;
+    /** Number of month labels to display (default: 6) */
+    monthLabelCount?: number;
+    /** Enable zoom with mouse wheel */
+    enableZoom?: boolean;
+    /** Show header title and instructions (default: true) */
+    showHeader?: boolean;
+    /** Custom title for the header */
+    title?: string;
+    /**
+     * Zoom to selection mode - When enabled, dragging to select a range
+     * will automatically rescale the timeline to show only that range.
+     * Selection highlight only shows during drag.
+     */
+    zoomToSelection?: boolean;
+    /** Callback when the visible range changes (for zoom to selection mode) */
+    onVisibleRangeChange?: (range: TimelineSelection) => void;
+    /** Controlled visible range (for zoom to selection mode) */
+    visibleRange?: TimelineSelection;
+    /** Props for individual component slots */
+    slotProps?: TimelineChartSlotProps;
+};
+export type UseTimelineChartProps = {
+    events: TimelineEvent[];
+    selectedRange?: TimelineSelection;
+    onSelectionChange?: (selection: TimelineSelection) => void;
+    enableZoom: boolean;
+    zoomToSelection: boolean;
+    visibleRange?: TimelineSelection;
+    onVisibleRangeChange?: (range: TimelineSelection) => void;
+};
+export type UseTimelineChartReturn = {
+    isDragging: boolean;
+    dragStart: number | null;
+    internalSelectedRange: TimelineSelection;
+    internalVisibleRange: TimelineSelection;
+    hoveredEvent: TimelineEvent | null;
+    minDate: number;
+    maxDate: number;
+    timeSpan: number;
+    getPositionFromTimestamp: (timestamp: number) => number;
+    getTimestampFromPosition: (x: number, containerWidth: number) => number;
+    handleMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleMouseMove: (e: React.MouseEvent<HTMLDivElement>) => void;
+    handleMouseUp: () => void;
+    handleWheel: (e: React.WheelEvent<HTMLDivElement>) => void;
+    handleDoubleClick: () => void;
+    setHoveredEvent: (event: TimelineEvent | null) => void;
+    getEventsInRange: () => TimelineEvent[];
+    resetZoom: () => void;
+};
+export type TimelineSelectedEventsProps = {
+    /** Array of selected events to display */
+    events: TimelineEvent[];
+    /** Title for the selected events section */
+    title?: string;
+    /** Maximum height before scrolling */
+    maxHeight?: string;
+    /** Custom date formatter */
+    formatDate?: (timestamp: number) => string;
+    /** Primary color for event items */
+    primaryColor?: string;
+};

package/dist/components/timeline-chart/timeline-selected-events.component.d.ts

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+import { TimelineSelectedEventsProps } from './timeline-chart.types';
+/**
+ * TimelineSelectedEvents component - Displays selected events from timeline
+ *
+ * This component observes and displays events that have been selected in a timeline.
+ * It can be used independently alongside the TimelineChart component.
+ */
+export declare const TimelineSelectedEvents: FunctionComponent<TimelineSelectedEventsProps>;