Multipart progress bar from table rows

#1

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:

13 Likes
Progress Bars & HSL Slider
#2

Dear @Paul_Danyliuk,

Another master piece of creativity :1st_place_medal:

#3

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

#4

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

#5

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)

2 Likes
#6

This is amazing @Paul_Danyliuk!

Having fun with it: image

6 Likes
#7

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!

#8

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.

3 Likes
Graphic representation of planned vs. actual start and end dates
#9

Taking this further:

3 Likes
#10

@Paul_Danyliuk

“further” :rofl::joy:

#11

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:

2 Likes
#12

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 ↓

11 Likes
#13

1503535150_giphy

2 Likes
#14

Lovely. :slight_smile:

/edit - post too short.

1 Like
#15

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

1 Like
#16

I’m surprised by how fast this one renders!

1 Like
#17

Masterpiece :clap:

1 Like