@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
133 lines (132 loc) • 6.98 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 * as e from "react";
import { Window as N } from "@progress/kendo-react-dialogs";
import { Splitter as y, TabStrip as W, TabStripTab as f } from "@progress/kendo-react-layout";
import { DropDownButton as F } from "@progress/kendo-react-buttons";
import { exportIcon as H, filePdfIcon as G, fileIcon as A, fileImageIcon as V } from "@progress/kendo-svg-icons";
import { resolveExportOptions as O, createInitialState as M, mergeStates as U, createState as j, handlePDFExport as q, handleSVGExport as J, handleImageExport as K } from "./utils.mjs";
import { useLocalization as Q } from "@progress/kendo-react-intl";
import { windowTitle as X, messages as l, exportButton as Y, exportPDFButton as Z, exportSVGButton as _, exportPNGButton as $, tabChart as ee, tabData as te, tabFormat as ae } from "./messages.mjs";
import { ExportEvent as ne } from "./types/export.mjs";
import { ConfigurationPanel as re } from "./components/panels/ConfigurationPanel.mjs";
import { ChartAreaPanel as oe } from "./components/panels/ChartAreaPanel.mjs";
import { TitlePanel as ie } from "./components/panels/TitlePanel.mjs";
import { SeriesPanel as le } from "./components/panels/SeriesPanel.mjs";
import { LegendPanel as ce } from "./components/panels/LegendPanel.mjs";
import { CategoryAxisPanel as se } from "./components/panels/CategoryAxisPanel.mjs";
import { ValueAxisPanel as me } from "./components/panels/ValueAxisPanel.mjs";
import { BarChartPanel as ue } from "./components/panels/BarChartPanel.mjs";
import { ColumnChartPanel as fe } from "./components/panels/ColumnChartPanel.mjs";
import { LineChartPanel as de } from "./components/panels/LineChartPanel.mjs";
import { ScatterChartPanel as pe } from "./components/panels/ScatterChartPanel.mjs";
import { PieChartPanel as ge } from "./components/panels/PieChartPanel.mjs";
import { ChartComponent as he } from "./components/ChartComponent.mjs";
const Se = e.forwardRef((a, h) => {
const i = Q(), d = e.useRef(null), s = e.useRef(null), S = e.useCallback(
(t) => {
var o;
if (s.current) {
const u = new ne(s.current, O(a.exportOptions));
(o = a.onExport) == null || o.call(void 0, u), u.isDefaultPrevented() || t.item.exportHandler.call(void 0, u);
}
},
[a.onExport, a.exportOptions]
), E = a.window || N, [x, C] = e.useState({ width: 700, height: 550 }), [w, v] = e.useState("DEFAULT"), P = e.useCallback((t) => {
C({ width: t.width, height: t.height });
}, []), b = e.useCallback((t) => {
v(t.state);
}, []), [k, z] = e.useState([
{ collapsible: !1 },
{ size: "300px", collapsible: !1 }
]), I = e.useCallback((t) => {
z(t.newState);
}, []), [T, B] = e.useState(0), L = e.useCallback((t) => {
B(t.selected);
}, []), [R, p] = e.useState(
M(a.data || [], "bar", a.defaultState)
), r = (t) => {
var o;
(o = a.onStateChange) == null || o.call(void 0, t), a.state || p(t);
}, n = a.state || R, c = e.useRef(n);
c.current = n;
const m = e.useRef(a);
m.current = a;
const D = e.useCallback(
() => ({
get chart() {
return s.current;
},
get state() {
return c.current;
}
}),
[]
);
e.useImperativeHandle(h, D), e.useEffect(() => {
var t;
if (c.current.seriesType && a.data) {
const o = U(c.current, j(a.data, c.current.seriesType));
(t = m.current.onStateChange) == null || t.call(void 0, o), m.current.state || p(o);
}
}, [a.data]), e.useEffect(() => {
var t, o;
(o = (t = d.current) == null ? void 0 : t.element) == null || o.focus();
}, []);
const g = n.seriesType;
return /* @__PURE__ */ e.createElement(
E,
{
title: i.toLanguageString(X, l.windowTitle),
className: "k-chart-wizard",
modal: !0,
resizable: !0,
minimizeButton: () => null,
onClose: a.onClose,
onResize: P,
stage: w,
onStageChange: b,
...x
},
/* @__PURE__ */ e.createElement(y, { panes: k, onChange: I, className: "k-chart-wizard-splitter" }, /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-preview-pane k-pane" }, /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-header" }, /* @__PURE__ */ e.createElement(
F,
{
ref: d,
text: i.toLanguageString(Y, l.exportButton),
fillMode: "flat",
svgIcon: H,
icon: "export",
onItemClick: S,
items: [
{
svgIcon: G,
icon: "file-pdf",
exportHandler: q,
text: i.toLanguageString(Z, l.exportPDFButton)
},
{
svgIcon: A,
icon: "file",
exportHandler: J,
text: i.toLanguageString(_, l.exportSVGButton)
},
{
svgIcon: V,
icon: "file-image",
exportHandler: K,
text: i.toLanguageString($, l.exportPNGButton)
}
]
}
)), /* @__PURE__ */ e.createElement("div", { className: "k-preview-pane-content", style: { height: "calc(100% - 50px)" } }, /* @__PURE__ */ e.createElement(he, { ref: s, state: n }))), /* @__PURE__ */ e.createElement("div", { className: "k-chart-wizard-property-pane k-pane k-pane-static" }, /* @__PURE__ */ e.createElement(W, { selected: T, onSelect: L, animation: !1 }, /* @__PURE__ */ e.createElement(f, { title: i.toLanguageString(ee, l.tabChart) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(ue, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(ge, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(fe, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(de, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(pe, { state: n, onStateChange: r }))), /* @__PURE__ */ e.createElement(f, { title: i.toLanguageString(te, l.tabData) }, /* @__PURE__ */ e.createElement(re, { state: n, onStateChange: r })), /* @__PURE__ */ e.createElement(f, { title: i.toLanguageString(ae, l.tabFormat) }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement(oe, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(ie, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(le, { state: n, onStateChange: r }), /* @__PURE__ */ e.createElement(ce, { state: n, onStateChange: r }), g !== "pie" && /* @__PURE__ */ e.createElement(se, { state: n, onStateChange: r }), g !== "pie" && /* @__PURE__ */ e.createElement(me, { state: n, onStateChange: r }))))))
);
});
Se.displayName = "ChartWizard";
export {
Se as ChartWizard
};