@sybilion/uilib 1.0.20

package/src/components/ui/Chart/chart-types.csv

@@ -0,0 +1,33 @@
+Image,widget (element on frontend),type of analysis,Components,Component version,Example payload,Raw file / Dependencies,Versions Raw files,Example File,description
+https://t9015967896.p.clickup-attachments.com/t9015967896/8921e6eb-749d-437c-9e45-4216e64e5883/image.png | https://t9015967896.p.clickup-attachments.com/t9015967896/8e4c1bf4-3d01-48a1-94b5-76ed14ab3e24/image.png,forecast,probabilistic,forecast_probabilistic | ~~historical~~,v1 + v2,{} | {},forecast.json,v1 + v1.1,,only use the forecast_series key on the object
+https://t9015967896.p.clickup-attachments.com/t9015967896/5499aaba-c5e5-45f6-86d8-087dd1b7a4b2/image.png | https://t9015967896.p.clickup-attachments.com/t9015967896/38963a67-1a2c-4474-8aa3-644a80de0165/image.png,forecast,deterministic,forecast_deterministic | ~~historical~~,v1,,forecast.json /backtest.json,v1 + v2,,the bondaries need to be generated based in the backtests mape per horizon based in a evaluation period
+https://t9015967896.p.clickup-attachments.com/t9015967896/0132ad1d-7352-4d76-a1bf-f73e77c5d39e/image.png | https://t9015967896.p.clickup-attachments.com/t9015967896/d9d3e163-cd37-4609-b75f-296a53f0bd42/image.png,forecast (mean trend detection),trend,forecast_trend_mean | ~~historical~~,v1,,change_points.json,v1,,"full mess, required loock into js code and documentate"
+https://t9015967896.p.clickup-attachments.com/t9015967896/d9ff9215-f4a5-4292-bb26-abcbc37319b5/image.png,forecast ???? (multi forecast),????,~~historical~~ | ????,,,,,,
+https://t9015967896.p.clickup-attachments.com/t9015967896/c19698ff-0401-476e-939c-9eea6da65162/image.png,backtest,deterministic,backtest_deterministic | ~~historical~~,v1,,backetest.json,v1 + v2,,is only the forecast_series inside of each period
+https://t9015967896.p.clickup-attachments.com/t9015967896/a7b79c68-58ae-4ae9-b10c-23bf9649dd68/image.png,backtest,probabilistic,backtest_probabilistic | ~~historical~~,v1,,backtests.json,v1,,backtest chart with the full forecast type
+https://t9015967896.p.clickup-attachments.com/t9015967896/40cbd6f9-8c83-4cc5-86c9-bf506233145a/image.png,Backtest Per quantile,probabilistic,backtest_probabilistic | ~~historical~~,v1,,backtests.json,v1,,similar to the rainbow backtest but also have per quantile
+https://t9015967896.p.clickup-attachments.com/t9015967896/e27313d6-18c5-483c-b786-6b5409cab444/image.png,Backtest Metrics per evaluation period (former Summary),probabilistic,backtest_probabilistic_metrics_per_evaluation_period,v1,,backtest_summary.json,v1,,basically a table displaying all the backtests_summary data
+https://t9015967896.p.clickup-attachments.com/t9015967896/543ee043-f1de-415d-bf1e-2fc19249b2a1/image.png,Backtest Metrics per evaluation period (former Summary),deterministic,backtest_deterministic_metrics_per_evaluation_period,v1,,backtest_summary.json,v1 + v2,,basicly a table displaying all the backtests_summary data
+https://t9015967896.p.clickup-attachments.com/t9015967896/00d07e8e-68dc-4ca5-89c5-0108c46b8b59/image.png,model improvement,deterministic,backtest_deterministic_model_improvment,v1,,backtest_summary.json,v1 + v2,,a widget that display a bar with the error of our model compare with a baseline
+https://t9015967896.p.clickup-attachments.com/t9015967896/42c54a0d-75b0-4e61-8f1d-08e4b77639e0/image.png,general widths of mape comparison,deterministic,backtest_deterministic_model_comparison,v1,,backtest_summary.json,v1 + v2,,do exactly what is in the title aside of the last one that is the base_lines aside with the mir_model
+https://t9015967896.p.clickup-attachments.com/t9015967896/fb83d9f5-4675-4f27-a00f-3d854b2b8070/image.png,Drivers Details,universal,drivers_details,v1,,drivers_report.json,v2,,table with all the drivers data overall/per horizon
+https://t9015967896.p.clickup-attachments.com/t9015967896/24ac9bd8-f2df-44d0-a3f5-8579d1c6aa5e/image.png,Drivers (former Related drivers),universal,drivers_report,v1,,drivers_report.json,v1 + v2,,Legacy table displaying all the drivers existing
+https://t9015967896.p.clickup-attachments.com/t9015967896/04d3994a-ee04-4a76-bc87-13324704becb/image.png,comparison drivers,universal,drivers_comparison,v1,,drivers_report.json,v1 + v2,,lecay table with a chart displaying all the drivers data normalized
+https://t9015967896.p.clickup-attachments.com/t9015967896/8c760054-f0ba-4499-a9ca-7f0cd720a8e4/image.png,forecast vs base line forecasts,deterministic,forecast_deterministic_model_comparison | ~~/historical~~,v1,,forecast.json /bl_forecast.json,v1 + v2 | v1,,plots together with the forecast of mir_model the baselines forecast
+https://t9015967896.p.clickup-attachments.com/t9015967896/30d6f286-81fc-4319-943b-8b1de707ca99/image.png,forecast vs base line forecasts,probabilistic,forecast_probabilistic_model_comparison | ~~/historical~~,v1,,forecast.json /bl_forecast.json,v1 + v2 | v1,,plots together with the forecast of mir_model the baselines forecast
+https://t9015967896.p.clickup-attachments.com/t9015967896/c97e27da-2d3f-4d4a-9aa9-29bf9bc706f4/image.png,yearly overlap graph ( to spot seasonality agains the historical data),deterministic / probabilistic,forecast_pointwise | ~~/historical~~,v1,,forecast.json,v1 + v2,,this agregates the historical and the forecast in groups of years to overlap in a way to try to catch seasonality
+https://t9015967896.p.clickup-attachments.com/t9015967896/2060d209-fc8c-4a68-a8d1-1b9f4bf4e166/image.png,forecast with trend indicators (adjusted),deterministic,forecast_deterministic | ~~historical~~ | liner_regression_historical_and_forecast,v1 | v1 | v1,,forecast.json | backtests.json,v1 + v2 | v1 + v2,,basicly is a forecast chart but have two lines thath follow the f(x)= mx+b trying to indicate what is the trend movement of the historical and the forecast
+https://t9015967896.p.clickup-attachments.com/t9015967896/d51771cc-03f6-442f-b1af-71b22449c655/image.png,forecast with trend indicators (not adjusted),deterministic,forecast_deterministic | ~~historical~~ | liner_regression_forecast,v1 | v1,,forecast.json,v1 + v2,,basicly is a forecast chart but have two lines thath follow the f(x)= mx+b trying to indicate what is the trend movement of the historical and the forecast
+https://t9015967896.p.clickup-attachments.com/t9015967896/19e68d01-08dd-4472-8475-75c359826c08/image.png,forecast with trend boundaries,trend,forecast_deterministic | ~~historical~~ | forecast_trend_boundaries,v1 | v1,,forecast.json change_points.json,v1 + v2 | v1,,pick the main trend and plot as a universal boundarie
+https://t9015967896.p.clickup-attachments.com/t9015967896/a8e73acf-c486-4449-ae8c-af8d89075bb0/image.png | https://t9015967896.p.clickup-attachments.com/t9015967896/07889acb-78a2-48c8-8273-71d0f5720daa/image.png,Backtests Trend Mean signal detection with indicators (mean backtests with and without noise),trend,~~historical~~ | backtest_trend_mean_with_indicators | backtest_trend_mean_with_indicators_noise,v1 | v1,,change_points_backtest.json,v1,,plot all the detect change points without noise detections
+https://t9015967896.p.clickup-attachments.com/t9015967896/949e85df-ec6e-4667-9085-5a445d83ceaa/image.png,Trend signal detection,trend,backtest_trend_mean_without_indicators | ~~historical~~,v1,,change_points_backtest.json,v1,,plot all the detect change and color if they are right or wrong
+https://t9015967896.p.clickup-attachments.com/t9015967896/21c50771-da61-4a80-a39c-c0173b72047a/image.png,Forecast Trend mean details,trend,forecast_trend_mean_details,v1,,change_points.json,v1,,display a table with all info
+https://t9015967896.p.clickup-attachments.com/t9015967896/d9f1a68e-8749-4a00-b3d1-02b445c1920b/image.png,Slope Trend,trend,forecast_trend_slope | ~~historical~~,v1,,change_points.json,v1,,pick the main trend and plot as a universal boundarie
+https://t9015967896.p.clickup-attachments.com/t9015967896/5310d4bf-d540-4ac4-8ed8-39e045f61117/image.png | https://t9015967896.p.clickup-attachments.com/t9015967896/fde0d61c-76e7-4beb-92d1-834abe5ece0b/image.png,Backtests Trend Slope signal detection with indicators (slope backtests with and without noise),trend,~~historical~~ | backtest_trend_slope_with_indicators | backtest_trend_slope_with_indicators_noise,v1 | v1,,change_points.json / historical,v1,,"plot all the detect change points without noise detections , plot all the detect change points with noise detections"
+https://t9015967896.p.clickup-attachments.com/t9015967896/48f7c2d0-f9e6-48b6-a9ca-49cc437150fb/image.png,Forecast Trend Slope details,trend,forecast_trend_slope_details,v1,,change_points.json,v1,,display a table with all info
+https://t9015967896.p.clickup-attachments.com/t9015967896/7d838220-0993-4095-914d-ca7578934ff5/image.png,confidence interval,deterministic,backtest_deterministic_confidence_interval | ~~historical~~,v1,,backtest.json,v1 + v2,,get a external area of backtests and a standard deviation area in the midle
+https://t9015967896.p.clickup-attachments.com/t9015967896/48d2107a-9f05-43b6-8f7-bb9030fd3e84/image.png,shame,deterministic,backtest_deterministic_confidence_interval_normalized | ~~historical~~,v1,,backtest.json,v1 + v2,,get a external area of backtests and a standard deviation area in the midle normalized into -100 and 100
+https://t9015967896.p.clickup-attachments.com/t9015967896/4358fd17-8cab-4a9d-af17-5c32a1213526/image.png,model performance,deterministic,backtest_deterministic_model_performance_relative | backtest_deterministic_model_performance_abs,v1,,backtest.json,v1 + v2,,get fadded bars from all the error of the forecast after the seconda horizon and purple opache bars in the front of the first 2 moths
+,,News,Universal,,,,Microservice,,,,
+,,Insights,deterministic / trend / probabilistic,,,,Microservice,,,,
+,,Drivers by category of impact,Universal,,,,Microservice,,,,

package/src/components/ui/Chart/chartForecastVisualization.constants.ts

@@ -0,0 +1,22 @@
+export const FORECAST_COLORS = {
+  historical: {
+    light: '#000000',
+    dark: '#ffffff',
+  },
+  forecast: {
+    light: '#3a0087',
+    dark: '#8b5cf6',
+  },
+  confidence: {
+    light: 'rgba(58, 0, 135, 0.35)',
+    dark: 'rgba(139, 92, 246, 0.35)',
+  },
+  boundary: {
+    positive: '#77d400',
+    negative: '#fc512b',
+    neutral: '#ffae00',
+  },
+} as const;
+
+export const ANIMATION_DURATION = 800;
+export const ANIMATION_BEGIN = 0;

package/src/components/ui/Chart/chartForecastVisualization.types.ts

@@ -0,0 +1,97 @@
+/**
+ * Shared types for Chart primitives (quantile bands, connection points, boundaries).
+ * Keeps Chart/ChartAreaInteractive independent of removed top-level forecast components.
+ */
+
+/** Time series tuple [date, value] */
+export type TimeSeriesPoint = [string, number];
+
+export interface ForecastSeries {
+  [date: string]: {
+    forecast: number;
+    lower_boundary?: {
+      '6m'?: number;
+      '12m'?: number;
+      '24m'?: number;
+      [key: string]: number | undefined;
+    };
+    upper_boundary?: {
+      '6m'?: number;
+      '12m'?: number;
+      '24m'?: number;
+      [key: string]: number | undefined;
+    };
+    quantile_forecast?: {
+      [quantile: string]: number;
+    };
+  };
+}
+
+/** API-style forecast payload keyed by `forecast_series` */
+export interface SeriesForecastData {
+  forecast_series: ForecastSeries;
+  forecast_start?: string;
+  forecast_end?: string;
+  last_valid_data_index?: string;
+}
+
+export interface ChangePointDetection {
+  MeanCPD: {
+    change_points: Array<{
+      sign: number;
+      prev_coef: number[];
+      prev_period_est: TimeSeriesPoint[];
+      next_period_est: TimeSeriesPoint[];
+    }>;
+    cpd_metrics: {
+      sensitivity_threshold: number;
+      fc_metrics: {
+        recall: number;
+      };
+      consistency_metrics: {
+        fc_ignore_noise_class: number;
+        fc_with_noise_class: number;
+      };
+    };
+  };
+  SlopeCPD?: {
+    change_points: Array<{
+      sign: number;
+      prev_coef: number[];
+      prev_period_est: TimeSeriesPoint[];
+    }>;
+    cpd_metrics: {
+      sensitivity_threshold: number;
+    };
+  };
+}
+
+/** Recharts row shape for confidence / boundary layers */
+export interface ForecastVisualizationRow {
+  date: string;
+  historical?: number;
+  forecast?: number;
+  lower_boundary?: number;
+  upper_boundary?: number;
+  [key: string]: string | number | undefined;
+}
+
+export interface QuantileBandConfig {
+  key: string;
+  quantiles: [string, string];
+  opacity: number;
+  color?: string;
+  name: string;
+  strokeWidth?: number;
+  strokeDasharray?: string;
+  strokeOpacity?: number;
+  type?:
+    | 'monotone'
+    | 'linear'
+    | 'step'
+    | 'stepBefore'
+    | 'stepAfter'
+    | 'basis'
+    | 'natural';
+  fillPattern?: 'solid' | 'dots' | 'lines';
+}

package/src/components/ui/Chart/components/ActiveDotsLayer/ActiveDotsLayer.styl

@@ -0,0 +1,16 @@
+.root
+  position absolute
+  inset 0
+  pointer-events none
+  z-index 15
+
+.dot
+  position absolute
+  width var(--p-3)
+  height var(--p-3)
+  border-radius 50%
+  background-color red
+  border 3px solid var(--dot-border-color)
+  transform translate(-50%, -50%)
+  box-shadow 0px 2px 4px rgba(0, 0, 0, 0.2)
+  pointer-events none

package/src/components/ui/Chart/components/ActiveDotsLayer/ActiveDotsLayer.styl.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  dot: string;
+  root: string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Chart/components/ActiveDotsLayer/ActiveDotsLayer.tsx

@@ -0,0 +1,32 @@
+import S from './ActiveDotsLayer.styl';
+
+interface ActiveDot {
+  x: number;
+  y: number;
+  color: string;
+}
+
+interface ActiveDotsLayerProps {
+  data: ActiveDot[];
+  isDarkTheme: boolean;
+}
+
+export function ActiveDotsLayer({ data, isDarkTheme }: ActiveDotsLayerProps) {
+  // if (!data.length) return null;
+
+  return (
+    <div className={S.root}>
+      {data.map((dot, index) => (
+        <div
+          key={`active-dot-${index}`}
+          className={S.dot}
+          style={{
+            left: `${dot.x}px`,
+            top: `${dot.y}px`,
+            backgroundColor: dot.color,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/ui/Chart/components/BaseChartWrapper.styl

@@ -0,0 +1,96 @@
+
+.root
+.chartContainer
+  min-height 100%
+
+.root
+  position relative
+  width 100%
+
+// Separate layers for proper z-index ordering
+.gridLayer
+  position absolute
+  z-index 1
+  pointer-events none
+
+  // Allow axis labels to be visible
+  :global
+    .recharts-cartesian-axis
+      z-index 1
+      pointer-events auto
+
+.chartLayer
+  position relative
+  inset 0
+  z-index 3
+  pointer-events auto
+
+  // Make the SVG background transparent so grid shows through
+  :global
+    .recharts-surface
+      background transparent
+
+    .recharts-layer
+      pointer-events none
+
+    .recharts-tooltip-wrapper
+      visibility visible !important
+
+// Hide axis labels in main chart layer (already shown in grid layer)
+.invisibleAxis
+  :global
+    .recharts-cartesian-axis-tick
+      visibility hidden
+
+
+// Legend styles
+.legend
+  position absolute
+  top 100%
+  width 100%
+
+.noLegend
+  display block
+
+.hideChartAxesLegend :global(.recharts-cartesian-axis-tick-label)
+  display none !important
+
+.chartLoadingContainer
+  display flex
+  width 100%
+  height var(--chart-height)
+  align-items center
+  justify-content center
+
+.loadingOverlay
+  position absolute
+  inset 0
+  z-index 10
+  height 100%
+  width 100%
+  opacity .5
+  transition opacity 0.1s ease-out
+  pointer-events none
+
+  [data-slot="skeleton"]
+    border-radius var(--p-4) !important
+
+
+  .loaded &
+    opacity 0
+
+.errorContainer
+  display flex
+  align-items center
+  justify-content center
+  min-height 250px
+  color var(--destructive)
+
+.errorMessage
+  color var(--destructive)
+
+.footer
+  display flex
+  align-items center
+  justify-content space-between
+  gap var(--p-2)

package/src/components/ui/Chart/components/BaseChartWrapper.styl.d.ts

@@ -0,0 +1,20 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'chartContainer': string;
+  'chartLayer': string;
+  'chartLoadingContainer': string;
+  'errorContainer': string;
+  'errorMessage': string;
+  'footer': string;
+  'gridLayer': string;
+  'hideChartAxesLegend': string;
+  'invisibleAxis': string;
+  'legend': string;
+  'loaded': string;
+  'loadingOverlay': string;
+  'noLegend': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;