Warning Dots in DataTable

[hughess]

Feature Description

Warning dots that appear in a row when a threshold is exceeded or criteria is met.

Nice to have would be on hover, showing the reason the specific item exceeded the threshold.

Challenging part of this will be how to structure the criteria. Even using a simple threshold is not straightforward because we would need to know if above or below triggers the warning.

I think the simplest way to implement this would be:

• Require user to include a boolean column in their query which evaluates the rule
• For cell-level:
  • Column accepts a warning prop, which is a reference to a column containing the boolean info
  • When true, a circle is added next to the data within the column
• For row-level:
  • DataTable also accepts a warning prop
  • When true, a circle is added on the far left or right of the row

If this logic works for warning dots, it can also be applied to other forms of conditional formatting - e.g., highlight a full row.

Cell-Level Warning Dot

Row-Level Warning Dot

[archiewood]

This is a really cool feature.

On naming

I think ActionDot, or NotificationDot is a bit closer to a general use case here

On syntax

Other possibilities

You could <slot/> in a warning dot, similar to how you do with columns

In a Row

<BarChart>
   <ActionDot id=action_bool/>   <!-- action_bool is a true/false column-->
   <Column id=date/>
   <Column id=category/>
</BarChart>

In a Cell

<BarChart>
   <Column id=date/>
   <Column id=category/>
   <Column id=value_usd>
      <ActionDot 
           color=red 
           threshold=200 
           warnOn=above
       />
   </Column>
</BarChart>

[hughess]

Nice, those are great ideas. I like the slot one - it feels better to have it defined separately, rather than being a "content type" as I originally had it. Makes it much easier for custom formatting too

[Grrrolf]

This is great for SLA reports.

Instead of only dots, I would like the background of the cell is coloured either green or red in case of the value being above the threshold or green when it is below the threshold. The threshold is stored in another column and can be different per row.
Some values are to be excluded (cell background colour would be the default colour) because they are not part of the SLA, but the customer is informed about the performance.

[hughess]

You can actually do this today using the scaleColumn prop in DataTable: https://docs.evidence.dev/components/data-table/#create-scale-from-another-column