<ContentPanel @title={{t "developers.component.widget.api-metrics.title"}} @open={{or @open true}} @pad={{or @pad false}} @panelBodyClass="bg-white dark:bg-gray-800">
    <div class="grid grid-cols-1 md:grid-cols-2">
        <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-requests"}}</h4>
            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiRequestData}} @options={{this.chartOptions}} />
        </div>
        <div class="w-full border-b border-gray-200 dark:border-gray-900">
            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.api-error"}}</h4>
            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.apiErrorDistributionData}} @options={{this.chartOptions}} />
        </div>
        <div class="w-full border-b border-r border-gray-200 dark:border-gray-900">
            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks"}}</h4>
            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestData}} @options={{this.chartOptions}} />
        </div>
        <div class="w-full border-b border-gray-200 dark:border-gray-900">
            <h4 class="my-3 text-sm font-semibold mx-5">{{t "developers.component.widget.api-metrics.webhooks-response"}}</h4>
            <Chart @type="line" @labels={{this.chartLabels}} @datasets={{this.webhookRequestTimingData}} @options={{this.chartOptions}} />
        </div>
    </div>
</ContentPanel>