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

package/components/panels/CategoryAxisPanel.mjs

@@ -0,0 +1,315 @@
+/**
+ * @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 { ExpansionPanel as X, ExpansionPanelContent as _ } from "@progress/kendo-react-layout";
+import { FormElement as D } from "@progress/kendo-react-form";
+import { FormFieldSet as T } from "../FormFieldSet.mjs";
+import { FormField as s } from "../FormField.mjs";
+import { Input as V, ColorPicker as v, NumericTextBox as W, Checkbox as j } from "@progress/kendo-react-inputs";
+import { updateState as g, ActionTypes as c, nullItem as m, ensureValue as F, stopPropagation as q, fontNames as x, itemRender as E, parseFont as C, dropdownlistCommonProps as y, fontSizes as d } from "../../utils.mjs";
+import { formatXAxis as G, messages as r, formatCategoryAxis as H, formatCategoryAxisTitle as J, formatCategoryAxisTitlePlaceholder as Q, formatCategoryAxisTitleFont as U, formatCategoryAxisTitleFontPlaceholder as Y, formatCategoryAxisTitleSize as Z, formatCategoryAxisTitleSizePlaceholder as $, formatCategoryAxisTitleColor as ee, formatCategoryAxisLabels as te, formatCategoryAxisLabelsFont as ae, formatCategoryAxisLabelsFontPlaceholder as oe, formatCategoryAxisLabelsSize as le, formatCategoryAxisLabelsSizePlaceholder as re, formatCategoryAxisLabelsColor as ie, formatCategoryAxisLabelsRotation as ne, formatCategoryAxisLabelsRotationAuto as se, formatCategoryAxisLabelsReverseOrder as ge } from "../../messages.mjs";
+import { useLocalization as ce } from "@progress/kendo-react-intl";
+import { Reveal as me } from "@progress/kendo-react-animation";
+import { ComboBox as A } from "@progress/kendo-react-dropdowns";
+const Te = (n) => {
+  var f, b, L, S, h;
+  const l = ce(), t = n.state, k = t.seriesType, [u, p] = e.useState(!1), z = e.useCallback((a) => {
+    p(!a.expanded);
+  }, []), P = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisTitleText, a.target.value));
+    },
+    [t]
+  ), R = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      F(o) && n.onStateChange(g(t, c.categoryAxisTitleFontSize, o.value));
+    },
+    [t]
+  ), I = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      n.onStateChange(g(t, c.categoryAxisTitleFontName, o.value));
+    },
+    [t]
+  ), N = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisTitleColor, a.value));
+    },
+    [t]
+  ), w = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      F(o) && n.onStateChange(g(t, c.categoryAxisLabelsFontSize, o.value));
+    },
+    [t]
+  ), K = e.useCallback(
+    (a) => {
+      const o = a.target.value || m;
+      n.onStateChange(g(t, c.categoryAxisLabelsFontName, o.value));
+    },
+    [t]
+  ), M = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisLabelsColor, a.value));
+    },
+    [t]
+  ), O = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisLabelsRotation, a.target.value));
+    },
+    [t]
+  ), B = e.useCallback(
+    (a) => {
+      n.onStateChange(g(t, c.categoryAxisReverseOrder, a.value));
+    },
+    [t]
+  );
+  return /* @__PURE__ */ e.createElement(
+    X,
+    {
+      style: { maxWidth: "576px" },
+      title: k === "scatter" ? l.toLanguageString(G, r.formatXAxis) : l.toLanguageString(H, r.formatCategoryAxis),
+      expanded: u,
+      tabIndex: 0,
+      onAction: z
+    },
+    /* @__PURE__ */ e.createElement(me, null, u && /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(D, { onKeyDown: q }, /* @__PURE__ */ e.createElement(
+      T,
+      {
+        legend: l.toLanguageString(
+          J,
+          r.formatCategoryAxisTitle
+        )
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(s, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+        V,
+        {
+          placeholder: l.toLanguageString(
+            Q,
+            r.formatCategoryAxisTitlePlaceholder
+          ),
+          value: ((f = t.categoryAxis[0].title) == null ? void 0 : f.text) || "",
+          onChange: P
+        }
+      )), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          className: "k-col-span-2",
+          editorId: "categoryAxisTitleFont",
+          labelText: l.toLanguageString(
+            U,
+            r.formatCategoryAxisTitleFont
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisTitleFont",
+            data: x,
+            textField: "text",
+            dataItemKey: "value",
+            itemRender: E,
+            placeholder: l.toLanguageString(
+              Y,
+              r.formatCategoryAxisTitleFontPlaceholder
+            ),
+            value: x.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : i.name);
+              }
+            ) || m,
+            onChange: I,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisTitleFontSize",
+          labelText: l.toLanguageString(
+            Z,
+            r.formatCategoryAxisTitleSize
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisTitleFontSize",
+            data: d,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              $,
+              r.formatCategoryAxisTitleSizePlaceholder
+            ),
+            value: d.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].title) == null ? void 0 : o.font) || "")) == null ? void 0 : i.size);
+              }
+            ) || m,
+            onChange: R,
+            allowCustom: !0,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisTitleColor",
+          labelText: l.toLanguageString(
+            ee,
+            r.formatCategoryAxisTitleColor
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          v,
+          {
+            id: "categoryAxisTitleColor",
+            view: "gradient",
+            value: ((b = t.categoryAxis[0].title) == null ? void 0 : b.color) || "",
+            onChange: N,
+            fillMode: "outline"
+          }
+        )
+      ))
+    ), /* @__PURE__ */ e.createElement(
+      T,
+      {
+        legend: l.toLanguageString(
+          te,
+          r.formatCategoryAxisLabels
+        )
+      },
+      /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
+        s,
+        {
+          className: "k-col-span-2",
+          editorId: "categoryAxisLabelsFont",
+          labelText: l.toLanguageString(
+            ae,
+            r.formatCategoryAxisLabelsFont
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisLabelsFont",
+            data: x,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              oe,
+              r.formatCategoryAxisLabelsFontPlaceholder
+            ),
+            value: x.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : i.name);
+              }
+            ) || m,
+            onChange: K,
+            itemRender: E,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsFontSize",
+          labelText: l.toLanguageString(
+            le,
+            r.formatCategoryAxisLabelsSize
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          A,
+          {
+            id: "categoryAxisLabelsFontSize",
+            data: d,
+            textField: "text",
+            dataItemKey: "value",
+            placeholder: l.toLanguageString(
+              re,
+              r.formatCategoryAxisLabelsSizePlaceholder
+            ),
+            value: d.find(
+              (a) => {
+                var o, i;
+                return a.value === ((i = C(((o = t.categoryAxis[0].labels) == null ? void 0 : o.font) || "")) == null ? void 0 : i.size);
+              }
+            ) || m,
+            onChange: w,
+            allowCustom: !0,
+            ...y
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsColor",
+          labelText: l.toLanguageString(
+            ie,
+            r.formatCategoryAxisLabelsColor
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          v,
+          {
+            id: "categoryAxisLabelsColor",
+            view: "gradient",
+            value: ((L = t.categoryAxis[0].labels) == null ? void 0 : L.color) || "",
+            onChange: M,
+            fillMode: "outline"
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(
+        s,
+        {
+          editorId: "categoryAxisLabelsRotation",
+          labelText: l.toLanguageString(
+            ne,
+            r.formatCategoryAxisLabelsRotation
+          )
+        },
+        /* @__PURE__ */ e.createElement(
+          W,
+          {
+            id: "categoryAxisLabelsRotation",
+            value: typeof ((S = t.categoryAxis[0].labels) == null ? void 0 : S.rotation) == "number" ? (h = t.categoryAxis[0].labels) == null ? void 0 : h.rotation : null,
+            placeholder: l.toLanguageString(
+              se,
+              r.formatCategoryAxisLabelsRotationAuto
+            ),
+            onChange: O,
+            fillMode: "outline",
+            min: -360,
+            max: 360,
+            step: 1
+          }
+        )
+      ), /* @__PURE__ */ e.createElement(s, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
+        j,
+        {
+          label: l.toLanguageString(
+            ge,
+            r.formatCategoryAxisLabelsReverseOrder
+          ),
+          checked: t.categoryAxis[0].reverse || !1,
+          onChange: B
+        }
+      )))
+    ))))
+  );
+};
+export {
+  Te as CategoryAxisPanel
+};

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;