@progress/kendo-react-chart-wizard/components/panels/ConfigurationPanel.mjs

React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source

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