← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +68 -18 3.1.0 → 3.4.2 View file →

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