panel/resources/js/components/ProjectActivityBarChart.vue

<template>
  <VCard
    class="overflow-visible position-relative"
    :style="cardBackgroundStyle"
    elevation="8"
  >
    <!-- Decorative elements -->
    <div class="position-absolute decorative-circle-1"></div>
    <div class="position-absolute decorative-circle-2"></div>
    <div class="position-absolute decorative-dots"></div>
    
    <VCardItem class="pb-4">
      <div class="d-flex align-center justify-space-between">
        <div>
          <VCardTitle class="text-h5 font-weight-bold mb-1">
            <VIcon icon="mdi-chart-line" class="me-2 text-primary"></VIcon>
            Active Projects Progress
          </VCardTitle>
          <VCardSubtitle class="text-subtitle-1 opacity-80">This Week Overview</VCardSubtitle>
        </div>
        <VChip
          :color="changePercent >= 0 ? 'success' : 'error'"
          variant="tonal"
          size="small"
          class="font-weight-bold"
        >
          {{ formattedChange }}
        </VChip>
      </div>
    </VCardItem>

    <VCardText class="pb-2">
      <!-- Progress Summary -->
      <div class="progress-summary-card mb-6">
        <div class="d-flex align-center justify-center mb-2">
          <div class="progress-circle">
            <h2 class="text-h2 font-weight-bold text-primary mb-0">{{ totalProgress }}%</h2>
          </div>
        </div>
        <p class="text-center text-subtitle-2 mb-0 opacity-80">Average Progress</p>
      </div>

      <VueApexCharts 
        :options="chartOptions" 
        :series="series" 
        :height="330" 
        width="100%"
        class="enhanced-chart"
      />
      
      <!-- Project Stats -->
      <!-- <div class="project-stats mt-4">
        <div class="d-flex justify-space-between align-center mb-2">
          <span class="text-subtitle-2 opacity-80">Projects Status</span>
          <VChip size="x-small" color="primary" variant="text">
            {{ values.length }} Total
          </VChip>
        </div>
        <div class="d-flex flex-wrap gap-2">
          <VChip
            v-for="(value, index) in values"
            :key="index"
            :color="getProjectStatusColor(value)"
            variant="tonal"
            size="small"
            class="font-weight-medium"
          >
            {{ labels[index] }}: {{ value }}%
          </VChip>
        </div>
      </div> -->
    </VCardText>
  </VCard>
</template>

<script setup>
import { computed } from 'vue'
import { useTheme } from 'vuetify'
import { hexToRgb } from '@layouts/utils'
import VueApexCharts from 'vue3-apexcharts'

const vuetifyTheme = useTheme()

const labels = [
  'Project Alpha',
  'Project Beta',
  'Project Gamma',
  'Project Delta',
  'Project Epsilon',
]
const values = [45, 70, 30, 85, 55]

const series = [
  {
    name: 'Progress Percentage',
    data: values,
  },
]

const totalProgress = computed(() =>
  Math.round(values.reduce((sum, v) => sum + v, 0) / values.length)
)

const changePercent = computed(() => {
  const last = values[values.length - 1]
  const prev = values[values.length - 2] ?? last
  return prev === 0 ? 0 : ((last - prev) / prev) * 100
})

const formattedChange = computed(() => {
  const sign = changePercent.value >= 0 ? '+' : ''
  return `${sign}${changePercent.value.toFixed(1)}%`
})

const getProjectStatusColor = (value) => {
  if (value >= 80) return 'success'
  if (value >= 60) return 'warning'
  if (value >= 40) return 'info'
  return 'error'
}

const cardBackgroundStyle = computed(() => {
  const currentTheme = vuetifyTheme.current.value.colors
  const primaryColor = currentTheme.primary

  const createGradientColor = (color, opacity = 0.08) => {
    if (color.includes('rgba')) {
      return color.replace(/[\d\.]+\)$/g, `${opacity})`)
    }
    if (color.startsWith('#')) {
      return `rgba(${hexToRgb(color)}, ${opacity})`
    }
    if (color.includes('rgb')) {
      return color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)
    }
    return `rgba(${hexToRgb(color)}, ${opacity})`
  }

  const gradientColor1 = createGradientColor(primaryColor, 0.15)
  const gradientColor2 = createGradientColor(primaryColor, 0.02)
  const gradientColor3 = createGradientColor(primaryColor, 0.08)

  return {
    background: `linear-gradient(135deg, 
      ${gradientColor1} 0%, 
      ${gradientColor2} 25%,
      ${gradientColor3} 50%,
      ${gradientColor2} 75%,
      ${gradientColor1} 100%)`,
    backdropFilter: 'blur(10px)',
    border: `1px solid ${createGradientColor(primaryColor, 0.2)}`
  }
})

const chartOptions = computed(() => ({
  chart: {
    type: 'bar',
    parentHeightOffset: 0,
    toolbar: { show: false },
    background: 'transparent',
    animations: {
      enabled: true,
      easing: 'easeinout',
      speed: 800,
      animateGradually: {
        enabled: true,
        delay: 150
      },
      dynamicAnimation: {
        enabled: true,
        speed: 350
      }
    }
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: "35%",
      borderRadius: 20,
      borderRadiusApplication: 'end',
      borderRadiusWhenStacked: 'last',
      dataLabels: {
        position: 'top'
      }
    },
  },
  colors: ['rgba(var(--v-theme-primary), 1)'],
  grid: {
    show: true,
    borderColor: 'rgba(var(--v-theme-on-surface), 0.08)',
    strokeDashArray: 3,
    position: 'back',
    xaxis: {
      lines: {
        show: false
      }
    },
    yaxis: {
      lines: {
        show: true
      }
    },
    row: {
      colors: undefined,
      opacity: 0.5
    },
    column: {
      colors: undefined,
      opacity: 0.5
    },
    padding: {
      top: 0,
      right: 10,
      bottom: 0,
      left: 10
    }
  },
  dataLabels: {
    enabled: true,
    offsetY: -20,
    style: {
      fontSize: '12px',
      fontWeight: 'bold',
      colors: ['rgba(var(--v-theme-primary), 1)']
    },
    formatter: function (val) {
      return val + '%'
    }
  },
  legend: { show: false },
  tooltip: {
    enabled: true,
    theme: 'dark',
    style: {
      fontSize: '12px',
      fontFamily: 'Arial, sans-serif'
    },
    y: {
      formatter: function (val) {
        return val + '%'
      }
    },
    marker: {
      show: true
    }
  },
  xaxis: {
    categories: labels,
    axisBorder: { 
      show: true,
      color: 'rgba(var(--v-theme-on-surface), 0.12)'
    },
    axisTicks: { 
      show: true,
      color: 'rgba(var(--v-theme-on-surface), 0.12)'
    },
    labels: {
      show: true,
      rotate: -45,
      rotateAlways: false,
      hideOverlappingLabels: true,
      showDuplicates: false,
      trim: false,
      style: {
        fontSize: '12px',
        fontWeight: '500',
        colors: 'rgba(var(--v-theme-on-surface), 0.7)',
        fontFamily: 'Arial, sans-serif',
      },
    },
  },
  yaxis: {
    labels: { 
      show: true,
      style: {
        fontSize: '11px',
        colors: 'rgba(var(--v-theme-on-surface), 0.6)',
        fontFamily: 'Arial, sans-serif',
      },
      formatter: function (val) {
        return val + '%'
      }
    },
    min: 0,
    max: 100
  },
  responsive: [
    {
      breakpoint: 1441,
      options: {
        plotOptions: {
          bar: { 
            columnWidth: '45%', 
            borderRadius: 18,
          },
        },
      },
    },
    {
      breakpoint: 1368,
      options: {
        plotOptions: { 
          bar: { 
            columnWidth: '40%',
            borderRadius: 16,
          } 
        },
      },
    },
    {
      breakpoint: 1264,
      options: {
        plotOptions: {
          bar: {
            columnWidth: '35%',
            borderRadius: 20,
          },
        },
      },
    },
    {
      breakpoint: 960,
      options: {
        plotOptions: {
          bar: { 
            columnWidth: '30%', 
            borderRadius: 18,
          },
        },
      },
    },
    {
      breakpoint: 883,
      options: { 
        plotOptions: { 
          bar: { 
            columnWidth: '35%',
            borderRadius: 16,
          } 
        } 
      },
    },
    {
      breakpoint: 768,
      options: { 
        plotOptions: { 
          bar: { 
            columnWidth: '40%',
            borderRadius: 14,
          } 
        },
        dataLabels: {
          offsetY: -15
        }
      },
    },
    {
      breakpoint: 600,
      options: {
        plotOptions: {
          bar: { 
            columnWidth: '45%', 
            borderRadius: 16,
          },
        },
        dataLabels: {
          enabled: false
        }
      },
    },
    {
      breakpoint: 479,
      options: {
        plotOptions: {
          bar: { 
            borderRadius: 12,
          },
        },
        grid: {
          padding: { right: 5, left: 5, bottom: 10 },
        },
        dataLabels: {
          enabled: false
        }
      },
    },
    {
      breakpoint: 400,
      options: { 
        plotOptions: { 
          bar: { 
            borderRadius: 10,
          } 
        },
        xaxis: {
          labels: {
            rotate: -90
          }
        }
      },
    },
  ],
}))
</script>

<style scoped>
.decorative-circle-1 {
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(var(--v-theme-primary), 0.1) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.decorative-circle-2 {
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(var(--v-theme-secondary), 0.08) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
}

.decorative-dots {
  top: 50%;
  right: 20px;
  width: 6px;
  height: 40px;
  background-image: radial-gradient(circle, rgba(var(--v-theme-primary), 0.3) 1px, transparent 1px);
  background-size: 6px 8px;
  z-index: 0;
}

.progress-summary-card {
  background: rgba(var(--v-theme-surface), 0.6);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--v-theme-primary), 0.1);
  position: relative;
  overflow: hidden;
}

.progress-summary-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    rgba(var(--v-theme-primary), 0.3) 0%, 
    rgba(var(--v-theme-primary), 0.8) 50%, 
    rgba(var(--v-theme-primary), 0.3) 100%);
}

.progress-circle {
  position: relative;
  display: inline-block;
  padding: 10px;
}

.progress-circle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: 3px solid rgba(var(--v-theme-primary), 0.2);
  border-radius: 50%;
  z-index: -1;
}

.project-stats {
  background: rgba(var(--v-theme-surface), 0.4);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
}

.enhanced-chart {
  position: relative;
  z-index: 1;
}

/* Hover effects */
.v-card:hover {
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v-card:hover .decorative-circle-1 {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.v-card:hover .decorative-circle-2 {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
</style>