fusion_builder_default_visibility( 'string' ), 'title' => '', 'chart_padding' => '', 'chart_type' => '', 'bg_colors' => '', 'border_colors' => '', 'chart_legend_position' => $fusion_settings->get( 'chart_legend_position' ), 'legend_labels' => '', 'legend_text_colors' => '', 'x_axis_labels' => '', 'x_axis_label' => '', 'y_axis_label' => '', 'show_tooltips' => $fusion_settings->get( 'chart_show_tooltips' ), 'chart_border_size' => 1, 'chart_border_type' => 'smooth', 'chart_fill' => 'start', 'chart_point_style' => '', 'chart_point_size' => '', 'chart_point_bg_color' => '', 'chart_point_border_color' => '', 'chart_bg_color' => $fusion_settings->get( 'chart_bg_color' ), 'chart_axis_text_color' => $fusion_settings->get( 'chart_axis_text_color' ), 'chart_gridline_color' => $fusion_settings->get( 'chart_gridline_color' ), 'class' => '', 'id' => '', ), $args ); $defaults['chart_padding'] = array( 'top' => isset( $args['padding_top'] ) && '' !== $args['padding_top'] ? $args['padding_top'] : 0, 'right' => isset( $args['padding_right'] ) && '' !== $args['padding_right'] ? $args['padding_right'] : 0, 'bottom' => isset( $args['padding_bottom'] ) && '' !== $args['padding_bottom'] ? $args['padding_bottom'] : 0, 'left' => isset( $args['padding_left'] ) && '' !== $args['padding_left'] ? $args['padding_left'] : 0, ); $this->parent_args = $defaults; $html = '

'; $html .= do_shortcode( $content ); if ( '' !== $this->parent_args['title'] ) { $html .= '

' . esc_html( $this->parent_args['title'] ) . '

'; } $html .= '

'; $html .= '

'; if ( 'off' !== $this->parent_args['chart_legend_position'] ) { $html .= '

'; } $html .= '

'; $html .= '

'; $styles = ''; if ( '' !== $this->parent_args['chart_bg_color'] ) { $styles .= '#fusion-chart-' . $this->chart_sc_counter . '{background-color: ' . $this->parent_args['chart_bg_color'] . ';}'; } if ( ! empty( $this->parent_args['chart_padding'] ) && is_array( $this->parent_args['chart_padding'] ) ) { $styles .= '#fusion-chart-' . $this->chart_sc_counter . '{padding: ' . implode( ' ', $this->parent_args['chart_padding'] ) . ';}'; } if ( '' !== $this->parent_args['legend_text_colors'] ) { if ( 'pie' === $this->parent_args['chart_type'] || 'doughnut' === $this->parent_args['chart_type'] || 'polarArea' === $this->parent_args['chart_type'] || ( ( 'bar' === $this->parent_args['chart_type'] || 'horizontalBar' === $this->parent_args['chart_type'] ) && 1 === $this->chart_dataset_counter ) ) { $colors = explode( '|', $this->parent_args['legend_text_colors'] ); } else { $colors = $this->child_legend_text_colors; } $color_count = count( $colors ); for ( $i = 0; $i < $color_count; $i++ ) { if ( '' !== $colors[ $i ] ) { $styles .= '#fusion-chart-' . $this->chart_sc_counter . ' .fusion-chart-legend-wrap li:nth-child(' . ( $i + 1 ) . ') span{color: ' . $colors[ $i ] . ';}'; } } } if ( $styles ) { $styles = ''; } $this->chart_sc_counter++; // Reset child element counter. $this->chart_dataset_counter = 0; $this->child_legend_text_colors = array(); return $styles . $html; } /** * Builds the prent attributes array. * * @access public * @since 1.5 * @return array */ public function parent_attr() { $attr = fusion_builder_visibility_atts( $this->parent_args['hide_on_mobile'], array( 'id' => 'fusion-chart-' . $this->chart_sc_counter, 'class' => 'fusion-chart', ) ); if ( $this->parent_args['chart_type'] ) { $attr['data-type'] = $this->parent_args['chart_type']; } if ( $this->parent_args['chart_legend_position'] && 'off' !== $this->parent_args['chart_legend_position'] ) { $attr['class'] .= ' legend-' . $this->parent_args['chart_legend_position']; $attr['data-chart_legend_position'] = $this->parent_args['chart_legend_position']; } if ( $this->parent_args['x_axis_labels'] ) { $attr['data-x_axis_labels'] = $this->parent_args['x_axis_labels']; } if ( $this->parent_args['x_axis_label'] ) { $attr['data-x_axis_label'] = $this->parent_args['x_axis_label']; } if ( $this->parent_args['y_axis_label'] ) { $attr['data-y_axis_label'] = $this->parent_args['y_axis_label']; } if ( $this->parent_args['show_tooltips'] ) { $attr['data-show_tooltips'] = $this->parent_args['show_tooltips']; } if ( $this->parent_args['bg_colors'] ) { $attr['data-bg_colors'] = $this->parent_args['bg_colors']; } if ( $this->parent_args['border_colors'] ) { $attr['data-border_colors'] = $this->parent_args['border_colors']; } if ( $this->parent_args['legend_labels'] ) { $attr['data-legend_labels'] = $this->parent_args['legend_labels']; } if ( $this->parent_args['chart_border_size'] ) { $attr['data-border_size'] = $this->parent_args['chart_border_size']; } if ( $this->parent_args['chart_border_type'] ) { $attr['data-border_type'] = $this->parent_args['chart_border_type']; } if ( $this->parent_args['chart_fill'] ) { $attr['data-chart_fill'] = $this->parent_args['chart_fill']; } if ( $this->parent_args['chart_point_style'] ) { $attr['data-chart_point_style'] = $this->parent_args['chart_point_style']; } if ( $this->parent_args['chart_point_size'] ) { $attr['data-chart_point_size'] = $this->parent_args['chart_point_size']; } if ( $this->parent_args['chart_point_bg_color'] ) { $attr['data-chart_point_bg_color'] = $this->parent_args['chart_point_bg_color']; } if ( $this->parent_args['chart_point_border_color'] ) { $attr['data-chart_point_border_color'] = $this->parent_args['chart_point_border_color']; } if ( $this->parent_args['chart_axis_text_color'] ) { $attr['data-chart_axis_text_color'] = $this->parent_args['chart_axis_text_color']; } if ( $this->parent_args['chart_gridline_color'] ) { $attr['data-chart_gridline_color'] = $this->parent_args['chart_gridline_color']; } if ( $this->parent_args['class'] ) { $attr['class'] .= ' ' . $this->parent_args['class']; } if ( $this->parent_args['id'] ) { $attr['id'] = $this->parent_args['id']; } return $attr; } /** * Render the child shortcode * * @access public * @since 1.5 * @param array $args Shortcode parameters. * @param string $content Content between shortcode. * @return string HTML output. */ public function render_child( $args, $content = '' ) { global $fusion_library, $fusion_settings; $defaults = FusionBuilder::set_shortcode_defaults( array( 'title' => '', 'values' => '', 'legend_text_color' => '', 'background_color' => '', 'border_color' => '', ), $args ); $this->child_args = $defaults; $this->child_legend_text_colors[] = $this->child_args['legend_text_color']; $html = '

'; $this->chart_dataset_counter++; return $html; } /** * Builds the child attributes array. * * @access public * @since 1.5 * @return array */ public function child_attr() { $attr = array( 'class' => 'fusion-chart-dataset', // 'style' => 'display:none;', ); if ( $this->child_args['title'] ) { $attr['data-label'] = $this->child_args['title']; } else { $attr['data-label'] = ' '; } if ( $this->child_args['values'] ) { $attr['data-values'] = $this->child_args['values']; } if ( $this->child_args['background_color'] ) { $attr['data-background_color'] = $this->child_args['background_color']; } if ( $this->child_args['border_color'] ) { $attr['data-border_color'] = $this->child_args['border_color']; } return $attr; } /** * Builds the dynamic styling. * * @access public * @since 1.5 * @return array */ public function add_styling() { global $content_media_query, $dynamic_css_helpers; $css = array(); $elements = array( '.fusion-chart.legend-right .fusion-chart-inner', '.fusion-chart.legend-left .fusion-chart-inner', ); $css[ $content_media_query ][ $dynamic_css_helpers->implode( $elements ) ]['flex-direction'] = 'column'; $elements = array( '.fusion-chart.legend-right .fusion-chart-inner .fusion-chart-legend-wrap li', '.fusion-chart.legend-left .fusion-chart-inner .fusion-chart-legend-wrap li', ); $css[ $content_media_query ][ $dynamic_css_helpers->implode( $elements ) ]['display'] = 'inline-block'; $elements = array( '.fusion-chart.legend-right .fusion-chart-legend-wrap', '.fusion-chart.legend-left .fusion-chart-legend-wrap', ); $css[ $content_media_query ][ $dynamic_css_helpers->implode( $elements ) ]['padding-top'] = '20px'; $css[ $content_media_query ]['.fusion-chart.legend-right .fusion-chart-legend-wrap']['padding-left'] = '0'; $css[ $content_media_query ]['.fusion-chart.legend-left .fusion-chart-legend-wrap']['padding-right'] = '0'; $css[ $content_media_query ]['.fusion-chart.legend-left .fusion-chart-legend-wrap']['order'] = 2; return $css; } /** * Adds settings to element options panel. * * @access public * @since 1.5 * @return array $sections Chart settings. */ public function add_options() { return array( 'chart_shortcode_section' => array( 'label' => esc_html__( 'Chart Element', 'fusion-builder' ), 'description' => '', 'id' => 'chart_shortcode_section', 'type' => 'accordion', 'fields' => array( 'chart_legend_position' => array( 'label' => esc_attr__( 'Legend Position', 'fusion-builder' ), 'description' => esc_attr__( 'Set chart legend position. Note that on mobile devices legend will be positioned below the chart when left or right position is used.', 'fusion-builder' ), 'id' => 'chart_legend_position', 'default' => 'top', 'type' => 'radio-buttonset', 'choices' => array( 'top' => esc_attr__( 'Top', 'fusion-builder' ), 'right' => esc_attr__( 'Right', 'fusion-builder' ), 'bottom' => esc_attr__( 'Bottom', 'fusion-builder' ), 'left' => esc_attr__( 'Left', 'fusion-builder' ), 'off' => esc_attr__( 'Off', 'fusion-builder' ), ), ), 'chart_show_tooltips' => array( 'label' => esc_attr__( 'Show Tooltips', 'fusion-builder' ), 'description' => esc_attr__( 'Choose whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.', 'fusion-builder' ), 'id' => 'chart_show_tooltips', 'default' => 'yes', 'type' => 'radio-buttonset', 'choices' => array( 'yes' => esc_attr__( 'Yes', 'fusion-builder' ), 'no' => esc_attr__( 'No', 'fusion-builder' ), ), ), 'chart_bg_color' => array( 'label' => esc_attr__( 'Chart Background Color', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the background of the chart.', 'fusion-builder' ), 'id' => 'chart_bg_color', 'default' => 'rgba(255,255,255,0)', 'type' => 'color-alpha', ), 'chart_axis_text_color' => array( 'label' => esc_attr__( 'Chart Axis Text Color', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the text color of the x-axis and y-axis.', 'fusion-builder' ), 'id' => 'chart_axis_text_color', 'default' => '#666666', 'type' => 'color-alpha', ), 'chart_gridline_color' => array( 'label' => esc_attr__( 'Chart Gridline Color', 'fusion-builder' ), 'description' => esc_attr__( 'Controls the color of the chart background grid lines and values.', 'fusion-builder' ), 'id' => 'chart_gridline_color', 'default' => 'rgba(0,0,0,0.1)', 'type' => 'color-alpha', ), ), ), ); } /** * Sets the necessary scripts. * * @access public * @since 1.5 * @return void */ public function add_scripts() { Fusion_Dynamic_JS::enqueue_script( 'fusion-chart', FusionBuilder::$js_folder_url . '/general/fusion-chart.js', FusionBuilder::$js_folder_path . '/general/fusion-chart.js', array( 'jquery', 'fusion-chartjs' ), '1', true ); } } } new FusionSC_Chart(); } /** * Map shortcode to Fusion Builder * * @since 1.0 */ function fusion_element_chart() { global $fusion_settings; if ( ! $fusion_settings ) { $fusion_settings = Fusion_Settings::get_instance(); } fusion_builder_map( array( 'name' => esc_attr__( 'Chart', 'fusion-builder' ), 'shortcode' => 'fusion_chart', 'icon' => 'fusiona-bar-chart', 'preview' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/previews/fusion-chart-preview.php', 'custom_settings_view_name' => 'ModuleSettingsChartView', 'custom_settings_view_js' => FUSION_BUILDER_PLUGIN_URL . 'inc/templates/custom/js/fusion-chart-settings.js', 'custom_settings_template_file' => FUSION_BUILDER_PLUGIN_DIR . 'inc/templates/custom/fusion-chart-settings.php', 'on_save' => 'chartShortcodeFilter', 'admin_enqueue_js' => FUSION_BUILDER_PLUGIN_URL . 'shortcodes/js/fusion-chart.js', 'preview_id' => 'fusion-builder-block-module-chart-preview-template', 'params' => array( array( 'type' => 'textfield', 'heading' => esc_attr__( 'Title', 'fusion-builder' ), /* translators: Link containing the "Theme Options" text. */ 'description' => sprintf( esc_html__( 'The chart title utilizes all the H4 typography settings in %s except for top and bottom margins.', 'fusion-builder' ), '' . esc_attr__( 'Theme Options', 'fusion-builder' ) . '' ), 'param_name' => 'title', 'value' => '', ), array( 'type' => 'select', 'heading' => esc_attr__( 'Chart Type', 'fusion-builder' ), 'description' => esc_attr__( 'Select chart type.', 'fusion-builder' ), 'param_name' => 'chart_type', 'value' => array( 'bar' => esc_attr__( 'Bar', 'fusion-builder' ), 'horizontalBar' => esc_attr__( 'Horizontal Bar', 'fusion-builder' ), 'line' => esc_attr__( 'Line', 'fusion-builder' ), 'pie' => esc_attr__( 'Pie', 'fusion-builder' ), 'doughnut' => esc_attr__( 'Doughnut', 'fusion-builder' ), 'radar' => esc_attr__( 'Radar', 'fusion-builder' ), 'polarArea' => esc_attr__( 'Polar Area', 'fusion-builder' ), ), ), array( 'type' => 'radio_button_set', 'heading' => esc_attr__( 'Legend Position', 'fusion-builder' ), 'description' => esc_attr__( 'Set chart legend position. Note that on mobile devices legend will be positioned below the chart when left or right position is used.', 'fusion-builder' ), 'param_name' => 'chart_legend_position', 'value' => array( '' => esc_attr__( 'Default', 'fusion-builder' ), 'top' => esc_attr__( 'Top', 'fusion-builder' ), 'right' => esc_attr__( 'Right', 'fusion-builder' ), 'bottom' => esc_attr__( 'Bottom', 'fusion-builder' ), 'left' => esc_attr__( 'Left', 'fusion-builder' ), 'off' => esc_attr__( 'Off', 'fusion-builder' ), ), ), array( 'type' => 'textfield', 'heading' => esc_attr__( 'X Axis Label', 'fusion-builder' ), 'description' => esc_attr__( 'Set X axis label.', 'fusion-builder' ), 'param_name' => 'x_axis_label', 'value' => '', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'pie', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'doughnut', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'polarArea', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'radar', 'operator' => '!=', ), ), ), array( 'type' => 'textfield', 'heading' => esc_attr__( 'Y Axis Label', 'fusion-builder' ), 'description' => esc_attr__( 'Set Y axis label.', 'fusion-builder' ), 'param_name' => 'y_axis_label', 'value' => '', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'pie', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'doughnut', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'polarArea', 'operator' => '!=', ), array( 'element' => 'chart_type', 'value' => 'radar', 'operator' => '!=', ), ), ), array( 'type' => 'radio_button_set', 'heading' => esc_attr__( 'Show Tooltips', 'fusion-builder' ), 'description' => esc_attr__( 'Choose whether tooltips should be displayed on hover. If your chart is in a column and the column has a hover type or link, tooltips are disabled.', 'fusion-builder' ), 'param_name' => 'show_tooltips', 'value' => array( '' => esc_attr__( 'Default', 'fusion-builder' ), 'yes' => esc_attr__( 'Yes', 'fusion-builder' ), 'no' => esc_attr__( 'No', 'fusion-builder' ), ), ), array( 'type' => 'select', 'heading' => esc_attr__( 'Border Type', 'fusion-builder' ), 'description' => esc_attr__( 'Select border type.', 'fusion-builder' ), 'param_name' => 'chart_border_type', 'value' => array( 'smooth' => esc_attr__( 'Smooth', 'fusion-builder' ), 'non_smooth' => esc_attr__( 'Non smooth', 'fusion-builder' ), 'stepped' => esc_attr__( 'Stepped', 'fusion-builder' ), ), 'default' => 'smooth', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), ), ), array( 'type' => 'select', 'heading' => esc_attr__( 'Chart Fill', 'fusion-builder' ), 'description' => esc_attr__( 'Choose how line chart should be filled.', 'fusion-builder' ), 'param_name' => 'chart_fill', 'value' => array( 'start' => esc_attr__( 'Start', 'fusion-builder' ), 'end' => esc_attr__( 'End', 'fusion-builder' ), 'origin' => esc_attr__( 'Origin', 'fusion-builder' ), 'off' => esc_attr__( 'Not filled', 'fusion-builder' ), ), 'default' => 'off', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), ), ), array( 'type' => 'select', 'heading' => esc_attr__( 'Point Style', 'fusion-builder' ), 'description' => esc_attr__( 'Choose point style for line charts.', 'fusion-builder' ), 'param_name' => 'chart_point_style', 'value' => array( 'circle' => esc_attr__( 'Circle', 'fusion-builder' ), 'cross' => esc_attr__( 'Cross', 'fusion-builder' ), 'crossRot' => esc_attr__( 'Cross Rotated', 'fusion-builder' ), 'dash' => esc_attr__( 'Dash', 'fusion-builder' ), 'line' => esc_attr__( 'Line', 'fusion-builder' ), 'rect' => esc_attr__( 'Rectangle', 'fusion-builder' ), 'rectRounded' => esc_attr__( 'Rectangle Rounded', 'fusion-builder' ), 'rectRot' => esc_attr__( 'Rectangle Rotated', 'fusion-builder' ), 'star' => esc_attr__( 'Star', 'fusion-builder' ), 'triangle' => esc_attr__( 'Triangle', 'fusion-builder' ), ), 'default' => 'circle', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), ), ), array( 'type' => 'range', 'heading' => esc_attr__( 'Point Size', 'fusion-builder' ), 'description' => esc_attr__( 'Choose point size for line charts.', 'fusion-builder' ), 'param_name' => 'chart_point_size', 'value' => '3', 'min' => '0', 'max' => '20', 'step' => '1', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), array( 'element' => 'chart_point_style', 'value' => 'cross', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'crossRot', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'line', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'dash', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'star', 'operator' => '!=', ), ), ), array( 'type' => 'colorpickeralpha', 'heading' => esc_attr__( 'Point Background Color', 'fusion-builder' ), 'description' => esc_attr__( 'Choose point background color for line charts.', 'fusion-builder' ), 'param_name' => 'chart_point_bg_color', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), array( 'element' => 'chart_point_style', 'value' => 'cross', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'crossRot', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'line', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'dash', 'operator' => '!=', ), array( 'element' => 'chart_point_style', 'value' => 'star', 'operator' => '!=', ), ), ), array( 'type' => 'colorpickeralpha', 'heading' => esc_attr__( 'Point Border Color', 'fusion-builder' ), 'description' => esc_attr__( 'Choose point border color for line charts.', 'fusion-builder' ), 'param_name' => 'chart_point_border_color', 'dependency' => array( array( 'element' => 'chart_type', 'value' => 'line', 'operator' => '==', ), ), ), array( 'type' => 'checkbox_button_set', 'heading' => esc_attr__( 'Element Visibility', 'fusion-builder' ), 'param_name' => 'hide_on_mobile', 'value' => fusion_builder_visibility_options( 'full' ), 'default' => fusion_builder_default_visibility( 'array' ), 'description' => esc_attr__( 'Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.', 'fusion-builder' ), ), array( 'type' => 'textfield', 'heading' => esc_attr__( 'CSS Class', 'fusion-builder' ), 'description' => esc_attr__( 'Add a class to the wrapping HTML element.', 'fusion-builder' ), 'param_name' => 'class', 'value' => '', ), array( 'type' => 'textfield', 'heading' => esc_attr__( 'CSS ID', 'fusion-builder' ), 'description' => esc_attr__( 'Add an ID to the wrapping HTML element.', 'fusion-builder' ), 'param_name' => 'id', 'value' => '', ), ), ) ); } add_action( 'fusion_builder_before_init', 'fusion_element_chart' );