@sybilion/uilib 1.3.23 → 1.3.25

package/dist/esm/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { Tabs, TabsList, TabsTrigger } from '../../../ui/Tabs/Tabs.js';
+import { useThrottledCallback } from '../../../../hooks/useThrottledCallback.js';
+import S from './HorizonsSelector.styl.js';
+
+function HorizonsSelector({ selectedHorizon, onHorizonChange, availableHorizons, }) {
+    const horizons = useMemo(() => {
+        return availableHorizons
+            .sort((a, b) => {
+            // Sort by horizon number: horizon_1, horizon_2, etc.
+            const numA = parseInt(a.replace('horizon_', ''), 10);
+            const numB = parseInt(b.replace('horizon_', ''), 10);
+            return numA - numB;
+        })
+            .map(horizon => {
+            const num = horizon.replace('horizon_', '');
+            return {
+                value: horizon,
+                label: num,
+            };
+        });
+    }, [availableHorizons]);
+    const onChangeThrottled = useThrottledCallback(onHorizonChange, 300);
+    if (horizons.length === 0) {
+        return null;
+    }
+    return (jsxs("div", { className: S.root, children: [jsx("span", { className: S.horizonsLabel, children: "Planning horizon in months:" }), jsx(Tabs, { value: selectedHorizon, onValueChange: onHorizonChange, variant: "button", children: jsx(TabsList, { children: horizons.map(horizon => (jsx(TabsTrigger, { value: horizon.value, onPointerMove: () => {
+                            if (selectedHorizon !== horizon.value)
+                                onChangeThrottled(horizon.value);
+                        }, children: horizon.label }, horizon.value))) }) })] }));
+}
+
+export { HorizonsSelector };

package/dist/esm/components/widgets/PerformanceChart/HorizonsSelector/HorizonsSelector.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.HorizonsSelector_root__r5vAR{align-items:center;display:flex;flex-grow:1;gap:var(--p-4);justify-content:flex-end}.HorizonsSelector_horizonsLabel__-OzSL{color:var(--foreground);font-size:14px;font-weight:500}.HorizonsSelector_horizonsButtons__Z0aVg{display:flex;gap:var(--p-2)}.HorizonsSelector_horizonButton__YYpIJ{min-width:40px}.HorizonsSelector_infoIcon__7p03J{font-size:12px;margin-left:4px;opacity:.6}";
+var S = {"root":"HorizonsSelector_root__r5vAR","horizonsLabel":"HorizonsSelector_horizonsLabel__-OzSL","horizonsButtons":"HorizonsSelector_horizonsButtons__Z0aVg","horizonButton":"HorizonsSelector_horizonButton__YYpIJ","infoIcon":"HorizonsSelector_infoIcon__7p03J"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/widgets/PerformanceChart/PerformanceChart.constants.js

@@ -0,0 +1,17 @@
+const MONTHS_24 = 24;
+const MONTH_NAMES = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec',
+];
+
+export { MONTHS_24, MONTH_NAMES };