@figlinq/react-chart-editor/lib/default_panels/StyleUpdateMenusPanel.js

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{ColorPicker,FontSelector,Numeric,PlotlySection,UpdateMenuAccordion,UpdateMenuButtons,VisibilitySelect,Radio}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleUpdateMenusPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsx(UpdateMenuAccordion,{children:_jsxs(VisibilitySelect,{attr:"visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,children:[_jsx(PlotlySection,{name:_("Button Labels"),children:_jsx(UpdateMenuButtons,{attr:"buttons"})}),_jsx(PlotlySection,{name:_("Background"),children:_jsx(ColorPicker,{label:_("Color"),attr:"bgcolor"})}),_jsxs(PlotlySection,{name:_("Font"),children:[_jsx(FontSelector,{label:_("Typeface"),attr:"font.family"}),_jsx(Numeric,{label:_("Size"),attr:"font.size"}),_jsx(ColorPicker,{label:_("Color"),attr:"font.color"})]}),_jsxs(PlotlySection,{name:_("Border"),children:[_jsx(Numeric,{label:_("Width"),attr:"borderwidth"}),_jsx(ColorPicker,{label:_("Color"),attr:"bordercolor"})]}),_jsxs(PlotlySection,{name:_("Horizontal Positioning"),attr:"x",children:[_jsx(Numeric,{label:_("Position"),attr:"x",showSlider:true,step:0.02}),_jsx(Radio,{label:_("Anchor"),attr:"xanchor",options:[{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]})]}),_jsxs(PlotlySection,{name:_("Vertical Positioning"),attr:"y",children:[_jsx(Numeric,{label:_("Position"),attr:"y",showSlider:true,step:0.02}),_jsx(Radio,{label:_("Anchor"),attr:"yanchor",options:[{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]})]}),_jsxs(PlotlySection,{name:_("Padding"),children:[_jsx(Numeric,{label:_("Top"),attr:"pad.t",units:"px"}),_jsx(Numeric,{label:_("Bottom"),attr:"pad.b",units:"px"}),_jsx(Numeric,{label:_("Left"),attr:"pad.l",units:"px"}),_jsx(Numeric,{label:_("Right"),attr:"pad.r",units:"px"})]})]})})};StyleUpdateMenusPanel.contextTypes={localize:PropTypes.func};export default StyleUpdateMenusPanel;
//# sourceMappingURL=StyleUpdateMenusPanel.js.map