fluency-v8-components 1.3.5 → 1.3.6

package/src/components/charts/LineChart.vue

@@ -0,0 +1,434 @@
+<template>
+  <div :id="id" class="float-left">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+  <div v-if="useLegend" :style="`height: ${height}px; overflow: auto`">
+    <div :id="id + 'legend'"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { platformMetricsLabels, chartColors } from "@/constants/colors";
+import { humanCount, dataCount } from "@/utils/formatOutput";
+import { adjustText, getTextWidth } from "@/constants/font-map";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "Count",
+    },
+    width: {
+      type: Number,
+      default: 350,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+    hideZeros: {
+      type: Boolean,
+      default: true,
+    },
+    isTime: {
+      type: Boolean,
+      default: true,
+    },
+    tooltipOffset: {
+      type: String,
+      default: "layer",
+    },
+    slotName: {
+      type: String,
+      default: "Field",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    useLegend: {
+      type: Boolean,
+      default: true,
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+      legend: 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.forEach((d, i) => {
+        d.index = i;
+        d.values = d.values.map((v) => (isNaN(v) ? 0 : v));
+        const total = d.values.reduce((a, b) => a + b, 0);
+        d.total = isNaN(total) ? 0 : total;
+        if (!this.hideZeros) {
+          data.push(d);
+        } else if (total > 0) {
+          data.push(d);
+        }
+      });
+      data = data.sort((a, b) => b.total - a.total);
+      rawData = rawData.sort((a, b) => b.total - a.total);
+      // 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 = this.isTime ? new Date(d.slots).toUTCString() : d.slots;
+        const value =
+          this.unit === "Bytes (B)" || this.unit === "B"
+            ? dataCount(d.values) + "B"
+            : this.unit === "Percent (%)"
+            ? d.values.toFixed(2) + "%"
+            : this.unit === "$"
+            ? "$" + d.values.toFixed(2)
+            : humanCount(d.values);
+        const text = d.action
+          ? `${d.action}<br>${
+              this.isTime ? "Time" : this.slotName
+            }: ${slot}<br>${this.valueName}: ${value}`
+          : `${this.isTime ? "Time" : this.slotName}: ${slot}<br>${
+              this.valueName
+            }: ${value}`;
+        event.target.r.baseVal.value = 5;
+        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) => {
+        event.target.r.baseVal.value = 3;
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      // Declare the legend mouseover functions
+      const legendMouseover = (event, d) => {
+        const action = d.index;
+        if (event.target.classList.contains("show")) {
+          d3.selectAll("." + this.id + "line").attr("stroke-width", 1);
+          d3.selectAll("." + this.id + action + "line").attr(
+            "stroke-width",
+            2.5
+          );
+          d3.selectAll("." + this.id + "points").attr("r", 1);
+          d3.selectAll("." + this.id + action + "points").attr("r", 3);
+          d3.selectAll("#" + this.id + action + "dots").attr("r", 6);
+          d3.selectAll("." + this.id + action + "labels").attr(
+            "font-weight",
+            1000
+          );
+        }
+      };
+      const legendMouseout = (event, d) => {
+        const action = d.index;
+        d3.selectAll("." + this.id + "line").attr("stroke-width", 1.5);
+        d3.selectAll("." + this.id + "points").attr("r", 2.5);
+        d3.selectAll("#" + this.id + action + "dots").attr("r", 5);
+        d3.selectAll("." + this.id + action + "labels").attr(
+          "font-weight",
+          500
+        );
+      };
+      const legendClick = (event, d) => {
+        const action = d.index;
+        if (event.target.classList.contains("show")) {
+          hidden.push(action);
+          event.target.classList.remove("show");
+          event.target.classList.add("hide");
+          d3.selectAll("#" + this.id + action + "dots").attr("opacity", "0.5");
+        } else {
+          hidden.splice(hidden.indexOf(action), 1);
+          event.target.classList.remove("hide");
+          event.target.classList.add("show");
+          d3.selectAll("#" + this.id + action + "dots").attr("opacity", "1");
+        }
+
+        // redraw the chart
+        d3.selectAll("." + this.id + "line").remove();
+        d3.selectAll("." + this.id + "points").remove();
+        d3.select("." + this.id + "xaxis").remove();
+        d3.select("." + this.id + "yaxis").remove();
+        drawAxis();
+      };
+
+      const drawAxis = () => {
+        const dat = data.filter((d) => !hidden.includes(d.index));
+        const axisVals = this.getAxisLargest(dat);
+        // Declare the x (horizontal position) scale.
+        const x = this.isTime
+          ? d3.scaleUtc(d3.extent(axisVals[0]), [
+              marginLeft,
+              width - marginRight,
+            ])
+          : d3.scaleBand(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.
+        this.svg
+          .append("g")
+          .attr("class", this.id + "xaxis")
+          .attr("transform", `translate(0,${height - marginBottom})`)
+          .call(
+            this.isTime
+              ? d3
+                  .axisBottom(x)
+                  .ticks(width / 80)
+                  .tickSizeOuter(0)
+              : d3
+                  .axisBottom(x)
+                  .ticks(width / 20)
+                  .tickSizeOuter(0)
+                  .tickFormat((d) => {
+                    if (!this.isTime) {
+                      return adjustText(
+                        d,
+                        ((width - marginRight) / axisVals[0].length) * 8
+                      );
+                    }
+                  })
+          );
+
+        // 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)
+              .ticks(height / 40)
+              .tickFormat((d) => {
+                return this.unit === "Bytes (B)" || this.unit === "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)
+          );
+
+        // Declare the line generator.
+        const line = d3
+          .line()
+          .x((d, i) => {
+            return x(d.slots);
+          })
+          .y((d, i) => {
+            return y(d.values);
+          });
+
+        const lines = 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)
+          .attr("stroke", (d) => {
+            return (
+              platformMetricsLabels[this.theme][d.action] ||
+              chartColors[d.index % chartColors.length]
+            );
+          })
+          .attr("stroke-width", 1.5)
+          .attr("d", function (d) {
+            return line(
+              d.slots.map((slot, i) => {
+                return { slots: slot, values: d.values[i] };
+              })
+            );
+          });
+        const totalLength = lines.node()?.getTotalLength() || 0;
+        const totalDuration = 1200;
+        lines
+          .attr("stroke-dasharray", totalLength + " " + totalLength)
+          .attr("stroke-dashoffset", totalLength)
+          .transition()
+          .duration(totalDuration)
+          .ease(d3.easeLinear)
+          .attr("stroke-dashoffset", 0);
+
+        // Add points to the line chart
+        for (const series of dat) {
+          const seriesData = series.slots.map((slot, i) => {
+            return {
+              index: series.index,
+              action: series.action,
+              slots: slot,
+              values: series.values[i],
+            };
+          });
+          this.svg
+            .selectAll(".point")
+            .data(seriesData)
+            .enter()
+            .append("circle")
+            .attr(
+              "class",
+              (d) => this.id + d.index + "points " + this.id + "points"
+            )
+            .attr(
+              "fill",
+              (d) =>
+                platformMetricsLabels[this.theme][series.action] ||
+                chartColors[d.index % chartColors.length]
+            )
+            .attr("r", 2.5)
+            .attr("cx", (d) => x(d.slots))
+            .attr("cy", (d) => y(d.values))
+            .attr("opacity", 0)
+            .on("mouseover", mouseover)
+            .on("mouseout", mouseout)
+            .transition()
+            .delay((d, i) => {
+              return (i / seriesData.length) * totalDuration;
+            })
+            .duration(250)
+            .attr("opacity", 1);
+        }
+      };
+
+      drawAxis();
+      // Append a path for the line chart for each series
+      if (data.length === 0) {
+        this.svg
+          .append("text")
+          .attr("x", width / 2)
+          .attr("y", height / 2)
+          .attr("text-anchor", "middle")
+          .attr("fill", "currentColor")
+          .text("No data available");
+      }
+
+      // Add a legend
+      const longestLegend = Math.max(
+        ...rawData.map((d) => getTextWidth(d.action || "(no name)")),
+        0
+      );
+      this.legend = d3
+        .select("#" + this.id + "legend")
+        .append("svg")
+        .attr("width", longestLegend / 7 + 30)
+        .attr("height", Math.max(25 * rawData.length, this.height));
+
+      // Add one dot in the legend for each name.
+      this.legend
+        .selectAll("legendDots")
+        .data(rawData)
+        .enter()
+        .append("circle")
+        .attr("id", (d) => this.id + d.index + "dots")
+        .attr("class", "show")
+        .attr("cx", 10)
+        .attr("cy", (d, i) => height / (rawData.length + 1) + i * 25 + 4)
+        .attr("r", 5)
+        .style("fill", (d) => {
+          return (
+            platformMetricsLabels[this.theme][d.action] ||
+            chartColors[d.index % chartColors.length]
+          );
+        })
+        .on("mouseover", legendMouseover)
+        .on("mouseout", legendMouseout)
+        .on("click", legendClick);
+
+      // Add one dot in the legend for each name.
+      this.legend
+        .selectAll("legendLabels")
+        .data(rawData)
+        .enter()
+        .append("text")
+        .attr("class", (d) => this.id + d.index + "labels")
+        .attr("x", 20)
+        .attr("y", (d, i) => height / (rawData.length + 1) + i * 25 + 5)
+        .style("fill", (d) => {
+          return (
+            platformMetricsLabels[this.theme][d.action] ||
+            chartColors[d.index % chartColors.length]
+          );
+        })
+        .text((d) => d.action || "(no name)")
+        .attr("font-weight", 500)
+        .attr("text-anchor", "left")
+        .attr("font-size", "13px")
+        .style("alignment-baseline", "middle");
+    },
+
+    getAxisLargest(data) {
+      let slots = [];
+      let largestValue = this.unit === "Percent (%)" ? 100 : 0;
+      data.forEach((d, i) => {
+        d.slots.forEach((slot) => {
+          if (!slots.includes(slot)) {
+            slots.push(slot);
+          }
+        });
+        const max = Math.max(...d.values);
+        if (max > largestValue) {
+          largestValue = max;
+        }
+      });
+      return [slots, largestValue];
+    },
+  },
+};
+</script>