h2o-library 1.8.0 → 2.0.1

package/dist/esm/charts/charts.css

@@ -0,0 +1,377 @@
+/* ─── Bar ─── */
+
+.bar-chart-container {
+  font-family: inherit;
+  text-align: center;
+  padding: 2rem 2rem 2rem 0;
+}
+
+.bar-chart-y-label {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: right;
+  line-height: 1.25;
+  font-size: 12px;
+  color: hsl(var(--muted-200));
+}
+
+/* ─── Line ─── */
+
+.line-chart-container {
+  font-family: inherit;
+  text-align: center;
+  padding: 2rem 2rem 2rem 0;
+}
+
+.pie-chart-container {
+  font-family: inherit;
+  text-align: center;
+}
+
+.pie-chart-clickable path,
+.pie-chart-clickable .recharts-pie-sector {
+  cursor: pointer;
+}
+
+.pie-chart-container path:focus,
+.pie-chart-container .recharts-pie-sector:focus,
+.pie-chart-container .recharts-layer path:focus {
+  outline: none;
+}
+
+/* ─── StatBar ─── */
+
+.stat-chart-container {
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-chart-compare-wrapper {
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.stat-chart-compare-section {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.stat-chart-compare-label {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+  text-align: center;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.stat-chart-compare-center {
+  flex: 0 0 auto;
+  min-width: 120px;
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-chart-compare-center-label {
+  color: hsl(var(--muted-200));
+  font-size: 0.8125rem;
+  text-align: center;
+}
+
+.stat-chart-difference-col {
+  flex: 0 0 auto;
+  padding-left: 1rem;
+  text-align: left;
+}
+
+.stat-chart-difference-title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: hsl(var(--primary-400));
+  display: flex;
+  align-items: flex-end;
+}
+
+.stat-chart-difference-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  height: 48px;
+  font-size: 0.8125rem;
+}
+
+.stat-chart-difference-positive,
+.stat-chart-difference-negative {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.stat-chart-difference-positive {
+  color: hsl(var(--success));
+}
+
+.stat-chart-difference-negative {
+  color: hsl(var(--destructive));
+}
+
+/* Stat bar rows: tooltip trigger must flex like the old track; overrides .tooltip-container { display: inline-block } */
+.stat-chart-container .stat-chart-bar-tooltip,
+.stat-chart-compare-section .stat-chart-bar-tooltip {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  align-items: center;
+  align-self: stretch;
+}
+
+.stat-chart-bar-track {
+  position: relative;
+  width: 100%;
+  height: 22px;
+  overflow: hidden;
+}
+
+/* ─── Gantt ─── */
+
+.gantt-chart-container {
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: visible;
+}
+
+.gantt-chart-legend {
+  margin-bottom: 0.75rem;
+}
+
+.gantt-bar-tooltip {
+  display: block;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.gantt-bar-tooltip-hit {
+  width: 100%;
+  height: 100%;
+  min-height: 1px;
+}
+
+/* ─── Heatmap ─── */
+
+.heatmap-header-label {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+}
+
+.custom-chart-tooltip {
+  background-color: hsl(var(--tooltip-dark-bg));
+  color: hsl(var(--tooltip-dark-fg));
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  transform: translate(-50%, calc(-100% - 16px));
+}
+
+.custom-chart-tooltip > span {
+  font-size: 0.875rem;
+}
+
+.custom-chart-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 8px;
+  border-style: solid;
+  border-color: hsl(var(--tooltip-dark-bg)) transparent transparent transparent;
+}
+
+.recharts-tooltip-wrapper {
+  z-index: 1000;
+}
+
+.heatmap-container {
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+.heatmap-grid {
+  display: grid;
+  gap: 0.5rem;
+  flex-grow: 1;
+  min-height: 0;
+  overflow: visible;
+}
+
+.heatmap-col-tooltip {
+  width: 100%;
+  min-width: 0;
+  display: block;
+  box-sizing: border-box;
+}
+
+.heatmap-col-header {
+  padding: 0.5rem;
+  font-weight: 400;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  display: block;
+  box-sizing: border-box;
+}
+
+.heatmap-row-tooltip {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.heatmap-row-header {
+  padding: 0.5rem;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  display: block;
+  box-sizing: border-box;
+}
+
+.heatmap-cell {
+  box-sizing: border-box;
+  padding: 0.75rem;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.heatmap-cell-content {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.heatmap-cell-value-container {
+  font-size: 0.875rem;
+}
+
+.heatmap-cell-percentage-container {
+  font-size: 0.75rem;
+}
+
+.heatmap-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.heatmap-cell-tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}
+
+/* ─── Chart Wrapper ─── */
+.chart-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.chart-header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.chart-title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chart-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.chart-info-icon {
+  color: hsl(var(--muted));
+  cursor: help;
+}
+
+.chart-metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chart-kpis {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid hsl(var(--muted-50));
+}
+
+.chart-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.chart-kpi-label {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.chart-kpi-value {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.chart-legend {
+  padding-top: 0.5rem;
+}
+
+.chart-header-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.chart-description {
+  font-size: 1rem;
+  color: hsl(var(--muted-200));
+}

package/dist/esm/charts/index.d.ts

@@ -0,0 +1,8 @@
+export * from "./src/chart/chart";
+export * from "./src/bar/chart-bar";
+export * from "./src/pie/chart-pie";
+export * from "./src/line/chart-line";
+export * from "./src/heatmap/chart-heatmap";
+export * from "./src/stat/chart-stat";
+export * from "./src/gantt/chart-gantt";
+export * from "./src/legend/legend";

package/dist/esm/charts/src/bar/chart-bar.d.ts

@@ -0,0 +1,27 @@
+import type React from "react";
+import "../../charts.css";
+export interface BarChartDataPoint {
+    x: string;
+    [key: string]: number | string;
+}
+export interface BarSeriesConfig {
+    key: string;
+    label?: string;
+    color: string;
+    unit?: string;
+    stackId?: string;
+}
+export interface BarChartProps {
+    data: BarChartDataPoint[];
+    bars: BarSeriesConfig[];
+    layout?: "single" | "grouped" | "stacked" | "grouped-stacked";
+    orientation?: "vertical" | "horizontal";
+    showGrid?: boolean;
+    showLegend?: boolean;
+    height?: number;
+    className?: string;
+    onXAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onYAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onBarClick?: (dataPoint: BarChartDataPoint, index: number, dataKey: string, event: React.MouseEvent<SVGElement>) => void;
+}
+export declare const BarChart: ({ data, bars, layout, orientation, showGrid, showLegend, height, className, onXAxisTickClick, onYAxisTickClick, onBarClick, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/charts/src/chart/chart.d.ts

@@ -0,0 +1,35 @@
+import "../../charts.css";
+import type { BarChartDataPoint } from "../bar/chart-bar";
+import type { LineChartDataPoint } from "../line/chart-line";
+import type { PieChartDataPoint } from "../pie/chart-pie";
+import type { HeatmapData } from "../heatmap/chart-heatmap";
+export type ChartKPI = {
+    label: string;
+    value: string | number;
+};
+type BaseChartData = {
+    bar: BarChartDataPoint[];
+    line: LineChartDataPoint[];
+    pie: PieChartDataPoint[];
+    heatmap: HeatmapData;
+};
+export type ChartType = keyof BaseChartData;
+interface BaseChartProps {
+    type: ChartType;
+    title?: string;
+    info?: string;
+    description?: string;
+    kpis?: ChartKPI[];
+    height?: number;
+    className?: string;
+}
+type BarChartSpecificProps = {
+    layout?: "single" | "grouped" | "stacked" | "grouped-stacked";
+    orientation?: "vertical" | "horizontal";
+};
+type ChartTypeSpecificProps<T extends ChartType> = T extends "bar" ? BarChartSpecificProps : Record<string, never>;
+export type ChartProps<T extends ChartType> = BaseChartProps & {
+    data: BaseChartData[T];
+} & ChartTypeSpecificProps<T>;
+export declare const Chart: <T extends ChartType>({ type, title, info, description, kpis, data, height, className, ...chartSpecificProps }: ChartProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/charts/src/chart-tooltip-styles.d.ts

@@ -0,0 +1,4 @@
+import type React from "react";
+export declare const CHART_TOOLTIP_STYLE: React.CSSProperties;
+export declare const CHART_TOOLTIP_WRAPPER_STYLE: React.CSSProperties;
+export declare const CHART_TOOLTIP_PORTAL_STYLE: React.CSSProperties;

package/dist/esm/charts/src/gantt/chart-gantt.d.ts

@@ -0,0 +1,25 @@
+import type React from "react";
+import "../../charts.css";
+export interface GanttDataPoint {
+    label: string;
+    rangeStart: number;
+    rangeEnd: number;
+    barStart: number;
+    barEnd: number;
+}
+export interface GanttChartProps {
+    data: GanttDataPoint[];
+    minTime?: number;
+    maxTime?: number;
+    tickInterval?: number;
+    rangeColor?: string;
+    barColor?: string;
+    overflowColor?: string;
+    rangeLabel?: string;
+    barLabel?: string;
+    showLegend?: boolean;
+    labelWidth?: number;
+    className?: string;
+    onRowClick?: (dataPoint: GanttDataPoint, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const GanttChart: ({ data, minTime, maxTime, tickInterval, rangeColor, barColor, overflowColor, rangeLabel, barLabel, showLegend, labelWidth: labelWidthProp, className, onRowClick, }: GanttChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/charts/src/heatmap/chart-heatmap.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "../../charts.css";
+export interface HeatmapData {
+    rows: string[];
+    columns: string[];
+    matrix: number[][];
+}
+export interface HeatmapChartProps {
+    data: HeatmapData;
+    showValue?: boolean;
+    showPercentage?: boolean;
+    height?: string | number;
+    className?: string;
+    onRowClick?: (row: string, event: React.MouseEvent<HTMLDivElement>) => void;
+    onColumnClick?: (column: string, event: React.MouseEvent<HTMLDivElement>) => void;
+    onCellClick?: (row: string, column: string, value: number, event: React.MouseEvent<HTMLDivElement>) => void;
+}
+export declare const HeatmapChart: ({ data, showValue, showPercentage, height, className, onRowClick, onColumnClick, onCellClick, }: HeatmapChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{css/src → esm/charts/src/legend}/legend.css

@@ -1,8 +1,13 @@
 .legend {
   display: flex;
+  flex-wrap: wrap;
   gap: 1rem;
 }
 
+.legend--vertical {
+  flex-direction: column;
+}
+
 .legend-item {
   display: flex;
   align-items: center;
@@ -31,4 +36,4 @@
 .legend-swatch--circle {
   width: 1rem;
   border-radius: 9999px;
-} 
+}

package/dist/esm/charts/src/legend/legend.d.ts

@@ -0,0 +1,19 @@
+import "./legend.css";
+export type LegendStyle = "line" | "dashed-line" | "rectangle" | "circle";
+export type LegendItem = {
+    label: string;
+    color: string;
+    onClick?: () => void;
+    style?: LegendStyle;
+};
+export type LegendProps = {
+    items: LegendItem[];
+    itemStyle?: LegendStyle;
+    direction?: "horizontal" | "vertical";
+    ariaLabel?: string;
+    className?: string;
+    itemClassName?: string;
+    labelClassName?: string;
+    colorClassName?: string;
+};
+export declare const Legend: ({ items, itemStyle, direction, ariaLabel, className, itemClassName, labelClassName, colorClassName, }: LegendProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/charts/src/line/chart-line.d.ts

@@ -0,0 +1,28 @@
+import type React from "react";
+import "../../charts.css";
+export interface LineChartDataPoint {
+    x: string;
+    [key: string]: number | string | undefined;
+}
+export interface LineSeriesConfig {
+    key: string;
+    label?: string;
+    color: string;
+    dashed?: boolean;
+    unit?: string;
+    lineWidth?: number;
+}
+export interface LineChartProps {
+    data: LineChartDataPoint[];
+    lines: LineSeriesConfig[];
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showGradient?: boolean;
+    height?: number;
+    showTooltipLabel?: boolean;
+    className?: string;
+    onXAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onYAxisTickClick?: (value: string | number, event: React.MouseEvent) => void;
+    onDataPointClick?: (point: LineChartDataPoint, index: number, dataKey: string, event: React.MouseEvent<SVGCircleElement>) => void;
+}
+export declare const LineChart: ({ data, lines, showGrid, showLegend, showGradient, height, showTooltipLabel, className, onXAxisTickClick, onYAxisTickClick, onDataPointClick, }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/charts/src/pie/chart-pie.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import "../../charts.css";
+export interface PieChartDataPoint {
+    label: string;
+    value: number;
+    color?: string;
+    unit?: string;
+}
+export interface PieChartProps {
+    data: PieChartDataPoint[];
+    variant?: "pie" | "donut";
+    showLegend?: boolean;
+    height?: number;
+    showLabels?: boolean;
+    showPercentageInTooltip?: boolean;
+    className?: string;
+    onSliceClick?: (dataPoint: PieChartDataPoint, index: number, event: React.MouseEvent<SVGElement>) => void;
+}
+export declare const PieChart: ({ data, variant, showLegend, height, showLabels, showPercentageInTooltip, className, onSliceClick, }: PieChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/charts/src/recharts-tick-props.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Minimal tick props passed by Recharts to XAxis/YAxis `tick` render functions.
+ * Recharts may send more fields; we only use these when forwarding to custom ticks.
+ */
+export type RechartsAxisTickProps = {
+    x: number;
+    y: number;
+    payload: {
+        value: string | number;
+    };
+} & object;

package/dist/esm/charts/src/stat/chart-stat.d.ts

@@ -0,0 +1,21 @@
+import "../../charts.css";
+export interface StatChartDataPoint {
+    label: string;
+    value: number;
+    total?: number;
+}
+export interface StatChartProps {
+    data: StatChartDataPoint[];
+    compareData?: StatChartDataPoint[];
+    primaryColor?: string;
+    primaryLabel?: string;
+    compareColor?: string;
+    compareLabel?: string;
+    trackColor?: string;
+    compareTrackColor?: string;
+    unit?: string;
+    showDifference?: boolean;
+    height?: number;
+    className?: string;
+}
+export declare const StatChart: ({ data, compareData, primaryColor, primaryLabel, compareColor, compareLabel, trackColor, compareTrackColor, unit, showDifference, height, className, }: StatChartProps) => import("react/jsx-runtime").JSX.Element | null;