@progress/kendo-react-chart-wizard
Version:
React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source
315 lines (314 loc) • 10.6 kB
JavaScript
/**
* @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 { 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
};