#20 - add pages for every tab

package.json

@@ -15,6 +15,9 @@
         "@tailwindcss/typography": "^0.5.10",
         "laravel-vite-plugin": "^1.0.2",
         "lodash": "^4.17.21",
+        "moment": "^2.30.1",
+        "papaparse": "^5.4.1",
+        "pinia": "^2.1.7",
         "tailwindcss": "^3.4.1",
         "vue": "^3.4.21"
     },

resources/css/app.css

@@ -1,3 +1,5 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+

resources/data/sampleData.json

@@ -0,0 +1,3 @@
+{
+    "sample": "Date,Product,SKU,Quantity,Unit Type,Price Per Unit ($),Multiplier,Owner,Repository Slug,Username,Actions Workflow,Notes\n2022-05-20,Actions,Compute - UBUNTU,2,minute,0.008,1.0,galaxy,trantor,octocat,.github/workflows/check-pr.yml,\n2022-05-20,Actions,Compute - UBUNTU,9,minute,0.008,1.0,galaxy,caprica,octocat,.github/workflows/check-pr.yml,\n2022-05-20,Actions,Compute - UBUNTU,8,minute,0.008,1.0,galaxy,mustafar,octocat,.github/workflows/test.yml,\n2022-05-20,Actions,Compute - UBUNTU,9,minute,0.008,1.0,galaxy,caprica,octocat,.github/workflows/lint.yml,\n2022-05-20,Actions,Compute - UBUNTU,3,minute,0.008,1.0,galaxy,trantor,octocat,.github/workflows/behat.yml,\n2022-05-20,Actions,Compute - UBUNTU,3,minute,0.008,1.0,galaxy,mustafar,octocat,.github/workflows/check-pr.yml,\n2022-05-20,Actions,Compute - UBUNTU,2,minute,0.008,1.0,galaxy,trantor,octocat,.github/workflows/behat.yml,\n2022-05-20,Actions,Compute - UBUNTU,15,minute,0.008,1.0,galaxy,caprica,octocat,.github/workflows/lint.yml,\n2022-05-20,Actions,Compute - WINDOWS,7,minute,0.016,1.0,galaxy,mustafar,octocat,.github/workflows/test-windows.yml,\n2022-05-20,Actions,Compute - UBUNTU,11,minute,0.008,1.0,galaxy,caprica,octocat,.github/workflows/check-pr.yml,\n2022-05-20,Actions,Compute - UBUNTU,2,minute,0.008,1.0,galaxy,mustafar,octocat,.github/workflows/test.yml,\n2022-05-20,Actions,Compute - UBUNTU,1,minute,0.008,1.0,galaxy,trantor,dependabot[bot],.github/workflows/check-pr.yml,\n2022-05-20,Actions,Compute - UBUNTU,7,minute,0.008,1.0,galaxy,trantor,octocat,.github/workflows/behat.yml,"
+}

resources/js/Pages/Authors.vue

@@ -0,0 +1,165 @@
+<script setup>
+import Papa from 'papaparse'
+import moment from 'moment'
+import { computed, ref, watch } from 'vue'
+import { useLogsStore } from '@/Stores/logsStore'
+import { Head } from '@inertiajs/vue3'
+
+const logsStore = useLogsStore()
+const logs = computed(() => logsStore.getLogs)
+
+const colors = [
+  'bg-gray-400',
+  'bg-blue-400',
+  'bg-red-400',
+  'bg-green-400',
+  'bg-yellow-400',
+  'bg-indigo-400',
+  'bg-purple-400',
+  'bg-pink-400',
+] 
+
+var tables = ref({
+  logs: {
+    items: [],
+    sort: 'date',
+    order: 'asc',
+  },      
+})
+var dictionaries = ref({
+  authors: {},
+  repositories: {},
+})
+
+function parseLineToLog (line) {
+  const repository = {
+    slug: line[7] + '/' + line[8],
+    name: line[8],
+    namespace: line[7] ? line[7] : 'unknown',
+    color: colors[repositories.value.length % colors.length],
+  }
+
+  if (!dictionaries.value.repositories[repository.name]) {
+    dictionaries.value.repositories[repository.name] = repository
+    dictionaries.value.repositories = JSON.parse(JSON.stringify(dictionaries.value.repositories))
+  } else {
+    repository.color = dictionaries.value.repositories[repository.name].color
+  }
+
+  let author = line[9]
+  if (author === 'dependabot[bot]') {
+    author = 'dependabot'
+  }
+
+  if (!dictionaries.value.authors[author]) {
+    dictionaries.value.authors[author] = author
+    dictionaries.value.authors = JSON.parse(JSON.stringify(dictionaries.value.authors))
+  }
+
+  return {
+    date: line[0],
+    dateForHumans: moment(line[0]).fromNow(),
+    product: line[1],
+    repository: repository,
+    slug: repository.slug,
+    quantity: parseInt(line[3]),
+    unit: line[2].replace('Compute - ', '').toLowerCase(),
+    price: line[5],
+    total: (line[3] * line[5]).toFixed(3),
+    author: author,
+    workflow: line[10],
+    notes: line[11],
+  }
+}
+
+function quantityPerAuthor (author) {
+  return tables.value.logs.items.filter(log => log.author === author).reduce((a, b) => a + parseInt(b.quantity), 0)
+}
+function pricePerAuthor (author) {
+  return tables.value.logs.items.filter(log => log.author === author).reduce((a, b) => a + parseFloat(b.total), 0).toFixed(3)
+}
+
+const sortedLogs = computed(() => {
+  let data = tables.value.logs.items
+
+  if (tables.value.logs.sort) {
+    data = data.sort((a, b) => {
+      if (!isNaN(a[tables.value.logs.sort]) && !isNaN(b[tables.value.logs.sort])) {
+        return a[tables.value.logs.sort] > b[tables.value.logs.sort] ? 1 : -1
+      }
+
+      return b[tables.value.logs.sort] > a[tables.value.logs.sort] ? 1 : -1
+    })
+  }
+
+  if (tables.value.logs.order === 'desc') {
+    data = data.reverse()
+  }
+
+  return data
+})
+
+const repositories = computed(() => {
+  return Object.values(dictionaries.value.repositories).sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1)
+})
+
+const authors = computed(() => {
+  return Object.values(dictionaries.value.authors).sort((a, b) => a.toLowerCase() > b.toLowerCase() ? 1 : -1)
+})
+
+const totalQuantity = computed(() => {
+  return tables.value.logs.items.reduce((a, b) => a + parseInt(b.quantity), 0)
+})
+
+const totalPrice = computed(() => {
+  return tables.value.logs.items.reduce((a, b) => a + parseFloat(b.total), 0).toFixed(3)
+})
+
+parseLogs()
+
+watch (logs, () => {
+  parseLogs()
+}) 
+
+function parseLogs(){
+  const data = Papa.parse(logs.value)
+  const parsedData = data.data
+
+  var parsed = parsedData.slice(1,-1).map((line) => parseLineToLog(line))
+  tables.value.logs.items = parsed 
+}
+
+</script>
+
+<template>
+  <Head>
+    <title>Authors</title>
+  </Head>
+  <table v-if="sortedLogs.length > 0" class="w-full border-collapse border table-fixed mt-4 text-sm">
+    <thead>
+      <tr class="text-left">
+        <th class="w-1/2 border p-2">Author</th>
+        <th class="border p-2">Quantity</th>
+        <th class="border p-2 text-gray-500 font-normal">Quantity per cent</th>
+        <th class="border p-2">Total price</th>
+        <th class="border p-2 text-gray-500 font-normal">Price per cent</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="author in authors" :key="author" class="h-12">
+        <td class="border p-2">
+          <a v-if="author" :href="'https://github.com/' + author" class="flex items-center" target="_blank">
+            <img :src="'https://github.com/' + author + '.png'" class="size-6 rounded-full mr-2" :alt="author">
+            {{ author }}
+          </a>
+          <span v-else class="ml-8">unknown author</span>
+        </td>
+        <td class="border p-2">{{ quantityPerAuthor(author) }}</td>
+        <td class="border p-2 text-gray-500">{{ (quantityPerAuthor(author) * 100 / totalQuantity).toFixed(2) }}%</td>
+        <td class="border p-2">${{ pricePerAuthor(author) }}</td>
+        <td class="border p-2 text-gray-500">{{ (pricePerAuthor(author) * 100 / totalPrice).toFixed(2) }}%</td>
+      </tr>
+    </tbody>
+  </table>
+  <h1 v-else>No logs loaded</h1>
+</template>

resources/js/Pages/DefaultLayout.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { useLogsStore } from '@/Stores/logsStore'
+import Navbar from './Navbar.vue'
+import { ref } from 'vue'
+
+const {clearLogs, setLogs} = useLogsStore()
+
+const files = ref([])
+const fileInput = ref(null)
+
+const sampleDataURL = '../../data/sampleData.json'
+
+async function fetchData(data) {
+  try {
+    const response = await fetch(new URL(data, import.meta.url).href)
+    const jsonData = await response.json()
+    return jsonData
+
+  } catch (error) {
+    console.error('Error loading data:', error)
+  }
+}
+
+async function seed () {
+  const jsonData = await fetchData(sampleDataURL)
+  const sample = jsonData.sample
+
+  setLogs(sample)
+
+}
+function clear () {
+  clearLogs()
+}
+
+const triggerFileInput = () => {
+  fileInput.value.click()
+}
+
+const onFileChange = (event) => {
+  const selectedFiles = Array.from(event.target.files)
+  files.value.push(...selectedFiles)
+}
+</script>
+
+<template>
+  <Navbar />
+  <main class="container my-4 mx-auto bg-white rounded-xl p-4 shadow flex">
+    <div class="flex-1 p-4">
+      <slot />
+    </div>
+  </main>
+  <div class="container mt-6 mb-12 mx-auto">
+    <div class="block uppercase text-white font-semibold text-xs tracking-widest">
+      <nav class="flex items-center justify-end space-x-4">
+        <span class="cursor-pointer px-8 py-4 rounded-md bg-blue-400/50 hover:bg-blue-400/25" @click="clear">Clear Data</span>
+        <span class="cursor-pointer px-8 py-4 rounded-md bg-blue-400/50  hover:bg-blue-400/25" @click="triggerFileInput">
+          Upload CSV file
+          <input id="uploader" ref="fileInput" type="file" accept=".csv" class="hidden" @change="onFileChange">
+        </span>
+        <span class="cursor-pointer px-8 py-4 rounded-md bg-blue-400/50  hover:bg-blue-400/25" @click="seed">Seed Example Data</span>
+      </nav>
+    </div>
+  </div>
+  <footer>
+    <div class="w-full flex items-center justify-center text-white">
+      <span class="mr-2 font-semibold text-xs tracking-widest">developed by</span>
+      <a href="https://blumilk.pl/" target="_blank">
+        <img class="w-32" src="../../assets/images/blumilk.png" alt="Blumilk">
+      </a>
+    </div>
+  </footer>
+</template>

resources/js/Pages/Home.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { Head } from '@inertiajs/vue3'
+import { useLogsStore } from '../Stores/logsStore'
+import { computed } from 'vue'
+
+const logsStore = useLogsStore()
+const logs = computed(() => logsStore.getLogs)
+
+</script>
+
+<template>
+  <Head>
+    <title>GitHub Action simple analyzer</title>
+  </Head>
+  <textarea class="w-full text-xs font-mono shadow border rounded-xl p-3" :value="logs" rows="20" />
+</template>