Visualizer – Tables & Charts Manager with Built-in AI Generator / 3.8.0

Visualizer – Tables & Charts Manager with Built-in AI Generator v3.8.0

visualizer / classes / Visualizer / Gutenberg / src / Components / Charts.js

Charts.js in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.8.0, at classes/Visualizer/Gutenberg/src/Components/Charts.js

214 lines 6.1 KB

Raw Download Zip

1	/**
2	* External dependencies
3	*/
4	import { Chart } from 'react-google-charts';
5
6	import DataTable from './DataTable.js';
7
8	import { formatDate, filterCharts, formatData } from '../utils.js';
9
10	/**
11	* WordPress dependencies
12	*/
13	const { startCase } = lodash;
14
15	const { __ } = wp.i18n;
16
17	const { apiFetch } = wp;
18
19	const {
20	Component,
21	Fragment
22	} = wp.element;
23
24	const {
25	Button,
26	Dashicon,
27	ExternalLink,
28	Notice,
29	Placeholder,
30	Spinner
31	} = wp.components;
32
33	class Charts extends Component {
34	constructor() {
35	super( ...arguments );
36
37	this.loadMoreCharts = this.loadMoreCharts.bind( this );
38
39	this.state = {
40	charts: null,
41	isBusy: false,
42	chartsLoaded: false,
43	perPage: visualizerLocalize.chartsPerPage
44	};
45	}
46
47	async componentDidMount() {
48	const perPage = visualizerLocalize.chartsPerPage;
49
50	// 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' });
52	this.setState({ charts: result });
53	}
54
55	async loadMoreCharts() {
56	const offset = ( this.state.charts ).length;
57	let chartsLoaded = this.state.chartsLoaded;
58	const perPage = this.state.perPage;
59
60	this.setState({ isBusy: true });
61
62	let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=${ perPage }&meta_key=visualizer-chart-library&meta_value=ChartJS&offset=${ offset }` });
63
64	if ( perPage > result.length ) {
65	chartsLoaded = true;
66	}
67
68	this.setState({
69	charts: this.state.charts.concat( result ),
70	isBusy: false,
71	chartsLoaded
72	});
73	}
74
75	render() {
76
77	let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
78
79	const { charts, isBusy, chartsLoaded, perPage } = this.state;
80
81	return (
82	<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
89	<ExternalLink href={ visualizerLocalize.adminPage }>
90	{ __( 'Click here to visit Visualizer Charts Library.' ) }
91	</ExternalLink>
92	</Notice>
93
94	{
95	( null !== charts ) ?
96	( 1 <= charts.length ) ?
97	<Fragment>
98
99	<div className="visualizer-settings__charts-grid">
100
101	{ ( Object.keys( charts ) ).map( i => {
102	const data = formatDate( charts[i]['chart_data']);
103
104	let title, chart, footer;
105
106	if ( data['visualizer-settings'].title ) {
107	title = data['visualizer-settings'].title;
108	} else {
109	title = `#${charts[i].id}`;
110	}
111
112	if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
113	if ( 'DataTable' === data['visualizer-chart-library']) {
114	chart = data['visualizer-chart-type'];
115	} else {
116	chart = data['visualizer-chart-type'];
117	if ( 'tabular' === chart ) {
118	chart = 'table';
119	}
120	chart = startCase( chart );
121	}
122	} else {
123	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
124	}
125
126	if ( data['visualizer-chart-library']) {
127	if ( 'ChartJS' === data['visualizer-chart-library']) {
128	return;
129	}
130	}
131
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	return (
137	<div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }>
138
139	<div className="visualizer-settings__charts-title">
140	{ title }
141	</div>
142
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	) ) }
170
171	<div className="visualizer-settings__charts-footer"><sub>
172	{ footer }
173	</sub></div>
174
175	<div
176	className="visualizer-settings__charts-controls"
177	title={ __( 'Insert Chart' ) }
178	onClick={ () => this.props.getChart( charts[i].id ) }
179	>
180	<Dashicon icon="upload"></Dashicon>
181	</div>
182
183	</div>
184	);
185	}) }
186	</div>
187
188	{ ! chartsLoaded && perPage - 1 < charts.length && (
189	<Button
190	isPrimary
191	isLarge
192	onClick={ this.loadMoreCharts }
193	isBusy={ isBusy }
194	>
195	{ __( 'Load More' ) }
196	</Button>
197	) }
198
199	</Fragment> :
200	<p className="visualizer-no-charts">
201	{ __( 'No charts found.' ) }
202	</p> :
203	<Placeholder>
204	<Spinner/>
205	</Placeholder>
206	}
207
208	</div>
209	);
210	}
211	}
212
213	export default Charts;
214