🎨

src/client/components/queue-chart.vue

@@ -79,6 +79,7 @@ export default defineComponent({
 						pointRadius: 0,
 						tension: 0,
 						borderWidth: 2,
+						borderJoinStyle: 'round',
 						borderColor: '#00E396',
 						backgroundColor: alpha('#00E396', 0.1),
 						data: []
@@ -87,6 +88,7 @@ export default defineComponent({
 						pointRadius: 0,
 						tension: 0,
 						borderWidth: 2,
+						borderJoinStyle: 'round',
 						borderColor: '#00BCD4',
 						backgroundColor: alpha('#00BCD4', 0.1),
 						data: []
@@ -95,6 +97,7 @@ export default defineComponent({
 						pointRadius: 0,
 						tension: 0,
 						borderWidth: 2,
+						borderJoinStyle: 'round',
 						borderColor: '#FFB300',
 						backgroundColor: alpha('#FFB300', 0.1),
 						data: []
@@ -103,9 +106,11 @@ export default defineComponent({
 						pointRadius: 0,
 						tension: 0,
 						borderWidth: 2,
+						borderJoinStyle: 'round',
 						borderColor: '#E53935',
 						borderDash: [5, 5],
 						fill: false,
+						yAxisID: 'y2',
 						data: []
 					}],
 				},
@@ -132,6 +137,19 @@ export default defineComponent({
 							},
 						},
 						y: {
+							min: 0,
+							stack: 'queue',
+							stackWeight: 2,
+							grid: {
+								color: gridColor,
+								borderColor: 'rgb(0, 0, 0, 0)',
+							},
+						},
+						y2: {
+							min: 0,
+							offset: true,
+							stack: 'queue',
+							stackWeight: 1,
 							grid: {
 								color: gridColor,
 								borderColor: 'rgb(0, 0, 0, 0)',