bfg-common 1.2.97 → 1.2.99
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -13,6 +13,15 @@
|
|
|
13
13
|
</template>
|
|
14
14
|
|
|
15
15
|
<script setup lang="ts">
|
|
16
|
+
const props = withDefaults(
|
|
17
|
+
defineProps<{
|
|
18
|
+
testId?: string | number
|
|
19
|
+
}>(),
|
|
20
|
+
{
|
|
21
|
+
testId: '',
|
|
22
|
+
}
|
|
23
|
+
)
|
|
24
|
+
|
|
16
25
|
const emits = defineEmits<{
|
|
17
26
|
(event: 'click'): void
|
|
18
27
|
}>()
|
|
@@ -23,12 +32,16 @@ interface UI_I_PositionEl {
|
|
|
23
32
|
}
|
|
24
33
|
const popoverPosition = ref<UI_I_PositionEl | null>(null)
|
|
25
34
|
|
|
26
|
-
const
|
|
35
|
+
const uniqueId = `popover${useUniqueId()}`
|
|
36
|
+
|
|
37
|
+
const id = computed<string>(() =>
|
|
38
|
+
props.testId !== '' ? `popover${props.testId}` : uniqueId
|
|
39
|
+
)
|
|
27
40
|
|
|
28
41
|
const handleClick = (): void => {
|
|
29
42
|
emits('click')
|
|
30
43
|
|
|
31
|
-
const elem = document.getElementById(id) as HTMLDivElement
|
|
44
|
+
const elem = document.getElementById(id.value) as HTMLDivElement
|
|
32
45
|
const { x, y, height, width } = elem.getBoundingClientRect()
|
|
33
46
|
|
|
34
47
|
popoverPosition.value = {
|
|
@@ -278,12 +278,15 @@
|
|
|
278
278
|
>
|
|
279
279
|
<div
|
|
280
280
|
v-if="item2.data?.name === 'doubleArrows'"
|
|
281
|
-
|
|
282
|
-
:class="
|
|
283
|
-
'arrow-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
281
|
+
:id="`show-info-${item[0].id}`"
|
|
282
|
+
:class="[
|
|
283
|
+
'double-arrow-wrap',
|
|
284
|
+
{
|
|
285
|
+
'arrow-selected':
|
|
286
|
+
isShowHiddenInfo &&
|
|
287
|
+
item2.id === selectedRow,
|
|
288
|
+
},
|
|
289
|
+
]"
|
|
287
290
|
@click.prevent.stop="
|
|
288
291
|
doubleArrowClick(item2, item)
|
|
289
292
|
"
|
|
@@ -291,12 +294,14 @@
|
|
|
291
294
|
<atoms-the-icon
|
|
292
295
|
v-if="item2.data?.name === 'doubleArrows'"
|
|
293
296
|
name="doubleArrows"
|
|
294
|
-
class="
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
297
|
+
:class="[
|
|
298
|
+
'double-arrow',
|
|
299
|
+
{
|
|
300
|
+
'arrow-selected':
|
|
301
|
+
isShowHiddenInfo &&
|
|
302
|
+
item2.id === selectedRow,
|
|
303
|
+
},
|
|
304
|
+
]"
|
|
300
305
|
/>
|
|
301
306
|
</div>
|
|
302
307
|
<span
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div ref="chartsView">
|
|
2
|
+
<div ref="chartsView" class="advanced-graph-container">
|
|
3
|
+
<div v-if="isLoading" class="graphic-loader-block">
|
|
4
|
+
<div class="spinner"></div>
|
|
5
|
+
<p>{{ localization.retrievingData }}...</p>
|
|
6
|
+
</div>
|
|
3
7
|
<template v-if="!props.loading && chartData">
|
|
4
8
|
<common-graph
|
|
5
9
|
:chart="chart"
|
|
@@ -36,6 +40,8 @@ const props = defineProps<{
|
|
|
36
40
|
selectedChartType: string
|
|
37
41
|
}>()
|
|
38
42
|
|
|
43
|
+
const isLoading = ref<boolean>(true)
|
|
44
|
+
|
|
39
45
|
const chartData = ref<I_LineGraph | null>(null)
|
|
40
46
|
|
|
41
47
|
const isFullScreen = ref<boolean>(false)
|
|
@@ -50,6 +56,14 @@ const chartCallback = (newValue: any): void => {
|
|
|
50
56
|
newValue && (chart.value = newValue)
|
|
51
57
|
}
|
|
52
58
|
|
|
59
|
+
watch(
|
|
60
|
+
chart,
|
|
61
|
+
(newValue) => {
|
|
62
|
+
isLoading.value = !newValue?.hasLoaded
|
|
63
|
+
},
|
|
64
|
+
{ immediate: true, deep: true }
|
|
65
|
+
)
|
|
66
|
+
|
|
53
67
|
let dateFormat = ''
|
|
54
68
|
|
|
55
69
|
const startChart = (): void => {
|
|
@@ -78,7 +92,10 @@ const startChart = (): void => {
|
|
|
78
92
|
watch(
|
|
79
93
|
() => props.data,
|
|
80
94
|
(newValue) => {
|
|
81
|
-
if (!newValue)
|
|
95
|
+
if (!newValue) {
|
|
96
|
+
isLoading.value = true
|
|
97
|
+
return
|
|
98
|
+
}
|
|
82
99
|
|
|
83
100
|
startChart()
|
|
84
101
|
},
|
|
@@ -138,4 +155,24 @@ watch(
|
|
|
138
155
|
)
|
|
139
156
|
</script>
|
|
140
157
|
|
|
141
|
-
<style scoped lang="scss"
|
|
158
|
+
<style scoped lang="scss">
|
|
159
|
+
.advanced-graph-container {
|
|
160
|
+
position: relative;
|
|
161
|
+
min-height: 400px;
|
|
162
|
+
|
|
163
|
+
.graphic-loader-block {
|
|
164
|
+
background-color: var(--loader-bg-color);
|
|
165
|
+
height: 100%;
|
|
166
|
+
display: flex;
|
|
167
|
+
flex-direction: column;
|
|
168
|
+
align-items: center;
|
|
169
|
+
justify-content: center;
|
|
170
|
+
position: absolute;
|
|
171
|
+
top: 0;
|
|
172
|
+
left: 0;
|
|
173
|
+
right: 0;
|
|
174
|
+
bottom: 0;
|
|
175
|
+
z-index: 1;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
</style>
|