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
});
};
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>
);
}
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
});
};
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
};
}
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
});
}
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;
}
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
});
}
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
});
}
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
});
};
