← All changes | classes/Visualizer/Gutenberg/src/Components/ChartRender.js +67 -16 3.1.1 → 3.7.9 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,38 @@
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	+
	64	+ if ( this.props.chart['visualizer-series'] && 0 <= [ 'date', 'datetime', 'timeofday' ].indexOf( this.props.chart['visualizer-series'][0].type ) ) {
	65	+ if ( this.props.chart['visualizer-settings'] && '' == this.props.chart['visualizer-settings'].hAxis.format ) {
	66	+ this.props.chart['visualizer-settings'].hAxis.format = 'YYYY-MM-dd';
	67	+ }
	68	+ }
	69	+
48	70	return (
49	71	<div className={ this.props.className }>
50	72
51	73	{ ( null !== this.props.chart ) &&
		@@ -65,19 +87,48 @@
65	87	</Tooltip>
66	88	</Toolbar>
67	89	</BlockControls>
68	90
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		- />
	91	+ { ( 'DataTable' === data['visualizer-chart-library']) ? (
	92	+ <DataTable
	93	+ id={ this.props.id }
	94	+ rows={ data['visualizer-data'] }
	95	+ columns={ data['visualizer-series'] }
	96	+ options={ data['visualizer-settings'] }
	97	+ />
	98	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	99	+ <Chart
	100	+ chartVersion={ chartVersion }
	101	+ chartType={ chart }
	102	+ rows={ data['visualizer-data'] }
	103	+ columns={ data['visualizer-series'] }
	104	+ options={
	105	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	106	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	107	+ compact( this.props.chart['visualizer-settings'])
	108	+ }
	109	+ height="500px"
	110	+ formatters={ formatData( data ) }
	111	+ />
	112	+ ) : (
	113	+ <Chart
	114	+ chartVersion={ chartVersion }
	115	+ chartType={ chart }
	116	+ rows={ data['visualizer-data'] }
	117	+ columns={ data['visualizer-series'] }
	118	+ options={
	119	+ isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
	120	+ merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
	121	+ compact( this.props.chart['visualizer-settings'])
	122	+ }
	123	+ height="500px"
	124	+ formatters={ formatData( data ) }
	125	+ />
	126	+ ) ) }
	127	+
	128	+ <div className="visualizer-settings__charts-footer"><sub>
	129	+ { footer }
	130	+ </sub></div>
80	131
81	132	</Fragment>
82	133	}
83	134