Configurable Dashboard
<script src="https://widgets.digitalocean.ie/loader.js"></script>
<script>
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: "https://widgets.digitalocean.ie/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;
}
</script>