@monolith-forensics/monolith-ui 1.7.1 → 1.8.1-dev.0

package/dist/Charts/HeatMap/HeatMap.js

@@ -0,0 +1,212 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { useTheme } from "styled-components";
+import { ChartExportControl } from "../ChartPrimitives";
+import { DEFAULT_CHART_EXPORT_FORMATS, copyChartImage, downloadChartImage, } from "../ChartUtils";
+import { buildHeatMapCells, clamp, easeOutCubic, formatDefaultValue, formatDefaultWeekdayLabel, getHeatMapColor, getHeatMapDateRange, getMonthLabels, } from "./HeatMap.lib";
+import { StyledCell, StyledChartActions, StyledChartFrame, StyledChartScroller, StyledContainer, StyledLegend, StyledLegendCell, StyledLegendScale, StyledMonthLabel, StyledSvg, StyledTooltip, StyledTooltipHeader, StyledTooltipMeta, StyledTooltipSwatch, StyledWeekdayLabel, } from "./HeatMap.styled";
+const HeatMapInner = (_a, ref) => {
+    var { data, startDate, endDate, cellSize = 12, cellGap = 4, cellRadius = 2, emptyColor, colors, minValue = 0, maxValue, weekStartsOn = 0, showMonthLabels = true, showWeekdayLabels = true, showLegend = true, animateOnRender = false, animationDuration = 350, animationStagger = 1, showExportButton = false, exportFileName = "heat-map", exportFormats = DEFAULT_CHART_EXPORT_FORMATS, exportScale = 2, exportBackgroundColor, showTooltips = false, ariaLabel = "Heat map", valueFormatter, monthLabelFormatter, weekdayLabelFormatter, tooltipFormatter, onCellClick, className } = _a, props = __rest(_a, ["data", "startDate", "endDate", "cellSize", "cellGap", "cellRadius", "emptyColor", "colors", "minValue", "maxValue", "weekStartsOn", "showMonthLabels", "showWeekdayLabels", "showLegend", "animateOnRender", "animationDuration", "animationStagger", "showExportButton", "exportFileName", "exportFormats", "exportScale", "exportBackgroundColor", "showTooltips", "ariaLabel", "valueFormatter", "monthLabelFormatter", "weekdayLabelFormatter", "tooltipFormatter", "onCellClick", "className"]);
+    const descriptionId = useId();
+    const theme = useTheme();
+    const containerRef = useRef(null);
+    const svgRef = useRef(null);
+    const [activeCellKey, setActiveCellKey] = useState(null);
+    const [activeTooltip, setActiveTooltip] = useState(null);
+    const [animationElapsed, setAnimationElapsed] = useState(animateOnRender ? 0 : Number.POSITIVE_INFINITY);
+    const { startDate: resolvedStartDate, endDate: resolvedEndDate } = useMemo(() => getHeatMapDateRange(data, startDate, endDate), [data, endDate, startDate]);
+    const resolvedColors = (colors === null || colors === void 0 ? void 0 : colors.length)
+        ? colors
+        : [
+            theme.palette.background.secondary,
+            theme.alert.info.color,
+            theme.palette.primary.main,
+            theme.alert.success.color,
+        ];
+    const resolvedEmptyColor = emptyColor !== null && emptyColor !== void 0 ? emptyColor : theme.palette.background.secondary;
+    const resolvedExportBackgroundColor = exportBackgroundColor !== null && exportBackgroundColor !== void 0 ? exportBackgroundColor : theme.palette.background.paper;
+    useImperativeHandle(ref, () => ({
+        getSvgElement: () => svgRef.current,
+        downloadImage: (request) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            yield downloadChartImage({
+                rootElement: containerRef.current,
+                svg: svgRef.current,
+                format: (_a = request === null || request === void 0 ? void 0 : request.format) !== null && _a !== void 0 ? _a : "svg",
+                fileName: (_b = request === null || request === void 0 ? void 0 : request.fileName) !== null && _b !== void 0 ? _b : exportFileName,
+                scale: (_c = request === null || request === void 0 ? void 0 : request.scale) !== null && _c !== void 0 ? _c : exportScale,
+                backgroundColor: (_d = request === null || request === void 0 ? void 0 : request.backgroundColor) !== null && _d !== void 0 ? _d : resolvedExportBackgroundColor,
+            });
+        }),
+        copyImage: (request) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            return copyChartImage({
+                rootElement: containerRef.current,
+                svg: svgRef.current,
+                format: (_a = request === null || request === void 0 ? void 0 : request.format) !== null && _a !== void 0 ? _a : "png",
+                scale: (_b = request === null || request === void 0 ? void 0 : request.scale) !== null && _b !== void 0 ? _b : exportScale,
+                backgroundColor: (_c = request === null || request === void 0 ? void 0 : request.backgroundColor) !== null && _c !== void 0 ? _c : resolvedExportBackgroundColor,
+            });
+        }),
+    }), [exportFileName, exportScale, resolvedExportBackgroundColor]);
+    const values = data
+        .map((datum) => datum.value)
+        .filter((value) => Number.isFinite(value));
+    const resolvedMaxValue = maxValue !== null && maxValue !== void 0 ? maxValue : Math.max(...values, minValue, 1);
+    const safeCellSize = Math.max(cellSize, 1);
+    const safeCellGap = Math.max(cellGap, 0);
+    const safeCellRadius = Math.max(cellRadius, 0);
+    const labelWidth = showWeekdayLabels ? 28 : 0;
+    const monthLabelHeight = showMonthLabels ? 18 : 0;
+    const step = safeCellSize + safeCellGap;
+    const cells = useMemo(() => buildHeatMapCells({
+        data,
+        startDate: resolvedStartDate,
+        endDate: resolvedEndDate,
+        weekStartsOn,
+    }), [data, resolvedEndDate, resolvedStartDate, weekStartsOn]);
+    const monthLabels = useMemo(() => showMonthLabels
+        ? getMonthLabels({
+            startDate: resolvedStartDate,
+            endDate: resolvedEndDate,
+            weekStartsOn,
+            formatter: monthLabelFormatter,
+        })
+        : [], [
+        monthLabelFormatter,
+        resolvedEndDate,
+        resolvedStartDate,
+        showMonthLabels,
+        weekStartsOn,
+    ]);
+    const weekCount = cells.length > 0 ? Math.max(...cells.map((cell) => cell.weekIndex)) + 1 : 1;
+    const width = labelWidth + weekCount * step - safeCellGap;
+    const height = monthLabelHeight + 7 * step - safeCellGap;
+    const formatValue = (cell) => { var _a; return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(cell.value, cell.datum)) !== null && _a !== void 0 ? _a : formatDefaultValue(cell.value); };
+    const getCellFill = (cell) => {
+        if (!cell.datum)
+            return resolvedEmptyColor;
+        if (cell.color)
+            return cell.color;
+        return getHeatMapColor(cell.value, resolvedColors, minValue, resolvedMaxValue);
+    };
+    const updateTooltipPosition = (event, cell) => {
+        if (!showTooltips || !containerRef.current)
+            return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        setActiveTooltip({
+            dateKey: cell.dateKey,
+            x: event.clientX - containerRect.left,
+            y: event.clientY - containerRect.top,
+        });
+    };
+    const activeTooltipCell = showTooltips && activeTooltip
+        ? cells.find((cell) => cell.dateKey === activeTooltip.dateKey)
+        : null;
+    const description = cells
+        .filter((cell) => cell.datum)
+        .map((cell) => `${cell.dateKey}: ${formatDefaultValue(cell.value)}`)
+        .join(", ");
+    const safeAnimationDuration = Math.max(animationDuration, 0);
+    const safeAnimationStagger = Math.max(animationStagger, 0);
+    const totalAnimationDuration = safeAnimationDuration +
+        Math.max(cells.length - 1, 0) * safeAnimationStagger;
+    useEffect(() => {
+        var _a;
+        if (!animateOnRender || cells.length === 0) {
+            setAnimationElapsed(Number.POSITIVE_INFINITY);
+            return;
+        }
+        const prefersReducedMotion = typeof window !== "undefined" &&
+            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+        if (prefersReducedMotion) {
+            setAnimationElapsed(Number.POSITIVE_INFINITY);
+            return;
+        }
+        let animationFrame = 0;
+        let startTime = null;
+        setAnimationElapsed(0);
+        const runAnimation = (timestamp) => {
+            if (startTime == null)
+                startTime = timestamp;
+            const elapsed = timestamp - startTime;
+            setAnimationElapsed(elapsed);
+            if (elapsed < totalAnimationDuration) {
+                animationFrame = window.requestAnimationFrame(runAnimation);
+            }
+        };
+        animationFrame = window.requestAnimationFrame(runAnimation);
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+        };
+    }, [
+        animateOnRender,
+        cells.length,
+        safeAnimationDuration,
+        safeAnimationStagger,
+        totalAnimationDuration,
+    ]);
+    const getCellAnimationProgress = (index) => {
+        if (!animateOnRender || safeAnimationDuration === 0)
+            return 1;
+        const elapsed = animationElapsed - index * safeAnimationStagger;
+        return easeOutCubic(clamp(elapsed / safeAnimationDuration, 0, 1));
+    };
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [_jsx(StyledChartScroller, { children: _jsxs(StyledChartFrame, { children: [showExportButton && exportFormats.length > 0 && (_jsx(StyledChartActions, { "data-chart-export-ignore": "true", children: _jsx(ChartExportControl, { rootRef: containerRef, svgRef: svgRef, fileName: exportFileName, formats: exportFormats, scale: exportScale, backgroundColor: resolvedExportBackgroundColor }) })), _jsxs(StyledSvg, { ref: svgRef, width: width, height: height, viewBox: `0 0 ${width} ${height}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: description }), showMonthLabels &&
+                                    monthLabels.map((monthLabel) => (_jsx(StyledMonthLabel, { x: labelWidth + monthLabel.weekIndex * step, y: 10, children: monthLabel.label }, `${monthLabel.label}-${monthLabel.weekIndex}`))), showWeekdayLabels &&
+                                    Array.from({ length: 7 }, (_, dayIndex) => {
+                                        var _a;
+                                        return (_jsx(StyledWeekdayLabel, { x: 0, y: monthLabelHeight + dayIndex * step + safeCellSize - 2, children: (_a = weekdayLabelFormatter === null || weekdayLabelFormatter === void 0 ? void 0 : weekdayLabelFormatter(dayIndex)) !== null && _a !== void 0 ? _a : formatDefaultWeekdayLabel(dayIndex, weekStartsOn) }, dayIndex));
+                                    }), cells.map((cell, index) => {
+                                    const fill = getCellFill(cell);
+                                    const isActive = activeCellKey === cell.dateKey;
+                                    const animationProgress = getCellAnimationProgress(index);
+                                    const cellX = labelWidth + cell.weekIndex * step;
+                                    const cellY = monthLabelHeight + cell.dayIndex * step;
+                                    const cellCenterX = cellX + safeCellSize / 2;
+                                    const cellCenterY = cellY + safeCellSize / 2;
+                                    const cellScale = 0.7 + animationProgress * 0.3;
+                                    const cellOpacity = 0.2 + animationProgress * 0.8;
+                                    return (_jsx("g", { style: {
+                                            opacity: cellOpacity,
+                                            transformOrigin: `${cellCenterX}px ${cellCenterY}px`,
+                                            transform: `scale(${cellScale})`,
+                                        }, children: _jsx(StyledCell, { "$active": isActive, x: cellX, y: cellY, width: safeCellSize, height: safeCellSize, rx: safeCellRadius, ry: safeCellRadius, fill: fill, stroke: theme.palette.action.hover, strokeWidth: 1, tabIndex: 0, "aria-label": `${cell.dateKey}: ${formatDefaultValue(cell.value)}`, onFocus: () => setActiveCellKey(cell.dateKey), onBlur: () => setActiveCellKey(null), onMouseEnter: (event) => {
+                                                setActiveCellKey(cell.dateKey);
+                                                updateTooltipPosition(event, cell);
+                                            }, onMouseMove: (event) => updateTooltipPosition(event, cell), onMouseLeave: () => {
+                                                setActiveCellKey(null);
+                                                setActiveTooltip(null);
+                                            }, onClick: (event) => onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(event, cell, cell.datum), onKeyDown: (event) => {
+                                                if (event.key !== "Enter" && event.key !== " ")
+                                                    return;
+                                                event.preventDefault();
+                                                onCellClick === null || onCellClick === void 0 ? void 0 : onCellClick(event, cell, cell.datum);
+                                            } }) }, cell.dateKey));
+                                })] })] }) }), showLegend && (_jsxs(StyledLegend, { children: [_jsx("span", { children: "Less" }), _jsxs(StyledLegendScale, { children: [_jsx(StyledLegendCell, { "$color": resolvedEmptyColor, "$size": safeCellSize, "$radius": safeCellRadius }), resolvedColors.map((color) => (_jsx(StyledLegendCell, { "$color": color, "$size": safeCellSize, "$radius": safeCellRadius }, color)))] }), _jsx("span", { children: "More" })] })), activeTooltip && activeTooltipCell && (_jsx(StyledTooltip, { style: {
+                    left: activeTooltip.x,
+                    top: activeTooltip.y,
+                }, children: tooltipFormatter ? (tooltipFormatter(activeTooltipCell, activeTooltipCell.datum)) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": getCellFill(activeTooltipCell) }), _jsx("span", { children: activeTooltipCell.dateKey })] }), _jsx(StyledTooltipMeta, { children: formatValue(activeTooltipCell) })] })) }))] })));
+};
+const HeatMap = forwardRef(HeatMapInner);
+export default HeatMap;

package/dist/Charts/HeatMap/HeatMap.lib.d.ts

@@ -0,0 +1,30 @@
+import { clamp, easeOutCubic, formatDefaultValue } from "../ChartUtils";
+import { HeatMapCell, HeatMapDatum, HeatMapMonthLabel } from "./HeatMap.types";
+export declare const DEFAULT_WEEKDAY_LABELS: string[];
+export { clamp, easeOutCubic, formatDefaultValue };
+export declare const startOfDay: (date: Date) => Date;
+export declare const parseHeatMapDate: (value: Date | string) => Date;
+export declare const formatDateKey: (date: Date) => string;
+export declare const addDays: (date: Date, days: number) => Date;
+export declare const differenceInDays: (from: Date, to: Date) => number;
+export declare const getDayIndex: (date: Date, weekStartsOn: 0 | 1) => number;
+export declare const startOfWeek: (date: Date, weekStartsOn: 0 | 1) => Date;
+export declare const formatDefaultMonthLabel: (date: Date) => string;
+export declare const formatDefaultWeekdayLabel: (dayIndex: number, weekStartsOn: 0 | 1) => string;
+export declare const getHeatMapDateRange: <TData>(data: HeatMapDatum<TData>[], startDate?: Date | string, endDate?: Date | string) => {
+    startDate: Date;
+    endDate: Date;
+};
+export declare const getHeatMapColor: (value: number, colors: string[], minValue: number, maxValue: number) => string;
+export declare const buildHeatMapCells: <TData>({ data, startDate, endDate, weekStartsOn, }: {
+    data: HeatMapDatum<TData>[];
+    startDate: Date;
+    endDate: Date;
+    weekStartsOn: 0 | 1;
+}) => HeatMapCell<TData>[];
+export declare const getMonthLabels: ({ startDate, endDate, weekStartsOn, formatter, }: {
+    startDate: Date;
+    endDate: Date;
+    weekStartsOn: 0 | 1;
+    formatter?: (date: Date) => string;
+}) => HeatMapMonthLabel[];

package/dist/Charts/HeatMap/HeatMap.lib.js

@@ -0,0 +1,115 @@
+import { scaleQuantize } from "d3-scale";
+import { clamp, easeOutCubic, formatDefaultValue } from "../ChartUtils";
+const MONTH_LABELS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
+export const DEFAULT_WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+export { clamp, easeOutCubic, formatDefaultValue };
+export const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+export const parseHeatMapDate = (value) => {
+    if (value instanceof Date)
+        return startOfDay(value);
+    const isoDate = value.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (isoDate) {
+        return new Date(Number(isoDate[1]), Number(isoDate[2]) - 1, Number(isoDate[3]));
+    }
+    return startOfDay(new Date(value));
+};
+export const formatDateKey = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+};
+export const addDays = (date, days) => {
+    const nextDate = new Date(date);
+    nextDate.setDate(nextDate.getDate() + days);
+    return nextDate;
+};
+export const differenceInDays = (from, to) => {
+    const fromTime = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+    const toTime = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+    return Math.round((toTime - fromTime) / 86400000);
+};
+export const getDayIndex = (date, weekStartsOn) => (date.getDay() - weekStartsOn + 7) % 7;
+export const startOfWeek = (date, weekStartsOn) => addDays(date, -getDayIndex(date, weekStartsOn));
+export const formatDefaultMonthLabel = (date) => MONTH_LABELS[date.getMonth()];
+export const formatDefaultWeekdayLabel = (dayIndex, weekStartsOn) => DEFAULT_WEEKDAY_LABELS[(dayIndex + weekStartsOn) % 7];
+export const getHeatMapDateRange = (data, startDate, endDate) => {
+    const parsedDates = data
+        .map((datum) => parseHeatMapDate(datum.date))
+        .filter((date) => Number.isFinite(date.getTime()));
+    const resolvedStartDate = startDate != null
+        ? parseHeatMapDate(startDate)
+        : parsedDates.length
+            ? new Date(Math.min(...parsedDates.map((date) => date.getTime())))
+            : startOfDay(new Date());
+    const resolvedEndDate = endDate != null
+        ? parseHeatMapDate(endDate)
+        : parsedDates.length
+            ? new Date(Math.max(...parsedDates.map((date) => date.getTime())))
+            : resolvedStartDate;
+    return resolvedStartDate <= resolvedEndDate
+        ? { startDate: resolvedStartDate, endDate: resolvedEndDate }
+        : { startDate: resolvedEndDate, endDate: resolvedStartDate };
+};
+export const getHeatMapColor = (value, colors, minValue, maxValue) => {
+    if (colors.length === 0)
+        return "currentColor";
+    if (colors.length === 1 || maxValue <= minValue)
+        return colors[colors.length - 1];
+    return scaleQuantize()
+        .domain([minValue, maxValue])
+        .range(colors)(value);
+};
+export const buildHeatMapCells = ({ data, startDate, endDate, weekStartsOn, }) => {
+    var _a;
+    const calendarStartDate = startOfWeek(startDate, weekStartsOn);
+    const dataByDate = new Map(data.map((datum) => [formatDateKey(parseHeatMapDate(datum.date)), datum]));
+    const visibleDayCount = differenceInDays(startDate, endDate) + 1;
+    const cells = [];
+    for (let dayOffset = 0; dayOffset < visibleDayCount; dayOffset += 1) {
+        const date = addDays(startDate, dayOffset);
+        const dateKey = formatDateKey(date);
+        const datum = dataByDate.get(dateKey);
+        const weekIndex = Math.floor(differenceInDays(calendarStartDate, date) / 7);
+        const dayIndex = getDayIndex(date, weekStartsOn);
+        cells.push({
+            date,
+            dateKey,
+            value: (_a = datum === null || datum === void 0 ? void 0 : datum.value) !== null && _a !== void 0 ? _a : 0,
+            color: datum === null || datum === void 0 ? void 0 : datum.color,
+            datum,
+            weekIndex,
+            dayIndex,
+        });
+    }
+    return cells;
+};
+export const getMonthLabels = ({ startDate, endDate, weekStartsOn, formatter = formatDefaultMonthLabel, }) => {
+    const calendarStartDate = startOfWeek(startDate, weekStartsOn);
+    const labels = [];
+    let cursor = new Date(startDate.getFullYear(), startDate.getMonth(), 1);
+    if (cursor < startDate) {
+        cursor = new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1);
+    }
+    while (cursor <= endDate) {
+        labels.push({
+            label: formatter(cursor),
+            weekIndex: Math.floor(differenceInDays(calendarStartDate, cursor) / 7),
+        });
+        cursor = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
+    }
+    return labels;
+};

package/dist/Charts/HeatMap/HeatMap.styled.d.ts

@@ -0,0 +1,37 @@
+import { StyledChartActions } from "../ChartPrimitives";
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartScroller: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartFrame: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export { StyledChartActions };
+export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGRectElement>, {
+    $active: boolean;
+}>> & string;
+export declare const StyledMonthLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGTextElementAttributes<SVGTextElement>, never>> & string;
+export declare const StyledWeekdayLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGTextElementAttributes<SVGTextElement>, never>> & string;
+export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegendScale: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegendCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $size: number;
+    $radius: number;
+}>> & string;
+export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minWidth" | "$maxWidth" | "$transform"> & {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}, import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$minWidth" | "$maxWidth" | "$transform"> & {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>, never>, never>> & string;
+export declare const StyledTooltipHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $radius?: string;
+}>> & string;
+export declare const StyledTooltipMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$marginTop" | "$direction" | "$gap"> & {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}, never>> & string;

package/dist/Charts/HeatMap/HeatMap.styled.js

@@ -0,0 +1,91 @@
+import styled from "styled-components";
+import { StyledChartActions, StyledChartTooltip, StyledChartTooltipHeader, StyledChartTooltipMeta, StyledChartTooltipSwatch, } from "../ChartPrimitives";
+const activeCellStyles = `
+  filter: brightness(1.12) saturate(1.08);
+  transform: scale(1.08);
+`;
+export const StyledContainer = styled.div `
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 10px;
+  max-width: 100%;
+  color: ${({ theme }) => theme.palette.text.primary};
+  overflow: visible;
+`;
+export const StyledChartScroller = styled.div `
+  display: flex;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  padding-bottom: 2px;
+`;
+export const StyledChartFrame = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+`;
+export { StyledChartActions };
+export const StyledSvg = styled.svg `
+  display: block;
+  overflow: visible;
+`;
+export const StyledCell = styled.rect `
+  cursor: pointer;
+  outline: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    fill 0.16s ease,
+    filter 0.16s ease,
+    opacity 0.16s ease,
+    transform 0.16s ease;
+
+  &:hover,
+  &:focus-visible {
+    ${activeCellStyles}
+  }
+
+  ${({ $active }) => $active && activeCellStyles}
+`;
+export const StyledMonthLabel = styled.text `
+  fill: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 11px;
+  pointer-events: none;
+`;
+export const StyledWeekdayLabel = styled.text `
+  fill: ${({ theme }) => theme.palette.text.secondary};
+  font-size: 10px;
+  pointer-events: none;
+`;
+export const StyledLegend = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 7px;
+  min-height: 18px;
+  font-size: 11px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const StyledLegendScale = styled.div `
+  display: flex;
+  gap: 3px;
+`;
+export const StyledLegendCell = styled.span `
+  display: inline-block;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  border-radius: ${({ $radius }) => $radius}px;
+  background: ${({ $color }) => $color};
+  box-shadow: inset 0 0 0 1px ${({ theme }) => theme.palette.divider};
+`;
+export const StyledTooltip = styled(StyledChartTooltip).attrs({
+    $minWidth: 140,
+    $maxWidth: 240,
+}) ``;
+export const StyledTooltipHeader = StyledChartTooltipHeader;
+export const StyledTooltipSwatch = StyledChartTooltipSwatch;
+export const StyledTooltipMeta = styled(StyledChartTooltipMeta) `
+  display: block;
+`;

package/dist/Charts/HeatMap/HeatMap.types.d.ts

@@ -0,0 +1,80 @@
+import React, { HTMLAttributes } from "react";
+import type { ChartExportOptions } from "../ChartUtils";
+export type HeatMapDatum<TData = unknown> = {
+    /** Date represented by this cell. ISO yyyy-mm-dd strings are recommended. */
+    date: Date | string;
+    /** Numeric value used to determine cell intensity. */
+    value: number;
+    /** Optional per-cell color. Takes precedence over generated scale colors. */
+    color?: string;
+    /** Optional contextual payload returned in callbacks and formatter functions. */
+    data?: TData;
+};
+export type HeatMapCell<TData = unknown> = {
+    date: Date;
+    dateKey: string;
+    value: number;
+    color?: string;
+    datum?: HeatMapDatum<TData>;
+    weekIndex: number;
+    dayIndex: number;
+};
+export type HeatMapMonthLabel = {
+    label: string;
+    weekIndex: number;
+};
+export type HeatMapTooltipState = {
+    dateKey: string;
+    x: number;
+    y: number;
+};
+export type HeatMapProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
+    /** Values rendered by the heatmap. Missing dates render as empty cells. */
+    data: HeatMapDatum<TData>[];
+    /** First date to render. Defaults to the earliest date in data. */
+    startDate?: Date | string;
+    /** Last date to render. Defaults to the latest date in data. */
+    endDate?: Date | string;
+    /** Size of each square cell in pixels. Defaults to 12. */
+    cellSize?: number;
+    /** Gap between cells in pixels. Defaults to 4. */
+    cellGap?: number;
+    /** Cell corner radius in pixels. Defaults to 2. */
+    cellRadius?: number;
+    /** Empty cell fill color. Defaults to the theme secondary background. */
+    emptyColor?: string;
+    /** Ordered color scale used for non-empty cells. */
+    colors?: string[];
+    /** Minimum value for color scaling. Defaults to 0. */
+    minValue?: number;
+    /** Maximum value for color scaling. Defaults to the largest data value. */
+    maxValue?: number;
+    /** Day used as the first row. 0 is Sunday, 1 is Monday. Defaults to 0. */
+    weekStartsOn?: 0 | 1;
+    /** Shows month labels above the heatmap. Defaults to true. */
+    showMonthLabels?: boolean;
+    /** Shows weekday labels at the left of the heatmap. Defaults to true. */
+    showWeekdayLabels?: boolean;
+    /** Shows the low-to-high legend. Defaults to true. */
+    showLegend?: boolean;
+    /** Animates cells into view on initial render. Defaults to false. */
+    animateOnRender?: boolean;
+    /** Duration in milliseconds for each cell animation. Defaults to 320. */
+    animationDuration?: number;
+    /** Delay in milliseconds between each cell animation. Defaults to 8. */
+    animationStagger?: number;
+    /** Shows a custom themed tooltip when hovering over cells. Defaults to false. */
+    showTooltips?: boolean;
+    /** Accessible label for the SVG chart image. Defaults to "Heat map". */
+    ariaLabel?: string;
+    /** Formats values shown in tooltips and accessibility text. */
+    valueFormatter?: (value: number, datum?: HeatMapDatum<TData>) => React.ReactNode;
+    /** Formats month labels. Receives the first visible date in that month. */
+    monthLabelFormatter?: (date: Date) => string;
+    /** Formats weekday labels. Receives the day index from 0 to 6. */
+    weekdayLabelFormatter?: (dayIndex: number) => string;
+    /** Custom tooltip renderer. Receives the cell plus original datum when available. */
+    tooltipFormatter?: (cell: HeatMapCell<TData>, datum?: HeatMapDatum<TData>) => React.ReactNode;
+    /** Called when a cell is clicked or activated with Enter/Space. */
+    onCellClick?: (event: React.MouseEvent<SVGRectElement> | React.KeyboardEvent<SVGRectElement>, cell: HeatMapCell<TData>, datum?: HeatMapDatum<TData>) => void;
+};

package/dist/Charts/HeatMap/HeatMap.types.js

@@ -0,0 +1 @@
+export {};

package/dist/Charts/HeatMap/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./HeatMap";
+export { default as HeatMap } from "./HeatMap";
+export type { HeatMapCell, HeatMapDatum, HeatMapProps } from "./HeatMap.types";

package/dist/Charts/HeatMap/index.js

@@ -0,0 +1,2 @@
+export { default } from "./HeatMap";
+export { default as HeatMap } from "./HeatMap";

package/dist/Charts/LineChart/LineChart.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, RefAttributes } from "react";
+import { ChartHandle } from "../ChartUtils";
+import { LineChartProps } from "./LineChart.types";
+export declare const LineChart: <TData>(props: LineChartProps<TData> & RefAttributes<ChartHandle>) => ReactElement | null;
+export default LineChart;