vis config.json

vis-config.json

The vis-config.json file is the main configuration file for Datascope, in which users modify the different values of properties to change and set the entire dashboard. There are 4 properties:

1. DATA_RESOURCE_URL The DATA_RESOURCE_URL property specifies information about the data resource URL. The system will fetch data from this URL. Detial

2. UNIT_OF_GRID_VIEW The UNIT_OF_GRID_VIEW property specifies the basic unit for the dashboard grid view system. Detial

3. MARGIN_OF_GRID_VIEW The MARGIN_OF_GRID_VIEW property specifies the margin for the dashboard grid view system. Detial

4. VISUALIZATION_VIEW_CONFIGURATION The VISUALIZATION_VIEW_CONFIGURATION property specify the type of visualization components that will display on the main view panel. Detial

DATA_RESOURCE_URL property

TYPE: String "https://data_resource_url/api?query=dataset"

The URL of data resource that is used to query data set to provide datascope's data.

Example of DATA_RESOURCE_URL in vis-config.json file:

"DATA_RESOURCE_URL":"http://xxx.xxx.xxx.xxx/api?query=dataset" // reading data resource from "http://xxx.xxx.xxx.xxx/api?query=dataset"

UNIT_OF_GRID_VIEW property

TYPE:Array [horizontal unit in pixel, verical unit in pixel]

datascope layout is based on grid system. This property is used to set the basic unit of the dashboard's grid system in pixel. The default values of unit are 200px.

Example of UNIT_OF_GRID_VIEW in vis-config.json file:

"UNIT_OF_GRID_VIEW": [200,200] // 200px per unit in the width of components, 200px per unit in the height of compnents

MARGIN_OF_GRID_VIEW property

TYPE: Array [vertical margin, horizontal margin]

is used to create space around components on the dashboard, you have full control over the vertical(top-bottom) and horizontal(left-right) margins in pixel.

Example of MARGIN_OF_GRID_VIEW in vis-config.json file:

"MARGIN_OF_GRID_VIEW": [20, 10] // vartical margin between two components are 20px, horizontal margin between two components are 10px

VISUALIZATION_VIEW_CONFIGURATION property

Specify the type of visualization components that will display on the main view panel. For details, go to VISUALIZATION_VIEW_CONFIGURATION

Example of VISUALIZATION_VIEW_CONFIGURATION in vis-config.json file:

"VISUALIZATION_VIEW_CONFIGURATION": [
        {
          "id": "Collection", // component id should be unique in VISUALIZATION_VIEW_CONFIGURATION property
          "title": "Collection", // title text will display on conpoment panel's head.
          "description": "Showing the number of patients in Collection", // description text will show up when user hover on panel's head.
          "chartType": "PIE_CHART", // visual type
          "fields":{"x":"collection"}, // what fields will be used to visualize
          "size": [1, 1], // the size of panel, in which will be 200px x 200px
          "priority": 50 // the priority in all component panel. The component has the hgih priority will show up on top-left. 
        },
        {
          "id": "tnm_stage_count",
          "title": "TNM Stage Count",
          "description": "Showing the number of patients in TNM Stage",
          "chartType": "BAR_CHART",
          "fields":{"x":"stagelabel"},
          "size": [2, 1],
          "priority": 50        
        },
        {
          "id": "gender_pie",
          "title": "Gender",
          "description": "Showing the number of patients in gender",
          "chartType": "PIE_CHART",
          "fields":{"x":"sexlabel"},
          "size": [1, 1],
          "priority": 50
        },
        {
          "id": "disease_type_count",
          "title": "Disease Type Count",
          "description": "Showing the number of patients in disease type",
          "chartType": "HORIZONTAL_BAR_CHART",
          "fields":{"y":"disease_type"},
          "size": [2, 2],
          "priority": 10        
        },
        {
          "id": "age_age_scatter",
          "title": "Age vs Age Time",
          "description": "Showing the age and Age in scatter plot",
          "chartType": "SCATTER_CHART",
          "fields":{"x":"age","y":"age","z":"age"},
          "size": [2, 2],
          "priority": 10
        },
        { 
          "id":"clinical_data_table",
          "title": "Clinical Data Table",
          "description": "Showing Clinical Data",
          "chartType": "VIS_DATA_TABLE",
          "fields":[
            {
              "dataKey":"collection",
              "label":"Collection",
              "width":0.13
            },
            {
              "dataKey":"patient_id",
              "label":"Patient ID",
              "width":0.08
            },
            {
              "dataKey":"disease_type",
              "label":"Disease",
              "width":0.22
            },
            {
              "dataKey":"location",
              "label":"Location",
              "width":0.18
            },
            {
              "dataKey":"age",
              "label":"Age",
              "width":0.05
            },{
              "dataKey":"stagelabel",
              "label":"Stage",
              "width":0.08
            },{
              "dataKey":"sexlabel",
              "label":"Gender",
              "width":0.08
            }],
          "size": [4, 2],
          "priority": 70
        }
      ]