fluency-v8-components 1.3.4 → 1.3.6

package/src/components/charts/StackedChart.vue

@@ -0,0 +1,364 @@
+<template>
+  <div :id="id">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+  <div class="overflow-auto" :style="`width: ${width}px; overflow: auto`">
+    <div :id="id + 'legend'"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { costLabels, chartColors } from "@/constants/colors";
+import { humanCount, dataCount, costCount } from "@/utils/formatOutput";
+import { adjustText } from "@/constants/font-map";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    unit: {
+      type: String,
+      default: "Cost ($)",
+    },
+    width: {
+      type: Number,
+      default: 575,
+    },
+    height: {
+      type: Number,
+      default: 350,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    names: {
+      type: Object,
+      default: () => {},
+    },
+    isTime: {
+      type: Boolean,
+      default: true,
+    },
+    tooltipOffset: {
+      type: String,
+      default: "layer",
+    },
+    slotName: {
+      type: String,
+      default: "Field",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    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.title ? this.height + 30 : 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;
+
+      const hidden = [];
+      const namesIndex = Object.keys(this.names);
+
+      // Declare the tooltip mouseover functions
+      const mouseover = (event, d) => {
+        const slot = this.isTime
+          ? new Date(d.data[0]).toUTCString()
+          : d.data[0];
+        const val = d[1] - d[0];
+        const title = this.names[d.key] || d.key;
+        const value =
+          this.unit === "Bytes (B)"
+            ? dataCount(val) + "B"
+            : this.unit === "Percent (%)"
+            ? val.toFixed(2) + "%"
+            : this.unit === "Cost ($)"
+            ? "$" + val.toFixed(2)
+            : humanCount(val);
+        event.target.style.opacity = 0.7;
+        d3.select("#" + this.id + "tooltip")
+          .html(
+            `${title}<br>${this.isTime ? "Time" : this.slotName}: ${slot}<br>${
+              this.valueName
+            }: ${value}`
+          )
+          .style("opacity", 1)
+          .style("left", event[this.tooltipOffset + "X"] + 10 + "px")
+          .style("top", event[this.tooltipOffset + "Y"] + "px");
+      };
+      const mouseout = (event, d) => {
+        event.target.style.opacity = 1;
+        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 = namesIndex.indexOf(d.key);
+        d3.selectAll("." + this.id + "bar").style("opacity", 0.7);
+        d3.selectAll("." + this.id + action + "bar").style("opacity", 1);
+        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 = namesIndex.indexOf(d.key);
+        d3.selectAll("." + this.id + "bar").style("opacity", 1);
+        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 = namesIndex.indexOf(d.key);
+        // redraw the axis and the series
+        d3.select("." + this.id + "xaxis").remove();
+        d3.select("." + this.id + "yaxis").remove();
+        d3.selectAll("#" + this.id + " rect").remove();
+        if (event.target.classList.contains("show")) {
+          hidden.push(d.key);
+          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(d.key), 1);
+          event.target.classList.remove("hide");
+          event.target.classList.add("show");
+          d3.selectAll("#" + this.id + action + "dots").attr("opacity", "1");
+        }
+        drawChart();
+      };
+
+      const drawChart = () => {
+        const seriesVals = data.series.filter((d) => !hidden.includes(d.name));
+        const series = d3
+          .stack()
+          .keys(d3.union(seriesVals.map((d) => d.name)))
+          .value((d, key) => {
+            if (d[1].get(key) === undefined) {
+              return 0;
+            }
+            return d[1].get(key).value;
+          })(
+          d3.index(
+            seriesVals,
+            (d) => d.slot,
+            (d) => d.name
+          )
+        );
+
+        // Declare the x (horizontal position) scale.
+        const x = this.isTime
+          ? d3.scaleUtc(d3.extent(data.slots), [
+              marginLeft,
+              width - marginRight,
+            ])
+          : d3.scaleBand(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, d3.max(series, (d) => d3.max(d, (d) => d[1]))],
+          yScale
+        );
+
+        // Add the x-axis.
+        this.svg
+          .append("g")
+          .attr("transform", `translate(0,${height - marginBottom})`)
+          .attr("class", this.id + "xaxis")
+          .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) / data.slots.length) * 8
+                      );
+                    }
+                  })
+          );
+
+        // Add the y-axis, remove the domain line, add grid lines and a label.
+        this.svg
+          .append("g")
+          .attr("transform", `translate(${marginLeft},0)`)
+          .attr("class", this.id + "yaxis")
+          .call(
+            d3
+              .axisLeft(y)
+              .ticks(height / 40)
+              .tickFormat((d) => {
+                return this.unit === "Bytes (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)
+          );
+
+        this.svg
+          .append("g")
+          .selectAll()
+          .data(series)
+          .join("g")
+          .attr(
+            "fill",
+            (d) =>
+              costLabels[this.theme][d.key] ||
+              chartColors[namesIndex.indexOf(d.key) % chartColors.length]
+          )
+          .selectAll("rect")
+          .data((D) => D.map((d) => ((d.key = D.key), d)))
+          .join("rect")
+          .attr("class", (d) => {
+            const i = namesIndex.indexOf(d.key);
+            return `${this.id}${i}bar ${this.id}bar`;
+          })
+          .attr("x", (d) => x(d.data[0]))
+          .attr("y", (d) => y(d[1]))
+          .attr("height", (d) => y(d[0]) - y(d[1]))
+          .attr("width", this.isTime ? 15 : Math.max(x.step() - 5, 15))
+          .on("mouseover", mouseover)
+          .on("mouseout", mouseout);
+        return series;
+      };
+
+      const series = drawChart(data);
+      this.svg
+        .append("g")
+        .call((g) =>
+          g
+            .append("text")
+            .attr("x", 0)
+            .attr("y", 20)
+            .attr("fill", "currentColor")
+            .attr("text-anchor", "start")
+            .attr("font-weight", "bold")
+            .attr("font-size", "20px")
+            .text(this.title)
+        );
+      if (data.series.length === 0) {
+        this.svg
+          .append("text")
+          .attr("x", width / 2)
+          .attr("y", height / 2)
+          .attr("text-anchor", "middle")
+          .text("No data available")
+          .attr("fill", "currentColor");
+      }
+      // Add a legend
+      this.legend = d3
+        .select("#" + this.id + "legend")
+        .append("svg")
+        .attr("width", Math.max(this.width, series.length * 125))
+        .attr("height", 20);
+
+      // Add one dot in the legend for each name.
+      this.legend
+        .selectAll("legendDots")
+        .data(series)
+        .enter()
+        .append("circle")
+        .attr("id", (d) => this.id + namesIndex.indexOf(d.key) + "dots")
+        .attr("class", "show")
+        .attr("cx", (d, i) => width / (series.length + 1) + i * 120 - 10)
+        .attr("cy", 15)
+        .attr("r", 5)
+        .attr(
+          "fill",
+          (d, i) =>
+            costLabels[this.theme][d.key] || chartColors[i % 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(series)
+        .enter()
+        .append("text")
+        .attr("class", (d) => this.id + namesIndex.indexOf(d.key) + "labels")
+        .attr("x", (d, i) => width / (series.length + 1) + i * 120)
+        .attr("y", 15)
+        .attr(
+          "fill",
+          (d, i) =>
+            costLabels[this.theme][d.key] || chartColors[i % chartColors.length]
+        )
+        .text((d, i) => adjustText(this.names[d[0].key], 700))
+        .attr("font-weight", 500)
+        .attr("text-anchor", "left")
+        .attr("font-size", "11px")
+        .style("alignment-baseline", "middle");
+    },
+  },
+};
+</script>