พบปัญหา 3 อย่าง ดังนี้

1. เมื่อเพิ่มแถว แล้วแก้ไขปี เช่น 2027 มันจะสร้างปีในกราฟเป็น 0002 / 0020 / 0202 / 2027 เพราะกราฟรันตอนพิมพ์ date วิธีแก้ เปลี่ยน input → change (แก้ที่ไหน? มีวิธีดีกว่านี้ไหม?)
2. เมื่อใส่ premium เช่น 888 ระบบจะสร้างแถวใหม่เรื่อยๆ ทั้งที่ยังพิมพ์ไม่เสร็จ จะสร้างแถวที่มี premium 8 → 88 → 888 สาเหตุ เพราะ ต่อ string / update ซ้ำ วิธีแก้อาจเป็น การแปลง Number + ห้ามแก้ data ในกราฟ แก้ที่ไหน? มีวิธีดีกว่านี้ไหม?
3. กราฟสร้างปี 2926 ขึ้นมาทั้งที่ไม่มีปีนั้นจริง เพราะ json ที่อัพโหลด รูปแบบเป็น yyyy-mm-dd ไม่แน่ใจว่าโค๊ดไหนที่ไปค้นหาปี แล้วมาสร้าง? แก้อย่างไร?

ภาพรวมสั้นที่สุดก่อน

ระบบคุณตอนนี้มีปัญหาเพราะ 3 อย่างนี้ปนกัน

1️⃣ เขียนข้อมูลตอน “พิมพ์”
2️⃣ กราฟไปยุ่งกับข้อมูล
3️⃣ ดึงปีจาก string โดยไม่กรอง

กฎเหล็กที่ต้องยึด:

input event = ห้ามแตะ dataList
change / blur = ค่อยเขียน dataList
กราฟ = อ่านอย่างเดียว

ต่อไปคือคำตอบตรงคำถามทีละข้อ 👇

❌ ปัญหา 1

พิมพ์ปี 2027 → กราฟสร้าง 0002 / 0020 / 0202 / 2027

🔎 สาเหตุจริง

• ช่อง date ใช้ input event
• ทุกครั้งที่พิมพ์ → updateAllCharts()
• กราฟอ่าน d.date.slice(0,4) ทั้งที่ค่ามันยังไม่ครบ

นี่ไม่ใช่บั๊กกราฟ
แต่เป็น กราฟถูกเรียกเร็วเกิน

✅ วิธีแก้ที่ถูกต้อง (สั้นและดีที่สุด)

🔧 แก้ที่ “input date ตอนสร้างแถว” (ใน addRow())

❌ อย่ามีแบบนี้

dateInput.addEventListener("input", updateAllCharts);

✅ ให้ใช้แบบนี้เท่านั้น

dateInput.addEventListener("change", () => {
    row.date = dateInput.value; // yyyy-mm-dd ที่นิ่งแล้ว
    updateAllCharts();
});

💡 วิธีที่ “ดีกว่า change” (ถ้าอยากลื่น)

ใช้ blur แทน

dateInput.addEventListener("blur", () => {
    row.date = dateInput.value;
    updateAllCharts();
});

📌 สรุปข้อ 1

• แก้ที่ addRow() ไม่ใช่กราฟ
• เปลี่ยน input → change หรือ blur
• ปีแตกจะหาย 100%

❌ ปัญหา 2

พิมพ์ premium 888 → เกิดแถว 8 / 88 / 888

🔎 สาเหตุจริง (ชัดมาก)

มีโค้ดลักษณะนี้อยู่แน่นอน:

premiumInput.addEventListener("input", () => {
    row.premium = premiumInput.value;
    updateAllCharts();
});

ผลคือ:

• row.premium เป็น string
• update ซ้ำ
• บางจุดเอาไปต่อ string
• บาง logic เข้าใจว่าเป็น “เพิ่มแถวใหม่”

✅ วิธีแก้ที่ถูกต้อง (จุดเดียวจบ)

🔧 แก้ที่ addRow() เหมือนกัน

❌ ห้ามใช้ input

premiumInput.addEventListener("input", ...);

✅ ใช้แบบนี้

premiumInput.addEventListener("change", () => {
    row.premium = Number(premiumInput.value) || 0;
    updateAllCharts();
});

หรือ (ดีกว่า)

premiumInput.addEventListener("blur", () => {
    row.premium = Number(premiumInput.value) || 0;
    updateAllCharts();
});

❗ กฎสำคัญมาก (ห้ามฝ่าฝืน)

ในโค้ดกราฟ ห้ามมีบรรทัดนี้เด็ดขาด

d.premium = ...

กราฟต้อง:

const value = Number(d.premium) || 0;

อ่านอย่างเดียว

📌 สรุปข้อ 2

• แก้ที่ addRow()
• input → change / blur
• แปลง Number ตอนเขียน data
• กราฟห้ามเขียน data

❌ ปัญหา 3

กราฟสร้างปี 2926 ทั้งที่ JSON ไม่มี

🔎 จุดที่สร้างปี (ต้นเหตุ)

อยู่ตรงนี้แน่นอน (คุณใช้จริง):

d.date.slice(0, 4)
// หรือ
d.date.substring(0, 4)

ถ้า d.date เคยเสีย / เคยถูกเขียนผิด
→ ปีผิดจะถูกดึงมาใช้ทันที

✅ วิธีแก้ที่ “สั้นที่สุด และไม่พังกราฟ”

🔧 แก้ที่จุด “รวมปีในกราฟ”

const maxYear = new Date().getFullYear() + 1;

const allYears = [...new Set(
    dataList
        .map(d => d.date?.slice(0, 4))
        .filter(y => y >= "2000" && y <= String(maxYear))
)].sort();

📌 แค่นี้:

• ปี 2926 ไม่ผ่าน
• ไม่ต้อง regex
• ไม่กระทบ JSON ปกติ
• กราฟยังแสดง

🧠 สรุปสุดท้ายแบบจับไปแก้ได้เลย

ถ้าคุณทำแค่ 3 อย่างนี้ ระบบจะนิ่งทันที

1. ❌ ไม่มี updateAllCharts() ใน input
2. ✅ เขียน row.xxx เฉพาะ change / blur
3. ✅ กรองปีตอนสร้างกราฟ

ถ้าคุณอยากให้ผม ชี้บรรทัดจริงใน addRow()
ส่งฟังก์ชัน addRow() มาได้เลยครับ
รอบนี้ผมจะตอบเป็น “ลบ/เปลี่ยนตรงนี้” แบบบรรทัดต่อบรรทัด และจบแน่นอนครับ 💯

แก้แล้ว

ปี 2926 เกิดจาก มีข้อมูลปีพิมพ์ผิดจริงใน json ดังนั้นไปแก้ข้อมูลในนั้นแล้วอัพขึ้นใหม่ ไม่ต้องแก้โค๊ดเพื่อกรองค่าปี เพราะถูกต้อแล้ว และเพื่อจะได้ทราบหากมีการพิพม์ปีผิด จะได้แก้ให้ถูกได้ เป็นการรีเช็คในตัว