plugin upload
This commit is contained in:
parent
00e60ec1b7
commit
c4905e952e
17 changed files with 1426 additions and 0 deletions
108
native/wordpress/maple-calc/assets/js/datacenter-block.js
Normal file
108
native/wordpress/maple-calc/assets/js/datacenter-block.js
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
(function (blocks, element, blockEditor, components) {
|
||||
var el = element.createElement;
|
||||
var useBlockProps = blockEditor.useBlockProps;
|
||||
var BlockControls = blockEditor.BlockControls;
|
||||
var AlignmentToolbar = blockEditor.AlignmentToolbar;
|
||||
var TextControl = components.TextControl;
|
||||
|
||||
blocks.registerBlockType("maple/datacenter-calculator", {
|
||||
title: "Data Center Costs Calculator",
|
||||
icon: "calculator",
|
||||
category: "common",
|
||||
attributes: {
|
||||
align: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: true,
|
||||
},
|
||||
edit: function (props) {
|
||||
const blockProps = useBlockProps({
|
||||
className: props.attributes.align
|
||||
? "align" + props.attributes.align
|
||||
: "",
|
||||
});
|
||||
|
||||
return [
|
||||
el(
|
||||
BlockControls,
|
||||
{ key: "controls" },
|
||||
el(AlignmentToolbar, {
|
||||
value: props.attributes.align,
|
||||
onChange: (newAlign) => {
|
||||
props.setAttributes({ align: newAlign });
|
||||
},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
blockProps,
|
||||
el("h2", {}, "Data Center Costs Calculator"),
|
||||
el(
|
||||
"form",
|
||||
{ className: "maple-calc-form" },
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Power Usage (kW)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Cost per kWh ($)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Rack Space (units)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"button",
|
||||
{ type: "button", className: "calculate-button" },
|
||||
"Calculate",
|
||||
),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "results" },
|
||||
el("h3", {}, "Results"),
|
||||
el("p", {}, el("strong", {}, "Power Cost (Monthly): "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Cooling Cost (Monthly): "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Rack Cost (Monthly): "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Total Monthly Cost: "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Total Annual Cost: "), "$---"),
|
||||
el(
|
||||
"div",
|
||||
{ className: "chart-container" },
|
||||
el("canvas", { className: "datacenter-chart" }),
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
save: function () {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
})(
|
||||
window.wp.blocks,
|
||||
window.wp.element,
|
||||
window.wp.blockEditor,
|
||||
window.wp.components,
|
||||
);
|
||||
353
native/wordpress/maple-calc/assets/js/frontend.js
Normal file
353
native/wordpress/maple-calc/assets/js/frontend.js
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
console.log("Frontend.js loaded");
|
||||
|
||||
// Initialize charts on page load
|
||||
initializeCharts();
|
||||
|
||||
// Handle form submissions
|
||||
handleFormSubmissions();
|
||||
|
||||
// Add animations for results
|
||||
addResultAnimations();
|
||||
});
|
||||
|
||||
function initializeCharts() {
|
||||
console.log("Initializing charts...");
|
||||
|
||||
// Mortgage Charts
|
||||
const mortgageCharts = document.querySelectorAll(".mortgage-chart");
|
||||
mortgageCharts.forEach((canvas) => {
|
||||
console.log("Rendering mortgage chart for:", canvas);
|
||||
const principal = parseFloat(canvas.dataset.principal) || 200000;
|
||||
const totalInterest = parseFloat(canvas.dataset.interest) || 123312.18;
|
||||
renderMortgageChart(canvas, principal, totalInterest);
|
||||
});
|
||||
|
||||
// Data Center Charts
|
||||
const datacenterCharts = document.querySelectorAll(".datacenter-chart");
|
||||
datacenterCharts.forEach((canvas) => {
|
||||
console.log("Rendering datacenter chart for:", canvas);
|
||||
const powerCost = parseFloat(canvas.dataset.power) || 730;
|
||||
const coolingCost = parseFloat(canvas.dataset.cooling) || 876;
|
||||
const rackCost = parseFloat(canvas.dataset.rack) || 500;
|
||||
renderDatacenterChart(canvas, powerCost, coolingCost, rackCost);
|
||||
});
|
||||
|
||||
// ROI Charts
|
||||
const roiCharts = document.querySelectorAll(".roi-chart");
|
||||
roiCharts.forEach((canvas) => {
|
||||
console.log("Rendering ROI chart for:", canvas);
|
||||
const initialInvestment = parseFloat(canvas.dataset.investment) || 10000;
|
||||
const netProfit = parseFloat(canvas.dataset.profit) || 4025.52;
|
||||
renderRoiChart(canvas, initialInvestment, netProfit);
|
||||
});
|
||||
}
|
||||
|
||||
function handleFormSubmissions() {
|
||||
const calculatorForms = document.querySelectorAll(".maple-calc form");
|
||||
|
||||
calculatorForms.forEach((form) => {
|
||||
form.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
console.log("Form submitted");
|
||||
|
||||
// Validate form inputs
|
||||
const inputs = form.querySelectorAll("input[required]");
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach((input) => {
|
||||
if (!input.value) {
|
||||
isValid = false;
|
||||
input.style.borderColor = "#ff0000";
|
||||
} else {
|
||||
input.style.borderColor = "#ccc";
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
alert("Please fill in all required fields.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Process form data
|
||||
const formData = new FormData(form);
|
||||
const formEntries = Object.fromEntries(formData.entries());
|
||||
|
||||
// Determine calculator type
|
||||
const calculatorType = form
|
||||
.closest(".maple-calc")
|
||||
.classList.contains("mortgage-calculator")
|
||||
? "mortgage"
|
||||
: form
|
||||
.closest(".maple-calc")
|
||||
.classList.contains("datacenter-calculator")
|
||||
? "datacenter"
|
||||
: "roi";
|
||||
|
||||
const resultsDiv = form.nextElementSibling;
|
||||
|
||||
if (calculatorType === "mortgage") {
|
||||
const principal = parseFloat(formEntries.principal) || 200000;
|
||||
const interestRate = parseFloat(formEntries.interest_rate) || 3.5;
|
||||
const termYears = parseInt(formEntries.term_years) || 30;
|
||||
|
||||
const monthlyPayment = calculateMonthlyPayment(
|
||||
principal,
|
||||
interestRate,
|
||||
termYears,
|
||||
);
|
||||
const totalPayment = monthlyPayment * termYears * 12;
|
||||
const totalInterest = totalPayment - principal;
|
||||
|
||||
updateMortgageResults(
|
||||
resultsDiv,
|
||||
monthlyPayment,
|
||||
totalPayment,
|
||||
totalInterest,
|
||||
);
|
||||
renderMortgageChart(
|
||||
resultsDiv.querySelector(".mortgage-chart"),
|
||||
principal,
|
||||
totalInterest,
|
||||
);
|
||||
} else if (calculatorType === "datacenter") {
|
||||
const powerKw = parseFloat(formEntries.power_kw) || 10;
|
||||
const costPerKwh = parseFloat(formEntries.cost_per_kwh) || 0.1;
|
||||
const rackSpace = parseInt(formEntries.rack_space) || 5;
|
||||
const coolingFactor = 1.2;
|
||||
|
||||
const powerCostPerMonth = powerKw * costPerKwh * 24 * 30;
|
||||
const coolingCostPerMonth = powerCostPerMonth * coolingFactor;
|
||||
const rackCostPerMonth = rackSpace * 100;
|
||||
const totalMonthlyCost =
|
||||
powerCostPerMonth + coolingCostPerMonth + rackCostPerMonth;
|
||||
const totalAnnualCost = totalMonthlyCost * 12;
|
||||
|
||||
updateDatacenterResults(
|
||||
resultsDiv,
|
||||
powerCostPerMonth,
|
||||
coolingCostPerMonth,
|
||||
rackCostPerMonth,
|
||||
totalMonthlyCost,
|
||||
totalAnnualCost,
|
||||
);
|
||||
renderDatacenterChart(
|
||||
resultsDiv.querySelector(".datacenter-chart"),
|
||||
powerCostPerMonth,
|
||||
coolingCostPerMonth,
|
||||
rackCostPerMonth,
|
||||
);
|
||||
} else if (calculatorType === "roi") {
|
||||
const initialInvestment =
|
||||
parseFloat(formEntries.initial_investment) || 10000;
|
||||
const annualReturnRate =
|
||||
parseFloat(formEntries.annual_return_rate) || 7;
|
||||
const timeYears = parseInt(formEntries.time_years) || 5;
|
||||
|
||||
const finalValue =
|
||||
initialInvestment * Math.pow(1 + annualReturnRate / 100, timeYears);
|
||||
const netProfit = finalValue - initialInvestment;
|
||||
const roiPercentage = (netProfit / initialInvestment) * 100;
|
||||
|
||||
updateRoiResults(resultsDiv, finalValue, netProfit, roiPercentage);
|
||||
renderRoiChart(
|
||||
resultsDiv.querySelector(".roi-chart"),
|
||||
initialInvestment,
|
||||
netProfit,
|
||||
);
|
||||
}
|
||||
|
||||
// Show results with animation
|
||||
resultsDiv.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
resultsDiv.style.opacity = "1";
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function calculateMonthlyPayment(principal, interestRate, termYears) {
|
||||
const monthlyInterestRate = interestRate / 100 / 12;
|
||||
const termMonths = termYears * 12;
|
||||
return (
|
||||
(principal *
|
||||
(monthlyInterestRate * Math.pow(1 + monthlyInterestRate, termMonths))) /
|
||||
(Math.pow(1 + monthlyInterestRate, termMonths) - 1)
|
||||
);
|
||||
}
|
||||
|
||||
function updateMortgageResults(
|
||||
resultsDiv,
|
||||
monthlyPayment,
|
||||
totalPayment,
|
||||
totalInterest,
|
||||
) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Monthly Payment:</strong> $${monthlyPayment.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Total Payment:</strong> $${totalPayment.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>Total Interest:</strong> $${totalInterest.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function updateDatacenterResults(
|
||||
resultsDiv,
|
||||
powerCost,
|
||||
coolingCost,
|
||||
rackCost,
|
||||
totalMonthlyCost,
|
||||
totalAnnualCost,
|
||||
) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Power Cost (Monthly):</strong> $${powerCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Cooling Cost (Monthly):</strong> $${coolingCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>Rack Cost (Monthly):</strong> $${rackCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(5)").innerHTML =
|
||||
`<strong>Total Monthly Cost:</strong> $${totalMonthlyCost.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(6)").innerHTML =
|
||||
`<strong>Total Annual Cost:</strong> $${totalAnnualCost.toFixed(2)}`;
|
||||
}
|
||||
|
||||
function updateRoiResults(resultsDiv, finalValue, netProfit, roiPercentage) {
|
||||
resultsDiv.querySelector("p:nth-child(2)").innerHTML =
|
||||
`<strong>Final Value:</strong> $${finalValue.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(3)").innerHTML =
|
||||
`<strong>Net Profit:</strong> $${netProfit.toFixed(2)}`;
|
||||
resultsDiv.querySelector("p:nth-child(4)").innerHTML =
|
||||
`<strong>ROI (%):</strong> ${roiPercentage.toFixed(2)}%`;
|
||||
}
|
||||
|
||||
function renderMortgageChart(canvas, principal, totalInterest) {
|
||||
if (!canvas) {
|
||||
console.error("Mortgage chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Principal", "Total Interest"],
|
||||
datasets: [
|
||||
{
|
||||
data: [principal, totalInterest],
|
||||
backgroundColor: ["#02066F", "#ff6384"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderDatacenterChart(canvas, powerCost, coolingCost, rackCost) {
|
||||
if (!canvas) {
|
||||
console.error("Datacenter chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Power Cost", "Cooling Cost", "Rack Cost"],
|
||||
datasets: [
|
||||
{
|
||||
data: [powerCost, coolingCost, rackCost],
|
||||
backgroundColor: ["#02066F", "#ff6384", "#36a2eb"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderRoiChart(canvas, initialInvestment, netProfit) {
|
||||
if (!canvas) {
|
||||
console.error("ROI chart canvas not found");
|
||||
return;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: ["Initial Investment", "Net Profit"],
|
||||
datasets: [
|
||||
{
|
||||
data: [initialInvestment, netProfit],
|
||||
backgroundColor: ["#02066F", "#36a2eb"],
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
font: {
|
||||
size: 14,
|
||||
family: "Arial, sans-serif",
|
||||
},
|
||||
color: "#222222",
|
||||
boxWidth: 20,
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
},
|
||||
},
|
||||
title: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function addResultAnimations() {
|
||||
const resultsDivs = document.querySelectorAll(".results");
|
||||
resultsDivs.forEach((div) => {
|
||||
div.style.transition = "opacity 0.5s ease-in-out";
|
||||
});
|
||||
}
|
||||
12
native/wordpress/maple-calc/assets/js/index.php
Normal file
12
native/wordpress/maple-calc/assets/js/index.php
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<?php
|
||||
/**
|
||||
* Silence is golden.
|
||||
*
|
||||
* Prevent direct access to this file.
|
||||
*
|
||||
* @package WordPress
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
106
native/wordpress/maple-calc/assets/js/mortgage-block.js
Normal file
106
native/wordpress/maple-calc/assets/js/mortgage-block.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
(function (blocks, element, blockEditor, components) {
|
||||
var el = element.createElement;
|
||||
var useBlockProps = blockEditor.useBlockProps;
|
||||
var BlockControls = blockEditor.BlockControls;
|
||||
var AlignmentToolbar = blockEditor.AlignmentToolbar;
|
||||
var TextControl = components.TextControl;
|
||||
|
||||
blocks.registerBlockType("maple/mortgage-calculator", {
|
||||
title: "Mortgage Calculator",
|
||||
icon: "calculator",
|
||||
category: "common",
|
||||
attributes: {
|
||||
align: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: true,
|
||||
},
|
||||
edit: function (props) {
|
||||
const blockProps = useBlockProps({
|
||||
className: props.attributes.align
|
||||
? "align" + props.attributes.align
|
||||
: "",
|
||||
});
|
||||
|
||||
return [
|
||||
el(
|
||||
BlockControls,
|
||||
{ key: "controls" },
|
||||
el(AlignmentToolbar, {
|
||||
value: props.attributes.align,
|
||||
onChange: (newAlign) => {
|
||||
props.setAttributes({ align: newAlign });
|
||||
},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
blockProps,
|
||||
el("h2", {}, "Mortgage Calculator"),
|
||||
el(
|
||||
"form",
|
||||
{ className: "maple-calc-form" },
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Loan Amount ($)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Interest Rate (%)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Loan Term (Years)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"button",
|
||||
{ type: "button", className: "calculate-button" },
|
||||
"Calculate",
|
||||
),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "results" },
|
||||
el("h3", {}, "Results"),
|
||||
el("p", {}, el("strong", {}, "Monthly Payment: "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Total Payment: "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Total Interest: "), "$---"),
|
||||
el(
|
||||
"div",
|
||||
{ className: "chart-container" },
|
||||
el("canvas", { className: "mortgage-chart" }),
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
save: function () {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
})(
|
||||
window.wp.blocks,
|
||||
window.wp.element,
|
||||
window.wp.blockEditor,
|
||||
window.wp.components,
|
||||
);
|
||||
106
native/wordpress/maple-calc/assets/js/roi-block.js
Normal file
106
native/wordpress/maple-calc/assets/js/roi-block.js
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
(function (blocks, element, blockEditor, components) {
|
||||
var el = element.createElement;
|
||||
var useBlockProps = blockEditor.useBlockProps;
|
||||
var BlockControls = blockEditor.BlockControls;
|
||||
var AlignmentToolbar = blockEditor.AlignmentToolbar;
|
||||
var TextControl = components.TextControl;
|
||||
|
||||
blocks.registerBlockType("maple/roi-calculator", {
|
||||
title: "ROI Calculator",
|
||||
icon: "calculator",
|
||||
category: "common",
|
||||
attributes: {
|
||||
align: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: true,
|
||||
},
|
||||
edit: function (props) {
|
||||
const blockProps = useBlockProps({
|
||||
className: props.attributes.align
|
||||
? "align" + props.attributes.align
|
||||
: "",
|
||||
});
|
||||
|
||||
return [
|
||||
el(
|
||||
BlockControls,
|
||||
{ key: "controls" },
|
||||
el(AlignmentToolbar, {
|
||||
value: props.attributes.align,
|
||||
onChange: (newAlign) => {
|
||||
props.setAttributes({ align: newAlign });
|
||||
},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
blockProps,
|
||||
el("h2", {}, "ROI Calculator"),
|
||||
el(
|
||||
"form",
|
||||
{ className: "maple-calc-form" },
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Initial Investment ($)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Annual Return Rate (%)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "form-group" },
|
||||
el(TextControl, {
|
||||
label: "Time (Years)",
|
||||
type: "number",
|
||||
value: "",
|
||||
onChange: () => {},
|
||||
}),
|
||||
),
|
||||
el(
|
||||
"button",
|
||||
{ type: "button", className: "calculate-button" },
|
||||
"Calculate",
|
||||
),
|
||||
),
|
||||
el(
|
||||
"div",
|
||||
{ className: "results" },
|
||||
el("h3", {}, "Results"),
|
||||
el("p", {}, el("strong", {}, "Final Value: "), "$---"),
|
||||
el("p", {}, el("strong", {}, "Net Profit: "), "$---"),
|
||||
el("p", {}, el("strong", {}, "ROI (%): "), "---%"),
|
||||
el(
|
||||
"div",
|
||||
{ className: "chart-container" },
|
||||
el("canvas", { className: "roi-chart" }),
|
||||
),
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
save: function () {
|
||||
return null;
|
||||
},
|
||||
});
|
||||
})(
|
||||
window.wp.blocks,
|
||||
window.wp.element,
|
||||
window.wp.blockEditor,
|
||||
window.wp.components,
|
||||
);
|
||||
Loading…
Add table
Add a link
Reference in a new issue