← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +75 -19 3.1.2 → 3.5.0 View file →

		@@ -2,10 +2,12 @@
2	2	* External dependencies
3	3	*/
4	4	import { Chart } from 'react-google-charts';
5	5
6		-import { formatDate, filterCharts } from '../utils.js';
	6	+import DataTable from './DataTable.js';
7	7
	8	+import { formatDate, filterCharts, formatData } from '../utils.js';
	9	+
8	10	/**
9	11	* WordPress dependencies
10	12	*/
11	13	const { startCase } = lodash;
		@@ -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,69 @@
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', '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	+ }
97	120	} else {
98	121	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
99	122	}
100	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	+
101	134	return (
102		- <div className="visualizer-settings__charts-single">
	135	+ <div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }>
103	136
104	137	<div className="visualizer-settings__charts-title">
105	138	{ title }
106	139	</div>
107	140
108		- <Chart
109		- chartType={ chart }
110		- rows={ data['visualizer-data'] }
111		- columns={ data['visualizer-series'] }
112		- options={ filterCharts( data['visualizer-settings']) }
113		- />
	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	+ ) ) }
114	166
	167	+ <div className="visualizer-settings__charts-footer"><sub>
	168	+ { footer }
	169	+ </sub></div>
	170	+
115	171	<div
116	172	className="visualizer-settings__charts-controls"
117	173	title={ __( 'Insert Chart' ) }
118	174	onClick={ () => this.props.getChart( charts[i].id ) }
		@@ -124,9 +180,9 @@
124	180	);
125	181	}) }
126	182	</div>
127	183
128		- { ! chartsLoaded && (
	184	+ { ! chartsLoaded && perPage - 1 < charts.length && (
129	185	<Button
130	186	isPrimary
131	187	isLarge
132	188	onClick={ this.loadMoreCharts }