@moderneinc/react-charts 1.7.0-next.1a5e01 → 1.7.0-next.9d4abe

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

@@ -1,3 +1,4 @@
+import { CenterLabelVariant } from '../parliament-chart/parliament-chart.types';
 import { TimelineEvent } from '../timeline-chart/timeline-chart.types';
 /**
  * Represents a data category with visual styling and optional parliament-specific mappings.
@@ -142,4 +143,9 @@ export type ChronoChartProps = {
      * @default '4,4'
      */
     crosshairDashArray?: string;
+    /**
+     * Center label's large figure: the hovered category's share, or its count.
+     * @default 'percent'
+     */
+    centerLabelVariant?: CenterLabelVariant;
 };

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

@@ -43,8 +43,6 @@ type UseMorphChartProps = {
     onTimeRangeChange?: (range: [number, number]) => void;
     minAllowedTime?: number;
     maxAllowedTime?: number;
-    showScaleIndicator?: boolean;
-    reposPerSeat?: number;
     timelineEvents?: Array<{
         timestamp: number;
         eventName: string;
@@ -60,11 +58,11 @@ type UseMorphChartProps = {
         y: number;
     } | null) => void;
 };
-export declare const useMorphChart: ({ containerRef, data, categories, mode, paletteMode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor, showCrosshair, onCrosshairMove }: UseMorphChartProps) => {
+export declare const useMorphChart: ({ containerRef, data, categories, mode, paletteMode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor, showCrosshair, onCrosshairMove }: UseMorphChartProps) => {
     isMorphing: boolean;
     currentMode: MorphMode;
-    hoveredCategory: string | null;
-    scaleIndicatorOpacity: number;
+    seatExtents: import('../../parliament-chart/utils/seat-extents').SeatExtents | null;
+    hoveredData: HoveredData;
     visibleMarkers: {
         timestamp: number;
         label?: string;

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

@@ -1,5 +1,6 @@
 import { PaletteMode } from '@mui/material/styles';
 import { D3StackedAreaCategory } from '../d3-stacked-area-chart/d3-stacked-area-chart.types';
+import { CenterLabelVariant } from '../parliament-chart/parliament-chart.types';
 export type MorphMode = 'area' | 'parliament' | 'morphing';
 export type MorphChartDataPoint = {
     timestamp: number;
@@ -97,14 +98,19 @@ export type MorphChartProps = {
     onHoveredDataChange?: (data: HoveredData) => void;
     /** Currently hovered category (for external control of highlighting) */
     hoveredCategory?: string | null;
-    /** Max seats before scaling (default: 500) */
+    /** Max seats before scaling (default: DEFAULT_CHART_CONFIG.maxSeats) */
     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) */
+    /** Show "Each dot is …" in the parliament label (default: true) */
     showScaledIndicator?: boolean;
+    /**
+     * Center label's large figure: the hovered category's share, or its count.
+     * @default 'percent'
+     */
+    centerLabelVariant?: CenterLabelVariant;
     /**
      * Explicit timestamp that the parliament represents.
      * If provided, this overrides automatic timestamp detection and ensures

package/dist/components/morph-chart/utils/parliament-renderer.d.ts

@@ -6,12 +6,19 @@ import { MorphChartCategory, ParliamentLayout } from '../morph-chart.types';
  * Replaces spaces, slashes, and other special characters with hyphens
  */
 export declare function sanitizeCategoryForClass(category: string): string;
+/**
+ * Arc center in chart-area coords. Seats and MorphChart's center label both
+ * use it so they can't drift apart.
+ */
+export declare function getParliamentCenter(radius: number, chartWidth: number, chartHeight: number): {
+    x: number;
+    y: number;
+};
 interface ParliamentRenderOptions {
     centerX: number;
     centerY: number;
     addClasses?: boolean;
     instanceId?: string;
-    parliamentRadius?: number;
     paletteMode?: PaletteMode;
 }
 /**

package/dist/components/parliament-chart/components/parliament-center-label.component.d.ts

@@ -0,0 +1,29 @@
+import { SxProps, Theme } from '@mui/material';
+import { FunctionComponent } from 'react';
+import { CenterLabelVariant, HoveredData } from '../parliament-chart.types';
+import { SeatExtents } from '../utils/seat-extents';
+export declare const MUTED_TEXT = "var(--rc-muted-text, #6b7280)";
+/**
+ * Arc-wide box, arc top to just below center; a ratio, so it fits any radius.
+ * Make it the label's `inline-size` container: sizes are `cqw` of 2r.
+ */
+export declare const ARC_LABEL_BOX_ASPECT_RATIO: string;
+export declare const formatPercentage: (value: number, total: number) => string;
+export declare const SeatSwatch: FunctionComponent<{
+    color: string;
+    label: string;
+    size: number | string;
+    sx?: SxProps<Theme>;
+}>;
+/**
+ * Hovered category's share; nothing when idle. Its positioned ancestor should
+ * be an `ARC_LABEL_BOX_ASPECT_RATIO` box; `seatExtents` lifts it on narrow arcs.
+ */
+export declare const ParliamentCenterLabel: FunctionComponent<{
+    hoveredData: HoveredData;
+    totalRepositories: number;
+    maxSeats: number;
+    seatExtents: SeatExtents | null;
+    variant?: CenterLabelVariant;
+    showScale?: boolean;
+}>;

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

@@ -2,6 +2,7 @@ import { PaletteMode } from '@mui/material/styles';
 import { RefObject } from 'react';
 import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
 import { ArcSweepDirection } from '../utils/parliament-animation';
+import { SeatExtents } from '../utils/seat-extents';
 type UseParliamentChartProps = {
     containerRef: RefObject<HTMLDivElement>;
     processedData: ProcessedDataItem[];
@@ -10,6 +11,7 @@ type UseParliamentChartProps = {
     useEnhanced: boolean;
     maxSeats: number;
     setHoveredData: (data: HoveredData) => void;
+    setSeatExtents: (extents: SeatExtents | null) => void;
     activePartyName: string | null;
     setActivePartyName: (name: string | null) => void;
     chartConfig: ChartConfig;
@@ -24,5 +26,5 @@ type UseParliamentChartProps = {
  * Generates SVG visualization with seat circles and handles hover states
  * for displaying repository statistics.
  */
-export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, activePartyName, setActivePartyName, chartConfig, seatSize, paletteMode, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
+export declare const useParliamentChart: ({ containerRef, processedData, totalRepositories, arcAngle, useEnhanced, maxSeats, setHoveredData, setSeatExtents, activePartyName, setActivePartyName, chartConfig, seatSize, paletteMode, shouldAnimate, animationDirection, onAnimationComplete }: UseParliamentChartProps) => void;
 export {};

package/dist/components/parliament-chart/parliament-chart.constants.d.ts

@@ -9,7 +9,7 @@ export declare const DEFAULT_CHART_CONFIG: {
         readonly minSeatSize: 4;
         readonly maxSeatSize: 18;
         readonly spacing: 1.5;
-        readonly innerRadiusRatio: 0.4;
+        readonly innerRadiusRatio: 0.5;
         readonly arcAngleFlexibility: 5;
     };
     readonly colors: {

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

@@ -1,5 +1,6 @@
 import { ParliamentChartTheme } from '../../theme/default-colors';
 import { ArcSweepDirection } from './utils/parliament-animation';
+export type CenterLabelVariant = 'percent' | 'count';
 type ParliamentDataSeries = {
     value: number;
     label: string;
@@ -17,6 +18,11 @@ export type ParliamentChartProps = {
     shouldAnimate?: boolean;
     animationDirection?: ArcSweepDirection;
     onAnimationComplete?: () => void;
+    /**
+     * Center label's large figure: the hovered category's share, or its count.
+     * @default 'percent'
+     */
+    centerLabelVariant?: CenterLabelVariant;
 };
 export type ProcessedDataItem = {
     id: string | number;

package/dist/components/parliament-chart/utils/seat-extents.d.ts

@@ -0,0 +1,11 @@
+/** Drawn seat extents from the arc center, in arc radii; negative is above. */
+export type SeatExtents = {
+    holeTop: number;
+    seatsBottom: number;
+};
+export declare const getSeatExtents: (seats: readonly {
+    x: number;
+    y: number;
+    r: number;
+}[], radius: number) => SeatExtents | null;
+export declare const useSeatExtents: () => readonly [SeatExtents | null, (next: SeatExtents | null) => void];