search

kittoframework / kitto

Kitto is a framework for interactive dashboards written in Elixir
http://kitto.io/dashboards/sample
MIT License
956 stars 58 forks source link

Change Color of Widget based on Data #114

Closed alexcurtin closed 7 years ago

alexcurtin commented 7 years ago

How would I go about changing the color of 1 single widget depending on data sent to that widget, since they share css classes?

zorbash commented 7 years ago

@alexcurtin did you get an answer for this?

davejlong commented 7 years ago

Don't know how I closed this. Anyways, the class of a widget can be overriden from the JS widget. An example of this can be found in the Text widget. The value of status from the data source will be used as an additional class applied to the widget.

So passing data to the Text widget like {text: "Something awesome happened!", status: "success"} will set success as an additional class on the widget and in your CSS you can add something like:

.widget-text.success {
   background-color: green;
}