JS helpers

General

Appearance

backgroundColors: string[]

Sympy return an array of a bunch of colors :

 1const backgroundColors = [
 2   '#58595b',
 3   '#4dc9f6',
 4   '#f67019',
 5   '#f53794',
 6   '#537bc4',
 7   '#acc236',
 8   '#166a8f',
 9   '#00a950',
10   '#8549ba',
11   '#1abc9c',
12   '#2ecc71',
13   '#3498db',
14   '#9b59b6',
15   '#34495e',
16   '#16a085',
17   '#27ae60',
18   '#2980b9',
19   '#8e44ad',
20   '#2c3e50',
21   '#f1c40f',
22   '#e67e22'
23];

rdb.getTextColor = (): string

Will return the value of the --text-color CSS variable from the current theme in-use.

rdb.getTextColorSecondary = (): string

Will return the value of the --text-color-secondary CSS variable from the current theme in-use.

rdb.getSurfaceBorder = (): string

Will return the value of the '--surface-border CSS variable from the current theme in-use.

Utilities

rdb.getReportPathWithParams = (reportId: number, parameters: Array<{ key: string, value: string | number }>): string

To use with navigate hook from React. It will generate a complete URL to the linked report, with parameters.

 1const options = {
 2   // ...
 3   onClick: (e) => {
 4      navigate(
 5         rdb.getReportPathWithParams(
 6            <linked_report_id>,
 7            [
 8               {key: '<linked_report_input_parameter_variable_name_1>', value: getValueParam('<current_report_input_parameter_variable_name_a>')},
 9               {key: '<linked_report_input_parameter_variable_name_2>', value: label}   // Value below mouse cursor.
10            ]
11         )
12      );
13   // ...
14};

rdb.sortArrayByKeyStringASC = (array: Array<any>, key: string): Array<any>

Allow you to order a table of object, using an object’s attribute name as order key.

 1// Given this array of objects :
 2const jsonResults = [
 3   {
 4      "x_label": "G",
 5      "dataset_value": 178
 6   },
 7   {
 8      "x_label": "PG",
 9      "dataset_value": 194
10   },
11   {
12      "x_label": "R",
13      "dataset_value": 195
14   },
15   {
16      "x_label": "NC-17",
17      "dataset_value": 210
18   },
19   {
20      "x_label": "PG-13",
21      "dataset_value": 223
22   }
23];
24
25// You can order elements this way :
26rdb.log( rdb.sortArrayByKeyStringASC(jsonResults, 'x_label') );
27
28// [
29//    {
30//       "x_label": "G",
31//       "dataset_value": 178
32//    },
33//    {
34//       "x_label": "NC-17",
35//       "dataset_value": 210
36//    },
37//    {
38//       "x_label": "PG",
39//       "dataset_value": 194
40//    },
41//    {
42//       "x_label": "PG-13",
43//       "dataset_value": 223
44//    },
45//    {
46//       "x_label": "R",
47//       "dataset_value": 195
48//    }
49// ]

rdb.log = (object: any): void

Equivalent of the javascript console.log(), but the output will appears in the debug tab. (CTR+ALT+D to open it)

1const labels = jsonResults.map(row => row.x_label);
2rdb.log(labels);

Chart.js

rdb.cjsOnHoverCursor = (event: any, chart: any): void

To use with the onHover method from Chart.js options, to transform the mouse cursor in a pointer when above clickable part of the chart.

1const options = {
2   // ...
3   onClick: (e) => {
4      // ...
5   },
6   onHover: (e) => rdb.cjsOnHoverCursor(e, chartXY)
7};