fluency-v8-components 1.3.5 → 1.3.6

package/src/components/charts/BarChartHorizontal.vue

@@ -0,0 +1,243 @@
+<template>
+  <div :id="id">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { chartColors } from "@/constants/colors";
+import { humanCount, dataCount, costCount } from "@/utils/formatOutput";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "Cost ($)",
+    },
+    width: {
+      type: Number,
+      default: 300,
+    },
+    height: {
+      type: Number,
+      default: 600,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    resizable: {
+      type: Boolean,
+      default: false,
+    },
+    tooltipOffset: {
+      type: String,
+      default: "layer",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart(this.data);
+  },
+  methods: {
+    initializeChart() {
+      if (this.resizable) {
+        this.svg = d3
+          .select("#" + this.id)
+          .append("svg")
+          .attr(
+            "viewBox",
+            `0 0 ${this.width} ${this.title ? this.height + 40 : this.height}`
+          );
+      } else {
+        this.svg = d3
+          .select("#" + this.id)
+          .append("svg")
+          .attr("width", this.width)
+          .attr("height", this.title ? this.height + 40 : this.height);
+      }
+    },
+    createChart(data) {
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.title ? this.height + 30 : this.height;
+      const marginTop = 20;
+      const marginRight = 5;
+      const marginBottom = 5;
+      const marginLeft = 10;
+
+      const domainMap = data.fields.reduce((acc, field, i) => {
+        acc[i] = field ? field : "(no name)";
+        return acc;
+      }, {});
+
+      // Declare the tooltip mouseover functions
+      const mouseoverEmpty = (event, d) => {
+        const value =
+          this.unit === "Bytes (B)" || this.unit === "B"
+            ? dataCount(d.values) + "B"
+            : this.unit === "Percent (%)"
+            ? d.values.toFixed(2) + "%"
+            : humanCount(d.values);
+        event.target.style.opacity = 0.4;
+        d3.select("#" + this.id + "tooltip")
+          .html(
+            `${d.field ? d.field : "(no name)"}<br>${this.valueName}: ${value}`
+          )
+          .style("opacity", 1)
+          .style("left", event[this.tooltipOffset + "X"] + 10 + "px")
+          .style("top", event[this.tooltipOffset + "Y"] + "px");
+      };
+      const mouseoutEmpty = (event, d) => {
+        event.target.style.opacity = 0;
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      // Append a bar chart for each data point
+      if (data.fields && data.fields.length > 0) {
+        // get the largest value
+        let largestValue = this.unit === "Percent (%)" ? 100 : 0;
+        data.values.forEach((val) => {
+          if (val > largestValue) {
+            largestValue = val;
+          }
+        });
+        if (largestValue === 0) {
+          largestValue = 1;
+        }
+
+        // Declare the x (horizontal position) scale.
+        const x = d3.scaleLinear(
+          [0, largestValue],
+          [marginLeft, width - marginRight - marginLeft]
+        );
+
+        // Declare the y (vertical position) scale.
+        const yScale = this.title
+          ? [height - marginBottom, marginTop + 30]
+          : [height - marginBottom, marginTop];
+        const y = d3
+          .scaleBand()
+          .range(yScale)
+          .domain(data.fields.map((field, i) => i))
+          .padding(0.2);
+
+        const seriesData = data.fields.map((field, i) => {
+          return {
+            field: field,
+            values: data.values[i] || 0,
+          };
+        });
+        this.svg
+          .selectAll(".rect")
+          .data(seriesData)
+          .enter()
+          .append("rect")
+          .attr("class", (d) => this.id + "bar")
+          .attr("z-index", 1)
+          .attr("x", (d) => x(0))
+          .attr("y", (d, i) => y(i))
+          .attr("width", (d) => 0)
+          .attr("height", y.bandwidth())
+          .attr("fill", (d, i) => chartColors[i % chartColors.length])
+          .style("opacity", 0.8);
+        // Animation
+        this.svg
+          .selectAll("rect")
+          .transition()
+          .duration(500)
+          .attr("x", (d) => x(0))
+          .attr("width", (d) => x(d.values) - marginLeft)
+          .delay((d, i) => i * 50);
+        // empty bars for tooltip mouseover
+        this.svg
+          .selectAll(".rect")
+          .data(seriesData)
+          .enter()
+          .append("rect")
+          .attr("class", (d) => this.id + "barEmpty")
+          .attr("z-index", 1)
+          .attr("x", (d) => x(0))
+          .attr("y", (d, i) => y(i))
+          .attr("width", this.width - marginLeft)
+          .attr("height", y.bandwidth())
+          .attr("fill", (d, i) => chartColors[i % chartColors.length])
+          .style("opacity", 0)
+          .on("mouseover", mouseoverEmpty)
+          .on("mouseout", mouseoutEmpty);
+
+        // Add the x-axis.
+        this.svg
+          .append("g")
+          .attr("transform", `translate(0,${marginTop})`)
+          .call(
+            d3
+              .axisTop(x)
+              .ticks(5)
+              .tickFormat((d) => {
+                return this.unit === "Bytes (B)" || this.unit === "B"
+                  ? dataCount(d)
+                  : this.unit === "Cost ($)"
+                  ? costCount(d)
+                  : humanCount(d);
+              })
+          );
+        // Add the y-axis, remove the domain line, add grid lines and a label.
+        this.svg
+          .append("g")
+          .attr("transform", `translate(${marginLeft},0)`)
+          .call(
+            d3
+              .axisRight(y)
+              .tickSize(0)
+              .tickFormat((d) => {
+                return domainMap[d];
+              })
+          )
+          .call((g) => g.select(".domain").remove())
+          .call((g) =>
+            g
+              .append("text")
+              .attr("x", -marginLeft)
+              .attr("y", 20)
+              .attr("fill", "currentColor")
+              .attr("text-anchor", "start")
+              .attr("font-size", "2em")
+              .text(this.title)
+          );
+      } else {
+        this.svg
+          .append("text")
+          .attr("x", width / 2)
+          .attr("y", height / 2)
+          .attr("text-anchor", "middle")
+          .text("No data available");
+      }
+    },
+  },
+};
+</script>

package/src/components/charts/CronChart.vue

@@ -0,0 +1,146 @@
+<template>
+  <div :id="id">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { platformMetricsLabels } from "@/constants/colors";
+import { formatReadableTime } from "@/utils/formatOutput";
+import moment from "moment";
+
+export default {
+  props: {
+    id: String,
+    tooltip: String,
+    runs: Array,
+    tooltipOffset: {
+      type: String,
+      default: "client",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+      width: 250,
+      height: 60,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart();
+  },
+  methods: {
+    initializeChart() {
+      this.svg = d3
+        .select("#" + this.id)
+        .append("svg")
+        .attr("width", this.width)
+        .attr("height", this.height)
+        .attr("style", "outline: thin solid;");
+    },
+    createChart() {
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.height;
+      const marginTop = 3;
+      const marginRight = 18;
+      const marginBottom = 17;
+      const marginLeft = 18;
+
+      const mouseover = (event, d) => {
+        d3.selectAll("." + this.id + "run").attr("opacity", "0.5");
+        d3.select("." + this.id + d.taskID).attr("opacity", "1");
+        const launchTime = moment(d.launchTime).format("YYYY-MM-DD HH:mm:ss");
+        const completeTime = moment(d.completeTime).format(
+          "YYYY-MM-DD HH:mm:ss"
+        );
+        const timetaken = moment(d.completeTime).diff(moment(d.launchTime));
+        const text = `Task: ${d.taskID}<br>Status: ${
+          d.status
+        }<br>Launch Time: ${launchTime}<br>Complete Time: ${completeTime}<br>Duration: ${formatReadableTime(
+          timetaken
+        )}`;
+        d3.select("#" + this.id + "tooltip")
+          .html(text)
+          .style("opacity", 1)
+          .style("left", event[this.tooltipOffset + "X"] + 10 + "px")
+          .style("top", event[this.tooltipOffset + "Y"] + "px");
+      };
+      const mouseout = (event, d) => {
+        d3.selectAll("." + this.id + "run").attr("opacity", "1");
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      // get the x scale
+      const slots = this.runs.map((run) => moment(run.launchTime).valueOf());
+      if (slots.length === 1) {
+        slots.push(moment(slots[0]).add(2, "minute").valueOf());
+        slots.push(moment(slots[0]).subtract(2, "minute").valueOf());
+      }
+      const x = d3.scaleTime(d3.extent(slots), [
+        marginLeft,
+        width - marginRight,
+      ]);
+      // Add the x-axis.
+      this.svg
+        .append("g")
+        .attr("class", this.id + "xaxis")
+        .attr("transform", `translate(0,${height - marginBottom})`)
+        .call(
+          d3
+            .axisBottom(x)
+            .ticks(width / 80)
+            .tickSize(3)
+            .tickSizeOuter(0)
+        );
+      // Add the runs
+      this.svg
+        .selectAll(".rect")
+        .data(this.runs)
+        .enter()
+        .append("rect")
+        .attr("class", (d) => this.id + "run " + `${this.id}${d.taskID}`)
+        .attr("style", "cursor: pointer;")
+        .attr("z-index", 1)
+        .attr("x", (d) => x(moment(d.launchTime).valueOf()))
+        .attr("y", marginTop)
+        .attr("width", (d) => {
+          const runWidth =
+            x(moment(d.completeTime).valueOf()) -
+            x(moment(d.launchTime).valueOf());
+          return runWidth > 3.5 ? runWidth : 3.5;
+        })
+        .attr("height", (d) => height - marginBottom - marginTop)
+        .attr("fill", (d) => {
+          const status =
+            d.status === "completed"
+              ? "input"
+              : d.status === "aborted"
+              ? "error"
+              : "ignored";
+          return platformMetricsLabels[this.theme][status];
+        })
+        .attr("opacity", 0)
+        .on("click", (event, d) => {
+          this.$emit("viewRun", d);
+        })
+        .on("mouseover", mouseover)
+        .on("mouseout", mouseout)
+        .transition()
+        .delay((d, i) => {
+          return 1000 - (i / this.runs.length) * 1200;
+        })
+        .duration(200)
+        .attr("opacity", 1);
+    },
+  },
+};
+</script>

package/src/components/charts/EmptyChart.vue

@@ -0,0 +1,76 @@
+<template>
+  <div :id="id" />
+</template>
+<script>
+import * as d3 from "d3";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    width: {
+      type: Number,
+      default: 350,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+  },
+  data() {
+    return {
+      svg: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart();
+  },
+  methods: {
+    initializeChart() {
+      this.svg = d3
+        .select("#" + this.id)
+        .append("svg")
+        .attr("width", this.width > 700 ? this.width + 150 : this.width + 75)
+        .attr("height", this.height);
+    },
+    createChart() {
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.height;
+      const marginTop = 20;
+      const marginRight = 15;
+      const marginBottom = 1;
+      const marginLeft = 0.3;
+
+      const x = d3.scaleUtc([0, 1], [marginLeft, width - marginRight]);
+
+      // Declare the y (vertical position) scale.
+      const y = d3.scaleLinear([0, 1], [height - marginBottom, marginTop]);
+
+      this.svg
+        .append("g")
+        .attr("class", this.id + "xaxis")
+        .attr("transform", `translate(0,${height - marginBottom})`)
+        .call(d3.axisBottom(x));
+
+      // Add the y-axis, remove the domain line, add grid lines and a label.
+      this.svg
+        .append("g")
+        .attr("class", this.id + "yaxis")
+        .attr("transform", `translate(${marginLeft},0)`)
+        .call(d3.axisLeft(y));
+
+      this.svg
+        .append("text")
+        .attr("x", width / 2)
+        .attr("y", height / 2)
+        .attr("text-anchor", "middle")
+        .attr("fill", "currentColor")
+        .text("No data available");
+    },
+  },
+};
+</script>