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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{ColorPicker,FontSelector,PlotlyFold,Numeric,Radio,PlotlySection,Dropdown,TraceRequiredPanel,TextEditor}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleLegendPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsx(TraceRequiredPanel,{children:_jsxs(PlotlyFold,{name:_("Legend"),children:[_jsx(Radio,{attr:"showlegend",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsxs(PlotlySection,{name:_("Legend Title"),children:[_jsx(TextEditor,{label:_("Text"),attr:"legend.title.text",richTextOnly:true}),_jsx(FontSelector,{label:_("Typeface"),attr:"legend.title.font.family"}),_jsx(Numeric,{label:_("Size"),attr:"legend.title.font.size",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"legend.title.font.color"})]}),_jsxs(PlotlySection,{name:_("Text"),children:[_jsx(FontSelector,{label:_("Typeface"),attr:"legend.font.family"}),_jsx(Numeric,{label:_("Size"),attr:"legend.font.size",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"legend.font.color"})]}),_jsxs(PlotlySection,{name:_("Legend Box"),children:[_jsx(Numeric,{label:_("Border Width"),attr:"legend.borderwidth",units:"px"}),_jsx(ColorPicker,{label:_("Border Color"),attr:"legend.bordercolor"}),_jsx(ColorPicker,{label:_("Background Color"),attr:"legend.bgcolor"})]}),_jsxs(PlotlySection,{name:_("Horizontal Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"legend.xanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_jsx(Numeric,{label:_("Position"),showSlider:true,step:0.02,attr:"legend.x"})]}),_jsxs(PlotlySection,{name:_("Vertical Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"legend.yanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]}),_jsx(Numeric,{label:_("Position"),showSlider:true,step:0.02,attr:"legend.y"}),_jsx(Dropdown,{label:_("Text Alignment"),clearable:false,attr:"legend.valign",options:[{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]})]}),_jsx(PlotlySection,{name:_("Orientation"),children:_jsx(Radio,{attr:"legend.orientation",options:[{label:_("Vertical"),value:"v"},{label:_("Horizontal"),value:"h"}]})}),_jsxs(PlotlySection,{name:_("Traces"),children:[_jsx(Dropdown,{label:_("Trace Order"),attr:"legend.traceorder",options:[{label:_("Normal"),value:"normal"},{label:_("Reversed"),value:"reversed"},{label:_("Grouped"),value:"grouped"},{label:_("Reversed and Grouped"),value:"reversed+grouped"}]}),_jsx(Dropdown,{label:_("Item Sizing"),attr:"legend.itemsizing",options:[{label:_("Trace"),value:"trace"},{label:_("Constant"),value:"constant"}]}),_jsx(Numeric,{label:_("Gap Between Groups"),attr:"legend.tracegroupgap",units:"px"})]})]})})};StyleLegendPanel.contextTypes={localize:PropTypes.func};export default StyleLegendPanel;
//# sourceMappingURL=StyleLegendPanel.js.map