Dashboard layout format

dashboard.json

{
  "name": "Dahsboard 1",
  "description": "Some description",
  "rows": 20,
  "cols": 20,
  "styles" : {
    "primary-color": "#FFF",
    "secondary-color": "#F00",
    "background-color": "#000",
    "font-family": "Roboto"
  },
  "plugins": [
    {
     "elementName": "plugin-1",
     "instanceId": "plugin-1#0",
     "x": 0,
     "y": 0,
     "columns": 3,
     "rows": 3,
     "props": {
       "prop1": "value 1",
       "prop2": "value 2"
     }
    }
    {
     "elementName": "plugin-2",
     "instanceId": "plugin-2#0",
     "x": 5,
     "y": 5,
     "columns": 3,
     "rows": 2,
     "props": {
       "prop1": "value 1",
       "prop2": "value 2"
     }
    }
    {
     "elementName": "plugin-2",
     "instanceId": "plugin-2#1",
     "x": 1,
     "y": 4,
     "cols": 6,
     "rows": 3,
     "props": {
       "prop1": "value 1",
       "prop2": "value 2"
     }
    }
  ]
}

dashboard.type.js

export type PluginInstance = {
  elementName: string,
  instanceId: string,
  x: number,
  y: number,
  cols: number,
  rows: number,
}

export type Dashboard = {
  name: string,
  description: string,
  rows: number,
  cols: number,
  plugins: PluginInstance[],
}