|
|
@@ -0,0 +1,1825 @@
|
|
|
+// src/permalink.ts
|
|
|
+function addPermalink() {
|
|
|
+ const permalinkContainer = document.getElementById("permalinkContainer");
|
|
|
+ const permalinkButton = document.getElementById("permalinkButton");
|
|
|
+ const permalinkCopyButton = document.getElementById("permalinkCopyButton");
|
|
|
+ const rprunCopyButton = document.getElementById("permalinkCopyButton-rprun");
|
|
|
+ const permalinkOptionsButton = document.getElementById("hideOptions");
|
|
|
+ const permalinkLatestMonth = document.getElementById("latestMonth");
|
|
|
+ permalinkButton?.addEventListener("click", function(e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const currentDisplay = permalinkContainer.style.display;
|
|
|
+ if (currentDisplay == "none") {
|
|
|
+ permalinkContainer.style.display = "block";
|
|
|
+ } else {
|
|
|
+ permalinkContainer.style.display = "none";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.addEventListener("click", function(e) {
|
|
|
+ if (!permalinkContainer.contains(e.target) && !permalinkButton.contains(e.target)) {
|
|
|
+ permalinkContainer.style.display = "none";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ permalinkCopyButton.addEventListener("click", function() {
|
|
|
+ const permalinkElem = document.getElementById("permalink");
|
|
|
+ if (permalinkElem.value && permalinkElem.value != "") {
|
|
|
+ navigator.clipboard.writeText(permalinkElem.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ rprunCopyButton.addEventListener("click", function() {
|
|
|
+ const permalinkElem = document.getElementById("permalink-rprun");
|
|
|
+ if (permalinkElem.value && permalinkElem.value != "") {
|
|
|
+ navigator.clipboard.writeText(permalinkElem.value);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ permalinkOptionsButton.addEventListener("change", function() {
|
|
|
+ updatePermalink();
|
|
|
+ });
|
|
|
+ permalinkLatestMonth.addEventListener("change", function() {
|
|
|
+ updatePermalink();
|
|
|
+ });
|
|
|
+}
|
|
|
+function updatePermalink() {
|
|
|
+ const graphSelect = document.getElementById("graphType");
|
|
|
+ const permalinkInput = document.getElementById("permalink");
|
|
|
+ const rprunInput = document.getElementById("permalink-rprun");
|
|
|
+ const hideOptionsButton = document.getElementById("hideOptions");
|
|
|
+ const latestMonthButton = document.getElementById("latestMonth");
|
|
|
+ var permalink = "https://prun.raylu.net/stats/?type=" + graphSelect.value;
|
|
|
+ var rprunLink = "XIT PRUNSTATS type-" + graphSelect.value;
|
|
|
+ const graph = graphs.find((obj) => obj.id == graphSelect.value);
|
|
|
+ graph?.configFieldIDs.forEach((subtype) => {
|
|
|
+ if (subtype == "month" && latestMonthButton.checked) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const inputElem = document.getElementById(subtype);
|
|
|
+ if (inputElem.value && inputElem.value != "") {
|
|
|
+ permalink += "&" + subtype + "=" + inputElem.value;
|
|
|
+ rprunLink += " " + subtype + "-" + inputElem.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (hideOptionsButton.checked) {
|
|
|
+ permalink += "&hideOptions";
|
|
|
+ rprunLink += " hideOptions";
|
|
|
+ }
|
|
|
+ permalinkInput.value = permalink;
|
|
|
+ rprunInput.value = rprunLink;
|
|
|
+ return;
|
|
|
+}
|
|
|
+
|
|
|
+// src/staticData/constants.ts
|
|
|
+var months = ["mar25", "apr25", "may25", "jun25", "jul25", "aug25", "sep25", "oct25", "nov25", "dec25", "jan26", "feb26", "mar26", "apr26", "may26", "jun26"];
|
|
|
+var monthsPretty = ["March 3025", "April 3025", "May 3025", "June 3025", "July 3025", "August 3025", "September 3025", "October 3025", "November 3025", "December 3025", "January 3026", "February 3026", "March 3026", "April 3026", "May 3026", "June 3026"];
|
|
|
+var fullMonthNames = {
|
|
|
+ jan: "January",
|
|
|
+ feb: "February",
|
|
|
+ mar: "March",
|
|
|
+ apr: "April",
|
|
|
+ may: "May",
|
|
|
+ jun: "June",
|
|
|
+ jul: "July",
|
|
|
+ aug: "August",
|
|
|
+ sep: "September",
|
|
|
+ oct: "October",
|
|
|
+ nov: "November",
|
|
|
+ dec: "December"
|
|
|
+};
|
|
|
+var prettyModeNames = {
|
|
|
+ amount: "Amount",
|
|
|
+ profit: "Profit",
|
|
|
+ volume: "Volume",
|
|
|
+ price: "Price",
|
|
|
+ deficit: "Deficit",
|
|
|
+ bases: "Bases",
|
|
|
+ ships: "Ships"
|
|
|
+};
|
|
|
+var materialCategories = {
|
|
|
+ "Consumables (Luxury)": [
|
|
|
+ "ALE",
|
|
|
+ "COF",
|
|
|
+ "GIN",
|
|
|
+ "KOM",
|
|
|
+ "NST",
|
|
|
+ "PWO",
|
|
|
+ "REP",
|
|
|
+ "SC",
|
|
|
+ "VG",
|
|
|
+ "WIN"
|
|
|
+ ],
|
|
|
+ "Ship Engines": [
|
|
|
+ "AEN",
|
|
|
+ "AFP",
|
|
|
+ "AFR",
|
|
|
+ "ANZ",
|
|
|
+ "BFP",
|
|
|
+ "BFR",
|
|
|
+ "CHA",
|
|
|
+ "ENG",
|
|
|
+ "FIR",
|
|
|
+ "FSE",
|
|
|
+ "GCH",
|
|
|
+ "GEN",
|
|
|
+ "GNZ",
|
|
|
+ "HNZ",
|
|
|
+ "HPR",
|
|
|
+ "HTE",
|
|
|
+ "HYR",
|
|
|
+ "LFE",
|
|
|
+ "LFP",
|
|
|
+ "MFE",
|
|
|
+ "NOZ",
|
|
|
+ "QCR",
|
|
|
+ "RAG",
|
|
|
+ "RCS",
|
|
|
+ "RCT",
|
|
|
+ "SFE",
|
|
|
+ "VOE",
|
|
|
+ "VOR"
|
|
|
+ ],
|
|
|
+ "Software Tools": [
|
|
|
+ "DA",
|
|
|
+ "DD",
|
|
|
+ "DV",
|
|
|
+ "EDC",
|
|
|
+ "NN",
|
|
|
+ "OS"
|
|
|
+ ],
|
|
|
+ "Construction Parts": [
|
|
|
+ "AEF",
|
|
|
+ "AIR",
|
|
|
+ "DEC",
|
|
|
+ "FC",
|
|
|
+ "FLO",
|
|
|
+ "FLP",
|
|
|
+ "GC",
|
|
|
+ "GV",
|
|
|
+ "LIT",
|
|
|
+ "MGC",
|
|
|
+ "MHL",
|
|
|
+ "PSH",
|
|
|
+ "RSH",
|
|
|
+ "TCS",
|
|
|
+ "TRU",
|
|
|
+ "TSH"
|
|
|
+ ],
|
|
|
+ Alloys: [
|
|
|
+ "ALR",
|
|
|
+ "AST",
|
|
|
+ "BGO",
|
|
|
+ "BOS",
|
|
|
+ "BRO",
|
|
|
+ "FAL",
|
|
|
+ "FET",
|
|
|
+ "RGO",
|
|
|
+ "WAL",
|
|
|
+ "WRH"
|
|
|
+ ],
|
|
|
+ "Consumable Bundles": [
|
|
|
+ "CBU",
|
|
|
+ "EBU",
|
|
|
+ "PBU",
|
|
|
+ "SBU",
|
|
|
+ "TBU"
|
|
|
+ ],
|
|
|
+ "Medical Equipment": [
|
|
|
+ "ADR",
|
|
|
+ "BND",
|
|
|
+ "PK",
|
|
|
+ "SEQ",
|
|
|
+ "STR",
|
|
|
+ "TUB"
|
|
|
+ ],
|
|
|
+ "Electronic Parts": [
|
|
|
+ "CD",
|
|
|
+ "DIS",
|
|
|
+ "FAN",
|
|
|
+ "MB",
|
|
|
+ "MPC",
|
|
|
+ "PCB",
|
|
|
+ "RAM",
|
|
|
+ "ROM",
|
|
|
+ "SEN",
|
|
|
+ "TPU",
|
|
|
+ "TRA"
|
|
|
+ ],
|
|
|
+ "Energy Systems": [
|
|
|
+ "CBL",
|
|
|
+ "CBM",
|
|
|
+ "CBS",
|
|
|
+ "POW",
|
|
|
+ "SOL",
|
|
|
+ "SP"
|
|
|
+ ],
|
|
|
+ Minerals: [
|
|
|
+ "BER",
|
|
|
+ "BOR",
|
|
|
+ "BRM",
|
|
|
+ "CLI",
|
|
|
+ "GAL",
|
|
|
+ "HAL",
|
|
|
+ "LST",
|
|
|
+ "MAG",
|
|
|
+ "MGS",
|
|
|
+ "SCR",
|
|
|
+ "TAI",
|
|
|
+ "TCO",
|
|
|
+ "TS",
|
|
|
+ "ZIR"
|
|
|
+ ],
|
|
|
+ "Construction Materials": [
|
|
|
+ "CMK",
|
|
|
+ "EPO",
|
|
|
+ "GL",
|
|
|
+ "INS",
|
|
|
+ "MCG",
|
|
|
+ "MTC",
|
|
|
+ "NCS",
|
|
|
+ "NFI",
|
|
|
+ "NG",
|
|
|
+ "RG",
|
|
|
+ "SEA"
|
|
|
+ ],
|
|
|
+ "Consumables (Basic)": [
|
|
|
+ "DW",
|
|
|
+ "EXO",
|
|
|
+ "FIM",
|
|
|
+ "HMS",
|
|
|
+ "HSS",
|
|
|
+ "LC",
|
|
|
+ "MEA",
|
|
|
+ "MED",
|
|
|
+ "OVE",
|
|
|
+ "PDA",
|
|
|
+ "PT",
|
|
|
+ "RAT",
|
|
|
+ "SCN",
|
|
|
+ "WS"
|
|
|
+ ],
|
|
|
+ "Software Systems": [
|
|
|
+ "IDC",
|
|
|
+ "IMM",
|
|
|
+ "SNM",
|
|
|
+ "WAI"
|
|
|
+ ],
|
|
|
+ "Electronic Pieces": [
|
|
|
+ "BCO",
|
|
|
+ "BGC",
|
|
|
+ "CAP",
|
|
|
+ "HCC",
|
|
|
+ "LDI",
|
|
|
+ "MFK",
|
|
|
+ "MWF",
|
|
|
+ "SFK",
|
|
|
+ "SWF",
|
|
|
+ "TRN"
|
|
|
+ ],
|
|
|
+ "Software Components": [
|
|
|
+ "BAI",
|
|
|
+ "LD",
|
|
|
+ "MLI",
|
|
|
+ "NF",
|
|
|
+ "SA",
|
|
|
+ "SAL",
|
|
|
+ "WM"
|
|
|
+ ],
|
|
|
+ Ores: [
|
|
|
+ "ALO",
|
|
|
+ "AUO",
|
|
|
+ "CUO",
|
|
|
+ "FEO",
|
|
|
+ "LIO",
|
|
|
+ "REO",
|
|
|
+ "SIO",
|
|
|
+ "TIO",
|
|
|
+ "REO"
|
|
|
+ ],
|
|
|
+ "Unit Prefabs": [
|
|
|
+ "BR1",
|
|
|
+ "BR2",
|
|
|
+ "BRS",
|
|
|
+ "BSU",
|
|
|
+ "CPU",
|
|
|
+ "CQL",
|
|
|
+ "CQM",
|
|
|
+ "CQS",
|
|
|
+ "CQT",
|
|
|
+ "DOU",
|
|
|
+ "FUN",
|
|
|
+ "HAB",
|
|
|
+ "LU",
|
|
|
+ "RDL",
|
|
|
+ "RDS",
|
|
|
+ "SU",
|
|
|
+ "TCU",
|
|
|
+ "WOR",
|
|
|
+ "BSU",
|
|
|
+ "CPU"
|
|
|
+ ],
|
|
|
+ "Ship Shields": [
|
|
|
+ "APT",
|
|
|
+ "ARP",
|
|
|
+ "AWH",
|
|
|
+ "BPT",
|
|
|
+ "BRP",
|
|
|
+ "BWH",
|
|
|
+ "SRP"
|
|
|
+ ],
|
|
|
+ "Electronic Devices": [
|
|
|
+ "AAR",
|
|
|
+ "AWF",
|
|
|
+ "BID",
|
|
|
+ "BMF",
|
|
|
+ "BSC",
|
|
|
+ "BWS",
|
|
|
+ "HD",
|
|
|
+ "HOG",
|
|
|
+ "HPC",
|
|
|
+ "MHP",
|
|
|
+ "RAD",
|
|
|
+ "SAR"
|
|
|
+ ],
|
|
|
+ Metals: [
|
|
|
+ "AL",
|
|
|
+ "AU",
|
|
|
+ "CU",
|
|
|
+ "FE",
|
|
|
+ "LI",
|
|
|
+ "RE",
|
|
|
+ "SI",
|
|
|
+ "STL",
|
|
|
+ "TI",
|
|
|
+ "W",
|
|
|
+ "RE"
|
|
|
+ ],
|
|
|
+ "Electronic Systems": [
|
|
|
+ "ACS",
|
|
|
+ "ADS",
|
|
|
+ "CC",
|
|
|
+ "COM",
|
|
|
+ "CRU",
|
|
|
+ "FFC",
|
|
|
+ "LIS",
|
|
|
+ "LOG",
|
|
|
+ "STS",
|
|
|
+ "TAC",
|
|
|
+ "WR"
|
|
|
+ ],
|
|
|
+ Textiles: [
|
|
|
+ "CF",
|
|
|
+ "COT",
|
|
|
+ "CTF",
|
|
|
+ "KV",
|
|
|
+ "NL",
|
|
|
+ "SIL",
|
|
|
+ "TK"
|
|
|
+ ],
|
|
|
+ Plastics: [
|
|
|
+ "DCL",
|
|
|
+ "DCM",
|
|
|
+ "DCS",
|
|
|
+ "PE",
|
|
|
+ "PG",
|
|
|
+ "PSL",
|
|
|
+ "PSM",
|
|
|
+ "PSS"
|
|
|
+ ],
|
|
|
+ Chemicals: [
|
|
|
+ "BAC",
|
|
|
+ "BL",
|
|
|
+ "BLE",
|
|
|
+ "CST",
|
|
|
+ "DDT",
|
|
|
+ "EES",
|
|
|
+ "ETC",
|
|
|
+ "FLX",
|
|
|
+ "IND",
|
|
|
+ "JUI",
|
|
|
+ "KRE",
|
|
|
+ "LCR",
|
|
|
+ "NAB",
|
|
|
+ "NR",
|
|
|
+ "NS",
|
|
|
+ "OLF",
|
|
|
+ "PFE",
|
|
|
+ "REA",
|
|
|
+ "SOI",
|
|
|
+ "TCL",
|
|
|
+ "THF",
|
|
|
+ "KRE"
|
|
|
+ ],
|
|
|
+ Elements: [
|
|
|
+ "BE",
|
|
|
+ "C",
|
|
|
+ "CA",
|
|
|
+ "CL",
|
|
|
+ "ES",
|
|
|
+ "I",
|
|
|
+ "MG",
|
|
|
+ "NA",
|
|
|
+ "S",
|
|
|
+ "TA",
|
|
|
+ "TC",
|
|
|
+ "ZR"
|
|
|
+ ],
|
|
|
+ Gases: [
|
|
|
+ "AMM",
|
|
|
+ "AR",
|
|
|
+ "F",
|
|
|
+ "H",
|
|
|
+ "HE",
|
|
|
+ "HE3",
|
|
|
+ "KR",
|
|
|
+ "N",
|
|
|
+ "NE",
|
|
|
+ "O",
|
|
|
+ "KR"
|
|
|
+ ],
|
|
|
+ "Ship Parts": [
|
|
|
+ "AGS",
|
|
|
+ "AHP",
|
|
|
+ "ATP",
|
|
|
+ "BGS",
|
|
|
+ "BHP",
|
|
|
+ "HAM",
|
|
|
+ "HHP",
|
|
|
+ "LHP",
|
|
|
+ "NV1",
|
|
|
+ "NV2",
|
|
|
+ "RHP",
|
|
|
+ "SSC",
|
|
|
+ "THP",
|
|
|
+ "HAM"
|
|
|
+ ],
|
|
|
+ Drones: [
|
|
|
+ "CCD",
|
|
|
+ "DCH",
|
|
|
+ "DRF",
|
|
|
+ "RED",
|
|
|
+ "SDR",
|
|
|
+ "SRD",
|
|
|
+ "SUD"
|
|
|
+ ],
|
|
|
+ "Agricultural Products": [
|
|
|
+ "ALG",
|
|
|
+ "BEA",
|
|
|
+ "CAF",
|
|
|
+ "FOD",
|
|
|
+ "GRA",
|
|
|
+ "GRN",
|
|
|
+ "HCP",
|
|
|
+ "HER",
|
|
|
+ "HOP",
|
|
|
+ "MAI",
|
|
|
+ "MTP",
|
|
|
+ "MUS",
|
|
|
+ "NUT",
|
|
|
+ "PIB",
|
|
|
+ "PPA",
|
|
|
+ "RCO",
|
|
|
+ "RSI",
|
|
|
+ "VEG",
|
|
|
+ "VIT"
|
|
|
+ ],
|
|
|
+ "Construction Prefabs": [
|
|
|
+ "ABH",
|
|
|
+ "ADE",
|
|
|
+ "ASE",
|
|
|
+ "ATA",
|
|
|
+ "BBH",
|
|
|
+ "BDE",
|
|
|
+ "BSE",
|
|
|
+ "BTA",
|
|
|
+ "HSE",
|
|
|
+ "LBH",
|
|
|
+ "LDE",
|
|
|
+ "LSE",
|
|
|
+ "LTA",
|
|
|
+ "RBH",
|
|
|
+ "RDE",
|
|
|
+ "RSE",
|
|
|
+ "RTA"
|
|
|
+ ],
|
|
|
+ Fuels: [
|
|
|
+ "FF",
|
|
|
+ "SF",
|
|
|
+ "VF"
|
|
|
+ ],
|
|
|
+ "Ship Kits": [
|
|
|
+ "HCB",
|
|
|
+ "LCB",
|
|
|
+ "LFL",
|
|
|
+ "LSL",
|
|
|
+ "MCB",
|
|
|
+ "MFL",
|
|
|
+ "MSL",
|
|
|
+ "SCB",
|
|
|
+ "SFL",
|
|
|
+ "SSL",
|
|
|
+ "TCB",
|
|
|
+ "VCB",
|
|
|
+ "VFT",
|
|
|
+ "VSC",
|
|
|
+ "WCB",
|
|
|
+ "VFT"
|
|
|
+ ],
|
|
|
+ Liquids: [
|
|
|
+ "BTS",
|
|
|
+ "H2O",
|
|
|
+ "HEX",
|
|
|
+ "LES"
|
|
|
+ ],
|
|
|
+ Utility: [
|
|
|
+ "OFF",
|
|
|
+ "SUN",
|
|
|
+ "UTS"
|
|
|
+ ],
|
|
|
+ Infrastructure: [
|
|
|
+ "GWS",
|
|
|
+ "PFG",
|
|
|
+ "SDM",
|
|
|
+ "SST",
|
|
|
+ "SPT",
|
|
|
+ "TRS",
|
|
|
+ "TOR"
|
|
|
+ ]
|
|
|
+};
|
|
|
+var materialCategoryColors = {
|
|
|
+ "Agricultural Products": "#0a4708",
|
|
|
+ Alloys: "#946537",
|
|
|
+ Chemicals: "#d04774",
|
|
|
+ "Construction Materials": "#3174ec",
|
|
|
+ "Construction Parts": "#426684",
|
|
|
+ "Construction Prefabs": "#28377b",
|
|
|
+ "Consumable Bundles": "#57232a",
|
|
|
+ "Consumables (Basic)": "#ba363c",
|
|
|
+ "Consumables (Luxury)": "#680000",
|
|
|
+ Drones: "#a54d2b",
|
|
|
+ "Electronic Devices": "#6f2dac",
|
|
|
+ "Electronic Parts": "#7447d0",
|
|
|
+ "Electronic Pieces": "#906bd6",
|
|
|
+ "Electronic Systems": "#4c3365",
|
|
|
+ Elements: "#564739",
|
|
|
+ "Energy Systems": "#2e5740",
|
|
|
+ Fuels: "#6ba23c",
|
|
|
+ Gases: "#198284",
|
|
|
+ Liquids: "#6098c3",
|
|
|
+ "Medical Equipment": "#6ec36e",
|
|
|
+ Metals: "#4f4f4f",
|
|
|
+ Minerals: "#b28a62",
|
|
|
+ Ores: "#6b707a",
|
|
|
+ Plastics: "#791f62",
|
|
|
+ "Ship Engines": "#b24219",
|
|
|
+ "Ship Kits": "#b26d19",
|
|
|
+ "Ship Parts": "#b27c19",
|
|
|
+ "Ship Shields": "#d98c21",
|
|
|
+ "Software Components": "#a19248",
|
|
|
+ "Software Systems": "#554e1e",
|
|
|
+ "Software Tools": "#9a7b2c",
|
|
|
+ Textiles: "#6b733a",
|
|
|
+ "Unit Prefabs": "#363435",
|
|
|
+ Utility: "#baada1",
|
|
|
+ Infrastructure: "#252551"
|
|
|
+};
|
|
|
+
|
|
|
+// src/utils.ts
|
|
|
+function addOption(selector, displayName, id) {
|
|
|
+ const optionElem = document.createElement("option");
|
|
|
+ optionElem.textContent = displayName;
|
|
|
+ optionElem.value = id ?? displayName;
|
|
|
+ selector.appendChild(optionElem);
|
|
|
+}
|
|
|
+function clearChildren(elem) {
|
|
|
+ elem.textContent = "";
|
|
|
+ while (elem.children[0]) {
|
|
|
+ elem.removeChild(elem.children[0]);
|
|
|
+ }
|
|
|
+ return;
|
|
|
+}
|
|
|
+function addConfigField(inputType, id, label, value, defaultValue, updateFunc, marginShift) {
|
|
|
+ const labelElem = document.createElement("label");
|
|
|
+ labelElem.textContent = label;
|
|
|
+ labelElem.id = id + "-label";
|
|
|
+ const inputElem = document.createElement(inputType);
|
|
|
+ inputElem.id = id;
|
|
|
+ inputElem.classList.add("plotSelector");
|
|
|
+ if (inputType == "select") {
|
|
|
+ addOptions(inputElem, value.prettyValues, value.values);
|
|
|
+ }
|
|
|
+ if (defaultValue) {
|
|
|
+ inputElem.value = defaultValue;
|
|
|
+ }
|
|
|
+ inputElem.addEventListener("change", updateFunc);
|
|
|
+ labelElem.appendChild(inputElem);
|
|
|
+ const output = wrapInDiv(labelElem);
|
|
|
+ if (marginShift) {
|
|
|
+ output.style.marginLeft = marginShift;
|
|
|
+ }
|
|
|
+ return output;
|
|
|
+}
|
|
|
+function wrapInDiv(elem) {
|
|
|
+ const div = document.createElement("div");
|
|
|
+ div.appendChild(elem);
|
|
|
+ return div;
|
|
|
+}
|
|
|
+function addOptions(selector, prettyValues, values) {
|
|
|
+ for (var i = 0;i < prettyValues.length; i++) {
|
|
|
+ const optionElem = document.createElement("option");
|
|
|
+ optionElem.textContent = prettyValues[i];
|
|
|
+ optionElem.value = values ? values[i] : prettyValues[i];
|
|
|
+ selector.appendChild(optionElem);
|
|
|
+ }
|
|
|
+}
|
|
|
+function deepMerge(target, source) {
|
|
|
+ for (const key in source) {
|
|
|
+ if (source[key] && typeof source[key] === "object" && !Array.isArray(source[key])) {
|
|
|
+ target[key] = deepMerge(target[key] || {}, source[key]);
|
|
|
+ } else {
|
|
|
+ target[key] = source[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return target;
|
|
|
+}
|
|
|
+function prettyMonthName(monthStr) {
|
|
|
+ const monthAbv = monthStr.substring(0, 3);
|
|
|
+ const monthNum = monthStr.substring(3);
|
|
|
+ return fullMonthNames[monthAbv] + " 30" + monthNum;
|
|
|
+}
|
|
|
+async function getData(loadedData, dataType, month) {
|
|
|
+ switch (dataType) {
|
|
|
+ case "prod":
|
|
|
+ case "company":
|
|
|
+ case "base":
|
|
|
+ case "ship":
|
|
|
+ if (!loadedData[dataType + "-data-" + month]) {
|
|
|
+ const response = await fetch(`data/${dataType}-data-${month}.json`);
|
|
|
+ if (response.status == 200) {
|
|
|
+ loadedData[dataType + "-data-" + month] = response.json();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return loadedData[dataType + "-data-" + month];
|
|
|
+ case "knownCompanies":
|
|
|
+ if (!loadedData["known-companies"]) {
|
|
|
+ loadedData["known-companies"] = await fetch("data/knownCompanies.json").then((response) => response.json());
|
|
|
+ }
|
|
|
+ return loadedData["known-companies"];
|
|
|
+ case "universe":
|
|
|
+ if (!loadedData["universe-data"]) {
|
|
|
+ loadedData["universe-data"] = await fetch("data/universe-data.json").then((response) => response.json());
|
|
|
+ }
|
|
|
+ return loadedData["universe-data"];
|
|
|
+ case "parentCorps":
|
|
|
+ if (!loadedData["parent-corps"]) {
|
|
|
+ loadedData["parent-corps"] = await fetch("data/parentCorps.json").then((response) => response.json());
|
|
|
+ }
|
|
|
+ return loadedData["parent-corps"];
|
|
|
+ }
|
|
|
+}
|
|
|
+function getMatCategory(ticker) {
|
|
|
+ return Object.entries(materialCategories).find(([_, tickers]) => tickers.includes(ticker))?.[0];
|
|
|
+}
|
|
|
+function getMatColor(ticker) {
|
|
|
+ return materialCategoryColors[getMatCategory(ticker) ?? ""] ?? "#000000";
|
|
|
+}
|
|
|
+async function getCompanyId(companyName, loadedData) {
|
|
|
+ const knownCompanies = await getData(loadedData, "knownCompanies");
|
|
|
+ var companyID = Object.entries(knownCompanies).find(([, v]) => v?.Username?.toLowerCase() === companyName.toLowerCase())?.[0];
|
|
|
+ if (companyID) {
|
|
|
+ return companyID;
|
|
|
+ }
|
|
|
+ console.log("Unknown username, querying FIO.");
|
|
|
+ const fioResult = await fetch("https://rest.fnar.net/user/" + companyName).then((response) => response.json()).catch((error) => {
|
|
|
+ alert("Bad Response: Check Username");
|
|
|
+ console.error(error);
|
|
|
+ });
|
|
|
+ companyID = fioResult?.CompanyId;
|
|
|
+ companyName = fioResult?.UserName;
|
|
|
+ knownCompanies[companyID] = companyName;
|
|
|
+ return companyID;
|
|
|
+}
|
|
|
+function updateUsernameLabel() {
|
|
|
+ const usernameLabel = document.getElementById("companyName-label");
|
|
|
+ const groupElem = document.getElementById("group");
|
|
|
+ if (usernameLabel && usernameLabel.firstChild) {
|
|
|
+ if (groupElem && groupElem.value && groupElem.value != "company") {
|
|
|
+ usernameLabel.firstChild.nodeValue = "Corp Code: ";
|
|
|
+ } else {
|
|
|
+ usernameLabel.firstChild.nodeValue = "Username: ";
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/core.ts
|
|
|
+function switchPlot() {
|
|
|
+ const graphSelect = document.getElementById("graphType");
|
|
|
+ const graph = graphs.find((obj) => obj.id == graphSelect.value);
|
|
|
+ const oldGraph = document.getElementById("mainPlot");
|
|
|
+ oldGraph?.remove();
|
|
|
+ const newGraph = document.createElement("div");
|
|
|
+ newGraph.id = "mainPlot";
|
|
|
+ const graphContainer = document.getElementById("mainPlotContainer");
|
|
|
+ graphContainer?.appendChild(newGraph);
|
|
|
+ const configValues = {};
|
|
|
+ graph?.configFieldIDs.forEach((id) => {
|
|
|
+ const inputElem = document.getElementById(id);
|
|
|
+ configValues[id] = inputElem?.value;
|
|
|
+ });
|
|
|
+ updatePermalink();
|
|
|
+ (async () => {
|
|
|
+ graph?.generatePlot(configValues, "mainPlot");
|
|
|
+ })();
|
|
|
+}
|
|
|
+var defaultData = { marker: { color: "rgb(247, 166, 0)" }, hovertemplate: "%{x}: %{y:,.3~s}<extra></extra>" };
|
|
|
+var defaultLayout = {
|
|
|
+ title: {
|
|
|
+ font: { color: "#eee", family: '"Droid Sans", sans-serif' }
|
|
|
+ },
|
|
|
+ xaxis: {
|
|
|
+ title: {
|
|
|
+ font: { color: "#bbb", family: '"Droid Sans", sans-serif' }
|
|
|
+ },
|
|
|
+ tickfont: { color: "#666", family: '"Droid Sans", sans-serif' },
|
|
|
+ tickangle: -45
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: {
|
|
|
+ font: { color: "#bbb", family: '"Droid Sans", sans-serif' }
|
|
|
+ },
|
|
|
+ tickfont: { color: "#666", family: '"Droid Sans", sans-serif' },
|
|
|
+ gridcolor: "#323232"
|
|
|
+ },
|
|
|
+ plot_bgcolor: "#252525",
|
|
|
+ paper_bgcolor: "#252525",
|
|
|
+ dragmode: "pan"
|
|
|
+};
|
|
|
+var defaultConfig = {
|
|
|
+ displayModeBar: true,
|
|
|
+ modeBarButtonsToRemove: ["lasso2d"],
|
|
|
+ displaylogo: false,
|
|
|
+ scrollZoom: true,
|
|
|
+ responsive: true
|
|
|
+};
|
|
|
+function createGraph(plotContainerID, data, layout, config) {
|
|
|
+ for (var i = 0;i < data.length; i++) {
|
|
|
+ data[i] = deepMerge(structuredClone(defaultData), data[i]);
|
|
|
+ }
|
|
|
+ layout = deepMerge(structuredClone(defaultLayout), layout);
|
|
|
+ config = deepMerge(structuredClone(defaultConfig), config);
|
|
|
+ Plotly.newPlot(plotContainerID, { data, layout, config });
|
|
|
+}
|
|
|
+function createTable(plotContainerID, titleText, headers, data, dataDisplay) {
|
|
|
+ const container = document.getElementById(plotContainerID);
|
|
|
+ if (!container) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const title = document.createElement("div");
|
|
|
+ title.textContent = titleText;
|
|
|
+ title.classList.add("title");
|
|
|
+ container.appendChild(title);
|
|
|
+ const table = document.createElement("table");
|
|
|
+ const header = document.createElement("thead");
|
|
|
+ const headRow = document.createElement("tr");
|
|
|
+ headers.forEach((label) => {
|
|
|
+ const column = document.createElement("th");
|
|
|
+ column.textContent = label;
|
|
|
+ headRow.appendChild(column);
|
|
|
+ });
|
|
|
+ header.appendChild(headRow);
|
|
|
+ table.appendChild(header);
|
|
|
+ const body = document.createElement("tbody");
|
|
|
+ dataDisplay.forEach((dataRow) => {
|
|
|
+ const row = document.createElement("tr");
|
|
|
+ dataRow.forEach((dataElem) => {
|
|
|
+ const td = document.createElement("td");
|
|
|
+ td.appendChild(dataElem);
|
|
|
+ row.appendChild(td);
|
|
|
+ });
|
|
|
+ body.appendChild(row);
|
|
|
+ });
|
|
|
+ table.appendChild(body);
|
|
|
+ container.appendChild(table);
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/companyHistory.ts
|
|
|
+class CompanyHistory {
|
|
|
+ id = "compHistory";
|
|
|
+ displayName = "Company History";
|
|
|
+ configFieldIDs = ["metric", "group", "companyName"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Bases"], values: ["volume", "profit", "bases"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "group", "Group: ", { prettyValues: ["By Company", "By Corporation"], values: ["company", "corp"] }, useURLParams ? this.urlParams.group : undefined, updateUsernameLabel));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "companyName", "Username: ", undefined, useURLParams ? this.urlParams.companyName : undefined, updateFunc, "-27px"));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ if (!configValues.companyName || configValues.companyName == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ var companyName;
|
|
|
+ var companyID;
|
|
|
+ if (configValues.group == "company") {
|
|
|
+ companyID = await getCompanyId(configValues.companyName, this.loadedData);
|
|
|
+ if (!companyID) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ companyName = knownCompanies[companyID]?.Username;
|
|
|
+ } else {
|
|
|
+ companyName = configValues.companyName.toUpperCase();
|
|
|
+ }
|
|
|
+ const fullCompanyData = [];
|
|
|
+ for (var i = 0;i < months.length; i++) {
|
|
|
+ const monthData = await getData(this.loadedData, configValues.metric == "bases" ? "base" : "company", months[i]);
|
|
|
+ const dataset = configValues.metric == "bases" ? monthData : monthData.totals;
|
|
|
+ if (configValues.group == "company") {
|
|
|
+ fullCompanyData.push(dataset[companyID || ""]);
|
|
|
+ } else {
|
|
|
+ const corpData = {};
|
|
|
+ var hasData = false;
|
|
|
+ const parentCorps = await getData(this.loadedData, "parentCorps");
|
|
|
+ Object.keys(dataset).forEach((id) => {
|
|
|
+ const companyObj = knownCompanies[id];
|
|
|
+ if (companyObj && (companyObj.Corporation == companyName || parentCorps[companyObj.Corporation] == companyName)) {
|
|
|
+ hasData = true;
|
|
|
+ Object.keys(dataset[id]).forEach((metric) => {
|
|
|
+ if (!corpData[metric]) {
|
|
|
+ corpData[metric] = 0;
|
|
|
+ }
|
|
|
+ corpData[metric] += dataset[id][metric];
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (hasData) {
|
|
|
+ fullCompanyData.push(corpData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validMonths = [];
|
|
|
+ const companyData = [];
|
|
|
+ fullCompanyData.forEach((data, i2) => {
|
|
|
+ if (!data) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ validMonths.push(monthsPretty[i2]);
|
|
|
+ companyData.push(data[configValues.metric]);
|
|
|
+ });
|
|
|
+ const titles = {
|
|
|
+ profit: "Production Profit History of ",
|
|
|
+ volume: "Production Volume History of ",
|
|
|
+ bases: "Base Count History of "
|
|
|
+ };
|
|
|
+ const yAxis = {
|
|
|
+ profit: "Daily Profit [$/day]",
|
|
|
+ volume: "Daily Volume [$/day]",
|
|
|
+ bases: "Bases"
|
|
|
+ };
|
|
|
+ createGraph(plotContainerID, [{ x: validMonths, y: companyData, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Month" }
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: yAxis[configValues.metric] }
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/companyRank.ts
|
|
|
+class CompanyRank {
|
|
|
+ id = "compRank";
|
|
|
+ displayName = "Company Rank";
|
|
|
+ configFieldIDs = ["month", "companyName"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", { prettyValues: monthsPretty, values: months }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "companyName", "Username: ", undefined, useURLParams ? this.urlParams.companyName : undefined, updateFunc, "-27px"));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ if (!configValues.companyName || configValues.companyName == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ var companyID = await getCompanyId(configValues.companyName, this.loadedData);
|
|
|
+ if (!companyID) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var companyName = knownCompanies[companyID]?.Username;
|
|
|
+ const fullCompanyData = await getData(this.loadedData, "company", configValues.month);
|
|
|
+ const fullPrevCompanyData = configValues.month == months[0] ? { individual: {} } : await getData(this.loadedData, "company", months[months.indexOf(configValues.month) - 1]);
|
|
|
+ const companyData = fullCompanyData.individual[companyID];
|
|
|
+ const prevCompanyData = fullPrevCompanyData.individual[companyID];
|
|
|
+ if (!companyData) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var tableData = [];
|
|
|
+ var tableDisplay = [];
|
|
|
+ Object.keys(companyData).forEach((ticker) => {
|
|
|
+ const tableRow = [companyData[ticker].rank, ticker, companyData[ticker].amount, companyData[ticker].volume, companyData[ticker].profit];
|
|
|
+ const tableDisplayRow = [];
|
|
|
+ if (prevCompanyData) {
|
|
|
+ const outerRankDiv = document.createElement("div");
|
|
|
+ const symbolDiv = document.createElement("div");
|
|
|
+ const rankDiv = document.createElement("div");
|
|
|
+ outerRankDiv.style.display = "flex";
|
|
|
+ symbolDiv.style.width = "14px";
|
|
|
+ symbolDiv.style.minWidth = "14px";
|
|
|
+ symbolDiv.style.marginRight = "2px";
|
|
|
+ const prevRank = prevCompanyData[ticker]?.rank;
|
|
|
+ const increasing = prevRank < companyData[ticker].rank;
|
|
|
+ if (prevRank && prevRank != companyData[ticker].rank) {
|
|
|
+ symbolDiv.textContent = increasing ? "▼" : "▲";
|
|
|
+ symbolDiv.style.color = increasing ? "#d9534f" : "#5cb85c";
|
|
|
+ }
|
|
|
+ rankDiv.textContent = companyData[ticker].rank.toLocaleString();
|
|
|
+ outerRankDiv.appendChild(symbolDiv);
|
|
|
+ outerRankDiv.appendChild(rankDiv);
|
|
|
+ tableDisplayRow.push(outerRankDiv);
|
|
|
+ } else {
|
|
|
+ const rankDiv = document.createElement("div");
|
|
|
+ rankDiv.textContent = companyData[ticker].rank.toLocaleString();
|
|
|
+ tableDisplayRow.push(rankDiv);
|
|
|
+ }
|
|
|
+ const tickerDiv = document.createElement("div");
|
|
|
+ tickerDiv.textContent = ticker;
|
|
|
+ tableDisplayRow.push(tickerDiv);
|
|
|
+ const amountDiv = document.createElement("div");
|
|
|
+ amountDiv.textContent = companyData[ticker].amount.toLocaleString(undefined, { maximumFractionDigits: 1 });
|
|
|
+ tableDisplayRow.push(amountDiv);
|
|
|
+ const volumeDiv = document.createElement("div");
|
|
|
+ volumeDiv.textContent = "$" + companyData[ticker].volume.toLocaleString(undefined, { notation: "compact", maximumSignificantDigits: 3 });
|
|
|
+ tableDisplayRow.push(volumeDiv);
|
|
|
+ const profitDiv = document.createElement("div");
|
|
|
+ const profit = companyData[ticker].profit ?? NaN;
|
|
|
+ let profitText = "";
|
|
|
+ if (profit < 0)
|
|
|
+ profitText = "-$" + (-profit).toLocaleString(undefined, { notation: "compact", maximumSignificantDigits: 3 });
|
|
|
+ else if (profit > 0)
|
|
|
+ profitText = "$" + profit.toLocaleString(undefined, { notation: "compact", maximumSignificantDigits: 3 });
|
|
|
+ profitDiv.textContent = profitText;
|
|
|
+ tableDisplayRow.push(profitDiv);
|
|
|
+ tableData.push(tableRow);
|
|
|
+ tableDisplay.push(tableDisplayRow);
|
|
|
+ });
|
|
|
+ const indices = tableData.map((_, i) => i).sort((a, b) => tableData[a][0] - tableData[b][0]);
|
|
|
+ tableData = indices.map((i) => tableData[i]);
|
|
|
+ tableDisplay = indices.map((i) => tableDisplay[i]);
|
|
|
+ const title = "Production Ranking of " + companyName + " - " + prettyMonthName(configValues.month) + `
|
|
|
+Volume: #` + fullCompanyData.totals[companyID].volumeRank + ", Profit: #" + fullCompanyData.totals[companyID].profitRank;
|
|
|
+ const headers = ["Rank", "Ticker", "Amount [/day]", "Volume [$/day]", "Profit [$/day]"];
|
|
|
+ createTable(plotContainerID, title, headers, tableData, tableDisplay);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/companyTotals.ts
|
|
|
+class CompanyTotals {
|
|
|
+ id = "compTotals";
|
|
|
+ displayName = "Company Totals";
|
|
|
+ configFieldIDs = ["chartType", "metric", "group", "month", "companyName"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ const usernameLabel = useURLParams && this.urlParams.group && this.urlParams.group != "company" ? "Corp Code: " : "Username: ";
|
|
|
+ configDiv?.appendChild(addConfigField("select", "chartType", "Chart Type: ", { prettyValues: ["Bar", "Pie", "Treemap (Mat)", "Treemap (Cat)"], values: ["bar", "pie", "treemap", "treemap-categories"] }, useURLParams ? this.urlParams.chartType : "treemap", updateFunc, "-30px"));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit"], values: ["volume", "profit"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "group", "Group: ", { prettyValues: ["By Company", "By Corporation"], values: ["company", "corp"] }, useURLParams ? this.urlParams.group : undefined, updateUsernameLabel));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", { prettyValues: monthsPretty, values: months }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "companyName", usernameLabel, undefined, useURLParams ? this.urlParams.companyName : undefined, updateFunc, "-27px"));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ if (!configValues.companyName || configValues.companyName == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const companyData = await getData(this.loadedData, "company", configValues.month);
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ var companyName;
|
|
|
+ var prodData;
|
|
|
+ if (configValues.group == "company") {
|
|
|
+ var companyID = await getCompanyId(configValues.companyName, this.loadedData);
|
|
|
+ if (!companyID) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ companyName = knownCompanies[companyID]?.Username;
|
|
|
+ if (!companyData.individual[companyID]) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ prodData = companyData.individual[companyID];
|
|
|
+ } else {
|
|
|
+ const parentCorps = await getData(this.loadedData, "parentCorps");
|
|
|
+ companyName = configValues.companyName.toUpperCase();
|
|
|
+ prodData = {};
|
|
|
+ Object.keys(companyData.individual).forEach((id) => {
|
|
|
+ const companyObj = knownCompanies[id];
|
|
|
+ if (companyObj && (companyObj.Corporation == companyName || parentCorps[companyObj.Corporation] == companyName)) {
|
|
|
+ const indivCompanyData = companyData.individual[id];
|
|
|
+ Object.keys(indivCompanyData).forEach((ticker) => {
|
|
|
+ if (!prodData[ticker]) {
|
|
|
+ prodData[ticker] = { volume: 0, profit: 0, amount: 0, rank: 0 };
|
|
|
+ }
|
|
|
+ Object.keys(indivCompanyData[ticker]).forEach((metric) => {
|
|
|
+ prodData[ticker][metric] += indivCompanyData[ticker][metric];
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (Object.keys(prodData).length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var catData = [];
|
|
|
+ var categories = [];
|
|
|
+ var totalValue = 0;
|
|
|
+ Object.keys(prodData).forEach((ticker) => {
|
|
|
+ const metric = prodData[ticker][configValues.metric];
|
|
|
+ if (metric < 0 && (configValues.chartType == "treemap" || configValues.chartType == "treemap-categories")) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ totalValue += metric;
|
|
|
+ if (configValues.chartType == "treemap-categories") {
|
|
|
+ const category = getMatCategory(ticker);
|
|
|
+ const catIndex = categories.indexOf(category);
|
|
|
+ if (catIndex == -1) {
|
|
|
+ categories.push(category);
|
|
|
+ catData.push(metric);
|
|
|
+ } else {
|
|
|
+ catData[catIndex] += metric;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ catData.push(metric);
|
|
|
+ categories.push(ticker);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const indices = Array.from(categories.keys());
|
|
|
+ indices.sort((a, b) => catData[b] - catData[a]);
|
|
|
+ catData = indices.map((i) => catData[i]);
|
|
|
+ categories = indices.map((i) => categories[i]);
|
|
|
+ const titles = {
|
|
|
+ profit: "Production Profit Breakdown of ",
|
|
|
+ volume: "Production Volume Breakdown of "
|
|
|
+ };
|
|
|
+ if (configValues.chartType == "treemap" || configValues.chartType == "treemap-categories") {
|
|
|
+ const colors = [];
|
|
|
+ if (configValues.chartType == "treemap") {
|
|
|
+ categories.forEach((cat) => {
|
|
|
+ colors.push(getMatColor(cat));
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ categories.forEach((cat) => {
|
|
|
+ colors.push(materialCategoryColors[cat] ?? "#000000");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const parents = categories.map((m) => "Total");
|
|
|
+ categories.push("Total");
|
|
|
+ catData.push(totalValue);
|
|
|
+ parents.push("");
|
|
|
+ colors.push("#252525");
|
|
|
+ createGraph(plotContainerID, [{
|
|
|
+ labels: categories,
|
|
|
+ values: catData,
|
|
|
+ parents,
|
|
|
+ type: "treemap",
|
|
|
+ maxdepth: 2,
|
|
|
+ branchvalues: "total",
|
|
|
+ marker: {
|
|
|
+ colors
|
|
|
+ },
|
|
|
+ tiling: {
|
|
|
+ pad: 0
|
|
|
+ },
|
|
|
+ textposition: "middle center",
|
|
|
+ hovertemplate: "%{label}<br>$%{value:,.3~s}/day<br>%{percentEntry:.2%}<extra></extra>"
|
|
|
+ }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 10,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 10
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) }
|
|
|
+ }, {});
|
|
|
+ } else if (configValues.chartType == "bar") {
|
|
|
+ createGraph(plotContainerID, [{ x: categories, y: catData, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, Math.min(categories.length, 30) - 0.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + " [$/day]" },
|
|
|
+ range: [0, null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ } else if (configValues.chartType == "pie") {
|
|
|
+ createGraph(plotContainerID, [{ labels: categories, values: catData, type: "pie", textinfo: "label", textposition: "inside", insidetextorientation: "none", automargin: false, hovertemplate: "%{label}<br>$%{value:,.3~s}/day<br>%{percent}<extra></extra>" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 10,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 10
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, Math.min(categories.length, 30) - 0.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + " [$/day]" },
|
|
|
+ range: [0, null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/matHistory.ts
|
|
|
+class MatHistory {
|
|
|
+ id = "matHistory";
|
|
|
+ displayName = "MAT History";
|
|
|
+ configFieldIDs = ["metric", "ticker"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Price", "Produced", "Consumption", "Surplus"], values: ["volume", "profit", "price", "amount", "consumed", "surplus"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "ticker", "Ticker: ", undefined, useURLParams && this.urlParams.ticker ? this.urlParams.ticker : undefined, updateFunc));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ if (!configValues.ticker || configValues.ticker == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const totalTickerData = [];
|
|
|
+ for (var i = 0;i < months.length; i++) {
|
|
|
+ const monthData = await getData(this.loadedData, "prod", months[i]);
|
|
|
+ totalTickerData.push(monthData[(configValues.ticker ?? "").toUpperCase()]);
|
|
|
+ }
|
|
|
+ const tickerData = [];
|
|
|
+ const validMonths = [];
|
|
|
+ totalTickerData.forEach((data, i2) => {
|
|
|
+ if (!data) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ validMonths.push(monthsPretty[i2]);
|
|
|
+ switch (configValues.metric) {
|
|
|
+ case "volume":
|
|
|
+ tickerData.push(data.volume);
|
|
|
+ break;
|
|
|
+ case "profit":
|
|
|
+ tickerData.push(data.profit);
|
|
|
+ break;
|
|
|
+ case "price":
|
|
|
+ tickerData.push(data.amount == 0 ? 0 : data.volume / data.amount);
|
|
|
+ break;
|
|
|
+ case "amount":
|
|
|
+ tickerData.push(data.amount);
|
|
|
+ break;
|
|
|
+ case "consumed":
|
|
|
+ tickerData.push(data.consumed);
|
|
|
+ break;
|
|
|
+ case "surplus":
|
|
|
+ tickerData.push(data.amount - data.consumed);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (validMonths.length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const titles = {
|
|
|
+ profit: "Production Profit History of ",
|
|
|
+ volume: "Production Volume History of ",
|
|
|
+ amount: "Production Amount History of ",
|
|
|
+ price: "Price History of ",
|
|
|
+ consumed: "Consumption History of ",
|
|
|
+ surplus: "Surplus Production History of "
|
|
|
+ };
|
|
|
+ const yAxis = {
|
|
|
+ profit: "Daily Profit [$/day]",
|
|
|
+ volume: "Daily Volume [$/day]",
|
|
|
+ amount: "Daily Production [per day]",
|
|
|
+ price: "Price [$]",
|
|
|
+ consumed: "Daily Consumption [per day]",
|
|
|
+ surplus: "Daily Surplus [per day]"
|
|
|
+ };
|
|
|
+ createGraph(plotContainerID, [{ x: validMonths, y: tickerData, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + (configValues.ticker ?? "").toUpperCase() },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Month" }
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: yAxis[configValues.metric] }
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/topCompanies.ts
|
|
|
+class TopCompanies {
|
|
|
+ id = "topCompanies";
|
|
|
+ displayName = "Top Companies";
|
|
|
+ configFieldIDs = ["metric", "group", "month"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Bases", "Ships"], values: ["volume", "profit", "bases", "ships"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "group", "Group: ", { prettyValues: ["By Company", "By Corporation"], values: ["company", "corp"] }, useURLParams ? this.urlParams.group : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", { prettyValues: monthsPretty, values: months }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ var fileName;
|
|
|
+ switch (configValues.metric) {
|
|
|
+ case "bases":
|
|
|
+ fileName = "base";
|
|
|
+ break;
|
|
|
+ case "ships":
|
|
|
+ fileName = "ship";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ fileName = "company";
|
|
|
+ }
|
|
|
+ const companyData = await getData(this.loadedData, fileName, configValues.month);
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ const dataset = configValues.metric == "bases" || configValues.metric == "ships" ? companyData : companyData.totals;
|
|
|
+ var companyNames;
|
|
|
+ var volumes;
|
|
|
+ if (!companyData) {
|
|
|
+ console.error("Data type not defined for this month.");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (configValues.group == "corp") {
|
|
|
+ const parentCorps = await getData(this.loadedData, "parentCorps");
|
|
|
+ const corpData = {};
|
|
|
+ Object.keys(dataset).forEach((id) => {
|
|
|
+ const companyObj = knownCompanies[id];
|
|
|
+ if (companyObj && companyObj["Corporation"]) {
|
|
|
+ var corp = companyObj["Corporation"];
|
|
|
+ if (parentCorps[corp]) {
|
|
|
+ corp = parentCorps[corp];
|
|
|
+ }
|
|
|
+ if (corpData[corp]) {
|
|
|
+ corpData[corp] += dataset[id][configValues.metric];
|
|
|
+ } else {
|
|
|
+ corpData[corp] = dataset[id][configValues.metric];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ const volumeArray = Object.entries(corpData).map(([corpCode, info]) => ({
|
|
|
+ corpCode,
|
|
|
+ volume: info
|
|
|
+ }));
|
|
|
+ volumeArray.sort((a, b) => b.volume - a.volume);
|
|
|
+ companyNames = volumeArray.map((item) => item.corpCode);
|
|
|
+ volumes = volumeArray.map((item) => item.volume);
|
|
|
+ } else {
|
|
|
+ const volumeArray = Object.entries(dataset).map(([companyID, info]) => ({
|
|
|
+ companyID,
|
|
|
+ volume: info[configValues.metric]
|
|
|
+ }));
|
|
|
+ volumeArray.sort((a, b) => b.volume - a.volume);
|
|
|
+ const companyIDs = volumeArray.map((item) => item.companyID);
|
|
|
+ volumes = volumeArray.map((item) => item.volume);
|
|
|
+ companyNames = [];
|
|
|
+ companyIDs.forEach((id) => {
|
|
|
+ const companyObj = knownCompanies[id];
|
|
|
+ companyNames.push(companyObj ? companyObj["Username"] : id.slice(0, 5) + "...");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const prettyGroupNames = { company: "Companies", corp: "Corporations" };
|
|
|
+ createGraph(plotContainerID, [{ x: companyNames, y: volumes, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 100
|
|
|
+ } } : {},
|
|
|
+ title: { text: "Top " + prettyGroupNames[configValues.group] + " (" + prettyModeNames[configValues.metric] + ") - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, 29.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + (configValues.metric == "bases" || configValues.metric == "ships" ? "" : " [$/day]") },
|
|
|
+ range: [0, null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/topProduction.ts
|
|
|
+class TopProduction {
|
|
|
+ id = "topProduction";
|
|
|
+ displayName = "Top Production";
|
|
|
+ configFieldIDs = ["metric", "month"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Deficit"], values: ["volume", "profit", "deficit"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", { prettyValues: monthsPretty, values: months }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ const prodData = await getData(this.loadedData, "prod", configValues.month);
|
|
|
+ if (configValues.metric == "deficit") {
|
|
|
+ Object.keys(prodData).forEach((ticker) => {
|
|
|
+ if (!prodData[ticker].amount || prodData[ticker].amount == 0) {
|
|
|
+ prodData[ticker].deficit = 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ prodData[ticker].deficit = (prodData[ticker].amount - (prodData[ticker].consumed || 0)) * prodData[ticker].volume / prodData[ticker].amount;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const titles = {
|
|
|
+ profit: "Profit Materials",
|
|
|
+ volume: "Production Volumes",
|
|
|
+ deficit: "Deficits"
|
|
|
+ };
|
|
|
+ const volumeArray = Object.entries(prodData).map(([ticker, info]) => ({
|
|
|
+ ticker,
|
|
|
+ volume: info[configValues.metric]
|
|
|
+ }));
|
|
|
+ if (configValues.metric == "deficit") {
|
|
|
+ volumeArray.sort((a, b) => a.volume - b.volume);
|
|
|
+ } else {
|
|
|
+ volumeArray.sort((a, b) => b.volume - a.volume);
|
|
|
+ }
|
|
|
+ const tickers = volumeArray.map((item) => item.ticker);
|
|
|
+ const volumes = volumeArray.map((item) => item.volume);
|
|
|
+ createGraph(plotContainerID, [{ x: tickers, y: volumes, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: "Top " + titles[configValues.metric] + " - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, 29.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + " [$/day]" },
|
|
|
+ range: [configValues.metric == "deficit" ? null : 0, configValues.metric == "deficit" ? 0 : null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/universeHistory.ts
|
|
|
+class UniverseHistory {
|
|
|
+ id = "universeHistory";
|
|
|
+ displayName = "Universe History";
|
|
|
+ configFieldIDs = ["metric"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Bases", "Companies"], values: ["volume", "profit", "bases", "companies"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ const data = [];
|
|
|
+ const uniData = await getData(this.loadedData, "universe");
|
|
|
+ for (var i = 0;i < months.length; i++) {
|
|
|
+ data.push(uniData[months[i]][configValues.metric]);
|
|
|
+ }
|
|
|
+ const titles = {
|
|
|
+ profit: "Profit History of the Universe",
|
|
|
+ volume: "Production Volume History of the Universe",
|
|
|
+ bases: "Base Count History of the Universe",
|
|
|
+ companies: "Company Count History of the Universe"
|
|
|
+ };
|
|
|
+ const yAxis = {
|
|
|
+ profit: "Daily Profit [$/day]",
|
|
|
+ volume: "Daily Volume [$/day]",
|
|
|
+ bases: "Bases",
|
|
|
+ companies: "Companies"
|
|
|
+ };
|
|
|
+ createGraph(plotContainerID, [{ x: monthsPretty, y: data, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Month" }
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: yAxis[configValues.metric] }
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/marketOverview.ts
|
|
|
+class MarketOverview {
|
|
|
+ id = "marketOverview";
|
|
|
+ displayName = "Market Overview";
|
|
|
+ configFieldIDs = ["month", "ticker"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = switchPlot;
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", {
|
|
|
+ prettyValues: monthsPretty,
|
|
|
+ values: months
|
|
|
+ }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "ticker", "Ticker: ", undefined, useURLParams && this.urlParams.ticker ? this.urlParams.ticker : undefined, updateFunc));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ const ticker = configValues.ticker?.toUpperCase();
|
|
|
+ if (!ticker) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const companyData = await getData(this.loadedData, "company", configValues.month);
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ const labels = [];
|
|
|
+ const parents = [];
|
|
|
+ const values = [];
|
|
|
+ let totalAmount = 0;
|
|
|
+ let totalVolume = 0;
|
|
|
+ let totalProfit = 0;
|
|
|
+ for (const key of Object.keys(companyData.individual)) {
|
|
|
+ const individualData = companyData.individual[key];
|
|
|
+ const tickerData = individualData[ticker];
|
|
|
+ if (!tickerData) {
|
|
|
+ continue;
|
|
|
+ }
|
|
|
+ const companyObj = knownCompanies[key];
|
|
|
+ labels.push(companyObj ? companyObj["Username"] : key.slice(0, 5) + "...");
|
|
|
+ parents.push("Total");
|
|
|
+ values.push(tickerData.amount);
|
|
|
+ totalVolume += tickerData.volume;
|
|
|
+ totalProfit += tickerData.profit;
|
|
|
+ totalAmount += tickerData.amount;
|
|
|
+ }
|
|
|
+ if (labels.length === 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ labels.push("Total");
|
|
|
+ parents.push("");
|
|
|
+ values.push(totalAmount);
|
|
|
+ const formatMoney = (num) => "$" + num.toLocaleString(undefined, { maximumFractionDigits: 0 });
|
|
|
+ const title = `${ticker} Market - ${prettyMonthName(configValues.month)}` + "<br>" + `Produced per day: ${Math.round(totalAmount).toLocaleString()} ${ticker}` + "<br>" + `Volume: ${formatMoney(totalVolume)} | Profit: ${formatMoney(totalProfit)}`;
|
|
|
+ createGraph(plotContainerID, [{
|
|
|
+ labels,
|
|
|
+ values,
|
|
|
+ parents,
|
|
|
+ type: "treemap",
|
|
|
+ branchvalues: "total",
|
|
|
+ tiling: {
|
|
|
+ pad: 0
|
|
|
+ },
|
|
|
+ textposition: "middle center",
|
|
|
+ hovertemplate: "%{label}<br>%{value:,.3~s}/day<br>%{percentEntry:.2%}<extra></extra>"
|
|
|
+ }], {
|
|
|
+ title: { text: title },
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? {
|
|
|
+ margin: {
|
|
|
+ l: 10,
|
|
|
+ r: 10,
|
|
|
+ t: 60,
|
|
|
+ b: 10
|
|
|
+ }
|
|
|
+ } : {}
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/graphs/corpBreakdown.ts
|
|
|
+class CorporationBreakdown {
|
|
|
+ id = "corpBreakdown";
|
|
|
+ displayName = "Corp Breakdown";
|
|
|
+ configFieldIDs = ["chartType", "metric", "month", "companyName"];
|
|
|
+ loadedData;
|
|
|
+ urlParams;
|
|
|
+ constructor(loadedData, urlParams) {
|
|
|
+ this.loadedData = loadedData;
|
|
|
+ this.urlParams = urlParams;
|
|
|
+ }
|
|
|
+ setConfigs(useURLParams) {
|
|
|
+ const updateFunc = function() {
|
|
|
+ switchPlot();
|
|
|
+ };
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ if (configDiv) {
|
|
|
+ clearChildren(configDiv);
|
|
|
+ }
|
|
|
+ configDiv?.appendChild(addConfigField("select", "chartType", "Chart Type: ", { prettyValues: ["Bar", "Pie", "Treemap"], values: ["bar", "pie", "treemap"] }, useURLParams ? this.urlParams.chartType : "treemap", updateFunc, "-30px"));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "metric", "Metric: ", { prettyValues: ["Volume", "Profit", "Bases", "Ships"], values: ["volume", "profit", "bases", "ships"] }, useURLParams ? this.urlParams.metric : undefined, updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("select", "month", "Month: ", { prettyValues: monthsPretty, values: months }, useURLParams && this.urlParams.month ? this.urlParams.month : months[months.length - 1], updateFunc));
|
|
|
+ configDiv?.appendChild(addConfigField("input", "companyName", "Corp Code: ", undefined, useURLParams ? this.urlParams.companyName : undefined, updateFunc, "-29px"));
|
|
|
+ }
|
|
|
+ async generatePlot(configValues, plotContainerID) {
|
|
|
+ if (!configValues.companyName || configValues.companyName == "") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var fileName;
|
|
|
+ switch (configValues.metric) {
|
|
|
+ case "bases":
|
|
|
+ fileName = "base";
|
|
|
+ break;
|
|
|
+ case "ships":
|
|
|
+ fileName = "ship";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ fileName = "company";
|
|
|
+ }
|
|
|
+ const companyData = await getData(this.loadedData, fileName, configValues.month);
|
|
|
+ const dataset = configValues.metric == "bases" || configValues.metric == "ships" ? companyData : companyData.totals;
|
|
|
+ const knownCompanies = await getData(this.loadedData, "knownCompanies");
|
|
|
+ var companyName;
|
|
|
+ const parentCorps = await getData(this.loadedData, "parentCorps");
|
|
|
+ companyName = configValues.companyName.toUpperCase();
|
|
|
+ const corpData = {};
|
|
|
+ if (!companyData) {
|
|
|
+ console.error("Data type not defined for this month.");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Object.keys(dataset).forEach((id) => {
|
|
|
+ const companyObj = knownCompanies[id];
|
|
|
+ if (companyObj && (companyObj.Corporation == companyName || parentCorps[companyObj.Corporation] == companyName)) {
|
|
|
+ const indivCompanyData = dataset[id];
|
|
|
+ const name = companyObj["Username"];
|
|
|
+ corpData[name] = indivCompanyData;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (Object.keys(corpData).length == 0) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var catData = [];
|
|
|
+ var categories = [];
|
|
|
+ var totalValue = 0;
|
|
|
+ Object.keys(corpData).forEach((name) => {
|
|
|
+ const metric = corpData[name][configValues.metric];
|
|
|
+ if (metric < 0 && configValues.chartType == "treemap") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ totalValue += metric;
|
|
|
+ catData.push(metric);
|
|
|
+ categories.push(name);
|
|
|
+ });
|
|
|
+ const indices = Array.from(categories.keys());
|
|
|
+ indices.sort((a, b) => catData[b] - catData[a]);
|
|
|
+ catData = indices.map((i) => catData[i]);
|
|
|
+ categories = indices.map((i) => categories[i]);
|
|
|
+ const titles = {
|
|
|
+ profit: "Production Profit Breakdown of ",
|
|
|
+ volume: "Production Volume Breakdown of ",
|
|
|
+ bases: "Base Breakdown of ",
|
|
|
+ ships: "Ship Breakdown of "
|
|
|
+ };
|
|
|
+ const hoverTemplates = {
|
|
|
+ profit: "%{label}<br>$%{value:,.3~s}/day<br>%{percentEntry:.2%}<extra></extra>",
|
|
|
+ volume: "%{label}<br>$%{value:,.3~s}/day<br>%{percentEntry:.2%}<extra></extra>",
|
|
|
+ bases: "%{label}<br>%{value:,.3~s}<br>%{percentEntry:.2%}<extra></extra>",
|
|
|
+ ships: "%{label}<br>%{value:,.3~s}<br>%{percentEntry:.2%}<extra></extra>"
|
|
|
+ };
|
|
|
+ if (configValues.chartType == "treemap") {
|
|
|
+ const parents = categories.map((m) => "Total");
|
|
|
+ categories.push("Total");
|
|
|
+ catData.push(totalValue);
|
|
|
+ parents.push("");
|
|
|
+ createGraph(plotContainerID, [{
|
|
|
+ labels: categories,
|
|
|
+ values: catData,
|
|
|
+ parents,
|
|
|
+ type: "treemap",
|
|
|
+ maxdepth: 2,
|
|
|
+ branchvalues: "total",
|
|
|
+ tiling: {
|
|
|
+ pad: 0
|
|
|
+ },
|
|
|
+ textposition: "middle center",
|
|
|
+ hovertemplate: hoverTemplates[configValues.metric]
|
|
|
+ }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 10,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 10
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) }
|
|
|
+ }, {});
|
|
|
+ } else if (configValues.chartType == "bar") {
|
|
|
+ createGraph(plotContainerID, [{ x: categories, y: catData, type: "bar" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 60,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 60
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, Math.min(categories.length, 30) - 0.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + " [$/day]" },
|
|
|
+ range: [0, null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ } else if (configValues.chartType == "pie") {
|
|
|
+ createGraph(plotContainerID, [{ labels: categories, values: catData, type: "pie", textinfo: "label", textposition: "inside", insidetextorientation: "none", automargin: false, hovertemplate: "%{label}<br>$%{value:,.3~s}/day<br>%{percent}<extra></extra>" }], {
|
|
|
+ width: this.urlParams.hideOptions !== undefined ? undefined : 800,
|
|
|
+ height: this.urlParams.hideOptions !== undefined ? undefined : 400,
|
|
|
+ autosize: this.urlParams.hideOptions !== undefined,
|
|
|
+ ...this.urlParams.hideOptions !== undefined ? { margin: {
|
|
|
+ l: 10,
|
|
|
+ r: 10,
|
|
|
+ t: 40,
|
|
|
+ b: 10
|
|
|
+ } } : {},
|
|
|
+ title: { text: titles[configValues.metric] + companyName + " - " + prettyMonthName(configValues.month) },
|
|
|
+ xaxis: {
|
|
|
+ title: { text: "Ticker" },
|
|
|
+ range: [-0.5, Math.min(categories.length, 30) - 0.5]
|
|
|
+ },
|
|
|
+ yaxis: {
|
|
|
+ title: { text: prettyModeNames[configValues.metric] + " [$/day]" },
|
|
|
+ range: [0, null]
|
|
|
+ }
|
|
|
+ }, {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// src/main.ts
|
|
|
+window.onload = function() {
|
|
|
+ addPermalink();
|
|
|
+ const graphSelect = document.getElementById("graphType");
|
|
|
+ graphs.forEach((graph) => {
|
|
|
+ addOption(graphSelect, graph.displayName, graph.id);
|
|
|
+ });
|
|
|
+ if (urlParams.type) {
|
|
|
+ graphSelect.value = urlParams.type;
|
|
|
+ }
|
|
|
+ graphSelect.addEventListener("change", function() {
|
|
|
+ graphs.find((graph) => graph.id == graphSelect.value)?.setConfigs();
|
|
|
+ switchPlot();
|
|
|
+ });
|
|
|
+ graphs.find((graph) => graph.id == graphSelect.value)?.setConfigs(true);
|
|
|
+ switchPlot();
|
|
|
+ if (urlParams.hideOptions !== undefined) {
|
|
|
+ const graphTypeContainer = document.getElementById("graphTypeContainer");
|
|
|
+ const topTabs = document.getElementById("topTabContainer");
|
|
|
+ const configDiv = document.getElementById("selectorSubtypes");
|
|
|
+ const plotContainer = document.getElementById("mainPlot");
|
|
|
+ if (topTabs && graphTypeContainer && configDiv) {
|
|
|
+ topTabs.style.display = "none";
|
|
|
+ graphTypeContainer.style.display = "none";
|
|
|
+ configDiv.style.display = "none";
|
|
|
+ plotContainer?.classList.add("fullScreen");
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+var urlParams = Object.fromEntries(new URLSearchParams(window.location.search));
|
|
|
+var loadedData = {};
|
|
|
+var graphs = [
|
|
|
+ new TopProduction(loadedData, urlParams),
|
|
|
+ new TopCompanies(loadedData, urlParams),
|
|
|
+ new MatHistory(loadedData, urlParams),
|
|
|
+ new UniverseHistory(loadedData, urlParams),
|
|
|
+ new MarketOverview(loadedData, urlParams),
|
|
|
+ new CompanyTotals(loadedData, urlParams),
|
|
|
+ new CompanyHistory(loadedData, urlParams),
|
|
|
+ new CompanyRank(loadedData, urlParams),
|
|
|
+ new CorporationBreakdown(loadedData, urlParams)
|
|
|
+];
|
|
|
+export {
|
|
|
+ graphs
|
|
|
+};
|
|
|
+
|
|
|
+//# debugId=D6A67DC5C3A8C1C264756E2164756E21
|
