diff --git a/src/actions/loadLogs.js b/src/actions/loadLogs.js index c706df31..be95b62e 100644 --- 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 index 4f9ae024..f3701249 100644 --- a/src/plugins/charts/UseTooltip.js +++ b/src/plugins/charts/UseTooltip.js @@ -1,5 +1,6 @@ import * as moment from "moment"; import { + getItemsLength, highlightItems, isFloat, isLAbelSelected, @@ -7,7 +8,6 @@ import { } 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 = ` -
+

${moment(item.datapoint[0]).format( "YYYY-MM-DDTHH:mm:ss.SSSZ" )}

@@ -72,7 +72,7 @@ export default function UseTooltip(plot) { ${labelsFormatted}
`; - const labelLength = item.series.label.length; + const labelLength = getItemsLength(labelsList) showTooltip( item.pageX, item.pageY, @@ -88,15 +88,19 @@ 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(`
` + contents + `
`) + $q(`
` + contents + `
`) .css({ position: "absolute", display: "none", @@ -104,7 +108,8 @@ function showTooltip(x, y, contents, length) { 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", diff --git a/src/plugins/charts/helpers/index.js b/src/plugins/charts/helpers/index.js index 54d7bcdb..709e940f 100644 --- a/src/plugins/charts/helpers/index.js +++ b/src/plugins/charts/helpers/index.js @@ -1,176 +1,191 @@ -import { - CHART_BAR_SERIES, - CHART_LINE_SERIES, - CHART_POINT_SERIES, - LOCAL_CHART_TYPE, -} from "../consts"; - -export function highlightItems(list) { - list.forEach((item) => { - item.plot.highlight(item.i, item.plotIndex); - }); -} - -export function isFloat(x) { - return !!(x % 1); -} - -export function makeTolltipItems(list) { - const sorted = list.filter( - (f) => parseFloat(f.value) === parseFloat(f.item.datapoint[1]) - ); - - return sorted - ?.map( - (template) => ` -
-
- -

${template.label}

-
-
- -
-
- -` - ) - .join(""); -} - -export function getTimeSpan(data) { - const tsArray = data - .map((tsItem) => tsItem?.data?.map(([t, v]) => t)) - .flat() - .sort(); - const first = tsArray[0]; - //const last = tsArray[tsArray.length - 1] ; - const last = tsArray[tsArray.length - 1]; - - const timeSpan = (last - first) / 1000 / 86400; - - return { first, last, timeSpan }; -} - -export function formatDateRange(data) { - const { timeSpan, first, last } = getTimeSpan(data); - - const formatted = - timeSpan > 1 - ? "%m/%d %H:%M" - : timeSpan > 30 - ? "%y/%m/%d %H:%M" - : "%H:%M:%S"; - return { - timeformat: formatted, - min: first, - max: last, - }; -} - -export function formatTs(values) { - return values.map(([ts, val]) => [ts * 1000, val]); -} - -export function getSeriesFromChartType(type) { - switch (type) { - case "bar": - return CHART_BAR_SERIES; - - case "line": - return CHART_LINE_SERIES; - - case "points": - return CHART_POINT_SERIES; - - default: - return CHART_LINE_SERIES; - } -} - -export function setChartTypeSeries(type) { - switch (type) { - case "bar": - return { series: CHART_BAR_SERIES }; - - case "line": - return { series: CHART_LINE_SERIES }; - - case "points": - return { series: CHART_POINT_SERIES }; - - default: - return { series: CHART_LINE_SERIES }; - } -} - -export function getTypeFromLocal() { - return localStorage.getItem(LOCAL_CHART_TYPE); -} - -export function setTypeToLocal(type) { - localStorage.setItem(LOCAL_CHART_TYPE, type); -} - -export function formatLabel(labels) { - return ( - "{" + - Object.entries(labels) - .map(([key, value]) => `${key}="${value}"`) - .join(",") + - "}" - ); -} - -export function hideSeries(series) { - return { - ...series, - lines: { ...series.lines, show: false }, - bars: { ...series.bars, show: false }, - points: { ...series.points, show: false }, - isVisible: false, - }; -} -export function showSeries(series, type) { - const { lines, bars, points } = getSeriesFromChartType(type); - - return { - ...series, - bars, - lines, - points, - isVisible: true, - }; -} - -export function mapIds(arr) { - return arr?.map((m) => m.id); -} - -export function getLabelsSelected() { - return JSON.parse(localStorage.getItem("labelsSelected")) || []; -} - -export function isLAbelSelected(label) { - const labelsSelected = JSON.parse(localStorage.getItem("labelsSelected")); - return labelsSelected.some((l) => l.id === label.id); -} - -export function getNewData(data, type) { - const lSelected = getLabelsSelected(); - - if (lSelected.length > 0) { - const ids = mapIds(lSelected); - - const dataMapped = data?.map((series) => { - if (!ids?.includes(series.id)) { - return hideSeries(series); - } else { - return showSeries(series, type); - } - }); - return dataMapped; - } else { - return data; - } -} +import styled from "@emotion/styled"; +import { + CHART_BAR_SERIES, + CHART_LINE_SERIES, + CHART_POINT_SERIES, + LOCAL_CHART_TYPE, +} from "../consts"; + +export function highlightItems(list) { + list.forEach((item) => { + item.plot.highlight(item.i, item.plotIndex); + }); +} + +export function isFloat(x) { + return !!(x % 1); +} + +export function getSortedItems(list) { + return list.filter( + (f) => parseFloat(f.value) === parseFloat(f.item.datapoint[1]) + ); +} + +export function getLabelTemplate(sortedList) { + return sortedList + ?.map( + (template) => + `
+
+ +

${template.label}

+
+
+
+
+ ` + ) + + .join(""); +} + +export function makeTolltipItems(list) { + const sorted = getSortedItems(list); + return getLabelTemplate(sorted); +} + +export function getItemsLength(list) { + const sList = getSortedItems(list) + return sList.sort((a,b) => (a.label.length > b.label.length ? 0 : 1))[0].label.length +} + +export function getTimeSpan(data) { + const tsArray = data + .map((tsItem) => tsItem?.data?.map(([t, v]) => t)) + .flat() + .sort(); + const first = tsArray[0]; + //const last = tsArray[tsArray.length - 1] ; + const last = tsArray[tsArray.length - 1]; + + const timeSpan = (last - first) / 1000 / 86400; + + return { first, last, timeSpan }; +} + +export function formatDateRange(data) { + const { timeSpan, first, last } = getTimeSpan(data); + + const formatted = + timeSpan > 1 + ? "%m/%d %H:%M" + : timeSpan > 30 + ? "%y/%m/%d %H:%M" + : "%H:%M:%S"; + return { + timeformat: formatted, + min: first, + max: last, + }; +} + +export function formatTs(values) { + return values.map(([ts, val]) => [ts * 1000, val]); +} + +export function getSeriesFromChartType(type) { + switch (type) { + case "bar": + return CHART_BAR_SERIES; + + case "line": + return CHART_LINE_SERIES; + + case "points": + return CHART_POINT_SERIES; + + default: + return CHART_LINE_SERIES; + } +} + +export function setChartTypeSeries(type) { + switch (type) { + case "bar": + return { series: CHART_BAR_SERIES }; + + case "line": + return { series: CHART_LINE_SERIES }; + + case "points": + return { series: CHART_POINT_SERIES }; + + default: + return { series: CHART_LINE_SERIES }; + } +} + +export function getTypeFromLocal() { + return localStorage.getItem(LOCAL_CHART_TYPE); +} + +export function setTypeToLocal(type) { + localStorage.setItem(LOCAL_CHART_TYPE, type); +} + +export function formatLabel(labels) { + return ( + "{ " + + Object.entries(labels) + .map(([key, value]) => `${key}="${value}"`) + .join(", ") + + " }" + ); +} + +export function hideSeries(series) { + return { + ...series, + lines: { ...series.lines, show: false }, + bars: { ...series.bars, show: false }, + points: { ...series.points, show: false }, + isVisible: false, + }; +} +export function showSeries(series, type) { + const { lines, bars, points } = getSeriesFromChartType(type); + + return { + ...series, + bars, + lines, + points, + isVisible: true, + }; +} + +export function mapIds(arr) { + return arr?.map((m) => m.id); +} + +export function getLabelsSelected() { + return JSON.parse(localStorage.getItem("labelsSelected")) || []; +} + +export function isLAbelSelected(label) { + const labelsSelected = JSON.parse(localStorage.getItem("labelsSelected")); + return labelsSelected.some((l) => l.id === label.id); +} + +export function getNewData(data, type) { + const lSelected = getLabelsSelected(); + + if (lSelected.length > 0) { + const ids = mapIds(lSelected); + + const dataMapped = data?.map((series) => { + if (!ids?.includes(series.id)) { + return hideSeries(series); + } else { + return showSeries(series, type); + } + }); + return dataMapped; + } else { + return data; + } +}