☰

RedditChart

Some data analysis for reddit

  1. // ==UserScript==
  2. // @name         RedditChart
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.2
  5. // @description  Some data analysis for reddit
  6. // @author       wpatter6
  7. // @match        *://*.reddit.com/*
  8. // @grant        none
  9. // @require      https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js
  11. // ==/UserScript==
  12.  
  13. (()=>{
  14.     'use strict';
  15.     const main=()=>{
  16.         (function($) {
  17.             let doLog=false,_canvasBoxSize = 290, _canvasMinSize = 60,_lastData=null, _lastColors=null,_noCollapse=!!localStorage.getItem("rc-noCollapse"),selectOpened=false,
  18.             url = String(location), old = url.indexOf("old.reddit.com") !== -1, postSelector = old ? ".thing" : ".scrollerItem",
  19.             aggregates={
  20.                 "Post Count":1
  21.                 ,"Sum of Votes":2
  22.                 //,"Avg Votes/Post":3//uncomment for additional aggregates for those smart enough to be here
  23.                 //,"Avg Votes/Post/Minute":4//Won't work in redesign
  24.             },
  25.             log=(a,b)=>{//log shortener
  26.                 if(!doLog) return;
  27.                 if(typeof(a)==="string") a="RedditChart:" + a;
  28.                 else if (!b){b=a; a="RedditChart:debug";}
  29.                 if(typeof(b)!=="undefined") return console.log(a,b);
  30.                 return console.log(a);
  31.             },
  32.             go=()=>{//method executed once Chart.js has loaded
  33.                 if(url.indexOf("reddit.com/r/")>-1 && url.indexOf("reddit.com/r/all") === -1 && url.indexOf("reddit.com/r/popular") === -1)
  34.                     return log("Inside subreddit. Initialization cancelled.");
  35.  
  36.                 log("Chart.js namespace found.  Initializing...");
  37.                 var chart,aggregate=parseInt(localStorage.getItem("rc-agg")||"1"),exclude,
  38.                 curpage=execReg(/\/r\/([^\/]*)/,location),
  39.                 subpage=(()=>{
  40.                     var ret = $("div.menuarea div.dropdown.lightdrop>span").text(),
  41.                         regstr = location.host+"/"+(curpage?"r/"+curpage+"/":"")+"([^/?#]*)";
  42.  
  43.                     if(ret==="") return execReg(regstr,location);
  44.                     return execReg(regstr,location) + " " + ret;
  45.                 })(),
  46.                 //dom element creation
  47.                 el=$("<canvas>").addClass("rc-chart").attr({width:(_noCollapse?_canvasBoxSize:_canvasMinSize)+"px",height:(_noCollapse?_canvasBoxSize:_canvasMinSize)+"px",oncontextmenu:"return false;"})
  48.                     .mousemove((e)=>{
  49.                         var activePoints=chart.getElementsAtEvent(e.originalEvent),
  50.                             sub=activePoints.length>0?chart.data.labels[activePoints[0]._index]:null; 
  51.                         
  52.                         log("sub", sub);
  53.                         
  54.                         $(postSelector).removeClass("rc-active").css("border-left",""); 
  55.                         
  56.                         if(sub){
  57.                             var highlight;
  58.  
  59.                             if(old) {
  60.                                 highlight = $(postSelector + "[data-subreddit="+sub+"]");
  61.                             } else {
  62.                                 highlight = $(postSelector).filter(function() {
  63.                                     var href = $(this).find("[data-click-id='subreddit']").attr("href");
  64.                                     return href && href.replace("/r/", "").replace("/", "") === sub;
  65.                                 });
  66.                             }
  67.                             
  68.                             highlight.addClass("rc-active").css("border-left","5px solid "+_lastColors[activePoints[0]._index]);
  69.                         }
  70.                     })
  71.                     .mouseout(()=>{$(postSelector).removeClass("rc-active");})
  72.                     .mousedown((e)=>{if(e.button !== 2) return true; var activePoints=chart.getElementsAtEvent(e.originalEvent), sub=activePoints.length > 0 ? chart.data.labels[activePoints[0]._index] :null; exclude=sub; calculate(); return false;}),
  73.                 dd=$("<select>").addClass("rc-dd").change((e)=>{localStorage.setItem("rc-agg",aggregate=parseInt($(e.target).val())); calculate();}).click(()=>{selectOpened=!selectOpened}),
  74.                 ddspan=$("<span>").addClass("rc-aggspan").append(dd).append($("<span>").text((()=>{//set the text of which page we're on
  75.                     if(subpage && subpage.indexOf("user")===0) {//handles user multis as well
  76.                         var username=execReg("/user/([^?#]*)",location);
  77.                         if(username) return subpage.replace("user", username);
  78.                     }
  79.                     var def = $(".user").text()==="Want to join? Log in or sign up in seconds." ? "popular" : "front page";
  80.                     return (curpage?"/r/"+curpage:def) + " " + subpage;
  81.                 })()).css({paddingLeft:"10px"})).css({padding:"10px"}),
  82.                 div=$("<div>").addClass("rc-float").appendTo($("body")).append(ddspan).append(el).hover(()=>{
  83.                     ddspan.show();
  84.                     dochart(null, _canvasBoxSize, true);
  85.                 }, ()=>{
  86.                     if(!selectOpened){
  87.                         ddspan.hide();
  88.                         dochart(null, _canvasMinSize, true);
  89.                     }
  90.                 }),
  91.                 calculate=()=>{//calculate and set up the chart
  92.                     log("calculating...");
  93.                     var aggregateData=[],namecount={},rawdata=getRawData();
  94.                     log("raw data:", rawdata);
  95.                     for(var i=0; i<rawdata.length; i++){
  96.                         var sub=rawdata[i].sub;
  97.                         if(!sub||sub===exclude) continue;
  98.                         var idx=((d,s)=>{ for(var j=0; j<d.length; j++) if(d[j].sub.toLowerCase()===s) return j; return -1;})(aggregateData,sub.toLowerCase()),
  99.                             curval=idx+1?aggregateData[idx].value:0;
  100.                         switch(aggregate){
  101.                             case 1: curval++; break;
  102.                             case 2:case 3: curval+=rawdata[i].votes; break;
  103.                             case 4: curval+=rawdata[i].vpm; break;
  104.                         }
  105.                         if(idx+1){
  106.                             aggregateData[idx].value=curval;
  107.                             namecount[sub]++;
  108.                         }else{
  109.                             aggregateData.push({sub:rawdata[i].sub,value:curval});
  110.                             namecount[sub]=1;
  111.                         }
  112.                     }
  113.                     if([3,4].indexOf(aggregate)+1)//averages need to be divided by post count
  114.                         for(var j=0; j<aggregateData.length; j++){
  115.                             var agg=aggregateData[j];
  116.                             agg.value=Math.round(agg.value/namecount[agg.sub]);
  117.                         }
  118.  
  119.                     //sort from biggest to smallest
  120.                     aggregateData.sort((a,b)=>{
  121.                         if(b.value-a.value===0) return a.sub.localeCompare(b.sub);
  122.                         return b.value - a.value;
  123.                     });
  124.                     log("calculating complete.");
  125.                     dochart(aggregateData);
  126.                     return aggregateData;
  127.                 },
  128.                 dochart=(data, boxSize, noAnimate)=>{//take aggregated/sorted data and apply it to the chart & .subreddit elements
  129.                     log("charting...");
  130.                     var reuseColors = false;
  131.                     if(!data){
  132.                         if(!_lastData){
  133.                             return calculate;
  134.                         }
  135.                         data = _lastData;
  136.                         reuseColors = true;
  137.                     } else _lastData = data;
  138.  
  139.                     var names=[],dataitems=[],colors= reuseColors ? _lastColors : getRandomColors(data.length);
  140.                     _lastColors = colors;
  141.                     for(var i=0; i<data.length; i++){
  142.                         var agg=data[i];
  143.                         names.push(agg.sub);
  144.                         dataitems.push(agg.value);
  145.                     }
  146.  
  147.                     var subEls;
  148.  
  149.                     if(old) {
  150.                         subEls = $(".subreddit:visible");
  151.                     } else {
  152.                         subEls = $("div[id^='SubredditInfoTooltip']").siblings("a[data-click-id='subreddit']");
  153.                     }
  154.  
  155.                     log("dochart", subEls.length);
  156.  
  157.                     subEls.each((i,e)=>{
  158.                         var sub =$(e).text().replace(/\/?r\//gi,"");
  159.                         if(sub===exclude){$(e).css({backgroundColor:"",color:""});return;}
  160.                         var idx=names.indexOf(sub);if(idx===-1) return;
  161.                         var color=colors[idx],fontColor=getColorLuma(color)<70?"white":"black";
  162.                         $(e).css({backgroundColor:color,color:fontColor,borderRadius:'3px',padding:'0 3px'});
  163.                     });
  164.  
  165.                     if(chart) chart.destroy();
  166.                     if(boxSize && boxSize > 0){
  167.                         var context = el[0].getContext("2d");
  168.                         context.canvas.width = boxSize;
  169.                         context.canvas.height = boxSize;
  170.                     }
  171.                     chart=new Chart(el,{//Chart.js initialize with data
  172.                         type:"pie",
  173.                         data:{
  174.                             labels:names,
  175.                             datasets:[{data:dataitems,backgroundColor:colors,borderColor:colors}]
  176.                         },
  177.                         options:{
  178.                             responsive:true,
  179.                             animation:{duration: noAnimate?0:1000},
  180.                             legend:{display:false},
  181.                             onClick:(e)=>{
  182.                                 var activePoints=chart.getElementsAtEvent(e),sub=activePoints[0]?chart.data.labels[activePoints[0]._index]:null;
  183.                                 if(!sub) return; open(location.protocol+"//"+location.hostname+"/r/"+sub);
  184.                             }
  185.                         }
  186.                     });
  187.                     chart.update();
  188.                     log("chart complete.");
  189.                     return data;
  190.                 },
  191.                 getRawData=()=>{
  192.                     return old ? $(postSelector+":visible:not(.promoted)").map((i,e)=>{
  193.                         let diff=(Date.now()-new Date($(e).find("time").attr("datetime")).getTime())/60000,
  194.                             votes=parseInt($(e).find(".score.unvoted").attr("title"));
  195.                         return {
  196.                             sub:$(e).attr("data-subreddit"),
  197.                             votes:votes,
  198.                             vpm:Math.round(votes/diff)};
  199.                     }).get()
  200.                     : $(postSelector+".Post:not(.promotedlink)").map((i, e) => {
  201.                         let voteString = $(e).find("button[id^='upvote-button']").siblings("div").first().text(),
  202.                             votes = voteString.indexOf("k") !== -1 ? parseInt(parseFloat(voteString) * 1000) : parseInt(voteString);
  203.                         return {
  204.                             sub: $(e).find("[data-click-id='subreddit']").attr("href").replace("/r/", "").replace("/", ""),
  205.                             votes:votes
  206.                         }
  207.                     }).get()
  208.                 };
  209.  
  210.                 if(old) {
  211.                     //triggered when Never ending reddit fires (RES)
  212.                     document.body.addEventListener("DOMNodeInserted",e=>{if(e.target.tagName==="DIV" && ($(e.target).attr("id")||"").indexOf("siteTable")>-1)calculate();},true);
  213.                 } else {
  214.                     let scrolled = false, scrollLoc = $(window).scrollTop();
  215.  
  216.                     window.addEventListener('scroll', e => {
  217.                         if(scrollLoc < $(window).scrollTop()){
  218.                             scrolled = true;
  219.                             scrollLoc = $(window).scrollTop();
  220.                         }
  221.                     }, false);
  222.  
  223.                     setInterval(() => {
  224.                         if(scrolled) {
  225.                             calculate();
  226.                             scrolled = false;
  227.                         }
  228.                     }, 500);
  229.                 }
  230.                 //finish setting up dropdown
  231.                 for(var i in aggregates) dd.append($("<option>").text(i).attr("value",aggregates[i]));
  232.                 dd.val(aggregate);
  233.  
  234.                 calculate();
  235.                 log("Initialization complete.");
  236.             },
  237.             getRandomColors=(c)=>{//get array of random colors, c = length of result array
  238.                 var ret=[]; for(var i=0;i<c;i++)ret.push("#000000".replace(/0/g,()=>{return (~~(Math.random()*16)).toString(16);})); return ret;
  239.             },
  240.             getColorLuma=(c)=>{//get color light/darkness
  241.                 if(c.indexOf("#")===0)c=c.substring(1); var rgb=parseInt(c,16),r=(rgb >> 16) & 0xff,g=(rgb >>  8) & 0xff,b=(rgb >>  0) & 0xff; return 0.2126 * r + 0.7152 * g + 0.0722 * b;
  242.             },
  243.             checkForChartJs=(c)=>{//recurring setTimeout check to wait for Chart.js to load into page.  Dies after 100 loops.
  244.                 if(c<100){ log("Checking for chart.js namespace ("+c+")..."); if(!window.Chart) return setTimeout(checkForChartJs,50,++c); go(); } else log("Chart.js namespace not found! Cannot initialize.");
  245.             },
  246.             execReg=(reg, str)=>{
  247.                 if(typeof(reg)==="string") reg = new RegExp(reg); return (reg.exec(str)||[0,null])[1];
  248.             };
  249.  
  250.             checkForChartJs(0);
  251.         })(jQuery.noConflict());
  252.     };
  253.  
  254.  
  255.     let style = document.createElement("style");
  256.     style.innerHTML = ".rc-float{position:fixed;bottom:20px;right:0px; z-index:2000;border-radius:20px;padding:10px;opacity:0.4;text-align:center;} .rc-float:hover{background-color:rgba(0,0,0,0.8);opacity:1} .rc-aggspan{display:none;color:white;font-size:small;} .rc-chart{cursor:pointer;} .subreddit{border-radius:2px;padding:2px;} .rc-active{background-color:rgba(66,66,66,0.3) !important;} .rcf{height:0px;position:fixed;border:0px} .rcx { }";
  257.  
  258.     let script = document.createElement("script");
  259.     script.innerHTML = "("+main.toString()+")();";
  260.  
  261.     document.body.appendChild(style);
  262.     document.body.appendChild(script);
  263. })();