Skip to content

Commit 2a07ebe

Browse files
Umius-BrianUmius-Brian
committed
Update legend orientation
1 parent 58a0a7d commit 2a07ebe

6 files changed

Lines changed: 83 additions & 69 deletions

File tree

‎app/charts/latency-chart.jsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useContext } from 'react';
2-
import { Line } from 'react-chartjs-2';
32
import HealthContext from '../context/DetailsContext';
43
import Plot from 'react-plotly.js';
54

@@ -9,7 +8,7 @@ const LatencyChart = (props) => {
98
const createChart = () => {
109
const xAxis = [];
1110
const yAxis = [];
12-
11+
1312
for (let i = 0; i < healthData.length; i++) {
1413
const element = healthData[i];
1514
if (element.currentmicroservice === props.service || element.currentMicroservice === props.service) {
@@ -36,7 +35,12 @@ const LatencyChart = (props) => {
3635
height: 500,
3736
paper_bgcolor: '#fffbe0',
3837
plot_bgcolor: '#fffbe0',
39-
showlegend: true
38+
showlegend: true,
39+
legend: {
40+
orientation: 'h',
41+
xanchor: 'center',
42+
x: .5
43+
}
4044
}}
4145
/>
4246
)

‎app/charts/processes-chart.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,12 @@ const ProcessesChart = (props) => {
8686
height: 500,
8787
paper_bgcolor: '#fffbe0',
8888
plot_bgcolor: '#fffbe0',
89-
legend: {itemsizing: 'constant'}
89+
legend: {
90+
itemsizing: 'constant',
91+
orientation: 'h',
92+
xanchor: 'center',
93+
x: .5
94+
},
9095
}}
9196
/>
9297
)

‎app/charts/request-type-chart.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,24 @@ const RequestTypesChart = (props) => {
3636
'#fcbad3',
3737
'#aa96da',
3838
'#a8d8ea',
39-
'#f38181',
40-
39+
'#f38181',
4140
]
4241
},
4342
}]}
4443
layout = {{
4544
height: 500,
4645
width: 500,
4746
displaylogo: false,
48-
paper_bgcolor: '#fffbe0'
47+
paper_bgcolor: '#fffbe0',
48+
legend: {
49+
orientation: 'h',
50+
xanchor: 'center',
51+
x: .5,
52+
}
4953
}}
5054
/>
5155
)
52-
}
56+
};
5357

5458
return <div>{createRequestChart()}</div>;
5559
};

‎app/charts/response-code-chart.jsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -59,26 +59,33 @@ const ResponseCodeChart = (props) => {
5959
values: Object.values(responseCodes),
6060
labels: ['Informational 1xx', 'Successful 2xx', 'Redirection 3xx', 'Client Error 4xx', 'Server Error 5xx'],
6161
type: 'pie',
62+
domain: {y: [0 , 2]},
6263
marker: {
6364
'colors': [
64-
'#f38181',
65-
'#fce38a',
66-
'#fcbad3',
67-
'#95e1d3',
68-
'#a8d8ea',
69-
'#aa96da',
70-
]
71-
}
72-
}]}
73-
layout = {{
74-
height: 500,
75-
width: 500,
76-
displaylogo: false,
77-
paper_bgcolor: '#fffbe0'
78-
}}
79-
/>
80-
)
65+
'#f38181',
66+
'#fce38a',
67+
'#fcbad3',
68+
'#95e1d3',
69+
'#a8d8ea',
70+
'#aa96da',
71+
]
72+
}
73+
}]}
74+
layout = {{
75+
height: 500,
76+
width: 500,
77+
displaylogo: false,
78+
paper_bgcolor: '#fffbe0',
79+
legend: {
80+
orientation: 'h',
81+
xanchor: 'center',
82+
x: .5,
83+
y: 5
84+
}
85+
}}
86+
/>)
8187
};
88+
8289
return <div>{createChart()}</div>;
8390
};
8491

‎app/charts/speed-chart.jsx‎

Lines changed: 20 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -34,46 +34,33 @@ const SpeedChart = (props) => {
3434
delta: {'reference': 3.5, 'increasing': {'color': "mistyrose"}},
3535
mode: "gauge+number+delta",
3636
gauge: { axis: { range: [null, 8] },
37-
'tickwidth': 1,
38-
'tickcolor': "#fce38a",
39-
'bar': {'color': "#6eb6ff"},
40-
'bordercolor': "#a3de83",
41-
'steps': [
42-
{'range': [0, 4], 'color': '#edf798'},
43-
{'range': [4, 6], 'color': '#fab57a'}],
44-
'threshold': {
45-
'line': {'color': "red", 'width': 3.5},
46-
'thickness': 0.75,
47-
'value': 7.5}
48-
},
37+
'tickwidth': 1,
38+
'tickcolor': "#fce38a",
39+
'bar': {'color': "#6eb6ff"},
40+
'bordercolor': "#a3de83",
41+
'steps': [
42+
{'range': [0, 4], 'color': '#edf798'},
43+
{'range': [4, 6], 'color': '#fab57a'}
44+
],
45+
'threshold': {
46+
'line': {'color': "red", 'width': 3.5},
47+
'thickness': 0.75,
48+
'value': 7.5
49+
}
50+
},
4951
}]}
5052
layout = {{
5153
height: 500,
5254
width: 500,
53-
paper_bgcolor: '#fffbe0'
55+
paper_bgcolor: '#fffbe0',
56+
legend: {
57+
orientation: 'h',
58+
xanchor: 'center',
59+
x: .5
60+
}
5461
}}
5562
/>
5663
)
57-
58-
59-
// const chartData = {
60-
// datasets: [
61-
// {
62-
// label: `CPU Speed of ${props.service}`,
63-
// data: yAxis,
64-
// backgroundColor: [
65-
// 'rgb(2, 210, 249)',
66-
// ],
67-
// },
68-
// ],
69-
// options: {
70-
// },
71-
// xAxisID: 'Speed',
72-
// yAxisID: 'Communicaton',
73-
// labels: xAxis,
74-
// };
75-
76-
// return <Line data={chartData} />;
7764
};
7865

7966
return <div>{createChart()}</div>;

‎app/charts/temperature-chart.jsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -28,22 +28,29 @@ const TemperatureChart = (props) => {
2828
<Plot
2929
data = {[{
3030
type: 'scatter',
31+
fill: 'tozeroy',
32+
fillcolor: 'rgba(240, 138, 93, .5)',
33+
line: {shape: 'spline', smoothing: 1.3},
34+
mode: 'none',
3135
x: yAxis,
3236
y: xAxis,
33-
mode: 'lines',
3437
rangemode: 'nonnegative',
3538
name: 'CPU Temperature',
36-
marker: {
37-
color: '#155200',
38-
}
39-
}]}
40-
layout = {{
41-
width: 500,
42-
height: 500,
43-
paper_bgcolor: '#fffbe0',
44-
plot_bgcolor: '#fffbe0',
4539
showlegend: true
46-
}}
40+
}]}
41+
layout = {
42+
{
43+
width: 500,
44+
height: 500,
45+
paper_bgcolor: '#fffbe0',
46+
plot_bgcolor: '#fffbe0',
47+
legend: {
48+
orientation: 'h',
49+
xanchor: 'center',
50+
x: .5
51+
}
52+
}
53+
}
4754
/>
4855
)
4956
};

0 commit comments

Comments
 (0)