tabler/preview/pages/charts.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Activity from '@shared/components/parts/charts/Activity.astro'
import SocialReferrals from '@shared/components/cards/charts/SocialReferrals.astro'
import Chart from '@ui/Chart.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import chartsData from '@data/charts.json'
import { capitalize } from '@shared/lib/string-format'

const demoCharts = Object.entries(chartsData as Record<string, { demo?: boolean; name?: string }>).filter(([, chart]) => chart && chart.demo)
---

<DefaultLayout title="Charts" pageHeader="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
  <div class="row row-cards">
    <div class="col-lg-12">
      <Activity />
    </div>

    <div class="col-12">
      <SocialReferrals />
    </div>

    <div class="col-12">
      <Card>
        <CardBody>
          <Chart chartId="tasks-overview" height={20} label="Tasks overview" />
        </CardBody>
      </Card>
    </div>

    {
      demoCharts.map(([chartId, chart]) => (
        <div class="col-lg-6 col-xl-4">
          <Card>
            {chart.name && <CardHeader title={chart.name} />}
            <CardBody>
              <Chart chartId={chartId} height={15} label={chart.name ?? capitalize(chartId.replace(/-/g, ' '))} />
            </CardBody>
          </Card>
        </div>
      ))
    }
  </div>
</DefaultLayout>