datavzrd 2.73.0

A tool to create visual HTML reports from collections of CSV/TSV tables
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

import $ from "jquery";
import {
  isDark,
  datavzrdScale
} from "./heatmap";
import { createLinkHtml, dropdownItems } from "./link-to-url";

function renderPill(
  value,
  color,
  ellipsis,
  merge = false,
  position = "middle",
  dropdown = false,
) {
  let styles = `padding: 4px 8px; background-color: ${color};`;
  if (isDark(color)) {
    styles += "color: white;";
  }
  if (!merge) {
    styles += "margin: 2px; border-radius: 12px;";
  } else {
    let radius =
      position === "first"
        ? "12px 0 0 12px"
        : position === "last"
          ? "0 12px 12px 0"
          : position === "only"
            ? "12px"
            : "0";
    styles += `border-radius: ${radius}; margin: 0;`;
  }
  if (dropdown) {
    styles += "cursor: pointer;";
  }
  let toggle = dropdown
    ? ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"'
    : "";
  let tooltip = dropdown
    ? ""
    : ' data-toggle="tooltip" data-trigger="hover click focus"';

  if (ellipsis === 0) {
    return `<span style="${styles}; padding:6px 12px; height:24px; width:24px;"${toggle}${tooltip} title='${value}'></span>`;
  } else if (ellipsis === undefined || value.length <= ellipsis) {
    return `<span style="${styles}"${toggle}>${value}</span>`;
  } else {
    return `<span style="${styles}"${toggle}${tooltip} title='${value}'>${value.substring(0, ellipsis)}...</span>`;
  }
}

export function pillsToHeatmap(pills) {
  return {
    heatmap: {
      scale: "ordinal",
      domain: pills.pills.domain,
      range: pills.pills.range,
      "color-scheme": pills.pills["color-scheme"],
      clamp: true,
      "custom-content": undefined,
      legend: pills.pills.legend,
    },
  };
}

function renderPillGroup(value, pills, scale, link, columns, row) {
  let values = value.split(pills.pills.separator).map((item) => item.trim());
  return values
    .map((v, i) => {
      let pos =
        values.length === 1
          ? "only"
          : i === 0
            ? "first"
            : i === values.length - 1
              ? "last"
              : "middle";
      if (link && link.links.length > 1) {
        let toggle = renderPill(
          v,
          scale(v),
          pills.pills.ellipsis,
          pills.pills.merge,
          pos,
          true,
        );
        let items = dropdownItems(columns, link.links, value, row, v);
        return `<span class="btn-group pill-dropdown">${toggle}<div class="dropdown-menu">${items}</div></span>`;
      }
      let pill = renderPill(
        v,
        scale(v),
        pills.pills.ellipsis,
        pills.pills.merge,
        pos,
      );
      if (link) {
        return createLinkHtml(columns, link.links, value, pill, row, v);
      }
      return pill;
    })
    .join("");
}

export function renderPills(
  ah,
  columns,
  pills,
  detail_mode,
  header_label_length,
  columnIndexMap,
  link,
  link_columns,
) {
  let index = columnIndexMap[pills.title];
  let row = 0;
  var table_rows = $("#table").bootstrapTable("getData", {
    useCurrentPage: "true",
  });
  let heatmap = pillsToHeatmap(pills);
  let scale = datavzrdScale(heatmap);

  $(`table > tbody > tr td:nth-child(${index})`).each(function () {
    var value = table_rows[row][pills.title];
    if (value !== "") {
      let content = renderPillGroup(
        value,
        pills,
        scale,
        link,
        link_columns,
        table_rows[row],
      );
      this.innerHTML = `<div class="pills-cell" style="display: inline-block; margin: 8px 0;">${content}</div>`;
    }
    row++;
  });
}

export function renderDetailPills(value, div, pills, link, link_columns, row) {
  let heatmap = pillsToHeatmap(pills);
  let scale = datavzrdScale(heatmap);

  if (value !== "") {
    let content = renderPillGroup(value, pills, scale, link, link_columns, row);
    $(`${div}`)[0].innerHTML = `<div class="detail-pills-wrapper">${content}</div>`;
  }
  $('[data-toggle="tooltip"]').tooltip({
    sanitizeFn: function (content) {
      return content;
    },
  });
}