Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved RNANews demo #13

Merged
merged 7 commits into from
Aug 19, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions demos/rna-news/demo.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");
@import url("https://code.highcharts.com/css/highcharts.css");
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");

body {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
}

.row {
display: flex;
flex-wrap: wrap;
}

.cell {
flex: 1;
min-width: 20px;
}

.cell > .highcharts-dashboards-component {
position: relative;
margin: 10px;
background-clip: border-box;
}

.highcharts-dashboards-component-title {
padding: 10px;
margin: 0;
background-color: var(--highcharts-neutral-color-5);
color: var(--highcharts-neutral-color-100);
border: solid 1px var(--highcharts-neutral-color-20);
border-bottom: none;
}

#dashboard-col-1 .highcharts-dashboards-component-title {
background-color: #336;
}

@media screen and (max-width: 1000px) {
.row {
flex-direction: column;
}
}
17 changes: 13 additions & 4 deletions demos/rna-news/demo.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,22 @@
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://code.highcharts.com/dashboards/2.2.0/css/dashboards.css" />
<script src="https://code.highcharts.com/dashboards/2.2.0/dashboards.src.js"></script>
<script src="../../code/morningstar-connectors.src.js"></script>
<link rel="stylesheet" href="demo.css" />
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="../../code/morningstar-standalone.src.js"></script>
<title>RNA News Demo - Morningstar Connectors Demos</title>
</head>
<body>
<div id="container"></div>
<p>
Add your Postman environment file from Morningstar to start the demo:
<input type="file" id="postman-json" accept=".json,application/json" />
</p>
<p id="loading-label" style="display: none;">Loading data…</p>
<div class="row" id="container">
<div class="cell" id="dashboard-col-0"></div>
<div class="cell" id="dashboard-col-1"></div>
</div>
<script src="./demo.js"></script>
</body>
</html>
301 changes: 174 additions & 127 deletions demos/rna-news/demo.js
Original file line number Diff line number Diff line change
@@ -1,143 +1,190 @@
const board = Dashboards.board('container', {
dataPool: {
connectors: [{
id: 'rna',
type: 'MorningstarRNANews',
options: {
security: {
id: 'US0378331005'
},
postman: {
environmentURL: '/tmp/Environment.json'
const loadingLabel = document.getElementById('loading-label');

function displayRNANews (postmanJSON) {
const board = Dashboards.board('container', {
dataPool: {
connectors: [{
id: 'rna',
type: 'MorningstarRNANews',
options: {
security: {
id: 'GB00BLGZ9862',
idType: 'MSID'
},
postman: {
environmentJSON: postmanJSON
}
}
}
},
{
id: 'rna-type-amount',
type: 'JSON',
options: {
columnNames: ['Type', 'Amount'],
data: [
[],
[]
],
orientation: 'columns',
firstRowAsNames: false
}
}
]
},
components: [
{
renderTo: 'dashboard-col-0',
connector: {
id: 'rna'
},
type: 'DataGrid',
title: 'News',
dataGridOptions: {
editable: false,
columns: {
Day: {
cellFormatter: function () {
return new Date(this.value)
.toISOString()
.substring(0, 10);
}
}
{
id: 'rna-type-amount',
type: 'JSON',
options: {
columnNames: ['Type', 'Amount'],
data: [
[],
[]
],
orientation: 'columns',
firstRowAsNames: false
}
}
]
},
{
renderTo: 'dashboard-col-1',
connector: {
id: 'rna-type-amount',
columnAssignment: [{
seriesId: 'number-per-type',
data: ['Type', 'Amount']
}]
},
type: 'Highcharts',
chartOptions: {
chart: {
animation: false,
type: 'column'
},
title: {
text: 'Number of items per type'
components: [
{
renderTo: 'dashboard-col-0',
connector: {
id: 'rna'
},
subtitle: {
text: 'Shows number of news items of each kind'
},
series: [{
id: 'number-per-type',
name: 'Number per type'
}],
tooltip: {
shared: true,
split: true,
stickOnContact: true
},
lang: {
accessibility: {
chartContainerLabel:
'Shows number of news items of each kind'
}
},
xAxis: {
type: 'category',
accessibility: {
description: 'Kind of news annoucement'
type: 'DataGrid',
title: 'News',
dataGridOptions: {
editable: false,
columns: {
Day: {
cellFormatter: function () {
return new Date(this.value)
.toISOString()
.substring(0, 10);
}
}
}
}
},
{
renderTo: 'dashboard-col-1',
connector: {
id: 'rna-type-amount',
columnAssignment: [{
seriesId: 'number-per-type',
data: ['Type', 'Amount']
}]
},
yAxis: {
type: 'Highcharts',
chartOptions: {
chart: {
animation: false,
type: 'column'
},
title: {
text: 'Number of announcements'
text: 'Number of items per type'
},
subtitle: {
text: 'Shows number of news items of each kind'
},
series: [{
id: 'number-per-type',
name: 'Number per type'
}],
tooltip: {
shared: true,
split: true,
stickOnContact: true
},
lang: {
accessibility: {
chartContainerLabel:
'Shows number of news items of each kind'
}
},
xAxis: {
type: 'category',
accessibility: {
description: 'Kind of news annoucement'
}
},
yAxis: {
title: {
text: 'Number of announcements'
}
}
}
}
}
]
});

board.dataPool
.getConnectorTable('rna')
.then(async table => {
const types = table.getColumn('Type');
const uniqueTypes = Array.from(new Set(types));
const numberPerType = uniqueTypes.map(type =>
types.reduce((previous, current) => {
if (current === type) {
return previous + 1;
]
});

board.dataPool
.getConnectorTable('rna')
.then(async table => {
const types = table.getColumn('Type');
const uniqueTypes = Array.from(new Set(types));
const numberPerType = uniqueTypes.map(type =>
types.reduce((previous, current) => {
if (current === type) {
return previous + 1;
}
return previous;
}, 0)
);

board.dataPool.setConnectorOptions({
id: 'rna-type-amount',
type: 'JSON',
options: {
columnNames: ['Type', 'Amount'],
orientation: 'columns',
firstRowAsNames: false,
data: [
uniqueTypes,
numberPerType
]
}
return previous;
}, 0)
);

board.dataPool.setConnectorOptions({
id: 'rna-type-amount',
type: 'JSON',
options: {
columnNames: ['Type', 'Amount'],
orientation: 'columns',
firstRowAsNames: false,
data: [
uniqueTypes,
numberPerType
]
}
});

// Refresh the component after updating the table
await board.getComponentByCellId('dashboard-col-1').initConnectors();
await board.getComponentByCellId('dashboard-col-1').update({
connector: {
id: 'rna-type-amount',
columnAssignment: [{
seriesId: 'number-per-type',
data: ['Type', 'Amount']
}]
}
});
})
.finally(() => {
loadingLabel.style.display = 'none';
});
}

// Refresh the component after updating the table
await board.getComponentByCellId('dashboard-col-1').initConnectors();
await board.getComponentByCellId('dashboard-col-1').update({
connector: {
id: 'rna-type-amount',
columnAssignment: [{
seriesId: 'number-per-type',
data: ['Type', 'Amount']
}]
async function handleSelectEnvironment (evt) {
const target = evt.target;
const postmanJSON = await getPostmanJSON(target);

if (!postmanJSON) {
loadingLabel.textContent = 'The provided file is not a Postman Environment Configuration.';
loadingLabel.style.display = 'block';

return;
}

target.parentNode.style.display = 'none';

loadingLabel.style.display = 'block';
loadingLabel.textContent = 'Loading data…';

displayRNANews(postmanJSON);
}

document.getElementById('postman-json')
.addEventListener('change', handleSelectEnvironment);

async function getPostmanJSON (htmlInputFile) {
let file;
let fileJSON;

for (file of htmlInputFile.files) {
try {
fileJSON = JSON.parse(await file.text());
if (MorningstarConnectors.isPostmanEnvironmentJSON(fileJSON)) {
break;
}
});
})
.catch(window.alert);
} catch (error) {
// fail silently
}
}

return fileJSON;
}
2 changes: 1 addition & 1 deletion demos/stock/demo.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ document.getElementById('postman-json').addEventListener(
'change',
async function (evt) {
const target = evt.target;
const postmanJSON = await getPostmanJSON(evt.target);
const postmanJSON = await getPostmanJSON(target);

if (!postmanJSON) {
return;
Expand Down
Loading