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

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

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

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

216 lines 6.2 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, googleChartPackages } 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	chartPackages={ googleChartPackages }
160	/>
161	) : (
162	<Chart
163	chartVersion={ chartVersion }
164	chartType={ chart }
165	rows={ data['visualizer-data'] }
166	columns={ data['visualizer-series'] }
167	options={ filterCharts( data['visualizer-settings']) }
168	formatters={ formatData( data ) }
169	chartPackages={ googleChartPackages }
170	/>
171	) ) }
172
173	<div className="visualizer-settings__charts-footer"><sub>
174	{ footer }
175	</sub></div>
176
177	<div
178	className="visualizer-settings__charts-controls"
179	title={ __( 'Insert Chart' ) }
180	onClick={ () => this.props.getChart( charts[i].id ) }
181	>
182	<Dashicon icon="upload"></Dashicon>
183	</div>
184
185	</div>
186	);
187	}) }
188	</div>
189
190	{ ! chartsLoaded && perPage - 1 < charts.length && (
191	<Button
192	isPrimary
193	isLarge
194	onClick={ this.loadMoreCharts }
195	isBusy={ isBusy }
196	>
197	{ __( 'Load More' ) }
198	</Button>
199	) }
200
201	</Fragment> :
202	<p className="visualizer-no-charts">
203	{ __( 'No charts found.' ) }
204	</p> :
205	<Placeholder>
206	<Spinner/>
207	</Placeholder>
208	}
209
210	</div>
211	);
212	}
213	}
214
215	export default Charts;
216