{
const ptBRLocaleDefinition = {
decimal: ",",
thousands: "",
grouping: [3],
currency: ["R$", ""]
};
d3.formatDefaultLocale(ptBRLocaleDefinition);
//Combinado
if (modelo.includes('ARIMA+ETS')){
// Declare the chart dimensions and margins.
const width = 760;
const height = 500;
const marginTop = 30;
const marginRight = 20;
const marginBottom = 40;
const marginLeft = 50;
// Declare the x (horizontal position) scale.
const x = d3.scaleLinear(d3.extent(ex_comb, d => d.ano), [marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3.scaleLinear([d3.min(ex_comb, d => d.ex)-1, d3.max(ex_comb, d => d.ex)+1], [height - marginBottom, marginTop]);
// Declare the line generator.
const line = d3.line()
.x(d => x(d.ano))
.y(d => y(d.ex));
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible")
//.on("pointerenter pointermove", pointermoved)
//.on("pointerleave", pointerleft)
.on("touchstart", event => event.preventDefault());
// Add the x-axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
svg.append("text")
.attr("text-anchor", "middle")
.attr("x", width / 2)
.attr("y", height) // Posição abaixo do eixo
.style("font-size", "14px")
.style("fill", "currentColor")
.text("Ano");
// Add the y-axis, remove the domain line, add grid lines and a label.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(height / 40))
.call(g => g.select(".domain").remove())
.style("font-size", "12px")
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -(height / 2))
.attr("y", -marginLeft + 15)
.attr("fill", "currentColor")
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text("ex"));
// Append a path for the line.
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line(ex_comb));
// Create the tooltip container.
/*const tooltip = svg.append("g");
function formatValue(value) {
return value.toLocaleString("en", {
style: "decimal", // Altera para estilo numérico
minimumFractionDigits: 2, // Mantém 2 casas decimais
maximumFractionDigits: 2
});
}
function formatDate(date) {
return date.toLocaleString("en", {
month: "short",
day: "numeric",
year: "numeric",
timeZone: "UTC"
});
}
// Add the event listeners that show or hide the tooltip.
const bisect = d3.bisector(d => d.ano).center;
function pointermoved(event) {
const i = bisect(ex_comb, x.invert(d3.pointer(event)[0]));
tooltip.style("display", null);
tooltip.attr("transform", `translate(${x(ex_comb[i].ano)},${y(ex_comb[i].ex)})`);
const path = tooltip.selectAll("path")
.data([,])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = tooltip.selectAll("text")
.data([,])
.join("text")
.call(text => text
.selectAll("tspan")
.data([formatDate(ex_comb[i].ano), formatValue(ex_comb[i].ex)])
.join("tspan")
.attr("x", 0)
.attr("y", (_, i) => `${i * 1.1}em`)
.attr("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
size(text, path);
}
function pointerleft() {
tooltip.style("display", "none");
}*/
// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
return svg.node();
}
//Lee-Miller
else if (modelo.includes('Lee-Miller')){
const ptBRLocaleDefinition = {
decimal: ",",
thousands: "",
grouping: [3],
currency: ["R$", ""]
};
d3.formatDefaultLocale(ptBRLocaleDefinition);
// Declare the chart dimensions and margins.
const width = 760;
const height = 500;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;
// Declare the x (horizontal position) scale.
const x = d3.scaleLinear(d3.extent(ex_lm, d => d.ano), [marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3.scaleLinear([d3.min(ex_lm, d => d.ex)-1, d3.max(ex_lm, d => d.ex)+1], [height - marginBottom, marginTop]);
// Declare the line generator.
const line = d3.line()
.x(d => x(d.ano))
.y(d => y(d.ex));
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible")
//.on("pointerenter pointermove", pointermoved)
//.on("pointerleave", pointerleft)
.on("touchstart", event => event.preventDefault());
// Add the x-axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
// Add the y-axis, remove the domain line, add grid lines and a label.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(height / 40))
.call(g => g.select(".domain").remove())
.style("font-size", "12px")
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.style("font-size", "18px")
.text("ex"));
// Append a path for the line.
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line(ex_lm));
// Create the tooltip container.
/*const tooltip = svg.append("g");
function formatValue(value) {
return value.toLocaleString("pt-BR", {
style: "decimal", // Altera para estilo numérico
minimumFractionDigits: 2, // Mantém 2 casas decimais
maximumFractionDigits: 2
});
}
function formatDate(date) {
return date.toLocaleString("pt-BR", {
month: "short",
day: "numeric",
year: "numeric",
timeZone: "UTC"
});
}
// Add the event listeners that show or hide the tooltip.
const bisect = d3.bisector(d => d.ano).center;
function pointermoved(event) {
const i = bisect(ex_lm, x.invert(d3.pointer(event)[0]));
tooltip.style("display", null);
tooltip.attr("transform", `translate(${x(ex_lm[i].ano)},${y(ex_lm[i].ex)})`);
const path = tooltip.selectAll("path")
.data([,])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = tooltip.selectAll("text")
.data([,])
.join("text")
.call(text => text
.selectAll("tspan")
.data([formatDate(ex_lm[i].ano), formatValue(ex_lm[i].ex)])
.join("tspan")
.attr("x", 0)
.attr("y", (_, i) => `${i * 1.1}em`)
.attr("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
size(text, path);
}
function pointerleft() {
tooltip.style("display", "none");
}*/
// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
return svg.node();
}
//Lee-Carter
else if (modelo.includes('Lee-Carter')){
const ptBRLocaleDefinition = {
decimal: ",",
thousands: "",
grouping: [3],
currency: ["R$", ""]
};
d3.formatDefaultLocale(ptBRLocaleDefinition);
// Declare the chart dimensions and margins.
const width = 760;
const height = 500;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 40;
// Declare the x (horizontal position) scale.
const x = d3.scaleLinear(d3.extent(ex_lc, d => d.ano), [marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3.scaleLinear([d3.min(ex_lc, d => d.ex)-1, d3.max(ex_lc, d => d.ex)+1], [height - marginBottom, marginTop]);
// Declare the line generator.
const line = d3.line()
.x(d => x(d.ano))
.y(d => y(d.ex));
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
.style("-webkit-tap-highlight-color", "transparent")
.style("overflow", "visible")
//.on("pointerenter pointermove", pointermoved)
//.on("pointerleave", pointerleft)
.on("touchstart", event => event.preventDefault());
// Add the x-axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
// Add the y-axis, remove the domain line, add grid lines and a label.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).ticks(height / 40))
.call(g => g.select(".domain").remove())
.style("font-size", "12px")
.call(g => g.selectAll(".tick line").clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1))
.call(g => g.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.style("font-size", "18px")
.text("ex"));
// Append a path for the line.
svg.append("path")
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", line(ex_lc));
// Create the tooltip container.
/*const tooltip = svg.append("g");
function formatValue(value) {
return value.toLocaleString("en", {
style: "decimal", // Altera para estilo numérico
minimumFractionDigits: 2, // Mantém 2 casas decimais
maximumFractionDigits: 2
});
}
function formatDate(date) {
return date.toLocaleString("pt-BR", {
month: "short",
day: "numeric",
year: "numeric",
timeZone: "UTC"
});
}
// Add the event listeners that show or hide the tooltip.
const bisect = d3.bisector(d => d.ano).center;
function pointermoved(event) {
const i = bisect(ex_lc, x.invert(d3.pointer(event)[0]));
tooltip.style("display", null);
tooltip.attr("transform", `translate(${x(ex_lc[i].ano)},${y(ex_lc[i].ex)})`);
const path = tooltip.selectAll("path")
.data([,])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = tooltip.selectAll("text")
.data([,])
.join("text")
.call(text => text
.selectAll("tspan")
.data([formatDate(ex_lc[i].ano), formatValue(ex_lc[i].ex)])
.join("tspan")
.attr("x", 0)
.attr("y", (_, i) => `${i * 1.1}em`)
.attr("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
size(text, path);
}
function pointerleft() {
tooltip.style("display", "none");
}*/
// Wraps the text with a callout path of the correct size, as measured in the page.
function size(text, path) {
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
}
return svg.node();
}
}