@@ -455,44 +455,53 @@ watch(
455455
456456< template>
457457 < Flex direction= " column" justify= " start" gap= " 8" wide : class = " $style.wrapper" >
458- < Flex
459- @click= " handleChangeChartView"
460- align= " center"
461- gap= " 12"
462- : class = " $style.chart_selector"
463- : style= " {
464- background: `linear-gradient(to ${chartView === 'countries' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
465- }"
466- >
467- < Icon name= " earth" size= " 14" : style= " { fill: `${chartView === 'countries' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }" / >
468-
469- < Icon name= " city" size= " 14" : style= " { fill: `${chartView === 'cities' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }" / >
470- < / Flex>
471-
472- < Tooltip v- if = " chartView === 'cities'" position= " start" : class = " $style.chart_info" >
473- < Icon name= " info" size= " 16" color= " yellow" / >
474-
475- < template #content>
476- < Flex align= " center" gap= " 2" : style= " { width: '200px' }" >
477- < Text size= " 12" weight= " 600" color= " secondary" >
478- Somewhere in ..
479- < Text size= " 12" weight= " 400" color= " secondary" >
480- means that it was not possible to determine the exact location.
481- < / Text >
482- < / Text >
483- < / Flex>
484- < / template>
485- < / Tooltip>
486-
487- < Flex ref= " chartEl" : class = " $style.chart" / >
488-
489- < Flex v- if = " isLoading" align= " center" direction= " column" gap= " 8" : class = " $style.loader" >
490- < svg xmlns= " http://www.w3.org/2000/svg" width= " 80" height= " 80" viewBox= " 0 0 512 512" >
491- < path id= " france-path" fill= " transparent" : d= " loaderPath" / >
492- < / svg>
493-
494- < Text size= " 12" color= " secondary" > Loading map..< / Text >
495- < / Flex>
458+ < Flex
459+ @click= " handleChangeChartView"
460+ align= " center"
461+ gap= " 12"
462+ : class = " $style.chart_selector"
463+ : style= " {
464+ background: `linear-gradient(to ${chartView === 'countries' ? 'right' : 'left'}, var(--op-5) 50%, transparent 50%)`,
465+ }"
466+ >
467+ < Icon
468+ name= " earth"
469+ size= " 14"
470+ : style= " { fill: `${chartView === 'countries' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
471+ / >
472+
473+ < Icon
474+ name= " city"
475+ size= " 14"
476+ : style= " { fill: `${chartView === 'cities' ? 'var(--mint)' : 'var(--txt-tertiary)'}` }"
477+ / >
478+ < / Flex>
479+
480+ < Tooltip v- if = " chartView === 'cities'" position= " start" : class = " $style.chart_info" >
481+ < Icon name= " info" size= " 16" color= " yellow" / >
482+
483+ < template #content>
484+ < Flex align= " center" gap= " 2" : style= " { width: '200px' }" >
485+ < Text size= " 12" weight= " 600" color= " secondary" >
486+ " Somewhere in ..."
487+ < Text size= " 12" weight= " 400" color= " secondary" >
488+ means that it was not possible to determine the exact location.
489+ < / Text >
490+ < / Text >
491+
492+ < / Flex>
493+ < / template>
494+ < / Tooltip>
495+
496+ < Flex ref= " chartEl" : class = " $style.chart" / >
497+
498+ < Flex v- if = " isLoading" align= " center" direction= " column" gap= " 8" : class = " $style.loader" >
499+ < svg xmlns= " http://www.w3.org/2000/svg" width= " 80" height= " 80" viewBox= " 0 0 512 512" >
500+ < path id= " france-path" fill= " transparent" : d= " loaderPath" / >
501+ < / svg>
502+
503+ < Text size= " 12" color= " secondary" > Loading map..< / Text >
504+ < / Flex>
496505 < / Flex>
497506< / template>
498507
0 commit comments