home.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637
  1. {% extends 'base.html' %}
  2. {% load humanize %}
  3. {% block content %}
  4. {% if user.playlists.all.count == 0 %}
  5. <div class="alert alert-success" role="alert">
  6. <h4 class="alert-heading">It's empty in here</h4>
  7. <p>
  8. There's no playlists in your UnTube right now. You can change that by heading over to <a href="{% url 'manage_playlists' %}" class="btn btn-sm btn-primary">Manage</a> to import some public playlists into your UnTube.
  9. {% if not user.profile.imported_yt_playlists %}
  10. Or you could always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary">Profile</a> to import all of your public/private YouTube playlists.
  11. {% else %}
  12. Keep in mind that your own YouTube playlists will automatically be imported into UnTube.
  13. {% endif %}
  14. </p>
  15. </div>
  16. {% endif %}
  17. {% if import_successful %}
  18. <br>
  19. <br>
  20. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  21. <h1>Welcome to UnTube, {{ user.username|capfirst }}</h1>
  22. </div>
  23. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  24. <h2>{{ user.playlists.all.count }} playlists from YouTube have been successfully imported.</h2>
  25. </div>
  26. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  27. <h3>You'll now be notified on the Dashboard whenever there's any new un-exported playlists on YouTube :)</h3>
  28. </div>
  29. <div class="d-flex justify-content-center pt-3 pb-2 mb-3">
  30. <a href="{% url 'home' %}" class="btn btn-lg btn-success">Go to Dashboard</a>
  31. </div>
  32. {% else %}
  33. {% if user.profile.imported_yt_playlists %}
  34. <div hx-get="{% url 'user_playlists_updates' 'check-for-updates' %}" hx-trigger="load" hx-swap="outerHTML">
  35. </div>
  36. {% endif %}
  37. <div class="row">
  38. <div class="col-6 mb-4">
  39. <div class="card bg-transparent text-dark">
  40. <div class="card-body">
  41. <h6 class="d-flex align-items-center mb-3"><span class="text-warning me-2">{{ user.playlists.count }}</span>Playlists Statistics{% if user.playlists.count == 0 %}: You have no playlists in your UnTube!{% endif %}</h6>
  42. <div class="d-flex align-items-center mb-3">
  43. <canvas id="overall-playlists-distribution" data-url="{% url 'overall_playlists_distribution' %}">
  44. </canvas>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. <div class="col-6 mb-4">
  50. <div class="card bg-transparent text-dark">
  51. <div class="card-body">
  52. <h6 class="d-flex align-items-center mb-3"><span class="text-warning me-2">{{ watching.count }}</span>
  53. {% if watching.count > 0 %}
  54. Playlist{% if watching.count > 1 %}s{% endif %} Watching: Percent Complete Chart
  55. <small> <a class="btn btn-sm btn-success ms-2" href="#continue-watching">View</a></small>
  56. {% else %}
  57. Watching: Mark playlists as watching to view their completeness % here!
  58. {% endif %}
  59. </h6>
  60. <div class="d-flex align-items-center mb-3">
  61. <canvas id="watching-playlists-percent-distribution" data-url="{% url 'watching_playlists_percent_distribution' %}">
  62. </canvas>
  63. </div>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="row" ><!--data-masonry='{"percentPosition": true }'-->
  69. <div class="col-sm-6 col-lg-4 mb-4">
  70. <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg %}gradient-bg-3{% else %}bg-dark{% endif %} rounded-5 shadow-lg" style="">
  71. <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
  72. <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
  73. <a href="{% url 'all_playlists' 'all' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
  74. All Playlists</a>
  75. </h2>
  76. <ul class="d-flex list-unstyled mt-auto">
  77. <li class="me-auto">
  78. <h3>
  79. <i class="fas fa-mountain fa-lg" style="color: #e26f94"></i>
  80. </h3>
  81. </li>
  82. </ul>
  83. </div>
  84. </div>
  85. </div>
  86. <div class="col-sm-6 col-lg-4 mb-4">
  87. <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg %}gradient-bg-3{% else %}bg-dark{% endif %} rounded-5 shadow-lg" style="">
  88. <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
  89. <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
  90. <a href="{% url 'playlist' 'LL' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
  91. Liked Videos
  92. </a>
  93. </h2>
  94. <ul class="d-flex list-unstyled mt-auto">
  95. <li class="me-auto">
  96. <h3>
  97. <i class="fas fa-thumbs-up fa-lg" style="color: #0090ff"></i>
  98. </h3>
  99. </li>
  100. </ul>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="col-sm-6 col-lg-4 mb-4">
  105. <div class="card card-cover h-100 overflow-hidden text-white {% if not user.profile.enable_gradient_bg %}gradient-bg-3{% else %}bg-dark{% endif %} rounded-5 shadow-lg" style="">
  106. <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
  107. <h2 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">
  108. <a href="{% url 'favorites' %}" class="stretched-link" style="text-decoration: none; color: #fafafa">
  109. Your Favorites
  110. </a>
  111. </h2>
  112. <ul class="d-flex list-unstyled mt-auto">
  113. <li class="me-auto">
  114. <h3>
  115. <i class="fas fa-star fa-lg" style="color: #dbcc47"></i>
  116. </h3>
  117. </li>
  118. </ul>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- FULL IMAGE CARD: might be useful
  123. <div class="col-sm-6 col-lg-4 mb-4">
  124. <div class="card">
  125. <svg class="bd-placeholder-img card-img" width="100%" height="260" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Card image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Card image</text></svg>
  126. </div>
  127. </div>
  128. -->
  129. </div>
  130. <br>
  131. <div class="row text-dark mt-0 align-items-center">
  132. <div class="col">
  133. <div class="card bg-transparent text-dark">
  134. <div class="card-body">
  135. <h6 class="d-flex align-items-center mb-3">A total of <span class="text-warning me-1 ms-1" id="num-channels">{{ channels.count|intword|intcomma }} channels</span> and <span class="text-warning ms-1 me-1" id="num-channels"> {{ videos.count|intword|intcomma }} videos</span> found in your UnTube collection</h6>
  136. <div class="d-flex align-items-center mb-3">
  137. <canvas id="overall-channels-distribution" data-url="{% url 'overall_channels_distribution' %}">
  138. </canvas>
  139. </div>
  140. </div>
  141. </div>
  142. <!-- Implement later
  143. <div class="row mt-3">
  144. <div class="col">
  145. </div>
  146. <div class="col-6">
  147. <div class="card">
  148. <a style="background: linear-gradient(-45deg, #e2b968, #68af5b, #8a97bc, #d69ab2); background-size: 400% 400%; animation: gradient 7s ease infinite;" href="#" class="list-group-item list-group-item-action" aria-current="true">
  149. <div class="card-body">
  150. <div class="d-flex justify-content-center h1">
  151. <i class="fas fa-history"></i>
  152. </div>
  153. <div class="d-flex justify-content-center h1">
  154. YOUR
  155. </div>
  156. <div class="d-flex justify-content-center h1">
  157. ACTIVITY
  158. </div>
  159. </div>
  160. </a>
  161. </div>
  162. </div>
  163. <div class="col">
  164. </div>
  165. </div>
  166. -->
  167. </div>
  168. <div class="col">
  169. <div class="card bg-transparent border border-0 text-black">
  170. <div class="card-body">
  171. <h3><span style="border-bottom: 3px #a35a5a dashed;">Most viewed playlists</span> <a href="{% url 'all_playlists' 'all' %}" class="pt-1"><i class="fas fa-binoculars"></i> </a></h3>
  172. {% if user_playlists %}
  173. <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
  174. {% for playlist in user_playlists|slice:"0:3" %}
  175. <div class="col">
  176. <div class="card overflow-auto" style="background-color: #4790c7;">
  177. <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
  178. <div class="card-body">
  179. <h5 class="card-title">
  180. #{{ forloop.counter }} <br><br>{{ playlist.name }}
  181. {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
  182. {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
  183. </h5>
  184. <small>
  185. <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
  186. <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
  187. <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
  188. </small>
  189. </div>
  190. </a>
  191. </div>
  192. </div>
  193. {% endfor %}
  194. </div>
  195. {% else %}
  196. <br>
  197. <h5>Nothing to see here... yet.</h5>
  198. {% endif %}
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. <br>
  204. {% if watching %}
  205. <div class="d-flex justify-content-between" id="continue-watching">
  206. <h3>
  207. <span style="border-bottom: 3px #e24949 dashed;">Continue Watching</span>
  208. <i class="fas fa-fire-alt ms-2" style="color: #d24646"></i>
  209. </h3>
  210. {% if watching.count > 5 %}
  211. <h3 class="ms-2 me-1">
  212. <a href="{% url 'all_playlists' 'watching' %}" style="text-decoration: none; color: #4675d2">
  213. <i class="fas fa-search" style="color: #4675d2"></i>
  214. </a>
  215. </h3>
  216. {% endif %}
  217. </div>
  218. <br>
  219. {% if watching.count > 4 %}
  220. <div class="container-fluid overflow-auto border border-5 rounded-3 border-primary p-3">
  221. <div class="row flex-row g-3 flex-nowrap">
  222. {% for playlist in watching %}
  223. <div class="col">
  224. <div class="card" style="background-color: #EFEFEF; width: 275px; height: auto">
  225. <img class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px; object-fit: cover;" alt="{{ playlist.name }} thumbnail">
  226. <div class="card-body">
  227. <h5 class="card-title"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: black">{{ playlist.name }}</a></h5>
  228. <p class="card-text">
  229. <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
  230. {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
  231. </p>
  232. <!--
  233. <p class="card-text">
  234. {% if playlist.tags.all %}
  235. <small>
  236. <i class="fas fa-tags fa-sm" style="color: black"></i>
  237. {% for tag in playlist.tags.all %}
  238. <span class="badge rounded-pill bg-primary mb-lg-1">
  239. {{ tag.name }}
  240. </span>
  241. {% endfor %}
  242. </small>
  243. {% endif %}
  244. </p>
  245. -->
  246. <p class="card-text"><small class="text-muted">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
  247. </div>
  248. </div>
  249. </div>
  250. <!--
  251. <div class="col">
  252. <div class="card">
  253. <a style="background-color: #7e89c2;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
  254. <div class="card-body">
  255. <h5 class="card-title">
  256. {{ playlist.name }}
  257. {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
  258. {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
  259. </h5>
  260. <p class="card-text">
  261. <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
  262. {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
  263. </p>
  264. {% if playlist.tags.all %}
  265. <small>
  266. <i class="fas fa-tags fa-sm" style="color: yellow"></i>
  267. {% for tag in playlist.tags.all %}
  268. <span class="badge rounded-pill bg-primary mb-lg-1">
  269. {{ tag.name }}
  270. </span>
  271. {% endfor %}
  272. </small>
  273. {% endif %}
  274. </div>
  275. </a>
  276. </div>
  277. </div> -->
  278. <!--
  279. {% if forloop.counter == 3 %}
  280. {% if watching.count|add:"-3" != 0 %}
  281. <div class="col">
  282. <div class="card">
  283. <a style="background-color: #7e89c2;" href="{% url 'all_playlists' 'watching' %}" class="list-group-item list-group-item-action" aria-current="true">
  284. <div class="card-body">
  285. <p class="card-text">
  286. <h3>+ {{ watching.count|add:"-3" }} more</h3>
  287. </p>
  288. </div>
  289. </a>
  290. </div>
  291. </div>
  292. {% endif %}
  293. {% endif %}
  294. -->
  295. {% endfor %}
  296. </div>
  297. </div>
  298. {% else %}
  299. <div class="container-fluid overflow-auto border border-5 rounded-3 border-primary pb-4">
  300. <div class="row row-cols-1 row-cols-md-4 g-4 text-dark mt-0">
  301. {% for playlist in watching %}
  302. <div class="col">
  303. <div class="card" style="background-color: #EFEFEF;">
  304. <img class="bd-placeholder-img card-img-top" src="{{ playlist.thumbnail_url }}" style="max-width:100%; height: 200px; object-fit: cover;" alt="{{ playlist.name }} thumbnail">
  305. <div class="card-body">
  306. <h5 class="card-title"><a href="{% url 'playlist' playlist.playlist_id %}" class="stretched-link" style="text-decoration: none; color: black">{{ playlist.name }}</a></h5>
  307. <p class="card-text">
  308. <span class="badge bg-{% if playlist.get_watch_time_left == "0secs." %}success{% else %}primary{% endif %} text-white">{{ playlist.get_watched_videos_count }}/{{ playlist.get_watchable_videos_count }} viewed</span>
  309. {% if playlist.get_watch_time_left != "0secs." %}<span class="badge bg-dark text-white">{{ playlist.get_watch_time_left }} left</span>{% endif %}
  310. </p>
  311. <p class="card-text"><small class="text-muted">Last watched {{ playlist.last_watched|naturaltime }}</small></p>
  312. </div>
  313. </div>
  314. </div>
  315. {% endfor %}
  316. </div>
  317. </div>
  318. {% endif %}
  319. <br>
  320. {% endif %}
  321. <br>
  322. <div class="row text-dark mt-0 d-flex justify-content-evenly">
  323. <div class="col">
  324. <h3><span style="border-bottom: 3px #e24949 dashed;">Recently Added</span> <i class="fas fa-plus-square" style="color:#972727;"></i></h3>
  325. {% if recently_added_playlists %}
  326. <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
  327. {% for playlist in recently_added_playlists %}
  328. <div class="col">
  329. <div class="card overflow-auto" style="background-color: #958a44;">
  330. <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
  331. <div class="card-body">
  332. <h5 class="card-title">
  333. {{ playlist.name }}
  334. {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
  335. {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
  336. </h5>
  337. <small>
  338. <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
  339. <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
  340. <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
  341. </small>
  342. </div>
  343. </a>
  344. </div>
  345. </div>
  346. {% endfor %}
  347. </div>
  348. {% else %}
  349. <br>
  350. <h5>You have no playlists ;-;</h5>
  351. {% endif %}
  352. </div>
  353. <div class="col">
  354. <h3><span style="border-bottom: 3px #e24949 dashed;">Recently Accessed</span> <i class="fas fa-redo fa-sm" style="color: #3c3fd2"></i></h3>
  355. {% if recently_accessed_playlists %}
  356. <div class="row row-cols-1 row-cols-md-3 g-4 text-dark mt-0">
  357. {% for playlist in recently_accessed_playlists %}
  358. <div class="col">
  359. <div class="card overflow-auto" style="background-color: #357779;">
  360. <a href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item bg-transparent list-group-item-action" aria-current="true">
  361. <div class="card-body">
  362. <h5 class="card-title">
  363. {{ playlist.name }}
  364. {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
  365. {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
  366. </h5>
  367. <small>
  368. <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
  369. <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
  370. <span class="badge bg-secondary rounded-pill">{{ playlist.num_of_accesses }} clicks </span>
  371. </small>
  372. </div>
  373. </a>
  374. </div>
  375. </div>
  376. {% endfor %}
  377. </div>
  378. {% else %}
  379. <br>
  380. <h5>Nothing to see here... yet.</h5>
  381. {% endif %}
  382. </div>
  383. </div>
  384. <br>
  385. <br>
  386. <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  387. <script type="application/javascript">
  388. $(function () {
  389. var $overallPlaylists = $("#overall-playlists-distribution");
  390. $.ajax({
  391. url: $overallPlaylists.data("url"),
  392. success: function (data) {
  393. var ctx = $overallPlaylists[0].getContext("2d");
  394. var coloR = [];
  395. var dynamicColors = function() { // generate random color
  396. var r = Math.floor(Math.random() * 255);
  397. var g = Math.floor(Math.random() * 255);
  398. var b = Math.floor(Math.random() * 255);
  399. return "rgb(" + r + "," + g + "," + b + ")";
  400. };
  401. for (var i in data.labels) {
  402. if (data.labels)
  403. coloR.push(dynamicColors());
  404. }
  405. new Chart(ctx, {
  406. type: 'pie',
  407. data: {
  408. labels: data.labels,
  409. datasets: [{
  410. label: 'Playlist Types',
  411. backgroundColor: coloR,
  412. data: data.data
  413. }]
  414. },
  415. options: {
  416. responsive: true,
  417. legend: {
  418. position: 'right',
  419. display: true
  420. },
  421. title: {
  422. display: false,
  423. text: 'Video Count Distribution per Channel',
  424. fontSize: 20,
  425. fontColor: '#fff',
  426. },
  427. tooltips: {
  428. callbacks: {
  429. label: function(tooltipItem, object) {
  430. return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + ' playlists';
  431. }
  432. }
  433. }
  434. }
  435. });
  436. }
  437. });
  438. var $watchingPlaylists = $("#watching-playlists-percent-distribution");
  439. $.ajax({
  440. url: $watchingPlaylists.data("url"),
  441. success: function (data) {
  442. var ctx = $watchingPlaylists[0].getContext("2d");
  443. var coloR = [];
  444. var dynamicColors = function() { // generate random color
  445. var r = Math.floor(Math.random() * 255);
  446. var g = Math.floor(Math.random() * 255);
  447. var b = Math.floor(Math.random() * 255);
  448. return "rgb(" + r + "," + g + "," + b + ")";
  449. };
  450. for (var i in data.labels) {
  451. if (data.labels)
  452. coloR.push(dynamicColors());
  453. }
  454. new Chart(ctx, {
  455. type: 'polarArea',
  456. data: {
  457. labels: data.labels,
  458. datasets: [{
  459. label: 'Playlist Types',
  460. backgroundColor: coloR,
  461. data: data.data
  462. }]
  463. },
  464. options: {
  465. scale: {
  466. reverse: false,
  467. ticks: {
  468. min: -10,
  469. max: 100,
  470. interval: 10,
  471. }
  472. },
  473. responsive: true,
  474. legend: {
  475. position: 'right',
  476. display: {% if watching.count <= 10 %}true{% else %}false{% endif %},
  477. },
  478. title: {
  479. display: false,
  480. },
  481. tooltips: {
  482. callbacks: {
  483. label: function(tooltipItem, object) {
  484. return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + '% complete';
  485. }
  486. }
  487. }
  488. }
  489. });
  490. }
  491. });
  492. var $overallChannels = $("#overall-channels-distribution");
  493. $.ajax({
  494. url: $overallChannels.data("url"),
  495. success: function (data) {
  496. var ctx = $overallChannels[0].getContext("2d");
  497. var coloR = [];
  498. var dynamicColors = function() { // generate random color
  499. var r = Math.floor(Math.random() * 255);
  500. var g = Math.floor(Math.random() * 255);
  501. var b = Math.floor(Math.random() * 255);
  502. return "rgb(" + r + "," + g + "," + b + ")";
  503. };
  504. for (var i in data.labels) {
  505. if (data.labels)
  506. coloR.push(dynamicColors());
  507. }
  508. new Chart(ctx, {
  509. type: 'pie',
  510. data: {
  511. labels: data.labels,
  512. datasets: [{
  513. label: 'Channel',
  514. backgroundColor: coloR,
  515. data: data.data
  516. }]
  517. },
  518. options: {
  519. responsive: true,
  520. legend: {
  521. position: 'right',
  522. display: false
  523. },
  524. title: {
  525. display: false,
  526. text: 'Video Count Distribution per Channel',
  527. fontSize: 20,
  528. fontColor: '#fff',
  529. },
  530. tooltips: {
  531. callbacks: {
  532. label: function(tooltipItem, object) {
  533. return object['labels'][tooltipItem['index']] + ": " + object['datasets'][0]['data'][tooltipItem['index']] + ' videos';
  534. }
  535. }
  536. }
  537. }
  538. });
  539. }
  540. });
  541. });
  542. </script>
  543. {% endif %}
  544. {% endblock %}