Pie Chart

Wix Blocks

Pie Chart

Wix Blocks
This template is built with:
This template demonstrates how to integrate a custom element into Wix Blocks. The element script file displays a pie chart that you can easily replace with your own element. It’s fully customizable and includes a custom settings panel pre-built with drag and drop elements from the Wix Design System. The panel connects the element’s attributes to the widget properties. It also offers an in-app premium feature to encourage users to upgrade. Use this template to embed a custom element that expands our built-in capabilities.

How We Built This: An Overview

This app was built on several parts of the Wix Blocks editor. Here is how we did it.

Design tab

In this tab, we:

  1. Added a Custom Element from the Embed section in the Add + Panel.
  2. Set up the custom element source file and tag.
  3. Created six properties in the Widget API to correspond with the custom element's attributes.
  4. Connected the custom element attributes to the widget properties in the widget code.
  5. Added logic to handle a premium feature (learn more in the Pricing section).
See full widget code
import wixWindow from 'wix-window'; 
import wixApplication from 'wix-application';

let plan;
const defaultColor1 = '#384AD3'
const defaultColor2 = '#959EE5'

$w.onReady(async function () {
    // Fetch and set the current user's plan
    const instance = await wixApplication.getDecodedAppInstance();
    plan = instance.vendorProductId;
    setDataToChart();
});

// Triggered when the widget properties change 
$widget.onPropsChanged((oldProps, newProps) => { 
    setDataToChart();
});

const setDataToChart = () => {
    // On a live site, change chart colors only if user has premium
    const color1 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorOne : defaultColor1;
    const color2 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorTwo : defaultColor2;

    // Set the custom element attributes from the widget properties
    $w('#customElement1').setAttribute('data', JSON.stringify([
        { title: $widget.props.sliceTitleOne, value: $widget.props.sliceValueOne, color: color1},
        { title: $widget.props.sliceTitleTwo, value: $widget.props.sliceValueTwo, color: color2},
    ]));
};

Panels tab

In this tab, we:

  1. Created a Widget Settings custom panel with input elements for the slice values.

  2. Added code in the panel code, so that when a site builder changes a value in the panel, this value is passed to the widget properties and then to the custom element attributes. For example:

    $w('#slice1text').onChange(() => {
           wixWidget.setProps({ sliceTitleOne: $w('#slice1text').value })
       });
    }
    
  3. We added a section in the panel, with a note for site builders to upgrade their app. This is because choosing colors is a Premium feature of this app. If site builders upgrade, the color picker is enabled.

See full panel code
import wixWidget from 'wix-widget'; // Control your widget's properties, design presets, and more.


$w.onReady(async function () {
    //Fetches the current widget properties 
    const props = await wixWidget.getProps();

    //Loads the panel element with the current widget properties values
    $w('#slice1text').value = props.sliceTitleOne;
    $w('#slice2text').value = props.sliceTitleTwo;
    $w('#slice1value').value = props.sliceValueOne.toString();
    $w('#slice2value').value = props.sliceValueTwo.toString();
    $w('#slice1color').value = props.sliceColorOne;
    $w('#slice2color').value = props.sliceColorTwo;

   //Handles value changes in the panel elements
   $w('#slice1text').onChange(() => {
       wixWidget.setProps({ sliceTitleOne: $w('#slice1text').value })
   });
   $w('#slice1value').onChange(() => {
       wixWidget.setProps({ sliceValueOne: Number.parseInt($w('#slice1value').value) })
   });
   $w('#slice1color').onChange(() => {
       wixWidget.setProps({ sliceColorOne: $w('#slice1color').value })
   });
   $w('#slice2text').onChange(() => {
       wixWidget.setProps({ sliceTitleTwo: $w('#slice2text').value })
   });
   $w('#slice2value').onChange(() => {
       wixWidget.setProps({ sliceValueTwo: Number.parseInt($w('#slice2value').value) })
   });
   $w('#slice2color').onChange(() => {
       wixWidget.setProps({ sliceColorTwo: $w('#slice2color').value })
   });
});

Configuration tab

In this tab, we:

  1. Defined the custom element as non-selectable in the Behavior section. This is because, unlike other widget elements, custom elements cannot be customized directly from the site editor. So, we wanted to prevent site builders from clicking on it.

  2. Removed the Change Design main action. This is because the Change Design button and the paintbrush button have the same functionality.

  3. Connected the Settings main action button in the widget action bar to our custom panel.

    See how it looks

Installation Settings

In the app installation settings we:

  1. Defined the widget as Added on a New Page.
  2. Added preset images. Make sure to change these images to your own if you change the appearance of the app.

Pricing

In this section, we:

  1. Defined a premium plan for the app in the Wix Developers Center.
  2. Changed the widget code to handle the pricing logic. Site builders can change the colors in the site editor at any time, but the changes will be visible on the site only if the app has a premium plan. For example:
    const color1 = (wixWindow.viewMode != "Site" || (plan == 'premium')) ? $widget.props.sliceColorOne : defaultColor1;
    

Related templates

Wix Blocks

Blank Canvas

Build an app from scratch on Wix Blocks.