diff --git a/src/js/tribe/tribe.js b/src/js/tribe/tribe.js index d71f36c7b..1a74336d5 100644 --- a/src/js/tribe/tribe.js +++ b/src/js/tribe/tribe.js @@ -16,6 +16,7 @@ import * as CommandlineLists from "./commandline-lists"; import * as OnlineStats from "./tribe-online-stats"; import seedrandom from "seedrandom"; import * as SimplePopups from "./simple-popups"; +import * as ChartController from "./chart-controller"; export let state = -1; export let socket = io( @@ -2291,22 +2292,85 @@ let miniChartSettings = { bodyFontFamily: "Roboto Mono", mode: "index", intersect: false, - callbacks: { - afterLabel: function (ti, data) { - try { - //TODO bring back - // $(".wordInputAfter").remove(); - // let wordsToHighlight = - // keypressPerSecond[parseInt(ti.xLabel) - 1].words; - // let unique = [...new Set(wordsToHighlight)]; - // unique.forEach((wordIndex) => { - // let wordEl = $($("#resultWordsHistory .words .word")[wordIndex]); - // let input = wordEl.attr("input"); - // if (input != undefined) - // wordEl.append(`
${input}
`); - // }); - } catch (e) {} - }, + enabled: false, + custom: function (tooltipModel) { + // Tooltip Element + var tooltipEl = document.getElementById("tribeMiniChartCustomTooltip"); + + // Create element on first render + if (!tooltipEl) { + tooltipEl = document.createElement("div"); + tooltipEl.id = "tribeMiniChartCustomTooltip"; + tooltipEl.innerHTML = "
"; + document.body.appendChild(tooltipEl); + } + + // Hide if no tooltip + if (tooltipModel.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + + // Set caret Position + tooltipEl.classList.remove("above", "below", "no-transform"); + if (tooltipModel.yAlign) { + tooltipEl.classList.add(tooltipModel.yAlign); + } else { + tooltipEl.classList.add("no-transform"); + } + + function getBody(bodyItem) { + return bodyItem.lines; + } + + // Set Text + if (tooltipModel.body) { + var titleLines = tooltipModel.title || []; + var bodyLines = tooltipModel.body.map(getBody); + + var innerHtml = ""; + + titleLines.forEach(function (title) { + innerHtml += "
" + title + "
"; + }); + // innerHtml += ''; + + bodyLines.forEach(function (body, i) { + // var colors = tooltipModel.labelColors[i]; + // var style = 'background:' + colors.backgroundColor; + // style += '; border-color:' + colors.borderColor; + // style += '; border-width: 2px'; + // var span = ''; + innerHtml += "
" + body + "
"; + // innerHtml += '' + span + body + ''; + }); + // innerHtml += ''; + + var tableRoot = tooltipEl.querySelector("div"); + tableRoot.innerHTML = innerHtml; + } + + // `this` will be the overall tooltip + var position = this._chart.canvas.getBoundingClientRect(); + + // Display, position, and set styles for font + tooltipEl.style.opacity = 1; + tooltipEl.style.position = "absolute"; + tooltipEl.style.left = + position.left + window.pageXOffset + tooltipModel.caretX + "px"; + tooltipEl.style.top = + position.top + window.pageYOffset + tooltipModel.caretY + "px"; + // tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily; + tooltipEl.style.fontSize = "0.75rem"; + tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle; + tooltipEl.style.padding = + tooltipModel.yPadding + "px " + tooltipModel.xPadding + "px"; + tooltipEl.style.pointerEvents = "none"; + tooltipEl.style.background = "rgba(0,0,0,.75)"; + tooltipEl.style.borderRadius = "0.5rem"; + tooltipEl.style.color = "white"; + tooltipEl.style.zIndex = "999"; + tooltipEl.style.transition = "left 0.25s, top 0.25s, opacity 0.25s"; }, }, legend: {