@moderneinc/react-charts 1.1.0-next.203e4f

package/LICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,44 @@
+# @moderneinc/react-charts
+
+A React component library for parliament-style chart visualizations, perfect for displaying repository statistics, compliance metrics, and migration progress.
+
+## Installation
+
+```bash
+npm install @moderneinc/react-charts
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```json
+{
+  "react": "^18.0.0 || ^19.0.0",
+  "react-dom": "^18.0.0 || ^19.0.0",
+  "@mui/material": ">=7.0.0",
+  "@mui/icons-material": ">=7.0.0",
+  "@emotion/react": ">=11.0.0",
+  "@emotion/styled": ">=11.0.0"
+}
+```
+
+## Development
+
+### Run Storybook
+
+```bash
+npm run storybook
+```
+
+### Build Library
+
+```bash
+npm run build
+```
+
+### Run Tests
+
+```bash
+npm test
+```

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

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { ChartConfig, HoveredData, ProcessedDataItem } from '../parliament-chart.types';
+type UseParliamentChartProps = {
+    containerRef: RefObject<HTMLDivElement>;
+    processedData: ProcessedDataItem[];
+    totalRepositories: number;
+    arcAngle: number;
+    useEnhanced: boolean;
+    maxSeats: number;
+    setHoveredData: (data: HoveredData) => void;
+    activePartyName: string | null;
+    setActivePartyName: (name: string | null) => void;
+    chartConfig: ChartConfig;
+    seatSize: number;
+};
+/**
+ * Hook that manages parliament chart rendering and interactivity.
+ * 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 }: UseParliamentChartProps) => void;
+export {};

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

@@ -0,0 +1,8 @@
+import { FunctionComponent } from 'react';
+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
+ * applied for large datasets. Includes hover interactions and a summary table.
+ */
+export declare const ParliamentChart: FunctionComponent<ParliamentChartProps>;

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

@@ -0,0 +1,40 @@
+export declare const DEFAULT_CHART_CONFIG: {
+    readonly arcAngle: 180;
+    readonly maxSeats: 200;
+    readonly useEnhanced: true;
+    readonly chartConfig: {
+        readonly radius: 220;
+        readonly seatSize: 5;
+        readonly minSeatSize: 4;
+        readonly maxSeatSize: 18;
+        readonly spacing: 1.1;
+        readonly innerRadiusRatio: 0.4;
+        readonly arcAngleFlexibility: 5;
+    };
+    readonly colors: {
+        readonly emptySeats: "#f8f8f8";
+        readonly emptySeatsBorder: "#d8d8d8";
+        readonly seatBorder: "#fff";
+    };
+    readonly animation: {
+        readonly transitionDuration: "0.2s";
+        readonly hoverOpacity: {
+            readonly active: "1";
+            readonly dimmed: "0.2";
+            readonly empty: "0.3";
+        };
+    };
+    readonly scaling: {
+        readonly enableScaling: true;
+        readonly scaleThreshold: 200;
+    };
+};
+export declare const MODERNE_VULNERABILITY_COLORS: {
+    COMPLETED: "#40c048";
+    NOT_APPLICABLE: string;
+    NO_LST: string;
+    DATA_MISSING: string;
+};
+export declare const CAMPAIGN_NOT_APPLICABLE = "N/A";
+export declare const CAMPAIGN_NO_LST = "No LST";
+export declare const CAMPAIGN_DATA_MISSING = "Data Missing";

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

@@ -0,0 +1,36 @@
+import { ParliamentChartTheme } from '../../theme/default-colors';
+type ParliamentDataSeries = {
+    value: number;
+    label: string;
+};
+export type ParliamentChartProps = {
+    dataSeries: Array<ParliamentDataSeries>;
+    totalRepositories: number;
+    notApplicableRepositories: number;
+    noLstRepositories: number;
+    unavailableRepositories: number;
+    arcAngle?: number;
+    useEnhanced?: boolean;
+    theme?: ParliamentChartTheme;
+};
+export type ProcessedDataItem = {
+    id: string | number;
+    label: string;
+    value: number;
+    color: string;
+};
+export type HoveredData = {
+    label: string;
+    value: number;
+    color: string;
+} | null;
+export type ChartConfig = {
+    radius: number;
+    seatSize: number;
+    minSeatSize: number;
+    maxSeatSize: number;
+    spacing: number;
+    innerRadiusRatio: number;
+    arcAngleFlexibility: number;
+};
+export {};

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

@@ -0,0 +1,27 @@
+/**
+ * Calculates optimal arc angle based on repository count.
+ * Smaller repository counts get smaller arcs for better visual density,
+ * while larger counts expand to full parliament-style semicircle.
+ *
+ * Algorithm uses smooth interpolation between breakpoints:
+ * - < 10 repos: 60° (compact, focused visualization)
+ * - 10-25 repos: 60-90° (gradual expansion)
+ * - 25-50 repos: 90-120° (quarter to third circle)
+ * - 50-100 repos: 120-150° (approaching semicircle)
+ * - 100-200 repos: 150-180° (near-full parliament)
+ * - > 200 repos: 180° (full semicircle)
+ */
+export declare const calculateOptimalArcAngle: ({ repositoryCount }: {
+    repositoryCount: number;
+}) => number;
+/**
+ * Calculates optimal seat size based on repository count.
+ * Smaller repository counts get larger seats for better visibility,
+ * while larger counts use smaller seats to fit more in the arc.
+ *
+ * Uses the same breakpoint system as arc angle calculation
+ * for consistent visual scaling.
+ */
+export declare const calculateOptimalSeatSize: ({ repositoryCount }: {
+    repositoryCount: number;
+}) => number;

package/dist/components/parliament-chart/utils/parliament-chart-data.utils.d.ts

@@ -0,0 +1,18 @@
+type NotAppleWatchDataSeries = {
+    value: number;
+    label: string;
+};
+type ParliamentDataSeries = Array<{
+    id: string;
+    label: string;
+    value: number;
+    color: string;
+}>;
+export declare const calculateDataSeries: ({ dataSeries, notApplicableRepositories, noLstRepositories, unavailableRepositories }: {
+    dataSeries: Array<NotAppleWatchDataSeries>;
+    notApplicableRepositories: number;
+    noLstRepositories: number;
+    totalRepositories: number;
+    unavailableRepositories: number;
+}) => ParliamentDataSeries;
+export {};

package/dist/components/parliament-chart/utils/parliament-svg-enhanced.d.ts

@@ -0,0 +1,28 @@
+import { Element } from 'hast';
+import { s as hastH } from 'hastscript';
+type Party = {
+    id: string | number;
+    name: string;
+    seats: number;
+    colour: string;
+};
+type EnhancedParliamentOptions = {
+    seatCount?: boolean;
+    arcAngle?: number;
+    arcAngleFlexibility?: number;
+    radius?: number;
+    seatSize?: number;
+    minSeatSize?: number;
+    maxSeatSize?: number;
+    spacing?: number;
+    innerRadiusRatio?: number;
+    showLabels?: boolean;
+    hFunction?: typeof hastH;
+};
+/**
+ * Generates enhanced parliament visualization with optimized seat placement.
+ * Automatically adjusts arc angle and seat sizing to maximize visual appeal
+ * while maintaining proportional representation.
+ */
+export declare const generateEnhancedParliament: (parties: Party[], options?: EnhancedParliamentOptions) => Element;
+export {};

package/dist/components/parliament-chart/utils/parliament-svg-patterns.d.ts

@@ -0,0 +1,35 @@
+import { Element } from 'hast';
+import { s as hastH } from 'hastscript';
+/**
+ * Creates the grey hatch pattern definition for N/A category.
+ * Uses horizontal lines for clear differentiation.
+ */
+export declare const createGreyHatchPattern: (hFunction?: typeof hastH) => Element;
+/**
+ * Creates the yellow hatch pattern definition for Data Missing category.
+ * Uses 45-degree diagonal lines.
+ */
+export declare const createDataMissingHatchPattern: (hFunction?: typeof hastH) => Element;
+/**
+ * Creates the red hatch pattern definition for No LST category.
+ * Uses -45-degree diagonal lines.
+ */
+export declare const createNoLstHatchPattern: (hFunction?: typeof hastH) => Element;
+/**
+ * Color values for hatch patterns to use in CSS and hover states.
+ * Exported for consistency across components.
+ */
+export declare const HATCH_PATTERN_COLORS: {
+    readonly greyHatch: {
+        readonly background: "#EDEFEF";
+        readonly lines: "#ADB5BD";
+    };
+    readonly dataMissingHatch: {
+        readonly background: "#FFF3CC";
+        readonly lines: "#FFB800";
+    };
+    readonly noLstHatch: {
+        readonly background: "#FFE5E5";
+        readonly lines: "#ED4134";
+    };
+};

package/dist/components/parliament-chart/utils/parliament-svg.d.ts

@@ -0,0 +1,20 @@
+import { Element } from 'hast';
+import { s as hastH } from 'hastscript';
+type Party = {
+    id: string | number;
+    name: string;
+    seats: number;
+    colour: string;
+};
+type ParliamentOptions = {
+    seatCount?: boolean;
+    arcAngle?: number;
+    hFunction?: typeof hastH;
+};
+/**
+ * Generates parliament-style SVG visualization from party seat data.
+ * Arranges seats in a semicircular arc pattern using the Sainte-Laguë method
+ * for proportional distribution across rings.
+ */
+export declare const generateParliament: (parliament: Party[], options?: ParliamentOptions) => Element;
+export {};

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>;