zwavechords.html

<!-- Chord graph Developed  by Madelaide 202006
Inspired from the Domoticz DependencyChart, which I always preferred for visualising my ZWave network.
Much hacking of code as this is my first JS/HTML and HA project. I still don't really understand the hooks into HA, but the code below works (for me :) )

Very much a work in progress, superfluous code remains (borrowed from the sources below) and also debug logging left in.

I'm advised by the Home Assistant forum this method of hooking into HA is deprecated, so i need to  get teh "card method" working, so far no luck.

Lots of code borrowed from the following:-
https://www.d3-graph-gallery.com/chord.html

Nadieh Bremer’s Block 94db779237655907b907/Updated June 15, 2020/Storytelling with Chord Diagram to get the node/group labelling and highlighting working
(http://bl.ocks.org/nbremer/94db779237655907b907) 

Adam Naj's zwavegraph2.html panel and code for how to add to HA and for the code to parse the Zwave list (I have not yeet tested if this works with OpenZwave, that will be the next stage, after getting it to work as "card")
https://gist.github.com/AdamNaj

INSTRUCTIONS:
     1) add this text to your configuration.yaml file

panel_custom:
  - name: zwavechords
    sidebar_title: ZWC
    sidebar_icon: mdi:access-point
    url_path: zwavec

    2) Create a folder in your config folder named panels (like config/panels)
    3) Create a file in the panels folder with this content (zwavechords.html)
    4) refresh your cache, and or restart ha
Version 0.9 2020-07-04 Initial github committal, beta really but works for me and has been useful.

-->
<dom-module id="ha-panel-zwavechords">
  <template>
    <app-header-layout has-scrolling-region>
      <app-header slot="header" fixed>
        <app-toolbar>
          <div main-title>Z-Wave Links</div>
        </app-toolbar>
      </app-header>

      <div class="content" style="background: var(--primary-background-color);">
        <!-- <svg id="svg"></svg> -->
        <svg id="svg" width="1000px" height="1000px"></svg>

        <div id="chart"></div>
      </div>
    </app-header-layout>
  </template>
</dom-module>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script>
  class HaPanelZWaveC extends Polymer.Element {
    static get is() {
      return "ha-panel-zwavechords";
    }

    static get properties() {
      return {
        // Home Assistant object
        hass: Object,
        // If should render in narrow mode
        narrow: {
          type: Boolean,
          value: false,
        },
        // If sidebar is currently shown
        showMenu: {
          type: Boolean,
          value: false,
        },
        // Home Assistant panel info99
        // panel.config contains config passed to register_panel serverside
        panel: Object,

        controls: {
          type: Object,
        },
        controlsLoaded: {
          type: Boolean,
          value: false,
        },

        settings: {
          type: Boolean,
          value: false,
        },
      };
    }

    ready() {
      super.ready();
      this.finalChord();
    }

    //Draw the original Chord diagram
    finalChord() {
      var data_set = this.listNodes(this.hass);
      var matrix = data_set.node_matrix;
      var node_id_names = data_set.node_names;

      //test matrix, 8x8, each row is a node, each column is the same node list
      // var matrix = [
      //  A,B,C
      // [1,1,1], //A
      // [1,1,0], //B
      // [1,0,0]  //C
      // ];

      var colours = new Array(matrix.length);
      var node_names = new Array(matrix.length);

      console.log("NODE_ID_NAMES", node_id_names);
      // Loop to initilize 2D array elements.
      for (var row = 0; row < colours.length; row++) {
        colours[row] = this.generateRandomColor();
        node_names[row] = "ZW" + row;
      }

      // Initialise the color scale
      var colour_set = d3.scale
        .ordinal()
        .domain(d3.range(node_names.length))
        .range(colours);

      const canvas_size = 1000;
      const margin_size = 300;

      //Initialise Chord Diagram
      var margin = {
          top: margin_size,
          right: margin_size,
          bottom: margin_size,
          left: margin_size,
        },
        width = canvas_size - margin.left - margin.right,
        height = canvas_size - margin.top - margin.bottom,
        innerRadius = Math.min(width, height) * 0.5,
        outerRadius = innerRadius * 1.05;

      //Initialise the SVG
      var svg = d3
        .select(this.$.svg)
        .append("svg:svg")
        .append("svg:svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("svg:g")
        .attr(
          "transform",
          "translate(" +
            (margin.left + width / 2) +
            "," +
            (margin.top + height / 2) +
            ")"
        );

      var chord = d3.layout
        .chord()
        .padding(0.04)
        .sortSubgroups(d3.descending) //sort the chords inside an arc from high to low
        .sortChords(d3.descending) //which chord should be shown on top when chords cross. Now the biggest chord is at the bottom
        .matrix(matrix);

      // Draw outer Arcs
      var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);

      var g = svg
        .selectAll("g.group")
        .data(chord.groups)
        .enter()
        .append("svg:g")
        .attr("class", function (d) {
          return "group " + node_names[d.index];
        });

      g.append("svg:path")
        .attr("class", "arc")
        .style("stroke", function (d) {
          return colour_set(d.index);
        })
        .style("fill", function (d) {
          return colour_set(d.index);
        })
        .attr("d", arc)
        .style("opacity", 0)
        .style("opacity", 0.4);

      //Initialise Names
      g.append("svg:text")
        .each(function (d) {
          d.angle = (d.startAngle + d.endAngle) / 2;
        })
        .attr("dy", ".35em")
        .attr("class", "titles")
        .attr("text-anchor", function (d) {
          return d.angle > Math.PI ? "end" : null;
        })
        .attr("transform", function (d) {
          return (
            "rotate(" +
            ((d.angle * 180) / Math.PI - 90) +
            ")" +
            "translate(" +
            innerRadius * 1.1 +
            ")" +
            (d.angle > Math.PI ? "rotate(180)" : "")
          );
        })
        .attr("opacity", 0)
        .style("fill", function (d) {
          return colour_set(d.index);
        })
        .text(function (d, i) {
          // return node_names[i];
          return node_id_names[i];
        });

      //Initialise inner chords (the node links)
      var chords = svg
        .selectAll("path.chord")
        .data(chord.chords)
        .enter()
        .append("svg:path")
        .attr("class", "chord")
        .style("stroke", function (d) {
          return d3.rgb(colour_set(d.source.index)).darker();
        })
        .style("fill", function (d) {
          return colour_set(d.source.index);
        })
        .attr("d", d3.svg.chord().radius(innerRadius))
        .attr("opacity", 0);

      //Make all arcs visible
      svg.selectAll("g.group").select("path").style("opacity", 1);
      //console.log("finalChord>svg1", svg);

      //Make mouse over and out possible
      svg
        .selectAll(".group")
        .on("mouseover", fade(0.005))
        .on("mouseout", fade(0.7));
      console.log("finalChord>svg2.group", svg.group);

      /*Show all chords*/
      chords.transition().style("opacity", 0.7);

      /*And the Names of each Arc*/

      svg
        .selectAll("g.group")
        .selectAll(".titles")
        .style("opacity", 0.8)
        .style("font-size", "medium");

      //Returns an event handler for fading a given chord group
      function fade(opacity) {
        return function (d, i) {
          // console.log("fade>svg1", svg)

          svg
            .selectAll("path.chord")
            .filter(function (d) {
              return d.source.index != i && d.target.index != i;
            })
            .transition()
            .style("stroke-opacity", opacity)
            .style("fill-opacity", opacity);
        };
      }
    }

    generateRandomColor() {
      var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
      return randomColor;
    }

    listNodes(hass) {
      let states = new Array();
      for (let state in hass.states) {
        states.push({
          name: state,
          entity: hass.states[state],
        });
      }
      let zwaves = states.filter((s) => {
        return (
          s.name.indexOf("zwave.") == 0 &&
          s.entity.attributes["capabilities"] !== undefined
        );
      });
      let result = {
        edges: [],
        nodes: [],
      };

      let hubNode = 0;
      let neighbour_matrix = {};

      //initialise the full matrix, then fill in details for valid nodes
      var node_id_names = new Array(zwaves.length);
      var node_dict = new Array(zwaves.length);

      // Create one dimensional array
      var node_matrix = new Array(zwaves.length);
      console.log("length", zwaves.length);

      // Loop to initilize 2D array elements.
      for (var row = 0; row < node_matrix.length; row++) {
        node_matrix[row] = new Array(node_matrix.length);
        for (var column = 0; column < node_matrix.length; column++) {
          node_matrix[row][column] = 0;
          // node_id_names[row] = "Z_";
        }
      }
      console.log(" nodes", node_matrix);
      console.log(" node_id_names", node_id_names);

      for (let b in zwaves) {
        let id = zwaves[b].entity.attributes["node_id"];
        node_dict[b] = id;
        //  console.log(">b - id", b, id);

        let node = zwaves[b].entity;
        if (
          node.attributes["capabilities"].filter((s) => {
            return s == "primaryController";
          }).length > 0
        ) {
          hubNode = id;
        }
        neighbour_matrix[id] = node.attributes["neighbors"];
        ///debugging
        //  if (id == 78) {
        //                  console.log("node_dict", node_dict)

        if (neighbour_matrix[id] !== undefined) {
          // console.log("neighbour_matrix[b, id, neibgours=[", b, id, neighbour_matrix[id]);
          for (var column = 0; column < neighbour_matrix[id].length; column++) {
            //  console.log("neighbour_matrix[ b, id, ] column, [neighbour_matrix[id]]", b, id,  column, neighbour_matrix[id])
            //  console.log("node=node_dict", neighbour_matrix[id][column], node_dict.indexOf(neighbour_matrix[id][column]))

            node_matrix[b][node_dict.indexOf(neighbour_matrix[id][column])] =
              neighbour_matrix[id][column];
          }
        }

       
        let entities = states.filter((s) => {
          return (
            s.name.indexOf("zwave.") == -1 &&
            s.entity.attributes["node_id"] == id
          );
        });
        let batlev = node.attributes.battery_level;

         node_id_names[b] = (node.attributes["is_zwave_plus"] ? "+" : "") +"Z" + id + "-" + node.attributes["friendly_name"] + "-[" + node.attributes["averageResponseRTT"] + "ms]" + (batlev != undefined ? "-BAT[" + batlev + "%]" : "")

        /// create node
        let entity = {
          id: id,
          entity_id: node.entity_id,
          label:
            "[" +
            id +
            (node.attributes["is_zwave_plus"] ? "+" : "") +
            "] " +
            (
              node.attributes["friendly_name"] +
              " (" +
              node.attributes["averageResponseRTT"] +
              "ms)"
            ).replace(/ /g, "\n"),
          class: "unset layer-7",
          layer: 7,
          rx: "6",
          ry: "6",
          neighbors: neighbour_matrix[id],
          battery_level: batlev,
          mains: batlev,
          location: node.attributes["location"],
          failed: node.attributes["is_failed"],
          title:
            "<b>" +
            node.attributes["node_name"] +
            "</b>\n" +
            "\n Entity ID: " +
            node.entity_id +
            "\n Node: " +
            id +
            (node.attributes["is_zwave_plus"] ? "+" : "") +
            "\n Product Name: " +
            node.attributes["product_name"] +
            "\n Average Request RTT: " +
            node.attributes["averageResponseRTT"] +
            "ms" +
            "\n Power source: " +
            (batlev != undefined ? "battery (" + batlev + "%)" : "mains") +
            "\n " +
            entities.length +
            " entities" +
            "\n Neighbors: " +
            node.attributes["neighbors"],
          forwards:
            node.attributes.is_awake &&
            node.attributes.is_ready &&
            !node.attributes.is_failed &&
            node.attributes.capabilities.includes("listening"),
        };

        result.nodes.push(entity);
      }

      console.log("node_id_names", node_id_names);
      console.log("node_matrix", node_matrix);

      var complex = {
        node_matrix: node_matrix,
        node_names: node_id_names,
      };
      return complex;
    }
  }

  customElements.define(HaPanelZWaveC.is, HaPanelZWaveC);
</script>