Gantt Chart like View/Dashboard

I have a cube view representing a kind of gantt chart. If there is movement in a month the value is 1, otherwise the value of the cell is 0.

What is the best way to generate a UX output (view or dashboard) where the cells with a value have a green background with a green font. All other cells should format white with with font.

Thanks

Currently you can set conditional formatting by row and column by referencing specific row or column names. Assuming the rows are variable and the columns fixed it is currently “inconvenient but possible” to apply conditional formatting to the whole grid by separately specifying the conditional format for each column.

Currently we already have conditional formatting enhancements logged for

  • applying conditional format to whole grid
  • applying conditional format based on an attribute of column or row element rather than specified name

Here’s the conditional formatting example from the planning template example in the UX demo application.

"table": {
    "tableClasses": {
      "January": [
        {
          "condition": ">=",
          "value": "0",
          "className": "qty"
        }
      ],
      "February": [
        {
          "condition": ">=",
          "value": "0",
          "className": "value"
        }
      ],
      "Total Year": [
        {
          "condition": ">=",
          "value": "20000",
          "className": "kpi-green"
        },
        {
          "condition": "<",
          "value": "20000",
          "condition2": ">=",
          "value2": "10000",
          "className": "kpi-orange"
        },
        {
          "condition": "<",
          "value": "10000",
          "className": "kpi-red"
        }
      ]
    }

Hi @cw-ch

How can I specify a column to be a specific specific colour? I would like a total column in a dashboard grid to be a specific colour e.g. blue.

Thanks.

You mean like in the demo application on the landing page “executive dashboard” in the top left widget how “world” is shaded?

For this you just use the conditional formatting but without conditions.

 "table": {
"rowFormat": {
  "World": [
    {
      "className": "qty"
    }
  ]
}}

@cw-ch,

So "qty" will give me blue. What’s the code for grey? I’ve used "bg-black-100" based on another conversation I had with @aalex. Is there a better way to specify a grey?

Hi @R.B
The samples from the demo application are really just examples. I can’t give you a good explanation why “qty” means is defined as “light blue background” because I don’t think there is one. In the next release we are aiming to include a table in the help showing all the pre-defined table classes and what they look like.
In the meantime @tganz could help you with providing a list of the table classes and how to define a new class if the format you want isn’t already there.

hi @R.B

https://www.patternfly.org/styles/color-palette/
here you can find the reference of all the ‘bg-color-#’ classes which are defined.

in addition , in the ‘custom-style.scss’ , which is located under the custom folder,
you will find all the other defined classes.

on the same location you can add any other class you need.