@moderneinc/react-charts 1.2.0 → 1.3.0-next.bc5134

package/dist/theme/chart-palettes.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Generates gradient colors for categories, ordered from worst (red) to best (green).
+ */
+export declare function generateMeasureGradient(count: number): string[];
+/**
+ * Default colors for stacked area chart categories
+ * These colors are designed to work well together and provide good contrast
+ * Migration colors match the exact gradient used in ParliamentChart for visual consistency
+ */
+export declare const DEFAULT_STACKED_AREA_COLORS: {
+    readonly critical: "#dc3545";
+    readonly high: "#fd7e14";
+    readonly medium: "#ffc107";
+    readonly low: "#17a2b8";
+    readonly complete: "#40c048";
+    readonly inProgress: "#007bff";
+    readonly farthest: string | undefined;
+    readonly far: string | undefined;
+    readonly close: string | undefined;
+    readonly closest: string | undefined;
+    readonly completed: string | undefined;
+    readonly primary: "#007bff";
+    readonly secondary: "#6c757d";
+    readonly success: "#40c048";
+    readonly danger: "#dc3545";
+    readonly warning: "#ffc107";
+    readonly info: "#17a2b8";
+    readonly light: "#EDEFEF";
+    readonly dark: "#343a40";
+};
+/**
+ * Predefined color palettes for common use cases
+ */
+export declare const STACKED_AREA_PALETTES: {
+    readonly migration: string[];
+    readonly severity: readonly ["#dc3545", "#fd7e14", "#ffc107", "#17a2b8", "#17a2b8"];
+    readonly status: readonly ["#dc3545", "#ffc107", "#40c048"];
+    readonly extended: readonly ["#e74c3c", "#e67e22", "#f39c12", "#2ecc71", "#3498db", "#9b59b6", "#1abc9c", "#95a5a6"];
+    readonly colorblindSafe: readonly ["#0173B2", "#DE8F05", "#029E73", "#CC78BC", "#CA9161", "#FBAFE4", "#949494", "#ECE133"];
+};
+/**
+ * Category label constants for common use cases
+ * These match the categories used in ParliamentChart for transition compatibility
+ */
+export declare const CATEGORY_LABELS: {
+    readonly FARTHEST: "Farthest";
+    readonly FAR: "Far";
+    readonly CLOSE: "Close";
+    readonly CLOSEST: "Closest";
+    readonly COMPLETE: "Complete";
+    readonly CRITICAL: "Critical";
+    readonly HIGH: "High";
+    readonly MEDIUM: "Medium";
+    readonly LOW: "Low";
+    readonly INFO: "Info";
+    readonly NOT_APPLICABLE: "N/A";
+    readonly NO_LST: "No LST";
+    readonly DATA_MISSING: "Data Missing";
+};

package/dist/theme/default-colors.d.ts

@@ -13,6 +13,14 @@ export declare const DEFAULT_CHART_COLORS: {
         readonly 600: "#40c048";
     };
 };
+/**
+ * Measure gradient colors used for progress/distance categories
+ * Shared between ParliamentChart and StackedAreaChart for visual consistency
+ *
+ * Color progression: Green (best/complete) → Red (worst/farthest)
+ * Used for categories like: Complete, Closest, Close, Far, Farthest
+ */
+export declare const MEASURE_GRADIENT_COLORS: readonly ["#4CA75A", "#FDDA04", "#FFC008", "#FF9800", "#F9A91B", "#FF5C24", "#ED4134", "#CB3446"];
 /**
  * Color configuration type for parliament chart theming
  */
@@ -24,7 +32,3 @@ export type ParliamentChartColors = typeof DEFAULT_CHART_COLORS;
 export interface ParliamentChartTheme {
     colors?: Partial<ParliamentChartColors>;
 }
-/**
- * Merges custom theme colors with default colors
- */
-export declare function mergeThemeColors(customColors?: Partial<ParliamentChartColors>): ParliamentChartColors;

package/dist/theme/timeline-defaults.d.ts

@@ -4,7 +4,7 @@ export declare const TIMELINE_DEFAULTS: {
         readonly primary: "#992FB9";
         readonly background: "#FFFFFF";
         readonly border: "#9CA3AF";
-        readonly highlightBackground: "rgba(229, 231, 235, 0.5)";
+        readonly highlightBackground: "rgba(31, 41, 55, 0.14)";
         readonly monthLabel: "#9ca3af";
         readonly tooltipText: "#6b7280";
     };
@@ -13,6 +13,17 @@ export declare const TIMELINE_DEFAULTS: {
         readonly eventWidth: 2;
     };
 };
+/**
+ * Get default slot props with arrow handle styling
+ */
+export declare const getArrowHandleSlotProps: (color?: string) => {
+    startHandle: {
+        sx: SxProps<Theme>;
+    };
+    endHandle: {
+        sx: SxProps<Theme>;
+    };
+};
 export declare const defaultSlotProps: {
     header: {
         sx: SxProps<Theme>;
@@ -38,6 +49,8 @@ export declare const defaultSlotProps: {
     selection: {
         sx: SxProps<Theme>;
     };
+    startHandle: {};
+    endHandle: {};
     tooltip: {
         sx: SxProps<Theme>;
     };
@@ -48,3 +61,14 @@ export declare const defaultSlotProps: {
         sx: SxProps<Theme>;
     };
 };
+/**
+ * Get grip handle slot props with custom color
+ */
+export declare const getGripHandleSlotProps: (color?: string) => {
+    startHandle: {
+        sx: SxProps<Theme>;
+    };
+    endHandle: {
+        sx: SxProps<Theme>;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moderneinc/react-charts",
-  "version": "1.2.0",
+  "version": "1.3.0-next.bc5134",
   "description": "Parliament chart visualization library for React",
   "type": "module",
   "devEngines": {
@@ -24,23 +24,25 @@
     }
   },
   "scripts": {
-    "dev": "vite",
-    "build": "tsc --noEmit && vite build",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "check:all": "npm run format && npm run check:lint:fix && npm run check:lint && npm run check:types && npm run test",
-    "check:lint:fix": "npm run check:biome:fix",
-    "check:lint": "npm run check:biome",
+    "build": "tsc --noEmit && vite build",
+    "build:watch": "vite build --watch",
+    "check:all": "npm run format && npm run check:lint:fix && npm run check:lint && npm run check:types && npm run test && npm run check:unused",
     "check:biome:fix": "biome check --write",
     "check:biome": "biome check",
+    "check:lint:fix": "npm run check:biome:fix",
+    "check:lint": "npm run check:biome",
     "check:types": "tsc --noEmit",
+    "check:unused": "knip",
+    "dev": "vite",
     "format:check": "biome format .",
     "format": "biome format --write .",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "release": "semantic-release",
+    "storybook": "storybook dev -p 6006",
+    "test:ui": "vitest --ui",
+    "test": "vitest",
     "update:nvmrc": "jq -r '.devEngines.runtime.version' package.json > .nvmrc"
   },
   "peerDependencies": {
@@ -52,6 +54,13 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
+    "d3-axis": "^3.0.0",
+    "d3-brush": "^3.0.0",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
+    "d3-transition": "^3.0.1",
+    "gsap": "^3.13.0",
     "hast-util-to-html": "^9.0.5",
     "hastscript": "^9.0.1",
     "sainte-lague": "^3.0.0"
@@ -69,24 +78,27 @@
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
     "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@types/d3-axis": "^3.0.6",
+    "@types/d3-brush": "^3.0.6",
+    "@types/d3-scale": "^4.0.9",
+    "@types/d3-selection": "^3.0.11",
+    "@types/d3-shape": "^3.1.7",
+    "@types/d3-transition": "^3.0.9",
+    "@types/hast": "^3.0.4",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.1",
     "jsdom": "^27.0.0",
+    "knip": "^5.66.4",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "semantic-release": "^24.2.0",
+    "semantic-release": "^25.0.2",
     "storybook": "^8.4.7",
     "typescript": "^5.9.2",
     "vite": "^6.0.11",