-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
935 lines (865 loc) · 94.3 KB
/
index.html
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Generate your own Go90 Scale of Doomed Streaming Services. Who is about to Go 90?" />
<meta name="keywords" content="media, streaming services, netflix, disney+, hulu, hbo, max, apple tv+, verge, vergecast" />
<meta name="author" content="Leo Herzog | herzog.tech" />
<meta name="theme-color" content="#1f212d" />
<link href="/manifest.webmanifest" rel="manifest" />
<link href="/favicon.ico" rel="icon" />
<link href="/img/go90-icon-1x.png" rel="icon" type="image/png" sizes="128x128" />
<link href="/img/go90-icon-2x.png" rel="icon" type="image/png" sizes="256x256" />
<link href="/img/go90-icon-3x.png" rel="icon" type="image/png" sizes="512x512" />
<link href="/img/go90-icon-1x.png" rel="apple-touch-icon" type="image/png" sizes="128x128" />
<link href="/img/go90-icon-2x.png" rel="apple-touch-icon" type="image/png" sizes="256x256" />
<link href="/img/go90-icon-3x.png" rel="apple-touch-icon" type="image/png" sizes="512x512" />
<meta name="msapplication-TileColor" content="#1f212d" />
<meta name="msapplication-TileImage" content="/img/go90-icon-2x.png" />
<meta property="og:image" content="/img/social.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://go90scaleofdoomedstreaming.services/" />
<meta property="og:title" content="The Go90 Scale of Doomed Streaming Services" />
<meta property="og:description" content="Generate your own Go90 Scale of Doomed Streaming Services. Who is about to Go 90?" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@xd1936" />
<meta name="twitter:title" content="The Go90 Scale of Doomed Streaming Services" />
<meta name="twitter:description" content="Generate your own Go90 Scale of Doomed Streaming Services. Who is about to Go 90?" />
<meta name="twitter:image" content="/img/social.png" />
<title>The Go90 Scale of Doomed Streaming Services</title>
<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
<script src="https://kit.fontawesome.com/1591ea6353.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css" /> -->
<style>
:root {
--primary-blue: #00bddb;
--primary-green: #38ad3a;
--primary-yellow: #e5aa00;
--primary-orange: #ed801c;
--primary-red: #d21f1d;
--primary-pink: #df4179;
--midnight-blue: #15171e;
--navy: #1a1c25;
--cool-blue: #1f212d;
--grey-blue: #2d303d;
--steely-blue: #3e4455;
--smog: #5b5d67;
--slate-grey: #757783;
--soot-grey: #33363d;
--karl-the-fog: #8f909a;
--dust: #dddddd;
--cloud: #f1f1f1;
}
svg > text {
cursor: default;
}
tr:last-child td {
border-bottom: none;
}
main {
max-width: 1600px;
}
#cards {
/* width: 100vw; */
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
}
#chartCard {
width: 100%;
max-width: 720px;
}
#chart {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
min-width: 300px;
}
#chartButtons {
display: flex;
justify-content: space-evenly;
align-items: center;
}
#servicesCard {
width: 100%;
max-width: 500px;
}
#addService {
max-width: 100%;
}
@media screen and (max-width: 1280px) {
article {
width: 100%;
}
#cards {
flex-direction: column;
align-items: center;
}
#chart {
min-width: 320px;
}
}
</style>
<style id="brandColors"></style>
</head>
<body>
<div style="position: absolute; top: 0px; left: 8px; cursor: pointer">
<span id="theme" style="font-size: 16px" aria-label="Toggle light and dark mode">🌙</span>
</div>
<div style="position: absolute; top: 0px; right: 8px">
<a href="https://github.com/leoherzog/Go90" class="contrast" aria-label="The Go90 GitHub repository">
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="24px">
<path
fill="var(--pico-primary)"
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path>
</svg>
</a>
</div>
<hgroup style="margin: 24px">
<h1 style="margin-bottom: 16px">The Go90 Scale of Doomed Streaming Services</h1>
<details>
<summary>wtf does this mean?</summary>
<p>
<a href="https://en.wikipedia.org/wiki/Go90#Demise" target="_blank">go90</a> was a failed streaming service by Verizon from 2015–2018. <a href="https://www.theverge.com/the-vergecast" target="_blank">The Vergecast</a>, the flagship podcast of
<a href="https://www.theverge.com/" target="_blank">The Verge</a>, has a recurring joke based on this story. Each streaming service is given a rating between 0, meaning "no chance of going away any time soon", and 89, or "about to be shut down". Once a service is discontinued, it is said
to have "gone 90".
</p>
<p>
<a href="https://www.theverge.com/2022/12/14/23508908/the-streaming-world-is-rapidly-changing" target="_blank"><button>Listen to a Vergecast Episode about the Go90 Scale</button></a>
</p>
<p>How likely do <em>you</em> think these services are to go away soon?</p>
</details>
</hgroup>
<main class="container-fluid">
<div id="cards">
<article id="chartCard">
<figure id="chart"></figure>
<footer id="chartButtons">
<button id="downloadPNG"><span class="fa-solid fa-download">⭳</span> PNG</button>
<button id="downloadSVG"><span class="fa-solid fa-download">⭳</span> SVG</button>
<button id="copyAltText"><span class="fa-solid fa-copy">⎘</span> <span id="copyAltTextLabel">Copy Alt Text</span></button>
</footer>
</article>
<article id="servicesCard">
<header>
<input type="text" id="chartTitle" placeholder="Chart Title (Optional)" />
<fieldset>
<input type="checkbox" id="numbersToggle" name="numbersToggle" />
<label htmlFor="numbersToggle">Score Circles</label>
<input type="checkbox" id="labelIconsToggle" name="labelIconsToggle" checked />
<label htmlFor="labelIconsToggle">Label Icons</label>
<input type="checkbox" id="keyToggle" name="keyToggle" />
<label htmlFor="keyToggle">Key</label>
</fieldset>
</header>
<figure>
<table>
<tbody id="services"></tbody>
</table>
</figure>
<footer>
<fieldset role="group">
<button id="resetToStreamingServices">Reset to Streaming Services</button>
<button id="resetToSocialMediaServices">Reset to Social Media Services</button>
</fieldset>
<details>
<summary>Add Another Service</summary>
<form id="addService">
<label for="name">Service Name</label>
<input type="text" id="name" />
<label for="logo">Logo</label>
<input type="file" id="logo" accept="image/png, image/jpeg, image/bmp, image/gif" />
<label for="color">Color</label>
<input type="color" id="color" />
<input type="submit" id="submit" value="Add Service" disabled />
</form>
</details>
</footer>
</article>
</div>
</main>
<script>
const services = document.getElementById('services');
const width = 1000;
const height = 1000;
const padding = 80;
const radius = Math.min(width, height) / 2 - padding;
const rootStyle = getComputedStyle(document.documentElement);
const primaryColor = rootStyle.getPropertyValue('--dust').trim();
const accentColor = rootStyle.getPropertyValue('--cool-blue').trim();
const steelyBlue = rootStyle.getPropertyValue('--steely-blue').trim();
const dust = rootStyle.getPropertyValue('--dust').trim();
var svg;
var logos;
// runs on pageload
// builds the chart, sets it to default to streaming services, and sets up event listeners
function pageLoad() {
buildChart();
resetToStreamingServices();
document.getElementById('downloadPNG').addEventListener('click', function () {
const image = getChartAsPNG(padding);
image.onload = function () {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, image.width, image.height);
const DOMURL = window.URL || window.webkitURL || window;
DOMURL.revokeObjectURL(image.src);
const imgURI = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
const a = document.createElement('a');
a.download = 'go90.png';
a.href = imgURI;
a.click();
a.remove();
};
});
document.getElementById('downloadSVG').addEventListener('click', function () {
let blob = getChartAsSVGBlob();
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'go90.svg';
a.click();
a.remove();
});
document.getElementById('copyAltText').addEventListener('click', function () {
let clipboardText = this.getAttribute('data-clipboard-text');
navigator.clipboard.writeText(clipboardText).then(() => {
document.getElementById('copyAltTextLabel').innerText = 'Copied!';
setTimeout(() => {
document.getElementById('copyAltTextLabel').innerText = 'Copy Alt Text';
}, 2000);
});
});
document.getElementById('chartTitle').addEventListener('input', function () {
document.getElementById('chart-title').innerHTML = this.value;
});
document.getElementById('numbersToggle').addEventListener('change', function () {
Array.from(document.getElementsByClassName('service-value')).forEach((x) => {
x.style.display = this.checked ? 'block' : 'none';
});
});
document.getElementById('labelIconsToggle').addEventListener('change', function () {
document.getElementById('zero-label').innerHTML = this.checked ? '♾️' : '0';
document.getElementById('ninety-label').innerHTML = this.checked ? '🪦' : '90';
});
document.getElementById('keyToggle').addEventListener('change', function () {
document.getElementById('key').style.display = this.checked ? 'block' : 'none';
});
document.getElementById('name').addEventListener('input', validateAddServiceForm);
document.getElementById('logo').addEventListener('input', validateAddServiceForm);
document.getElementById('logo').addEventListener('change', validateAddServiceForm);
document.getElementById('color').addEventListener('input', validateAddServiceForm);
document.getElementById('addService').addEventListener('submit', function (event) {
event.preventDefault();
addNewService();
});
document.getElementById('resetToStreamingServices').addEventListener('click', resetToStreamingServices);
document.getElementById('resetToSocialMediaServices').addEventListener('click', resetToSocialMediaServices);
document.getElementById('theme').addEventListener('click', (e) => {
document.documentElement.dataset.theme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
e.srcElement.innerText = document.documentElement.dataset.theme === 'dark' ? '☀️' : '🌙';
});
}
// download function for svg
function getChartAsSVGBlob() {
var serializer = new XMLSerializer();
var source = serializer.serializeToString(document.querySelector('#chart > svg'));
if (!source.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)) {
source = source.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
}
if (!source.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)) {
source = source.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
}
source = '<?xml version="1.0"?>\r\n' + source;
return new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
}
// download function for png
function getChartAsPNG(padding) {
const DOMURL = window.URL || window.webkitURL || window;
let blob = getChartAsSVGBlob();
const url = DOMURL.createObjectURL(blob);
const image = new Image();
image.width = (width + padding) / 2 + 80;
image.height = (height + padding) / 2;
image.src = url;
return image;
}
// https://stackoverflow.com/a/41491220
function getContrastyColor(bgColor, lightColor, darkColor) {
var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
var r = parseInt(color.substring(0, 2), 16); // hexToR
var g = parseInt(color.substring(2, 4), 16); // hexToG
var b = parseInt(color.substring(4, 6), 16); // hexToB
var uicolors = [r / 255, g / 255, b / 255];
var c = uicolors.map((col) => {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
return L > 0.179 ? darkColor : lightColor;
}
// check to see if "add service" form can be submitted in its current state
function validateAddServiceForm() {
let currentServices = getCurrentServices();
const name = document.getElementById('name').value;
if (currentServices.some((x) => x.id === name.toLowerCase().replace(/[^a-z0-9]/g, ''))) {
document.getElementById('name').ariaInvalid = true;
document.getElementById('submit').disabled = true;
return;
}
document.getElementById('name').ariaInvalid = name === '';
const logo = document.getElementById('logo').value;
document.getElementById('logo').ariaInvalid = logo === '';
const color = document.getElementById('color').value;
document.getElementById('color').ariaInvalid = color === '';
document.getElementById('submit').disabled = name === '' || logo === '' || color === '';
}
// we use the DOM as the single source of truth for the current value store,
// so get those current services (enabled or not),
// make sure we have corresponding CSS colors for each of them,
// and return them
function getCurrentServices() {
let currentServices = Array.from(services.children).map((x) => ({
rowElement: x,
name: x.dataset.name,
id: x.id,
color: x.dataset.color,
enabled: x.children[0].children[0].checked,
value: parseInt(x.children[2].children[0].value, 10),
logo: x.children[1].innerHTML,
}));
currentServices.sort((a, b) => {
if (a.value === b.value) {
return a.name.localeCompare(b.name);
}
return b.value - a.value;
});
let style = document.getElementById('brandColors').sheet;
while (style.cssRules.length > 0) {
style.deleteRule(0);
}
currentServices.forEach((service) => {
style.insertRule('#enabled-' + service.id + ':checked { background-color: ' + service.color + '; border-color: ' + service.color + ' }', 0);
});
return currentServices;
}
// called via the "add new service" form so users can make their own charts
function addNewService() {
const name = document.getElementById('name').value;
const id = 'service-' + name.toLowerCase().replace(/[^a-z0-9]/g, '');
const logoInput = document.getElementById('logo');
const color = document.getElementById('color').value;
const enabled = true;
const value = Math.floor(Math.random() * (89 - 0 + 1));
let logo = '';
const file = logoInput.files[0];
const reader = new FileReader();
reader.onloadend = function () {
logo = reader.result;
let logoElement = '<img src="' + logo + '" alt="' + name + ' Logo" style="width:auto;height:20px;" data-custom="true">';
addService(name, id, color, logoElement, enabled, value);
updateChart();
document.getElementById('addService').reset();
document.getElementById('name').ariaInvalid = '';
document.getElementById('logo').ariaInvalid = '';
document.getElementById('color').ariaInvalid = '';
document.getElementById('submit').disabled = true;
};
reader.readAsDataURL(file);
}
// use d3 on an empty <figure> and build the skeleton for an empty chart svg.
function buildChart() {
// build chart base
svg = d3
.select('#chart')
.append('svg')
.attr('viewBox', [0, 0, (width + padding) / 2 + 80, (height + padding) / 2].join(' '))
.style('width', '100%')
.style('height', 'auto')
.style('max-width', width + padding + 'px')
.style('background-color', '#f9f9f9')
.style('border-radius', '16px')
.style('font-family', 'system-ui, sans-serif');
const arc = d3
.arc()
.innerRadius(0)
.outerRadius(radius)
.startAngle(-Math.PI / 2)
.endAngle(0);
svg
.append('path')
.attr('d', arc)
.attr('transform', 'translate(' + (padding + radius) + ', ' + (padding + radius) + ')')
.attr('fill', primaryColor);
// chart title
svg
.append('text')
.attr('id', 'chart-title')
.attr('x', 16)
.attr('y', padding - 48)
.attr('text-anchor', 'left')
.attr('font-size', '20px')
.attr('font-weight', 'bold')
.attr('fill', 'black');
// chart labels
svg
.append('text')
.attr('id', 'zero-label')
.attr('x', padding - 40)
.attr('y', padding + radius + 8)
.text(document.getElementById('labelIconsToggle').checked ? '♾️' : '0');
svg
.append('text')
.attr('id', 'ninety-label')
.attr('x', padding + radius - 12)
.attr('y', padding - 20)
.text(document.getElementById('labelIconsToggle').checked ? '🪦' : '90');
svg
.append('text')
.attr('id', 'source')
.attr('x', padding + radius)
.attr('y', padding + radius + 10)
.attr('text-anchor', 'end')
.attr('font-size', '10px')
.attr('fill', 'black')
.text('go90.services')
.on('click', function () {
window.open('https://go90.services', '_blank');
})
.style('cursor', 'pointer');
// tick marks
for (let i = 5; i <= 85; i += 5) {
const angle = (i / 90) * (Math.PI / 2) - Math.PI / 2;
const outerX = padding + radius + radius * Math.sin(angle);
const outerY = padding + radius - radius * Math.cos(angle);
const innerRadius = radius - (i % 10 === 0 ? 10 : 5) - 4;
const innerX = padding + radius + innerRadius * Math.sin(angle);
const innerY = padding + radius - innerRadius * Math.cos(angle);
svg
.append('line')
.attr('x1', outerX)
.attr('y1', outerY)
.attr('x2', innerX)
.attr('y2', innerY)
.attr('stroke', accentColor)
.attr('stroke-width', i % 10 === 0 ? 2 : 0.5);
}
resetToStreamingServices();
}
// remove the current services and re-add them
function updateChart() {
// get the current services and their values from the dom
let currentServices = getCurrentServices();
// define a drag behavior that we'll assign each service group on the chart
const drag = d3
.drag()
.on('start', function (event, d) {
d3.select(this).raise().classed('active', true);
initialMousePosition = { x: event.x, y: event.y };
})
.on('drag', function (event, d) {
const movementX = event.x - initialMousePosition.x;
const movementY = event.y - initialMousePosition.y;
let change = Math.round((movementX - movementY) / 10);
d.value = Math.max(0, Math.min(89, d.value + change));
document.getElementById('value-' + d.id).value = Math.round(d.value);
document.getElementById('value-' + d.id).dispatchEvent(new Event('change'));
const newAngle = (d.value / 90) * (Math.PI / 2) - Math.PI / 2;
const newX = padding + radius + radius * Math.sin(newAngle);
const newY = padding + radius - radius * Math.cos(newAngle);
d3.select(this).attr('cx', newX).attr('cy', newY);
initialMousePosition.x = event.x;
initialMousePosition.y = event.y;
updateLogoPositions();
})
.on('end', function (event, d) {
d3.select(this).classed('active', false);
});
// remove all services
svg.selectAll('.service-group').remove();
// create a group for each service with that drag
const serviceGroups = svg
.selectAll('.service-group')
.data(currentServices, (d) => d.id)
.enter()
.append('g')
.attr('id', (d) => 'group-' + d.id)
.attr('class', 'service-group')
.style('cursor', 'pointer')
.attr('transform', (d) => {
const angle = (d.value / 90) * (Math.PI / 2) - Math.PI / 2;
const x = padding + radius + radius * Math.sin(angle);
const y = padding + radius - radius * Math.cos(angle);
return 'translate(' + x + ',' + y + ')';
})
.style('display', (d) => (d.enabled ? 'block' : 'none'))
.call(drag);
// in that group is a circle
serviceGroups
.append('circle')
.attr('r', 8)
.attr('fill', 'white')
.style('stroke', (d) => d.color)
.style('stroke-width', 3)
.style('opacity', 0.75);
// a logo image
logos = serviceGroups
.append('foreignObject')
.attr('width', 300)
.attr('height', 30)
.attr('x', 12)
.attr('y', -20)
.html((d) => d.logo);
updateLogoPositions();
// and a value number
serviceGroups
.append('text')
.attr('id', (d) => 'value-label-' + d.id)
.attr('class', 'service-value')
.attr('x', 0)
.attr('y', 3.5)
.attr('text-anchor', 'middle')
.attr('font-size', '10px')
.attr('font-weight', 'bold')
.attr('fill', 'black')
.style('display', document.getElementById('numbersToggle').checked ? 'block' : 'none')
.text((d) => d.value);
updateKey();
document.getElementById('copyAltText').setAttribute('data-clipboard-text', 'A chart in the shape of a quarter of a circle showing the likelihood of various streaming services to be shut down soon. It’s a scale of 0 to 89, with 0 on the left and 89 at the top.');
currentServices.forEach((service) => {
document.getElementById('copyAltText').setAttribute('data-clipboard-text', document.getElementById('copyAltText').getAttribute('data-clipboard-text') + ' ' + service.name + ' is rated at ' + service.value + '.');
});
}
// calculate overlap for each service logo and adjust their positions
function updateLogoPositions() {
const logoSize = 16;
const logoMargin = 5;
logos.each(function (d, i) {
const logo = d3.select(this);
const angle = (d.value / 90) * (Math.PI / 2) - Math.PI / 2;
const x = 12;
let y = -20;
for (let j = 0; j < i; j++) {
const prevLogo = logos.filter((_, k) => k === j);
const prevAngle = (prevLogo.datum().value / 90) * (Math.PI / 2) - Math.PI / 2;
const prevDistance = Math.abs(angle - prevAngle) * radius;
const prevY = prevLogo.attr('y');
if (prevDistance < logoSize + logoMargin && Math.abs(y - prevY) < logoSize + logoMargin) {
y = parseFloat(prevY) - (logoSize + logoMargin);
}
}
logo.attr('x', x).attr('y', y);
});
}
// remove and re-add the key
function updateKey() {
// remove key
svg.select('#key').remove();
// create new key
const key = svg
.append('text')
.attr('id', 'key')
.attr('x', padding + radius)
.attr('y', padding + radius + 8)
.attr('text-anchor', 'end')
.attr('font-size', '18px')
.attr('fill', 'black')
.style('display', document.getElementById('keyToggle').checked ? 'block' : 'none');
let reversedServices = getCurrentServices().slice().reverse();
reversedServices
.filter((x) => x.enabled)
.forEach((service, index) => {
key
.append('tspan')
.attr('x', padding + radius - 8)
.attr('dy', -20)
.style('fill', service.color)
.style('font-weight', 'bold')
.style('text-shadow', getContrastyColor(service.color, dust, steelyBlue) + ' 1px 1px 0px')
.html(service.name + ': ' + service.value);
});
}
// add a custom service to the chart
function addService(name, id, color, logo, enabled, value) {
let row = document.createElement('tr');
row.id = id;
row.dataset.name = name;
row.dataset.color = color;
let enabledCell = document.createElement('td');
enabledCell.style.paddingRight = '0';
let enabledCheckbox = document.createElement('input');
enabledCheckbox.type = 'checkbox';
enabledCheckbox.role = 'switch';
enabledCheckbox.checked = enabled;
enabledCheckbox.id = 'enabled-' + id;
enabledCheckbox.addEventListener('change', function (event) {
const serviceGroup = svg.select('#group-' + this.id.replace('enabled-', ''));
serviceGroup.style('display', this.checked ? 'block' : 'none');
updateChart();
});
enabledCell.appendChild(enabledCheckbox);
row.appendChild(enabledCell);
let logoCell = document.createElement('td');
logoCell.style.paddingLeft = '0';
logoCell.style.paddingBottom = '14px';
// logoCell.style.textDecoration = 'none';
logoCell.innerHTML = logo;
logoCell.title = name + ' Logo';
logoCell.dataset.tooltip = name;
logoCell.dataset.placement = 'left';
row.appendChild(logoCell);
let valueCell = document.createElement('td');
let valueInput = document.createElement('input');
valueInput.type = 'number';
valueInput.id = 'value-' + id;
valueInput.value = Math.round(value);
valueInput.min = 0;
valueInput.max = 89;
valueInput.step = 1;
valueInput.style.maxWidth = '8ch';
valueInput.style.height = '48px';
valueInput.style.margin = '0';
function valueChange(event) {
const serviceId = this.id.replace('value-', '');
let newValue = parseInt(this.value, 10);
if (isNaN(newValue)) newValue = 0;
newValue = Math.max(0, Math.min(89, newValue));
this.value = newValue;
const newAngle = (newValue / 90) * (Math.PI / 2) - Math.PI / 2;
const newX = padding + radius + radius * Math.sin(newAngle);
const newY = padding + radius - radius * Math.cos(newAngle);
svg.select('#group-' + serviceId).attr('transform', 'translate(' + newX + ',' + newY + ')');
document.getElementById('value-label-' + serviceId).innerHTML = Math.round(newValue);
updateChart();
}
valueInput.addEventListener('change', valueChange);
let timeout;
valueInput.addEventListener('input', function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
valueChange.call(this);
}, 1000);
});
valueCell.appendChild(valueInput);
row.appendChild(valueCell);
services.appendChild(row);
}
// remove all of the exising services and add the hard-coded streaming services to the DOM
function resetToStreamingServices() {
const streamingServices = [
{
id: 'netflix',
name: 'Netflix',
color: '#E50914',
logo: '<svg width="74.442" height="20" version="1.1" viewBox="0 0 19.696 5.2917" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.039124 0 0 .039124 5.7316 -3.1648)"><path d="m188.45 80.893h-21.198v118.56c19.265 0.66287 38.449 1.6348 57.556 2.9086v-20.888c-12.086-0.80609-24.204-1.4894-36.357-2.0553zm168.47 0.01199h-23.287l-15.349 35.578-13.79-35.578h-22.938l24.649 63.573-26.906 62.367c7.4436 0.72602 14.866 1.5007 22.281 2.3192l15.649-36.262 15.498 39.974c8.0716 1.0379 16.122 2.1209 24.158 3.2678l0.0353-0.0138-27.615-71.223zm-262.44 117.51 21.199-5e-3v-48.226h28.737v-20.888h-28.737v-27.315h37.98v-21.075h-59.18zm-79.163-96.435h22.187v97.676c7.0541-0.26635 14.123-0.48578 21.199-0.67098v-97.005h22.186v-21.075h-65.572zm-72.475 103.75c19.539-1.7755 39.167-3.2388 58.885-4.3744v-20.89c-12.598 0.72813-25.16 1.5903-37.686 2.5753v-31.623c8.2187-0.0818 19.041-0.33267 28.628-0.21343v-20.889c-7.6595-0.0187-19.97 0.10689-28.628 0.21766v-28.548h37.686v-21.076h-58.885zm-41.584-48.289-27.61-76.533h-20.147v135.24c7.0527-1.004 14.119-1.9653 21.199-2.8875v-73.544l24.55 70.524c7.7216-0.89535 15.457-1.7434 23.207-2.5407v-126.79h-21.199zm341.02 46.179c7.0767 0.54152 14.143 1.1225 21.202 1.7505v-124.46h-21.202v122.71" fill="#ed1c24"/></g></svg>',
value: 10,
enabled: true,
},
{
id: 'hulu',
name: 'Hulu',
color: '#1CE783',
logo: '<svg width="60.886" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m9.5699 6.241h-3.1009c-1.088 0-1.6352 0.29298-1.6352 0.29298v-6.534h-4.8339v20h4.8339v-8.0701c0-0.71389 0.5811-1.2919 1.296-1.2919h2.814c0.71602 0 1.295 0.57805 1.295 1.2919v8.0701h4.836v-8.6951c0-3.657-2.444-5.0639-5.5051-5.0639zm46.48 0v8.069c0 0.71504-0.57896 1.293-1.2949 1.293h-2.813c-0.71602 0-1.295-0.57799-1.295-1.293v-8.069h-4.837v8.472c0 3.463 2.2219 5.287 5.5059 5.287h4.735v-0.02509c3.0249 0 4.835-2.146 4.835-5.2619v-8.472zm-27.277 8.069c0 0.71504-0.58 1.293-1.296 1.293h-2.814c-0.71602 0-1.295-0.57799-1.295-1.293v-8.069h-4.836v8.472c0 3.463 2.2221 5.287 5.506 5.287h4.735v-0.02509c3.025 0 4.836-2.146 4.836-5.2619v-8.472h-4.836zm8.521 5.69h4.837v-20h-4.837z" fill="#1ce783" fill-rule="evenodd" stroke-width=".060886"/></svg>',
value: 45,
enabled: true,
},
{
id: 'disneyplus',
name: 'Disney+',
color: '#0E7A80',
logo: '<svg width="36.573" height="20" space="preserve" version="1.1" viewBox="0 0 36.573 20" xmlns="http://www.w3.org/2000/svg"><g transform="scale(.035399)"><g fill="#136878"><path d="m945.02 304.38-4e-3 4e-3 -4.7617 4e-3c-1.1739 1e-3 -2.2726 0.35326-3.332 1.4355-1.3157 1.3441-1.5151 3.0679-1.1973 4.7539 3.8629 20.609 5.8522 40.725 6.502 59.701h-59.77c-1.3503-6e-5 -2.4679 0.47771-3.3613 1.3613-0.9399 0.92955-1.5203 2.1147-1.5195 4.0586l6e-3 17.154c1e-3 3.413 2.352 5.3202 5.1875 5.3203h59.438c-0.444 13.108-1.468 25.429-2.8672 36.453-1.0712 8.4406-2.3409 16.35-3.6875 23.545-0.25756 2.0584 0.28581 3.3546 1.2812 4.457 1.1877 1.1898 2.5727 1.4744 4.2051 1.4727l5.9297-8e-3 9.2227 8e-3c2.3521 2e-3 4.0925-1.0821 5.1348-2.1524 1.538-1.5792 1.8019-3.2684 1.9688-4.2422 1.2052-7.0348 2.36-14.736 3.3223-22.938 1.2985-11.067 2.2467-23.437 2.6582-36.596h58.572c2.8355-1.4e-4 5.1861-1.9073 5.1875-5.3203l0.01-17.154c8e-4 -1.9439-0.5797-3.129-1.5196-4.0586-0.8935-0.88362-2.011-1.3614-3.3613-1.3613h-58.871c-0.36024-11.341-1.1581-23.081-2.5195-35.105-0.91685-8.0984-2.081-16.319-3.5176-24.613-0.29368-1.686-0.87573-3.365-2.6094-4.7148-1.1473-0.89325-2.7424-1.4563-3.8184-1.457l-8.0449-6e-3c-0.0113-5e-5 -0.0219-2e-3 -0.0332-2e-3l-1.6035 2e-3z"/><path d="m549.89 0c-38.79 0-76.722 4.7601-113.3 13.936-30.606 7.6782-59.885 18.451-87.611 32.094-10.264 5.0504-19.935 10.331-29.126 15.792-17.909 10.641-34.221 21.996-49.507 34.352-11.836 9.5683-22.533 19.278-31.776 28.438-6.1676 6.1123-11.861 12.057-17.837 18.739-0.54308 0.60716-1.0522 1.1675-1.5818 1.7604-0.93947 1.0516-2.0686 2.6743-1.5112 4.9032 0.17923 0.71662 0.57644 1.3726 1.1326 1.9032 1.0284 0.90342 2.2219 1.1185 3.2987 1.036 1.2754-0.0977 2.7138-0.85196 3.5187-1.4571 0.53965-0.40573 1.0577-0.87586 1.5537-1.3844 1.8349-1.8814 3.5179-3.7355 5.2902-5.5719 3.1764-3.2914 6.4179-6.5262 9.7578-9.7608 12.62-12.223 28.385-25.554 45.583-37.758 9.311-6.6071 19.094-13.016 29.737-19.269 8.7361-5.132 25.206-14.349 46.004-23.301 18.429-7.9316 36.319-14.085 53.13-18.856 12.14-3.4454 24.696-6.4554 37.375-8.8887 11.249-2.1587 22.633-3.8944 34.082-5.2285 17.588-2.0495 35.136-3.0118 52.692-3.0118 40.719 0 82.301 5.4808 122.24 16.66 14.433 4.0395 28.491 8.759 42.196 14.164 17.78 7.0118 34.143 14.715 51.612 24.508 32.189 18.045 60.875 39.977 86.712 66.054 12.553 12.669 23.411 25.434 32.785 37.908 11.701 15.569 21.105 30.683 28.593 44.478 4.7829 8.8117 8.7826 17.095 12.032 24.353 6.8532 15.307 10.934 27.816 10.934 27.816 0.43125 1.1848 0.75306 1.6819 1.2648 2.4561 1.2454 1.6629 3.2359 2.6326 5.2625 2.6318l16.643-6e-3c1.2565-5.3e-4 1.8264-0.25542 2.5078-0.65039 0.62477-0.36218 1.4949-1.1962 1.8828-2.0977 0.45499-1.0573 0.57613-2.4753 0.16211-3.7715-5.9873-17.898-14.166-36.691-23.852-54.756-15.092-28.147-37.983-62.582-71.35-95.34-29.466-28.929-59.166-49.298-83.969-63.525-30.827-17.684-63.534-31.457-98.213-41.389-41.777-11.965-85.153-17.961-128.36-17.961z"/><path d="m473.52 382.36c0.57811 0.0788 0.7095 0.10512 1.2613 0.15767 6.4221 0.87901 11.419 1.7817 15.918 2.9306 5.1935 1.3264 9.6037 2.9502 12.833 4.7455 2.4417 1.3576 4.3685 2.8105 5.9558 4.4101 0.90658 0.91364 1.7291 1.936 2.4668 2.9925 1.1158 1.598 2.6731 4.486 3.4645 6.2989 0.66157 1.5155 1.0674 2.68 1.2132 3.1158 0.78253 2.3401 1.3352 4.7937 1.6587 7.2955 0.54336 4.2024 0.49636 8.1482-0.10098 11.89-0.6141 3.8466-1.9305 9.5087-6.3785 15.457-3.7901 5.0686-9.0818 9.12-15.298 12.104-7.4892 3.6264-15.396 5.4238-23.309 6.333-14.795 1.6292-30.949-1.3116-44.179-7.8834-4.2235-2.1249-7.906-4.3134-11.21-6.772-3.2193-2.3957-6.2767-5.1284-8.5537-8.2476-3.5981-4.9288-4.9579-9.2832-4.9305-13.635 0.026-4.1257 1.3402-7.8772 3.3353-10.684 2.2768-3.4348 5.9576-5.9106 10.14-7.6453 7.058-2.9274 15.748-3.7441 22.76-3.4966 8.5141 0.31533 23.808 2.9694 31.902 5.8337 2.2336 0.81462 10.485 4.0205 11.93 5.4921 1.0248 1.0248 1.6818 2.5227 1.2351 3.8892-1.8657 5.6761-15.583 8.6455-19.525 9.2236-10.616 1.6292-16.208-2.3913-28.27-7.1476-2.9957-1.1562-6.99-2.4701-10.038-2.7592-3.0469-0.27832-6.4532 0.0721-9.0534 1.4702-2.6503 1.425-4.0578 3.7987-4.016 6.3594 0.0393 2.4072 1.9355 4.6018 5.8903 6.3344 1.769 0.76226 3.4475 1.3907 5.0828 1.9031 4.3406 1.36 8.3774 1.9154 12.996 1.9726 9.053 0.15172 18.641-0.5003 27.869-2.4192 9.9508-2.0692 19.482-5.6264 27.472-11.285 2.076-1.4978 4.1519-3.6789 4.1782-6.4644 0.0788-5.5972-9.7492-9.0134-9.7492-9.0134-8.6586-3.6261-23.203-5.4962-33.723-6.6345-2.0594-0.22282-3.9646-0.44764-5.6413-0.62205-1.8672-0.16112-4.0637-0.35505-6.1776-0.54191-1.6256-0.14369-3.1051-0.24923-4.9438-0.38661-1.6847-0.12587-3.8716-0.29408-5.5107-0.43985-3.6319-0.323-6.8827-0.63653-9.4154-0.90516-1.2802-0.13578-4.6394-0.5228-8.0546-1.1235-2.4041-0.42285-4.8216-0.88858-7.1313-1.8114-2.1515-0.8596-4.3404-2.2552-6.0758-4.1034-1.5267-1.626-2.6945-3.5485-3.0658-5.4789-1.7869-7.0425 0.49928-15.744 4.4147-21.394 10.301-14.768 34.372-20.362 52.346-22.569 17.396-2.1811 45.54-2.1548 62.647 6.9374 2.6278 1.3927 3.9943 2.7329 3.4424 5.5447-1.13 5.3082-5.0979 8.7243-9.9331 10.222-5.0454 1.603-15.53 2.2236-20.129 2.5127-20.602 1.1562-45.54 0.53556-65.17 5.8963-1.5241 0.44673-4.1782 1.1562-5.0454 2.1285-1.6458 1.7865 0.0402 2.8947 2.2682 3.5993 1.6366 0.51758 3.7376 0.86886 6.5612 1.2884z"/><path d="m625.48 438.18c-3.8373 9.0134-13.983 18.657-26.546 12.666-12.432-5.9914-32.223-46.486-32.223-46.486s-7.517-15.11-8.9362-14.716c0 0-1.6296-2.9431-2.6283 13.559-1.025 16.424 0.21027 48.457-6.3605 53.502-6.2028 5.0454-13.72 3.0483-17.636-2.8643-3.5219-5.8337-4.9938-19.656-3.0751-43.937 2.2866-24.333 7.9375-50.217 15.165-58.285 7.2016-7.9885 12.984-2.1811 15.244-0.0788 0 0 9.6459 8.7506 25.573 34.424l2.786 4.7563s14.456 24.255 15.98 24.202c0 0 1.1827 1.1037 2.2341 0.28906 1.5244-0.42045 0.89363-8.1988 0.89363-8.1988s-2.9963-26.436-16.164-71.187c0 0-1.9975-5.571-0.65707-10.8 1.3404-5.2819 6.6233-2.8118 6.6233-2.8118s20.448 10.275 30.383 43.569c9.8562 33.294 3.2328 63.33-0.65708 72.396"/><path d="m739.4 365.28c-14.453 3.338-52.477 5.1778-52.477 5.1778l-4.8089 15.034s18.999-1.6296 32.848-0.18398c0 0 4.4673-0.52567 4.9928 5.099 0.18395 5.2304-0.44672 10.829-0.44672 10.829s-0.28906 3.3906-5.0979 4.2579c-5.203 0.89363-40.967 2.2604-40.967 2.2604l-5.7812 19.581s-2.1548 4.547 2.6804 3.2329c4.4673-1.1828 41.94-8.2267 46.801-7.2017 5.2556 1.2879 11.037 8.253 9.355 14.614-1.9971 7.885-39.391 31.724-62.148 30.068 0 0-11.983 0.76222-22.1-15.376-9.4075-15.402 3.5738-44.55 3.5738-44.55s-5.9388-13.589-1.6292-18.214c0 0 2.5752-2.313 10.064-2.8386l9.1448-18.977s-10.432 0.70966-16.634-6.9651c-5.8074-7.2805-6.2804-10.619-1.8395-12.642 4.73-2.3392 48.22-10.277 78.125-9.278 0 0 10.406-1.0251 19.419 17.032 0 0 4.3622 7.2805-3.0745 9.0415"/><path d="m837.72 375.49s-0.14124-1.1082-0.6822-2.219c-1.1417-2.3444-4.0636-4.7006-11.195 3.3227-9.0134 9.9594-25.306 28.669-38.418 54.08 13.77-1.5504 27.04-9.0134 31.034-12.824 3.8454-3.4113 10.71-10.272 15.19-19.616 2.4713-5.1544 4.2365-11.064 4.349-17.568 0.0292-1.6866-0.071-3.4132-0.27734-5.1768m7.2265 42.784c-9.3024 16.24-35.58 50.214-70.478 42.199-4.291 10.39-8.3239 20.832-11.982 32.026-6.177 18.9-11.317 39.946-14.799 66.517 0 0-1.2088 8.225-8.0411 5.3607-5.3654-1.8716-13.479-9.3225-17.738-20.06-1.1227-2.8305-1.9464-5.793-2.4124-9.0383-0.60596-5.0757-0.52824-11.115 0.26081-17.789 1.4176-11.989 5.031-26.336 10.641-42.242 3.8608-10.947 8.673-22.633 14.377-34.798-5.4133-8.8294-9.1185-21.443-5.9651-39.391 0 0 1.5296-10.963 9.1539-25.984 5.6731-11.177 14.725-24.6 29.008-37.425 0 0 4.0195-3.4757 6.332-2.3983 2.5752 1.0774 1.4138 11.911-0.63584 17.193-2.1022 5.2556-17.028 31.087-17.028 31.087s-9.3024 17.422-6.6746 31.166c8.1707-12.543 21.147-31.024 35.203-45.488 12.129-12.481 25.059-21.981 36.353-22.085 6.5708-0.0602 13.086 3.1255 17.521 11.286 3.605 6.6322 5.3137 15.537 5.3137 24.832 0 12.246-2.9431 25.309-8.409 35.032"/><path d="m360.72 318.84s-2.6599 4.7944-3.2897 5.6815c-0.29524 0.47977-1.2637 1.8103-2.4549 2.8282-0.9221 0.78803-1.9136 1.3422-3.2336 1.4633-1.3599 0.12479-2.7407-0.37897-4.2184-1.6112-3.5475-3.1534-5.5769-7.9648-5.7346-12.695-0.0788-2.076 0.25862-4.3622-0.13555-6.0965-0.3454-1.5474-1.3146-3.1377-2.3853-4.7067-0.96575-1.4152-2.0141-2.7627-2.7618-4.0961-0.66684-1.1834-1.2087-2.3716-1.6497-3.4692-1.4011-3.4871-1.7842-6.5667-1.9242-9.4049-0.63067-11.615 5.4921-22.397 13.454-30.832 8.0411-8.5666 18.426-15.602 29.831-20.437 10.8-4.5461 26.693-7.6469 38.544-3.5475 3.8629 1.3402 9.2236 4.6249 11.93 8.0411 0.57812 0.73578 1.0511 1.4978 1.6292 1.8657 0.52556 0.34161 1.892 0.473 2.9957 0.68323 3.784 0.65695 9.2236 3.5212 11.457 5.4133 4.441 3.8629 6.8848 7.5418 8.0148 12.876 1.0655 5.009 0.19803 10.69-1.8205 15.756-2.1369 5.3633-5.5158 10.275-9.1374 13.965-12.062 12.351-23.992 21.049-39.443 27.093-4.9267 1.9287-11.53 3.5149-16.695 4.117-2.7217 0.31728-5.2697 0.4149-7.7282 0.31631-2.7118-0.10875-5.4119-0.46548-7.7001-0.88568 0 0-5.6961-1.1596-7.545-2.318zm25.629-18.844c6.1531-0.59504 11.518-1.6882 16.47-3.2559 2.6842-0.84976 5.3752-1.9357 7.9926-3.1967 5.7142-2.7529 11.545-6.7638 15.252-10.125 1.9644-1.781 3.6657-3.6058 5.0165-5.4081 2.6929-3.5929 4.29-7.6438 3.7851-11.905-0.42045-3.5738-2.7592-6.2804-5.7286-7.5418-6.5631-2.8574-13.972 0.53563-19.341 3.6391-3.8609 2.2428-9.7038 6.5582-15.148 11.197-6.448 5.4932-12.588 11.722-16.438 16.7-2.1836 2.9798-4.4132 5.9229-6.4422 9.0096 0.31248 0.85854 7.49 1.2588 11.458 0.99606m-32.341-9.7572c2.0981-3.3209 4.544-6.5697 6.8921-9.6311 2.6029-3.3935 7.1154-8.5038 8.883-10.375 3.9325-4.1633 8.1188-8.2248 11.715-11.305 2.1548-1.8132 4.5963-3.8877 4.5963-3.8877s-1.7232 0.0317-3.9569 0.47838c-1.082 0.20994-2.9842 0.71086-4.5323 1.2799-1.8859 0.69318-3.4353 1.3406-4.8033 2.0322-4.264 2.1556-7.971 5.0717-9.7052 6.5582-3.2181 2.7678-6.6233 6.3966-8.7826 10.328-1.2573 2.2892-2.1213 4.7108-2.274 7.0949-0.10543 1.6459 0.13885 3.2882 0.783 4.8906 0.473 1.13 1.185 2.5371 1.185 2.5371"/><path d="m374.5 342.68c0.473 0.0788 1.1825 0.28905 1.8132 0.52556 5.4133 2.0497 7.6469 7.0688 8.9871 12.587 3.0745 12.771 4.3884 41.046 4.914 52.109 0.3679 8.3039 0.57812 16.476 0.91974 24.701 0.28905 6.9374 0.86717 16.187-0.57812 22.704-0.52556 2.3387-2.1022 5.0717-4.3622 6.4644-2.549 1.6555-8.409 1.7869-11.641 1.1037-7.9097-1.6292-10.485-6.7272-11.615-14.558-2.7066-18.71-1.3927-55.447 0.18395-70.924 0.52556-5.1242 2.4438-21.522 5.1242-28.38 0.91974-2.3387 2.8643-6.99 6.2542-6.333"/><path d="m83.516 207.79c-6.3109-0.091-17.711-0.0207-30.817 1.6288-9.008 1.1337-18.363 2.8798-26.96 5.2601-4.7607 1.2883-8.7308 2.8636-12.177 5.1147-3.9343 2.5701-7.1653 6.0016-9.7568 10.554-2.4176 4.257-4.6932 8.9441-3.4581 13.674 1.0511 3.9943 6.4759 5.3103 11.376 6.1366 4.4147 0.68323 14.426 1.2037 17.08-2.0285 0.74797-0.77829 1.0853-2.9839 0.07813-4.4414-0.99856-1.7606-3.5199-3.0274-5.9375-3.4741-2.0405-0.37278-5.4679-0.71302-7.6066-1.0175-1.4732-0.20975-2.24-0.46444-2.6349-0.67374-0.1148-0.0608-0.19818-0.11784-0.25836-0.16879-0.11008-0.0932-0.12317-0.19712-0.12317-0.19712s0.03791-0.10243 0.12809-0.19222c0.11555-0.11505 0.28484-0.2735 0.45589-0.39763 1.6985-1.0997 7.1575-2.648 8.5439-3.002 6.2443-1.7322 15.851-2.7576 23.697-3.1658 7.7533-0.40332 15.619-0.40441 22.05-0.16625 25.981 0.82846 51.165 5.0102 76.428 12.22 13.692 3.9076 27.663 8.7712 42.456 14.577 20.788 8.2419 42.132 19.52 61.826 33.394 17.455 12.297 33.023 26.235 45.096 41.637 7.3075 9.4154 16.061 23.604 20.431 37.382 1.4856 4.6845 2.7529 10.054 2.8881 16.389 0.13095 6.1388-0.80416 13.205-3.4523 20.158-4.9812 13.078-15.494 25.283-32.812 34.334-6.4006 3.3453-13.739 6.2805-22.063 8.6495-8.9822 2.5562-18.242 4.1963-27.458 5.193-10.873 1.1758-21.731 1.4274-32.778 1.135-1.5512-0.0411-4.8238-0.23488-8.5404-0.57209-9.4673-0.85898-18.079-2.3358-23.025-3.2686l-1.7051-79.988c12.401 0.18722 26.037 1.6475 38.901 3.8899 7.1832 1.2522 19.306 3.6815 34.264 8.5082 3.0004 1.0149 6.5771 3.1899 6.8661 6.3695 0.11601 1.3486-0.36546 2.5258-1.2162 3.6678-2.2498 3.02-5.9425 5.2752-9.0644 6.7911-1.8797 0.91269-3.5166 1.5964-4.2644 2.4396-0.81461 1.1037-0.878 2.6827 0.25196 3.5762 1.5474 1.2221 3.9675 2.0862 6.4254 2.6461 12.4 2.8248 20.663-2.7359 25.469-8.0192 5.2-5.7175 6.6872-10.151 7.178-14.793 0.84194-7.964-2.7957-14.205-4.6325-16.79-4.5636-6.422-11.575-10.739-17.228-13.444-12.813-6.1312-27.437-9.2875-34.859-10.608-9.4449-1.6809-21.464-3.0404-35.35-3.3196-6.4617-0.12994-12.961 0.18389-12.961 0.18389s-0.26333-10.853-0.73633-18.053c-0.78835-11.851-4.0717-35.108-14.846-41.809-1.9708-1.2088-4.3894-1.3395-5.7559 0.5-2.1022 2.7329-4.152 13.14-4.625 15.82-0.45004 2.5523-0.91678 5.7692-1.3581 9.185-0.69357 5.368-1.2804 11.353-1.6717 16.2-0.21905 2.6971-0.81906 11.498-0.93512 20.797-0.13139 0.13139-0.3179 0.33732-0.50185 0.46871 0 0-4.846 0.73063-11.037 1.9623-20.365 4.0512-34.505 9.6838-40.047 12.116-9.9068 4.3359-24.119 11.997-28.434 22.047-0.99989 2.4862-1.4203 4.0449-1.5386 6.5813-0.26136 5.603 1.8008 10.535 3.5621 13.671 4.6727 8.8214 14.031 18.337 21.897 25.431 5.6763 5.1191 13.944 11.49 20.597 16.034 5.42 3.7021 9.5129 6.3134 13.299 8.5421 4.4147 2.5987 8.7387 4.9085 13.148 7.0076 2.3874 1.1365 5.3251 2.5714 8.028 3.8535 0 0 0.40227 3.7909 0.92907 8.1292 0.53511 4.6486 1.0054 9.3635 2.8561 13.709 0.70744 1.5804 1.5249 2.9875 2.6406 4.2363 3.1008 3.4708 6.5916 4.1948 8.0488 4.459 2.9617 0.53681 5.7813 0.24532 8.7539-0.31445 1.2324-0.22928 2.4962-0.66301 3.4727-1.1699 1.6373-0.84998 2.9049-2.1279 3.7773-3.9551 1.3137-2.6273 1.786-6.8178 1.8223-7.3535 0.16292-2.4083 0.0488-5.1152 0.0488-5.1152s9.5578 2.2736 16.232 3.4824c10.948 1.9278 21.459 3.0755 33.928 3.2676 15.046 0.2318 31.096-1.7032 48.287-5.8516 10.39-2.5072 20.274-5.8264 29.932-10.309 8.9576-4.1574 16.966-9.1123 23.914-14.848 5.2171-4.3068 10.658-9.7227 15.9-17.168 1.4914-2.1181 2.811-4.1687 3.7871-5.8594 0.30003-0.51966 1.1322-1.7373 2.2344-3.5996 3.0637-5.1767 6.8662-13.175 8.8496-23.363 0.53307-3.0232 0.91823-5.9934 1.1074-8.9668 0.7312-13.005-1.9092-26.112-6.9984-38.07-1.1417-2.8083-5.2164-12.759-13.975-25.369-7.6412-11.001-16.527-21.227-25.822-30.505-6.1764-6.1646-10.865-10.479-18.826-17.158-11.276-9.3542-22.031-16.387-25.343-18.568-10.934-7.1643-23.59-14.198-34.694-19.566-17.897-8.6507-35.385-15.283-52.805-20.677-6.0464-1.8721-11.663-3.4614-16.703-4.802-10.447-2.7791-26.262-6.5979-43.024-8.7476-10.139-1.3004-19.903-1.9673-28.125-2.0859zm49.77 165.97s-0.26385 11.827-0.3164 23.783c-0.0573 12.349 0.0883 24.821 0.23269 33.612 0.12044 7.3344 0.23996 12.106 0.23996 12.106s-8.5209-2.7886-12.928-4.9878c-8.0919-3.4796-15.795-7.5431-23.145-12.134-9.2996-5.8087-17.109-11.735-24.399-18.279-1.4919-1.3389-4.1237-3.8766-5.4464-5.2146-3.3397-3.3105-6.6956-6.6706-5.8994-11.173 0.60439-3.4424 7.971-6.7072 10.801-7.4902 6.7341-1.9194 13.535-3.6644 20.736-5.1354 7.6545-1.5635 15.06-2.7707 20.381-3.3529 7.3388-1.1213 19.744-1.7344 19.744-1.7344z"/></g></g></svg>',
value: 0,
enabled: true,
},
{
id: 'max',
name: 'Max',
color: '#002BE7',
logo: '<svg width="73.07" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m11.52 7.307e-4c-1.9936 0-4.0188 0.88656-6.614 2.8801v-2.3735h-4.9056v18.986h5.2221v-11.803c2.2785-1.8036 3.3222-2.3736 4.1771-2.3736 1.012 0 1.677 0.63325 1.677 2.2152v11.962h5.2208v-11.835c2.2785-1.7719 3.2919-2.342 4.1773-2.342 1.0133 0 1.6769 0.63325 1.6769 2.2152v11.962h5.2209v-13.797c0-4.2722-2.4369-5.6959-4.7788-5.6959-1.9936 0-4.0189 0.82321-6.6775 2.8484-0.85251-2.1214-2.7194-2.8484-4.3963-2.8484zm26.455 0c-5.1891 0-9.4933 4.4621-9.4933 9.9996 0 5.5375 4.3039 9.9996 9.4933 9.9996 2.5635 0 4.7789-0.9486 6.4887-3.0067v2.5001h4.9686v-18.986h-4.9686v2.5001c-1.7098-2.0582-3.9252-3.0067-6.4887-3.0067zm12.374 0.50664c2.1518 3.3537 4.5886 6.3603 7.4371 9.3668-2.8483 3.1321-5.2851 6.3921-7.4371 9.6189h6.297c1.4869-2.405 3.1639-4.5886 5.0952-6.6454 1.8985 2.0568 3.4803 4.2403 4.9683 6.6454h6.3604c-2.1834-3.3221-4.5569-6.4871-7.4049-9.6189 2.8166-3.0066 5.2217-6.107 7.4049-9.3668h-6.2337c-1.5502 2.405-3.2271 4.4302-5.0951 6.4236-1.8985-1.9935-3.5755-4.0186-5.0952-6.4236h-6.297zm-11.584 3.8923c3.1006 0 5.6008 2.5001 5.6008 5.6007 0 3.1006-2.5002 5.6008-5.6008 5.6008-3.1006 0-5.6008-2.499-5.6008-5.6008s2.5002-5.6007 5.6008-5.6007zm0 1.2653c-2.3735 0-4.3038 1.9301-4.3038 4.3354-1e-6 2.4052 1.9303 4.3355 4.3038 4.3355s4.3037-1.9303 4.3037-4.3355c0-2.4052-1.9301-4.3354-4.3037-4.3354z" fill="#002be7" stroke-width=".12179"/></svg>',
value: 50,
enabled: true,
},
{
id: 'paramountplus',
name: 'Paramount+',
color: '#0164FF',
logo: '<svg width="86.82" height="20" enable-background="new -161.599 95.381 1000 230.363" space="preserve" version="1.1" viewBox="-161.6 95.381 86.82 20" xmlns="http://www.w3.org/2000/svg"><path d="m-139.41 100.48c0-3.4393-3.6479-5.0954-7.9818-5.0954-4.636 0-8.8897 2.0539-10.451 5.2386-0.43089 0.8485-0.6548 1.7871-0.65358 2.7388-0.0197 0.82297 0.20802 1.6328 0.65358 2.325 0.66895 0.98775 1.8637 1.6085 3.6162 1.6085 2.151 0 3.8558-1.1787 3.8558-3.2327 0 0 0.0316-0.57283-0.63735-0.57283-0.54167 0-0.68527 0.38192-0.6692 0.57283 0.08 1.6083-0.87619 2.8982-2.581 2.8982-1.9112 0-2.7085-1.6242-2.7085-3.3598 0-3.5511 2.6766-5.9081 5.4646-6.927 1.3029-0.49201 2.6866-0.73536 4.0792-0.71704 3.1544 0 5.7354 1.2104 5.7354 4.4592 0 2.7066-2.2782 5.0156-5.0028 5.2228l0.11148-0.36603c0.55781-1.9907 1.2428-4.172 2.3578-5.7805 0.0642-0.09611 0.17538-0.2549 0.30292-0.41396l-0.15914-0.19126c-0.23841 0.14464-0.46735 0.30413-0.68562 0.4776-5.2251 4.0767-5.3838 15.542-12.347 15.542-0.23979 0-0.47916-0.016-0.71678-0.0478-1.4496-0.23876-2.2148-1.2104-2.2148-2.5632 0-0.27079 0.0958-0.63726 0.0958-0.84397 0.011-0.38462-0.29181-0.70524-0.67642-0.71644h-9e-3 -0.0794c-0.62119 0-0.87618 0.49296-0.89216 1.1941-0.0476 2.0223 1.4496 3.2003 3.7601 3.4236 0.25465 0.0158 0.50964 0.0315 0.78051 0.0315 5.4324 0 8.7621-4.1083 10.18-9.0926 0.71826-0.0841 1.4274-0.2332 2.1187-0.44547 2.5178-0.70133 5.3526-2.3884 5.3526-5.3666zm51.747 1.1942h-1.9126l-0.42967 1.0034-0.74917 1.6879h-0.89155l-0.27201 0.57336h0.92481l-1.1159 2.4683c-0.79536 1.7355-2.0384 3.4395-2.7555 3.4395-0.15905 0-0.25525-0.0641-0.25525-0.22278 0-0.15853 0.04749-0.303 0.22321-0.74865 0.22321-0.52586 0.59003-1.2899 0.86073-1.8471 0.39764-0.81211 1.0352-2.0701 1.0352-2.6912 0-0.62111-0.39772-1.1149-1.1789-1.1149-0.8761 0-1.6728 0.52604-2.4065 1.2895l0.47846-1.1464h-1.7997l-1.4663 3.344c-0.58881 1.1785-1.7844 3.1371-2.5336 3.1371-0.15905 0-0.22321-0.0957-0.22321-0.25472 0.0155-0.14308 0.0531-0.28286 0.11165-0.41422 0.0641-0.14326 0.94026-2.1973 0.94026-2.1973l1.5932-3.6465h-1.9434l-1.5458 3.5508c-0.47716 1.099-1.688 2.962-2.4693 2.962-0.13604 0.0134-0.25733-0.0861-0.27061-0.22251v-1.8e-4 -0.0641c0-0.19092 0.14368-0.54141 0.25533-0.79631l0.81203-1.7832 1.6727-3.6465h-1.9267l-0.38357 0.828c-0.28598 0.55713-0.76453 1.21-1.529 1.21-0.36681 0-0.54132-0.1429-0.62085-0.28642-0.11156-1.2262-0.89277-1.8791-2.0397-1.8791-1.5932 0-2.7245 0.93948-3.4738 2.0862-0.49079 0.79041-0.87636 1.6414-1.1465 2.5315-0.68527 1.131-1.4018 2.007-1.9755 2.007-0.14351 0-0.23928-0.08-0.23928-0.27097 0-0.19109 0.19135-0.62076 0.25508-0.78068l1.2586-2.675c0.35049-0.82765 0.59003-1.3692 0.59003-1.9106 0-0.57336-0.39764-0.98767-1.0519-0.98767-0.90814 0-1.8962 0.52587-2.6767 1.3855 0.0265-0.13648 0.0371-0.27547 0.0318-0.4143 0-0.63708-0.31836-0.9716-0.97194-0.9716-0.82818 0-1.6884 0.49418-2.469 1.3855l0.5099-1.2426h-1.7528l-1.4813 3.345c-0.7009 1.5766-1.8321 3.1376-2.4696 3.1376-0.14317 0-0.23884-0.0802-0.23884-0.27097 0-0.30248 0.3346-1.051 0.46188-1.3535l1.9598-4.4426c0.14334-0.33426-0.79683-0.54158-1.9916-0.54158-1.2267 0-2.4854 0.60539-3.4092 1.3855-0.65315 0.54106-1.1312 0.81211-1.3706 0.81211-0.0781 0.0168-0.15497-0.0331-0.17181-0.11104-2e-3 -0.0105-3e-3 -0.0214-3e-3 -0.032 0-0.27079 0.65315-1.0355 0.65315-1.6245 0-0.27061-0.14317-0.44599-0.51007-0.44599-0.70055 0-1.5294 0.66895-2.1347 1.3693l0.5099-1.2263h-1.7203l-1.4814 3.3442c-0.70115 1.5766-1.8642 3.2171-2.5014 3.2171-0.14351 0-0.23867-0.0795-0.23867-0.27097 0-0.30248 0.31863-1.0345 0.49375-1.4172l1.9597-4.4584c0.14334-0.33426-0.79674-0.54158-1.9918-0.54158-1.7684 0-3.4892 1.1943-4.3972 2.4204-1.0036 1.3213-1.6884 2.7228-1.7045 3.8696-0.0156 0.9235 0.46171 1.4966 1.4179 1.4966 1.0675 0 1.9281-0.8438 2.4217-1.4809-0.0292 0.12597-0.0507 0.25368-0.0642 0.38235 0 0.63656 0.25499 1.0984 1.0355 1.0984 0.68493 0 1.5932-0.57319 2.3261-1.4809l-0.5902 1.3537h1.8638l1.8323-4.1563c0.60678-1.3532 1.2919-2.0536 1.4824-2.0536 0.0438-8e-3 0.0862 0.0203 0.0947 0.0641 8.7e-4 5e-3 1e-3 0.0103 1e-3 0.0155 0 0.14342-0.28659 0.52604-0.28659 0.87584 0 0.34979 0.19057 0.62076 0.70115 0.62076 0.39764 0 0.84398-0.19109 1.2424-0.44617-0.93992 1.2743-1.5778 2.6119-1.5778 3.7109-0.0157 0.92367 0.46171 1.4968 1.418 1.4968 1.0035 0 1.9435-0.95554 2.4533-1.5924-0.0192 0.14785-0.0298 0.29675-0.0318 0.44582 0 0.62128 0.35067 1.1466 1.0674 1.1466 0.79631 0 1.4338-0.49392 2.2304-1.4649l-0.59002 1.3376h1.9114l1.7523-3.9652c0.76479-1.7198 1.8001-2.6438 2.31-2.6438 0.12737-0.0131 0.24154 0.0794 0.25482 0.20697 0 1.8e-4 0 5.3e-4 9e-5 7e-4v0.0475c-0.021 0.19335-0.0749 0.38183-0.15923 0.55721l-2.5149 5.8123h1.9596l1.7845-4.0449c0.76427-1.7354 1.609-2.5798 2.2462-2.5798 0.19109 0 0.27105 0.0962 0.27105 0.30265-0.017 0.22182-0.0766 0.43818-0.17529 0.63778l-1.7209 3.6621c-0.15844 0.35258-0.25542 0.72929-0.28685 1.1144 0 0.55756 0.30257 1.052 1.1633 1.052 1.116 0 1.9596-0.84398 2.9152-2.102v0.27062c0.08 1.0032 0.63743 1.879 2.1189 1.879 1.7524 0 3.171-1.2104 4.0305-3.1367 0.32506-0.67729 0.53542-1.404 0.62207-2.1505 0.19187 0.0973 0.40632 0.1416 0.62085 0.1284 0.28954 3e-3 0.57483-0.0682 0.82869-0.20741l-0.30265 0.65271c-0.35153 0.73268-0.7338 1.5448-1.0352 2.2301-0.19092 0.4051-0.30457 0.84224-0.33469 1.2893 0 0.68441 0.38218 1.1785 1.1622 1.1785s1.8485-0.73259 2.6131-1.7676h0.0166c-0.0512 0.21401-0.0782 0.43289-0.0808 0.65271 0 0.57345 0.17572 1.1149 0.97229 1.1149 0.92489 0 1.6407-0.66894 2.3423-1.5131l-0.59003 1.3379h1.9279l1.5459-3.5034c0.87619-1.9745 1.7523-3.1686 2.5641-3.1686 0.13952-5e-3 0.25881 0.0997 0.27201 0.23875v0.0471c0 0.33469-0.47846 1.2423-0.90822 2.1498-0.39894 0.82817-0.70168 1.4647-0.90822 1.9589-0.1917 0.4163-0.30508 0.86411-0.33469 1.3213 0 0.60487 0.33469 1.0668 1.0839 1.0668 1.1147 0 2.2461-1.0827 2.8503-1.8951-0.13631 0.38947-0.21123 0.79753-0.222 1.2099 0 1.1153 0.66825 1.6725 1.6085 1.6725 0.62476-5e-3 1.2321-0.20516 1.7369-0.57301 0.7325-0.50989 1.3226-1.274 1.8164-1.9746l-0.33469-0.31881c-0.4618 0.65298-0.9723 1.2742-1.4983 1.6564-0.27722 0.23433-0.62502 0.36899-0.98784 0.38219-0.39755 0-0.65288-0.20724-0.65288-0.71627 0-0.50902 0.23858-1.1946 0.60557-2.1184 0.01528-0.0155 0.54124-1.1941 1.0352-2.3244 0.4143-0.95606 0.82861-1.8792 0.90822-2.0703h1.2585l0.25508-0.57336h-1.2428zm-54.344 9.1882c-0.27071 0-0.46189-0.0955-0.46189-0.44582 0.0158-0.93974 0.79623-2.6115 1.7687-3.9494 0.68483-0.92351 1.5769-1.608 2.5329-1.608l-1.211 2.7066c-0.90814 2.0386-1.8959 3.2966-2.6287 3.2966zm11.917 0c-0.27062 0-0.4618-0.0955-0.47751-0.44582 0.0158-0.93974 0.79631-2.6115 1.7684-3.9494 0.68466-0.92351 1.5771-1.608 2.533-1.608l-1.2111 2.7066c-0.92377 2.0865-1.8637 3.2966-2.613 3.2966zm21.157-5.2704c-0.0475 1.0347-0.95571 3.5344-2.023 5.0318-0.42967 0.60505-0.79666 0.77999-1.1147 0.77999-0.44652 0-0.57475-0.36646-0.51067-0.9077 0.095-0.93939 0.87618-3.1369 1.9601-4.6496 0.49383-0.68475 0.82869-0.97151 1.2109-0.97151 0.38236 0 0.49392 0.31863 0.47734 0.71704zm29.735-1.2268 1.7548-4.0501h-2.0767l-1.7549 4.0501h-4.414l-0.73632 1.6985h4.4153l-1.7548 4.05h2.0767l1.755-4.05h4.4139l0.7351-1.6985z" fill="#0064ff" stroke-width=".08682"/></svg>',
value: 60,
enabled: true,
},
{
id: 'peacock',
name: 'Peacock',
color: '#FCB711',
logo: '<svg width="64.926" height="20" enable-background="new 110.667 172.481 178.667 55.037" space="preserve" version="1.1" viewBox="110.67 172.48 64.926 20" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.064926 0 0 .064926 103.48 161.28)"><g stroke-width="5.597"><path d="m174.93 267.63c-35.446 0-64.259 28.813-64.259 64.259v148.63h30.47v-82.5l11.194 11.81 44.776-17.614c25.5-9.9515 42.084-32.966 42.084-60.325 0-35.446-28.813-64.265-64.265-64.265zm11.407 97.64-45.19 17.619v-50.994c0-20.524 15.341-35.239 33.789-35.239 18.448 0 33.789 14.922 33.789 35.239 0 12.851-6.2183 26.95-22.388 33.375zm526.33-97.64c-35.446 0-64.259 28.813-64.259 64.259 0 35.446 28.813 64.259 64.259 64.259s64.259-28.813 64.259-64.259c0-35.446-28.813-64.259-64.259-64.259zm0 99.504c-19.483 0-33.789-15.543-33.789-35.239s14.72-35.239 33.789-35.239c19.483 0 33.789 15.543 33.789 35.239s-14.306 35.239-33.789 35.239zm139.1-70.477c13.259 0 24.039 7.2537 29.642 18.034l23.838-18.241c-11.608-17.205-31.091-28.606-53.479-28.606-35.451 0-64.265 28.813-64.265 64.259s28.813 64.259 64.265 64.259c22.181 0 41.866-11.401 53.479-28.606l-23.838-18.246c-5.6026 10.785-16.382 18.039-29.642 18.039-19.489 0-33.789-15.543-33.789-35.239s14.715-35.653 33.789-35.653zm-259.95 0c13.27 0 24.05 7.2537 29.647 18.034l23.838-18.241c-11.608-17.205-31.097-28.606-53.485-28.606-35.446 0-64.259 28.813-64.259 64.259s28.813 64.259 64.259 64.259c22.181 0 41.877-11.401 53.485-28.606l-23.838-18.246c-5.597 10.785-16.377 18.039-29.647 18.039-19.483 0-33.789-15.543-33.789-35.239s14.513-35.653 33.789-35.653zm-106.55-13.685c-10.366-10.78-24.045-15.336-38.351-15.336-29.854 0-60.112 27.157-60.112 64.259 0 37.103 30.257 64.259 60.112 64.259 14.306 0 27.985-4.556 38.351-15.336v11.608h30.476v-120.86h-30.476zm-33.789 84.162c-19.478 0-34.203-15.543-34.203-35.239s15.134-35.239 34.203-35.239c19.489 0 33.789 15.543 33.789 35.239s-14.3 35.239-33.789 35.239zm538.55-39.593h-13.679l52.858-56.177h-39.179l-42.705 46.024v-111.94h-30.47v186.98h30.47v-34.41l16.791-17.832 35.86 52.242h36.901zm-676.62-59.91c-35.446 0-64.259 28.813-64.259 64.259 0 35.446 28.813 64.259 64.259 64.259 21.145 0 41.043-10.153 52.45-25.909l-24.465-16.998c-2.9048 4.7686-12.229 13.881-27.985 13.881-14.507 0-26.328-8.7033-31.298-21.347h92.664c1.041-4.556 1.4552-9.1175 1.4552-13.886 0.1959-35.44-27.369-64.259-62.821-64.259zm-31.091 50.373c4.9757-12.649 16.791-21.347 31.091-21.347 14.513 0 25.5 8.7033 30.062 21.347z"/><path d="m1092.2 374.19c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.442 18.453 18.442 10.153 0 18.448-8.2836 18.448-18.442 0-10.164-8.2892-18.453-18.448-18.453z" fill="#069de0"/><path d="m1092.2 323.81c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.442 18.453 18.442 10.153 0 18.448-8.2836 18.448-18.442-0.2071-10.371-8.2892-18.453-18.448-18.453z" fill="#6e55dc"/><path d="m1092.2 424.56c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.442 18.453 18.442 10.153 0 18.448-8.2836 18.448-18.442 0-10.164-8.2892-18.453-18.448-18.453z" fill="#05ac3f"/><path d="m1092.2 273.23c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.448 18.453 18.448 10.153 0 18.448-8.2892 18.448-18.448-0.2071-10.159-8.2892-18.453-18.448-18.453z" fill="#ef1541"/><path d="m1092.2 222.85c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.448 18.453 18.448 10.153 0 18.448-8.2892 18.448-18.448-0.2071-10.159-8.2892-18.453-18.448-18.453z" fill="#ff7112"/><path d="m1092.2 172.48c-10.159 0-18.453 8.2892-18.453 18.453 0 10.153 8.2892 18.448 18.453 18.448 10.153 0 18.448-8.2892 18.448-18.448-0.2071-10.159-8.2892-18.453-18.448-18.453z" fill="#fccc12"/></g></g></svg>',
value: 70,
enabled: true,
},
{
id: 'appletv',
name: 'Apple TV+',
color: '#000000',
logo: '<svg width="52.714" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#000" d="m11.043 3.2087a4.5135 4.5135 0 0 0 1.0298-3.2087 4.4105 4.4105 0 0 0-2.9372 1.5341 4.2385 4.2385 0 0 0-1.0532 3.0788 3.6721 3.6721 0 0 0 2.9606-1.4043m0.95957 1.6161c-1.6383-0.094787-3.0191 0.93617-3.8032 0.93617s-1.9777-0.88468-3.2649-0.86128a4.8178 4.8178 0 0 0-4.0957 2.5124c-1.7553 3.0426-0.46808 7.5748 1.2404 10.052 0.83085 1.1772 1.8255 2.5803 3.1479 2.5347 1.3223-0.04564 1.7319-0.81915 3.2415-0.81915 1.5096 0 1.9543 0.81915 3.2649 0.78989 1.3106-0.02926 2.2234-1.1796 3.0426-2.4574a10.903 10.903 0 0 0 1.3691-2.8319 4.4632 4.4632 0 0 1-2.6564-4.0583 4.5638 4.5638 0 0 1 2.1415-3.8102 4.6703 4.6703 0 0 0-3.6277-1.9894m10.45-2.3591v3.341h2.6681v2.2058h-2.6681v7.9048c0 1.1796 0.5266 1.7811 1.6968 1.7811a8.7555 8.7555 0 0 0 0.95957-0.07021v2.2234a9.1546 9.1546 0 0 1-1.5798 0.11702c-2.7617 0-3.8266-1.0731-3.8266-3.7634v-8.14h-2.0947v-2.2117h2.0362v-3.3854zm11.995 17.381h-2.9255l-4.9149-13.993h2.9138l3.4521 11.243h0.07021l3.4521-11.243h2.8553zm12.849 0h-2.5277v-5.734h-5.4298v-2.5253h5.4181v-5.734h2.5277v5.734h5.4298v2.5253h-5.4181z" stroke-width="1.1702"/></svg>',
value: 15,
enabled: true,
},
{
id: 'youtube',
name: 'YouTube',
color: '#FF0000',
logo: '<svg width="89.587" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -.00067283)"><g transform="matrix(.17639 0 0 .17639 0 .00055415)"><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m1189.5 717.6c-13.97 52.266-55.13 93.434-107.4 107.4-94.744 25.387-474.64 25.387-474.64 25.387s-379.89 0-474.63-25.387c-52.266-13.969-93.434-55.137-107.4-107.4-25.387-94.742-25.387-292.41-25.387-292.41s0-197.67 25.387-292.41c13.969-52.262 55.137-93.434 107.4-107.4 94.742-25.395 474.63-25.395 474.63-25.395s379.89 0 474.64 25.395c52.27 13.965 93.43 55.137 107.4 107.4 25.39 94.738 25.39 292.41 25.39 292.41s0 197.66-25.39 292.41" fill="#ff0000"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m485.94 242.97 315.62 182.23-315.62 182.23z" fill="#fff"/><g fill="#252323"><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m1898 160.16c6.65 17.363 9.99 45.742 9.99 85.125v165.94c0 38.223-3.34 66.161-9.99 83.832-6.66 17.661-18.39 26.5-35.18 26.5-16.22 0-27.67-8.839-34.32-26.5-6.66-17.671-9.99-45.609-9.99-83.832v-165.94c0-39.383 3.18-67.762 9.56-85.125 6.36-17.383 17.94-26.062 34.75-26.062 16.79 0 28.52 8.679 35.18 26.062zm-134.65-83.406c-24.05 16.199-41.14 41.402-51.26 75.586-10.14 34.16-15.2 79.629-15.2 136.39v77.321c0 57.336 5.78 103.39 17.37 138.13 11.58 34.75 29.67 60.082 54.3 76.015 24.61 15.922 56.9 23.891 96.87 23.891 39.38 0 70.94-8.114 94.69-24.324 23.74-16.215 41.12-41.563 52.13-76.016 10.99-34.465 16.5-80.363 16.5-137.7v-77.321c0-56.761-5.36-102.38-16.07-136.83-10.72-34.461-28.1-59.66-52.13-75.578-24.04-15.926-56.61-23.894-97.73-23.894-42.29 0-75.45 8.1172-99.47 24.328"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m3623.8 511.61c-6.07-7.531-10.14-19.839-12.16-36.918-2.04-17.089-3.03-43.003-3.03-77.753v-38.227h87.73v38.227c0 34.164-1.16 60.082-3.47 77.753-2.32 17.661-6.51 30.106-12.59 37.352-6.09 7.242-15.5 10.863-28.24 10.863-12.75 0-22.16-3.773-28.24-11.297zm-15.19-224.14v-26.934c0-34.18 0.99-59.805 3.03-76.883 2.02-17.089 6.21-29.543 12.6-37.367 6.37-7.808 16.2-11.726 29.54-11.726 17.94 0 30.26 6.953 36.92 20.859 6.65 13.898 10.27 37.062 10.85 69.504l103.39-6.086c0.58-4.648 0.87-11.016 0.87-19.109 0-49.239-13.46-86.02-40.4-110.34-26.92-24.316-65.02-36.484-114.24-36.484-59.07 0-100.49 18.527-124.23 55.606-23.76 37.051-35.63 94.394-35.63 172.01v92.964c0 79.926 12.31 138.27 36.93 175.06 24.61 36.774 66.75 55.164 126.41 55.164 41.11 0 72.68-7.531 94.69-22.586 22-15.07 37.5-38.527 46.48-70.371 8.98-31.859 13.47-75.883 13.47-132.06v-91.222h-200.68"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m1471.4 297.44-136.4 492.6h119.02l47.78-223.28c12.17-55.035 21.14-101.95 26.93-140.74h3.48c4.05 27.797 13.03 74.415 26.93 139.87l49.52 224.15h119.02l-138.13-492.6v-236.32h-118.15v236.32"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m2415.9 593.68v-532.55h-93.83l-10.43 65.156h-2.6c-25.49-49.226-63.72-73.836-114.68-73.836-35.33 0-61.39 11.57-78.19 34.746-16.8 23.152-25.19 59.364-25.19 108.59v397.9h119.89v-390.94c0-23.761 2.61-40.695 7.82-50.824 5.21-10.144 13.9-15.203 26.06-15.203 10.43 0 20.42 3.176 29.97 9.563 9.56 6.367 16.65 14.46 21.29 24.312v423.09h119.89"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m3030.8 593.68v-532.55h-93.83l-10.43 65.156h-2.59c-25.51-49.226-63.73-73.836-114.69-73.836-35.33 0-61.39 11.57-78.19 34.746-16.8 23.152-25.19 59.364-25.19 108.59v397.9h119.89v-390.94c0-23.761 2.6-40.695 7.81-50.824 5.22-10.144 13.91-15.203 26.07-15.203 10.43 0 20.42 3.176 29.97 9.563 9.56 6.367 16.65 14.46 21.29 24.312v423.09h119.89"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m2741.6 693.59h-119.02v-632.46h-117.28v632.46h-119.02v96.437h355.32v-96.437"/><path transform="matrix(.13333 0 0 -.13333 0 113.39)" d="m3317.7 291.32c0-38.808-1.61-69.218-4.79-91.218-3.18-22.024-8.54-37.657-16.07-46.914-7.53-9.27-17.68-13.899-30.4-13.899-9.86 0-18.98 2.305-27.37 6.953-8.41 4.629-15.2 11.575-20.42 20.852v302.33c4.05 14.469 11 26.348 20.85 35.617 9.85 9.254 20.55 13.899 32.14 13.899 12.17 0 21.57-4.782 28.24-14.332 6.65-9.555 11.29-25.629 13.9-48.223 2.61-22.582 3.92-54.727 3.92-96.426zm109.89 217.23c-7.25 33.582-18.98 57.906-35.19 72.976-16.22 15.047-38.52 22.582-66.89 22.582-22.01 0-42.57-6.23-61.68-18.675-19.11-12.457-33.89-28.821-44.31-49.09h-0.88l0.01 280.62h-115.54v-755.82h99.03l12.17 50.379h2.6c9.26-17.95 23.16-32.141 41.7-42.567 18.53-10.422 39.1-15.637 61.69-15.637 40.53 0 70.36 18.684 89.48 56.035 19.11 37.363 28.67 95.703 28.67 175.06v84.27c0 59.648-3.63 106.27-10.86 139.88"/></g></g></g></svg>',
value: 0,
enabled: false,
},
{
id: 'youtubetv',
name: 'YouTube TV',
color: '#FF0000',
logo: '<svg width="108.8" height="20" version="1.1" viewBox="0 0 28.787 5.2917" xmlns="http://www.w3.org/2000/svg"><g transform="translate(231.75 -327.07)"><g transform="matrix(.23529 0 0 .23529 -177.16 250.05)"><g stroke-width=".26458"><path class="wordmark" d="m-120.92 331.49h-3.1485v16.748h-3.0956v-16.748h-3.1485v-2.5665h9.3927zm0.68792-2.5665h3.3073l1.0319 8.6783c0.29105 2.4871 0.55563 4.6302 0.87313 7.5671h0.13229c0.29104-2.9369 0.58208-5.0271 0.87313-7.5671l1.0583-8.6783h3.2808l-3.175 19.288h-4.1804z"/><path d="m-200.56 330.85c-0.37042-1.4023-1.4552-2.4606-2.831-2.8575-2.5136-0.66146-12.568-0.66146-12.568-0.66146s-10.054 0-12.568 0.66146c-1.3758 0.37041-2.4606 1.4552-2.831 2.8575-0.66146 2.5135-0.66146 7.7258-0.66146 7.7258s0 5.2388 0.66146 7.7258c0.39687 1.4023 1.4552 2.4871 2.8575 2.8575 2.4871 0.66146 12.541 0.66146 12.541 0.66146s10.054 0 12.568-0.66146c1.3758-0.37041 2.4606-1.4552 2.8575-2.831 0.66145-2.5135 0.66145-7.7258 0.66145-7.7258s-0.0264-5.2388-0.68791-7.7523z" fill="#f00"/><path d="m-219.16 343.39 8.3608-4.8154-8.3608-4.8154z" fill="#fff"/><path class="wordmark" d="m-185.37 347.81c-0.68792-0.47625-1.1642-1.1906-1.3494-2.0108-0.29105-1.1906-0.42334-2.3812-0.39688-3.5983v-2.0373c-0.0265-1.2435 0.13229-2.4606 0.47625-3.6512 0.23813-0.82021 0.74083-1.5346 1.4288-2.0108 0.76729-0.44979 1.6669-0.66146 2.5665-0.635 1.0319 0 1.8785 0.21166 2.5135 0.635 0.66146 0.50271 1.1642 1.1906 1.3758 2.0108 0.3175 1.1906 0.47625 2.4077 0.42334 3.6512v2.0373c0.0265 1.2171-0.10584 2.4342-0.42334 3.6248-0.21166 0.82021-0.68791 1.5081-1.3758 2.0108-0.635 0.42333-1.5081 0.635-2.5929 0.635-1.1112-0.0265-2.0108-0.23813-2.6458-0.66146zm3.5719-2.2225c0.1852-0.44979 0.26458-1.2171 0.26458-2.249v-4.3656c0.0265-0.74084-0.0529-1.5081-0.26458-2.2225-0.10584-0.42334-0.50271-0.71438-0.92605-0.71438-0.42333 0-0.79375 0.29104-0.89958 0.71438-0.21167 0.71437-0.29104 1.4817-0.26458 2.2225v4.3921c0 1.0319 0.0794 1.7992 0.26458 2.249 0.10583 0.42333 0.47625 0.71437 0.92604 0.68791 0.42334 0 0.79375-0.29104 0.89959-0.71437zm45.27-3.3602v0.71438c0 0.68791 0.0265 1.3494 0.0794 2.0373 0.0265 0.34396 0.13229 0.68791 0.34396 0.97896 0.21166 0.21166 0.50271 0.34395 0.79375 0.3175 0.39687 0.0264 0.79375-0.18521 0.97896-0.55563 0.1852-0.37042 0.26458-0.97896 0.29104-1.8521l2.7252 0.18521c0.0265 0.15875 0.0265 0.34395 0.0265 0.5027 0 1.2965-0.34395 2.2754-1.0583 2.9104-0.71437 0.635-1.7198 0.9525-3.0162 0.9525-1.561 0-2.6458-0.50271-3.2808-1.4817-0.635-0.97895-0.9525-2.4871-0.9525-4.5508v-2.4606c0-2.1167 0.3175-3.6512 0.97896-4.6302 0.66145-0.97896 1.7727-1.4552 3.3338-1.4552 1.0848 0 1.9314 0.21167 2.5135 0.60854 0.60854 0.44979 1.0583 1.1112 1.2435 1.8521 0.26458 1.1377 0.39687 2.3283 0.34396 3.4925v2.4077zm0.39688-5.9267c-0.18521 0.29105-0.3175 0.635-0.3175 0.97896-0.0529 0.68792-0.0794 1.3758-0.0794 2.0638v1.0054h2.3283v-1.0054c0-0.68791-0.0265-1.3758-0.10584-2.0638-0.0265-0.34396-0.13229-0.68791-0.34395-0.97896-0.18521-0.21166-0.47625-0.3175-0.74084-0.29104-0.29104-0.0265-0.55562 0.0794-0.74083 0.29104zm-56.965 5.6621-3.5983-13.044h3.1486l1.27 5.9002c0.3175 1.4552 0.55562 2.6988 0.71437 3.7306h0.10583c0.10584-0.74083 0.34396-1.9579 0.71438-3.7042l1.3229-5.9267h3.1485l-3.6512 13.044v6.2706h-3.1485v-6.2706zm25.003-7.8317v14.102h-2.4871l-0.26458-1.7198h-0.0794c-0.66146 1.2965-1.6933 1.9579-3.0427 1.9579-0.92604 0-1.614-0.3175-2.0638-0.92604-0.44979-0.60855-0.66146-1.561-0.66146-2.884v-10.53h3.175v10.345c-0.0265 0.44979 0.0529 0.92604 0.21167 1.3494 0.13229 0.26459 0.39688 0.42334 0.68792 0.39688 0.29104 0 0.55562-0.10583 0.79375-0.26458 0.23812-0.15875 0.44979-0.37042 0.55562-0.635v-11.192zm16.272 0v14.102h-2.4871l-0.26458-1.7198h-0.0794c-0.66146 1.2965-1.6933 1.9579-3.0427 1.9579-0.92604 0-1.614-0.3175-2.0638-0.92604-0.44979-0.60855-0.66146-1.561-0.66146-2.884v-10.53h3.175v10.345c-0.0265 0.44979 0.0529 0.92604 0.21167 1.3494 0.13229 0.26459 0.39687 0.42334 0.68791 0.39688 0.29104 0 0.55563-0.10583 0.79375-0.26458 0.23813-0.15875 0.44979-0.37042 0.55563-0.635v-11.192z"/><path class="wordmark" d="m-159.47 331.49h-3.1485v16.748h-3.0956v-16.748h-3.1485v-2.5665h9.3927zm18.15 4.8948c-0.18521-0.87313-0.50271-1.5346-0.92605-1.9315a2.5876 2.5876 0 0 0-1.7727-0.60854c-0.58209 0-1.1377 0.15875-1.6404 0.50271-0.50271 0.3175-0.89958 0.76729-1.1642 1.2965h-0.0265v-7.4348h-3.0427v20.029h2.6194l0.3175-1.3229h0.0794c0.23812 0.47625 0.635 0.87312 1.1112 1.1377 0.5027 0.26459 1.0583 0.42334 1.6404 0.42334 1.0054 0.0265 1.9579-0.55563 2.3812-1.4817 0.50271-0.97896 0.76729-2.54 0.76729-4.6302v-2.2225c-0.0264-1.2965-0.13229-2.54-0.34395-3.7571zm-2.9104 5.7415c0 0.79375-0.0265 1.614-0.13229 2.4077-0.0265 0.44979-0.18521 0.87312-0.42334 1.2435-0.1852 0.23812-0.47625 0.37041-0.79375 0.37041-0.26458 0-0.5027-0.0529-0.71437-0.1852s-0.39688-0.3175-0.52917-0.55563v-7.9904c0.10584-0.37041 0.29104-0.68791 0.55563-0.9525 0.21166-0.23812 0.52916-0.37041 0.84666-0.37041 0.29105 0 0.58209 0.13229 0.74084 0.37041 0.21166 0.39688 0.34396 0.82021 0.37041 1.27 0.0794 0.84667 0.10584 1.6933 0.10584 2.54z"/></g></g></g></svg>',
value: 0,
enabled: false,
},
];
while (services.firstChild) {
services.removeChild(services.firstChild);
}
for (let service in streamingServices) {
let randomValue = Math.min(89, Math.max(0, streamingServices[service].value + Math.floor(Math.random() * 31) - 15));
addService(streamingServices[service].name, streamingServices[service].id, streamingServices[service].color, streamingServices[service].logo, streamingServices[service].enabled, randomValue);
}
updateChart();
}
// remove all of the exising services and add the hard-coded social media services to the DOM
function resetToSocialMediaServices() {
const socialMediaServices = [
{
id: 'facebook',
name: 'Facebook',
color: '#0866ff',
logo: '<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="m0 700h700v-700h-700z"/></clipPath></defs><g transform="matrix(.04 0 0 -.04 -4 24)"><g><g clip-path="url(#a)"><g transform="translate(600,350)"><path d="m0 0c0 138.07-111.93 250-250 250s-250-111.93-250-250c0-117.24 80.715-215.62 189.61-242.64v166.24h-51.552v76.396h51.552v32.919c0 85.092 38.508 124.53 122.05 124.53 15.838 0 43.167-3.105 54.347-6.211v-69.254c-5.901 0.621-16.149 0.932-28.882 0.932-40.993 0-56.832-15.528-56.832-55.9v-27.018h81.659l-14.028-76.396h-67.631v-171.77c123.79 14.951 219.71 120.35 219.71 248.17" fill="#0866ff"/></g><g transform="translate(447.92 273.6)"><path d="m0 0 14.029 76.396h-81.659v27.019c0 40.372 15.838 55.899 56.831 55.899 12.733 0 22.981-0.31 28.882-0.931v69.253c-11.18 3.106-38.509 6.212-54.347 6.212-83.539 0-122.05-39.441-122.05-124.53v-32.919h-51.552v-76.396h51.552v-166.24c19.343-4.798 39.568-7.362 60.394-7.362 10.254 0 20.358 0.632 30.288 1.831v171.77z" fill="#fff"/></g></g></g></g></svg>',
value: 15,
enabled: true,
},
{
id: 'instagram',
name: 'Instagram',
color: '#833AB4',
logo: '<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#E1306C" d="m5.8584 0.069938c-1.064 0.0502-1.7906 0.22-2.4258 0.4696-0.6574 0.2562-1.2146 0.6-1.769 1.1564s-0.8958 1.114-1.1502 1.7724c-0.2462 0.6366-0.413 1.3638-0.46 2.4284s-0.0574 1.4068-0.0522 4.1224c0.0052 2.7156 0.0172 3.056 0.0688 4.1228 0.0508 1.0638 0.22 1.7902 0.4696 2.4256 0.2566 0.6574 0.6 1.2144 1.1566 1.769s1.1138 0.8952 1.7738 1.15c0.636 0.2458 1.3634 0.4134 2.4278 0.46 1.0644 0.0466 1.407 0.0574 4.1218 0.0522 2.7148-0.0052 3.0566-0.0172 4.1232-0.0678 1.0666-0.0506 1.7892-0.221 2.4248-0.4694 0.6574-0.2572 1.2148-0.6 1.769-1.1568s0.8954-1.1148 1.1496-1.7736c0.2464-0.636 0.4138-1.3634 0.46-2.427 0.0466-1.0674 0.0576-1.4082 0.0524-4.1234-0.0052-2.7152-0.0174-3.0556-0.068-4.122s-0.22-1.7906-0.4694-2.4264c-0.257-0.6574-0.6-1.214-1.1564-1.769-0.5564-0.555-1.1148-0.896-1.7734-1.1496-0.6364-0.2462-1.3634-0.414-2.4278-0.46-1.0644-0.046-1.407-0.0578-4.1228-0.0526-2.7158 0.0052-3.0558 0.0168-4.1224 0.0688m0.1168 18.078c-0.975-0.0424-1.5044-0.2044-1.8572-0.34-0.4672-0.18-0.8-0.3976-1.1516-0.7458s-0.5676-0.6822-0.75-1.1484c-0.137-0.3528-0.302-0.8816-0.3476-1.8566-0.0496-1.0538-0.06-1.3702-0.0658-4.04-0.0058-2.6698 0.0044-2.9858 0.0506-4.04 0.0416-0.9742 0.2046-1.5042 0.34-1.8568 0.18-0.4678 0.3968-0.8 0.7458-1.1514s0.682-0.5678 1.1486-0.7502c0.3524-0.1376 0.8812-0.3012 1.8558-0.3476 1.0546-0.05 1.3706-0.06 4.04-0.0658 2.6694-0.0058 2.9862 0.0042 4.0412 0.0506 0.9742 0.0424 1.5044 0.2038 1.8566 0.34 0.4674 0.18 0.8 0.3962 1.1514 0.7458 0.3514 0.3496 0.568 0.6814 0.7504 1.149 0.1378 0.3514 0.3014 0.88 0.3474 1.8552 0.0502 1.0546 0.0616 1.3708 0.0664 4.04 0.0048 2.6692-0.0046 2.9862-0.0508 4.04-0.0426 0.975-0.2042 1.5046-0.34 1.8578-0.18 0.467-0.397 0.8-0.7462 1.1512-0.3492 0.3512-0.6818 0.5676-1.1486 0.75-0.352 0.1374-0.8814 0.3014-1.8552 0.3478-1.0546 0.0496-1.3706 0.06-4.041 0.0658-2.6704 0.0058-2.9854-5e-3 -4.04-0.0506m8.152-13.492a1.2 1.2 0 1 0 1.1976-1.202 1.2 1.2 0 0 0-1.1976 1.202m-9.262 5.3546c0.0056 2.836 2.3088 5.1298 5.1442 5.1244 2.8354-0.0054 5.1308-2.3084 5.1254-5.1444-0.0054-2.836-2.3092-5.1304-5.145-5.1248-2.8358 0.0056-5.13 2.3092-5.1246 5.1448m1.8012-0.0036a3.3334 3.3334 0 1 1 3.34 3.3268 3.333 3.333 0 0 1-3.34-3.3268" stroke-width=".02"/></svg>',
value: 5,
enabled: true,
},
{
id: 'tiktok',
name: 'TikTok',
color: '#FF0050',
logo: '<svg width="17.672" height="20" version="1.1" viewBox="0 0 4.6758 5.2917" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="h"><path transform="translate(-260.18,-342.9)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="i"><path transform="translate(-263.09,-163.06)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="j"><path transform="translate(-460.44,-394.58)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="k"><path transform="translate(-409.59,-425.46)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="l"><path transform="translate(-243.53,-293.79)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="m"><path transform="translate(-460.44,-395.38)" d="m0 600h600v-600h-600z"/></clipPath><clipPath id="n"><path transform="translate(-367.06,-236.86)" d="m0 600h600v-600h-600z"/></clipPath></defs><g transform="translate(-78.052,-11.642)"><g transform="matrix(.036818 0 0 .036818 75.178 11.213)"><g fill="#25f4ee"><path transform="matrix(.35278 0 0 -.35278 127.5 68.372)" d="m0 0v16.286c-5.453 0.742-10.993 1.206-16.646 1.206-68.117 0-123.53-55.417-123.53-123.53 0-41.794 20.881-78.778 52.737-101.14-20.56 22.073-32.763 51.64-32.763 84.114 0 67.137 53.434 121.51 120.2 123.07" clip-path="url(#h)"/><path transform="matrix(.35278 0 0 -.35278 128.53 131.81)" d="m0 0c30.391 0 55.537 24.522 56.665 54.644l0.256 268.59 48.708-0.018-0.075 0.404c-1.024 5.526-1.585 11.212-1.585 17.03h-67.115l-0.108-268.97c-1.129-30.12-25.918-54.295-56.309-54.295-9.445 0-18.34 2.361-26.17 6.482 10.254-14.211 26.91-23.861 45.733-23.861" clip-path="url(#i)"/><path transform="matrix(.35278 0 0 -.35278 198.15 50.14)" d="m0 0v15.757c-18.745 0-36.205 5.573-50.848 15.12 13.037-14.975 30.747-26.573 50.848-30.877" clip-path="url(#j)"/></g><g fill="#fe2c55"><path transform="matrix(.35278 0 0 -.35278 180.21 39.247)" d="m0 0c-14.284 16.405-22.963 37.813-22.963 61.222h-18.285c4.734-25.573 20.219-47.511 41.248-61.222" clip-path="url(#k)"/><path transform="matrix(.35278 0 0 -.35278 121.63 85.697)" d="m0 0c-31.107 0-56.791-25.82-56.791-56.93 0-21.662 12.664-40.484 30.621-49.934-6.692 9.274-10.684 20.619-10.684 32.904 0 31.108 25.31 56.418 56.417 56.418 5.807 0 11.378-0.958 16.647-2.608v68.516c-5.453 0.742-10.993 1.207-16.647 1.207-0.978 0-1.944-0.052-2.917-0.074l-0.258-0.013-0.182-51.864c-5.269 1.65-10.399 2.378-16.206 2.378" clip-path="url(#l)"/><path transform="matrix(.35278 0 0 -.35278 198.15 49.856)" d="m0 0-0.312 0.061-0.016-51.822c-34.8 0-67.135 11.454-93.458 30.348l0.021-137.11c0-68.118-55.024-123.19-123.14-123.19-26.323 0-50.73 7.96-70.795 22.046 22.569-24.226 54.715-39.419 90.358-39.419 68.116 0 123.53 55.415 123.53 123.53v136.39c26.324-18.894 58.574-30.027 93.374-30.027v67.115c-6.709 0-13.251 0.726-19.563 2.078" clip-path="url(#m)"/></g><path transform="matrix(.35278 0 0 -.35278 165.21 105.78)" d="m0 0v136.39c26.323-18.894 58.573-30.027 93.373-30.027v52.162c-20.101 4.303-37.81 15.098-50.848 30.073-21.029 13.711-36.206 35.649-40.94 61.221h-49.137l-0.108-268.97c-1.128-30.121-25.918-54.295-56.309-54.295-18.823 0-35.479 9.301-45.733 23.512-17.957 9.451-30.247 28.273-30.247 49.935 0 31.109 25.31 56.418 56.417 56.418 5.807 0 11.377-0.957 16.647-2.607v52.618c-66.77-1.56-120.62-56.322-120.62-123.46 0-32.474 12.613-62.041 33.173-84.114 20.065-14.085 44.472-22.388 70.795-22.388 68.116 0 123.53 55.415 123.53 123.53" clip-path="url(#n)"/></g></g></svg>',
value: 80,
enabled: true,
},
{
id: 'x',
name: '𝕏',
color: '#000000',
logo: '<svg width="22.148" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m17.498 0h3.3948l-7.4539 8.4871 8.7085 11.513h-6.8339l-5.3506-6.9963-6.1255 6.9963h-3.3948l7.8967-9.0775-8.3395-10.923h7.0037l4.8339 6.3911zm-1.1882 18.007h1.8819l-12.177-16.089h-2.0221z" stroke-width=".073801"/></svg>',
value: 45,
enabled: true,
},
{
id: 'threads',
name: 'Threads',
color: '#000000',
logo: '<svg width="17.546" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.02 0 0 .02 -.006 0)"><path d="m446.7 1e3h-0.3c-149.2-1-263.9-50.2-341-146.2-68.5-85.5-103.9-204.4-105.1-353.4v-0.7c1.2-149.1 36.6-267.9 105.2-353.4 77-96.1 191.8-145.3 340.9-146.3h0.6c114.4 0.8 210.1 30.2 284.4 87.4 69.9 53.8 119.1 130.4 146.2 227.8l-85 23.7c-46-165-162.4-249.3-346-250.6-121.2 0.9-212.9 39-272.5 113.2-55.7 69.5-84.5 169.9-85.6 298.5 1.1 128.6 29.9 229 85.7 298.5 59.6 74.3 151.3 112.4 272.5 113.2 109.3-0.8 181.6-26.3 241.7-85.2 68.6-67.2 67.4-149.7 45.4-199.9-12.9-29.6-36.4-54.2-68.1-72.9-8 56.3-25.9 101.9-53.5 136.3-36.9 45.9-89.2 71-155.4 74.6-50.1 2.7-98.4-9.1-135.8-33.4-44.3-28.7-70.2-72.5-73-123.5-2.7-49.6 17-95.2 55.4-128.4 36.7-31.7 88.3-50.3 149.3-53.8 44.9-2.5 87-0.5 125.8 5.9-5.2-30.9-15.6-55.5-31.2-73.2-21.4-24.4-54.5-36.8-98.3-37.1h-1.2c-35.2 0-83 9.7-113.4 55l-73.2-49.1c40.8-60.6 107-94 186.6-94h1.8c133.1 0.8 212.4 82.3 220.3 224.5 4.5 1.9 9 3.9 13.4 5.9 62.1 29.2 107.5 73.4 131.4 127.9 33.2 75.9 36.3 199.6-64.5 298.3-77.1 75.4-170.6 109.5-303.2 110.4zm41.8-487.1c-10.1 0-20.3 0.3-30.8 0.9-76.5 4.3-124.2 39.4-121.5 89.3 2.8 52.3 60.5 76.6 116 73.6 51-2.7 117.4-22.6 128.6-154.6-28.2-6.1-59.1-9.2-92.3-9.2z"/></g></svg>',
value: 45,
enabled: true,
},
{
id: 'mastodon',
name: 'Mastodon',
color: '#6364FF',
logo: '<svg width="17.614" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m18.116 4.4277c-0.28911-2.1489-2.162-3.8424-4.3821-4.1704-0.37458-0.055449-1.7938-0.25725-5.0812-0.25725h-0.024554c-3.2886 0-3.9938 0.2018-4.3686 0.25725-2.1584 0.31907-4.1295 1.8408-4.6077 4.015-0.23002 1.0708-0.25457 2.258-0.21184 3.3471 0.060913 1.5617 0.072732 3.1206 0.21456 4.676 0.098052 1.0331 0.2691 2.058 0.51187 3.067 0.45458 1.8635 2.2948 3.4141 4.0975 4.0467 1.9302 0.65978 4.0061 0.76932 5.995 0.31634 0.2188-0.05089 0.43489-0.10997 0.64824-0.17726 0.48366-0.1536 1.0501-0.32541 1.4665-0.6272 0.0057-0.0042 0.0104-0.0097 0.01369-0.016 0.0033-0.0063 0.0052-0.01326 0.0054-0.02037v-1.5071c-1.23e-4 -0.0066-0.0017-0.01317-0.0046-0.01914-3e-3 -0.0059-0.0072-0.01117-0.01243-0.01526-0.0052-0.0041-0.01132-7e-3 -0.01782-0.0084s-0.0132-0.0014-0.01966 6.2e-5c-1.2743 0.30437-2.5802 0.45692-3.8904 0.45452-2.2547 0-2.8611-1.0699-3.0348-1.5153-0.1396-0.38495-0.22824-0.78652-0.26366-1.1945-3.693e-4 -0.0068 8.923e-4 -0.01369 0.00366-0.01997 0.00277-0.0062 0.00698-0.01178 0.012308-0.01612 0.00532-0.0043 0.011569-0.0074 0.018277-0.0088 0.00671-0.0015 0.013661-0.0013 0.020308 4e-4 1.2531 0.30228 2.5376 0.45483 3.8267 0.45449 0.31 0 0.61913 0 0.92916-0.0082 1.2965-0.03637 2.6629-0.10271 3.9384-0.35178 0.03181-0.0064 0.06366-0.01182 0.09092-0.02 2.012-0.38634 3.9267-1.5989 4.1212-4.6695 0.0073-0.12089 0.02545-1.2662 0.02545-1.3917 8.92e-4 -0.42634 0.13729-3.0243-0.02-4.6206z" fill="#6364FF" stroke-width=".30769"/><path d="m14.928 6.8421v5.3387h-2.1156v-5.1815c0-1.0908-0.45458-1.6471-1.3792-1.6471-1.0165 0-1.5256 0.65812-1.5256 1.958v2.8361h-2.1029v-2.8361c0-1.2999-0.51006-1.958-1.5265-1.958-0.91916 0-1.3783 0.5563-1.3783 1.6471v5.1815h-2.1147v-5.3387c0-1.0908 0.27852-1.9574 0.83553-2.5998 0.57461-0.64086 1.3283-0.9699 2.2638-0.9699 1.0828 0 1.9011 0.4163 2.4466 1.2481l0.5264 0.88356 0.52732-0.88356c0.5455-0.83175 1.3637-1.2481 2.4448-1.2481 0.93464 0 1.6883 0.32904 2.2647 0.9699 0.55643 0.64175 0.83433 1.5084 0.83372 2.5998z" fill="#fff" stroke-width=".30769"/></svg>',
value: 0,
enabled: true,
},
{
id: 'bluesky',
name: 'Bluesky',
color: '#1185FE',
logo: '<svg width="22.715" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m4.9238 1.3462c2.6042 1.9551 5.4053 5.9192 6.4338 8.0465 1.0285-2.1272 3.8295-6.0915 6.4338-8.0465 1.8791-1.4107 4.9236-2.5022 4.9236 0.97106 0 0.69366-0.3977 5.8271-0.63096 6.6605-0.8108 2.8975-3.7653 3.6365-6.3934 3.1892 4.5939 0.78186 5.7625 3.3717 3.2387 5.9615-4.7932 4.9185-6.8892-1.2341-7.4266-2.8106-0.09846-0.28902-0.14453-0.42422-0.14521-0.30925-6.81e-4 -0.11497-0.04675 0.02023-0.14521 0.30925-0.53709 1.5765-2.6331 7.7293-7.4266 2.8106-2.5238-2.5898-1.3552-5.1798 3.2387-5.9615-2.6282 0.44728-5.5827-0.29173-6.3934-3.1892-0.23326-0.83348-0.63096-5.9669-0.63096-6.6605 0-3.4733 3.0446-2.3818 4.9236-0.97106z" fill="#1185fe" stroke-width=".039163"/></svg>',
value: 30,
enabled: true,
},
{
id: 'reddit',
name: 'Reddit',
color: '#FF4500',
logo: '<svg width="20" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1 {fill: #fff;} .cls-1, .cls-2 {stroke-width: 0px;} .cls-2 {fill: #ff4500;}</style></defs><g transform="scale(.078125)"><path class="cls-2" d="m128 0c-70.69 0-128 57.31-128 128 0 35.35 14.33 67.35 37.49 90.51l-24.38 24.38c-4.84 4.84-1.41 13.11 5.43 13.11h109.46c70.69 0 128-57.31 128-128s-57.31-128-128-128z"/><path class="cls-1" d="m154.04 60.36c2.22 9.41 10.67 16.42 20.76 16.42 11.78 0 21.33-9.55 21.33-21.33s-9.55-21.33-21.33-21.33c-10.3 0-18.89 7.3-20.89 17.01-17.25 1.85-30.72 16.48-30.72 34.21v0.11c-18.76 0.79-35.89 6.13-49.49 14.56-5.05-3.91-11.39-6.24-18.27-6.24-16.51 0-29.89 13.38-29.89 29.89 0 11.98 7.04 22.3 17.21 27.07 0.99 34.7 38.8 62.61 85.31 62.61s84.37-27.94 85.31-62.67c10.09-4.8 17.07-15.09 17.07-27 0-16.51-13.38-29.89-29.89-29.89-6.85 0-13.16 2.31-18.2 6.19-13.72-8.49-31.04-13.83-49.99-14.54v-0.08c0-12.7 9.44-23.24 21.68-24.97zm-81.54 82.27c0.5-10.84 7.7-19.16 16.07-19.16s14.77 8.79 14.27 19.63-6.75 14.78-15.13 14.78-15.71-4.41-15.21-15.25zm95.06-19.16c8.38 0 15.58 8.32 16.07 19.16 0.5 10.84-6.84 15.25-15.21 15.25s-14.63-3.93-15.13-14.78c-0.5-10.84 5.89-19.63 14.27-19.63zm-9.96 44.24c1.57 0.16 2.57 1.79 1.96 3.25-5.15 12.31-17.31 20.96-31.5 20.96s-26.34-8.65-31.5-20.96c-0.61-1.46 0.39-3.09 1.96-3.25 9.2-0.93 19.15-1.44 29.54-1.44s20.33 0.51 29.54 1.44z"/></g></svg>',
value: 45,
enabled: true,
},
{
id: 'tumblr',
name: 'Tumblr',
color: '#35465C',
logo: '<svg width="11.324" height="20" version="1.1" viewBox="0 0 2.9964 5.2916" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.2646 0 0 .2646 -26.323 -20.513)"><path d="m107.47 97.523c-3.0132 0-5.248-1.5443-5.248-5.248v-5.9259h-2.737v-3.2141c3.0132-0.77841 4.2687-3.3647 4.4068-5.6121h3.1262v5.0973h3.6409v3.7288h-3.6409v5.1601c0 1.5443 0.77841 2.0841 2.0213 2.0841h1.7702v3.9297z" stroke-width=".12555"/></g></svg>',
value: 15,
enabled: true,
},
{
id: 'snapchat',
name: 'Snapchat',
color: '#FFFC00',
logo: '<svg width="20.306" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.051882 0 0 .051882 -2.8174 -2.8701)" ><path fill="#fff" d="m417.93 340.71c-60.61-29.34-70.27-74.64-70.7-78-0.52-4.07-1.11-7.27 3.38-11.41 4.33-4 23.54-15.89 28.87-19.61 8.81-6.16 12.69-12.31 9.83-19.87-2-5.23-6.87-7.2-12-7.2a22.3 22.3 0 0 0-4.81 0.54c-9.68 2.1-19.08 6.95-24.52 8.26a8.56 8.56 0 0 1-2 0.27c-2.9 0-4-1.29-3.72-4.78 0.68-10.58 2.12-31.23 0.45-50.52-2.29-26.54-10.85-39.69-21-51.32-4.91-5.64-27.71-29.87-71.71-29.87s-66.77 24.23-71.65 29.8c-10.18 11.63-18.73 24.78-21 51.32-1.67 19.29-0.17 39.93 0.45 50.52 0.2 3.32-0.82 4.78-3.72 4.78a8.64 8.64 0 0 1-2-0.27c-5.43-1.31-14.83-6.16-24.51-8.26a22.3 22.3 0 0 0-4.81-0.54c-5.15 0-10 2-12 7.2-2.86 7.56 1 13.71 9.84 19.87 5.33 3.72 24.54 15.6 28.87 19.61 4.48 4.14 3.9 7.34 3.38 11.41-0.43 3.41-10.1 48.71-70.7 78-3.55 1.72-9.59 5.36 1.06 11.24 16.72 9.24 27.85 8.25 36.5 13.82 7.34 4.73 3 14.93 8.34 18.61 6.56 4.53 25.95-0.32 51 7.95 21 6.92 33.76 26.47 71 26.47s50.37-19.64 71-26.47c25-8.27 44.43-3.42 51-7.95 5.33-3.68 1-13.88 8.34-18.61 8.65-5.57 19.77-4.58 36.5-13.82 10.63-5.81 4.59-9.45 1.04-11.17z"/><path d="m444.3 337.26c-2.72-7.4-7.9-11.36-13.8-14.64-1.11-0.65-2.13-1.17-3-1.57-1.76-0.91-3.56-1.79-5.35-2.72-18.39-9.75-32.75-22.05-42.71-36.63a83.06 83.06 0 0 1-7.33-13c-0.85-2.43-0.81-3.81-0.2-5.07a8.25 8.25 0 0 1 2.35-2.45c3.16-2.09 6.42-4.21 8.63-5.64 3.94-2.55 7.06-4.57 9.07-6 7.55-5.28 12.83-10.89 16.13-17.16a34.17 34.17 0 0 0 1.69-28.38c-5-13.16-17.43-21.33-32.49-21.33a44.75 44.75 0 0 0-9.45 1c-0.83 0.18-1.66 0.37-2.47 0.58 0.14-9-0.06-18.5-0.86-27.85-2.84-32.87-14.35-50.1-26.35-63.84a105 105 0 0 0-26.79-21.56c-18.21-10.4-38.86-15.68-61.37-15.68s-43.06 5.28-61.29 15.68a104.62 104.62 0 0 0-26.84 21.6c-12 13.74-23.51 31-26.35 63.84-0.8 9.35-1 18.9-0.87 27.85-0.81-0.21-1.63-0.4-2.46-0.58a44.75 44.75 0 0 0-9.45-1c-15.07 0-27.52 8.17-32.5 21.33a34.21 34.21 0 0 0 1.65 28.41c3.31 6.27 8.59 11.88 16.14 17.16 2 1.4 5.13 3.42 9.07 6 2.13 1.38 5.24 3.4 8.29 5.42a8.9 8.9 0 0 1 2.66 2.67c0.64 1.31 0.66 2.72-0.29 5.32a82.29 82.29 0 0 1-7.21 12.73c-9.74 14.25-23.68 26.33-41.48 36-9.43 5-19.23 8.34-23.37 19.59-3.12 8.49-1.08 18.15 6.85 26.29a39.63 39.63 0 0 0 10 7.57 108.35 108.35 0 0 0 24.47 9.79 16.16 16.16 0 0 1 4.94 2.21c2.89 2.53 2.48 6.34 6.33 11.92a27.8 27.8 0 0 0 7.24 7.36c8.08 5.58 17.16 5.93 26.78 6.3 8.69 0.33 18.54 0.71 29.79 4.42 4.66 1.54 9.5 4.52 15.11 8 13.47 8.28 31.91 19.61 62.77 19.61s49.43-11.39 63-19.7c5.57-3.42 10.38-6.37 14.91-7.87 11.25-3.72 21.1-4.09 29.79-4.42 9.62-0.37 18.7-0.72 26.78-6.3a27.89 27.89 0 0 0 8.24-9c2.77-4.71 2.7-8 5.3-10.3a15.32 15.32 0 0 1 4.64-2.12 108.76 108.76 0 0 0 24.8-9.88 39 39 0 0 0 10.5-8.22l0.1-0.12c7.44-7.96 9.31-17.34 6.26-25.62zm-27.43 14.74c-16.73 9.24-27.85 8.25-36.5 13.82-7.35 4.73-3 14.93-8.34 18.61-6.56 4.53-25.95-0.32-51 7.95-20.66 6.83-33.84 26.47-71 26.47s-50.03-19.6-71.03-26.52c-25-8.27-44.43-3.42-51-7.95-5.33-3.68-1-13.88-8.34-18.61-8.66-5.57-19.78-4.58-36.5-13.77-10.65-5.88-4.61-9.52-1.06-11.24 60.6-29.34 70.27-74.64 70.7-78 0.52-4.07 1.1-7.27-3.38-11.41-4.33-4-23.54-15.89-28.87-19.61-8.82-6.16-12.7-12.31-9.84-19.87 2-5.23 6.88-7.2 12-7.2a22.3 22.3 0 0 1 4.81 0.54c9.68 2.1 19.08 6.95 24.51 8.26a8.64 8.64 0 0 0 2 0.27c2.9 0 3.92-1.46 3.72-4.78-0.62-10.59-2.12-31.23-0.45-50.52 2.29-26.54 10.84-39.69 21-51.32 4.88-5.59 27.81-29.82 71.66-29.82s66.84 24.13 71.72 29.7c10.17 11.63 18.73 24.78 21 51.32 1.67 19.29 0.23 39.94-0.45 50.52-0.23 3.49 0.82 4.78 3.72 4.78a8.56 8.56 0 0 0 2-0.27c5.44-1.31 14.84-6.16 24.52-8.26a22.3 22.3 0 0 1 4.81-0.54c5.15 0 10 2 12 7.2 2.86 7.56-1 13.71-9.83 19.87-5.33 3.72-24.54 15.6-28.87 19.61-4.49 4.14-3.9 7.34-3.38 11.41 0.43 3.41 10.09 48.71 70.7 78 3.58 1.79 9.62 5.43-1.03 11.36z"/></g></svg>',
value: 15,
enabled: true,
},
{
id: 'discord',
name: 'Discord',
color: '#5865F2',
logo: '<svg width="26.389" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="m22.354 1.675a21.824 21.824 0 0 0-5.4442-1.675 14.956 14.956 0 0 0-0.69738 1.4176 20.274 20.274 0 0 0-6.0419 0 15.021 15.021 0 0 0-0.69738-1.4176 21.978 21.978 0 0 0-5.4483 1.6791c-3.4454 5.0976-4.3794 10.068-3.9124 14.969a21.945 21.945 0 0 0 6.677 3.352 16.127 16.127 0 0 0 1.4301-2.3059 14.201 14.201 0 0 1-2.252-1.0751c0.18888-0.13699 0.3736-0.27812 0.5521-0.41511a15.685 15.685 0 0 0 13.35 0c0.18057 0.14736 0.3653 0.2885 0.5521 0.41511a14.255 14.255 0 0 1-2.2561 1.0772 15.982 15.982 0 0 0 1.4301 2.3039 21.845 21.845 0 0 0 6.6812-3.3499c0.54795-5.6829-0.93607-10.608-3.9228-14.975zm-13.543 11.959c-1.3014 0-2.3765-1.181-2.3765-2.6339 0-1.4529 1.0378-2.6443 2.3724-2.6443 1.3346 0 2.4014 1.1914 2.3786 2.6443-0.02283 1.4529-1.0482 2.6339-2.3744 2.6339zm8.7671 0c-1.3034 0-2.3744-1.181-2.3744-2.6339 0-1.4529 1.0378-2.6443 2.3744-2.6443s2.3952 1.1914 2.3724 2.6443c-0.02283 1.4529-1.0461 2.6339-2.3724 2.6339z" fill="#5865f2" stroke-width=".20756"/></svg>',
value: 10,
enabled: false,
},
{
id: 'linkedin',
name: 'LinkedIn',
color: '#0A66C2',
logo: '<svg width="20" height="20" version="1.1" viewBox="0 0 5.2917 5.2917" xmlns="http://www.w3.org/2000/svg"><metadata><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><g transform="translate(-27.063 202.29)"><g class="scaling-icon" transform="matrix(3.1498 0 0 3.1498 -171.37 -202.29)" stroke-width=".084"><g class="logo-21dp" stroke-width=".084"><g class="dpi-1" stroke-width=".084"><g class="inbug" transform="matrix(.08 0 0 .08 57.96 0)" fill-rule="evenodd" stroke-width=".084"><path class="bug-text-color" d="M 82.479,0 H 64.583 C 63.727,0 63,0.677 63,1.511 V 19.488 C 63,20.323 63.477,21 64.333,21 H 82.229 C 83.086,21 84,20.323 84,19.488 V 1.511 C 84,0.677 83.336,0 82.479,0" fill="#fff"/><path class="background" d="m82.479 0h-17.896c-0.856 0-1.583 0.677-1.583 1.511v17.977c0 0.835 0.477 1.512 1.333 1.512h17.896c0.857 0 1.771-0.677 1.771-1.512v-17.977c0-0.834-0.664-1.511-1.521-1.511zm-11.479 8h2.827v1.441h0.031c0.431-0.777 1.704-1.566 3.278-1.566 3.021 0 3.864 1.604 3.864 4.575v5.55h-3v-5.003c0-1.33-0.531-2.497-1.773-2.497-1.508 0-2.227 1.021-2.227 2.697v4.803h-3zm-5 10h3v-10h-3zm3.375-13.5a1.8745 1.8745 0 1 1-3.749 1e-3 1.8745 1.8745 0 0 1 3.749-1e-3z" fill="#0a66c2"/></g></g></g></g></g></svg>',
value: 30,
enabled: false,
},
{
id: 'youtube',
name: 'YouTube',
color: '#FF0000',
logo: '<svg width="28.387" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg"><g transform="scale(.12097)"><path transform="matrix(.13333 0 0 -.13333 0 165.33)" d="m1723.2 1046.4c-20.24 76.22-79.87 136.24-155.6 156.61-137.25 37.02-687.62 37.02-687.62 37.02s-550.37 0-687.62-37.02c-75.723-20.37-135.36-80.39-155.6-156.61-36.777-138.14-36.777-426.37-36.777-426.37s0-288.22 36.777-426.38c20.238-76.211 79.879-136.23 155.6-156.61 137.25-37.012 687.62-37.012 687.62-37.012s550.37 0 687.62 37.012c75.73 20.379 135.36 80.398 155.6 156.61 36.78 138.16 36.78 426.38 36.78 426.38s0 288.23-36.78 426.37" fill="#ed1d24"/><path transform="matrix(.13333 0 0 -.13333 0 165.33)" d="m700 358.31 460 261.68-460 261.7z" fill="#fff"/></g></svg>',
value: 0,
enabled: false,
},
];
while (services.firstChild) {
services.removeChild(services.firstChild);
}
for (let service in socialMediaServices) {
let randomValue = Math.min(89, Math.max(0, socialMediaServices[service].value + Math.floor(Math.random() * 31) - 15));
addService(socialMediaServices[service].name, socialMediaServices[service].id, socialMediaServices[service].color, socialMediaServices[service].logo, socialMediaServices[service].enabled, randomValue);
}
updateChart();
}
document.addEventListener('DOMContentLoaded', pageLoad);
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "98437cc5e3314c1da6692858631d779f"}'></script>
</body>
</html>