@progress/kendo-react-chart-wizard/components/panels/SeriesPanel.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 t from "react";
import { ExpansionPanel as k, ExpansionPanelContent as w } from "@progress/kendo-react-layout";
import { FormElement as T } from "@progress/kendo-react-form";
import { FormField as m } from "../FormField.mjs";
import { ColorPicker as P, Checkbox as I } from "@progress/kendo-react-inputs";
import { stopPropagation as D, isCategorical as F, dropdownlistCommonProps as z, updateState as b, ActionTypes as v } from "../../utils.mjs";
import { formatSeriesAllSeries as K, messages as i, formatSeries as N, formatSeriesApplyTo as R, formatSeriesColor as _, formatSeriesShowLabels as j } from "../../messages.mjs";
import { useLocalization as M } from "@progress/kendo-react-intl";
import { DropDownList as W } from "@progress/kendo-react-dropdowns";
import { Reveal as q } from "@progress/kendo-react-animation";
const Z = (n) => {
  var f, p, g, u, C;
  const [a, c] = t.useState(""), r = M(), o = n.state, d = o.seriesType, E = typeof ((f = o.series[0]) == null ? void 0 : f.stack) == "object" ? (p = o.series[0]) == null ? void 0 : p.stack.type : !1, [S, h] = t.useState(!1), x = t.useCallback((e) => {
    h(!e.expanded);
  }, []), y = (e) => {
    a && n.onStateChange(
      b(o, v.seriesColor, { seriesName: a, color: e.value })
    );
  }, L = (e) => {
    n.onStateChange(
      b(o, v.seriesLabel, {
        seriesName: a,
        all: !a,
        visible: e.value
      })
    );
  }, l = {
    name: r.toLanguageString(K, i.formatSeriesAllSeries)
  }, A = (e) => {
    const s = e.target.value.name;
    c(s === l.name ? "" : s);
  };
  return t.useEffect(() => {
    c("");
  }, [d, E]), /* @__PURE__ */ t.createElement(
    k,
    {
      style: { maxWidth: "576px" },
      title: r.toLanguageString(N, i.formatSeries),
      expanded: S,
      tabIndex: 0,
      onAction: x
    },
    /* @__PURE__ */ t.createElement(q, null, S && /* @__PURE__ */ t.createElement(w, null, /* @__PURE__ */ t.createElement(T, { onKeyDown: D }, /* @__PURE__ */ t.createElement(
      m,
      {
        editorId: "apply-to-series",
        labelText: r.toLanguageString(
          R,
          i.formatSeriesApplyTo
        )
      },
      /* @__PURE__ */ t.createElement(
        W,
        {
          id: "apply-to-series",
          data: o.series,
          textField: "name",
          dataItemKey: "name",
          defaultItem: l,
          disabled: !F(d),
          value: o.series.find((e) => e.name === a) || l,
          onChange: A,
          ...z
        }
      )
    ), /* @__PURE__ */ t.createElement(
      m,
      {
        editorId: "seriesColor",
        labelText: r.toLanguageString(_, i.formatSeriesColor)
      },
      /* @__PURE__ */ t.createElement(
        P,
        {
          id: "seriesColor",
          value: a ? (g = o.series.find((e) => e.name === a)) == null ? void 0 : g.color : "",
          onChange: y,
          disabled: !a,
          view: "gradient",
          fillMode: "outline"
        }
      )
    ), /* @__PURE__ */ t.createElement(m, null, /* @__PURE__ */ t.createElement(
      I,
      {
        label: r.toLanguageString(
          j,
          i.formatSeriesShowLabels
        ),
        checked: a ? (C = (u = o.series.find((e) => e.name === a)) == null ? void 0 : u.labels) == null ? void 0 : C.visible : o.series.every((e) => {
          var s;
          return (s = e.labels) == null ? void 0 : s.visible;
        }),
        onChange: L
      }
    )))))
  );
};
export {
  Z as SeriesPanel
};