Rangemap cell formatting for multiple tables

[aarontimko]

I am trying to make a simple NOC dashboard which has value-based cell formatting for multiples tables.
(Before going further... I put 'rangemap' in the title, but I don't think that's going to be the answer)

Each table will have the same search, but different timeframes (the uploaded picture may help).

I've used the single_decorations.css icons before with a rangemap, but now I'm looking to do cell formatting because the icons will take up too much space.
I looked into the other Dashboard Examples and have successfully tested with table_icons_inline.js and table_cell_highlighting.js.

The problem with both of those, however, is that they both reference the page element by name:
mvc.Components.get('table1') or mvc.Components.get('highlight')

For this dashboard, there are going to be three tables.

I tried copying the table1 code into identical code for get('table2') and get('table3') but couldn't get it to work.

Also, each table is probably going to need different rangemap thresholds because it's averaging over different time periods.
So then it looks like I'm perhaps making three different .js files, one for each table?

Any thoughts would be great.

Again, I don't think I can do this with a rangemap because of everything going on in this dashboard.
But... a rangemap would make it easier for defining thresholds (instead of them being defined in the .js).

[alacercogitatus]

rangemap is indeed the answer here. You can use the icon approach as well, just adjust it to fit the table. For Example, make the height of the severe 15px in the single_decorations.css file.

.severe {
     height: 15px;
}

If you want it to be highlighted, still use rangemap and use a custom table renderer. The documentation is here: http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAEVM . Add that into the dashboard.js (only the javascript in the block js section - don't add the django). For each table, do the mvc.Components.get("table1") call, but assign the custom renderer.

var table1 = mvc.Components.get("table1");
table1.addCellRenderer(myCellRenderer);  
table1.render();

[aarontimko]

Thank you, I hadn't found that particular code example.

[aarontimko · Accepted solution]

Well, I guess I wasn't ready to quit and found my problem when making multiple "table1" or "highlight" code entries for the different tables.

Main Answer: I didn't update the table_cell_highlighting.css with the new .css entries to correspond with "id=highlight1", id="highlight2", id="highlight3". Now it has extra entries like:

#highlight2 td.range-elevated {
    background-color: #ffc57a !important;
    font-weight: bold;

I also chose to simply make three copies of the .js file, so it looks like this in the XML:

<form script="table_cell_highlighting1.js,table_cell_highlighting2.js,table_cell_highlighting3.js" stylesheet="table_cell_highlighting.css">

And each .js file has the edits:

return _(['Avg Network Delta', 'Availability']).contains(cell.field);
if (cell.field === 'Avg Network Delta')
if (cell.field === 'Availability')
mvc.Components.get('highlight1') 

[and highlight2 for the next .js file, highlight3 for the .js file after that]

Screenshot of finished outcome.

If you have a different solution, let me know!

[cpt12tech]

Great answer! I have two rangemaps in a panel in two different tables and could not get the second one to populate! I went with row highlighting and still couldn't get it to populate the second table.

I was adding a second
mvc.Components.get('table2').getVisualization(function(tableView){...}

to the .js file but it wouldn't work.

However, after creating two .js files, one for each table it's finally working! Thank you.