@figlinq/react-chart-editor
Version:
plotly.js chart editor react component UI
2 lines • 5.12 kB
JavaScript
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 DropdownWidget from"../widgets/Dropdown";import PropTypes from"prop-types";import{Component}from"react";import Field from"./Field";import nestedProperty from"plotly.js/src/lib/nested_property";import{connectToContainer,maybeAdjustSrc,maybeTransposeData}from"../../lib";import{TRANSFORMS_LIST}from"../../lib/constants";import{getColumnNames}from"../../lib/dereference";import{jsx as _jsx}from"react/jsx-runtime";export function attributeIsData(){let meta=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{};return meta.valType==="data_array"||meta.arrayOk}export class UnconnectedDataSelector extends Component{constructor(props,context){super(props,context);this.updatePlot=this.updatePlot.bind(this);this.setLocals(props,context)}UNSAFE_componentWillReceiveProps(nextProps,nextContext){this.setLocals(nextProps,nextContext)}setLocals(props,context){this.dataSources=context.dataSources||{};this.dataSourceOptions=context.dataSourceOptions||[];this.srcAttr=props.attr+"src";this.srcProperty=nestedProperty(props.container,this.srcAttr).get();this.fullValue=this.context.srcConverters?this.context.srcConverters.toSrc(this.srcProperty,props.container?.type):this.srcProperty;this.is2D=false;if(props.container){this.is2D=(props.attr==="x"||props.attr==="y")&&["scatter","scattergl","bar","funnel","heatmap","heatmapgl","violin","waterfall","box","contour","contourgl"].includes(props.container.type)||props.attr==="z"&&["contour","contourgl","heatmap","heatmapgl","surface","carpet","contourcarpet"].includes(props.container.type)||props.container.type==="table"&&props.attr!=="columnorder"||Array.isArray(this.fullValue)}this.hasData=props.container?props.attr in props.container:false}updatePlot(value){if(!this.props.updateContainer){return}const adjustedValue=Array.isArray(value)&&value.length===1&&(this.props.attr==="x"||this.props.attr==="y")?value[0]:value;const data=Array.isArray(adjustedValue)?adjustedValue.filter(v=>Array.isArray(this.dataSources[v])).map(v=>this.dataSources[v]):this.dataSources[adjustedValue]||null;const update={[this.props.attr]:maybeTransposeData(data,this.srcAttr,this.props.container.type),[this.srcAttr]:maybeAdjustSrc(adjustedValue,this.srcAttr,this.props.container.type,{fromSrc:this.context.srcConverters?this.context.srcConverters.fromSrc:null})};if(this.props.container.type){update["meta.columnNames."+this.props.attr]=getColumnNames(Array.isArray(adjustedValue)?adjustedValue:[adjustedValue],this.dataSourceOptions)}this.props.updateContainer(update)}render(){const{localize:_}=this.context;const{label}=this.props;let newLabel;if(typeof label==="object"){const traceType=this.props.container.type;if(label[traceType]){newLabel=label[traceType]}else{newLabel=label["*"]}}else{newLabel=label}return _jsx(Field,_objectSpread(_objectSpread({},_objectSpread(_objectSpread({},this.props),{},{label:newLabel})),{},{children:_jsx(DropdownWidget,{options:this.dataSourceOptions,value:this.fullValue,onChange:this.updatePlot,multi:this.is2D,searchable:true,clearable:true,placeholder:this.hasData?_("Data inlined in figure"):_("Choose data..."),disabled:this.dataSourceOptions.length===0,components:this.props.dataSourceComponents})}))}}UnconnectedDataSelector.propTypes=_objectSpread({fullValue:PropTypes.any,updatePlot:PropTypes.func,container:PropTypes.object},Field.propTypes);UnconnectedDataSelector.contextTypes={dataSources:PropTypes.object,dataSourceComponents:PropTypes.object,dataSourceOptions:PropTypes.array,srcConverters:PropTypes.shape({toSrc:PropTypes.func.isRequired,fromSrc:PropTypes.func.isRequired}),container:PropTypes.object,localize:PropTypes.func};UnconnectedDataSelector.displayName="UnconnectedDataSelector";function modifyPlotProps(props,context,plotProps){if(attributeIsData(plotProps.attrMeta)&&context.container&&TRANSFORMS_LIST.indexOf(context.container.type)===-1){plotProps.isVisible=true}}export default connectToContainer(UnconnectedDataSelector,{modifyPlotProps});
//# sourceMappingURL=DataSelector.js.map