Skip to content

Commit 9dfa92f

Browse files
vytisbulkeviciusvytisbulkevicius
authored
release(minor): new filters for charts
- Add data filter support for the charts
2 parents 1818a65 + 1c440c8 commit 9dfa92f

File tree

11 files changed

+377
-15
lines changed

11 files changed

+377
-15
lines changed

‎classes/Visualizer/Module/Chart.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -737,7 +737,7 @@ private function _handleDataAndSettingsPage() {
737737
$title = $this->_chart->ID;
738738
}
739739
$settings['internal_title'] = $title;
740-
$settings_label = $settings['pieResidueSliceLabel'];
740+
$settings_label = isset( $settings['pieResidueSliceLabel'] ) ? $settings['pieResidueSliceLabel'] : '';
741741
if ( empty( $settings_label ) ) {
742742
$settings['pieResidueSliceLabel'] = esc_html__( 'Other', 'visualizer' );
743743
} else {

‎classes/Visualizer/Module/Frontend.php

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,19 @@ public function renderChart( $atts ) {
395395
unset( $settings['chart-img'] );
396396
}
397397

398+
$enable_controls = false;
399+
if ( isset( $settings['controls'] ) && ! empty( $settings['controls']['controlType'] ) ) {
400+
$column_index = $settings['controls']['filterColumnIndex'];
401+
$column_label = $settings['controls']['filterColumnLabel'];
402+
if ( 'false' !== $column_index || 'false' !== $column_label ) {
403+
$enable_controls = true;
404+
}
405+
}
406+
407+
if ( ! $enable_controls ) {
408+
unset( $settings['controls'] );
409+
}
410+
398411
// add chart to the array
399412
$this->_charts[ $id ] = array(
400413
'type' => $type,
@@ -478,8 +491,11 @@ public function renderChart( $atts ) {
478491
if ( $type === 'tabular' ) {
479492
$prefix = 'T' . 'a' . 'bl' . 'e';
480493
}
494+
if ( Visualizer_Module::is_pro() && $enable_controls ) {
495+
$actions_div .= '<div id="control_wrapper_' . $id . '"></div>';
496+
}
481497
// return placeholder div
482-
return '<div class="' . $container_class . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . ( ! Visualizer_Module::is_pro() ? ( '<' . 'di' . 'v st' . 'yl' . 'e="' . 'op' . 'a' . 'ci' . 't' . 'y:' . '0' . '.7' . ';t' . 'ex' . 't-a' . 'li' . 'gn:' . 'ri' . 'gh' . 't;b' . 'o' . 'tto' . 'm: 1' . '0px; z-i' . 'nd' . 'ex:1' . '00' . '0; ' . 'le' . 'ft' . ':2' . '0px' . '; fo' . 'nt-si' . 'ze: 1' . '4px">' . $prefix . ' b' . 'y' . ' <a ' . 'h' . 're' . 'f="ht' . 'tp' . 's:/' . '/t' . 'he' . 'me' . 'i' . 'sl' . 'e' . '.c' . 'om' . '/p' . 'lu' . 'gi' . 'ns' . '/v' . 'i' . 'su' . 'al' . 'iz' . 'er' . '-c' . 'ha' . 'rts' . '-a' . 'nd' . '-gr' . 'ap' . 'hs' . '/" t' . 'arg' . 'et="' . '_bl' . 'an' . 'k" re' . 'l=' . '"no' . 'fol' . 'l' . 'ow"' . '>V' . 'is' . 'u' . 'a' . 'l' . 'i' . 'z' . 'e' . 'r' . '</' . 'a' . '>' . '<' . '/' . 'd' . 'i' . 'v' . '>' ) : '' ) . '</div>';
498+
return '<div class="' . $container_class . '" id="chart_wrapper_' . $id . '">' . $actions_div . '<div id="' . $id . '"' . $this->getHtmlAttributes( $attributes ) . '></div>' . $this->addSchema( $chart->ID ) . ( ! Visualizer_Module::is_pro() ? ( '<' . 'di' . 'v st' . 'yl' . 'e="' . 'op' . 'a' . 'ci' . 't' . 'y:' . '0' . '.7' . ';t' . 'ex' . 't-a' . 'li' . 'gn:' . 'ri' . 'gh' . 't;b' . 'o' . 'tto' . 'm: 1' . '0px; z-i' . 'nd' . 'ex:1' . '00' . '0; ' . 'le' . 'ft' . ':2' . '0px' . '; fo' . 'nt-si' . 'ze: 1' . '4px">' . $prefix . ' b' . 'y' . ' <a ' . 'h' . 're' . 'f="ht' . 'tp' . 's:/' . '/t' . 'he' . 'me' . 'i' . 'sl' . 'e' . '.c' . 'om' . '/p' . 'lu' . 'gi' . 'ns' . '/v' . 'i' . 'su' . 'al' . 'iz' . 'er' . '-c' . 'ha' . 'rts' . '-a' . 'nd' . '-gr' . 'ap' . 'hs' . '/" t' . 'arg' . 'et="' . '_bl' . 'an' . 'k" re' . 'l=' . '"no' . 'fol' . 'l' . 'ow"' . '>V' . 'is' . 'u' . 'a' . 'l' . 'i' . 'z' . 'e' . 'r' . '</' . 'a' . '>' . '<' . '/' . 'd' . 'i' . 'v' . '>' ) : '' ) . '</div>';
483499
}
484500

485501
/**

‎classes/Visualizer/Render/Library.php

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -233,11 +233,20 @@ private function _renderLibrary() {
233233
foreach ( $this->charts as $placeholder_id => $chart ) {
234234
// show the sidebar after the first 3 charts.
235235
$count++;
236+
$enable_controls = false;
237+
$settings = isset( $chart['settings'] ) ? $chart['settings'] : array();
238+
if ( ! empty( $settings['controls']['controlType'] ) ) {
239+
$column_index = $settings['controls']['filterColumnIndex'];
240+
$column_label = $settings['controls']['filterColumnLabel'];
241+
if ( 'false' !== $column_index || 'false' !== $column_label ) {
242+
$enable_controls = true;
243+
}
244+
}
236245
if ( 3 === $count ) {
237246
$this->_renderSidebar();
238-
$this->_renderChartBox( $placeholder_id, $chart['id'] );
247+
$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
239248
} else {
240-
$this->_renderChartBox( $placeholder_id, $chart['id'] );
249+
$this->_renderChartBox( $placeholder_id, $chart['id'], $enable_controls );
241250
}
242251
}
243252
// show the sidebar if there are less than 3 charts.
@@ -282,7 +291,7 @@ private function _renderLibrary() {
282291
* @param string $placeholder_id The placeholder's id for the chart.
283292
* @param int $chart_id The id of the chart.
284293
*/
285-
private function _renderChartBox( $placeholder_id, $chart_id ) {
294+
private function _renderChartBox( $placeholder_id, $chart_id, $with_filter = false ) {
286295
$settings = get_post_meta( $chart_id, Visualizer_Plugin::CF_SETTINGS );
287296
$title = '#' . $chart_id;
288297
if ( ! empty( $settings[0]['title'] ) ) {
@@ -336,9 +345,16 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
336345
}
337346
$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
338347
echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
348+
if ( Visualizer_Module::is_pro() && $with_filter ) {
349+
echo '<div id="chart_wrapper_' . $placeholder_id . '">';
350+
echo '<div id="control_wrapper_' . $placeholder_id . '" class="vz-library-chart-filter"></div>';
351+
}
339352
echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
340353
echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
341354
echo '</div>';
355+
if ( Visualizer_Module::is_pro() && $with_filter ) {
356+
echo '</div>';
357+
}
342358
echo '<div class="visualizer-chart-footer visualizer-clearfix">';
343359
echo '<a class="visualizer-chart-action visualizer-chart-delete" href="', $delete_url, '" title="', esc_attr__( 'Delete', 'visualizer' ), '" onclick="return showNotice.warn();"></a>';
344360
echo '<a class="visualizer-chart-action visualizer-chart-clone" href="', $clone_url, '" title="', esc_attr__( 'Clone', 'visualizer' ), '"></a>';

‎classes/Visualizer/Render/Page/Data.php

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,16 @@ protected function _renderContent() {
5757
$this->add_additional_content();
5858

5959
// Added by Ash/Upwork
60+
if ( Visualizer_Module::is_pro() ) {
61+
echo '<div id="chart_wrapper_canvas">';
62+
echo '<div id="control_wrapper_canvas"></div>';
63+
}
6064
echo '<div id="canvas">';
6165
echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
6266
echo '</div>';
67+
if ( Visualizer_Module::is_pro() ) {
68+
echo '</div>';
69+
}
6370
echo $this->custom_css;
6471
}
6572

‎classes/Visualizer/Render/Sidebar.php

Lines changed: 238 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,9 @@ protected function _renderManualConfigExample() {
158158
* @access protected
159159
*/
160160
protected function _renderAdvancedSettings() {
161+
// Chart control settings.
162+
$this->_renderChartControlsGroup();
163+
161164
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
162165
self::_renderGroupStart( esc_html__( 'Frontend Actions', 'visualizer' ) );
163166
} else {
@@ -345,14 +348,15 @@ protected static function _renderColorPickerItem( $title, $name, $value, $defaul
345348
* @param string $type The type for the input (out of number, email, tel etc., default is text).
346349
* @param array $custom_attributes The custom attributes.
347350
*/
348-
protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '', $type = 'text', $custom_attributes = array() ) {
351+
protected static function _renderTextItem( $title, $name, $value, $desc, $placeholder = '', $type = 'text', $custom_attributes = array(), $extra_class = array() ) {
349352
$attributes = '';
350353
if ( $custom_attributes ) {
351354
foreach ( $custom_attributes as $k => $v ) {
352355
$attributes .= ' ' . $k . '="' . esc_attr( $v ) . '"';
353356
}
354357
}
355-
echo '<div class="viz-section-item">';
358+
$extra_class[] = 'viz-section-item';
359+
echo '<div class="' . esc_attr( implode( ' ', $extra_class ) ) . '">';
356360
echo '<a class="more-info" href="javascript:;">[?]</a>';
357361
echo '<b>', $title, '</b>';
358362
echo '<input type="', $type, '" class="control-text" ', $attributes, ' name="', $name, '" value="', esc_attr( $value ), '" placeholder="', $placeholder, '">';
@@ -567,4 +571,236 @@ protected function _renderChartImageSettings() {
567571
);
568572
self::_renderSectionEnd();
569573
}
574+
575+
/**
576+
* Renders chart controls group.
577+
*
578+
* @access protected
579+
*/
580+
protected function _renderChartControlsGroup() {
581+
if ( 'google' !== $this->getLibrary() ) {
582+
return;
583+
}
584+
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
585+
self::_renderGroupStart( esc_html__( 'Chart Data Filter Configuration', 'visualizer' ) );
586+
} else {
587+
self::_renderGroupStart( esc_html__( 'Chart Data Filter Configuration', 'visualizer' ) . '<span class="dashicons dashicons-lock"></span>', '', apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'chart-filter-controls' ), 'vz-data-controls' );
588+
echo '<div style="position: relative">';
589+
}
590+
self::_renderSectionStart();
591+
self::_renderSectionDescription( '<span class="viz-gvlink">' . sprintf( __( 'Configure the data filter controls by providing configuration variables right from the %1$sChart Controls API%2$s. ', 'visualizer' ), '<a href="https://developers.google.com/chart/interactive/docs/gallery/controls#controls-gallery" target="_blank">', '</a>' ) . '</span>' );
592+
self::_renderSectionEnd();
593+
$this->_renderChartControlsSettings();
594+
if ( ! Visualizer_Module_Admin::proFeaturesLocked() ) {
595+
echo apply_filters( 'visualizer_pro_upsell', '', 'chart-permissions' );
596+
echo '</div>';
597+
}
598+
self::_renderGroupEnd();
599+
}
600+
601+
/**
602+
* Renders chart controls setting.
603+
*
604+
* @access protected
605+
*/
606+
protected function _renderChartControlsSettings() {
607+
608+
self::_renderSectionStart( esc_html__( 'Options', 'visualizer' ), false );
609+
$control_type = ! empty( $this->controls['controlType'] ) ? $this->controls['controlType'] : '';
610+
611+
self::_renderSelectItem(
612+
esc_html__( 'Filter Type', 'visualizer' ),
613+
'controls[controlType]',
614+
$control_type,
615+
array(
616+
'' => '',
617+
'StringFilter' => esc_html__( 'String Filter', 'visualizer' ),
618+
'NumberRangeFilter' => esc_html__( 'Number Range Filter', 'visualizer' ),
619+
'CategoryFilter' => esc_html__( 'Category Filter', 'visualizer' ),
620+
'ChartRangeFilter' => esc_html__( 'Chart Range Filter', 'visualizer' ),
621+
'DateRangeFilter' => esc_html__( 'Date Range Filter', 'visualizer' ),
622+
),
623+
'',
624+
false,
625+
array( 'vz-controls-opt' )
626+
);
627+
628+
$column_index = [ 'false' => '' ];
629+
$column_label = [ 'false' => '' ];
630+
if ( ! empty( $this->__series ) ) {
631+
foreach ( $this->__series as $key => $column ) {
632+
$column_type = isset( $column['type'] ) ? $column['type'] : '';
633+
$label = isset( $column['label'] ) ? $column['label'] : '';
634+
$column_label[ $label ] = $label;
635+
$column_index[ $key ] = sprintf( __( '%1$d — Column Type: %2$s ', 'visualizer' ), $key, ucfirst( $column_type ) );
636+
}
637+
}
638+
639+
self::_renderSelectItem(
640+
esc_html__( 'Filter By Column Index', 'visualizer' ),
641+
'controls[filterColumnIndex]',
642+
isset( $this->controls['filterColumnIndex'] ) ? $this->controls['filterColumnIndex'] : '',
643+
$column_index,
644+
'',
645+
false,
646+
array( 'vz-controls-opt' )
647+
);
648+
649+
self::_renderSelectItem(
650+
esc_html__( 'Filter By Column Label', 'visualizer' ),
651+
'controls[filterColumnLabel]',
652+
! empty( $this->controls['filterColumnLabel'] ) ? $this->controls['filterColumnLabel'] : '',
653+
$column_label,
654+
'',
655+
false,
656+
array( 'vz-controls-opt' )
657+
);
658+
659+
self::_renderSelectItem(
660+
esc_html__( 'Use Formatted Value', 'visualizer' ),
661+
'controls[useFormattedValue]',
662+
! empty( $this->controls['useFormattedValue'] ) ? $this->controls['useFormattedValue'] : '',
663+
array(
664+
'false' => esc_html__( 'False', 'visualizer' ),
665+
'true' => esc_html__( 'True', 'visualizer' ),
666+
),
667+
'',
668+
false
669+
);
670+
671+
self::_renderTextItem(
672+
esc_html__( 'Min Value', 'visualizer' ),
673+
'controls[minValue]',
674+
! empty( $this->controls['minValue'] ) ? $this->controls['minValue'] : '',
675+
esc_html__( 'Minimum allowed value for the range lower extent.', 'visualizer' ),
676+
'',
677+
'text'
678+
);
679+
680+
self::_renderTextItem(
681+
esc_html__( 'Max Value', 'visualizer' ),
682+
'controls[maxValue]',
683+
! empty( $this->controls['maxValue'] ) ? $this->controls['maxValue'] : '',
684+
esc_html__( 'Maximum allowed value for the range higher extent.', 'visualizer' ),
685+
'',
686+
'text'
687+
);
688+
689+
self::_renderSelectItem(
690+
esc_html__( 'Match Type', 'visualizer' ),
691+
'controls[matchType]',
692+
! empty( $this->controls['matchType'] ) ? $this->controls['matchType'] : '',
693+
array(
694+
'prefix' => esc_html__( 'Prefix', 'visualizer' ),
695+
'exact' => esc_html__( 'Exact', 'visualizer' ),
696+
'any' => esc_html__( 'Any', 'visualizer' ),
697+
),
698+
'',
699+
false
700+
);
701+
702+
self::_renderSelectItem(
703+
esc_html__( 'Case Sensitive', 'visualizer' ),
704+
'controls[caseSensitive]',
705+
! empty( $this->controls['caseSensitive'] ) ? $this->controls['caseSensitive'] : '',
706+
array(
707+
'false' => esc_html__( 'False', 'visualizer' ),
708+
'true' => esc_html__( 'True', 'visualizer' ),
709+
),
710+
'',
711+
false
712+
);
713+
714+
self::_renderSectionEnd();
715+
716+
self::_renderSectionStart( esc_html__( 'UI Options', 'visualizer' ), false );
717+
718+
self::_renderTextItem(
719+
esc_html__( 'Label', 'visualizer' ),
720+
'controls[ui][label]',
721+
! empty( $this->controls['ui']['label'] ) ? $this->controls['ui']['label'] : '',
722+
'',
723+
'',
724+
'text'
725+
);
726+
727+
self::_renderTextItem(
728+
esc_html__( 'Label Separator', 'visualizer' ),
729+
'controls[ui][labelSeparator]',
730+
! empty( $this->controls['ui']['labelSeparator'] ) ? $this->controls['ui']['labelSeparator'] : '',
731+
'',
732+
'',
733+
'text'
734+
);
735+
736+
self::_renderTextItem(
737+
esc_html__( 'Caption', 'visualizer' ),
738+
'controls[ui][caption]',
739+
! empty( $this->controls['ui']['caption'] ) ? $this->controls['ui']['caption'] : '',
740+
'',
741+
'',
742+
'text'
743+
);
744+
745+
self::_renderSelectItem(
746+
esc_html__( 'Label Stacking', 'visualizer' ),
747+
'controls[ui][labelStacking]',
748+
! empty( $this->controls['ui']['labelStacking'] ) ? $this->controls['ui']['labelStacking'] : '',
749+
array(
750+
'horizontal' => esc_html__( 'Horizontal', 'visualizer' ),
751+
'vertical' => esc_html__( 'Vertical', 'visualizer' ),
752+
),
753+
'',
754+
false
755+
);
756+
757+
self::_renderSelectItem(
758+
esc_html__( 'Orientation', 'visualizer' ),
759+
'controls[ui][orientation]',
760+
! empty( $this->controls['ui']['orientation'] ) ? $this->controls['ui']['orientation'] : '',
761+
array(
762+
'horizontal' => esc_html__( 'Horizontal', 'visualizer' ),
763+
'vertical' => esc_html__( 'Vertical', 'visualizer' ),
764+
),
765+
'',
766+
false
767+
);
768+
769+
self::_renderSelectItem(
770+
esc_html__( 'Show Range Values', 'visualizer' ),
771+
'controls[showRangeValues]',
772+
! empty( $this->controls['showRangeValues'] ) ? $this->controls['showRangeValues'] : '',
773+
array(
774+
'true' => esc_html__( 'True', 'visualizer' ),
775+
'false' => esc_html__( 'False', 'visualizer' ),
776+
),
777+
'',
778+
false
779+
);
780+
781+
self::_renderSelectItem(
782+
esc_html__( 'Allow Multiple', 'visualizer' ),
783+
'controls[allowMultiple]',
784+
! empty( $this->controls['allowMultiple'] ) ? $this->controls['allowMultiple'] : '',
785+
array(
786+
'true' => esc_html__( 'True', 'visualizer' ),
787+
'false' => esc_html__( 'False', 'visualizer' ),
788+
),
789+
'',
790+
false
791+
);
792+
793+
self::_renderSelectItem(
794+
esc_html__( 'Allow Typing', 'visualizer' ),
795+
'controls[allowTyping]',
796+
! empty( $this->controls['allowTyping'] ) ? $this->controls['allowTyping'] : '',
797+
array(
798+
'true' => esc_html__( 'True', 'visualizer' ),
799+
'false' => esc_html__( 'False', 'visualizer' ),
800+
),
801+
'',
802+
false
803+
);
804+
self::_renderSectionEnd();
805+
}
570806
}

‎css/frame.css

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,16 @@
1717
bottom: 10px;
1818
left: 10px;
1919
}
20-
20+
#control_wrapper_canvas:not(:empty) {
21+
margin: 15px 0 0 5px;
22+
}
23+
#control_wrapper_canvas:not(:empty) + #canvas {
24+
top: 55px;
25+
left: 50px;
26+
}
27+
.goog-combobox input {
28+
min-height: auto;
29+
}
2130
.loader {
2231
position: absolute;
2332
top: 50%;
@@ -1528,6 +1537,6 @@ canvas.chartjs-render-monitor {
15281537
/******************************************************************************/
15291538
/******************************** Frontend Actions ***********************************/
15301539
/******************************************************************************/
1531-
#vz-frontend-actions .only-pro-inner {
1540+
#vz-frontend-actions .only-pro-inner, #vz-data-controls .only-pro-inner {
15321541
text-align: center;
15331542
}

0 commit comments

Comments
 (0)