summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--devtools/client/locales/en-US/netmonitor.properties39
-rw-r--r--devtools/client/netmonitor/components/summary-button.js18
-rw-r--r--devtools/client/netmonitor/netmonitor-view.js2
-rw-r--r--devtools/client/netmonitor/performance-statistics-view.js36
-rw-r--r--devtools/client/netmonitor/selectors/index.js27
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-03.js45
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-04.js16
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-05.js10
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-07.js16
-rw-r--r--devtools/client/netmonitor/test/browser_net_footer-summary.js13
-rw-r--r--devtools/client/shared/widgets/Chart.jsm25
11 files changed, 177 insertions, 70 deletions
diff --git a/devtools/client/locales/en-US/netmonitor.properties b/devtools/client/locales/en-US/netmonitor.properties
index e6118ca9f..f07f38907 100644
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -143,12 +143,12 @@ networkMenu.sortedDesc=Sorted descending
# in the network table footer when there are no requests available.
networkMenu.empty=No requests
-# LOCALIZATION NOTE (networkMenu.summary): Semi-colon list of plural forms.
+# LOCALIZATION NOTE (networkMenu.summary2): Semi-colon list of plural forms.
# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
# This label is displayed in the network table footer providing concise
# information about all requests. Parameters: #1 is the number of requests,
-# #2 is the size, #3 is the number of seconds.
-networkMenu.summary=One request, #2 KB, #3 s;#1 requests, #2 KB, #3 s
+# #2 is the size, #3 is the transferred size, #4 is the number of seconds.
+networkMenu.summary2=One request, #2 KB (transferred: #3 KB), #4 s;#1 requests, #2 KB (transferred: #3 KB), #4 s
# LOCALIZATION NOTE (networkMenu.sizeB): This is the label displayed
# in the network menu specifying the size of a request (in bytes).
@@ -221,10 +221,22 @@ tableChart.unavailable=No data available
# in pie or table charts specifying the size of a request (in kilobytes).
charts.sizeKB=%S KB
+# LOCALIZATION NOTE (charts.transferredSizeKB): This is the label displayed
+# in pie or table charts specifying the size of a transferred request (in kilobytes).
+charts.transferredSizeKB=%S KB
+
# LOCALIZATION NOTE (charts.totalS): This is the label displayed
# in pie or table charts specifying the time for a request to finish (in seconds).
charts.totalS=%S s
+# LOCALIZATION NOTE (charts.totalSize): This is the label displayed
+# in the performance analysis view for total requests size, in kilobytes.
+charts.totalSize=Size: %S KB
+
+# LOCALIZATION NOTE (charts.totalTranferredSize): This is the label displayed
+# in the performance analysis view for total transferred size, in kilobytes.
+charts.totalTransferredSize=Transferred Size: %S KB
+
# LOCALIZATION NOTE (charts.cacheEnabled): This is the label displayed
# in the performance analysis view for "cache enabled" charts.
charts.cacheEnabled=Primed cache
@@ -233,10 +245,6 @@ charts.cacheEnabled=Primed cache
# in the performance analysis view for "cache disabled" charts.
charts.cacheDisabled=Empty cache
-# LOCALIZATION NOTE (charts.totalSize): This is the label displayed
-# in the performance analysis view for total requests size, in kilobytes.
-charts.totalSize=Size: %S KB
-
# LOCALIZATION NOTE (charts.totalSeconds): Semi-colon list of plural forms.
# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
# This is the label displayed in the performance analysis view for the
@@ -251,6 +259,23 @@ charts.totalCached=Cached responses: %S
# in the performance analysis view for total requests.
charts.totalCount=Total requests: %S
+# LOCALIZATION NOTE (charts.size): This is the label displayed
+# in the header column in the performance analysis view for size of the request.
+charts.size=Size
+
+# LOCALIZATION NOTE (charts.type): This is the label displayed
+# in the header column in the performance analysis view for type of request.
+charts.type=Type
+
+# LOCALIZATION NOTE (charts.transferred): This is the label displayed
+# in the header column in the performance analysis view for transferred
+# size of the request.
+charts.transferred=Transferred
+
+# LOCALIZATION NOTE (charts.time): This is the label displayed
+# in the header column in the performance analysis view for time of request.
+charts.time=Time
+
# LOCALIZATION NOTE (netRequest.headers): A label used for Headers tab
# This tab displays list of HTTP headers
netRequest.headers=Headers
diff --git a/devtools/client/netmonitor/components/summary-button.js b/devtools/client/netmonitor/components/summary-button.js
index 9465d3147..223552fbf 100644
--- a/devtools/client/netmonitor/components/summary-button.js
+++ b/devtools/client/netmonitor/components/summary-button.js
@@ -14,21 +14,25 @@ const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { PluralForm } = require("devtools/shared/plural-form");
const { L10N } = require("../l10n");
-const { getSummary } = require("../selectors/index");
+const {
+ getDisplayedRequestsSummary
+} = require("../selectors/index");
const { button, span } = DOM;
function SummaryButton({
summary,
- triggerSummary,
+ triggerSummary
}) {
- let { count, totalBytes, totalMillis } = summary;
+ let { count, contentSize, transferredSize, millis } = summary;
const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
- PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+ PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
.replace("#1", count)
- .replace("#2", L10N.numberWithDecimals(totalBytes / 1024,
+ .replace("#2", L10N.numberWithDecimals(contentSize / 1024,
CONTENT_SIZE_DECIMALS))
- .replace("#3", L10N.numberWithDecimals(totalMillis / 1000,
+ .replace("#3", L10N.numberWithDecimals(transferredSize / 1024,
+ CONTENT_SIZE_DECIMALS))
+ .replace("#4", L10N.numberWithDecimals(millis / 1000,
REQUEST_TIME_DECIMALS));
return button({
@@ -47,7 +51,7 @@ SummaryButton.propTypes = {
module.exports = connect(
(state) => ({
- summary: getSummary(state),
+ summary: getDisplayedRequestsSummary(state),
}),
(dispatch) => ({
triggerSummary: () => {
diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js
index 8da5a2038..1f957db1b 100644
--- a/devtools/client/netmonitor/netmonitor-view.js
+++ b/devtools/client/netmonitor/netmonitor-view.js
@@ -233,7 +233,7 @@ var NetMonitorView = {
// populating the statistics view.
// • The response mime type is used for categorization.
yield whenDataAvailable(requestsView, [
- "responseHeaders", "status", "contentSize", "mimeType", "totalTime"
+ "responseHeaders", "status", "contentSize", "transferredSize", "mimeType", "totalTime"
]);
} catch (ex) {
// Timed out while waiting for data. Continue with what we have.
diff --git a/devtools/client/netmonitor/performance-statistics-view.js b/devtools/client/netmonitor/performance-statistics-view.js
index c712c083d..38b98fb68 100644
--- a/devtools/client/netmonitor/performance-statistics-view.js
+++ b/devtools/client/netmonitor/performance-statistics-view.js
@@ -92,27 +92,35 @@ PerformanceStatisticsView.prototype = {
let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);
return L10N.getFormatStr("charts.sizeKB", string);
},
+ transferredSize: value => {
+ let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);
+ return L10N.getFormatStr("charts.transferredSizeKB", string);
+ },
time: value => {
let string = L10N.numberWithDecimals(value / 1000, REQUEST_TIME_DECIMALS);
return L10N.getFormatStr("charts.totalS", string);
}
},
_commonChartTotals: {
+ cached: total => {
+ return L10N.getFormatStr("charts.totalCached", total);
+ },
+ count: total => {
+ return L10N.getFormatStr("charts.totalCount", total);
+ },
size: total => {
let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);
return L10N.getFormatStr("charts.totalSize", string);
},
+ transferredSize: total => {
+ let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);
+ return L10N.getFormatStr("charts.totalTransferredSize", string);
+ },
time: total => {
let seconds = total / 1000;
let string = L10N.numberWithDecimals(seconds, REQUEST_TIME_DECIMALS);
return PluralForm.get(seconds,
L10N.getStr("charts.totalSeconds")).replace("#1", string);
- },
- cached: total => {
- return L10N.getFormatStr("charts.totalCached", total);
- },
- count: total => {
- return L10N.getFormatStr("charts.totalCount", total);
}
},
@@ -136,6 +144,14 @@ PerformanceStatisticsView.prototype = {
let chart = Chart.PieTable(document, {
diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
title: L10N.getStr(title),
+ header: {
+ cached: "",
+ count: "",
+ label: L10N.getStr("charts.type"),
+ size: L10N.getStr("charts.size"),
+ transferredSize: L10N.getStr("charts.transferred"),
+ time: L10N.getStr("charts.time")
+ },
data: data,
strings: strings,
totals: totals,
@@ -161,13 +177,14 @@ PerformanceStatisticsView.prototype = {
* True if the cache is considered enabled, false for disabled.
*/
_sanitizeChartDataSource: function (items, emptyCache) {
- let data = [
+ const data = [
"html", "css", "js", "xhr", "fonts", "images", "media", "flash", "ws", "other"
- ].map(e => ({
+ ].map((type) => ({
cached: 0,
count: 0,
- label: e,
+ label: type,
size: 0,
+ transferredSize: 0,
time: 0
}));
@@ -211,6 +228,7 @@ PerformanceStatisticsView.prototype = {
if (emptyCache || !responseIsFresh(details)) {
data[type].time += details.totalTime || 0;
data[type].size += details.contentSize || 0;
+ data[type].transferredSize += details.transferredSize || 0;
} else {
data[type].cached++;
}
diff --git a/devtools/client/netmonitor/selectors/index.js b/devtools/client/netmonitor/selectors/index.js
index 8cd6b6ffc..60d6007cd 100644
--- a/devtools/client/netmonitor/selectors/index.js
+++ b/devtools/client/netmonitor/selectors/index.js
@@ -13,7 +13,7 @@ const { createSelector } = require("devtools/client/shared/vendor/reselect");
* @param {array} items - an array of request items
* @return {number} total bytes of requests
*/
-function getTotalBytesOfRequests(items) {
+function getContentSizeOfRequests(items) {
if (!items.length) {
return 0;
}
@@ -27,6 +27,20 @@ function getTotalBytesOfRequests(items) {
return result;
}
+function getTransferredSizeOfRequests(items) {
+ if (!items.length) {
+ return 0;
+ }
+
+ let result = 0;
+ items.forEach((item) => {
+ let size = item.attachment.transferredSize;
+ result += (typeof size == "number") ? size : 0;
+ });
+
+ return result;
+}
+
/**
* Gets the total milliseconds for all requests. Returns null for an
* empty set.
@@ -34,7 +48,7 @@ function getTotalBytesOfRequests(items) {
* @param {array} items - an array of request items
* @return {object} total milliseconds for all requests
*/
-function getTotalMillisOfRequests(items) {
+function getMillisOfRequests(items) {
if (!items.length) {
return null;
}
@@ -49,15 +63,16 @@ function getTotalMillisOfRequests(items) {
return newest.attachment.endedMillis - oldest.attachment.startedMillis;
}
-const getSummary = createSelector(
+const getDisplayedRequestsSummary = createSelector(
(state) => state.requests.items,
(requests) => ({
count: requests.length,
- totalBytes: getTotalBytesOfRequests(requests),
- totalMillis: getTotalMillisOfRequests(requests),
+ contentSize: getContentSizeOfRequests(requests),
+ transferredSize: getTransferredSizeOfRequests(requests),
+ millis: getMillisOfRequests(requests),
})
);
module.exports = {
- getSummary,
+ getDisplayedRequestsSummary,
};
diff --git a/devtools/client/netmonitor/test/browser_net_charts-03.js b/devtools/client/netmonitor/test/browser_net_charts-03.js
index c7d9b0c1a..4a655a8ca 100644
--- a/devtools/client/netmonitor/test/browser_net_charts-03.js
+++ b/devtools/client/netmonitor/test/browser_net_charts-03.js
@@ -33,6 +33,10 @@ add_task(function* () {
totals: {
label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
label2: value => "World " + L10N.numberWithDecimals(value, 2)
+ },
+ header: {
+ label1: "label1header",
+ label2: "label2header",
}
});
@@ -51,39 +55,48 @@ add_task(function* () {
is(title.getAttribute("value"), "Table title",
"The title node displays the correct text.");
- is(rows.length, 3, "There should be 3 table chart rows created.");
+ is(rows.length, 4, "There should be 3 table chart rows and a header created.");
- ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
- "A colored blob exists for the firt row.");
is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "label1",
- "The first column of the first row exists.");
+ "The first column of the header exists.");
is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label2",
+ "The second column of the header exists.");
+ is(rows[0].querySelectorAll("span")[0].textContent, "label1header",
+ "The first column of the header displays the correct text.");
+ is(rows[0].querySelectorAll("span")[1].textContent, "label2header",
+ "The second column of the header displays the correct text.");
+
+ ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
+ "A colored blob exists for the firt row.");
+ is(rows[1].querySelectorAll("span")[0].getAttribute("name"), "label1",
+ "The first column of the first row exists.");
+ is(rows[1].querySelectorAll("span")[1].getAttribute("name"), "label2",
"The second column of the first row exists.");
- is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "1",
+ is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "1",
"The first column of the first row displays the correct text.");
- is(rows[0].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
+ is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
"The second column of the first row displays the correct text.");
- ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
+ ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"),
"A colored blob exists for the second row.");
- is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "label1",
+ is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1",
"The first column of the second row exists.");
- is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label2",
+ is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2",
"The second column of the second row exists.");
- is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "2",
+ is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "2",
"The first column of the second row displays the correct text.");
- is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
+ is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
"The second column of the first row displays the correct text.");
- ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"),
+ ok(rows[3].querySelector(".table-chart-row-box.chart-colored-blob"),
"A colored blob exists for the third row.");
- is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1",
+ is(rows[3].querySelectorAll("label")[0].getAttribute("name"), "label1",
"The first column of the third row exists.");
- is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2",
+ is(rows[3].querySelectorAll("label")[1].getAttribute("name"), "label2",
"The second column of the third row exists.");
- is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "3",
+ is(rows[3].querySelectorAll("label")[0].getAttribute("value"), "3",
"The first column of the third row displays the correct text.");
- is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
+ is(rows[3].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
"The second column of the third row displays the correct text.");
is(sums.length, 2, "There should be 2 total summaries created.");
diff --git a/devtools/client/netmonitor/test/browser_net_charts-04.js b/devtools/client/netmonitor/test/browser_net_charts-04.js
index 0d150c409..921701ae5 100644
--- a/devtools/client/netmonitor/test/browser_net_charts-04.js
+++ b/devtools/client/netmonitor/test/browser_net_charts-04.js
@@ -22,6 +22,10 @@ add_task(function* () {
totals: {
label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
label2: value => "World " + L10N.numberWithDecimals(value, 2)
+ },
+ header: {
+ label1: "",
+ label2: ""
}
});
@@ -40,17 +44,17 @@ add_task(function* () {
is(title.getAttribute("value"), "Table title",
"The title node displays the correct text.");
- is(rows.length, 1, "There should be 1 table chart row created.");
+ is(rows.length, 2, "There should be 1 table chart row and a 1 header created.");
- ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+ ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
"A colored blob exists for the firt row.");
- is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+ is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "size",
"The first column of the first row exists.");
- is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+ is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label",
"The second column of the first row exists.");
- is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+ is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "",
"The first column of the first row displays the correct text.");
- is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+ is(rows[1].querySelectorAll("label")[1].getAttribute("value"),
L10N.getStr("tableChart.loading"),
"The second column of the first row displays the correct text.");
diff --git a/devtools/client/netmonitor/test/browser_net_charts-05.js b/devtools/client/netmonitor/test/browser_net_charts-05.js
index 00445b132..c444d2c65 100644
--- a/devtools/client/netmonitor/test/browser_net_charts-05.js
+++ b/devtools/client/netmonitor/test/browser_net_charts-05.js
@@ -33,6 +33,10 @@ add_task(function* () {
totals: {
size: value => "Hello " + L10N.numberWithDecimals(value, 2),
label: value => "World " + L10N.numberWithDecimals(value, 2)
+ },
+ header: {
+ label1: "",
+ label2: ""
}
});
@@ -53,9 +57,9 @@ add_task(function* () {
ok(node.querySelector(".table-chart-container"),
"A table chart was created successfully.");
- is(rows.length, 3, "There should be 3 pie chart slices created.");
- is(rows.length, 3, "There should be 3 table chart rows created.");
- is(sums.length, 2, "There should be 2 total summaries created.");
+ is(rows.length, 4, "There should be 3 pie chart slices and 1 header created.");
+ is(rows.length, 4, "There should be 3 table chart rows and 1 header created.");
+ is(sums.length, 2, "There should be 2 total summaries and 1 header created.");
yield teardown(monitor);
});
diff --git a/devtools/client/netmonitor/test/browser_net_charts-07.js b/devtools/client/netmonitor/test/browser_net_charts-07.js
index bb992e4eb..a655f258c 100644
--- a/devtools/client/netmonitor/test/browser_net_charts-07.js
+++ b/devtools/client/netmonitor/test/browser_net_charts-07.js
@@ -20,6 +20,10 @@ add_task(function* () {
totals: {
label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
label2: value => "World " + L10N.numberWithDecimals(value, 2)
+ },
+ header: {
+ label1: "",
+ label2: ""
}
});
@@ -29,17 +33,17 @@ add_task(function* () {
let rows = grid.querySelectorAll(".table-chart-row");
let sums = node.querySelectorAll(".table-chart-summary-label");
- is(rows.length, 1, "There should be 1 table chart row created.");
+ is(rows.length, 2, "There should be 1 table chart row and 1 header created.");
- ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+ ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
"A colored blob exists for the firt row.");
- is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+ is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "size",
"The first column of the first row exists.");
- is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+ is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label",
"The second column of the first row exists.");
- is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+ is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "",
"The first column of the first row displays the correct text.");
- is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+ is(rows[1].querySelectorAll("label")[1].getAttribute("value"),
L10N.getStr("tableChart.unavailable"),
"The second column of the first row displays the correct text.");
diff --git a/devtools/client/netmonitor/test/browser_net_footer-summary.js b/devtools/client/netmonitor/test/browser_net_footer-summary.js
index 94bfa604b..8faa8470b 100644
--- a/devtools/client/netmonitor/test/browser_net_footer-summary.js
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -44,7 +44,7 @@ add_task(function* () {
yield teardown(monitor);
function testStatus() {
- const { count, totalBytes, totalMillis } = getSummary(gStore.getState());
+ const { count, contentSize, transferredSize, millis } = getSummary(gStore.getState());
let value = $("#requests-menu-network-summary-button").textContent;
info("Current summary: " + value);
@@ -57,13 +57,14 @@ add_task(function* () {
return;
}
- info("Computed total bytes: " + totalBytes);
- info("Computed total millis: " + totalMillis);
+ info("Computed total bytes: " + contentSize);
+ info("Computed total millis: " + millis);
- is(value, PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+ is(value, PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
.replace("#1", count)
- .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, 2))
- .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, 2))
+ .replace("#2", L10N.numberWithDecimals((contentSize || 0) / 1024, 2))
+ .replace("#3", L10N.numberWithDecimals((transferredSize || 0) / 1024, 2))
+ .replace("#4", L10N.numberWithDecimals((millis || 0) / 1000, 2))
, "The current summary text is incorrect.");
}
});
diff --git a/devtools/client/shared/widgets/Chart.jsm b/devtools/client/shared/widgets/Chart.jsm
index 0894a62ca..0b7cb71fb 100644
--- a/devtools/client/shared/widgets/Chart.jsm
+++ b/devtools/client/shared/widgets/Chart.jsm
@@ -105,7 +105,7 @@ function PieTableChart(node, pie, table) {
* - "mouseout", when the mouse leaves a slice or a row
* - "click", when the mouse enters a slice or a row
*/
-function createPieTableChart(document, { title, diameter, data, strings, totals, sorted }) {
+function createPieTableChart(document, { title, diameter, data, strings, totals, sorted, header }) {
if (data && sorted) {
data = data.slice().sort((a, b) => +(a.size < b.size));
}
@@ -119,7 +119,8 @@ function createPieTableChart(document, { title, diameter, data, strings, totals,
title: title,
data: data,
strings: strings,
- totals: totals
+ totals: totals,
+ header: header,
});
let container = document.createElement("hbox");
@@ -338,7 +339,7 @@ function createPieChart(document, { data, width, height, centerX, centerY, radiu
* - "mouseout", when the mouse leaves a row
* - "click", when the mouse clicks a row
*/
-function createTableChart(document, { title, data, strings, totals }) {
+function createTableChart(document, { title, data, strings, totals, header }) {
strings = strings || {};
totals = totals || {};
let isPlaceholder = false;
@@ -371,6 +372,24 @@ function createTableChart(document, { title, data, strings, totals }) {
tableNode.className = "plain table-chart-grid";
container.appendChild(tableNode);
+ const headerNode = document.createElement("div");
+ headerNode.className = "table-chart-row";
+
+ const headerBoxNode = document.createElement("div");
+ headerBoxNode.className = "table-chart-row-box";
+ headerNode.appendChild(headerBoxNode);
+
+ for (let [key, value] of Object.entries(header)) {
+ let headerLabelNode = document.createElement("span");
+ headerLabelNode.className = "plain table-chart-row-label";
+ headerLabelNode.setAttribute("name", key);
+ headerLabelNode.textContent = value;
+
+ headerNode.appendChild(headerLabelNode);
+ }
+
+ tableNode.appendChild(headerNode);
+
for (let rowInfo of data) {
let rowNode = document.createElement("hbox");
rowNode.className = "table-chart-row";