← All changes | classes/Visualizer/Gutenberg/src/Components/ChartRender.js +61 -16 3.1.0 → 3.6.1 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 );
		@@ -34,18 +36,32 @@
34	36	}
35	37
36	38	render() {
37	39
38		- let chart;
	40	+ let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
39	41
	42	+ let chart, footer;
	43	+
40	44	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
41	45
42		- if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
43		- chart = startCase( this.props.chart['visualizer-chart-type']);
	46	+ if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	47	+ if ( 'DataTable' === data['visualizer-chart-library']) {
	48	+ chart = data['visualizer-chart-type'];
	49	+ } else {
	50	+ chart = this.props.chart['visualizer-chart-type'];
	51	+ if ( 'tabular' === chart ) {
	52	+ chart = 'table';
	53	+ }
	54	+ chart = startCase( chart );
	55	+ }
44	56	} else {
45	57	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
46	58	}
47	59
	60	+ if ( data['visualizer-data-exploded']) {
	61	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	62	+ }
	63	+
48	64	return (
49	65	<div className={ this.props.className }>
50	66
51	67	{ ( null !== this.props.chart ) &&
		@@ -65,19 +81,48 @@
65	81	</Tooltip>
66	82	</Toolbar>
67	83	</BlockControls>
68	84
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		- />
	85	+ { ( 'DataTable' === data['visualizer-chart-library']) ? (
	86	+ <DataTable
	87	+ id={ this.props.id }
	88	+ rows={ data['visualizer-data'] }
	89	+ columns={ data['visualizer-series'] }
	90	+ options={ data['visualizer-settings'] }
	91	+ />
	92	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	93	+ <Chart
	94	+ chartVersion={ chartVersion }
	95	+ chartType={ chart }
	96	+ rows={ data['visualizer-data'] }
	97	+ columns={ data['visualizer-series'] }
	98	+ options={
	99	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	100	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	101	+ compact( this.props.chart['visualizer-settings'])
	102	+ }
	103	+ height="500px"
	104	+ formatters={ formatData( data ) }
	105	+ />
	106	+ ) : (
	107	+ <Chart
	108	+ chartVersion={ chartVersion }
	109	+ chartType={ chart }
	110	+ rows={ data['visualizer-data'] }
	111	+ columns={ data['visualizer-series'] }
	112	+ options={
	113	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	114	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	115	+ compact( this.props.chart['visualizer-settings'])
	116	+ }
	117	+ height="500px"
	118	+ formatters={ formatData( data ) }
	119	+ />
	120	+ ) ) }
	121	+
	122	+ <div className="visualizer-settings__charts-footer"><sub>
	123	+ { footer }
	124	+ </sub></div>
80	125
81	126	</Fragment>
82	127	}
83	128