Merge pull request #85 from hisabi-app/fix/partition-card-height

fix: partition card height
hisabi-app · Aug 30, 2024 · f3e7019 · f3e7019
2 parents de65115 + 79bea12
commit f3e7019
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/public/css/app.css b/public/css/app.css
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=beea4afc80871153e81998dda3fbe1d6",
-    "/css/app.css": "/css/app.css?id=8c7ff6f513f0bb668897c02548d45bc8"
+    "/js/app.js": "/js/app.js?id=40366b46410d5965d8dfaa9f39933839",
+    "/css/app.css": "/css/app.css?id=2d24f823ae18a2189c9710f1b239088d"
 }
diff --git a/resources/js/Components/Domain/PartitionMetric.js b/resources/js/Components/Domain/PartitionMetric.js
@@ -88,7 +88,7 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
     let total = sumBy(data, 'value');
 
     return ( 
-        <Card className="relative">
+        <Card className="relative" height='h-[160px]'>
             <div className="px-6 py-4 flex flex-col h-full">
                 <div className="flex justify-between items-center mb-2">
                     <div className="flex items-center">
@@ -110,7 +110,7 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
                     </select>
                 </div>
 
-                <div className='grow overflow-y-auto'>
+                <div className={`${data.length == 0 ? '' : 'pl-[100px]'} grow overflow-y-auto`}>
                     <ul className="list-reset">
                         {data.map((item, index) => <li key={index} className="text-xs text-gray-700 leading-normal">
                             <span className={`inline-block rounded-full w-2 h-2 mr-2 ${getTailwindColor(index)}`} />
@@ -123,7 +123,7 @@ export default function PartitionMetric({ name, graphql_query, ranges, relation,
                     </p>}
                 </div>
 
-                <div className="absolute w-20 h-20" style={{right: '35px', top: '40%'}}>
+                <div className="absolute w-16 h-16" style={{left: '30px', top: '40%'}}>
                     <canvas id={graphql_query}></canvas>
                 </div>
             </div>

diff --git a/resources/js/Components/Global/Card.js b/resources/js/Components/Global/Card.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Card = ({children, className = ''}) => {
+const Card = ({children, height, className = ''}) => {
     return (
-        <div className={`bg-white shadow rounded-lg min-h-[150px] ${className}`}>
+        <div className={`bg-white shadow rounded-lg ${height ?? 'min-h-[150px]'} ${className}`}>
             {children}
         </div>
     )