← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +37 -12 3.1.3 → 3.3.4 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
		@@ -41,9 +45,9 @@
41	45
42	46	async componentDidMount() {
43	47
44	48	// Fetch review again if block loaded after saving.
45		- let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=6' });
	49	+ let result = await apiFetch({ path: 'wp/v2/visualizer/?per_page=6&meta_key=visualizer-chart-library&meta_value=ChartJS' });
46	50	this.setState({ charts: result });
47	51	}
48	52
49	53	async loadMoreCharts() {
		@@ -51,9 +55,9 @@
51	55	let chartsLoaded = this.state.chartsLoaded;
52	56
53	57	this.setState({ isBusy: true });
54	58
55		- let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=6&offset=${ offset }` });
	59	+ let result = await apiFetch({ path: `wp/v2/visualizer/?per_page=6&meta_key=visualizer-chart-library&meta_value=ChartJS&offset=${ offset }` });
56	60
57	61	if ( 6 > result.length ) {
58	62	chartsLoaded = true;
59	63	}
		@@ -70,9 +74,19 @@
70	74	const { charts, isBusy, chartsLoaded } = this.state;
71	75
72	76	return (
73	77	<div className="visualizer-settings__charts">
	78	+ <Notice
	79	+ status="warning"
	80	+ isDismissible={ false }
	81	+ >
	82	+ { __( '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	83
	84	+ <ExternalLink href={ visualizerLocalize.adminPage }>
	85	+ { __( 'Click here to visit Visualizer Charts Library.' ) }
	86	+ </ExternalLink>
	87	+ </Notice>
	88	+
75	89	{
76	90	( null !== charts ) ?
77	91	( 1 <= charts.length ) ?
78	92	<Fragment>
		@@ -79,9 +93,8 @@
79	93
80	94	<div className="visualizer-settings__charts-grid">
81	95
82	96	{ ( Object.keys( charts ) ).map( i => {
83		-
84	97	const data = formatDate( charts[i]['chart_data']);
85	98
86	99	let title, chart;
87	100
		@@ -100,10 +113,12 @@
100	113	} else {
101	114	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
102	115	}
103	116
104		- if ( 'dataTable' === chart ) {
105		- return;
	117	+ if ( data['visualizer-chart-library']) {
	118	+ if ( 'ChartJS' === data['visualizer-chart-library']) {
	119	+ return;
	120	+ }
106	121	}
107	122
108	123	return (
109	124	<div className="visualizer-settings__charts-single">
		@@ -111,14 +126,24 @@
111	126	<div className="visualizer-settings__charts-title">
112	127	{ title }
113	128	</div>
114	129
115		- <Chart
116		- chartType={ chart }
117		- rows={ data['visualizer-data'] }
118		- columns={ data['visualizer-series'] }
119		- options={ filterCharts( data['visualizer-settings']) }
120		- />
	130	+ { ( 'dataTable' === chart ) ? (
	131	+ <DataTable
	132	+ id={ charts[i].id }
	133	+ rows={ data['visualizer-data'] }
	134	+ columns={ data['visualizer-series'] }
	135	+ chartsScreen={ true }
	136	+ options={ filterCharts( data['visualizer-settings']) }
	137	+ />
	138	+ ) : (
	139	+ <Chart
	140	+ chartType={ chart }
	141	+ rows={ data['visualizer-data'] }
	142	+ columns={ data['visualizer-series'] }
	143	+ options={ filterCharts( data['visualizer-settings']) }
	144	+ />
	145	+ ) }
121	146
122	147	<div
123	148	className="visualizer-settings__charts-controls"
124	149	title={ __( 'Insert Chart' ) }
		@@ -131,9 +156,9 @@
131	156	);
132	157	}) }
133	158	</div>
134	159
135		- { ! chartsLoaded && (
	160	+ { ! chartsLoaded && 5 < charts.length && (
136	161	<Button
137	162	isPrimary
138	163	isLarge
139	164	onClick={ this.loadMoreCharts }