@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
332 lines (331 loc) • 11.5 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 a from "react";
import { ExpansionPanel as J, ExpansionPanelContent as O } from "@progress/kendo-react-layout";
import { FormElement as Q } from "@progress/kendo-react-form";
import { FormFieldSet as N } from "../FormFieldSet.mjs";
import { FormField as u } from "../FormField.mjs";
import { Input as U, ColorPicker as y, NumericTextBox as X } from "@progress/kendo-react-inputs";
import { stopPropagation as Z, fontNames as d, itemRender as k, parseFont as c, nullItem as g, dropdownlistCommonProps as A, fontSizes as f, updateState as m, ActionTypes as x, ensureValue as R } from "../../utils.mjs";
import { formatValueAxisLabelsFormatText as $, messages as o, formatValueAxisLabelsFormatNumber as ee, formatValueAxisLabelsFormatCurrency as ae, formatValueAxisLabelsFormatPercent as te, formatYAxis as le, formatValueAxis as oe, formatValueAxisTitle as ie, formatValueAxisTitlePlaceholder as ne, formatValueAxisTitleFont as re, formatValueAxisTitleFontPlaceholder as se, formatValueAxisTitleSize as ue, formatValueAxisTitleSizePlaceholder as me, formatValueAxisTitleColor as xe, formatValueAxisLabels as ge, formatValueAxisLabelsFormat as Ae, formatValueAxisLabelsFont as de, formatValueAxisLabelsFontPlaceholder as ce, formatValueAxisLabelsSize as fe, formatValueAxisLabelsSizePlaceholder as ve, formatValueAxisLabelsColor as Le, formatValueAxisLabelsRotation as be, formatValueAxisLabelsRotationAuto as Ve } from "../../messages.mjs";
import { useLocalization as Se } from "@progress/kendo-react-intl";
import { Reveal as Fe } from "@progress/kendo-react-animation";
import { ComboBox as v, DropDownList as Ce } from "@progress/kendo-react-dropdowns";
const we = (s) => {
var S, F, C, h, T, E, p, z, P, I;
const l = Se(), i = s.state, w = i.seriesType, L = {
text: l.toLanguageString($, o.formatValueAxisLabelsFormatText),
value: ""
}, b = [
{
value: "n0",
text: l.toLanguageString(
ee,
o.formatValueAxisLabelsFormatNumber
)
},
{
value: "c0",
text: l.toLanguageString(
ae,
o.formatValueAxisLabelsFormatCurrency
)
},
{
value: "p0",
text: l.toLanguageString(
te,
o.formatValueAxisLabelsFormatPercent
)
}
], [V, K] = a.useState(!1), D = a.useCallback((e) => {
K(!e.expanded);
}, []), M = (e) => {
s.onStateChange(m(i, x.valueAxisTitleText, e.target.value));
}, B = (e) => {
const t = e.target.value || g;
R(t) && s.onStateChange(m(i, x.valueAxisTitleFontSize, t.value));
}, Y = (e) => {
const t = e.target.value || g;
s.onStateChange(m(i, x.valueAxisTitleFontName, t.value));
}, _ = (e) => {
s.onStateChange(m(i, x.valueAxisTitleColor, e.value));
}, W = (e) => {
const t = e.target.value || g;
R(t) && s.onStateChange(m(i, x.valueAxisLabelsFontSize, t.value));
}, j = (e) => {
const t = e.target.value || g;
s.onStateChange(m(i, x.valueAxisLabelsFontName, t.value));
}, q = (e) => {
s.onStateChange(m(i, x.valueAxisLabelsColor, e.value));
}, G = (e) => {
s.onStateChange(m(i, x.valueAxisLabelsRotation, e.target.value));
}, H = (e) => {
const t = e.target.value;
s.onStateChange(m(i, x.valueAxisLabelsFormat, t.value));
};
return /* @__PURE__ */ a.createElement(
J,
{
style: { maxWidth: "576px" },
title: w === "scatter" ? l.toLanguageString(le, o.formatYAxis) : l.toLanguageString(oe, o.formatValueAxis),
expanded: V,
tabIndex: 0,
onAction: D
},
/* @__PURE__ */ a.createElement(Fe, null, V && /* @__PURE__ */ a.createElement(O, null, /* @__PURE__ */ a.createElement(Q, { onKeyDown: Z }, /* @__PURE__ */ a.createElement(
N,
{
legend: l.toLanguageString(
ie,
o.formatValueAxisTitle
)
},
/* @__PURE__ */ a.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ a.createElement(u, { className: "k-col-span-2" }, /* @__PURE__ */ a.createElement(
U,
{
placeholder: l.toLanguageString(
ne,
o.formatValueAxisTitlePlaceholder
),
value: ((F = (S = i.valueAxis[0]) == null ? void 0 : S.title) == null ? void 0 : F.text) || "",
onChange: M
}
)), /* @__PURE__ */ a.createElement(
u,
{
className: "k-col-span-2",
editorId: "valueAxisTitleFont",
labelText: l.toLanguageString(
re,
o.formatValueAxisTitleFont
)
},
/* @__PURE__ */ a.createElement(
v,
{
id: "valueAxisTitleFont",
data: d,
textField: "text",
dataItemKey: "value",
itemRender: k,
placeholder: l.toLanguageString(
se,
o.formatValueAxisTitleFontPlaceholder
),
value: d.find(
(e) => {
var t, n, r;
return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : r.name);
}
) || g,
onChange: Y,
...A
}
)
), /* @__PURE__ */ a.createElement(
u,
{
editorId: "valueAxisTitleFontSize",
labelText: l.toLanguageString(
ue,
o.formatValueAxisTitleSize
)
},
/* @__PURE__ */ a.createElement(
v,
{
id: "valueAxisTitleFontSize",
data: f,
textField: "text",
dataItemKey: "value",
placeholder: l.toLanguageString(
me,
o.formatValueAxisTitleSizePlaceholder
),
value: f.find(
(e) => {
var t, n, r;
return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.title) == null ? void 0 : n.font) || "")) == null ? void 0 : r.size);
}
) || g,
onChange: B,
allowCustom: !0,
...A
}
)
), /* @__PURE__ */ a.createElement(
u,
{
editorId: "valueAxisTitleColor",
labelText: l.toLanguageString(
xe,
o.formatValueAxisTitleColor
)
},
/* @__PURE__ */ a.createElement(
y,
{
id: "valueAxisTitleColor",
view: "gradient",
value: ((h = (C = i.valueAxis[0]) == null ? void 0 : C.title) == null ? void 0 : h.color) || "",
onChange: _,
fillMode: "outline"
}
)
))
), /* @__PURE__ */ a.createElement(
N,
{
legend: l.toLanguageString(
ge,
o.formatValueAxisLabels
)
},
/* @__PURE__ */ a.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ a.createElement(
u,
{
className: "k-col-span-2",
editorId: "valueAxisLabelsFormat",
labelText: l.toLanguageString(
Ae,
o.formatValueAxisLabelsFormat
)
},
/* @__PURE__ */ a.createElement(
Ce,
{
id: "valueAxisLabelsFormat",
data: b,
textField: "text",
dataItemKey: "value",
defaultItem: L,
value: b.find(
(e) => {
var t, n;
return e.value === ((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.format);
}
) || L,
onChange: H,
...A
}
)
), /* @__PURE__ */ a.createElement(
u,
{
className: "k-col-span-2",
editorId: "valueAxisLabelsFont",
labelText: l.toLanguageString(
de,
o.formatValueAxisLabelsFont
)
},
/* @__PURE__ */ a.createElement(
v,
{
id: "valueAxisLabelsFont",
data: d,
textField: "text",
dataItemKey: "value",
placeholder: l.toLanguageString(
ce,
o.formatValueAxisLabelsFontPlaceholder
),
value: d.find(
(e) => {
var t, n, r;
return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : r.name);
}
) || g,
onChange: j,
itemRender: k,
...A
}
)
), /* @__PURE__ */ a.createElement(
u,
{
editorId: "valueAxisLabelsFontSize",
labelText: l.toLanguageString(
fe,
o.formatValueAxisLabelsSize
)
},
/* @__PURE__ */ a.createElement(
v,
{
id: "valueAxisLabelsFontSize",
data: f,
textField: "text",
dataItemKey: "value",
placeholder: l.toLanguageString(
ve,
o.formatValueAxisLabelsSizePlaceholder
),
value: f.find(
(e) => {
var t, n, r;
return e.value === ((r = c(((n = (t = i.valueAxis[0]) == null ? void 0 : t.labels) == null ? void 0 : n.font) || "")) == null ? void 0 : r.size);
}
) || g,
onChange: W,
allowCustom: !0,
...A
}
)
), /* @__PURE__ */ a.createElement(
u,
{
editorId: "valueAxisLabelsColor",
labelText: l.toLanguageString(
Le,
o.formatValueAxisLabelsColor
)
},
/* @__PURE__ */ a.createElement(
y,
{
id: "valueAxisLabelsColor",
view: "gradient",
value: ((E = (T = i.valueAxis[0]) == null ? void 0 : T.labels) == null ? void 0 : E.color) || "",
onChange: q,
fillMode: "outline"
}
)
), /* @__PURE__ */ a.createElement(
u,
{
editorId: "valueAxisLabelsRotation",
labelText: l.toLanguageString(
be,
o.formatValueAxisLabelsRotation
)
},
/* @__PURE__ */ a.createElement(
X,
{
id: "valueAxisLabelsRotation",
value: typeof ((z = (p = i.valueAxis[0]) == null ? void 0 : p.labels) == null ? void 0 : z.rotation) == "number" ? (I = (P = i.valueAxis[0]) == null ? void 0 : P.labels) == null ? void 0 : I.rotation : null,
placeholder: l.toLanguageString(
Ve,
o.formatValueAxisLabelsRotationAuto
),
onChange: G,
fillMode: "outline",
min: -360,
max: 360,
step: 1
}
)
))
))))
);
};
export {
we as ValueAxisPanel
};