@hybridcore/ui 1.6.10 → 1.6.12

package/dist/components/charts/chart-wrapper/index.js

@@ -1,47 +1,49 @@
-import { jsxs as i, jsx as r, Fragment as l } from "react/jsx-runtime";
-import { Typography as h, Divider as C } from "@mui/material";
-import { Loading as d } from "../../loading/index.js";
-import { CandlestickChart as c } from "../candlestick/index.js";
+import { jsxs as a, jsx as r, Fragment as l } from "react/jsx-runtime";
+import { Typography as C, Divider as h } from "@mui/material";
+import { Loading as c } from "../../loading/index.js";
+import { CandlestickChart as d } from "../candlestick/index.js";
 import { ColumnLineMix as f } from "../column-line-mix/index.js";
 import { DonutChart as s } from "../donut-chart/index.js";
 import { DrillDownTreemap as u } from "../drill-down-treemap/index.js";
 import { DrillDownVoronoiTreemap as D } from "../drill-down-voronoi-treemap/index.js";
-import { Heatmap as L } from "../heatmap/index.js";
-import { LineChart as g } from "../line/index.js";
-import { LogaritmicScale as x } from "../logaritmic-scale/index.js";
-import { MultipleValueAxes as k } from "../multiple-value-axes/index.js";
-import { NestedPie as S } from "../nested-pie/index.js";
-import { PackedCircles as P } from "../packed-circles/index.js";
-import { PieChart as w } from "../pie-chart/index.js";
-import { StackedAreaRadar as A } from "../stacked-area-radar/index.js";
-import { StackedColumnChart as T } from "../stacked-column-chart/index.js";
-import { XYChart as W } from "../xy-chart/index.js";
-import { useChartWrapperLogic as M } from "./logic.js";
-import { ChartWrapperRoot as V, ChartWrapperHeader as v, ChartWrapperContent as y } from "./styled.js";
-const _ = (a) => {
-  const { title: m, type: o, chartProps: e, loading: p, ownerState: t, sx: n } = M(a);
-  return /* @__PURE__ */ i(V, { ownerState: t, sx: n, children: [
-    /* @__PURE__ */ r(v, { ownerState: t, children: /* @__PURE__ */ r(h, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
-    /* @__PURE__ */ r(C, {}),
-    /* @__PURE__ */ r(y, { ownerState: t, children: p ? /* @__PURE__ */ r(d, { show: !0, position: "absolute" }) : /* @__PURE__ */ i(l, { children: [
-      o === "MultipleValueAxes" && /* @__PURE__ */ r(k, { ...e }),
-      o === "XYChart" && /* @__PURE__ */ r(W, { ...e }),
-      o === "HeatLegend" && /* @__PURE__ */ r(L, { ...e }),
-      o === "PieChart" && /* @__PURE__ */ r(w, { ...e }),
+import { ForecastConeChart as L } from "../forecast-cone/index.js";
+import { Heatmap as g } from "../heatmap/index.js";
+import { LineChart as x } from "../line/index.js";
+import { LogaritmicScale as k } from "../logaritmic-scale/index.js";
+import { MultipleValueAxes as S } from "../multiple-value-axes/index.js";
+import { NestedPie as P } from "../nested-pie/index.js";
+import { PackedCircles as w } from "../packed-circles/index.js";
+import { PieChart as A } from "../pie-chart/index.js";
+import { StackedAreaRadar as T } from "../stacked-area-radar/index.js";
+import { StackedColumnChart as W } from "../stacked-column-chart/index.js";
+import { XYChart as M } from "../xy-chart/index.js";
+import { useChartWrapperLogic as V } from "./logic.js";
+import { ChartWrapperRoot as v, ChartWrapperHeader as y, ChartWrapperContent as F } from "./styled.js";
+const rr = (i) => {
+  const { title: m, type: o, chartProps: e, loading: p, ownerState: t, sx: n } = V(i);
+  return /* @__PURE__ */ a(v, { ownerState: t, sx: n, children: [
+    /* @__PURE__ */ r(y, { ownerState: t, children: /* @__PURE__ */ r(C, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
+    /* @__PURE__ */ r(h, {}),
+    /* @__PURE__ */ r(F, { ownerState: t, children: p ? /* @__PURE__ */ r(c, { show: !0, position: "absolute" }) : /* @__PURE__ */ a(l, { children: [
+      o === "MultipleValueAxes" && /* @__PURE__ */ r(S, { ...e }),
+      o === "XYChart" && /* @__PURE__ */ r(M, { ...e }),
+      o === "HeatLegend" && /* @__PURE__ */ r(g, { ...e }),
+      o === "PieChart" && /* @__PURE__ */ r(A, { ...e }),
       o === "DonutChart" && /* @__PURE__ */ r(s, { ...e }),
-      o === "StackedColumnChart" && /* @__PURE__ */ r(T, { ...e }),
-      o === "StackedAreaRadar" && /* @__PURE__ */ r(A, { ...e }),
-      o === "LineChart" && /* @__PURE__ */ r(g, { ...e }),
-      o === "NestedPie" && /* @__PURE__ */ r(S, { ...e }),
-      o === "SingleLevelPackedCircles" && /* @__PURE__ */ r(P, { ...e }),
-      o === "LogarithmicScale" && /* @__PURE__ */ r(x, { ...e }),
+      o === "StackedColumnChart" && /* @__PURE__ */ r(W, { ...e }),
+      o === "StackedAreaRadar" && /* @__PURE__ */ r(T, { ...e }),
+      o === "LineChart" && /* @__PURE__ */ r(x, { ...e }),
+      o === "NestedPie" && /* @__PURE__ */ r(P, { ...e }),
+      o === "SingleLevelPackedCircles" && /* @__PURE__ */ r(w, { ...e }),
+      o === "LogarithmicScale" && /* @__PURE__ */ r(k, { ...e }),
       o === "ColumnAndLineMix" && /* @__PURE__ */ r(f, { ...e }),
       o === "DrillDownTreemap" && /* @__PURE__ */ r(u, { ...e }),
       o === "DrillDownVoronoiTreemap" && /* @__PURE__ */ r(D, { ...e }),
-      o === "CandlestickChart" && /* @__PURE__ */ r(c, { ...e })
+      o === "CandlestickChart" && /* @__PURE__ */ r(d, { ...e }),
+      o === "ForecastCone" && /* @__PURE__ */ r(L, { ...e })
     ] }) })
   ] });
 };
 export {
-  _ as ChartWrapper
+  rr as ChartWrapper
 };

package/dist/components/charts/forecast-cone/index.js

@@ -0,0 +1,52 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { useForecastConeChartLogic as h } from "./logic.js";
+import { ForecastConeChartRoot as f } from "./styled.js";
+const x = (o) => {
+  const { chartDivRef: r, data: n, chartId: i, loading: t, emptyMessage: s, sx: a, other: c, ownerState: l } = h(o);
+  return /* @__PURE__ */ d(f, { ownerState: l, sx: a, ...c, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: r,
+        id: i,
+        style: { width: "100%", height: "100%" }
+      }
+    ),
+    t && /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "rgba(255,255,255,0.8)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: "1.2rem",
+          color: "#555",
+          zIndex: 10
+        },
+        children: "Loading..."
+      }
+    ),
+    !t && n.length === 0 && /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "#999",
+          fontSize: "1.1rem",
+          zIndex: 10
+        },
+        children: s
+      }
+    )
+  ] });
+};
+export {
+  x as ForecastConeChart
+};

package/dist/components/charts/forecast-cone/logic.js

@@ -0,0 +1,345 @@
+import { R as we, A as Ae } from "../../../AnimatedTheme-ktdO3Bel.js";
+import { useTheme as Fe, useThemeProps as De } from "@mui/material";
+import Ne from "lodash";
+import { useRef as S, useLayoutEffect as ke } from "react";
+import { getTooltipDateFormat as Te, attachCursorTooltip as Oe } from "../_common/tooltip.js";
+import { applyValueFormat as Ce } from "../_common/utils.js";
+import { c as d, a as ie } from "../../../Entity-BJCuhdq_.js";
+import { X as Xe, V as Pe } from "../../../AxisRenderer-BCQoUJw6.js";
+import { X as Ie } from "../../../XYCursor-CVUSpqb9.js";
+import { A as Ye, a as je } from "../../../AxisRendererY-AXWvGU6r.js";
+import { L as Se } from "../../../Legend-CFvQiIfn.js";
+import { L as R } from "../../../LineSeries-D_IL2qGF.js";
+import { G as Le, D as Re } from "../../../GaplessDateAxis-B2g2jgSG.js";
+import { D as $e } from "../../../DateAxis-DEXKps1S.js";
+class Me {
+  constructor(e, s) {
+    Object.defineProperty(this, "_line", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_point", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_context", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: void 0
+    }), Object.defineProperty(this, "_x0", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_x1", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_y0", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_y1", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_t0", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), Object.defineProperty(this, "_tension", {
+      enumerable: !0,
+      configurable: !0,
+      writable: !0,
+      value: 0
+    }), this._context = e, this._tension = s;
+  }
+  areaStart() {
+    this._line = 0;
+  }
+  areaEnd() {
+    this._line = NaN;
+  }
+  lineStart() {
+    this._x0 = this._x1 = this._y0 = this._y1 = this._t0 = NaN, this._point = 0;
+  }
+  lineEnd() {
+    switch (this._point) {
+      case 2:
+        this._context.lineTo(this._x1, this._y1);
+        break;
+      case 3:
+        L(this, this._t0, ue(this, this._t0));
+        break;
+    }
+    (this._line || this._line !== 0 && this._point === 1) && this._context.closePath(), this._line = 1 - this._line;
+  }
+  point(e, s) {
+    let o = NaN;
+    if (e = +e, s = +s, !(e === this._x1 && s === this._y1)) {
+      switch (this._point) {
+        case 0:
+          this._point = 1, this._line ? this._context.lineTo(e, s) : this._context.moveTo(e, s);
+          break;
+        case 1:
+          this._point = 2;
+          break;
+        case 2:
+          this._point = 3, L(this, ue(this, o = le(this, e, s)), o);
+          break;
+        default:
+          L(this, this._t0, o = le(this, e, s));
+          break;
+      }
+      this._x0 = this._x1, this._x1 = e, this._y0 = this._y1, this._y1 = s, this._t0 = o;
+    }
+  }
+}
+function ae(r) {
+  function e(s) {
+    return new Me(s, r);
+  }
+  return e;
+}
+function ne(r) {
+  return r < 0 ? -1 : 1;
+}
+function le(r, e, s) {
+  let o = r._x1 - r._x0, l = e - r._x1, a = (r._y1 - r._y0) / (o || l < 0 && -0), n = (s - r._y1) / (l || o < 0 && -0), p = (a * l + n * o) / (o + l);
+  return (ne(a) + ne(n)) * Math.min(Math.abs(a), Math.abs(n), 0.5 * Math.abs(p)) || 0;
+}
+function ue(r, e) {
+  let s = r._x1 - r._x0;
+  return s ? (3 * (r._y1 - r._y0) / s - e) / 2 : e;
+}
+function L(r, e, s) {
+  let o = r._x0, l = r._y0, a = r._x1, n = r._y1, p = (a - o) / 1.5 * (1 - r._tension);
+  r._context.bezierCurveTo(o + p, l + p * e, a - p, n - p * s, a, n);
+}
+class x extends R {
+  _afterNew() {
+    this._setDefault("curveFactory", ae(this.get("tension", 0.5))), super._afterNew();
+  }
+  _updateChildren() {
+    this.isDirty("tension") && (this.set("curveFactory", ae(this.get("tension", 0.5))), this._valuesDirty = !0), super._updateChildren();
+  }
+}
+Object.defineProperty(x, "className", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: "SmoothedXLineSeries"
+});
+Object.defineProperty(x, "classNames", {
+  enumerable: !0,
+  configurable: !0,
+  writable: !0,
+  value: R.classNames.concat([x.className])
+});
+const Ve = [
+  { lowerField: "low95", upperField: "high95", label: "95% expected move" },
+  { lowerField: "low68", upperField: "high68", label: "68% expected move" }
+], Ee = [0.15, 0.3, 0.45], Ue = 1.1, Be = {
+  millisecond: 1,
+  second: 1e3,
+  minute: 6e4,
+  hour: 36e5,
+  day: 864e5,
+  week: 6048e5,
+  month: 2592e6,
+  year: 31536e6
+}, at = (r) => {
+  const e = Fe(), s = De({ props: r, name: "HCForecastCone" }), {
+    data: o = [],
+    dateField: l = "date",
+    historyField: a = "close",
+    centreField: n = "center",
+    bands: p = Ve,
+    nowValue: N,
+    color: $ = e.palette.warning.main,
+    connectMissingData: k = !0,
+    skipEmptyDates: M = !0,
+    baseInterval: V,
+    chartId: E = "forecast-cone-chart",
+    height: ce = "100%",
+    width: pe = "100%",
+    loading: U = !1,
+    emptyMessage: B = "No data available",
+    sx: he,
+    ...de
+  } = s, u = Ne.orderBy(o, [l]).map((t) => ({ ...t })), y = u.findIndex(
+    (t) => t[n] !== null && t[n] !== void 0
+  );
+  k && y > 0 && (u[y][a] === null || u[y][a] === void 0) && (u[y][a] = u[y][n]);
+  const me = {
+    ...s,
+    height: ce,
+    width: pe,
+    chartId: E,
+    loading: U,
+    emptyMessage: B,
+    baseInterval: V
+  }, H = S(null), G = S(null), T = S(null);
+  return ke(() => {
+    var J, K, Q;
+    if (!T.current) return;
+    const t = we.new(T.current);
+    G.current = t, t.setThemes([Ae.new(t)]), t.interfaceColors.setAll({
+      text: d(e.palette.text.primary),
+      grid: d(e.palette.divider),
+      stroke: d(e.palette.divider)
+    }), Ce(t);
+    const c = t.container.children.push(
+      Xe.new(t, {
+        panX: !0,
+        panY: !1,
+        wheelX: "none",
+        wheelY: "none",
+        maxTooltipDistance: -1,
+        pinchZoomX: !0,
+        layout: t.verticalLayout
+      })
+    );
+    H.current = c, c.set(
+      "cursor",
+      Ie.new(t, { behavior: "none" })
+    ).lineY.set("visible", !1);
+    const w = V ?? { timeUnit: "hour", count: 1 }, fe = M ? Le : $e, _ = c.xAxes.push(
+      fe.new(t, {
+        maxDeviation: 0.1,
+        groupData: !1,
+        baseInterval: w,
+        renderer: Ye.new(t, {})
+      })
+    );
+    (J = _.get("renderer")) == null || J.grid.template.setAll({
+      stroke: d(e.palette.divider),
+      strokeOpacity: 1
+    });
+    const A = c.yAxes.push(
+      Pe.new(t, {
+        renderer: je.new(t, {})
+      })
+    );
+    (K = A.get("renderer")) == null || K.grid.template.setAll({
+      stroke: d(e.palette.divider),
+      strokeOpacity: 1
+    });
+    const F = d($), _e = c.children.push(
+      Se.new(t, { centerX: ie, x: ie })
+    ), O = () => Re.new(t, { dateFormat: "i", dateFields: [l] }), C = [];
+    p.forEach((i, f) => {
+      const h = c.series.push(
+        x.new(t, {
+          name: i.label ?? `Band ${f + 1}`,
+          xAxis: _,
+          yAxis: A,
+          valueYField: i.upperField,
+          openValueYField: i.lowerField,
+          valueXField: l,
+          fill: F,
+          stroke: F
+        })
+      );
+      h.strokes.template.set("strokeOpacity", 0), h.fills.template.setAll({
+        visible: !0,
+        fill: F,
+        fillOpacity: i.fillOpacity ?? Ee[f] ?? 0.2
+      }), h.data.processor = O(), h.data.setAll(u), C.push(h);
+    });
+    let m;
+    n && (m = c.series.push(
+      x.new(t, {
+        name: "Forecast centre",
+        xAxis: _,
+        yAxis: A,
+        valueYField: n,
+        valueXField: l,
+        stroke: d(e.palette.error.main)
+      })
+    ), m.strokes.template.setAll({
+      strokeWidth: 1.5,
+      strokeDasharray: [4, 4]
+    }), m.fills.template.set("visible", !1), m.data.processor = O(), m.data.setAll(u));
+    const D = c.series.push(
+      R.new(t, {
+        name: "History",
+        xAxis: _,
+        yAxis: A,
+        valueYField: a,
+        valueXField: l,
+        // When false, the history line breaks at missing dates (gap > ~1 base
+        // interval) instead of bridging across them.
+        connect: k,
+        autoGapCount: Ue,
+        stroke: d(e.palette.primary.main)
+      })
+    );
+    D.strokes.template.setAll({ strokeWidth: 2 }), D.data.processor = O(), D.data.setAll(u), _e.data.setAll(c.series.values);
+    const W = u.findIndex(
+      (i) => i[n] !== null && i[n] !== void 0
+    ), be = [...u].reverse().find(
+      (i) => i[a] !== null && i[a] !== void 0
+    ), z = W >= 0 ? u[W] : be, Z = N !== void 0 ? new Date(N).getTime() : z ? new Date(z[l]).getTime() : NaN, ve = (Be[w.timeUnit] ?? 0) * w.count / 2, q = Number.isNaN(Z) ? NaN : Z + ve;
+    Number.isNaN(q) || (Q = _.createAxisRange(
+      _.makeDataItem({ value: q })
+    ).get("grid")) == null || Q.setAll({
+      visible: !0,
+      stroke: d(e.palette.text.secondary),
+      strokeOpacity: 0.7,
+      strokeDasharray: [2, 3]
+    });
+    const ye = Te(w);
+    return Oe({
+      root: t,
+      chart: c,
+      theme: e,
+      getText: () => {
+        var re;
+        const i = (g) => g == null ? "—" : t.numberFormatter.format(g), f = D.get("tooltipDataItem"), h = m == null ? void 0 : m.get("tooltipDataItem"), X = h ?? f ?? ((re = C[0]) == null ? void 0 : re.get("tooltipDataItem")), ee = X == null ? void 0 : X.get("valueX"), te = typeof ee == "number" ? t.dateFormatter.format(new Date(ee), ye) : "", b = [], P = f == null ? void 0 : f.get("valueY");
+        P != null && b.push(`History: ${i(P)}`);
+        const I = h == null ? void 0 : h.get("valueY");
+        return I != null && b.push(`Centre: ${i(I)}`), p.forEach((g, se) => {
+          var oe;
+          const v = (oe = C[se]) == null ? void 0 : oe.get("tooltipDataItem"), Y = v == null ? void 0 : v.get("valueY"), j = v == null ? void 0 : v.get("openValueY");
+          if (Y != null && j !== void 0 && j !== null) {
+            const ge = (Y - j) / 2, xe = g.label ?? `Band ${se + 1}`;
+            b.push(`[${F.toCSSHex()}]●[/] ${xe}: ±${i(ge)}`);
+          }
+        }), b.length === 0 ? "" : te ? `[bold]${te}[/]
+${b.join(`
+`)}` : b.join(`
+`);
+      }
+    }), c.appear(1e3, 100), () => {
+      t.dispose(), G.current = null, H.current = null;
+    };
+  }, [
+    e.palette.mode,
+    o,
+    p,
+    $,
+    N,
+    k,
+    M
+  ]), {
+    chartDivRef: T,
+    data: u,
+    chartId: E,
+    loading: U,
+    emptyMessage: B,
+    sx: he,
+    other: de,
+    ownerState: me
+  };
+};
+export {
+  at as useForecastConeChartLogic
+};

package/dist/components/charts/forecast-cone/styled.js

@@ -0,0 +1,12 @@
+import { styled as t } from "@mui/material";
+const i = t("div", {
+  name: "HCForecastCone",
+  slot: "Root"
+})(({ ownerState: o }) => ({
+  position: "relative",
+  width: o.width,
+  height: o.height
+}));
+export {
+  i as ForecastConeChartRoot
+};

package/dist/main.d.ts

@@ -7,6 +7,7 @@ import { Collection } from 'ol';
 import { CommonProps } from '@mui/material/OverridableComponent';
 import { ComponentsOverrides } from '@mui/material/styles';
 import { ComponentsOverrides as ComponentsOverrides_2 } from '@mui/material';
+import { ComponentsVariants } from '@mui/material';
 import { Coordinate } from 'ol/coordinate';
 import { CoordinateFormat } from 'ol/coordinate';
 import { createTheme } from '@mui/material';
@@ -244,7 +245,8 @@ export declare type ChartNameType =
 | "ColumnAndLineMix"
 | "DrillDownTreemap"
 | "DrillDownVoronoiTreemap"
-| "CandlestickChart";
+| "CandlestickChart"
+| "ForecastCone";
 
 export declare interface ChartProps {
     dimensions: ChartDimension[];
@@ -708,6 +710,69 @@ export declare const FlexRow: StyledComponent<BoxOwnProps<Theme> & Omit<Omit<Det
 ref?: ((instance: HTMLDivElement | null) => void | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLDivElement> | null | undefined;
 }, keyof BoxOwnProps<Theme>> & MUIStyledCommonProps<Theme>, {}, {}>;
 
+/** One confidence band: the area filled between its lower and upper bound fields. */
+export declare interface ForecastBand {
+    /** Data key holding this band's lower bound (per row). */
+    lowerField: string;
+    /** Data key holding this band's upper bound (per row). */
+    upperField: string;
+    /** Legend/tooltip label, e.g. "95% expected move". */
+    label?: string;
+    /** Fill opacity; defaults to a decreasing ramp (outer bands lighter). */
+    fillOpacity?: number;
+}
+
+export declare const ForecastConeChart: (inProps: ForecastConeChartProps) => JSX_2.Element;
+
+export declare type ForecastConeChartComponentOverride<Theme = unknown> = {
+    defaultProps?: Partial<ForecastConeChartProps>;
+    styleOverrides?: ComponentsOverrides_2<Theme>["HCForecastCone"];
+    variants?: ComponentsVariants["HCForecastCone"];
+};
+
+export declare interface ForecastConeChartProps {
+    /**
+     * Rows for the whole timeline. History rows carry `historyField`; forecast
+     * rows carry `centreField` and each band's lower/upper fields. A row may be
+     * both (the "now" anchor). All optional so the chart can be spread from the
+     * generic chart props at the wrapper.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data?: any[];
+    /** Timestamp field (epoch ms or ISO). Default "date". */
+    dateField?: string;
+    /** Actual/history value field (null on forecast rows). Default "value". */
+    historyField?: string;
+    /** Forecast centre field (null on history rows). Default "centre". */
+    centreField?: string;
+    /** Bands ordered outer → inner; drawn back-to-front so inner paints on top. */
+    bands?: ForecastBand[];
+    /** Vertical "now" marker; defaults to the last history timestamp. */
+    nowValue?: number | string;
+    /** Band/centre hue (theme token or CSS color). Defaults to a theme token. */
+    color?: string;
+    /**
+     * History line behaviour across missing dates. `true` (default) bridges gaps
+     * (and connects the history end to the cone apex); `false` breaks the line
+     * wherever a history point is missing and drops the bridge to the forecast.
+     * Affects the history series only — the bands/centre are contiguous.
+     */
+    connectMissingData?: boolean;
+    /**
+     * When `true`, the date axis drops intervals with no data (`GaplessDateAxis`),
+     * so only dates with values are shown. Default `false` keeps the continuous
+     * timeline.
+     */
+    skipEmptyDates?: boolean;
+    baseInterval?: BaseInterval;
+    chartId?: string;
+    height?: string | number;
+    width?: string | number;
+    loading?: boolean;
+    emptyMessage?: string;
+    sx?: SxProps<Theme>;
+}
+
 /**
  * Format a raw value for display: numbers get locale grouping + the configured
  * decimals, then the prefix/suffix are wrapped around the result. Non-numeric
@@ -2449,6 +2514,22 @@ declare module "@mui/material/styles" {
 
 
 
+declare module "@mui/material/styles" {
+  interface ComponentNameToClassKey {
+    HCForecastCone: "root";
+  }
+
+  interface ComponentsPropsList {
+    HCForecastCone: Partial<ForecastConeChartProps>;
+  }
+
+  interface Components<Theme = unknown> {
+    HCForecastCone?: ForecastConeChartComponentOverride<Theme>;
+  }
+}
+
+
+
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
     HCHeatmap: "root";

package/dist/main.js

@@ -6,179 +6,181 @@ import { Card as n } from "./components/card/index.js";
 import { CardAlternate as s } from "./components/card-alternate/index.js";
 import { ChartWrapper as C } from "./components/charts/chart-wrapper/index.js";
 import { CandlestickChart as T } from "./components/charts/candlestick/index.js";
-import { ColumnLineMix as u } from "./components/charts/column-line-mix/index.js";
-import { DonutChart as L } from "./components/charts/donut-chart/index.js";
-import { DrillDownTreemap as I } from "./components/charts/drill-down-treemap/index.js";
-import { DrillDownVoronoiTreemap as y } from "./components/charts/drill-down-voronoi-treemap/index.js";
-import { Heatmap as b } from "./components/charts/heatmap/index.js";
-import { HighlightLineChart as V } from "./components/charts/highlighting-line-data/index.js";
-import { LineChart as v } from "./components/charts/line/index.js";
-import { LogaritmicScale as R } from "./components/charts/logaritmic-scale/index.js";
-import { MultipleValueAxes as E } from "./components/charts/multiple-value-axes/index.js";
-import { NestedPie as H } from "./components/charts/nested-pie/index.js";
-import { PackedCircles as W } from "./components/charts/packed-circles/index.js";
-import { PieChart as O } from "./components/charts/pie-chart/index.js";
-import { StackedAreaRadar as N } from "./components/charts/stacked-area-radar/index.js";
-import { StackedColumnChart as z } from "./components/charts/stacked-column-chart/index.js";
-import { XYChart as Y } from "./components/charts/xy-chart/index.js";
-import { formatValue as J, humanizeLabel as K, resolveConditionalStyle as Q } from "./components/charts/_common/format.js";
-import { DEFAULT_VIRIDIS_COOL as $ } from "./components/charts/_common/utils.js";
-import { Button as or } from "./components/button/index.js";
-import { ColorPicker as tr } from "./components/color-picker/index.js";
-import { CollapsibleCard as mr } from "./components/collapsible-card/index.js";
-import { ConditionalWrapper as xr } from "./components/conditional-wrapper/index.js";
-import { alert as ir, confirm as lr } from "./components/confirm/index.js";
-import { HCNotificationProvider as cr } from "./components/notification/index.js";
-import { Container as dr } from "./components/container/index.js";
-import { ContextMenu as Pr } from "./components/context-menu/index.js";
-import { DataGrid as Dr } from "./components/data-grid/index.js";
-import { DataMap as hr } from "./components/data-map/index.js";
-import { DisseminationList as Sr } from "./components/data-security-selectors/dissemination-list/index.js";
-import { SecurityLevel as gr } from "./components/data-security-selectors/security-level/index.js";
-import { A as Ar, D as br } from "./index-e9xTIYWt.js";
-import { DEFAULT_RELATIVE_PRESET_LABELS as Vr } from "./components/date-picker-with-custom-range/logic.js";
-import { DateTimePicker as vr } from "./components/date-time-picker/index.js";
-import { Divider as Rr } from "./components/divider/index.js";
-import { DateRangePicker as Er } from "./components/date-range-picker/index.js";
-import { DocumentViewer as Hr } from "./components/document-viewer/index.js";
-import { DurationSelect as Wr } from "./components/duration-select/index.js";
-import { EditableText as Or } from "./components/editable-text/index.js";
-import { GeometryPicker as Nr } from "./components/geometry-picker/index.js";
-import { Geometry as zr } from "./components/geometry-picker/geometry/index.js";
-import { Parser as Yr } from "./components/geometry-picker/parser/index.js";
-import { HeatMap as Jr } from "./components/heat-map/index.js";
-import { IconButton as Qr } from "./components/icon-button/index.js";
-import { InstanceForm as $r } from "./components/instance-form/index.js";
-import { InstanceHierarchyTable as oo } from "./components/instance-hierarchy-table/index.js";
-import { InstanceTable as to } from "./components/instance-table/index.js";
-import { InstanceVariableList as mo } from "./components/instance-variable-list/index.js";
-import { LinearIndicator as xo } from "./components/linear-indicator/index.js";
-import { Loading as io } from "./components/loading/index.js";
-import { Map as no } from "./components/map/index.js";
-import { MetricCard as so } from "./components/metric-card/index.js";
-import { ObjectProfileCard as Po } from "./components/object-profile-card/index.js";
-import { PaginatedList as Do } from "./components/paginated-list/index.js";
-import { PhoneInput as ho } from "./components/phone-input/index.js";
-import { Placeholder as So } from "./components/placeholder/index.js";
-import { PositionalTooltip as go } from "./components/positional-tooltip/index.js";
-import { PrrMap as Ao } from "./components/prr-map/index.js";
-import { RangeSelector as Fo } from "./components/range-selector/index.js";
-import { RasterGridMap as ko } from "./components/raster-grid-map/index.js";
-import { SearchInput as Mo } from "./components/search-input/index.js";
-import { ScrollDrag as wo } from "./components/scroll-drag/index.js";
-import { SimplePivotTable as Go } from "./components/simple-pivot-table/index.js";
-import { SortableList as Bo } from "./components/sortable-list/index.js";
-import { StatsBox as _o } from "./components/stats-box/index.js";
-import { StaticText as Uo } from "./components/static-text/index.js";
-import { Tabs as jo } from "./components/tabs/index.js";
-import { TextOverflow as Xo } from "./components/text-overflow/index.js";
-import { TemplateFilters as qo } from "./components/template-filters/index.js";
-import { TemplateForm as Ko } from "./components/template-form/index.js";
-import { TemplatePropertyFilters as Zo } from "./components/template-property-filters/index.js";
-import { Property as re } from "./components/template-property-filters/property.js";
-import { TimelineWidget as ee } from "./components/timeline/index.js";
-import { ToggleViewButton as pe } from "./components/toggle-view-button/index.js";
-import { TreeSelect as ae } from "./components/tree-select/index.js";
-import { TreeViewFilter as fe } from "./components/treeview-filter/index.js";
-import { Uploader as le } from "./components/uploader/index.js";
-import { VisuallyHiddenInput as ce } from "./components/visually-hidden-input/styled.js";
-import { Widget as de } from "./components/widget/styled.js";
-import { FlexCol as Pe } from "./components/flex-col/index.js";
-import { FlexRow as De } from "./components/flex-row/index.js";
-import { notify as he, removeNotification as Le } from "./components/notification/store.js";
+import { ForecastConeChart as h } from "./components/charts/forecast-cone/index.js";
+import { ColumnLineMix as L } from "./components/charts/column-line-mix/index.js";
+import { DonutChart as I } from "./components/charts/donut-chart/index.js";
+import { DrillDownTreemap as y } from "./components/charts/drill-down-treemap/index.js";
+import { DrillDownVoronoiTreemap as F } from "./components/charts/drill-down-voronoi-treemap/index.js";
+import { Heatmap as V } from "./components/charts/heatmap/index.js";
+import { HighlightLineChart as v } from "./components/charts/highlighting-line-data/index.js";
+import { LineChart as R } from "./components/charts/line/index.js";
+import { LogaritmicScale as E } from "./components/charts/logaritmic-scale/index.js";
+import { MultipleValueAxes as H } from "./components/charts/multiple-value-axes/index.js";
+import { NestedPie as W } from "./components/charts/nested-pie/index.js";
+import { PackedCircles as O } from "./components/charts/packed-circles/index.js";
+import { PieChart as N } from "./components/charts/pie-chart/index.js";
+import { StackedAreaRadar as z } from "./components/charts/stacked-area-radar/index.js";
+import { StackedColumnChart as Y } from "./components/charts/stacked-column-chart/index.js";
+import { XYChart as J } from "./components/charts/xy-chart/index.js";
+import { formatValue as Q, humanizeLabel as Z, resolveConditionalStyle as $ } from "./components/charts/_common/format.js";
+import { DEFAULT_VIRIDIS_COOL as or } from "./components/charts/_common/utils.js";
+import { Button as tr } from "./components/button/index.js";
+import { ColorPicker as mr } from "./components/color-picker/index.js";
+import { CollapsibleCard as xr } from "./components/collapsible-card/index.js";
+import { ConditionalWrapper as ir } from "./components/conditional-wrapper/index.js";
+import { alert as nr, confirm as cr } from "./components/confirm/index.js";
+import { HCNotificationProvider as dr } from "./components/notification/index.js";
+import { Container as Pr } from "./components/container/index.js";
+import { ContextMenu as Dr } from "./components/context-menu/index.js";
+import { DataGrid as ur } from "./components/data-grid/index.js";
+import { DataMap as Sr } from "./components/data-map/index.js";
+import { DisseminationList as gr } from "./components/data-security-selectors/dissemination-list/index.js";
+import { SecurityLevel as Ar } from "./components/data-security-selectors/security-level/index.js";
+import { A as br, D as Vr } from "./index-e9xTIYWt.js";
+import { DEFAULT_RELATIVE_PRESET_LABELS as vr } from "./components/date-picker-with-custom-range/logic.js";
+import { DateTimePicker as Rr } from "./components/date-time-picker/index.js";
+import { Divider as Er } from "./components/divider/index.js";
+import { DateRangePicker as Hr } from "./components/date-range-picker/index.js";
+import { DocumentViewer as Wr } from "./components/document-viewer/index.js";
+import { DurationSelect as Or } from "./components/duration-select/index.js";
+import { EditableText as Nr } from "./components/editable-text/index.js";
+import { GeometryPicker as zr } from "./components/geometry-picker/index.js";
+import { Geometry as Yr } from "./components/geometry-picker/geometry/index.js";
+import { Parser as Jr } from "./components/geometry-picker/parser/index.js";
+import { HeatMap as Qr } from "./components/heat-map/index.js";
+import { IconButton as $r } from "./components/icon-button/index.js";
+import { InstanceForm as oo } from "./components/instance-form/index.js";
+import { InstanceHierarchyTable as to } from "./components/instance-hierarchy-table/index.js";
+import { InstanceTable as mo } from "./components/instance-table/index.js";
+import { InstanceVariableList as xo } from "./components/instance-variable-list/index.js";
+import { LinearIndicator as io } from "./components/linear-indicator/index.js";
+import { Loading as no } from "./components/loading/index.js";
+import { Map as so } from "./components/map/index.js";
+import { MetricCard as Po } from "./components/metric-card/index.js";
+import { ObjectProfileCard as Do } from "./components/object-profile-card/index.js";
+import { PaginatedList as uo } from "./components/paginated-list/index.js";
+import { PhoneInput as So } from "./components/phone-input/index.js";
+import { Placeholder as go } from "./components/placeholder/index.js";
+import { PositionalTooltip as Ao } from "./components/positional-tooltip/index.js";
+import { PrrMap as bo } from "./components/prr-map/index.js";
+import { RangeSelector as ko } from "./components/range-selector/index.js";
+import { RasterGridMap as Mo } from "./components/raster-grid-map/index.js";
+import { SearchInput as wo } from "./components/search-input/index.js";
+import { ScrollDrag as Go } from "./components/scroll-drag/index.js";
+import { SimplePivotTable as Bo } from "./components/simple-pivot-table/index.js";
+import { SortableList as _o } from "./components/sortable-list/index.js";
+import { StatsBox as Uo } from "./components/stats-box/index.js";
+import { StaticText as jo } from "./components/static-text/index.js";
+import { Tabs as Xo } from "./components/tabs/index.js";
+import { TextOverflow as qo } from "./components/text-overflow/index.js";
+import { TemplateFilters as Ko } from "./components/template-filters/index.js";
+import { TemplateForm as Zo } from "./components/template-form/index.js";
+import { TemplatePropertyFilters as re } from "./components/template-property-filters/index.js";
+import { Property as ee } from "./components/template-property-filters/property.js";
+import { TimelineWidget as pe } from "./components/timeline/index.js";
+import { ToggleViewButton as ae } from "./components/toggle-view-button/index.js";
+import { TreeSelect as fe } from "./components/tree-select/index.js";
+import { TreeViewFilter as le } from "./components/treeview-filter/index.js";
+import { Uploader as ce } from "./components/uploader/index.js";
+import { VisuallyHiddenInput as de } from "./components/visually-hidden-input/styled.js";
+import { Widget as Pe } from "./components/widget/styled.js";
+import { FlexCol as De } from "./components/flex-col/index.js";
+import { FlexRow as ue } from "./components/flex-row/index.js";
+import { notify as Se, removeNotification as Ie } from "./components/notification/store.js";
 export {
   x as Access,
   i as AccessUtils,
-  Ar as AdapterDayjs,
-  or as Button,
+  br as AdapterDayjs,
+  tr as Button,
   T as CandlestickChart,
   n as Card,
   s as CardAlternate,
   C as ChartWrapper,
-  mr as CollapsibleCard,
-  tr as ColorPicker,
-  u as ColumnLineMix,
-  xr as ConditionalWrapper,
-  dr as Container,
-  Pr as ContextMenu,
-  Vr as DEFAULT_RELATIVE_PRESET_LABELS,
-  $ as DEFAULT_VIRIDIS_COOL,
-  Dr as DataGrid,
-  hr as DataMap,
-  br as DatePickerWithCustomRange,
-  Er as DateRangePicker,
-  vr as DateTimePicker,
-  Sr as DisseminationList,
-  Rr as Divider,
-  Hr as DocumentViewer,
-  L as DonutChart,
-  I as DrillDownTreemap,
-  y as DrillDownVoronoiTreemap,
-  Wr as DurationSelect,
-  Or as EditableText,
-  Pe as FlexCol,
-  De as FlexRow,
-  zr as GeometryDraw,
-  Yr as GeometryParser,
-  Nr as GeometryPicker,
-  cr as HCNotificationProvider,
-  Jr as HeatMap,
-  b as Heatmap,
-  V as HighlightLineChart,
-  Qr as IconButton,
-  $r as InstanceForm,
-  oo as InstanceHierarchyTable,
-  to as InstanceTable,
-  mo as InstanceVariableList,
-  v as LineChart,
-  xo as LinearIndicator,
-  io as Loading,
+  xr as CollapsibleCard,
+  mr as ColorPicker,
+  L as ColumnLineMix,
+  ir as ConditionalWrapper,
+  Pr as Container,
+  Dr as ContextMenu,
+  vr as DEFAULT_RELATIVE_PRESET_LABELS,
+  or as DEFAULT_VIRIDIS_COOL,
+  ur as DataGrid,
+  Sr as DataMap,
+  Vr as DatePickerWithCustomRange,
+  Hr as DateRangePicker,
+  Rr as DateTimePicker,
+  gr as DisseminationList,
+  Er as Divider,
+  Wr as DocumentViewer,
+  I as DonutChart,
+  y as DrillDownTreemap,
+  F as DrillDownVoronoiTreemap,
+  Or as DurationSelect,
+  Nr as EditableText,
+  De as FlexCol,
+  ue as FlexRow,
+  h as ForecastConeChart,
+  Yr as GeometryDraw,
+  Jr as GeometryParser,
+  zr as GeometryPicker,
+  dr as HCNotificationProvider,
+  Qr as HeatMap,
+  V as Heatmap,
+  v as HighlightLineChart,
+  $r as IconButton,
+  oo as InstanceForm,
+  to as InstanceHierarchyTable,
+  mo as InstanceTable,
+  xo as InstanceVariableList,
+  R as LineChart,
+  io as LinearIndicator,
+  no as Loading,
   m as LocalizationProvider,
-  R as LogaritmicScale,
-  no as Map,
-  so as MetricCard,
-  E as MultipleValueAxes,
-  H as NestedPie,
-  Po as ObjectProfileCard,
-  W as PackedCircles,
-  Do as PaginatedList,
-  ho as PhoneInput,
-  O as PieChart,
-  So as Placeholder,
-  go as PositionalTooltip,
-  re as PropertyFilterInput,
-  Ao as PrrMap,
-  Fo as RangeSelector,
-  ko as RasterGridMap,
-  wo as ScrollDrag,
-  Mo as SearchInput,
-  gr as SecurityLevel,
-  Go as SimplePivotTable,
-  Bo as SortableList,
-  N as StackedAreaRadar,
-  z as StackedColumnChart,
-  Uo as StaticText,
-  _o as StatsBox,
-  jo as Tabs,
-  qo as TemplateFilters,
-  Ko as TemplateForm,
-  Zo as TemplatePropertyFilters,
-  Xo as TextOverflow,
+  E as LogaritmicScale,
+  so as Map,
+  Po as MetricCard,
+  H as MultipleValueAxes,
+  W as NestedPie,
+  Do as ObjectProfileCard,
+  O as PackedCircles,
+  uo as PaginatedList,
+  So as PhoneInput,
+  N as PieChart,
+  go as Placeholder,
+  Ao as PositionalTooltip,
+  ee as PropertyFilterInput,
+  bo as PrrMap,
+  ko as RangeSelector,
+  Mo as RasterGridMap,
+  Go as ScrollDrag,
+  wo as SearchInput,
+  Ar as SecurityLevel,
+  Bo as SimplePivotTable,
+  _o as SortableList,
+  z as StackedAreaRadar,
+  Y as StackedColumnChart,
+  jo as StaticText,
+  Uo as StatsBox,
+  Xo as Tabs,
+  Ko as TemplateFilters,
+  Zo as TemplateForm,
+  re as TemplatePropertyFilters,
+  qo as TextOverflow,
   e as ThemeProvider,
-  ee as TimelineWidget,
-  pe as ToggleViewButton,
-  ae as TreeSelect,
-  fe as TreeViewFilter,
-  le as Uploader,
-  ce as VisuallyHiddenInput,
-  de as Widget,
-  Y as XYChart,
-  ir as alert,
-  lr as confirm,
+  pe as TimelineWidget,
+  ae as ToggleViewButton,
+  fe as TreeSelect,
+  le as TreeViewFilter,
+  ce as Uploader,
+  de as VisuallyHiddenInput,
+  Pe as Widget,
+  J as XYChart,
+  nr as alert,
+  cr as confirm,
   t as createTheme,
-  J as formatValue,
-  K as humanizeLabel,
-  he as notify,
-  Le as removeNotification,
-  Q as resolveConditionalStyle
+  Q as formatValue,
+  Z as humanizeLabel,
+  Se as notify,
+  Ie as removeNotification,
+  $ as resolveConditionalStyle
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.6.10",
+  "version": "1.6.12",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",