SLD-component

This component handles SVG drawings of SLD components.

This component is created based around the sldHandler function and works best if all elements are included. Running the sldHandler with all elements included will run the other functions as well, the other functions can be used for more specific purposes.

Usage

sldHandler

This is the main function and depending on the variables sent the others will be as well. Having a valueElt will trigger the valueHandler function, having a breakerElt will trigger the breakerHandler and having a trippedElt wil trigger the trippedHandler.

import { sldHandler } from "@gapit/sld-component";

function getElements() {
  //loop json for multiple components.
  for (const sldItem of Object.values(customProperties.component)) {
    const showcase = true; // true = random data, false = true data.
    const { id, metric, metricVar, baseUnit, invertBreaker } = sldItem; // get from json.
    const GroupElt = htmlNode.getElementById("component-" + id); // get component group
    const [
      trippedElt, // Displays when breaker is tripped.
      signalElt, // Displays when communication disruption.
      breakerStateElt, // Excess element to determine open / closed state.
      textElt, // Breaker name.
      descriptionElt, // Breaker description.
      valueElt, // Value Element.
      breakerElt, // Group of lines. Last = closed, 2nd last = open.
    ] = GroupElt.children as HTMLCollectionOf<HTMLElement & SVGElement>;
    const decimals = 1; // Decimals on value element.
    //create custom colors for different states.
    const customColors = {
      active: "#aa453f",
      inactive: "#49b755",
      noCommunication: "#6d6f73",
      tripped: "#001a2b",
    };
    //perform function call.
    sldHandler({
      metric,
      metricVar,
      showcase,
      baseUnit,
      decimal,
      breakerElt,
      breakerStateElt,
      customColors,
      trippedElt,
      signalElt,
      textElt,
      valueElt,
      descriptionElt,
      invertBreaker,
    });
  }
}

Create custom json (non essential)

Declare global json

import customPropertiesJSON from "../../src/json.json";

declare global {
  const customProperties: typeof customPropertiesJSON;
}

Json structure

{
  "component": {
    "xq014": {
      "id": "xq014",
      "metric": "xq014",
      "metricVar": {
        "breakerMetric": "-breaker",
        "valueMetric": "-data",
        "trippedMetric": "-status"
      },
      "invertBreaker": false,
      "baseUnit": "kW"
    },
    ...
  }
}

getBreakerElements

This function finds the last 2 objects of the breaker group and returns them as activeElt and inactiveElt, where activeElt is the last element and inactiveElt is the second last.

getBreakerElements(breakerElt);

valueHandler

Gives value to the value element.

valueHandler({
  valueMetric,
  showcase,
  valueElt,
  communicationCounter,
  decimal,
  baseUnit,
});

breakerHandler

Flips the breaker switch and colors elements.

breakerHandler({
  breakerMetric,
  showcase,
  breakerElt,
  communicationCounter,
  activeColor,
  inactiveColor,
  breakerStateElt,
  invertBreaker,
  textElt,
  valueElt,
  descriptionElt,
});

trippedHandler

Activates tripped element, opens breaker and colors elements.

trippedHandler({
  trippedMetric,
  showcase,
  trippedElt,
  communicationCounter,
  trippedColor,
  breakerStateElt,
  breakerElt,
  textElt,
  valueElt,
  descriptionElt,
});

communicationHandler

If either of the other functions (valueHandler, breakerHandler & trippedHandler) retruns a value of 1 this function should be triggered. This function activates the signal element, both breaker states and colors the elements.

communicationHandler({
  signalElt,
  noCommunicationColor,
  breakerStateElt,
  trippedElt,
  breakerElt,
  textElt,
  valueElt,
  descriptionElt,
});