← All changes | classes/Visualizer/Gutenberg/src/Components/ChartRender.js +57 -17 3.1.2 → 3.4.8 View file →

		@@ -2,11 +2,13 @@
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		-import { compact, formatDate, isValidJSON } from '../utils.js';
	10	+import { compact, formatDate, isValidJSON, formatData } from '../utils.js';
9	11
10	12	/**
11	13	* WordPress dependencies
12	14	*/
		@@ -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,30 @@
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', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	44	+ if ( 'DataTable' === data['visualizer-chart-library']) {
	45	+ chart = data['visualizer-chart-type'];
	46	+ } else {
	47	+ chart = this.props.chart['visualizer-chart-type'];
	48	+ if ( 'tabular' === chart ) {
	49	+ chart = 'table';
	50	+ }
	51	+ chart = startCase( chart );
	52	+ }
44	53	} else {
45	54	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
46	55	}
47	56
	57	+ if ( data['visualizer-data-exploded']) {
	58	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	59	+ }
	60	+
48	61	return (
49	62	<div className={ this.props.className }>
50	63
51	64	{ ( null !== this.props.chart ) &&
		@@ -65,19 +78,46 @@
65	78	</Tooltip>
66	79	</Toolbar>
67	80	</BlockControls>
68	81
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		- />
	82	+ { ( 'DataTable' === data['visualizer-chart-library']) ? (
	83	+ <DataTable
	84	+ id={ this.props.id }
	85	+ rows={ data['visualizer-data'] }
	86	+ columns={ data['visualizer-series'] }
	87	+ options={ data['visualizer-settings'] }
	88	+ />
	89	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	90	+ <Chart
	91	+ chartType={ chart }
	92	+ rows={ data['visualizer-data'] }
	93	+ columns={ data['visualizer-series'] }
	94	+ options={
	95	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	96	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	97	+ compact( this.props.chart['visualizer-settings'])
	98	+ }
	99	+ height="500px"
	100	+ formatters={ formatData( data ) }
	101	+ />
	102	+ ) : (
	103	+ <Chart
	104	+ chartType={ chart }
	105	+ rows={ data['visualizer-data'] }
	106	+ columns={ data['visualizer-series'] }
	107	+ options={
	108	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	109	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	110	+ compact( this.props.chart['visualizer-settings'])
	111	+ }
	112	+ height="500px"
	113	+ formatters={ formatData( data ) }
	114	+ />
	115	+ ) ) }
	116	+
	117	+ <div className="visualizer-settings__charts-footer"><sub>
	118	+ { footer }
	119	+ </sub></div>
80	120
81	121	</Fragment>
82	122	}
83	123