Merge remote-tracking branch 'origin/dev' into dev

package.json

@@ -44,7 +44,8 @@
 		"html-to-text": "^9.0.5",
 		"pinia": "^2.1.7",
 		"vue-highlight-words": "^3.0.1",
-		"vue-json-viewer": "3"
+		"vue-json-viewer": "3",
+		"zipcelx": "^1.6.2"
 	},
 	"devDependencies": {
 		"@acdh-oeaw/eslint-config": "^1.0.0",

src/components/DataDisplay/KWICDetailDialog.vue

@@ -39,8 +39,7 @@ watch(active, async () => {
 });
 
 const parsedText = computed(() => {
-	if (!details.value) return "not loaded yet, lol";
-
+	if (!details.value?.content) return "not loaded yet.";
 	const html = details.value.content.map((a) => a.str).join(" ");
 	const text = convert(html.replaceAll("</p>", "</p>\n\n"), { preserveNewlines: true });
 	return text;

src/plugins/helpers/highchartsExcelFunction.ts

@@ -0,0 +1,56 @@
+// @ts-nocheck
+/* eslint-disable */
+// sadly this function is just js, so need to disable typechecker for it
+import zipcelx from "zipcelx";
+
+export const HighchartsExcelDownload = (H) => {
+	if (H.getOptions().exporting) {
+		H.Chart.prototype.downloadXLSX = function () {
+			const div = document.createElement("div");
+			let name,
+				xlsxRows = [];
+			div.style.display = "none";
+			document.body.appendChild(div);
+			const rows = this.getDataRows(true);
+			xlsxRows = rows.slice(1).map(function (row) {
+				return row.map(function (column) {
+					return {
+						type: typeof column === "number" ? "number" : "string",
+						value: column,
+					};
+				});
+			});
+
+			// Get the filename, copied from the Chart.fileDownload function
+			if (this.options.exporting.filename) {
+				name = this.options.exporting.filename;
+			} else if (this.title.textStr) {
+				name = this.title.textStr.replace(/ /g, "-").toLowerCase();
+			} else {
+				name = "chart";
+			}
+
+			zipcelx({
+				filename: name,
+				sheet: {
+					data: xlsxRows,
+				},
+			});
+		};
+
+		// Default lang string, overridable in i18n options
+		H.getOptions().lang.downloadXLSX = "Download XLSX";
+
+		// Add the menu item handler
+		H.getOptions().exporting.menuItemDefinitions.downloadXLSX = {
+			textKey: "downloadXLSX",
+			onclick: function () {
+				this.downloadXLSX();
+			},
+		};
+
+		// Replace the menu item
+		const menuItems = H.getOptions().exporting.buttons.contextButton.menuItems;
+		menuItems[menuItems.indexOf("downloadXLS")] = "downloadXLSX";
+	}
+};

src/plugins/highcharts.client.ts

@@ -1,12 +1,18 @@
 import Highcharts from "highcharts";
+import ExportingDataModule from "highcharts/modules/export-data";
+import ExportingModule from "highcharts/modules/exporting";
 import MapsModule from "highcharts/modules/map";
 import HighchartsVue from "highcharts-vue";
 
-// In order to use Highcharts Maps we need to
-// wrap Highcharts with the correct module:
+import { HighchartsExcelDownload } from "./helpers/highchartsExcelFunction";
 
 export default defineNuxtPlugin((nuxtApp) => {
 	MapsModule(Highcharts);
+	ExportingModule(Highcharts);
+	ExportingDataModule(Highcharts);
+
+	// overwrites the excel download to work propperly. this part is copied and adapted from a highcharts fiddle using that library. could be adapted to use a more maintained one, but would only recomend, if issues surface
+	HighchartsExcelDownload(Highcharts);
 	// @ts-ignore
 	nuxtApp.vueApp.use(HighchartsVue, { tagName: "HighCharts" });
 });