Merge pull request #90 from metrico/joel-query-type

fix: chart tooltip container position and width
metrico · May 13, 2022 · 2c431da · 2c431da
2 parents e578ee2 + 12edd11
commit 2c431da
Show file tree

Hide file tree

Showing 3 changed files with 230 additions and 209 deletions.
diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js
@@ -10,7 +10,7 @@ import { setQueryTime } from "./setQueryTime";
 import setIsEmptyView from "./setIsEmptyView";
 
 // import adjustedStep from "../components/QueryTypeBar/helpers";
-const debugMode = store.getState().debugMode
+const debugMode = store.getState().debugMode;
 export async function getAsyncResponse(
     cb //: callback dispatch function
 ) {
@@ -20,12 +20,12 @@ export async function getAsyncResponse(
 export function sortMessagesByTimestamp(
     messages //:array sort by timestamp
 ) {
-    const startTime = performance.now()
-   const mess =  messages?.sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1));
-   const duration = performance.now() - startTime;
-   if(debugMode) console.log( "🚧 loadLogs / sorting logs took: ",duration," ms")
-   return mess
-
+    const startTime = performance.now();
+    const mess = messages?.sort((a, b) => (a.timestamp < b.timestamp ? 1 : -1));
+    const duration = performance.now() - startTime;
+    if (debugMode)
+        console.log("🚧 loadLogs / sorting logs took: ", duration, " ms");
+    return mess;
 }
 
 export function fromNanoSec(
@@ -34,15 +34,15 @@ export function fromNanoSec(
     return parseInt(ts / 1000000);
 }
 
-export function mapStreams (streams) {
-    const startTime = performance.now()
-    let messages = []
+export function mapStreams(streams) {
+    const startTime = performance.now();
+    let messages = [];
 
     streams.forEach((stream) => {
-        stream.values.forEach(([ts,text], i) => {
+        stream.values.forEach(([ts, text], i) => {
             messages.push({
-                type:'stream',
-                timestamp:fromNanoSec(ts),
+                type: "stream",
+                timestamp: fromNanoSec(ts),
                 text,
                 tags: stream.stream || {},
                 showTs: true,
@@ -52,9 +52,10 @@ export function mapStreams (streams) {
         });
     });
     const duration = performance.now() - startTime;
-    if(debugMode) console.log( "🚧 loadLogs / mapping logs took: ",duration," ms")
-    return messages
-};
+    if (debugMode)
+        console.log("🚧 loadLogs / mapping logs took: ", duration, " ms");
+    return messages;
+}
 
 export default function loadLogs() {
     const localStore = store.getState();
@@ -77,13 +78,13 @@ export default function loadLogs() {
     const time = localStore.time || new Date().getTime() + "000000";
     const parsedStart = getTimeParsed(startTs);
     const parsedStop = getTimeParsed(stopTs);
-    const parsedTime = "&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
+    const parsedTime =
+        "&start=" + (from || parsedStart) + "&end=" + (to || parsedStop);
 
     if (findRangeByLabel(rangeLabel)) {
         ({ dateStart: startTs, dateEnd: stopTs } = findRangeByLabel(
             rangeLabel
         ));
-
     }
 
     store.dispatch(setStartTime(startTs));
@@ -132,7 +133,7 @@ export default function loadLogs() {
                     if (type === "streams") {
                         messages = mapStreams(result);
                         dispatch(setMatrixData([]));
-                        const messSorted = sortMessagesByTimestamp(messages) 
+                        const messSorted = sortMessagesByTimestamp(messages);
                         if (messSorted) {
                             try {
                                 getAsyncResponse(
@@ -186,17 +187,17 @@ export default function loadLogs() {
                     }
                 } else {
                     dispatch(setLogs([]));
-                    dispatch(setMatrixData([]));
 
-                    //
+                    dispatch(setMatrixData([]));
                 }
             })
             .catch((error) => {
+
                 dispatch(setLogs([]));
                 dispatch(setMatrixData([]));
                 dispatch(setLoading(false));
-                if (debugMode)
-                    console.log("getting an error from response: ", error);
+
+                if (debugMode) console.log("getting an error from response: ", error);
                 dispatch(setIsEmptyView(true));
             });
     };

diff --git a/src/plugins/charts/UseTooltip.js b/src/plugins/charts/UseTooltip.js
@@ -1,13 +1,13 @@
 import * as moment from "moment";
 import {
+    getItemsLength,
     highlightItems,
     isFloat,
     isLAbelSelected,
     makeTolltipItems,
 } from "./helpers";
 
 const $q = window.jQuery;
-
 export default function UseTooltip(plot) {
     let previousPoint = null;
     $q("#tooltip").remove();
@@ -60,7 +60,7 @@ export default function UseTooltip(plot) {
                 previousPoint = item.datapoint;
                 $q("#tooltip").remove();
                 const tooltipTemplate = `
-                <div style="${"display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #666;padding:6px"}">
+                <div style="${"display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #666;padding:6px;flex:1"}">
                 <p>${moment(item.datapoint[0]).format(
                     "YYYY-MM-DDTHH:mm:ss.SSSZ"
                 )}</p>
@@ -72,7 +72,7 @@ export default function UseTooltip(plot) {
                 ${labelsFormatted}
                 </div>
                 `;
-                const labelLength = item.series.label.length;
+                const labelLength =  getItemsLength(labelsList)
                 showTooltip(
                     item.pageX,
                     item.pageY,
@@ -88,23 +88,28 @@ export default function UseTooltip(plot) {
 }
 
 function showTooltip(x, y, contents, length) {
+    // calculate the xpos with mouse position
+
     let wWidth = window.innerWidth;
-    let posX = x + 20;
-    if (x * 2 > wWidth) {
-        posX = x - length * 8;
-    }
+    let halfScreen = wWidth / 2
 
-    // use ref for tooltip as made with chart!
+    let posX
+    const clientX = window.event.clientX;
+    posX = clientX
+    if(clientX > halfScreen) {
+        posX -= length < 125 ? (length *6) + 15 : 505;
+    }
 
-    $q(`<div id="tooltip">` + contents + `</div>`)
+ $q(`<div id="tooltip">` + contents + `</div>`)
         .css({
             position: "absolute",
             display: "none",
             top: y,
             left: posX,
             padding: "6px",
             "font-size": "12px",
-            size: "10",
+            "flex-direction":"column",
+            "max-width":"500px",
             "border-radius": "6px 6px 6px 6px",
             "background-color": "#333",
             color: "#aaa",