| @@ -1,8 +1,13 @@ | ||
| 1 | 1 | import isPlainObject from 'is-plain-object'; |
| 2 | 2 | |
| 3 | 3 | import deepFilter from 'deep-filter'; |
| 4 | 4 | |
| 5 | +// Import WordPress dependencies | |
| 6 | +const { | |
| 7 | + apiFetch | |
| 8 | +} = wp; | |
| 9 | + | |
| 5 | 10 | // Format Date of Chart Data |
| 6 | 11 | export const formatDate = ( data ) => { |
| 7 | 12 | Object.keys( data['visualizer-series']).map( i => { |
| 8 | 13 | if ( data['visualizer-series'][i].type !== undefined && 'date' === data['visualizer-series'][i].type ) { |
| @@ -188,4 +193,99 @@ | ||
| 188 | 193 | } |
| 189 | 194 | } |
| 190 | 195 | return color; |
| 191 | 196 | }; |
| 197 | + | |
| 198 | +// Google Chart Packages | |
| 199 | +export const googleChartPackages = [ 'corechart', 'geochart', 'gauge', 'table', 'timeline', 'controls' ]; | |
| 200 | + | |
| 201 | +/** | |
| 202 | + * This function extends the wp.media.view.MediaFrame class to create a custom frame for Visualizer Charts creation/editing. | |
| 203 | + * | |
| 204 | + * @returns {wp.media.view.MediaFrame} The extended MediaFrame object. | |
| 205 | + * | |
| 206 | + * @example | |
| 207 | + * | |
| 208 | + * const popupBuilder = buildChartPopup; | |
| 209 | + * const popup = new popupBuilder(); | |
| 210 | + * popup.open(); | |
| 211 | + */ | |
| 212 | +export const buildChartPopup = () => { | |
| 213 | + return wp.media.view.MediaFrame.extend( | |
| 214 | + { | |
| 215 | + initialize: function() { | |
| 216 | + const self = this; | |
| 217 | + | |
| 218 | + _.defaults( | |
| 219 | + self.options, { | |
| 220 | + action: '', | |
| 221 | + id: 'visualizer', | |
| 222 | + state: 'iframe:visualizer', | |
| 223 | + title: 'Visualizer' | |
| 224 | + } | |
| 225 | + ); | |
| 226 | + | |
| 227 | + wp.media.view.MediaFrame.prototype.initialize.apply( self, arguments ); | |
| 228 | + | |
| 229 | + wp.media.view.settings.tab = 'Visualizer'; | |
| 230 | + wp.media.view.settings.tabUrl = self.options.action; | |
| 231 | + self.createIframeStates(); | |
| 232 | + }, | |
| 233 | + | |
| 234 | + createIframeStates: function( passedOptions ) { | |
| 235 | + const self = this; | |
| 236 | + wp.media.view.MediaFrame.prototype.createIframeStates.apply( self, arguments ); | |
| 237 | + | |
| 238 | + self.state( self.options.state ).set( | |
| 239 | + _.defaults( | |
| 240 | + { | |
| 241 | + tab: self.options.id, | |
| 242 | + src: self.options.action + '&tab=' + self.options.id, | |
| 243 | + title: self.options.title, | |
| 244 | + content: 'iframe', | |
| 245 | + menu: 'default' | |
| 246 | + }, passedOptions | |
| 247 | + ) | |
| 248 | + ); | |
| 249 | + | |
| 250 | + }, | |
| 251 | + | |
| 252 | + open: function() { | |
| 253 | + try { | |
| 254 | + wp.media.view.MediaFrame.prototype.open.apply( this, arguments ); | |
| 255 | + } catch ( error ) { | |
| 256 | + console.error( error ); | |
| 257 | + } | |
| 258 | + } | |
| 259 | + } | |
| 260 | + ); | |
| 261 | +}; | |
| 262 | + | |
| 263 | +/** | |
| 264 | + * Try to get the chart data from the server. | |
| 265 | + * | |
| 266 | + * If the status is not 'publish', it will retry. | |
| 267 | + * | |
| 268 | + * @param {number|string} chartId The chart ID. | |
| 269 | + * @returns {Promise<{result: Object, status: string}>} The chart data and status. | |
| 270 | + */ | |
| 271 | +export async function tryGetPublishedChartData( chartId ) { | |
| 272 | + let result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` }); | |
| 273 | + const numRetries = 8; | |
| 274 | + | |
| 275 | + let attempt = 0; | |
| 276 | + while ( | |
| 277 | + result && | |
| 278 | + undefined !== result.status && | |
| 279 | + 'publish' !== result.status && | |
| 280 | + numRetries > attempt | |
| 281 | + ) { | |
| 282 | + await new Promise( resolve => setTimeout( resolve, 750 ) ); | |
| 283 | + result = await apiFetch({ path: `wp/v2/visualizer/${chartId}` }); | |
| 284 | + attempt++; | |
| 285 | + } | |
| 286 | + | |
| 287 | + return { | |
| 288 | + result: result, | |
| 289 | + chartStatus: result.status ? result.status : 'auto-draft' | |
| 290 | + }; | |
| 291 | +} | |