covid19-dashboard
Version:
Dashboard App displaying COVID-19 numbers by country
109 lines (97 loc) • 2.97 kB
JavaScript
import AmChartComponent from '../../../node_modules/neo.mjs/src/component/wrapper/AmChart.mjs';
/**
* @class Covid.view.WorldMapComponent
* @extends Neo.component.wrapper.AmChart
*/
class WorldMapComponent extends AmChartComponent {
static getConfig() {return {
/**
* @member {String} className='Covid.view.WorldMapComponent'
* @protected
*/
className: 'Covid.view.WorldMapComponent',
/**
* @member {String} ntype='covid-world-map'
* @protected
*/
ntype: 'covid-world-map',
/**
* @member {String} chartType='MapChart'
*/
chartType: 'MapChart',
/**
* @member {String[]} cls=['covid-line-chart']
*/
cls: ['covid-world-map'],
/**
* @member {String} dataPath='data.series.values.0'
*/
dataPath: 'series.values.0',
/**
* @member {Number} heatRulesMaxValue=15000
*/
heatRulesMaxValue: 15000,
/**
* @member {String} package='am4maps'
*/
package: 'am4maps',
/**
* @member {Object} chartConfig
*/
chartConfig: {
projection: 'Miller',
geodata : 'worldLow',
series: [{
type : 'MapPolygonSeries',
exclude : ['AQ'],
useGeodata: true,
dataFields: {
value: 'active'
},
heatRules: [{
max : '#64b5f6',
maxValue: '@config:heatRulesMaxValue',
min : '#ffffff',
minValue: 0,
property: 'fill',
target : 'mapPolygons.template'
}],
mapPolygons: {
tooltipText: '{name}: [bold]{value}[/]',
//fill : '#74B266',
states: {
hover: {
properties: {
//fill: '#367B25'
}
}
}
}
}]
}
}}
/**
* @param {Object[]} data
*/
loadData(data) {
const chartData = [];
data.forEach(item => {
chartData.push({
active : item.active,
cases : item.cases,
critical : item.critical,
deaths : item.deaths,
id : item.countryInfo.iso2,
name : item.country,
recovered: item.recovered,
});
});
Neo.main.addon.AmCharts.updateData({
data : chartData,
dataPath: this.dataPath,
id : this.id
});
}
}
Neo.applyClassConfig(WorldMapComponent);
export {WorldMapComponent as default};