Card Data - JS + CSS

Card Data

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>