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;