@figlinq/react-chart-editor/lib/default_panels/StyleAxesPanel.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{AxesRange,DTicks,DTicksInterval,NTicks,ColorPicker,Dropdown,FontSelector,Numeric,NumericFraction,Radio,TextEditor,PlotlySection,LayoutPanel,AxesFold,AxisSide,RangesliderVisible,RangeSelectorAccordion,VisibilitySelect,DropdownCustom,TickFormat}from"../components";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const StyleAxesPanel=(props,_ref)=>{let{localize:_}=_ref;return _jsxs(LayoutPanel,_objectSpread(_objectSpread({},props),{},{children:[_jsxs(AxesFold,{name:_("Titles"),axisFilter:axis=>!(axis._name.includes("angular")||axis._subplot.includes("geo")),children:[_jsx(TextEditor,{attr:"title.text"}),_jsx(FontSelector,{label:_("Typeface"),attr:"title.font.family"}),_jsx(Numeric,{label:_("Font Size"),attr:"title.font.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"title.font.color"})]}),_jsxs(AxesFold,{name:_("Range"),children:[_jsxs(PlotlySection,{name:_("Range"),attr:"autorange",children:[_jsx(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"}]}),_jsx(Radio,{attr:"autorange",label:_("Range"),options:[{label:_("Auto"),value:true},{label:_("Custom"),value:false}]}),_jsx(AxesRange,{label:_("Min"),attr:"range[0]"}),_jsx(AxesRange,{label:_("Max"),attr:"range[1]"}),_jsx(Numeric,{label:_("Min"),attr:"min"})]}),_jsx(PlotlySection,{name:_("Zoom Interactivity"),attr:"fixedrange",children:_jsx(Radio,{attr:"fixedrange",options:[{label:_("Enable"),value:false},{label:_("Disable"),value:true}]})}),_jsx(Dropdown,{label:_("Direction"),attr:"direction",options:[{label:_("Clockwise"),value:"clockwise"},{label:_("Counter Clockwise"),value:"counterclockwise"}],clearable:false})]}),_jsxs(AxesFold,{name:_("Lines"),children:[_jsx(PlotlySection,{name:_("Axis Line"),attr:"showline",children:_jsxs(VisibilitySelect,{attr:"showline",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true,children:[_jsx(Numeric,{label:_("Thickness"),attr:"linewidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"linecolor"}),_jsx(AxisSide,{label:_("Position"),attr:"side"}),_jsx(Radio,{label:_("Mirror Axis"),attr:"mirror",options:[{label:_("On"),value:"ticks"},{label:_("Off"),value:false}]})]})}),_jsx(PlotlySection,{name:_("Grid Lines"),attr:"showgrid",children:_jsxs(VisibilitySelect,{attr:"showgrid",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true,children:[_jsx(Numeric,{label:_("Thickness"),attr:"gridwidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"gridcolor"}),_jsx(Radio,{label:_("Position On"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}),_jsx(Radio,{label:_("Grid Spacing"),attr:"tickmode",options:[{label:_("Auto"),value:"auto"},{label:_("Custom"),value:"linear"}]}),_jsx(DTicks,{label:_("Step Offset"),attr:"tick0"}),_jsx(DTicksInterval,{label:_("Step Size"),attr:"dtick"}),_jsx(NTicks,{label:_("Max Number of Lines"),attr:"nticks"})]})}),_jsxs(PlotlySection,{name:_("Zero Line"),attr:"zeroline",children:[_jsx(Radio,{attr:"zeroline",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Numeric,{label:_("Thickness"),attr:"zerolinewidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"zerolinecolor"})]}),_jsxs(PlotlySection,{name:_("Axis Background"),attr:"showbackground",children:[_jsx(Radio,{attr:"showbackground",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(ColorPicker,{label:_("Color"),attr:"backgroundcolor"})]})]}),_jsx(AxesFold,{name:_("Tick Labels"),axisFilter:axis=>!axis._subplot.includes("geo"),children:_jsx(PlotlySection,{name:_("Tick Labels"),attr:"showticklabels",children:_jsxs(VisibilitySelect,{attr:"showticklabels",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,defaultOpt:true,children:[_jsx(AxisSide,{label:_("Position"),attr:"side"}),_jsx(Radio,{label:_("Auto margins"),attr:"automargin",options:[{label:_("True"),value:true},{label:_("False"),value:false}]}),_jsx(Radio,{label:_("Position on"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}),_jsx(FontSelector,{label:_("Typeface"),attr:"tickfont.family"}),_jsx(Numeric,{label:_("Font Size"),attr:"tickfont.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"tickfont.color"}),_jsx(Dropdown,{label:_("Angle"),attr:"tickangle",clearable:false,options:[{label:_("Auto"),value:"auto"},{label:_("45"),value:45},{label:_("90"),value:90},{label:_("135"),value:135},{label:_("180"),value:180}]}),_jsx(TickFormat,{label:_("Label Format"),attr:"tickformat",dafaultOpt:"",clearable:false}),_jsx(Radio,{label:_("Separate Thousands"),attr:"separatethousands",options:[{label:_("True"),value:true},{label:_("False"),value:false}]}),_jsx(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"}]}),_jsx(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"}]}),_jsx(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}),_jsx(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"}]}),_jsx(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}),_jsx(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"}]}),_jsx(Radio,{label:_("Tick Spacing"),attr:"tickmode",options:[{label:_("Auto"),value:"auto"},{label:_("Custom"),value:"linear"}]}),_jsx(DTicks,{label:_("Step Offset"),attr:"tick0"}),_jsx(DTicksInterval,{label:_("Step Size"),attr:"dtick"}),_jsx(NTicks,{label:_("Max Number of Labels"),attr:"nticks"})]})})}),_jsxs(AxesFold,{name:_("Tick Markers"),axisFilter:axis=>!axis._subplot.includes("geo"),children:[_jsx(PlotlySection,{name:_("Tick Markers"),attr:"ticks",children:_jsxs(VisibilitySelect,{attr:"ticks",options:[{label:_("Inside"),value:"inside"},{label:_("Outside"),value:"outside"},{label:_("Hide"),value:""}],showOn:["inside","outside"],defaultOpt:"Outside",children:[_jsx(AxisSide,{label:_("Position"),attr:"side"}),_jsx(Radio,{label:_("Position on"),attr:"tickson",options:[{label:_("Labels"),value:"labels"},{label:_("Boundaries"),value:"boundaries"}]}),_jsx(Numeric,{label:_("Length"),attr:"ticklen",units:"px"}),_jsx(Numeric,{label:_("Width"),attr:"tickwidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"tickcolor"}),_jsx(Radio,{label:_("Tick Spacing"),attr:"tickmode",options:[{label:_("Auto"),value:"auto"},{label:_("Custom"),value:"linear"}]}),_jsx(DTicks,{label:_("Step Offset"),attr:"tick0"}),_jsx(DTicksInterval,{label:_("Step Size"),attr:"dtick"}),_jsx(NTicks,{label:_("Max Number of Markers"),attr:"nticks"})]})}),_jsx(PlotlySection,{name:_("Multicategory Dividers"),attr:"showdividers",children:_jsxs(VisibilitySelect,{attr:"showdividers",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}],showOn:true,children:[_jsx(Numeric,{label:_("Width"),attr:"dividerwidth",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"dividercolor"})]})})]}),_jsxs(AxesFold,{name:_("Range Slider"),axisFilter:axis=>axis._subplot.includes("xaxis"),children:[_jsx(RangesliderVisible,{attr:"rangeslider.visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(NumericFraction,{label:_("Height"),attr:"rangeslider.thickness"}),_jsx(ColorPicker,{label:_("Background Color"),attr:"rangeslider.bgcolor"}),_jsx(Numeric,{label:_("Border Width"),attr:"rangeslider.borderwidth",units:"px"}),_jsx(ColorPicker,{label:_("Border Color"),attr:"rangeslider.bordercolor"})]}),_jsxs(AxesFold,{name:_("Timescale Buttons"),axisFilter:axis=>axis._subplot.includes("xaxis")&&axis.type==="date",children:[_jsx(Radio,{attr:"rangeselector.visible",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsxs(RangeSelectorAccordion,{children:[_jsx(TextEditor,{attr:"label",label:_("Label"),show:true}),_jsx(Numeric,{label:_("Count"),attr:"count"}),_jsx(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"}]}),_jsx(Dropdown,{label:_("Stepmode"),attr:"stepmode",clearable:false,options:[{label:_("To Date"),value:"todate"},{label:_("Backward"),value:"backward"}]})]}),_jsxs(PlotlySection,{name:_("Text"),children:[_jsx(FontSelector,{label:_("Typeface"),attr:"rangeselector.font.family"}),_jsx(Numeric,{label:_("Font Size"),attr:"rangeselector.font.size",units:"px"}),_jsx(ColorPicker,{label:_("Font Color"),attr:"rangeselector.font.color"})]}),_jsxs(PlotlySection,{name:_("Style"),children:[_jsx(ColorPicker,{label:_("Background Color"),attr:"rangeselector.bgcolor"}),_jsx(ColorPicker,{label:_("Active Color"),attr:"rangeselector.activecolor"}),_jsx(Numeric,{label:_("Border Width"),attr:"rangeselector.borderwidth",units:"px"}),_jsx(ColorPicker,{label:_("Border Color"),attr:"rangeselector.bordercolor"})]}),_jsxs(PlotlySection,{name:_("Horizontal Positioning"),children:[_jsx(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"}]}),_jsx(Numeric,{label:_("Position"),step:0.02,attr:"rangeselector.x"})]}),_jsxs(PlotlySection,{name:_("Vertical Positioning"),children:[_jsx(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"}]}),_jsx(Numeric,{label:_("Position"),step:0.02,attr:"rangeselector.y"})]})]}),_jsxs(AxesFold,{name:_("Spike Lines"),axisFilter:axis=>!(axis._subplot.includes("ternary")||axis._subplot.includes("polar")||axis._subplot.includes("geo")),children:[_jsx(Radio,{attr:"showspikes",options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Radio,{attr:"spikesides",label:_("Show Sides"),options:[{label:_("Show"),value:true},{label:_("Hide"),value:false}]}),_jsx(Numeric,{label:_("Thickness"),attr:"spikethickness",units:"px"}),_jsx(ColorPicker,{label:_("Color"),attr:"spikecolor"})]})]}))};StyleAxesPanel.contextTypes={fullLayout:PropTypes.object,localize:PropTypes.func};export default StyleAxesPanel;
//# sourceMappingURL=StyleAxesPanel.js.map