<template>
  <q-card class="panel-card panel-card--soft" flat>
    <div class="panel-title">Evolução do Faturamento Bruto</div>

    <div class="line-chart-wrap">
      <Line :data="chartData" :options="chartOptions" />
    </div>
  </q-card>
</template>

<script setup>
import { Line } from "vue-chartjs";

defineProps({
  chartData: {
    type: Object,
    required: true,
  },
  chartOptions: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped lang="scss">
.panel-card {
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #d9e3e7;
  min-height: 300px;
  vertical-align: middle;
}

.panel-title {
  margin-bottom: 16px;
  font-size: 19px;
  font-weight: 400;
  color: #08514c;
}

.panel-card--soft {
  background: #f0f3f5;
}

.line-chart-wrap {
  height: 235px;
  vertical-align: middle;
}

@media (max-width: 640px) {
  .line-chart-wrap {
    height: 220px;
  }
}
</style>
