@figlinq/react-chart-editor
Version:
plotly.js chart editor react component UI
2 lines • 5.69 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 ColorPicker from"./ColorPicker";import{UnconnectedColorscalePicker}from"./ColorscalePicker";import Field from"./Field";import Info from"./Info";import PropTypes from"prop-types";import RadioBlocks from"../widgets/RadioBlocks";import{Component}from"react";import nestedProperty from"plotly.js/src/lib/nested_property";import{adjustColorscale,connectToContainer}from"../../lib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const CustomColorscalePicker=connectToContainer(UnconnectedColorscalePicker,{modifyPlotProps:(props,context,plotProps)=>{if(props.attr==="marker.color"&&context.fullData.filter(t=>context.traceIndexes.includes(t.index)).every(t=>t.marker&&t.marker.color)&&plotProps.fullValue&&typeof plotProps.fullValue==="string"){plotProps.fullValue=context.fullData&&context.fullData.filter(t=>context.traceIndexes.includes(t.index)).map(t=>[0,t.marker.color])}}});class UnconnectedMultiColorPicker extends Component{constructor(props,context){super(props,context);this.state={selectedConstantColorOption:context.traceIndexes.length>1&&props.fullValue&&props.fullValue.every(v=>v[1]===props.fullValue[0][1])?"single":"multiple"};this.setColor=this.setColor.bind(this);this.setColors=this.setColors.bind(this)}setColor(color){if(this.props.setColor){this.props.setColor(color)}else{this.props.updatePlot(color)}}setColors(colorscale,colorscaleType){const numberOfTraces=this.props.tracesToColor.length;const colors=colorscale.map(c=>c[1]);let adjustedColors=colors;if(colorscaleType!=="categorical"){adjustedColors=adjustColorscale(colors,numberOfTraces,colorscaleType)}if(adjustedColors.every(c=>c===adjustedColors[0])||colorscaleType==="categorical"){adjustedColors=adjustColorscale(colors,numberOfTraces,colorscaleType,{repeat:true})}const updates=adjustedColors.map(color=>({[this.props.attr]:color}));this.context.updateContainer(updates)}render(){const _=this.context.localize;const constantOptions=[{label:_("Single"),value:"single"},{label:_("Multiple"),value:"multiple"}];const selectedConstantColorOption=this.props.parentSelectedConstantColorOption?this.props.parentSelectedConstantColorOption:this.state.selectedConstantColorOption;const multiMessage=this.props.multiColorMessage?this.props.multiColorMessage:_("Each will be colored according to the selected colors.");const singleMessage=this.props.singleColorMessage?this.props.singleColorMessage:_("All will be colored in the same color.");if(this.context.traceIndexes.length>1){return _jsxs(Field,_objectSpread(_objectSpread({},this.props),{},{suppressMultiValuedMessage:true,children:[_jsx(RadioBlocks,{options:constantOptions,activeOption:selectedConstantColorOption,onOptionChange:this.props.onConstantColorOptionChange?this.props.onConstantColorOptionChange:value=>this.setState({selectedConstantColorOption:value})}),_jsx(Info,{children:selectedConstantColorOption==="single"?singleMessage:multiMessage}),selectedConstantColorOption==="single"?_jsx(ColorPicker,{attr:this.props.attr,updatePlot:this.setColor}):_jsx(CustomColorscalePicker,{suppressMultiValuedMessage:true,attr:this.props.attr,updatePlot:this.setColors,fullValue:this.props.fullValue,initialCategory:"categorical"})]}))}return _jsx(ColorPicker,{attr:this.props.attr,updatePlot:this.setColor,label:this.props.label})}}UnconnectedMultiColorPicker.propTypes=_objectSpread({multiColorMessage:PropTypes.string,singleColorMessage:PropTypes.string,updatePlot:PropTypes.func,attr:PropTypes.string,parentSelectedConstantColorOption:PropTypes.string,onConstantColorOptionChange:PropTypes.func,messageKeyWordSingle:PropTypes.string,messageKeyWordPlural:PropTypes.string,tracesToColor:PropTypes.array},Field.propTypes);UnconnectedMultiColorPicker.contextTypes={localize:PropTypes.func,updateContainer:PropTypes.func,traceIndexes:PropTypes.array,fullData:PropTypes.array};UnconnectedMultiColorPicker.displayName="UnconnectedMultiColorPicker";export default connectToContainer(UnconnectedMultiColorPicker,{modifyPlotProps(props,context,plotProps){if(plotProps.isVisible){const colors=[];let tracesToColor=[];const dedupedTraceIndexes=[];context.traceIndexes.forEach(i=>{if(!dedupedTraceIndexes.includes(i)){dedupedTraceIndexes.push(i)}});dedupedTraceIndexes.forEach(traceIndex=>{const traces=context.fullData.filter(trace=>trace.index===traceIndex);tracesToColor=tracesToColor.concat(traces);traces.forEach(t=>{const value=nestedProperty(t,props.attr).get();if(value){colors.push(value)}})});plotProps.tracesToColor=tracesToColor;plotProps.fullValue=colors.map(c=>[0,c])}}});
//# sourceMappingURL=MultiColorPicker.js.map