Multipart progress bar from table rows

One thing I particularly love about Coda is that it lets me quickly build simple productivity tools to help me with my mess of a life. Just now I was thinking of building a “where did my time go” tracker. I wondered if it was possible to visualize my day as a multipart progress bar with work, break, and procrastination periods as differently colored sections (interleaved, not aggregated).

Yep, it’s possible! You can use .FormulaMap(Rectangle(…)).Concatenate() on a list of rows to get a nice continuous progress bar, and set each Rectangle’s width and color based on CurrentValue.

Demo (play around with the table):

I’ll make and share the complete time tracker a bit later :slight_smile:


Dear @Paul_Danyliuk,

Another master piece of creativity :1st_place_medal:

Thanks @Jean_Pierre_Traets, you’re too kind :sweat_smile:

I love this! I especially like how concatenate merges the gap that would otherwise occur when putting two rectangles next to each other.

I prefer the gap though, looks cleaner and also allows you to be more creative with colors. I think this can be helped by adding spaces or small rectangles between the real ones (with a nested Concatenate)


This is amazing @Paul_Danyliuk!

Having fun with it: image


Hooray! you are brilliant! Many thanks. I’ve been looking for this! I’m an author and I can use this to graphically see the length (word counts) of the chapters of my book!

Loving this, too. :slight_smile: The bar shows how many hours each engineer is allocated to projects each week for the next quarter. Red is over-allocated (>40h per week), green is comfortably allocated and amber means has availability.

It gives you an at-a-glance indication of who’s busy and who isn’t.


Taking this further:



“further” :rofl::joy:

Well, the mechanism behind the LCD panel is pretty much the same — table-backed multi-part progress bar with line breaks and gap rectangles between display rectangles :slight_smile:


I’ve been playing around with this. It’s no Snake, but here’s where this method has taken me:

A Gradient Generator for adding a little pizzazz to your docs ↓




Lovely. :slight_smile:

/edit - post too short.

1 Like

Wow! This is cool! Reaching new heights and color!

1 Like

I’m surprised by how fast this one renders!

1 Like

Masterpiece :clap:

1 Like