Plugins

AgrEGG allows the development of plugins to extend its graphical functionalities. The used library is d3.js v3 (https://d3js.org/).

To develop a new plot go under the site administration and create a new Graph Type with an id larger than 1000. Load the preview image and the html source code.

To obtain a KPI value use AgrEGG APIs to get its url, to which one can add parameters such as “drill_down_id” (from 0 to 5):

• all, area, country, business unit, sub business unit, where periods are ordered month by month,
• or 1000 + “Id Filter Level”.

The values of the selected filters are already present in api_url, and stored in the global variable “filter_parameters”. To change a parameter use the javascript function that returns the modified url replaceQueryParam(<url>, <key>, <new_value>):

var api_url = '{{ api_url }}&{{  kpi_calculation_param.MENU_ID_PARAM_NAME }}={{ menu_id }}&{{  kpi_calculation_param.N_AREA_CODE_PARAM_NAME }}={{area}}&{{  kpi_calculation_param.N_COUNTRY_CODE_PARAM_NAME }}={{country}}&{{  kpi_calculation_param.N_BU_CODE_PARAM_NAME }}={{business_unit}}';

The response will be like:

{
"reset": true,
"bu_completed": [
    {
    "fw_id": "1",
    "name": "All"
    }
],
"errors": [
],
"kpi_measure_type": "integer",
"kpi_code": "REQ_TOT_Z",
"kpi_title": "Request Total",
"number_of_decimals": 2,
"kpi_indicator_type": "",
"order": "1",
"kpi_description": "REQ_TOT_Z - REQ_TOT : Request Total",
"kpi_group": "",
"data_availabilities": [],
"children": [
    {
    "type_level": "",
    "type_name": "Period",
    "id": 258,
    "drill_down_id": 0,
    "type": "period",
    "name": "2017"
    "values": [
        "difference_symbol": "%",
        "difference": "0",
        "name": "2017",
        "type_level": "",
        "type_name": "Period",
        "absolute_difference": "0",
        "period": "2017",
        "period_id": 269,
        "formatted_size": "12345",
        "drill_down_id": 0,
        "type": "period",
        "id": 269,
        "formatted_size_symbol": "12345",
        "size": "12345.000000000"
    ]
    }
]
}

It is possible to use an existing default plot by specifying its “graph_type_id” and the other available parameters, like in this snippet:

var base_graph_{{id}} = new BaseGraph({
    graph_type_id: <ID>,
    api_urls: [url_item],
    api_url: url_item,
    api_url2: '',
    show_graphs: {% if show_graphs %}true{% else %}false{% endif %},
    hide_colors: {% if hide_colors %}true{% else %}false{% endif %},
    params : filter_parameters,
    {% if num_of_decimals %}
    num_of_decimals : {{ num_of_decimals|safe }},
    {% else %}
    num_of_decimals : 2,
    {% endif %}
    {% if period_type_requested %}
    period_type_requested : {{ period_type_requested|safe }},
    {% else %}
    period_type_requested : ['0_actual'],
    {% endif %}
    periods_to_predict : {{ periods_to_predict|safe }},
    proportions: 1,
    id : 1,
    is_predefined_drill_down : {% if 8 in buttons %}true{% else %}false{% endif %},
    remove_empty: {% if remove_no_value == True %}true{% else %}false{% endif %},
    status_to_go: '',
    drill_down_id_from_share : '',
    filters_from_share: '',
    current_drill_down: 0,
    current_secondary_drill_down: 0,
    drill_down: [0],
    t : {
        'current_drill_down_id': '0',
        'filters': '[]',
        'graph_item': '1',
        'original_url': ''
    },
    data: '',
    text: '{{text | safe }}',
    is_context_menu_open: false,
    current_transformation: 1, //start with "normal bar graph"
    is_touch_device: is_touch_device,
    drill_down_items: {{ drill_down_items | safe }}
});
base_graph_{{id}}.init();

GRAPHS_ARRAY.push(base_graph_{{id}});