tutorial/ui/chart.html at 95a5f3c5f03a8348982fca4a90ab2e52d8907b85 · graphform/tutorial · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
  <head>
    <title>Swim Chart</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
  </head>
  <body style="display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; margin: 0;">

    <div id="app" style="display: flex; width: 67%; height: 67%; flex-direction: column;">
    </div>

    <div>
      <label for="agents">Choose a web agent:</label>

      <select name="agents" id="web_agent_select" onchange="update(this.value)">
        <option value="/unit/master" style = "color:#50e3c2">/unit/master</option>
        <option value="/unit/secondAgent" style = "color:#3c52f0">/unit/secondAgent</option>
        <option value="/unit/thirdAgent" style = "color:#212326">/unit/thirdAgent</option>
      </select>
    </div>

    <script src="https://cdn.swimos.org/js/3.10.2/swim-system.js"></script>
    <script>

    const app = new swim.HtmlAppView(document.getElementById("app"));

    const chartCanvas = app.append('div').position('relative').append("canvas");

    const tween = swim.Transition.duration(1000);

    /* Chart View */
    const chart = new swim.ChartView()
        .bottomAxis(swim.AxisView.bottom("time"))
        .leftAxis(swim.AxisView.left("0...120"))
        .domainColor("#4a4a4a")
        .tickMarkColor("#4a4a4a")
        .font("12px sans-serif")
        .textColor("#4a4a4a");
    chartCanvas.append(chart);

    const plot = new swim.LineGraphView()
        .stroke("#50e3c2")
        .strokeWidth(2);
    chart.addPlot(plot);

    function addToPlot(key, value) {
      const time = key.numberValue();
      const v = value.get("count").numberValue(0);
      plot.insertDatum({x: time, y: v, opacity: void 0});
    }

    function removeFromPlot(key) {
      const time = key.numberValue();
      plot.removeDatum(time);
    }

    // Allowing for Web Agent selection by html dropdown menu

    var agent_URI = "/unit/master";

    // runs once
    var histogramLink = swim.downlinkMap()
        .hostUri("warp://localhost:9001")
        .nodeUri(agent_URI)
        .laneUri("histogram")
        .didUpdate(function(key, value) {
          addToPlot(key, value);
        })
        .didRemove(function(key) {
          removeFromPlot(key);
        })
        .open();


    // update logic runs whenever a new dropdown option is selected
    function update(val) {
      if (histogramLink) {
        // close downlink on update
        histogramLink.close();

        // update the node URI used in histogramLink to match the selected agent
        agent_URI = document.getElementById('web_agent_select').value;
        console.log(agent_URI);

        histogramLink = swim.downlinkMap()
            .hostUri("warp://localhost:9001")
            .nodeUri(agent_URI)
            .laneUri("histogram")
            .didUpdate(function(key, value) {
              addToPlot(key, value);
            })
            .didRemove(function(key) {
              removeFromPlot(key);
            })
            .open();

        // switch statement that changes the plot color according to web agent
        var color = "#50e3c2";
        switch(agent_URI) {
          case "/unit/secondAgent":
            color = "#3c52f0";
            break;
          case "/unit/thirdAgent":
              color = "#212326";
              break;
          default:
            // for master web agent
            color = "#50e3c2";
        }
        plot
        .stroke(color);
        chart.addPlot(plot);
      }
    }

    </script>
  </body>
</html>