@progress/kendo-react-chart-wizard/components/panels/CategoryAxisPanel.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 t=require("react"),f=require("@progress/kendo-react-layout"),P=require("@progress/kendo-react-form"),b=require("../FormFieldSet.js"),g=require("../FormField.js"),c=require("@progress/kendo-react-inputs"),e=require("../../utils.js"),a=require("../../messages.js"),N=require("@progress/kendo-react-intl"),q=require("@progress/kendo-react-animation"),m=require("@progress/kendo-react-dropdowns"),w=i=>{var x,u,C,y,A;const r=N.useLocalization(),o=i.state,S=o.seriesType,[d,F]=t.useState(!1),L=t.useCallback(l=>{F(!l.expanded)},[]),T=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleText,l.target.value))},[o]),h=t.useCallback(l=>{const n=l.target.value||e.nullItem;e.ensureValue(n)&&i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleFontSize,n.value))},[o]),p=t.useCallback(l=>{const n=l.target.value||e.nullItem;i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleFontName,n.value))},[o]),v=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisTitleColor,l.value))},[o]),k=t.useCallback(l=>{const n=l.target.value||e.nullItem;e.ensureValue(n)&&i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsFontSize,n.value))},[o]),E=t.useCallback(l=>{const n=l.target.value||e.nullItem;i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsFontName,n.value))},[o]),z=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsColor,l.value))},[o]),R=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisLabelsRotation,l.target.value))},[o]),I=t.useCallback(l=>{i.onStateChange(e.updateState(o,e.ActionTypes.categoryAxisReverseOrder,l.value))},[o]);return t.createElement(f.ExpansionPanel,{style:{maxWidth:"576px"},title:S==="scatter"?r.toLanguageString(a.formatXAxis,a.messages.formatXAxis):r.toLanguageString(a.formatCategoryAxis,a.messages.formatCategoryAxis),expanded:d,tabIndex:0,onAction:L},t.createElement(q.Reveal,null,d&&t.createElement(f.ExpansionPanelContent,null,t.createElement(P.FormElement,{onKeyDown:e.stopPropagation},t.createElement(b.FormFieldSet,{legend:r.toLanguageString(a.formatCategoryAxisTitle,a.messages.formatCategoryAxisTitle)},t.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},t.createElement(g.FormField,{className:"k-col-span-2"},t.createElement(c.Input,{placeholder:r.toLanguageString(a.formatCategoryAxisTitlePlaceholder,a.messages.formatCategoryAxisTitlePlaceholder),value:((x=o.categoryAxis[0].title)==null?void 0:x.text)||"",onChange:T})),t.createElement(g.FormField,{className:"k-col-span-2",editorId:"categoryAxisTitleFont",labelText:r.toLanguageString(a.formatCategoryAxisTitleFont,a.messages.formatCategoryAxisTitleFont)},t.createElement(m.ComboBox,{id:"categoryAxisTitleFont",data:e.fontNames,textField:"text",dataItemKey:"value",itemRender:e.itemRender,placeholder:r.toLanguageString(a.formatCategoryAxisTitleFontPlaceholder,a.messages.formatCategoryAxisTitleFontPlaceholder),value:e.fontNames.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].title)==null?void 0:n.font)||""))==null?void 0:s.name)})||e.nullItem,onChange:p,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisTitleFontSize",labelText:r.toLanguageString(a.formatCategoryAxisTitleSize,a.messages.formatCategoryAxisTitleSize)},t.createElement(m.ComboBox,{id:"categoryAxisTitleFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisTitleSizePlaceholder,a.messages.formatCategoryAxisTitleSizePlaceholder),value:e.fontSizes.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].title)==null?void 0:n.font)||""))==null?void 0:s.size)})||e.nullItem,onChange:h,allowCustom:!0,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisTitleColor",labelText:r.toLanguageString(a.formatCategoryAxisTitleColor,a.messages.formatCategoryAxisTitleColor)},t.createElement(c.ColorPicker,{id:"categoryAxisTitleColor",view:"gradient",value:((u=o.categoryAxis[0].title)==null?void 0:u.color)||"",onChange:v,fillMode:"outline"})))),t.createElement(b.FormFieldSet,{legend:r.toLanguageString(a.formatCategoryAxisLabels,a.messages.formatCategoryAxisLabels)},t.createElement("div",{className:"k-form-layout k-d-grid k-grid-cols-2 k-gap-x-4"},t.createElement(g.FormField,{className:"k-col-span-2",editorId:"categoryAxisLabelsFont",labelText:r.toLanguageString(a.formatCategoryAxisLabelsFont,a.messages.formatCategoryAxisLabelsFont)},t.createElement(m.ComboBox,{id:"categoryAxisLabelsFont",data:e.fontNames,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisLabelsFontPlaceholder,a.messages.formatCategoryAxisLabelsFontPlaceholder),value:e.fontNames.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].labels)==null?void 0:n.font)||""))==null?void 0:s.name)})||e.nullItem,onChange:E,itemRender:e.itemRender,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsFontSize",labelText:r.toLanguageString(a.formatCategoryAxisLabelsSize,a.messages.formatCategoryAxisLabelsSize)},t.createElement(m.ComboBox,{id:"categoryAxisLabelsFontSize",data:e.fontSizes,textField:"text",dataItemKey:"value",placeholder:r.toLanguageString(a.formatCategoryAxisLabelsSizePlaceholder,a.messages.formatCategoryAxisLabelsSizePlaceholder),value:e.fontSizes.find(l=>{var n,s;return l.value===((s=e.parseFont(((n=o.categoryAxis[0].labels)==null?void 0:n.font)||""))==null?void 0:s.size)})||e.nullItem,onChange:k,allowCustom:!0,...e.dropdownlistCommonProps})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsColor",labelText:r.toLanguageString(a.formatCategoryAxisLabelsColor,a.messages.formatCategoryAxisLabelsColor)},t.createElement(c.ColorPicker,{id:"categoryAxisLabelsColor",view:"gradient",value:((C=o.categoryAxis[0].labels)==null?void 0:C.color)||"",onChange:z,fillMode:"outline"})),t.createElement(g.FormField,{editorId:"categoryAxisLabelsRotation",labelText:r.toLanguageString(a.formatCategoryAxisLabelsRotation,a.messages.formatCategoryAxisLabelsRotation)},t.createElement(c.NumericTextBox,{id:"categoryAxisLabelsRotation",value:typeof((y=o.categoryAxis[0].labels)==null?void 0:y.rotation)=="number"?(A=o.categoryAxis[0].labels)==null?void 0:A.rotation:null,placeholder:r.toLanguageString(a.formatCategoryAxisLabelsRotationAuto,a.messages.formatCategoryAxisLabelsRotationAuto),onChange:R,fillMode:"outline",min:-360,max:360,step:1})),t.createElement(g.FormField,{className:"k-col-span-2"},t.createElement(c.Checkbox,{label:r.toLanguageString(a.formatCategoryAxisLabelsReverseOrder,a.messages.formatCategoryAxisLabelsReverseOrder),checked:o.categoryAxis[0].reverse||!1,onChange:I}))))))))};exports.CategoryAxisPanel=w;