Skip to content

Commit 02fdeeb

Browse files
rcmaiolinircmaiolini
authored
Merge pull request #968 from ercole-io/refactory-recommendations-charts
Refactory recommendations charts
2 parents 1368cd5 + 414d95d commit 02fdeeb

File tree

3 files changed

+156
-37
lines changed

3 files changed

+156
-37
lines changed

‎src/components/cloud/RecommendationsCharts.vue‎

Lines changed: 135 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,168 @@
11
<template>
2-
<div>
3-
<BoxContent title="Category" border>
4-
<GhostLoading :isLoading="loadingTableStatus" setHeight="300">
5-
<PieChart
6-
chartId="category"
7-
:pieChartData="returnCategoryChartData"
8-
setLegend="left"
2+
<section class="columns">
3+
<BoxContent class="column" title="Category" border>
4+
<GhostLoading :isLoading="loadingTableStatus" setHeight="350">
5+
<ChartBuilder
6+
chartType="pie"
7+
chartID="category"
8+
:chartOptions="options('category')"
9+
:chartSeries="getSeries('category')"
10+
chartHeight="350"
911
/>
1012
</GhostLoading>
1113
</BoxContent>
1214

13-
<BoxContent title="Object Type" border>
14-
<GhostLoading :isLoading="loadingTableStatus" setHeight="300">
15-
<PieChart
16-
chartId="objectType"
17-
:pieChartData="returnObjectTypeChartData"
18-
setLegend="left"
15+
<BoxContent class="column" title="Object Type" border>
16+
<GhostLoading :isLoading="loadingTableStatus" setHeight="350">
17+
<ChartBuilder
18+
chartType="pie"
19+
chartID="objectType"
20+
:chartOptions="options('objectType')"
21+
:chartSeries="getSeries('objectType')"
22+
chartHeight="350"
1923
/>
2024
</GhostLoading>
2125
</BoxContent>
2226

23-
<BoxContent title="Suggestion" border>
24-
<GhostLoading :isLoading="loadingTableStatus" setHeight="300">
25-
<PieChart
26-
chartId="suggestion"
27-
:pieChartData="returnSuggestionChartData"
28-
setLegend="left"
27+
<BoxContent class="column" title="Suggestion" border>
28+
<GhostLoading :isLoading="loadingTableStatus" setHeight="350">
29+
<ChartBuilder
30+
chartType="pie"
31+
chartID="suggestion"
32+
:chartOptions="options('suggestion')"
33+
:chartSeries="getSeries('suggestion')"
34+
chartHeight="350"
2935
/>
3036
</GhostLoading>
3137
</BoxContent>
32-
</div>
38+
</section>
3339
</template>
3440

3541
<script>
42+
import _ from 'lodash'
3643
import { mapGetters } from 'vuex'
3744
import BoxContent from '@/components/common/BoxContent.vue'
3845
import GhostLoading from '@/components/common/GhostLoading.vue'
39-
import PieChart from '@/components/common/charts/PieChart.vue'
46+
import ChartBuilder from '@/components/common/charts/apex/ChartBuilder.vue'
4047
4148
export default {
4249
name: 'cloud-sdvisors-recommendations-charts',
4350
components: {
4451
BoxContent,
4552
GhostLoading,
46-
PieChart,
53+
ChartBuilder,
54+
},
55+
beforeMount() {
56+
this.returnCategoryChartData
57+
this.returnObjectTypeChartData
58+
this.returnSuggestionChartData
59+
},
60+
methods: {
61+
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
68+
}
69+
},
70+
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
77+
}
78+
},
79+
options(type) {
80+
return {
81+
labels: this.getLabels(type),
82+
dataLabels: {
83+
enabled: true,
84+
formatter: (val) => _.round(val, 1) + '%',
85+
style: {
86+
fontSize: '12px',
87+
colors: ['#000'],
88+
fontWeight: 'bold',
89+
},
90+
background: {
91+
enabled: false,
92+
},
93+
dropShadow: {
94+
enabled: false,
95+
},
96+
},
97+
legend: {
98+
show: true,
99+
position: 'left',
100+
fontSize: '14px',
101+
formatter: (label, series) => {
102+
return `${label}: <b>${
103+
series.w.config.series[series.seriesIndex]
104+
}</b> - <b>${_.round(
105+
series.w.globals.seriesPercent[series.seriesIndex],
106+
1
107+
)}%</b>`
108+
},
109+
},
110+
tooltip: {
111+
enabled: true,
112+
fillSeriesColor: false,
113+
y: {
114+
formatter: (value, series) => {
115+
return `${value} - ${_.round(
116+
series.globals.seriesPercent[series.seriesIndex][0],
117+
1
118+
)}%`
119+
},
120+
},
121+
style: {
122+
fontSize: '14px',
123+
},
124+
onDatasetHover: {
125+
highlightDataSeries: true,
126+
},
127+
fixed: {
128+
enabled: true,
129+
position: 'topRight',
130+
offsetX: 0,
131+
offsetY: 0,
132+
},
133+
},
134+
colors: [
135+
'rgba(255, 99, 132)',
136+
'rgba(54, 162, 235)',
137+
'rgba(255, 206, 86)',
138+
'rgba(75, 192, 192)',
139+
'rgba(153, 102, 255)',
140+
'rgba(255, 159, 64)',
141+
'rgb(176, 101, 156)', // light purple
142+
'rgb(254, 188, 59)', // light orange
143+
'rgb(144, 190, 109)', // light green
144+
'rgb(253, 128, 128)', // light red
145+
'rgb(71, 172, 177)', // light blue
146+
'rgb(232, 221, 9)', // yellow
147+
'rgb(248, 150, 30)', // dark orange
148+
'rgb(139, 117, 215)', // dark purple
149+
'rgb(249, 65, 68)', // dark red
150+
'rgb(67, 170, 139)', // dark green
151+
'rgb(87, 117, 144)', // dark blue
152+
].reverse(),
153+
stroke: {
154+
show: true,
155+
width: 0.3,
156+
},
157+
}
158+
},
47159
},
48160
computed: {
49161
...mapGetters([
162+
'loadingTableStatus',
50163
'returnCategoryChartData',
51164
'returnObjectTypeChartData',
52165
'returnSuggestionChartData',
53-
'loadingTableStatus',
54166
]),
55167
},
56168
}

‎src/store/modules/cloud/recommendations.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -167,20 +167,27 @@ export const actions = {
167167
},
168168
}
169169

170-
const chartsCountData = (data, type, total) => {
171-
let totalData = []
170+
const chartsCountData = (data, type) => {
171+
let totalData = {}
172+
let labels = []
173+
let series = []
172174

173175
totalData = _.map(data, (val) => {
174-
return { type: val[type] }
176+
return {
177+
type: val[type],
178+
cloud: val.cloud,
179+
}
175180
})
176181

177182
totalData = _.groupBy(totalData, 'type')
178183

179-
totalData = _.map(totalData, (val) => {
180-
const perc = `${_.round((val.length / total) * 100, 2)}%`
184+
labels = _.map(totalData, (v, k) => k)
185+
series = _.map(totalData, (v, k) => v.length)
181186

182-
return [`${val[0].type}: ${perc}`, val.length]
183-
})
187+
totalData = {
188+
labels: labels,
189+
series: series,
190+
}
184191

185192
return totalData
186193
}

‎src/views/cloud/Recommendations.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@
22
<ToggleColumns
33
:getPage="returnPagename"
44
:leftButton="$t('common.forms.advancedFilters')"
5-
:rightButton="$t('common.general.sideInfo')"
5+
:centerCol="9"
66
v-if="isMounted"
77
>
8+
<template slot="top">
9+
<RecommendationsCharts v-if="returnCloudTechnology === 'Oracle'" />
10+
<RecommendationsCharts v-if="returnCloudTechnology === 'Aws'" />
11+
<RecommendationsCharts v-if="returnCloudTechnology === 'Google'" />
12+
</template>
13+
814
<template slot="left">
915
<OracleFilters v-if="returnCloudTechnology === 'Oracle'">
1016
<Loading :isLoading="loadingTableStatus" />
@@ -24,12 +30,6 @@
2430
<AwsTableList v-if="returnCloudTechnology === 'Aws'" />
2531
<GoogleTableList v-if="returnCloudTechnology === 'Google'" />
2632
</template>
27-
28-
<template slot="right">
29-
<RecommendationsCharts v-if="returnCloudTechnology === 'Oracle'" />
30-
<RecommendationsCharts v-if="returnCloudTechnology === 'Aws'" />
31-
<RecommendationsCharts v-if="returnCloudTechnology === 'Google'" />
32-
</template>
3333
</ToggleColumns>
3434
</template>
3535

0 commit comments

Comments
 (0)