1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/**
 * Please keep this comment. It is required for auto-completion and type checking.
 * @param {Object} props
 * @param {Blockbax.Api} props.api
 * @param {Blockbax.Subject} props.contextSubject
 * @param {Blockbax.DateRange} props.dateRange
 * @param {number} props.refreshTick
 */
function Widget({ api, contextSubject, dateRange, refreshTick }) {
  // The @type annotations fix the errors from the type checker by defining what these states could possibly be
  const [percent, setPercent] = React.useState(/** @type {number | undefined} */ (undefined));
  const [event, setEvent] = React.useState(/** @type {Blockbax.Event | undefined} */ (undefined));

  // Whenever the refresh tick changes, request new data and update the
  // widget. If you want to use the dateRange in your query as well, add the
  // relevant dateRange properties to the dependency array
  React.useEffect(() => {
    void update();
  }, [refreshTick]);

  return (
    // The SVG that will be drawn, with a fixed viewBox and
    // preserveAspectRatio to determine how the image should scale within
    // the available container
    <svg
      className={`battery ${event?.eventLevel ?? ""}`}
      viewBox="0 0 120 255"
      preserveAspectRatio="xMidYMid meet"
      onClick={navigateToEvent}
    >
      <rect className="terminal" x="40" y="10" width="40" height="15" rx="4" />
      <rect className="body" x="10" y="25" width="100" height="220" rx="8" />
      {/* The fill of which the height is calculated based on the percent measurement */}
      <rect className="fill" x="14" y="241" width="92" height={(216 * (percent ?? 0)) / 100} rx="4" />

      <text className="percent" x="60" y="145" textAnchor="middle">
        {percent === undefined ? "—" : `${Math.round(percent)}%`}
      </text>
    </svg>
  );

  async function update() {
    // Fetch the latest event and measurement value for the contextSubject.
    // In our example, we are using a known metricId with values between 0
    // and 100
    const [measurements, events] = await Promise.all([
      api.getMeasurements({
        metricIds: ["b2c57322-1099-4875-b51b-77e8b2ba2064"],
        subjectIds: [contextSubject.id],
        size: 1
      }),
      api.getEvents({
        subjectIds: [contextSubject.id],
        active: true,
        size: 1
      })
    ]);

    const measurement = measurements.series[0]?.measurements[0];
    setPercent(/** @type {Blockbax.NumberMeasurement | undefined} */ (measurement)?.value);
    setEvent(events.result[0]);
  }

  function navigateToEvent() {
    // If there is an active event, navigate to its details page
    if (event) {
      void api.navigate(`/events/${event.id}`);
    }
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/* Generic styling reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Scale the widget to match the exact size it has available within the
dashboard, and hide any content that might be rendered outside of those
boundaries */
#widget {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* The SVG drawing of the battery, with a pointer cursor to indicate it is clickable */
.battery {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Drawing the shape of the battery */
.terminal {
  fill: #999999;
}
.body {
  stroke: #999999;
  fill: transparent;
  stroke-width: 4;
}

/* The inner part of the battery is gray by default, and gets colored depending
on the status of the latest active event. Its transform-box and transform
properties are set so that it grows from the bottom upwards */
.fill {
  fill: #999999;
  transform-box: fill-box;
  transform: translateY(-100%);
  transition:
    height 0.6s ease-in-out,
    fill 0.3s ease-in-out;
}
.OK .fill {
  fill: #16a34a;
}
.INFO .fill {
  fill: #0550ae;
}
.WARNING .fill {
  fill: #e6700a;
}
.PROBLEM .fill {
  fill: #a40e26;
}

/* The text on the battery to indicate its percentage */
.percent {
  font-family: sans-serif;
  font-size: 36px;
  font-weight: 700;
  fill: white;
  stroke: #2d2d2d;
  stroke-width: 3;
  paint-order: stroke fill;
}