File manager - Edit - /home/verseaumee/geniouskin/wp-content/plugins/powerpack-lite-for-elementor/modules/charts/widgets/charts.php
Back
<?php namespace PowerpackElementsLite\Modules\Charts\Widgets; use PowerpackElementsLite\Base\Powerpack_Widget; use PowerpackElementsLite\Classes\PP_Helper; // Elementor Classes use Elementor\Widget_Base; use Elementor\Controls_Manager; use Elementor\Repeater; use Elementor\Utils; use Elementor\Group_Control_Typography; use Elementor\Group_Control_Border; use Elementor\Group_Control_Background; use Elementor\Group_Control_Box_Shadow; use Elementor\Group_Control_Image_Size; use Elementor\Core\Kits\Documents\Tabs\Global_Colors; use Elementor\Core\Kits\Documents\Tabs\Global_Typography; if ( ! defined( 'ABSPATH' ) ) { exit; // Exit if accessed directly. } /** * Charts Widget */ class Charts extends Powerpack_Widget { /** * Retrieve Charts widget name. * * @access public * * @return string Widget name. */ public function get_name() { return parent::get_widget_name( 'Charts' ); } /** * Retrieve Charts widget title. * * @access public * * @return string Widget title. */ public function get_title() { return parent::get_widget_title( 'Charts' ); } /** * Retrieve Charts widget icon. * * @access public * * @return string Widget icon. */ public function get_icon() { return parent::get_widget_icon( 'Charts' ); } /** * Get widget keywords. * * Retrieve the list of keywords the Charts widget belongs to. * * @access public * * @return array Widget keywords. */ public function get_keywords() { return parent::get_widget_keywords( 'Charts' ); } /** * Retrieve the list of scripts the Charts widget depended on. * * Used to set scripts dependencies required to run the widget. * * @access public * * @return array Widget scripts dependencies. */ public function get_script_depends() { return [ 'pp-chartjs', 'pp-chart', ]; } protected function is_dynamic_content(): bool { return true; } /** * Register Charts widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 2.9.0 * @access protected */ protected function register_controls() { // Content tab $this->register_content_charts_controls(); $this->register_content_dataset_controls(); $this->register_content_legend_controls(); $this->register_content_tooltip_controls(); $this->register_content_chart_title_controls(); $this->register_content_options_controls(); // Style tab $this->register_style_chart_controls(); $this->register_style_chart_title_controls(); $this->register_style_grid_controls(); $this->register_style_labels_controls(); $this->register_style_legend_controls(); $this->register_style_points_controls(); $this->register_style_tooltip_controls(); } protected function register_content_charts_controls() { $this->start_controls_section( 'section_charts', [ 'label' => esc_html__( 'Charts', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'chart_type', [ 'label' => esc_html__( 'Chart Type', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'line', 'options' => [ 'line' => esc_html__( 'Line', 'powerpack-lite-for-elementor' ), 'bar' => esc_html__( 'Bar', 'powerpack-lite-for-elementor' ), 'radar' => esc_html__( 'Radar', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'pie' => esc_html__( 'Pie', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'doughnut' => esc_html__( 'Doughnut', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'polarArea' => esc_html__( 'Polar Area', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'bubble' => esc_html__( 'Bubble', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', ], ] ); $this->add_control( 'chart_type_notice', [ 'label' => '', 'type' => Controls_Manager::RAW_HTML, 'raw' => PP_Helper::get_pro_feature_notice( esc_html__( 'This chart type is available in PowerPack Pro.', 'powerpack-lite-for-elementor' ) ), 'content_classes' => 'upgrade-powerpack-notice elementor-panel-alert elementor-panel-alert-info', 'condition' => [ 'chart_type!' => [ 'line', 'bar' ], ], ] ); $this->add_control( 'stepped_line', [ 'label' => esc_html__( 'Stepped Line Chart', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'bar_chart_type', [ 'label' => esc_html__( 'Orientation', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'vertical_bar', 'options' => [ 'vertical_bar' => esc_html__( 'Vertical Bar', 'powerpack-lite-for-elementor' ), 'horizontal_bar' => esc_html__( 'Horizontal Bar', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'labels', [ 'label' => esc_html__( 'Labels', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXTAREA, 'default' => esc_html__( 'January, February, March, April', 'powerpack-lite-for-elementor' ), 'description' => esc_html__( 'Add labels separated by comma', 'powerpack-lite-for-elementor' ), 'dynamic' => [ 'active' => true ], ] ); $this->end_controls_section(); } protected function register_content_dataset_controls() { $this->start_controls_section( 'section_chart_dataset', [ 'label' => esc_html__( 'Dataset', 'powerpack-lite-for-elementor' ), ], ); // Line, Bar and Radar Area Chart Data $repeater = new Repeater(); $repeater->start_controls_tabs( 'tabs_chart' ); $repeater->start_controls_tab( 'tabs_chart_content', [ 'label' => esc_html__( 'Content', 'powerpack-lite-for-elementor' ), ] ); $repeater->add_control( 'dataset_label', [ 'label' => esc_html__( 'Label', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => esc_html__( 'Label', 'powerpack-lite-for-elementor' ), 'dynamic' => [ 'active' => true ], ] ); $repeater->add_control( 'dataset_data', [ 'label' => esc_html__( 'Data', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXTAREA, 'default' => '40, 60, 10, 80', 'description' => esc_html__( 'Add data values separated by comma', 'powerpack-lite-for-elementor' ), 'dynamic' => [ 'active' => true ], ] ); $repeater->end_controls_tab(); $repeater->start_controls_tab( 'tabs_chart_style', [ 'label' => esc_html__( 'Style', 'powerpack-lite-for-elementor' ), ] ); $repeater->add_control( 'bg_color', [ 'label' => esc_html__( 'Background Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgb(0 0 0 / 50%)', ] ); $repeater->add_control( 'border_color', [ 'label' => esc_html__( 'Border Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgb(0 0 0 / 50%)', ] ); $repeater->add_control( 'fill', [ 'label' => esc_html__( 'Fill', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => '', 'description' => esc_html__( 'Fill option is supported by Line and Radar charts only', 'powerpack-lite-for-elementor' ), 'separator' => 'before', ] ); $repeater->add_control( 'border_dash', [ 'label' => esc_html__( 'Border Dash', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'description' => esc_html__( 'Border Dash option is supported by Line and Radar charts only', 'powerpack-lite-for-elementor' ), ] ); $repeater->end_controls_tab(); $repeater->end_controls_tabs(); $this->add_control( 'chart_dataset', [ 'label' => esc_html__( 'Chart Data', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls(), 'default' => [ [ 'dataset_label' => esc_html__( 'Data 1', 'powerpack-lite-for-elementor' ), 'dataset_data' => '40, 60, 10, 80', 'bg_color' => '#EC6E8599', 'border_color' => '#EC6E85', ], [ 'dataset_label' => esc_html__( 'Data 2', 'powerpack-lite-for-elementor' ), 'dataset_data' => '5, 35, 55, 90', 'bg_color' => '#569FE599', 'border_color' => '#569FE5', ], [ 'dataset_label' => esc_html__( 'Data 3', 'powerpack-lite-for-elementor' ), 'dataset_data' => '30, 25, 40, 5', 'bg_color' => '#F7CF6B99', 'border_color' => '#F7CF6B', ], ], 'title_field' => '{{{ dataset_label }}}', 'condition' => [ 'chart_type' => [ 'line', 'bar' ], ], ] ); $this->end_controls_section(); } protected function register_content_legend_controls() { $this->start_controls_section( 'section_legend', [ 'label' => esc_html__( 'Legend', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'show_legend', [ 'label' => esc_html__( 'Show Legend', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'legend_reverse', [ 'label' => esc_html__( 'Reverse', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'legend_position', [ 'label' => esc_html__( 'Position', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'options' => [ 'left' => esc_html__( 'Left', 'powerpack-lite-for-elementor' ), 'top' => esc_html__( 'Top', 'powerpack-lite-for-elementor' ), 'bottom' => esc_html__( 'Bottom', 'powerpack-lite-for-elementor' ), 'right' => esc_html__( 'Right', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_align', [ 'label' => esc_html__( 'Alignment', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'center', 'options' => [ 'start' => esc_html__( 'Start', 'powerpack-lite-for-elementor' ), 'center' => esc_html__( 'Center', 'powerpack-lite-for-elementor' ), 'end' => esc_html__( 'End', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->end_controls_section(); } protected function register_content_tooltip_controls() { $this->start_controls_section( 'section_chart_tooltip', [ 'label' => esc_html__( 'Tooltip', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'show_tooltip', [ 'label' => esc_html__( 'Show Tooltip', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'tooltip_event', [ 'label' => esc_html__( 'Tooltip Event', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'hover', 'options' => [ 'hover' => esc_html__( 'Hover', 'powerpack-lite-for-elementor' ), 'click' => esc_html__( 'Click', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'interaction_mode', [ 'label' => esc_html__( 'Tooltip Mode', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'point', 'options' => [ 'index' => esc_html__( 'Index', 'powerpack-lite-for-elementor' ), 'point' => esc_html__( 'Point', 'powerpack-lite-for-elementor' ), 'dataset' => esc_html__( 'Dataset', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->end_controls_section(); } protected function register_content_chart_title_controls() { $this->start_controls_section( 'section_chart_title', [ 'label' => esc_html__( 'Chart Title', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'show_chart_title', [ 'label' => esc_html__( 'Show Chart Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', ] ); $this->add_control( 'chart_title', [ 'label' => esc_html__( 'Chart Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_position', [ 'label' => esc_html__( 'Position', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'top', 'options' => [ 'left' => esc_html__( 'Left', 'powerpack-lite-for-elementor' ), 'top' => esc_html__( 'Top', 'powerpack-lite-for-elementor' ), 'bottom' => esc_html__( 'Bottom', 'powerpack-lite-for-elementor' ), 'right' => esc_html__( 'Right', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_align', [ 'label' => esc_html__( 'Alignment', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'center', 'options' => [ 'start' => esc_html__( 'Start', 'powerpack-lite-for-elementor' ), 'center' => esc_html__( 'Center', 'powerpack-lite-for-elementor' ), 'end' => esc_html__( 'End', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->end_controls_section(); } protected function register_content_options_controls() { $this->start_controls_section( 'section_chart_additional_options', [ 'label' => esc_html__( 'Additional Options', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'begin_at_zero', [ 'label' => esc_html__( 'Begin at Zero', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'default' => 'yes', 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'x_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'y_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], ], ], ] ); $this->add_control( 'step_size', [ 'type' => Controls_Manager::NUMBER, 'label' => esc_html__( 'Step Size', 'powerpack-lite-for-elementor' ), 'min' => 0, 'step' => 0.5, 'conditions' => [ 'relation' => 'or', 'terms' => [ [ 'name' => 'x_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'y_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], ], ], ] ); $this->add_control( 'maintain_aspect_ratio', [ 'label' => esc_html__( 'Maintain Aspect Ratio', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_responsive_control( 'chart_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Chart Height', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 200, 'max' => 1200, ], '%' => [ 'min' => 10, 'max' => 100, ], 'vh' => [ 'min' => 10, 'max' => 100, ], ], 'default' => [ 'size' => 350, ], 'size_units' => [ 'px', '%', 'vh' ], 'selectors' => [ '{{WRAPPER}} .pp-chart-wrapper' => 'height: {{SIZE}}{{UNIT}};', ], 'condition' => [ 'maintain_aspect_ratio!' => 'yes', ], ] ); $this->add_control( 'x_axis_heading', [ 'label' => esc_html__( 'X Axis', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'x_axis_show_grid_lines', [ 'label' => esc_html__( 'Show Grid Lines', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'x_axis_show_labels', [ 'label' => esc_html__( 'Show Labels', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'x_axis_show_title', [ 'label' => esc_html__( 'Show Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', ] ); $this->add_control( 'x_axis_title', [ 'label' => esc_html__( 'Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'x_axis_show_title' => 'yes', ], ] ); $this->add_control( 'y_axis_heading', [ 'label' => esc_html__( 'Y Axis', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'y_axis_show_grid_lines', [ 'label' => esc_html__( 'Show Grid Lines', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'y_axis_show_labels', [ 'label' => esc_html__( 'Show Labels', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => 'yes', ] ); $this->add_control( 'y_axis_labels_prefix', [ 'label' => esc_html__( 'Labels Prefix', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'y_axis_show_labels' => 'yes', ], ] ); $this->add_control( 'y_axis_labels_suffix', [ 'label' => esc_html__( 'Labels Suffix', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'y_axis_show_labels' => 'yes', ], ] ); $this->add_control( 'y_axis_show_title', [ 'label' => esc_html__( 'Show Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', ] ); $this->add_control( 'y_axis_title', [ 'label' => esc_html__( 'Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::TEXT, 'default' => '', 'dynamic' => [ 'active' => true, ], 'condition' => [ 'y_axis_show_title' => 'yes', ], ] ); $this->add_control( 'y_axis_min', [ 'type' => Controls_Manager::NUMBER, 'label' => esc_html__( 'Minimum Value', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'description' => esc_html__( 'Set minimum value for Y-axis. This value is ignored when data has a smaller value.', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'y_axis_max', [ 'type' => Controls_Manager::NUMBER, 'label' => esc_html__( 'Maximum Value', 'powerpack-lite-for-elementor' ) . ' (' . esc_html__( 'Pro', 'powerpack-lite-for-elementor' ) . ')', 'description' => esc_html__( 'Set maximum value for Y-axis. This value is ignored when data has a larger value.', 'powerpack-lite-for-elementor' ), ] ); $this->add_control( 'line_chart_heading', [ 'label' => esc_html__( 'Line Chart', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'tension', [ 'type' => Controls_Manager::NUMBER, 'label' => esc_html__( 'Line Tension', 'powerpack-lite-for-elementor' ), 'min' => 0, 'max' => 10, 'step' => 0.1, 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'stacked_heading', [ 'label' => esc_html__( 'Bar Chart', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'stacked', [ 'label' => esc_html__( 'Stacked', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'animation_heading', [ 'label' => esc_html__( 'Animation', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'chart_animation', [ 'label' => esc_html__( 'Animation', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'easeOutQuart', 'options' => [ 'linear' => esc_html__( 'linear', 'powerpack-lite-for-elementor' ), 'easeInQuad' => esc_html__( 'easeInQuad', 'powerpack-lite-for-elementor' ), 'easeOutQuad' => esc_html__( 'easeOutQuad', 'powerpack-lite-for-elementor' ), 'easeInOutQuad' => esc_html__( 'easeInOutQuad', 'powerpack-lite-for-elementor' ), 'easeInCubic' => esc_html__( 'easeInCubic', 'powerpack-lite-for-elementor' ), 'easeOutCubic' => esc_html__( 'easeOutCubic', 'powerpack-lite-for-elementor' ), 'easeInOutCubic' => esc_html__( 'easeInOutCubic', 'powerpack-lite-for-elementor' ), 'easeInQuart' => esc_html__( 'easeInQuart', 'powerpack-lite-for-elementor' ), 'easeOutQuart' => esc_html__( 'easeOutQuart', 'powerpack-lite-for-elementor' ), 'easeInOutQuart' => esc_html__( 'easeInOutQuart', 'powerpack-lite-for-elementor' ), 'easeInQuint' => esc_html__( 'easeInQuint', 'powerpack-lite-for-elementor' ), 'easeOutQuint' => esc_html__( 'easeOutQuint', 'powerpack-lite-for-elementor' ), 'easeInOutQuint' => esc_html__( 'easeInOutQuint', 'powerpack-lite-for-elementor' ), 'easeInSine' => esc_html__( 'easeInSine', 'powerpack-lite-for-elementor' ), 'easeOutSine' => esc_html__( 'easeOutSine', 'powerpack-lite-for-elementor' ), 'easeInOutSine' => esc_html__( 'easeInOutSine', 'powerpack-lite-for-elementor' ), 'easeInExpo' => esc_html__( 'easeInExpo', 'powerpack-lite-for-elementor' ), 'easeOutExpo' => esc_html__( 'easeOutExpo', 'powerpack-lite-for-elementor' ), 'easeInOutExpo' => esc_html__( 'easeInOutExpo', 'powerpack-lite-for-elementor' ), 'easeInCirc' => esc_html__( 'easeInCirc', 'powerpack-lite-for-elementor' ), 'easeOutCirc' => esc_html__( 'easeOutCirc', 'powerpack-lite-for-elementor' ), 'easeInOutCirc' => esc_html__( 'easeInOutCirc', 'powerpack-lite-for-elementor' ), 'easeInElastic' => esc_html__( 'easeInElastic', 'powerpack-lite-for-elementor' ), 'easeOutElastic' => esc_html__( 'easeOutElastic', 'powerpack-lite-for-elementor' ), 'easeInOutElastic' => esc_html__( 'easeInOutElastic', 'powerpack-lite-for-elementor' ), 'easeInBack' => esc_html__( 'easeInBack', 'powerpack-lite-for-elementor' ), 'easeOutBack' => esc_html__( 'easeOutBack', 'powerpack-lite-for-elementor' ), 'easeInOutBack' => esc_html__( 'easeInOutBack', 'powerpack-lite-for-elementor' ), 'easeInBounce' => esc_html__( 'easeInBounce', 'powerpack-lite-for-elementor' ), 'easeOutBounce' => esc_html__( 'easeOutBounce', 'powerpack-lite-for-elementor' ), 'easeInOutBounce' => esc_html__( 'easeInOutBounce', 'powerpack-lite-for-elementor' ), ], ] ); $this->add_control( 'chart_animation_duration', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Duration', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 10000, 'step' => 100, ], ], 'default' => [ 'size' => 1000, ], ] ); $this->add_control( 'chart_animation_loop', [ 'label' => esc_html__( 'Loop Animation', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', ] ); $this->end_controls_section(); } protected function register_style_chart_controls() { $this->start_controls_section( 'section_chart_style', [ 'label' => esc_html__( 'Chart', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'line_border_width', [ 'label' => esc_html__( 'Line Border Width', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, 'step' => 1, ], ], 'default' => [ 'size' => 3, ], 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'bar_border_width', [ 'label' => esc_html__( 'Bar Border Width', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, 'step' => 1, ], ], 'default' => [ 'size' => 1, ], 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'bar_border_radius', [ 'label' => esc_html__( 'Bar Border Radius', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, 'step' => 1, ], ], 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'maxbarthickness', [ 'label' => esc_html__( 'Bar Size', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->add_control( 'barthickness', [ 'label' => esc_html__( 'Bar Space', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'condition' => [ 'chart_type' => 'bar', ], ] ); $this->end_controls_section(); } protected function register_style_chart_title_controls() { $this->start_controls_section( 'section_chart_title_style', [ 'label' => __( 'Chart Title', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_color', [ 'label' => esc_html__( 'Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_typography', [ 'label' => esc_html__( 'Typography', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::POPOVER_TOGGLE, 'return_value' => 'yes', 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->start_popover(); $this->add_control( 'chart_title_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_font_weight', [ 'label' => esc_html__( 'Weight', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '100' => esc_html__( '100', 'powerpack-lite-for-elementor' ), '200' => esc_html__( '200', 'powerpack-lite-for-elementor' ), '300' => esc_html__( '300', 'powerpack-lite-for-elementor' ), '400' => esc_html__( '400', 'powerpack-lite-for-elementor' ), '500' => esc_html__( '500', 'powerpack-lite-for-elementor' ), '600' => esc_html__( '600', 'powerpack-lite-for-elementor' ), '700' => esc_html__( '700', 'powerpack-lite-for-elementor' ), '800' => esc_html__( '800', 'powerpack-lite-for-elementor' ), '900' => esc_html__( '900', 'powerpack-lite-for-elementor' ), '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'bold' => esc_html__( 'Bold', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_font_style', [ 'label' => esc_html__( 'Style', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'italic' => esc_html__( 'Italic', 'powerpack-lite-for-elementor' ), 'oblique' => esc_html__( 'Oblique', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->add_control( 'chart_title_line_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Line Height', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], 'em' => [ 'min' => 0.1, 'max' => 10, 'step' => 0.1, ], ], 'size_units' => [ 'px', 'em' ], 'condition' => [ 'show_chart_title' => 'yes', ], ] ); $this->end_popover(); $this->end_controls_section(); } protected function register_style_grid_controls() { $this->start_controls_section( 'section_chart_grid_style', [ 'label' => __( 'Grid', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'relation' => 'and', 'terms' => [ [ 'name' => 'chart_type', 'operator' => '!==', 'value' => 'pie', ], [ 'name' => 'chart_type', 'operator' => '!==', 'value' => 'doughnut', ], ], ], [ 'relation' => 'or', 'terms' => [ [ 'name' => 'x_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'y_axis_show_grid_lines', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'x_axis_show_title', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'y_axis_show_title', 'operator' => '===', 'value' => 'yes', ], ], ], ], ], ] ); $this->start_controls_tabs( 'tabs_grid_style' ); $this->start_controls_tab( 'tab_grid_x', [ 'label' => esc_html__( 'X Axis', 'powerpack-lite-for-elementor' ), 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], ], ] ); $this->grid_style_controls( 'x' ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_grid_y', [ 'label' => esc_html__( 'Y Axis', 'powerpack-lite-for-elementor' ), 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], ], ] ); $this->grid_style_controls( 'y' ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } protected function grid_style_controls( $type ) { $this->add_control( 'grid_color_' . $type, [ 'label' => esc_html__( 'Grid Line Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => 'rgb(0 0 0 / 50%)', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_grid_lines' => 'yes', ], ] ); $this->add_control( 'grid_width_' . $type, [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Grid Line Width', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, 'step' => 1, ], ], 'default' => [ 'size' => 1, ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_grid_lines' => 'yes', ], ] ); $this->title_style_controls( $type ); } protected function title_style_controls( $type ) { $this->add_control( $type . '_heading', [ 'label' => esc_html__( 'Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->add_control( $type . '_axis_title_color', [ 'label' => esc_html__( 'Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->add_control( $type . '_axis_title_typography', [ 'label' => esc_html__( 'Typography', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::POPOVER_TOGGLE, 'return_value' => 'yes', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->start_popover(); $this->add_control( $type . '_axis_title_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->add_control( $type . '_axis_title_font_weight', [ 'label' => esc_html__( 'Weight', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '100' => esc_html__( '100', 'powerpack-lite-for-elementor' ), '200' => esc_html__( '200', 'powerpack-lite-for-elementor' ), '300' => esc_html__( '300', 'powerpack-lite-for-elementor' ), '400' => esc_html__( '400', 'powerpack-lite-for-elementor' ), '500' => esc_html__( '500', 'powerpack-lite-for-elementor' ), '600' => esc_html__( '600', 'powerpack-lite-for-elementor' ), '700' => esc_html__( '700', 'powerpack-lite-for-elementor' ), '800' => esc_html__( '800', 'powerpack-lite-for-elementor' ), '900' => esc_html__( '900', 'powerpack-lite-for-elementor' ), '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'bold' => esc_html__( 'Bold', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->add_control( $type . '_axis_title_font_style', [ 'label' => esc_html__( 'Style', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'italic' => esc_html__( 'Italic', 'powerpack-lite-for-elementor' ), 'oblique' => esc_html__( 'Oblique', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->add_control( $type . '_axis_title_line_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Line Height', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], 'em' => [ 'min' => 0.1, 'max' => 10, 'step' => 0.1, ], ], 'size_units' => [ 'px', 'em' ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_title' => 'yes', ], ] ); $this->end_popover(); } protected function register_style_labels_controls() { $this->start_controls_section( 'section_chart_labels_style', [ 'label' => __( 'Labels', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'conditions' => [ 'relation' => 'and', 'terms' => [ [ 'relation' => 'and', 'terms' => [ [ 'name' => 'chart_type', 'operator' => '!==', 'value' => 'pie', ], [ 'name' => 'chart_type', 'operator' => '!==', 'value' => 'doughnut', ], ], ], [ 'relation' => 'or', 'terms' => [ [ 'name' => 'x_axis_show_labels', 'operator' => '===', 'value' => 'yes', ], [ 'name' => 'y_axis_show_labels', 'operator' => '===', 'value' => 'yes', ], ], ], ], ], ] ); $this->add_control( 'x_axis_labels_heading', [ 'label' => esc_html__( 'X Axis', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], 'x_axis_show_labels' => 'yes', ], ] ); $this->labels_style_controls( 'x' ); $this->add_control( 'y_axis_labels_heading', [ 'label' => esc_html__( 'Y Axis', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], 'y_axis_show_labels' => 'yes', ], ] ); $this->labels_style_controls( 'y' ); $this->end_controls_section(); } protected function labels_style_controls( $type ) { $this->add_control( $type . '_axis_labels_color', [ 'label' => esc_html__( 'Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#666', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->add_control( $type . '_axis_labels_typography', [ 'label' => esc_html__( 'Typography', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::POPOVER_TOGGLE, 'return_value' => 'yes', 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->start_popover(); $this->add_control( $type . '_axis_labels_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->add_control( $type . '_axis_labels_font_weight', [ 'label' => esc_html__( 'Weight', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '100' => esc_html__( '100', 'powerpack-lite-for-elementor' ), '200' => esc_html__( '200', 'powerpack-lite-for-elementor' ), '300' => esc_html__( '300', 'powerpack-lite-for-elementor' ), '400' => esc_html__( '400', 'powerpack-lite-for-elementor' ), '500' => esc_html__( '500', 'powerpack-lite-for-elementor' ), '600' => esc_html__( '600', 'powerpack-lite-for-elementor' ), '700' => esc_html__( '700', 'powerpack-lite-for-elementor' ), '800' => esc_html__( '800', 'powerpack-lite-for-elementor' ), '900' => esc_html__( '900', 'powerpack-lite-for-elementor' ), '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'bold' => esc_html__( 'Bold', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->add_control( $type . '_axis_labels_font_style', [ 'label' => esc_html__( 'Style', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'italic' => esc_html__( 'Italic', 'powerpack-lite-for-elementor' ), 'oblique' => esc_html__( 'Oblique', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->add_control( $type . '_axis_labels_line_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Line Height', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], 'em' => [ 'min' => 0.1, 'max' => 10, 'step' => 0.1, ], ], 'size_units' => [ 'px', 'em' ], 'condition' => [ 'chart_type!' => [ 'pie', 'doughnut' ], $type . '_axis_show_labels' => 'yes', ], ] ); $this->end_popover(); } protected function register_style_legend_controls() { $this->start_controls_section( 'section_legend_style', [ 'label' => __( 'Legend', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_color', [ 'label' => esc_html__( 'Label Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#666', 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_typography', [ 'label' => esc_html__( 'Typography', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::POPOVER_TOGGLE, 'return_value' => 'yes', 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->start_popover(); $this->add_control( 'legend_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_font_weight', [ 'label' => esc_html__( 'Weight', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ '100' => esc_html__( '100', 'powerpack-lite-for-elementor' ), '200' => esc_html__( '200', 'powerpack-lite-for-elementor' ), '300' => esc_html__( '300', 'powerpack-lite-for-elementor' ), '400' => esc_html__( '400', 'powerpack-lite-for-elementor' ), '500' => esc_html__( '500', 'powerpack-lite-for-elementor' ), '600' => esc_html__( '600', 'powerpack-lite-for-elementor' ), '700' => esc_html__( '700', 'powerpack-lite-for-elementor' ), '800' => esc_html__( '800', 'powerpack-lite-for-elementor' ), '900' => esc_html__( '900', 'powerpack-lite-for-elementor' ), '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'bold' => esc_html__( 'Bold', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_font_style', [ 'label' => esc_html__( 'Style', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => '', 'options' => [ '' => esc_html__( 'Default', 'powerpack-lite-for-elementor' ), 'normal' => esc_html__( 'Normal', 'powerpack-lite-for-elementor' ), 'italic' => esc_html__( 'Italic', 'powerpack-lite-for-elementor' ), 'oblique' => esc_html__( 'Oblique', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->add_control( 'legend_line_height', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Line Height', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 100, 'step' => 1, ], 'em' => [ 'min' => 0.1, 'max' => 10, 'step' => 0.1, ], ], 'size_units' => [ 'px', 'em' ], 'condition' => [ 'show_legend' => 'yes', ], ] ); $this->end_popover(); $this->end_controls_section(); } protected function register_style_points_controls() { $this->start_controls_section( 'section_chart_points_style', [ 'label' => __( 'Points', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'custom_point_styles', [ 'label' => esc_html__( 'Custom Styles', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SWITCHER, 'label_on' => esc_html__( 'Yes', 'powerpack-lite-for-elementor' ), 'label_off' => esc_html__( 'No', 'powerpack-lite-for-elementor' ), 'default' => '', 'condition' => [ 'chart_type' => 'line', ], ] ); $this->add_control( 'point_style', [ 'label' => esc_html__( 'Point Style', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::SELECT, 'default' => 'circle', 'options' => [ 'circle' => esc_html__( 'Circle', 'powerpack-lite-for-elementor' ), 'cross' => esc_html__( 'Cross', 'powerpack-lite-for-elementor' ), 'crossRot' => esc_html__( 'CrossRot', 'powerpack-lite-for-elementor' ), 'dash' => esc_html__( 'Dash', 'powerpack-lite-for-elementor' ), 'line' => esc_html__( 'Line', 'powerpack-lite-for-elementor' ), 'rect' => esc_html__( 'Rect', 'powerpack-lite-for-elementor' ), 'rectRounded' => esc_html__( 'RectRounded', 'powerpack-lite-for-elementor' ), 'rectRot' => esc_html__( 'RectRot', 'powerpack-lite-for-elementor' ), 'star' => esc_html__( 'Star', 'powerpack-lite-for-elementor' ), 'triangle' => esc_html__( 'Triangle', 'powerpack-lite-for-elementor' ), ], 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', ], ] ); $this->add_control( 'point_bg', [ 'label' => esc_html__( 'Background Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#ff5a6e99', 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', 'point_style' => [ 'circle', 'rect', 'rectRounded', 'rectRot', 'triangle' ], ], ] ); $this->add_control( 'point_border_color', [ 'label' => esc_html__( 'Border Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#00000099', 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', ], ] ); $this->add_control( 'point_border_width', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Border Width', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 1, ], 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', ], ] ); $this->add_control( 'point_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Point Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 5, ], 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', ], ] ); $this->add_control( 'point_hover_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Point Hover Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 10, ], 'condition' => [ 'chart_type' => 'line', 'custom_point_styles' => 'yes', ], ] ); $this->end_controls_section(); } protected function register_style_tooltip_controls() { $this->start_controls_section( 'section_chart_tooltip_style', [ 'label' => __( 'Tooltip', 'powerpack-lite-for-elementor' ), 'tab' => Controls_Manager::TAB_STYLE, 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_background_color', [ 'label' => esc_html__( 'Background Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_border_color', [ 'label' => esc_html__( 'Border Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_border_width', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Border Width', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 20, 'step' => 1, ], ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_border_radius', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Border Radius', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 0, 'max' => 25, 'step' => 1, ], ], 'default' => [ 'size' => 6, ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_padding', [ 'label' => esc_html__( 'Padding', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::NUMBER, 'default' => 6, 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_title_heading', [ 'label' => esc_html__( 'Title', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'tooltip_title_color', [ 'label' => esc_html__( 'Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_title_font_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Font Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_body_heading', [ 'label' => esc_html__( 'Body', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::HEADING, 'separator' => 'before', ] ); $this->add_control( 'tooltip_body_color', [ 'label' => esc_html__( 'Color', 'powerpack-lite-for-elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->add_control( 'tooltip_body_font_size', [ 'type' => Controls_Manager::SLIDER, 'label' => esc_html__( 'Font Size', 'powerpack-lite-for-elementor' ), 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, 'step' => 1, ], ], 'default' => [ 'size' => 12, ], 'condition' => [ 'show_tooltip' => 'yes', ], ] ); $this->end_controls_section(); } /** * Render Charts widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @access protected */ protected function render() { $settings = $this->get_settings_for_display(); $chart_type = $this->get_chart_type(); if ( 'radar' === $chart_type || 'pie' === $chart_type || 'doughnut' === $chart_type || 'polarArea' === $chart_type || 'bubble' === $chart_type ) { $placeholder = sprintf( /* translators: %s: Widget title. */ esc_html__( 'Click here to edit the "%1$s" settings and choose one of the available chart types from the Chart Type option.', 'powerpack-lite-for-elementor' ), esc_html( $this->get_title() ) ); echo esc_attr( $this->render_editor_placeholder( [ 'title' => esc_html__( 'Chart type not available!', 'powerpack-lite-for-elementor' ), 'body' => $placeholder, ] ) ); return; } $datasets = $this->get_datasets( $settings, $chart_type ); $options = $this->get_chart_options( $settings, $chart_type ); $datasets = PP_Helper::apply_deprecated_filter( 'pp_chart_datasets', 'powerpack_elements_chart_datasets', $datasets, [], '2.9.10' ); $options = PP_Helper::apply_deprecated_filter( 'pp_chart_options', 'powerpack_elements_chart_options', $options, [], '2.9.10' ); $this->add_render_attribute( 'wrapper', 'class', 'pp-chart-wrapper' ); $this->add_render_attribute( 'wrapper', 'data-id', esc_attr( uniqid('chart') ) ); $this->add_render_attribute( 'wrapper', 'style', 'position: relative;' ); $this->add_render_attribute( 'wrapper', 'data-settings', wp_json_encode( array_filter([ 'type' => $chart_type, 'data' => [ 'labels' => explode( ',', $settings['labels'] ), 'datasets' => $datasets, ], 'options' => $options, ]) ) ); ?> <div <?php $this->print_render_attribute_string( 'wrapper' ); ?>> <?php } protected function get_chart_type() { $settings = $this->get_settings_for_display(); if ( ! empty( $settings['chart_type'] ) && 'bar' === $settings['chart_type'] && ! empty( $settings['bar_chart_type'] ) && 'horizontal_bar' === $settings['bar_chart_type'] ) { return 'bar'; } return $settings['chart_type'] ?? ''; } protected function get_datasets( $settings, $chart_type ) { $datasets = []; $chart_datasets = $settings['chart_dataset']; foreach ( $chart_datasets as $item ) { $datasets[] = $this->get_chart_dataset( $settings, $chart_type, $item ); } return $datasets; } protected function get_chart_dataset( $settings, $chart_type, $item ) { $dataset = [ 'label' => $item['dataset_label'], 'data' => array_map( 'floatval', explode( ',', $item['dataset_data'] ) ), 'backgroundColor' => $this->get_background_color( $item ), 'borderColor' => $this->get_border_color( $item ), 'borderDash' => ( 'line' === $chart_type && ! empty( $item['border_dash'] ) && 'yes' === $item['border_dash'] ) ? [5, 5] : [], 'fill' => ! empty( $item['fill'] ) && 'yes' === $item['fill'], 'borderWidth' => $this->get_border_width(), ]; if ( in_array( $chart_type, ['line'], true ) ) { $dataset = array_merge( $dataset, $this->get_point_styles( $settings, $chart_type ) ); } if ( 'line' === $chart_type && '' !== $settings['tension'] ) { $dataset['tension'] = $settings['tension']; } if ( 'bar' === $chart_type ) { if ( ! empty( $settings['bar_border_radius']['size'] ) ) { $dataset['borderRadius'] = $settings['bar_border_radius']['size']; $dataset['borderSkipped'] = false; } if ( ! empty( $settings['barthickness']['size'] ) ) { $dataset['barThickness'] = $settings['barthickness']['size']; } if ( ! empty( $settings['maxbarthickness']['size'] ) ) { $dataset['maxBarThickness'] = $settings['maxbarthickness']['size']; } } return $dataset; } protected function get_border_width() { $settings = $this->get_settings_for_display(); $chart_type = $this->get_chart_type(); switch ( $chart_type ) { case 'bar': $data_border_width = $settings['bar_border_width']['size']; break; case 'line': $data_border_width = $settings['line_border_width']['size']; break; default: $data_border_width = 0; break; } $border_width = ( '' !== $data_border_width ) ? $data_border_width : $this->get_default_border_width(); return $border_width; } protected function get_default_border_width() { $chart_type = $this->get_chart_type(); switch ( $chart_type ) { case 'bar': $border_width = 0; break; case 'line': $border_width = 3; break; default: $border_width = 3; break; } return $border_width; } protected function get_background_color( $item ) { return $item['bg_color']; } protected function get_border_color( $item ) { return $item['border_color']; } protected function get_point_styles( $settings, $chart_type ) { $styles = []; if ( 'yes' === $settings['custom_point_styles'] ) { $styles['pointStyle'] = $settings['point_style'] ?? ''; if ( $settings['point_bg'] ) { $styles['pointBackgroundColor'] = $settings['point_bg']; } $styles['pointRadius'] = $settings['point_size']['size'] ?? null; $styles['pointHoverRadius'] = $settings['point_hover_size']['size'] ?? null; if ( $settings['point_border_width']['size'] ) { $styles['pointBorderWidth'] = $settings['point_border_width']['size']; } if ( $settings['point_border_color'] ) { $styles['pointBorderColor'] = $settings['point_border_color']; } } return $styles; } protected function get_chart_options( $settings, $chart_type ) { $options = []; if ( 'bar' === $chart_type && 'horizontal_bar' === $settings['bar_chart_type'] ) { $options['indexAxis'] = 'y'; } $options['scales'] = $this->get_grid_options( $settings ); $options = $this->get_additional_options( $settings, $options ); return $options; } protected function get_grid_options( $settings ) { $x_axis_title = $this->get_axis_title( $settings, 'x' ); $y_axis_title = $this->get_axis_title( $settings, 'y' ); return [ 'x' => array_merge( $this->get_axis_settings( $settings, 'x' ), [ 'title' => $x_axis_title, 'grid' => $this->get_grid_settings( $settings, 'x' ), ] ), 'y' => array_merge( $this->get_axis_settings( $settings, 'y' ), [ 'title' => $y_axis_title, 'grid' => $this->get_grid_settings( $settings, 'y' ), ] ), ]; } private function get_axis_title( $settings, $axis ) { $show_title_key = "{$axis}_axis_show_title"; $title_key = "{$axis}_axis_title"; $color_key = "{$axis}_axis_title_color"; $typography_key = "{$axis}_axis_title_typography"; $size_key = "{$axis}_axis_title_size"; $font_style_key = "{$axis}_axis_title_font_style"; $font_weight_key = "{$axis}_axis_title_font_weight"; $line_height_key = "{$axis}_axis_title_line_height"; if ( 'yes' === $settings[$show_title_key] ) { return [ 'display' => true, 'text' => $settings[$title_key] ?? '', 'color' => $settings[$color_key], 'font' => [ 'size' => ! empty( $settings[$size_key]['size'] ) ? $settings[$size_key]['size'] : 12, 'style' => $settings[$font_style_key] ?? '', 'weight' => $settings[$font_weight_key] ?? '', 'lineHeight' => ! empty( $settings[$line_height_key]['size'] ) ? $settings[$line_height_key]['size'] . $settings[$line_height_key]['unit'] : '', ], ]; } return [ 'display' => false ]; } private function get_axis_settings( $settings, $axis ) { $begin_at_zero_key = 'begin_at_zero'; $chart_type_key = 'chart_type'; $stacked_key = 'stacked'; return [ 'beginAtZero' => ( 'yes' === $settings[$begin_at_zero_key] ) ? true : false, 'stacked' => ( 'bar' === $settings[$chart_type_key] && 'yes' === $settings[$stacked_key] ) ? true : false, 'ticks' => $this->get_ticks_settings( $settings, $axis ), ]; } private function get_grid_settings( $settings, $axis ) { $show_grid_lines_key = "{$axis}_axis_show_grid_lines"; $grid_color_key = "grid_color_{$axis}"; $grid_width_key = "grid_width_{$axis}"; return [ 'display' => ! empty( $settings[$show_grid_lines_key] ), 'color' => $settings[$grid_color_key], 'lineWidth' => ! empty( $settings[$grid_width_key]['size'] ) ? $settings[$grid_width_key]['size'] : 1, ]; } private function get_ticks_settings( $settings, $axis ) { $show_labels_key = "{$axis}_axis_show_labels"; $labels_color_key = "{$axis}_axis_labels_color"; $typography_key = "{$axis}_axis_labels_typography"; $size_key = "{$axis}_axis_labels_size"; $font_style_key = "{$axis}_axis_labels_font_style"; $font_weight_key = "{$axis}_axis_labels_font_weight"; $line_height_key = "{$axis}_axis_labels_line_height"; $step_size_key = 'step_size'; return [ 'display' => ! empty( $settings[$show_labels_key] ), 'color' => $settings[$labels_color_key], 'font' => [ 'size' => ! empty( $settings[$size_key]['size'] ) ? $settings[$size_key]['size'] : 12, 'style' => $settings[$font_style_key] ?? '', 'weight' => $settings[$font_weight_key] ?? '', 'lineHeight' => ! empty( $settings[$line_height_key]['size'] ) ? $settings[$line_height_key]['size'] . $settings[$line_height_key]['unit'] : '', ], 'stepSize' => ! empty( $settings[$step_size_key] ) ? $settings[$step_size_key] : 0, ]; } protected function get_additional_options( $settings, $options ) { if ( 'yes' === $settings['show_chart_title'] && ! empty( $settings['chart_title'] ) ) { $options['plugins']['title'] = [ 'display' => true, 'text' => $settings['chart_title'] ?? '', 'color' => $settings['chart_title_color'], 'font' => [ 'size' => ( $settings['chart_title_typography'] && $settings['chart_title_size']['size'] ) ? $settings['chart_title_size']['size'] : 12, 'style' => ( $settings['chart_title_typography'] && $settings['chart_title_font_style'] ) ? $settings['chart_title_font_style'] : '', 'weight' => ( $settings['chart_title_typography'] && $settings['chart_title_font_weight'] ) ? $settings['chart_title_font_weight'] : '', 'lineHeight' => ( $settings['chart_title_typography'] && $settings['chart_title_line_height']['size'] ) ? $settings['chart_title_line_height']['size'] . $settings['chart_title_line_height']['unit'] : '', ], 'padding' => [ 'bottom' => 20, ], ]; if ( 'top' !== $settings['chart_title_position'] ) { $options['plugins']['title']['position'] = $settings['chart_title_position']; } if ( 'center' !== $settings['chart_title_align'] ) { $options['plugins']['title']['align'] = $settings['chart_title_align']; } } if ( ! empty( $settings['show_legend'] ) && 'yes' === $settings['show_legend'] ) { $options['plugins']['legend'] = [ 'position' => $settings['legend_position'] ?? '', 'align' => $settings['legend_align'] ?? '', 'reverse' => ( 'yes' === $settings['legend_reverse'] ), 'labels' => [ 'color' => $settings['legend_color'] ?? '', 'font' => [ 'size' => ( $settings['legend_typography'] && $settings['legend_size']['size'] ) ? $settings['legend_size']['size'] : 12, 'style' => ( $settings['legend_typography'] && $settings['legend_font_style'] ) ? $settings['legend_font_style'] : '', 'weight' => ( $settings['legend_typography'] && $settings['legend_font_weight'] ) ? $settings['legend_font_weight'] : '', 'lineHeight' => ( $settings['legend_typography'] && $settings['legend_line_height']['size'] ) ? $settings['legend_line_height']['size'] . $settings['legend_line_height']['unit'] : '', ], ], ]; } else { $options['plugins']['legend'] = [ 'display' => false ]; } if ( ! empty( $settings['chart_animation'] ) ) { $options['animation'] = [ 'duration' => $settings['chart_animation_duration']['size'] ?? null, 'easing' => $settings['chart_animation'], 'loop' => ! empty( $settings['chart_animation_loop'] ), ]; } if ( ! empty( $settings['show_tooltip'] ) && 'yes' === $settings['show_tooltip'] ) { $options['interaction']['mode'] = $settings['interaction_mode']; $options['plugins']['tooltip'] = [ 'backgroundColor' => $settings['tooltip_background_color'] ?? '', 'borderColor' => $settings['tooltip_border_color'] ?? '', 'borderWidth' => ( '' !== $settings['tooltip_border_width']['size'] ) ? $settings['tooltip_border_width']['size'] : 0, 'cornerRadius' => ( '' !== $settings['tooltip_border_radius']['size'] ) ? $settings['tooltip_border_radius']['size'] : 6, 'padding' => ( $settings['tooltip_padding'] ) ? $settings['tooltip_padding'] : 6, 'titleColor' => $settings['tooltip_title_color'] ?? '', 'bodyColor' => $settings['tooltip_body_color'] ?? '', 'titleFont' => [ 'size' => $settings['tooltip_title_font_size']['size'] ?? null ], 'bodyFont' => [ 'size' => $settings['tooltip_body_font_size']['size'] ?? null ], ]; if ( ! empty( $settings['tooltip_event'] ) && 'click' === $settings['tooltip_event'] ) { $options['plugins']['tooltip']['events'] = ['click']; $options['events'] = ['click']; } } else { $options['plugins']['tooltip'] = [ 'enabled' => false ]; } if ( 'yes' !== $settings['maintain_aspect_ratio'] ) { $options['maintainAspectRatio'] = false; } return $options; } protected function bubble_chart_data_array( $bubble_data ) { $bubble_data = trim( $bubble_data ); $matches = []; preg_match_all( '#\[([^\]]+)\]#U', $bubble_data, $matches ); if ( empty( $matches[1] ) ) { return []; } $bubble = []; foreach ( $matches[1] as $item ) { $values = explode( ',', trim( $item, '[] ' ) ); if ( 3 !== count( $values ) ) { continue; } $bubble[] = (object) [ 'x' => floatval( $values[0] ), 'y' => floatval( $values[1] ), 'r' => floatval( $values[2] ), ]; } return $bubble; } }
| ver. 1.4 |
Github
|
.
| PHP 8.5.7 | Generation time: 0 |
proxy
|
phpinfo
|
Settings