@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
200 lines (199 loc) • 5.85 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 k, ExpansionPanelContent as S } from "@progress/kendo-react-layout";
import { FormElement as b } from "@progress/kendo-react-form";
import { FormFieldSet as C } from "../FormFieldSet.mjs";
import { FormField as g } from "../FormField.mjs";
import { NumericTextBox as u, ColorPicker as v } from "@progress/kendo-react-inputs";
import { updateState as i, ActionTypes as m, stopPropagation as L } from "../../utils.mjs";
import { formatChartArea as B, messages as r, formatChartAreaMargins as T, formatChartAreaMarginsLeft as I, formatChartAreaMarginsAuto as d, formatChartAreaMarginsRight as R, formatChartAreaMarginsTop as F, formatChartAreaMarginsBottom as P, formatChartAreaBackground as y, formatChartAreaBackgroundColor as w } from "../../messages.mjs";
import { useLocalization as z } from "@progress/kendo-react-intl";
import { Reveal as N } from "@progress/kendo-react-animation";
const Q = (l) => {
var h;
const e = z(), t = l.state, [c, s] = a.useState(!1), f = a.useCallback((o) => {
s(!o.expanded);
}, []), A = a.useCallback(
(o) => {
l.onStateChange(i(t, m.areaMarginLeft, o.target.value));
},
[t]
), p = a.useCallback(
(o) => {
l.onStateChange(i(t, m.areaMarginRight, o.target.value));
},
[t]
), M = a.useCallback(
(o) => {
l.onStateChange(i(t, m.areaMarginTop, o.target.value));
},
[t]
), x = a.useCallback(
(o) => {
l.onStateChange(i(t, m.areaMarginBottom, o.target.value));
},
[t]
), n = t.area.margin, E = a.useCallback(
(o) => {
l.onStateChange(i(t, m.areaBackground, o.value));
},
[t]
);
return /* @__PURE__ */ a.createElement(
k,
{
style: { maxWidth: "576px" },
title: e.toLanguageString(B, r.formatChartArea),
expanded: c,
tabIndex: 0,
onAction: f
},
/* @__PURE__ */ a.createElement(N, null, c && /* @__PURE__ */ a.createElement(S, null, /* @__PURE__ */ a.createElement(b, { onKeyDown: L }, /* @__PURE__ */ a.createElement(
C,
{
legend: e.toLanguageString(
T,
r.formatChartAreaMargins
)
},
/* @__PURE__ */ a.createElement("div", { className: "k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4" }, /* @__PURE__ */ a.createElement(
g,
{
labelText: e.toLanguageString(
I,
r.formatChartAreaMarginsLeft
),
editorId: "left"
},
/* @__PURE__ */ a.createElement(
u,
{
id: "left",
value: n.left !== void 0 ? n.left : null,
onChange: A,
placeholder: e.toLanguageString(
d,
r.formatChartAreaMarginsAuto
),
min: 0,
max: 1e3,
step: 1,
fillMode: "outline"
}
)
), /* @__PURE__ */ a.createElement(
g,
{
labelText: e.toLanguageString(
R,
r.formatChartAreaMarginsRight
),
editorId: "right"
},
/* @__PURE__ */ a.createElement(
u,
{
id: "right",
value: n.right !== void 0 ? n.right : null,
onChange: p,
placeholder: e.toLanguageString(
d,
r.formatChartAreaMarginsAuto
),
min: 0,
max: 1e3,
step: 1,
fillMode: "outline"
}
)
), /* @__PURE__ */ a.createElement(
g,
{
labelText: e.toLanguageString(
F,
r.formatChartAreaMarginsTop
),
editorId: "top"
},
/* @__PURE__ */ a.createElement(
u,
{
id: "top",
value: n.top !== void 0 ? n.top : null,
onChange: M,
placeholder: e.toLanguageString(
d,
r.formatChartAreaMarginsAuto
),
min: 0,
max: 1e3,
step: 1,
fillMode: "outline"
}
)
), /* @__PURE__ */ a.createElement(
g,
{
labelText: e.toLanguageString(
P,
r.formatChartAreaMarginsBottom
),
editorId: "bottom"
},
/* @__PURE__ */ a.createElement(
u,
{
id: "bottom",
value: n.bottom !== void 0 ? n.bottom : null,
onChange: x,
placeholder: e.toLanguageString(
d,
r.formatChartAreaMarginsAuto
),
min: 0,
max: 1e3,
step: 1,
fillMode: "outline"
}
)
))
), /* @__PURE__ */ a.createElement(
C,
{
legend: e.toLanguageString(
y,
r.formatChartAreaBackground
)
},
/* @__PURE__ */ a.createElement(
g,
{
labelText: e.toLanguageString(
w,
r.formatChartAreaBackgroundColor
),
editorId: "background"
},
/* @__PURE__ */ a.createElement(
v,
{
id: "background",
value: ((h = t.area) == null ? void 0 : h.background) || "",
onChange: E,
view: "gradient",
fillMode: "outline"
}
)
)
))))
);
};
export {
Q as ChartAreaPanel
};