| svelte | |
| <script> | |
| import { onMount } from 'svelte'; | |
| import { Chart } from 'chart.js/auto'; | |
| let chart; | |
| let canvas; | |
| onMount(() => { | |
| if (canvas) { | |
| chart = new Chart(canvas, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | |
| datasets: [{ | |
| label: 'Profit/Loss', | |
| data: [4000000, 6000000, 8000000, 5500000, 6500000, 8000000, 9000000, 10000000, 8500000, 9500000, 10000000, 11000000], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.1)', | |
| fill: true, | |
| tension: 0.3, | |
| pointRadius: 4, | |
| pointBackgroundColor: '#3B82F6' | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return `Profit: Rp ${context.raw.toLocaleString()}`; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return `Rp ${value.toLocaleString()}`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| return () => { | |
| if (chart) { | |
| chart.destroy(); | |
| } | |
| }; | |
| }); | |
| </script> | |
| <div> | |
| <h2 class="text-lg font-semibold text-slate-900 mb-4">Profit Trend</h2> | |
| <canvas bind:this={canvas}></canvas> | |
| </div> | |
| </html> |