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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{ImageAccordion,Radio,Dropzone,PositioningNumeric,PlotlySection,PositioningRef,Dropdown}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleImagesPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(ImageAccordion,{canAdd:true,canReorder:true,children:[_jsx(Radio,{attr:"visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Dropzone,{attr:"source",fileType:"image",show:true}),_jsx(Dropdown,{label:_("Aspect Ratio"),attr:"sizing",options:[{label:_("Contain"),value:"contain"},{label:_("Fill"),value:"fill"},{label:_("Stretch"),value:"stretch"}],clearable:false}),_jsx(Radio,{label:_("Relative to Grid"),attr:"layer",options:[{label:_("Below"),value:"below"},{label:_("Above"),value:"above"}]}),_jsx(PositioningNumeric,{attr:"sizex",label:_("Width")}),_jsx(PositioningNumeric,{attr:"sizey",label:_("Height")}),_jsxs(PlotlySection,{name:_("Horizontal Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"xanchor",options:[{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_jsx(PositioningNumeric,{label:_("Position"),attr:"x"}),_jsx(PositioningRef,{label:_("Relative To"),attr:"xref"})]}),_jsxs(PlotlySection,{name:_("Vertical Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"yanchor",options:[{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]}),_jsx(PositioningNumeric,{label:_("Position"),attr:"y"}),_jsx(PositioningRef,{label:_("Relative To"),attr:"yref"})]})]})};StyleImagesPanel.contextTypes={localize:PropTypes.func};export default StyleImagesPanel;
//# sourceMappingURL=StyleImagesPanel.js.map