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

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _components=require("../components");var _derived=require("../components/fields/derived");var _DataSelector=_interopRequireDefault(require("../components/fields/DataSelector"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};const Sizes=(_,_ref)=>{let{graphDiv}=_ref;if(!graphDiv){return null}function getHeight(selector,el){var _ref2;const height=(_ref2=el||(selector?graphDiv.querySelector(selector):null))===null||_ref2===void 0?void 0:_ref2.getBoundingClientRect().height.toFixed(2);return height?Math.ceil(height):0}const gdWidth=graphDiv._fullLayout.width;const gdHeight=graphDiv._fullLayout.height;const margin=graphDiv._fullLayout.margin;const cHeight=gdHeight-(margin.t||0)-(margin.b||0);const cWidth=gdWidth-(margin.l||0)-(margin.r||0);const annotations=graphDiv.querySelectorAll(".infolayer .annotation");let annotationHeight=0;const titleHeight=getHeight(".infolayer .g-gtitle");for(const annotation of annotations){const height=getHeight(null,annotation);if(height>annotationHeight){annotationHeight=height}}return _react.default.createElement("div",{className:"sizes-info"},_react.default.createElement("div",null,"Size informations for variate elements."),_react.default.createElement("div",null,"Chart height: ",cHeight,"px so 1% = ",(0.01*cHeight).toFixed(2),"px"),_react.default.createElement("div",null,"Chart width: ",cWidth,"px so 1% = ",(0.01*cWidth).toFixed(2),"px"),_react.default.createElement("div",null,"Title height: ",titleHeight,"px"),_react.default.createElement("div",null,"Annotation height: ",annotationHeight,"px"))};Sizes.contextTypes={graphDiv:_propTypes.default.any};const StyleLayoutPanel=(props,_ref3)=>{let{localize:_}=_ref3;return _react.default.createElement(_components.LayoutPanel,props,_react.default.createElement(_components.PlotlyFold,{name:_("Defaults")},_react.default.createElement(_components.ColorPicker,{label:_("Plot Background"),attr:"plot_bgcolor"}),_react.default.createElement(_components.ColorPicker,{label:_("Margin Color"),attr:"paper_bgcolor"}),_react.default.createElement(_components.PlotlySection,{name:_("Colorscales"),attr:"colorway"},_react.default.createElement(_components.ColorwayPicker,{label:_("Categorical"),attr:"colorway",labelWidth:80,editable:true}),_react.default.createElement(_components.ColorscalePicker,{label:_("Sequential"),attr:"colorscale.sequential",disableCategorySwitch:true,labelWidth:80,editable:true}),_react.default.createElement(_components.ColorscalePicker,{initialCategory:"divergent",label:_("Diverging"),attr:"colorscale.diverging",disableCategorySwitch:true,labelWidth:80,editable:true}),_react.default.createElement(_components.ColorscalePicker,{label:_("Negative Seq"),attr:"colorscale.sequentialminus",disableCategorySwitch:true,labelWidth:80,editable:true})),_react.default.createElement(_components.PlotlySection,{name:_("Text"),attr:"font.family"},_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"font.family",clearable:false}),_react.default.createElement(_components.Numeric,{label:_("Base Font Size"),attr:"font.size",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Font Color"),attr:"font.color"}),_react.default.createElement(_components.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:",."},{label:_("1234.56"),value:"."}],clearable:false}),_react.default.createElement(_components.Dropdown,{label:_("Uniform Text Mode"),attr:"uniformtext.mode",options:[{label:_("Off"),value:false},{label:_("Show"),value:"show"},{label:_("Hide"),value:"hide"}],clearable:false}),_react.default.createElement(_components.Numeric,{label:_("Uniform Text Size Minimum"),attr:"uniformtext.minsize",units:"px"}))),_react.default.createElement(_components.PlotlyFold,{name:_("Title")},_react.default.createElement(_components.TextEditor,{attr:"title.text"}),_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"title.font.family",clearable:false}),_react.default.createElement(_components.Numeric,{label:_("Font Size"),attr:"title.font.size",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Font Color"),attr:"title.font.color"}),_react.default.createElement(_components.PlotlySection,{name:_("Horizontal Positioning")},_react.default.createElement(_components.Dropdown,{label:_("Anchor Point"),attr:"title.xanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Left"),value:"left"},{label:_("Center"),value:"center"},{label:_("Right"),value:"right"}]}),_react.default.createElement(_components.Numeric,{label:_("Position"),showSlider:true,step:0.02,attr:"title.x"}),_react.default.createElement(_components.Dropdown,{label:_("Relative to"),attr:"title.xref",options:[{label:_("Container"),value:"container"},{label:_("Paper"),value:"paper"}]})),_react.default.createElement(_components.PlotlySection,{name:_("Vertical Positioning")},_react.default.createElement(_components.Dropdown,{label:_("Anchor Point"),attr:"title.yanchor",options:[{label:_("Auto"),value:"auto"},{label:_("Top"),value:"top"},{label:_("Middle"),value:"middle"},{label:_("Bottom"),value:"bottom"}]}),_react.default.createElement(_components.Numeric,{label:_("Position"),step:0.02,attr:"title.y",visibilityOptions:[{label:"Auto",value:"auto",type:"string"},{label:"Custom",value:1,type:"number"}],showOn:1,showArrows:true,showSlider:true}),_react.default.createElement(_components.Dropdown,{label:_("Relative to"),attr:"title.yref",options:[{label:_("Container"),value:"container"},{label:_("Paper"),value:"paper"}]})),_react.default.createElement(_components.PlotlySection,{name:_("Subtitle"),attr:"title.subtitle"},_react.default.createElement(_components.TextEditor,{attr:"title.subtitle.text"}),_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"title.subtitle.font.family",clearable:false}),_react.default.createElement(_components.Numeric,{label:_("Font Size"),attr:"title.subtitle.font.size",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Font Color"),attr:"title.subtitle.font.color"}))),_react.default.createElement(_components.PlotlyFold,{name:_("Modebar")},_react.default.createElement(_components.Radio,{label:_("Orientation"),attr:"modebar.orientation",options:[{label:_("Horizontal"),value:"h"},{label:_("Vertical"),value:"v"}]}),_react.default.createElement(_components.ColorPicker,{label:_("Icon Color"),attr:"modebar.color"}),_react.default.createElement(_components.ColorPicker,{label:_("Active Icon Color"),attr:"modebar.activecolor"}),_react.default.createElement(_components.ColorPicker,{label:_("Background Color"),attr:"modebar.bgcolor"})),_react.default.createElement(_components.PlotlyFold,{name:_("Size and Margins")},_react.default.createElement(Sizes,null),_react.default.createElement(_components.SizeVisibilitySelect,{attr:"autosize",label:_("Size"),options:[{label:_("Auto"),value:true},{label:_("Custom"),value:false}],showOn:false,defaultOpt:true},_react.default.createElement(_components.ScaleRadio,{attr:"autoscale",label:_("Autoscale"),options:[{label:_("Enabled"),value:true},{label:_("Disabled"),value:false}],defaultValue:false,show:true}),_react.default.createElement(_components.Numeric,{label:_("Fixed Width"),attr:"width",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Fixed height"),attr:"height",units:"px"})),_react.default.createElement(_derived.NumericHeight,{label:_("Fixed height"),attr:"_height",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Top"),attr:"margin.t",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Bottom"),attr:"margin.b",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Left"),attr:"margin.l",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Right"),attr:"margin.r",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Padding"),attr:"margin.pad",units:"px"})),_react.default.createElement(_components.PlotlyFold,{name:_("Interactions")},_react.default.createElement(_components.PlotlySection,{name:_("Drag"),attr:"dragmode"},_react.default.createElement(_components.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}),_react.default.createElement(_components.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})),_react.default.createElement(_components.PlotlySection,{name:_("Click"),attr:"clickmode"},_react.default.createElement(_components.Flaglist,{label:_("Mode"),attr:"clickmode",options:[{label:_("Click Event"),value:"event"},{label:_("Select Data Point"),value:"select"}]})),_react.default.createElement(_components.PlotlySection,{name:_("Hover")},_react.default.createElement(_components.HovermodeDropdown,{label:_("Mode"),attr:"hovermode"},_react.default.createElement(_components.Dropdown,{label:_("Text Alignment"),attr:"hoverlabel.align",options:[{label:_("Auto"),value:"auto"},{label:_("Left"),value:"left"},{label:_("Right"),value:"right"}],clearable:false}),_react.default.createElement(_derived.HoverColor,{label:_("Background Color"),attr:"hoverlabel.bgcolor",defaultColor:"#FFF",handleEmpty:true}),_react.default.createElement(_derived.HoverColor,{label:_("Border Color"),attr:"hoverlabel.bordercolor",defaultColor:"#000",handleEmpty:true}),_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"hoverlabel.font.family",clearable:true}),_react.default.createElement(_components.Numeric,{label:_("Font Size"),attr:"hoverlabel.font.size"}),_react.default.createElement(_derived.HoverColor,{label:_("Font Color"),attr:"hoverlabel.font.color",defaultColor:"#000",handleEmpty:true})))),_react.default.createElement(_components.PlotlyFold,{name:_("Meta Text")},_react.default.createElement(_DataSelector.default,{label:_("Custom Data"),attr:"meta"}),_react.default.createElement(_components.Info,null,_react.default.createElement("p",null,_("You can refer to the items in this column in any text fields of the editor like so: ")),_react.default.createElement("p",null,_("Ex: "),_react.default.createElement("span",{style:{letterSpacing:"1px",fontStyle:"italic",userSelect:"text"}},_("My custom title %{meta[1]}"))))))};StyleLayoutPanel.contextTypes={localize:_propTypes.default.func};const _default=StyleLayoutPanel;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(Sizes,"Sizes","/react-chart-editor/src/default_panels/StyleLayoutPanel.js");reactHotLoader.register(StyleLayoutPanel,"StyleLayoutPanel","/react-chart-editor/src/default_panels/StyleLayoutPanel.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/default_panels/StyleLayoutPanel.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=StyleLayoutPanel.js.map