Change: tag trending graph design

This commit is contained in:
Cutls 2019-09-30 02:21:18 +09:00
parent f35710d652
commit 4a59438c0c
2 changed files with 32 additions and 29 deletions

View File

@ -465,6 +465,9 @@ input, textarea {
.swal2-title, .swal2-content{
color: var(--color) !important;
}
#src-contents svg{
margin-right: 5px;
}
/*スクロールバー*/
::-webkit-scrollbar {

View File

@ -12,10 +12,10 @@ function searchMenu() {
//検索取得
function src(mode, offset) {
if(!offset){
if (!offset) {
$("#src-contents").html("");
var add = ""
}else{
} else {
var add = "&type=accounts&offset=" + $("#src-accts .cvo").length
}
@ -75,9 +75,9 @@ function src(mode, offset) {
//アカウント
if (json.accounts[0]) {
var templete = userparse(json.accounts, '', acct_id);
if(!offset){
if (!offset) {
$("#src-contents").append("<br>Accounts<div id=\"src-accts\">" + templete + '</div><a onclick="src(false,\'more\')" class="pointer">more...</a>');
}else{
} else {
$("#src-accts").append(templete)
}
@ -205,15 +205,15 @@ function graphDraw(tag, acct_id) {
<path d="M0,0 L10,0 20,10 20,50" fill="#3F51B5"></path>
</svg>
*/
function trend(){
function trend() {
console.log("get trend")
$("#src-contents").html("");
var acct_id = $("#src-acct-sel").val();
if(acct_id=="tootsearch"){
if (acct_id == "tootsearch") {
return false;
}
var domain = localStorage.getItem("domain_" + acct_id);
var at = localStorage.getItem("acct_"+ acct_id + "_at");
var at = localStorage.getItem("acct_" + acct_id + "_at");
var start = "https://" + domain + "/api/v1/trends"
console.log(start)
fetch(start, {
@ -222,28 +222,28 @@ function trend(){
'content-type': 'application/json',
'Authorization': 'Bearer ' + at
},
}).then(function(response) {
}).then(function (response) {
return response.json();
}).catch(function(error) {
}).catch(function (error) {
//todo(error);
console.error(error);
}).then(function(json) {
}).then(function (json) {
var tags = "";
Object.keys(json).forEach(function(keye) {
Object.keys(json).forEach(function (keye) {
var tag = json[keye];
var his=tag.history;
var max=Math.max.apply(null, [his[0].uses,his[1].uses,his[2].uses,his[3].uses,his[4].uses,his[5].uses,his[6].uses]);
var six=50-(his[6].uses/max*50);
var five=50-(his[5].uses/max*50);
var four=50-(his[4].uses/max*50);
var three=50-(his[3].uses/max*50);
var two=50-(his[2].uses/max*50);
var one=50-(his[1].uses/max*50);
var zero=50-(his[0].uses/max*50);
tags = '<svg version="1.1" viewbox="0 0 60 50" width="60" height="50">'+
'<g><path d="M0,'+six+' L10,'+five+' 20,'+four+' 30,'+three+' 40,'+two+' 50,'+one+' 60,'+zero+'" style="stroke: #9e9e9e; stroke-width: 1;fill: none;"></path></g>'+
'</svg><span style="font-size:200%">'+his[0].uses+'</span>toots&nbsp;<a onclick="tl(\'tag\',\'' + tag.name + '\',\'' + acct_id +
'\',\'add\')" class="pointer">#' + tag.name + '</a>&nbsp;'+his[0].accounts+lang.lang_src_people+"<br><br>";
var his = tag.history;
var max = Math.max.apply(null, [his[0].uses, his[1].uses, his[2].uses, his[3].uses, his[4].uses, his[5].uses, his[6].uses]);
var six = 50 - (his[6].uses / max * 50);
var five = 50 - (his[5].uses / max * 50);
var four = 50 - (his[4].uses / max * 50);
var three = 50 - (his[3].uses / max * 50);
var two = 50 - (his[2].uses / max * 50);
var one = 50 - (his[1].uses / max * 50);
var zero = 50 - (his[0].uses / max * 50);
tags = '<svg version="1.1" viewbox="0 0 60 50" width="60" height="50">' +
'<g><path d="M-1,51, -1,' + six + ', 0,' + six + ' L10,' + five + ' 20,' + four + ' 30,' + three + ' 40,' + two + ' 50,' + one + ' 60,' + zero + ' 61,' + zero + ' 61,51 -1,51" style="stroke: #0f8c0c;fill: rgba(13,113,19,.25); stroke-width: 1;"></path></g>' +
'</svg><span style="font-size:200%">' + his[0].uses + '</span>toots&nbsp;<a onclick="tl(\'tag\',\'' + tag.name + '\',\'' + acct_id +
'\',\'add\')" class="pointer">#' + tag.name + '</a>&nbsp;' + his[0].accounts + lang.lang_src_people + "<br><br>";
$("#src-contents").append(tags);
});