@figlinq/react-chart-editor/lib/components/fields/AxesCreator.js

plotly.js chart editor react component UI

import{mdiPlus}from"@mdi/js";import Dropdown from"./Dropdown";import Info from"./Info";import PropTypes from"prop-types";import{EDITOR_ACTIONS}from"../../lib/constants";import Button from"../widgets/Button";import{connectToContainer,traceTypeToAxisType,getAxisTitle,axisIdToAxisName,getParsedTemplateString}from"../../lib";import{PlotlySection}from"./..";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const UnconnectedAxisCreator=(props,_ref)=>{let{fullData,onUpdate,fullLayout:{_subplots:subplots}}=_ref;const canAddAxis=()=>{const currentAxisId=props.fullContainer[props.attr];const currentTraceIndex=props.fullContainer.index;return fullData.some(d=>d.index!==currentTraceIndex&&d[props.attr]===currentAxisId)};const addAndUpdateAxis=()=>{const{attr,updateContainer}=props;const lastAxisNumber=Number(subplots[attr][subplots[attr].length-1].charAt(1))||1;updateContainer({[attr]:attr.charAt(0)+(lastAxisNumber+1)});onUpdate({type:EDITOR_ACTIONS.UPDATE_LAYOUT,payload:{update:{[`${attr+(lastAxisNumber+1)}.side`]:attr==="yaxis"?"right":attr==="xaxis"?"top":null,[`${attr+(lastAxisNumber+1)}.overlaying`]:!(attr==="yaxis"||attr==="xaxis")?null:subplots[attr][subplots[attr].length-1]}}})};const updateAxis=update=>{const currentAxisId=props.fullContainer[props.attr];const axesToBeGarbageCollected=[];if(currentAxisId!==update&&!fullData.some(trace=>trace[props.attr]===currentAxisId&&trace.index!==props.fullContainer.index)){axesToBeGarbageCollected.push(currentAxisId)}onUpdate({type:EDITOR_ACTIONS.UPDATE_TRACES,payload:{axesToBeGarbageCollected,update:{[props.attr]:update},traceIndexes:[props.fullContainer.index]}})};const extraComponent=canAddAxis()?_jsx(Button,{variant:"no-text",icon:mdiPlus,onClick:()=>addAndUpdateAxis()}):_jsx(Button,{variant:"no-text--disabled",icon:mdiPlus,onClick:()=>{}});return _jsx(Dropdown,{label:props.label,attr:props.attr,clearable:false,options:props.options,updatePlot:u=>updateAxis(u),extraComponent:extraComponent})};UnconnectedAxisCreator.propTypes={attr:PropTypes.string,label:PropTypes.string,options:PropTypes.array,container:PropTypes.object,fullContainer:PropTypes.object,updateContainer:PropTypes.func};UnconnectedAxisCreator.contextTypes={fullLayout:PropTypes.object,data:PropTypes.array,fullData:PropTypes.array,onUpdate:PropTypes.func};const AxisCreator=connectToContainer(UnconnectedAxisCreator);const UnconnectedAxesCreator=(_ref2,_ref3)=>{let{container}=_ref2;let{data,fullLayout,setPanel,localize:_}=_ref3;const axisType=traceTypeToAxisType(container.type);const isFirstTraceOfAxisType=data.filter(d=>traceTypeToAxisType(d.type)===axisType).length===1;if(isFirstTraceOfAxisType){return null}const controls=[];const getOptions=axisType=>fullLayout._subplots[axisType].map(axisId=>({label:getParsedTemplateString(getAxisTitle(fullLayout[axisIdToAxisName(axisId)]),{meta:fullLayout.meta}),value:axisId}));if(axisType==="cartesian"){["xaxis","yaxis"].forEach((type,index)=>{controls.push(_jsx(AxisCreator,{attr:type,label:type.charAt(0).toUpperCase()+_(" Axis"),options:getOptions(type)},index))})}return _jsxs(PlotlySection,{name:_("Axes to Use"),children:[controls,_jsxs(Info,{children:[_("You can style and position your axes in the "),_jsx("a",{onClick:()=>setPanel("Structure","Subplots"),children:_("Subplots")}),_(" panel.")]})]})};UnconnectedAxesCreator.propTypes={container:PropTypes.object};UnconnectedAxesCreator.contextTypes={data:PropTypes.array,fullData:PropTypes.array,fullLayout:PropTypes.object,localize:PropTypes.func,setPanel:PropTypes.func};export default connectToContainer(UnconnectedAxesCreator,{modifyPlotProps:(props,context,plotProps)=>{const{data}=context;const{fullContainer}=plotProps;plotProps.isVisible=data.length>1&&data[fullContainer.index]&&traceTypeToAxisType(data[fullContainer.index].type)==="cartesian"}});
//# sourceMappingURL=AxesCreator.js.map