@springernature/nn-charts/dist/utils/tooltips.js

Visualization for DAS products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createTooltip = createTooltip;
exports.getTooltipTemplate = void 0;
var _constants = require("../constants");
function createTooltip(config, data, hoverLabelIndex) {
  var svgBasePanelClassNames = config.baseContainerDiv ? config.baseContainerDiv : "chart";
  var baseElement = document.querySelector(".".concat(svgBasePanelClassNames));
  var tooltipContainerEle = document.createElement("div");
  tooltipContainerEle.classList.add("tooltip-group");
  baseElement.appendChild(tooltipContainerEle);
  var shape = config["legend"].swatchSymbol ? config["legend"].swatchSymbol : "square";

  // create legend items
  var headLi = document.createElement("h3");
  headLi.classList.add("tooltip-heading");
  headLi.appendChild(document.createTextNode(data.year));
  tooltipContainerEle.appendChild(headLi);
  var colours = config["theme"].groupColours;
  var tooltipItemEle = document.createElement("ul");
  tooltipItemEle.classList.add("tooltip-items", "tooltip-body");
  var totalValue = data["data"].reduce(function (x, y) {
    return x + y;
  }, 0);
  config["legend"]["categories"].forEach(function (ele, i) {
    var percent = Math.round(data["data"][i] / totalValue * 100);
    var totalPublications = config.clickedChartType == "percent" ? "".concat(data["data"][i], " (").concat(percent, "%)") : data["data"][i];
    var li = document.createElement("li");
    var categaryElement = document.createElement("span");
    var swatch = document.createElement("i");
    swatch.classList.add("tt-shape", "tt-shape__".concat(shape));
    swatch.setAttribute("style", "background-color: ".concat(colours[i]));
    categaryElement.appendChild(swatch);
    categaryElement.classList.add("tt-category");
    categaryElement.appendChild(document.createTextNode(ele));
    li.appendChild(categaryElement);
    var valueElement = document.createElement("span");
    valueElement.classList.add("tt-value");
    valueElement.appendChild(document.createTextNode(totalPublications));
    li.appendChild(valueElement);
    li.classList.add("tooltip-item", "tooltip-item__".concat(i), hoverLabelIndex == i ? "hovered" : "normal");
    tooltipItemEle.appendChild(li);
  });
  tooltipContainerEle.appendChild(tooltipItemEle);
  var totalElement = document.createElement("h4");
  totalElement.classList.add("tooltip-footer");
  var categaryElement = document.createElement("span");
  categaryElement.classList.add("tt-category");
  categaryElement.appendChild(document.createTextNode("Total Publications"));
  totalElement.appendChild(categaryElement);
  var valueElement = document.createElement("span");
  valueElement.classList.add("tt-value");
  valueElement.appendChild(document.createTextNode(totalValue));
  totalElement.appendChild(valueElement);
  tooltipContainerEle.appendChild(totalElement);
  return tooltipContainerEle;
}
var getTooltipTemplate = exports.getTooltipTemplate = function getTooltipTemplate() {
  var containerClass = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "tooltip-container";
  var header = arguments.length > 1 ? arguments[1] : undefined;
  var footer = arguments.length > 2 ? arguments[2] : undefined;
  var createHeader = function createHeader(_ref) {
    var _ref$showHeader = _ref.showHeader,
      showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
      _ref$title = _ref.title,
      title = _ref$title === void 0 ? "Default title" : _ref$title,
      _ref$subtitle = _ref.subtitle,
      subtitle = _ref$subtitle === void 0 ? "Default subtitle" : _ref$subtitle,
      _ref$headerTemplate = _ref.headerTemplate,
      headerTemplate = _ref$headerTemplate === void 0 ? null : _ref$headerTemplate;
    if (headerTemplate) return headerTemplate; // Use custom template if provided
    if (!showHeader) return null; // No header to show
    // default header
    var tooltipHeader = document.createElement("div");
    tooltipHeader.className = "tooltip-header";
    var headerTitle = document.createElement("p");
    headerTitle.className = "tooltip-header__title";
    headerTitle.textContent = title;
    var headerSubtitle = document.createElement("p");
    headerSubtitle.className = "tooltip-header__subtitle";
    headerSubtitle.textContent = subtitle;
    tooltipHeader.appendChild(headerTitle);
    tooltipHeader.appendChild(headerSubtitle);
    return tooltipHeader;
  };
  var createFooter = function createFooter(_ref2) {
    var _ref2$showFooter = _ref2.showFooter,
      showFooter = _ref2$showFooter === void 0 ? true : _ref2$showFooter,
      _ref2$btnText = _ref2.btnText,
      btnText = _ref2$btnText === void 0 ? "Default Button" : _ref2$btnText,
      _ref2$footerTemplate = _ref2.footerTemplate,
      footerTemplate = _ref2$footerTemplate === void 0 ? null : _ref2$footerTemplate,
      btnClickHandler = _ref2.btnClickHandler;
    if (footerTemplate) return footerTemplate; // Use custom template if provided
    if (!showFooter) return undefined; // No footer to show

    var tooltipFooter = document.createElement("div");
    tooltipFooter.className = "tooltip-footer";
    var footerBtn = document.createElement("button");
    footerBtn.className = "tooltip-footer__btn";
    footerBtn.textContent = btnText;
    footerBtn.insertAdjacentHTML("beforeend", "".concat(_constants.CHEVRON_RIGHT_SVG_ICON));
    footerBtn.addEventListener("click", function () {
      return btnClickHandler();
    });
    tooltipFooter.appendChild(footerBtn);
    return tooltipFooter;
  };
  var headerTemplate = createHeader(header);
  var footerTemplate = createFooter(footer);
  var tooltipTemplate = document.createElement("div");
  tooltipTemplate.className = containerClass;
  headerTemplate && tooltipTemplate.appendChild(headerTemplate);
  footerTemplate && tooltipTemplate.appendChild(footerTemplate);
  return tooltipTemplate;
};