Demo - Configurable Dashboard

Configurable Dashboard

digitalocean.create({ 
        type: 'configurable-dashboard',
        config: {
          widgets: [
            {
              size: "full-size",
              type: "cluster-map",
              config: {
                id: "sample-map",
                layers: [
                  {
                    name: "Tide Gauges",
                    defaultOn: true,
                    url: "http://localhost:5000/markers/tide-gauges.json",
                    color: "rgb(141, 66, 245)",
                    layerType: 3,
                    tooltipContentFunction: createTooltip,
                  }
                ],
                layersTitle: "Layers",
                addSatelliteLayer: true,
                addMultiSelection: true,
              }
            },
            {
              type: 'branding',
              config: {
                markdown: '<div style="text-align: center;"><h3>Test</h3></div>',
                padding: "10px"
              }
            },
            {
              type: 'repeater-widget',
              config: {
                preMarkdown: '<div style="text-align: center;"><h3>',
                repeatMarkdown: '$title$',
                separatorMarkdown: ', ',
                postMarkdown: '</h3></div>',
                mapId: 'sample-map'
              }
            },
            {
              size: "half-size",
              repeat: {
                id: 'sample-map',
                filter: 'title'
              },
              type: "line-chart",
              config: {
                card: true,
                title: 'Tide Gauge Height',
                yTitle: 'Height (m)',
                datasets: [
                  {
                    data: [
                      {
                        title: 'Ballycotton Harbour',
                        date: '2021-06-20',
                        height: 3
                      },
                      {
                        title: 'Ballycotton Harbour',
                        date: '2021-06-21',
                        height: 4
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-18',
                        height: 3
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-19',
                        height: 2
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-20',
                        height: 7
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-21',
                        height: 5
                      }
                    ],
                    title: 'Tide Gauge Height',
                    props: ['date', 'height'],
                    parse: {
                      height: 'number',
                      date: 'date'
                    }
                  }
                ]
              }
            },
            {
              size: "half-size",
              url: "#{baseUrl}api/data/GetExternalConfig"
            },
            {
              size: "half-size",
              visibleIf: 'sample-map',
              type: "scatter-chart",
              config: {
                card: true,
                title: 'Tide Gauge Height',
                yTitle: 'Height (m)',
                datasets: [
                  {
                    data: [
                      {
                        title: 'Ballycotton Harbour',
                        date: '2021-06-20',
                        height: 3
                      },
                      {
                        title: 'Ballycotton Harbour',
                        date: '2021-06-21',
                        height: 4
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-18',
                        height: 3
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-19',
                        height: 2
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-20',
                        height: 7
                      },
                      {
                        title: 'Castletownbere Port',
                        date: '2021-06-21',
                        height: 5
                      }
                    ],
                    title: 'Tide Gauge Height',
                    props: ['date', 'height'],
                    parse: {
                      height: 'number',
                      date: 'date'
                    }
                  }
                ]
              }
            }
          ]
        }
      }
    );

function createTooltip(data) {
      let content = `<h3>${data.title}</h3>`;
      content += `Any other additional data`;
      return content;
    }

Ireland's Marine Atlas

Configurable Dashboard