fix: make charts height resize depending on the screen height

Otherwise it looks weird if you zoom out. Signed-off-by: Artem Chernyshev <artem.0xD2@gmail.com>
siderolabs · Aug 9, 2021 · 4ee481b · 4ee481b
1 parent 672c517
commit 4ee481b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 23 deletions.
diff --git a/frontend/src/components/TChart.vue b/frontend/src/components/TChart.vue
@@ -4,9 +4,9 @@ License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 -->
 <template>
-  <div>
+  <div class="flex flex-col">
     <div v-if="title" class="w-full text-center">{{ title }}</div>
-    <div :style="{ width: width, height: height }">
+    <div class="flex-1">
       <div v-if="err || loading" class="flex flex-row justify-center items-center w-full h-full">
         <div v-if="err" class="flex justify-center items-center w-1/2 gap-4 text-talos-gray-500 text-sm">
           <div class="flex-0">
@@ -16,10 +16,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         </div>
         <t-spinner v-else/>
       </div>
-      <apexchart
-        :style="{opacity: loading || err ? 0 : 100}"
-        :width="width"
-        :height="height"
+      <apexchart v-else
+        width="100%"
+        height="100%"
         :type="type"
         :options="options"
         :series="series"
@@ -67,14 +66,6 @@ export default {
     },
     chartType: String,
     title: String,
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "100%",
-    },
     type: String,
     numPoints: {
       type: Number,

diff --git a/frontend/src/views/node/Overview.vue b/frontend/src/views/node/Overview.vue
@@ -8,14 +8,13 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     <div class="px-3 py-2 mb-2">
       <t-breadcrumbs>{{ $route.params.node }} Overview</t-breadcrumbs>
     </div>
-    <div class="py-2 border rounded-md border-talos-gray-300 dark:border-talos-gray-600 flex-1 flex flex-col overflow-hidden">
-      <div class="flex gap-2">
+    <div class="p-4 border rounded-md border-talos-gray-300 dark:border-talos-gray-600 flex-1 flex flex-col overflow-hidden">
+      <div class="flex flex-1 gap-2">
         <div class="flex-1">
           <t-chart
+             class="h-full"
              name="cpu"
              title="CPU Utilization"
-             width="100%"
-             height="180px"
              type="area"
              talos
              :resource="{type: 'CPUStat', namespace: 'perf', tail_events: 25}"
@@ -25,10 +24,9 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
         </div>
         <div class="flex-1">
           <t-chart
+             class="h-full"
              name="mem"
              title="Memory Usage"
-             width="100%"
-             height="180px"
              type="area"
              talos
              :resource="{type: 'MemoryStat', namespace: 'perf', tail_events: 25}"
@@ -37,13 +35,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
           />
         </div>
       </div>
-      <div class="flex gap-2">
+      <div class="flex flex-1 gap-2">
         <div class="flex-1">
           <t-chart
+             class="h-full"
              name="procs"
              title="Processes"
-             width="100%"
-             height="180px"
              type="area"
              talos
              :resource="{type: 'CPUStat', namespace: 'perf', tail_events: 25}"