Skip to content

Commit 620a8e2

Browse files
rcmaiolinircmaiolini
authored
Merge pull request #974 from ercole-io/fix-bugs
Fix bugs
2 parents 05d1719 + cadde1c commit 620a8e2

File tree

7 files changed

+258
-463
lines changed

7 files changed

+258
-463
lines changed

‎src/components/cloud/RecommendationsCharts.vue‎

Lines changed: 201 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,49 @@
99
:chartSeries="getSeries('category')"
1010
chartHeight="350"
1111
/>
12+
13+
<b-message
14+
v-model="showExtraCategory"
15+
size="is-small"
16+
type="is-light"
17+
class="mt-3 ml-3"
18+
v-if="showExtraCategory"
19+
>
20+
<template #header>
21+
<span
22+
class="is-size-6"
23+
:style="{ color: messageColor }"
24+
style="line-height: 38px"
25+
>
26+
<b-icon
27+
icon="circle"
28+
size="is-small"
29+
style="vertical-align: baseline"
30+
/>
31+
{{ extraContent[0].category }}
32+
</span>
33+
</template>
34+
<div class="is-flex is-justify-content-space-around">
35+
<p class="is-size-7 mb-0 has-text-weight-semibold">
36+
Oracle:
37+
<span class="is-size-6 has-text-weight-bold pl-1">
38+
{{ extraContent[0].oracle }} - {{ extraContent[0].oraclePerc }}
39+
</span>
40+
</p>
41+
<p class="is-size-7 mb-0 has-text-weight-semibold">
42+
AWS:
43+
<span class="is-size-6 has-text-weight-bold pl-1">
44+
{{ extraContent[0].aws }} - {{ extraContent[0].awsPerc }}
45+
</span>
46+
</p>
47+
<p class="is-size-7 mb-0 has-text-weight-semibold">
48+
Google:
49+
<span class="is-size-6 has-text-weight-bold pl-1">
50+
{{ extraContent[0].google }} - {{ extraContent[0].googlePerc }}
51+
</span>
52+
</p>
53+
</div>
54+
</b-message>
1255
</GhostLoading>
1356
</BoxContent>
1457

@@ -21,6 +64,49 @@
2164
:chartSeries="getSeries('objectType')"
2265
chartHeight="350"
2366
/>
67+
68+
<b-message
69+
v-model="showExtraObjectType"
70+
size="is-small"
71+
type="is-light"
72+
class="mt-3 ml-3"
73+
v-if="showExtraObjectType"
74+
>
75+
<template #header>
76+
<span
77+
class="is-size-6"
78+
:style="{ color: messageColor }"
79+
style="line-height: 38px"
80+
>
81+
<b-icon
82+
icon="circle"
83+
size="is-small"
84+
style="vertical-align: baseline"
85+
/>
86+
{{ extraContent[0].objectType }}
87+
</span>
88+
</template>
89+
<div class="is-flex is-justify-content-space-around">
90+
<p class="is-size-7 mb-0 has-text-weight-semibold">
91+
Oracle:
92+
<span class="is-size-6 has-text-weight-bold pl-1">
93+
{{ extraContent[0].oracle }} - {{ extraContent[0].oraclePerc }}
94+
</span>
95+
</p>
96+
<p class="is-size-7 mb-0 has-text-weight-semibold">
97+
AWS:
98+
<span class="is-size-6 has-text-weight-bold pl-1">
99+
{{ extraContent[0].aws }} - {{ extraContent[0].awsPerc }}
100+
</span>
101+
</p>
102+
<p class="is-size-7 mb-0 has-text-weight-semibold">
103+
Google:
104+
<span class="is-size-6 has-text-weight-bold pl-1">
105+
{{ extraContent[0].google }} - {{ extraContent[0].googlePerc }}
106+
</span>
107+
</p>
108+
</div>
109+
</b-message>
24110
</GhostLoading>
25111
</BoxContent>
26112

@@ -33,6 +119,49 @@
33119
:chartSeries="getSeries('suggestion')"
34120
chartHeight="350"
35121
/>
122+
123+
<b-message
124+
v-model="showExtraSuggestion"
125+
size="is-small"
126+
type="is-light"
127+
class="mt-3 ml-3"
128+
v-if="showExtraSuggestion"
129+
>
130+
<template #header>
131+
<span
132+
class="is-size-6"
133+
:style="{ color: messageColor }"
134+
style="line-height: 38px"
135+
>
136+
<b-icon
137+
icon="circle"
138+
size="is-small"
139+
style="vertical-align: baseline"
140+
/>
141+
{{ extraContent[0].suggestion }}
142+
</span>
143+
</template>
144+
<div class="is-flex is-justify-content-space-around">
145+
<p class="is-size-7 mb-0 has-text-weight-semibold">
146+
Oracle:
147+
<span class="is-size-6 has-text-weight-bold pl-1">
148+
{{ extraContent[0].oracle }} - {{ extraContent[0].oraclePerc }}
149+
</span>
150+
</p>
151+
<p class="is-size-7 mb-0 has-text-weight-semibold">
152+
AWS:
153+
<span class="is-size-6 has-text-weight-bold pl-1">
154+
{{ extraContent[0].aws }} - {{ extraContent[0].awsPerc }}
155+
</span>
156+
</p>
157+
<p class="is-size-7 mb-0 has-text-weight-semibold">
158+
Google:
159+
<span class="is-size-6 has-text-weight-bold pl-1">
160+
{{ extraContent[0].google }} - {{ extraContent[0].googlePerc }}
161+
</span>
162+
</p>
163+
</div>
164+
</b-message>
36165
</GhostLoading>
37166
</BoxContent>
38167
</section>
@@ -52,32 +181,88 @@ export default {
52181
GhostLoading,
53182
ChartBuilder,
54183
},
184+
data() {
185+
return {
186+
showExtraCategory: false,
187+
showExtraObjectType: false,
188+
showExtraSuggestion: false,
189+
extraContent: null,
190+
messageColor: '',
191+
}
192+
},
55193
beforeMount() {
56194
this.returnCategoryChartData
57195
this.returnObjectTypeChartData
58196
this.returnSuggestionChartData
59197
},
60198
methods: {
61199
getSeries(type) {
62-
if (type === 'category') {
63-
return this.returnCategoryChartData.series
64-
} else if (type === 'objectType') {
65-
return this.returnObjectTypeChartData.series
66-
} else if (type === 'suggestion') {
67-
return this.returnSuggestionChartData.series
200+
if (this.$route.name === 'allRecommendations') {
201+
if (type === 'category') {
202+
return this.returnAllCategoryChartData.series
203+
} else if (type === 'objectType') {
204+
return this.returnAllObjectTypeChartData.series
205+
} else if (type === 'suggestion') {
206+
return this.returnAllSuggestionChartData.series
207+
}
208+
} else {
209+
if (type === 'category') {
210+
return this.returnCategoryChartData.series
211+
} else if (type === 'objectType') {
212+
return this.returnObjectTypeChartData.series
213+
} else if (type === 'suggestion') {
214+
return this.returnSuggestionChartData.series
215+
}
68216
}
69217
},
70218
getLabels(type) {
71-
if (type === 'category') {
72-
return this.returnCategoryChartData.labels
73-
} else if (type === 'objectType') {
74-
return this.returnObjectTypeChartData.labels
75-
} else if (type === 'suggestion') {
76-
return this.returnSuggestionChartData.labels
219+
if (this.$route.name === 'allRecommendations') {
220+
if (type === 'category') {
221+
return this.returnAllCategoryChartData.labels
222+
} else if (type === 'objectType') {
223+
return this.returnAllObjectTypeChartData.labels
224+
} else if (type === 'suggestion') {
225+
return this.returnAllSuggestionChartData.labels
226+
}
227+
} else {
228+
if (type === 'category') {
229+
return this.returnCategoryChartData.labels
230+
} else if (type === 'objectType') {
231+
return this.returnObjectTypeChartData.labels
232+
} else if (type === 'suggestion') {
233+
return this.returnSuggestionChartData.labels
234+
}
77235
}
78236
},
79237
options(type) {
80238
return {
239+
chart: {
240+
events: {
241+
legendClick: (chartContext, seriesIndex) => {
242+
if (this.$route.name === 'allRecommendations') {
243+
if (type === 'category') {
244+
this.showExtraCategory = true
245+
this.showExtraObjectType = false
246+
this.showExtraSuggestion = false
247+
} else if (type === 'objectType') {
248+
this.showExtraCategory = false
249+
this.showExtraObjectType = true
250+
this.showExtraSuggestion = false
251+
} else if (type === 'suggestion') {
252+
this.showExtraCategory = false
253+
this.showExtraObjectType = false
254+
this.showExtraSuggestion = true
255+
}
256+
257+
this.extraContent = this.returnAllTypesChartDataByCloud(
258+
chartContext.opts.labels[seriesIndex],
259+
type
260+
)
261+
this.messageColor = chartContext.opts.colors[seriesIndex]
262+
}
263+
},
264+
},
265+
},
81266
labels: this.getLabels(type),
82267
dataLabels: {
83268
enabled: true,
@@ -163,6 +348,10 @@ export default {
163348
'returnCategoryChartData',
164349
'returnObjectTypeChartData',
165350
'returnSuggestionChartData',
351+
'returnAllCategoryChartData',
352+
'returnAllTypesChartDataByCloud',
353+
'returnAllObjectTypeChartData',
354+
'returnAllSuggestionChartData',
166355
]),
167356
},
168357
}

0 commit comments

Comments
 (0)