BaseModelicaLibraryTesting.jl/assets/diff_template.html at bc228c6f9bcec21288ae92f56d937f3fcce223f9 · OpenModelica/BaseModelicaLibraryTesting.jl · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Diff &#x2014; {{TITLE}}</title>
  <link rel="stylesheet" href="../../assets/dygraph.min.css"/>
  <script src="../../assets/dygraph.min.js"></script>
  <style>
    body  { font-family: sans-serif; margin: 2em; font-size: 14px; }
    h1    { font-size: 1.3em; }
    h3    { font-size: 1.1em; margin-top: 2.5em; border-bottom: 1px solid #ddd;
            padding-bottom: 4px; }
    .graph { width: 100%; height: 320px; margin-bottom: 0.5em; }
    .meta  { color: #555; font-size: 12px; margin: 0.4em 0 2em; }
    a { color: #0366d6; text-decoration: none; }
    a:hover { text-decoration: underline; }
    .dygraph-legend { font-size: 12px !important; }
  </style>
</head>
<body>
<h1>Diff &#x2014; {{MODEL}}</h1>
{{META_BLOCK}}
{{VAR_TABLE}}
<div id="charts"></div>
<script>
var csvRaw = `{{CSV_DATA}}`;

(function () {
  var lines = csvRaw.trim().split('\n');
  if (lines.length < 2) return;
  var headers = lines[0].split(',').map(function (s) { return s.trim(); });
  var rows    = lines.slice(1).filter(function (l) { return l.trim() !== ''; })
                             .map(function (l) { return l.split(',').map(Number); });

  // Collect unique signal names from columns ending with "_ref"
  var sigs = [], seen = {};
  headers.forEach(function (h) {
    if (h.slice(-4) === '_ref') {
      var sig = h.slice(0, h.length - 4);
      if (!seen[sig]) { sigs.push(sig); seen[sig] = true; }
    }
  });

  var container = document.getElementById('charts');

  sigs.forEach(function (sig, si) {
    var refIdx = headers.indexOf(sig + '_ref');
    var simIdx = headers.indexOf(sig + '_sim');
    var errIdx = headers.indexOf(sig + '_relerr');

    var data = rows.map(function (r) {
      return [r[0], r[refIdx], r[simIdx], r[errIdx]];
    });

    var h3  = document.createElement('h3');
    h3.textContent = sig;
    var div = document.createElement('div');
    div.id  = 'g' + si;
    div.className = 'graph';
    container.appendChild(h3);
    container.appendChild(div);

    new Dygraph(div, data, {
      labels:     ['time', sig + ' (ref)', sig + ' (sim)', 'rel. err'],
      colors:     ['#1a73e8', '#e8700a', '#b0b0b0'],
      series: {
        'rel. err': { axis: 'y2', strokeWidth: 1 }
      },
      axes: {
        y:  { axisLabelWidth: 70 },
        y2: {
          independentTicks: true,
          axisLabelFormatter: function (v) {
            return (v * 100).toPrecision(3) + '%';
          },
          valueFormatter: function (v) {
            return (v * 100).toPrecision(4) + '%';
          }
        }
      },
      y2label:           'Relative Error',
      xlabel:            'time',
      legend:            'always',
      showRangeSelector: true,
      highlightCircleSize: 3,
      strokeWidth:       2
    });
  });
}());
</script>
</body>
</html>