Feature/884 Team Skill Tracking over time view

app/controllers/department_skill_snapshots_controller.rb

@@ -0,0 +1,28 @@
+class DepartmentSkillSnapshotsController < CrudController
+  def index
+    @data = chart_data.to_json
+    super
+  end
+
+  private
+
+  def chart_data
+    {
+      labels: Date::MONTHNAMES.compact,
+      datasets: dataset_values.map { |value| build_dataset(value) }
+    }
+  end
+
+  def dataset_values
+    %w[Azubi Junior Senior Professional Expert]
+  end
+
+  def build_dataset(value)
+    {
+      label: value,
+      data: Array.new(12) { rand(10) },
+      fill: false,
+      tension: 0.1
+    }
+  end
+end

app/helpers/tab_helper.rb

@@ -18,7 +18,8 @@ def global_tabs
       { title: ti('navbar.skill_search'), path: people_skills_path, admin_only: false },
       { title: ti('navbar.cv_search'), path: cv_search_index_path, admin_only: false },
       { title: ti('navbar.skillset'), path: skills_path, admin_only: false },
-      { title: ti('navbar.certificates'), path: certificates_path, admin_only: true }
+      { title: ti('navbar.certificates'), path: certificates_path, admin_only: true },
+      { title: ti('navbar.skills_tracking'), path: department_skill_snapshots_path, admin_only: false }
     ]
   end
 

app/javascript/controllers/chart_controller.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+import Chart from "chart.js/auto"
+import { Colors } from 'chart.js';
+
+export default class extends Controller {
+  static targets = ["canvas"]
+  static values = {
+    dataset: String
+  }
+
+  connect() {
+    Chart.register(Colors);
+
+    const ctx = this.canvasTarget.getContext("2d")
+
+    const chartData = JSON.parse(this.datasetValue)
+
+    this.chart = new Chart(ctx, {
+      type: 'line',
+      data: chartData,
+      options: {
+        responsive: true,
+        scales: {
+          y: {
+            beginAtZero: true
+          }
+        }
+      }
+    })
+  }
+
+  disconnect() {
+    this.chart?.destroy()
+  }
+}

app/models/department_skill_snapshot.rb

@@ -0,0 +1,5 @@
+class DepartmentSkillSnapshot < ApplicationRecord
+  belongs_to :department
+
+  serialize :department_skill_levels, type: Hash, coder: JSON
+end

app/views/department_skill_snapshots/index.html.haml

@@ -0,0 +1,18 @@
+= form_with url: department_skill_snapshots_path, method: :get, data: { turbo_frame: "team-skill-chart" } do |f|
+  .d-flex.mt-4.mb-4.gap-4
+    %div
+      = f.label :department_id, t('activerecord.models.department.one'), class: "text-secondary"
+      = f.select :department_id,
+            options_from_collection_for_select(Department.all, :id, :name, params[:department_id]), {}, { onchange: "this.form.requestSubmit()", class: "form-select"}
+    %div
+      = f.label :skill_id, t('activerecord.models.skill.one'), class: "text-secondary"
+      = f.select :skill_id,
+            options_from_collection_for_select(Skill.all, :id, :title, params[:skill_id]), {}, { onchange: "this.form.requestSubmit()", class: "form-select" }
+    %div
+      = f.label :year, t('global.date.year'), class: "text-secondary"
+      = f.select :year,
+            options_for_select((2025..Date.today.year).to_a.reverse, params[:year]), {}, { onchange: "this.form.requestSubmit()", class: "form-select"}
+
+%turbo-frame#team-skill-chart
+  %div.chart-container{data: {"chart-dataset-value": @data, controller: "chart" }}
+    %canvas{ "data-chart-target": "canvas", width: "3", height: "1" }

config/locales/de-CH.yml

@@ -228,6 +228,7 @@ de-CH:
       profile: Profiu
       skill_search: Skill Suechi
       skillset: Skillset
+      skills_tracking: Skills tracking
     new: Neu
     people_skills:
       certificate: Zertifikat

config/locales/de.yml

@@ -213,6 +213,7 @@ de:
       profile: Profil
       skill_search: Skill Suche
       skillset: Skillset
+      skills_tracking: Skills tracking
     new: Neu
     people_skills:
       certificate: Zertifikat

config/locales/en.yml

@@ -209,6 +209,7 @@ en:
       profile: Profile
       skill_search: Skill search
       skillset: Skillset
+      skills_tracking: Skills tracking
     new: New
     people_skills:
       certificate: Certificate

config/locales/fr.yml

@@ -209,6 +209,7 @@ fr:
       profile: Profil
       skill_search: Recherche de compétences
       skillset: Kit de compétences
+      skills_tracking: Suivi des compétences
     new: Nouveau
     people_skills:
       certificate: Certificat

config/locales/it.yml

@@ -209,6 +209,7 @@ it:
       profile: Profilo
       skill_search: Ricerca di competenze
       skillset: Competenze
+      skills_tracking: Tracciamento delle competenze
     new: Nuovo
     people_skills:
       certificate: Certificato

config/routes.rb

@@ -66,6 +66,8 @@
     end
 
     resources :certificates
+
+    resources :department_skill_snapshots, only: [:index]
   end
 
 

package.json

@@ -8,6 +8,7 @@
     "autoprefixer": "^10.4.17",
     "bootstrap": "^5.3.2",
     "bootstrap-icons": "^1.11.3",
+    "chart.js": "^4.4.9",
     "esbuild": "^0.25.0",
     "esbuild-rails": "^1.0.7",
     "nodemon": "^3.0.3",

spec/controllers/department_skill_snapshots_controller_spec.rb

@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+describe DepartmentSkillSnapshotsController do
+
+end

spec/features/department_skill_snapshots_spec.rb

@@ -0,0 +1,21 @@
+require 'rails_helper'
+
+describe 'Department Skill Snapshots', type: :feature, js: true do
+  before(:each) do
+    admin = auth_users(:admin)
+    login_as(admin, scope: :auth_user)
+    visit department_skill_snapshots_path
+  end
+
+  it 'Should display all selects with the corresponding labels and the the canvas chart' do
+    expect(page).to have_content('Organisationseinheit')
+    expect(page).to have_content('Skill')
+    expect(page).to have_content('Jahr')
+
+    expect(page).to have_select('department_id')
+    expect(page).to have_select('skill_id')
+    expect(page).to have_select('year')
+
+    expect(page).to have_selector("canvas")
+  end
+end

spec/features/tabbar_spec.rb

@@ -9,7 +9,8 @@
       { title: 'global.navbar.skill_search', path_helper: "people_skills_path", admin_only: false },
       { title: 'global.navbar.cv_search', path_helper: "cv_search_index_path", admin_only: false },
       { title: 'global.navbar.skillset', path_helper: "skills_path", admin_only: false },
-      { title: 'global.navbar.certificates', path_helper: "certificates_path", admin_only: true }
+      { title: 'global.navbar.certificates', path_helper: "certificates_path", admin_only: true },
+      { title: 'global.navbar.skills_tracking', path_helper: "department_skill_snapshots_path", admin_only: false }
     ]
 
   PERSON_TABS =
@@ -27,7 +28,7 @@
       end
 
       after(:each) do
-        expect(current_path.start_with?("/#{locale}")).to eq(I18n.locale != I18n.default_locale)
+        expect(current_path.start_with?("/#{locale}/")).to eq(I18n.locale != I18n.default_locale)
       end
 
       describe 'Global' do

yarn.lock

@@ -145,6 +145,11 @@
   resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-8.0.12.tgz#50aa8345d7f62402680c6d2d9814660761837001"
   integrity sha512-l3BiQRkD7qrnQv6ms6sqPLczvwbQpXt5iAVwjDvX0iumrz6yEonQkNAzNjeDX25/OJMFDTxpHjkJZHGpM9ikWw==
 
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.4.tgz#4d4ff677e1609214fc71c580125ddddd86abcabf"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
 "@nodelib/[email protected]":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -263,6 +268,13 @@ caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz#a102cf330d153bf8c92bfb5be3cd44c0a89c8c12"
   integrity sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==
 
+chart.js@^4.4.9:
+  version "4.4.9"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.9.tgz#602e2fc2462f0f7bb7b255eaa1b51f56a43a1362"
+  integrity sha512-EyZ9wWKgpAU0fLJ43YAEIF8sr5F2W3LqbS40ZJyHIner2lY14ufqv2VMp69MAiZ2rpwxEUxEhIH/0U3xyRynxg==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
 "chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.5.2:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"