← All changes | classes/Visualizer/Gutenberg/src/Components/ChartRender.js +50 -16 3.1.3 → 3.4.2 View file →

		@@ -2,8 +2,10 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
	6	+import DataTable from './DataTable.js';
	7	+
6	8	import merge from 'merge';
7	9
8	10	import { compact, formatDate, isValidJSON } from '../utils.js';
9	11
		@@ -25,9 +27,9 @@
25	27	Toolbar,
26	28	Tooltip
27	29	} = wp.components;
28	30
29		-const { BlockControls } = wp.editor;
	31	+const { BlockControls } = wp.blockEditor || wp.editor;
30	32
31	33	class ChartRender extends Component {
32	34	constructor() {
33	35	super( ...arguments );
		@@ -33,19 +35,26 @@
33	35	super( ...arguments );
34	36	}
35	37
36	38	render() {
	39	+ let chart, footer;
37	40
38		- let chart;
39		-
40	41	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
41	42
42		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
43		- chart = startCase( this.props.chart['visualizer-chart-type']);
	43	+ if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	44	+ if ( 'dataTable' === data['visualizer-chart-type']) {
	45	+ chart = data['visualizer-chart-type'];
	46	+ } else {
	47	+ chart = startCase( this.props.chart['visualizer-chart-type']);
	48	+ }
44	49	} else {
45	50	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
46	51	}
47	52
	53	+ if ( data['visualizer-data-exploded']) {
	54	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	55	+ }
	56	+
48	57	return (
49	58	<div className={ this.props.className }>
50	59
51	60	{ ( null !== this.props.chart ) &&
		@@ -65,19 +74,44 @@
65	74	</Tooltip>
66	75	</Toolbar>
67	76	</BlockControls>
68	77
69		- <Chart
70		- chartType={ chart }
71		- rows={ data['visualizer-data'] }
72		- columns={ data['visualizer-series'] }
73		- options={
74		- isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
75		- merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
76		- compact( this.props.chart['visualizer-settings'])
77		- }
78		- height="500px"
79		- />
	78	+ { ( 'dataTable' === chart ) ? (
	79	+ <DataTable
	80	+ id={ this.props.id }
	81	+ rows={ data['visualizer-data'] }
	82	+ columns={ data['visualizer-series'] }
	83	+ options={ data['visualizer-settings'] }
	84	+ />
	85	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	86	+ <Chart
	87	+ chartType={ chart }
	88	+ rows={ data['visualizer-data'] }
	89	+ columns={ data['visualizer-series'] }
	90	+ options={
	91	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	92	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	93	+ compact( this.props.chart['visualizer-settings'])
	94	+ }
	95	+ height="500px"
	96	+ />
	97	+ ) : (
	98	+ <Chart
	99	+ chartType={ chart }
	100	+ rows={ data['visualizer-data'] }
	101	+ columns={ data['visualizer-series'] }
	102	+ options={
	103	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	104	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	105	+ compact( this.props.chart['visualizer-settings'])
	106	+ }
	107	+ height="500px"
	108	+ />
	109	+ ) ) }
	110	+
	111	+ <div className="visualizer-settings__charts-footer"><sub>
	112	+ { footer }
	113	+ </sub></div>
80	114
81	115	</Fragment>
82	116	}
83	117