@figlinq/react-chart-editor/lib/PlotlyEditor.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{Component,forwardRef}from"react";import createPlotComponent from"react-plotly.js/factory";import EditorControls from"./EditorControls";import PropTypes from"prop-types";import{DEFAULT_FONTS}from"./lib/constants";import History from"./lib/history";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const history=new History;class PlotlyEditor extends Component{constructor(props){super();this.state={graphDiv:{}};this.PlotComponent=createPlotComponent(props.plotly);this.handleRender=this.handleRender.bind(this);this.handleRelayout=this.handleRelayout.bind(this)}handleRender(fig,graphDiv){this.setState({graphDiv});if(this.props.onRender){this.props.onRender(graphDiv.data,graphDiv.layout,graphDiv._transitionData._frames)}}handleRelayout(update){history.addToUndoRelayout(update,this.state?.graphDiv||{})}render(){return _jsxs("div",{className:"plotly_editor",children:[!this.props.hideControls&&_jsx(EditorControls,{ref:this.props.innerRef,graphDiv:this.state.graphDiv,dataSources:this.props.dataSources,dataSourceOptions:this.props.dataSourceOptions,plotly:this.props.plotly,onUpdate:this.props.onUpdate,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?.mapboxAccessToken),fontOptions:this.props.fontOptions,chartHelp:this.props.chartHelp,customConfig:this.props.customConfig,showUndoRedo:this.props.showUndoRedo,onAddToUndo:this.props.onAddToUndo,onAddToRedo:this.props.onAddToRedo,children:this.props.children}),_jsx("div",{className:"plotly_editor_plot",style:{width:"100%",height:"100%"},children:_jsx(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:this.handleRender,onUpdate:this.handleRender,onRelayout:this.handleRelayout,style:{width:"100%",height:"100%"},divId:this.props.divId})})]})}}PlotlyEditor.propTypes={children:PropTypes.any,layout:PropTypes.object,data:PropTypes.array,config:PropTypes.object,dataSourceOptions:PropTypes.array,dataSources:PropTypes.object,frames:PropTypes.array,onUpdate:PropTypes.func,onRender:PropTypes.func,plotly:PropTypes.object,useResizeHandler:PropTypes.bool,debug:PropTypes.bool,advancedTraceTypeSelector:PropTypes.bool,locale:PropTypes.string,traceTypesConfig:PropTypes.object,dictionaries:PropTypes.object,divId:PropTypes.string,hideControls:PropTypes.bool,showFieldTooltips:PropTypes.bool,srcConverters:PropTypes.shape({toSrc:PropTypes.func.isRequired,fromSrc:PropTypes.func.isRequired}),makeDefaultTrace:PropTypes.func,glByDefault:PropTypes.bool,fontOptions:PropTypes.array,chartHelp:PropTypes.object,customConfig:PropTypes.object,showUndoRedo:PropTypes.bool,innerRef:PropTypes.oneOfType([PropTypes.func,PropTypes.object]),onAddToUndo:PropTypes.func,onAddToRedo:PropTypes.func};PlotlyEditor.defaultProps={hideControls:false,showFieldTooltips:false,fontOptions:DEFAULT_FONTS};export default forwardRef((props,ref)=>_jsx(PlotlyEditor,_objectSpread({innerRef:ref},props)));
//# sourceMappingURL=PlotlyEditor.js.map