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

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{AnnotationArrowRef,AnnotationRef,AnnotationAccordion,ArrowSelector,ColorPicker,FontSelector,Numeric,Dropdown,PositioningNumeric,Radio,TextEditor,PlotlySection,NumericOrDate}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleNotesPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(AnnotationAccordion,{canAdd:true,canReorder:true,children:[_jsxs(PlotlySection,{name:_("Note Text"),attr:"text",children:[_jsx(TextEditor,{attr:"text"}),_jsx(FontSelector,{label:_("Typeface"),attr:"font.family"}),_jsx(Numeric,{label:_("Font Size"),attr:"font.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"font.color"}),_jsx(Numeric,{label:_("Angle"),attr:"textangle",units:"\xB0"}),_jsx(Dropdown,{label:_("Horizontal Alignment"),clearable:false,attr:"align",options:[{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_jsx(Dropdown,{label:_("Vertical Alignment"),clearable:false,attr:"valign",options:[{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]})]}),_jsxs(PlotlySection,{name:_("Arrow"),children:[_jsx(Radio,{attr:"showarrow",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Numeric,{label:_("Line Width"),attr:"arrowwidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"arrowcolor"}),_jsx(ArrowSelector,{label:_("Arrowhead"),attr:"arrowhead"}),_jsx(Numeric,{label:_("Scale"),step:0.1,attr:"arrowsize",units:"px"}),_jsx(AnnotationArrowRef,{label:_("X Offset"),attr:"axref"}),_jsx(AnnotationArrowRef,{label:_("Y Offset"),attr:"ayref"}),_jsx(NumericOrDate,{label:_("X Vector"),attr:"ax"}),_jsx(NumericOrDate,{label:_("Y Vector"),attr:"ay"})]}),_jsxs(PlotlySection,{name:_("Horizontal Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"xanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_jsx(PositioningNumeric,{label:_("Position"),attr:"x"}),_jsx(AnnotationRef,{label:_("Relative To"),attr:"xref"})]}),_jsxs(PlotlySection,{name:_("Vertical Positioning"),children:[_jsx(Dropdown,{label:_("Anchor Point"),clearable:false,attr:"yanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]}),_jsx(PositioningNumeric,{label:_("Position"),attr:"y"}),_jsx(AnnotationRef,{label:_("Relative To"),attr:"yref"})]})]})};StyleNotesPanel.contextTypes={localize:PropTypes.func};export default StyleNotesPanel;
//# sourceMappingURL=StyleNotesPanel.js.map