@scality/core-ui 0.170.0 → 0.172.0

package/dist/components/globalhealthbar/healthBarUtils.d.ts

@@ -0,0 +1,77 @@
+export declare const CHART_CONFIG: {
+    readonly RADIUS_SIZE: 4;
+    readonly EDGE_THRESHOLD: 8;
+    readonly CHART_HEIGHT: 50;
+    readonly BAR_SIZE: 8;
+    readonly TICK_SIZE: 4;
+    readonly TOOLTIP_OFFSET: 24;
+    readonly FONT_SIZE: string;
+    readonly TEXT_DY_OFFSET: 12;
+    readonly TICK_INTERVAL: 0;
+    readonly MARGINS: {
+        readonly left: 28;
+        readonly right: 28;
+        readonly bottom: 4;
+        readonly top: 4;
+    };
+};
+export declare const TIME_CONSTANTS: {
+    readonly ONE_HOUR: number;
+    readonly ONE_DAY: number;
+    readonly ONE_WEEK: number;
+    readonly MARGIN_HOURS: 6;
+    readonly FIFTEEN_MINUTES: number;
+    readonly SIX_HOURS: number;
+};
+export declare const LABEL_CONFIG: {
+    readonly MIN_SPACE_PER_TICK: 80;
+    readonly MODULO_CONFIG: {
+        readonly [x: number]: 2 | 3;
+    };
+};
+export declare const calculateSevenDayTicks: (endTimestamp: number) => number[];
+export declare const calculateDayTicks: (endTimestamp: number) => number[];
+export declare const calculateHourTicks: (endTimestamp: number) => number[];
+export declare const getEdgeMargin: (index: number, totalTicks: number, isDaySpan: boolean) => number;
+export declare const getTicks: (startTimestamp: number, endTimestamp: number) => number[];
+export interface LabelVisibilityConfig {
+    hasEnoughSpace: boolean;
+    timeSpan: number;
+    tickIndex: number;
+    totalTicks: number;
+}
+export declare const calculateLabelVisibility: (chartWidth: number, totalTicks: number, span: number, index: number, endTimestamp: number) => boolean;
+/**
+ * Core calculation for alert positioning within a time range
+ */
+export declare const calculateAlertPosition: (alertStartTimestamp: number, alertEndTimestamp: number, chartStartTimestamp: number, chartEndTimestamp: number, availableWidth: number, baseX?: number) => {
+    startX: number;
+    width: number;
+    relativeSize: number;
+};
+export type NavigationAction = 'previous' | 'next' | 'first' | 'last' | 'escape';
+export interface NavigationState {
+    newIndex: number;
+    selectedAlert: any | null;
+    shouldActivateKeyboard: boolean;
+}
+/**
+ * Maps keyboard events to navigation actions
+ */
+export declare const getNavigationAction: (key: string) => NavigationAction | null;
+/**
+ * Calculates new index based on navigation action
+ */
+export declare const calculateNavigationIndex: (action: NavigationAction, currentIndex: number, arrayLength: number) => number;
+/**
+ * Gets complete navigation state update for a given action
+ */
+export declare const getNavigationStateUpdate: <T>(action: NavigationAction, currentIndex: number, alerts: T[]) => NavigationState;
+/**
+ * Calculates tooltip position for an alert based on its time range
+ */
+export declare const getTooltipPosition: (alert: {
+    startsAt: string;
+    endsAt: string;
+}, startTimestamp: number, endTimestamp: number, chartUsableWidth: number) => number;
+//# sourceMappingURL=healthBarUtils.d.ts.map

package/dist/components/globalhealthbar/healthBarUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"healthBarUtils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/healthBarUtils.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAWf,CAAC;AAEX,eAAO,MAAM,cAAc;;;;;;;CAOjB,CAAC;AAEX,eAAO,MAAM,YAAY;;;;;CAOf,CAAC;AA4BX,eAAO,MAAM,sBAAsB,iBAAkB,MAAM,KAAG,MAAM,EAInE,CAAC;AAEF,eAAO,MAAM,iBAAiB,iBAAkB,MAAM,KAAG,MAAM,EAM9D,CAAC;AAEF,eAAO,MAAM,kBAAkB,iBAAkB,MAAM,KAAG,MAAM,EAO/D,CAAC;AAEF,eAAO,MAAM,aAAa,UACjB,MAAM,cACD,MAAM,aACP,OAAO,KACjB,MAKF,CAAC;AAEF,eAAO,MAAM,QAAQ,mBACH,MAAM,gBACR,MAAM,KACnB,MAAM,EAYR,CAAC;AAMF,MAAM,WAAW,qBAAqB;IACpC,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,eACvB,MAAM,cACN,MAAM,QACZ,MAAM,SACL,MAAM,gBACC,MAAM,KACnB,OA+BF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,sBAAsB,wBACZ,MAAM,qBACR,MAAM,uBACJ,MAAM,qBACR,MAAM,kBACT,MAAM,UACf,MAAM;;;;CAkBd,CAAC;AAMF,MAAM,MAAM,gBAAgB,GACxB,UAAU,GACV,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,GAAG,GAAG,IAAI,CAAC;IAC1B,sBAAsB,EAAE,OAAO,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,gBAAgB,GAAG,IAiBpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,WAC3B,gBAAgB,gBACV,MAAM,eACP,MAAM,KAClB,MAiBF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,wBAAwB,GAAI,CAAC,UAChC,gBAAgB,gBACV,MAAM,UACZ,CAAC,EAAE,KACV,eAYF,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,kBAAkB,UACtB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,kBAC3B,MAAM,gBACR,MAAM,oBACF,MAAM,WAgBzB,CAAC"}

package/dist/components/globalhealthbar/healthBarUtils.js

@@ -0,0 +1,196 @@
+import { fontSize } from '../../style/theme';
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+export const CHART_CONFIG = {
+    RADIUS_SIZE: 4,
+    EDGE_THRESHOLD: 8,
+    CHART_HEIGHT: 50,
+    BAR_SIZE: 8,
+    TICK_SIZE: 4,
+    TOOLTIP_OFFSET: 24,
+    FONT_SIZE: fontSize.smaller,
+    TEXT_DY_OFFSET: 12,
+    TICK_INTERVAL: 0,
+    MARGINS: { left: 28, right: 28, bottom: 4, top: 4 },
+};
+export const TIME_CONSTANTS = {
+    ONE_HOUR: 60 * 60 * 1000,
+    ONE_DAY: 24 * 60 * 60 * 1000,
+    ONE_WEEK: 7 * 24 * 60 * 60 * 1000,
+    MARGIN_HOURS: 6,
+    FIFTEEN_MINUTES: 15 * 60 * 1000,
+    SIX_HOURS: 6 * 60 * 60 * 1000,
+};
+export const LABEL_CONFIG = {
+    MIN_SPACE_PER_TICK: 80,
+    MODULO_CONFIG: {
+        [TIME_CONSTANTS.ONE_WEEK]: 2,
+        [TIME_CONSTANTS.ONE_DAY]: 3,
+        [TIME_CONSTANTS.ONE_HOUR]: 3,
+    },
+};
+// =============================================================================
+// TICK CALCULATIONS
+// =============================================================================
+const { ONE_HOUR, ONE_DAY, MARGIN_HOURS, FIFTEEN_MINUTES, SIX_HOURS } = TIME_CONSTANTS;
+const generateTickArray = (endTimestamp, count, interval) => {
+    return Array.from({ length: count }, (_, i) => endTimestamp - i * interval);
+};
+const roundToNearestHalfDay = (timestamp) => {
+    const date = new Date(timestamp);
+    const hours = date.getHours();
+    if (hours <= 12) {
+        return new Date(timestamp).setHours(0, 0, 0, 0);
+    }
+    else {
+        return new Date(timestamp).setHours(12, 0, 0, 0);
+    }
+};
+export const calculateSevenDayTicks = (endTimestamp) => {
+    const marginedEnd = endTimestamp - MARGIN_HOURS * ONE_HOUR;
+    const roundedEnd = roundToNearestHalfDay(marginedEnd);
+    return generateTickArray(roundedEnd, 7, ONE_DAY);
+};
+export const calculateDayTicks = (endTimestamp) => {
+    const is6HourTick = endTimestamp % SIX_HOURS === 0;
+    const closest6Hours = Math.floor(endTimestamp / SIX_HOURS) * SIX_HOURS;
+    const tickCount = is6HourTick ? 5 : 4;
+    return generateTickArray(closest6Hours, tickCount, SIX_HOURS);
+};
+export const calculateHourTicks = (endTimestamp) => {
+    const is15MinuteTick = endTimestamp % FIFTEEN_MINUTES === 0;
+    const closest15Minutes = Math.floor(endTimestamp / FIFTEEN_MINUTES) * FIFTEEN_MINUTES;
+    const tickCount = is15MinuteTick ? 5 : 4;
+    return generateTickArray(closest15Minutes, tickCount, FIFTEEN_MINUTES);
+};
+export const getEdgeMargin = (index, totalTicks, isDaySpan) => {
+    if (isDaySpan && totalTicks === 5) {
+        return index === 0 ? -8 : index === totalTicks - 1 ? 8 : 0;
+    }
+    return 0;
+};
+export const getTicks = (startTimestamp, endTimestamp) => {
+    const span = endTimestamp - startTimestamp;
+    if (span === 7 * ONE_DAY) {
+        return calculateSevenDayTicks(endTimestamp);
+    }
+    else if (span === 24 * ONE_HOUR) {
+        return calculateDayTicks(endTimestamp);
+    }
+    else if (span === ONE_HOUR) {
+        return calculateHourTicks(endTimestamp);
+    }
+    return [];
+};
+export const calculateLabelVisibility = (chartWidth, totalTicks, span, index, endTimestamp) => {
+    const hasEnoughSpace = chartWidth / totalTicks > LABEL_CONFIG.MIN_SPACE_PER_TICK;
+    // If enough space, show all labels
+    if (hasEnoughSpace)
+        return true;
+    // Apply specific rules for each time range
+    if (span === TIME_CONSTANTS.ONE_WEEK) {
+        return index % 2 === 0;
+    }
+    if (span === TIME_CONSTANTS.ONE_DAY) {
+        const isRoundHour = endTimestamp % (60 * 60 * 1000) === 0;
+        const roundHourInterval = index % 2 === 0;
+        const defaultInterval = index % 3 === 0;
+        const result = isRoundHour ? roundHourInterval : defaultInterval;
+        return result;
+    }
+    if (span === TIME_CONSTANTS.ONE_HOUR) {
+        const isRound15Minute = endTimestamp % (15 * 60 * 1000) === 0;
+        const round15MinuteInterval = index % 2 === 0;
+        const defaultInterval = index % 3 === 0;
+        const result = isRound15Minute ? round15MinuteInterval : defaultInterval;
+        return result;
+    }
+    return false;
+};
+// =============================================================================
+// RECTANGLE PROPERTIES
+// =============================================================================
+/**
+ * Core calculation for alert positioning within a time range
+ */
+export const calculateAlertPosition = (alertStartTimestamp, alertEndTimestamp, chartStartTimestamp, chartEndTimestamp, availableWidth, baseX = 0) => {
+    const start = Math.max(alertStartTimestamp, chartStartTimestamp);
+    const end = Math.min(alertEndTimestamp, chartEndTimestamp);
+    const totalTimeSpan = chartEndTimestamp - chartStartTimestamp;
+    const relativeSize = (end - start) / totalTimeSpan;
+    // Calculate start position relative to baseX
+    let startX = baseX;
+    if (alertStartTimestamp > chartStartTimestamp) {
+        const alertStartRelative = (alertStartTimestamp - chartStartTimestamp) / totalTimeSpan;
+        startX = baseX + alertStartRelative * availableWidth;
+    }
+    const width = relativeSize * availableWidth;
+    return { startX, width, relativeSize };
+};
+/**
+ * Maps keyboard events to navigation actions
+ */
+export const getNavigationAction = (key) => {
+    switch (key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            return 'previous';
+        case 'ArrowRight':
+        case 'ArrowDown':
+            return 'next';
+        case 'Home':
+            return 'first';
+        case 'End':
+            return 'last';
+        case 'Escape':
+            return 'escape';
+        default:
+            return null;
+    }
+};
+/**
+ * Calculates new index based on navigation action
+ */
+export const calculateNavigationIndex = (action, currentIndex, arrayLength) => {
+    if (arrayLength === 0)
+        return -1;
+    switch (action) {
+        case 'previous':
+            return currentIndex <= 0 ? arrayLength - 1 : currentIndex - 1;
+        case 'next':
+            return currentIndex >= arrayLength - 1 ? 0 : currentIndex + 1;
+        case 'first':
+            return 0;
+        case 'last':
+            return arrayLength - 1;
+        case 'escape':
+            return -1;
+        default:
+            return currentIndex;
+    }
+};
+/**
+ * Gets complete navigation state update for a given action
+ */
+export const getNavigationStateUpdate = (action, currentIndex, alerts) => {
+    const newIndex = calculateNavigationIndex(action, currentIndex, alerts.length);
+    return {
+        newIndex,
+        selectedAlert: newIndex >= 0 ? alerts[newIndex] : null,
+        shouldActivateKeyboard: action !== 'escape',
+    };
+};
+// =============================================================================
+// TOOLTIP UTILS
+// =============================================================================
+/**
+ * Calculates tooltip position for an alert based on its time range
+ */
+export const getTooltipPosition = (alert, startTimestamp, endTimestamp, chartUsableWidth) => {
+    const alertStart = new Date(alert.startsAt).getTime();
+    const alertEnd = new Date(alert.endsAt).getTime();
+    const { startX, width } = calculateAlertPosition(alertStart, alertEnd, startTimestamp, endTimestamp, chartUsableWidth, CHART_CONFIG.MARGINS.left);
+    // Return center position of the alert
+    return startX + width / 2;
+};

package/dist/components/globalhealthbar/healthBarUtils.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=healthBarUtils.spec.d.ts.map

package/dist/components/globalhealthbar/healthBarUtils.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"healthBarUtils.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/components/globalhealthbar/healthBarUtils.spec.ts"],"names":[],"mappings":""}