@allurereport/web-classic 3.0.0-beta.8 → 3.0.0

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

@@ -1,66 +0,0 @@
-@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

@@ -1,100 +0,0 @@
-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

@@ -1,155 +0,0 @@
-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

@@ -1,100 +0,0 @@
-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

@@ -1,202 +0,0 @@
-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

@@ -1,16 +0,0 @@
-@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

@@ -1,9 +0,0 @@
-{{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

@@ -1,5 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-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

@@ -1 +0,0 @@
-<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>