← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +21 -74 3.10.1 → 3.2.1 View file →

		@@ -2,12 +2,10 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
6		-import DataTable from './DataTable.js';
	6	+import { formatDate, filterCharts } from '../utils.js';
7	7
8		-import { formatDate, filterCharts, formatData } from '../utils.js';
9		-
10	8	/**
11	9	* WordPress dependencies
12	10	*/
13	11	const { startCase } = lodash;
		@@ -23,10 +21,8 @@
23	21
24	22	const {
25	23	Button,
26	24	Dashicon,
27		- ExternalLink,
28		- Notice,
29	25	Placeholder,
30	26	Spinner
31	27	} = wp.components;
32	28
		@@ -38,18 +34,16 @@
38	34
39	35	this.state = {
40	36	charts: null,
41	37	isBusy: false,
42		- chartsLoaded: false,
43		- perPage: visualizerLocalize.chartsPerPage
	38	+ chartsLoaded: false
44	39	};
45	40	}
46	41
47	42	async componentDidMount() {
48		- const perPage = visualizerLocalize.chartsPerPage;
49	43
50	44	// Fetch review again if block loaded after saving.
51		- let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=' + perPage + '&meta_key=visualizer-chart-library&meta_value=ChartJS' });
	45	+ let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=6' });
52	46	this.setState({ charts: result });
53	47	}
54	48
55	49	async loadMoreCharts() {
		@@ -54,15 +48,14 @@
54	48
55	49	async loadMoreCharts() {
56	50	const offset = ( this.state.charts ).length;
57	51	let chartsLoaded = this.state.chartsLoaded;
58		- const perPage = this.state.perPage;
59	52
60	53	this.setState({ isBusy: true });
61	54
62		- let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=${ perPage }&meta_key=visualizer-chart-library&meta_value=ChartJS&offset=${ offset }` });
	55	+ let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=6&offset=${ offset }` });
63	56
64		- if ( perPage > result.length ) {
	57	+ if ( 6 > result.length ) {
65	58	chartsLoaded = true;
66	59	}
67	60
68	61	this.setState({
		@@ -73,25 +66,13 @@
73	66	}
74	67
75	68	render() {
76	69
77		- let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
	70	+ const { charts, isBusy, chartsLoaded } = this.state;
78	71
79		- const { charts, isBusy, chartsLoaded, perPage } = this.state;
80		-
81	72	return (
82	73	<div className="visualizer-settings__charts">
83		- <Notice
84		- status="warning"
85		- isDismissible={ false }
86		- >
87		- { __( 'ChartJS charts are currently not available for selection here, you must visit the library, get the shortcode, and add the chart here in a shortcode tag.' ) }
88	74
89		- <ExternalLink href={ visualizerLocalize.adminPage }>
90		- { __( 'Click here to visit Visualizer Charts Library.' ) }
91		- </ExternalLink>
92		- </Notice>
93		-
94	75	{
95	76	( null !== charts ) ?
96	77	( 1 <= charts.length ) ?
97	78	<Fragment>
		@@ -98,11 +79,12 @@
98	79
99	80	<div className="visualizer-settings__charts-grid">
100	81
101	82	{ ( Object.keys( charts ) ).map( i => {
	83	+
102	84	const data = formatDate( charts[i]['chart_data']);
103	85
104		- let title, chart, footer;
	86	+ let title, chart;
105	87
106	88	if ( data['visualizer-settings'].title ) {
107	89	title = data['visualizer-settings'].title;
108	90	} else {
		@@ -108,71 +90,36 @@
108	90	} else {
109	91	title = `#${charts[i].id}`;
110	92	}
111	93
112		- if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
113		- if ( 'DataTable' === data['visualizer-chart-library']) {
	94	+ if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( data['visualizer-chart-type']) ) {
	95	+ if ( 'dataTable' === data['visualizer-chart-type']) {
114	96	chart = data['visualizer-chart-type'];
115	97	} else {
116		- chart = data['visualizer-chart-type'];
117		- if ( 'tabular' === chart ) {
118		- chart = 'table';
119		- }
120		- chart = startCase( chart );
	98	+ chart = startCase( data['visualizer-chart-type']);
121	99	}
122	100	} else {
123	101	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
124	102	}
125	103
126		- if ( data['visualizer-chart-library']) {
127		- if ( 'ChartJS' === data['visualizer-chart-library']) {
128		- return;
129		- }
	104	+ if ( 'dataTable' === chart ) {
	105	+ return;
130	106	}
131	107
132		- if ( data['visualizer-data-exploded']) {
133		- footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
134		- }
135		-
136	108	return (
137		- <div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }>
	109	+ <div className="visualizer-settings__charts-single">
138	110
139	111	<div className="visualizer-settings__charts-title">
140	112	{ title }
141	113	</div>
142	114
143		- { ( 'DataTable' === data['visualizer-chart-library']) ? (
144		- <DataTable
145		- id={ charts[i].id }
146		- rows={ data['visualizer-data'] }
147		- columns={ data['visualizer-series'] }
148		- chartsScreen={ true }
149		- options={ data['visualizer-settings'] }
150		- />
151		- ) : ( '' !== data['visualizer-data-exploded'] ? (
152		- <Chart
153		- chartVersion={ chartVersion }
154		- chartType={ chart }
155		- rows={ data['visualizer-data'] }
156		- columns={ data['visualizer-series'] }
157		- options={ filterCharts( data['visualizer-settings']) }
158		- formatters={ formatData( data ) }
159		- />
160		- ) : (
161		- <Chart
162		- chartVersion={ chartVersion }
163		- chartType={ chart }
164		- rows={ data['visualizer-data'] }
165		- columns={ data['visualizer-series'] }
166		- options={ filterCharts( data['visualizer-settings']) }
167		- formatters={ formatData( data ) }
168		- />
169		- ) ) }
	115	+ <Chart
	116	+ chartType={ chart }
	117	+ rows={ data['visualizer-data'] }
	118	+ columns={ data['visualizer-series'] }
	119	+ options={ filterCharts( data['visualizer-settings']) }
	120	+ />
170	121
171		- <div className="visualizer-settings__charts-footer"><sub>
172		- { footer }
173		- </sub></div>
174		-
175	122	<div
176	123	className="visualizer-settings__charts-controls"
177	124	title={ __( 'Insert Chart' ) }
178	125	onClick={ () => this.props.getChart( charts[i].id ) }
		@@ -184,9 +131,9 @@
184	131	);
185	132	}) }
186	133	</div>
187	134
188		- { ! chartsLoaded && perPage - 1 < charts.length && (
	135	+ { ! chartsLoaded && (
189	136	<Button
190	137	isPrimary
191	138	isLarge
192	139	onClick={ this.loadMoreCharts }