← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +45 -13 3.1.2 → 3.3.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
		@@ -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
		@@ -90,15 +103,24 @@
90	103	} else {
91	104	title = `#${charts[i].id}`;
92	105	}
93	106
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']);
	107	+ if ( 0 <= [ 'gauge', 'table', 'timeline', 'dataTable' ].indexOf( data['visualizer-chart-type']) ) {
	108	+ if ( 'dataTable' === data['visualizer-chart-type']) {
	109	+ chart = data['visualizer-chart-type'];
	110	+ } else {
	111	+ chart = startCase( data['visualizer-chart-type']);
	112	+ }
97	113	} else {
98	114	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
99	115	}
100	116
	117	+ if ( data['visualizer-chart-library']) {
	118	+ if ( 'ChartJS' === data['visualizer-chart-library']) {
	119	+ return;
	120	+ }
	121	+ }
	122	+
101	123	return (
102	124	<div className="visualizer-settings__charts-single">
103	125
104	126	<div className="visualizer-settings__charts-title">
		@@ -104,14 +126,24 @@
104	126	<div className="visualizer-settings__charts-title">
105	127	{ title }
106	128	</div>
107	129
108		- <Chart
109		- chartType={ chart }
110		- rows={ data['visualizer-data'] }
111		- columns={ data['visualizer-series'] }
112		- options={ filterCharts( data['visualizer-settings']) }
113		- />
	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	+ ) }
114	146
115	147	<div
116	148	className="visualizer-settings__charts-controls"
117	149	title={ __( 'Insert Chart' ) }
		@@ -124,9 +156,9 @@
124	156	);
125	157	}) }
126	158	</div>
127	159
128		- { ! chartsLoaded && (
	160	+ { ! chartsLoaded && 5 < charts.length && (
129	161	<Button
130	162	isPrimary
131	163	isLarge
132	164	onClick={ this.loadMoreCharts }