Examples

Bar Chart: KRI Score

The bar chart of KRI score can be produced with the following code:

    const workflowID = 'kri0001';

    // bar data
    const results = results_summary.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const workflow = meta_workflow.filter(
        (workflow) => workflow.workflowid === workflowID
    );
    workflow.y = 'score'; // or 'metric'

    // threshold parameters
    const thresholds = meta_param.filter(
        (parameter) => parameter.workflowid === workflowID
    );

    // visualization
    const barChart = rbmViz.default.barChart(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow,
        thresholds
    );

Bar Chart: KRI Metric

The bar chart of KRI metric can be produced with the following code:

    const workflowID = 'kri0001';

    // bar data
    const results = results_summary.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const workflow = meta_workflow.filter(
        (workflow) => workflow.workflowid === workflowID
    );
    workflow.y = 'metric'; // or 'score'

    // threshold parameters
    const thresholds = meta_param.filter(
        (parameter) => parameter.workflowid === workflowID
    );

    // visualization
    const barChart = rbmViz.default.barChart(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow,
        thresholds
    );

Scatter Plot

The scatter plot can be produced with the following code:

    const workflowID = 'kri0001';

    // point data
    const results = results_summary.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const workflow = meta_workflow.filter(
        (workflow) => workflow.workflowid === workflowID
    );

    // threshold bounds
    const bounds = results_bounds.filter(
        (bound) => bound.workflowid === workflowID
    );

    // visualization
    const scatterPlot = rbmViz.default.scatterPlot(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow,
        bounds
    );

Sparkline: KRI Score

The sparkline of KRI score can be produced with the following code:

    const workflowID = 'kri0001';
    const groupID = '43';

    // line/point data
    const results = results_summary_over_time.filter(
        (result) => result.workflowid === workflowID && result.groupid === groupID
    );

    // configuration
    const workflow = meta_workflow.filter(
        (workflow) => workflow.workflowid === workflowID
    );
    workflow.y = 'score' // or 'metric'

    // visualization
    const sparkline = rbmViz.default.sparkline(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow
    );

Sparkline: KRI Metric

The sparkline of KRI metric can be produced with the following code:

    const workflowID = 'kri0001';
    const groupID = '43';

    // line/point data
    const results = results_summary_over_time.filter(
        (result) => result.workflowid === workflowID && result.groupid === groupID
    );

    // configuration
    const workflow = meta_workflow.filter(
        (workflow) => workflow.workflowid === workflowID
    );
    workflow.y = 'metric' // or 'score'

    // visualization
    const sparkline = rbmViz.default.sparkline(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow
    );

Sparkline: # of Flagged Groups

The sparkline of the number of at risk or flagged groups for a given KRI can be produced with the following code:

    const workflowID = 'kri0001';

    // line/point data
    const flag_counts = flag_counts_by_kri.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const configuration = {
        x: 'snapshot_date',
        y: 'n_flagged', // or 'n_at_risk'
        nSnapshots: 5,
    };

    // visualization
    const sparkline = rbmViz.default.sparkline(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        flag_counts,
        configuration
    );

Sparkline: # of Flagged KRIs

The sparkline of the number of at risk or flagged KRIs for a given group can be produced with the following code:

    const groupID = '43';

    // line/point data
    const flag_counts = flag_counts_by_group.filter(
        (result) => result.groupid === groupID
    );

    // configuration
    const configuration = {
        x: 'snapshot_date',
        y: 'n_flagged', // or 'n_at_risk'
        nSnapshots: 5,
    };

    // visualization
    const sparkline = rbmViz.default.sparkline(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        flag_counts,
        configuration
    );

Time Series: KRI Score

The time series of KRI score can be produced with the following code:

    const workflowID = 'kri0001';

    // time series data
    const results = results_summary_over_time.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const config = meta_workflow.filter(
        (metadata) => metadata.workflowid === workflowID
    );
    config.y = 'score'; // or 'metric'

    // threshold parameters
    const thresholds = meta_param.filter(
        (parameter) => parameter.workflowid === workflowID
    );

    // visualization
    const timeSeries = rbmViz.default.timeSeries(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        results,
        workflow,
        thresholds
    );

Time Series: # of Flagged Groups

The time series of the number of at risk or flagged groups for a given KRI can be produced with the following code:

    const workflowID = 'kri0001';

    // line/point data
    const flag_counts = flag_counts_by_kri.filter(
        (result) => result.workflowid === workflowID
    );

    // configuration
    const configuration = {
        y: 'n_flagged', // or 'n_at_risk'
    };

    // visualization
    const timeSeries = rbmViz.default.timeSeries(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        flag_counts,
        configuration
    );

Time Series: # of Flagged KRIs

The time series of the number of at risk or flagged KRIs for a given group can be produced with the following code:

    // line/point data
    const flag_counts = flag_counts_by_group.filter(
        (result) => result.groupid === groupID
    );

    // configuration
    const configuration = {
        y: 'n_flagged', // or 'n_at_risk'
        selectedGroupIDs: '123',
    };

    // visualization
    const timeSeries = rbmViz.default.timeSeries(
        document.getElementById('container'), // an element in the DOM in which to render the visualization
        flag_counts,
        configuration
    );