@figlinq/react-chart-editor/lib/components/containers/TraceAccordion.js

plotly.js chart editor react component UI

import PlotlyFold from"./PlotlyFold";import TraceRequiredPanel from"./TraceRequiredPanel";import PlotlyPanel from"./PlotlyPanel";import PropTypes from"prop-types";import{Component}from"react";import{EDITOR_ACTIONS}from"../../lib/constants";import{connectTraceToPlot,plotlyTraceToCustomTrace}from"../../lib";import{Tab,Tabs,TabList,TabPanel}from"react-tabs";import{traceTypes}from"../../lib/traceTypes";import{PanelMessage}from"./PanelEmpty";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TraceFold=connectTraceToPlot(PlotlyFold);class TraceAccordion extends Component{constructor(props,context){super(props,context);this.setLocals(props,context)}UNSAFE_componentWillReceiveProps(nextProps,nextContext){this.setLocals(nextProps,nextContext)}setLocals(props,context){const base=props.canGroup?context.fullData:context.data;const traceFilterCondition=this.props.traceFilterCondition||(()=>true);this.filteredTracesDataIndexes=[];this.filteredTraces=[];if(base&&base.length&&context.fullData.length){this.filteredTraces=base.filter((t,i)=>{const fullTrace=props.canGroup?t:context.fullData.filter(tr=>tr.index===i)[0];if(fullTrace){const trace=context.data[fullTrace.index];if(traceFilterCondition(trace,fullTrace)){this.filteredTracesDataIndexes.push(fullTrace.index);return true}}return false})}}renderGroupedTraceFolds(){if(!this.filteredTraces.length||this.filteredTraces.length<=1){return null}const{localize:_}=this.context;const dataArrayPositionsByTraceType={};const fullDataArrayPositionsByTraceType={};this.filteredTraces.forEach(trace=>{const traceType=plotlyTraceToCustomTrace(trace);if(!dataArrayPositionsByTraceType[traceType]){dataArrayPositionsByTraceType[traceType]=[]}if(!fullDataArrayPositionsByTraceType[traceType]){fullDataArrayPositionsByTraceType[traceType]=[]}dataArrayPositionsByTraceType[traceType].push(trace.index);fullDataArrayPositionsByTraceType[traceType].push(trace._expandedIndex)});return Object.keys(fullDataArrayPositionsByTraceType).map((type,index)=>_jsx(TraceFold,{traceIndexes:dataArrayPositionsByTraceType[type],name:traceTypes(_).find(t=>t.value===type).label,fullDataArrayPosition:fullDataArrayPositionsByTraceType[type],children:this.props.children},index))}renderUngroupedTraceFolds(){if(this.filteredTraces.length){return this.filteredTraces.map((d,i)=>_jsx(TraceFold,{traceIndexes:[d.index],canDelete:this.props.canAdd,fullDataArrayPosition:[d._expandedIndex],children:this.props.children},i))}return null}renderTraceFolds(){if(this.filteredTraces.length){return this.filteredTraces.map((d,i)=>_jsx(TraceFold,{traceIndexes:[this.filteredTracesDataIndexes[i]],canDelete:this.props.canAdd,children:this.props.children},i))}return null}renderTracePanelHelp(){const _=this.context.localize;return _jsxs(PanelMessage,{heading:_("Trace your data."),children:[_jsx("p",{children:_("Traces of various types like bar and line are the building blocks of your figure.")}),_jsx("p",{children:_("You can add as many as you like, mixing and matching types and arranging them into subplots.")}),_jsx("p",{children:_("Click on the + button above to add a trace.")})]})}render(){const{canAdd,canGroup,canReorder}=this.props;const _=this.context.localize;if(canAdd){const addAction={label:_("Trace"),handler:_ref=>{let{onUpdate}=_ref;if(onUpdate){onUpdate({type:EDITOR_ACTIONS.ADD_TRACE})}}};const traceFolds=this.renderTraceFolds();return _jsx(PlotlyPanel,{addAction:addAction,canReorder:canReorder,children:traceFolds?traceFolds:this.renderTracePanelHelp()})}if(canGroup){if(this.filteredTraces.length===1){return _jsx(TraceRequiredPanel,{children:this.renderUngroupedTraceFolds()})}if(this.filteredTraces.length>1){return _jsx(TraceRequiredPanel,{noPadding:true,children:_jsxs(Tabs,{children:[_jsxs(TabList,{children:[_jsx(Tab,{children:_("Individually")}),_jsx(Tab,{children:_("By Type")})]}),_jsx(TabPanel,{children:_jsx(PlotlyPanel,{children:this.renderUngroupedTraceFolds()})}),_jsx(TabPanel,{children:_jsx(PlotlyPanel,{children:this.renderGroupedTraceFolds()})})]})})}}return _jsx(TraceRequiredPanel,{children:this.renderTraceFolds()})}}TraceAccordion.contextTypes={fullData:PropTypes.array,data:PropTypes.array,localize:PropTypes.func};TraceAccordion.propTypes={canAdd:PropTypes.bool,canGroup:PropTypes.bool,canReorder:PropTypes.bool,children:PropTypes.node,traceFilterCondition:PropTypes.func};export default TraceAccordion;
//# sourceMappingURL=TraceAccordion.js.map