@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/domain/components/header-stats/header-stats.example.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HeaderConsumptionBox } from './header-consumption-box';
+import { HeaderEfficiencyBox } from './header-efficiency-box';
+import { HeaderHashrateBox } from './header-hashrate-box';
+import { HeaderMinersBox } from './header-miners-box';
+import { HeaderStatsBar } from './header-stats-bar';
+/**
+ * Four-box dashboard header strip — Miners / Hashrate / Consumption /
+ * Efficiency. Lives in the middle slot of `<AppHeader>`.
+ */
+export const HeaderStatsExample = () => (_jsxs(HeaderStatsBar, { children: [_jsx(HeaderMinersBox, { total: 2188, online: 158, error: 1, offline: 57, appTotal: 216, poolTotal: 205, poolOnline: 201, poolMismatch: 4 }), _jsx(HeaderHashrateBox, { appPhs: 63.262, poolPhs: 52.687 }), _jsx(HeaderConsumptionBox, { valueMw: 1.663 }), _jsx(HeaderEfficiencyBox, { valueWthS: 26.29 })] }));

package/dist/domain/components/header-stats/index.d.ts

@@ -0,0 +1,10 @@
+export type { HeaderConsumptionBoxProps } from './header-consumption-box';
+export { HeaderConsumptionBox } from './header-consumption-box';
+export type { HeaderEfficiencyBoxProps } from './header-efficiency-box';
+export { HeaderEfficiencyBox } from './header-efficiency-box';
+export type { HeaderHashrateBoxProps } from './header-hashrate-box';
+export { HeaderHashrateBox } from './header-hashrate-box';
+export type { HeaderMinersBoxProps } from './header-miners-box';
+export { HeaderMinersBox } from './header-miners-box';
+export type { HeaderStatsBarProps } from './header-stats-bar';
+export { HeaderStatsBar } from './header-stats-bar';

package/dist/domain/components/header-stats/index.js

@@ -0,0 +1,5 @@
+export { HeaderConsumptionBox } from './header-consumption-box';
+export { HeaderEfficiencyBox } from './header-efficiency-box';
+export { HeaderHashrateBox } from './header-hashrate-box';
+export { HeaderMinersBox } from './header-miners-box';
+export { HeaderStatsBar } from './header-stats-bar';

package/dist/domain/components/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @tetherto/mdk-react-devkit - Domain Components
+ *
+ * Domain-specific components for mining operations.
+ * These components encapsulate business logic and domain concepts.
+ */
+export * from './active-incidents-card';
+export * from './alarm';
+export * from './alerts';
+export * from './auth';
+export * from './composite/metric-card';
+export * from './dashboard';
+export * from './data-box';
+export * from './device-explorer';
+export * from './enabled-disable-toggle/enabled-disable-toggle';
+export * from './header-actions';
+export * from './header-stats';
+export * from './line-chart-card';
+export * from './miners-activity-chart/miners-activity-chart';
+export * from './mining-pools-panel';
+export * from './pool-details-card';
+export * from './pool-details-popover';
+export * from './settings';
+export * from './stat-cards';
+export * from './timeframe/report-time-frame-selector';
+export * from './timeframe/timeframe-controls';
+export * from './timeframe/use-financial-date-range';
+export * from './timeline-chart';
+export * from './widget-top-row';

package/dist/domain/components/index.js

@@ -0,0 +1,29 @@
+/**
+ * @tetherto/mdk-react-devkit - Domain Components
+ *
+ * Domain-specific components for mining operations.
+ * These components encapsulate business logic and domain concepts.
+ */
+export * from './active-incidents-card';
+export * from './alarm';
+export * from './alerts';
+export * from './auth';
+export * from './composite/metric-card';
+export * from './dashboard';
+export * from './data-box';
+export * from './device-explorer';
+export * from './enabled-disable-toggle/enabled-disable-toggle';
+export * from './header-actions';
+export * from './header-stats';
+export * from './line-chart-card';
+export * from './miners-activity-chart/miners-activity-chart';
+export * from './mining-pools-panel';
+export * from './pool-details-card';
+export * from './pool-details-popover';
+export * from './settings';
+export * from './stat-cards';
+export * from './timeframe/report-time-frame-selector';
+export * from './timeframe/timeframe-controls';
+export * from './timeframe/use-financial-date-range';
+export * from './timeline-chart';
+export * from './widget-top-row';

package/dist/domain/components/info-container/info-container.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+import './info-container.scss';
+/** A single labeled info row for {@link InfoContainer} or {@link DeviceInfo}. */
+export type InfoItem = {
+    /** Row label. */
+    title?: string;
+    /** Row value, may be an array for multi-line values. */
+    value?: string | string[] | number;
+};
+/**
+ * Labeled key/value container. Renders a title and one or more values stacked
+ * below it. Use {@link DeviceInfo} to render a list of these.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <InfoContainer title="Worker" value="rig01" />
+ * ```
+ */
+export declare const InfoContainer: ({ title, value }: InfoItem) => ReactNode;
+type DeviceInfoProps = {
+    /** Rows to render */
+    data: InfoItem[];
+};
+/**
+ * Renders a list of {@link InfoContainer} rows from a single `data` array.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export declare const DeviceInfo: ({ data }: Partial<DeviceInfoProps>) => ReactNode;
+export {};

package/dist/domain/components/info-container/info-container.example.d.ts

@@ -0,0 +1 @@
+export declare const InfoContainerExample: () => import("react").JSX.Element;

package/dist/domain/components/info-container/info-container.example.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for InfoContainer and DeviceInfo.
+ */
+import { DeviceInfo, InfoContainer } from './info-container';
+const mockDeviceData = [
+    { title: 'MAC Address', value: 'AA:BB:CC:00:00:01' },
+    { title: 'IP', value: '10.0.0.11' },
+    { title: 'Worker', value: 'rig-01' },
+    { title: 'Pool', value: 'pool.example.com:3333' },
+    { title: 'Status', value: 'online' },
+];
+export const InfoContainerExample = () => (_jsxs("div", { className: "mdk-example-row", children: [_jsx(InfoContainer, { title: "Worker", value: "rig-01" }), _jsx(InfoContainer, { title: "Tags", value: ['bitcoin', 'sha256', 'liquid-cooled'] }), _jsx(DeviceInfo, { data: mockDeviceData })] }));

package/dist/domain/components/info-container/info-container.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Labeled key/value container. Renders a title and one or more values stacked
+ * below it. Use {@link DeviceInfo} to render a list of these.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <InfoContainer title="Worker" value="rig01" />
+ * ```
+ */
+export const InfoContainer = ({ title, value }) => {
+    const items = Array.isArray(value) ? value : [value];
+    return (_jsxs("div", { className: "mdk-info-container", children: [_jsx("span", { className: "mdk-info-container__title", children: title }), _jsx("div", { className: "mdk-info-container__value", children: items.map((item, index) => (_jsx("div", { children: item }, index))) })] }));
+};
+const normalizeValue = (value) => {
+    if (value === undefined || value === null)
+        return;
+    if (typeof value === 'number')
+        return String(value);
+    if (Array.isArray(value))
+        return value.map(String);
+    return String(value);
+};
+/**
+ * Renders a list of {@link InfoContainer} rows from a single `data` array.
+ *
+ * @category widgets
+ * @domain device-management
+ * @kernelCapability device-management
+ * @tier agent-ready
+ */
+export const DeviceInfo = ({ data }) => (_jsx("div", { className: "mdk-device-info", children: data?.map((item, index) => (_jsx(InfoContainer, { title: item.title !== undefined ? String(item.title) : undefined, value: normalizeValue(item.value) }, `${item.title}-${index}`))) }));

package/dist/domain/components/line-chart-card/index.d.ts

@@ -0,0 +1,43 @@
+import type { IChartApi } from '../../../primitives/index.js';
+import type { LineChartCardData, TimelineOption } from './types';
+/**
+ * Composable line-chart card with title, timeline range selector, legend
+ * (basic or detailed), error boundary, and an optional min/max/avg footer.
+ *
+ * Accepts either pre-shaped `data` or `rawData` + a `dataAdapter` callback so
+ * upstream domain components can keep their data wrangling local.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <LineChartCard
+ *   title="Hashrate"
+ *   data={chartData}
+ *   timelineOptions={[{ label: '5m', value: '5m' }, { label: '1h', value: '1h' }]}
+ *   defaultTimeline="5m"
+ * />
+ * ```
+ */
+export declare const LineChartCard: import("react").FC<Partial<{
+    data: LineChartCardData;
+    rawData: unknown;
+    dataAdapter: (data: unknown) => LineChartCardData;
+    timelineOptions: TimelineOption[];
+    timeline: string;
+    defaultTimeline: string;
+    onTimelineChange: (timeline: string) => void;
+    title: string;
+    detailLegends: boolean;
+    isLoading: boolean;
+    shouldResetZoom: boolean;
+    chartProps: Partial<import("../../../primitives/index.js").LightWeightLineChartProps>;
+    chartRef: import("react").MutableRefObject<IChartApi | null>;
+    minHeight: number | string;
+    className: string;
+    headerAction: import("react").ReactNode;
+    titleExtra: import("react").ReactNode;
+}>>;
+export type { LineChartCardData, LineChartCardDataset, LineChartCardProps, TimelineOption, } from './types';

package/dist/domain/components/line-chart-card/index.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartContainer, ChartStatsFooter, cn, DetailLegend, getChartDataAvailability, getChartLegendItemStyles, LineChart, withErrorBoundary, } from '../../../primitives/index.js';
+import { useCallback, useMemo, useRef, useState } from 'react';
+const mapToRangeSelectorOptions = (options) => options.map(({ label, value }) => ({
+    label,
+    value,
+}));
+const legendStrokeColor = (borderColor) => getChartLegendItemStyles(borderColor, false).stroke;
+const mapToLegendItems = (datasets, hiddenMap) => datasets
+    .filter((ds) => ds.label)
+    .map((ds) => ({
+    label: ds.label,
+    color: legendStrokeColor(ds.borderColor),
+    hidden: !!hiddenMap[ds.label],
+}));
+const mapToDetailLegendItems = (datasets, hiddenMap) => datasets
+    .filter((ds) => ds.label)
+    .map((ds) => ({
+    label: ds.label,
+    color: ds.borderColor,
+    icon: ds.legendIcon,
+    currentValue: ds.currentValue,
+    percentChange: ds.percentChange,
+    hidden: !!hiddenMap[ds.label],
+}));
+const mapToLineChartData = (datasets, hiddenMap) => ({
+    datasets: datasets.map((ds) => ({
+        label: ds.label,
+        borderColor: legendStrokeColor(ds.borderColor),
+        data: ds.data,
+        visible: !hiddenMap[ds.label ?? ''],
+    })),
+});
+const LineChartCardInner = ({ data: dataProp, rawData, dataAdapter, timelineOptions, timeline: controlledTimeline, defaultTimeline, onTimelineChange, title, detailLegends = false, isLoading = false, shouldResetZoom = true, chartProps, chartRef: externalChartRef, minHeight = 350, className, headerAction, titleExtra, }) => {
+    const [legendHidden, setLegendHidden] = useState({});
+    const [internalTimeline, setInternalTimeline] = useState(defaultTimeline ?? timelineOptions?.[0]?.value ?? '5m');
+    const internalChartRef = useRef(null);
+    const chartRef = externalChartRef ?? internalChartRef;
+    // Determine active timeline (controlled vs uncontrolled)
+    const timeline = controlledTimeline ?? internalTimeline;
+    // Resolve data: either from direct prop or rawData+adapter
+    const chartData = useMemo(() => {
+        if (dataProp)
+            return dataProp;
+        if (rawData != null && dataAdapter)
+            return dataAdapter(rawData);
+        return undefined;
+    }, [dataProp, rawData, dataAdapter]);
+    const handleTimelineChange = useCallback((newTimeline) => {
+        chartRef.current?.timeScale().resetTimeScale();
+        if (controlledTimeline === undefined) {
+            setInternalTimeline(newTimeline);
+        }
+        onTimelineChange?.(newTimeline);
+    }, [controlledTimeline, onTimelineChange, chartRef]);
+    const handleLegendToggle = useCallback((label) => {
+        setLegendHidden((prev) => ({
+            ...prev,
+            [label]: !prev[label],
+        }));
+    }, []);
+    const datasets = chartData?.datasets ?? [];
+    const labeledDatasets = useMemo(() => datasets.filter((ds) => ds.label), [datasets]);
+    const handleLegendToggleByIndex = useCallback((index) => {
+        const dataset = labeledDatasets[index];
+        if (dataset?.label) {
+            handleLegendToggle(dataset.label);
+        }
+    }, [labeledDatasets, handleLegendToggle]);
+    const lineChartData = mapToLineChartData(datasets, legendHidden);
+    const hasData = getChartDataAvailability(lineChartData.datasets);
+    // Build range selector
+    const rangeSelector = timelineOptions
+        ? {
+            options: mapToRangeSelectorOptions(timelineOptions),
+            value: timeline,
+            onChange: handleTimelineChange,
+        }
+        : undefined;
+    // Build legend
+    const legendData = !detailLegends && datasets.length > 0 ? mapToLegendItems(datasets, legendHidden) : undefined;
+    // Build detail legend as custom header addon
+    const detailLegendNode = detailLegends && datasets.length > 0 ? (_jsx(DetailLegend, { items: mapToDetailLegendItems(datasets, legendHidden), onToggle: handleLegendToggle })) : null;
+    // Build footer
+    const footer = chartData && (chartData.minMaxAvg || chartData.footerStats || chartData.secondaryLabel) ? (_jsx(ChartStatsFooter, { minMaxAvg: chartData.minMaxAvg, stats: chartData.footerStats, statsPerColumn: chartData.footerStatsPerColumn, secondaryLabel: chartData.secondaryLabel })) : undefined;
+    return (_jsx("div", { className: cn('mdk-line-chart-card', className), style: {
+            '--mdk-line-chart-card-min-height': typeof minHeight === 'number' ? `${minHeight}px` : minHeight,
+        }, children: _jsxs(ChartContainer, { title: title, titleExtra: titleExtra, headerAction: headerAction, legendData: legendData, highlightedValue: chartData?.highlightedValue, rangeSelector: rangeSelector, loading: isLoading, empty: !isLoading && !hasData, emptyMessage: "No records found", footer: footer, onToggleDataset: handleLegendToggleByIndex, children: [detailLegendNode && _jsx("div", { className: "mdk-line-chart-card__legends", children: detailLegendNode }), _jsx(LineChart, { chartRef: chartRef, data: lineChartData, yTicksFormatter: chartData?.yTicksFormatter, priceFormatter: chartData?.priceFormatter, skipRound: chartData?.skipRound, timeline: timeline, shouldResetZoom: shouldResetZoom, ...chartProps })] }) }));
+};
+/**
+ * Composable line-chart card with title, timeline range selector, legend
+ * (basic or detailed), error boundary, and an optional min/max/avg footer.
+ *
+ * Accepts either pre-shaped `data` or `rawData` + a `dataAdapter` callback so
+ * upstream domain components can keep their data wrangling local.
+ *
+ * @category charts
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * <LineChartCard
+ *   title="Hashrate"
+ *   data={chartData}
+ *   timelineOptions={[{ label: '5m', value: '5m' }, { label: '1h', value: '1h' }]}
+ *   defaultTimeline="5m"
+ * />
+ * ```
+ */
+export const LineChartCard = withErrorBoundary(LineChartCardInner, 'LineChartCard');

package/dist/domain/components/line-chart-card/line-chart-card.example.d.ts

@@ -0,0 +1 @@
+export declare const LineChartCardExample: () => import("react").JSX.Element;

package/dist/domain/components/line-chart-card/line-chart-card.example.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Runnable example for LineChartCard.
+ */
+import { LineChartCard } from '@tetherto/mdk-react-devkit';
+const NOW = Date.now();
+const MS_PER_MIN = 60 * 1000;
+/* `x` is a Unix timestamp in **milliseconds** — `LineChart` divides it by 1000
+ * itself to derive the lightweight-charts `UTCTimestamp`. Pass seconds here and
+ * every point lands in January 1970. */
+const points = Array.from({ length: 90 }, (_, i) => ({
+    x: NOW - (90 - i) * MS_PER_MIN,
+    y: 50 + Math.sin(i / 8) * 6 + Math.random() * 1.2,
+}));
+const chartData = {
+    datasets: [
+        {
+            label: 'Pool A',
+            borderColor: '#4f9ef5',
+            data: points,
+        },
+    ],
+    minMaxAvg: { min: '44', max: '58', avg: '51' },
+    highlightedValue: { value: 52.3, unit: 'TH/s' },
+};
+const timelineOptions = [
+    { label: '5m', value: '5m' },
+    { label: '1h', value: '1h' },
+    { label: '1d', value: '1D' },
+];
+export const LineChartCardExample = () => {
+    return (_jsx(LineChartCard, { title: "Hashrate", data: chartData, timelineOptions: timelineOptions, defaultTimeline: "5m", minHeight: 320 }));
+};

package/dist/domain/components/line-chart-card/types.d.ts

@@ -0,0 +1,121 @@
+import type { MutableRefObject, ReactNode } from 'react';
+import type { ChartStatsFooterItem, IChartApi, LightWeightLineChartProps, MinMaxAvgValues } from '../../../primitives/index.js';
+export type LineChartCardDataset = {
+    /** Label for the dataset (used in legend) */
+    label?: string;
+    /** Line color */
+    borderColor: string;
+    /**
+     * Data points. `x` is a Unix timestamp in **milliseconds** — `LineChart`
+     * divides it by 1000 to derive the lightweight-charts `UTCTimestamp`.
+     * `y` is `null` to render a gap.
+     */
+    data: Array<{
+        x: number;
+        y: number | null;
+    }>;
+    /** Whether this dataset is visible */
+    visible?: boolean;
+    /** Custom icon for detail legend */
+    legendIcon?: ReactNode;
+    /** Current value for detail legend display */
+    currentValue?: {
+        value: number | string;
+        unit?: string;
+    };
+    /** Percentage change for detail legend */
+    percentChange?: number | null;
+};
+export type LineChartCardData = {
+    /** Chart datasets */
+    datasets: LineChartCardDataset[];
+} & Partial<{
+    /** Y-axis tick formatter */
+    yTicksFormatter: (value: number) => string;
+    /** Price formatter for lightweight-charts */
+    priceFormatter: (value: number) => string;
+    /** Whether to skip value rounding */
+    skipRound: boolean;
+    /** Min/Max/Avg stats for footer */
+    minMaxAvg: MinMaxAvgValues;
+    /** Additional footer stats */
+    footerStats: ChartStatsFooterItem[];
+    /** Stats items per column in footer grid */
+    footerStatsPerColumn: number;
+    /** Highlighted value in header */
+    highlightedValue: {
+        value: string | number;
+        unit?: string;
+    };
+    /** Secondary label for footer */
+    secondaryLabel: {
+        title: string;
+        value: string | number;
+    };
+}>;
+export type TimelineOption = {
+    /** Timeline key (e.g. `5m`, `1h`) passed to `onTimelineChange` and matched against `timeline` */
+    value: string;
+    /** Range-selector button text */
+    label: string;
+    /** Not forwarded to the range selector; currently has no effect */
+    disabled?: boolean;
+};
+export type LineChartCardProps = Partial<{
+    /** Pre-adapted chart data (use this OR rawData+dataAdapter) */
+    data: LineChartCardData;
+    /** Raw data to be transformed by dataAdapter */
+    rawData: unknown;
+    /** Adapter to transform rawData into LineChartCardData */
+    dataAdapter: (data: unknown) => LineChartCardData;
+    /** Timeline range selector options */
+    timelineOptions: TimelineOption[];
+    /** Controlled timeline value */
+    timeline: string;
+    /**
+     * Default timeline when uncontrolled
+     * @default first option
+     */
+    defaultTimeline: string;
+    /** Callback when timeline changes */
+    onTimelineChange: (timeline: string) => void;
+    /** Chart title */
+    title: string;
+    /**
+     * Show detail legends with current values
+     * @default false
+     */
+    detailLegends: boolean;
+    /**
+     * Loading state
+     * @default false
+     */
+    isLoading: boolean;
+    /**
+     * Whether to reset zoom on timeline change (default: true)
+     * @default true
+     */
+    shouldResetZoom: boolean;
+    /** Pass-through props to the core LineChart */
+    chartProps: Partial<LightWeightLineChartProps>;
+    /** Ref to the lightweight-charts IChartApi */
+    chartRef: MutableRefObject<IChartApi | null>;
+    /**
+     * Minimum chart height
+     * @default 350
+     */
+    minHeight: number | string;
+    /** Custom class name */
+    className: string;
+    /**
+     * Optional action rendered on the right of the card header (e.g. an
+     * expand toggle). Passed straight through to `ChartContainer`. Additive -
+     * omit it and the card header is unchanged.
+     */
+    headerAction: ReactNode;
+    /**
+     * Optional node rendered next to the title (e.g. an info tooltip). Passed
+     * straight through to `ChartContainer`. Additive.
+     */
+    titleExtra: ReactNode;
+}>;

package/dist/domain/components/line-chart-card/types.js

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

package/dist/domain/components/miners-activity-chart/miners-activity-chart.const.d.ts

@@ -0,0 +1,54 @@
+import { MinerStatuses } from '../../constants/device-constants';
+export declare const MINERS_ACTIVITY_ITEMS: {
+    SHORT: {
+        WITH_MAINTENANCE: ("high" | "low" | "maintenance" | "normal" | "not_mining" | "offline")[];
+        WOUT_MAINTENANCE: ("disconnected" | "high" | "low" | "normal" | "not_mining" | "offline")[];
+    };
+    EXTENDED: {
+        WITH_MAINTENANCE: ("alert" | "connecting" | "disconnected" | "error" | "errorMining" | "high" | "low" | "maintenance" | "mining" | "normal" | "not_mining" | "offline" | "sleep" | "sleeping")[];
+        WOUT_MAINTENANCE: ("alert" | "connecting" | "disconnected" | "error" | "errorMining" | "high" | "low" | "maintenance" | "mining" | "normal" | "not_mining" | "offline" | "sleep" | "sleeping")[];
+    };
+};
+export declare const MINERS_ACTIVITY_TOOLTIPS: {
+    error: string;
+};
+export declare const MINERS_ACTIVITY_LABELS: {
+    disconnected: string;
+};
+export declare const MinersActivityIndicatorColors: {
+    offline: "gray";
+    error: "red";
+    low: "yellow";
+    normal: "green";
+    high: "purple";
+};
+/**
+ * Per-status hex colours for the `tiles` variant. Kept as plain `#RRGGBB` (not
+ * the CSS-var power-mode colours) so a faint tinted background can be derived.
+ * Used for both the tile text and its background tint.
+ */
+export declare const MinersActivityTileColors: {
+    offline: "#9FA6AC";
+    error: "#FF3B30";
+    sleep: "#3B82F6";
+    low: "#FFC107";
+    normal: "#34C759";
+    high: "#8B5CF6";
+    disconnected: "#9FA6AC";
+};
+export declare const MinerStatusColors: Partial<Record<(typeof MinerStatuses)[keyof typeof MinerStatuses], string>>;
+export declare const SOCKET_CONTAINER_COLOR: {
+    readonly errorMining: "#F7931A";
+    readonly disconnected: "#000000";
+    readonly alert?: string | undefined;
+    readonly error?: string | undefined;
+    readonly high: string;
+    readonly low: string;
+    readonly maintenance?: string | undefined;
+    readonly mining?: string | undefined;
+    readonly normal: string;
+    readonly not_mining?: string | undefined;
+    readonly offline?: string | undefined;
+    readonly sleep: string;
+    readonly sleeping?: string | undefined;
+};

package/dist/domain/components/miners-activity-chart/miners-activity-chart.const.js

@@ -0,0 +1,68 @@
+import { COLOR } from '../../../primitives/index.js';
+import { MinerStatuses } from '../../constants/device-constants';
+import { PowerModeColors } from '../../utils/device-utils';
+import { MINER_POWER_MODE, SOCKET_STATUSES } from '../../utils/status-utils';
+const MINERS_ACTIVITY_COMMON_ITEMS = [
+    MinerStatuses.OFFLINE,
+    MinerStatuses.NOT_MINING,
+    MINER_POWER_MODE.LOW,
+    MINER_POWER_MODE.NORMAL,
+    MINER_POWER_MODE.HIGH,
+];
+const MINERS_ACTIVITY_ITEMS_RAW = {
+    WITH_MAINTENANCE: [...MINERS_ACTIVITY_COMMON_ITEMS, MinerStatuses.MAINTENANCE],
+    WOUT_MAINTENANCE: [...MINERS_ACTIVITY_COMMON_ITEMS, SOCKET_STATUSES.MINER_DISCONNECTED],
+};
+const commonItemsNotMiningIndex = MINERS_ACTIVITY_COMMON_ITEMS.indexOf(MinerStatuses.NOT_MINING);
+const extendItems = (rawItems) => {
+    const items = [...rawItems];
+    items.splice(commonItemsNotMiningIndex, 1, MinerStatuses.ERROR, MINER_POWER_MODE.SLEEP);
+    return items;
+};
+export const MINERS_ACTIVITY_ITEMS = {
+    SHORT: MINERS_ACTIVITY_ITEMS_RAW,
+    EXTENDED: {
+        WITH_MAINTENANCE: extendItems(MINERS_ACTIVITY_ITEMS_RAW.WITH_MAINTENANCE),
+        WOUT_MAINTENANCE: extendItems(MINERS_ACTIVITY_ITEMS_RAW.WOUT_MAINTENANCE),
+    },
+};
+export const MINERS_ACTIVITY_TOOLTIPS = {
+    [MinerStatuses.ERROR]: "This does not include minor errors not affecting the miner's hash rate",
+};
+export const MINERS_ACTIVITY_LABELS = {
+    [SOCKET_STATUSES.MINER_DISCONNECTED]: 'empty',
+};
+export const MinersActivityIndicatorColors = {
+    [MinerStatuses.OFFLINE]: 'gray',
+    [MinerStatuses.ERROR]: 'red',
+    [MINER_POWER_MODE.LOW]: 'yellow',
+    [MINER_POWER_MODE.NORMAL]: 'green',
+    [MINER_POWER_MODE.HIGH]: 'purple',
+};
+/**
+ * Per-status hex colours for the `tiles` variant. Kept as plain `#RRGGBB` (not
+ * the CSS-var power-mode colours) so a faint tinted background can be derived.
+ * Used for both the tile text and its background tint.
+ */
+export const MinersActivityTileColors = {
+    [MinerStatuses.OFFLINE]: COLOR.DARK_GREY,
+    [MinerStatuses.ERROR]: COLOR.BRICK_RED,
+    [MINER_POWER_MODE.SLEEP]: COLOR.SLEEP_BLUE,
+    [MINER_POWER_MODE.LOW]: COLOR.YELLOW,
+    [MINER_POWER_MODE.NORMAL]: COLOR.GRASS_GREEN,
+    [MINER_POWER_MODE.HIGH]: COLOR.PURPLE_HIGH,
+    [SOCKET_STATUSES.MINER_DISCONNECTED]: COLOR.DARK_GREY,
+};
+export const MinerStatusColors = {
+    [MinerStatuses.ERROR]: COLOR.BRICK_RED,
+    [MinerStatuses.NOT_MINING]: COLOR.BRICK_RED,
+    [MinerStatuses.OFFLINE]: COLOR.DARK_GREY,
+    [MinerStatuses.SLEEPING]: COLOR.SLEEP_BLUE,
+    [MinerStatuses.MAINTENANCE]: COLOR.ORANGE_WARNING,
+};
+export const SOCKET_CONTAINER_COLOR = {
+    ...MinerStatusColors,
+    ...PowerModeColors,
+    [SOCKET_STATUSES.ERROR_MINING]: COLOR.COLD_ORANGE,
+    [SOCKET_STATUSES.MINER_DISCONNECTED]: COLOR.SIMPLE_BLACK,
+};