ideabox/index.html at main · code4fukui/ideabox · 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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">

<h1>デジタル庁アイデアボックスダッシュボード</h1>

<div id=container>
<div>
  <a href=https://digital-agency.ideabox.cloud/users>
  <svg id="gauge1"></svg>
  <div>参加者数</div>
  </a>
</div>
<div>
  <a href=https://digital-agency.ideabox.cloud/ideas>
  <svg id="gauge2"></svg>
  <div>アイデア数</div>
  </a>
</div>
<div>
  <a href=https://digital-agency.ideabox.cloud/comments>
  <svg id="gauge3"></svg>
  <div>コメント数</div>
  </a>
</div>
</div>


<div class="search">
  <a href=https://code4fukui.github.io/ideabox/search.html>アイデアボックスサーチ</a><br>
</div>
<div class="search">
  <a href=https://code4fukui.github.io/ideabox/gacha.html>アイデアボックスガチャ</a><br>
</div><br>

<a href=https://digital-agency.ideabox.cloud/>
<!--<img src=fukuidx.png><br>-->
「デジタル庁アイデアボックス | アイデアボックス」
</a>

<hr>
App: CC BY <a href=https://github.com/code4fukui/ideabox>Code for FUKUI src on GitHub</a><br>
API: <a href=https://automation.jp/>株式会社自動処理</a><br>

<style>
body {
  text-align: center;
}
img {
  width: 70vw;
}
#container div {
  display: inline-block;
  text-align: center;
}
#container div div {
  font-size: 3vw;
  margin: 1vw;
}
.search {
  display: inline-block;
  background-color: #cef;
  padding: 1em 3em;
  font-size: 130%;
  margin: 1em;
}
svg {
  display: block;
  width: 30vw;
  height: 30vw;
}
a {
  color: #222 !important;
}
</style>

<script type="module">
import liquidFillGauge from "https://code4fukui.github.io/liquidFillGauge/liquidFillGauge.js";

const cr = (tag, parent) => {
  const c = document.createElement(tag);
  parent.appendChild(c);
  return c;
};

onload = async () => {
  const url = "https://digital-agency-api.ideabox.cloud/v1/statistics";
  const data = await (await fetch(url)).json();
  console.log(data);
  const value = [data.data.user_count, data.data.idea_count, data.data.comment_count];
  let cnt = 1;
  const calcMax = () => {
    let min = 100;
    let max = 100;
    for (const v of value) {
      max = max > v ? max : v;
      min = min < v ? min : v;
    }
    //return Math.pow(10, Math.floor(Math.log10(max) + 1));
    return Math.pow(10, Math.floor(Math.log10(min) + 1));
  };
  const max = calcMax();
  console.log(max)
  for (let i = 1; i <= 3; i++) {
    const conf = liquidFillGauge.default();
    const h = i * 30;
    conf.circleColor = `hsl(${h} 50% 50%)`;
    conf.textColor = conf.circleColor;
    conf.waveTextColor = `hsl(${h} 50% 90%)`;
    conf.waveColor = `hsl(${h} 50% 50%)`;
    conf.displayPercent = false;
    conf.maxValue = max
    conf.waveCount = 2;
    conf.circleThickness = 0.1;
    conf.waveAnimateTime = 2400;
    liquidFillGauge.load("gauge" + cnt++, value[i - 1], conf);
  }
  setTimeout(() => location.reload(), 10 * 60 * 1000); // 10分でリロード
};
</script>
</body>
</html>