@eeacms/react-chart-editor/lib/PlotlyEditor.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 _constants=require("./lib/constants");var _factory=_interopRequireDefault(require("react-plotly.js/factory"));var _EditorControls=_interopRequireDefault(require("./EditorControls"));var _DataSourcesEditor=_interopRequireDefault(require("./DataSourcesEditor"));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 PlotlyEditor extends _react.Component{constructor(props){super();this.state={graphDiv:{},dfltGraphDiv:{_fullData:[],_fullLayout:{}},dfltData:[],dfltLayout:{},initialized:false};this.EditorControls=(0,_react.createRef)();this.DataSourcesEditor=(0,_react.createRef)();this.PlotComponent=(0,_factory.default)(props.plotly);this.handleRender=this.handleRender.bind(this);this.onUpdate=this.onUpdate.bind(this);this.loadDataSources=this.loadDataSources.bind(this);this.onPlotResize=this.onPlotResize.bind(this);this.renderSlot=this.renderSlot.bind(this)}handleRender(fig,graphDiv){if(!this.props.forceRender){this.setState({graphDiv})}if(this.props.forceRender){this.props.forceRender(fig,graphDiv)}if(this.props.onRender){this.props.onRender(fig,graphDiv)}}onUpdate(_ref){let{type,payload}=_ref;const editor=this.EditorControls.current;return editor.handleUpdate.bind(editor)({type,payload})}loadDataSources(dataSources,columns,update){const editor=this.DataSourcesEditor.current;return editor.loadDataSources.bind(editor)(dataSources,columns,update)}onPlotResize(){const containerEl=document.querySelector(".grid_and_plot");const gridEl=containerEl.querySelector(".grid_panel");const previewEl=containerEl.querySelector(".grid_panel__resize-preview");const plotEl=containerEl.querySelector(".plot_panel");requestAnimationFrame(()=>{plotEl.style.maxHeight=Math.max(_constants.MIN_PLOT_HEIGHT,containerEl.clientHeight-(gridEl.clientHeight+previewEl.clientHeight)-1)+"px";window.dispatchEvent(new Event("resize"))})}renderSlot(slot){var _this$props$slots;return((_this$props$slots=this.props.slots)===null||_this$props$slots===void 0?void 0:_this$props$slots[slot])||null}render(){return _react.default.createElement("div",{className:"plotly_editor plotly-editor--theme-provider"},!this.props.hideControls&&_react.default.createElement(_EditorControls.default,{ref:this.EditorControls,customColors:this.props.customColors,graphDiv:this.state.graphDiv,dfltGraphDiv:this.state.dfltGraphDiv,dataSources:this.props.dataSources,dataSourceOptions:this.props.dataSourceOptions,defaults:this.props.defaults,plotly:this.props.plotly,onUpdate:this.props.onUpdate,onUpdateDataSources:this.props.onUpdateDataSources,advancedTraceTypeSelector:this.props.advancedTraceTypeSelector,locale:this.props.locale,traceTypesConfig:this.props.traceTypesConfig,dictionaries:this.props.dictionaries,showFieldTooltips:this.props.showFieldTooltips,srcConverters:this.props.srcConverters,makeDefaultTrace:this.props.makeDefaultTrace,glByDefault:this.props.glByDefault,mapBoxAccess:Boolean(this.props.config&&this.props.config.mapboxAccessToken),fontOptions:this.props.fontOptions,chartHelp:this.props.chartHelp,customConfig:this.props.customConfig,ctx:this.props.ctx},this.props.children),_react.default.createElement("div",{className:"grid_and_plot"},this.renderSlot("grid-and-plot"),_react.default.createElement(_DataSourcesEditor.default,{ref:this.DataSourcesEditor,data:this.props.data,layout:this.props.layout,dataSources:this.props.dataSourcesSubset||this.props.dataSources,columns:this.props.columns,srcConverters:this.props.srcConverters,onUpdate:this.onUpdate,onPlotResize:this.onPlotResize}),_react.default.createElement("div",{className:"plot_panel"},_react.default.createElement(this.PlotComponent,{data:this.props.data,layout:this.props.layout,frames:this.props.frames,config:this.props.config,useResizeHandler:this.props.useResizeHandler,debug:this.props.debug,onInitialized:(fig,graphDiv)=>{this.onPlotResize();this.setState({initialized:true,graphDiv},()=>{const{data,layout,frames}=fig;if(this.props.onInitialized){this.props.onInitialized(fig,graphDiv)}if(this.props.onUpdate){this.props.onUpdate(data,layout,frames)}})},onUpdate:(fig,graphDiv)=>this.state.initialized?this.handleRender(fig,graphDiv):null,style:{width:"100%",height:"100%"},divId:this.props.divId}))))}__reactstandin__regenerateByEval(key,code){this[key]=eval(code)}}PlotlyEditor.propTypes={children:_propTypes.default.any,layout:_propTypes.default.object,data:_propTypes.default.array,config:_propTypes.default.object,customColors:_propTypes.default.array,defaults:_propTypes.default.object,dataSources:_propTypes.default.object,dataSourcesSubset:_propTypes.default.object,columns:_propTypes.default.array,dataSourceOptions:_propTypes.default.array,frames:_propTypes.default.array,onUpdate:_propTypes.default.func,onUpdateDataSources:_propTypes.default.func,onRender:_propTypes.default.func,forceRender:_propTypes.default.func,onInitialized:_propTypes.default.func,plotly:_propTypes.default.object,useResizeHandler:_propTypes.default.bool,debug:_propTypes.default.bool,advancedTraceTypeSelector:_propTypes.default.bool,locale:_propTypes.default.string,traceTypesConfig:_propTypes.default.object,dictionaries:_propTypes.default.object,divId:_propTypes.default.string,hideControls:_propTypes.default.bool,showFieldTooltips:_propTypes.default.bool,srcConverters:_propTypes.default.shape({toSrc:_propTypes.default.func.isRequired,fromSrc:_propTypes.default.func.isRequired}),makeDefaultTrace:_propTypes.default.func,glByDefault:_propTypes.default.bool,fontOptions:_propTypes.default.array,chartHelp:_propTypes.default.object,customConfig:_propTypes.default.object,ctx:_propTypes.default.object,slots:_propTypes.default.objectOf(_propTypes.default.element)};PlotlyEditor.defaultProps={hideControls:false,showFieldTooltips:false,fontOptions:_constants.DEFAULT_FONTS};const _default=PlotlyEditor;var _default2=exports.default=_default;;(function(){var reactHotLoader=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.default:undefined;if(!reactHotLoader){return}reactHotLoader.register(PlotlyEditor,"PlotlyEditor","/react-chart-editor/src/PlotlyEditor.js");reactHotLoader.register(_default,"default","/react-chart-editor/src/PlotlyEditor.js")})();;(function(){var leaveModule=typeof reactHotLoaderGlobal!=="undefined"?reactHotLoaderGlobal.leaveModule:undefined;leaveModule&&leaveModule(module)})();
//# sourceMappingURL=PlotlyEditor.js.map