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

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

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

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

210 lines 5.9 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	const { charts, isBusy, chartsLoaded, perPage } = this.state;
78
79	return (
80	<div className="visualizer-settings__charts">
81	<Notice
82	status="warning"
83	isDismissible={ false }
84	>
85	{ __( '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.' ) }
86
87	<ExternalLink href={ visualizerLocalize.adminPage }>
88	{ __( 'Click here to visit Visualizer Charts Library.' ) }
89	</ExternalLink>
90	</Notice>
91
92	{
93	( null !== charts ) ?
94	( 1 <= charts.length ) ?
95	<Fragment>
96
97	<div className="visualizer-settings__charts-grid">
98
99	{ ( Object.keys( charts ) ).map( i => {
100	const data = formatDate( charts[i]['chart_data']);
101
102	let title, chart, footer;
103
104	if ( data['visualizer-settings'].title ) {
105	title = data['visualizer-settings'].title;
106	} else {
107	title = `#${charts[i].id}`;
108	}
109
110	if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
111	if ( 'DataTable' === data['visualizer-chart-library']) {
112	chart = data['visualizer-chart-type'];
113	} else {
114	chart = data['visualizer-chart-type'];
115	if ( 'tabular' === chart ) {
116	chart = 'table';
117	}
118	chart = startCase( chart );
119	}
120	} else {
121	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
122	}
123
124	if ( data['visualizer-chart-library']) {
125	if ( 'ChartJS' === data['visualizer-chart-library']) {
126	return;
127	}
128	}
129
130	if ( data['visualizer-data-exploded']) {
131	footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
132	}
133
134	return (
135	<div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }>
136
137	<div className="visualizer-settings__charts-title">
138	{ title }
139	</div>
140
141	{ ( 'DataTable' === data['visualizer-chart-library']) ? (
142	<DataTable
143	id={ charts[i].id }
144	rows={ data['visualizer-data'] }
145	columns={ data['visualizer-series'] }
146	chartsScreen={ true }
147	options={ data['visualizer-settings'] }
148	/>
149	) : ( '' !== data['visualizer-data-exploded'] ? (
150	<Chart
151	chartType={ chart }
152	rows={ data['visualizer-data'] }
153	columns={ data['visualizer-series'] }
154	options={ filterCharts( data['visualizer-settings']) }
155	formatters={ formatData( data ) }
156	/>
157	) : (
158	<Chart
159	chartType={ chart }
160	rows={ data['visualizer-data'] }
161	columns={ data['visualizer-series'] }
162	options={ filterCharts( data['visualizer-settings']) }
163	formatters={ formatData( data ) }
164	/>
165	) ) }
166
167	<div className="visualizer-settings__charts-footer"><sub>
168	{ footer }
169	</sub></div>
170
171	<div
172	className="visualizer-settings__charts-controls"
173	title={ __( 'Insert Chart' ) }
174	onClick={ () => this.props.getChart( charts[i].id ) }
175	>
176	<Dashicon icon="upload"></Dashicon>
177	</div>
178
179	</div>
180	);
181	}) }
182	</div>
183
184	{ ! chartsLoaded && perPage - 1 < charts.length && (
185	<Button
186	isPrimary
187	isLarge
188	onClick={ this.loadMoreCharts }
189	isBusy={ isBusy }
190	>
191	{ __( 'Load More' ) }
192	</Button>
193	) }
194
195	</Fragment> :
196	<p className="visualizer-no-charts">
197	{ __( 'No charts found.' ) }
198	</p> :
199	<Placeholder>
200	<Spinner/>
201	</Placeholder>
202	}
203
204	</div>
205	);
206	}
207	}
208
209	export default Charts;
210