Exemple #1
0
		const enlargePlot = () => {
			const newLayout = copy( this.state.layout );
			const newEnlarged = copy( this.state.enlarged );
			if ( !this.state.enlarged[ i ]) {
				for ( let j = 0; j < newLayout.length; j++ ) {
					if ( j < i ) {
						newLayout[ j ] = {
							i: String( j ),
							x: j*4 % 12,
							y: floor( j / 3 ) * 3,
							w: 4,
							h: 3,
							static: true
						};
						newEnlarged[ j ] = false;
					}
					else if ( j === i ) {
						newLayout[ j ] = {
							i: String( j ),
							x: 0,
							y: floor( j / 3 ) * 3,
							w: 12,
							h: 9,
							static: true
						};
						newEnlarged[ i ] = true;
					} else {
						newLayout[ j ] = {
							i: String( j ),
							x: ( ( j-i )*4 ) % 12,
							y: floor( j / 3 ) * 3 + 9,
							w: 4,
							h: 3,
							static: true
						};
						newEnlarged[ j ] = false;
					}
				}
			} else {
				for ( let j = 0; j < newLayout.length; j++ ) {
					newLayout[ j ] = {
						i: String( j ),
						x: j*4 % 12,
						y: floor( j / 3 ) * 3,
						w: 4,
						h: 3,
						static: true
					};
					newEnlarged[ j ] = false;
				}
			}
			this.setState({
				layout: newLayout,
				enlarged: newEnlarged
			});
		};
Exemple #2
0
	getCard( ndx ) {
		const id = this.props.id + '_' + ndx;
		const values = this.props.values;
		let front = 'front value not defined';
		let back = 'back value not defined';
		if ( values[ ndx ] ) {
			if ( values[ ndx ].front ) {
				front = values[ ndx ].front;
			}
			if ( values[ ndx ].back ) {
				back = values[ ndx ].back;
			}
		}
		const styles = copy( this.props.cardStyles );
		if ( this.state.shaking.includes( ndx ) ) {
			styles.container.animation = 'shake-top 1.2s';
		}
		return (
			<FlippableCard
				value={this.state.cardList[ ndx ]}
				cardStyles={styles}
				onChange={this.changeFactory( ndx )}
				oneTime={this.props.oneTime}
				id={id}
				key={ndx}
			>
				<div>{front}</div>
				<div>{back}</div>
			</FlippableCard>
		);
	}
Exemple #3
0
					onChange={( value ) => {
						const newMinCount = copy( this.state.minCount );
						newMinCount[ i ] = value;
						this.setState({
							minCount: newMinCount
						});
					}}
		return ( event ) => {
			const nameMappings = copy( this.state.nameMappings );
			nameMappings[ colLabel + '-' + rowLabel ] = event.target.value;
			this.setState({
				nameMappings
			});
		};
Exemple #5
0
	constructor( props ) {
		super( props );

		const { layout } = props;
		layout.autosize = true;

		this.state = {
			fullscreen: false,
			oldLayout: copy( layout ),
			layout,
			oldPropLayout: layout
		};
		this.plotData = {
			key: null,
			value: null
		};

		const buttonsToAdd = [];
		if ( props.legendButtons && !props.removeButtons ) {
			buttonsToAdd.push({
				name: 'Toggle Legend',
				icon: PlotlyIcons[ 'legend' ],
				click: this.toggleLegend
			});
			buttonsToAdd.push({
				name: 'Change Legend Orientation',
				icon: PlotlyIcons[ 'changeLegendOrientation' ],
				click: this.toggleLegendOrientation
			});
		}
		if ( props.onShare && !props.removeButtons ) {
			buttonsToAdd.push({
				name: 'Share',
				icon: PlotlyIcons[ 'share' ],
				click: props.onShare
			});
		}
		if ( props.toggleFullscreen && !props.removeButtons ) {
			buttonsToAdd.push({
				name: 'Toggle FullScreen',
				icon: PlotlyIcons[ 'fullscreen' ],
				click: this.toggleFullscreen
			});
		}

		this.config = {
			editable: this.props.editable,
			displayModeBar: true,
			displaylogo: false,
			modeBarButtonsToRemove: this.props.removeButtons ? BUTTONS : [ 'sendDataToCloud', 'hoverClosestCartesian', 'hoverCompareCartesian' ],
			modeBarButtonsToAdd: buttonsToAdd,
			...this.props.config
		};
	}
Exemple #6
0
	toggleLegendOrientation = () => {
		const newLayout = copy( this.state.layout );
		let newPos = 'h';
		if ( newLayout.legend && newLayout.legend.orientation === 'h' ) {
			newPos = 'v';
		}
		newLayout.legend = {
			'orientation': newPos
		};
		this.setState({
			layout: newLayout
		});
	}
Exemple #7
0
	static getDerivedStateFromProps( nextProps, prevState ) {
		debug( 'Get derived state from props...' );
		const newState = {};
		if ( !deepEqual( nextProps.layout, prevState.oldPropLayout ) ) {
			newState.oldPropLayout = nextProps.layout;
			newState.oldLayout = copy( prevState.layout );
			newState.layout = nextProps.layout;
		}
		if ( !isEmptyObject( newState ) ) {
			return newState;
		}
		return null;
	}
Exemple #8
0
	toggleLegend = () => {
		const newLayout = copy( this.state.layout );
		if (
			isUndefined( this.state.layout.showlegend ) ||
			this.state.layout.showlegend === true
		) {
			newLayout.showlegend = false;
		} else {
			newLayout.showlegend = true;
		}
		this.setState({
			layout: newLayout
		});
	}
Exemple #9
0
	handleUpdate = () => {
		this.drawPlot();
		if ( this.props.id ) {
			const session = this.context;
			const changes = calculateChanges( this.figure.layout, this.state.oldLayout );
			if ( changes.length > 0 ) {
				session.log({
					id: this.props.id,
					type: PLOT_UPDATE,
					value: changes
				});
			}
		}
		this.setState({
			oldLayout: copy( this.figure.layout ),
			layout: this.figure.layout
		});
	}
Exemple #10
0
		const enlargeDiv = () => {
			const newLayout = copy( this.state.layout );
			const newEnlarged = copy( this.state.enlarged );
			const { itemHeight, enlargedHeight, isDraggable, isResizable } = this.props;
			if ( !this.state.enlarged[ i ]) {
				for ( let j = 0; j < newLayout.length; j++ ) {
					if ( j < i ) {
						newLayout[ j ] = {
							i: String( j ),
							x: j*4 % 12,
							y: floor( j / itemHeight ) * itemHeight,
							w: 4,
							h: itemHeight,
							isDraggable,
							isResizable
						};
						newEnlarged[ j ] = false;
					}
					else if ( j === i ) {
						newLayout[ j ] = {
							i: String( j ),
							x: 0,
							y: floor( j / itemHeight ) * itemHeight,
							w: 12,
							h: enlargedHeight,
							isDraggable,
							isResizable
						};
						newEnlarged[ i ] = true;
					} else {
						newLayout[ j ] = {
							i: String( j ),
							x: ( ( j-i )*4 ) % 12,
							y: floor( j / itemHeight ) * itemHeight + enlargedHeight,
							w: 4,
							h: itemHeight,
							isDraggable,
							isResizable
						};
						newEnlarged[ j ] = false;
					}
				}
			} else {
				for ( let j = 0; j < newLayout.length; j++ ) {
					newLayout[ j ] = {
						i: String( j ),
						x: j*4 % 12,
						y: floor( j / itemHeight ) * itemHeight,
						w: 4,
						h: itemHeight,
						isDraggable,
						isResizable
					};
					newEnlarged[ j ] = false;
				}
			}
			this.setState({
				layout: newLayout,
				enlarged: newEnlarged
			});
		};