mirror of https://github.com/ToolJet/ToolJet synced 2026-04-22 14:07:26 +00:00

* docs: jira

* docs: formatting + Client Credentials grant type

* docs: connection string pgsql

* docs: parameterized queries mysql

* docs: parameterized queries in PostgreSQL

* docs: update mysql example

* docs: TJDB sql editor

* docs: add metadata to REST API

* docs: add, update  postgresql media

* docs: add metadata to graphql

* docs: update parameterized queries

* docs: add parameterized queries for mssql

* docs: add SSL Cert to mysql

* docs: TJDB SQL restricted commands

* docs: update JIRA token location

* docs: update delete issue example

* docs: update find user by query example

* docs: remove session id from get assignable users

* docs: use correct image for get issues for board

* docs: update create issue example

* docs: update delete issue media

* docs: update assignable users media

* docs: update examples

* docs: update key desc

* docs: v2.68.0-Beta

2024-09-13 19:23:19 +05:30

3.4 KiB

Raw Blame History

id	title
circular-progress-bar	Circular Progressbar

Circular Progressbar

The Circular Progressbar component can be used to show progress in a progress circle.

Properties

:::info Any property having Fx button next to its field can be programmatically configured. :::

<div style={{ width:"100px"}}> Properties	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Text	Sets a text inside the progress circle.	It expects a `String`, you can also use js to dynamically update the text as the progress changes.
Progress	Sets the progress of the widget.	Progress should be an integer between 0 and 100.

Component Specific Actions (CSA)

There are currently no CSA (Component-Specific Actions) implemented to regulate or control the component.

Exposed Variables

There are currently no exposed variables for the component.

General

A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the component.

Under the General accordion, you can set the value in the string format. Now hovering over the widget will display the string as the tooltip.

Layout

<div style={{ width:"100px"}}> Layout	<div style={{ width:"100px"}}> Description
Show on desktop	Toggle on or off to display the widget in desktop view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`.
Show on mobile	Toggle on or off to display the widget in mobile view. You can programmatically determine the value by clicking on Fx to set the value `{{true}}` or `{{false}}`.

Styles

<div style={{ width:"100px"}}> Property	<div style={{ width:"100px"}}> Description	<div style={{ width:"135px"}}> Expected Value
Color	Defines stroke color.	`HEX color code` or choose color from color-picker.
Text color	Defines color of the text inside circular progress bar.	`HEX color code` or choose color from color-picker
Text size	Defines the size of the text	Value must between 0-100
Stroke width	Defines the width of stroke	Value must between 0-100
Counter clockwise	Whether to rotate progress bar in counterclockwise direction.	Accepts `{{true}}` and `{{false}}`, Default value is `false`
Circle ratio	Defines ratio of the full circle diameter the progressbar should use.	Accepts numerical value and the default is `1`
Visibility	Toggle on or off to control the visibility of the widget.	Programmatically change its value by clicking on the `Fx` button next to it. If `{{false}}` the widget will not be visible after the app is deployed. By default, it's set to `{{true}}`

:::info Circular progress bar widget uses react-circular-progress package. Check the repo for further more details about properties and styles. :::

3.4 KiB Raw Blame History