@figlinq/react-chart-editor/lib/components/fields/TraceSelector.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{mdiCog}from"@mdi/js";import Icon from"@mdi/react";import{UnconnectedDropdown}from"./Dropdown";import PropTypes from"prop-types";import{Component}from"react";import{connectToContainer,traceTypeToPlotlyInitFigure,plotlyTraceToCustomTrace,computeTraceOptionsFromSchema}from"../../lib";import{TRACES_WITH_GL}from"../../lib/constants";import{TraceTypeSelector,TraceTypeSelectorButton,RadioBlocks}from"../widgets";import Field from"./Field";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";class TraceSelector extends Component{constructor(props,context){super(props,context);this.updatePlot=this.updatePlot.bind(this);this.setGl=this.setGl.bind(this);this.glEnabled=this.glEnabled.bind(this);this.setTraceDefaults=this.setTraceDefaults.bind(this);this.toggleGlControls=this.toggleGlControls.bind(this);this.setTraceDefaults(props.container,props.fullContainer,props.updateContainer);this.setLocals(props,context);this.state={showGlControls:false}}glEnabled(){return this.props.container.type&&this.props.container.type.endsWith("gl")?"gl":""}toggleGlControls(){this.setState({showGlControls:!this.state.showGlControls})}setLocals(props,context){const _=context.localize;if(props.traceOptions){this.traceOptions=props.traceOptions}else if(context.traceTypesConfig){this.traceOptions=context.traceTypesConfig.traces(_)}else if(context.plotSchema){this.traceOptions=computeTraceOptionsFromSchema(context.plotSchema,_,this.context)}else{this.traceOptions=[{label:_("Scatter"),value:"scatter"}]}if(props.container){this.fullValue=plotlyTraceToCustomTrace(props.container)}}setTraceDefaults(container,fullContainer,updateContainer,gl){if(container&&!container.mode&&fullContainer.type==="scatter"){updateContainer({type:"scatter"+(gl||this.context.glByDefault?gl:this.glEnabled()),mode:fullContainer.mode||"markers"})}}UNSAFE_componentWillReceiveProps(nextProps,nextContext){const{container,fullContainer,updateContainer}=nextProps;this.setTraceDefaults(container,fullContainer,updateContainer);this.setLocals(nextProps,nextContext)}updatePlot(value){const{updateContainer}=this.props;const{glByDefault}=this.context;if(updateContainer){updateContainer(traceTypeToPlotlyInitFigure(value,this.glEnabled()||glByDefault))}}setGl(value){const{container,fullContainer,updateContainer}=this.props;const gl="gl";this.setTraceDefaults(container,fullContainer,updateContainer,value);const traceType=this.fullValue.endsWith(gl)&&value===""?this.fullValue.slice(0,-gl.length):this.fullValue;updateContainer(traceTypeToPlotlyInitFigure(traceType,value))}render(){const props=Object.assign({},this.props,{fullValue:this.fullValue,updatePlot:this.updatePlot,options:this.traceOptions,clearable:false});const{localize:_,advancedTraceTypeSelector,chartHelp}=this.context;const options=[{label:_("SVG"),value:""},{label:_("WebGL"),value:"gl"}];const exampleOnClick=chartHelp?.[props.fullValue]?.examplePlot&&(e=>{e.stopPropagation();chartHelp[props.fullValue].examplePlot()});if(advancedTraceTypeSelector){return _jsxs(_Fragment,{children:[_jsxs(Field,_objectSpread(_objectSpread({},props),{},{children:[_jsxs("div",{style:{display:"flex",width:"100%",alignItems:"center"},children:[_jsx(TraceTypeSelectorButton,_objectSpread(_objectSpread({},props),{},{traceTypesConfig:this.context.traceTypesConfig,handleClick:()=>this.context.openModal(TraceTypeSelector,_objectSpread(_objectSpread({},props),{},{traceTypesConfig:this.context.traceTypesConfig,glByDefault:this.context.glByDefault}))})),TRACES_WITH_GL.includes(this.props.container.type)&&_jsx(Icon,{path:mdiCog,className:"menupanel__icon",onClick:this.toggleGlControls})]}),exampleOnClick&&_jsxs("div",{className:"js-test-info",style:{padding:"16px 0 12px 0"},children:[_("See basic usage "),_jsx("a",{onClick:exampleOnClick,children:_("example")}),"."]})]})),TRACES_WITH_GL.includes(this.props.container.type)&&this.state.showGlControls&&_jsx(Field,{label:_("Rendering"),children:_jsx(RadioBlocks,{options:options,activeOption:this.glEnabled(),onOptionChange:this.setGl})})]})}return _jsx(UnconnectedDropdown,_objectSpread({},props))}}TraceSelector.contextTypes={openModal:PropTypes.func,advancedTraceTypeSelector:PropTypes.bool,traceTypesConfig:PropTypes.object,plotSchema:PropTypes.object,config:PropTypes.object,localize:PropTypes.func,glByDefault:PropTypes.bool,chartHelp:PropTypes.object};TraceSelector.propTypes={container:PropTypes.object.isRequired,fullContainer:PropTypes.object.isRequired,fullValue:PropTypes.any,updateContainer:PropTypes.func};export default connectToContainer(TraceSelector);
//# sourceMappingURL=TraceSelector.js.map