fluency-v8-components 1.3.5 → 1.3.6

package/src/components/charts/GradientChart.vue

@@ -0,0 +1,310 @@
+<template>
+  <div :id="id">
+    <div :id="id + 'tooltip'" role="tooltip" class="tooltip"></div>
+  </div>
+</template>
+<script>
+import * as d3 from "d3";
+import { colors } from "@/constants/colors";
+import { humanCount, dataCount } from "@/utils/formatOutput";
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    data: {
+      type: Object,
+      required: true,
+    },
+    change: {
+      type: String,
+      default: "neutral",
+    },
+    unit: {
+      type: String,
+      default: "Count",
+    },
+    width: {
+      type: Number,
+      default: 350,
+    },
+    height: {
+      type: Number,
+      default: 200,
+    },
+    hideAxis: {
+      type: Boolean,
+      default: false,
+    },
+    hideTooltip: {
+      type: Boolean,
+      default: false,
+    },
+    resizable: {
+      type: Boolean,
+      default: false,
+    },
+    tooltipOffset: {
+      type: String,
+      default: "layer",
+    },
+    valueName: {
+      type: String,
+      default: "Value",
+    },
+    theme: {
+      type: String,
+      default: "light",
+    },
+  },
+  data() {
+    return {
+      svg: null,
+    };
+  },
+  watch: {
+    data: {
+      handler() {
+        this.createChart(this.data);
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.initializeChart();
+    this.createChart(this.data);
+  },
+  methods: {
+    initializeChart() {
+      if (this.resizable) {
+        this.svg = d3
+          .select("#" + this.id)
+          .append("svg")
+          .attr("viewBox", `0 0 ${this.width} ${this.height}`);
+      } else {
+        this.svg = d3
+          .select("#" + this.id)
+          .append("svg")
+          .attr("width", this.width)
+          .attr("height", this.height);
+      }
+
+      // determine gradient color
+      const color = this.data.color
+        ? this.data.color
+        : colors[this.theme][this.change];
+
+      // set the gradient fill
+      const gradientFill = this.svg
+        .append("defs")
+        .append("linearGradient")
+        .attr("id", "gradientFill" + this.id)
+        .attr("x1", "0%")
+        .attr("x2", "0%")
+        .attr("y1", "100%")
+        .attr("y2", "0%");
+      gradientFill
+        .append("stop")
+        .attr("offset", "0%")
+        .style("stop-color", colors[this.theme]["canvas"])
+        .style("stop-opacity", 0.5);
+      gradientFill
+        .append("stop")
+        .attr("offset", "100%")
+        .style("stop-color", color)
+        .style("stop-opacity", 1);
+    },
+    createChart(data) {
+      // Declare the chart dimensions and margins.
+      const width = this.width;
+      const height = this.height;
+      const marginTop = this.hideAxis ? 2 : 20;
+      const marginRight = this.hideAxis ? 2 : 15;
+      const marginBottom = this.hideAxis ? 2 : 30;
+      const marginLeft = this.hideAxis ? 2 : 50;
+
+      // constant sizes
+      const pointSize = width > 300 ? 3 : 2;
+      const enlargedPointSize = width > 300 ? 5 : 3;
+      const color = data.color ? data.color : colors[this.theme][this.change];
+
+      // get the longest slots array and largest value
+      let largestValue = this.unit === "Percent (%)" ? 100 : 0;
+      data.values.forEach((d) => {
+        if (d > largestValue) {
+          largestValue = d;
+        }
+      });
+
+      // Declare the x (horizontal position) scale.
+      const x = d3.scaleUtc(d3.extent(data.slots), [
+        marginLeft,
+        width - marginRight,
+      ]);
+
+      // Declare the y (vertical position) scale.
+      const y = d3.scaleLinear(
+        [0, largestValue],
+        [height - marginBottom, marginTop]
+      );
+
+      // 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);
+        event.target.r.baseVal.value = enlargedPointSize;
+        d3.select("#" + this.id + "tooltip")
+          .html(`Time: ${slot}<br>${this.valueName}: ${value}`)
+          .style("opacity", 1)
+          .style("left", event[this.tooltipOffset + "X"] + 15 + "px")
+          .style("top", event[this.tooltipOffset + "Y"] + "px");
+      };
+      const mouseout = (event, d) => {
+        event.target.r.baseVal.value = pointSize;
+        d3.select("#" + this.id + "tooltip")
+          .style("opacity", 0)
+          .style("left", "0px")
+          .style("top", "0px");
+      };
+
+      // Declare the line generator.
+      const line = d3
+        .line()
+        .x((d, i) => {
+          return x(d.slots);
+        })
+        .y((d, i) => {
+          return y(d.values);
+        });
+
+      const area = d3
+        .area()
+        .x((d, i) => {
+          return x(d.slots);
+        })
+        .y0(height - marginBottom)
+        .y1((d, i) => {
+          return y(d.values);
+        });
+
+      const svg = this.svg;
+      const handle = this;
+      svg
+        .selectAll("g")
+        .data([data])
+        .join(
+          (enter) => enterChart(enter),
+          (update) => enterChart(update),
+          (exit) => exitChart(exit)
+        );
+
+      function enterChart(enter) {
+        enter
+          .append("g")
+          .call((g) => {
+            g.append("g").call((g) => {
+              // add x-axis
+              g.append("g")
+                .attr("id", handle.id + "xaxis")
+                .attr("transform", `translate(0,${height - marginBottom})`)
+                .call(
+                  d3
+                    .axisBottom(x)
+                    .ticks(handle.hideAxis ? 0 : width / 80)
+                    .tickSizeOuter(0)
+                );
+              // add y-axis
+              g.append("g")
+                .attr("id", handle.id + "yaxis")
+                .attr("transform", `translate(${marginLeft},0)`)
+                .call(
+                  d3
+                    .axisLeft(y)
+                    .ticks(handle.hideAxis ? 0 : height / 40)
+                    .tickFormat((d) => {
+                      return handle.unit === "Bytes (B)"
+                        ? dataCount(d)
+                        : humanCount(d);
+                    })
+                )
+                .call((g) =>
+                  handle.hideAxis
+                    ? g.select(".domain").attr("stroke-width", 0.5)
+                    : 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(handle.hideAxis ? "" : handle.unit)
+                );
+            });
+          })
+          .call((g) => {
+            // add the line
+            g.append("g").call((g) => {
+              g.append("path")
+                .attr("class", (d) => handle.id + "line")
+                .attr("z-index", 1)
+                .attr("stroke", color)
+                .attr("stroke-width", 1.5)
+                .attr("d", function (d) {
+                  const series = d.slots.map((slot, i) => {
+                    return { slots: slot, values: data.values[i] };
+                  });
+                  return line(series);
+                })
+                .attr("class", "area")
+                .attr("d", function (d) {
+                  const series = d.slots.map((slot, i) => {
+                    return { slots: slot, values: data.values[i] };
+                  });
+                  return area(series);
+                })
+                .attr("fill", "url(#gradientFill" + handle.id + ")");
+              // add the points
+              if (!handle.hideTooltip) {
+                const series = handle.data.slots.map((slot, i) => {
+                  return { slots: slot, values: handle.data.values[i] };
+                });
+                g.append("g").call((g) =>
+                  series.forEach((dat) => {
+                    g.append("circle")
+                      .attr("class", (d) => handle.id + "points")
+                      .attr("stroke", color)
+                      .attr("r", pointSize)
+                      .attr("cx", (d) => x(dat.slots))
+                      .attr("cy", (d) => y(dat.values))
+                      .on("mouseover", (event) => mouseover(event, dat))
+                      .on("mouseout", (event) => mouseout(event, dat));
+                  })
+                );
+              }
+            });
+          });
+      }
+
+      function exitChart(exit) {
+        exit.call((g) => g.style("opacity", 0).remove());
+      }
+    },
+  },
+};
+</script>

package/src/components/charts/LineChart.test.js

@@ -0,0 +1,59 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import LineChart from "./LineChart.vue";
+
+
+function setup() {
+  return mount(LineChart, {
+    props: {
+      id: "SystemCPU",
+      data: [
+        {
+          pool: "asghec",
+          instance: "asghec_69",
+          name: "SystemCPU",
+          unit: "Percent",
+          slots: [
+            1727726460000, 1727730060000, 1727733660000, 1727737260000,
+            1727740860000, 1727744460000, 1727748060000, 1727751660000,
+            1727755260000, 1727758860000, 1727762460000, 1727766060000,
+            1727769660000, 1727773260000, 1727776860000, 1727780460000,
+            1727784060000, 1727787660000, 1727791260000, 1727794860000,
+            1727798460000, 1727802060000, 1727805660000, 1727809260000,
+            1727812860000,
+          ],
+          values: [
+            0.4609135726073291, 0.46387690727001674, 0.4396994732378043,
+            0.4323871989693043, 0.41986672515070844, 0.43824043469520263,
+            0.41920535822274174, 0.4008273634894002, 0.4430878622827318,
+            0.4372730820277241, 0.43317372803133747, 0.3873811847060125,
+            0.42702333342512083, 0.42665168084388333, 0.4149052751704168,
+            0.4440249469874862, 0.4248958219144292, 0.42897200685068754,
+            0.41062538904069157, 0.44647002886044995, 0.40325322202094177,
+            0.4156716054225666, 0.4447364776078542, 0.5106685417976082,
+            0.4646321581445835,
+          ],
+          action: "Node_69",
+          index: 0,
+          total: 10.838463378777034,
+        },
+      ],
+      unit: "Percent (%)",
+      width: 325,
+      height: 175,
+      hideZeros: true,
+      isTime: true,
+      tooltipOffset: "layer",
+      slotName: "Field",
+      valueName: "Value",
+      useLegend: false,
+    },
+  });
+}
+
+describe("LineChart", () => {
+  it("renders", () => {
+    const wrapper = setup();
+    expect(wrapper.exists()).toBe(true);
+  });
+});