diff --git a/src/components/boxes/OilFlow.vue b/src/components/boxes/OilFlow.vue
index 3e148e3..19f3b38 100644
--- a/src/components/boxes/OilFlow.vue
+++ b/src/components/boxes/OilFlow.vue
@@ -78,6 +78,18 @@ export default {
OT007: Array(24)
.fill(1)
.map((_) => randomInt()),
+ OT008: Array(24)
+ .fill(1)
+ .map((_) => randomInt()),
+ OT009: Array(24)
+ .fill(1)
+ .map((_) => randomInt()),
+ OT000: Array(24)
+ .fill(1)
+ .map((_) => randomInt()),
+ OT011: Array(24)
+ .fill(1)
+ .map((_) => randomInt()),
},
};
},
diff --git a/src/components/charts/LineChart.vue b/src/components/charts/LineChart.vue
index c8044ef..936a4e4 100644
--- a/src/components/charts/LineChart.vue
+++ b/src/components/charts/LineChart.vue
@@ -3,7 +3,7 @@
@@ -96,9 +96,11 @@ export default {
"#7138FF",
"#F318D8",
"#C0F318",
- "#f77",
- "#19f",
- "#98f",
+ "#ff7777",
+ "#1199ff",
+ "#9988ff",
+ "#3388ff",
+ "#337788",
],
data: [],
legendtext: [
@@ -278,30 +280,32 @@ li {
}
ul {
+ // background: #0005;
width: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-end;
height: adjust(14px);
white-space: pre-wrap;
padding-bottom: 0;
padding-left: adjust(6px);
- background: #0005;
+ display: grid;
+ grid-template-columns: repeat(5, 1fr);
+ column-gap: 6px;
+ // column-span: none;
+ justify-items: end;
+ align-items: end;
}
li {
- text-align: right;
+ padding-left: adjust(1px);
position: relative;
- min-width: 40px;
- background: #f003;
+ // background: #f003;
+ user-select: none;
}
.line-chart__custom-legend {
position: absolute;
top: adjust(-20px);
right: 0;
- font-size: adjust(6px);
+ font-size: adjust(5px);
font-family: Ubuntu, sans-serif;
padding: 0;
// max-width: 100%;
@@ -313,10 +317,10 @@ li {
li::before {
content: "";
position: absolute;
- top: adjust(0px);
- left: adjust(-6px);
- width: adjust(6px);
- height: adjust(6px);
+ top: adjust(.5px);
+ left: adjust(-5px);
+ width: adjust(5px);
+ height: adjust(5px);
border-radius: adjust(1px);
background: #eee6;
}
@@ -354,6 +358,9 @@ li:nth-child(10)::before {
li:nth-child(11)::before {
background: #98f;
}
+li:nth-child(12)::before {
+ background: #38f;
+}
.line-chart__wrapper {
position: relative;