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

plotly.js chart editor react component UI

import PlotlyFold from"./PlotlyFold";import PlotlyPanel from"./PlotlyPanel";import PropTypes from"prop-types";import{connectTransformToTrace}from"../../lib";import{PanelMessage}from"./PanelEmpty";import{EDITOR_ACTIONS}from"../../lib/constants";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const TransformFold=connectTransformToTrace(PlotlyFold);const TransformAccordion=(props,context)=>{const{fullContainer:{transforms=[]},localize:_,container,dataSourceOptions}=context;const{children}=props;const transformTypes=[{label:_("Filter"),type:"filter"},{label:_("Split"),type:"groupby"},{label:_("Aggregate"),type:"aggregate"},{label:_("Sort"),type:"sort"}];const transformBy=container.transforms&&container.transforms.map(tr=>{let foldNameSuffix="";if(tr.groupssrc){const groupssrc=dataSourceOptions&&dataSourceOptions.find(d=>d.value===tr.groupssrc);foldNameSuffix=`: ${groupssrc&&groupssrc.label?groupssrc.label:tr.groupssrc}`}else if(tr.targetsrc){const targetsrc=dataSourceOptions&&dataSourceOptions.find(d=>d.value===tr.targetsrc);foldNameSuffix=`: ${targetsrc&&targetsrc.label?targetsrc.label:tr.targetsrc}`}return foldNameSuffix});const filteredTransforms=transforms.filter(_ref=>{let{type}=_ref;return Boolean(type)});const content=filteredTransforms.length&&filteredTransforms.map((tr,i)=>_jsx(TransformFold,{transformIndex:i,name:`${transformTypes.filter(_ref2=>{let{type}=_ref2;return type===tr.type})[0].label}${transformBy&&transformBy[i]}`,canDelete:true,children:children},i));const addActionOptions=container.transforms&&container.transforms.some(t=>t.type==="groupby")?transformTypes.filter(t=>t.type!=="groupby"):transformTypes;const addAction={label:_("Transform"),handler:addActionOptions.map(_ref3=>{let{label,type}=_ref3;return{label,handler:context=>{const{fullContainer,updateContainer}=context;if(updateContainer){const transformIndex=Array.isArray(fullContainer.transforms)?fullContainer.transforms.length:0;const key=`transforms[${transformIndex}]`;const payload={type};if(type==="filter"){payload.target=[];payload.targetsrc=null}else if(type!=="sort"){payload.groupssrc=null;payload.groups=null}if(type==="groupby"){payload.styles=[]}updateContainer({[key]:payload},false,EDITOR_ACTIONS.ADD_TRANSFORM)}}}})};return _jsx(PlotlyPanel,{addAction:addAction,children:content?content:_jsxs(PanelMessage,{icon:null,children:[_jsxs("div",{style:{textAlign:"left"},children:[_jsxs("p",{children:[_jsx("strong",{children:_("Filter")})," ",_(" transforms allow you to filter data out from a trace.")]}),_jsxs("p",{children:[_jsx("strong",{children:_("Split")})," ",_(" transforms allow you to create multiple traces from one source trace, so as to style them differently.")]}),_jsxs("p",{children:[_jsx("strong",{children:_("Aggregate")})," ",_(" transforms allow you to summarize a trace using an aggregate function like \"average\" or \"minimum\".")]}),_jsxs("p",{children:[_jsx("strong",{children:_("Sort")})," ",_(" transforms allow you to sort a trace, so as to control marker overlay or line connection order.")]})]}),_jsx("p",{children:_("Click on the + button above to add a transform.")})]})})};TransformAccordion.contextTypes={fullContainer:PropTypes.object,localize:PropTypes.func,container:PropTypes.object,dataSourceOptions:PropTypes.array};TransformAccordion.propTypes={children:PropTypes.node};export default TransformAccordion;
//# sourceMappingURL=TransformAccordion.js.map