fluency-v8-components 1.3.5 → 1.3.6

package/src/components/charts/AlertChart.vue

@@ -0,0 +1,376 @@
+<template>
+  <div :id="id" class="float-left">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+  <div class="overflow-auto" :style="`height: ${height}px; overflow: auto`">
+    <div :id="id + 'legend'"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { alertChartColors, chartColors } from "@/constants/colors";
+import { humanCount, dataCount } from "@/utils/formatOutput";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "Count",
+    },
+    width: {
+      type: Number,
+      default: 350,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+    pannable: {
+      type: Boolean,
+      default: true,
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart(this.data);
+  },
+  methods: {
+    initializeChart() {
+      this.svg = d3
+        .select("#" + this.id)
+        .append("svg")
+        .attr("width", this.width)
+        .attr("height", this.height);
+    },
+    createChart(rawData) {
+      let data = [];
+      rawData.series.forEach((d, i) => {
+        data.push({
+          ...d,
+          index: i,
+        });
+      });
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.height;
+      const marginTop = 20;
+      const marginRight = 15;
+      const marginBottom = 30;
+      const marginLeft = 50;
+
+      // get the longest slots array and largest value
+      const hidden = [];
+
+      // Declare the tooltip mouseover functions
+      const mouseover = (event, d) => {
+        const slot = new Date(d.slots).toUTCString();
+        const value =
+          this.unit === "Bytes (B)"
+            ? dataCount(d.values) + "B"
+            : this.unit === "Percent (%)"
+            ? d.values.toFixed(2) + "%"
+            : humanCount(d.values);
+        const text = d.action
+          ? `${d.action}<br>Time: ${slot}<br>Value: ${value}`
+          : `Alert<br>Time: ${slot}<br>Value: ${value}`;
+        event.target.r.baseVal.value = 5;
+        d3.select("#" + this.id + "tooltip")
+          .html(text)
+          .style("opacity", 1)
+          .style("left", event.layerX + "px")
+          .style("top", event.layerY + "px");
+      };
+      const mouseout = (event, d) => {
+        event.target.r.baseVal.value = 3;
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      const drawAxis = () => {
+        const dat = data.filter((d) => !hidden.includes(d.index));
+        const axisVals = this.getAxisLargest(dat);
+        // Declare the x (horizontal position) scale.
+        const x = d3.scaleUtc(d3.extent(axisVals[0]), [
+          marginLeft,
+          width - marginRight,
+        ]);
+
+        // Declare the y (vertical position) scale.
+        const y = d3.scaleLinear(
+          [0, axisVals[1]],
+          [height - marginBottom, marginTop]
+        );
+
+        // Add the x-axis.
+        const xAxis = this.svg
+          .append("g")
+          .attr("class", this.id + "xaxis")
+          .attr("transform", `translate(0,${height - marginBottom})`)
+          .call(
+            d3
+              .axisBottom(x)
+              .ticks(width / 80)
+              .tickSizeOuter(0)
+          );
+
+        // Add the y-axis, remove the domain line, add grid lines and a label.
+        const yAxis = this.svg
+          .append("g")
+          .attr("class", this.id + "yaxis")
+          .attr("transform", `translate(${marginLeft},0)`)
+          .call(
+            d3
+              .axisLeft(y)
+              .ticks(height / 40)
+              .tickFormat((d) => {
+                return this.unit === "Bytes (B)" ? dataCount(d) : humanCount(d);
+              })
+          )
+          .call((g) => g.select(".domain").remove())
+          .call((g) =>
+            g
+              .selectAll(".tick line")
+              .clone()
+              .attr("x2", width - marginLeft - marginRight)
+              .attr("stroke-opacity", 0.1)
+          )
+          .call((g) =>
+            g
+              .append("text")
+              .attr("x", -marginLeft)
+              .attr("y", 10)
+              .attr("fill", "currentColor")
+              .attr("text-anchor", "start")
+              .text(this.unit)
+          );
+
+        // add brush to chart
+        if (this.pannable) {
+          let idleTimeout;
+          function idled() {
+            idleTimeout = null;
+          }
+
+          const updateChart = (event, d) => {
+            const extent = event.selection;
+            if (!extent) {
+              if (!idleTimeout) return (idleTimeout = setTimeout(idled, 500));
+              x.domain(d3.extent(rawData.slots));
+            } else {
+              x.domain([x.invert(extent[0]), x.invert(extent[1])]);
+              this.svg.select("." + this.id + "brush").call(brush.move, null);
+            }
+            xAxis.transition().duration(1000).call(d3.axisBottom(x));
+            this.svg.selectAll("." + this.id + "line").attr("d", function (d) {
+              return line(
+                d.values.map((val, i) => {
+                  return { slots: rawData.slots[i], values: val };
+                })
+              );
+            });
+            this.svg
+              .selectAll("." + this.id + "points")
+              .attr("cx", (d) => x(d.slots));
+          };
+          const brush = d3
+            .brushX()
+            .extent([
+              [0, 0],
+              [width, height],
+            ])
+            .on("end", updateChart);
+          this.svg
+            .append("g")
+            .attr("class", (d) => this.id + "brush")
+            .call(brush);
+
+          this.svg.on("dblclick", function () {
+            x.domain(
+              d3.extent(axisVals[0], function (d) {
+                return d;
+              })
+            );
+            xAxis.transition().call(d3.axisBottom(x));
+            this.svg.selectAll("." + this.id + "line").attr("d", function (d) {
+              return line(
+                d.values.map((val, i) => {
+                  return { slots: rawData.slots[i], values: val };
+                })
+              );
+            });
+            this.svg
+              .selectAll("." + this.id + "points")
+              .attr("cx", (d) => x(d.slots));
+          });
+        }
+
+        // Declare the line generator.
+        const line = d3
+          .line()
+          .x((d, i) => {
+            return x(d.slots);
+          })
+          .y((d, i) => {
+            return y(d.values);
+          });
+
+        this.svg
+          .selectAll(".line")
+          .data(dat)
+          .enter()
+          .append("path")
+          .attr("class", (d) => this.id + d.index + "line " + this.id + "line")
+          .attr("fill", "none")
+          .attr("z-index", 1)
+          .style(
+            "stroke",
+            (d) =>
+              alertChartColors[this.theme][d.action] ||
+              chartColors[d.index % chartColors.length]
+          )
+          .style("stroke-dasharray", "3, 3")
+          .attr("stroke-width", 1)
+          .attr("d", function (d) {
+            return line(
+              d.values.map((val, i) => {
+                return { slots: rawData.slots[i], values: val };
+              })
+            );
+          });
+        this.svg
+          .selectAll(".line")
+          .data([rawData])
+          .enter()
+          .append("path")
+          .attr("class", this.id + "line")
+          .attr("fill", "none")
+          .attr("z-index", 1)
+          .style("stroke", alertChartColors[this.theme]["Alert"])
+          .attr("stroke-width", 1.5)
+          .attr("d", function (d) {
+            return line(
+              d.slots.map((slot, i) => {
+                return { slots: slot, values: d.values[i] };
+              })
+            );
+          });
+
+        // add alert to chart
+        const alertData = rawData.slots.map((slot, i) => {
+          return {
+            slots: slot,
+            values: rawData.values[i],
+            isAlert: rawData.metric.bools[i],
+          };
+        });
+        this.svg
+          .selectAll(".point")
+          .data(alertData)
+          .enter()
+          .append("circle")
+          .attr("class", (d, i) => this.id + i + "points " + this.id + "points")
+          .attr("fill", chartColors[3])
+          .attr("display", (d) => (d.isAlert ? "" : "none"))
+          .attr("r", 3)
+          .attr("cx", (d) => x(d.slots))
+          .attr("cy", (d) => y(d.values))
+          .on("mouseover", mouseover)
+          .on("mouseout", mouseout);
+      };
+
+      drawAxis();
+      // Append a path for the line chart for each series
+      if (!rawData.series) {
+        this.svg
+          .append("text")
+          .attr("x", width / 2)
+          .attr("y", height / 2)
+          .attr("text-anchor", "middle")
+          .attr("fill", "currentColor")
+          .text("No data available");
+      }
+
+      if (rawData.series.length > 0) {
+        // Add a legend
+        this.legend = d3
+          .select("#" + this.id + "legend")
+          .append("svg")
+          .attr("width", this.width > 600 ? 200 : 75)
+          .attr("height", Math.max(25 * rawData.series.length, height - 20));
+
+        // Add one dot in the legend for each name.
+        this.legend
+          .selectAll("legendDots")
+          .data([...data, { action: "Alert", index: data.length }])
+          .enter()
+          .append("circle")
+          .attr("id", (d) => this.id + d.index + "dots")
+          .attr("class", "show")
+          .attr("cx", 10)
+          .attr("cy", (d, i) => height / (data.length + 2) + i * 25)
+          .attr("r", 5)
+          .style(
+            "fill",
+            (d) =>
+              alertChartColors[this.theme][d.action] ||
+              chartColors[d.index % chartColors.length]
+          );
+
+        // Add one dot in the legend for each name.
+        this.legend
+          .selectAll("legendLabels")
+          .data([...data, { action: "Alert", index: data.length }])
+          .enter()
+          .append("text")
+          .attr("class", (d) => this.id + d.index + "labels")
+          .attr("x", 20)
+          .attr("y", (d, i) => height / (data.length + 2) + i * 25)
+          .style(
+            "fill",
+            (d) =>
+              alertChartColors[this.theme][d.action] ||
+              chartColors[d.index % chartColors.length]
+          )
+          .text((d) =>
+            d.action === "Alert" ? rawData.action : d.action || "(no name)"
+          )
+          .attr("font-weight", 500)
+          .attr("text-anchor", "left")
+          .attr("font-size", "11px")
+          .style("alignment-baseline", "middle");
+      }
+    },
+
+    getAxisLargest(data) {
+      let longestSlots = this.data.slots;
+      let largestValue = Math.max(...this.data.values);
+      data.forEach((d, i) => {
+        const max = Math.max(...d.values);
+        if (max > largestValue) {
+          largestValue = max;
+        }
+      });
+      return [longestSlots, largestValue];
+    },
+  },
+};
+</script>

package/src/components/charts/BarChart.vue

@@ -0,0 +1,212 @@
+<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: 800,
+    },
+    height: {
+      type: Number,
+      default: 400,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart(this.data);
+  },
+  methods: {
+    initializeChart() {
+      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 = 15;
+      const marginBottom = 30;
+      const marginLeft = 50;
+
+      // get the largest value
+      let largestValue = this.unit === "Percent (%)" ? 100 : 0;
+      data.values.forEach((val) => {
+        if (val > largestValue) {
+          largestValue = val;
+        }
+      });
+
+      // Declare the x (horizontal position) scale.
+      const x = d3.scaleUtc(d3.extent(data.slots), [
+        marginLeft,
+        width - marginRight,
+      ]);
+
+      // Declare the y (vertical position) scale.
+      const yScale = this.title
+        ? [height - marginBottom, marginTop + 30]
+        : [height - marginBottom, marginTop];
+      const y = d3.scaleLinear([0, largestValue], yScale);
+
+      // Declare the tooltip mouseover functions
+      const mouseover = (event, d) => {
+        const slot = new Date(d.slots).toUTCString();
+        const value =
+          this.unit === "Bytes (B)" || this.unit === "B"
+            ? dataCount(d.values) + "B"
+            : this.unit === "Percent (%)"
+            ? d.values.toFixed(2) + "%"
+            : this.unit === "Cost ($)"
+            ? costCount(d.values)
+            : humanCount(d.values);
+        const tooltip = d3
+          .select("#" + this.id + "tooltip")
+          .html(`${this.data.name}<br>${slot}<br>${this.valueName}: ${value}`)
+          .style("opacity", 1)
+          .style("top", event.layerY + "px");
+        if (event.layerX > (width * 3) / 4) {
+          const tooltipWidth = tooltip.node().getBoundingClientRect().width;
+          tooltip.style("left", event.layerX - tooltipWidth + "px");
+        } else {
+          tooltip.style("left", event.layerX + "px");
+        }
+      };
+      const mouseout = (event, d) => {
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      // Add the x-axis.
+      this.svg
+        .append("g")
+        .attr("transform", `translate(0,${height - marginBottom})`)
+        .call(
+          d3
+            .axisBottom(x)
+            .ticks(width / 80)
+            .tickSizeOuter(0)
+        );
+
+      // 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
+            .axisLeft(y)
+            .ticks(height / 40)
+            .tickFormat((d) => {
+              return this.unit === "Bytes (B)" || this.unit === "B"
+                ? dataCount(d)
+                : this.unit === "Cost ($)"
+                ? costCount(d)
+                : humanCount(d);
+            })
+        )
+        .call((g) => g.select(".domain").remove())
+        .call((g) =>
+          g
+            .selectAll(".tick line")
+            .clone()
+            .attr("x2", width - marginLeft - marginRight)
+            .attr("stroke-opacity", 0.1)
+        )
+        .call((g) =>
+          g
+            .append("text")
+            .attr("x", -marginLeft)
+            .attr("y", this.title ? 40 : 10)
+            .attr("fill", "currentColor")
+            .attr("text-anchor", "start")
+            .text(this.unit)
+        )
+        .call((g) =>
+          g
+            .append("text")
+            .attr("x", -marginLeft)
+            .attr("y", 20)
+            .attr("fill", "currentColor")
+            .attr("text-anchor", "start")
+            .attr("font-weight", "bold")
+            .attr("font-size", "2em")
+            .text(this.title)
+        );
+
+      // Append a bar chart for each data point
+      if (data.slots.length > 0) {
+        const seriesData = data.slots.map((slot, i) => {
+          return {
+            slots: slot,
+            values: data.values[i],
+          };
+        });
+
+        this.svg
+          .selectAll(".rect")
+          .data(seriesData)
+          .enter()
+          .append("rect")
+          .attr("class", (d) => this.id + "bar")
+          .attr("z-index", 1)
+          .attr("x", (d) => x(d.slots) - 2)
+          .attr("y", (d) => y(d.values))
+          .attr("width", 10)
+          .attr("height", (d) => height - marginBottom - y(d.values))
+          .attr("fill", chartColors[0])
+          .on("mouseover", mouseover)
+          .on("mouseout", mouseout);
+      } else {
+        this.svg
+          .append("text")
+          .attr("x", width / 2)
+          .attr("y", height / 2)
+          .attr("text-anchor", "middle")
+          .text("No data available");
+      }
+    },
+  },
+};
+</script>