contents

jQuery( function ($) { $("#download").click(function (e) { e.preventDefault(); let charts = Highcharts.charts.filter(Boolean); charts[0].downloadCSV(); }); let mapPath = "/modules/custom/sec_custom_blocks/js/oasb_raising_capital_map/"; let dataPath = "/files/"; let mapType; let countyMode = false; var showMetroMap = false; const mapTypes = ["regCF", "regA", "regD", "registered"]; $(document).ready(async function () { document.getElementById("locationSelection").addEventListener("change", filterByValue); (function (H) { H.wrap(H.Chart.prototype, "getCSV", function (p, useLocalDecimalPoint) { // let csv = ""; let generatedHTML = ""; for (let map of mapTypes) { const stateFilters = window[`${map}_filters`]; const countyFilters = window[`${map}_county_filters`]; for (let filter of stateFilters) { let data = window[`${map}_${filter.key}`]; //csv += generateCSV(data, `${window[`${map}_mapTitle`]}(${filter.text})`); generatedHTML += generateA11yTable(data, `${window[`${map}_mapTitle`]}(${filter.text})`); } if (countyFilters?.length) { for (let filter of countyFilters) { let data = window[`${map}_${filter.key}`]; // csv += generateCSV(data, `${window[`${map}_mapTitle`]} (County ${filter.text})`, "county"); generatedHTML += generateA11yTable(data, `${window[`${map}_mapTitle`]} (County ${filter.text})`, "county"); } } } //return csv; }); })(Highcharts); (function (H) { H.addEvent(H.Axis, "afterInit", function () { const logarithmic = this.logarithmic; if (logarithmic && this.options.allowNegativeLog) { // Avoid errors on negative numbers on a log axis this.positiveValuesOnly = false; // Override the converter functions logarithmic.log2lin = (num) => { const isNegative = num < 0; let adjustedNum = Math.abs(num); if (adjustedNum < 10) { adjustedNum += (10 - adjustedNum) / 10; } const result = Math.log(adjustedNum) / Math.LN10; return isNegative ? -result : result; }; logarithmic.lin2log = (num) => { const isNegative = num < 0; let result = Math.pow(10, Math.abs(num)); if (result < 10) { result = (10 * (result - 1)) / (10 - 1); } return isNegative ? -result : result; }; } }); })(Highcharts); const dataSet = await fetchDataFiles(); createVariables(dataSet); createMapDropdown(); // createA11yDataTables(); loadMap(); showFilter(); }); async function fetchDataFiles() { return Promise.all( [...mapTypes, "county"].map((fileName) => fetch(dataPath + `${fileName.toLowerCase()}.json`).then((data) => data.json())) ); } function createVariables(dataSet) { for (let item of dataSet) { for (let [key, value] of Object.entries(item)) { window[key] = value; } } } function createMapDropdown() { const mapSelection = document.getElementById("mapSelection"); let optionsHTML = ``; for (let index = 0; index < mapTypes.length; index++) { let map = mapTypes[index]; if (map === "regCF") { optionsHTML += `<option value="${map}" selected>${window[`${map}_mapTitle`]}</option>`; } else { optionsHTML += `<option value="${map}" >${window[`${map}_mapTitle`]}</option>`; } } mapSelection.innerHTML = optionsHTML; } /* function createA11yDataTables() { let generatedHTML = ""; for (let map of mapTypes) { const stateFilters = window[`${map}_filters`]; const countyFilters = window[`${map}_county_filters`]; for (let filter of stateFilters) { let data = window[`${map}_${filter.key}`]; generatedHTML += generateA11yTable(data, `${window[`${map}_mapTitle`]} (${filter.text})`,`${map}_${filter.key}`); } if (countyFilters?.length) { for (let filter of countyFilters) { let data = window[`${map}_county_${filter.key}`]; generatedHTML += generateA11yTable(data, `${window[`${map}_mapTitle`]} (County ${filter.text})`, `${map}_county_${filter.key}`, "county"); } } } document.getElementById("a11y-data-tables").innerHTML = generatedHTML; clearA11yTables(); document.getElementById("regCF_2020").style.display = "block"; } */ function generateA11yTable(mapData, title, tableName, type = "state") { let renderedHTML = `<table id="${tableName}">`; renderedHTML += `<caption>${title}</caption>`; renderedHTML += type === "state" ? `<tr><th>State</th><th>Offerings Count</th><th>USD Raised</th></tr>` : `<tr><th>State</th><th>County</th><th>Offerings Count</th><th>USD Raised</th></tr>`; if (type === "state") { let stateMap = Highcharts.geojson(Highcharts.maps["countries/us/custom/us-all-territories"]); for (let row of mapData) { let { code, offerings, usd } = row; const { name = code } = stateMap.find((state) => state.properties["hc-key"] === code) ?? {}; if (name) { renderedHTML += `<tr><td>${name}</td><td>${offerings}</td><td>${formatNumber(usd)}</td></tr>`; } } } else { let countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all-highres"]); for (let row of mapData) { let { code, offerings, usd } = row; let st_name = code; if (st_name.startsWith("us-")) st_name = st_name.substr(3,2).toUpperCase(); const { name = code } = countiesMap.find((county) => county.properties["hc-key"] === code) ?? {}; if (name) { if (name) name2 = name; if (name === "us-pr-127") name2 = "San Juan"; renderedHTML += `<tr><td>${st_name}</td><td>${name2}</td><td>${offerings}</td><td>${formatNumber(usd, true)}</td></tr>`; } } } renderedHTML += "</table>"; return renderedHTML; } /* function clearA11yTables() { document.getElementById(`regCF_2019`).style.display = "none"; document.getElementById(`regCF_2020`).style.display = "none"; document.getElementById(`regCF_county_2019`).style.display = "none"; document.getElementById(`regCF_county_2020`).style.display = "none"; document.getElementById(`regA_2018_19`).style.display = "none"; document.getElementById(`regA_2019_20`).style.display = "none"; document.getElementById(`regD_2018_19`).style.display = "none"; document.getElementById(`regD_2019_20`).style.display = "none"; document.getElementById(`registered_2018_19`).style.display = "none"; document.getElementById(`registered_2019_20`).style.display = "none"; } */ function generateCSV(mapData, title, type = "state") { let csv = `"",${title},""\r\n\r\n`; csv += type === "state" ? "State,Offerings Count,USD Raised\r\n" : "State Code,County,Offerings Count,USD Raised\r\n"; if (type === "state") { let stateMap = Highcharts.geojson(Highcharts.maps["countries/us/custom/us-all-territories"]); for (let row of mapData) { let { code, offerings, usd } = row; const { name = code } = stateMap.find((state) => state.properties["hc-key"] === code) ?? {}; if (name) { csv += `${name},${offerings},${formatNumber(usd)}\r\n`; } } } else { let countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all-highres"]); for (let row of mapData) { let { code, offerings, usd } = row; const st_name = code; const { name = code } = countiesMap.find((county) => county.properties["hc-key"] === code) ?? {}; if (name) { csv += `${st_name},${name},${offerings},${formatNumber(usd, true)}\r\n`; } } } csv += "\r\n"; return csv; } function hideFilter(filterId) { document.getElementById(filterId).style.display = "none"; } function showFilter() { document.getElementById("stateFilter").style.display = ""; } function createFilter(mapType) { const stateFilter = document.getElementById("selectedFilter"); if (stateFilter) { stateFilter.removeEventListener("change", onFilterValueChange); } const stateFilterContainer = document.querySelector("#stateFilter .filterContainer"); let filterHTML = ``; let filters = !countyMode ? window[`${mapType}_filters`] : window[`${mapType}_county_filters`]; for (let filter of filters) { const { key, text } = filter; filterHTML += `<option value="${key}">${text}</option>`; } filterHTML = `<select required name="selectedFilter" class="usa-select" id="selectedFilter" aria-controls="aria-controlled-content">${filterHTML}</select>`; stateFilterContainer.innerHTML = filterHTML; document.getElementById("selectedFilter").addEventListener("change", onFilterValueChange); } //function onFilterValueChange(e) { //let { value } = e.target; // if (value) { // let mapData = !countyMode ? window[`${mapType}_${value}`] : window[`${mapType}_county_${value}`]; // loadMap(countyMode, mapData, false); // } //} function onFilterValueChange(e){ let { value } = e.target; if (value) { let mapData = !countyMode ? window[`${mapType}_${value}`] : window[`${mapType}_county_${value}`]; // clearA11yTables(); if (!countyMode) { mapData = window[`${mapType}_${value}`]; // document.getElementById(`${mapType}_${value}`).style.display = "block"; } else { window[`${mapType}_county_${value}`]; // document.getElementById(`${mapType}_county_${value}`).style.display = "block"; } loadMap(countyMode, mapData, false); } } function filterByValue(e) { const { value } = e.target; showMetroMap = value === "metro"; switch (value) { case "counties": case "metro": if (mapType == "regCF") { loadMap(true); } break; case "states": loadMap(); break; default: console.log(value); } } //map dropdown document.getElementById("mapSelection").addEventListener("change", (e) => { loadMap(); }); document.getElementById("stateFilter").addEventListener("submit", (event) => { event.preventDefault(); let { selectedFilter } = event.target; if (selectedFilter?.value) { // clearA11yTables(); document.getElementById(`${mapType}_${selectedFilter.value}`).style.display = "block"; loadMap(false, window[`${mapType}_${selectedFilter.value}`], false); } }); document.getElementById("stateFilter").addEventListener("reset", (event) => { loadMap(false); }); function loadMap(county, mapData, initializeFilter = true) { hideFilter("stateFilter"); mapType = document.getElementById("mapSelection").value; if (county) { countyMode = true; document.querySelector(".countiesHolder").style.display = "flex"; } else { const locationFilter = document.getElementById("locationSelection"); locationFilter.value = "states"; countyMode = showMetroMap = false; document.querySelector(".countiesHolder").style.display = "none"; } if (initializeFilter) { createFilter(mapType); } showFilter(); if (!mapData) { // load the data as per the selected filter const selectedFilter = document.querySelector("#stateFilter #selectedFilter"); // get the name of the data obj (also name of a11y data table in html) let dataNameStr = !countyMode ? `${mapType}_${selectedFilter?.value}` : `${mapType}_county_${selectedFilter?.value}`; mapData = window[dataNameStr]; // clearA11yTables(); // document.getElementById(dataNameStr).style.display = "block"; } let colors = window[`${mapType}_colorPalette`]; let countiesElement = document.querySelector("section[type=where] option[value='counties']"); countiesElement.style.display = "none"; createLegend(mapType, colors); setMethodology(mapType, countyMode); const mapTitle = window[`${mapType}_mapTitle`]; switch (mapType) { case "regCF": initializeMap(mapData, mapTitle, colors, county); countiesElement.style.display = ""; break; case "regA": initializeMap(mapData, mapTitle, colors, county); break; case "regD": initializeMap(mapData, mapTitle, colors, county); break; case "registered": initializeMap(mapData, mapTitle, colors, county); break; } } function setMethodology(mapType) { const methodologyText = !countyMode ? window[`${mapType}_methodology`] : window[`${mapType}_county_methodology`]; document.getElementById("methodology-description").innerText = methodologyText; } function createLegend(mapType, colors) { let container = document.querySelector(".colorQuantity-container"); let innerHTML = `<div class="colorQuantity-item"> <span class="color" style="background-color: #f7f7f7"></span> <span class="price">None</span> </div>`; let legend = !countyMode ? window[`${mapType}_legend`] : window[`${mapType}_county_legend`]; for (let index = 0; index < legend.length; index++) { innerHTML += `<div class="colorQuantity-item"> <span class="color" style="background-color: ${colors[index]}"></span> <span class="price">${legend[index]}</span> </div>`; } container.innerHTML = innerHTML; } const formatNumber = (num, convertToMillions = false) => { num = Number(num); const oneB = 1000000000; const oneM = 1000000; const oneK = 1000; if (num > 0) { // convert to thousand if (convertToMillions) { num = num / oneM; } num = num * oneK; if (num >= oneM) { return Highcharts.numberFormat(num / oneM, 2) + "B"; } else if (num >= oneK) { return Highcharts.numberFormat(num / oneK, 2) + "M"; } else { return Highcharts.numberFormat(num, 2) + "K"; } } else { return num; } }; // Instantiate the map async function initializeMap(mapType, mapName, colorPalette, county = false) { let config = { chart: { map: "countries/us/custom/us-all-territories", height: 575, }, accessibility: { point: { descriptionFormatter: function (e) { return e.name + ": " + e.offerings; }, }, }, title: { text: mapName }, credits: { enabled: false }, exporting: { csv: { itemDelimiter: ";" }, sourceWidth: 600, sourceHeight: 500, filename: "Exported CSV", enabled: false, }, legend: { layout: "horizontal", borderWidth: 0, backgroundColor: "rgba(255,255,255,0.85)", floating: true, verticalAlign: "bottom", enabled: false, y: 25, }, mapNavigation: { enabled: true }, colorAxis: { dataClasses: [ { from: 0, to: 0, color: "#f7f7f7" }, { from: 1, to: 1, color: colorPalette[0] }, { from: 2, to: 2, color: colorPalette[1] }, { from: 3, to: 3, color: colorPalette[2] }, { from: 4, to: 6, color: colorPalette[3] }, ], }, series: [ { states: { hover: { color: "#757575", }, }, cursor: "pointer", data: mapType, colorKey: "color_code", joinBy: ["hc-key", "code"], dataLabels: { enabled: true, formatter: function (options) { const point = this.point; if (this.point.code) { const pointCode = this.series.mapMap[point.code]; if (!pointCode) { return false; } const properties = pointCode.properties; if (!(properties["hc-key"] !== "vi-6398" && properties["hc-key"] !== "vi-6399")) return null; if (properties.type === "State") return `${properties["postal-code"]}<br>${point.offerings}`; if (properties.type === "Federal District") return `${properties["hasc"].split(".")[1]}<br>${point.offerings}`; return `${properties["hasc"].split(".")[0]}<br>${point.offerings}`; //return properties["hc-key"] !== "vi-6398" && properties["hc-key"] !== "vi-6399" // ? `${properties.type === "State" ? properties["postal-code"] : properties["hasc"].split(".")[0]}<br>${ // point.offerings // }` // : null; } }, }, name: "Information", tooltip: { pointFormatter: function () { const point = this; return `<strong>${this.properties.name}</strong> <br/> <strong>Offerings Count:</strong> ${ point.offerings } <br/> <strong>USD Raised:</strong> $${formatNumber(point.usd)}`; }, }, }, ], }; // for county related if (county) { var countiesMap = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all-highres"]), // Extract the line paths from the GeoJSON lines = Highcharts.geojson(Highcharts.maps["countries/us/us-all-all-highres"], "mapline"), // Filter out the state borders and separator lines, we want these // in separate series borderLines = lines.filter((l) => l.properties["hc-group"] === "__border_lines__"), separatorLines = lines.filter((l) => l.properties["hc-group"] === "__separator_lines__"); // Add state acronym for tooltip countiesMap.forEach(function (mapPoint) { mapPoint.name = mapPoint.name + ", " + mapPoint.properties["hc-key"].substr(3, 2); }); config.plotOptions = { mapline: { showInLegend: false, enableMouseTracking: false, }, }; config.chart = { height: 575, marginRight: 20 }; // for the legend config.legend = { layout: "vertical", align: "right", floating: true, backgroundColor: // theme (Highcharts.defaultOptions && Highcharts.defaultOptions.legend && Highcharts.defaultOptions.legend.backgroundColor) || "rgba(255, 255, 255, 0.85)", }; config.series = [ { mapData: countiesMap, data: mapType, joinBy: ["hc-key", "code"], name: "County", borderWidth: 0.5, states: { hover: { color: "#a4edba", }, }, shadow: false, colorKey: "color_code", tooltip: { pointFormatter: function () { const point = this; const [county, state] = this.series.mapMap[point.code].name.split(","); return `<strong>${county},${state.toUpperCase()}</strong> <br/> <strong>Offerings Count:</strong> ${ point.offerings } <br/> <strong>USD Raised:</strong> $${formatNumber(point.usd, true)}`; }, }, }, { type: "mapline", name: "State borders", data: borderLines, color: "darkgray", shadow: false, }, ]; Highcharts.getJSON(mapPath + "pr-municipalities.json", function (geojson) { // Initiate the chart let prConfig = { ...config, title: "Puerto Rico" }; let mapData = mapType.find((item) => item?.code?.includes("us-pr-")); let clonedMapData = mapData ? { ...mapData } : null; if (clonedMapData) { clonedMapData.code = clonedMapData.code.replace("us-pr-", ""); } prConfig.chart = { map: geojson, height: 135, width: 135, }; prConfig.mapNavigation = { enabled: true }; prConfig.series = [ { data: [clonedMapData], joinBy: ["COUNTY", "code"], name: "County", colorKey: "color_code", states: { hover: { color: "#a4edba", }, }, dataLabels: { enabled: true, }, mapNavigation: { enabled: true }, tooltip: { pointFormatter: function () { const point = this; const [county, state] = [point.name, "PR"]; return `<strong>${county}, ${state.toUpperCase()}</strong> <br/> <strong>Offerings Count:</strong> ${ point.offerings } <br/> <strong>USD Raised:</strong> $${formatNumber(point.usd, true)}`; }, }, }, ]; // prConfig.chart.map = geojson; Highcharts.mapChart("countyContainer", prConfig); }); Highcharts.getJSON(mapPath + "guam.json", function (geojson) { // Initiate the chart let guamConfig = { ...config, title: "Guam" }; let mapData = mapType.find((item) => item?.code?.includes("us-pr-")); let clonedMapData = mapData ? { ...mapData } : null; if (clonedMapData) { clonedMapData.code = clonedMapData.code.replace("us-pr-", ""); } guamConfig.chart = { map: geojson, height: 50, width: 50, }; guamConfig.series = [ { name: "Guam", states: { hover: { color: "#a4edba", }, }, dataLabels: { enabled: true, }, }, ]; // guamConfig.chart.map = geojson; Highcharts.mapChart("guam-countyContainer", guamConfig); }); Highcharts.getJSON(mapPath + "virgin-islands.json", function (geojson) { // Initiate the chart let viConfig = { ...config, title: "Virgin Islands" }; let mapData = mapType.find((item) => item?.code?.includes("us-pr-")); let clonedMapData = mapData ? { ...mapData } : null; if (clonedMapData) { clonedMapData.code = clonedMapData.code.replace("us-pr-", ""); } viConfig.chart = { map: geojson, height: 50, width: 50, }; viConfig.series = [ { name: "VI", states: { hover: { color: "#a4edba", }, }, dataLabels: { enabled: true, }, }, ]; // viConfig.chart.map = geojson; Highcharts.mapChart("vi-countyContainer", viConfig); }); } config.legend = { enabled: false, }; setTimeout(() => { Highcharts.mapChart("container", config); }, 0); } } );