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

plotly.js chart editor react component UI

import PlotlyFold from"./PlotlyFold";import{LayoutPanel}from"./derived";import{PanelMessage}from"./PanelEmpty";import PropTypes from"prop-types";import{connectAnnotationToLayout,getParsedTemplateString}from"../../lib";import{EDITOR_ACTIONS}from"../../lib/constants";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const AnnotationFold=connectAnnotationToLayout(PlotlyFold);const AnnotationAccordion=(_ref,_ref2)=>{let{canAdd,children,canReorder}=_ref;let{layout:{annotations=[],meta=[]},localize:_}=_ref2;const content=annotations.length&&annotations.map((ann,i)=>_jsx(AnnotationFold,{annotationIndex:i,name:getParsedTemplateString(ann.text,{meta}),canDelete:canAdd,children:children},i));const addAction={label:_("Annotation"),handler:_ref3=>{let{layout,updateContainer}=_ref3;const annotationIndex=Array.isArray(layout.annotations)?layout.annotations.length:0;if(updateContainer){updateContainer({[`annotations[${annotationIndex}]`]:{text:_("new text")}},false,EDITOR_ACTIONS.ADD_ANNOTATION)}}};return _jsx(LayoutPanel,{addAction:canAdd?addAction:null,canReorder:canReorder,children:content||_jsxs(PanelMessage,{heading:_("Call out your data."),children:[_jsx("p",{children:_("Annotations are text and arrows you can use to point out specific parts of your figure.")}),_jsx("p",{children:_("Click on the + button above to add an annotation.")})]})})};AnnotationAccordion.contextTypes={layout:PropTypes.object,localize:PropTypes.func};AnnotationAccordion.propTypes={children:PropTypes.node,canAdd:PropTypes.bool,canReorder:PropTypes.bool};export default AnnotationAccordion;
//# sourceMappingURL=AnnotationAccordion.js.map