/*
* Copyright (c) 2021 Xilinx, Inc.
* 
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and 
* associated documentation files (the "Software"), to deal in the Software without restriction, including 
* without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 
* copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to 
* the following conditions: 
* 
* The above copyright notice and this permission notice shall be included in all copies or substantial 
* portions of the Software. 
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT 
* LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
* IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
* SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
* 
*
*
*/
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
import '../../../shared-styles';

class cpmClockDiagram extends PolymerElement {
    static get template() {
        return html`
    <style include="shared-styles">
    :host {
        display: block;
    }
    #svgContainer{
        display: block;
        margin: 0 auto;
    }
    .card {
        margin: 15px 0 0 0;
        padding: 0px 15px 15px 15px;
    }
    </style>
    <div class="card">
        <svg width='100%' id='svgContainer'></svg>
    </div>
    `;
    }

    ready() {
        super.ready();
        //SVG Container DOM selection
        let dom_svgCont = this.$.svgContainer;

        //SVG Container D3 selection
        let d3_svgCont = d3.select(dom_svgCont).attr('viewBox', '0 0 800 720');

        // G1
        let g1 = d3_svgCont.append("g").attr("transform", "translate(60, 20)");

        // G2
        let g2 = d3_svgCont.append("g").attr("transform", "translate(60, 220)");

        g1.append("rect").attr("width", "100").attr("height", "200").attr("fill", "#FBD7BB").attr("stroke", "#000000").attr("stroke-width", "1");

        g1.append("text").attr("transform", "translate(40, 100)").attr("font-size", 14).attr("fill", "#000").text("GTY");

        g1.append("rect").attr("width", "200").attr("height", "200").attr('transform', 'translate(100, 0)').attr("fill", "#C4D6A0").attr("stroke", "#000000").attr("stroke-width", "1");

        g1.append("text").attr("transform", "translate(180, 100)").attr("font-size", 14).attr("fill", "#000").text("XPIPE");

        g2.append("rect").attr("width", "400").attr("height", "320").attr("fill", "#C6D8F0").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("rect").attr("width", "190").attr("height", "500").attr('transform', 'translate(400, 0)').attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("rect").attr("width", "400").attr("height", "180").attr('transform', 'translate(0, 320)').attr("fill", "#DBEEF3").attr("stroke", "#000000").attr("stroke-width", "1");

        //text labels

        g2.append("text").attr("transform", "translate(50, 120)").attr("font-size", 14).attr("fill", "#000").text("CPM");

        g2.append("text").attr("transform", "translate(480, 140)").attr("font-size", 14).attr("fill", "#000").text("PL");

        g2.append("text").attr("transform", "translate(180, 440)").attr("font-size", 14).attr("fill", "#000").text("PS");

        //inner blocks

        // let g2_ir1 = g2.append("g").attr("class", "g2_box1").attr("transform", "translate(150, 40)");
        // g2_ir1.append("rect").attr("width", 120).attr("height", 60).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        let g2_ir1 = g2.append("g").attr("class", "g2_box2").attr("transform", "translate(130, 60)");
        g2_ir1.append("rect").attr("width", 185).attr("height", 70).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        //inner rectangles of g2_ir1

        g2_ir1.append("rect").attr("width", 40).attr("height", 15).attr("transform", "translate(5,30)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("rect").attr("width", 40).attr("height", 15).attr("transform", "translate(50,30)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("rect").attr("width", 40).attr("height", 15).attr("transform", "translate(95,30)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("rect").attr("width", 40).attr("height", 15).attr("transform", "translate(140,30)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("text").attr("transform", "translate(15, 42)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir1.append("text").attr("transform", "translate(60, 42)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir1.append("text").attr("transform", "translate(105, 42)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir1.append("text").attr("transform", "translate(150, 42)").attr("font-size", 12).attr("fill", "#000").text("div");

        //g2_ir1 mappings

        g2_ir1.append("line").attr("x1", 25).attr("y1", 15).attr("x2", 160).attr("y2", 15).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 25).attr("y1", 15).attr("x2", 25).attr("y2", 25).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 25 30 L 20 25 L 30 25 L 25 30").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 70).attr("y1", 15).attr("x2", 70).attr("y2", 25).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 70 30 L 65 25 L 75 25 L 70 30").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 115).attr("y1", 15).attr("x2", 115).attr("y2", 25).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 115 30 L 110 25 L 120 25 L 115 30").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 160).attr("y1", 15).attr("x2", 160).attr("y2", 25).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 160 30 L 155 25 L 165 25 L 160 30").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 20).attr("y1", 45).attr("x2", 20).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 20 110 L 15 105 L 25 105 L 20 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 35).attr("y1", 70).attr("x2", 35).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 35 110 L 30 105 L 40 105 L 35 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("text").attr("transform", "translate(45, 80) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("pcie_core_clk");

        g2_ir1.append("line").attr("x1", 65).attr("y1", 45).attr("x2", 65).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 65 110 L 60 105 L 70 105 L 65 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("text").attr("transform", "translate(90, 80) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("pcie_pipe_clk");

        g2_ir1.append("line").attr("x1", 80).attr("y1", 70).attr("x2", 80).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 80 110 L 75 105 L 85 105 L 80 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 110).attr("y1", 45).attr("x2", 110).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 110 110 L 105 105 L 115 105 L 110 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 125).attr("y1", 70).attr("x2", 125).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 125 110 L 120 105 L 130 105 L 125 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("text").attr("transform", "translate(135, 80) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("pcie_user_clk");

        g2_ir1.append("line").attr("x1", 155).attr("y1", 45).attr("x2", 155).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 155 110 L 150 105 L 160 105 L 155 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("line").attr("x1", 170).attr("y1", 70).attr("x2", 170).attr("y2", 110).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("path").attr("d", "M 170 110 L 165 105 L 175 105 L 170 110").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir1.append("text").attr("transform", "translate(180, 80) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("pcie_user_clk2");

        //overlay rectangle
        let g2_ir2 = g2.append("g").attr("class", "g2_box1").attr("transform", "translate(150, 60)");
        g2_ir2.append("path").attr("d", "M 0 0 L 0 -20 L 185 -20 L 185 50 L 165 50").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("text").attr("transform", "translate(105, 35)").attr("font-size", 8).attr("fill", "#000").text("xpipe0_gt_outclk");

        g2.append("text").attr("transform", "translate(215, 35)").attr("font-size", 8).attr("fill", "#000").text("xpipe1_gt_outclk");

        g2.append("text").attr("transform", "translate(225, 55)").attr("font-size", 8).attr("fill", "#000").text("clock divider");

        g2.append("text").attr("transform", "translate(205, 70)").attr("font-size", 8).attr("fill", "#000").text("clock divider");

        let g2_ir3 = g2.append("g").attr("class", "g2_box3").attr("transform", "translate(140, 240)");
        g2_ir3.append("rect").attr("width", 130).attr("height", 60).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(5, 12)").attr("font-size", 10).attr("fill", "#000").text("CRC");

        g2_ir3.append("rect").attr("width", 40).attr("height", 20).attr("transform", "translate(15,20)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(24, 34)").attr("font-size", 12).attr("fill", "#000").text("PLL");

        g2_ir3.append("line").attr("x1", 55).attr("y1", 30).attr("x2", 85).attr("y2", 30).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("path").attr("d", "M 85 25 L 85 35 L 90 30 L 85 25").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("rect").attr("width", 30).attr("height", 40).attr("transform", "translate(90,10)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(97, 34)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir3.append("line").attr("x1", 120).attr("y1", 15).attr("x2", 155).attr("y2", 15).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("path").attr("d", "M 155 10 L 155 20 L 160 15 L 155 10").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(145, 5)").attr("font-size", 8).attr("fill", "#000").text("cpm_lsbus_clk");

        g2_ir3.append("line").attr("x1", 120).attr("y1", 30).attr("x2", 155).attr("y2", 30).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("path").attr("d", "M 155 25 L 155 35 L 160 30 L 155 25").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(160, 25)").attr("font-size", 8).attr("fill", "#000").text("dbg_cpm_clk");

        g2_ir3.append("line").attr("x1", 105).attr("y1", 10).attr("x2", 105).attr("y2", -10).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("path").attr("d", "M 100 -10 L 110 -10 L 105 -15 L 100 -10").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir3.append("text").attr("transform", "translate(90, -18)").attr("font-size", 8).attr("fill", "#000").text("cpm_core_clk");

        let g2_ir4 = g2.append("g").attr("class", "g2_box4").attr("transform", "translate(10, 340)");
        g2_ir4.append("rect").attr("width", 100).attr("height", 40).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(40, 25)").attr("font-size", 14).attr("fill", "#000").text("CRL");

        g2_ir4.append("line").attr("x1", 20).attr("y1", 0).attr("x2", 20).attr("y2", -70).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 15 -70 L 25 -70 L 20 -75 L 15 -70").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(30, -115) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("lpd_cpm_topsw_clk");

        g2_ir4.append("line").attr("x1", 45).attr("y1", 0).attr("x2", 45).attr("y2", -70).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 40 -70 L 50 -70 L 45 -75 L 40 -70").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(55, -90) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("dbg_tstmp_clk");

        g2_ir4.append("line").attr("x1", 70).attr("y1", 0).attr("x2", 70).attr("y2", -70).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 65 -70 L 75 -70 L 70 -75 L 65 -70").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(80, -80) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("dbg_lpd_clk");

        g2_ir4.append("rect").attr("width", 30).attr("height", 20).attr("transform", "translate(200,60)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(207, 75)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir4.append("line").attr("x1", 215).attr("y1", 60).attr("x2", 215).attr("y2", -30).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 210 -25 L 220 -25 L 215 -30 L 210 -25").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(225, -15) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("hspd_txusrclk");

        g2_ir4.append("rect").attr("width", 30).attr("height", 20).attr("transform", "translate(240,60)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(247, 75)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir4.append("line").attr("x1", 255).attr("y1", 60).attr("x2", 255).attr("y2", -30).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 250 -25 L 260 -25 L 255 -30 L 250 -25").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(260, -15) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("hspd_rxusrclk");

        g2_ir4.append("rect").attr("width", 30).attr("height", 20).attr("transform", "translate(300,50)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(305, 65)").attr("font-size", 12).attr("fill", "#000").text("IRO");

        g2_ir4.append("line").attr("x1", 315).attr("y1", 50).attr("x2", 315).attr("y2", 15).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 310 20 L 320 20 L 315 15 L 310 20").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("rect").attr("width", 30).attr("height", 15).attr("transform", "translate(300,0)").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(307, 12)").attr("font-size", 12).attr("fill", "#000").text("div");

        g2_ir4.append("line").attr("x1", 315).attr("y1", 0).attr("x2", 315).attr("y2", -40).attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("path").attr("d", "M 310 -35 L 320 -35 L 315 -40 L 310 -35").attr("stroke", "#000000").attr("stroke-width", "1");

        g2_ir4.append("text").attr("transform", "translate(285, -45)").attr("font-size", 8).attr("fill", "#000").text("cpm_osc_clk_div2");

        //g1 text boxes
        let g1_tb1 = g1.append("g").attr("class", "g1_box1").attr("transform", "translate(20, 120)");
        g1_tb1.append("rect").attr("width", 60).attr("height", 20).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");
        g1_tb1.append("text").attr("transform", "translate(20, 15)").attr("font-size", 14).attr("fill", "#000").text("PLL");

        let g1_tb2 = g1.append("g").attr("class", "g1_box1").attr("transform", "translate(20, 160)");
        g1_tb2.append("rect").attr("width", 60).attr("height", 20).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");
        g1_tb2.append("text").attr("transform", "translate(20, 15)").attr("font-size", 14).attr("fill", "#000").text("PLL");

        //g1_tb1.append("path").attr("d", "M 60 10 L 180 10 L 180 120").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");
        d3_svgCont.append("line").attr("x1", 140).attr("y1", 150).attr("x2", 260).attr("y2", 150).attr("stroke", "#000000").attr("stroke-width", "1");
        d3_svgCont.append("line").attr("x1", 260).attr("y1", 150).attr("x2", 260).attr("y2", 260).attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("path").attr("d", "M 260 260 L 255 255 L 265 255 L 260 260").attr("stroke", "#000000").attr("stroke-width", "1");

        //g1_tb2.append("path").attr("d", "M 60 10 L 150 10 L 150 100").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");
        d3_svgCont.append("line").attr("x1", 140).attr("y1", 190).attr("x2", 230).attr("y2", 190).attr("stroke", "#000000").attr("stroke-width", "1");
        d3_svgCont.append("line").attr("x1", 230).attr("y1", 190).attr("x2", 230).attr("y2", 295).attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("path").attr("d", "M 230 295 L 225 290 L 235 290 L 230 295").attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("path").attr("d", "M 10 620 L 40 620 L 50 625 L 40 630 L 10 630 L 10 620").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("line").attr("x1", 50).attr("y1", 625).attr("x2", 235).attr("y2", 625).attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("line").attr("x1", 235).attr("y1", 625).attr("x2", 235).attr("y2", 500).attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("path").attr("d", "M 230 505 L 240 505 L 235 500 L 230 505").attr("stroke", "#000000").attr("stroke-width", "1");

        d3_svgCont.append("text").attr("transform", "translate(245, 545) rotate(90)").attr("font-size", 10).attr("fill", "#000").text("lpd_cpm_in_ref_clk");

        g2.append("path").attr("d", "M 410 170 L 430 160 L 430 180 L 410 170").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("text").attr("transform", "translate(410, 155)").attr("font-size", 8).attr("fill", "#000").text("BUFG");

        g2.append("line").attr("x1", 410).attr("y1", 170).attr("x2", 370).attr("y2", 170).attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("line").attr("x1", 430).attr("y1", 170).attr("x2", 470).attr("y2", 170).attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("path").attr("d", "M 370 165 L 370 175 L 365 170 L 370 165").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("text").attr("transform", "translate(355, 160)").attr("font-size", 8).attr("fill", "#000").text("pl_chi0_clk");

        g2.append("path").attr("d", "M 430 170 L 435 175 L 435 165 L 430 170").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("path").attr("d", "M 410 210 L 430 200 L 430 220 L 410 210").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("text").attr("transform", "translate(410, 195)").attr("font-size", 8).attr("fill", "#000").text("BUFG");

        g2.append("line").attr("x1", 410).attr("y1", 210).attr("x2", 370).attr("y2", 210).attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("line").attr("x1", 430).attr("y1", 210).attr("x2", 470).attr("y2", 210).attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("path").attr("d", "M 370 205 L 370 215 L 365 210 L 370 205").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("text").attr("transform", "translate(355, 200)").attr("font-size", 8).attr("fill", "#000").text("pl_chi1_clk");

        g2.append("path").attr("d", "M 430 210 L 435 215 L 435 205 L 430 210").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("ellipse").attr("cx", 485).attr("cy", 170).attr("rx", 15).attr("ry", 10).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("ellipse").attr("cx", 485).attr("cy", 210).attr("rx", 15).attr("ry", 10).attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("path").attr("d", "M 478 173 L 478 167 L 483 167 L 483 173 L 488 173 L 488 167  L 493 167 L 493 173").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        g2.append("path").attr("d", "M 478 213 L 478 207 L 483 207 L 483 213 L 488 213 L 488 207  L 493 207 L 493 213").attr("fill", "transparent").attr("stroke", "#000000").attr("stroke-width", "1");

        document.querySelector("#pageloader").style.display = "none";
    }
}
window.customElements.define('clockcpm-diagram', cpmClockDiagram);