Dashboard Table Visualization rendering of numeric fields

pclewis — Sun, 28 Mar 2021 20:34:59 GMT

When I see this issue it is in a dashboard table visualization not in the search result. The number is shown correctly as a number (right justified) in search statistics view. Strings are shown left justified by default and numbers are right.
In my case the issue concerns representing a number as currency in a dashboard.

The generating search ends with something like :

| eval Amount=round(Amount,2) | fieldformat Amount=printf("%.2f",Amount)

So there is a clear indication that Amount can only be Null or a number. The eval is not necessary if you want to keep the original value completely in tact - I left it there to demonstrate as I was trying various things to force the table to display my value how I wished.

I use fieldformat since I wish to be able to drilldown on the actual value of Amount and not the string representation. Fieldformat works as intended however as OP noted, table visualization doesn't maintain the intended field's right justification.

To further enhance my dashboard relating to the "Amount" field I have the following.

<format type="number" field="Amount"> <option name="unit">$</option> <option name="unitPosition">before</option> </format> <format type="color" field="Amount"> <colorPalette type="list">[#F1813F,#B6C75A]</colorPalette> <scale type="threshold">9.999</scale> </format>

My field should be right justified since I have "told" the table visualization it's a number in the specific way that is documented and the base search has resulted in the field being denoted with 'numeric' td class anyhow.

By this reasoning it's a bug because "table visualization does not respect numeric field right justification CSS directive".

My hack solution for dashboard:
Of interest to me is that when I examine the html of the generated dashboard, the field in question is denoted with class=td.numeric which includes text-align:right however it's then overridden by the table class from dahsboard itself.

.table tr, .table td, .table th { font-family: Roboto,Droid,Helvetica Neue,Helvetica,Arial,sans-serif; font-size: 12px; line-height: 16px; text-align: left; padding: 4px 8px; } td.numeric, th.numeric { text-align: right; }

So this leads to a simple hack which solves the visualization issue for me. Perhaps it will solve for others.

<row> <html depends="$nothing$"> <style type="text/css"> td.numeric, th.numeric { text-align: right !important; } </style> </html> </row>

I assume the CSS defined within the dashboard xml has precedence over the generated CSS which is very handy indeed.

This will result in any numeric field in a table visualization in a dashboard maintaining the right justification that the developer of the table view in statistics view intended. Probably when that enhancement was made, no thought was given to the dashboard table visualization issue.

Full dashboard example with hack

<dashboard> <label>test3</label> <row> <panel> <table> <search> <query> | makeresults | eval Amount=1234.5678 | fieldformat Amount1=printf("%.2f",Amount) | fieldformat Amount2=printf("$%.2f",Amount) | fieldformat Amount3=printf("%12.2f",Amount) | fieldformat Amount4=printf("$%12.2f",Amount) | eval x1=Amount </query> <earliest>1616708511</earliest> <latest>1616709413.085</latest> <sampleRatio>1</sampleRatio> </search> <option name="count">100</option> <option name="dataOverlayMode">none</option> <option name="drilldown">none</option> <option name="percentagesRow">false</option> <option name="rowNumbers">false</option> <option name="totalsRow">false</option> <option name="wrap">true</option> <format type="number" field="Amount1"> <option name="unit">$</option> <option name="unitPosition">before</option> </format> <format type="color" field="Amount1"> <colorPalette type="list">[#F1813F,#B6C75A]</colorPalette> <scale type="threshold">9.999</scale> </format> <format type="number" field="Amount2"> <option name="unit">$</option> <option name="unitPosition">before</option> </format> <format type="color" field="Amount2"> <colorPalette type="list">[#F1813F,#B6C75A]</colorPalette> <scale type="threshold">9.999</scale> </format> <format type="number" field="Amount3"> <option name="unit">$</option> <option name="unitPosition">before</option> </format> <format type="color" field="Amount3"> <colorPalette type="list">[#F1813F,#B6C75A]</colorPalette> <scale type="threshold">9.999</scale> </format> <format type="number" field="Amount4"> <option name="unit">$</option> <option name="unitPosition">before</option> </format> <format type="color" field="Amount4"> <colorPalette type="list">[#F1813F,#B6C75A]</colorPalette> <scale type="threshold">9.999</scale> </format> </table> </panel> </row> <row> <html depends="$nothing$"> <style type="text/css"> td.numeric, th.numeric { text-align: right !important; } </style> </html> </row> </dashboard>

Note that Amount3 is rendered as string although it's being colored correctly as a number so it's a weird one. The table visualization is troubled by printf's attempt to left pad the value and ignores the padding however still thinks of the value as numeric in terms of the type="color" format block.

Finally my question:
Is there something I've missed or a better way to handle this simple requirement? I want the dashboard table visualization to render numbers the same way as the search statistic view.

topic Dashboard Table Visualization rendering of numeric fields in Dashboards & Visualizations

Dashboard Table Visualization rendering of numeric fields