'.jet-bar-chart-container', ) ); /** * `Chart Data` Section */ $this->start_controls_section( 'section_chart_data', array( 'label' => esc_html__( 'Chart Data', 'jet-elements' ), ) ); $this->add_control( 'type', array( 'label' => esc_html__( 'Bar Type', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => 'bar', 'options' => array( 'bar' => esc_html__( 'Vertical Bar', 'jet-elements' ), 'horizontalBar' => esc_html__( 'Horizontal Bar', 'jet-elements' ), ), ) ); $this->add_control( 'labels', array( 'label' => esc_html__( 'Labels', 'jet-elements' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'March, April, May', 'jet-elements' ), 'description' => esc_html__( 'Write multiple label by semicolon separated(,). Example: March, April, May etc', 'jet-elements' ), 'dynamic' => array( 'active' => true ), ) ); $this->add_control( 'axis_range', array( 'label' => esc_html__( 'Scale Axis Range', 'jet-elements' ), 'type' => Controls_Manager::NUMBER, 'default' => 10, 'description' => esc_html__( 'User defined maximum number for the scale, overrides maximum value from data.', 'jet-elements' ), ) ); $this->add_control( 'step_size', array( 'label' => esc_html__( 'Step Size', 'jet-elements' ), 'type' => Controls_Manager::NUMBER, 'default' => 1, 'step' => 1, 'description' => esc_html__( 'User defined fixed step size for the scale.', 'jet-elements' ), ) ); $repeater = new Repeater(); $repeater->start_controls_tabs( 'bar_tabs' ); $repeater->start_controls_tab( 'bar_tab_content', array( 'label' => esc_html__( 'Content', 'jet-elements' ), ) ); $repeater->add_control( 'label', array( 'label' => esc_html__( 'Label', 'jet-elements' ), 'type' => Controls_Manager::TEXT, 'dynamic' => array( 'active' => true ), ) ); $repeater->add_control( 'data', array( 'label' => esc_html__( 'Data', 'jet-elements' ), 'type' => Controls_Manager::TEXT, 'description' => esc_html__( 'Enter data values by semicolon separated(,). Example: 2, 4, 8 etc', 'jet-elements' ), 'dynamic' => array( 'active' => true ), ) ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'bar_tab_style', array( 'label' => esc_html__( 'Style', 'jet-elements' ), ) ); $repeater->add_control( 'bg_color', array( 'label' => esc_html__( 'Background Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ) ); $repeater->add_control( 'bg_hover_color', array( 'label' => esc_html__( 'Background Hover Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ) ); $repeater->add_control( 'border_color', array( 'label' => esc_html__( 'Border Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ) ); $repeater->add_control( 'border_hover_color', array( 'label' => esc_html__( 'Border Hover Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ) ); $repeater->end_controls_tab(); $this->add_control( 'chart_data', array( 'type' => Controls_Manager::REPEATER, 'fields' => array_values( $repeater->get_controls() ), 'default' => array( array( 'label' => esc_html__( 'Google', 'jet-elements' ), 'data' => esc_html__( '2, 4, 8', 'jet-elements' ), 'bg_color' => 'rgba(221,75,57,0.4)', 'bg_hover_color' => '#dd4b39', 'border_color' => '#dd4b39', 'border_hover_color' => '#dd4b39', ), array( 'label' => esc_html__( 'Facebook', 'jet-elements' ), 'data' => esc_html__( '1, 5, 3', 'jet-elements' ), 'bg_color' => 'rgba(59,89,152,0.4)', 'bg_hover_color' => '#3b5998', 'border_color' => '#3b5998', 'border_hover_color' => '#3b5998', ), array( 'label' => esc_html__( 'Twitter', 'jet-elements' ), 'data' => esc_html__( '5, 9, 5', 'jet-elements' ), 'bg_color' => 'rgba(85,172,238,0.4)', 'bg_hover_color' => '#55acee', 'border_color' => '#55acee', 'border_hover_color' => '#55acee', ), ), 'title_field' => '{{{ label }}}', ) ); $this->end_controls_section(); /** * `Settings` Section */ $this->start_controls_section( 'section_settings', array( 'label' => esc_html__( 'Settings', 'jet-elements' ), ) ); $this->add_responsive_control( 'chart_height', array( 'label' => esc_html__( 'Chart Height', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 100, 'max' => 1200, ), ), 'selectors' => array( '{{WRAPPER}} ' . $css_scheme['container'] => 'height: {{SIZE}}{{UNIT}};', ), 'render_type' => 'template', ) ); $this->add_control( 'chart_grid_display', array( 'label' => esc_html__( 'Grid Lines', 'jet-elements' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true', ) ); $this->add_control( 'chart_labels_display', array( 'label' => esc_html__( 'Labels', 'jet-elements' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true', ) ); $this->add_control( 'chart_tooltip_enabled', array( 'label' => esc_html__( 'Tooltips', 'jet-elements' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true', ) ); $this->add_control( 'chart_legend_heading', array( 'label' => esc_html__( 'Legend', 'jet-elements' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ) ); $this->add_control( 'chart_legend_display', array( 'label' => esc_html__( 'Display', 'jet-elements' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'true', 'return_value' => 'true', ) ); $this->add_control( 'chart_legend_position', array( 'label' => esc_html__( 'Position', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'options' => array( 'top' => esc_html__( 'Top', 'jet-elements' ), 'left' => esc_html__( 'Left', 'jet-elements' ), 'bottom' => esc_html__( 'Bottom', 'jet-elements' ), 'right' => esc_html__( 'Right', 'jet-elements' ), ), 'condition' => array( 'chart_legend_display' => 'true', ), ) ); $this->add_control( 'chart_legend_reverse', array( 'label' => esc_html__( 'Revers', 'jet-elements' ), 'description' => esc_html__( 'Legend will show datasets in reverse order.', 'jet-elements' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'return_value' => 'true', 'condition' => array( 'chart_legend_display' => 'true', ), ) ); $this->end_controls_section(); /** * `Chart` Style Tab Section */ $this->__start_controls_section( 'section_chart_style', array( 'label' => esc_html__( 'Chart', 'jet-elements' ), 'tab' => Controls_Manager::TAB_STYLE, ) ); $this->__add_control( 'chart_border_width', array( 'label' => esc_html__( 'Border Width', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 0, 'max' => 10, ), ), ), 25 ); $this->__add_control( 'chart_grid_color', array( 'label' => esc_html__( 'Grid Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgba(0,0,0,0.05)', ), 25 ); $this->__end_controls_section(); /** * `Labels` Style Section */ $this->__start_controls_section( 'section_chart_labels_style', array( 'label' => esc_html__( 'Labels', 'jet-elements' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => array( 'chart_labels_display' => 'true', ), ) ); $this->__add_control( 'chart_labels_font_family', array( 'label' => esc_html__( 'Font Family', 'jet-elements' ), 'type' => Controls_Manager::FONT, 'default' => '', ), 50 ); $this->__add_control( 'chart_labels_font_size', array( 'label' => esc_html__( 'Font Size', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 1, 'max' => 50, ), ), ), 50 ); $typo_weight_options = array( '' => esc_html__( 'Default', 'jet-elements' ), ); foreach ( array_merge( [ 'normal', 'bold' ], range( 100, 900, 100 ) ) as $weight ) { $typo_weight_options[ $weight ] = ucfirst( $weight ); } $this->__add_control( 'chart_labels_font_weight', array( 'label' => esc_html__( 'Font Weight', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $typo_weight_options, ), 50 ); $this->__add_control( 'chart_labels_font_style', array( 'label' => esc_html__( 'Font Style', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => array( '' => esc_html__( 'Default', 'jet-elements' ), 'normal' => esc_attr_x( 'Normal', 'Typography Control', 'jet-elements' ), 'italic' => esc_attr_x( 'Italic', 'Typography Control', 'jet-elements' ), 'oblique' => esc_attr_x( 'Oblique', 'Typography Control', 'jet-elements' ), ), ), 50 ); $this->__add_control( 'chart_labels_font_color', array( 'label' => esc_html__( 'Font Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ), 25 ); $this->__end_controls_section(); /** * `Legend` Style Section */ $this->__start_controls_section( 'section_chart_legend_style', array( 'label' => esc_html__( 'Legend', 'jet-elements' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => array( 'chart_legend_display' => 'true', ), ) ); $this->__add_control( 'chart_legend_box_width', array( 'label' => esc_html__( 'Box Width', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 1, 'max' => 100, ), ), ), 25 ); $this->__add_control( 'chart_legend_font_family', array( 'label' => esc_html__( 'Font Family', 'jet-elements' ), 'type' => Controls_Manager::FONT, 'default' => '', ), 50 ); $this->__add_control( 'chart_legend_font_size', array( 'label' => esc_html__( 'Font Size', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 1, 'max' => 50, ), ), ), 50 ); $this->__add_control( 'chart_legend_font_weight', array( 'label' => esc_html__( 'Font Weight', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $typo_weight_options, ), 50 ); $this->__add_control( 'chart_legend_font_style', array( 'label' => esc_html__( 'Font Style', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => array( '' => esc_html__( 'Default', 'jet-elements' ), 'normal' => esc_attr_x( 'Normal', 'Typography Control', 'jet-elements' ), 'italic' => esc_attr_x( 'Italic', 'Typography Control', 'jet-elements' ), 'oblique' => esc_attr_x( 'Oblique', 'Typography Control', 'jet-elements' ), ), ), 50 ); $this->__add_control( 'chart_legend_font_color', array( 'label' => esc_html__( 'Font Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ), 25 ); $this->__end_controls_section(); /** * `Tooltips` Style Section */ $this->__start_controls_section( 'section_chart_tooltips_style', array( 'label' => esc_html__( 'Tooltips', 'jet-elements' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => array( 'chart_tooltip_enabled' => 'true', ), ) ); $this->__add_control( 'chart_tooltip_bg_color', array( 'label' => esc_html__( 'Background Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ), 25 ); $this->__add_control( 'chart_tooltip_style_title_heading', array( 'label' => esc_html__( 'Title', 'jet-elements' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__add_control( 'chart_tooltip_title_font_family', array( 'label' => esc_html__( 'Font Family', 'jet-elements' ), 'type' => Controls_Manager::FONT, 'default' => '', ), 50 ); $this->__add_control( 'chart_tooltip_title_font_size', array( 'label' => esc_html__( 'Font Size', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 1, 'max' => 50, ), ), ), 50 ); $this->__add_control( 'chart_tooltip_title_font_weight', array( 'label' => esc_html__( 'Font Weight', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $typo_weight_options, ), 50 ); $this->__add_control( 'chart_tooltip_title_font_style', array( 'label' => esc_html__( 'Font Style', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => array( '' => esc_html__( 'Default', 'jet-elements' ), 'normal' => esc_attr_x( 'Normal', 'Typography Control', 'jet-elements' ), 'italic' => esc_attr_x( 'Italic', 'Typography Control', 'jet-elements' ), 'oblique' => esc_attr_x( 'Oblique', 'Typography Control', 'jet-elements' ), ), ), 50 ); $this->__add_control( 'chart_tooltip_title_font_color', array( 'label' => esc_html__( 'Font Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ), 25 ); $this->__add_control( 'chart_tooltip_style_body_heading', array( 'label' => esc_html__( 'Body', 'jet-elements' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ), 25 ); $this->__add_control( 'chart_tooltip_font_family', array( 'label' => esc_html__( 'Font Family', 'jet-elements' ), 'type' => Controls_Manager::FONT, 'default' => '', ), 50 ); $this->__add_control( 'chart_tooltip_font_size', array( 'label' => esc_html__( 'Font Size', 'jet-elements' ), 'type' => Controls_Manager::SLIDER, 'range' => array( 'px' => array( 'min' => 1, 'max' => 50, ), ), ), 50 ); $this->__add_control( 'chart_tooltip_font_weight', array( 'label' => esc_html__( 'Font Weight', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => $typo_weight_options, ), 50 ); $this->__add_control( 'chart_tooltip_font_style', array( 'label' => esc_html__( 'Font Style', 'jet-elements' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => array( '' => esc_html__( 'Default', 'jet-elements' ), 'normal' => esc_attr_x( 'Normal', 'Typography Control', 'jet-elements' ), 'italic' => esc_attr_x( 'Italic', 'Typography Control', 'jet-elements' ), 'oblique' => esc_attr_x( 'Oblique', 'Typography Control', 'jet-elements' ), ), ), 50 ); $this->__add_control( 'chart_tooltip_font_color', array( 'label' => esc_html__( 'Font Color', 'jet-elements' ), 'type' => Controls_Manager::COLOR, ), 25 ); $this->__end_controls_section(); } /** * Render widget output on the frontend. */ protected function render() { $this->__context = 'render'; $this->__open_wrap(); $settings = $this->get_settings_for_display(); $data_chart = $this->get_chart_data(); $data_options = $this->get_chart_options(); $this->add_render_attribute( [ 'container' => array( 'class' => 'jet-bar-chart-container', 'data-settings' => esc_attr( json_encode( array( 'type' => $settings['type'], 'data' => array( 'labels' => explode(',', $settings['labels']), 'datasets' => $data_chart, ), 'options' => $data_options ) ) ) ), 'canvas' => array( 'class' => 'jet-bar-chart', 'role' => 'img', ), ] ); ?>