Philip
e045354892
Adds initial project structure, dependencies, and basic configuration for the License Tracker Pro v1.2 application. This includes setting up Vite for the build process, defining core types, and incorporating essential UI components like icons and a timeline. The project is now ready for development.
43 lines
2.1 KiB
TypeScript
43 lines
2.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
import { License } from '../types';
|
|
|
|
interface PriceHistoryChartProps {
|
|
license: License;
|
|
}
|
|
|
|
const formatCurrency = (value: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }).format(value);
|
|
|
|
const PriceHistoryChart: React.FC<PriceHistoryChartProps> = ({ license }) => {
|
|
const data = [
|
|
{ date: new Date(license.purchaseDate), price: license.purchasePrice },
|
|
...(license.renewals || []).map(r => ({ date: new Date(r.renewalDate), price: r.renewalPrice }))
|
|
]
|
|
.map(i => ({ ...i, time: i.date.getTime(), str: i.date.toLocaleDateString() }))
|
|
.filter(i => !isNaN(i.time))
|
|
.sort((a, b) => a.time - b.time);
|
|
|
|
if (data.length < 2) {
|
|
return <div className="flex items-center justify-center h-32 text-xs text-gray-500 bg-slate-900/30 rounded">No price history</div>;
|
|
}
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={160}>
|
|
<LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#334155" />
|
|
<XAxis dataKey="time" type="number" domain={['dataMin', 'dataMax']} tickFormatter={(t) => new Date(t).toLocaleDateString(undefined, {month:'short', year:'2-digit'})} stroke="#9ca3af" tick={{fontSize: 10}} />
|
|
<YAxis stroke="#9ca3af" tick={{fontSize: 10}} tickFormatter={(v) => `$${v}`} width={40} />
|
|
<Tooltip
|
|
contentStyle={{ backgroundColor: '#1e293b', borderColor: '#475569', color: '#f1f5f9' }}
|
|
labelFormatter={(l) => new Date(l).toLocaleDateString()}
|
|
formatter={(val: number) => [formatCurrency(val), 'Price']}
|
|
/>
|
|
<Line type="monotone" dataKey="price" stroke="#22d3ee" strokeWidth={2} dot={{r:3}} activeDot={{r:5}} />
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default PriceHistoryChart;
|