Custom heatmap logic in advanced XML

[sideview]

I have a customer who has a table with some categorical fields and then three numeric fields.

They want certain columns to be certain colors always, and then they need custom heatmap logic for the numeric fields. For every row, if the second number is larger than the first they want the second cell to have a red background. Likewise if the third number is larger than the second, they want the third cell top have a red background.

The customer has tried attacking the problem by writing some custom javascript to customize the module behavior but they're a little lost and not achieving any success there.

[sideview]

I believe the best way to achieve this use case, at least if you want to avoid writing any custom Javascript, is to use the Sideview Utils app, the Table module therein, and the Table module's "custom rendering" features.

There is a lot of documentation including walkthrough examples in the Sideview Utils app, about the Table modules advanced features specifically, but this is an interesting example so let's walk through it for this use case specifically.

First, lets construct a search to represent the customer's search.

index=_internal group=per_sourcetype_thruput 
| bin date_minute span=20 
| chart sum(kb) over series by date_minute 
| eval name="Fred Winterbottom"
| rename "40-60" as A "20-40" as B "0-20" as C
| fields name series A B C

OK. Now let's pretend we've all read through the "Table Module - Custom Rendering" docs and examples inside the Sideview Utils app. Here's the XML that will render the exact rendering your customer is asking for. Try it yourself in your own view. Since this search uses index=_internal data it'll work for you.

<module name="Search">
  <param name="search">
    index=_internal group=per_sourcetype_thruput 
  | bin date_minute span=20 
  | chart sum(kb) over series by date_minute 
  | eval name="Fred Winterbottom"
  | rename "40-60" as A "20-40" as B "0-20" as C
  | fields name series A B C      
  </param>

  <module name="PostProcess">
    <param name="search">
    | eval bClass =if(B>A,"bElevated",null())
    | eval cClass =if(C>B,"cElevated",null())
    | eval rowClass=mvjoin(mvappend(bClass,cClass), " ")
    </param>

    <module name="Pager">
      <module name="Table">
        <param name="cssClass">customColorTable</param>
        <param name="columns.series.class">seriesColumn</param>
        <param name="columns.A.class">aColumn</param>
        <param name="columns.B.class">bColumn</param>
        <param name="columns.C.class">cColumn</param>
        <param name="rowClass">$row.fields.rowClass$</param>
        <param name="hiddenFields">bClass cClass rowClass</param>
      </module>
    </module>
  </module>
</module>

And here's the custom CSS you will need. You can either have it in an HTML module in the view itself like this, or better yet, put it into application.css or into a custom css file.

<module name="HTML" layoutPanel="viewHeader">
  <param name="html"><![CDATA[
    <style type="text/css">
    .customColorTable td {
      background-color:#cfc
    }
    .customColorTable td.seriesColumn {
      background-color:#3cc;
    }
    .customColorTable tr.bElevated td.bColumn,
    .customColorTable tr.cElevated td.cColumn{
      background-color:#f00;
    }
    </style>
  ]]></param>
</module>

How this works, is
1) We use some search language in a postprocess search to create a new field called "rowClass" that will have a value of either "", "bElevated", "cElevated" or "bElevated cElevated".
2) Then we use the Table module's "rowClass" param to use this field value as the given row's CSS class.
3) Then we use the Table module's "columns.*.class" param to put CSS classes one every numeric cell ie "aColumn", "bColumn", "cColumn".

4) We use the cssClass param of the Table module to put an outer class of "customColorTable" out on the Table element. This is just to be extra careful.
5) Finally in the CSS definition we add it all together --

This css here:

.customColorTable tr.bElevated td.bColumn{
  background-color:#f00;
}

says "if you have a bColumn cell contained in a bElevated row, that is contained in a customColorTable table, then give that tablecell a red background color."

Here's an image of the rendered table - http://i.imgur.com/MqVeWbY.png

[somesoni2]

just wow...