Qual curva de disjuntor escolher para sua casa

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curvas de Atuação de Disjuntores e Simulador</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Custom range slider styling */
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 24px;
            width: 24px;
            border-radius: 50%;
            background: #2563eb;
            cursor: pointer;
            margin-top: -8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            cursor: pointer;
            background: #e5e7eb;
            border-radius: 4px;
        }
        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: transparent;
        }
        /* Garantir que o canvas ocupe o espaço correto com altura fixa para evitar distorção no Iframe */
        .chart-container {
            position: relative;
            height: 600px;
            width: 100%;
        }
    </style>
</head>
<body class="bg-slate-100 min-h-screen p-4 md:p-8 font-sans text-slate-800" style="margin: 0;">

<div class="max-w-7xl mx-auto">
        
        
        <article class="bg-white rounded-2xl shadow-lg p-6 lg:p-10 mb-8 border border-slate-200">
            <h1 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6 border-b pb-4">Curvas de Atuação dos Disjuntores</h1>
            
            <div class="text-lg text-slate-700 space-y-6">
                <p>
                    Os disjuntores termomagnéticos (DTM) são componentes essenciais para a proteção de qualquer instalação elétrica. Eles apresentam duas formas de atuação: a proteção térmica, destinada a desarmar o circuito caso ocorra uma sobrecarga (quando a corrente é superior à capacidade nominal), e a proteção magnética, que atua quase instantaneamente na ocorrência de um curto-circuito.
                </p>
                <p>
                    Para realizar o dimensionamento correto e garantir a segurança, precisamos entender as curvas de atuação.
                </p>

<h2 class="text-2xl font-bold text-slate-800 mt-8 mb-4"><i class="fas fa-chart-line text-blue-600 mr-2"></i>Tipos de Curvas</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 hover:shadow-md transition">
                        <h3 class="font-bold text-xl text-slate-900 mb-2">Curva A</h3>
                        <p class="text-sm">
                            Embora seja polêmica e não esteja designada na NBR NM 60898, ela existe em alguns catálogos. É ideal para proteger circuitos eletrônicos sensíveis e de medição, entendendo como curto-circuito um valor de 2 a 4 vezes a corrente nominal.
                        </p>
                        <p class="text-sm mt-3">
                            <a href="https://www.youtube.com/watch?v=Zo6-ZrkEHBQ" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 hover:underline font-semibold flex items-center">
                                <i class="fab fa-youtube text-red-600 mr-2 text-lg"></i> Para saber mais detalhes sobre disjuntor CURVA A, click aqui.
                            </a>
                        </p>
                    </div>
                    <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 hover:shadow-md transition">
                        <h3 class="font-bold text-xl text-slate-900 mb-2">Curva B</h3>
                        <p class="text-sm">
                            Aplicada para cargas resistivas, como chuveiros, torneiras elétricas e tomadas de uso geral. Detecta como curto-circuito um valor de 3 a 5 vezes a corrente nominal.
                        </p>
                    </div>
                    <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 hover:shadow-md transition">
                        <h3 class="font-bold text-xl text-slate-900 mb-2">Curva C</h3>
                        <p class="text-sm">
                            Destinada a circuitos com características indutivas e que sofrem picos de corrente ao ligar, como micro-ondas, ar-condicionado e bombas de recalque. O disparo ocorre entre 5 a 10 vezes a corrente nominal.
                        </p>
                    </div>
                    <div class="bg-slate-50 p-5 rounded-xl border border-slate-200 hover:shadow-md transition">
                        <h3 class="font-bold text-xl text-slate-900 mb-2">Curva D</h3>
                        <p class="text-sm">
                            Voltada para cargas altamente indutivas com picos de partida severos, como grandes motores e transformadores. Atua magneticamente quando a corrente atinge de 10 a 20 vezes a corrente nominal.
                        </p>
                    </div>
                </div>

<h2 class="text-2xl font-bold text-slate-800 mt-8 mb-4"><i class="fas fa-gamepad text-indigo-600 mr-2"></i>Como usar o Simulador</h2>
                <p>Preparamos uma ferramenta interativa logo abaixo para você visualizar a teoria na prática:</p>
                <ul class="list-none space-y-3 text-base bg-blue-50/50 p-6 rounded-xl border border-blue-100">
                    <li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i><span><strong>Seleção de Curva:</strong> Alterne entre as curvas A, B, C e D para ver como a "zona de disparo" magnético muda no gráfico.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i><span><strong>Corrente Nominal:</strong> Escolha disjuntores comuns do mercado (10A, 16A, 20A, etc.).</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i><span><strong>Simular Corrente:</strong> Deslize a barra para simular uma sobrecarga ou curto e veja o tempo exato de atuação.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i><span><strong>Fator de Temperatura:</strong> Ligue essa opção e veja como o calor do ambiente pré-aquece o bimetal interno, encurtando o tempo de disparo térmico.</span></li>
                    <li class="flex items-start"><i class="fas fa-check-circle text-blue-500 mt-1 mr-3"></i><span><strong>Pico de Partida:</strong> Teste se o disjuntor aguenta a partida de uma geladeira ou motor pesado sem desarmar acidentalmente.</span></li>
                </ul>

<div class="mt-8 bg-slate-50 p-4 md:p-6 rounded-2xl border border-slate-200">
                    <h3 class="text-xl font-bold text-slate-800 mb-4"><i class="fab fa-youtube text-red-600 mr-2"></i>Vídeo Demonstrativo</h3>
                    <div class="relative w-full overflow-hidden rounded-xl shadow-md" style="padding-top: 56.25%;">
                        <iframe class="absolute top-0 left-0 w-full h-full" 
                                src="https://www.youtube.com/embed/XHuGrZvbQCc" 
                                title="Simulador de Curvas de Disjuntores" 
                                frameborder="0" 
                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
                                allowfullscreen>
                        </iframe>
                    </div>
                </div>
            </div>
        </article>

<header class="mb-8 text-center md:text-left">
            <h2 class="text-3xl font-bold text-slate-900"><i class="fas fa-bolt text-blue-600 mr-2"></i> Simulador: Curvas de Atuação de Disjuntores</h2>
            <p class="text-slate-600 mt-2 text-lg">Analise as zonas de atuação térmica e magnética idênticas aos catálogos dos fabricantes.</p>
            <p class="text-sm text-slate-500 mt-1">Desenvolvimento: <a href="https://www.instagram.com/trick.drawing/" target="_blank" rel="noopener noreferrer" class="text-indigo-600 hover:text-indigo-800 hover:underline font-semibold">@Trick.Drawing</a></p>
        </header>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <div class="bg-white rounded-2xl shadow-lg p-6 lg:col-span-1 border border-slate-200">
                <h2 class="text-xl font-semibold mb-6 border-b pb-2">Configurações</h2>
                
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-slate-700 mb-2">1. Selecione a Curva do Disjuntor</label>
                    <div class="grid grid-cols-4 gap-2">
                        <button onclick="setCurve('A')" id="btn-A" class="curve-btn py-2 rounded-lg font-bold border-2 border-blue-500 bg-blue-50 text-blue-700 hover:bg-blue-100 transition">A</button>
                        <button onclick="setCurve('B')" id="btn-B" class="curve-btn py-2 rounded-lg font-bold border-2 border-slate-200 text-slate-600 hover:bg-slate-50 transition">B</button>
                        <button onclick="setCurve('C')" id="btn-C" class="curve-btn py-2 rounded-lg font-bold border-2 border-slate-200 text-slate-600 hover:bg-slate-50 transition">C</button>
                        <button onclick="setCurve('D')" id="btn-D" class="curve-btn py-2 rounded-lg font-bold border-2 border-slate-200 text-slate-600 hover:bg-slate-50 transition">D</button>
                    </div>
                    <p id="curve-desc" class="text-sm text-slate-500 mt-3 italic">Curva A: Disparo magnético entre 2 a 3x In. Uso: Proteção de circuitos sensíveis.</p>
                </div>

<div class="mb-8">
                    <label class="block text-sm font-medium text-slate-700 mb-2">2. Corrente Nominal (In)</label>
                    <select id="in-select" class="w-full bg-slate-50 border border-slate-300 text-slate-900 rounded-lg p-2.5 focus:ring-blue-500 focus:border-blue-500" onchange="updateSimulation()">
                        <option value="10">10 Amperes</option>
                        <option value="16">16 Amperes</option>
                        <option value="20" selected>20 Amperes</option>
                        <option value="32">32 Amperes</option>
                        <option value="50">50 Amperes</option>
                    </select>
                </div>

<div class="bg-blue-50 rounded-xl p-5 border border-blue-100">
                    <h3 class="font-semibold text-blue-900 mb-4"><i class="fas fa-plug mr-2"></i>3. Simular Corrente Constante</h3>
                    
                    <div class="mb-4">
                        <input type="range" id="fault-multiplier" min="1" max="30" step="0.05" value="1.5" oninput="updateSimulation()">
                        <div class="flex justify-between text-xs text-slate-500 mt-2 font-bold">
                            <span>1x In</span>
                            <span>Múltiplos</span>
                            <span>30x In</span>
                        </div>
                    </div>

<div class="bg-white p-4 rounded-lg shadow-inner text-center">
                        <p class="text-sm text-slate-500 mb-1">Corrente no Circuito</p>
                        <p class="text-3xl font-black text-slate-800" id="current-display">30 A</p>
                        <p class="text-xs text-slate-400 mt-1 font-bold" id="multiplier-display">(1.50x In)</p>
                    </div>
                </div>

<div class="mt-6 bg-slate-50 rounded-xl p-5 border border-slate-200">
                    <div class="flex items-center justify-between mb-2">
                        <label class="font-semibold text-slate-700 cursor-pointer flex items-center gap-2" for="temp-toggle">
                            <i class="fas fa-temperature-half text-orange-500"></i> Fator de Temperatura
                        </label>
                        
                        <label class="relative inline-flex items-center cursor-pointer">
                          <input type="checkbox" id="temp-toggle" class="sr-only peer" onchange="toggleTemp()">
                          <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-500"></div>
                        </label>
                    </div>
                    
                    <div id="temp-controls" class="hidden mt-4 opacity-0 transition-opacity duration-300">
                        <input type="range" id="temp-slider" min="10" max="60" step="1" value="30" oninput="updateSimulation()">
                        <div class="flex justify-between text-xs text-slate-500 mt-2 font-bold">
                            <span>10°C</span>
                            <span id="temp-display" class="text-orange-600 text-sm bg-orange-100 px-2 py-1 rounded">30°C</span>
                            <span>60°C</span>
                        </div>
                        <p class="text-xs text-slate-500 mt-3 italic leading-tight">Ao aumentar a temperatura ambiente, o bimetal pré-aquece, deslocando a curva térmica para a esquerda (desarma mais rápido).</p>
                    </div>
                </div>

<div class="mt-6 bg-slate-50 rounded-xl p-5 border border-slate-200">
                    <div class="flex items-center justify-between mb-2">
                        <label class="font-semibold text-slate-700 cursor-pointer flex items-center gap-2" for="transient-toggle">
                            <i class="fas fa-industry text-indigo-500"></i> Pico de Partida
                        </label>
                        
                        <label class="relative inline-flex items-center cursor-pointer">
                          <input type="checkbox" id="transient-toggle" class="sr-only peer" onchange="toggleTransient()">
                          <div class="w-11 h-6 bg-slate-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-500"></div>
                        </label>
                    </div>
                    
                    <div id="transient-controls" class="hidden mt-4 opacity-0 transition-opacity duration-300">
                        <select id="transient-select" class="w-full bg-white border border-slate-300 text-slate-900 rounded-lg p-2.5 mb-4 text-sm font-medium focus:ring-indigo-500 focus:border-indigo-500" onchange="updateSimulation()">
                            <option value="motor_leve">Motor Leve (5x In por 0,5s)</option>
                            <option value="motor_pesado">Motor Pesado (8x In por 0,5s)</option>
                            <option value="geladeira">Geladeira e Freezer (5x In por 0,5s)</option>
                            <option value="ar_condicionado">Ar-condicionado (4x In por 0,5s)</option>
                            <option value="maquina_lavar">Máquina de lavar roupas (3x In por 0,5s)</option>
                            <option value="aspirador">Aspirador de pó (2x In por 0,5s)</option>
                            <option value="bomba_agua">Bomba de água (5x In por 0,5s)</option>
                        </select>
                        
                        <div id="transient-result" class="p-3 rounded-lg text-sm font-bold text-center border">
                            --
                        </div>
                        <p class="text-xs text-slate-500 mt-3 italic leading-tight">Testa se o disjuntor suporta o tempo e a corrente de transiente sem desarmar acidentalmente.</p>
                    </div>
                </div>

</div>

<div class="bg-white rounded-2xl shadow-lg p-4 lg:p-6 lg:col-span-2 border border-slate-200 flex flex-col">
                <h2 class="text-xl font-semibold mb-4 text-center md:text-left text-slate-800" id="chart-title">Zona de Atuação - Curva A</h2>
                <div class="chart-container">
                    <canvas id="curveChart"></canvas>
                </div>
            </div>
        </div>
    </div>

const baseThermalMin = [
            [1.13, 7200], [1.15, 2400], [1.2, 400], [1.3, 100], [1.5, 30], 
            [2, 8], [3, 3], [4, 1.8], [5, 1.2], [6, 1.0], [8, 0.7], [10, 0.5], [20, 0.3], [30, 0.2]
        ];
        
        const baseThermalMax = [
            [1.13, 7200], [1.45, 3600], [1.5, 1200], [2, 100], [3, 25], 
            [4, 12], [5, 7], [6, 5], [8, 3.5], [10, 2.5], [20, 1.2], [30, 0.8]
        ];

// Perfis de pico de partida (transiente)
        const transientProfiles = {
            'motor_leve': { x: 5, y: 0.5 },
            'motor_pesado': { x: 8, y: 0.5 },
            'geladeira': { x: 5, y: 0.5 },
            'ar_condicionado': { x: 4, y: 0.5 },
            'maquina_lavar': { x: 3, y: 0.5 },
            'aspirador': { x: 2, y: 0.5 },
            'bomba_agua': { x: 5, y: 0.5 }
        };

let currentCurve = 'A';
        let chart;
        let showCrosshairs = false;

// Função matemática de Spline Cúbico Monótono para criar curvas perfeitamente suaves
        function createLogSpline(arr) {
            const xs = arr.map(p => Math.log(p[0]));
            const ys = arr.map(p => Math.log(p[1]));
            const n = xs.length;
            
            const secants = [];
            for (let i = 0; i < n - 1; i++) {
                secants.push((ys[i + 1] - ys[i]) / (xs[i + 1] - xs[i]));
            }
            
            const tangents = [secants[0]];
            for (let i = 1; i < n - 1; i++) {
                if (secants[i - 1] * secants[i] <= 0) {
                    tangents.push(0);
                } else {
                    const dx1 = xs[i] - xs[i - 1];
                    const dx2 = xs[i + 1] - xs[i];
                    const w1 = 2 * dx2 + dx1;
                    const w2 = dx2 + 2 * dx1;
                    tangents.push(3 * (dx1 + dx2) / (w1 / secants[i - 1] + w2 / secants[i]));
                }
            }
            tangents.push(secants[n - 2]);
            
            return function(x) {
                if (x <= arr[0][0]) return arr[0][1];
                if (x >= arr[n - 1][0]) return arr[n - 1][1];
                
                const lx = Math.log(x);
                let i = 0;
                while (i < n - 2 && lx >= xs[i + 1]) i++;
                
                const h = xs[i + 1] - xs[i];
                const t = (lx - xs[i]) / h;
                const t2 = t * t;
                const t3 = t2 * t;
                
                const h00 = 2 * t3 - 3 * t2 + 1;
                const h10 = t3 - 2 * t2 + t;
                const h01 = -2 * t3 + 3 * t2;
                const h11 = t3 - t2;
                
                const ly = h00 * ys[i] + h10 * h * tangents[i] + h01 * ys[i + 1] + h11 * h * tangents[i + 1];
                return Math.exp(ly);
            };
        }

const getThermalMin = createLogSpline(baseThermalMin);
        const getThermalMax = createLogSpline(baseThermalMax);

// Função para gerar a curva do perfil de partida (Decaimento do Pico)
        function generateTransientCurve(peakI, peakTime) {
            let pts = [];
            pts.push({x: peakI, y: 0.01});
            pts.push({x: peakI, y: peakTime});

const decayDuration = 1.0; 
            const steps = 15;
            for (let i = 1; i <= steps; i++) {
                let t = peakTime + (decayDuration * (i / steps));
                let k = -Math.log(0.01 / (peakI - 1)) / decayDuration;
                let currentI = 1 + (peakI - 1) * Math.exp(-k * (t - peakTime));
                pts.push({x: currentI, y: t});
            }

pts.push({x: 1, y: 7200});
            return pts;
        }

function generateZoneData(magMin, magMax, kTemp = 1.0) {
            let minPts = [];
            let maxPts = [];
            
            let xValues = [1.13, 1.45];
            for(let i = 1.1; i <= 30; i += 0.05) xValues.push(Number(i.toFixed(2)));
            xValues.push(magMin, magMax);
            xValues = [...new Set(xValues)].sort((a,b) => a-b).filter(v => v >= 1.13);

xValues.forEach(rx => {
                let effectiveRx = rx / kTemp;

if (rx < magMin) {
                    minPts.push({x: rx, y: Math.max(0.01, getThermalMin(effectiveRx))});
                } else if (rx === magMin) {
                    minPts.push({x: rx, y: Math.max(0.01, getThermalMin(effectiveRx))});
                    minPts.push({x: rx, y: 0.01}); 
                } else {
                    minPts.push({x: rx, y: 0.01});
                }
                
                if (rx < magMax) {
                    maxPts.push({x: rx, y: Math.max(0.01, getThermalMax(effectiveRx))});
                } else if (rx === magMax) {
                    maxPts.push({x: rx, y: Math.max(0.01, getThermalMax(effectiveRx))});
                    maxPts.push({x: rx, y: 0.01}); 
                } else {
                    maxPts.push({x: rx, y: 0.01});
                }
            });

return { min: minPts, max: maxPts };
        }

function initChart() {
            const ctx = document.getElementById('curveChart').getContext('2d');
            const data = generateZoneData(curveInfo['A'].magMin, curveInfo['A'].magMax);
            
            const crosshairPlugin = {
                id: 'crosshairPlugin',
                afterDraw: (chart) => {
                    if (!showCrosshairs || chart.data.datasets[2].data.length === 0) return;

const ctx = chart.ctx;
                    const meta = chart.getDatasetMeta(2);
                    
                    if (!meta.data[0] || meta.hidden) return;
                    
                    const x = meta.data[0].x;
                    const y = meta.data[0].y;
                    
                    const bottomY = chart.scales.y.bottom;
                    const leftX = chart.scales.x.left;

ctx.save();
                    ctx.beginPath();
                    ctx.setLineDash([6, 6]); 
                    ctx.strokeStyle = 'rgba(239, 68, 68, 0.6)'; 
                    ctx.lineWidth = 1.5;

ctx.moveTo(x, y);
                    ctx.lineTo(x, bottomY);
                    ctx.moveTo(x, y);
                    ctx.lineTo(leftX, y);
                    ctx.stroke();

const xValue = chart.data.datasets[2].data[0].x;
                    const yValue = chart.data.datasets[2].data[0].y;

const xText = xValue.toFixed(2).replace('.', ',') + 'x';
                    let yText = '';
                    if (yValue <= 0.01) yText = '< 0,01 s';
                    else if (yValue < 1) yText = yValue.toFixed(2).replace('.', ',') + ' s';
                    else if (yValue < 60) yText = Math.round(yValue) + ' s';
                    else {
                        let m = Math.floor(yValue / 60);
                        let s = Math.round(yValue % 60);
                        yText = s === 0 ? m + ' min' : m + 'm ' + s + 's';
                    }

ctx.font = 'bold 12px sans-serif';

ctx.textAlign = 'center';
                    ctx.textBaseline = 'top';
                    const xMetrics = ctx.measureText(xText);
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; 
                    ctx.fillRect(x - xMetrics.width/2 - 4, bottomY + 4, xMetrics.width + 8, 16);
                    ctx.fillStyle = '#ef4444'; 
                    ctx.fillText(xText, x, bottomY + 6);

ctx.textAlign = 'right';
                    ctx.textBaseline = 'middle';
                    const yMetrics = ctx.measureText(yText);
                    ctx.fillStyle = 'rgba(255, 255, 255, 0.9)'; 
                    ctx.fillRect(leftX - yMetrics.width - 12, y - 8, yMetrics.width + 8, 16);
                    ctx.fillStyle = '#ef4444'; 
                    ctx.fillText(yText, leftX - 8, y);

ctx.restore();
                }
            };
            
            const referenceLinesPlugin = {
                id: 'referenceLinesPlugin',
                afterDraw: (chart) => {
                    const ctx = chart.ctx;
                    const xAxis = chart.scales.x;
                    const yAxis = chart.scales.y;
                    
                    const x113 = xAxis.getPixelForValue(1.13);
                    const x145 = xAxis.getPixelForValue(1.45);
                    const topY = yAxis.top;

ctx.save();
                    ctx.font = 'bold 12px sans-serif';
                    ctx.fillStyle = '#475569';
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    
                    ctx.fillText('1,13', x113, topY - 18);
                    ctx.fillText('1,45', x145, topY - 18);
                    
                    ctx.beginPath();
                    ctx.strokeStyle = '#475569';
                    ctx.lineWidth = 1.5;
                    
                    ctx.moveTo(x113, topY - 15);
                    ctx.lineTo(x113, topY - 2);
                    ctx.lineTo(x113 - 3, topY - 6);
                    ctx.moveTo(x113, topY - 2);
                    ctx.lineTo(x113 + 3, topY - 6);

ctx.moveTo(x145, topY - 15);
                    ctx.lineTo(x145, topY - 2);
                    ctx.lineTo(x145 - 3, topY - 6);
                    ctx.moveTo(x145, topY - 2);
                    ctx.lineTo(x145 + 3, topY - 6);
                    
                    ctx.stroke();
                    ctx.restore();
                }
            };

const transientLabelPlugin = {
                id: 'transientLabelPlugin',
                afterDraw: (chart) => {
                    const isTransientEnabled = document.getElementById('transient-toggle').checked;
                    if (!isTransientEnabled || chart.data.datasets[3].data.length === 0) return;

const meta = chart.getDatasetMeta(3);
                    if (!meta.data[0] || meta.hidden) return;

const ctx = chart.ctx;
                    const x = meta.data[0].x;
                    const y = meta.data[0].y;

ctx.save();
                    ctx.font = 'bold 13px sans-serif';
                    ctx.fillStyle = '#4f46e5'; 
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(' Pico', x + 12, y);
                    ctx.restore();
                }
            };

chart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [
                        {
                            label: 'Tempo Mínimo',
                            data: data.min,
                            borderColor: '#1e293b',
                            borderWidth: 2,
                            fill: false,
                            pointRadius: 0,
                            pointHoverRadius: 0,
                            tension: 0
                        },
                        {
                            label: 'Tempo Máximo',
                            data: data.max,
                            borderColor: '#1e293b',
                            borderWidth: 2,
                            backgroundColor: 'rgba(253, 224, 71, 0.65)', 
                            fill: '-1', 
                            pointRadius: 0,
                            pointHoverRadius: 0,
                            tension: 0
                        },
                        {
                            label: 'Corrente Constante',
                            data: [{x: 1.5, y: 120}],
                            backgroundColor: '#ef4444',
                            borderColor: '#ffffff',
                            borderWidth: 2,
                            pointRadius: 7,
                            pointHoverRadius: 9,
                            showLine: false
                        },
                        {
                            label: 'Ponto de Partida',
                            data: [],
                            backgroundColor: '#4f46e5',
                            borderColor: '#ffffff',
                            borderWidth: 2,
                            pointRadius: 8, 
                            pointHoverRadius: 10,
                            showLine: false
                        },
                        {
                            label: 'Perfil do Transiente',
                            data: [],
                            borderColor: '#4f46e5',
                            borderWidth: 2,
                            borderDash: [5, 5], 
                            fill: false,
                            pointRadius: 0,
                            pointHoverRadius: 0,
                            tension: 0
                        }
                    ]
                },
                plugins: [crosshairPlugin, referenceLinesPlugin, transientLabelPlugin],
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    animation: { duration: 300 },
                    layout: {
                        padding: {
                            top: 35
                        }
                    },
                    onClick: (e, elements) => {
                        if (elements.length > 0 && elements[0].datasetIndex === 2) {
                            showCrosshairs = !showCrosshairs; 
                            
                            const tickColor = showCrosshairs ? '#cbd5e1' : '#64748b';
                            chart.options.scales.x.ticks.color = tickColor;
                            chart.options.scales.y.ticks.color = tickColor;

chart.update();
                        }
                    },
                    onHover: (e, elements) => {
                        const target = e.native ? e.native.target : e.target;
                        target.style.cursor = (elements.length > 0 && elements[0].datasetIndex === 2) ? 'pointer' : 'default';
                    },
                    plugins: {
                        legend: { display: false },
                        tooltip: { enabled: false }
                    },
                    scales: {
                        x: {
                            type: 'logarithmic',
                            min: 1,
                            max: 30,
                            title: {
                                display: true,
                                text: 'Corrente → (x In)',
                                font: { weight: 'bold', size: 14 }
                            },
                            grid: { 
                                color: '#94a3b8',
                                lineWidth: 0.5
                            },
                            afterBuildTicks: axis => {
                                axis.ticks = [1, 1.13, 1.45, 1.5, 2, 3, 4, 5, 6, 7, 8, 10, 15, 20, 30].map(v => ({value: v}));
                            },
                            ticks: {
                                color: '#64748b',
                                callback: function(value) {
                                    if([1, 1.5, 2, 3, 4, 5, 6, 8, 10, 15, 20, 30].includes(value)){
                                        return value.toString().replace('.', ',');
                                    }
                                    return '';
                                },
                                maxRotation: 0,
                                autoSkip: false,
                                font: { size: 12 }
                            }
                        },
                        y: {
                            type: 'logarithmic',
                            min: 0.01,
                            max: 7200,
                            title: {
                                display: true,
                                text: 'Tempo (segundos / minutos)',
                                font: { weight: 'bold', size: 14 }
                            },
                            grid: { 
                                color: '#94a3b8',
                                lineWidth: 0.5
                            },
                            afterBuildTicks: axis => {
                                axis.ticks = [
                                    0.01, 0.02, 0.04, 0.06, 0.1, 0.2, 0.4, 0.6, 1, 2, 4, 6, 10, 20, 40,
                                    60, 120, 240, 360, 600, 1200, 2400, 3600, 7200
                                ].map(v => ({value: v}));
                            },
                            ticks: {
                                color: '#64748b',
                                callback: function(value) {
                                    const labels = {
                                        0.01: '0,01', 0.02: '0,02', 0.04: '0,04', 0.06: '0,06',
                                        0.1: '0,1', 0.2: '0,2', 0.4: '0,4', 0.6: '0,6',
                                        1: '1', 2: '2', 4: '4', 6: '6', 10: '10', 20: '20', 40: '40',
                                        60: '1 min', 120: '2', 240: '4', 360: '6', 600: '10',
                                        1200: '20', 2400: '40', 3600: '60', 7200: '120'
                                    };
                                    return labels[value] || '';
                                },
                                autoSkip: false,
                                font: { size: 12 }
                            }
                        }
                    }
                }
            });
        }

function setCurve(curve) {
            currentCurve = curve;
            
            document.querySelectorAll('.curve-btn').forEach(btn => {
                btn.className = "curve-btn py-2 rounded-lg font-bold border-2 border-slate-200 text-slate-600 hover:bg-slate-50 transition";
            });
            
            const activeBtn = document.getElementById('btn-' + curve);
            activeBtn.className = `curve-btn py-2 rounded-lg font-bold border-2 border-blue-500 bg-blue-50 text-blue-700 transition`;

document.getElementById('curve-desc').innerText = curveInfo[curve].desc;
            document.getElementById('chart-title').innerText = `Zona de Atuação - Curva ${curve}`;

updateSimulation();
        }

function calculateLimits(xVal, kTemp = 1.0) {
            const magMin = curveInfo[currentCurve].magMin;
            const magMax = curveInfo[currentCurve].magMax;
            
            let yMin = 0.01, yMax = 0.01;
            let effectiveX = xVal / kTemp;

if (effectiveX <= 1.13 && xVal < magMin) {
                return { min: 7200, max: 7200 };
            }

if (xVal < magMin) yMin = getThermalMin(effectiveX);
            if (xVal < magMax) yMax = getThermalMax(effectiveX);

return { min: Math.max(0.01, yMin), max: Math.max(0.01, yMax) };
        }

function updateSimulation() {
            const inValue = parseFloat(document.getElementById('in-select').value);
            const multiplier = parseFloat(document.getElementById('fault-multiplier').value);
            const currentA = (inValue * multiplier).toFixed(1);
            
            document.getElementById('current-display').innerText = currentA + ' A';
            document.getElementById('multiplier-display').innerText = `(${multiplier.toFixed(2)}x In)`;

const isTempEnabled = document.getElementById('temp-toggle').checked;
            let tempVal = 30;
            if (isTempEnabled) {
                tempVal = parseFloat(document.getElementById('temp-slider').value);
                document.getElementById('temp-display').innerText = tempVal + '°C';
            }
            const kTemp = isTempEnabled ? 1 + (30 - tempVal) * 0.005 : 1.0;

const magMin = curveInfo[currentCurve].magMin;
            const magMax = curveInfo[currentCurve].magMax;
            const newData = generateZoneData(magMin, magMax, kTemp);
            chart.data.datasets[0].data = newData.min;
            chart.data.datasets[1].data = newData.max;

const limits = calculateLimits(multiplier, kTemp);

if (multiplier / kTemp <= 1.13 && multiplier < magMin) {
                chart.data.datasets[2].data = []; 
                if (showCrosshairs) {
                    showCrosshairs = false;
                    chart.options.scales.x.ticks.color = '#64748b';
                    chart.options.scales.y.ticks.color = '#64748b';
                }
            } else {
                let avgY;
                if (multiplier >= magMax) avgY = 0.01;
                else if (multiplier >= magMin) avgY = 0.01; 
                else {
                    const logMin = Math.log(limits.min);
                    const logMax = Math.log(limits.max);
                    avgY = Math.exp((logMin + logMax) / 2);
                }
                chart.data.datasets[2].data = [{x: multiplier, y: avgY}];
            }

chart.update();
        }

window.onload = () => {
            initChart();
            updateSimulation();
        };
    </script>
</body>
</html>

Qual curva de disjuntor escolher para sua casa

Deixe um comentário Cancelar resposta

Contatos

Qual curva de disjuntor escolher para sua casa

Deixe um comentário Cancelar resposta

Contatos

Nuvem de Etiquetas