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

package/dist/ChartPrimitives/chartTooltip.styled.js

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+export const StyledChartTooltip = styled.div `
+  position: absolute;
+  z-index: 1;
+  min-width: ${({ $minWidth = 120 }) => $minWidth}px;
+  max-width: ${({ $maxWidth = 220 }) => $maxWidth}px;
+  padding: 7px 9px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 4px;
+  background: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+  transform: ${({ $transform = "translate(10px, -50%)" }) => $transform};
+`;
+export const StyledChartTooltipHeader = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  font-weight: 600;
+`;
+export const StyledChartTooltipSwatch = styled.span `
+  width: 8px;
+  height: 8px;
+  flex: 0 0 auto;
+  border-radius: ${({ $radius = "2px" }) => $radius};
+  background: ${({ $color }) => $color};
+`;
+export const StyledChartTooltipLabel = styled.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+export const StyledChartTooltipMeta = styled.div `
+  display: flex;
+  flex-direction: ${({ $direction = "row" }) => $direction};
+  gap: ${({ $gap = 8 }) => $gap}px;
+  margin-top: ${({ $marginTop = 3 }) => $marginTop}px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  font-variant-numeric: tabular-nums;
+`;
+export const StyledChartTooltipList = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  margin-top: 8px;
+`;
+export const StyledChartTooltipRow = styled.div `
+  display: grid;
+  grid-template-columns: 8px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+`;
+export const StyledChartTooltipValue = styled.span `
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;

package/dist/ChartPrimitives/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./chartLegend.styled";
+export * from "./chartTooltip.styled";

package/dist/ChartPrimitives/index.js

@@ -0,0 +1,2 @@
+export * from "./chartLegend.styled";
+export * from "./chartTooltip.styled";

package/dist/ChartUtils/chartColors.d.ts

@@ -0,0 +1,8 @@
+export type ChartColorGradientInput = string[] | {
+    from: string;
+    to: string;
+} | null | undefined;
+export declare const mixColors: (from: string, to: string, amount: number) => string;
+export declare const getGradientStops: (colorGradient?: ChartColorGradientInput) => string[] | null;
+export declare const getGradientColorFromStops: (stops: string[] | null | undefined, index: number, total: number) => string | undefined;
+export declare const getGradientColor: (colorGradient: ChartColorGradientInput, index: number, total: number) => string | undefined;

package/dist/ChartUtils/chartColors.js

@@ -0,0 +1,65 @@
+import { clamp } from "./chartMath";
+const parseColor = (color) => {
+    const trimmedColor = color.trim();
+    const hexMatch = trimmedColor.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hexMatch) {
+        const normalizedHex = hexMatch[1].length === 3
+            ? hexMatch[1]
+                .split("")
+                .map((character) => character + character)
+                .join("")
+            : hexMatch[1];
+        return {
+            r: parseInt(normalizedHex.slice(0, 2), 16),
+            g: parseInt(normalizedHex.slice(2, 4), 16),
+            b: parseInt(normalizedHex.slice(4, 6), 16),
+            a: 1,
+        };
+    }
+    const rgbMatch = trimmedColor.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/i);
+    if (!rgbMatch) {
+        return null;
+    }
+    return {
+        r: clamp(Number(rgbMatch[1]), 0, 255),
+        g: clamp(Number(rgbMatch[2]), 0, 255),
+        b: clamp(Number(rgbMatch[3]), 0, 255),
+        a: rgbMatch[4] ? clamp(Number(rgbMatch[4]), 0, 1) : 1,
+    };
+};
+export const mixColors = (from, to, amount) => {
+    const normalizedAmount = clamp(amount, 0, 1);
+    if (normalizedAmount === 0)
+        return from;
+    if (normalizedAmount === 1)
+        return to;
+    const fromColor = parseColor(from);
+    const toColor = parseColor(to);
+    if (!fromColor || !toColor) {
+        return `color-mix(in srgb, ${from} ${(1 - normalizedAmount) * 100}%, ${to})`;
+    }
+    const r = Math.round(fromColor.r + (toColor.r - fromColor.r) * normalizedAmount);
+    const g = Math.round(fromColor.g + (toColor.g - fromColor.g) * normalizedAmount);
+    const b = Math.round(fromColor.b + (toColor.b - fromColor.b) * normalizedAmount);
+    const a = fromColor.a + (toColor.a - fromColor.a) * normalizedAmount;
+    return a === 1 ? `rgb(${r}, ${g}, ${b})` : `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+export const getGradientStops = (colorGradient) => {
+    if (!colorGradient)
+        return null;
+    return Array.isArray(colorGradient)
+        ? colorGradient.filter(Boolean)
+        : [colorGradient.from, colorGradient.to].filter(Boolean);
+};
+export const getGradientColorFromStops = (stops, index, total) => {
+    if (!(stops === null || stops === void 0 ? void 0 : stops.length))
+        return undefined;
+    if (stops.length === 1 || total <= 1)
+        return stops[0];
+    const progress = index / (total - 1);
+    const scaledProgress = progress * (stops.length - 1);
+    const stopIndex = Math.min(Math.floor(scaledProgress), stops.length - 2);
+    const stopProgress = scaledProgress - stopIndex;
+    return mixColors(stops[stopIndex], stops[stopIndex + 1], stopProgress);
+};
+export const getGradientColor = (colorGradient, index, total) => getGradientColorFromStops(getGradientStops(colorGradient), index, total);

package/dist/ChartUtils/chartMath.d.ts

@@ -0,0 +1,3 @@
+export declare const formatDefaultValue: (value: number) => string;
+export declare const clamp: (value: number, min: number, max: number) => number;
+export declare const easeOutCubic: (value: number) => number;

package/dist/ChartUtils/chartMath.js

@@ -0,0 +1,3 @@
+export const formatDefaultValue = (value) => new Intl.NumberFormat().format(value);
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+export const easeOutCubic = (value) => 1 - Math.pow(1 - value, 3);

package/dist/ChartUtils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./chartColors";
+export * from "./chartMath";

package/dist/ChartUtils/index.js

@@ -0,0 +1,2 @@
+export * from "./chartColors";
+export * from "./chartMath";

package/dist/Charts/BarChart/BarChart.d.ts

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