← All changes | classes/Visualizer/Gutenberg/src/Components/ChartRender.js +16 -69 3.10.10 → 3.2.0 View file →

		@@ -2,13 +2,11 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
6		-import DataTable from './DataTable.js';
7		-
8	6	import merge from 'merge';
9	7
10		-import { compact, formatDate, isValidJSON, formatData, googleChartPackages } from '../utils.js';
	8	+import { compact, formatDate, isValidJSON } from '../utils.js';
11	9
12	10	/**
13	11	* WordPress dependencies
14	12	*/
		@@ -27,9 +25,9 @@
27	25	Toolbar,
28	26	Tooltip
29	27	} = wp.components;
30	28
31		-const { BlockControls } = wp.blockEditor || wp.editor;
	29	+const { BlockControls } = wp.editor;
32	30
33	31	class ChartRender extends Component {
34	32	constructor() {
35	33	super( ...arguments );
		@@ -36,38 +34,18 @@
36	34	}
37	35
38	36	render() {
39	37
40		- let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
	38	+ let chart;
41	39
42		- let chart, footer;
43		-
44	40	let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
45	41
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		- }
	42	+ if ( 0 <= [ 'gauge', 'table', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
	43	+ chart = startCase( this.props.chart['visualizer-chart-type']);
56	44	} else {
57	45	chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
58	46	}
59	47
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 && '' == this.props.chart['visualizer-settings'].hAxis.format ) ) {
66		- this.props.chart['visualizer-settings'].hAxis.format = 'YYYY-MM-dd';
67		- }
68		- }
69		-
70	48	return (
71	49	<div className={ this.props.className }>
72	50
73	51	{ ( null !== this.props.chart ) &&
		@@ -87,50 +65,19 @@
87	65	</Tooltip>
88	66	</Toolbar>
89	67	</BlockControls>
90	68
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		- chartPackages={ googleChartPackages }
112		- />
113		- ) : (
114		- <Chart
115		- chartVersion={ chartVersion }
116		- chartType={ chart }
117		- rows={ data['visualizer-data'] }
118		- columns={ data['visualizer-series'] }
119		- options={
120		- isValidJSON( this.props.chart['visualizer-settings'].manual ) ?
121		- merge( compact( this.props.chart['visualizer-settings']), JSON.parse( this.props.chart['visualizer-settings'].manual ) ) :
122		- compact( this.props.chart['visualizer-settings'])
123		- }
124		- height="500px"
125		- formatters={ formatData( data ) }
126		- chartPackages={ googleChartPackages }
127		- />
128		- ) ) }
129		-
130		- <div className="visualizer-settings__charts-footer"><sub>
131		- { footer }
132		- </sub></div>
	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	+ />
133	80
134	81	</Fragment>
135	82	}
136	83