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

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireWildcard(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _components=require("../components");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;var o,i,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(o=t?n:r){if(o.has(e))return o.get(e);o.set(e,f)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?o(f,t,i):f[t]=e[t]);return f})(e,t)}(function(){var enterModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.enterModule:undefined;enterModule&&enterModule(module)})();var __signature__=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default.signature:function(a){return a};class StyleAxesPanel extends _react.Component{render(){const{localize:_}=this.context;return _react.default.createElement(_components.LayoutPanel,this.props,_react.default.createElement(_components.AxesFold,{name:_("Titles"),axisFilter:axis=>!(axis._name.includes("angular")||axis._subplot.includes("geo"))},_react.default.createElement(_components.TextEditor,{attr:"title.text"}),_react.default.createElement(_components.Numeric,{label:_("Standoff"),attr:"title.standoff",units:"px"}),_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"title.font.family"}),_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.Radio,{label:_("Position"),attr:"title.position",options:[{label:_("Vertical"),value:"vertical"},{label:_("Horizontal"),value:"horizontal"}]})),_react.default.createElement(_components.AxesFold,{name:_("Range")},_react.default.createElement(_components.PlotlySection,{name:_("Range"),attr:"autorange"},_react.default.createElement(_components.Dropdown,{attr:"type",label:_("Type"),clearable:false,options:[{label:_("Linear"),value:"linear"},{label:_("Log"),value:"log"},{label:_("Date"),value:"date"},{label:_("Categorical"),value:"category"},{label:_("Multicategorical"),value:"multicategory"}]}),_react.default.createElement(_components.Radio,{attr:"autorange",label:_("Range"),options:[{label:_("Auto"),value:true},{label:_("Custom"),value:false}]}),_react.default.createElement(_components.AxesRange,{label:_("Min"),attr:"range[0]"}),_react.default.createElement(_components.AxesRange,{label:_("Max"),attr:"range[1]"}),_react.default.createElement(_components.Numeric,{label:_("Min"),attr:"min"}),_react.default.createElement(_components.Dropdown,{attr:"rangemode",label:_("Range Mode"),clearable:false,options:[{label:_("Normal"),value:"normal"},{label:_("To Zero"),value:"tozero"},{label:_("Non-Negative"),value:"nonnegative"}]})),_react.default.createElement(_components.PlotlySection,{name:_("Zoom Interactivity"),attr:"fixedrange"},_react.default.createElement(_components.Radio,{attr:"fixedrange",options:[{label:_("Enable"),value:false},{label:_("Disable"),value:true}]})),_react.default.createElement(_components.Dropdown,{label:_("Direction"),attr:"direction",options:[{label:_("Clockwise"),value:"clockwise"},{label:_("Counter Clockwise"),value:"counterclockwise"}],clearable:false})),_react.default.createElement(_components.AxesFold,{name:_("Lines")},_react.default.createElement(_components.PlotlySection,{name:_("Axis Line"),attr:"showline"},_react.default.createElement(_components.VisibilitySelect,{attr:"showline",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true},_react.default.createElement(_components.Numeric,{label:_("Thickness"),attr:"linewidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"linecolor"}),_react.default.createElement(_components.AxisSide,{label:_("Position"),attr:"side"}),_react.default.createElement(_components.Radio,{label:_("Mirror Axis"),attr:"mirror",options:[{label:_("On"),value:"ticks"},{label:_("Off"),value:false}]}))),_react.default.createElement(_components.PlotlySection,{name:_("Grid Lines"),attr:"showgrid"},_react.default.createElement(_components.VisibilitySelect,{attr:"showgrid",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true},_react.default.createElement(_components.Numeric,{label:_("Thickness"),attr:"gridwidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"gridcolor"}),_react.default.createElement(_components.Radio,{label:_("Position On"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}))),_react.default.createElement(_components.PlotlySection,{name:_("Zero Line"),attr:"zeroline"},_react.default.createElement(_components.Radio,{attr:"zeroline",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_react.default.createElement(_components.Numeric,{label:_("Thickness"),attr:"zerolinewidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"zerolinecolor"})),_react.default.createElement(_components.PlotlySection,{name:_("Axis Background"),attr:"showbackground"},_react.default.createElement(_components.Radio,{attr:"showbackground",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"backgroundcolor"}))),_react.default.createElement(_components.AxesFold,{name:_("Tick Labels"),axisFilter:axis=>!axis._subplot.includes("geo")},_react.default.createElement(_components.PlotlySection,{name:_("Tick Labels"),attr:"showticklabels"},_react.default.createElement(_components.VisibilitySelect,{attr:"showticklabels",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true},_react.default.createElement(_components.AxisSide,{label:_("Position"),attr:"side"}),_react.default.createElement(_components.Radio,{label:_("Auto margins"),attr:"automargin",options:[{label:_("True"),value:true},{label:_("False"),value:false}]}),_react.default.createElement(_components.Radio,{label:_("Position on"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}),_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"tickfont.family"}),_react.default.createElement(_components.Numeric,{label:_("Font Size"),attr:"tickfont.size",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Font Color"),attr:"tickfont.color"}),_react.default.createElement(_components.Dropdown,{label:_("Angle"),attr:"tickangle",clearable:false,options:[{label:_("Auto"),value:"auto"},{label:_("0"),value:0},{label:_("45"),value:45},{label:_("90"),value:90},{label:_("135"),value:135},{label:_("180"),value:180}]}),_react.default.createElement(_components.Radio,{label:_("Separate thousands"),attr:"separatethousands",options:[{label:_("Yes"),value:true},{label:_("No"),value:false}]}),_react.default.createElement(_components.TickFormat,{label:_("Label Format"),attr:"tickformat",dafaultOpt:"",clearable:false}),_react.default.createElement(_components.TickFormat,{label:_("Hover Format"),attr:"hoverformat",dafaultOpt:"",clearable:false}),_react.default.createElement(_components.Numeric,{label:_("Label Shift"),attr:"ticklabelshift",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Label Standoff"),attr:"ticklabelstandoff",units:"px"}),_react.default.createElement(_components.Dropdown,{label:_("Exponents"),attr:"exponentformat",clearable:false,options:[{label:_("None"),value:"none"},{label:_("e+6"),value:"e"},{label:_("E+6"),value:"E"},{label:_("x10^6"),value:"power"},{label:_("k/M/G"),value:"SI"},{label:_("k/M/B"),value:"B"}]}),_react.default.createElement(_components.Dropdown,{label:_("Show Exponents"),attr:"showexponent",clearable:false,options:[{label:_("All"),value:"all"},{label:_("First"),value:"first"},{label:_("Last"),value:"last"},{label:_("None"),value:"none"}]}),_react.default.createElement(_components.DropdownCustom,{label:_("Prefix"),attr:"tickprefix",options:[{label:_("None"),value:""},{label:_("x"),value:"x"},{label:_("$"),value:"$"},{label:_("#"),value:"#"},{label:_("@"),value:"@"},{label:_("Custom"),value:"custom"}],customOpt:"custom",dafaultOpt:"",clearable:false}),_react.default.createElement(_components.Dropdown,{label:_("Show Prefix"),attr:"showtickprefix",options:[{label:_("Every label"),value:"all"},{label:_("First label"),value:"first"},{label:_("Last label"),value:"last"},{label:_("None"),value:"none"}]}),_react.default.createElement(_components.DropdownCustom,{label:_("Suffix"),attr:"ticksuffix",options:[{label:_("None"),value:""},{label:_("C"),value:"C"},{label:_("%"),value:"%"},{label:_("^"),value:"^"},{label:_("Custom"),value:"custom"}],customOpt:"custom",dafaultOpt:"",clearable:false}),_react.default.createElement(_components.Dropdown,{label:_("Show Suffix"),attr:"showticksuffix",options:[{label:_("Every label"),value:"all"},{label:_("First label"),value:"first"},{label:_("Last label"),value:"last"},{label:_("None"),value:"none"}]}),_react.default.createElement(_components.TickMode,{label:_("Tick Spacing"),attr:"tickmode",options:[{label:_("Auto"),value:"auto"},{label:_("Linear"),value:"linear"},{label:_("Array"),value:"array"}]}),_react.default.createElement(_components.DTicks,{label:_("Step Offset"),attr:"tick0"}),_react.default.createElement(_components.DTicksInterval,{label:_("Step Size"),attr:"dtick"}),_react.default.createElement(_components.NTicks,{label:_("Max Number of Labels"),attr:"nticks"}),_react.default.createElement(_components.TickArrayDataSelector,{label:_("Tick Values"),attr:"tickvals"}),_react.default.createElement(_components.TickArrayDataSelector,{label:_("Tick Text"),attr:"ticktext"})))),_react.default.createElement(_components.AxesFold,{name:_("Tick Markers"),axisFilter:axis=>!axis._subplot.includes("geo")},_react.default.createElement(_components.PlotlySection,{name:_("Tick Markers"),attr:"ticks"},_react.default.createElement(_components.VisibilitySelect,{attr:"ticks",options:[{label:_("Inside"),value:"inside"},{label:_("Outside"),value:"outside"},{label:_("Hide"),value:""}],showOn:["inside","outside"],defaultOpt:"Outside"},_react.default.createElement(_components.AxisSide,{label:_("Position"),attr:"side"}),_react.default.createElement(_components.Radio,{label:_("Position on"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}),_react.default.createElement(_components.Numeric,{label:_("Length"),attr:"ticklen",units:"px"}),_react.default.createElement(_components.Numeric,{label:_("Width"),attr:"tickwidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"tickcolor"}))),_react.default.createElement(_components.PlotlySection,{name:_("Multicategory Dividers"),attr:"showdividers"},_react.default.createElement(_components.VisibilitySelect,{attr:"showdividers",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true},_react.default.createElement(_components.Numeric,{label:_("Width"),attr:"dividerwidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Color"),attr:"dividercolor"})))),_react.default.createElement(_components.AxesFold,{name:_("Range Slider"),axisFilter:axis=>axis._attr==="xaxis"},_react.default.createElement(_components.RangesliderVisible,{attr:"rangeslider.visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_react.default.createElement(_components.NumericFraction,{label:_("Height"),attr:"rangeslider.thickness"}),_react.default.createElement(_components.ColorPicker,{label:_("Background Color"),attr:"rangeslider.bgcolor"}),_react.default.createElement(_components.Numeric,{label:_("Border Width"),attr:"rangeslider.borderwidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Border Color"),attr:"rangeslider.bordercolor"})),_react.default.createElement(_components.AxesFold,{name:_("Timescale Buttons"),axisFilter:axis=>axis._subplot.includes("xaxis")&&axis.type==="date"},_react.default.createElement(_components.Radio,{attr:"rangeselector.visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_react.default.createElement(_components.RangeSelectorAccordion,null,_react.default.createElement(_components.TextEditor,{attr:"label",label:_("Label"),show:true}),_react.default.createElement(_components.Numeric,{label:_("Count"),attr:"count"}),_react.default.createElement(_components.Dropdown,{label:_("Step"),attr:"step",clearable:false,options:[{label:_("Year"),value:"year"},{label:_("Month"),value:"month"},{label:_("Day"),value:"day"},{label:_("Hour"),value:"hour"},{label:_("Minute"),value:"minute"},{label:_("Second"),value:"second"},{label:_("All"),value:"all"}]}),_react.default.createElement(_components.Dropdown,{label:_("Stepmode"),attr:"stepmode",clearable:false,options:[{label:_("To Date"),value:"todate"},{label:_("Backward"),value:"backward"}]})),_react.default.createElement(_components.PlotlySection,{name:_("Text")},_react.default.createElement(_components.FontSelector,{label:_("Typeface"),attr:"rangeselector.font.family"}),_react.default.createElement(_components.Numeric,{label:_("Font Size"),attr:"rangeselector.font.size",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Font Color"),attr:"rangeselector.font.color"})),_react.default.createElement(_components.PlotlySection,{name:_("Style")},_react.default.createElement(_components.ColorPicker,{label:_("Background Color"),attr:"rangeselector.bgcolor"}),_react.default.createElement(_components.ColorPicker,{label:_("Active Color"),attr:"rangeselector.activecolor"}),_react.default.createElement(_components.Numeric,{label:_("Border Width"),attr:"rangeselector.borderwidth",units:"px"}),_react.default.createElement(_components.ColorPicker,{label:_("Border Color"),attr:"rangeselector.bordercolor"})),_react.default.createElement(_components.PlotlySection,{name:_("Horizontal Positioning")},_react.default.createElement(_components.Dropdown,{label:_("Anchor Point"),clearable:false,attr:"rangeselector.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"),step:0.02,attr:"rangeselector.x"})),_react.default.createElement(_components.PlotlySection,{name:_("Vertical Positioning")},_react.default.createElement(_components.Dropdown,{label:_("Anchor Point"),clearable:false,attr:"rangeselector.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:"rangeselector.y"}))),_react.default.createElement(_components.AxesFold,{name:_("Spike Lines"),axisFilter:axis=>!(axis._subplot.includes("ternary")||axis._subplot.includes("polar")||axis._subplot.includes("geo"))},_react.default.createElement(_components.Radio,{attr:"showspikes",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_react.default.createElement(_components.Dropdown,{attr:"spikemode",label:_("Mode"),options:[{label:_("To Axis"),value:"toaxis"},{label:_("To Marker"),value:"marker"},{label:_("Across"),value:"across"}]}),_react.default.createElement(_components.Dropdown,{attr:"spikedash",label:_("Dash"),options:[{label:_("Dash"),value:"dash"},{label:_("Solid"),value:"solid"},{label:_("Dot"),value:"dot"},{label:_("Long Dash"),value:"longdash"},{label:_("Dash Dot"),value:"dashdot"},{label:_("Long Dash Dot"),value:"longdashdot"}]}),_react.default.createElement(_components.Dropdown,{attr:"spikesnap",label:_("Snap"),options:[{label:_("Hovered data"),value:"hovered data"},{label:_("Data"),value:"data"},{label:_("Cursor"),value:"cursor"}]}),_react.default.createElement(_components.Numeric,{label:_("Thickness"),attr:"spikethickness",units:"px"}),_react.default.createElement(_components.SpikeColor,{label:_("Color"),attr:"spikecolor",defaultColor:"808285",handleEmpty:true})))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}StyleAxesPanel.contextTypes={fullLayout:_propTypes.default.object,localize:_propTypes.default.func};const _default=StyleAxesPanel;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(StyleAxesPanel,"StyleAxesPanel","/react-chart-editor/src/default_panels/StyleAxesPanel.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/default_panels/StyleAxesPanel.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=StyleAxesPanel.js.map