fluency-v8-components 1.3.5 → 1.3.7

package/src/components/charts/StackedChartClustered.vue

@@ -0,0 +1,395 @@
+<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 { platformMetricsLabels, 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,
+    },
+    names: {
+      type: Object,
+      default: {},
+    },
+    unit: {
+      type: String,
+      default: "Cost ($)",
+    },
+    width: {
+      type: Number,
+      default: 575,
+    },
+    height: {
+      type: Number,
+      default: 350,
+    },
+    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.height);
+    },
+    createChart(data) {
+      // 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;
+      // initialize the actions and instances
+      const actions = {};
+      const instances = {};
+      data.forEach((d) => {
+        actions[d.action] = d.action;
+        instances[d.instance] = d.instance;
+      });
+      const hidden = [];
+      const namesIndex = Object.keys(actions);
+      const instancesIndex = Object.keys(instances);
+      // get the series data
+      const seriesData = [];
+      data.forEach((d) => {
+        d.slots.forEach((s, i) => {
+          seriesData.push({
+            slot: s,
+            action: d.action,
+            instance: d.instance,
+            value: d.values[i],
+          });
+        });
+      });
+
+      // 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 action = d.key.split(":")[0];
+        const instance = this.names[d.key.split(":")[1]] || d.key.split(":")[1];
+        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(
+            `${action}<br>Instance: ${instance}<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);
+        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);
+        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);
+        // 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);
+          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), 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 = seriesData.filter((d) => !hidden.includes(d.action));
+        // Declare the x (horizontal position) scale.
+        const slots = seriesVals
+          .map((d) => d.slot)
+          .filter((v, i, a) => a.indexOf(v) === i);
+        // add buffer tp the scale
+        const slotHighest = d3.max(slots);
+        const slotLowest = d3.min(slots);
+        const interval = (slotHighest - slotLowest) / 20;
+        const buffer =
+          !slotHighest || !slotLowest ? null : slotHighest + interval;
+        const x = this.isTime
+          ? d3.scaleUtc(d3.extent([...slots, buffer]), [
+              marginLeft,
+              width - marginRight,
+            ])
+          : d3.scaleBand(slots, [marginLeft, width - marginRight]);
+        const maxY = d3.max(seriesVals, (d) => d.value);
+        const yScale = [height - marginBottom, marginTop];
+        for (const action of namesIndex) {
+          if (hidden.includes(action)) {
+            continue;
+          } else {
+            const nI = namesIndex.indexOf(action);
+            const actionVals = seriesData.filter((d) => d.action === action);
+            const series = d3
+              .stack()
+              .keys(
+                d3.union(actionVals.map((d) => d.action + ":" + d.instance))
+              )
+              .value((d, key) => {
+                if (d[1].get(key) === undefined) {
+                  return 0;
+                }
+                return d[1].get(key).value;
+              })(
+              d3.index(
+                actionVals,
+                (d) => d.slot,
+                (d) => d.action + ":" + d.instance
+              )
+            );
+            const y = d3.scaleLinear([0, maxY], yScale);
+            this.svg
+              .append("g")
+              .selectAll()
+              .data(series)
+              .join("g")
+              .attr(
+                "fill",
+                (d) =>
+                  platformMetricsLabels.scale[d.key.split(":")[0]](
+                    (0.5 * instancesIndex.indexOf(d.key.split(":")[1])) /
+                      instancesIndex.length +
+                      0.5
+                  ) ||
+                  chartColors[
+                    namesIndex.indexOf(d.key.split(":")[0]) % chartColors.length
+                  ]
+              )
+              .selectAll("rect")
+              .data((D) => D.map((d) => ((d.key = D.key), d)))
+              .join("rect")
+              .attr("class", (d) => {
+                return `${this.id}${nI}bar ${this.id}bar`;
+              })
+              .attr("x", (d) => x(d.data[0]) + (30 * nI) / namesIndex.length)
+              .attr("y", (d) => height - marginBottom)
+              .attr(
+                "width",
+                Math.min(
+                  (width - marginLeft - marginRight) / slots.length,
+                  25
+                ) / namesIndex.length
+              )
+              .attr("height", 0)
+              .attr("stroke", "black")
+              .attr("stroke-width", "0.5")
+              .on("mouseover", mouseover)
+              .on("mouseout", mouseout)
+              .transition()
+              .duration(1000)
+              .attr("y", (d) => y(d[1]))
+              .attr("height", (d) => y(d[0]) - y(d[1]));
+          }
+        }
+        // Declare the y (vertical position) scale.
+        const y = d3.scaleLinear([0, maxY], 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) / 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", 10)
+              .attr("fill", "currentColor")
+              .attr("text-anchor", "start")
+              .text(this.unit)
+          );
+      };
+
+      drawChart(data);
+      if (data.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, namesIndex.length * 100))
+        .attr("height", 30);
+
+      // Add one dot in the legend for each name.
+      this.legend
+        .selectAll("legendDots")
+        .data(namesIndex)
+        .enter()
+        .append("circle")
+        .attr("id", (d) => this.id + namesIndex.indexOf(d) + "dots")
+        .attr("class", "show")
+        .attr("cx", (d, i) => width / (namesIndex.length + 1) + i * 100 - 10)
+        .attr("cy", 5)
+        .attr("r", 5)
+        .attr(
+          "fill",
+          (d, i) =>
+            platformMetricsLabels[this.theme][d] ||
+            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(namesIndex)
+        .enter()
+        .append("text")
+        .attr("class", (d) => this.id + namesIndex.indexOf(d) + "labels")
+        .attr("x", (d, i) => width / (namesIndex.length + 1) + i * 100)
+        .attr("y", 5)
+        .attr(
+          "fill",
+          (d, i) =>
+            platformMetricsLabels[this.theme][d] ||
+            chartColors[i % chartColors.length]
+        )
+        .text((d, i) => adjustText(d, 700))
+        .attr("font-weight", 500)
+        .attr("text-anchor", "left")
+        .attr("font-size", "11px")
+        .style("alignment-baseline", "middle");
+    },
+  },
+};
+</script>

package/src/components/charts/TimelineChart.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="col items-center">
+    <div class="text-center">
+      <span>{{ title }} Timeline ({{ total }} Events)</span>
+    </div>
+    <div ref="myplot" :class="['px-4', { 'pb-4': !props.flow }]"></div>
+    <div class="flex justify-end w-full mr-2">
+      <div ref="myplotLegend"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from "vue";
+import * as d3 from "d3";
+import * as Plot from "@observablehq/plot";
+import { dateLocalTime } from "@/utils/timeUtils";
+
+// props
+const props = defineProps({
+  title: String,
+  buckets: Array,
+  total: Number,
+  from: Number,
+  to: Number,
+  flow: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: "light",
+  },
+});
+// states
+const myplot = ref(null);
+const myplotLegend = ref(null);
+// watch for changes in data
+watch([() => props.buckets], () => {
+  plotGraph();
+});
+
+// function defs
+function plotGraph() {
+  if (!props.buckets) return;
+  let options = {
+    marginTop: 30,
+    marks: [
+      Plot.frame(),
+      Plot.text(["No data available!"], { frameAnchor: "middle" }),
+    ],
+  }
+  
+  if (props.buckets.length > 0) {
+    if (props.flow) {
+      const b = props.buckets;
+
+      // Left axis (flow) domain = max of rx/tx
+      const leftMax = Math.max(
+        1,
+        d3.max(b, d => Math.max(d?.rxHistogram?.value ?? 0, d?.txHistogram?.value ?? 0)) ?? 0
+      );
+
+      // Right axis (events) domain = doc_count
+      const rightMax = Math.max(1, d3.max(b, d => d?.doc_count ?? 0) ?? 0);
+
+      // Map right-axis data (doc_count) into left-axis scale
+      const k = leftMax / rightMax; // multiply doc_count by k to draw on left scale
+
+      // Nice ticks for the right axis; we’ll place them at tick*k but label as tick
+      const rightTicks = d3.ticks(0, rightMax, 5);
+      const leftTicks = d3.ticks(0, leftMax, 5)
+
+      options = {
+        x: { type: "time", label: "Time", tickSpacing: 100 },
+        y: {
+          label: "Flow",
+          domain: [0, leftMax]
+        },
+        grid: true,
+        marks: [
+          // Flow lines on left scale
+          Plot.lineY(b, {
+            x: "key",
+            y: d => d?.rxHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#22c55e", // rx
+          }),
+          Plot.lineY(b, {
+            x: "key",
+            y: d => d?.txHistogram?.value ?? 0,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#eab308", // tx
+          }),
+
+          // doc_count drawn on LEFT scale after scaling by k
+          Plot.lineY(b, {
+            x: "key",
+            y: d => (d?.doc_count ?? 0) * k,
+            strokeWidth: 2.5,
+            curve: "catmull-rom",
+            stroke: "#71b6e0", // count
+          }),
+          Plot.dotY(b, {
+            x: "key",
+            y: d => (d?.doc_count ?? 0) * k,
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+
+          // Left y-axis: place ticks at tick (left-scale coords), but format as original (tick)
+          Plot.axisY({
+            anchor: "left",
+            ticks: leftTicks.map(t => t),
+            tickFormat: (_, i) => d3.format("~s")(leftTicks[i]) + "B",
+            label: "Bytes",
+          }),
+
+          // Right y-axis: place ticks at tick*k (left-scale coords), but format as original (tick)
+          Plot.axisY({
+            anchor: "right",
+            ticks: rightTicks.map(t => t * k),
+            tickFormat: (_, i) => d3.format("~s")(rightTicks[i]),
+            label: "Events",
+          }),
+
+          // Pointer showing all three original values (no scaling in tooltip)
+          Plot.tip(
+            b,
+            Plot.pointerX({
+              x: "key",
+              y: d => (d?.doc_count ?? 0) * k, // so the tip follows the count line; could also use rx/tx
+              fill: props.theme === "light" ? "white" : "black",
+              title: d =>
+                `Time: ${dateLocalTime(d.key)}\n` +
+                `rx: ${d?.rxHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.rxHistogram?.value)}B)\n` +
+                `tx: ${d?.txHistogram?.value ?? 0}B (~${d3.format(".0s")(d?.txHistogram?.value)}B)\n` +
+                `count: ${d?.doc_count ?? 0}`
+            })
+          ),
+        ]
+      };
+    } else {
+      options = {
+        x: {
+          type: "time",
+          label: "Time",
+          tickSpacing: 100,
+        },
+        y: {
+          label: "Count",
+          domain: [
+            0,
+            Math.max(1,
+              d3.max(props.buckets, (d) => d.doc_count) ?? 0
+            ),
+          ],
+        },
+        grid: true,
+        marks: [
+          Plot.lineY(props.buckets, {
+            x: "key",
+            y: "doc_count",
+            strokeWidth: 3,
+            curve: "catmull-rom",
+            stroke: "#71b6e0",
+          }),
+          Plot.dotY(props.buckets, {
+            x: "key",
+            y: "doc_count",
+            stroke: "#71b6e0",
+            strokeWidth: 3,
+          }),
+          Plot.tip(
+            props.buckets,
+            Plot.pointerX({
+              x: "key",
+              y: "doc_count",
+              fill: props.theme === "light" ? "white" : "black",
+              title: (d) =>
+                `Time: ${dateLocalTime(d.key)}\nCount: ${d.doc_count}`,
+            })
+          ),
+        ],
+      }
+    }
+  }
+  
+  const plot = Plot.plot({
+    marginLeft: 80,
+    marginRight: 80,
+    width: 1200,
+    height: 320,
+    marginBottom: 50,
+    inset: 20,
+    style: {
+      fontSize: "16px",
+      backgroundColor: props.theme === "light" ? "white" : "#1a202c",
+    },
+    ...options,
+  });
+  myplot.value.innerHTML = "";
+  myplot.value.appendChild(plot);
+  if (props.flow) {
+    const legend = Plot.legend({
+      color: { type: "categorical", domain: ["Received", "Sent", "Flows"], range: ["#22c55e", "#eab308", "#71b6e0"] },
+      swatchSize: 8
+    });
+    myplotLegend.value.innerHTML = "";
+    myplotLegend.value.appendChild(legend);
+  }
+}
+</script>