influxdata / influxdata/giraffe

Visualization: Visually Rich Rows

Open
#198 0 comments 0 reactions 0 assignees View on GitHub
kind/feature request team/ui
Dominant language
TypeScript
Stars
189
Forks
33
Avg merge
3d 15h
Merged PRs (30d)
4

Description

Here's a beautiful dashboard from https://www.covidexitstrategy.org/:

![image](https://user-images.githubusercontent.com/20701/84715738-3ae62200-af26-11ea-9c9f-e71a524a9a59.png)

This is a nice example what I call "Visually Rich Rows" or just "rich rows" for short. It'd be great if we could use these ideas to augment our row visualization element.

Breaking this down column-by-column, left-to-right, here are the visual elements that would be good to see:

**#1: Conditionally change text and background color based on some other column.**

![image](https://user-images.githubusercontent.com/20701/84715930-c2cc2c00-af26-11ea-8c1d-207f3b869305.png)

Note that California is red background with white text. Colorado is orange background with black text. Both of these are based on some other column.

**#2: Conditionally append different suffixes**, based on a cell's value.

![image](https://user-images.githubusercontent.com/20701/84716039-f909ab80-af26-11ea-9cdf-7097e5177304.png)

Here we have "9% Increasing" and "-47% Decreasing".

**#3: Alternate row colors** subtly to help the user's eye stay in a single row as they scan across page.

![image](https://user-images.githubusercontent.com/20701/84716166-3cfcb080-af27-11ea-9e4d-284bfeb2bf7e.png)

**#4: Mini line charts for each row**, to see trends.

![image](https://user-images.githubusercontent.com/20701/84716243-6c132200-af27-11ea-879f-7ef21a467e75.png)

**#5: Mini bar gauges**, to see values.

![image](https://user-images.githubusercontent.com/20701/84716290-8c42e100-af27-11ea-8333-ae2bd2e05fe1.png)

**#6: Conditionally color mini bar gauges**, based on cell value.

![image](https://user-images.githubusercontent.com/20701/84716318-9e248400-af27-11ea-9345-5f2d7d655a9f.png)

Here we see that 29 colors the bar gauge green, 72 colors it orange, and 146 colors it red.

Contributor guide

Open the contributing guide

Research direction

No source file or test is named. Start by locating the existing row visualization element, then compare its capabilities with the six requested rich-row examples: conditional colors and suffixes, alternating row colors, mini line charts, and mini bar gauges with conditional colors. Done would mean the agreed subset of these visual elements is implemented.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.