Skip to content
Gallery
Power Apps UI Cooker
Introduction
About Author
Release Notes
Custom Functions
Custom Components
Share
Explore
Custom Components

icon picker
Pie Chart

MyCondy
Last edited 101 days ago by MyCondy
The component is a great helper to visualise stats like Profits, Costs, Summary, etc...

How to design it in Power Apps

Preview

⁠
Screenshot 2024-08-15 at 9.38.39.png
⁠
⁠

What does it consist of?

1x Group
2x Label
1x Image

Procedure

Step 1 - create a stat value with title
Add a new Label object, call it "automation_value" with this "text" property:
RoundUp((CountRows(Filter(<TABLE>,<TABLE COLUMN> = year_value.Text,<TABLE COLUMN> = "Automation"))/ CountRows(Filter(<TABLE>,<TABLE COLUMN> = year_value.Text)))*100,0)
Text inside "<>" character should be replaced by your real data.

Add a new Label object, call it "automation_label" with this "text" property:
"Automation[%]"
Step 2 - create a SVG image
Add a new Image object, call it "automation_image" with this "Image" property:
"data:image/svg+xml;utf8, "&EncodeUrl(" <svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' style='transform:rotate(-90deg)'>
<circle r='90' cx='100' cy='100' fill='transparent' stroke='#e0e0e0' stroke-width='16px' stroke-dasharray='565px' stroke-dashoffset='0'></circle>
<circle r='90' cx='100' cy='100' stroke='#718AF4' stroke-width='16px' stroke-linecap='round' stroke-dashoffset='"&560 - (automation_value.Text *5)&"px' fill='transparent' stroke-dasharray='560px'></circle>
</svg>")
Step 3 - group all objects
Now, we select all objects and group them via shortcut - COMMAND + G (MAC) , CONTROL + G (WIN).
This is an output:
⁠
Screenshot 2024-08-15 at 9.38.29.png
⁠
⁠

How to design it in Figma

Preview

⁠
Screenshot 2024-08-15 at 10.39.28.png
⁠
⁠

What does it consist of?

1x Group
1x Frame
2x Vector
2x Text

Procedure

Step 1 - create texts
Add a new Text (T command) object , call it "automation_title" with these properties:
⁠
Screenshot 2024-08-15 at 10.45.35.png
⁠
⁠
Add a new Text (T command) object , call it "automation_value" with these properties:
⁠
Screenshot 2024-08-15 at 10.46.06.png
⁠
⁠
Step 2 - create SVG donut
Import a new SVG file, call it "svg_automation_image" with this XML code:
<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M53 100.7C79.344 100.7 100.7 79.344 100.7 53.0001C100.7 26.6561 79.344 5.30005 53 5.30005C26.656 5.30005 5.3 26.6561 5.3 53.0001C5.3 79.344 26.656 100.7 53 100.7Z" stroke="#E0E0E0" stroke-width="8.48"/>
<path d="M5.3 53C5.3 26.6561 26.656 5.30005 53 5.30005" stroke="#718AF4" stroke-width="8.48" stroke-miterlimit="1" stroke-linecap="round"/>
</svg>
This is an output:
⁠
Screenshot 2024-08-15 at 10.39.50.png
⁠
⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

gr_pie_chart = Group
svg_dash_chart = Image
lbl_automation_value, lbl_automation_title = Label

YAML Output

⁠
Screenshot 2024-08-15 at 10.37.39.png
⁠
⁠

Used Colours

SVG Image Background - #E0E0E0
SVG Image Fill - #718AF4
Automation Title - #232323
Automation Value - #735667
⁠
← Picture Uploader
⁠
⁠
⁠
Popup Menu →
⁠
⁠

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.