fluency-v8-components 1.3.4 → 1.3.6

package/src/components/charts/PieChart.vue

@@ -0,0 +1,293 @@
+<template>
+  <div :id="id" class="float-left">
+    <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 { chartColors } from "@/constants/colors";
+import { humanCount, dataCount } from "@/utils/formatOutput";
+import { adjustText } 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,
+    },
+    tooltipOffset: {
+      type: String,
+      default: "layer",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+      legend: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart();
+  },
+  methods: {
+    initializeChart() {
+      this.svg = d3
+        .select("#" + this.id)
+        .append("svg")
+        .attr("width", this.width)
+        .attr("height", this.height - 10);
+    },
+    createChart() {
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.height - 20;
+      const maxRadius = Math.min(width, height) / 2;
+      const radius =
+        maxRadius * 2 + 100 > width
+          ? maxRadius > 150
+            ? maxRadius - 75
+            : maxRadius - 50
+          : maxRadius;
+      const fieldMap = {};
+      this.data.forEach((d, i) => {
+        fieldMap[d.field] = i;
+      });
+      const pie = d3.pie().value((d) => d.values);
+      const arc = d3.arc().innerRadius(0).outerRadius(radius);
+      const outerArc = d3
+        .arc()
+        .innerRadius(radius * 0.9)
+        .outerRadius(radius * 0.9);
+
+      const mouseover = (event, d) => {
+        const y =
+          !event.target.id || event.target.id.endsWith("dots")
+            ? height / 2
+            : event[this.tooltipOffset + "Y"];
+        const x =
+          !event.target.id || event.target.id.endsWith("dots")
+            ? 0
+            : event[this.tooltipOffset + "X"];
+        const index = fieldMap[d.data.field];
+        const value =
+          this.unit === "Bytes (B)" || this.unit === "B"
+            ? dataCount(d.data.values) + "B"
+            : this.unit === "Percent (%)"
+            ? d.data.values.toFixed(2) + "%"
+            : humanCount(d.data.values);
+        d3.selectAll("." + this.id + "pie").style("opacity", 0.4);
+        d3.select("#" + this.id + index + "pie").style("opacity", 1);
+        d3.selectAll("." + this.id + "labels").style("opacity", 0.4);
+        d3.select("#" + this.id + index + "labels").style("opacity", 1);
+        d3.select("#" + this.id + index + "polyline").style("opacity", 1);
+        d3.select("#" + this.id + "tooltip")
+          .html(
+            `${d.data.field}<br>${this.valueName}: ${value} (${(
+              ((d.endAngle - d.startAngle) / (2 * Math.PI)) *
+              100
+            ).toFixed(2)}%)`
+          )
+          .style("opacity", 1)
+          .style("left", x + 10 + "px")
+          .style("top", y + "px");
+      };
+      const mouseout = () => {
+        d3.selectAll("." + this.id + "pie").style("opacity", 0.8);
+        d3.selectAll("." + this.id + "labels").style("opacity", 1);
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      const pieData = pie(this.data);
+      const total = pieData.reduce((acc, d) => acc + d.data.values, 0);
+      const ratio = width / height;
+      const textWidth = ratio > 2 ? (ratio > 2.5 ? 1500 : 900) : 600;
+
+      const resolveOverlaps = (data) => {
+        const spacing = radius < 100 ? 12 : 14;
+        return data.map((d, i) => {
+          if (i === 0) {
+            return d;
+          }
+          if (!total) {
+            const diff = data[i - 1].pos[1] - d.pos[1] + spacing;
+            d.pos[1] += diff;
+            return d;
+          }
+          // check if the previous label is on the opposite side of the circle
+          const previosMidpoint =
+            (data[i - 1].startAngle + data[i - 1].endAngle) / 2;
+          const currentMidpoint = (d.startAngle + d.endAngle) / 2;
+          if (previosMidpoint < Math.PI && currentMidpoint > Math.PI) {
+            // current is left side but previous is right side
+            return d;
+          } else if (previosMidpoint > Math.PI && currentMidpoint < Math.PI) {
+            // current is right side but previous is left side
+            return d;
+          }
+          if (currentMidpoint > Math.PI) {
+            const diff = data[i - 1].pos[1] - d.pos[1] + spacing;
+            if (diff > 0) {
+              d.pos[1] += diff;
+            }
+          } else {
+            const diff = d.pos[1] - data[i - 1].pos[1] + spacing;
+            if (diff > 0) {
+              d.pos[1] -= diff;
+            }
+          }
+          return d;
+        });
+      };
+      const adjustedPieData = resolveOverlaps(
+        pieData
+          .map((d) => {
+            if (!total) {
+              return {
+                ...d,
+                pos: outerArc.centroid({
+                  startAngle: 2 * Math.PI,
+                  endAngle: 2 * Math.PI,
+                }),
+              };
+            }
+            return { ...d, pos: outerArc.centroid(d) };
+          })
+          .sort((a, b) => b.startAngle - a.startAngle)
+      );
+
+      const svg = this.svg;
+      const handle = this;
+      svg
+        .selectAll("g")
+        .data(adjustedPieData)
+        .join(
+          (enter) => enterChart(enter),
+          (update) => enterChart(update),
+          (exit) => exitChart(exit)
+        );
+
+      function enterChart(enter) {
+        const slices = enter.append("g");
+        const polylines = enter.append("g");
+
+        slices
+          .append("path")
+          .attr("class", handle.id + "pie")
+          .attr("id", (d) => handle.id + fieldMap[d.data.field] + "pie")
+          .attr("transform", `translate(${width / 2},${height / 2 + 10})`)
+          .attr("d", (d) => {
+            if (!total) {
+              d.endAngle = Math.PI * pieData.length;
+              return arc(d);
+            }
+            return arc(d);
+          })
+          .attr("fill", (d, i) =>
+            !total ? chartColors[0] : chartColors[i % chartColors.length]
+          )
+          .style("opacity", 0.8)
+          .style("fill-opacity", 0)
+          .on("mouseover", mouseover)
+          .on("mouseout", mouseout)
+          .transition()
+          .duration(800)
+          .attrTween("d", function (d) {
+            const interpolate = d3.interpolate(handle._current, d);
+            handle._current = interpolate(1);
+            return (t) => arc(interpolate(t));
+          })
+          .style("fill-opacity", 1);
+
+        polylines
+          .append("polyline")
+          .attr("class", handle.id + "labels")
+          .attr("id", (d) => handle.id + fieldMap[d.data.field] + "polyline")
+          .attr("points", (d) => {
+            const pos = d.pos;
+            const midAngle = (d.startAngle + d.endAngle) / 2;
+            const x = midAngle < Math.PI ? radius * 1.1 : -radius * 1.1;
+            if (!total) {
+              const x = -radius * 1.1;
+              return [
+                arc.centroid({ startAngle: 0, endAngle: 0 }),
+                outerArc.centroid({ startAngle: 0, endAngle: 0 }),
+                [x, pos[1]],
+              ];
+            }
+            return [arc.centroid(d), outerArc.centroid(d), [x, pos[1]]];
+          })
+          .attr("fill", "none")
+          .style("stroke", handle.theme === "dark" ? "white" : "black")
+          .attr("transform", `translate(${width / 2},${height / 2})`)
+          .style("opacity", 0)
+          .transition()
+          .duration(800)
+          .style("opacity", 1);
+
+        polylines
+          .append("text")
+          .attr("class", handle.id + "labels")
+          .attr("id", (d) => handle.id + fieldMap[d.data.field] + "labels")
+          .attr("transform", (d) => {
+            const pos = d.pos;
+            const midAngle = (d.startAngle + d.endAngle) / 2;
+            const x = midAngle < Math.PI ? radius * 1.15 : -radius * 1.15;
+            return `translate(${x + width / 2},${pos[1] + height / 2})`;
+          })
+          .attr("text-anchor", (d) => {
+            const midAngle = (d.startAngle + d.endAngle) / 2;
+            return midAngle < Math.PI ? "start" : "end";
+          })
+          .attr("font-size", radius < 100 ? "9px" : "11px")
+          .style("fill", handle.theme === "dark" ? "white" : "black")
+          .text((d) => {
+            if (d.data.field === 0) return 0;
+            if (!d.data.field) return "(no name)";
+            return adjustText(d.data.field, textWidth);
+          })
+          .on("mouseover", mouseover)
+          .on("mouseout", mouseout)
+          .style("opacity", 0)
+          .transition()
+          .duration(1200)
+          .style("opacity", 1);
+      }
+
+      function exitChart(exit) {
+        exit.call((g) => g.style("opacity", 0).remove());
+      }
+    },
+  },
+};
+</script>

package/src/components/charts/ProgressChart.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :id="id" class="float-left" />
+</template>
+<script>
+import * as d3 from "d3";
+import { colors } from "@/constants/colors";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    width: {
+      type: Number,
+      default: 350,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+      legend: null,
+    };
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart();
+  },
+  methods: {
+    initializeChart() {
+      this.svg = d3
+        .select("#" + this.id)
+        .append("svg")
+        .attr("width", this.width)
+        .attr("height", this.height);
+    },
+    createChart() {
+      const width = this.width;
+      const height = this.height;
+      const radius = Math.min(width, height) / 2;
+      const progress = this.data.progress;
+
+      const arc = d3
+        .arc()
+        .innerRadius(radius * 0.7)
+        .outerRadius(radius)
+        .startAngle(0);
+
+      this.svg
+        .append("path")
+        .datum({ endAngle: 2 * Math.PI })
+        .attr("d", arc)
+        .attr("fill", colors[this.theme].canvas)
+        .attr("transform", `translate(${width / 2},${height / 2})`);
+
+      this.svg
+        .append("path")
+        .datum({ endAngle: 0 })
+        .attr("d", arc)
+        .attr("fill", colors[this.theme].secondary)
+        .attr("transform", `translate(${width / 2},${height / 2})`)
+        .transition()
+        .duration(1000)
+        .call((transition) =>
+          transition.attrTween("d", (d) => {
+            const interpolate = d3.interpolate(0, progress * 2 * Math.PI);
+            return (t) => {
+              d.endAngle = interpolate(t);
+              return arc(d);
+            };
+          })
+        );
+
+      // Add text
+      this.svg
+        .append("text")
+        .attr("text-anchor", "middle")
+        .attr("dy", "0.35em")
+        .style("font-size", "35px")
+        .text("0%")
+        .style("fill", colors[this.theme].text)
+        .attr("transform", `translate(${width / 2},${height / 2})`)
+        .transition()
+        .duration(1000)
+        .tween("text", function () {
+          const interpolate = d3.interpolate(0, progress * 100);
+          return function (t) {
+            this.textContent = `${Math.round(interpolate(t))}%`;
+          };
+        });
+    },
+  },
+};
+</script>