@progress/kendo-react-charts 7.5.0-develop.2 → 7.5.0-develop.21

package/sankey/Sankey.mjs

@@ -6,60 +6,104 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
-import { Sankey as m } from "@progress/kendo-charts";
-import { loadTheme as E } from "./theme-service.mjs";
-import { validatePackage as y, canUseDOM as v } from "@progress/kendo-react-common";
-import { packageMetadata as L } from "../package-metadata.mjs";
-import { sankeyPropTypes as R } from "./propTypes.mjs";
-const b = ["nodeEnter", "nodeLeave", "linkEnter", "linkLeave"], g = (e, o) => {
-  e && (e.unbind(), b.forEach((t) => {
-    o[t] && e.bind(t, o[t]);
+import * as t from "react";
+import { Sankey as w } from "@progress/kendo-charts";
+import { loadTheme as x } from "./theme-service.mjs";
+import { validatePackage as O, canUseDOM as D } from "@progress/kendo-react-common";
+import { packageMetadata as H } from "../package-metadata.mjs";
+import { sankeyPropTypes as I } from "./propTypes.mjs";
+import { TooltipComponent as M, NodeTooltipContent as V, LinkTooltipContent as A } from "./SankeyTooltip.mjs";
+const h = 12, p = {
+  offset: h,
+  visible: !0
+}, F = ["nodeEnter", "nodeLeave", "linkEnter", "linkLeave", "nodeClick", "linkClick"], K = (o, s) => {
+  o && (o.unbind(), F.forEach((r) => {
+    s[r] && o.bind(r, s[r]);
   }));
-}, k = n.forwardRef((e, o) => {
-  y(L);
-  const t = n.useRef(null), r = n.useRef(null), i = n.useRef(null), { data: l, links: s, nodes: f, labels: d } = e;
-  n.useEffect(() => (r.current ? r.current.setOptions({
-    data: l,
-    links: s,
-    nodes: f,
-    labels: d
-  }) : v && t.current && E(t.current.ownerDocument, (a) => {
-    r.current = new m(t.current, {
-      data: l,
-      links: s,
-      nodes: f,
-      labels: d
-    }, a);
-  }), () => {
-    r.current && (r.current.destroy(), r.current = null);
-  }), [l, s, f, d]), n.useImperativeHandle(i, () => ({
+}, N = t.forwardRef((o, s) => {
+  O(H);
+  const r = t.useRef(null), n = t.useRef(null), u = t.useRef(null), { data: f, links: k, nodes: m, labels: y, title: E, legend: v, tooltip: c = p, disableAutoLayout: C } = o, b = t.useRef();
+  b.current = o;
+  const [T, g] = t.useState(null), L = t.useCallback((l) => {
+    const {
+      visible: a,
+      offset: e = h,
+      nodeComponent: d = V,
+      linkComponent: S = A
+    } = { ...p, ...c };
+    if (a) {
+      const P = {
+        event: l,
+        offset: e,
+        Content: l.targetType === "node" ? d : S
+      };
+      g(P);
+    }
+  }, [c]), R = t.useCallback(() => {
+    g(null);
+  }, []), i = t.useCallback((l, a) => {
+    const e = b.current[l];
+    if (e) {
+      const d = {
+        ...a,
+        nativeEvent: a.originalEvent,
+        target: u.current
+      };
+      e.call(void 0, d);
+    }
+  }, []);
+  return t.useEffect(() => {
+    const l = {
+      data: f,
+      links: k,
+      nodes: m,
+      labels: y,
+      title: E,
+      legend: v,
+      disableAutoLayout: C,
+      tooltip: { ...p, ...c }
+    };
+    return n.current ? n.current.setOptions(l) : D && r.current && x(r.current.ownerDocument, (a) => {
+      n.current = new w(r.current, l, a), K(n.current, {
+        nodeEnter: (e) => {
+          i("onNodeEnter", e);
+        },
+        nodeLeave: (e) => {
+          i("onNodeLeave", e);
+        },
+        linkEnter: (e) => {
+          i("onLinkEnter", e);
+        },
+        linkLeave: (e) => {
+          i("onLinkLeave", e);
+        },
+        nodeClick: (e) => {
+          i("onNodeClick", e);
+        },
+        linkClick: (e) => {
+          i("onLinkClick", e);
+        }
+      }), n.current.bind("tooltipShow", L), n.current.bind("tooltipHide", R);
+    }), () => {
+      n.current && (n.current.destroy(), n.current = null);
+    };
+  }, [f, k, m, y, E, v, C, c, R, L, i]), t.useImperativeHandle(u, () => ({
     get element() {
-      return t.current;
+      return r.current;
     },
-    props: e
-  }), []), n.useImperativeHandle(o, () => i.current);
-  const c = n.useCallback((a) => a && ((u) => {
-    Object.defineProperty(u, "target", { get: () => i.current }), u.nativeEvent = u.originalEvent || null, a.call(void 0, u);
-  }), []);
-  return n.useEffect(() => {
-    g(r.current, {
-      nodeEnter: c(e.onNodeEnter),
-      nodeLeave: c(e.onNodeLeave),
-      linkEnter: c(e.onLinkEnter),
-      linkLeave: c(e.onLinkLeave)
-    });
-  }, [e.onNodeEnter, e.onNodeLeave, e.onLinkEnter, e.onLinkLeave]), /* @__PURE__ */ n.createElement(
+    exportVisual: (l) => n.current.exportVisual(l),
+    props: o
+  }), []), t.useImperativeHandle(s, () => u.current), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: t,
-      className: e.className,
-      style: e.style
+      ref: r,
+      className: o.className,
+      style: o.style
     }
-  );
+  ), T && /* @__PURE__ */ t.createElement(M, { ...T }));
 });
-k.propTypes = R;
-k.displayName = "KendoReactSankey";
+N.propTypes = I;
+N.displayName = "KendoReactSankey";
 export {
-  k as Sankey
+  N as Sankey
 };

package/sankey/SankeyTooltip.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),k=require("@progress/kendo-react-common"),v=require("@progress/kendo-svg-icons"),f=require("@progress/kendo-react-intl"),s=require("./messages.js");function x(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,l.get?l:{enumerable:!0,get:()=>t[o]})}}return n.default=t,Object.freeze(n)}const e=x(b),T=t=>{const{Content:n,offset:o,event:{tooltipData:l,dataItem:y,nodeValue:E}}=t,u=e.useRef(null);return e.useEffect(()=>{const i=u.current;if(!l||!i)return;const m={width:i.offsetWidth,height:i.offsetHeight},r={...l.popupOffset},c=l.popupAlign;r.left+=c.horizontal==="left"?o:-1*o,c.horizontal==="right"&&(r.left-=m.width),c.vertical==="bottom"?r.top-=m.height+o:r.top+=o,i.style.left=`${r.left}px`,i.style.top=`${r.top}px`,i.style.visibility=""},[l]),e.createElement("div",{ref:u,style:{visibility:"hidden"},className:"k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"},e.createElement("div",{className:"k-tooltip-content"},e.createElement(n,{dataItem:y,nodeValue:E})))},d=3,C=`0 ${d}px`,g={display:"flex",alignItems:"center"},p=t=>e.createElement("div",{style:{width:15,height:15,backgroundColor:t.color,display:"inline-flex",marginLeft:d}}),a=t=>e.createElement("span",{style:{margin:C}},t.children),h=t=>f.useInternationalization().format(f.useLocalization().toLanguageString(s.tooltipUnitFormat,s.messages[s.tooltipUnitFormat]),[t||0]),I=t=>{const{color:n,label:o}=t.dataItem;return e.createElement("div",{style:g,className:"k-tooltip-content"},e.createElement(p,{color:n}),e.createElement(a,null,o.text),e.createElement(a,null,h(t.nodeValue)))},O=t=>{const{source:n,target:o,value:l}=t.dataItem;return e.createElement("div",{style:g},e.createElement(p,{color:n.color}),e.createElement(a,null,n.label.text),e.createElement(k.IconWrap,{icon:v.arrowRightIcon,name:"arrow-right"}),e.createElement(p,{color:o.color}),e.createElement(a,null,o.label.text),e.createElement(a,null,h(l)))};exports.LinkTooltipContent=O;exports.NodeTooltipContent=I;exports.TooltipComponent=T;

package/sankey/SankeyTooltip.mjs

@@ -0,0 +1,53 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as t from "react";
+import { IconWrap as y } from "@progress/kendo-react-common";
+import { arrowRightIcon as x } from "@progress/kendo-svg-icons";
+import { useInternationalization as v, useLocalization as k } from "@progress/kendo-react-intl";
+import { tooltipUnitFormat as f, messages as b } from "./messages.mjs";
+const L = (e) => {
+  const { Content: l, offset: o, event: { tooltipData: n, dataItem: g, nodeValue: E } } = e, m = t.useRef(null);
+  return t.useEffect(() => {
+    const i = m.current;
+    if (!n || !i)
+      return;
+    const p = { width: i.offsetWidth, height: i.offsetHeight }, r = { ...n.popupOffset }, c = n.popupAlign;
+    r.left += c.horizontal === "left" ? o : -1 * o, c.horizontal === "right" && (r.left -= p.width), c.vertical === "bottom" ? r.top -= p.height + o : r.top += o, i.style.left = `${r.left}px`, i.style.top = `${r.top}px`, i.style.visibility = "";
+  }, [n]), /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      ref: m,
+      style: { visibility: "hidden" },
+      className: "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"
+    },
+    /* @__PURE__ */ t.createElement("div", { className: "k-tooltip-content" }, /* @__PURE__ */ t.createElement(l, { dataItem: g, nodeValue: E }))
+  );
+}, u = 3, I = `0 ${u}px`, d = { display: "flex", alignItems: "center" }, s = (e) => /* @__PURE__ */ t.createElement(
+  "div",
+  {
+    style: {
+      width: 15,
+      height: 15,
+      backgroundColor: e.color,
+      display: "inline-flex",
+      marginLeft: u
+    }
+  }
+), a = (e) => /* @__PURE__ */ t.createElement("span", { style: { margin: I } }, e.children), h = (e) => v().format(k().toLanguageString(f, b[f]), [e || 0]), N = (e) => {
+  const { color: l, label: o } = e.dataItem;
+  return /* @__PURE__ */ t.createElement("div", { style: d, className: "k-tooltip-content" }, /* @__PURE__ */ t.createElement(s, { color: l }), /* @__PURE__ */ t.createElement(a, null, o.text), /* @__PURE__ */ t.createElement(a, null, h(e.nodeValue)));
+}, R = (e) => {
+  const { source: l, target: o, value: n } = e.dataItem;
+  return /* @__PURE__ */ t.createElement("div", { style: d }, /* @__PURE__ */ t.createElement(s, { color: l.color }), /* @__PURE__ */ t.createElement(a, null, l.label.text), /* @__PURE__ */ t.createElement(y, { icon: x, name: "arrow-right" }), /* @__PURE__ */ t.createElement(s, { color: o.color }), /* @__PURE__ */ t.createElement(a, null, o.label.text), /* @__PURE__ */ t.createElement(a, null, h(n)));
+};
+export {
+  R as LinkTooltipContent,
+  N as NodeTooltipContent,
+  L as TooltipComponent
+};

package/sankey/messages.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="sankey.tooltipUnitFormat",o={[t]:"({0} units)"};exports.messages=o;exports.tooltipUnitFormat=t;

package/sankey/messages.mjs

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+const t = "sankey.tooltipUnitFormat", o = {
+  [t]: "({0} units)"
+};
+export {
+  o as messages,
+  t as tooltipUnitFormat
+};

package/sankey/propTypes.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("prop-types"),n=e.exact({left:e.number,top:e.number}),t={left:e.number,right:e.number},s={...t,top:e.number,bottom:e.number},r={visible:e.bool,font:e.string,color:e.string,opacity:e.number,align:e.oneOf(["left","right","center"]),position:e.oneOf(["inside","before","after"]),padding:e.oneOfType([e.number,e.exact(s)]),margin:e.exact(t),border:e.exact({width:e.number,color:e.string,opacity:e.number,dashType:e.string}),offset:n},o={color:e.string,opacity:e.number,offset:n,padding:e.number,width:e.number},i={colorType:e.oneOf(["static","source","target"]),color:e.string,opacity:e.number,highlight:e.exact({opacity:e.number,inactiveOpacity:e.number})},a=e.exact({text:e.string,...r}),c=e.exact({id:e.oneOfType([e.string,e.number]).isRequired,label:a.isRequired,...o}),u=e.exact({sourceId:e.oneOfType([e.string,e.number]).isRequired,targetId:e.oneOfType([e.string,e.number]).isRequired,value:e.number.isRequired,...i}),p={data:e.exact({nodes:e.arrayOf(c.isRequired).isRequired,links:e.arrayOf(u.isRequired).isRequired}).isRequired,links:e.exact(i),nodes:e.exact(o),labels:e.exact(r),className:e.string,style:e.object,onNodeEnter:e.func,onNodeLeave:e.func,onLinkEnter:e.func,onLinkLeave:e.func};exports.sankeyPropTypes=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("prop-types"),r=e.exact({left:e.number,top:e.number}),i={left:e.number,right:e.number},l={...i,top:e.number,bottom:e.number},o=e.oneOfType([e.number,e.exact(l)]),t=o,n=e.exact({width:e.number,color:e.string,opacity:e.number,dashType:e.string}),s={visible:e.bool,font:e.string,color:e.string,opacity:e.number,align:e.oneOf(["left","right","center"]),position:e.oneOf(["inside","before","after"]),padding:t,margin:e.exact(i),border:n,offset:r},a={color:e.string,opacity:e.number,offset:r,padding:e.number,width:e.number},c={colorType:e.oneOf(["static","source","target"]),color:e.string,opacity:e.number,highlight:e.exact({opacity:e.number,inactiveOpacity:e.number})},p=e.exact({text:e.string,...s}),b=e.exact({id:e.oneOfType([e.string,e.number]).isRequired,label:p.isRequired,...a}),u=e.exact({sourceId:e.oneOfType([e.string,e.number]).isRequired,targetId:e.oneOfType([e.string,e.number]).isRequired,value:e.number.isRequired,...c}),d={data:e.exact({nodes:e.arrayOf(b.isRequired).isRequired,links:e.arrayOf(u.isRequired).isRequired}).isRequired,links:e.exact(c),nodes:e.exact(a),labels:e.exact(s),legend:e.exact({align:e.oneOf(["start","center","end"]),background:e.string,border:n,height:e.number,labels:e.object,margin:o,offsetX:e.number,offsetY:e.number,orientation:e.oneOf(["vertical","horizontal"]),padding:t,position:e.oneOf(["top","bottom","left","right","custom"]),reverse:e.bool,visible:e.bool,width:e.number,item:e.object,title:e.object}),title:e.exact({align:e.oneOf(["center","left","right"]),background:e.string,border:n,color:e.string,font:e.string,margin:o,padding:t,position:e.oneOf(["top","bottom"]),text:e.string,visible:e.bool}),tooltip:e.exact({visible:e.bool,offset:e.number,followPointer:e.bool,delay:e.number,linkComponent:e.any,nodeComponent:e.any}),className:e.string,style:e.object,disableAutoLayout:e.bool,onNodeEnter:e.func,onNodeLeave:e.func,onLinkEnter:e.func,onLinkLeave:e.func,onNodeClick:e.func,onLinkClick:e.func};exports.sankeyPropTypes=d;

package/sankey/propTypes.mjs

@@ -7,42 +7,42 @@
  */
 "use client";
 import e from "prop-types";
-const n = e.exact({
+const r = e.exact({
   left: e.number,
   top: e.number
-}), r = {
+}), i = {
   left: e.number,
   right: e.number
-}, s = {
-  ...r,
+}, l = {
+  ...i,
   top: e.number,
   bottom: e.number
-}, t = {
+}, o = e.oneOfType([
+  e.number,
+  e.exact(l)
+]), t = o, n = e.exact({
+  width: e.number,
+  color: e.string,
+  opacity: e.number,
+  dashType: e.string
+}), s = {
   visible: e.bool,
   font: e.string,
   color: e.string,
   opacity: e.number,
   align: e.oneOf(["left", "right", "center"]),
   position: e.oneOf(["inside", "before", "after"]),
-  padding: e.oneOfType([
-    e.number,
-    e.exact(s)
-  ]),
-  margin: e.exact(r),
-  border: e.exact({
-    width: e.number,
-    color: e.string,
-    opacity: e.number,
-    dashType: e.string
-  }),
-  offset: n
-}, o = {
+  padding: t,
+  margin: e.exact(i),
+  border: n,
+  offset: r
+}, a = {
   color: e.string,
   opacity: e.number,
-  offset: n,
+  offset: r,
   padding: e.number,
   width: e.number
-}, i = {
+}, c = {
   colorType: e.oneOf(["static", "source", "target"]),
   color: e.string,
   opacity: e.number,
@@ -50,33 +50,74 @@ const n = e.exact({
     opacity: e.number,
     inactiveOpacity: e.number
   })
-}, a = e.exact({
+}, p = e.exact({
   text: e.string,
-  ...t
-}), c = e.exact({
+  ...s
+}), b = e.exact({
   id: e.oneOfType([e.string, e.number]).isRequired,
-  label: a.isRequired,
-  ...o
-}), p = e.exact({
+  label: p.isRequired,
+  ...a
+}), u = e.exact({
   sourceId: e.oneOfType([e.string, e.number]).isRequired,
   targetId: e.oneOfType([e.string, e.number]).isRequired,
   value: e.number.isRequired,
-  ...i
-}), l = {
+  ...c
+}), f = {
   data: e.exact({
-    nodes: e.arrayOf(c.isRequired).isRequired,
-    links: e.arrayOf(p.isRequired).isRequired
+    nodes: e.arrayOf(b.isRequired).isRequired,
+    links: e.arrayOf(u.isRequired).isRequired
   }).isRequired,
-  links: e.exact(i),
-  nodes: e.exact(o),
-  labels: e.exact(t),
+  links: e.exact(c),
+  nodes: e.exact(a),
+  labels: e.exact(s),
+  legend: e.exact({
+    align: e.oneOf(["start", "center", "end"]),
+    background: e.string,
+    border: n,
+    height: e.number,
+    labels: e.object,
+    margin: o,
+    offsetX: e.number,
+    offsetY: e.number,
+    orientation: e.oneOf(["vertical", "horizontal"]),
+    padding: t,
+    position: e.oneOf(["top", "bottom", "left", "right", "custom"]),
+    reverse: e.bool,
+    visible: e.bool,
+    width: e.number,
+    item: e.object,
+    title: e.object
+  }),
+  title: e.exact({
+    align: e.oneOf(["center", "left", "right"]),
+    background: e.string,
+    border: n,
+    color: e.string,
+    font: e.string,
+    margin: o,
+    padding: t,
+    position: e.oneOf(["top", "bottom"]),
+    text: e.string,
+    visible: e.bool
+  }),
+  tooltip: e.exact({
+    visible: e.bool,
+    offset: e.number,
+    followPointer: e.bool,
+    delay: e.number,
+    linkComponent: e.any,
+    nodeComponent: e.any
+  }),
   className: e.string,
   style: e.object,
+  disableAutoLayout: e.bool,
   onNodeEnter: e.func,
   onNodeLeave: e.func,
   onLinkEnter: e.func,
-  onLinkLeave: e.func
+  onLinkLeave: e.func,
+  onNodeClick: e.func,
+  onLinkClick: e.func
 };
 export {
-  l as sankeyPropTypes
+  f as sankeyPropTypes
 };

package/sankey/theme-service.js

@@ -5,21 +5,25 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=s=>`${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,a=s=>window.getComputedStyle(s).backgroundColor,v=s=>s.toLowerCase().charCodeAt(0)-97,u=s=>{const e=s.match(/series-([a-z])$/);if(e!==null)return v(e[1]);const t=s.split("--series-")[1];return parseInt(t,10)-1},h=30,m=()=>{let s=`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=t=>`${t.fontWeight} ${t.fontSize} ${t.fontFamily}`,d=t=>window.getComputedStyle(t).backgroundColor,v=t=>t.toLowerCase().charCodeAt(0)-97,h=t=>{const e=t.match(/series-([a-z])$/);if(e!==null)return v(e[1]);const s=t.split("--series-")[1];return parseInt(s,10)-1},u=30,m=()=>{let t=`
       <div class="k-var--series-a"></div>
       <div class="k-var--series-b"></div>
       <div class="k-var--series-c"></div>
       <div class="k-var--series-d"></div>
       <div class="k-var--series-e"></div>
       <div class="k-var--series-f"></div>
-`;for(let e=0;e<h;e++)s+=`
-      <div class="k-var--series-${e+1}"></div>`;return s},y=`
+`;for(let e=0;e<u;e++)t+=`
+      <div class="k-var--series-${e+1}"></div>`;return t},k=`
+    <div class="k-var--background"></div>
     <div class="k-var--normal-text-color"></div>
+    <div class="k-var--chart-major-lines"></div>
+
     <div class="k-widget k-chart">
         <div class="k-var--chart-font"></div>
+        <div class="k-var--chart-title-font"></div>
     </div>
     <div class="k-var--series-unset"></div>
     <div class="k-var--series">
       ${m()}
     </div>
-`;class C{constructor(e){this.store=e}setStyle(e,t){const o=e.split(".");let r=this.store;o.forEach((i,c,n)=>{c<n.length-1&&(r=r[i]=r[i]||{})});const l=o.pop();l&&(r[l]=t)}setColors(){this.mapColor("labels.color","normal-text-color")}setFonts(){const e=d(this.queryStyle("chart-font"));this.setStyle("labels.font",e)}setSeriesColors(){const e=this.element;if(!e)return;const t=[].slice.call(e.querySelectorAll(".k-var--series div")),o=a(e.querySelector(".k-var--series-unset")),r=t.reduce((l,i)=>{const c=u(i.className),n=a(i);return n!==o&&(l[c]=n),l},[]);this.setStyle("nodesColors",r)}mapColor(e,t){this.setStyle(e,this.queryStyle(t).backgroundColor)}queryStyle(e){const t=this.element;return window.getComputedStyle(t.querySelector(`.k-var--${e}`))}}const k=(s,e)=>{const t={links:{color:"#757575"},nodesColors:[]},o=new C(t),r=o.element=s.createElement("div");r.style.display="none",r.innerHTML=y,s.body.appendChild(r);try{o.setColors(),o.setFonts(),o.setSeriesColors()}finally{s.body.removeChild(o.element),o.element=null,e(t)}};exports.loadTheme=k;
+`;class y{constructor(e){this.store=e}setStyle(e,s){const o=e.split(".");let r=this.store;o.forEach((i,a,n)=>{a<n.length-1&&(r=r[i]=r[i]||{})});const l=o.pop();l&&(r[l]=s)}setColors(){this.mapColor("labels.color","normal-text-color"),this.mapColor("labels.stroke.color","background"),this.mapColor("links.color","chart-major-lines"),this.mapColor("legend.labels.color","normal-text-color"),this.mapColor("title.color","normal-text-color")}setFonts(){const e=c(this.queryStyle("chart-title-font")),s=c(this.queryStyle("chart-font"));this.setStyle("title.font",e),this.setStyle("labels.font",s),this.setStyle("legend.labels.font",s)}setNodeColors(){const e=this.element;if(!e)return;const s=[].slice.call(e.querySelectorAll(".k-var--series div")),o=d(e.querySelector(".k-var--series-unset")),r=s.reduce((l,i)=>{const a=h(i.className),n=d(i);return n!==o&&(l[a]=n),l},[]);this.setStyle("nodeColors",r)}mapColor(e,s){this.setStyle(e,this.queryStyle(s).backgroundColor)}queryStyle(e){const s=this.element;return window.getComputedStyle(s.querySelector(`.k-var--${e}`))}}const C=(t,e)=>{const s={nodeColors:[]},o=new y(s),r=o.element=t.createElement("div");r.style.display="none",r.innerHTML=k,t.body.appendChild(r);try{o.setColors(),o.setFonts(),o.setNodeColors()}finally{t.body.removeChild(o.element),o.element=null,e(s)}};exports.loadTheme=C;

package/sankey/theme-service.mjs

@@ -6,15 +6,15 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-const d = (s) => `${s.fontWeight} ${s.fontSize} ${s.fontFamily}`, a = (s) => window.getComputedStyle(s).backgroundColor, v = (s) => s.toLowerCase().charCodeAt(0) - 97, u = (s) => {
-  const e = s.match(/series-([a-z])$/);
+const c = (t) => `${t.fontWeight} ${t.fontSize} ${t.fontFamily}`, d = (t) => window.getComputedStyle(t).backgroundColor, v = (t) => t.toLowerCase().charCodeAt(0) - 97, h = (t) => {
+  const e = t.match(/series-([a-z])$/);
   if (e !== null)
     return v(e[1]);
-  const t = s.split("--series-")[1];
-  return parseInt(t, 10) - 1;
+  const s = t.split("--series-")[1];
+  return parseInt(s, 10) - 1;
 };
-const h = () => {
-  let s = `
+const u = () => {
+  let t = `
       <div class="k-var--series-a"></div>
       <div class="k-var--series-b"></div>
       <div class="k-var--series-c"></div>
@@ -23,74 +23,74 @@ const h = () => {
       <div class="k-var--series-f"></div>
 `;
   for (let e = 0; e < 30; e++)
-    s += `
+    t += `
       <div class="k-var--series-${e + 1}"></div>`;
-  return s;
+  return t;
 }, m = `
+    <div class="k-var--background"></div>
     <div class="k-var--normal-text-color"></div>
+    <div class="k-var--chart-major-lines"></div>
+
     <div class="k-widget k-chart">
         <div class="k-var--chart-font"></div>
+        <div class="k-var--chart-title-font"></div>
     </div>
     <div class="k-var--series-unset"></div>
     <div class="k-var--series">
-      ${h()}
+      ${u()}
     </div>
 `;
 class C {
   constructor(e) {
     this.store = e;
   }
-  setStyle(e, t) {
+  setStyle(e, s) {
     const o = e.split(".");
     let r = this.store;
-    o.forEach((i, c, n) => {
-      c < n.length - 1 && (r = r[i] = r[i] || {});
+    o.forEach((i, a, n) => {
+      a < n.length - 1 && (r = r[i] = r[i] || {});
     });
     const l = o.pop();
-    l && (r[l] = t);
+    l && (r[l] = s);
   }
   setColors() {
-    this.mapColor("labels.color", "normal-text-color");
+    this.mapColor("labels.color", "normal-text-color"), this.mapColor("labels.stroke.color", "background"), this.mapColor("links.color", "chart-major-lines"), this.mapColor("legend.labels.color", "normal-text-color"), this.mapColor("title.color", "normal-text-color");
   }
   setFonts() {
-    const e = d(this.queryStyle("chart-font"));
-    this.setStyle("labels.font", e);
+    const e = c(this.queryStyle("chart-title-font")), s = c(this.queryStyle("chart-font"));
+    this.setStyle("title.font", e), this.setStyle("labels.font", s), this.setStyle("legend.labels.font", s);
   }
-  setSeriesColors() {
+  setNodeColors() {
     const e = this.element;
     if (!e)
       return;
-    const t = [].slice.call(e.querySelectorAll(".k-var--series div")), o = a(e.querySelector(".k-var--series-unset")), r = t.reduce(
+    const s = [].slice.call(e.querySelectorAll(".k-var--series div")), o = d(e.querySelector(".k-var--series-unset")), r = s.reduce(
       (l, i) => {
-        const c = u(i.className), n = a(i);
-        return n !== o && (l[c] = n), l;
+        const a = h(i.className), n = d(i);
+        return n !== o && (l[a] = n), l;
       },
       []
       // Will populate the colors in this array
     );
-    this.setStyle("nodesColors", r);
+    this.setStyle("nodeColors", r);
   }
-  mapColor(e, t) {
-    this.setStyle(e, this.queryStyle(t).backgroundColor);
+  mapColor(e, s) {
+    this.setStyle(e, this.queryStyle(s).backgroundColor);
   }
   queryStyle(e) {
-    const t = this.element;
-    return window.getComputedStyle(t.querySelector(`.k-var--${e}`));
+    const s = this.element;
+    return window.getComputedStyle(s.querySelector(`.k-var--${e}`));
   }
 }
-const k = (s, e) => {
-  const t = {
-    // TODO: Move it to themes
-    links: {
-      color: "#757575"
-    },
-    nodesColors: []
-  }, o = new C(t), r = o.element = s.createElement("div");
-  r.style.display = "none", r.innerHTML = m, s.body.appendChild(r);
+const k = (t, e) => {
+  const s = {
+    nodeColors: []
+  }, o = new C(s), r = o.element = t.createElement("div");
+  r.style.display = "none", r.innerHTML = m, t.body.appendChild(r);
   try {
-    o.setColors(), o.setFonts(), o.setSeriesColors();
+    o.setColors(), o.setFonts(), o.setNodeColors();
   } finally {
-    s.body.removeChild(o.element), o.element = null, e(t);
+    t.body.removeChild(o.element), o.element = null, e(s);
   }
 };
 export {

package/sankey/utils.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@progress/kendo-charts"),t=e.createSankeyData;exports.createSankeyData=t;

package/sankey/utils.mjs

@@ -0,0 +1,13 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { createSankeyData as a } from "@progress/kendo-charts";
+const t = a;
+export {
+  t as createSankeyData
+};