sfp_vue_franchisor_ginastica_cerebro/src/components/charts/mini/MiniBarChart.vue

<template>
  <Bar
    :id="props.id"
    ref="chart_ref"
    :options="chartOptions"
    :data="computedChartData"
  />
</template>

<script setup>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Tooltip,
} from "chart.js";
import { computed, useTemplateRef } from "vue";
import { Bar } from "vue-chartjs";

// Register only necessary components
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Tooltip,
);

const chart_ref = useTemplateRef(null);

// Simplified props focusing on essential functionality
const props = defineProps({
  // Core data props
  data: {
    type: Array,
    required: true,
  },

  // Essential styling
  barColor: {
    type: String,
    default: "#1976D2",
  },

  // Optional configurations for flexibility
  horizontal: {
    type: Boolean,
    default: false,
  },
  showTooltip: {
    type: Boolean,
    default: true,
  }
});

// Optimized chart options for mini-charts
const chartOptions = computed(() => ({
  responsive: true,
  maintainAspectRatio: false,
  indexAxis: props.horizontal ? "y" : "x",

  plugins: {
    legend: {
      display: false, // Always hide legend in mini charts
    },
    tooltip: {
      enabled: props.showTooltip,
      displayColors: false,
      callbacks: {
        label: (context) => `${context.raw}`
      }
    },
  },

  scales: {
    x: {
      display: false,
      grid: {
        display: false,
      }
    },
    y: {
      display: false,
      grid: {
        display: false,
      },
      beginAtZero: true,
    },
  },

  animation: {
    duration: 750,
    easing: 'easeOutQuad',
  },
}));

// Simplified data computation
const computedChartData = computed(() => ({
  labels: Array(props.data.length).fill(''),
  datasets: [{
    data: props.data,
    backgroundColor: props.barColor,
    borderRadius: 2,
    barThickness: 8,
    maxBarThickness: 10,
  }]
}));

// Expose essential methods
defineExpose({
  chart_ref,
});
</script>