initial commit

resources/js/Components/Charts/LineChart.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue'
+import {
+  Chart,
+  LineElement,
+  PointElement,
+  LineController,
+  LinearScale,
+  CategoryScale,
+  Tooltip
+} from 'chart.js'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  }
+})
+
+const root = ref(null)
+
+let chart
+
+Chart.register(LineElement, PointElement, LineController, LinearScale, CategoryScale, Tooltip)
+
+onMounted(() => {
+  chart = new Chart(root.value, {
+    type: 'line',
+    data: props.data,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        y: {
+          display: false
+        },
+        x: {
+          display: true
+        }
+      },
+      plugins: {
+        legend: {
+          display: false
+        }
+      }
+    }
+  })
+})
+
+const chartData = computed(() => props.data)
+
+watch(chartData, data => {
+  if (chart) {
+    chart.data = data
+    chart.update()
+  }
+})
+</script>
+
+<template>
+  <canvas ref="root" />
+</template>

resources/js/Components/Charts/chart.config.js

@@ -0,0 +1,54 @@
+export const chartColors = {
+  default: {
+    primary: '#00D1B2',
+    info: '#209CEE',
+    danger: '#FF3860'
+  }
+}
+
+const randomChartData = n => {
+  const data = []
+
+  for (let i = 0; i < n; i++) {
+    data.push(Math.round(Math.random() * 200))
+  }
+
+  return data
+}
+
+const datasetObject = (color, points) => {
+  return {
+    fill: false,
+    borderColor: chartColors.default[color],
+    borderWidth: 2,
+    borderDash: [],
+    borderDashOffset: 0.0,
+    pointBackgroundColor: chartColors.default[color],
+    pointBorderColor: 'rgba(255,255,255,0)',
+    pointHoverBackgroundColor: chartColors.default[color],
+    pointBorderWidth: 20,
+    pointHoverRadius: 4,
+    pointHoverBorderWidth: 15,
+    pointRadius: 4,
+    data: randomChartData(points),
+    tension: 0.5,
+    cubicInterpolationMode: 'default'
+  }
+}
+
+export const sampleChartData = (points = 9) => {
+  const labels = []
+
+  for (let i = 1; i <= points; i++) {
+    labels.push(`0${i}`)
+  }
+
+  return {
+    labels,
+    datasets: [
+      datasetObject('primary', points),
+      datasetObject('info', points),
+      datasetObject('danger', points)
+    ]
+  }
+}