Skip to content
The component is a great helper to visualise stats like Profits, Costs, Summary, etc...
How to design it in Power Apps
Preview
What does it consist of?
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:
How to design it in Figma
Preview
What does it consist of?
Procedure
Step 1 - create texts
Add a new Text (T command) object , call it "automation_title" with these properties:
Add a new Text (T command) object , call it "automation_value" with these properties:
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:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.