|
@@ -1,6 +1,6 @@
|
|
|
<script>
|
|
<script>
|
|
|
import { onMount } from 'svelte';
|
|
import { onMount } from 'svelte';
|
|
|
- import { Chart, ArcElement, Tooltip, Legend, Title, DoughnutController } from 'chart.js';
|
|
|
|
|
|
|
+ import { ArcElement, Chart, DoughnutController, Legend, Title, Tooltip } from 'chart.js';
|
|
|
|
|
|
|
|
export let data = {};
|
|
export let data = {};
|
|
|
|
|
|
|
@@ -24,35 +24,40 @@
|
|
|
'#FF4500', '#8A2BE2', '#A52A2A', '#DEB887', '#5F9EA0'
|
|
'#FF4500', '#8A2BE2', '#A52A2A', '#DEB887', '#5F9EA0'
|
|
|
],
|
|
],
|
|
|
borderColor: '#fff',
|
|
borderColor: '#fff',
|
|
|
- borderWidth: 1,
|
|
|
|
|
- }],
|
|
|
|
|
|
|
+ borderWidth: 1
|
|
|
|
|
+ }]
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const chartOptions = {
|
|
const chartOptions = {
|
|
|
responsive: true,
|
|
responsive: true,
|
|
|
plugins: {
|
|
plugins: {
|
|
|
legend: {
|
|
legend: {
|
|
|
- position: 'top',
|
|
|
|
|
|
|
+ position: 'top'
|
|
|
},
|
|
},
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
callbacks: {
|
|
callbacks: {
|
|
|
label: function(tooltipItem) {
|
|
label: function(tooltipItem) {
|
|
|
return `${tooltipItem.label}: $${tooltipItem.raw.toFixed(2)}`;
|
|
return `${tooltipItem.label}: $${tooltipItem.raw.toFixed(2)}`;
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
new Chart(chartContainer, {
|
|
new Chart(chartContainer, {
|
|
|
type: 'doughnut',
|
|
type: 'doughnut',
|
|
|
data: chartData,
|
|
data: chartData,
|
|
|
- options: chartOptions,
|
|
|
|
|
|
|
+ options: chartOptions
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
|
});
|
|
});
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<div>
|
|
<div>
|
|
|
- <canvas bind:this={chartContainer}></canvas>
|
|
|
|
|
|
|
+ {#if data.stocks.length > 0}
|
|
|
|
|
+ <canvas bind:this={chartContainer}></canvas>
|
|
|
|
|
+ {:else}
|
|
|
|
|
+ <p>No insights available.</p>
|
|
|
|
|
+ {/if}
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|