fhc chart just accepts chartOptions to maximize highcharts usability; statsComponent multiselect ux improvement;

application/models/organisation/Studiengang_model.php

@@ -776,8 +776,7 @@ class Studiengang_model extends DB_Model
 			lehre.tbl_lehrveranstaltung.sprache, orgform_kurzbz,
 			lehre.tbl_lehrveranstaltung.lehrform_kurzbz)
 			lehre.tbl_lehrveranstaltung.lehrveranstaltung_id, kurzbz, bezeichnung,
-			semester, lehre.tbl_lehrveranstaltung.sprache, orgform_kurzbz, lehre.tbl_lehrveranstaltung.lehrform_kurzbz,
-			tbl_lehreinheit.*, tbl_lehrveranstaltung.*
+			semester, lehre.tbl_lehrveranstaltung.sprache, orgform_kurzbz, lehre.tbl_lehrveranstaltung.lehrform_kurzbz
 		FROM lehre.tbl_lehrveranstaltung JOIN lehre.tbl_lehreinheit USING(lehrveranstaltung_id) JOIN lehre.tbl_lehreinheitmitarbeiter USING(lehreinheit_id)
 		WHERE aktiv = TRUE AND studiengang_kz = ? AND orgform_kurzbz = ? AND tbl_lehreinheit.studiensemester_kurzbz IN ?';
 

public/js/components/Chart/FhcChart.js

@@ -1,149 +1,23 @@
 
-var _uuid = 0;
 export const FhcChart = {
 	name: 'FhcChart',
-	components: {
-		
-	},
-	emits: [
-		'chartCreated',
-		'chartDeleted',
-		'chartUpdated'
-	],
-	data: function() {
-		return {
-			id: this.chart_id + _uuid
-		};
-	},
 	props: {
-		chart_id: {
-			type: [Number, String]
-		},
-		preferences: {
+		chartOptions: {
 			type: Object,
-			default: {}
-		},
-		publish: {
-			type: Boolean,
-			default: false
-		},
-		statistik_kurzbz: {
-			type: String,
-			default: ''
-		},
-		// fhcType: { // TODO: ist das notwendig?
-		// 	type: String,
-		// 	default: 'hcnorm',
-		// 	required: true,
-		// 	validator(val) {
-		// 		return ['hcnorm', 'hcgroupedstacked', 'hcdrill'].includes(val)
-		// 	}
-		// },
-		type: {
-			type: String,
-			default: 'line',
-			required: true,
-			validator(val) {
-				// actually used in tbl_rp_chart: 'column', 'line' & 'bubble'
-				return ['column', 'bubble', 'line', 'pie', 'bar'].includes(val)
-				
-				// laut rp_chart.class.php
-				// return ["column", "line", "spline", "pie",
-				// 	"area", "bar", "bubble", "columnrange",
-				// 	"errorbar", "funnel", "gauge", "polygon",
-				// 	"pyramid", "scatter", "solidgauge", "treemap",
-				// 	"waterfall" , "arearange", "areaspline", "areasplinerange", "boxplot"].includes(val)
-				// 90% probably never used
-			}
-		},
-		title: { // https://www.highcharts.com/docs/chart-concepts/title-and-subtitle
-			type: String,
-			default: ''
-		},
-		longtitle: {
-			type: String,
-			default: ''	
-		},
-		description: {
-			type: String,
-			default: ''
-		},
-		series: {
-			type: Array,
-			required: true,
-			default: []
-		},
-		xAxis: { // https://www.highcharts.com/docs/chart-concepts/axes
-			type: Object,
-			required: true,
-			validator(val) {
-				return Array.isArray(val.categories) // https://api.highcharts.com/highcharts/xAxis.categories
-					&& val.categories.every(c => typeof c === 'string')
-			}
-		},
-		yAxis: {
-				
-		},
-		legend:{
-				
-		},
-		tooltip: { // https://www.highcharts.com/docs/chart-concepts/tooltip
-			backgroundColor: '#FCFFC5',
-			borderColor: 'black',
-			borderRadius: 10,
-			borderWidth: 3
-		},
-		plotOptions: {
-			
 		}
 	},
-	methods: {
-		recreateChart() {
-			
-		},
-		deleteChart(id) {
-			
-		},
-		createNewChart() {
-			this.setupGraph()
-		},
-		createNewChartFromOptions(chartOptions) {
-			this.setupGraph()
-		},
-		setupGraph() {
-			const wrapperDiv = document.getElementById(this.id)
-			const containerCategory = document.createElement('div')
-			containerCategory.id = this.id
-			containerCategory.style.flex = '1 0 300px';
-			containerCategory.style.margin = '10px';
-			containerCategory.style.maxWidth = '500px';
-			wrapperDiv.appendChild(containerCategory)
-
-			Highcharts.chart(this.id, {
-				chart: {
-					type: this.type
-				},
-				title: this.title,
-				subtitle: this.longtitle,
-				tooltip: this.tooltip,
-				plotOptions: this.plotOptions,
-				xAxis: this.xAxis,
-				yAxis: this.yAxis,
-				series: this.series
-			})
-		}
-	},
-	created(){
-	},
-	mounted() {
-		this.setupGraph()
-	},
 	template: `
+	<div style="width:100%;height:100%;overflow:auto">
+		<div role="group" aria-label="Chart Modus">
+			<Button :class="(chartOptions.chart.type === 'pie' ? 'active ' : '') + 'btn btn-outline-secondary'" style="width: 48px;" @click="chartOptions.chart.type='pie'"><i class="fa-solid fa-chart-pie"></i></Button>
+			<Button :class="(chartOptions.chart.type === 'bar' ? 'active ' : '') + 'btn btn-outline-secondary'" style="width: 48px;" @click="chartOptions.chart.type='bar'"><i class="fa-solid fa-chart-bar"></i></Button>
+			<Button :class="(chartOptions.chart.type === 'column' ? 'active ' : '') + 'btn btn-outline-secondary'" style="width: 48px;" @click="chartOptions.chart.type='column'"><i class="fa-solid fa-chart-simple"></i></Button>
+			<Button :class="(chartOptions.chart.type === 'line' ? 'active ' : '') + 'btn btn-outline-secondary'" style="width: 48px;" @click="chartOptions.chart.type='line'"><i class="fa-solid fa-chart-line"></i></Button>
+		</div>
 		<figure>
-			<div :id="id" style="display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center;">
-
-			</div>
+			<highcharts class="chart" :options="chartOptions"></highcharts>
 		</figure>
+	</div>
 `
 };
 

system/phrasesupdate.php

@@ -31540,6 +31540,26 @@ array(
 			)
 		)
 	),
+	array(
+		'app' => 'anwesenheiten',
+		'category' => 'global',
+		'phrase' => 'digiAnwEval',
+		'insertvon' => 'system',
+		'phrases' => array(
+			array(
+				'sprache' => 'German',
+				'text' => 'Digitale Anwesenheiten Auswertung',
+				'description' => '',
+				'insertvon' => 'system'
+			),
+			array(
+				'sprache' => 'English',
+				'text' => 'Digital Attendances Evaluation',
+				'description' => '',
+				'insertvon' => 'system'
+			)
+		)
+	),
 	//
 	// DIGITALE ANWESENHEITEN PHRASEN END
 	//