2sxc-app-graphjs/_List.cshtml at main · rockgobo/2sxc-app-graphjs · 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
119
120
121
122
123
124
125
126
127
@inherits Custom.Hybrid.Razor12
@using ToSic.Razor.Blade;
@* This inherits statement gets you features like App, CmsContext, Data etc. - you can delete this comment *@

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

@{
    var id = 1;
}

<div class="overview">
@foreach(var data in AsList(Data)) {
    var chartId = id++;
    var classSelector = "data__visualisation--" + chartId;

    var labels_variable = "labels_" + chartId;
    var data_variable = "data_" + chartId;
    var first_dataset = true;

    <div @Edit.TagToolbar(data) class="data">
        <h2 class="h2-black">@data.Name</h2>
        <div class="data__description">@Html.Raw(data.Description)</div>

        <h3 class="h3-black">Datasets</h3>
        <ul class="mt-element">
          @foreach(var dataset in data.Datasets) {
            <li @Edit.TagToolbar(dataset)>
              <small>@dataset.Label</small>
            </li>
          }
        </ul>
        <a class="lifbi-button-primary" onclick="showChart('.@classSelector')">Zeige an</a>
        <div class="data__visualisation @classSelector">
            <canvas id="chart_@chartId"></canvas>
        </div>


    </div>

    <script>


  //Versuch die Datasets in eigene Referenzobjekte zu packen.
    const data_@chartId = {
      labels:  @Html.Raw(data.Labels),
      datasets: [
          @foreach(var dataset in data.Datasets)  {
            var dataString = "";
            if(!first_dataset) { dataString += ","; }
            first_dataset = false;

            dataString += "{label: '" + dataset.Label.ToString() +"'";
            dataString += ", data: " + dataset.Data.ToString();
            dataString += ", backgroundColor: '" + dataset.backgroundColor.ToString()+"'";
            dataString += ", borderColor: '" + dataset.borderColor.ToString()+"'";
            dataString += ", borderWidth: " + dataset.borderWidth.ToString() +"}";

            @Html.Raw(dataString)
          }
      ]
    };


    const config_@chartId = {
      type: '@data.ChartType',
      data: data_@chartId,

      @{
        var optionsString = "options: {";
        if(data.showTitle != null && data.showTitle) {
          optionsString += "plugins: { title: { display: true, fontFamily: '"+ data.fontFamily +"', fontSize: 24, text: '" + data.Name +"' }},";
        }
        if(data.responsive == null || data.responsive) {
          optionsString += "responsive: true,";
        }
        else{
          optionsString += "responsive: false,";
        }
        if(data.maintainAspectRatio == null || data.maintainAspectRatio) {
          optionsString += "maintainAspectRatio: true,";
        }
        else{
          optionsString += "maintainAspectRatio: false,";
        }
        optionsString += "}";
      }

      @Html.Raw(optionsString)
    }

    let myChart_@chartId = new Chart(
      document.getElementById('chart_@chartId'),
      config_@chartId
    );
  </script>
}
</div>

<div id="charts" class="mt-content">

</div>

<script>
    var showChart = function(selector) {
        $('.data__visualisation').hide();
        $('#charts').append( $(selector) );
        $(selector).toggle();
    }
</script>


<style>
.overview {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 50px;
}

.data__visualisation {
    display: none;
}

.data__description {
  hyphens: auto;
  text-align: justify
}
</style>