@sybilion/uilib 1.3.23 → 1.3.26

package/dist/esm/components/widgets/PerformanceChart/PerformanceChart.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)}}.PerformanceChart_root__sda5D{transition:opacity .3s ease-out}.PerformanceChart_root__sda5D,.PerformanceChart_viewTabs__5aHg1{display:flex;flex:1;flex-direction:column;min-height:0;width:100%}.PerformanceChart_toolbarRow__SwRJc{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--p-4);margin-bottom:var(--p-4);width:100%}.PerformanceChart_toolBarRight__ODMr4{align-items:center;display:flex;flex-grow:1;gap:var(--p-4);justify-content:flex-end}.PerformanceChart_viewTabsList__fNv-x{align-items:center;background-color:transparent;display:inline-flex;flex-shrink:0;flex-wrap:wrap;gap:var(--p-2);margin-bottom:0}.PerformanceChart_perHorizonChartWrap__j15JS{min-height:var(--chart-height);position:relative;width:100%}.PerformanceChart_perHorizonChartWrapLoading__1ZGCz .PerformanceChart_chartContainer__qXeA8{opacity:.3;pointer-events:none}.PerformanceChart_perHorizonChartWrapLoading__1ZGCz .recharts-line-dots{display:none}.PerformanceChart_performanceLoadingLayer__GmfFi{inset:0;pointer-events:none;position:absolute;z-index:10}.PerformanceChart_chartEmptyOverlay__zrZ5M{align-items:center;display:flex;inset:0;justify-content:center;padding:var(--p-6);pointer-events:none;position:absolute;z-index:11}.PerformanceChart_chartEmptyOverlay__zrZ5M a{pointer-events:auto}.PerformanceChart_performanceLoadingText__Jwxg3{color:var(--foreground);font-size:16px;font-weight:500}.PerformanceChart_loading__sCsV8{opacity:.5}.PerformanceChart_loaded__a-dM9{opacity:1}.PerformanceChart_chartContainer__qXeA8{margin-left:calc(var(--page-x-padding)*-1 + 26px);max-width:calc(100% + 60px);transition:opacity .3s ease-out;width:calc(100% + 60px)}.PerformanceChart_chartContainer__qXeA8 [data-slot=skeleton]{filter:opacity(.6);height:100%!important;position:relative;width:100%!important}.PerformanceChart_loaded__a-dM9 .PerformanceChart_chartContainer__qXeA8 [data-slot=skeleton]{opacity:0}.PerformanceChart_chartContainer__qXeA8 svg{overflow:visible}@media (max-width:768px){.PerformanceChart_chartContainer__qXeA8{margin-left:calc(var(--page-x-padding)*-1 + 10px);max-width:calc(100% + 30px);width:calc(100% + 30px)}}.PerformanceChart_isEmpty__Xutg2 .PerformanceChart_chartContainer__qXeA8{opacity:.3;pointer-events:none}.PerformanceChart_isEmpty__Xutg2 .recharts-line-dots{display:none}.PerformanceChart_tableSection__tTV55{--side-margin:calc(var(--page-x-padding)*-1);display:flex;flex-direction:column;gap:var(--p-4);margin:var(--p-6) var(--side-margin) 0 var(--side-margin)}.PerformanceChart_tableWrapper__3uB5y{position:relative}.PerformanceChart_tableContainer__PyPUV{overflow-x:auto;position:relative;width:100%}.PerformanceChart_table__8GI8O{background:var(--card);border-radius:14px;box-shadow:inset 0 0 0 1px var(--border)}.PerformanceChart_table__8GI8O td:first-child,.PerformanceChart_table__8GI8O th:first-child{padding-left:var(--p-10)!important}.PerformanceChart_table__8GI8O td:last-child,.PerformanceChart_table__8GI8O th:last-child{padding-right:0!important}.PerformanceChart_tableCustomDataFooterRow__011Jx td{border-top:1px solid var(--border);text-align:center;vertical-align:middle}.PerformanceChart_tableCustomDataFooterCell__zeEFL:first-child:last-child{padding:0!important;text-align:center}.PerformanceChart_tableCustomDataFooterCell__zeEFL:first-child:last-child button{border-radius:0;height:calc(100% - 2px);width:calc(100% - 2px)}.PerformanceChart_scrollbar__f3WD9{bottom:calc(var(--p-7)*-1 + 2px)!important}.PerformanceChart_forecastCell__vItmM{align-items:center;display:flex;gap:8px}.PerformanceChart_colorCircle__-uXyr{border-radius:10px;flex-shrink:0;height:20px;margin-left:-10px;width:5px}.PerformanceChart_emptyState__UCpW4{color:var(--muted-foreground);display:block;left:0;padding:var(--p-4) var(--p-10);position:absolute;text-align:center;top:calc(50% - 4em);width:100%;z-index:1}.PerformanceChart_performanceLoadingLayer__GmfFi .PerformanceChart_emptyState__UCpW4{color:var(--foreground)}.PerformanceChart_emptyState__UCpW4 a{padding:0 var(--p-1);text-decoration:underline}.PerformanceChart_emptyState__UCpW4 a:hover{color:var(--sb-cyan-400)}";
+var S = {"root":"PerformanceChart_root__sda5D","viewTabs":"PerformanceChart_viewTabs__5aHg1","toolbarRow":"PerformanceChart_toolbarRow__SwRJc","toolBarRight":"PerformanceChart_toolBarRight__ODMr4","viewTabsList":"PerformanceChart_viewTabsList__fNv-x","perHorizonChartWrap":"PerformanceChart_perHorizonChartWrap__j15JS","perHorizonChartWrapLoading":"PerformanceChart_perHorizonChartWrapLoading__1ZGCz","chartContainer":"PerformanceChart_chartContainer__qXeA8","performanceLoadingLayer":"PerformanceChart_performanceLoadingLayer__GmfFi","chartEmptyOverlay":"PerformanceChart_chartEmptyOverlay__zrZ5M","performanceLoadingText":"PerformanceChart_performanceLoadingText__Jwxg3","loading":"PerformanceChart_loading__sCsV8","loaded":"PerformanceChart_loaded__a-dM9","isEmpty":"PerformanceChart_isEmpty__Xutg2","tableSection":"PerformanceChart_tableSection__tTV55","tableWrapper":"PerformanceChart_tableWrapper__3uB5y","tableContainer":"PerformanceChart_tableContainer__PyPUV","table":"PerformanceChart_table__8GI8O","tableCustomDataFooterRow":"PerformanceChart_tableCustomDataFooterRow__011Jx","tableCustomDataFooterCell":"PerformanceChart_tableCustomDataFooterCell__zeEFL","scrollbar":"PerformanceChart_scrollbar__f3WD9","forecastCell":"PerformanceChart_forecastCell__vItmM","colorCircle":"PerformanceChart_colorCircle__-uXyr","emptyState":"PerformanceChart_emptyState__UCpW4"};
+styleInject(css_248z);
+
+export { S as default };

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

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useMemo, useRef } from 'react';
+import { Button } from '../../ui/Button/Button.js';
+import { FORECAST_LINE_COLORS } from '../../ui/ChartAreaInteractive/ChartLines.js';
+import '../../ui/Page/AppShell/AppShell.js';
+import 'classnames';
+import 'react-router-dom';
+import '../../ui/Sidebar/Sidebar.js';
+import { InfoIcon, Pencil, TableIcon } from 'lucide-react';
+import '../../ui/Page/Breadcrumbs/Breadcrumbs.styl.js';
+import '../../ui/Page/pageContext.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/Tooltip/Tooltip.js';
+import '../../ui/Page/PageHeader/PageHeader.styl.js';
+import '../../ui/Page/PageEmptyCanvas/PageEmptyCanvas.styl.js';
+import '../../ui/Page/PageContent/PageContent.styl.js';
+import '@homecode/ui';
+import '../../ui/Page/PageScroll/PageScroll.styl.js';
+import { PageXScroll } from '../../ui/Page/PageXScroll/PageXScroll.js';
+import '../../ui/Page/PageFooter/PageFooter.styl.js';
+import '@radix-ui/react-tabs';
+import '../../ui/Tabs/Tabs.styl.js';
+import '../../ui/Page/PageTabs/PageTabs.styl.js';
+import '../../ui/Page/PageColumns/PageColumns.styl.js';
+import '../../ui/Page/SectionHeader/SectionHeader.styl.js';
+import { Table, TableHeader, TableRow, TableHead, TableCellValue, TableBody, TableCell } from '../../ui/Table/Table.js';
+import S from './PerformanceChart.styl.js';
+import { calculateAccuracy, formatError, calculateBenefit, formatROI, getForecastModelDisplayName, formatAccuracy, formatBenefit } from './performanceChart.helpers.js';
+
+const DEFAULT_INVESTMENT_COST = 35000; // Investment Cost (IC) - annual cost of solution
+const CUSTOM_PERFORMANCE_ROW_COLOR = 'var(--sb-purple-400)';
+// Component wrapper for table rows with long tap support
+function ModelTableRow({ modelKey, row, }) {
+    const rowRef = useRef(null);
+    return React__default.cloneElement(row, {
+        ref: (el) => {
+            rowRef.current = el;
+            // Call original ref if it exists
+            const originalRef = row.ref;
+            if (typeof originalRef === 'function') {
+                originalRef(el);
+            }
+            else if (originalRef) {
+                originalRef.current = el;
+            }
+        },
+        className: row.props.className,
+    });
+}
+// Calculate color for a model key
+const getModelColor = (key) => {
+    if (key === 'model')
+        return 'var(--sb-cyan-400)';
+    return FORECAST_LINE_COLORS[0];
+};
+function PerformanceTable({ forecastModels, adjustParameters, onAdjustParametersChange, customPerformance = null, onEditCustomPerformance, showAddEditCustomDataButton = false, addEditCustomDataDisabled = false, }) {
+    // Separate Sybilion AI model from drift model
+    const { sybilionModel, driftModel } = useMemo(() => {
+        const sybilion = forecastModels.find(model => model.key === 'model');
+        const drift = forecastModels.find(model => model.key === 'drift');
+        return {
+            sybilionModel: sybilion,
+            driftModel: drift,
+        };
+    }, [forecastModels]);
+    // Calculate table rows for Sybilion AI model
+    const sybilionRow = useMemo(() => {
+        if (!sybilionModel)
+            return null;
+        const accuracy = calculateAccuracy(sybilionModel.mape);
+        const error = formatError(sybilionModel.mae);
+        // Calculate benefit using actual accuracy improvement over baseline (drift)
+        const baselineAccuracy = driftModel
+            ? calculateAccuracy(driftModel.mape)
+            : undefined;
+        const benefit = calculateBenefit(sybilionModel.mae, sybilionModel.mape, adjustParameters, baselineAccuracy);
+        const roi = formatROI(benefit, DEFAULT_INVESTMENT_COST);
+        return {
+            key: sybilionModel.key,
+            forecast: getForecastModelDisplayName(sybilionModel.key),
+            color: getModelColor(sybilionModel.key),
+            accuracy: formatAccuracy(accuracy),
+            error,
+            roi,
+            benefit: formatBenefit(benefit),
+        };
+    }, [sybilionModel, driftModel, adjustParameters, getModelColor]);
+    // Calculate table row for drift model
+    const driftRow = useMemo(() => {
+        if (!driftModel)
+            return null;
+        const accuracy = calculateAccuracy(driftModel.mape);
+        const error = formatError(driftModel.mae);
+        // Baseline model has no improvement, so benefit is 0
+        const benefit = 0;
+        const roi = formatROI(benefit, DEFAULT_INVESTMENT_COST);
+        return {
+            key: driftModel.key,
+            forecast: getForecastModelDisplayName(driftModel.key),
+            color: getModelColor(driftModel.key),
+            accuracy: formatAccuracy(accuracy),
+            error,
+            roi,
+            benefit: formatBenefit(benefit),
+        };
+    }, [driftModel, adjustParameters, getModelColor]);
+    const customRow = useMemo(() => {
+        if (!customPerformance)
+            return null;
+        const accuracy = calculateAccuracy(customPerformance.mape);
+        const error = formatError(customPerformance.mae);
+        const baselineAccuracy = driftModel
+            ? calculateAccuracy(driftModel.mape)
+            : undefined;
+        const benefit = calculateBenefit(customPerformance.mae, customPerformance.mape, adjustParameters, baselineAccuracy);
+        const roi = formatROI(benefit, DEFAULT_INVESTMENT_COST);
+        return {
+            key: 'custom_performance',
+            forecast: customPerformance.label,
+            color: CUSTOM_PERFORMANCE_ROW_COLOR,
+            accuracy: formatAccuracy(accuracy),
+            error,
+            roi,
+            benefit: formatBenefit(benefit),
+        };
+    }, [customPerformance, driftModel, adjustParameters]);
+    const showCustomActionsColumn = Boolean(customRow);
+    return (jsx("div", { className: S.tableSection, children: jsx("div", { className: S.tableWrapper, children: jsx(PageXScroll, { size: "md", fullWidth: true, innerClassName: S.tableContainer, scrollbarClassName: S.scrollbar, children: jsxs(Table, { withPaddings: true, className: S.table, children: [jsx(TableHeader, { children: jsxs(TableRow, { children: [jsx(TableHead, { children: jsxs(TableCellValue, { children: ["Forecast", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "Sybilion AI forecast vs other forecasting methods: MEAN, Seasonal, ARMA, ARIMA, Linear, Theta" })] })] }) }), jsx(TableHead, { children: "Accuracy" }), jsx(TableHead, { children: "Error" }), jsx(TableHead, { children: jsxs(TableCellValue, { children: ["ROI", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "ROI is calculated using default contract annual price." })] })] }) }), jsx(TableHead, { children: jsxs(TableCellValue, { children: ["Benefit p/a", jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: jsx(InfoIcon, { size: 16, style: { cursor: 'help' } }) }) }), jsx(TooltipContent, { side: "top", maxWidth: 300, children: "Annual Benefit of using Sybilion AI forecast compared to alternative forecasting methods. Calculated using default assumptions: Procurement Volume \u20AC100,000,000 \u00B7 Variable Share 50% \u00B7 Controllable Share 60%" })] })] }) }), showCustomActionsColumn && jsx(TableHead, {})] }) }), jsxs(TableBody, { children: [sybilionRow && (jsx(ModelTableRow, { modelKey: sybilionRow.key, row: jsxs(TableRow, { children: [jsx(TableCell, { children: jsxs("div", { className: S.forecastCell, children: [jsx("span", { className: S.colorCircle, style: { backgroundColor: sybilionRow.color } }), sybilionRow.forecast] }) }), jsx(TableCell, { children: sybilionRow.accuracy }), jsx(TableCell, { children: sybilionRow.error }), jsx(TableCell, { children: sybilionRow.roi }), jsx(TableCell, { children: sybilionRow.benefit }), showCustomActionsColumn && jsx(TableCell, {})] }, sybilionRow.key) })), driftRow && (jsx(ModelTableRow, { modelKey: driftRow.key, row: jsxs(TableRow, { children: [jsx(TableCell, { children: jsxs("div", { className: S.forecastCell, children: [jsx("span", { className: S.colorCircle, style: { backgroundColor: driftRow.color } }), driftRow.forecast] }) }), jsx(TableCell, { children: driftRow.accuracy }), jsx(TableCell, { children: driftRow.error }), jsx(TableCell, { children: driftRow.roi }), jsx(TableCell, { children: driftRow.benefit }), showCustomActionsColumn && jsx(TableCell, {})] }, driftRow.key) })), customRow && (jsx(ModelTableRow, { modelKey: customRow.key, row: jsxs(TableRow, { children: [jsx(TableCell, { children: jsxs("div", { className: S.forecastCell, children: [jsx("span", { className: S.colorCircle, style: { backgroundColor: customRow.color } }), customRow.forecast] }) }), jsx(TableCell, { children: customRow.accuracy }), jsx(TableCell, { children: customRow.error }), jsx(TableCell, { children: customRow.roi }), jsx(TableCell, { children: customRow.benefit }), showCustomActionsColumn && (jsx(TableCell, { children: jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx(Button, { type: "button", variant: "ghost", icon: true, "aria-label": "Edit custom performance data", onClick: () => onEditCustomPerformance?.(), children: jsx(Pencil, { size: 16 }) }) }), jsx(TooltipContent, { side: "top", children: "Edit custom performance data" })] }) }))] }, customRow.key) })), showAddEditCustomDataButton && !customPerformance && (jsx(TableRow, { className: S.tableCustomDataFooterRow, children: jsx(TableCell, { colSpan: 5 + (showCustomActionsColumn ? 1 : 0), className: S.tableCustomDataFooterCell, children: jsxs(Button, { type: "button", variant: "ghost", size: "sm", disabled: addEditCustomDataDisabled, onClick: () => onEditCustomPerformance?.(), children: [jsx(TableIcon, { size: 16 }), "Add custom data"] }) }) }))] })] }) }) }) }));
+}
+
+export { PerformanceTable };

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

@@ -0,0 +1,20 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { EyeClosedIcon, EyeIcon } from '@phosphor-icons/react';
+import S from './PerformanceUnderChartLegend.styl.js';
+
+function PerformanceUnderChartLegendRow({ label, lineColor, lineStyle = 'solid', hidden, onToggle, }) {
+    return (jsxs("button", { type: "button", className: S.row, onClick: onToggle, children: [lineStyle === 'solid' ? (jsx("span", { className: S.swatch, style: { background: lineColor }, "aria-hidden": true })) : (jsx("span", { className: cn(S.swatch, S.swatchDashed), style: { color: lineColor }, "aria-hidden": true })), jsx("span", { className: S.label, children: label }), onToggle &&
+                (hidden ? (jsx(EyeClosedIcon, { className: S.eye })) : (jsx(EyeIcon, { className: S.eye })))] }));
+}
+/** Renders rows from tab-agnostic config (labels + toggles supplied by parent). */
+function PerformanceUnderChartLegendFromItems({ items, }) {
+    if (items?.length === 0)
+        return null;
+    return (jsx(PerformanceUnderChartLegend, { children: items.map(item => (jsx(PerformanceUnderChartLegendRow, { label: item.label, lineColor: item.lineColor, lineStyle: item.lineStyle ?? 'solid', hidden: item.hidden, onToggle: item.onToggle }, item.id))) }));
+}
+function PerformanceUnderChartLegend({ children, }) {
+    return jsx("div", { className: S.root, children: children });
+}
+
+export { PerformanceUnderChartLegend, PerformanceUnderChartLegendFromItems, PerformanceUnderChartLegendRow };

package/dist/esm/components/widgets/PerformanceChart/PerformanceUnderChartLegend/PerformanceUnderChartLegend.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)}}.PerformanceUnderChartLegend_root__Yp6dg{align-items:center;display:flex;flex-wrap:wrap;gap:var(--p-4)}.PerformanceUnderChartLegend_row__-OveP{align-items:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--foreground);cursor:pointer;display:inline-flex;font:inherit;gap:var(--p-2);padding:var(--p-1) var(--p-2);transition:opacity .2s ease}.PerformanceUnderChartLegend_row__-OveP:hover{opacity:.85}.PerformanceUnderChartLegend_swatch__uFVYm{border-radius:1px;flex-shrink:0;height:3px;width:16px}.PerformanceUnderChartLegend_swatchDashed__8q43E{background:transparent!important;border:none;border-bottom:2px dashed;border-radius:0;box-sizing:border-box;height:2px;width:16px}.PerformanceUnderChartLegend_label__XYAUN{font-size:var(--text-xs);line-height:var(--line-height-base);white-space:nowrap}.PerformanceUnderChartLegend_eye__gnfSZ{flex-shrink:0;height:14px;opacity:.8;width:14px}";
+var S = {"root":"PerformanceUnderChartLegend_root__Yp6dg","row":"PerformanceUnderChartLegend_row__-OveP","swatch":"PerformanceUnderChartLegend_swatch__uFVYm","swatchDashed":"PerformanceUnderChartLegend_swatchDashed__8q43E","label":"PerformanceUnderChartLegend_label__XYAUN","eye":"PerformanceUnderChartLegend_eye__gnfSZ"};
+styleInject(css_248z);
+
+export { S as default };