feat(ui) - dashboard - other widgets
This commit is contained in:
Shekar Siri
parent
9cc4cebc5e
commit
eb4aa50211
6 changed files with 133 additions and 3 deletions
|
|
@ -57,7 +57,7 @@ interface Props {
|
|||
data: any
|
||||
metric?: any
|
||||
}
|
||||
function MissingResources(props: Props) {
|
||||
function SlowestResources(props: Props) {
|
||||
const { data, metric } = props;
|
||||
|
||||
return (
|
||||
|
|
@ -78,4 +78,4 @@ function MissingResources(props: Props) {
|
|||
);
|
||||
}
|
||||
|
||||
export default MissingResources;
|
||||
export default SlowestResources;
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.maps {
|
||||
height: auto;
|
||||
width: 110%;
|
||||
stroke: $gray-medium;
|
||||
stroke-width: 1;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
margin-top: -20px;
|
||||
|
||||
}
|
||||
|
||||
.location {
|
||||
fill: $gray-light !important;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
fill: #b8e2b3;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { NoContent } from 'UI';
|
||||
import { Styles, AvgLabel } from '../../common';
|
||||
import Scale from './Scale';
|
||||
import { threeLetter } from 'App/constants/countries';
|
||||
import { colorScale } from 'App/utils';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { numberWithCommas } from 'App/utils';
|
||||
import WorldMap from "@svg-maps/world";
|
||||
import { SVGMap } from "react-svg-map";
|
||||
import "react-svg-map/lib/index.css";
|
||||
import stl from './SpeedIndexByLocation.css';
|
||||
|
||||
interface Props {
|
||||
metric?: any
|
||||
}
|
||||
function SpeedIndexByLocation(props: Props) {
|
||||
const { metric } = props;
|
||||
const wrapper: any = React.useRef(null);
|
||||
let map: any = null;
|
||||
|
||||
const getSeries = data => {
|
||||
const series: any[] = [];
|
||||
data.forEach(item => {
|
||||
const d = [threeLetter[item.userCountry], Math.round(item.avg)]
|
||||
series.push(d)
|
||||
})
|
||||
|
||||
return series;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// if (!wrapper && !wrapper.current) return
|
||||
|
||||
}, [])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (map && map.updateChoropleth) {
|
||||
// const series = getSeries(metric.data.chart);
|
||||
// // console.log('series', series)
|
||||
// // map.updateChoropleth(series, {reset: true});
|
||||
// }
|
||||
// }, [])
|
||||
|
||||
const getDataset = () => {
|
||||
const { metric } = props;
|
||||
const colors = Styles.colors;
|
||||
|
||||
var dataset = {};
|
||||
const series = getSeries(metric.data.chart);
|
||||
var onlyValues = series.map(function(obj){ return obj[1]; });
|
||||
const paletteScale = colorScale(onlyValues, [...colors].reverse());
|
||||
|
||||
// fill dataset in appropriate format
|
||||
series.forEach(function(item){
|
||||
var iso = item[0], value = item[1];
|
||||
dataset[iso] = { numberOfThings: value, fillColor: paletteScale(value) };
|
||||
});
|
||||
return dataset;
|
||||
}
|
||||
|
||||
const getLocationClassName = (location, index) => {
|
||||
// Generate random heat map
|
||||
return `svg-map__location svg-map__location--heat${index % 4}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ metric.data.chart.length === 0 }
|
||||
style={ { height: '240px' } }
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
|
||||
<AvgLabel text="Avg" count={Math.round(metric.data.avg)} unit="ms" />
|
||||
</div>
|
||||
<Scale colors={Styles.colors} />
|
||||
<div className="map-target"></div>
|
||||
<div
|
||||
style={{
|
||||
height: '220px',
|
||||
width: '100%',
|
||||
margin: '0 auto',
|
||||
display: 'flex',
|
||||
}}
|
||||
ref={ wrapper }
|
||||
>
|
||||
<SVGMap
|
||||
map={WorldMap}
|
||||
className={stl.maps}
|
||||
locationClassName={stl.location}
|
||||
// onLocationMouseOver={(e) => console.log(e.target)}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="examples__block__map__tooltip" style={this.state.tooltipStyle}>
|
||||
{this.state.pointedLocation}
|
||||
</div> */}
|
||||
</NoContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default observer(SpeedIndexByLocation);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
export const threeLetter = {UN: 'BGD', BD: 'BGD', BE: 'BEL', BF: 'BFA', BG: 'BGR', BA: 'BIH', BB: 'BRB', WF: 'WLF', BL: 'BLM', BM: 'BMU', BN: 'BRN', BO: 'BOL', BH: 'BHR', BI: 'BDI', BJ: 'BEN', BT: 'BTN', JM: 'JAM', BV: 'BVT', BW: 'BWA', WS: 'WSM', BQ: 'BES', BR: 'BRA', BS: 'BHS', JE: 'JEY', BY: 'BLR', BZ: 'BLZ', RU: 'RUS', RW: 'RWA', RS: 'SRB', TL: 'TLS', RE: 'REU', TM: 'TKM', TJ: 'TJK', RO: 'ROU', TK: 'TKL', GW: 'GNB', GU: 'GUM', GT: 'GTM', GS: 'SGS', GR: 'GRC', GQ: 'GNQ', GP: 'GLP', JP: 'JPN', GY: 'GUY', GG: 'GGY', GF: 'GUF', GE: 'GEO', GD: 'GRD', GB: 'GBR', GA: 'GAB', SV: 'SLV', GN: 'GIN', GM: 'GMB', GL: 'GRL', GI: 'GIB', GH: 'GHA', OM: 'OMN', TN: 'TUN', JO: 'JOR', HR: 'HRV', HT: 'HTI', HU: 'HUN', HK: 'HKG', HN: 'HND', HM: 'HMD', VE: 'VEN', PR: 'PRI', PS: 'PSE', PW: 'PLW', PT: 'PRT', SJ: 'SJM', PY: 'PRY', IQ: 'IRQ', PA: 'PAN', PF: 'PYF', PG: 'PNG', PE: 'PER', PK: 'PAK', PH: 'PHL', PN: 'PCN', PL: 'POL', PM: 'SPM', ZM: 'ZMB', EH: 'ESH', EE: 'EST', EG: 'EGY', ZA: 'ZAF', EC: 'ECU', IT: 'ITA', VN: 'VNM', SB: 'SLB', ET: 'ETH', SO: 'SOM', ZW: 'ZWE', SA: 'SAU', ES: 'ESP', ER: 'ERI', ME: 'MNE', MD: 'MDA', MG: 'MDG', MF: 'MAF', MA: 'MAR', MC: 'MCO', UZ: 'UZB', MM: 'MMR', ML: 'MLI', MO: 'MAC', MN: 'MNG', MH: 'MHL', MK: 'MKD', MU: 'MUS', MT: 'MLT', MW: 'MWI', MV: 'MDV', MQ: 'MTQ', MP: 'MNP', MS: 'MSR', OR: 'SEÑ', IM: 'IMN', UG: 'UGA', TZ: 'TZA', IS: 'MYS', MX: 'MEX', IL: 'ISR', FR: 'FRA', IO: 'IOT', SH: 'SHN', FI: 'FIN', FJ: 'FJI', FK: 'FLK', FM: 'FSM', FO: 'FRO', NI: 'NIC', NL: 'NLD', NO: 'NOR', NA: 'NAM', VU: 'VUT', NC: 'NCL', NE: 'NER', NF: 'NFK', NG: 'NGA', NZ: 'NZL', NP: 'NPL', NR: 'NRU', NU: 'NIU', CK: 'COK', XK: 'XKX', CI: 'CIV', CH: 'CHE', CO: 'COL', CN: 'CHN', CM: 'CMR', CL: 'CHL', CC: 'CCK', CA: 'CAN', CG: 'COG', CF: 'CAF', CD: 'COD', CZ: 'CZE', CY: 'CYP', CX: 'CXR', CR: 'CRI', CW: 'CUW', CV: 'CPV', CU: 'CUB', SZ: 'SWZ', SY: 'SYR', SX: 'SXM', KG: 'KGZ', KE: 'KEN', SS: 'SSD', SR: 'SUR', KI: 'KIR', KH: 'KHM', KN: 'KNA', KM: 'COM', ST: 'STP', SK: 'SVK', KR: 'KOR', SI: 'SVN', KP: 'PRK', KW: 'KWT', SN: 'SEN', SM: 'SMR', SL: 'SLE', SC: 'SYC', KZ: 'KAZ', KY: 'CYM', SG: 'SGP', SE: 'SWE', SD: 'SDN', DO: 'DOM', DM: 'DMA', DJ: 'DJI', DK: 'DNK', VG: 'VGB', DE: 'DEU', YE: 'YEM', DZ: 'DZA', US: 'USA', UY: 'URY', YT: 'MYT', UM: 'UMI', LB: 'LBN', LC: 'LCA', LA: 'LAO', TV: 'TUV', TW: 'TWN', TT: 'TTO', TR: 'TUR', LK: 'LKA', LI: 'LIE', LV: 'LVA', TO: 'TON', LT: 'LTU', LU: 'LUX', LR: 'LBR', LS: 'LSO', TH: 'THA', TF: 'ATF', TG: 'TGO', TD: 'TCD', TC: 'TCA', LY: 'LBY', VA: 'VAT', VC: 'VCT', AE: 'ARE', AD: 'AND', AG: 'ATG', AF: 'AFG', AI: 'AIA', VI: 'VIR', IS: 'ISL', IR: 'IRN', AM: 'ARM', AL: 'ALB', AO: 'AGO', AQ: 'ATA', AS: 'ASM', AR: 'ARG', AU: 'AUS', AT: 'AUT', AW: 'ABW', IN: 'IND', AX: 'ALA', AZ: 'AZE', IE: 'IRL', ID: 'IDN', UA: 'UKR', QA: 'QAT', MZ: 'MOZ'}
|
||||
export const threeLetter = {BD: 'BGD', BE: 'BEL', BF: 'BFA', BG: 'BGR', BA: 'BIH', BB: 'BRB', WF: 'WLF', BL: 'BLM', BM: 'BMU', BN: 'BRN', BO: 'BOL', BH: 'BHR', BI: 'BDI', BJ: 'BEN', BT: 'BTN', JM: 'JAM', BV: 'BVT', BW: 'BWA', WS: 'WSM', BQ: 'BES', BR: 'BRA', BS: 'BHS', JE: 'JEY', BY: 'BLR', BZ: 'BLZ', RU: 'RUS', RW: 'RWA', RS: 'SRB', TL: 'TLS', RE: 'REU', TM: 'TKM', TJ: 'TJK', RO: 'ROU', TK: 'TKL', GW: 'GNB', GU: 'GUM', GT: 'GTM', GS: 'SGS', GR: 'GRC', GQ: 'GNQ', GP: 'GLP', JP: 'JPN', GY: 'GUY', GG: 'GGY', GF: 'GUF', GE: 'GEO', GD: 'GRD', GB: 'GBR', GA: 'GAB', SV: 'SLV', GN: 'GIN', GM: 'GMB', GL: 'GRL', GI: 'GIB', GH: 'GHA', OM: 'OMN', TN: 'TUN', JO: 'JOR', HR: 'HRV', HT: 'HTI', HU: 'HUN', HK: 'HKG', HN: 'HND', HM: 'HMD', VE: 'VEN', PR: 'PRI', PS: 'PSE', PW: 'PLW', PT: 'PRT', SJ: 'SJM', PY: 'PRY', IQ: 'IRQ', PA: 'PAN', PF: 'PYF', PG: 'PNG', PE: 'PER', PK: 'PAK', PH: 'PHL', PN: 'PCN', PL: 'POL', PM: 'SPM', ZM: 'ZMB', EH: 'ESH', EE: 'EST', EG: 'EGY', ZA: 'ZAF', EC: 'ECU', IT: 'ITA', VN: 'VNM', SB: 'SLB', ET: 'ETH', SO: 'SOM', ZW: 'ZWE', SA: 'SAU', ES: 'ESP', ER: 'ERI', ME: 'MNE', MD: 'MDA', MG: 'MDG', MF: 'MAF', MA: 'MAR', MC: 'MCO', UZ: 'UZB', MM: 'MMR', ML: 'MLI', MO: 'MAC', MN: 'MNG', MH: 'MHL', MK: 'MKD', MU: 'MUS', MT: 'MLT', MW: 'MWI', MV: 'MDV', MQ: 'MTQ', MP: 'MNP', MS: 'MSR', OR: 'SEÑ', IM: 'IMN', UG: 'UGA', TZ: 'TZA', IS: 'MYS', MX: 'MEX', IL: 'ISR', FR: 'FRA', IO: 'IOT', SH: 'SHN', FI: 'FIN', FJ: 'FJI', FK: 'FLK', FM: 'FSM', FO: 'FRO', NI: 'NIC', NL: 'NLD', NO: 'NOR', NA: 'NAM', VU: 'VUT', NC: 'NCL', NE: 'NER', NF: 'NFK', NG: 'NGA', NZ: 'NZL', NP: 'NPL', NR: 'NRU', NU: 'NIU', CK: 'COK', XK: 'XKX', CI: 'CIV', CH: 'CHE', CO: 'COL', CN: 'CHN', CM: 'CMR', CL: 'CHL', CC: 'CCK', CA: 'CAN', CG: 'COG', CF: 'CAF', CD: 'COD', CZ: 'CZE', CY: 'CYP', CX: 'CXR', CR: 'CRI', CW: 'CUW', CV: 'CPV', CU: 'CUB', SZ: 'SWZ', SY: 'SYR', SX: 'SXM', KG: 'KGZ', KE: 'KEN', SS: 'SSD', SR: 'SUR', KI: 'KIR', KH: 'KHM', KN: 'KNA', KM: 'COM', ST: 'STP', SK: 'SVK', KR: 'KOR', SI: 'SVN', KP: 'PRK', KW: 'KWT', SN: 'SEN', SM: 'SMR', SL: 'SLE', SC: 'SYC', KZ: 'KAZ', KY: 'CYM', SG: 'SGP', SE: 'SWE', SD: 'SDN', DO: 'DOM', DM: 'DMA', DJ: 'DJI', DK: 'DNK', VG: 'VGB', DE: 'DEU', YE: 'YEM', DZ: 'DZA', US: 'USA', UY: 'URY', YT: 'MYT', UM: 'UMI', LB: 'LBN', LC: 'LCA', LA: 'LAO', TV: 'TUV', TW: 'TWN', TT: 'TTO', TR: 'TUR', LK: 'LKA', LI: 'LIE', LV: 'LVA', TO: 'TON', LT: 'LTU', LU: 'LUX', LR: 'LBR', LS: 'LSO', TH: 'THA', TF: 'ATF', TG: 'TGO', TD: 'TCD', TC: 'TCA', LY: 'LBY', VA: 'VAT', VC: 'VCT', AE: 'ARE', AD: 'AND', AG: 'ATG', AF: 'AFG', AI: 'AIA', VI: 'VIR', IS: 'ISL', IR: 'IRN', AM: 'ARM', AL: 'ALB', AO: 'AGO', AQ: 'ATA', AS: 'ASM', AR: 'ARG', AU: 'AUS', AT: 'AUT', AW: 'ABW', IN: 'IND', AX: 'ALA', AZ: 'AZE', IE: 'IRL', ID: 'IDN', UA: 'UKR', QA: 'QAT', MZ: 'MOZ'}
|
||||
export default {
|
||||
AC: 'Ascension Island',
|
||||
AD: 'Andorra',
|
||||
|
|
|
|||
|
|
@ -147,4 +147,11 @@
|
|||
height: 100vh;
|
||||
overflow-y: hidden;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.svg-map {
|
||||
&__location {
|
||||
fill: #ddd !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue