From b4098d4d3073b165288db174614e63e9026a00c3 Mon Sep 17 00:00:00 2001 From: rodel Date: Thu, 21 May 2020 22:50:21 -0500 Subject: [PATCH] 1.6.0 + Added a new graph in author's page to show how much each resource made over the months + Added a best month record on author's page + Reworked color palette to match spigot's style + Fixed graph truncating money amounts higher than 1,000 --- README.md | 4 +- changelog.log | 5 +- manifest.json | 2 +- source/author/author.js | 210 ++++++++++++++++++++++++++--------- source/resource/dashboard.js | 23 ++-- 5 files changed, 178 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index 14a12ab..bac8af1 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,7 @@ [![chrome-users](https://img.shields.io/chrome-web-store/users/ipcabmoaiebegllbfjbljlpcedjehiaj.svg)](https://chrome.google.com/webstore/detail/spigot-sales-graph/ipcabmoaiebegllbfjbljlpcedjehiaj) [![chrome-rating](https://img.shields.io/chrome-web-store/rating/ipcabmoaiebegllbfjbljlpcedjehiaj.svg)](https://chrome.google.com/webstore/detail/spigot-sales-graph/ipcabmoaiebegllbfjbljlpcedjehiaj) -Spigot Sales or... sells that its a grammar error right? (I am not english native speaker... sorry) - -Its a tool for Spigot Premium Resources management, you will get charts, average sales/money per day/month info, the total money gained and stuff +SpigotGraph is a tool for Spigot premium resources management, you are able to see daily and monthly charts in your resource's buyers and author's page. ## Supported Browsers diff --git a/changelog.log b/changelog.log index 6260bf0..9ddecbe 100644 --- a/changelog.log +++ b/changelog.log @@ -1 +1,4 @@ -+ Fixes related to page load retrying by @Dablakbandit \ No newline at end of file ++ Added a new graph in author's page to show how much each resource made over the months ++ Added a best month record on author's page ++ Reworked color palette to match spigot's style ++ Fixed graph truncating money amounts higher than 1,000 \ No newline at end of file diff --git a/manifest.json b/manifest.json index 11a88f0..ee658cf 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Spigot Sales Graph", "description": "See your montly/total revenue in your premium spigot resources", - "version": "1.5.0", + "version": "1.6.0", "icons": { "16": "icon16.png", "48": "icon48.png", diff --git a/source/author/author.js b/source/author/author.js index f92d900..b5d4c49 100644 --- a/source/author/author.js +++ b/source/author/author.js @@ -70,6 +70,7 @@ function onReady(convert, options, $){ } var monthlyGraphData = {}; + var monthlyResources = {}; var graphData = {}; var disabledResources = {}; @@ -141,18 +142,30 @@ function onReady(convert, options, $){ } } + function getMonthlyResourcesGData(value){ + var data = []; + for(var month in monthlyGraphData){ + if(monthlyResources==undefined || monthlyResources[value.toString()][month]==undefined){ + data.push(0); + continue; + } + data.push(monthlyResources[value.toString()][month].money); + } + return data.reverse(); + } + function getMonthlyGData(value){ var data = []; - for(var gdata in monthlyGraphData){ - data.push(parseFloat(monthlyGraphData[gdata][value])); + for(var month in monthlyGraphData){ + data.push(monthlyGraphData[month][value]); } return data.reverse(); } function getGData(value){ var data = []; - for(var gdata in graphData){ - data.push(parseFloat(graphData[gdata][value])); + for(var month in graphData){ + data.push(graphData[month][value]); } return data.reverse(); } @@ -178,20 +191,19 @@ function onReady(convert, options, $){
${getSummary()}
${getTotalSales()} - -
Total money gained converted to + ${options} ${betterFloat(getTotalInExchange())}
+
+
+
${getDownloadCSV()}
`; @@ -200,40 +212,29 @@ function onReady(convert, options, $){ $("#csvbtn").innerHTML = getDownloadCSV(); }); - set_checkbox_handler(); + setCheckboxHandler(); calculateGraph(); + displayMonthlyResourceGraph(getSelectedExchange, monthlyGraphData, getMonthlyResourcesGData); displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getMonthlyGData); displayGraph(getSelectedExchange, graphData, getGData) - // averages_records(); + averagesRecords(); } - // function averages_records(){ - // let salesRecord, revenueRecord, salesSum, revenueSum, monthCount = 0; - // for(let key in monthlyGraphData){ - // let line = monthlyGraphData[key]; - // monthCount++; - // salesSum+=line.amount; - // revenueSum+=line.money; - - // if(line.amount>salesRecord){ - // salesRecord = line.amount; - // } - - // if(line.money>revenueRecord){ - // revenueRecord = line.money; - // } - // } - - // $("#revenueRecord").innerText="Revenue Record: "+revenueRecord; - // $("#averageMonthlyRevenue").innerText="Average Monthly Revenue: "+betterFloat(revenueSum/monthCount); + function averagesRecords(){ + var bestMonth = undefined, bestAmount = -1; + for(let key in monthlyGraphData){ + if(monthlyGraphData[key].money>bestAmount){ + bestAmount = monthlyGraphData[key].money; + bestMonth = key; + } + } - // $("#salesRecord").innerText="Sales Record: "+salesRecord; - // $("#averageMonthlySales").innerText="Average Monthly Sales: "+betterFloat(salesSum/monthCount); - // } + $("#revenueRecord").innerText = "Best month: "+bestMonth+" ("+betterFloat(bestAmount)+" "+getSelectedExchange()+")"; + } - function set_checkbox_handler(){ + function setCheckboxHandler(){ document.querySelectorAll(".resource-toggle").forEach((checkbox)=>{ checkbox.addEventListener('change', (element) => { if(element.target.checked){ @@ -254,10 +255,12 @@ function onReady(convert, options, $){ monthlyGraphData = {}; graphData = {}; calculateGraph(); + displayMonthlyResourceGraph(getSelectedExchange, monthlyGraphData, getMonthlyResourcesGData); displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getMonthlyGData); displayGraph(getSelectedExchange, graphData, getGData); - set_checkbox_handler(); + setCheckboxHandler(); + averagesRecords(); } function calculateGraph(){ @@ -267,17 +270,29 @@ function onReady(convert, options, $){ if(resource.isEnabled()){ var buyers = resource.data.buyers; + // console.log(resource) buyers.forEach(function(buyer, key, map){ if(!isNaN(buyer.price)){ - var finalPrice = betterFloat(convert(buyer.price, buyer.exchange, getSelectedExchange())); + var finalPrice = convert(buyer.price, buyer.exchange, getSelectedExchange()); var simpleDate = buyer.date.substring(0, buyer.date.lastIndexOf("at")-1); - var yearMonthDate = buyer.realDate.getFullYear()+" "+monthEnum[buyer.realDate.getMonth()]; + var yearMonthDate = buyer.realDate.getFullYear()+" "+monthEnum[buyer.realDate.getMonth()]; + if(monthlyGraphData[yearMonthDate]==undefined){ monthlyGraphData[yearMonthDate] = {amount: 1, money: finalPrice}; }else{ monthlyGraphData[yearMonthDate].amount+=1; - monthlyGraphData[yearMonthDate].money=parseInt(monthlyGraphData[yearMonthDate].money)+parseInt(finalPrice); - } + monthlyGraphData[yearMonthDate].money+=finalPrice; + } + + if(monthlyResources[resource.id]==undefined){ + monthlyResources[resource.id] = {}; + } + + if(monthlyResources[resource.id][yearMonthDate]==undefined){ + monthlyResources[resource.id][yearMonthDate] = {money: finalPrice}; + }else{ + monthlyResources[resource.id][yearMonthDate].money += finalPrice; + } if(unordered[simpleDate]==undefined){ unordered[simpleDate]={amount: 1, money: finalPrice, date: buyer.realDate}; @@ -317,14 +332,15 @@ function onReady(convert, options, $){ }, tooltip: { shared: true, - crosshairs: true + crosshairs: true, + pointFormat: "● {series.name}: {point.y:,.2f}
", }, yAxis: { title: { text: 'Amount' }, labels: { - format: '{value:.2f}' + format: '{value:,.2f}' } }, legend: { @@ -358,9 +374,11 @@ function onReady(convert, options, $){ }, series: [{ + color: '#ed8106', name: 'Sales', data: getGData("amount") },{ + color: '#393e44', name: 'Money', data: getGData("money") }] @@ -368,6 +386,26 @@ function onReady(convert, options, $){ } function displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getGData){ + var series = [{ + color: '#ed8106', + name: 'Sales', + data: getGData("amount") + },{ + color: '#393e44', + name: 'Money', + data: getGData("money") + }]; + + for(resource of resourcesData){ + if(!resource.isEnabled()) continue; + const id = parseInt(resource.id); + series.push({ + color: "#"+(((id % 0xFF)<<16) | (((id * 0x7f) % 0xFF)<<8) | ((id * 0xFF) % 0xFF)).toString(16), + name: resource.name, + data: getGData(id) + }); + } + var hChart = Highcharts.chart('monthlyContainer', { chart: { renderTo: 'monthlyContainer', @@ -385,14 +423,15 @@ function onReady(convert, options, $){ }, tooltip: { shared: true, - crosshairs: true + crosshairs: true, + pointFormat: "● {series.name}: {point.y:,.2f}
", }, yAxis: { title: { text: 'Amount' }, labels: { - format: '{value:.2f}' + format: '{value:,.2f}' } }, legend: { @@ -425,13 +464,82 @@ function onReady(convert, options, $){ } }, - series: [{ - name: 'Sales', - data: getGData("amount") - },{ - name: 'Money', - data: getGData("money") - }] + series: series + }); + } + + function displayMonthlyResourceGraph(getSelectedExchange, monthlyGraphData, getGData){ + var series = []; + + for(resource of resourcesData){ + if(!resource.isEnabled()) continue; + const id = parseInt(resource.id); + series.push({ + color: "#"+(((id % 0xFF)<<16) | (((id * 0x7f) % 0xFF)<<8) | ((id * 0xFF) % 0xFF)).toString(16), + name: resource.name, + data: getGData(id) + }); + } + + var hChart = Highcharts.chart('monthlyResourceContainer', { + chart: { + renderTo: 'monthlyResourceContainer', + zoomType: 'x' + }, + title: { + text: `Monthly resource sales graph in ${getSelectedExchange()}` + }, + subtitle: { + text: document.ontouchstart === undefined ? + 'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in' + }, + xAxis: { + categories: Object.keys(monthlyGraphData).reverse() + }, + tooltip: { + shared: true, + crosshairs: true, + pointFormat: "● {series.name}: {point.y:,.2f}
", + }, + yAxis: { + title: { + text: 'Amount' + }, + labels: { + format: '{value:,.2f}' + } + }, + legend: { + enabled: false + }, + plotOptions: { + area: { + fillColor: { + linearGradient: { + x1: 0, + y1: 0, + x2: 0, + y2: 1 + }, + stops: [ + [0, Highcharts.getOptions().colors[0]], + [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] + ] + }, + marker: { + radius: 2 + }, + lineWidth: 1, + states: { + hover: { + lineWidth: 1 + } + }, + threshold: null + } + }, + + series: series }); } diff --git a/source/resource/dashboard.js b/source/resource/dashboard.js index 3d8b641..dbba26a 100644 --- a/source/resource/dashboard.js +++ b/source/resource/dashboard.js @@ -35,14 +35,10 @@ function displayDashboard(info, $){ // make the money string look better for(el in monthlyGraphData){ el = monthlyGraphData[el]; - - el.money = betterFloat(el.money); }; for(el in graphData){ el = graphData[el]; - - el.money = betterFloat(el.money); }; } calculateGraph(); @@ -50,15 +46,15 @@ function displayDashboard(info, $){ function getGData(value){ var data = []; for(var gdata in graphData){ - data.push(parseFloat(graphData[gdata][value])); + data.push(graphData[gdata][value]); } return data.reverse(); } function getMonthlyGData(value){ - var data = []; + var data = []; for(var gdata in monthlyGraphData){ - data.push(parseFloat(monthlyGraphData[gdata][value])); + data.push(monthlyGraphData[gdata][value]); } return data.reverse(); } @@ -259,7 +255,8 @@ function displayGraph(getSelectedExchange, graphData, getGData){ }, tooltip: { shared: true, - crosshairs: true + crosshairs: true, + pointFormat: "● {series.name}: {point.y:,.2f}
", }, yAxis: { title: { @@ -300,9 +297,11 @@ function displayGraph(getSelectedExchange, graphData, getGData){ }, series: [{ + color: '#ed8106', name: 'Sales', data: getGData("amount") },{ + color: '#393e44', name: 'Money', data: getGData("money") }] @@ -310,6 +309,7 @@ function displayGraph(getSelectedExchange, graphData, getGData){ } function displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getGData){ + console.log(getGData("money")) var hChart = Highcharts.chart('monthlyContainer', { chart: { renderTo: 'monthlyContainer', @@ -327,14 +327,15 @@ function displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getGData){ }, tooltip: { shared: true, - crosshairs: true + crosshairs: true, + pointFormat: "● {series.name}: {point.y:,.2f}
", }, yAxis: { title: { text: 'Amount' }, labels: { - format: '{value:.2f}' + format: '{value:,.2f}' } }, legend: { @@ -368,9 +369,11 @@ function displayMonthlyGraph(getSelectedExchange, monthlyGraphData, getGData){ }, series: [{ + color: '#ed8106', name: 'Sales', data: getGData("amount") },{ + color: '#393e44', name: 'Money', data: getGData("money") }]