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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{ColorPicker,FontSelector,Numeric,Radio,PlotlySection,Dropdown,SliderAccordion}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleSlidersPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(SliderAccordion,{children:[_jsx(Radio,{attr:"visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsxs(PlotlySection,{name:_("Background"),children:[_jsx(ColorPicker,{label:_("Color"),attr:"bgcolor"}),_jsx(ColorPicker,{label:_("Active Color"),attr:"activebgcolor"})]}),_jsxs(PlotlySection,{name:_("Border"),children:[_jsx(Numeric,{label:_("Width"),attr:"borderwidth"}),_jsx(ColorPicker,{label:_("Color"),attr:"bordercolor"})]}),_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:_("Length"),attr:"len",children:[_jsx(Numeric,{label:_("Length"),attr:"len",step:0.02}),_jsx(Dropdown,{label:_("Length Mode"),attr:"lenmode",options:[{label:_("Fraction of canvas"),value:"fraction"},{label:_("Pixels"),value:"pixels"}]})]}),_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"})]}),_jsxs(PlotlySection,{name:_("Ticks"),children:[_jsx(ColorPicker,{label:_("Color"),attr:"tickcolor"}),_jsx(Numeric,{label:_("Length"),attr:"ticklen"}),_jsx(Numeric,{label:_("Width"),attr:"tickwidth"})]})]})};StyleSlidersPanel.contextTypes={localize:PropTypes.func};export default StyleSlidersPanel;
//# sourceMappingURL=StyleSlidersPanel.js.map