Card Data - JS + CSS
Card Data
Contoh Penggunaan
Section titled “Contoh Penggunaan”Title
9.778.392
20.294 subtext
<div class="ina-card-plain w-full max-w-sm">
<div class="flex flex-row justify-between w-full">
<div class="flex flex-col">
<h1 class="text-sm md:text-base font-medium text-content-secondary">Title</h1>
<p class="text-2xl md:text-4xl font-semibold text-content-primary">9.778.392</p>
<p class="text-sm md:text-base font-medium text-positive-500 flex flex-row gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="inline"
>
<path d="M3 17l6 -6l4 4l8 -8"></path>
<path d="M14 7l7 0l0 7"></path>
</svg>
20.294
<span class="text-sm md:text-base font-medium text-content-secondary">subtext</span>
</p>
</div>
<div class="w-12 h-12 rounded-full bg-background-tertiary flex items-center justify-center">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="text-content-primary"
>
<path d="M4 19l16 0"></path>
<path d="M4 15l2 0"></path>
<path d="M10 15l2 0"></path>
<path d="M16 15l2 0"></path>
<path d="M4 11l6 0"></path>
<path d="M16 11l2 0"></path>
<path d="M4 7l10 0"></path>
</svg>
</div>
</div>
<div class="flex-1 w-full h-full min-h-0 pt-2" id="cardDataChartContainer">
<!-- ApexCharts container in Vanilla JS -->
</div>
</div>
<script is:inline src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script is:inline>
document.addEventListener('DOMContentLoaded', function () {
var options = {
series: [
{
name: 'Total Transaksi',
data: [65, 70],
},
],
chart: {
type: 'area',
height: '100%',
toolbar: { show: false },
zoom: { enabled: false },
},
stroke: {
curve: 'smooth',
width: 2,
},
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0.05,
stops: [0, 90, 100],
},
},
dataLabels: {
enabled: false,
},
grid: {
strokeDashArray: 4,
padding: {
left: 8,
right: 8,
},
},
xaxis: {
categories: ['W1', 'W2'],
axisBorder: { show: false },
axisTicks: { show: false },
labels: {
show: false,
},
},
yaxis: {
labels: {
show: false,
},
},
tooltip: {
enabled: false,
},
};
var chartContainer = document.querySelector('#cardDataChartContainer');
if (chartContainer && typeof ApexCharts !== 'undefined') {
var chart = new ApexCharts(chartContainer, options);
chart.render();
}
});
</script>