Explore

Progress rings (and pies) for Coda!

A demo doc for the Progress Rings Pack

Pablo Felip

💡 Context

As we all know, Coda already provides very nice native progress bars such as this one:

000

⁠

...but I thought that, in some situations, a more compact way of displaying the progress or status of a process could come in handy.

I’ve just started my journey into Coda, so after a glimpse at the way it handles images, particularly

scalable vector graphics⁠

(SVG), I felt compelled to build

this little pack⁠

that adds a formula and a column format to generate progress rings and pies, such as these:

⁠

ProgressRing(0.75)

⁠

ProgressRing(0.75,drawPie: true)

💍 The ProgressRing() formula

The ProgressRing() formula provides 13 parameters to allow for some degree of customization, even though only the first one is actually mandatory. Let’s have a look at them now:

Parameter

Description

Type

Defaults to

value

Value to represent

Number

Mandatory

max

Maximum value

Number

fillColorLight

Filled color in light mode

SVG named color or #RRGGBB

purple

emptyColorLight

Empty color in light mode

SVG named color or #RRGGBB

lightgray

fillColorDark

Filled color in dark mode

SVG named color or #RRGGBB

purple

empyColorDark

Empty color in dark mode

SVG named color or #RRGGBB

dimgray

radius

Radius of ring/pie

Pixels

100

thickness

Stroke width used to draw the ring arcs.

Pixels

drawPie

Draws a pie instead of a ring

True or False

False

steps

Number of circular sections of the ring/pie

Number

stepRounding

Type of rounding applied to value to determine the ring/pie section to draw as filled.

down → Rounds down

near → Nearest rounding

up → Rounds up

round

avoidFalseComplete

Will never draw a full ring/pie if value not equal to max, regardless stepRounding mode.

True or False

True

avoidFalseEmpty

Will always draw the first outer ring/pie section filled if value greater than 0, regardless stepRounding mode.

True or False

False

There are no rows in this table

⁠

📝 Autocomple for selected 100 colors out of the

147 SVG named colors⁠

palette is provided.

🌓 Light/Dark mode appearance will automatically toggle the colors used in progress rings.

⚙️ Some examples

Straightforward use

In its simple form, you only need to provide a value between 0 and 1 to create a progress ring with all the default values for the rest of the parameters.

ProgressRing(0.60)

⁠

Optional parameters

There are a lot of parameters that you may not want to use, in that case just set their values by name (yes, Coda rocks!):

ProgressRing(0.60, thickness: 50, fillColorLight: "darkblue")

⁠

Table and canvas formulas

To use progress rings inside a table, simply insert a new column, type your progress ring formula and adjust the column width for the desired visual result (the ring will grow and shrink accordingly).

💡 Add a canvas progress ring to summarize the information inside the table!

⁠

Yearly progress

Campaigns and actions

Campaigns and actions

Done

Project

Scheduled

Completed

Ring

Pie

Campaign 1

Campaign 2

Campaign 3

There are no rows in this table

⁠

Ring column:

ProgressRing(Completed, Scheduled)

Pie column:

ProgressRing(Completed, Scheduled, drawPie: true, EmptyColorLight: "blanchedalmond", fillColorLight: "darkblue")

Yearly progress canvas formula:

ProgressRing([Campaigns and actions].Filter(Done.Count(), [Campaigns and tasks].Count())

Column format

This pack also provides a column format that will display a progress ring with default values for all the optional parameters.

Project status

Project status

Project

Status

Copy of Status

Project 1

15%

Project 2

30%

Project 3

99%

There are no rows in this table

⁠

Status indicators

Set steps to a value of 1 to turn your progress ring into a binary status indicator.

Workshop availability

Workshop availability

Project

Enrolled

Total seats

👥

Workshop 1

Workshop 2

Workshop 3

Workshop 4

There are no rows in this table

⁠

Status column formula:

ProgressRing(Enrolled, [Total seats], steps: 1, drawPie: true, fillColorLight: "red", emptyColorLight: "green", fillColorDark: "red", emptyColorDark: "green")

⚗️ Formula playground

You can experiment and familiarize yourself with the behaviour of all the parameters using this playground.

⁠

value

000

0.5

⁠

fillColorLight

purple

⁠

emptyColorLight

lightgray

⁠

radius

100

⁠

drawPie

⁠

avoidFalseComplete

yes

⁠

stepRounding

near

⁠

max

⁠

fillColorDark

purple

⁠

emptyColorDark

dimgray

⁠

thickness

⁠

steps

⁠

avoidFalseEmpty

yes

⁠

Back to default optional params

⁠

☝️ Next steps and comments

This little thing has been made just for the sake of going through the whole process of building and publishing a Pack and get some fun along that learning path, so honestly I don’t have that many great plans for it. But anyway, these are a couple of optional features that I might add at some point in the future:

Change the color of the filled part of the ring according to a set of breakpoint values to better depict progress.

Display the value, or maybe value / max percentage, as a text element next or even inside (provided there is enough room) progress rings.

You can get the source code of the latest release in this 🐙

GitHub repository⁠

Please, feel free to reach out to me for any Coda-related things →

coda.io/@pablo-felip⁠

⁠