@progress/kendo-react-chart-wizard/components/panels/ChartAreaPanel.js

React Chart Wizard lets you create a chart using data from a Grid, another data-bound component, or an external source

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),c=require("@progress/kendo-react-layout"),x=require("@progress/kendo-react-form"),d=require("../FormFieldSet.js"),l=require("../FormField.js"),s=require("@progress/kendo-react-inputs"),o=require("../../utils.js"),a=require("../../messages.js"),k=require("@progress/kendo-react-intl"),b=require("@progress/kendo-react-animation"),E=g=>{var u;const t=k.useLocalization(),r=g.state,[m,h]=e.useState(!1),C=e.useCallback(n=>{h(!n.expanded)},[]),A=e.useCallback(n=>{g.onStateChange(o.updateState(r,o.ActionTypes.areaMarginLeft,n.target.value))},[r]),f=e.useCallback(n=>{g.onStateChange(o.updateState(r,o.ActionTypes.areaMarginRight,n.target.value))},[r]),M=e.useCallback(n=>{g.onStateChange(o.updateState(r,o.ActionTypes.areaMarginTop,n.target.value))},[r]),p=e.useCallback(n=>{g.onStateChange(o.updateState(r,o.ActionTypes.areaMarginBottom,n.target.value))},[r]),i=r.area.margin,S=e.useCallback(n=>{g.onStateChange(o.updateState(r,o.ActionTypes.areaBackground,n.value))},[r]);return e.createElement(c.ExpansionPanel,{style:{maxWidth:"576px"},title:t.toLanguageString(a.formatChartArea,a.messages.formatChartArea),expanded:m,tabIndex:0,onAction:C},e.createElement(b.Reveal,null,m&&e.createElement(c.ExpansionPanelContent,null,e.createElement(x.FormElement,{onKeyDown:o.stopPropagation},e.createElement(d.FormFieldSet,{legend:t.toLanguageString(a.formatChartAreaMargins,a.messages.formatChartAreaMargins)},e.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},e.createElement(l.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsLeft,a.messages.formatChartAreaMarginsLeft),editorId:"left"},e.createElement(s.NumericTextBox,{id:"left",value:i.left!==void 0?i.left:null,onChange:A,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(l.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsRight,a.messages.formatChartAreaMarginsRight),editorId:"right"},e.createElement(s.NumericTextBox,{id:"right",value:i.right!==void 0?i.right:null,onChange:f,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(l.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsTop,a.messages.formatChartAreaMarginsTop),editorId:"top"},e.createElement(s.NumericTextBox,{id:"top",value:i.top!==void 0?i.top:null,onChange:M,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})),e.createElement(l.FormField,{labelText:t.toLanguageString(a.formatChartAreaMarginsBottom,a.messages.formatChartAreaMarginsBottom),editorId:"bottom"},e.createElement(s.NumericTextBox,{id:"bottom",value:i.bottom!==void 0?i.bottom:null,onChange:p,placeholder:t.toLanguageString(a.formatChartAreaMarginsAuto,a.messages.formatChartAreaMarginsAuto),min:0,max:1e3,step:1,fillMode:"outline"})))),e.createElement(d.FormFieldSet,{legend:t.toLanguageString(a.formatChartAreaBackground,a.messages.formatChartAreaBackground)},e.createElement(l.FormField,{labelText:t.toLanguageString(a.formatChartAreaBackgroundColor,a.messages.formatChartAreaBackgroundColor),editorId:"background"},e.createElement(s.ColorPicker,{id:"background",value:((u=r.area)==null?void 0:u.background)||"",onChange:S,view:"gradient",fillMode:"outline"})))))))};exports.ChartAreaPanel=E;