@moderneinc/react-charts 1.2.0-next.fe4657 → 1.3.0-next.44efd5

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

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { D3StackedBarChartProps } from './d3-stacked-bar-chart.types';
+/**
+ * D3-based stacked bar chart component
+ * Timeline-based bar chart with crosshair cursor and brush selection
+ */
+export declare const D3StackedBarChart: FunctionComponent<D3StackedBarChartProps>;

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

@@ -0,0 +1,89 @@
+/**
+ * D3-based stacked bar chart types
+ * Timeline-based bar chart with crosshair cursor and brush selection
+ */
+export type D3StackedBarDataPoint = {
+    timestamp: number;
+    [category: string]: number;
+};
+export type D3StackedBarCategory = {
+    dataKey: string;
+    label: string;
+    color: string;
+    fillOpacity?: number;
+};
+export type D3StackedBarChartProps = {
+    /** Array of data points sorted by timestamp */
+    data: D3StackedBarDataPoint[];
+    /** Array of category definitions */
+    categories: D3StackedBarCategory[];
+    /** 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;
+    /** Format date for axis and tooltip */
+    formatDate?: (timestamp: number) => string;
+    /** Format value for axis and tooltip */
+    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 */
+    zoomToSelection?: boolean;
+    /**
+     * Color for brush selection overlay.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
+    /** Show crosshair cursor on hover */
+    showCrosshair?: boolean;
+    /**
+     * Color for crosshair lines
+     * @default '#666'
+     */
+    crosshairColor?: string;
+    /**
+     * Dash array pattern for crosshair lines
+     * @default '4,4'
+     */
+    crosshairDashArray?: string;
+};
+export type TooltipData = {
+    visible: boolean;
+    x: number;
+    y: number;
+    category: {
+        label: string;
+        color: string;
+    };
+    value: number;
+    startTime: number;
+    endTime: number;
+};

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

@@ -0,0 +1,31 @@
+import { RefObject } from 'react';
+import { D3StackedBarCategory, D3StackedBarDataPoint, TooltipData } from '../d3-stacked-bar-chart.types';
+type UseD3StackedBarProps = {
+    containerRef: RefObject<SVGSVGElement | null>;
+    data: D3StackedBarDataPoint[];
+    categories: D3StackedBarCategory[];
+    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;
+    showCrosshair?: boolean;
+    crosshairColor?: string;
+    crosshairDashArray?: string;
+    brushColor?: string;
+    onTooltipChange?: (tooltip: TooltipData | null) => void;
+};
+export declare const useD3StackedBar: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, showCrosshair, crosshairColor, crosshairDashArray, brushColor, onTooltipChange }: UseD3StackedBarProps) => void;
+export {};

package/dist/components/stacked-area-with-timeline/hooks/use-stacked-area-with-timeline.hook.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { D3StackedAreaCategory } from '../../d3-stacked-area-chart/d3-stacked-area-chart.types';
 import { HoveredData, HoveredMarker, HoveredTimelineEvent, StackedAreaDataPoint, TimelineEvent } from '../stacked-area-with-timeline.types';
-export type UseStackedAreaWithTimelineOptions = {
+type UseStackedAreaWithTimelineOptions = {
     containerRef: RefObject<SVGSVGElement | null>;
     data: StackedAreaDataPoint[];
     categories: D3StackedAreaCategory[];
@@ -38,15 +38,16 @@ export type UseStackedAreaWithTimelineOptions = {
     hoveredCategory?: string | null;
     onTimelineEventHover?: (event: HoveredTimelineEvent) => void;
 };
-export type VisibleMarker = {
+type VisibleMarker = {
     timestamp: number;
     label?: string;
     color?: string;
     x: number;
 };
-export type UseStackedAreaWithTimelineResult = {
+type UseStackedAreaWithTimelineResult = {
     hoveredTimelineEvent: HoveredTimelineEvent;
     hoveredMarker: HoveredMarker;
     visibleMarkers: VisibleMarker[];
 };
 export declare const useStackedAreaWithTimeline: ({ containerRef, data, categories, width, height, margin, timelineEvents, showTimeline, timelineHeight, timelineOffset, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, enableBrush, onTimeRangeChange, minAllowedTime, maxAllowedTime, brushColor, formatDate, formatValue, markers, onHoveredDataChange, hoveredCategory, onTimelineEventHover }: UseStackedAreaWithTimelineOptions) => UseStackedAreaWithTimelineResult;
+export {};

package/dist/components/stacked-area-with-timeline/utils/render-timeline-track.d.ts

@@ -1,16 +1,7 @@
 import { ScaleTime } from 'd3-scale';
 import { Selection } from 'd3-selection';
-export type TimelineEvent = {
-    timestamp: number;
-    eventName: string;
-    color?: string;
-};
-export type HoveredTimelineEvent = {
-    timestamp: number;
-    eventName: string;
-    x: number;
-} | null;
-export type RenderTimelineTrackOptions = {
+import { HoveredTimelineEvent, TimelineEvent } from '../stacked-area-with-timeline.types';
+type RenderTimelineTrackOptions = {
     /** D3 SVG selection */
     svg: Selection<SVGSVGElement, unknown, null, undefined>;
     /** Timeline events to display */
@@ -52,3 +43,4 @@ export type RenderTimelineTrackOptions = {
  * - Double-click to reset to full time range
  */
 export declare function renderTimelineTrack({ svg, events, xScale, chartHeight, chartWidth, timelineHeight, timelineOffset, instanceId, setHoveredTimelineEvent, enableBrush, onTimeRangeChange, minAllowedTime, maxAllowedTime, brushColor, mainGroupSelector }: RenderTimelineTrackOptions): void;
+export {};