77 lines
4.3 KiB
TypeScript
77 lines
4.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
|
|
const PolynomialBehaviorWidget: React.FC = () => {
|
|
const [degreeType, setDegreeType] = useState<'even' | 'odd'>('odd');
|
|
const [lcSign, setLcSign] = useState<'pos' | 'neg'>('pos');
|
|
|
|
// Visualization
|
|
const width = 300;
|
|
const height = 200;
|
|
|
|
const getPath = () => {
|
|
// Create schematic shapes
|
|
// Odd +: Low Left -> High Right
|
|
// Odd -: High Left -> Low Right
|
|
// Even +: High Left -> High Right
|
|
// Even -: Low Left -> Low Right
|
|
|
|
const startY = (degreeType === 'odd' && lcSign === 'pos') || (degreeType === 'even' && lcSign === 'neg') ? 180 : 20;
|
|
const endY = (lcSign === 'pos') ? 20 : 180;
|
|
|
|
// Control points for curvy polynomial look
|
|
const cp1Y = startY === 20 ? 150 : 50;
|
|
const cp2Y = endY === 20 ? 150 : 50;
|
|
|
|
return `M 20 ${startY} C 100 ${cp1Y}, 200 ${cp2Y}, 280 ${endY}`;
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white p-6 rounded-xl shadow-lg border border-slate-200">
|
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-bold text-slate-400 uppercase">Degree (Highest Power)</p>
|
|
<div className="flex gap-2">
|
|
<button onClick={() => setDegreeType('even')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === 'even' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-600 border-slate-200'}`}>Even (x², x⁴)</button>
|
|
<button onClick={() => setDegreeType('odd')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${degreeType === 'odd' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-slate-600 border-slate-200'}`}>Odd (x, x³)</button>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-bold text-slate-400 uppercase">Leading Coefficient</p>
|
|
<div className="flex gap-2">
|
|
<button onClick={() => setLcSign('pos')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === 'pos' ? 'bg-emerald-600 text-white border-emerald-600' : 'bg-white text-slate-600 border-slate-200'}`}>Positive (+)</button>
|
|
<button onClick={() => setLcSign('neg')} className={`px-4 py-2 rounded-lg font-bold text-sm border transition-all ${lcSign === 'neg' ? 'bg-rose-600 text-white border-rose-600' : 'bg-white text-slate-600 border-slate-200'}`}>Negative (-)</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative h-48 bg-slate-50 border border-slate-200 rounded-xl overflow-hidden flex items-center justify-center">
|
|
<svg width="300" height="200">
|
|
<line x1="150" y1="20" x2="150" y2="180" stroke="#cbd5e1" strokeWidth="2" />
|
|
<line x1="20" y1="100" x2="280" y2="100" stroke="#cbd5e1" strokeWidth="2" />
|
|
|
|
<path d={getPath()} stroke="#8b5cf6" strokeWidth="4" fill="none" markerEnd="url(#arrow)" markerStart="url(#arrow-start)" />
|
|
|
|
<defs>
|
|
<marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
|
</marker>
|
|
<marker id="arrow-start" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto-start-reverse">
|
|
<path d="M0,0 L0,6 L9,3 z" fill="#8b5cf6" />
|
|
</marker>
|
|
</defs>
|
|
</svg>
|
|
|
|
<div className="absolute top-2 left-2 text-xs font-bold text-slate-400">End Behavior</div>
|
|
</div>
|
|
|
|
<div className="mt-4 p-3 bg-indigo-50 border border-indigo-100 rounded-lg text-sm text-indigo-900 text-center">
|
|
{degreeType === 'even' && lcSign === 'pos' && "Ends go in the SAME direction (UP)."}
|
|
{degreeType === 'even' && lcSign === 'neg' && "Ends go in the SAME direction (DOWN)."}
|
|
{degreeType === 'odd' && lcSign === 'pos' && "Ends go in OPPOSITE directions (Down Left, Up Right)."}
|
|
{degreeType === 'odd' && lcSign === 'neg' && "Ends go in OPPOSITE directions (Up Left, Down Right)."}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PolynomialBehaviorWidget; |