Skip to content

Commit

Permalink
Merge pull request #19720 from highcharts/dash/fix-climate-demo
Browse files Browse the repository at this point in the history 
dash/fix-climate-demo
  • Loading branch information
@bre1470
bre1470 committed Sep 13, 2023
2 parents 785ae4e + 8f665ca commit df2e564
Showing 1 changed file with 66 additions and 84 deletions.
150 changes: 66 additions & 84 deletions samples/dashboards/demo/climate/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,10 @@ async function setupBoard() {
let activeCity = 'New York',
activeColumn = 'TX',
activeScale = 'C',
activeTimeRange = [Date.UTC(2010, 0, 5), Date.UTC(2010, 11, 25)],
selectionTimeout = -1;
activeTimeRange = [ // default to a year
Date.UTC(2009, 11, 25, 0, 0, 1),
Date.UTC(2010, 11, 25)
];

// Initialize board with most basic data
const board = await Dashboards.board('container', {
Expand Down Expand Up @@ -274,26 +276,23 @@ async function setupBoard() {
minRange: 30 * 24 * 3600 * 1000, // 30 days
maxRange: 2 * 365 * 24 * 3600 * 1000, // 2 years
events: {
afterSetExtremes: function (e) {
window.clearTimeout(selectionTimeout);
selectionTimeout = window.setTimeout(async () => {
if (
activeTimeRange[0] !== e.min ||
activeTimeRange[1] !== e.max
) {
activeTimeRange = [e.min, e.max];
afterSetExtremes: async function (e) {
const min = Math.round(e.min);
const max = Math.round(e.max);

const newColumn =
activeColumn[0] === 'T' ? activeColumn + activeScale : activeColumn;
await updateBoard(
board,
activeCity,
newColumn,
activeScale,
false
);
}
}, 50);
if (
activeTimeRange[0] !== min ||
activeTimeRange[1] !== max
) {
activeTimeRange = [min, max];
await updateBoard(
board,
activeCity,
activeColumn,
activeScale,
false
);
}
}
}
}
Expand Down Expand Up @@ -890,14 +889,15 @@ async function setupBoard() {
}, true);
const dataPool = board.dataPool;
const citiesTable = await dataPool.getConnectorTable('Cities');
const cityRows = citiesTable.getRowObjects();

// Add city sources
for (const row of citiesTable.getRowObjects()) {
for (let i = 0, iEnd = cityRows.length; i < iEnd; ++i) {
dataPool.setConnectorOptions({
id: row.city,
id: cityRows[i].city,
type: 'CSV',
options: {
csvURL: row.csv
csvURL: cityRows[i].csv
}
});
}
Expand All @@ -907,9 +907,9 @@ async function setupBoard() {
await updateBoard(board, activeCity, activeColumn, activeScale, true);

// Load additional cities
for (const row of citiesTable.getRowObjects()) {
if (row.city !== activeCity) {
await setupCity(board, row.city, activeColumn, activeScale);
for (let i = 0, iEnd = cityRows.length; i < iEnd; ++i) {
if (cityRows[i].city !== activeCity) {
await setupCity(board, cityRows[i].city, activeColumn, activeScale);
}
}
}
Expand Down Expand Up @@ -967,7 +967,6 @@ async function setupCity(board, city, column, scale) {
cityTable.getRowIndexBy('time', time)
) || Math.round((90 - Math.abs(cityInfo.lat)) / 3)
});

}

async function updateBoard(board, city, column, scale, newData) {
Expand Down Expand Up @@ -1012,9 +1011,8 @@ async function updateBoard(board, city, column, scale, newData) {
const timeRangeMin = timeRangeSelector.chart.axes[0].min;
const selectionModifier = selectionTable.getModifier();

const citiesTable = await dataPool.getConnectorTable('Cities');

if (
newData ||
!selectionModifier.options.ranges[0] ||
selectionModifier.options.ranges[0].maxValue !== timeRangeMax ||
selectionModifier.options.ranges[0].minValue !== timeRangeMin
Expand All @@ -1028,69 +1026,56 @@ async function updateBoard(board, city, column, scale, newData) {
}

const rangeTable = selectionTable.modified;
const rangeEnd = rangeTable.getRowCount() - 1;

// Update world map
const mapPoints = worldMap.chart.series[1].data;
const lastTime = rangeTable.getCellAsNumber('time', rangeEnd);

for (let i = 0, iEnd = mapPoints.length; i < iEnd; ++i) {
const pointTable = await dataPool.getConnectorTable(mapPoints[i].name);

mapPoints[i].update({
custom: {
yScale: scale
},
y: pointTable.modified.getCellAsNumber(
column,
pointTable.modified.getRowIndexBy('time', lastTime)
)
}, false);
}
worldMap.chart.update({
colorAxis: {
min: colorMin,
max: colorMax,
stops: colorStops
}
});
(async () => {
const dataPoints = worldMap.chart.series[1].data;
const lastTime = rangeTable
.getCellAsNumber('time', rangeTable.getRowCount() - 1);

for (const point of dataPoints) {
const pointTable = await dataPool.getConnectorTable(point.name);

point.update({
custom: {
yScale: scale
},
y: pointTable.modified.getCellAsNumber(
column,
pointTable.getRowIndexBy('time', lastTime)
)
});
}
})();

// Update KPIs
await kpiData.update({
title: city,
value: citiesTable.getCellAsNumber(
'elevation',
citiesTable.getRowIndexBy('city', city)
) || '--'
});
kpiTemperature.chart.series[0].points[0].update(
rangeTable.getCellAsNumber('TN' + scale, 0) || 0,
true,
true
);
kpiMaxTemperature.chart.series[0].points[0].update(
rangeTable.getCellAsNumber('TX' + scale, 0) || 0,
true,
true
);
kpiRain.chart.series[0].points[0].update(
rangeTable.getCellAsNumber('RR1', 0) || 0,
true,
true
);
kpiIce.chart.series[0].points[0].update(
rangeTable.getCellAsNumber('ID', 0) || 0,
true,
true
);
kpiFrost.chart.series[0].points[0].update(
rangeTable.getCellAsNumber('FD', 0) || 0,
true,
true
);
if (newData) {
const citiesTable = await dataPool.getConnectorTable('Cities');
await kpiData.update({
title: city,
value: citiesTable.getCellAsNumber(
'elevation',
citiesTable.getRowIndexBy('city', city)
) || '--'
});
}
kpiTemperature.chart.series[0].points[0]
.update(rangeTable.getCellAsNumber('TN' + scale, rangeEnd) || 0);
kpiMaxTemperature.chart.series[0].points[0]
.update(rangeTable.getCellAsNumber('TX' + scale, rangeEnd) || 0);
kpiRain.chart.series[0].points[0]
.update(rangeTable.getCellAsNumber('RR1', rangeEnd) || 0);
kpiIce.chart.series[0].points[0]
.update(rangeTable.getCellAsNumber('ID', rangeEnd) || 0);
kpiFrost.chart.series[0].points[0]
.update(rangeTable.getCellAsNumber('FD', rangeEnd) || 0);

// Update data grid and city chart
if (newData) {
const showCelsius = scale === 'C';
const sharedColumnAssignment = {
Expand All @@ -1104,9 +1089,6 @@ async function updateBoard(board, city, column, scale, newData) {
TXF: column === 'TXF' ? 'y' : null
};

// Update range selection
await selectionTable.setModifier(selectionTable.getModifier());

// Update city grid selection
await selectionGrid.update({
dataGridOptions: {
Expand Down

0 comments on commit df2e564

Please sign in to comment.