@progress/kendo-react-chart-wizard 8.3.0-develop.15 → 8.3.0-develop.16

package/components/panels/ChartAreaPanel.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("react"),c=require("@progress/kendo-react-layout"),x=require("@progress/kendo-react-form"),d=require("../FormFieldSet.js"),g=require("../FormField.js"),s=require("@progress/kendo-react-inputs"),o=require("../../utils.js"),a=require("../../messages.js"),k=require("@progress/kendo-react-intl"),b=require("@progress/kendo-react-animation"),E=l=>{var u;const t=k.useLocalization(),r=l.state,[m,h]=e.useState(!1),C=e.useCallback(n=>{h(!n.expanded)},[]),A=e.useCallback(n=>{l.onStateChange(o.updateState(r,o.ActionTypes.areaMarginLeft,n.target.value))},[r]),f=e.useCallback(n=>{l.onStateChange(o.updateState(r,o.ActionTypes.areaMarginRight,n.target.value))},[r]),M=e.useCallback(n=>{l.onStateChange(o.updateState(r,o.ActionTypes.areaMarginTop,n.target.value))},[r]),p=e.useCallback(n=>{l.onStateChange(o.updateState(r,o.ActionTypes.areaMarginBottom,n.target.value))},[r]),i=r.area.margin,S=e.useCallback(n=>{l.onStateChange(o.updateState(r,o.ActionTypes.areaBackground,n.value))},[r]);return e.createElement(c.ExpansionPanel,{style:{maxWidth:"576px"},title:t.toLanguageString(a.formatChartArea,a.messages.formatChartArea),expanded:m,tabIndex:0,onAction:C},e.createElement(b.Reveal,null,m&&e.createElement(c.ExpansionPanelContent,null,e.createElement(x.FormElement,{onKeyDown:o.stopPropagation},e.createElement(d.FormFieldSet,{legend:t.toLanguageString(a.formatChartAreaMargins,a.messages.formatChartAreaMargins)},e.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},e.createElement(g.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsLeft,a.messages.formatChartAreaMarginsLeft),editorId:"left"},e.createElement(s.NumericTextBox,{id:"left",value:i.left!==void 0?i.left:null,onChange:A,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(g.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsRight,a.messages.formatChartAreaMarginsRight),editorId:"right"},e.createElement(s.NumericTextBox,{id:"right",value:i.right!==void 0?i.right:null,onChange:f,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(g.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsTop,a.messages.formatChartAreaMarginsTop),editorId:"top"},e.createElement(s.NumericTextBox,{id:"top",value:i.top!==void 0?i.top:null,onChange:M,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(g.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsBottom,a.messages.formatChartAreaMarginsBottom),editorId:"bottom"},e.createElement(s.NumericTextBox,{id:"bottom",value:i.bottom!==void 0?i.bottom:null,onChange:p,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})))),e.createElement(d.FormFieldSet,{legend:t.toLanguageString(a.formatChartAreaBackground,a.messages.formatChartAreaBackground)},e.createElement(g.FormField,{labelText:t.toLanguageString(a.formatChartAreaBackgroundColor,a.messages.formatChartAreaBackgroundColor),editorId:"background"},e.createElement(s.ColorPicker,{id:"background",value:((u=r.area)==null?void 0:u.background)||"",onChange:S,view:"gradient",fillMode:"outline"})))))))};exports.ChartAreaPanel=E;

package/components/panels/ChartAreaPanel.mjs

@@ -0,0 +1,200 @@
+/**
+ * @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 a from "react";
+import { ExpansionPanel as k, ExpansionPanelContent as S } from "@progress/kendo-react-layout";
+import { FormElement as b } from "@progress/kendo-react-form";
+import { FormFieldSet as C } from "../FormFieldSet.mjs";
+import { FormField as g } from "../FormField.mjs";
+import { NumericTextBox as u, ColorPicker as v } from "@progress/kendo-react-inputs";
+import { updateState as i, ActionTypes as m, stopPropagation as L } from "../../utils.mjs";
+import { formatChartArea as B, messages as r, formatChartAreaMargins as T, formatChartAreaMarginsLeft as I, formatChartAreaMarginsAuto as c, formatChartAreaMarginsRight as R, formatChartAreaMarginsTop as F, formatChartAreaMarginsBottom as P, formatChartAreaBackground as y, formatChartAreaBackgroundColor as w } from "../../messages.mjs";
+import { useLocalization as z } from "@progress/kendo-react-intl";
+import { Reveal as N } from "@progress/kendo-react-animation";
+const Q = (l) => {
+  var h;
+  const e = z(), t = l.state, [d, s] = a.useState(!1), f = a.useCallback((o) => {
+    s(!o.expanded);
+  }, []), A = a.useCallback(
+    (o) => {
+      l.onStateChange(i(t, m.areaMarginLeft, o.target.value));
+    },
+    [t]
+  ), p = a.useCallback(
+    (o) => {
+      l.onStateChange(i(t, m.areaMarginRight, o.target.value));
+    },
+    [t]
+  ), M = a.useCallback(
+    (o) => {
+      l.onStateChange(i(t, m.areaMarginTop, o.target.value));
+    },
+    [t]
+  ), x = a.useCallback(
+    (o) => {
+      l.onStateChange(i(t, m.areaMarginBottom, o.target.value));
+    },
+    [t]
+  ), n = t.area.margin, E = a.useCallback(
+    (o) => {
+      l.onStateChange(i(t, m.areaBackground, o.value));
+    },
+    [t]
+  );
+  return /* @__PURE__ */ a.createElement(
+    k,
+    {
+      style: { maxWidth: "576px" },
+      title: e.toLanguageString(B, r.formatChartArea),
+      expanded: d,
+      tabIndex: 0,
+      onAction: f
+    },
+    /* @__PURE__ */ a.createElement(N, null, d && /* @__PURE__ */ a.createElement(S, null, /* @__PURE__ */ a.createElement(b, { onKeyDown: L }, /* @__PURE__ */ a.createElement(
+      C,
+      {
+        legend: e.toLanguageString(
+          T,
+          r.formatChartAreaMargins
+        )
+      },
+      /* @__PURE__ */ a.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ a.createElement(
+        g,
+        {
+          labelText: e.toLanguageString(
+            I,
+            r.formatChartAreaMarginsLeft
+          ),
+          editorId: "left"
+        },
+        /* @__PURE__ */ a.createElement(
+          u,
+          {
+            id: "left",
+            value: n.left !== void 0 ? n.left : null,
+            onChange: A,
+            placeholder: e.toLanguageString(
+              c,
+              r.formatChartAreaMarginsAuto
+            ),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )
+      ), /* @__PURE__ */ a.createElement(
+        g,
+        {
+          labelText: e.toLanguageString(
+            R,
+            r.formatChartAreaMarginsRight
+          ),
+          editorId: "right"
+        },
+        /* @__PURE__ */ a.createElement(
+          u,
+          {
+            id: "right",
+            value: n.right !== void 0 ? n.right : null,
+            onChange: p,
+            placeholder: e.toLanguageString(
+              c,
+              r.formatChartAreaMarginsAuto
+            ),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )
+      ), /* @__PURE__ */ a.createElement(
+        g,
+        {
+          labelText: e.toLanguageString(
+            F,
+            r.formatChartAreaMarginsTop
+          ),
+          editorId: "top"
+        },
+        /* @__PURE__ */ a.createElement(
+          u,
+          {
+            id: "top",
+            value: n.top !== void 0 ? n.top : null,
+            onChange: M,
+            placeholder: e.toLanguageString(
+              c,
+              r.formatChartAreaMarginsAuto
+            ),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )
+      ), /* @__PURE__ */ a.createElement(
+        g,
+        {
+          labelText: e.toLanguageString(
+            P,
+            r.formatChartAreaMarginsBottom
+          ),
+          editorId: "bottom"
+        },
+        /* @__PURE__ */ a.createElement(
+          u,
+          {
+            id: "bottom",
+            value: n.bottom !== void 0 ? n.bottom : null,
+            onChange: x,
+            placeholder: e.toLanguageString(
+              c,
+              r.formatChartAreaMarginsAuto
+            ),
+            min: 0,
+            max: 1e3,
+            step: 1,
+            fillMode: "outline"
+          }
+        )
+      ))
+    ), /* @__PURE__ */ a.createElement(
+      C,
+      {
+        legend: e.toLanguageString(
+          y,
+          r.formatChartAreaBackground
+        )
+      },
+      /* @__PURE__ */ a.createElement(
+        g,
+        {
+          labelText: e.toLanguageString(
+            w,
+            r.formatChartAreaBackgroundColor
+          ),
+          editorId: "background"
+        },
+        /* @__PURE__ */ a.createElement(
+          v,
+          {
+            id: "background",
+            value: ((h = t.area) == null ? void 0 : h.background) || "",
+            onChange: E,
+            view: "gradient",
+            fillMode: "outline"
+          }
+        )
+      )
+    ))))
+  );
+};
+export {
+  Q as ChartAreaPanel
+};

package/components/panels/ColumnChartPanel.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=require("react"),b=require("@progress/kendo-react-animation"),f=require("@progress/kendo-react-intl"),m=require("@progress/kendo-react-layout"),t=require("../../utils.js"),E=require("../SeriesTypesWrap.js"),l=require("../SeriesTypeButton.js"),o=require("../../messages.js"),u=require("@progress/kendo-svg-icons");function q(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=q(T),x=n=>{const c=f.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:S,isStackNormal:d,isStack100:C}=t.stackState(e),[i,g]=a.useState(!0),k=a.useCallback(r=>{g(!r.expanded)},[]),p=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"column")))},h=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},y=()=>{const r=t.mergeStates(e,t.createState(e.data,"column"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(m.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(o.columnChart,o.messages.columnChart),expanded:i,tabIndex:0,onAction:k},a.createElement(b.Reveal,null,i&&a.createElement(m.ExpansionPanelContent,null,a.createElement(E.SeriesTypesWrap,null,a.createElement(l.SeriesTypeButton,{selected:s==="column"&&S,onClick:p,icon:u.chartColumnClusteredIcon,iconName:"chart-column-clustered"},c.toLanguageString(o.columnChartColumn,o.messages.columnChartColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&d,onClick:h,icon:u.chartColumnStackedIcon,iconName:"chart-column-stacked"},c.toLanguageString(o.columnChartStackedColumn,o.messages.columnChartStackedColumn)),a.createElement(l.SeriesTypeButton,{selected:s==="column"&&C,onClick:y,icon:u.chartColumnStacked100Icon,iconName:"chart-column-stacked100"},c.toLanguageString(o.columnChart100StackedColumn,o.messages.columnChart100StackedColumn))))))};exports.ColumnChartPanel=x;

package/components/panels/ColumnChartPanel.mjs

@@ -0,0 +1,77 @@
+/**
+ * @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 e from "react";
+import { Reveal as f } from "@progress/kendo-react-animation";
+import { useLocalization as y } from "@progress/kendo-react-intl";
+import { ExpansionPanel as T, ExpansionPanelContent as L } from "@progress/kendo-react-layout";
+import { stackState as N, mergeStates as m, createState as r, updateState as i, ActionTypes as C, stackNormal as I, stack100 as A } from "../../utils.mjs";
+import { SeriesTypesWrap as P } from "../SeriesTypesWrap.mjs";
+import { SeriesTypeButton as s } from "../SeriesTypeButton.mjs";
+import { columnChart as b, messages as c, columnChartColumn as w, columnChartStackedColumn as z, columnChart100StackedColumn as R } from "../../messages.mjs";
+import { chartColumnClusteredIcon as W, chartColumnStackedIcon as v, chartColumnStacked100Icon as B } from "@progress/kendo-svg-icons";
+const M = (a) => {
+  const o = y(), t = a.state, l = t.seriesType, { isStackFalse: d, isStackNormal: S, isStack100: h } = N(t), [u, k] = e.useState(!0), p = e.useCallback((n) => {
+    k(!n.expanded);
+  }, []), g = () => {
+    a.onStateChange(m(t, r(t.data, "column")));
+  }, x = () => {
+    const n = m(t, r(t.data, "column"));
+    a.onStateChange(i(n, C.stacked, I));
+  }, E = () => {
+    const n = m(t, r(t.data, "column"));
+    a.onStateChange(i(n, C.stacked, A));
+  };
+  return /* @__PURE__ */ e.createElement(
+    T,
+    {
+      style: { maxWidth: "576px" },
+      title: o.toLanguageString(b, c.columnChart),
+      expanded: u,
+      tabIndex: 0,
+      onAction: p
+    },
+    /* @__PURE__ */ e.createElement(f, null, u && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: l === "column" && d,
+        onClick: g,
+        icon: W,
+        iconName: "chart-column-clustered"
+      },
+      o.toLanguageString(w, c.columnChartColumn)
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: l === "column" && S,
+        onClick: x,
+        icon: v,
+        iconName: "chart-column-stacked"
+      },
+      o.toLanguageString(
+        z,
+        c.columnChartStackedColumn
+      )
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        selected: l === "column" && h,
+        onClick: E,
+        icon: B,
+        iconName: "chart-column-stacked100"
+      },
+      o.toLanguageString(
+        R,
+        c.columnChart100StackedColumn
+      )
+    ))))
+  );
+};
+export {
+  M as ColumnChartPanel
+};

package/components/panels/ConfigurationPanel.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("react"),x=require("@progress/kendo-react-form"),g=require("@progress/kendo-react-layout"),n=require("../../utils.js"),c=require("../FormFieldSet.js"),f=require("@progress/kendo-react-intl"),a=require("../../messages.js"),u=require("@progress/kendo-react-dropdowns"),A=require("../SeriesGrid.js"),y=require("@progress/kendo-react-animation"),E=r=>{const i=f.useLocalization(),t=r.state,s=t.seriesType,[l,d]=e.useState(!0),m=e.useCallback(o=>{d(!o.expanded)},[]),C=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.categoryAxisX,o.target.value))},[t]),S=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.seriesChange,o))},[t]),p=e.useCallback(o=>{r.onStateChange(n.updateState(t,n.ActionTypes.valueAxisY,o.target.value))},[t]);return e.createElement(g.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(a.configuration,a.messages.configuration),expanded:l,tabIndex:0,onAction:m},e.createElement(y.Reveal,null,l&&e.createElement(g.ExpansionPanelContent,null,e.createElement(x.FormElement,{onKeyDown:n.stopPropagation},e.createElement(c.FormFieldSet,{legend:s==="scatter"?i.toLanguageString(a.configurationXAxis,a.messages.configurationXAxis):i.toLanguageString(a.configurationCategoryAxis,a.messages.configurationCategoryAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.categoryField,onChange:C,...n.dropdownlistCommonProps})),n.isCategorical(s)&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationSeries,a.messages.configurationSeries)},e.createElement(A.SeriesGrid,{data:t.series,initialData:t.initialSeries,onChange:S})),s==="pie"&&e.createElement(c.FormFieldSet,{legend:i.toLanguageString(a.configurationValueAxis,a.messages.configurationValueAxis)},e.createElement(u.DropDownList,{data:t.columns||[],value:t.valueField||"",...n.dropdownlistCommonProps,onChange:p}))))))};exports.ConfigurationPanel=E;

package/components/panels/ConfigurationPanel.mjs

@@ -0,0 +1,102 @@
+/**
+ * @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 e from "react";
+import { FormElement as S } from "@progress/kendo-react-form";
+import { ExpansionPanel as E, ExpansionPanelContent as A } from "@progress/kendo-react-layout";
+import { updateState as l, ActionTypes as s, stopPropagation as h, dropdownlistCommonProps as u, isCategorical as y } from "../../utils.mjs";
+import { FormFieldSet as g } from "../FormFieldSet.mjs";
+import { useLocalization as v } from "@progress/kendo-react-intl";
+import { configuration as L, messages as o, configurationXAxis as b, configurationCategoryAxis as F, configurationSeries as P, configurationValueAxis as k } from "../../messages.mjs";
+import { DropDownList as m } from "@progress/kendo-react-dropdowns";
+import { SeriesGrid as D } from "../SeriesGrid.mjs";
+import { Reveal as w } from "@progress/kendo-react-animation";
+const Y = (i) => {
+  const a = v(), t = i.state, r = t.seriesType, [c, f] = e.useState(!0), d = e.useCallback((n) => {
+    f(!n.expanded);
+  }, []), C = e.useCallback(
+    (n) => {
+      i.onStateChange(l(t, s.categoryAxisX, n.target.value));
+    },
+    [t]
+  ), p = e.useCallback(
+    (n) => {
+      i.onStateChange(l(t, s.seriesChange, n));
+    },
+    [t]
+  ), x = e.useCallback(
+    (n) => {
+      i.onStateChange(l(t, s.valueAxisY, n.target.value));
+    },
+    [t]
+  );
+  return /* @__PURE__ */ e.createElement(
+    E,
+    {
+      style: { maxWidth: "576px" },
+      title: a.toLanguageString(L, o.configuration),
+      expanded: c,
+      tabIndex: 0,
+      onAction: d
+    },
+    /* @__PURE__ */ e.createElement(w, null, c && /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement(S, { onKeyDown: h }, /* @__PURE__ */ e.createElement(
+      g,
+      {
+        legend: r === "scatter" ? a.toLanguageString(b, o.configurationXAxis) : a.toLanguageString(
+          F,
+          o.configurationCategoryAxis
+        )
+      },
+      /* @__PURE__ */ e.createElement(
+        m,
+        {
+          data: t.columns || [],
+          value: t.categoryField,
+          onChange: C,
+          ...u
+        }
+      )
+    ), y(r) && /* @__PURE__ */ e.createElement(
+      g,
+      {
+        legend: a.toLanguageString(
+          P,
+          o.configurationSeries
+        )
+      },
+      /* @__PURE__ */ e.createElement(
+        D,
+        {
+          data: t.series,
+          initialData: t.initialSeries,
+          onChange: p
+        }
+      )
+    ), r === "pie" && /* @__PURE__ */ e.createElement(
+      g,
+      {
+        legend: a.toLanguageString(
+          k,
+          o.configurationValueAxis
+        )
+      },
+      /* @__PURE__ */ e.createElement(
+        m,
+        {
+          data: t.columns || [],
+          value: t.valueField || "",
+          ...u,
+          onChange: x
+        }
+      )
+    ))))
+  );
+};
+export {
+  Y as ConfigurationPanel
+};

package/components/panels/LegendPanel.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 o=require("react"),C=require("@progress/kendo-react-layout"),w=require("@progress/kendo-react-form"),R=require("@progress/kendo-react-labels"),r=require("../FormField.js"),m=require("@progress/kendo-react-dropdowns"),P=require("@progress/kendo-react-inputs"),T=require("@progress/kendo-react-intl"),t=require("../../messages.js"),e=require("../../utils.js"),q=require("@progress/kendo-react-animation"),A=s=>{var L,f,S,b,p,h,v;const i=T.useLocalization(),l=s.state,[c,F]=o.useState(!1),x=o.useCallback(n=>{F(!n.expanded)},[]),u=[{value:"top",text:i.toLanguageString(t.formatLegendPositionTop,t.messages.formatLegendPositionTop)},{value:"bottom",text:i.toLanguageString(t.formatLegendPositionBottom,t.messages.formatLegendPositionBottom)},{value:"left",text:i.toLanguageString(t.formatLegendPositionLeft,t.messages.formatLegendPositionLeft)},{value:"right",text:i.toLanguageString(t.formatLegendPositionRight,t.messages.formatLegendPositionRight)}],E=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendVisible,n.value))},k=n=>{const a=n.target.value||e.nullItem;e.ensureValue(a)&&s.onStateChange(e.updateState(l,e.ActionTypes.legendFontSize,a.value))},y=n=>{const a=n.target.value||e.nullItem;s.onStateChange(e.updateState(l,e.ActionTypes.legendFontName,a.value))},I=n=>{s.onStateChange(e.updateState(l,e.ActionTypes.legendColor,n.value))},z=n=>{const a=n.target.value;s.onStateChange(e.updateState(l,e.ActionTypes.legendPosition,a.value))};return o.createElement(C.ExpansionPanel,{style:{maxWidth:"576px"},title:i.toLanguageString(t.formatLegend,t.messages.formatLegend),expanded:c,tabIndex:0,onAction:x},o.createElement(q.Reveal,null,c&&o.createElement(C.ExpansionPanelContent,null,o.createElement(w.FormElement,{onKeyDown:e.stopPropagation},o.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},o.createElement(R.Label,{editorId:"show-legend"},i.toLanguageString(t.formatLegendShowLegend,t.messages.formatLegendShowLegend)),o.createElement(P.Switch,{id:"show-legend",checked:(L=l.legend)==null?void 0:L.visible,onChange:E}),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendLabelsFont",labelText:i.toLanguageString(t.formatLegendFont,t.messages.formatLegendFont)},o.createElement(m.ComboBox,{id:"legendLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendFontPlaceholder,t.messages.formatLegendFontPlaceholder),value:e.fontNames.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.name)})||e.nullItem,onChange:y,itemRender:e.itemRender,disabled:((f=l.legend)==null?void 0:f.visible)===!1,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsSize",labelText:i.toLanguageString(t.formatLegendSize,t.messages.formatLegendSize)},o.createElement(m.ComboBox,{id:"legendLabelsSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:i.toLanguageString(t.formatLegendSizePlaceholder,t.messages.formatLegendSizePlaceholder),value:e.fontSizes.find(n=>{var a,d,g;return n.value===((g=e.parseFont(((d=(a=l.legend)==null?void 0:a.labels)==null?void 0:d.font)||""))==null?void 0:g.size)})||e.nullItem,onChange:k,disabled:((S=l.legend)==null?void 0:S.visible)===!1,allowCustom:!0,...e.dropdownlistCommonProps})),o.createElement(r.FormField,{editorId:"legendLabelsColor",labelText:i.toLanguageString(t.formatLegendColor,t.messages.formatLegendColor)},o.createElement(P.ColorPicker,{id:"legendLabelsColor",value:((p=(b=l.legend)==null?void 0:b.labels)==null?void 0:p.color)||"",onChange:I,disabled:((h=l.legend)==null?void 0:h.visible)===!1,view:"gradient",fillMode:"outline"})),o.createElement(r.FormField,{className:"k-col-span-2",editorId:"legendPosition",labelText:i.toLanguageString(t.formatLegendPosition,t.messages.formatLegendPosition)},o.createElement(m.DropDownList,{id:"legendPosition",data:u,textField:"text",dataItemKey:"value",value:u.find(n=>{var a;return n.value===((a=l.legend)==null?void 0:a.position)}),onChange:z,disabled:((v=l.legend)==null?void 0:v.visible)===!1,...e.dropdownlistCommonProps})))))))};exports.LegendPanel=A;

package/components/panels/LegendPanel.mjs

@@ -0,0 +1,190 @@
+/**
+ * @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 t from "react";
+import { ExpansionPanel as K, ExpansionPanelContent as A } from "@progress/kendo-react-layout";
+import { FormElement as B } from "@progress/kendo-react-form";
+import { Label as D } from "@progress/kendo-react-labels";
+import { FormField as s } from "../FormField.mjs";
+import { ComboBox as P, DropDownList as V } from "@progress/kendo-react-dropdowns";
+import { Switch as _, ColorPicker as M } from "@progress/kendo-react-inputs";
+import { useLocalization as W } from "@progress/kendo-react-intl";
+import { formatLegendPositionTop as j, messages as l, formatLegendPositionBottom as q, formatLegendPositionLeft as G, formatLegendPositionRight as H, formatLegend as J, formatLegendShowLegend as O, formatLegendFont as Q, formatLegendFontPlaceholder as U, formatLegendSize as X, formatLegendSizePlaceholder as Y, formatLegendColor as Z, formatLegendPosition as $ } from "../../messages.mjs";
+import { stopPropagation as ee, fontNames as E, parseFont as F, nullItem as L, itemRender as te, dropdownlistCommonProps as f, fontSizes as z, updateState as r, ActionTypes as m, ensureValue as ne } from "../../utils.mjs";
+import { Reveal as oe } from "@progress/kendo-react-animation";
+const ue = (i) => {
+  var S, h, v, b, p, C, x;
+  const a = W(), o = i.state, [c, w] = t.useState(!1), I = t.useCallback((e) => {
+    w(!e.expanded);
+  }, []), u = [
+    {
+      value: "top",
+      text: a.toLanguageString(j, l.formatLegendPositionTop)
+    },
+    {
+      value: "bottom",
+      text: a.toLanguageString(q, l.formatLegendPositionBottom)
+    },
+    {
+      value: "left",
+      text: a.toLanguageString(G, l.formatLegendPositionLeft)
+    },
+    {
+      value: "right",
+      text: a.toLanguageString(H, l.formatLegendPositionRight)
+    }
+  ], k = (e) => {
+    i.onStateChange(r(o, m.legendVisible, e.value));
+  }, y = (e) => {
+    const n = e.target.value || L;
+    ne(n) && i.onStateChange(r(o, m.legendFontSize, n.value));
+  }, N = (e) => {
+    const n = e.target.value || L;
+    i.onStateChange(r(o, m.legendFontName, n.value));
+  }, T = (e) => {
+    i.onStateChange(r(o, m.legendColor, e.value));
+  }, R = (e) => {
+    const n = e.target.value;
+    i.onStateChange(r(o, m.legendPosition, n.value));
+  };
+  return /* @__PURE__ */ t.createElement(
+    K,
+    {
+      style: { maxWidth: "576px" },
+      title: a.toLanguageString(J, l.formatLegend),
+      expanded: c,
+      tabIndex: 0,
+      onAction: I
+    },
+    /* @__PURE__ */ t.createElement(oe, null, c && /* @__PURE__ */ t.createElement(A, null, /* @__PURE__ */ t.createElement(B, { onKeyDown: ee }, /* @__PURE__ */ t.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ t.createElement(D, { editorId: "show-legend" }, a.toLanguageString(
+      O,
+      l.formatLegendShowLegend
+    )), /* @__PURE__ */ t.createElement(
+      _,
+      {
+        id: "show-legend",
+        checked: (S = o.legend) == null ? void 0 : S.visible,
+        onChange: k
+      }
+    ), /* @__PURE__ */ t.createElement(
+      s,
+      {
+        className: "k-col-span-2",
+        editorId: "legendLabelsFont",
+        labelText: a.toLanguageString(
+          Q,
+          l.formatLegendFont
+        )
+      },
+      /* @__PURE__ */ t.createElement(
+        P,
+        {
+          id: "legendLabelsFont",
+          data: E,
+          textField: "text",
+          dataItemKey: "value",
+          placeholder: a.toLanguageString(
+            U,
+            l.formatLegendFontPlaceholder
+          ),
+          value: E.find(
+            (e) => {
+              var n, d, g;
+              return e.value === ((g = F(((d = (n = o.legend) == null ? void 0 : n.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : g.name);
+            }
+          ) || L,
+          onChange: N,
+          itemRender: te,
+          disabled: ((h = o.legend) == null ? void 0 : h.visible) === !1,
+          ...f
+        }
+      )
+    ), /* @__PURE__ */ t.createElement(
+      s,
+      {
+        editorId: "legendLabelsSize",
+        labelText: a.toLanguageString(
+          X,
+          l.formatLegendSize
+        )
+      },
+      /* @__PURE__ */ t.createElement(
+        P,
+        {
+          id: "legendLabelsSize",
+          data: z,
+          textField: "text",
+          dataItemKey: "value",
+          placeholder: a.toLanguageString(
+            Y,
+            l.formatLegendSizePlaceholder
+          ),
+          value: z.find(
+            (e) => {
+              var n, d, g;
+              return e.value === ((g = F(((d = (n = o.legend) == null ? void 0 : n.labels) == null ? void 0 : d.font) || "")) == null ? void 0 : g.size);
+            }
+          ) || L,
+          onChange: y,
+          disabled: ((v = o.legend) == null ? void 0 : v.visible) === !1,
+          allowCustom: !0,
+          ...f
+        }
+      )
+    ), /* @__PURE__ */ t.createElement(
+      s,
+      {
+        editorId: "legendLabelsColor",
+        labelText: a.toLanguageString(
+          Z,
+          l.formatLegendColor
+        )
+      },
+      /* @__PURE__ */ t.createElement(
+        M,
+        {
+          id: "legendLabelsColor",
+          value: ((p = (b = o.legend) == null ? void 0 : b.labels) == null ? void 0 : p.color) || "",
+          onChange: T,
+          disabled: ((C = o.legend) == null ? void 0 : C.visible) === !1,
+          view: "gradient",
+          fillMode: "outline"
+        }
+      )
+    ), /* @__PURE__ */ t.createElement(
+      s,
+      {
+        className: "k-col-span-2",
+        editorId: "legendPosition",
+        labelText: a.toLanguageString(
+          $,
+          l.formatLegendPosition
+        )
+      },
+      /* @__PURE__ */ t.createElement(
+        V,
+        {
+          id: "legendPosition",
+          data: u,
+          textField: "text",
+          dataItemKey: "value",
+          value: u.find((e) => {
+            var n;
+            return e.value === ((n = o.legend) == null ? void 0 : n.position);
+          }),
+          onChange: R,
+          disabled: ((x = o.legend) == null ? void 0 : x.visible) === !1,
+          ...f
+        }
+      )
+    )))))
+  );
+};
+export {
+  ue as LegendPanel
+};

package/components/panels/LineChartPanel.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 y=require("react"),T=require("@progress/kendo-react-animation"),b=require("@progress/kendo-react-intl"),u=require("@progress/kendo-react-layout"),t=require("../../utils.js"),i=require("../../messages.js"),f=require("../SeriesTypesWrap.js"),o=require("../SeriesTypeButton.js"),l=require("@progress/kendo-svg-icons");function E(n){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(c,e,s.get?s:{enumerable:!0,get:()=>n[e]})}}return c.default=n,Object.freeze(c)}const a=E(y),q=n=>{const c=b.useLocalization(),e=n.state,s=e.seriesType,{isStackFalse:d,isStackNormal:g,isStack100:k}=t.stackState(e),[S,m]=a.useState(!0),p=a.useCallback(r=>{m(!r.expanded)},[]),h=()=>{n.onStateChange(t.mergeStates(e,t.createState(e.data,"line")))},L=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stackNormal))},C=()=>{const r=t.mergeStates(e,t.createState(e.data,"line"));n.onStateChange(t.updateState(r,t.ActionTypes.stacked,t.stack100))};return a.createElement(u.ExpansionPanel,{style:{maxWidth:"576px"},title:c.toLanguageString(i.lineChart,i.messages.lineChart),expanded:S,tabIndex:0,onAction:p},a.createElement(T.Reveal,null,S&&a.createElement(u.ExpansionPanelContent,null,a.createElement(f.SeriesTypesWrap,null,a.createElement(o.SeriesTypeButton,{selected:s==="line"&&d,onClick:h,icon:l.chartLineIcon,iconName:"chart-line"},c.toLanguageString(i.lineChartLine,i.messages.lineChartLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&g,onClick:L,icon:l.chartLineStackedIcon,iconName:"chart-line-stacked"},c.toLanguageString(i.lineChartStackedLine,i.messages.lineChartStackedLine)),a.createElement(o.SeriesTypeButton,{selected:s==="line"&&k,onClick:C,icon:l.chartLineStacked100Icon,iconName:"chart-line-stacked100"},c.toLanguageString(i.lineChart100StackedLine,i.messages.lineChart100StackedLine))))))};exports.LineChartPanel=q;