@progress/kendo-react-chart-wizard/components/panels/ValueAxisPanel.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 l=require("react"),h=require("@progress/kendo-react-layout"),M=require("@progress/kendo-react-form"),E=require("../FormFieldSet.js"),m=require("../FormField.js"),g=require("@progress/kendo-react-inputs"),e=require("../../utils.js"),a=require("../../messages.js"),Y=require("@progress/kendo-react-intl"),j=require("@progress/kendo-react-animation"),x=require("@progress/kendo-react-dropdowns"),O=u=>{var f,v,F,b,L,S,V,C,T,p;const s=Y.useLocalization(),n=u.state,y=n.seriesType,d={text:s.toLanguageString(a.formatValueAxisLabelsFormatText,a.messages.formatValueAxisLabelsFormatText),value:""},c=[{value:"n0",text:s.toLanguageString(a.formatValueAxisLabelsFormatNumber,a.messages.formatValueAxisLabelsFormatNumber)},{value:"c0",text:s.toLanguageString(a.formatValueAxisLabelsFormatCurrency,a.messages.formatValueAxisLabelsFormatCurrency)},{value:"p0",text:s.toLanguageString(a.formatValueAxisLabelsFormatPercent,a.messages.formatValueAxisLabelsFormatPercent)}],[A,z]=l.useState(!1),I=l.useCallback(t=>{z(!t.expanded)},[]),P=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleText,t.target.value))},k=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontSize,o.value))},R=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleFontName,o.value))},N=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisTitleColor,t.value))},w=t=>{const o=t.target.value||e.nullItem;e.ensureValue(o)&&u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontSize,o.value))},q=t=>{const o=t.target.value||e.nullItem;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFontName,o.value))},K=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsColor,t.value))},B=t=>{u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsRotation,t.target.value))},D=t=>{const o=t.target.value;u.onStateChange(e.updateState(n,e.ActionTypes.valueAxisLabelsFormat,o.value))};return l.createElement(h.ExpansionPanel,{style:{maxWidth:"576px"},title:y==="scatter"?s.toLanguageString(a.formatYAxis,a.messages.formatYAxis):s.toLanguageString(a.formatValueAxis,a.messages.formatValueAxis),expanded:A,tabIndex:0,onAction:I},l.createElement(j.Reveal,null,A&&l.createElement(h.ExpansionPanelContent,null,l.createElement(M.FormElement,{onKeyDown:e.stopPropagation},l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisTitle,a.messages.formatValueAxisTitle)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2"},l.createElement(g.Input,{placeholder:s.toLanguageString(a.formatValueAxisTitlePlaceholder,a.messages.formatValueAxisTitlePlaceholder),value:((v=(f=n.valueAxis[0])==null?void 0:f.title)==null?void 0:v.text)||"",onChange:P})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisTitleFont",labelText:s.toLanguageString(a.formatValueAxisTitleFont,a.messages.formatValueAxisTitleFont)},l.createElement(x.ComboBox,{id:"valueAxisTitleFont",data:e.fontNames,textField:"text",dataItemKey:"value",itemRender:e.itemRender,placeholder:s.toLanguageString(a.formatValueAxisTitleFontPlaceholder,a.messages.formatValueAxisTitleFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:R,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleFontSize",labelText:s.toLanguageString(a.formatValueAxisTitleSize,a.messages.formatValueAxisTitleSize)},l.createElement(x.ComboBox,{id:"valueAxisTitleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisTitleSizePlaceholder,a.messages.formatValueAxisTitleSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.title)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:k,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisTitleColor",labelText:s.toLanguageString(a.formatValueAxisTitleColor,a.messages.formatValueAxisTitleColor)},l.createElement(g.ColorPicker,{id:"valueAxisTitleColor",view:"gradient",value:((b=(F=n.valueAxis[0])==null?void 0:F.title)==null?void 0:b.color)||"",onChange:N,fillMode:"outline"})))),l.createElement(E.FormFieldSet,{legend:s.toLanguageString(a.formatValueAxisLabels,a.messages.formatValueAxisLabels)},l.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFormat",labelText:s.toLanguageString(a.formatValueAxisLabelsFormat,a.messages.formatValueAxisLabelsFormat)},l.createElement(x.DropDownList,{id:"valueAxisLabelsFormat",data:c,textField:"text",dataItemKey:"value",defaultItem:d,value:c.find(t=>{var o,i;return t.value===((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.format)})||d,onChange:D,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{className:"k-col-span-2",editorId:"valueAxisLabelsFont",labelText:s.toLanguageString(a.formatValueAxisLabelsFont,a.messages.formatValueAxisLabelsFont)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsFontPlaceholder,a.messages.formatValueAxisLabelsFontPlaceholder),value:e.fontNames.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.name)})||e.nullItem,onChange:q,itemRender:e.itemRender,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsFontSize",labelText:s.toLanguageString(a.formatValueAxisLabelsSize,a.messages.formatValueAxisLabelsSize)},l.createElement(x.ComboBox,{id:"valueAxisLabelsFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:s.toLanguageString(a.formatValueAxisLabelsSizePlaceholder,a.messages.formatValueAxisLabelsSizePlaceholder),value:e.fontSizes.find(t=>{var o,i,r;return t.value===((r=e.parseFont(((i=(o=n.valueAxis[0])==null?void 0:o.labels)==null?void 0:i.font)||""))==null?void 0:r.size)})||e.nullItem,onChange:w,allowCustom:!0,...e.dropdownlistCommonProps})),l.createElement(m.FormField,{editorId:"valueAxisLabelsColor",labelText:s.toLanguageString(a.formatValueAxisLabelsColor,a.messages.formatValueAxisLabelsColor)},l.createElement(g.ColorPicker,{id:"valueAxisLabelsColor",view:"gradient",value:((S=(L=n.valueAxis[0])==null?void 0:L.labels)==null?void 0:S.color)||"",onChange:K,fillMode:"outline"})),l.createElement(m.FormField,{editorId:"valueAxisLabelsRotation",labelText:s.toLanguageString(a.formatValueAxisLabelsRotation,a.messages.formatValueAxisLabelsRotation)},l.createElement(g.NumericTextBox,{id:"valueAxisLabelsRotation",value:typeof((C=(V=n.valueAxis[0])==null?void 0:V.labels)==null?void 0:C.rotation)=="number"?(p=(T=n.valueAxis[0])==null?void 0:T.labels)==null?void 0:p.rotation:null,placeholder:s.toLanguageString(a.formatValueAxisLabelsRotationAuto,a.messages.formatValueAxisLabelsRotationAuto),onChange:B,fillMode:"outline",min:-360,max:360,step:1}))))))))};exports.ValueAxisPanel=O;