%PDF-
%PDF-
Mini Shell
Mini Shell
<?php
namespace Elementor;
use \Elementor\ElementsKit_Widget_Piechart_Handler as Handler;
use \ElementsKit_Lite\Modules\Controls\Controls_Manager as ElementsKit_Controls_Manager;
if ( ! defined( 'ABSPATH' ) ) exit;
class ElementsKit_Widget_Piechart extends Widget_Base {
use \ElementsKit_Lite\Widgets\Widget_Notice;
public $base;
public function __construct( $data = [], $args = null ) {
parent::__construct( $data, $args );
$this->add_script_depends('easypiechart');
}
public function get_name() {
return Handler::get_name();
}
public function get_title() {
return Handler::get_title();
}
public function get_icon() {
return Handler::get_icon();
}
public function get_categories() {
return Handler::get_categories();
}
public function get_keywords() {
return Handler::get_keywords();
}
public function get_help_url() {
return 'https://wpmet.com/doc/pie-chart/';
}
protected function is_dynamic_content(): bool {
return false;
}
protected function register_controls() {
// Content section
$this->start_controls_section(
'ekit_piechart_content_section',
[
'label' => esc_html__( 'Content', 'elementskit-lite' ),
'tab' => Controls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'ekit_piechart_style',
[
'label' => esc_html__( 'Pie Chart Style', 'elementskit-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'simple',
'options' => [
'simple' => esc_html__( 'Simple', 'elementskit-lite' ),
'withcontent' => esc_html__( 'With Content', 'elementskit-lite' ),
],
]
);
$this->add_control(
'ekit_piechart_content',
[
'label' => esc_html__( 'Chart Content', 'elementskit-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'ekit_piechart_percentage',
'options' => [
'ekit_piechart_percentage' => esc_html__( 'Percentage', 'elementskit-lite' ),
'icon' => esc_html__( 'Icon', 'elementskit-lite' ),
],
]
);
$this->add_control(
'ekit_piechart_percentage',
[
'label' => esc_html__( 'Percentage', 'elementskit-lite' ),
'type' => Controls_Manager::NUMBER,
'min' => 0,
'max' => 100,
'step' => 1,
'default' => 40,
]
);
$this->add_control(
'ekit_piechart_icon_type',
[
'label' => esc_html__( 'Icon type', 'elementskit-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'icon',
'options' => [
'icon' => esc_html__( 'Icon', 'elementskit-lite' ),
'image' => esc_html__( 'Image', 'elementskit-lite' ),
],
'condition' => [
'ekit_piechart_content' => 'icon'
]
]
);
$this->add_control(
'ekit_piechart_icons',
[
'label' => esc_html__( 'Icon', 'elementskit-lite' ),
'type' => Controls_Manager::ICONS,
'fa4compatibility' => 'ekit_piechart_icon',
'default' => [
'value' => 'icon icon-apartment',
'library' => 'ekiticons',
],
'condition' => [
'ekit_piechart_icon_type' => 'icon',
'ekit_piechart_content' => 'icon'
]
]
);
$this->add_control(
'ekit_piechart_icon_image',
[
'label' => esc_html__( 'Choose Image', 'elementskit-lite' ),
'type' => Controls_Manager::MEDIA,
'dynamic' => [
'active' => true,
],
'default' => [
'url' => Utils::get_placeholder_image_src(),
'id' => -1
],
'condition' => [
'ekit_piechart_icon_type' => 'image',
'ekit_piechart_content' => 'icon'
]
]
);
$this->add_group_control(
Group_Control_Image_Size::get_type(),
[
'name' => 'ekit_piechart_icon_image_size_group',
'default' => 'thumbnail',
'condition' => [
'ekit_piechart_icon_type' => 'image',
'ekit_piechart_content' => 'icon'
]
]
);
$this->add_control(
'ekit_piechart_title',
[
'label' => esc_html__( 'Title', 'elementskit-lite' ),
'type' => Controls_Manager::TEXT,
'dynamic' => [
'active' => true,
],
'default' => esc_html__( 'Default title', 'elementskit-lite' ),
'placeholder' => esc_html__( 'Type your title here', 'elementskit-lite' ),
'label_block' => true,
'condition' => [
'ekit_piechart_style' => 'withcontent'
]
]
);
$this->add_control(
'ekit_piechart_item_description',
[
'label' => esc_html__( 'Description', 'elementskit-lite' ),
'type' => Controls_Manager::TEXTAREA,
'rows' => 10,
'dynamic' => [
'active' => true,
],
'default' => esc_html__( 'Default description', 'elementskit-lite' ),
'placeholder' => esc_html__( 'Type your description here', 'elementskit-lite' ),
'label_block' => true,
'condition' => [
'ekit_piechart_style' => 'withcontent'
]
]
);
$this->add_control(
'ekit_piechart_content_type',
[
'label' => esc_html__( 'Content type', 'elementskit-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'simple',
'options' => [
'simple' => esc_html__( 'Static', 'elementskit-lite' ),
'flip-card' => esc_html__( 'Flip Card', 'elementskit-lite' ),
],
'condition' => [
'ekit_piechart_style' => 'withcontent'
]
]
);
$this->end_controls_section();
// Style
$this->start_controls_section(
'ekit_piechart_section_content',
[
'label' => esc_html__( 'Title ', 'elementskit-lite' ),
'tab' => controls_Manager::TAB_STYLE,
'condition' => [
'ekit_piechart_style' => 'withcontent'
]
]
);
$this->add_control(
'ekit_piechart_title_color',
[
'label' => esc_html__( 'Title Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-piechart-title' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_piechart_style' => 'withcontent'
],
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_piechart_title_typography_group',
'label' => esc_html__( 'Title Typography', 'elementskit-lite' ),
'selector' => '{{WRAPPER}} .ekit-piechart-title',
'condition' => [
'ekit_piechart_style' => 'withcontent'
],
]
);
$this->add_responsive_control(
'ekit_piechart_title_margin',
[
'label' =>esc_html__( 'Title margin', 'elementskit-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'default' => [
'top' => '0',
'right' => '0',
'bottom' => '20',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-piechart-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Content
$this->start_controls_section(
'ekit_piechart_general_settings',
[
'label' => esc_html__( 'Content', 'elementskit-lite' ),
'tab' => controls_Manager::TAB_STYLE,
'condition' => [
'ekit_piechart_style' => 'withcontent'
],
]
);
$this->add_control(
'ekit_piechart_content_color',
[
'label' => esc_html__( 'Content Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart p' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_piechart_style' => 'withcontent'
],
'separator' => 'before',
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'ekit_piechart_content_typography_group',
'label' => esc_html__( 'Typography', 'elementskit-lite' ),
'selector' => '{{WRAPPER}} .withcontent p',
'condition' => [
'ekit_piechart_style' => 'withcontent'
],
]
);
$this->add_control(
'ekit_piechart_content_margin',
[
'label' => __( 'Margin', 'elementskit-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart p' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_responsive_control(
'ekit_piechart_content_align',
[
'label' =>esc_html__( 'Content Alignment', 'elementskit-lite' ),
'type' => Controls_Manager::CHOOSE,
'options' => [
'left' => [
'title' =>esc_html__( 'Left', 'elementskit-lite' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' =>esc_html__( 'Center', 'elementskit-lite' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' =>esc_html__( 'Right', 'elementskit-lite' ),
'icon' => 'eicon-text-align-right',
],
],
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart' => 'text-align: {{VALUE}};',
],
'default' => 'center',
]
);
$this->end_controls_section();
// Flip card
$this->start_controls_section(
'ekit_piechart_section_flip_card',
[
'label' => esc_html__( 'Flip Card ', 'elementskit-lite' ),
'tab' => controls_Manager::TAB_STYLE,
'condition' => [
'ekit_piechart_style' => 'withcontent',
'ekit_piechart_content_type' => 'flip-card',
]
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_piechart_flip_background_group',
'label' => esc_html__( 'Background', 'elementskit-lite' ),
'types' => ['gradient'],
'selector' => '{{WRAPPER}} .flip-card .back',
]
);
$this->add_responsive_control(
'ekit_piechart_flip_back_padding',
[
'label' => esc_html__( 'Padding', 'elementskit-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', '%', 'em' ],
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart.flip-card .back' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
// Chart style
$this->start_controls_section(
'ekit_piechart_section_piechart',
[
'label' => esc_html__( 'Chart', 'elementskit-lite' ),
'tab' => controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'ekit_piechart_size',
[
'label' => esc_html__( 'Piechart Size', 'elementskit-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'render_type' => 'template',
'range' => [
'px' => [
'min' => 100,
'max' => 250,
'step' => 1,
],
],
'default' => [
'size' => 150,
],
'selectors' => [
'{{WRAPPER}} .ekit-wid-con .ekit-single-piechart > .piechart canvas' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
],
]
);
$this->add_control(
'ekit_piechart_border_size',
[
'label' => esc_html__( 'Border Size', 'elementskit-lite' ),
'type' => Controls_Manager::SLIDER,
'size_units' => [ 'px' ],
'range' => [
'px' => [
'min' => 1,
'max' => 50,
'step' => 1,
],
],
'default' => [
'unit' => 'px',
'size' => 5,
],
]
);
$this->add_control(
'ekit_piechart_color_style',
[
'label' => esc_html__( 'Color Type', 'elementskit-lite' ),
'type' => Controls_Manager::SELECT,
'default' => 'normal',
'options' => [
'normal' => esc_html__( 'Normal', 'elementskit-lite' ),
'gradient' => esc_html__( 'Gradient', 'elementskit-lite' ),
],
]
);
$this->add_control(
'ekit_piechart_line_color',
[
'label' => esc_html__( 'Bar Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'render_type' => 'template',
'condition' => [
'ekit_piechart_color_style' => 'normal'
],
]
);
$this->add_control(
'ekit_piechart_bar_color_bg',
[
'label' => esc_html__( 'Bar Background Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'render_type' => 'template',
]
);
$this->add_control(
'ekit_piechart_gradientColor1',
[
'label' => esc_html__( 'Gradient Color1', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'render_type' => 'template',
'condition' => [
'ekit_piechart_color_style' => 'gradient'
],
]
);
$this->add_control(
'ekit_piechart_gradientColor2',
[
'label' => esc_html__( 'Gradient Color2', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'render_type' => 'template',
'condition' => [
'ekit_piechart_color_style' => 'gradient'
],
]
);
$this->add_control(
'ekit_piechart_iocn_color',
[
'label' => esc_html__( ' Icon Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'default' => '#333',
'selectors' => [
'{{WRAPPER}} .ekit-chart-content i' => 'color: {{VALUE}};',
'{{WRAPPER}} .ekit-chart-content svg path' => 'stroke: {{VALUE}}; fill: {{VALUE}};',
],
'condition' => [
'ekit_piechart_icon_type!' => 'image',
'ekit_piechart_content' => 'icon',
]
]
);
$this->add_control(
'ekit_piechart_content_color_number',
[
'label' => esc_html__( ' Number Color', 'elementskit-lite' ),
'type' => Controls_Manager::COLOR,
'default' => '#000000',
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart span.ekit-chart-content' => 'color: {{VALUE}}',
],
'condition' => [
'ekit_piechart_content' => 'ekit_piechart_percentage',
]
]
);
$this->end_controls_section();
// Background
$this->start_controls_section(
'ekit_piechart_background',
[
'label' => esc_html__( 'Background ', 'elementskit-lite' ),
'tab' => controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'ekit_piechart_wrapper_padding',
[
'label' =>esc_html__( 'Wrapper Padding', 'elementskit-lite' ),
'type' => Controls_Manager::DIMENSIONS,
'size_units' => [ 'px', 'em', '%' ],
'default' => [
'top' => '60',
'right' => '0',
'bottom' => '60',
'left' => '0',
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .ekit-single-piechart' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->add_group_control(
Group_Control_Box_Shadow::get_type(),
[
'name' => 'ekit_piechart_wrapper_box_shadow_group',
'label' => esc_html__( 'Box Shadow', 'elementskit-lite' ),
'selector' => '{{WRAPPER}} .ekit-single-piechart',
'separator' => 'before',
'description' => esc_html__('Eg: 0px 28px 40px 0px rgba(0, 0, 0, .1)', 'elementskit-lite'),
]
);
$this->start_controls_tabs('ekit_piechart_style_tabs');
$this->start_controls_tab(
'ekit_piechart_wrapper_bg_style_normal_tab',
[
'label' => esc_html__( 'Normal', 'elementskit-lite' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_piechart_background_group',
'label' => esc_html__( 'Background', 'elementskit-lite' ),
'types' => [ 'classic', 'gradient', 'video' ],
'selector' => '{{WRAPPER}} .ekit-single-piechart',
]
);
$this->end_controls_tab();
$this->start_controls_tab(
'ekit_piechart_bg_style_hover_tab',
[
'label' => esc_html__( 'Hover', 'elementskit-lite' ),
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'ekit_piechart_background_hover_group',
'label' => esc_html__( 'Background', 'elementskit-lite' ),
'types' => [ 'classic', 'gradient', 'video' ],
'selector' => '{{WRAPPER}} .ekit-single-piechart:hover',
]
);
$this->add_control(
'ekit_piechart_bg_hover_animation',
[
'label' => esc_html__( 'Hover Animation', 'elementskit-lite' ),
'type' => Controls_Manager::HOVER_ANIMATION,
'prefix_class' => 'elementor-animation-',
]
);
$this->end_controls_tab();
$this->end_controls_tabs();
$this->end_controls_section();
$this->insert_pro_message();
}
protected function render( ) {
echo '<div class="ekit-wid-con">';
$this->render_raw();
echo '</div>';
}
protected function render_raw( ) {
$settings = $this->get_settings_for_display();
$colors = $this->get_globals_colors($settings);
if($settings['ekit_piechart_bg_hover_animation'] != '') {
$this->add_render_attribute( 'pieechart', 'class', $settings['hover_animation'] );
}
$this->add_render_attribute( 'pieechart', 'class', 'ekit-single-piechart' );
if($settings['ekit_piechart_style'] == 'simple'){
$this->add_render_attribute( 'pieechart', 'class', 'text-center' );
}
if($settings['ekit_piechart_content_type'] == 'flip-card'){
$this->add_render_attribute( 'pieechart', 'class', $settings['ekit_piechart_content_type'] );
}
if(isset($settings['ekit_piechart_flip_background_group_background']) && $settings['ekit_piechart_flip_background_group_background'] == 'gradient'){
$this->add_render_attribute( 'pieechart', 'class', $settings['ekit_piechart_content_type'].' '.'flip-gradient-color' );
}
$this->add_render_attribute( 'pieechart', 'class', $settings['ekit_piechart_style'] );
$this->add_render_attribute( 'pieechartscreen', [
'class' => 'colorful-chart piechart',
'data-pie_color_style' => $settings['ekit_piechart_color_style'],
'data-gradientcolor1' => $colors['ekit_piechart_gradientColor1'],
'data-gradientcolor2' => $colors['ekit_piechart_gradientColor2'],
] );
if($colors['ekit_piechart_line_color'] != '') {
$this->add_render_attribute( 'pieechartscreen', 'data-color', $colors['ekit_piechart_line_color'] );
}
if($colors['ekit_piechart_bar_color_bg'] != '') {
$this->add_render_attribute( 'pieechartscreen', 'data-barbg', $colors['ekit_piechart_bar_color_bg'] );
}
$piechart_size = $settings['ekit_piechart_size']['size'] != '' ? $settings['ekit_piechart_size']['size'] : 150;
$this->add_render_attribute( 'pieechartscreen', 'data-size', $piechart_size );
$line_size = $settings['ekit_piechart_border_size']['size'] != '' ? $settings['ekit_piechart_border_size']['size'] : 5;
$this->add_render_attribute( 'pieechartscreen', 'data-linewidth', $line_size );
if($settings['ekit_piechart_percentage'] != '') {
$this->add_render_attribute( 'pieechartscreen', 'data-percent', $settings['ekit_piechart_percentage'] );
}
if (!empty($settings['ekit_piechart_icon_image']['url'])) {
$this->add_render_attribute('image', 'src', $settings['ekit_piechart_icon_image']['url']);
$this->add_render_attribute('image', 'alt', Control_Media::get_image_alt($settings['ekit_piechart_icon_image']));
$this->add_render_attribute('image', 'title', Control_Media::get_image_title($settings['ekit_piechart_icon_image']));
$image_html = Group_Control_Image_Size::get_attachment_image_html($settings, 'ekit_piechart_icon_image_size_group', 'ekit_piechart_icon_image');
}
$flip_front_start = '';
$flip_front_end = '';
$flip_back_start = '';
$flip_back_end = '';
if($settings['ekit_piechart_style'] == 'withcontent' && $settings['ekit_piechart_content_type'] == 'flip-card'){
$flip_front_start .= '<div class="front"><div class="ekit-single-piechart_in">';
$flip_front_end .= '</div></div>';
$flip_back_start = '<div class="back">';
$flip_back_end = '</div>';
}
?>
<div <?php echo $this->get_render_attribute_string( 'pieechart' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped by elementor ?>>
<?php echo wp_kses($flip_front_start, \ElementsKit_Lite\Utils::get_kses_array()); ?>
<div <?php echo $this->get_render_attribute_string( 'pieechartscreen' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Already escaped by elementor ?>>
<?php if($settings['ekit_piechart_percentage'] != '' && $settings['ekit_piechart_content'] == 'ekit_piechart_percentage') { ?>
<span class="ekit-chart-content"><?php echo esc_html($settings['ekit_piechart_percentage']); ?>%</span>
<?php } ?>
<?php if($settings['ekit_piechart_content'] == 'icon' && $settings['ekit_piechart_icon_type'] == 'image') { ?>
<span class="ekit-chart-content">
<?php echo wp_kses($image_html, \ElementsKit_Lite\Utils::get_kses_array()); ?>
</span>
<?php } ?>
<?php if($settings['ekit_piechart_content'] == 'icon' && $settings['ekit_piechart_icon_type'] == 'icon') { ?>
<span class="ekit-chart-content">
<?php
// new icon
$migrated = isset( $settings['__fa4_migrated']['ekit_piechart_icons'] );
// Check if its a new widget without previously selected icon using the old Icon control
$is_new = empty( $settings['ekit_piechart_icon'] );
if ( $is_new || $migrated ) {
// new icon
Icons_Manager::render_icon( $settings['ekit_piechart_icons'], [ 'aria-hidden' => 'true' ] );
} else {
?>
<i class="<?php echo esc_attr($settings['ekit_piechart_icon']); ?>" aria-hidden="true"></i>
<?php
}
?>
</span>
<?php } ?>
</div>
<?php
echo wp_kses($flip_front_end.$flip_back_start, \ElementsKit_Lite\Utils::get_kses_array());
if($settings['ekit_piechart_style'] == 'withcontent' && $settings['ekit_piechart_title'] != '') { ?>
<h2 class="ekit-piechart-title"><?php echo esc_html($settings['ekit_piechart_title']); ?></h2>
<?php }
if($settings['ekit_piechart_style'] == 'withcontent' && $settings['ekit_piechart_item_description'] != '') { ?>
<p><?php echo wp_kses($settings['ekit_piechart_item_description'], \ElementsKit_Lite\Utils::get_kses_array()); ?></p>
<?php }
echo wp_kses($flip_back_end, \ElementsKit_Lite\Utils::get_kses_array());
?>
</div>
<?php
}
protected function get_globals_colors($settings) {
$global_colors = [];
$kit_items = $this->get_kit_items();
$globals_vars = !empty($settings['__globals__']) ? array_filter($settings['__globals__']) : [];
if($globals_vars) {
foreach($globals_vars as $key => $globals_var) {
parse_str(wp_parse_url($globals_var, PHP_URL_QUERY), $queryParams);
if (isset($queryParams['id']) && isset($kit_items[$queryParams['id']]['value'])) {
$global_colors[$key] = $kit_items[$queryParams['id']]['value'];
}
}
}
$color_controls = [
'ekit_piechart_line_color',
'ekit_piechart_bar_color_bg',
'ekit_piechart_gradientColor1',
'ekit_piechart_gradientColor2'
];
foreach($color_controls as $color_control) {
if(isset($global_colors[$color_control])) {
continue;
}
$global_colors[$color_control] = isset($settings[$color_control]) ? $settings[$color_control] : '';
}
return $global_colors;
}
protected function get_kit_items() {
$result = [];
$kit = Plugin::$instance->kits_manager->get_active_kit_for_frontend();
$system_items = $kit->get_settings_for_display( 'system_colors' );
$custom_items = $kit->get_settings_for_display( 'custom_colors' );
if ( ! $system_items ) {
$system_items = [];
}
if ( ! $custom_items ) {
$custom_items = [];
}
$items = array_merge( $system_items, $custom_items );
foreach ( $items as $index => $item ) {
$id = $item['_id'];
$result[ $id ] = [
'id' => $id,
'title' => $item['title'],
'value' => $item['color'],
];
}
return $result;
}
}
Zerion Mini Shell 1.0