104 lines
4.4 KiB
HTML
104 lines
4.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Consumption Trend Visual Test</title>
|
|
<style>
|
|
html, body { width: 100%; min-height: 100%; margin: 0; }
|
|
body { font-family: Arial, sans-serif; }
|
|
#opportunities-extension-modal { position: fixed; inset: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="opportunities-extension-modal" class="opportunities-extension-modal" data-theme="light"></div>
|
|
<script>
|
|
window.chrome = { runtime: { onMessage: { addListener() {} } } };
|
|
|
|
async function initialize() {
|
|
const source = await fetch("/src/content.js").then((response) => response.text());
|
|
const marker = /\r?\n if \(insertTile\(\)\) \{/;
|
|
const exposure = `
|
|
window.__trendHarness = {
|
|
ensureStyles: ensureExtensionStyles,
|
|
createAccountPlanDetails,
|
|
createConsumptionTrendSection,
|
|
renderConsumptionTrendChart
|
|
};
|
|
return;
|
|
`;
|
|
const testableSource = source
|
|
.replace(" if (!isAllowedPage()) {", " if (false) {")
|
|
.replace(marker, `${exposure}\n if (insertTile()) {`);
|
|
window.eval(testableSource);
|
|
|
|
const plan = {
|
|
subPlanNum: "11276098",
|
|
planType: "Universal Credits",
|
|
bookingCustomer: "Example Customer",
|
|
soldToPartyName: "Example Sold To",
|
|
contractId: "12345678",
|
|
hdrStatusCode: "ACTIVE",
|
|
startDate: "2026-06-01",
|
|
endDate: "2027-05-31"
|
|
};
|
|
const items = [
|
|
["20-Jun-26", 29000, 0], ["27-Jun-26", 30000, 0], ["04-Jul-26", 33000, 0],
|
|
["11-Jul-26", 28500, 0], ["18-Jul-26", 29500, 0], ["25-Jul-26", 23000, 10000],
|
|
["01-Aug-26", 0, 29000], ["08-Aug-26", 0, 32000], ["15-Aug-26", 0, 30000],
|
|
["22-Aug-26", 31000, 4500], ["29-Aug-26", 37000, 0], ["05-Sep-26", 35000, 0],
|
|
["12-Sep-26", 2000, 0]
|
|
].flatMap(([label, funded, overage]) => {
|
|
const [day, month, year] = label.split("-");
|
|
const monthNumber = { Jun: "06", Jul: "07", Aug: "08", Sep: "09" }[month];
|
|
const base = {
|
|
fyDate: `20${year}-${monthNumber}-${day}`,
|
|
fiscalTime: [label],
|
|
fiscalQtr: "FY27-Q1",
|
|
currencyCode: "USD",
|
|
arrCd: 0
|
|
};
|
|
const rows = [{ ...base, usageCategory: "Funded Allocation", usedAmount: funded }];
|
|
if (overage) rows.push({ ...base, usageCategory: "OVERAGE", usedAmount: overage });
|
|
return rows;
|
|
});
|
|
|
|
window.__trendHarness.ensureStyles();
|
|
const overlay = document.getElementById("opportunities-extension-modal");
|
|
overlay.dataset.theme = new URLSearchParams(window.location.search).get("theme") === "dark"
|
|
? "dark"
|
|
: "light";
|
|
const modal = document.createElement("section");
|
|
modal.className = "opportunities-extension-account-plans-modal";
|
|
const dialog = document.createElement("div");
|
|
dialog.className = "opportunities-extension-account-plans-dialog";
|
|
const header = document.createElement("header");
|
|
header.className = "opportunities-extension-account-plans-header";
|
|
header.innerHTML = "<div><h2>Cloud Consumption</h2><p>Example customer</p></div>";
|
|
const content = document.createElement("div");
|
|
content.className = "opportunities-extension-account-plans-content";
|
|
const tabs = document.createElement("div");
|
|
tabs.className = "opportunities-extension-account-plans-tabs";
|
|
tabs.innerHTML = '<button class="opportunities-extension-account-plan-tab" aria-selected="true"><span class="opportunities-extension-account-plan-status-indicator" data-active="true"></span>Universal Credits 11276098</button>';
|
|
const panel = document.createElement("section");
|
|
panel.className = "opportunities-extension-account-plan-panel";
|
|
const trend = window.__trendHarness.createConsumptionTrendSection(plan);
|
|
panel.append(window.__trendHarness.createAccountPlanDetails(plan), trend);
|
|
content.append(tabs, panel);
|
|
dialog.append(header, content);
|
|
modal.append(dialog);
|
|
overlay.append(modal);
|
|
window.__trendHarness.renderConsumptionTrendChart(
|
|
trend,
|
|
trend.querySelector(".opportunities-extension-consumption-chart"),
|
|
items,
|
|
"weekly",
|
|
plan.subPlanNum
|
|
);
|
|
}
|
|
|
|
initialize();
|
|
</script>
|
|
</body>
|
|
</html>
|