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

plotly.js chart editor react component UI

function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==typeof i?i:i+""}function _toPrimitive(t,r){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}import PropTypes from"prop-types";import{ColorPicker,ColorwayPicker,ColorscalePicker,Dropdown,FontSelector,PlotlyFold,Numeric,TextEditor,PlotlySection,LayoutPanel,VisibilitySelect,HovermodeDropdown,Flaglist,Radio,Info}from"../components";import{HoverColor}from"../components/fields/derived";import DataSelector from"../components/fields/DataSelector";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleLayoutPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(LayoutPanel,_objectSpread(_objectSpread({},props),{},{children:[_jsxs(PlotlyFold,{name:_("Defaults"),children:[_jsx(ColorPicker,{label:_("Plot Background"),attr:"plot_bgcolor"}),_jsx(ColorPicker,{label:_("Margin Color"),attr:"paper_bgcolor"}),_jsxs(PlotlySection,{name:_("Colorscales"),attr:"colorway",children:[_jsx(ColorwayPicker,{label:_("Categorical"),attr:"colorway",disableCategorySwitch:true,labelWidth:80}),_jsx(ColorscalePicker,{label:_("Sequential"),attr:"colorscale.sequential",disableCategorySwitch:true,labelWidth:80}),_jsx(ColorscalePicker,{label:_("Diverging"),attr:"colorscale.diverging",initialCategory:"divergent",disableCategorySwitch:true,labelWidth:80}),_jsx(ColorscalePicker,{label:_("Negative Sequential"),attr:"colorscale.sequentialminus",disableCategorySwitch:true,labelWidth:80})]}),_jsxs(PlotlySection,{name:_("Text"),attr:"font.family",children:[_jsx(FontSelector,{label:_("Typeface"),attr:"font.family",clearable:false}),_jsx(Numeric,{label:_("Base Font Size"),attr:"font.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"font.color"}),_jsx(Dropdown,{label:_("Number format"),attr:"separators",options:[{label:_("1,234.56"),value:".,"},{label:_("1 234.56"),value:", "},{label:_("1 234,56"),value:", "},{label:_("1.234,56"),value:",."}],clearable:false}),_jsx(Dropdown,{label:_("Uniform Text Mode"),attr:"uniformtext.mode",options:[{label:_("Off"),value:false},{label:_("Show"),value:"show"},{label:_("Hide"),value:"hide"}],clearable:false}),_jsx(Numeric,{label:_("Uniform Text Size Minimum"),attr:"uniformtext.minsize",units:"px"})]})]}),_jsxs(PlotlyFold,{name:_("Title"),children:[_jsx(TextEditor,{attr:"title.text"}),_jsx(FontSelector,{label:_("Typeface"),attr:"title.font.family",clearable:false}),_jsx(Numeric,{label:_("Font Size"),attr:"title.font.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"title.font.color"}),_jsx(Numeric,{label:_("Horizontal Position"),showSlider:true,step:0.02,attr:"title.x"})]}),_jsxs(PlotlyFold,{name:_("Modebar"),children:[_jsx(Radio,{label:_("Orientation"),attr:"modebar.orientation",options:[{label:_("Horizontal"),value:"h"},{label:_("Vertical"),value:"v"}]}),_jsx(ColorPicker,{label:_("Icon Color"),attr:"modebar.color"}),_jsx(ColorPicker,{label:_("Active Icon Color"),attr:"modebar.activecolor"}),_jsx(ColorPicker,{label:_("Background Color"),attr:"modebar.bgcolor"})]}),_jsxs(PlotlyFold,{name:_("Size and Margins"),children:[_jsxs(VisibilitySelect,{attr:"autosize",label:_("Size"),options:[{label:_("Auto"),value:true},{label:_("Custom"),value:false}],showOn:false,defaultOpt:true,children:[_jsx(Numeric,{label:_("Fixed Width"),attr:"width",units:"px"}),_jsx(Numeric,{label:_("Fixed height"),attr:"height",units:"px"})]}),_jsx(Numeric,{label:_("Top"),attr:"margin.t",units:"px"}),_jsx(Numeric,{label:_("Bottom"),attr:"margin.b",units:"px"}),_jsx(Numeric,{label:_("Left"),attr:"margin.l",units:"px"}),_jsx(Numeric,{label:_("Right"),attr:"margin.r",units:"px"}),_jsx(Numeric,{label:_("Padding"),attr:"margin.pad",units:"px"})]}),_jsxs(PlotlyFold,{name:_("Interactions"),children:[_jsxs(PlotlySection,{name:_("Drag"),attr:"dragmode",children:[_jsx(Dropdown,{label:_("Mode"),attr:"dragmode",options:[{label:_("Zoom"),value:"zoom"},{label:_("Select"),value:"select"},{label:_("Pan"),value:"pan"},{label:_("Lasso"),value:"lasso"},{label:_("Orbit"),value:"orbit"},{label:_("Turntable"),value:"turntable"}],clearable:false}),_jsx(Dropdown,{label:_("Select Direction"),attr:"selectdirection",options:[{label:_("Any"),value:"any"},{label:_("Horizontal"),value:"h"},{label:_("Vertical"),value:"v"},{label:_("Diagonal"),value:"d"}],clearable:false})]}),_jsx(PlotlySection,{name:_("Click"),attr:"clickmode",children:_jsx(Flaglist,{label:_("Mode"),attr:"clickmode",options:[{label:_("Click Event"),value:"event"},{label:_("Select Data Point"),value:"select"}]})}),_jsx(PlotlySection,{name:_("Hover"),children:_jsxs(HovermodeDropdown,{label:_("Mode"),attr:"hovermode",children:[_jsx(Dropdown,{label:_("Text Alignment"),attr:"hoverlabel.align",options:[{label:_("Auto"),value:"auto"},{label:_("Left"),value:"left"},{label:_("Right"),value:"right"}],clearable:false}),_jsx(HoverColor,{label:_("Background Color"),attr:"hoverlabel.bgcolor",defaultColor:"#FFF",handleEmpty:true}),_jsx(HoverColor,{label:_("Border Color"),attr:"hoverlabel.bordercolor",defaultColor:"#000",handleEmpty:true}),_jsx(FontSelector,{label:_("Typeface"),attr:"hoverlabel.font.family",clearable:true}),_jsx(Numeric,{label:_("Font Size"),attr:"hoverlabel.font.size"}),_jsx(HoverColor,{label:_("Font Color"),attr:"hoverlabel.font.color",defaultColor:"#000",handleEmpty:true})]})})]}),_jsxs(PlotlyFold,{name:_("Meta Text"),children:[_jsx(DataSelector,{label:_("Custom Data"),attr:"meta"}),_jsxs(Info,{children:[_jsx("p",{children:_("You can refer to the items in this column in any text fields of the editor like so: ")}),_jsxs("p",{children:[_("Ex: "),_jsx("span",{style:{letterSpacing:"1px",fontStyle:"italic",userSelect:"text"},children:_("My custom title %{meta[1]}")})]})]})]})]}))};StyleLayoutPanel.contextTypes={localize:PropTypes.func};export default StyleLayoutPanel;
//# sourceMappingURL=StyleLayoutPanel.js.map