Number Report

Build KPI Number Report Widget in DbFace.

DbFace provides “Number Report” to highlight a single data value, like total payment of all the orders, total customers in a quarter.

Use a Number Report visualization when you want to see the total for a measure or the count for a categorical column.

screenshot

Table format accepted

Number report supports One column with one row, other rows and columns of the result set will be ignored.

Column 1
Single Value

Number report also supports Two columns with one row, it allows you to compare your Single Value against another value. It adds an up or down arrow next to the single value and shows the percent change, based on the comparison value.

Column 1Column 2
Single Value Single Value 2

How to build Number Report?

Interactive Mode

STEP 1: select “Number Report” visualization type

STEP 2: Choose field you want to highlight

Drag filed that you want to highlight to the “Select Columns” field. Only the first column will be used to summarized, other columns you dropped will be ignored.

Click the caret button, you can apply “Count”, “Sum”, “Avg” function to the column.

Click the selected column to change the label name of the field.

STEP 3: Preview to test and save.

After you finished your application, you can click the “Preview” button to see what the number report looks, correct any issues, and publish the number report.

SQL Mode

You can also build number report from SQL Query directly.

Click the “Script” checkbox at the top-right corner of “Visualization” section to switch to Script mode. DbFace will try to generate SQL query that you already built. But you might also need to correct issues.

Option: Script

For Number Report, you can define

function __format_label(label) {
  var newlabel = label;
  // TODO: apply format to the label
  return newlabel;
}

and

function __format_value(value) {
  var newvalue = value;
  // TODO: apply format to the value
  return newvalue;
}

function in the Script code area to format label and value of the number report.

Here is an example that bold the label and makes the value color to blue:

function __format_label(label) {
    return "<b style='color:red'>" + label + "</b>";
}

function __format_value(value) {
    return "<span style='color:blue'>" + value+"</span>";
}


Last modified January 3, 2021: fix (fdabe16)