CORE_V5 // partials

PATH: home / rwabteecom / project_11 / resources / views / dashboard / partials /

Editing: analytics.blade.php

$fromDate = request('from', $startOfMonth);
    $toDate = request('to', $today);
@endphp

const fromDate = "{{ $fromDate }}";
  const toDate = "{{ $toDate }}";

$(".datepicker").flatpickr({
      mode: "range",
      defaultDate: [fromDate, toDate]
  });

$("input[name='analytics-range']").on("change" , function(){
    let dater = $(this).val().split(" to ");
    if(dater.length > 1){
      $("input[name='from']").val(dater[0]);
      $("input[name='to']").val(dater[1]);
      $("#date-form").submit();
    }
    
  })

// ---------------------
const ViewsClicksData = {
  labels: @json($days), // Your labels for the X-axis
  datasets: [
    {
      label: 'Clicks',
      borderColor: 'rgba(255, 130, 172, 1)', // Line color
      backgroundColor: 'rgba(255, 130, 172, 0.2)', // Area under the line (optional)
      pointBackgroundColor: 'rgba(255, 130, 172, 1)', // Dot color
      pointBorderColor: '#fff',
      borderWidth: 3,
      fill: false,
      data: @json($analytics_day)
    },
    {
      label: 'Visits',
      borderColor: 'rgba(22, 219, 204, 1)', // Line color
      backgroundColor: 'rgba(22, 219, 204, 0.2)', // Area under the line (optional)
      pointBackgroundColor: 'rgba(22, 219, 204, 1)', // Dot color
      pointBorderColor: '#fff',
      borderWidth: 3,
      fill: false, // Ensures the area under the line is not filled
      data: @json($analytics_day_view) // Your data for the 'Visits'
    }
  ]
};

// Configuration for the ViewsClicksconfig chart
const ViewsClicksconfig = {
  type: 'line',
  data: ViewsClicksData,
  options: {
    indexAxis: 'x', // Days of the week on X-axis
    scales: {
      x: {
        title: {
          display: false,
          text: 'Days of the Week'
        },
        ticks: {
          font: {
            color: 'rgba(113, 142, 191,1)' // Adjust font color
          }
        },
      },
      y: {
        title: {
          display: false,
          text: 'Values'
        },
        ticks: {
          font: {
            color: 'rgba(113, 142, 191,1)' // Adjust font color
          }
        },
      }
    },
    plugins: {
      // title: {
      //   display: true,
      //   text: 'Weekly User Activity'
      // },
      legend: {
        display: true,
        position: 'top',
        align: 'end',
        labels: {
          boxWidth: 12,
          boxHeight: 12,
          padding: 20,
          pointStyle: 'circle',
          usePointStyle: true,
          color: 'rgba(113, 142, 191, 1)',
          font: {
            size: 16,
          }
        }
      }
    },
    responsive: true,
  },
};

// Create the chart
const myChart = new Chart(
  document.getElementById('ViewsClicksChart'),
  ViewsClicksconfig
);
// ---------------------------------

const linksData = {
  labels: @json($links->pluck('title')),
  datasets: [{
    label: '',
    data: @json($links->pluck('analytics_count')),
    borderWidth: 0,
    hoverOffset: 4,
    cutout: 60
  }]
};

const linksconfig = {
  type: 'doughnut',
  data: linksData,
  plugins: [
    {
      beforeDraw: function (chart) {
        const datasetMeta = chart.getDatasetMeta(0);
        const innerRadius = datasetMeta.controller.innerRadius;
        const outerRadius = datasetMeta.controller.outerRadius;
        const heightOfItem = outerRadius - innerRadius;

const countOfData = chart.getDatasetMeta(0).data.length;
        const additionalRadius = Math.floor(heightOfItem / countOfData);

const weightsMap = datasetMeta.data
          .map(v => v.circumference)
          .sort((a, b) => a - b)
          .reduce((a, c, ci) => {
            a.set(c, ci + 1);
            return a;
          }, new Map());

datasetMeta.data.forEach(dataItem => {
          let weight = weightsMap.get(dataItem.circumference);
          // if (weight % 2 !== 0) {
          //   weight = weight + .3
          // }
          dataItem.outerRadius = innerRadius + additionalRadius * weight;
        });
      }
    }
  ],
  options: {
    layout: {
      padding: 10,
    },

plugins: {
      legend: {
        display: true,
        align: 'center',
        labels: {
          boxWidth: 19,
          boxHeight: 19,
          padding: 30,
          pointStyle: 'circle',
          usePointStyle: true,
          color: 'rgba(113, 142, 191, 1)',
          font: {
            size: 16,
          }
        },
      },
      tooltip: {
        callbacks: {
          label: function (context) {
            return context.label + ': ' + context.parsed + ' views'; // Display label and value
          }
        }
      }
    },

maintainAspectRatio: false,
    responsive: true,
  }
};

const linksChart = new Chart(
  document.getElementById('linksChart'),
  linksconfig
);

// -----------------------------
// socialLinksData chart

const socialLinksData = {
  labels: @json($socials->pluck('socialLink.title')),
  datasets: [{
    label: '',
    data: @json($socials->pluck('analytics_count')),
    borderWidth: 0,
    // backgroundColor: [
    //   'rgb(22, 219, 204)',
    //   'rgb(255, 130, 172)',
    //   'rgb(255, 187, 56)',
    //   'rgb(76, 120, 255)',
    // ],
    hoverOffset: 4,
    cutout: 60
  }]
};

const socialLinksconfig = {
  type: 'doughnut',
  data: socialLinksData,
  plugins: [
    {
      beforeDraw: function (chart) {
        const datasetMeta = chart.getDatasetMeta(0);
        const innerRadius = datasetMeta.controller.innerRadius;
        const outerRadius = datasetMeta.controller.outerRadius;
        const heightOfItem = outerRadius - innerRadius;

const countOfData = chart.getDatasetMeta(0).data.length;
        const additionalRadius = Math.floor(heightOfItem / countOfData);

maintainAspectRatio: false,
    responsive: true,
  }
};

// Create the chart
const socialLinksChart = new Chart(
  document.getElementById('socialLinks'),
  socialLinksconfig
);

</script>

CANCEL