[statping-ui] : fix for downtime crop issue

react-frontend/src/components/GroupServiceFailures.jsx

@@ -132,6 +132,21 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
 
   if (loaded) return <ServiceLoader text="Loading series.." />;
 
+  const generateTooltipPosition = (...args) => {
+    const position = args?.[0]; //tooltip default position
+    const place = args?.[4]; // tooltip placement
+    const offset = 6;
+
+    if (place === "left" || place === "right") {
+      return {
+        top: position.top,
+        left:
+          place === "left" ? position.left + offset : position.left - offset,
+      };
+    }
+    return position;
+  };
+
   return (
     <div name="fade" style={{ display: collapse ? "none" : "block" }}>
       <div className="block-chart">
@@ -140,16 +155,18 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
           place="bottom"
           backgroundColor="#344A6C"
           html={true}
+          overridePosition={generateTooltipPosition}
         />
         {failureData?.length > 0 ? (
           failureData.map((d, i) => {
             return (
               <div
-                className={`flex-fill service_day ${STATUS_CLASS[d.status]}`}
+                className={`service_day ${STATUS_CLASS[d.status]}`}
                 onMouseOver={() => handleMouseOver(d)}
                 onMouseOut={handleMouseOut}
                 key={i}
-                data-tip={hoverText}>
+                data-tip={hoverText}
+              >
                 {d.status !== 0 && (
                   <span className="d-none d-md-block text-center small"></span>
                 )}
@@ -166,13 +183,8 @@ const GroupServiceFailures = ({ group = null, service, collapse }) => {
         <div className="no-select">
           <p className="divided justify-content-between">
             <span className="timeline-text font-12">
-              90 {langs("days_ago")}
+              {langs("status_over_the_past")} 90 {langs("days")}
             </span>
-            {/* <span className="timeline-divider"></span> */}
-            {/* <span className="timeline-text font-12">{service_txt()}</span> */}
-            {/* <span className="timeline-text font-12">{uptime}% uptime</span> */}
-            <span className="timeline-divider"></span>
-            <span className="timeline-text font-12">{langs("today")}</span>
           </p>
         </div>
       </div>

react-frontend/src/config/langs.js

@@ -141,6 +141,7 @@ const english = {
   notify_all: "Notify All Changes",
   service_update: "Update Service",
   service_create: "Create Service",
+  status_over_the_past: "Status over the past",
 };
 
 const langs = (v) => english[v];

react-frontend/src/styles/scss/base.scss

@@ -131,11 +131,12 @@
 }
 
 .block-chart {
+  padding-top: 7px;
+  height: 100%;
   display: flex;
-  justify-content: center;
+  flex-flow: row wrap;
-  margin: 1rem 0;
+  justify-content: flex-start;
-  padding: 0 0.75rem;
+  gap: 1px;
-
   div.service_day:last-child {
     margin-right: 0;
   }
@@ -144,8 +145,9 @@
 .service_day {
   position: relative;
   height: 24px;
-  min-width: 4px;
+  min-width: 6px;
-  margin-right: 2px;
+  margin-right: 1.5px;
+  margin-bottom: 4px;
   cursor: pointer;
 }
 

react-frontend/src/styles/scss/variables.scss

@@ -3,7 +3,7 @@ $background-color: #f5f8ff;
 $primary-bg: linear-gradient(314deg, #54a5ff -40%, #03299c);
 $container-color: #ffffff;
 $text-color: #2a2a2a;
-$max-width: 775px;
+$max-width: 824px;
 
 /* colors */
 $base-color: #1f2849;