Skip to content

Commit 9d23ec4

Browse files
HardeepAsraniHardeepAsrani
committed
chore: qa fixes
1 parent f3f2613 commit 9d23ec4

7 files changed

Lines changed: 230 additions & 12 deletions

File tree

‎classes/Visualizer/Gutenberg/Block.php‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,22 @@ public function enqueue_gutenberg_scripts() {
124124
);
125125
wp_localize_script( 'visualizer-gutenberg-block', 'visualizerLocalize', $translation_array );
126126

127+
$d3_renderer_asset = VISUALIZER_ABSPATH . '/classes/Visualizer/D3Renderer/build/index.asset.php';
128+
if ( file_exists( $d3_renderer_asset ) && ! wp_script_is( 'visualizer-d3-renderer', 'registered' ) ) {
129+
// @phpstan-ignore-next-line
130+
$d3_asset = include $d3_renderer_asset;
131+
wp_register_script(
132+
'visualizer-d3-renderer',
133+
VISUALIZER_ABSURL . 'classes/Visualizer/D3Renderer/build/index.js',
134+
array_merge( $d3_asset['dependencies'], array( 'jquery' ) ),
135+
$d3_asset['version'],
136+
true
137+
);
138+
}
139+
if ( wp_script_is( 'visualizer-d3-renderer', 'registered' ) ) {
140+
wp_enqueue_script( 'visualizer-d3-renderer' );
141+
}
142+
127143
// Enqueue frontend and editor block styles
128144
wp_enqueue_style( 'visualizer-gutenberg-block', $stylePath, array( 'visualizer-datatables' ), $asset['version'] );
129145
}
@@ -216,6 +232,9 @@ public function get_visualizer_data( $post ) {
216232

217233
$library = get_post_meta( $post_id, Visualizer_Plugin::CF_CHART_LIBRARY, true );
218234
$data['visualizer-chart-library'] = $library;
235+
if ( 'd3' === $library ) {
236+
$data['visualizer-d3-code'] = get_post_meta( $post_id, Visualizer_Module_AIBuilder::CF_D3_CODE, true );
237+
}
219238

220239
$data['visualizer-source'] = get_post_meta( $post_id, Visualizer_Plugin::CF_SOURCE, true );
221240

‎classes/Visualizer/Gutenberg/src/Components/ChartRender.js‎

Lines changed: 57 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,63 @@ class ChartRender extends Component {
3535
super( ...arguments );
3636
}
3737

38+
getD3ContainerId() {
39+
return `visualizer-d3-${ this.props.id }`;
40+
}
41+
42+
isD3Chart( chart ) {
43+
return chart && chart['visualizer-chart-library'] && 'd3' === chart['visualizer-chart-library'].toLowerCase();
44+
}
45+
46+
renderD3Chart() {
47+
const chart = this.props.chart;
48+
if ( ! this.isD3Chart( chart ) ) {
49+
return;
50+
}
51+
52+
if ( 'undefined' === typeof jQuery ) {
53+
return;
54+
}
55+
56+
const containerId = this.getD3ContainerId();
57+
const data = formatDate( JSON.parse( JSON.stringify( chart ) ) );
58+
const code = chart['visualizer-d3-code'] || chart.code || '';
59+
const payload = {
60+
id: containerId,
61+
charts: {
62+
[ containerId ]: {
63+
library: 'd3',
64+
code,
65+
series: data['visualizer-series'],
66+
data: data['visualizer-data']
67+
}
68+
}
69+
};
70+
71+
jQuery( 'body' ).trigger( 'visualizer:render:chart:start', payload );
72+
}
73+
74+
componentDidMount() {
75+
this.renderD3Chart();
76+
}
77+
78+
componentDidUpdate( prevProps ) {
79+
if ( prevProps.chart !== this.props.chart ) {
80+
this.renderD3Chart();
81+
}
82+
}
83+
3884
render() {
3985

4086
let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
4187

4288
let chart, footer;
4389

4490
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
91+
const isD3 = this.isD3Chart( data );
4592

46-
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
47-
if ( 'DataTable' === data['visualizer-chart-library']) {
93+
if ( ! isD3 && 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
94+
if ( 'DataTable' === data['visualizer-chart-library'] ) {
4895
chart = data['visualizer-chart-type'];
4996
} else {
5097
chart = this.props.chart['visualizer-chart-type'];
@@ -53,7 +100,7 @@ class ChartRender extends Component {
53100
}
54101
chart = startCase( chart );
55102
}
56-
} else {
103+
} else if ( ! isD3 ) {
57104
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
58105
}
59106

@@ -88,7 +135,13 @@ class ChartRender extends Component {
88135
</Toolbar>
89136
</BlockControls>
90137

91-
{ ( 'DataTable' === data['visualizer-chart-library']) ? (
138+
{ isD3 ? (
139+
<div
140+
id={ this.getD3ContainerId() }
141+
className="visualizer-d3-preview"
142+
style={ { height: '500px' } }
143+
/>
144+
) : ( 'DataTable' === data['visualizer-chart-library']) ? (
92145
<DataTable
93146
id={ this.props.id }
94147
rows={ data['visualizer-data'] }

‎classes/Visualizer/Gutenberg/src/Components/ChartSelect.js‎

Lines changed: 58 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -81,14 +81,61 @@ visualizerMediaView.Chart = wp.media.view.MediaFrame.extend(
8181
);
8282

8383
class ChartSelect extends Component {
84+
getD3ContainerId() {
85+
return `visualizer-d3-select-${ this.props.id }`;
86+
}
87+
88+
isD3Chart( chart ) {
89+
return chart && chart['visualizer-chart-library'] && 'd3' === chart['visualizer-chart-library'].toLowerCase();
90+
}
91+
92+
renderD3Chart() {
93+
const chart = this.props.chart;
94+
if ( ! this.isD3Chart( chart ) ) {
95+
return;
96+
}
97+
98+
if ( 'undefined' === typeof jQuery ) {
99+
return;
100+
}
101+
102+
const containerId = this.getD3ContainerId();
103+
const data = formatDate( JSON.parse( JSON.stringify( chart ) ) );
104+
const code = chart['visualizer-d3-code'] || chart.code || '';
105+
const payload = {
106+
id: containerId,
107+
charts: {
108+
[ containerId ]: {
109+
library: 'd3',
110+
code,
111+
series: data['visualizer-series'],
112+
data: data['visualizer-data']
113+
}
114+
}
115+
};
116+
117+
jQuery( 'body' ).trigger( 'visualizer:render:chart:start', payload );
118+
}
119+
120+
componentDidMount() {
121+
this.renderD3Chart();
122+
}
123+
124+
componentDidUpdate( prevProps ) {
125+
if ( prevProps.chart !== this.props.chart ) {
126+
this.renderD3Chart();
127+
}
128+
}
129+
84130
render() {
85131
let chartVersion = 'undefined' !== typeof google.visualization ? google.visualization.Version : 'current';
86132

87133
let chart, footer;
88134

89135
let data = formatDate( JSON.parse( JSON.stringify( this.props.chart ) ) );
136+
const isD3 = this.isD3Chart( data );
90137

91-
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
138+
if ( ! isD3 && 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( this.props.chart['visualizer-chart-type']) ) {
92139
if ( 'DataTable' === data['visualizer-chart-library']) {
93140
chart = data['visualizer-chart-type'];
94141
} else {
@@ -98,8 +145,10 @@ class ChartSelect extends Component {
98145
}
99146
chart = startCase( chart );
100147
}
101-
} else {
148+
} else if ( ! isD3 ) {
102149
chart = `${ startCase( this.props.chart['visualizer-chart-type']) }Chart`;
150+
} else {
151+
chart = 'AI';
103152
}
104153

105154
if ( data['visualizer-data-exploded']) {
@@ -147,7 +196,13 @@ class ChartSelect extends Component {
147196

148197
{ ( null !== this.props.chart ) &&
149198

150-
( 'DataTable' === data['visualizer-chart-library']) ? (
199+
isD3 ? (
200+
<div
201+
id={ this.getD3ContainerId() }
202+
className="visualizer-d3-preview"
203+
style={ { height: '500px' } }
204+
/>
205+
) : ( 'DataTable' === data['visualizer-chart-library']) ? (
151206
<DataTable
152207
id={ this.props.id }
153208
rows={ data['visualizer-data'] }

‎classes/Visualizer/Gutenberg/src/Components/Charts.js‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ class Charts extends Component {
3535
super( ...arguments );
3636

3737
this.loadMoreCharts = this.loadMoreCharts.bind( this );
38+
this.renderD3Charts = this.renderD3Charts.bind( this );
3839

3940
this.state = {
4041
charts: null,
@@ -52,6 +53,12 @@ class Charts extends Component {
5253
this.setState({ charts: result });
5354
}
5455

56+
componentDidUpdate( prevProps, prevState ) {
57+
if ( prevState.charts !== this.state.charts ) {
58+
this.renderD3Charts( this.state.charts );
59+
}
60+
}
61+
5562
async loadMoreCharts() {
5663
const offset = ( this.state.charts ).length;
5764
let chartsLoaded = this.state.chartsLoaded;
@@ -72,6 +79,43 @@ class Charts extends Component {
7279
});
7380
}
7481

82+
isD3Chart( chart ) {
83+
return chart && chart['visualizer-chart-library'] && 'd3' === chart['visualizer-chart-library'].toLowerCase();
84+
}
85+
86+
getD3ContainerId( chartId ) {
87+
return `visualizer-d3-list-${ chartId }`;
88+
}
89+
90+
renderD3Charts( charts ) {
91+
if ( ! charts || 'undefined' === typeof jQuery ) {
92+
return;
93+
}
94+
95+
Object.keys( charts ).forEach( ( i ) => {
96+
const data = formatDate( charts[i]['chart_data'] );
97+
if ( ! this.isD3Chart( data ) ) {
98+
return;
99+
}
100+
101+
const containerId = this.getD3ContainerId( charts[i].id );
102+
const code = data['visualizer-d3-code'] || data.code || '';
103+
const payload = {
104+
id: containerId,
105+
charts: {
106+
[ containerId ]: {
107+
library: 'd3',
108+
code,
109+
series: data['visualizer-series'],
110+
data: data['visualizer-data']
111+
}
112+
}
113+
};
114+
115+
jQuery( 'body' ).trigger( 'visualizer:render:chart:start', payload );
116+
} );
117+
}
118+
75119
render() {
76120

77121
let chartVersion = 'undefined' !== typeof google ? google.visualization.Version : 'current';
@@ -109,7 +153,9 @@ class Charts extends Component {
109153
title = `#${charts[i].id}`;
110154
}
111155

112-
if ( 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
156+
const isD3 = this.isD3Chart( data );
157+
158+
if ( ! isD3 && 0 <= [ 'gauge', 'tabular', 'timeline' ].indexOf( data['visualizer-chart-type']) ) {
113159
if ( 'DataTable' === data['visualizer-chart-library']) {
114160
chart = data['visualizer-chart-type'];
115161
} else {
@@ -119,8 +165,10 @@ class Charts extends Component {
119165
}
120166
chart = startCase( chart );
121167
}
122-
} else {
168+
} else if ( ! isD3 ) {
123169
chart = `${ startCase( data['visualizer-chart-type']) }Chart`;
170+
} else {
171+
chart = 'AI';
124172
}
125173

126174
if ( data['visualizer-chart-library']) {
@@ -140,7 +188,13 @@ class Charts extends Component {
140188
{ title }
141189
</div>
142190

143-
{ ( 'DataTable' === data['visualizer-chart-library']) ? (
191+
{ isD3 ? (
192+
<div
193+
id={ this.getD3ContainerId( charts[i].id ) }
194+
className="visualizer-d3-preview"
195+
style={ { height: '260px' } }
196+
/>
197+
) : ( 'DataTable' === data['visualizer-chart-library']) ? (
144198
<DataTable
145199
id={ charts[i].id }
146200
rows={ data['visualizer-data'] }

‎classes/Visualizer/Module/Admin.php‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,22 @@ public function enqueueMediaScripts() {
349349
if ( post_type_supports( $typenow, 'editor' ) || $current_screen->id === 'widgets' || $current_screen->id === 'customize' ) {
350350
wp_enqueue_style( 'visualizer-media', VISUALIZER_ABSURL . 'css/media.css', array( 'media-views' ), Visualizer_Plugin::VERSION );
351351

352+
$d3_renderer_asset = VISUALIZER_ABSPATH . '/classes/Visualizer/D3Renderer/build/index.asset.php';
353+
if ( file_exists( $d3_renderer_asset ) && ! wp_script_is( 'visualizer-d3-renderer', 'registered' ) ) {
354+
// @phpstan-ignore-next-line
355+
$d3_asset = include $d3_renderer_asset;
356+
wp_register_script(
357+
'visualizer-d3-renderer',
358+
VISUALIZER_ABSURL . 'classes/Visualizer/D3Renderer/build/index.js',
359+
array_merge( $d3_asset['dependencies'], array( 'jquery' ) ),
360+
$d3_asset['version'],
361+
true
362+
);
363+
}
364+
if ( wp_script_is( 'visualizer-d3-renderer', 'registered' ) ) {
365+
wp_enqueue_script( 'visualizer-d3-renderer' );
366+
}
367+
352368
// Load all the assets for the different libraries we support.
353369
$deps = array(
354370
Visualizer_Render_Sidebar_Google::enqueue_assets( array( 'media-editor' ) ),

‎classes/Visualizer/Module/Chart.php‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,12 +402,18 @@ private function _getChartArray( $chart = null ) {
402402

403403
$date_formats = Visualizer_Source::get_date_formats_if_exists( $series, $data );
404404

405+
$code = '';
406+
if ( 'd3' === $library ) {
407+
$code = get_post_meta( $chart->ID, Visualizer_Module_AIBuilder::CF_D3_CODE, true );
408+
}
409+
405410
return array(
406411
'type' => $type,
407412
'series' => $series,
408413
'settings' => $settings,
409414
'data' => $data,
410415
'library' => $library,
416+
'code' => $code,
411417
'css' => $css,
412418
'date_formats' => $date_formats,
413419
);

‎js/media/view.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,26 @@
5555
chart.data = model.get('data');
5656
chart.library = model.get('library');
5757
chart.settings = model.get('settings');
58+
chart.code = model.get('code');
5859
chart.settings.width = self.options.width;
5960
chart.settings.height = self.options.height;
6061
$('#' + self.id).parent().append(model.get('css'));
6162

62-
$('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} );
63+
if ( chart.library && 'd3' === chart.library ) {
64+
$('body').trigger('visualizer:render:chart:start', {
65+
id: self.id,
66+
charts: {
67+
[self.id]: {
68+
library: 'd3',
69+
code: chart.code,
70+
series: chart.series,
71+
data: chart.data
72+
}
73+
}
74+
});
75+
} else {
76+
$('body').trigger('visualizer:render:specificchart:start', {id: self.id, chart: chart, v: {page_type: 'post'}} );
77+
}
6378
}
6479
});
6580

@@ -403,4 +418,4 @@
403418

404419
return $(this);
405420
};
406-
})(jQuery);
421+
})(jQuery);

0 commit comments

Comments
 (0)