gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 修复 echarts 部分问题，完善部分功能

Browse Source
This commit is contained in:
@changcode
2022-07-12 20:13:51 +08:00
parent 603aa49d33
commit b1891dc541
9 changed files with 191 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/assets/css/components/views/charts/NetworkOverviewDdosDetection.scss
View File

@@ -1,8 +1,9 @@
.ddos-detection { .ddos-detection {
display: flex; display: flex;
height: 100%; height: 100%;
width: 85%; padding: 0 20px;
margin: auto; border: 1px solid #E2E5EC;
border-radius: 4px;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
.ddos-detection-type { .ddos-detection-type {

19
src/assets/css/components/views/charts/NetworkOverviewLine.scss
View File

@@ -2,6 +2,25 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
border: 1px solid #E2E5EC;
border-radius: 4px;
.chart-drawing {
div:nth-of-type(2) {
.cn-chart-tooltip {
display: flex;
justify-content: space-between;
.cn-chart-tooltip-box {
.cn-chart-tooltip__color.cn-chart-tooltip-value {
font-family: NotoSansHans-Medium;
font-size: 12px;
color: #353636;
line-height: 12px;
font-weight: 500;
}
}
}
}
}
#chart { #chart {
width: 1288px; width: 1288px;
height: 340px; height: 340px;

6
src/assets/css/components/views/charts/NetworkOverviewPerformanceEvent.scss
View File

@@ -1,9 +1,11 @@
.performance-event { .performance-event {
width: 100%; height: 100%;
border: 1px solid #E2E5EC;
border-radius: 4px;
.performance-event-pie { .performance-event-pie {
width: 100%; width: 100%;
div { div {
height: 175px; height: 165px;
width: 324px; width: 324px;
} }
.performance-event-pie-hr { .performance-event-pie-hr {

2
src/utils/constants.js
View File

@@ -195,6 +195,8 @@ export const chartColor2 = ['#86B565', '#A37FA7', '#EFAFC7', '#EFC48F', '#B4B1A8
export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#98709B'] export const chartColor3 = ['#00A7AB', '#7FA054', '#35ADDA', '#E48F3E', '#98709B']
export const chartColor4 = ['#E5F6F6', '#F2F6EE', '#EBF7FC', '#FCF4EB', '#F5F1F5']
export const iso36112 = { export const iso36112 = {
[storageKey.iso36112Capital]: 'data/countriesWithCapital', [storageKey.iso36112Capital]: 'data/countriesWithCapital',
[storageKey.iso36112WorldLow]: 'worldChinaLow', [storageKey.iso36112WorldLow]: 'worldChinaLow',

25
src/views/charts/charts/tools.js
View File

@@ -459,3 +459,28 @@ export function categoryBarTooltipFormatter (params, type) {
str += '</div>' str += '</div>'
return str return str
} }
export function stackedLineTooltipFormatter (params) {
let str = '<div>'
params.forEach((item, i) => {
const tData = item.data[0]
if (i === 0) {
str += '<div style="margin-bottom: 5px">'
str += dateFormatByAppearance(tData)
str += '</div>'
}
str += '<div class="cn-chart-tooltip">'
str += '<span class="cn-chart-tooltip-box">'
str += item.marker
str += `<span class="cn-chart-tooltip-content">
${item.seriesName}
</span>`
str += '</span>'
str += `<span class="cn-chart-tooltip-value cn-chart-tooltip__color">
${unitConvert(item.data[1], 'number').join(' ')}
</span>`
str += '</div>'
})
str += '</div>'
return str
}

2
src/views/charts2/Chart.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="cn-chart" style="background-color: lightgray;height: 100%;"> <div class="cn-chart" style="height: 100%;">
<loading :loading="loading"></loading> <loading :loading="loading"></loading>
<chart-no-data v-if="isNoData"></chart-no-data> <chart-no-data v-if="isNoData"></chart-no-data>
<network-overview-line <network-overview-line

163
src/views/charts2/charts/NetworkOverviewLine.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="line"> <div class="line">
<div id="chart"></div> <div class="chart-drawing" id="chart"></div>
<div class="line-select"> <div class="line-select">
<div class="line-select-metric"> <div class="line-select-metric">
<span>{{$t('network.metric')}}:</span> <span>{{$t('network.metric')}}:</span>
@@ -33,7 +33,7 @@
</div> </div>
<div class="line-value"> <div class="line-value">
<div class="line-value-mpackets" v-for="item in mpackets" :key="item"> <div class="line-value-mpackets" v-for="item in mpackets" :key="item">
<span>{{item}} </span><span>mpackets/s</span> <span>{{unitConvert(item, unitTypes.number)[0]}}</span>{{unitConvert(item, unitTypes.number)[1]}}<span>packets/s</span>
</div> </div>
</div> </div>
</div> </div>
@@ -43,7 +43,9 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { stackedLineChartOption } from '@/views/charts2/charts/options/pie' import { stackedLineChartOption } from '@/views/charts2/charts/options/pie'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants.js'
import { shallowRef } from 'vue' import { shallowRef } from 'vue'
import { stackedLineTooltipFormatter } from '@/views/charts/charts/tools'
export default { export default {
name: 'NetworkOverviewLine', name: 'NetworkOverviewLine',
props: { props: {
@@ -86,8 +88,9 @@ export default {
} }
], ],
value2: '', value2: '',
mpackets: [42, 1, 2, 1, 12], mpackets: [4212211, 111, 112, 111, 1211],
unitConvert, unitConvert,
unitTypes,
chartDateObject: [] chartDateObject: []
} }
}, },
@@ -101,15 +104,15 @@ export default {
dateArr: [ dateArr: [
{ {
stat_time: 1652544000000, stat_time: 1652544000000,
rate: 100 rate: 10000000
}, },
{ {
stat_time: 1652544300000, stat_time: 1652544300000,
rate: 50 rate: 20000000
}, },
{ {
stat_time: 1652544600000, stat_time: 1652544600000,
rate: 20 rate: 30000000
}, },
{ {
stat_time: 1652544900000, stat_time: 1652544900000,
@@ -117,123 +120,123 @@ export default {
}, },
{ {
stat_time: 1652545200000, stat_time: 1652545200000,
rate: 45 rate: 40000000
}, },
{ {
stat_time: 1652545500000, stat_time: 1652545500000,
rate: 100 rate: 11111111
}, },
{ {
stat_time: 1652545800000, stat_time: 1652545800000,
rate: 27 rate: 11111111
}, },
{ {
stat_time: 1652546100000, stat_time: 1652546100000,
rate: 45 rate: 11111111
}, },
{ {
stat_time: 1652546400000, stat_time: 1652546400000,
rate: 67 rate: 11111111
}, },
{ {
stat_time: 1652546700000, stat_time: 1652546700000,
rate: 87 rate: 8000000
}, },
{ {
stat_time: 1652547000000, stat_time: 1652547000000,
rate: 32 rate: 11111111
}, },
{ {
stat_time: 1652547300000, stat_time: 1652547300000,
rate: 56 rate: 11111111
}, },
{ {
stat_time: 1652547600000, stat_time: 1652547600000,
rate: 25 rate: 11111111
}, },
{ {
stat_time: 1652547900000, stat_time: 1652547900000,
rate: 56 rate: 11111111
}, },
{ {
stat_time: 1652548200000, stat_time: 1652548200000,
rate: 15 rate: 9000000
}, },
{ {
stat_time: 1652548500000, stat_time: 1652548500000,
rate: 54 rate: 11111111
}, },
{ {
stat_time: 1652548800000, stat_time: 1652548800000,
rate: 56 rate: 11111111
}, },
{ {
stat_time: 1652549100000, stat_time: 1652549100000,
rate: 76 rate: 11111111
}, },
{ {
stat_time: 1652549400000, stat_time: 1652549400000,
rate: 79 rate: 11111111
}, },
{ {
stat_time: 1652549700000, stat_time: 1652549700000,
rate: 76 rate: 11111111
}, },
{ {
stat_time: 1652550000000, stat_time: 1652550000000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652550300000, stat_time: 1652550300000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652550600000, stat_time: 1652550600000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652550900000, stat_time: 1652550900000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652551200000, stat_time: 1652551200000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652551500000, stat_time: 1652551500000,
rate: 65 rate: 11111111
}, },
{ {
stat_time: 1652551800000, stat_time: 1652551800000,
rate: 66 rate: 11111111
}, },
{ {
stat_time: 1652552100000, stat_time: 1652552100000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652552400000, stat_time: 1652552400000,
rate: 23 rate: 11111111
}, },
{ {
stat_time: 1652552700000, stat_time: 1652552700000,
rate: 32 rate: 11111111
}, },
{ {
stat_time: 1652553000000, stat_time: 1652553000000,
rate: 54 rate: 11111111
}, },
{ {
stat_time: 1652553300000, stat_time: 1652553300000,
rate: 32 rate: 11111111
}, },
{ {
stat_time: 1652553600000, stat_time: 1652553600000,
rate: 43 rate: 11111111
}, },
{ {
stat_time: 1652553900000, stat_time: 1652553900000,
rate: 46 rate: 11111111
}, },
{ {
stat_time: 1652554200000, stat_time: 1652554200000,
@@ -241,7 +244,7 @@ export default {
}, },
{ {
stat_time: 1652554500000, stat_time: 1652554500000,
rate: 34 rate: 11111111
}, },
{ {
stat_time: 1652554800000, stat_time: 1652554800000,
@@ -469,11 +472,11 @@ export default {
}, },
{ {
stat_time: 1652571600000, stat_time: 1652571600000,
rate: 13441235 rate: 33441235
}, },
{ {
stat_time: 1652571900000, stat_time: 1652571900000,
rate: 13409372 rate: 33409372
}, },
{ {
stat_time: 1652572200000, stat_time: 1652572200000,
@@ -1257,11 +1260,11 @@ export default {
dateArr: [ dateArr: [
{ {
stat_time: 1652544000000, stat_time: 1652544000000,
rate: 59770054 rate: 11000000
}, },
{ {
stat_time: 1652544300000, stat_time: 1652544300000,
rate: 57705198 rate: 97705191
}, },
{ {
stat_time: 1652544600000, stat_time: 1652544600000,
@@ -1269,11 +1272,11 @@ export default {
}, },
{ {
stat_time: 1652544900000, stat_time: 1652544900000,
rate: 53932331 rate: 23932331
}, },
{ {
stat_time: 1652545200000, stat_time: 1652545200000,
rate: 50820084 rate: 70820084
}, },
{ {
stat_time: 1652545500000, stat_time: 1652545500000,
@@ -1285,7 +1288,7 @@ export default {
}, },
{ {
stat_time: 1652546100000, stat_time: 1652546100000,
rate: 45092019 rate: 55092019
}, },
{ {
stat_time: 1652546400000, stat_time: 1652546400000,
@@ -1309,7 +1312,7 @@ export default {
}, },
{ {
stat_time: 1652547900000, stat_time: 1652547900000,
rate: 32593269 rate: 42593269
}, },
{ {
stat_time: 1652548200000, stat_time: 1652548200000,
@@ -1605,7 +1608,7 @@ export default {
}, },
{ {
stat_time: 1652570100000, stat_time: 1652570100000,
rate: 11730266 rate: 41730266
}, },
{ {
stat_time: 1652570400000, stat_time: 1652570400000,
@@ -1625,11 +1628,11 @@ export default {
}, },
{ {
stat_time: 1652571600000, stat_time: 1652571600000,
rate: 13441235 rate: 23441235
}, },
{ {
stat_time: 1652571900000, stat_time: 1652571900000,
rate: 13409372 rate: 23409372
}, },
{ {
stat_time: 1652572200000, stat_time: 1652572200000,
@@ -2413,7 +2416,7 @@ export default {
dateArr: [ dateArr: [
{ {
stat_time: 1652544000000, stat_time: 1652544000000,
rate: 59770054 rate: 12000000
}, },
{ {
stat_time: 1652544300000, stat_time: 1652544300000,
@@ -2421,15 +2424,15 @@ export default {
}, },
{ {
stat_time: 1652544600000, stat_time: 1652544600000,
rate: 54907153 rate: 84907153
}, },
{ {
stat_time: 1652544900000, stat_time: 1652544900000,
rate: 53932331 rate: 83932331
}, },
{ {
stat_time: 1652545200000, stat_time: 1652545200000,
rate: 50820084 rate: 60820084
}, },
{ {
stat_time: 1652545500000, stat_time: 1652545500000,
@@ -2441,7 +2444,7 @@ export default {
}, },
{ {
stat_time: 1652546100000, stat_time: 1652546100000,
rate: 45092019 rate: 25092019
}, },
{ {
stat_time: 1652546400000, stat_time: 1652546400000,
@@ -2449,7 +2452,7 @@ export default {
}, },
{ {
stat_time: 1652546700000, stat_time: 1652546700000,
rate: 42635307 rate: 62635307
}, },
{ {
stat_time: 1652547000000, stat_time: 1652547000000,
@@ -2761,7 +2764,7 @@ export default {
}, },
{ {
stat_time: 1652570100000, stat_time: 1652570100000,
rate: 11730266 rate: 21730266
}, },
{ {
stat_time: 1652570400000, stat_time: 1652570400000,
@@ -2781,11 +2784,11 @@ export default {
}, },
{ {
stat_time: 1652571600000, stat_time: 1652571600000,
rate: 13441235 rate: 73441235
}, },
{ {
stat_time: 1652571900000, stat_time: 1652571900000,
rate: 13409372 rate: 73409372
}, },
{ {
stat_time: 1652572200000, stat_time: 1652572200000,
@@ -3569,23 +3572,23 @@ export default {
dateArr: [ dateArr: [
{ {
stat_time: 1652544000000, stat_time: 1652544000000,
rate: 59770054 rate: 13000000
}, },
{ {
stat_time: 1652544300000, stat_time: 1652544300000,
rate: 57705198 rate: 37705198
}, },
{ {
stat_time: 1652544600000, stat_time: 1652544600000,
rate: 54907153 rate: 64907153
}, },
{ {
stat_time: 1652544900000, stat_time: 1652544900000,
rate: 53932331 rate: 93932331
}, },
{ {
stat_time: 1652545200000, stat_time: 1652545200000,
rate: 50820084 rate: 30820084
}, },
{ {
stat_time: 1652545500000, stat_time: 1652545500000,
@@ -3597,7 +3600,7 @@ export default {
}, },
{ {
stat_time: 1652546100000, stat_time: 1652546100000,
rate: 45092019 rate: 75092019
}, },
{ {
stat_time: 1652546400000, stat_time: 1652546400000,
@@ -3605,7 +3608,7 @@ export default {
}, },
{ {
stat_time: 1652546700000, stat_time: 1652546700000,
rate: 42635307 rate: 22635307
}, },
{ {
stat_time: 1652547000000, stat_time: 1652547000000,
@@ -3621,7 +3624,7 @@ export default {
}, },
{ {
stat_time: 1652547900000, stat_time: 1652547900000,
rate: 32593269 rate: 72593269
}, },
{ {
stat_time: 1652548200000, stat_time: 1652548200000,
@@ -3917,7 +3920,7 @@ export default {
}, },
{ {
stat_time: 1652570100000, stat_time: 1652570100000,
rate: 11730266 rate: 91730266
}, },
{ {
stat_time: 1652570400000, stat_time: 1652570400000,
@@ -3937,11 +3940,11 @@ export default {
}, },
{ {
stat_time: 1652571600000, stat_time: 1652571600000,
rate: 13441235 rate: 93441235
}, },
{ {
stat_time: 1652571900000, stat_time: 1652571900000,
rate: 13409372 rate: 93409372
}, },
{ {
stat_time: 1652572200000, stat_time: 1652572200000,
@@ -4725,19 +4728,19 @@ export default {
dateArr: [ dateArr: [
{ {
stat_time: 1652544000000, stat_time: 1652544000000,
rate: 59770054 rate: 14000000
}, },
{ {
stat_time: 1652544300000, stat_time: 1652544300000,
rate: 57705198 rate: 77705198
}, },
{ {
stat_time: 1652544600000, stat_time: 1652544600000,
rate: 54907153 rate: 24907153
}, },
{ {
stat_time: 1652544900000, stat_time: 1652544900000,
rate: 53932331 rate: 33932331
}, },
{ {
stat_time: 1652545200000, stat_time: 1652545200000,
@@ -4753,7 +4756,7 @@ export default {
}, },
{ {
stat_time: 1652546100000, stat_time: 1652546100000,
rate: 45092019 rate: 15092019
}, },
{ {
stat_time: 1652546400000, stat_time: 1652546400000,
@@ -4761,7 +4764,7 @@ export default {
}, },
{ {
stat_time: 1652546700000, stat_time: 1652546700000,
rate: 42635307 rate: 82635307
}, },
{ {
stat_time: 1652547000000, stat_time: 1652547000000,
@@ -4777,7 +4780,7 @@ export default {
}, },
{ {
stat_time: 1652547900000, stat_time: 1652547900000,
rate: 32593269 rate: 12593269
}, },
{ {
stat_time: 1652548200000, stat_time: 1652548200000,
@@ -5073,7 +5076,7 @@ export default {
}, },
{ {
stat_time: 1652570100000, stat_time: 1652570100000,
rate: 11730266 rate: 31730266
}, },
{ {
stat_time: 1652570400000, stat_time: 1652570400000,
@@ -5093,11 +5096,11 @@ export default {
}, },
{ {
stat_time: 1652571600000, stat_time: 1652571600000,
rate: 13441235 rate: 63441235
}, },
{ {
stat_time: 1652571900000, stat_time: 1652571900000,
rate: 13409372 rate: 63409372
}, },
{ {
stat_time: 1652572200000, stat_time: 1652572200000,
@@ -5884,6 +5887,10 @@ export default {
this.chartOption.series.forEach((t, i) => { this.chartOption.series.forEach((t, i) => {
t.data = this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate]) t.data = this.chartDateObject[i].dateArr.map(t => [t.stat_time, t.rate])
}) })
this.chartOption.tooltip.formatter = (params) => {
const str = stackedLineTooltipFormatter(params)
return str
}
this.myChart.setOption(this.chartOption) this.myChart.setOption(this.chartOption)
}, },
// 点击前，高亮legend个数 // 点击前，高亮legend个数

4
src/views/charts2/charts/NetworkOverviewPerformanceEvent.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<div class="performance-event"> <div class="performance-event">
<div class="performance-event-pie"> <div class="performance-event-pie">
<div id="chart1"></div> <div class="chart-drawing" id="chart1"></div>
<div class="performance-event-pie-hr"></div> <div class="performance-event-pie-hr"></div>
<div id="chart2"></div> <div class="chart-drawing" id="chart2"></div>
</div> </div>
<el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button> <el-button class="pie-button" size="small">{{$t('network.dashboards')}}<i class="cn-icon cn-icon-arrow-right"></i></el-button>
</div> </div>

64
src/views/charts2/charts/options/pie.js
View File

@@ -1,4 +1,5 @@
import { chartColor1, chartColor2, chartColor3 } from '@/utils/constants' import { chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import * as echarts from 'echarts' import * as echarts from 'echarts'
export const pieChartOption1 = { export const pieChartOption1 = {
@@ -110,13 +111,7 @@ export const pieChartOption2 = {
export const stackedLineChartOption = { export const stackedLineChartOption = {
color: chartColor3, color: chartColor3,
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis'
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
}, },
legend: { legend: {
type: 'scroll', type: 'scroll',
@@ -149,16 +144,24 @@ export const stackedLineChartOption = {
], ],
yAxis: [ yAxis: [
{ {
type: 'value' type: 'value',
axisLabel: {
formatter: function (value) {
return unitConvert(value, unitTypes.number).join('')
}
}
} }
], ],
series: [ series: [
{ {
name: 'Total', name: 'Total',
type: 'line', type: 'line',
stack: 'Total',
symbol: 'circle', symbol: 'circle',
hoverAnimation: false,
smooth: true, smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(0, value[0])
},
showSymbol: false, showSymbol: false,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@@ -185,9 +188,11 @@ export const stackedLineChartOption = {
{ {
name: 'Inbound', name: 'Inbound',
type: 'line', type: 'line',
stack: 'Total',
symbol: 'circle', symbol: 'circle',
smooth: true, smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(1, value[0])
},
showSymbol: false, showSymbol: false,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@@ -214,9 +219,11 @@ export const stackedLineChartOption = {
{ {
name: 'Outbound', name: 'Outbound',
type: 'line', type: 'line',
stack: 'Total',
symbol: 'circle', symbol: 'circle',
smooth: true, smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(2, value[0])
},
showSymbol: false, showSymbol: false,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@@ -243,9 +250,11 @@ export const stackedLineChartOption = {
{ {
name: 'Internal', name: 'Internal',
type: 'line', type: 'line',
stack: 'Total',
symbol: 'circle', symbol: 'circle',
smooth: true, smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(3, value[0])
},
showSymbol: false, showSymbol: false,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@@ -272,9 +281,11 @@ export const stackedLineChartOption = {
{ {
name: 'Other', name: 'Other',
type: 'line', type: 'line',
stack: 'Total',
symbol: 'circle', symbol: 'circle',
smooth: true, smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(4, value[0])
},
showSymbol: false, showSymbol: false,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
@@ -300,3 +311,28 @@ export const stackedLineChartOption = {
} }
] ]
} }
const sizes = [3, 6, 8, 9, 10]
function symbolSizeSortChange (index, time) {
const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
totalData[2] = 0
inboundData[2] = 1
outboundData[2] = 2
internalData[2] = 3
otherData[2] = 4
const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
// stackedLineChartOption.series[sortIndex].itemStyle = {
// emphasis: {
// borderColor: chartColor4[sortIndex],
// borderWidth: 2,
// shadowColor: chartColor4[sortIndex],
// shadowBlur: sizes[sortIndex] + 2
// }
// }
return sizes[sortIndex]
}