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

package/ChartWizard.mjs

@@ -7,1753 +7,116 @@
  */
 "use client";
 import * as e from "react";
-import { Window as Ga } from "@progress/kendo-react-dialogs";
-import { Chart as Ha, ChartTitle as Oa, ChartSubtitle as Xa, ChartArea as Ya, ChartCategoryAxis as ja, ChartCategoryAxisItem as Ua, ChartValueAxis as $a, ChartValueAxisItem as qa, ChartSeries as Ja, ChartSeriesItem as Qa, ChartLegend as Za } from "@progress/kendo-react-charts";
-import { Splitter as _a, TabStrip as el, TabStripTab as q, ExpansionPanel as A, ExpansionPanelContent as L } from "@progress/kendo-react-layout";
-import { DropDownButton as tl } from "@progress/kendo-react-buttons";
-import { exportIcon as al, filePdfIcon as ll, fileIcon as nl, fileImageIcon as ol, chartBarClusteredIcon as rl, chartBarStackedIcon as il, chartBarStacked100Icon as sl, chartPieIcon as cl, chartColumnClusteredIcon as gl, chartColumnStackedIcon as ul, chartColumnStacked100Icon as dl, chartLineIcon as ml, chartLineStackedIcon as xl, chartLineStacked100Icon as Cl, chartScatterIcon as fl } from "@progress/kendo-svg-icons";
-import { Reveal as v } from "@progress/kendo-react-animation";
-import { DropDownList as R, ComboBox as E } from "@progress/kendo-react-dropdowns";
-import { SeriesGrid as bl } from "./SeriesGrid.mjs";
-import { NumericTextBox as K, ColorPicker as P, Input as J, Checkbox as at, Switch as hl } from "@progress/kendo-react-inputs";
-import { Label as nt } from "@progress/kendo-react-labels";
-import { createInitialState as Sl, mergeStates as T, createState as F, updateState as c, ActionTypes as s, isCategorical as lt, fontNames as k, parseFont as p, fontSizes as f } from "./chart-wizard-state.mjs";
-import { classNames as Al, IconWrap as Ll } from "@progress/kendo-react-common";
-import { FormElement as B, FieldWrapper as vl } from "@progress/kendo-react-form";
-import { useLocalization as El } from "@progress/kendo-react-intl";
-import { formatTitleChartTitle as kl, messages as n, formatTitleChartSubtitle as pl, formatLegendPositionTop as yl, formatLegendPositionBottom as Tl, formatLegendPositionLeft as Fl, formatLegendPositionRight as Il, formatSeriesAllSeries as Nl, formatValueAxisLabelsFormatText as wl, formatValueAxisLabelsFormatNumber as zl, formatValueAxisLabelsFormatCurrency as Pl, formatValueAxisLabelsFormatPercent as Vl, windowTitle as Bl, exportButton as Ml, exportPDFButton as Rl, exportSVGButton as Kl, exportPNGButton as Dl, tabChart as Wl, barChart as Gl, barChartBar as Hl, barChartStackedBar as Ol, barChart100StackedBar as Xl, pieChart as Yl, pieChartPie as jl, columnChart as Ul, columnChartColumn as $l, columnChartStackedColumn as ql, columnChart100StackedColumn as Jl, lineChart as Ql, lineChartLine as Zl, lineChartStackedLine as _l, lineChart100StackedLine as en, scatterChart as tn, scatterChartScatter as an, tabData as ln, configuration as nn, configurationXAxis as on, configurationCategoryAxis as rn, configurationSeries as sn, configurationValueAxis as cn, tabFormat as gn, formatChartArea as un, formatChartAreaMargins as dn, formatChartAreaMarginsLeft as mn, formatChartAreaMarginsAuto as X, formatChartAreaMarginsRight as xn, formatChartAreaMarginsTop as Cn, formatChartAreaMarginsBottom as fn, formatChartAreaBackground as bn, formatChartAreaBackgroundColor as hn, formatTitle as Sn, formatTitleApplyTo as An, formatTitleLabel as Ln, formatTitleFont as vn, formatTitleFontPlaceholder as En, formatTitleSize as kn, formatTitleSizePlaceholder as pn, formatTitleColor as yn, formatSeries as Tn, formatSeriesApplyTo as Fn, formatSeriesColor as In, formatSeriesShowLabels as Nn, formatLegend as wn, formatLegendShowLegend as zn, formatLegendFont as Pn, formatLegendFontPlaceholder as Vn, formatLegendSize as Bn, formatLegendSizePlaceholder as Mn, formatLegendColor as Rn, formatLegendPosition as Kn, formatXAxis as Dn, formatCategoryAxis as Wn, formatCategoryAxisTitle as Gn, formatCategoryAxisTitlePlaceholder as Hn, formatCategoryAxisTitleFont as On, formatCategoryAxisTitleFontPlaceholder as Xn, formatCategoryAxisTitleSize as Yn, formatCategoryAxisTitleSizePlaceholder as jn, formatCategoryAxisTitleColor as Un, formatCategoryAxisLabels as $n, formatCategoryAxisLabelsFont as qn, formatCategoryAxisLabelsFontPlaceholder as Jn, formatCategoryAxisLabelsSize as Qn, formatCategoryAxisLabelsSizePlaceholder as Zn, formatCategoryAxisLabelsColor as _n, formatCategoryAxisLabelsRotation as eo, formatCategoryAxisLabelsRotationAuto as to, formatCategoryAxisLabelsReverseOrder as ao, formatYAxis as lo, formatValueAxis as no, formatValueAxisTitle as oo, formatValueAxisTitlePlaceholder as ro, formatValueAxisTitleFont as io, formatValueAxisTitleFontPlaceholder as so, formatValueAxisTitleSize as co, formatValueAxisTitleSizePlaceholder as go, formatValueAxisTitleColor as uo, formatValueAxisLabels as mo, formatValueAxisLabelsFormat as xo, formatValueAxisLabelsFont as Co, formatValueAxisLabelsFontPlaceholder as fo, formatValueAxisLabelsSize as bo, formatValueAxisLabelsSizePlaceholder as ho, formatValueAxisLabelsColor as So, formatValueAxisLabelsRotation as Ao, formatValueAxisLabelsRotationAuto as Lo } from "./messages.mjs";
-import { ExportEvent as vo, resolveExportOptions as Eo, handlePDFExport as ko, handleSVGExport as po, handleImageExport as yo } from "./export.mjs";
-const w = (r) => /* @__PURE__ */ e.createElement("fieldset", { className: "k-form-fieldset" }, r.legend && /* @__PURE__ */ e.createElement("legend", { className: "k-form-legend" }, r.legend), r.children), z = (r) => {
-  r.stopPropagation();
-}, u = (r) => /* @__PURE__ */ e.createElement(vl, { className: r.className }, r.labelText && r.editorId && /* @__PURE__ */ e.createElement(nt, { className: "k-form-label", editorId: r.editorId }, r.labelText), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap", onKeyDown: z }, r.children)), d = { value: null, text: "" }, To = /^\d+$/, M = (r, V) => V.dataItem.style ? e.cloneElement(r, r.props, /* @__PURE__ */ e.createElement("span", { style: V.dataItem.style }, r.props.children)) : r, D = (r) => {
-  if (r.text === "")
-    return !0;
-  if (r.value === void 0) {
-    if (!To.test(r.text))
-      return !1;
-    r.value = r.text + "px";
-  }
-  return f.find((l) => l.value === r.value) || (f.push(r), f.sort((l, b) => parseInt(l.text, 10) - parseInt(b.text, 10))), !0;
-}, I = (r) => {
-  const V = e.useCallback(
-    (l) => {
-      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), r.onClick());
-    },
-    [r.onClick]
-  );
-  return /* @__PURE__ */ e.createElement("div", { className: Al("k-icon-text-wrapper", { "k-selected": r.selected }), onClick: r.onClick }, /* @__PURE__ */ e.createElement("div", { className: "k-icon-background-area", tabIndex: 0, onKeyDown: V }, /* @__PURE__ */ e.createElement(
-    Ll,
-    {
-      name: r.iconName,
-      icon: r.icon,
-      size: "xlarge",
-      className: "k-svg-i-chart-bar-clustered"
-    }
-  )), r.children);
-}, G = (r) => /* @__PURE__ */ e.createElement("div", { className: "k-chart-types-wrapper", onKeyDown: z }, r.children), x = {
-  fillMode: "outline",
-  popupSettings: {
-    animate: !1
-  }
-}, Q = { type: "normal" }, Z = { type: "100%" }, Fo = e.forwardRef((r, V) => {
-  var Ce, fe, be, he, Se, Ae, Le, ve, Ee, ke, pe, ye, Te, Fe, Ie, Ne, we, ze, Pe, Ve, Be, Me, Re, Ke, De, We, Ge, He, Oe, Xe, Ye, je, Ue, $e, qe, Je, Qe, Ze, _e, et, tt;
-  const l = El(), b = [
-    {
-      value: "chartTitle",
-      text: l.toLanguageString(kl, n.formatTitleChartTitle)
-    },
-    {
-      value: "chartSubtitle",
-      text: l.toLanguageString(pl, n.formatTitleChartSubtitle)
-    }
-  ], _ = [
-    {
-      value: "top",
-      text: l.toLanguageString(yl, n.formatLegendPositionTop)
-    },
-    {
-      value: "bottom",
-      text: l.toLanguageString(Tl, n.formatLegendPositionBottom)
-    },
-    {
-      value: "left",
-      text: l.toLanguageString(Fl, n.formatLegendPositionLeft)
-    },
-    {
-      value: "right",
-      text: l.toLanguageString(Il, n.formatLegendPositionRight)
-    }
-  ], Y = {
-    name: l.toLanguageString(Nl, n.formatSeriesAllSeries)
-  }, ee = {
-    text: l.toLanguageString(wl, n.formatValueAxisLabelsFormatText),
-    value: ""
-  }, te = [
-    {
-      value: "n0",
-      text: l.toLanguageString(
-        zl,
-        n.formatValueAxisLabelsFormatNumber
-      )
-    },
-    {
-      value: "c0",
-      text: l.toLanguageString(
-        Pl,
-        n.formatValueAxisLabelsFormatCurrency
-      )
-    },
-    {
-      value: "p0",
-      text: l.toLanguageString(
-        Vl,
-        n.formatValueAxisLabelsFormatPercent
-      )
-    }
-  ], H = e.useRef(null), ot = e.useCallback(
-    (t) => {
-      var o;
-      if (H.current) {
-        const g = new vo(H.current, Eo(r.exportOptions));
-        (o = r.onExport) == null || o.call(r, g), g.isDefaultPrevented() || t.item.exportHandler.call(void 0, g);
+import { Window as B } from "@progress/kendo-react-dialogs";
+import { Splitter as D, TabStrip as N, TabStripTab as s } from "@progress/kendo-react-layout";
+import { DropDownButton as y } from "@progress/kendo-react-buttons";
+import { exportIcon as R, filePdfIcon as W, fileIcon as F, fileImageIcon as H } from "@progress/kendo-svg-icons";
+import { resolveExportOptions as G, createInitialState as A, mergeStates as V, createState as O, handlePDFExport as M, handleSVGExport as U, handleImageExport as j } from "./utils.mjs";
+import { useLocalization as q } from "@progress/kendo-react-intl";
+import { windowTitle as J, messages as i, exportButton as K, exportPDFButton as Q, exportSVGButton as X, exportPNGButton as Y, tabChart as Z, tabData as _, tabFormat as $ } from "./messages.mjs";
+import { ExportEvent as ee } from "./types/export.mjs";
+import { ConfigurationPanel as te } from "./components/panels/ConfigurationPanel.mjs";
+import { ChartAreaPanel as ae } from "./components/panels/ChartAreaPanel.mjs";
+import { TitlePanel as ne } from "./components/panels/TitlePanel.mjs";
+import { SeriesPanel as re } from "./components/panels/SeriesPanel.mjs";
+import { LegendPanel as oe } from "./components/panels/LegendPanel.mjs";
+import { CategoryAxisPanel as ie } from "./components/panels/CategoryAxisPanel.mjs";
+import { ValueAxisPanel as le } from "./components/panels/ValueAxisPanel.mjs";
+import { BarChartPanel as ce } from "./components/panels/BarChartPanel.mjs";
+import { ColumnChartPanel as me } from "./components/panels/ColumnChartPanel.mjs";
+import { LineChartPanel as se } from "./components/panels/LineChartPanel.mjs";
+import { ScatterChartPanel as pe } from "./components/panels/ScatterChartPanel.mjs";
+import { PieChartPanel as ue } from "./components/panels/PieChartPanel.mjs";
+import { ChartComponent as de } from "./components/ChartComponent.mjs";
+const ge = e.forwardRef((r, g) => {
+  const o = q(), c = e.useRef(null), f = e.useCallback(
+    (n) => {
+      var d;
+      if (c.current) {
+        const m = new ee(c.current, G(r.exportOptions));
+        (d = r.onExport) == null || d.call(void 0, m), m.isDefaultPrevented() || n.item.exportHandler.call(void 0, m);
       }
     },
-    [r.exportOptions]
-  ), rt = r.window || Ga, [it, st] = e.useState({ width: 700, height: 550 }), [ct, gt] = e.useState("DEFAULT"), ut = e.useCallback((t) => {
-    st({ width: t.width, height: t.height });
-  }, []), dt = e.useCallback((t) => {
-    gt(t.state);
-  }, []), [mt, xt] = e.useState([
+    [r.onExport, r.exportOptions]
+  ), h = r.window || B, [E, S] = e.useState({ width: 700, height: 550 }), [x, w] = e.useState("DEFAULT"), C = e.useCallback((n) => {
+    S({ width: n.width, height: n.height });
+  }, []), P = e.useCallback((n) => {
+    w(n.state);
+  }, []), [b, v] = e.useState([
     { collapsible: !1 },
     { size: "300px", collapsible: !1 }
-  ]), Ct = e.useCallback((t) => {
-    xt(t.newState);
-  }, []), [ae, ft] = e.useState(!0), bt = e.useCallback((t) => {
-    ft(!t.expanded);
-  }, []), [le, ht] = e.useState(!0), St = e.useCallback((t) => {
-    ht(!t.expanded);
-  }, []), [ne, At] = e.useState(!0), Lt = e.useCallback((t) => {
-    At(!t.expanded);
-  }, []), [oe, vt] = e.useState(!0), Et = e.useCallback((t) => {
-    vt(!t.expanded);
-  }, []), [re, kt] = e.useState(!0), pt = e.useCallback((t) => {
-    kt(!t.expanded);
-  }, []), [ie, yt] = e.useState(!0), Tt = e.useCallback((t) => {
-    yt(!t.expanded);
-  }, []), [se, Ft] = e.useState(!1), It = e.useCallback((t) => {
-    Ft(!t.expanded);
-  }, []), [ce, Nt] = e.useState(!1), wt = e.useCallback((t) => {
-    Nt(!t.expanded);
-  }, []), [ge, zt] = e.useState(!1), Pt = e.useCallback((t) => {
-    zt(!t.expanded);
-  }, []), [ue, Vt] = e.useState(!1), Bt = e.useCallback((t) => {
-    Vt(!t.expanded);
-  }, []), [de, Mt] = e.useState(!1), Rt = e.useCallback((t) => {
-    Mt(!t.expanded);
-  }, []), [me, Kt] = e.useState(!1), Dt = e.useCallback((t) => {
-    Kt(!t.expanded);
-  }, []), [Wt, Gt] = e.useState(0), Ht = e.useCallback((t) => {
-    Gt(t.selected);
-  }, []), [a, i] = e.useState(
-    Sl(r.data, "bar", r.defaultState)
-  ), xe = e.useRef(a);
-  xe.current = a;
-  const Ot = e.useCallback(
+  ]), k = e.useCallback((n) => {
+    v(n.newState);
+  }, []), [z, I] = e.useState(0), T = e.useCallback((n) => {
+    I(n.selected);
+  }, []), [t, p] = e.useState(
+    A(r.data, "bar", r.defaultState)
+  ), a = (n) => {
+    p(n);
+  }, l = e.useRef(t);
+  l.current = t;
+  const L = e.useCallback(
     () => ({
       get chart() {
-        return H.current;
+        return c.current;
       },
       get state() {
-        return xe.current;
+        return l.current;
       }
     }),
     []
   );
-  e.useImperativeHandle(V, Ot);
-  const [h, S] = e.useState(""), Xt = e.useCallback((t) => {
-    const o = t.target.value.name;
-    S(o === Y.name ? "" : o);
-  }, []), Yt = e.useCallback(() => {
-    i(T(a, F(r.data, "bar"))), S("");
-  }, [a, r.data]), jt = e.useCallback(() => {
-    const t = T(a, F(r.data, "bar"));
-    i(c(t, s.stacked, Q)), S("");
-  }, [a, r.data]), Ut = e.useCallback(() => {
-    const t = T(a, F(r.data, "bar"));
-    i(c(t, s.stacked, Z)), S("");
-  }, [a, r.data]), $t = e.useCallback(() => {
-    i(T(a, F(r.data, "column"))), S("");
-  }, [a, r.data]), qt = e.useCallback(() => {
-    const t = T(a, F(r.data, "column"));
-    i(c(t, s.stacked, Q)), S("");
-  }, [a, r.data]), Jt = e.useCallback(() => {
-    const t = T(a, F(r.data, "column"));
-    i(c(t, s.stacked, Z)), S("");
-  }, [a, r.data]), Qt = e.useCallback(() => {
-    i(T(a, F(r.data, "line"))), S("");
-  }, [a, r.data]), Zt = e.useCallback(() => {
-    const t = T(a, F(r.data, "line"));
-    i(c(t, s.stacked, Q)), S("");
-  }, [a, r.data]), _t = e.useCallback(() => {
-    const t = T(a, F(r.data, "line"));
-    i(c(t, s.stacked, Z)), S("");
-  }, [a, r.data]), ea = e.useCallback(() => {
-    i(T(a, F(r.data, "pie"))), S("");
-  }, [a, r.data]), ta = e.useCallback(() => {
-    i(T(a, F(r.data, "scatter"))), S("");
-  }, [a, r.data]), aa = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisX, t.target.value));
-    },
-    [a]
-  ), la = e.useCallback(
-    (t) => {
-      i(c(a, s.seriesChange, t));
-    },
-    [a]
-  ), na = e.useCallback(
-    (t) => {
-      i(c(a, s.valueAxisY, t.target.value));
-    },
-    [a]
-  ), oa = e.useCallback(
-    (t) => {
-      i(c(a, s.areaMarginLeft, t.target.value));
-    },
-    [a]
-  ), ra = e.useCallback(
-    (t) => {
-      i(c(a, s.areaMarginRight, t.target.value));
-    },
-    [a]
-  ), ia = e.useCallback(
-    (t) => {
-      i(c(a, s.areaMarginTop, t.target.value));
-    },
-    [a]
-  ), sa = e.useCallback(
-    (t) => {
-      i(c(a, s.areaMarginBottom, t.target.value));
-    },
-    [a]
-  ), N = a.area.margin, ca = e.useCallback(
-    (t) => {
-      i(c(a, s.areaBackground, t.value));
-    },
-    [a]
-  ), [y, ga] = e.useState(b[0]), ua = e.useCallback((t) => {
-    ga(t.target.value);
-  }, []), da = e.useCallback(
-    (t) => {
-      const o = y.value === b[0].value ? s.titleText : s.subtitleText;
-      i(c(a, o, t.target.value));
-    },
-    [a, y]
-  ), ma = e.useCallback(
-    (t) => {
-      const o = y.value === b[0].value ? s.titleFontName : s.subtitleFontName, g = t.target.value || d;
-      i(c(a, o, g.value));
-    },
-    [a, y]
-  ), xa = e.useCallback(
-    (t) => {
-      const o = y.value === b[0].value ? s.titleFontSize : s.subtitleFontSize, g = t.target.value || d;
-      D(g) && i(c(a, o, g.value));
-    },
-    [a, y]
-  ), Ca = e.useCallback(
-    (t) => {
-      const o = y.value === b[0].value ? s.titleColor : s.subtitleColor;
-      i(c(a, o, t.value));
-    },
-    [a, y]
-  ), O = (y.value === b[0].value ? a.title : a.subtitle) || {
-    text: "",
-    font: "",
-    color: ""
-  }, fa = e.useCallback(
-    (t) => {
-      h && i(c(a, s.seriesColor, { seriesName: h, color: t.value }));
-    },
-    [a, h]
-  ), ba = e.useCallback(
-    (t) => {
-      i(
-        c(a, s.seriesLabel, {
-          seriesName: h,
-          all: !h,
-          visible: t.value
-        })
-      );
-    },
-    [a, h]
-  ), ha = e.useCallback(
-    (t) => {
-      i(c(a, s.legendVisible, t.value));
-    },
-    [a]
-  ), Sa = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      D(o) && i(c(a, s.legendFontSize, o.value));
-    },
-    [a]
-  ), Aa = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      i(c(a, s.legendFontName, o.value));
-    },
-    [a]
-  ), La = e.useCallback(
-    (t) => {
-      i(c(a, s.legendColor, t.value));
-    },
-    [a]
-  ), va = e.useCallback(
-    (t) => {
-      const o = t.target.value;
-      i(c(a, s.legendPosition, o.value));
-    },
-    [a]
-  ), Ea = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisTitleText, t.target.value));
-    },
-    [a]
-  ), ka = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      D(o) && i(c(a, s.categoryAxisTitleFontSize, o.value));
-    },
-    [a]
-  ), pa = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      i(c(a, s.categoryAxisTitleFontName, o.value));
-    },
-    [a]
-  ), ya = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisTitleColor, t.value));
-    },
-    [a]
-  ), Ta = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      D(o) && i(c(a, s.categoryAxisLabelsFontSize, o.value));
-    },
-    [a]
-  ), Fa = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      i(c(a, s.categoryAxisLabelsFontName, o.value));
-    },
-    [a]
-  ), Ia = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisLabelsColor, t.value));
-    },
-    [a]
-  ), Na = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisLabelsRotation, t.target.value));
-    },
-    [a]
-  ), wa = e.useCallback(
-    (t) => {
-      i(c(a, s.categoryAxisReverseOrder, t.value));
-    },
-    [a]
-  ), za = e.useCallback(
-    (t) => {
-      i(c(a, s.valueAxisTitleText, t.target.value));
-    },
-    [a]
-  ), Pa = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      D(o) && i(c(a, s.valueAxisTitleFontSize, o.value));
-    },
-    [a]
-  ), Va = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      i(c(a, s.valueAxisTitleFontName, o.value));
-    },
-    [a]
-  ), Ba = e.useCallback(
-    (t) => {
-      i(c(a, s.valueAxisTitleColor, t.value));
-    },
-    [a]
-  ), Ma = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      D(o) && i(c(a, s.valueAxisLabelsFontSize, o.value));
-    },
-    [a]
-  ), Ra = e.useCallback(
-    (t) => {
-      const o = t.target.value || d;
-      i(c(a, s.valueAxisLabelsFontName, o.value));
-    },
-    [a]
-  ), Ka = e.useCallback(
-    (t) => {
-      i(c(a, s.valueAxisLabelsColor, t.value));
-    },
-    [a]
-  ), Da = e.useCallback(
-    (t) => {
-      i(c(a, s.valueAxisLabelsRotation, t.target.value));
-    },
-    [a]
-  ), Wa = e.useCallback(
-    (t) => {
-      const o = t.target.value;
-      i(c(a, s.valueAxisLabelsFormat, o.value));
-    },
-    [a]
-  ), m = a.seriesType, W = typeof ((Ce = a.series[0]) == null ? void 0 : Ce.stack) == "object" ? (fe = a.series[0]) == null ? void 0 : fe.stack : !1, j = W === !1, U = W && W.type === "normal", $ = W && W.type === "100%";
+  e.useImperativeHandle(g, L), e.useEffect(() => {
+    l.current && l.current.seriesType && p(V(l.current, O(r.data, l.current.seriesType)));
+  }, [r.data]);
+  const u = t.seriesType;
   return /* @__PURE__ */ e.createElement(
-    rt,
+    h,
     {
-      title: l.toLanguageString(Bl, n.windowTitle),
+      title: o.toLanguageString(J, i.windowTitle),
       className: "k-chart-wizard",
       modal: !0,
       resizable: !0,
       minimizeButton: () => null,
       onClose: r.onClose,
-      onResize: ut,
-      stage: ct,
-      onStageChange: dt,
-      ...it
+      onResize: C,
+      stage: x,
+      onStageChange: P,
+      ...E
     },
-    /* @__PURE__ */ e.createElement(_a, { panes: mt, onChange: Ct, className: "k-chart-wizard-splitter" }, /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-preview-pane k-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-header" }, /* @__PURE__ */ e.createElement(
-      tl,
+    /* @__PURE__ */ e.createElement(D, { panes: b, onChange: k, className: "k-chart-wizard-splitter" }, /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-preview-pane k-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-header" }, /* @__PURE__ */ e.createElement(
+      y,
       {
-        text: l.toLanguageString(Ml, n.exportButton),
+        text: o.toLanguageString(K, i.exportButton),
         fillMode: "flat",
-        svgIcon: al,
+        svgIcon: R,
         icon: "export",
-        onItemClick: ot,
+        onItemClick: f,
         items: [
           {
-            svgIcon: ll,
+            svgIcon: W,
             icon: "file-pdf",
-            exportHandler: ko,
-            text: l.toLanguageString(Rl, n.exportPDFButton)
+            exportHandler: M,
+            text: o.toLanguageString(Q, i.exportPDFButton)
           },
           {
-            svgIcon: nl,
+            svgIcon: F,
             icon: "file",
-            exportHandler: po,
-            text: l.toLanguageString(Kl, n.exportSVGButton)
+            exportHandler: U,
+            text: o.toLanguageString(X, i.exportSVGButton)
           },
           {
-            svgIcon: ol,
+            svgIcon: H,
             icon: "file-image",
-            exportHandler: yo,
-            text: l.toLanguageString(Dl, n.exportPNGButton)
+            exportHandler: j,
+            text: o.toLanguageString(Y, i.exportPNGButton)
           }
         ]
       }
-    )), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(Ha, { style: { width: "100%", height: "100%" }, transitions: !1, ref: H }, /* @__PURE__ */ e.createElement(
-      Oa,
-      {
-        text: (be = a.title) == null ? void 0 : be.text,
-        font: (he = a.title) == null ? void 0 : he.font,
-        color: ((Se = a.title) == null ? void 0 : Se.color) || "#000"
-      }
-    ), /* @__PURE__ */ e.createElement(
-      Xa,
-      {
-        text: (Ae = a.subtitle) == null ? void 0 : Ae.text,
-        font: (Le = a.subtitle) == null ? void 0 : Le.font,
-        color: ((ve = a.subtitle) == null ? void 0 : ve.color) || "#000"
-      }
-    ), /* @__PURE__ */ e.createElement(Ya, { background: (Ee = a.area) == null ? void 0 : Ee.background, margin: N }), a.categoryAxis && /* @__PURE__ */ e.createElement(ja, null, a.categoryAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-      Ua,
-      {
-        key: o,
-        categories: t.categories,
-        title: t.title && {
-          text: t.title.text,
-          font: t.title.font,
-          color: t.title.color
-        },
-        labels: t.labels && {
-          font: t.labels.font,
-          color: t.labels.color,
-          rotation: t.labels.rotation
-        },
-        reverse: t.reverse
-      }
-    ))), a.valueAxis && /* @__PURE__ */ e.createElement($a, null, a.valueAxis.map((t, o) => /* @__PURE__ */ e.createElement(
-      qa,
-      {
-        key: o,
-        title: t.title && {
-          text: t.title.text,
-          font: t.title.font,
-          color: t.title.color
-        },
-        labels: t.labels && {
-          format: t.labels.format,
-          font: t.labels.font,
-          color: t.labels.color,
-          rotation: t.labels.rotation
-        }
-      }
-    ))), /* @__PURE__ */ e.createElement(Ja, null, a.series.map((t, o) => /* @__PURE__ */ e.createElement(Qa, { key: String(t.name) + o, ...t }))), /* @__PURE__ */ e.createElement(
-      Za,
-      {
-        visible: (ke = a.legend) == null ? void 0 : ke.visible,
-        position: (pe = a.legend) == null ? void 0 : pe.position,
-        labels: {
-          color: ((Te = (ye = a.legend) == null ? void 0 : ye.labels) == null ? void 0 : Te.color) || void 0,
-          font: ((Ie = (Fe = a.legend) == null ? void 0 : Fe.labels) == null ? void 0 : Ie.font) || void 0
-        }
-      }
-    )))), /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(el, { selected: Wt, onSelect: Ht, animation: !1 }, /* @__PURE__ */ e.createElement(q, { title: l.toLanguageString(Wl, n.tabChart) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Gl, n.barChart),
-        expanded: ae,
-        tabIndex: 0,
-        onAction: bt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ae && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "bar" && j,
-          onClick: Yt,
-          icon: rl,
-          iconName: "chart-bar-clustered"
-        },
-        l.toLanguageString(
-          Hl,
-          n.barChartBar
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "bar" && U,
-          onClick: jt,
-          icon: il,
-          iconName: "chart-bar-stacked"
-        },
-        l.toLanguageString(
-          Ol,
-          n.barChartStackedBar
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "bar" && $,
-          onClick: Ut,
-          icon: sl,
-          iconName: "chart-bar-stacked100"
-        },
-        l.toLanguageString(
-          Xl,
-          n.barChart100StackedBar
-        )
-      ))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Yl, n.pieChart),
-        expanded: le,
-        tabIndex: 0,
-        onAction: St
-      },
-      /* @__PURE__ */ e.createElement(v, null, le && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "pie",
-          onClick: ea,
-          icon: cl,
-          iconName: "chart-pie"
-        },
-        l.toLanguageString(
-          jl,
-          n.pieChartPie
-        )
-      ))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Ul, n.columnChart),
-        expanded: ne,
-        tabIndex: 0,
-        onAction: Lt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ne && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "column" && j,
-          onClick: $t,
-          icon: gl,
-          iconName: "chart-column-clustered"
-        },
-        l.toLanguageString(
-          $l,
-          n.columnChartColumn
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "column" && U,
-          onClick: qt,
-          icon: ul,
-          iconName: "chart-column-stacked"
-        },
-        l.toLanguageString(
-          ql,
-          n.columnChartStackedColumn
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "column" && $,
-          onClick: Jt,
-          icon: dl,
-          iconName: "chart-column-stacked100"
-        },
-        l.toLanguageString(
-          Jl,
-          n.columnChart100StackedColumn
-        )
-      ))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Ql, n.lineChart),
-        expanded: oe,
-        tabIndex: 0,
-        onAction: Et
-      },
-      /* @__PURE__ */ e.createElement(v, null, oe && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "line" && j,
-          onClick: Qt,
-          icon: ml,
-          iconName: "chart-line"
-        },
-        l.toLanguageString(
-          Zl,
-          n.lineChartLine
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "line" && U,
-          onClick: Zt,
-          icon: xl,
-          iconName: "chart-line-stacked"
-        },
-        l.toLanguageString(
-          _l,
-          n.lineChartStackedLine
-        )
-      ), /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "line" && $,
-          onClick: _t,
-          icon: Cl,
-          iconName: "chart-line-stacked100"
-        },
-        l.toLanguageString(
-          en,
-          n.lineChart100StackedLine
-        )
-      ))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(tn, n.scatterChart),
-        expanded: re,
-        tabIndex: 0,
-        onAction: pt
-      },
-      /* @__PURE__ */ e.createElement(v, null, re && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
-        I,
-        {
-          selected: m === "scatter",
-          onClick: ta,
-          icon: fl,
-          iconName: "chart-scatter"
-        },
-        l.toLanguageString(
-          an,
-          n.scatterChartScatter
-        )
-      ))))
-    ))), /* @__PURE__ */ e.createElement(q, { title: l.toLanguageString(ln, n.tabData) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(nn, n.configuration),
-        expanded: ie,
-        tabIndex: 0,
-        onAction: Tt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ie && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: m === "scatter" ? l.toLanguageString(
-            on,
-            n.configurationXAxis
-          ) : l.toLanguageString(
-            rn,
-            n.configurationCategoryAxis
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          R,
-          {
-            data: a.columns || [],
-            value: a.categoryField,
-            onChange: aa,
-            ...x
-          }
-        )
-      ), lt(m) && /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            sn,
-            n.configurationSeries
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          bl,
-          {
-            data: a.series,
-            initialData: a.initialSeries,
-            onChange: la
-          }
-        )
-      ), m === "pie" && /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            cn,
-            n.configurationValueAxis
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          R,
-          {
-            data: a.columns || [],
-            value: a.valueField || "",
-            ...x,
-            onChange: na
-          }
-        )
-      ))))
-    ))), /* @__PURE__ */ e.createElement(q, { title: l.toLanguageString(gn, n.tabFormat) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(un, n.formatChartArea),
-        expanded: se,
-        tabIndex: 0,
-        onAction: It
-      },
-      /* @__PURE__ */ e.createElement(v, null, se && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            dn,
-            n.formatChartAreaMargins
-          )
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
-          u,
-          {
-            labelText: l.toLanguageString(
-              mn,
-              n.formatChartAreaMarginsLeft
-            ),
-            editorId: "left"
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "left",
-              value: N.left !== void 0 ? N.left : null,
-              onChange: oa,
-              placeholder: l.toLanguageString(
-                X,
-                n.formatChartAreaMarginsAuto
-              ),
-              min: 0,
-              max: 1e3,
-              step: 1,
-              fillMode: "outline"
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            labelText: l.toLanguageString(
-              xn,
-              n.formatChartAreaMarginsRight
-            ),
-            editorId: "right"
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "right",
-              value: N.right !== void 0 ? N.right : null,
-              onChange: ra,
-              placeholder: l.toLanguageString(
-                X,
-                n.formatChartAreaMarginsAuto
-              ),
-              min: 0,
-              max: 1e3,
-              step: 1,
-              fillMode: "outline"
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            labelText: l.toLanguageString(
-              Cn,
-              n.formatChartAreaMarginsTop
-            ),
-            editorId: "top"
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "top",
-              value: N.top !== void 0 ? N.top : null,
-              onChange: ia,
-              placeholder: l.toLanguageString(
-                X,
-                n.formatChartAreaMarginsAuto
-              ),
-              min: 0,
-              max: 1e3,
-              step: 1,
-              fillMode: "outline"
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            labelText: l.toLanguageString(
-              fn,
-              n.formatChartAreaMarginsBottom
-            ),
-            editorId: "bottom"
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "bottom",
-              value: N.bottom !== void 0 ? N.bottom : null,
-              onChange: sa,
-              placeholder: l.toLanguageString(
-                X,
-                n.formatChartAreaMarginsAuto
-              ),
-              min: 0,
-              max: 1e3,
-              step: 1,
-              fillMode: "outline"
-            }
-          )
-        ))
-      ), /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            bn,
-            n.formatChartAreaBackground
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          u,
-          {
-            labelText: l.toLanguageString(
-              hn,
-              n.formatChartAreaBackgroundColor
-            ),
-            editorId: "background"
-          },
-          /* @__PURE__ */ e.createElement(
-            P,
-            {
-              id: "background",
-              value: ((Ne = a.area) == null ? void 0 : Ne.background) || "",
-              onChange: ca,
-              view: "gradient",
-              fillMode: "outline"
-            }
-          )
-        )
-      ))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Sn, n.formatTitle),
-        expanded: ce,
-        tabIndex: 0,
-        onAction: wt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ce && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
-        u,
-        {
-          className: "k-col-span-2",
-          editorId: "apply-to-title",
-          labelText: l.toLanguageString(
-            An,
-            n.formatTitleApplyTo
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "apply-to-title",
-            data: b,
-            textField: "text",
-            dataItemKey: "value",
-            value: b.find(
-              (t) => t.value === y.value
-            ),
-            onChange: ua,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          className: "k-col-span-2",
-          editorId: "titleText",
-          labelText: l.toLanguageString(
-            Ln,
-            n.formatTitleLabel
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          J,
-          {
-            id: "titleText",
-            placeholder: y.value === b[0].value ? b[0].text : b[1].text,
-            value: O.text,
-            onChange: da
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          className: "k-col-span-2",
-          editorId: "titleFont",
-          labelText: l.toLanguageString(
-            vn,
-            n.formatTitleFont
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          E,
-          {
-            id: "titleFont",
-            data: k,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(
-              En,
-              n.formatTitleFontPlaceholder
-            ),
-            value: k.find(
-              (t) => t.value === p(O.font).name
-            ) || d,
-            onChange: ma,
-            itemRender: M,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "titleFontSize",
-          labelText: l.toLanguageString(
-            kn,
-            n.formatTitleSize
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          E,
-          {
-            id: "titleFontSize",
-            data: f,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(
-              pn,
-              n.formatTitleSizePlaceholder
-            ),
-            value: f.find(
-              (t) => t.value === p(O.font).size
-            ) || d,
-            onChange: xa,
-            itemRender: M,
-            allowCustom: !0,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "titleColor",
-          labelText: l.toLanguageString(
-            yn,
-            n.formatTitleColor
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          P,
-          {
-            id: "titleColor",
-            value: O.color || "",
-            onChange: Ca,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        )
-      )))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(Tn, n.formatSeries),
-        expanded: ge,
-        tabIndex: 0,
-        onAction: Pt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ge && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "apply-to-series",
-          labelText: l.toLanguageString(
-            Fn,
-            n.formatSeriesApplyTo
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "apply-to-series",
-            data: a.series,
-            textField: "name",
-            dataItemKey: "name",
-            defaultItem: Y,
-            disabled: !lt(m),
-            value: a.series.find((t) => t.name === h) || Y,
-            onChange: Xt,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "seriesColor",
-          labelText: l.toLanguageString(
-            In,
-            n.formatSeriesColor
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          P,
-          {
-            id: "seriesColor",
-            value: h ? (we = a.series.find((t) => t.name === h)) == null ? void 0 : we.color : "",
-            onChange: fa,
-            disabled: !h,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(u, null, /* @__PURE__ */ e.createElement(
-        at,
-        {
-          label: l.toLanguageString(
-            Nn,
-            n.formatSeriesShowLabels
-          ),
-          checked: h ? (Pe = (ze = a.series.find((t) => t.name === h)) == null ? void 0 : ze.labels) == null ? void 0 : Pe.visible : a.series.every((t) => {
-            var o;
-            return (o = t.labels) == null ? void 0 : o.visible;
-          }),
-          onChange: ba
-        }
-      )))))
-    ), /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: l.toLanguageString(wn, n.formatLegend),
-        expanded: ue,
-        tabIndex: 0,
-        onAction: Bt
-      },
-      /* @__PURE__ */ e.createElement(v, null, ue && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(nt, { editorId: "show-legend" }, l.toLanguageString(
-        zn,
-        n.formatLegendShowLegend
-      )), /* @__PURE__ */ e.createElement(
-        hl,
-        {
-          id: "show-legend",
-          checked: (Ve = a.legend) == null ? void 0 : Ve.visible,
-          onChange: ha
-        }
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          className: "k-col-span-2",
-          editorId: "legendLabelsFont",
-          labelText: l.toLanguageString(
-            Pn,
-            n.formatLegendFont
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          E,
-          {
-            id: "legendLabelsFont",
-            data: k,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(
-              Vn,
-              n.formatLegendFontPlaceholder
-            ),
-            value: k.find(
-              (t) => {
-                var o, g, C;
-                return t.value === ((C = p(((g = (o = a.legend) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.name);
-              }
-            ) || d,
-            onChange: Aa,
-            itemRender: M,
-            disabled: ((Be = a.legend) == null ? void 0 : Be.visible) === !1,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "legendLabelsSize",
-          labelText: l.toLanguageString(
-            Bn,
-            n.formatLegendSize
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          E,
-          {
-            id: "legendLabelsSize",
-            data: f,
-            textField: "text",
-            dataItemKey: "value",
-            placeholder: l.toLanguageString(
-              Mn,
-              n.formatLegendSizePlaceholder
-            ),
-            value: f.find(
-              (t) => {
-                var o, g, C;
-                return t.value === ((C = p(((g = (o = a.legend) == null ? void 0 : o.labels) == null ? void 0 : g.font) || "")) == null ? void 0 : C.size);
-              }
-            ) || d,
-            onChange: Sa,
-            disabled: ((Me = a.legend) == null ? void 0 : Me.visible) === !1,
-            allowCustom: !0,
-            ...x
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          editorId: "legendLabelsColor",
-          labelText: l.toLanguageString(
-            Rn,
-            n.formatLegendColor
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          P,
-          {
-            id: "legendLabelsColor",
-            value: ((Ke = (Re = a.legend) == null ? void 0 : Re.labels) == null ? void 0 : Ke.color) || "",
-            onChange: La,
-            disabled: ((De = a.legend) == null ? void 0 : De.visible) === !1,
-            view: "gradient",
-            fillMode: "outline"
-          }
-        )
-      ), /* @__PURE__ */ e.createElement(
-        u,
-        {
-          className: "k-col-span-2",
-          editorId: "legendPosition",
-          labelText: l.toLanguageString(
-            Kn,
-            n.formatLegendPosition
-          )
-        },
-        /* @__PURE__ */ e.createElement(
-          R,
-          {
-            id: "legendPosition",
-            data: _,
-            textField: "text",
-            dataItemKey: "value",
-            value: _.find(
-              (t) => {
-                var o;
-                return t.value === ((o = a.legend) == null ? void 0 : o.position);
-              }
-            ),
-            onChange: va,
-            disabled: ((We = a.legend) == null ? void 0 : We.visible) === !1,
-            ...x
-          }
-        )
-      )))))
-    ), m !== "pie" && /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: m === "scatter" ? l.toLanguageString(Dn, n.formatXAxis) : l.toLanguageString(
-          Wn,
-          n.formatCategoryAxis
-        ),
-        expanded: de,
-        tabIndex: 0,
-        onAction: Rt
-      },
-      /* @__PURE__ */ e.createElement(v, null, de && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            Gn,
-            n.formatCategoryAxisTitle
-          )
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(u, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          J,
-          {
-            placeholder: l.toLanguageString(
-              Hn,
-              n.formatCategoryAxisTitlePlaceholder
-            ),
-            value: ((Ge = a.categoryAxis[0].title) == null ? void 0 : Ge.text) || "",
-            onChange: Ea
-          }
-        )), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            className: "k-col-span-2",
-            editorId: "categoryAxisTitleFont",
-            labelText: l.toLanguageString(
-              On,
-              n.formatCategoryAxisTitleFont
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "categoryAxisTitleFont",
-              data: k,
-              textField: "text",
-              dataItemKey: "value",
-              itemRender: M,
-              placeholder: l.toLanguageString(
-                Xn,
-                n.formatCategoryAxisTitleFontPlaceholder
-              ),
-              value: k.find(
-                (t) => {
-                  var o, g;
-                  return t.value === ((g = p(
-                    ((o = a.categoryAxis[0].title) == null ? void 0 : o.font) || ""
-                  )) == null ? void 0 : g.name);
-                }
-              ) || d,
-              onChange: pa,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "categoryAxisTitleFontSize",
-            labelText: l.toLanguageString(
-              Yn,
-              n.formatCategoryAxisTitleSize
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "categoryAxisTitleFontSize",
-              data: f,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                jn,
-                n.formatCategoryAxisTitleSizePlaceholder
-              ),
-              value: f.find(
-                (t) => {
-                  var o, g;
-                  return t.value === ((g = p(
-                    ((o = a.categoryAxis[0].title) == null ? void 0 : o.font) || ""
-                  )) == null ? void 0 : g.size);
-                }
-              ) || d,
-              onChange: ka,
-              allowCustom: !0,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "categoryAxisTitleColor",
-            labelText: l.toLanguageString(
-              Un,
-              n.formatCategoryAxisTitleColor
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            P,
-            {
-              id: "categoryAxisTitleColor",
-              view: "gradient",
-              value: ((He = a.categoryAxis[0].title) == null ? void 0 : He.color) || "",
-              onChange: ya,
-              fillMode: "outline"
-            }
-          )
-        ))
-      ), /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            $n,
-            n.formatCategoryAxisLabels
-          )
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
-          u,
-          {
-            className: "k-col-span-2",
-            editorId: "categoryAxisLabelsFont",
-            labelText: l.toLanguageString(
-              qn,
-              n.formatCategoryAxisLabelsFont
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "categoryAxisLabelsFont",
-              data: k,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                Jn,
-                n.formatCategoryAxisLabelsFontPlaceholder
-              ),
-              value: k.find(
-                (t) => {
-                  var o, g;
-                  return t.value === ((g = p(
-                    ((o = a.categoryAxis[0].labels) == null ? void 0 : o.font) || ""
-                  )) == null ? void 0 : g.name);
-                }
-              ) || d,
-              onChange: Fa,
-              itemRender: M,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "categoryAxisLabelsFontSize",
-            labelText: l.toLanguageString(
-              Qn,
-              n.formatCategoryAxisLabelsSize
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "categoryAxisLabelsFontSize",
-              data: f,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                Zn,
-                n.formatCategoryAxisLabelsSizePlaceholder
-              ),
-              value: f.find(
-                (t) => {
-                  var o, g;
-                  return t.value === ((g = p(
-                    ((o = a.categoryAxis[0].labels) == null ? void 0 : o.font) || ""
-                  )) == null ? void 0 : g.size);
-                }
-              ) || d,
-              onChange: Ta,
-              allowCustom: !0,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "categoryAxisLabelsColor",
-            labelText: l.toLanguageString(
-              _n,
-              n.formatCategoryAxisLabelsColor
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            P,
-            {
-              id: "categoryAxisLabelsColor",
-              view: "gradient",
-              value: ((Oe = a.categoryAxis[0].labels) == null ? void 0 : Oe.color) || "",
-              onChange: Ia,
-              fillMode: "outline"
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "categoryAxisLabelsRotation",
-            labelText: l.toLanguageString(
-              eo,
-              n.formatCategoryAxisLabelsRotation
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "categoryAxisLabelsRotation",
-              value: typeof ((Xe = a.categoryAxis[0].labels) == null ? void 0 : Xe.rotation) == "number" ? (Ye = a.categoryAxis[0].labels) == null ? void 0 : Ye.rotation : null,
-              placeholder: l.toLanguageString(
-                to,
-                n.formatCategoryAxisLabelsRotationAuto
-              ),
-              onChange: Na,
-              fillMode: "outline",
-              min: -360,
-              max: 360,
-              step: 1
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(u, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          at,
-          {
-            label: l.toLanguageString(
-              ao,
-              n.formatCategoryAxisLabelsReverseOrder
-            ),
-            checked: a.categoryAxis[0].reverse || !1,
-            onChange: wa
-          }
-        )))
-      ))))
-    ), m !== "pie" && /* @__PURE__ */ e.createElement(
-      A,
-      {
-        style: { maxWidth: "576px" },
-        title: m === "scatter" ? l.toLanguageString(lo, n.formatYAxis) : l.toLanguageString(
-          no,
-          n.formatValueAxis
-        ),
-        expanded: me,
-        tabIndex: 0,
-        onAction: Dt
-      },
-      /* @__PURE__ */ e.createElement(v, null, me && /* @__PURE__ */ e.createElement(L, null, /* @__PURE__ */ e.createElement(B, { onKeyDown: z }, /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            oo,
-            n.formatValueAxisTitle
-          )
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(u, { className: "k-col-span-2" }, /* @__PURE__ */ e.createElement(
-          J,
-          {
-            placeholder: l.toLanguageString(
-              ro,
-              n.formatValueAxisTitlePlaceholder
-            ),
-            value: ((Ue = (je = a.valueAxis[0]) == null ? void 0 : je.title) == null ? void 0 : Ue.text) || "",
-            onChange: za
-          }
-        )), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            className: "k-col-span-2",
-            editorId: "valueAxisTitleFont",
-            labelText: l.toLanguageString(
-              io,
-              n.formatValueAxisTitleFont
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "valueAxisTitleFont",
-              data: k,
-              textField: "text",
-              dataItemKey: "value",
-              itemRender: M,
-              placeholder: l.toLanguageString(
-                so,
-                n.formatValueAxisTitleFontPlaceholder
-              ),
-              value: k.find(
-                (t) => {
-                  var o, g, C;
-                  return t.value === ((C = p(
-                    ((g = (o = a.valueAxis[0]) == null ? void 0 : o.title) == null ? void 0 : g.font) || ""
-                  )) == null ? void 0 : C.name);
-                }
-              ) || d,
-              onChange: Va,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "valueAxisTitleFontSize",
-            labelText: l.toLanguageString(
-              co,
-              n.formatValueAxisTitleSize
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "valueAxisTitleFontSize",
-              data: f,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                go,
-                n.formatValueAxisTitleSizePlaceholder
-              ),
-              value: f.find(
-                (t) => {
-                  var o, g, C;
-                  return t.value === ((C = p(
-                    ((g = (o = a.valueAxis[0]) == null ? void 0 : o.title) == null ? void 0 : g.font) || ""
-                  )) == null ? void 0 : C.size);
-                }
-              ) || d,
-              onChange: Pa,
-              allowCustom: !0,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "valueAxisTitleColor",
-            labelText: l.toLanguageString(
-              uo,
-              n.formatValueAxisTitleColor
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            P,
-            {
-              id: "valueAxisTitleColor",
-              view: "gradient",
-              value: ((qe = ($e = a.valueAxis[0]) == null ? void 0 : $e.title) == null ? void 0 : qe.color) || "",
-              onChange: Ba,
-              fillMode: "outline"
-            }
-          )
-        ))
-      ), /* @__PURE__ */ e.createElement(
-        w,
-        {
-          legend: l.toLanguageString(
-            mo,
-            n.formatValueAxisLabels
-          )
-        },
-        /* @__PURE__ */ e.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ e.createElement(
-          u,
-          {
-            className: "k-col-span-2",
-            editorId: "valueAxisLabelsFormat",
-            labelText: l.toLanguageString(
-              xo,
-              n.formatValueAxisLabelsFormat
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            R,
-            {
-              id: "valueAxisLabelsFormat",
-              data: te,
-              textField: "text",
-              dataItemKey: "value",
-              defaultItem: ee,
-              value: te.find(
-                (t) => {
-                  var o, g;
-                  return t.value === ((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.format);
-                }
-              ) || ee,
-              onChange: Wa,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            className: "k-col-span-2",
-            editorId: "valueAxisLabelsFont",
-            labelText: l.toLanguageString(
-              Co,
-              n.formatValueAxisLabelsFont
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "valueAxisLabelsFont",
-              data: k,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                fo,
-                n.formatValueAxisLabelsFontPlaceholder
-              ),
-              value: k.find(
-                (t) => {
-                  var o, g, C;
-                  return t.value === ((C = p(
-                    ((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.font) || ""
-                  )) == null ? void 0 : C.name);
-                }
-              ) || d,
-              onChange: Ra,
-              itemRender: M,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "valueAxisLabelsFontSize",
-            labelText: l.toLanguageString(
-              bo,
-              n.formatValueAxisLabelsSize
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            E,
-            {
-              id: "valueAxisLabelsFontSize",
-              data: f,
-              textField: "text",
-              dataItemKey: "value",
-              placeholder: l.toLanguageString(
-                ho,
-                n.formatValueAxisLabelsSizePlaceholder
-              ),
-              value: f.find(
-                (t) => {
-                  var o, g, C;
-                  return t.value === ((C = p(
-                    ((g = (o = a.valueAxis[0]) == null ? void 0 : o.labels) == null ? void 0 : g.font) || ""
-                  )) == null ? void 0 : C.size);
-                }
-              ) || d,
-              onChange: Ma,
-              allowCustom: !0,
-              ...x
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "valueAxisLabelsColor",
-            labelText: l.toLanguageString(
-              So,
-              n.formatValueAxisLabelsColor
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            P,
-            {
-              id: "valueAxisLabelsColor",
-              view: "gradient",
-              value: ((Qe = (Je = a.valueAxis[0]) == null ? void 0 : Je.labels) == null ? void 0 : Qe.color) || "",
-              onChange: Ka,
-              fillMode: "outline"
-            }
-          )
-        ), /* @__PURE__ */ e.createElement(
-          u,
-          {
-            editorId: "valueAxisLabelsRotation",
-            labelText: l.toLanguageString(
-              Ao,
-              n.formatValueAxisLabelsRotation
-            )
-          },
-          /* @__PURE__ */ e.createElement(
-            K,
-            {
-              id: "valueAxisLabelsRotation",
-              value: typeof ((_e = (Ze = a.valueAxis[0]) == null ? void 0 : Ze.labels) == null ? void 0 : _e.rotation) == "number" ? (tt = (et = a.valueAxis[0]) == null ? void 0 : et.labels) == null ? void 0 : tt.rotation : null,
-              placeholder: l.toLanguageString(
-                Lo,
-                n.formatValueAxisLabelsRotationAuto
-              ),
-              onChange: Da,
-              fillMode: "outline",
-              min: -360,
-              max: 360,
-              step: 1
-            }
-          )
-        ))
-      ))))
-    ))))))
+    )), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(de, { ref: c, state: t }))), /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(N, { selected: z, onSelect: T, animation: !1 }, /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString(Z, i.tabChart) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ce, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(ue, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(me, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(se, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(pe, { state: t, onStateChange: a }))), /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString(_, i.tabData) }, /* @__PURE__ */ e.createElement(te, { state: t, onStateChange: a })), /* @__PURE__ */ e.createElement(s, { title: o.toLanguageString($, i.tabFormat) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ae, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(ne, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(re, { state: t, onStateChange: a }), /* @__PURE__ */ e.createElement(oe, { state: t, onStateChange: a }), u !== "pie" && /* @__PURE__ */ e.createElement(ie, { state: t, onStateChange: a }), u !== "pie" && /* @__PURE__ */ e.createElement(le, { state: t, onStateChange: a }))))))
   );
 });
-Fo.displayName = "ChartWizard";
+ge.displayName = "ChartWizard";
 export {
-  Fo as ChartWizard
+  ge as ChartWizard
 };