I'm using Splunk version 7.0.1 and I'm trying to highlight my table cell colors based off of two other fields. Splunk has a sample to do this in Javascript that uses hardcoded values, but I need the values based off of a different field. I have the script working, but it randomly highlights some cells in the wrong color. I can't seem to figure out why.
The "Average Response Time" should be:
Red if the value is greater than or equal to the Threshold
Amber if the value is greater than or equal to the Objective but less than the Threshold
Green if the value is less than the Objective
My Table:
Transaction Count "Average Response Time" Objective Threshold
A/P - Close Module - FM1 1 7.52 2.00 6.00 **<-Colored Red and correctly**
...
A/P - Diagnosis- Run Search - FM1 2 4.01 100.00 100.00 **<- Colored Amber incorrectly**
Here is the dashboard source of the table:
<table id="response_time_highlight">
<title>NOTE: An Objective and/or Threshold of 100 indicates that an Objective and/or Threshold have not been identified for this particular transaction type.</title>
<search>
<query>index=arm sourcetype="arm:transaction" region="$region$" sitename="$sitename$" transaction_status IN ( $transaction_status$ ) username IN ( $username$ ) workstation_name IN ( $workstation_name$ ) transaction_name IN ( $transaction_name$ )
| stats count avg(response_time) AS response_time BY transaction_name objective threshold
| eval threshold=round(threshold,2)
| eval objective=round(objective,2)
| eval response_time=round(response_time,2)
| fields transaction_name count response_time objective threshold
| rename response_time AS "Average Response Time" transaction_name AS "Transaction Type" objective as Objective threshold as Threshold count as "Transaction Count"
| sort +transaction_name</query>
<earliest>$search_time.earliest$</earliest>
<latest>$search_time.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">true</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
Here is the Javascript code (modified version of the dashboard examples one):
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
var objective_value;
var threshold_value;
// Row Coloring Example with custom, client-side range interpretation
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
// Enable this custom cell renderer for response_time field
return _(['Average Response Time', 'Objective', 'Threshold']).contains(cell.field);
},
render: function ($td, cell) {
// Add a class to the cell based on the returned value
var value = parseFloat(cell.value);
if (cell.field === 'Objective') {
objective_value = value;
}
if (cell.field === 'Threshold') {
threshold_value = value;
}
// Apply interpretation for number of historical searches
if (cell.field === 'Average Response Time') {
if (value >= threshold_value) {
$td.addClass('range-cell').addClass('range-severe');
}
else if (value >= objective_value) {
$td.addClass('range-cell').addClass('range-elevated');
}
else if (value < objective_value) {
$td.addClass('range-cell').addClass('range-low');
}
}
// Update the cell content
$td.text(value.toFixed(2)).addClass('numeric');
}
});
mvc.Components.get('response_time_highlight').getVisualization(function (tableView) {
// Add custom cell renderer, the table will re-render automatically.
tableView.addCellRenderer(new CustomRangeRenderer());
});
});
EDIT: Added a console.log to the javascript showing the output of each field. Noticed that the first row showing as undefined, and pushing the correct numbers down to the next row. Here is the output:
0 undefined undefined
8.64 100 100
7.52 2 6
0 2 6
7.52 2 6
1.11 10 25
2.28 2 6
2.92 2 6
Related
In my Angular App, I have a requirement to display total number of rows on current page in pagination section. But currently Devextreme grid row count returns total row count irrespective of page.
Below is my code :-
<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
[visible]="true"
[allowedPageSizes]="allowedPageSizes"
[displayMode]="displayMode"
[showPageSizeSelector]="showPageSizeSelector"
[showInfo]="true"
infoText="Displaying {0} - {2} of {1} "
[showNavigationButtons]="showNavButtons"
>
</dxo-pager>
Below screenshot :-
Now i have only 5 rows in the grid but it shows 11 which is the total row count which i have received from database. Please advise.
If i understand correctly, you want to show 1-5 on the first page, 6-10 on the second page and so on. You can achieve that by binding a function to the [infoText] property and customize the text output. This is not found in the official documentation but it works.
HTML:
<dxo-paging [pageSize]="5"> </dxo-paging>
<dxo-pager
[visible]="true"
[allowedPageSizes]="allowedPageSizes"
[displayMode]="displayMode"
[showPageSizeSelector]="showPageSizeSelector"
[showInfo]="true"
[infoText]="infoText"
[showNavigationButtons]="showNavButtons">
</dxo-pager>
JS/TS:
infoText(currentPageNumber, totalPageCount, totalRowCount) {
const myPageSize = 5; // use global variable instead and bind it to dxo-paging
const from = +currentPageNumber * myPageSize - (myPageSize - 1);
const to = +currentPageNumber * myPageSize;
return `Displaying ${from}-${to}`;
}
I am get stucked ,I installed Quasar version 2.0.0 but it does not has a property to get the filtered or sorted rows.In previous versions of q-table it had a computedRows property but in the latest version it didn't
I am trying to add new features to the q-table like highlight focused row and enable keyboard features to allow in-line editing etc... so I need to know the row data(model) and its corresponding html row.
Quasar ver:2.0.0
Vuejs 3
Typescript
I found a temporary solution:
here is my q-table :
<template v-slot:body="props">
<q-tr
class="row-data"
:props="props"
:rowID="props.row.id"
>
<q-td
#click="onTdClick($event, props.row,
props.rowIndex, index)"
v-for="(col, index) in props.cols"
:key="col.name"
:props="props"
:column="col.name"
>
<slot :name="'column-' + col.name" :props="props" :row="props.row">
{{ col.value }}
</slot>
<slot
:name="'column-edit-' + col.name"
:props="props"
:row="props.row"
>
</slot>
</q-td>
</q-tr>
</template>
//Then I get the filtered rows by getting the displayed tr elements(each tr element has rowID attribute) :
getHtmlRows(): HTMLTableRowElement[] {
let htmlTable = this.getHtmlTable();
let htmlRows: HTMLTableRowElement[] = Array.from(
htmlTable.querySelectorAll("tr.row-data")
);
return htmlRows;
},
//If I want to get the row data corresponding to html row (tr) I used :
getRowData(id: number): any {
let table = this.$refs.qtableRef as QTable;
let rowData = table.rows?.find((rw) => rw.id == id);
return rowData;
},
getRowDataByHtmlRow(htmlRow: HTMLTableRowElement): any {
let rowID = htmlRow.getAttribute("rowID");
return this.getRowData(Number(rowID));
},
There's an undocumented way of accessing the computedRows and computedRowsNumber properties that I only found after extensive Google searching...
Give your table a ref: <q-table ref="table" />
Access these properties via the ref:
this.$refs.table.computedRows
this.$refs.table.computedRowsNumber
This was added in v2.0.0-beta.9 (March 8, 2021)
Explanation
computedRows -- gives you the displayed rows on current page
Example: if there are 30 results in total, but only 10 are shown in the current page, this will only return those 10 rows -- want them all? see filteredSortedRows
filteredSortedRows -- gives you ALL the displayed rows across all pages
Example: if there are 50 rows in total, but 30 rows match the filtered text and show up, and 10 rows are shown per page, this will return ALL those filtered 30 rows. If there's no filtered text, then this will return all those original 50 rows
computedRowsNumber -- gives you the length for the total displayed rows across all pages
same as filteredSortedRows.length
When server-side data fetching is enabled the properties above may behave differently. I had to check the source code to discover that, but haven't tested this in practice.
Source | Where I found it
I'm building a recipient emailing form in which there could be more than 100 recipients at a time I can only show 9 recipients and I need to add (+10 or whatever remaining recipients are) after showing 9 recipients.
<div v-for="(item, index) in recipient" class="app-splitter two-cols">
<p>{{item.name}}</p>
<el-button
style="min-width:20px"
#click="handleDeleteRecipient(index)"
icon="el-icon-delete"
circle
></el-button>
</div>
as I mentioned in the comment. You can create computed properties like this example and loop just through that. Don't loop all 100 + recipient if not needed ... It might end up with 1000.
computed: {
top10() {
return this.recipient.slice(0, 10);
},
rest() {
return this.recipient.length - 10;
}
}
You can just includ a simple verification like:
<div v-for="(item, index) in recipient" class="app-splitter two-cols">
<p>{{item.name}}</p>
<el-button v-if="index < 10"
style="min-width:20px"
#click="handleDeleteRecipient(index)"
icon="el-icon-delete"
circle
></el-button>
That v-if will only allow the itens with index lower then 10 to render, i beleive that is what you want at first, but, if you want tha limit to change (like that click at +10 itens) then, create a variable starting at 10 like:
data() {
return {
limit: 10
}
}
Do you v-if look at it, so change to it:
v-if="index < limit"
And implement the logic so when the user click at "+10 itens" you incress the limit variable to 20, 30, 40...
I have an autoload_process.php file where I retrieve info from my data base and I print it. One of the info I retrieve and print is the rating. I also have in this file my script to print the rating.
<script type="text/javascript">
$(function() {
$('span.stars').stars();
});
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5, parseFloat($(this).html())))) * 16));
});
}
</script>
//Provide the group that is going to be load
$group_number = filter_var($_POST["group_no"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
// To show 3 results at a time
$items_per_group = 3;
//get current starting point of records
$position = ($group_number * $items_per_group);
$city = filter_var($_POST["nameofcity"]);
//Limit our results within a specified range.
$db = pg_connect("$db_host $db_name $db_username $db_password");
$query = "SELECT * FROM menu where city='$city' ORDER BY rating DESC LIMIT $items_per_group OFFSET $position";
$rating = $myrow[rating];
echo '<span class="stars">';
echo $rating;
echo '</span>';
When the page is load for the first time everything works fine but the problem I have is that when I scroll all the way to the bottom and the page is reload with the new info the rating changes. It seams that everytime that a new set of data is loaded all the previous ratings are set to the Maximum or default value "5 Starts" (I'm guessing because the autoload.process.php file is run it again)
Example: (let's say that I load 3 results at a time)
First Load:
Hotel 1 --> Rating 5 (This is correct)
Hotel 2 --> Rating 4 (This is correct)
Hotel 3 --> Rating 3 (This is correct)
Now I get to the bottom of the page and the next info is loaded (second load):
Hotel 1 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 2 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 3 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 4 --> Rating 2 (This is correct)
Hotel 5 --> Rating 1 (This is correct)
Hotel 6 --> Rating 3 (This is correct)
Now I get to the bottom of the page and the next info is loaded (third load):
Hotel 1 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 2 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 3 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 4 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 5 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 6 --> Rating 5 (This is INCORRECT) filled with default value (Hotel1)
Hotel 7 --> Rating 3 (This is correct)
Hotel 8 --> Rating 2 (This is correct)
Hotel 9 --> Rating 1 (This is correct)
I think the issue is having this piece of code in the audtoload_process.php file
<script type="text/javascript">
$(function() {
$('span.stars').stars();
});
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
});
}
</script>
Especially in this line of code:
$(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
Also If I change the value in: Math.min(5,parseFloat from 5 to 1, when the new data loads, the previous values change to 1 instead of 5. Like:
First Load:
Hotel 1 --> Rating 5 (This is correct)
Hotel 2 --> Rating 4 (This is correct)
Hotel 3 --> Rating 3 (This is correct)
Now I get to the bottom of the page and the next info is loaded (second load):
Hotel 1 --> Rating 1 (This is INCORRECT) filled with default value (Hotel1)
Hotel 2 --> Rating 1 (This is INCORRECT) filled with default value (Hotel1)
Hotel 3 --> Rating 1 (This is INCORRECT) filled with default value (Hotel1)
Hotel 4 --> Rating 2 (This is correct)
Hotel 5 --> Rating 1 (This is correct)
Hotel 6 --> Rating 3 (This is correct)
But if I don't include it there then the starts are not fill up and I see something like:(starts without being filled with the value in top of the starts)
This is what I see if I include the code (Which is what I suppose to see) but then I'm having the issue mentioned above.
Definition of the class Start:
<style>
span.stars, span.stars span {
display: block;
background: url(stars.png) 0 -16px repeat-x;
width: 80px;
height: 16px;
}
span.stars span {
background-position: 0 0;
}
</style>
Any help would be appreciated
UPDATE
This is what I see before to scroll down and autoload the new data. (As can be observed, the starts are fill up to the same value that indicated in the top of the picture.
This is after getting to the bottom of the page and doing the autoload. As it can be appreciated the the rating is still the same (3.11 and 2.89) in the top of the picture, so the actual value of the rating didn't change. All the other data associated didn't change either (as for example the number of ratings: 7 and 12) However, the only thing that it changes is the starts being fill up to max=5 and that's why I'm suspecting the issue is in this line of code
$(this).html($('<span />').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
Or just having the script in the autoload_process.php file but I don't know how to solve the issue.
Looks like you are selecting all <span> elements each time you run your function, so your math is getting performed on both the newly added items as well as the old ones.
You could use an additional class name to identify spans that need updated. Then do your selection based off of that class.
Maybe something like this would work:
echo '<span class="stars notReadyYet">';
echo $rating;
echo '</span>';
.
$.fn.stars = function() {
return $(this).each(function() {
$(this).html($('.notReadyYet').width(Math.max(0, (Math.min(5,parseFloat($(this).html())))) * 16));
$(this).removeClass('notReadyYet'); //remove this class so it doesn't get processed again!
});
}
i am trying to display element only when the selling price is bigger than 0
this is my code
.basket-sidebar-right-body-basket-why-not-try
.item-grid-item(dynamic-position, data-rv-each-item='model:suggested', data-rv-on-click='view.attemptToAddItemToCart')
.item-title(data-rv-text='item.WebTitle | startCase')
.item-image(focusable)
img(focusable,data-rv-src='item.ImageUrl', onerror='this.src = "http://placehold.it/237x140";')
.why-not-try-text= strings.whyNotTry
.why-not-try-price
span.currency-symbol £
span.price(data-rv-text='item.SellingPrice | asCurrency')
i am trying to display the why not try price only when item.sellingPrice is bigger than 0
anyone know how i can do that
?