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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{ShapeAccordion,Radio,PlotlySection,PositioningRef,PositioningNumeric,Numeric,NumericFraction,ColorPicker,LineDashSelector,TextEditor,Dropdown,FontSelector}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleShapesPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(ShapeAccordion,{canAdd:true,canReorder:true,children:[_jsx(Radio,{attr:"visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Radio,{attr:"type",options:[{label:_("Line"),value:"line"},{label:_("Rectangle"),value:"rect"},{label:_("Ellipse"),value:"circle"}]}),_jsxs(PlotlySection,{name:_("Horizontal Boundaries"),children:[_jsx(PositioningRef,{label:_("Relative to"),attr:"xref"}),_jsx(PositioningNumeric,{label:_("Start Point"),attr:"x0"}),_jsx(PositioningNumeric,{label:_("End Point"),attr:"x1"})]}),_jsxs(PlotlySection,{name:_("Vertical Boundaries"),children:[_jsx(PositioningRef,{label:_("Relative to"),attr:"yref"}),_jsx(PositioningNumeric,{label:_("Start Point"),attr:"y0"}),_jsx(PositioningNumeric,{label:_("End Point"),attr:"y1"})]}),_jsxs(PlotlySection,{name:_("Lines"),children:[_jsx(Numeric,{label:_("Width"),attr:"line.width"}),_jsx(ColorPicker,{label:_("Color"),attr:"line.color"}),_jsx(LineDashSelector,{label:_("Type"),attr:"line.dash"})]}),_jsxs(PlotlySection,{name:_("Fill"),children:[_jsx(ColorPicker,{label:_("Color"),attr:"fillcolor"}),_jsx(NumericFraction,{label:_("Opacity"),attr:"opacity"})]}),_jsxs(PlotlySection,{name:_("Label"),children:[_jsx(TextEditor,{label:_("Text"),attr:"label.text"}),_jsx(Numeric,{label:_("Font Size"),attr:"label.text.font.size"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"label.font.color"}),_jsx(FontSelector,{label:_("Typeface"),attr:"label.font.family"}),_jsx(Numeric,{label:_("Padding"),attr:"label.padding"}),_jsx(Dropdown,{label:_("X Anchor"),attr:"label.xanchor",options:[{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_jsx(Dropdown,{label:_("Y Anchor"),attr:"label.yanchor",options:[{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]}),_jsx(Numeric,{label:_("Rotation"),attr:"label.textangle"})]})]})};StyleShapesPanel.contextTypes={localize:PropTypes.func};export default StyleShapesPanel;
//# sourceMappingURL=StyleShapesPanel.js.map