@aivenio/aquarium 2.0.0 → 2.1.1

package/dist/charts.cjs

@@ -80,7 +80,10 @@ __export(charts_exports, {
   Tooltip: () => Tooltip,
   extractChildByDisplayName: () => extractChildByDisplayName,
   getDisplayName: () => getDisplayName,
+  getXAxisExtent: () => getXAxisExtent,
   getXAxisTicks: () => getXAxisTicks,
+  getXAxisValues: () => getXAxisValues,
+  normalizeAxisDomain: () => normalizeAxisDomain,
   renderXAxis: () => renderXAxis,
   renderXTimeAxis: () => renderXTimeAxis,
   renderYAxis: () => renderYAxis,
@@ -1974,12 +1977,13 @@ function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, se
   };
   return scale;
 }
-function time() {
-  return initRange.apply(calendar(timeTicks, timeTickInterval, timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute, second, timeFormat).domain([new Date(2e3, 0, 1), new Date(2e3, 0, 2)]), arguments);
+
+// node_modules/d3-scale/src/utcTime.js
+function utcTime() {
+  return initRange.apply(calendar(utcTicks, utcTickInterval, utcYear, utcMonth, utcSunday, utcDay, utcHour, utcMinute, second, utcFormat).domain([Date.UTC(2e3, 0, 1), Date.UTC(2e3, 0, 2)]), arguments);
 }
 
 // src/charts/lib/utils.ts
-var import_isArray = __toESM(require("lodash/isArray"));
 var import_isDate = __toESM(require("lodash/isDate"));
 var CHART_MARGIN_BOTTOM = 15;
 var CHART_YLABEL_DEFAULT_OFFSET = 10;
@@ -1999,23 +2003,22 @@ var getDisplayName = (Comp) => {
   }
   return Comp.displayName || Comp.name || "Component";
 };
-var isDateArray = (arr) => arr.every(import_isDate.default);
-var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
+var isDateArray = (arr) => Array.isArray(arr) && arr.every(import_isDate.default);
+var isNumberOrDate = (value) => Number.isFinite(value) || (0, import_isDate.default)(value);
+var getXAxisTicks = ({ dataKey, ticks: ticks2, domain }, chartProps) => {
   var _a;
-  if (!ticks2 || (0, import_isArray.default)(ticks2)) {
+  if (!ticks2 || Array.isArray(ticks2)) {
     return ticks2 != null ? ticks2 : void 0;
   }
-  const xValues = ((_a = chartProps.data) != null ? _a : []).map(
-    (datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0
-  );
-  if (!isDateArray(xValues)) {
-    console.warn(
-      "Time intervals can only be used with date values. Please make sure that `dataKey` prop refers to a prop type of `Date`."
-    );
+  const normalizedDomain = normalizeAxisDomain(domain);
+  const [domainMin, domainMax] = (_a = domainExtent(normalizedDomain)) != null ? _a : [];
+  const [dataMin, dataMax] = getXAxisExtent(chartProps.data, dataKey);
+  const min = isNumberOrDate(domainMin) ? Number(domainMin) : dataMin;
+  const max = isNumberOrDate(domainMax) ? Number(domainMax) : dataMax;
+  if (min === void 0 || max === void 0) {
     return void 0;
   }
-  const [min = new Date(), max = new Date()] = extent(xValues);
-  return time().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
+  return utcTime().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
 };
 var extractChildByDisplayName = (children, name) => {
   const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
@@ -2026,6 +2029,20 @@ var extractChildByDisplayName = (children, name) => {
   const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
   return [foundChild, remainingChildren];
 };
+var normalizeAxisDomain = (domain) => {
+  return isDateArray(domain) ? domain.map((d) => d.valueOf()) : domain;
+};
+var getXAxisValues = (data = [], dataKey) => {
+  return data.map((datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0);
+};
+var getXAxisExtent = (data = [], dataKey) => extent(getXAxisValues(data, dataKey));
+var domainExtent = (domain) => {
+  if (!Array.isArray(domain)) {
+    return void 0;
+  }
+  const [min, max] = domain;
+  return Number.isFinite(min) && Number.isFinite(max) ? [min, max] : void 0;
+};
 
 // src/charts/Axis/Axis.tsx
 var XTimeAxis = () => null;
@@ -2036,19 +2053,25 @@ XAxis.Time = XTimeAxis;
 var YAxis = () => null;
 YAxis.displayName = "Axis.YAxis";
 var renderXAxis = (child, chartProps) => {
-  const _a = child.props, { tickLine = false, ticks: ticks2 } = _a, props = __objRest(_a, ["tickLine", "ticks"]);
-  const xticks = getXAxisTicks(child.props, chartProps);
+  const _a = child.props, { tickLine = false, ticks: ticks2, domain } = _a, props = __objRest(_a, ["tickLine", "ticks", "domain"]);
+  const xticks = getXAxisTicks(__spreadValues({ domain }, child.props), chartProps);
   return /* @__PURE__ */ import_react.default.createElement(import_recharts.XAxis, __spreadValues({
     tickLine,
-    ticks: xticks
+    ticks: xticks,
+    domain
   }, props));
 };
 var renderXTimeAxis = (child, chartProps) => {
-  const _a = child.props, { tickLine = false, ticks: ticks2 } = _a, props = __objRest(_a, ["tickLine", "ticks"]);
-  const xticks = getXAxisTicks(child.props, chartProps);
+  const _a = child.props, { tickLine = false, ticks: ticks2, domain, utc = true } = _a, props = __objRest(_a, ["tickLine", "ticks", "domain", "utc"]);
+  const xticks = getXAxisTicks(__spreadValues({ domain }, child.props), chartProps);
+  const normalizedDomain = normalizeAxisDomain(domain);
+  const [min, max] = getXAxisExtent(chartProps.data, child.props.dataKey);
+  const effectiveDomain = normalizedDomain != null ? normalizedDomain : min !== void 0 && max !== void 0 ? [Number(min), Number(max)] : ["auto", "auto"];
   return /* @__PURE__ */ import_react.default.createElement(import_recharts.XAxis, __spreadValues({
-    scale: "time",
+    scale: utc ? "utc" : "time",
+    type: "number",
     allowDataOverflow: true,
+    domain: effectiveDomain,
     tickLine,
     ticks: xticks
   }, props));
@@ -2626,7 +2649,10 @@ var Reference = {
   Tooltip,
   extractChildByDisplayName,
   getDisplayName,
+  getXAxisExtent,
   getXAxisTicks,
+  getXAxisValues,
+  normalizeAxisDomain,
   renderXAxis,
   renderXTimeAxis,
   renderYAxis,

package/dist/charts.mjs

@@ -1850,12 +1850,13 @@ function calendar(ticks2, tickInterval, year, month, week, day, hour, minute, se
   };
   return scale;
 }
-function time() {
-  return initRange.apply(calendar(timeTicks, timeTickInterval, timeYear, timeMonth, timeSunday, timeDay, timeHour, timeMinute, second, timeFormat).domain([new Date(2e3, 0, 1), new Date(2e3, 0, 2)]), arguments);
+
+// node_modules/d3-scale/src/utcTime.js
+function utcTime() {
+  return initRange.apply(calendar(utcTicks, utcTickInterval, utcYear, utcMonth, utcSunday, utcDay, utcHour, utcMinute, second, utcFormat).domain([Date.UTC(2e3, 0, 1), Date.UTC(2e3, 0, 2)]), arguments);
 }
 
 // src/charts/lib/utils.ts
-import isArray from "lodash/isArray";
 import isDate from "lodash/isDate";
 var CHART_MARGIN_BOTTOM = 15;
 var CHART_YLABEL_DEFAULT_OFFSET = 10;
@@ -1875,23 +1876,22 @@ var getDisplayName = (Comp) => {
   }
   return Comp.displayName || Comp.name || "Component";
 };
-var isDateArray = (arr) => arr.every(isDate);
-var getXAxisTicks = ({ dataKey, ticks: ticks2 }, chartProps) => {
+var isDateArray = (arr) => Array.isArray(arr) && arr.every(isDate);
+var isNumberOrDate = (value) => Number.isFinite(value) || isDate(value);
+var getXAxisTicks = ({ dataKey, ticks: ticks2, domain }, chartProps) => {
   var _a;
-  if (!ticks2 || isArray(ticks2)) {
+  if (!ticks2 || Array.isArray(ticks2)) {
     return ticks2 != null ? ticks2 : void 0;
   }
-  const xValues = ((_a = chartProps.data) != null ? _a : []).map(
-    (datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0
-  );
-  if (!isDateArray(xValues)) {
-    console.warn(
-      "Time intervals can only be used with date values. Please make sure that `dataKey` prop refers to a prop type of `Date`."
-    );
+  const normalizedDomain = normalizeAxisDomain(domain);
+  const [domainMin, domainMax] = (_a = domainExtent(normalizedDomain)) != null ? _a : [];
+  const [dataMin, dataMax] = getXAxisExtent(chartProps.data, dataKey);
+  const min = isNumberOrDate(domainMin) ? Number(domainMin) : dataMin;
+  const max = isNumberOrDate(domainMax) ? Number(domainMax) : dataMax;
+  if (min === void 0 || max === void 0) {
     return void 0;
   }
-  const [min = new Date(), max = new Date()] = extent(xValues);
-  return time().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
+  return utcTime().domain([min, max]).ticks(ticks2).map((v) => v.valueOf());
 };
 var extractChildByDisplayName = (children, name) => {
   const childIndex = children.findIndex((child) => getDisplayName(child.type) === name);
@@ -1902,6 +1902,20 @@ var extractChildByDisplayName = (children, name) => {
   const remainingChildren = children.slice(0, childIndex).concat(children.slice(childIndex + 1));
   return [foundChild, remainingChildren];
 };
+var normalizeAxisDomain = (domain) => {
+  return isDateArray(domain) ? domain.map((d) => d.valueOf()) : domain;
+};
+var getXAxisValues = (data = [], dataKey) => {
+  return data.map((datum) => typeof dataKey === "function" ? dataKey(datum) : dataKey ? datum[dataKey] : void 0);
+};
+var getXAxisExtent = (data = [], dataKey) => extent(getXAxisValues(data, dataKey));
+var domainExtent = (domain) => {
+  if (!Array.isArray(domain)) {
+    return void 0;
+  }
+  const [min, max] = domain;
+  return Number.isFinite(min) && Number.isFinite(max) ? [min, max] : void 0;
+};
 
 // src/charts/Axis/Axis.tsx
 var XTimeAxis = () => null;
@@ -1912,19 +1926,25 @@ XAxis.Time = XTimeAxis;
 var YAxis = () => null;
 YAxis.displayName = "Axis.YAxis";
 var renderXAxis = (child, chartProps) => {
-  const _a = child.props, { tickLine = false, ticks: ticks2 } = _a, props = __objRest(_a, ["tickLine", "ticks"]);
-  const xticks = getXAxisTicks(child.props, chartProps);
+  const _a = child.props, { tickLine = false, ticks: ticks2, domain } = _a, props = __objRest(_a, ["tickLine", "ticks", "domain"]);
+  const xticks = getXAxisTicks(__spreadValues({ domain }, child.props), chartProps);
   return /* @__PURE__ */ React.createElement(_XAxis, __spreadValues({
     tickLine,
-    ticks: xticks
+    ticks: xticks,
+    domain
   }, props));
 };
 var renderXTimeAxis = (child, chartProps) => {
-  const _a = child.props, { tickLine = false, ticks: ticks2 } = _a, props = __objRest(_a, ["tickLine", "ticks"]);
-  const xticks = getXAxisTicks(child.props, chartProps);
+  const _a = child.props, { tickLine = false, ticks: ticks2, domain, utc = true } = _a, props = __objRest(_a, ["tickLine", "ticks", "domain", "utc"]);
+  const xticks = getXAxisTicks(__spreadValues({ domain }, child.props), chartProps);
+  const normalizedDomain = normalizeAxisDomain(domain);
+  const [min, max] = getXAxisExtent(chartProps.data, child.props.dataKey);
+  const effectiveDomain = normalizedDomain != null ? normalizedDomain : min !== void 0 && max !== void 0 ? [Number(min), Number(max)] : ["auto", "auto"];
   return /* @__PURE__ */ React.createElement(_XAxis, __spreadValues({
-    scale: "time",
+    scale: utc ? "utc" : "time",
+    type: "number",
     allowDataOverflow: true,
+    domain: effectiveDomain,
     tickLine,
     ticks: xticks
   }, props));
@@ -2504,7 +2524,10 @@ export {
   Tooltip,
   extractChildByDisplayName,
   getDisplayName,
+  getXAxisExtent,
   getXAxisTicks,
+  getXAxisValues,
+  normalizeAxisDomain,
   renderXAxis,
   renderXTimeAxis,
   renderYAxis,

package/dist/src/atoms/Modal/Modal.d.ts

@@ -4,21 +4,23 @@ import type { ImgHTMLAttributes } from 'react';
 declare type ModalKind = {
     kind?: 'dialog' | 'drawer';
 };
+export declare type ModalSize = 'full' | 'md' | 'screen' | 'sm';
 declare type ModalProps = ModalKind & {
     /** State of the modal */
     open: boolean;
 };
 declare type DialogProps = ModalKind & {
-    /** Optional size (width) of the modal: sm, md, full */
-    size?: 'full' | 'md' | 'sm';
+    /** Optional size (width) of the modal: sm, md, full, screen */
+    size?: ModalSize;
 };
 declare type DivProps = React.HTMLProps<HTMLDivElement>;
 declare type ImgProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>;
 declare type DialogComponentProps = DialogProps & Omit<DivProps, 'size'>;
+declare type HeaderProps = DialogProps & Omit<DivProps, 'size'>;
 declare type ComposedModalProps = {
     BackDrop: React.FC<DivProps>;
     Dialog: React.ForwardRefExoticComponent<DialogComponentProps & React.RefAttributes<HTMLDivElement>>;
-    Header: React.FC<DivProps>;
+    Header: React.FC<HeaderProps>;
     HeaderImage: React.FC<ImgProps & {
         backgroundImage: string | null;
     }>;
@@ -33,5 +35,287 @@ declare type ComposedModalProps = {
     Footer: React.FC<DivProps>;
     Actions: React.FC<DivProps>;
 };
+export declare const modalStyles: import("tailwind-variants").TVReturnType<{
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}, {
+    overlay: string;
+    backdrop: string;
+    dialog: string;
+    header: string;
+    headerImage: string;
+    titleContainer: string;
+    title: string;
+    closeButtonContainer: string;
+    body: string;
+    footer: string;
+    actions: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}, {
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}>, {
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}, {
+    overlay: string;
+    backdrop: string;
+    dialog: string;
+    header: string;
+    headerImage: string;
+    titleContainer: string;
+    title: string;
+    closeButtonContainer: string;
+    body: string;
+    footer: string;
+    actions: string;
+}, import("tailwind-variants").TVReturnType<{
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}, {
+    overlay: string;
+    backdrop: string;
+    dialog: string;
+    header: string;
+    headerImage: string;
+    titleContainer: string;
+    title: string;
+    closeButtonContainer: string;
+    body: string;
+    footer: string;
+    actions: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}, {
+    kind: {
+        dialog: {
+            overlay: string;
+            dialog: string;
+        };
+        drawer: {
+            overlay: string;
+            dialog: string;
+            title: string;
+        };
+    };
+    size: {
+        sm: "";
+        md: "";
+        full: "";
+        screen: {
+            overlay: string;
+            dialog: string;
+            header: string;
+        };
+    };
+    noFooter: {
+        true: {
+            body: string;
+        };
+    };
+    backgroundImage: {
+        true: {
+            headerImage: string;
+        };
+        false: {
+            headerImage: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
 export declare const Modal: ComposedModalProps & React.FC<DivProps & ModalProps>;
 export {};