@allurereport/web-allure2 3.0.0-beta.10

package/src/components/graph-base/styles.scss

@@ -0,0 +1,66 @@
+@import "../../mixins.scss";
+
+.chart {
+  margin-right: $gap-size;
+  margin-bottom: $gap-size;
+  margin-top: $gap-size;
+  position: relative;
+  flex: 1;
+  &__title {
+    margin-top: 0;
+    margin-bottom: $gap-size;
+    font-size: 18px;
+  }
+  &__caption {
+    text-anchor: middle;
+  }
+  &__body > div {
+    padding-top: 50%;
+    position: relative;
+  }
+  &__svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  &__legend {
+    position: absolute;
+    height: 50%;
+    top: 10%;
+    right: 10%;
+    display: grid;
+  }
+  &__legend-icon {
+    position: relative;
+    top: -1px;
+    border-radius: 3px;
+    display: inline-block;
+    vertical-align: middle;
+    width: 20px;
+    height: 16px;
+    margin-right: 5px;
+    @include status-bg-bright();
+  }
+
+  &__bar {
+    shape-rendering: crispEdges;
+    fill: steelblue;
+  }
+  &__arc {
+    stroke: #fff;
+    stop-opacity: 0;
+  }
+  &__fill {
+    @include status-fill();
+  }
+  &__axis {
+    path,
+    line {
+      shape-rendering: crispEdges;
+      stroke: #000;
+      fill: none;
+    }
+  }
+}

package/src/components/graph-duration-chart/DurationChartView.js

@@ -0,0 +1,100 @@
+import { histogram, max } from "d3-array";
+import { scaleLinear, scaleSqrt } from "d3-scale";
+import BaseChartView from "@/components/graph-base/BaseChartView.js";
+import PopoverView from "@/components/popover/PopoverView.js";
+import duration from "@/helpers/duration.js";
+import translate from "@/helpers/t.js";
+import escape from "@/utils/escape.js";
+
+export default class DurationChart extends BaseChartView {
+  initialize() {
+    this.collection = this.model;
+    this.getChartData();
+  }
+
+  getChartData() {
+    this.data = this.collection
+      .map((testResult) => ({
+        value: testResult.time.duration,
+        name: testResult.name,
+      }))
+      .filter((testResult) => {
+        return testResult.value !== null;
+      });
+  }
+
+  onAttach() {
+    if (this.data && this.data.length) {
+      this.doShow();
+    } else {
+      this.$el.html(`<div class="widget__noitems">${translate("chart.duration.empty")}</div>`);
+    }
+    super.onAttach();
+  }
+
+  doShow() {
+    this.x = scaleLinear();
+    this.y = scaleSqrt();
+    this.tooltip = new PopoverView({ position: "right" });
+
+    this.setupViewport();
+
+    this.x.range([0, this.width]);
+    this.y.range([this.height, 0], 1);
+
+    const maxDuration = max(this.data, (d) => d.value);
+    this.x.domain([0, Math.max(maxDuration, 10)]).nice();
+
+    const bins = histogram()
+      .value((d) => d.value)
+      .domain(this.x.domain())
+      .thresholds(this.x.ticks())(this.data)
+      .map((bin) => ({
+        x0: bin.x0,
+        x1: bin.x1,
+        y: bin.length,
+        testResults: bin,
+      }));
+
+    const maxY = max(bins, (d) => d.y);
+    this.y.domain([0, maxY]).nice();
+
+    this.makeBottomAxis({
+      scale: this.x,
+      tickFormat: (time) => duration(time, 1),
+    });
+
+    this.makeLeftAxis({
+      scale: this.y,
+      ticks: Math.min(10, maxY),
+    });
+
+    let bars = this.plot.selectAll(".chart__bar").data(bins).enter().append("rect").classed("chart__bar", true);
+
+    this.bindTooltip(bars);
+
+    bars
+      .attr("x", (d) => this.x(d.x0) + 2)
+      .attr("y", this.height)
+      .attr("width", (d) => Math.max(this.x(d.x1) - this.x(d.x0) - 2, 0))
+      .attr("height", 0);
+
+    if (this.firstRender) {
+      bars = bars.transition().duration(500);
+    }
+
+    bars.attr("y", (d) => this.y(d.y)).attr("height", (d) => this.height - this.y(d.y));
+  }
+
+  getTooltipContent({ testResults }) {
+    const LIST_LIMIT = 10;
+    const items = testResults.slice(0, LIST_LIMIT);
+    const overLimit = testResults.length - items.length;
+    return `<b>${testResults.length} test cases</b><br>
+            <ul class="popover__list">
+                ${items.map((testResult) => escape`<li>${testResult.name}</li>`).join("")}
+            </ul>
+            ${overLimit ? `...and ${overLimit} more` : ""}
+        `;
+  }
+}

package/src/components/graph-pie-chart/PieChartView.js

@@ -0,0 +1,155 @@
+import { interpolate } from "d3-interpolate";
+import { select } from "d3-selection";
+import { arc, pie } from "d3-shape";
+import { omit } from "underscore";
+import BaseChartView from "@/components/graph-base/BaseChartView.js";
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import { on } from "@/decorators/index.js";
+import translate from "@/helpers/t.js";
+import escape from "@/utils/escape.js";
+import { values } from "@/utils/statuses.js";
+
+const PADDING = 5;
+
+class PieChartView extends BaseChartView {
+  initialize(options) {
+    this.options = options;
+    this.model = this.options.model;
+    this.showLegend = this.options ? this.options.showLegend || false : false;
+
+    this.arc = arc();
+    this.pie = pie()
+      .sort(null)
+      .value((d) => d.value);
+    this.tooltip = new TooltipView({ position: "center" });
+    this.getChartData();
+  }
+
+  getChartData() {
+    this.statistic = this.model.get("statistic");
+    const { total } = this.statistic;
+    const stats = omit(this.statistic, "total");
+    this.data = Object.keys(stats)
+      .map((key) => ({
+        name: key.toUpperCase(),
+        value: stats[key],
+        part: stats[key] / total,
+      }))
+      .filter((item) => item.value);
+  }
+
+  setupViewport() {
+    super.setupViewport();
+    if (this.showLegend) {
+      this.$el.append(this.getLegendTpl());
+    }
+    return this.svg;
+  }
+
+  onAttach() {
+    const data = this.data;
+    const width = this.$el.outerWidth();
+    const height = this.$el.outerHeight();
+    const radius = Math.min(width, height) / 2 - 2 * PADDING;
+    const topOffset = height / 2;
+    let leftOffset = width / 2;
+
+    if (this.showLegend) {
+      leftOffset -= 70;
+    }
+    this.arc.innerRadius(0.8 * radius).outerRadius(radius);
+
+    this.svg = this.setupViewport();
+
+    const sectors = this.svg
+      .select(".chart__plot")
+      .attr("transform", `translate(${leftOffset},${topOffset})`)
+      .selectAll(".chart__arc")
+      .data(this.pie(data))
+      .enter()
+      .append("path")
+      .attr("class", (d) => `chart__arc chart__fill_status_${d.data.name.toLowerCase()}`);
+
+    this.bindTooltip(sectors);
+
+    this.svg
+      .select(".chart__plot")
+      .append("text")
+      .classed("chart__caption", true)
+      .attr("dy", "0.4em")
+      .style("font-size", `${radius / 3}px`)
+      .text(this.getChartTitle());
+
+    if (this.firstRender) {
+      sectors
+        .transition()
+        .duration(750)
+        .attrTween("d", (d) => {
+          const startAngleFn = interpolate(0, d.startAngle);
+          const endAngleFn = interpolate(0, d.endAngle);
+          return (t) => this.arc({ startAngle: startAngleFn(t), endAngle: endAngleFn(t) });
+        });
+    } else {
+      sectors.attr("d", (d) => this.arc(d));
+    }
+    super.onAttach();
+  }
+
+  formatNumber(n) {
+    return (Math.floor(n * 100) / 100).toString();
+  }
+
+  getChartTitle() {
+    const { passed = 0, failed = 0, broken = 0, total = 0 } = this.statistic;
+    if (!total) {
+      return "???";
+    }
+
+    if (!passed) {
+      return "0%";
+    }
+
+    return `${this.formatNumber((passed / (passed + failed + broken)) * 100)}%`;
+  }
+
+  getTooltipContent({ data }) {
+    const value = data.value || 0;
+    const part = data.part || 0;
+    const status = data.name.toLowerCase();
+    const name = translate(`status.${status}`, {});
+    return escape`
+            ${value} tests (${this.formatNumber(part * 100)}%)<br>
+            ${name}
+        `;
+  }
+
+  getLegendTpl() {
+    return `<div class="chart__legend">
+    ${values
+      .map(
+        (status) =>
+          `<div class="chart__legend-row" data-status="${status}">
+<span class="chart__legend-icon chart__legend-icon_status_${status}"></span> ${translate(`status.${status}`)}</div>`,
+      )
+      .join("")}
+</div>`;
+  }
+
+  @on("mouseleave .chart__legend-row")
+  onLegendOut() {
+    this.hideTooltip();
+  }
+
+  @on("mouseenter .chart__legend-row")
+  onLegendHover(e) {
+    const el = this.$(e.currentTarget);
+    const status = el.data("status");
+    const sector = this.$el.find(`.chart__fill_status_${status}`)[0];
+    if (sector) {
+      const data = select(sector).datum();
+      this.showTooltip(data, sector);
+    }
+  }
+}
+
+export default PieChartView;

package/src/components/graph-severity-chart/SeverityChartView.js

@@ -0,0 +1,100 @@
+import { max } from "d3-array";
+import { scaleBand, scaleSqrt } from "d3-scale";
+import BaseChartView from "@/components/graph-base/BaseChartView.js";
+import PopoverView from "@/components/popover/PopoverView.js";
+import escape from "@/utils/escape.js";
+import { values } from "@/utils/statuses.js";
+
+const severities = ["blocker", "critical", "normal", "minor", "trivial"];
+
+export default class SeverityChartView extends BaseChartView {
+  initialize() {
+    this.x = scaleBand().domain(severities);
+    this.y = scaleSqrt();
+    this.status = scaleBand().domain(values);
+    this.tooltip = new PopoverView({ position: "right" });
+    this.collection = this.model;
+    this.getChartData();
+  }
+
+  getChartData() {
+    this.data = severities.map((severity) =>
+      values.map((status) => {
+        const testResults = this.collection.filter(function (item) {
+          return item.status === status && item.severity === severity;
+        });
+        return {
+          value: testResults.length,
+          testResults,
+          severity,
+          status,
+        };
+      }),
+    );
+  }
+
+  onAttach() {
+    const data = this.data;
+    this.setupViewport();
+
+    this.x.range([0, this.width]);
+    this.y.range([this.height, 0], 1);
+    this.y.domain([0, max(data, (d) => max(d, (dd) => dd.value))]).nice();
+    this.status.rangeRound([0, this.x.step()]);
+
+    this.makeBottomAxis({
+      tickFormat: (d) => d.toLowerCase(),
+      scale: this.x,
+    });
+
+    this.svg
+      .selectAll(".tick")
+      .select("line")
+      .attr("transform", `translate(${this.x.step() / 2} , 0)`);
+
+    this.makeLeftAxis({
+      scale: this.y,
+      ticks: Math.min(10, this.y.domain()[1]),
+    });
+
+    let bars = this.svg
+      .select(".chart__plot")
+      .selectAll(".chart__group")
+      .data(data)
+      .enter()
+      .append("g")
+      .attr("transform", (d) => `translate(${this.x(d[0].severity)},0)`)
+      .selectAll(".bar")
+      .data((d) => d)
+      .enter()
+      .append("rect");
+
+    bars
+      .attr("x", (d) => this.status(d.status))
+      .attr("y", this.height)
+      .attr("height", 0)
+      .attr("width", this.status.step())
+      .attr("class", (d) => `chart__bar chart__fill_status_${d.status}`);
+
+    this.bindTooltip(bars);
+
+    if (this.firstRender) {
+      bars = bars.transition().duration(500);
+    }
+
+    bars.attr("y", (d) => this.y(d.value)).attr("height", (d) => this.height - this.y(d.value));
+    super.onAttach();
+  }
+
+  getTooltipContent({ value, severity, status, testResults }) {
+    const LIST_LIMIT = 10;
+    const items = testResults.slice(0, LIST_LIMIT);
+    const overLimit = testResults.length - items.length;
+    return `<b>${value} ${severity.toLowerCase()} test cases ${status.toLowerCase()}</b><br>
+            <ul class="popover__list">
+                ${items.map((testResult) => escape`<li>${testResult.name}</li>`).join("")}
+            </ul>
+            ${overLimit ? `...and ${overLimit} more` : ""}
+        `;
+  }
+}

package/src/components/graph-trend-chart/TrendChartView.js

@@ -0,0 +1,202 @@
+import { max } from "d3-array";
+import { scaleLinear, scalePoint } from "d3-scale";
+import { scaleOrdinal } from "d3-scale";
+import { schemeCategory10 } from "d3-scale-chromatic";
+import { area, line, stack } from "d3-shape";
+import BaseChartView from "@/components/graph-base/BaseChartView.js";
+import TooltipView from "@/components/tooltip/TooltipView.js";
+import translate from "@/helpers/t.js";
+import "./styles.scss";
+import trendTooltip from "./trend-tooltip.hbs";
+
+class TrendChartView extends BaseChartView {
+  PAD_BOTTOM = 50;
+
+  initialize(options) {
+    this.x = scalePoint();
+    this.y = scaleLinear();
+
+    this.tooltip = new TooltipView({ position: "top" });
+    this.keys = options.keys || this.model.keys();
+
+    this.stack = stack()
+      .keys(this.keys)
+      .value((d, key) => d.data[key] || 0);
+
+    this.color = options.colors || scaleOrdinal(schemeCategory10);
+
+    options.notStacked && this.stack.offset(() => {});
+    this.yTickFormat = options.yTickFormat || ((d) => d);
+  }
+
+  onAttach() {
+    const data = this.model.toJSON();
+    if (data && data.length > 1) {
+      this.doShow(data);
+    } else {
+      this.$el.html(`<div class="widget__noitems">${translate("chart.trend.empty")}</div>`);
+    }
+    super.onAttach();
+  }
+
+  doShow(data) {
+    this.setupViewport();
+    this.x.range([0, this.width]);
+    this.y.range([this.height, 0]);
+    this.x.domain(data.map((d) => d.id));
+    this.y.domain([0, max(data, (d) => d.total)]).nice();
+
+    const trendStack = this.stack(data);
+    this.makeBottomAxis({
+      scale: this.x,
+      tickFormat: (d, i) => data[i].name,
+    });
+
+    this.makeLeftAxis({
+      scale: this.y,
+      tickFormat: this.yTickFormat,
+    });
+
+    if (document.dir === "rtl") {
+      this.svg.selectAll(".chart__axis_x").selectAll("text").style("text-anchor", "start");
+    } else {
+      this.svg.selectAll(".chart__axis_x").selectAll("text").style("text-anchor", "end");
+    }
+
+    this.svg
+      .selectAll(".chart__axis_x")
+      .selectAll("text")
+      .attr("dx", "-.8em")
+      .attr("dy", "-.6em")
+      .attr("transform", "rotate(-90)");
+
+    this.options.hideAreas || this.showAreas(trendStack);
+    this.options.hideLines || this.showLines(trendStack);
+    this.options.hidePoints || this.showPoints(trendStack);
+    this.showSlices(data);
+  }
+
+  showAreas(trendStack) {
+    const trendArea = area()
+      .x((d) => this.x(d.data.id))
+      .y0((d) => this.y(d[0]))
+      .y1((d) => this.y(d[1]));
+
+    this.plot
+      .selectAll(".trend__area")
+      .data(trendStack)
+      .enter()
+      .append("path")
+      .attr("class", "trend__area")
+      .attr("d", trendArea)
+      .style("fill", (d) => this.color(d.key))
+      .style("opacity", 0.85);
+  }
+
+  showLines(trendStack) {
+    const trendLine = line()
+      .x((d) => this.x(d.data.id))
+      .y((d) => this.y(d[1]));
+
+    this.plot
+      .selectAll(".trend__line")
+      .data(trendStack)
+      .enter()
+      .append("path")
+      .attr("class", ".trend__line")
+      .attr("d", trendLine)
+      .style("stroke-width", 2)
+      .style("stroke", (d) => this.color(d.key));
+  }
+
+  showPoints(trendStack) {
+    const points = this.plot
+      .selectAll(".trend_points")
+      .data(trendStack)
+      .enter()
+      .append("g")
+      .attr("class", ".trend_point")
+      .style("fill", (d) => this.color(d.key));
+
+    points
+      .selectAll(".trend_point")
+      .data((d) => d)
+      .enter()
+      .append("circle")
+      .attr("r", 2)
+      .attr("cx", (d) => this.x(d.data.id))
+      .attr("cy", (d) => this.y(d[1]))
+      .attr("class", "trend_point");
+  }
+
+  showSlices(data) {
+    this.plot.selectAll(".slice").data(data).enter().append("g").attr("class", "slice");
+
+    this.plot
+      .selectAll(".slice")
+      .filter((d) => d.reportUrl)
+      .append("a")
+      .attr("class", "edge")
+      .filter((d) => d.reportUrl)
+      .attr("xlink:href", (d) => d.reportUrl);
+
+    this.plot
+      .selectAll(".slice")
+      .filter((d) => !d.reportUrl)
+      .append("g")
+      .attr("class", "edge");
+
+    this.plot
+      .selectAll(".edge")
+      .append("line")
+      .attr("id", (d) => d.id)
+      .attr("x1", (d) => this.x(d.id))
+      .attr("y1", (d) => this.y(d.total))
+      .attr("x2", (d) => this.x(d.id))
+      .attr("y2", this.y(0))
+      .attr("stroke", "white")
+      .attr("stroke-width", 1)
+      .attr("class", "report-line");
+
+    this.plot
+      .selectAll(".edge")
+      .append("rect")
+      .style("opacity", 0.0)
+      .attr("class", "report-edge")
+      .attr("x", (d, i) => (i > 0 ? this.x(d.id) - this.x.step() / 2 : 0))
+      .attr("y", 0)
+      .attr("height", this.height)
+      .attr("width", (d, i) => (i === 0 || this.x(d.id) === this.width ? this.x.step() / 2 : this.x.step()))
+      .on("mouseover", (event, d) => {
+        const anchor = this.plot
+          .append("circle")
+          .attr("class", "anchor")
+          .attr("cx", `${this.x(d.id)}`)
+          .attr("cy", `${this.y(d.total / 2)}`);
+        this.showTooltip(d, anchor.node());
+      })
+      .on("mouseout", () => {
+        this.plot.selectAll(".anchor").remove();
+        this.hideTooltip();
+      });
+  }
+
+  getTooltipContent(selectedData) {
+    const tooltipData = {
+      ...selectedData,
+      data: this.keys
+        .map((key) => {
+          return {
+            key,
+            num: this.yTickFormat(selectedData.data[key]),
+            color: this.color(key),
+          };
+        })
+        .filter((item) => !!item.num)
+        .reverse(),
+    };
+    return trendTooltip(tooltipData);
+  }
+}
+
+export default TrendChartView;

package/src/components/graph-trend-chart/styles.scss

@@ -0,0 +1,16 @@
+@import "../../mixins.scss";
+
+.trend {
+  &__tooltip {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: column;
+    &_label {
+      text-align: left;
+      display: inline-block;
+    }
+    &_name {
+      vertical-align: middle;
+    }
+  }
+}

package/src/components/graph-trend-chart/trend-tooltip.hbs

@@ -0,0 +1,9 @@
+{{name}}
+<div class="trend__tooltip">
+    {{#each data}}
+        <div class="trend__tooltip_label">
+            <span class="label" style="background-color: {{color}}">{{num}}</span>
+            <span class="trend__tooltip_name">{{key}}</span>
+        </div>
+    {{/each}}
+</div>

package/src/components/language-select/LanguageSelectView.hbs

@@ -0,0 +1,5 @@
+<ul class="{{b 'language-select' 'menu'}}">
+    {{#each languages}}
+        <li class="{{b 'language-select' 'item' active=(eq id ../currentLang)}}" data-id="{{id}}">{{title}}</li>
+    {{/each}}
+</ul>

package/src/components/language-select/LanguageSelectView.js

@@ -0,0 +1,42 @@
+import $ from "jquery";
+import PopoverView from "@/components/popover/PopoverView.js";
+import { className, on } from "@/decorators/index.js";
+import gtag from "@/utils/gtag.js";
+import settings from "@/utils/settings.js";
+import i18next, { LANGUAGES } from "@/utils/translation.js";
+import template from "./LanguageSelectView.hbs";
+import "./styles.scss";
+
+@className("language-select popover")
+class LanguageSelectView extends PopoverView {
+  initialize() {
+    super.initialize({ position: "top-right" });
+  }
+
+  setContent() {
+    this.$el.html(
+      template({
+        languages: LANGUAGES,
+        currentLang: settings.getLanguage(),
+      }),
+    );
+  }
+
+  show(anchor) {
+    super.show(null, anchor);
+    this.delegateEvents();
+    setTimeout(() => {
+      $(document).one("click", () => this.hide());
+    });
+  }
+
+  @on("click .language-select__item")
+  onLanguageClick(e) {
+    const langId = this.$(e.currentTarget).data("id");
+    settings.setLanguage(langId);
+    i18next.changeLanguage(langId);
+    gtag("language_change", { language: langId });
+  }
+}
+
+export default LanguageSelectView;

package/src/components/language-select/checkmark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15"><path d="M12.035.373l-7.531 11.268-3.529-3.934-.976 1.242 4.625 5.109 8.546-12.598z"/></svg>