@eeacms/react-chart-editor/lib/EditorControls.js

plotly.js chart editor react component UI

"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _DefaultEditor=_interopRequireDefault(require("./DefaultEditor"));var _propTypes=_interopRequireDefault(require("prop-types"));var _react=_interopRequireWildcard(require("react"));var _lib=require("./lib");var _shame=require("./shame");var _constants=require("./lib/constants");var _fastIsnumeric=_interopRequireDefault(require("fast-isnumeric"));var _nested_property=_interopRequireDefault(require("plotly.js/src/lib/nested_property"));var _traceTypes=require("./lib/traceTypes");var _containers=require("./components/containers");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 _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};class EditorControls extends _react.Component{constructor(props,context){super(props,context);this.localize=key=>(0,_lib.localizeString)(this.props.dictionaries||{},this.props.locale,key);if(this.props.plotly){this.plotSchema=this.props.plotly.PlotSchema.get()}}getChildContext(){const gd=this.props.graphDiv||{};return{advancedTraceTypeSelector:this.props.advancedTraceTypeSelector,config:gd._context,customColors:this.props.customColors||[],srcConverters:this.props.srcConverters,data:gd.data,dataSourceComponents:this.props.dataSourceComponents,dataSourceOptions:this.props.dataSourceOptions,dataSources:this.props.dataSources,defaults:this.props.defaults||{},dictionaries:this.props.dictionaries||{},localize:this.localize,frames:gd._transitionData?gd._transitionData._frames:[],fullData:gd._fullData,fullLayout:gd._fullLayout,graphDiv:gd,dfltGraphDiv:this.props.dfltGraphDiv||{},layout:gd.layout,locale:this.props.locale,onUpdate:this.handleUpdate.bind(this),plotSchema:this.plotSchema,plotly:this.props.plotly,traceTypesConfig:this.props.traceTypesConfig,showFieldTooltips:this.props.showFieldTooltips,glByDefault:this.props.glByDefault,mapBoxAccess:this.props.mapBoxAccess,fontOptions:this.props.fontOptions,chartHelp:this.props.chartHelp,customConfig:this.props.customConfig,hasValidCustomConfigVisibilityRules:(0,_lib.hasValidCustomConfigVisibilityRules)(this.props.customConfig),ctx:this.props.ctx}}handleUpdate(_ref){let{type,payload}=_ref;const{graphDiv}=this.props;switch(type){case _constants.EDITOR_ACTIONS.UPDATE_TRACES:if(this.props.beforeUpdateTraces){this.props.beforeUpdateTraces(payload)}(0,_shame.shamefullyAdjustSizeref)(graphDiv,payload);(0,_shame.shamefullyAdjustAxisDirection)(graphDiv,payload);(0,_shame.shamefullyClearAxisTypes)(graphDiv,payload);(0,_shame.shamefullyAdjustAxisRef)(graphDiv,payload);(0,_shame.shamefullyAddTableColumns)(graphDiv,payload);(0,_shame.shamefullyAdjustSplitStyleTargetContainers)(graphDiv,payload);if(!this.props.mapBoxAccess){(0,_shame.shamefullyAdjustMapbox)(graphDiv,payload)}for(let i=0;i<payload.traceIndexes.length;i++){for(const attr in payload.update){const traceIndex=payload.traceIndexes[i];const splitTraceGroup=payload.splitTraceGroup?payload.splitTraceGroup.toString():null;let props=[(0,_nested_property.default)(graphDiv.data[traceIndex],attr)];const value=payload.update[attr];if(splitTraceGroup){props=(0,_shame.shamefullyCreateSplitStyleProps)(graphDiv,attr,traceIndex,splitTraceGroup)}props.forEach(p=>{if(value!==void 0){p.set(value)}})}}if(this.props.afterUpdateTraces){this.props.afterUpdateTraces(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data.slice(),graphDiv.layout,graphDiv._transitionData._frames)}break;case _constants.EDITOR_ACTIONS.UPDATE_LAYOUT:(0,_shame.shamefullyAdjustGeo)(graphDiv,payload);if(this.props.beforeUpdateLayout){this.props.beforeUpdateLayout(payload)}for(const attr in payload.update){const prop=(0,_nested_property.default)(graphDiv.layout,attr);const value=payload.update[attr];if(value!==void 0){prop.set(value)}}if(this.props.afterUpdateLayout){this.props.afterUpdateLayout(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}break;case _constants.EDITOR_ACTIONS.UPDATE_DATA_SOURCES:if(this.props.onUpdateDataSources){this.props.onUpdateDataSources(payload.dataSources,payload.columns)}break;case _constants.EDITOR_ACTIONS.ADD_TRACE:if(this.props.beforeAddTrace){this.props.beforeAddTrace(payload)}if(graphDiv.data.length===0){graphDiv.data.push(this.props.makeDefaultTrace?this.props.makeDefaultTrace():{type:"scatter".concat(this.props.glByDefault?"gl":""),mode:"markers"})}else{const prevTrace=graphDiv.data[graphDiv.data.length-1];const prevTraceType=(0,_lib.plotlyTraceToCustomTrace)(prevTrace);graphDiv.data.push((0,_lib.traceTypeToPlotlyInitFigure)(prevTraceType,prevTrace.type&&prevTrace.type.endsWith("gl")?"gl":""))}if(this.props.afterAddTrace){this.props.afterAddTrace(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data.slice(),graphDiv.layout,graphDiv._transitionData._frames)}break;case _constants.EDITOR_ACTIONS.DELETE_TRACE:if(payload.traceIndexes&&payload.traceIndexes.length){if(this.props.beforeDeleteTrace){this.props.beforeDeleteTrace(payload)}(0,_shame.shamefullyAdjustAxisRef)(graphDiv,payload);(0,_shame.shamefullyDeleteRelatedAnalysisTransforms)(graphDiv,payload);graphDiv.data.splice(payload.traceIndexes[0],1);if(this.props.afterDeleteTrace){this.props.afterDeleteTrace(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data.slice(),graphDiv.layout,graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_ANNOTATION:if((0,_fastIsnumeric.default)(payload.annotationIndex)){if(this.props.beforeDeleteAnnotation){this.props.beforeDeleteAnnotation(payload)}graphDiv.layout.annotations.splice(payload.annotationIndex,1);if(this.props.afterDeleteAnnotation){this.props.afterDeleteAnnotation(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_SHAPE:if((0,_fastIsnumeric.default)(payload.shapeIndex)){if(this.props.beforeDeleteShape){this.props.beforeDeleteShape(payload)}graphDiv.layout.shapes.splice(payload.shapeIndex,1);if(this.props.afterDeleteShape){this.props.afterDeleteShape(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_IMAGE:if((0,_fastIsnumeric.default)(payload.imageIndex)){if(this.props.beforeDeleteImage){this.props.beforeDeleteImage(payload)}graphDiv.layout.images.splice(payload.imageIndex,1);if(this.props.afterDeleteImage){this.props.afterDeleteImage(payload)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_RANGESELECTOR:if((0,_fastIsnumeric.default)(payload.rangeselectorIndex)){graphDiv.layout[payload.axisId].rangeselector.buttons.splice(payload.rangeselectorIndex,1);if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_MAPBOXLAYER:if((0,_fastIsnumeric.default)(payload.mapboxLayerIndex)){graphDiv.layout[payload.mapboxId].layers.splice(payload.mapboxLayerIndex,1);if(this.props.onUpdate){this.props.onUpdate(graphDiv.data,Object.assign({},graphDiv.layout),graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.DELETE_TRANSFORM:if((0,_fastIsnumeric.default)(payload.transformIndex)&&payload.traceIndex<graphDiv.data.length){if(graphDiv.data[payload.traceIndex].transforms.length===1){delete graphDiv.data[payload.traceIndex].transforms}else{graphDiv.data[payload.traceIndex].transforms.splice(payload.transformIndex,1)}if(this.props.onUpdate){this.props.onUpdate(graphDiv.data.slice(),graphDiv.layout,graphDiv._transitionData._frames)}}break;case _constants.EDITOR_ACTIONS.MOVE_TO:if(payload.path&&!isNaN(payload.fromIndex)&&!isNaN(payload.toIndex)){function move(container){const movedEl=container[payload.fromIndex];const replacedEl=container[payload.toIndex];container[payload.toIndex]=movedEl;container[payload.fromIndex]=replacedEl}if(payload.path==="data"){move(graphDiv.data)}if(payload.path==="layout.images"){move(graphDiv.layout.images)}if(payload.path==="layout.shapes"){move(graphDiv.layout.shapes)}if(payload.path==="layout.annotations"){move(graphDiv.layout.annotations)}if(payload.path==="layout.mapbox.layers"){move(graphDiv.layout[payload.mapboxId].layers)}const updatedData=payload.path.startsWith("data")?graphDiv.data.slice():graphDiv.data;const updatedLayout=payload.path.startsWith("layout")?Object.assign({},graphDiv.layout):graphDiv.layout;if(this.props.onUpdate){this.props.onUpdate(updatedData,updatedLayout,graphDiv._transitionData._frames)}}break;default:throw new Error(this.localize("must specify an action type to handleEditorUpdate"))}}render(){return _react.default.createElement("div",{className:(0,_lib.bem)("editor_controls")+"".concat(this.props.className?" ".concat(this.props.className):"")},_react.default.createElement(_containers.ModalProvider,null,this.props.graphDiv&&this.props.graphDiv._fullLayout&&(this.props.children?this.props.children:_react.default.createElement(_DefaultEditor.default,null))))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}EditorControls.propTypes={advancedTraceTypeSelector:_propTypes.default.bool,afterAddTrace:_propTypes.default.func,afterDeleteAnnotation:_propTypes.default.func,afterDeleteShape:_propTypes.default.func,afterDeleteImage:_propTypes.default.func,afterDeleteTrace:_propTypes.default.func,afterUpdateLayout:_propTypes.default.func,afterUpdateTraces:_propTypes.default.func,beforeAddTrace:_propTypes.default.func,beforeDeleteAnnotation:_propTypes.default.func,beforeDeleteShape:_propTypes.default.func,beforeDeleteImage:_propTypes.default.func,beforeDeleteTrace:_propTypes.default.func,beforeUpdateLayout:_propTypes.default.func,beforeUpdateTraces:_propTypes.default.func,children:_propTypes.default.node,className:_propTypes.default.string,customColors:_propTypes.default.array,srcConverters:_propTypes.default.shape({toSrc:_propTypes.default.func.isRequired,fromSrc:_propTypes.default.func.isRequired}),dataSourceComponents:_propTypes.default.object,dataSourceOptions:_propTypes.default.array,dataSources:_propTypes.default.object,defaults:_propTypes.default.object,dictionaries:_propTypes.default.object,graphDiv:_propTypes.default.object,dfltGraphDiv:_propTypes.default.object,locale:_propTypes.default.string,onUpdate:_propTypes.default.func,onUpdateDataSources:_propTypes.default.func,plotly:_propTypes.default.object,showFieldTooltips:_propTypes.default.bool,traceTypesConfig:_propTypes.default.object,makeDefaultTrace:_propTypes.default.func,glByDefault:_propTypes.default.bool,mapBoxAccess:_propTypes.default.bool,fontOptions:_propTypes.default.array,chartHelp:_propTypes.default.object,customConfig:_propTypes.default.object,ctx:_propTypes.default.object};EditorControls.defaultProps={showFieldTooltips:false,locale:"en",traceTypesConfig:{categories:_=>(0,_traceTypes.categoryLayout)(_),traces:_=>(0,_traceTypes.traceTypes)(_),complex:true},fontOptions:_constants.DEFAULT_FONTS};EditorControls.childContextTypes={advancedTraceTypeSelector:_propTypes.default.bool,config:_propTypes.default.object,customColors:_propTypes.default.array,srcConverters:_propTypes.default.shape({toSrc:_propTypes.default.func.isRequired,fromSrc:_propTypes.default.func.isRequired}),data:_propTypes.default.array,dataSourceComponents:_propTypes.default.object,dataSourceOptions:_propTypes.default.array,dataSources:_propTypes.default.object,defaults:_propTypes.default.object,dictionaries:_propTypes.default.object,frames:_propTypes.default.array,fullData:_propTypes.default.array,fullLayout:_propTypes.default.object,graphDiv:_propTypes.default.any,dfltGraphDiv:_propTypes.default.any,layout:_propTypes.default.object,locale:_propTypes.default.string,localize:_propTypes.default.func,onUpdate:_propTypes.default.func,plotly:_propTypes.default.object,plotSchema:_propTypes.default.object,traceTypesConfig:_propTypes.default.object,showFieldTooltips:_propTypes.default.bool,glByDefault:_propTypes.default.bool,mapBoxAccess:_propTypes.default.bool,fontOptions:_propTypes.default.array,chartHelp:_propTypes.default.object,customConfig:_propTypes.default.object,hasValidCustomConfigVisibilityRules:_propTypes.default.bool,ctx:_propTypes.default.object};const _default=EditorControls;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(EditorControls,"EditorControls","/react-chart-editor/src/EditorControls.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/EditorControls.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=EditorControls.js.map