@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
77 lines (76 loc) • 2.83 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 t from "react";
import { Reveal as f } from "@progress/kendo-react-animation";
import { useLocalization as y } from "@progress/kendo-react-intl";
import { ExpansionPanel as T, ExpansionPanelContent as L } from "@progress/kendo-react-layout";
import { stackState as N, mergeStates as m, createState as r, updateState as i, ActionTypes as C, stackNormal as I, stack100 as A } from "../../utils.mjs";
import { SeriesTypesWrap as P } from "../SeriesTypesWrap.mjs";
import { SeriesTypeButton as s } from "../SeriesTypeButton.mjs";
import { columnChart as b, messages as c, columnChartColumn as w, columnChartStackedColumn as z, columnChart100StackedColumn as R } from "../../messages.mjs";
import { chartColumnClusteredIcon as W, chartColumnStackedIcon as v, chartColumnStacked100Icon as B } from "@progress/kendo-svg-icons";
const M = (a) => {
const o = y(), e = a.state, l = e.seriesType, { isStackFalse: d, isStackNormal: S, isStack100: h } = N(e), [u, k] = t.useState(!0), p = t.useCallback((n) => {
k(!n.expanded);
}, []), g = () => {
a.onStateChange(m(e, r(e.data, "column")));
}, x = () => {
const n = m(e, r(e.data, "column"));
a.onStateChange(i(n, C.stacked, I));
}, E = () => {
const n = m(e, r(e.data, "column"));
a.onStateChange(i(n, C.stacked, A));
};
return /* @__PURE__ */ t.createElement(
T,
{
style: { maxWidth: "576px" },
title: o.toLanguageString(b, c.columnChart),
expanded: u,
tabIndex: 0,
onAction: p
},
/* @__PURE__ */ t.createElement(f, null, u && /* @__PURE__ */ t.createElement(L, null, /* @__PURE__ */ t.createElement(P, null, /* @__PURE__ */ t.createElement(
s,
{
selected: l === "column" && d,
onClick: g,
icon: W,
iconName: "chart-column-clustered"
},
o.toLanguageString(w, c.columnChartColumn)
), /* @__PURE__ */ t.createElement(
s,
{
selected: l === "column" && S,
onClick: x,
icon: v,
iconName: "chart-column-stacked"
},
o.toLanguageString(
z,
c.columnChartStackedColumn
)
), /* @__PURE__ */ t.createElement(
s,
{
selected: l === "column" && h,
onClick: E,
icon: B,
iconName: "chart-column-stacked100"
},
o.toLanguageString(
R,
c.columnChart100StackedColumn
)
))))
);
};
export {
M as ColumnChartPanel
};