@figlinq/react-chart-editor/lib/default_panels/GraphCreatePanel.js

plotly.js chart editor react component UI

import PropTypes from"prop-types";import{DataSelector,Dropdown,DropdownCustom,Radio,PlotlySection,AxesCreator,SubplotCreator,TraceAccordion,TraceSelector,TraceTypeSection,LocationSelector,Dropzone,Numeric}from"../components";import{HistogramInfoVertical,HistogramInfoHorizontal,Histogram2d}from"../components/fields/derived";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const GraphCreatePanel=(props,_ref)=>{let{localize:_,setPanel}=_ref;return _jsxs(TraceAccordion,{canAdd:true,traceFilterCondition:t=>!(t.transforms&&t.transforms.some(tr=>["fit","moving-average"].includes(tr.type))),canReorder:true,children:[_jsx(TraceSelector,{label:_("Type"),attr:"type",show:true}),_jsx(Dropzone,{attr:"geojson",fileType:"geojson"}),_jsx(LocationSelector,{attr:"type"}),_jsx(DataSelector,{label:_("Values"),attr:"values"}),_jsx(DataSelector,{label:_("Labels"),attr:"labels"}),_jsx(DataSelector,{label:_("Parents"),attr:"parents"}),_jsx(TraceTypeSection,{traceTypes:["sunburst","treemap"],mode:"trace",children:_jsx(DataSelector,{label:_("IDs"),attr:"ids"})}),_jsx(Dropdown,{label:_("Parent Value Mode"),attr:"branchvalues",options:[{label:_("Total"),value:"total"},{label:_("Remainder"),value:"remainder"}],clearable:false}),_jsx(DataSelector,{label:{histogram2d:_("X Values"),histogram:_("X Values"),"*":_("X")},attr:"x"}),_jsx(DataSelector,{label:{histogram2d:_("Y Values"),histogram:_("Y Values"),"*":_("Y")},attr:"y"}),_jsx(DataSelector,{label:{choropleth:_("Values"),histogram2d:_("Z Values"),"*":_("Z")},attr:"z"}),_jsx(DropdownCustom,{label:_("GeoJSON Location Field"),attr:"featureidkey",options:[{label:_("id"),value:"id"},{label:_("Custom"),value:"custom"}],customOpt:"custom",dafaultOpt:"",clearable:false}),_jsx(Numeric,{label:_("Radius"),attr:"radius",min:0,max:50,showSlider:true}),_jsx(DataSelector,{label:_("Measure"),attr:"measure"}),_jsxs(PlotlySection,{name:_("Nodes"),children:[_jsx(DataSelector,{label:_("Labels"),attr:"node.label"}),_jsx(DataSelector,{label:_("Groups"),attr:"node.groups"}),_jsx(DataSelector,{label:_("X"),attr:"node.x"}),_jsx(DataSelector,{label:_("Y"),attr:"node.y"})]}),_jsxs(PlotlySection,{name:_("Links"),children:[_jsx(DataSelector,{label:_("Sources"),attr:"link.source"}),_jsx(DataSelector,{label:_("Targets"),attr:"link.target"}),_jsx(DataSelector,{label:_("Values"),attr:"link.value"}),_jsx(DataSelector,{label:_("Labels"),attr:"link.label"})]}),_jsx(Radio,{label:_("Orientation"),attr:"orientation",options:[{label:_("Vertical"),value:"v"},{label:_("Horizontal"),value:"h"}]}),_jsxs(HistogramInfoVertical,{children:[_("Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the "),_jsx("a",{onClick:()=>setPanel("Style","Traces"),children:_("Traces")}),_(" panel under Style. If Y values are omitted, the histogram function defaults to Count.")]}),_jsxs(HistogramInfoHorizontal,{children:[_("Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the "),_jsx("a",{onClick:()=>setPanel("Style","Traces"),children:_("Traces")}),_(" under Style panel. If X values are omitted, the histogram function defaults to Count.")]}),_jsxs(Histogram2d,{children:[_("Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the "),_jsx("a",{onClick:()=>setPanel("Style","Traces"),children:_("Traces")}),_(" under Style panel. If Z values are omitted, the histogram function defaults to Count.")]}),_jsx(DataSelector,{label:_("I (Optional)"),attr:"i"}),_jsx(DataSelector,{label:_("J (Optional)"),attr:"j"}),_jsx(DataSelector,{label:_("K (Optional)"),attr:"k"}),_jsx(DataSelector,{label:_("Open"),attr:"open"}),_jsx(DataSelector,{label:_("High"),attr:"high"}),_jsx(DataSelector,{label:_("Low"),attr:"low"}),_jsx(DataSelector,{label:_("Close"),attr:"close"}),_jsx(DataSelector,{label:_("A"),attr:"a"}),_jsx(DataSelector,{label:_("B"),attr:"b"}),_jsx(DataSelector,{label:_("C"),attr:"c"}),_jsx(DataSelector,{label:_("U"),attr:"u"}),_jsx(DataSelector,{label:_("V"),attr:"v"}),_jsx(DataSelector,{label:_("W"),attr:"w"}),_jsx(DataSelector,{label:_("X start"),attr:"starts.x"}),_jsx(DataSelector,{label:_("Y start"),attr:"starts.y"}),_jsx(DataSelector,{label:_("Z start"),attr:"starts.z"}),_jsx(DataSelector,{label:_("Headers"),attr:"header.values"}),_jsx(DataSelector,{label:_("Columns"),attr:"cells.values"}),_jsxs(TraceTypeSection,{traceTypes:["scatterpolar","scatterpolargl","barpolar"],mode:"trace",children:[_jsx(DataSelector,{label:_("Radius"),attr:"r"}),_jsx(DataSelector,{label:_("Theta"),attr:"theta"}),_jsx(Dropdown,{label:_("Theta Unit"),options:[{label:_("Radians"),value:"radians"},{label:_("Degrees"),value:"degrees"},{label:_("Gradians"),value:"gradians"}],attr:"thetaunit",clearable:false})]}),_jsx(AxesCreator,{attr:"fake_attr"}),_jsx(SubplotCreator,{attr:"fake_attr"}),_jsxs(PlotlySection,{name:_("Header Options"),children:[_jsx(DataSelector,{label:_("Fill Color"),attr:"header.fill.color"}),_jsx(DataSelector,{label:_("Font Color"),attr:"header.font.color"}),_jsx(DataSelector,{label:_("Font Size"),attr:"header.font.size"})]}),_jsxs(PlotlySection,{name:_("Cell Options"),children:[_jsx(DataSelector,{label:_("Fill Color"),attr:"cells.fill.color"}),_jsx(DataSelector,{label:_("Font Color"),attr:"cells.font.color"}),_jsx(DataSelector,{label:_("Font Size"),attr:"cells.font.size"})]}),_jsxs(PlotlySection,{name:_("Column Options"),children:[_jsx(DataSelector,{label:_("Width"),attr:"columnwidth"}),_jsx(DataSelector,{label:_("Order"),attr:"columnorder"})]}),_jsxs(PlotlySection,{name:_("Options"),children:[_jsx(DataSelector,{label:_("Intensity"),attr:"intensity"}),_jsx(DataSelector,{label:_("Facecolor"),attr:"facecolor"}),_jsx(DataSelector,{label:_("Vertexcolor"),attr:"vertexcolor"}),_jsx(Radio,{label:_("Transpose"),attr:"transpose",options:[{label:_("No"),value:false},{label:_("Yes"),value:true}]})]})]})};export default GraphCreatePanel;GraphCreatePanel.contextTypes={localize:PropTypes.func,setPanel:PropTypes.func};
//# sourceMappingURL=GraphCreatePanel.js.map