← All changes | classes/Visualizer/Gutenberg/src/Components/Charts.js +79 -19 3.1.0 → 3.10.7 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,25 @@
66	73	}
67	74
68	75	render() {
69	76
70		- const { charts, isBusy, chartsLoaded } = this.state;
	77	+ let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
71	78
	79	+ const { charts, isBusy, chartsLoaded, perPage } = this.state;
	80	+
72	81	return (
73	82	<div className="visualizer-settings__charts">
	83	+ <Notice
	84	+ status="warning"
	85	+ isDismissible={ false }
	86	+ >
	87	+ { __( '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	88
	89	+ <ExternalLink href={ visualizerLocalize.adminPage }>
	90	+ { __( 'Click here to visit Visualizer Charts Library.' ) }
	91	+ </ExternalLink>
	92	+ </Notice>
	93	+
75	94	{
76	95	( null !== charts ) ?
77	96	( 1 <= charts.length ) ?
78	97	<Fragment>
		@@ -79,12 +98,11 @@
79	98
80	99	<div className="visualizer-settings__charts-grid">
81	100
82	101	{ ( Object.keys( charts ) ).map( i => {
83		-
84	102	const data = formatDate( charts[i]['chart_data']);
85	103
86		- let title, chart;
	104	+ let title, chart, footer;
87	105
88	106	if ( data['visualizer-settings'].title ) {
89	107	title = data['visualizer-settings'].title;
90	108	} else {
		@@ -90,29 +108,71 @@
90	108	} else {
91	109	title = `#${charts[i].id}`;
92	110	}
93	111
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']);
	112	+ if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
	113	+ if ( 'DataTable' === data['visualizer-chart-library']) {
	114	+ chart = data['visualizer-chart-type'];
	115	+ } else {
	116	+ chart = data['visualizer-chart-type'];
	117	+ if ( 'tabular' === chart ) {
	118	+ chart = 'table';
	119	+ }
	120	+ chart = startCase( chart );
	121	+ }
97	122	} else {
98	123	chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
99	124	}
100	125
	126	+ if ( data['visualizer-chart-library']) {
	127	+ if ( 'ChartJS' === data['visualizer-chart-library']) {
	128	+ return;
	129	+ }
	130	+ }
	131	+
	132	+ if ( data['visualizer-data-exploded']) {
	133	+ footer = __( 'Annotations in this chart may not display here but they will display in the front end.' );
	134	+ }
	135	+
101	136	return (
102		- <div className="visualizer-settings__charts-single">
	137	+ <div className="visualizer-settings__charts-single" data-chart-type={ chart } key={ `chart-${ charts[i].id }` }>
103	138
104	139	<div className="visualizer-settings__charts-title">
105	140	{ title }
106	141	</div>
107	142
108		- <Chart
109		- chartType={ chart }
110		- rows={ data['visualizer-data'] }
111		- columns={ data['visualizer-series'] }
112		- options={ filterCharts( data['visualizer-settings']) }
113		- />
	143	+ { ( 'DataTable' === data['visualizer-chart-library']) ? (
	144	+ <DataTable
	145	+ id={ charts[i].id }
	146	+ rows={ data['visualizer-data'] }
	147	+ columns={ data['visualizer-series'] }
	148	+ chartsScreen={ true }
	149	+ options={ data['visualizer-settings'] }
	150	+ />
	151	+ ) : ( '' !== data['visualizer-data-exploded'] ? (
	152	+ <Chart
	153	+ chartVersion={ chartVersion }
	154	+ chartType={ chart }
	155	+ rows={ data['visualizer-data'] }
	156	+ columns={ data['visualizer-series'] }
	157	+ options={ filterCharts( data['visualizer-settings']) }
	158	+ formatters={ formatData( data ) }
	159	+ />
	160	+ ) : (
	161	+ <Chart
	162	+ chartVersion={ chartVersion }
	163	+ chartType={ chart }
	164	+ rows={ data['visualizer-data'] }
	165	+ columns={ data['visualizer-series'] }
	166	+ options={ filterCharts( data['visualizer-settings']) }
	167	+ formatters={ formatData( data ) }
	168	+ />
	169	+ ) ) }
114	170
	171	+ <div className="visualizer-settings__charts-footer"><sub>
	172	+ { footer }
	173	+ </sub></div>
	174	+
115	175	<div
116	176	className="visualizer-settings__charts-controls"
117	177	title={ __( 'Insert Chart' ) }
118	178	onClick={ () => this.props.getChart( charts[i].id ) }
		@@ -124,9 +184,9 @@
124	184	);
125	185	}) }
126	186	</div>
127	187
128		- { ! chartsLoaded && (
	188	+ { ! chartsLoaded && perPage - 1 < charts.length && (
129	189	<Button
130	190	isPrimary
131	191	isLarge
132	192	onClick={ this.loadMoreCharts }