From 105443f2e9a69a5955b0b8f2af50bf744d26c92c Mon Sep 17 00:00:00 2001
From: data <data@data-it-solution.de>
Date: Tue, 24 Feb 2026 11:08:01 +0100
Subject: [PATCH] feat: Differenz-Anzeige und UI-Verbesserungen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Differenz-Anzeige (+/-) im CU/AL-Diagramm (immer sichtbar)
- Differenz-Anzeige im Kabel-Diagramm (per Checkbox einblendbar)
- Farbkästchen bei Kabel-Checkboxen passend zur Diagrammfarbe
- Kabel-Diagramm Legende ausgeblendet (nicht doppelt)
- ChangeLog und README aktualisiert

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ChangeLog.md                    |  11 +-
 README.md                       |   3 +-
 langs/de_DE/metallzuschlag.lang |   2 +
 langs/en_US/metallzuschlag.lang |   2 +
 metallzuschlagindex.php         | 279 ++++++++++++++++++++++++--------
 5 files changed, 223 insertions(+), 74 deletions(-)

diff --git a/ChangeLog.md b/ChangeLog.md
index c5ed219..ad034d6 100755
--- a/ChangeLog.md
+++ b/ChangeLog.md
@@ -4,11 +4,18 @@
 
 ### Neu
 - Dashboard: Kabel-Kupferzuschlag-Diagramm mit zeitgenauem Verlauf
-- Kabel-Auswahl: Einzelne oder alle Kabel ein-/ausblenden
+- Kabel-Auswahl: Einzelne oder alle Kabel ein-/ausblenden (JavaScript, ohne Seitenneuladung)
 - Modus-Auswahl: EUR/m (Stueckpreis) oder Gesamtbetrag (mit Mindestmenge)
-- API: getProductsWithKupfergehalt() - alle Kabel mit Kupfergehalt
+- Differenz-Anzeige: +/- Werte zwischen Datenpunkten im CU/AL-Diagramm
+- Differenz-Anzeige: Per Checkbox im Kabel-Diagramm einblendbar
+- Farbkästchen bei Kabel-Checkboxen (passend zur Diagrammfarbe)
+- API: getProductsWithKupfergehalt() - alle Kabel mit Kupfergehalt (sortiert nach Querschnitt)
 - API: getCableChartData() - Kupferzuschlag-Verlauf berechnen
 
+### Geaendert
+- Kabel-Liste: Flexbox-Layout (3 Spalten), sortiert nach Querschnitt aufsteigend
+- Kabel-Diagramm: Legende ausgeblendet (Checkboxen zeigen bereits Kabelnamen)
+
 ## 1.2 (2026-02-24)
 
 ### Geaendert
diff --git a/README.md b/README.md
index b5d6f34..d1b4b7b 100755
--- a/README.md
+++ b/README.md
@@ -5,7 +5,8 @@ Metallnotierungen (Kupfer/Aluminium) von Sonepar abrufen, verwalten und automati
 ## Funktionen
 
 - **Metallnotierungen abrufen**: Tageswerte und Monatsdurchschnitte (CU/AL) von der Sonepar Metal Note API
-- **Dashboard**: Aktuelle Notierungen, Verlaufsdiagramm (Chart.js) und Historie
+- **Dashboard**: Aktuelle Notierungen, Verlaufsdiagramme (Chart.js) und Historie
+- **Kabel-Diagramm**: Kupferzuschlag-Verlauf pro Kabel, filterbar per Checkbox, mit Differenz-Anzeige
 - **Kupfergehalt berechnen**: Automatisch aus Aderanzahl x Querschnitt x 8,89 kg/(km*mm2) beim Speichern von Produkten
 - **Kupferzuschlag berechnen**: Gesamtbetrag auf Einkaufspreisen = Kupfergehalt x CU-Notiz / 100.000 x Mindestmenge
 - **Lieferanten-Zuschlaege**: CU/AL-Werte pro Lieferant (automatisch oder manuell)
diff --git a/langs/de_DE/metallzuschlag.lang b/langs/de_DE/metallzuschlag.lang
index 13be64a..cc6b6d0 100755
--- a/langs/de_DE/metallzuschlag.lang
+++ b/langs/de_DE/metallzuschlag.lang
@@ -89,3 +89,5 @@ MetallzuschlagPerMeter = EUR/m
 MetallzuschlagTotalAmount = Gesamtbetrag
 MetallzuschlagPerMeterEUR = Kupferzuschlag (EUR/m)
 MetallzuschlagTotalAmountEUR = Kupferzuschlag (EUR)
+MetallzuschlagNoCablesSelected = Keine Kabel ausgewählt - bitte mindestens ein Kabel aktivieren
+MetallzuschlagShowDiff = Differenz anzeigen
diff --git a/langs/en_US/metallzuschlag.lang b/langs/en_US/metallzuschlag.lang
index b3e7b16..9742232 100755
--- a/langs/en_US/metallzuschlag.lang
+++ b/langs/en_US/metallzuschlag.lang
@@ -88,3 +88,5 @@ MetallzuschlagPerMeter = EUR/m
 MetallzuschlagTotalAmount = Total amount
 MetallzuschlagPerMeterEUR = Copper surcharge (EUR/m)
 MetallzuschlagTotalAmountEUR = Copper surcharge (EUR)
+MetallzuschlagNoCablesSelected = No cables selected - please enable at least one cable
+MetallzuschlagShowDiff = Show difference
diff --git a/metallzuschlagindex.php b/metallzuschlagindex.php
index bd4066e..511ae30 100755
--- a/metallzuschlagindex.php
+++ b/metallzuschlagindex.php
@@ -221,15 +221,41 @@ if (!empty($chartData['labels'])) {
 	print '<script src="'.DOL_URL_ROOT.'/includes/nnnick/chartjs/dist/chart.min.js"></script>';
 	print '<script>';
 	print 'document.addEventListener("DOMContentLoaded", function() {';
-	print '  var ctx = document.getElementById("metallzuschlagChart").getContext("2d");';
-	print '  new Chart(ctx, {';
+	print '  var chartCtx = document.getElementById("metallzuschlagChart").getContext("2d");';
+	print '  var cuData = '.$jsCU.';';
+	print '  var alData = '.$jsAL.';';
+	print '  ';
+	print '  var metalDiffPlugin = {';
+	print '    id: "metalDiffLabels",';
+	print '    afterDatasetsDraw: function(chart) {';
+	print '      var c = chart.ctx;';
+	print '      chart.data.datasets.forEach(function(dataset, datasetIndex) {';
+	print '        var meta = chart.getDatasetMeta(datasetIndex);';
+	print '        if (meta.hidden) return;';
+	print '        var dataArr = dataset.data;';
+	print '        c.font = "10px Arial";';
+	print '        c.textAlign = "center";';
+	print '        meta.data.forEach(function(point, idx) {';
+	print '          if (idx === 0 || dataArr[idx] === null || dataArr[idx - 1] === null) return;';
+	print '          var diffVal = dataArr[idx] - dataArr[idx - 1];';
+	print '          if (Math.abs(diffVal) < 0.01) return;';
+	print '          var signStr = diffVal > 0 ? "+" : "";';
+	print '          c.fillStyle = dataset.borderColor;';
+	print '          c.fillText(signStr + diffVal.toFixed(1), point.x, point.y - 8);';
+	print '        });';
+	print '      });';
+	print '    }';
+	print '  };';
+	print '  ';
+	print '  new Chart(chartCtx, {';
 	print '    type: "line",';
+	print '    plugins: [metalDiffPlugin],';
 	print '    data: {';
 	print '      labels: '.$jsLabels.',';
 	print '      datasets: [{';
 	print '        label: "'.dol_escape_js($labelCU).'",';
-	print '        data: '.$jsCU.',';
-	print '        borderColor: "#b87333",';  // Kupferfarbe
+	print '        data: cuData,';
+	print '        borderColor: "#b87333",';
 	print '        backgroundColor: "rgba(184, 115, 51, 0.1)",';
 	print '        borderWidth: 2,';
 	print '        fill: true,';
@@ -238,8 +264,8 @@ if (!empty($chartData['labels'])) {
 	print '        yAxisID: "yCU"';
 	print '      }, {';
 	print '        label: "'.dol_escape_js($labelAL).'",';
-	print '        data: '.$jsAL.',';
-	print '        borderColor: "#a8a9ad",';  // Aluminiumfarbe
+	print '        data: alData,';
+	print '        borderColor: "#a8a9ad",';
 	print '        backgroundColor: "rgba(168, 169, 173, 0.1)",';
 	print '        borderWidth: 2,';
 	print '        fill: true,';
@@ -255,8 +281,17 @@ if (!empty($chartData['labels'])) {
 	print '      plugins: {';
 	print '        tooltip: {';
 	print '          callbacks: {';
-	print '            label: function(ctx) {';
-	print '              return ctx.dataset.label + ": " + (ctx.parsed.y !== null ? ctx.parsed.y.toFixed(2) : "-") + " €/100kg";';
+	print '            label: function(tipContext) {';
+	print '              var v = tipContext.parsed.y !== null ? tipContext.parsed.y.toFixed(2) : "-";';
+	print '              var diffStr = "";';
+	print '              if (tipContext.dataIndex > 0 && tipContext.parsed.y !== null) {';
+	print '                var prevVal = tipContext.dataset.data[tipContext.dataIndex - 1];';
+	print '                if (prevVal !== null) {';
+	print '                  var dv = tipContext.parsed.y - prevVal;';
+	print '                  diffStr = " (" + (dv >= 0 ? "+" : "") + dv.toFixed(2) + ")";';
+	print '                }';
+	print '              }';
+	print '              return tipContext.dataset.label + ": " + v + " €/100kg" + diffStr;';
 	print '            }';
 	print '          }';
 	print '        }';
@@ -292,87 +327,87 @@ if (!empty($cablesWithKupfer) && !empty($chartData['labels'])) {
 	print '<br>';
 
 	// Parameter auslesen
-	$cableIds = GETPOST('cable_ids', 'array');
 	$cableMode = GETPOST('cable_mode', 'alpha') ?: 'per_meter';
-	$cableFilterSubmitted = GETPOST('cable_filter', 'int');
 
-	// URL-Basis fuer Links
-	$baseUrl = $_SERVER["PHP_SELF"].'?chart_days='.$chartDays;
+	// Beide Modi Daten laden (fuer JavaScript-Wechsel)
+	$cableChartDataPerMeter = $api->getCableChartData($chartDays, array(), 'per_meter');
+	$cableChartDataTotal = $api->getCableChartData($chartDays, array(), 'total');
 
-	// Kabel-Auswahl und Modus-Buttons
-	$cableButtons = '';
+	print load_fiche_titre($langs->trans("MetallzuschlagCableChart"), '', '');
 
-	// Modus-Buttons
-	$modePerMeter = ($cableMode == 'per_meter') ? ' butActionActive' : '';
-	$modeTotal = ($cableMode == 'total') ? ' butActionActive' : '';
-	$cableButtons .= '<a class="butAction'.$modePerMeter.' small" href="'.$baseUrl.'&cable_mode=per_meter'.(!empty($cableIds) ? '&cable_ids[]='.implode('&cable_ids[]=', $cableIds) : '').'">'.$langs->trans("MetallzuschlagPerMeter").'</a> ';
-	$cableButtons .= '<a class="butAction'.$modeTotal.' small" href="'.$baseUrl.'&cable_mode=total'.(!empty($cableIds) ? '&cable_ids[]='.implode('&cable_ids[]=', $cableIds) : '').'">'.$langs->trans("MetallzuschlagTotalAmount").'</a>';
+	// Steuerelemente (Modus, Differenz, Alle ein/aus)
+	print '<div style="margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center;">';
 
-	print load_fiche_titre($langs->trans("MetallzuschlagCableChart"), $cableButtons, '');
+	// Modus-Auswahl
+	print '<div>';
+	print '<label style="margin-right: 10px;">';
+	print '<input type="radio" name="cable_mode_js" value="per_meter"'.($cableMode == 'per_meter' ? ' checked' : '').' onchange="cableChartSwitchMode(this.value)"> ';
+	print $langs->trans("MetallzuschlagPerMeter");
+	print '</label>';
+	print '<label>';
+	print '<input type="radio" name="cable_mode_js" value="total"'.($cableMode == 'total' ? ' checked' : '').' onchange="cableChartSwitchMode(this.value)"> ';
+	print $langs->trans("MetallzuschlagTotalAmount");
+	print '</label>';
+	print '</div>';
+
+	// Differenz-Anzeige Checkbox
+	print '<div>';
+	print '<label>';
+	print '<input type="checkbox" id="cableShowDiff" onchange="cableChartToggleDiff()"> ';
+	print $langs->trans("MetallzuschlagShowDiff");
+	print '</label>';
+	print '</div>';
+
+	// Alle ein/aus Button
+	print '<div>';
+	print '<a class="butAction small" href="#" onclick="cableChartToggleAll(); return false;">'.$langs->trans("MetallzuschlagAllCables").'</a>';
+	print '</div>';
+
+	print '</div>';
 
 	// Kabel-Auswahl (Checkboxen)
 	print '<div class="div-table-responsive-no-min" style="margin-bottom: 15px;">';
-	print '<form method="get" action="'.$_SERVER["PHP_SELF"].'" id="cableFilterForm">';
-	print '<input type="hidden" name="chart_days" value="'.$chartDays.'">';
-	print '<input type="hidden" name="cable_mode" value="'.$cableMode.'">';
-	print '<input type="hidden" name="cable_filter" value="1">';
-
 	print '<div class="titre inline-block">'.$langs->trans("MetallzuschlagSelectCables").'</div>';
 	print '<div style="display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 10px 0; align-items: flex-start;">';
 
+	$colorIndex = 0;
+	$colors = array(
+		'#e6194B', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
+		'#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
+		'#469990', '#dcbeff', '#9A6324', '#fffac8', '#800000',
+	);
+
 	foreach ($cablesWithKupfer as $cable) {
-		// Beim ersten Laden alle auswaehlen, danach nur die ausgewaehlten
-		$checked = (!$cableFilterSubmitted || in_array($cable->rowid, $cableIds)) ? ' checked' : '';
+		$color = $colors[$colorIndex % count($colors)];
 		print '<label style="flex: 0 0 calc(33.33% - 20px); min-width: 200px; white-space: nowrap;">';
-		print '<input type="checkbox" name="cable_ids[]" value="'.$cable->rowid.'"'.$checked.'> ';
+		print '<input type="checkbox" class="cable-checkbox" data-id="'.$cable->rowid.'" checked onchange="cableChartUpdateVisibility()"> ';
+		print '<span style="color: '.$color.'; font-weight: bold;">&#9632;</span> ';
 		print dol_escape_htmltag($cable->ref);
 		if (!empty($cable->label)) {
 			print ' <span class="opacitymedium">('.dol_trunc($cable->label, 25).')</span>';
 		}
 		print '</label>';
+		$colorIndex++;
 	}
 
 	print '</div>';
-	print '<div style="margin-top: 10px;">';
-	print '<button type="submit" class="butAction small">'.$langs->trans("Refresh").'</button> ';
-	print '<a class="butAction small" href="#" onclick="metallzuschlagToggleAllCables(); return false;">'.$langs->trans("MetallzuschlagAllCables").'</a>';
-	print '</div>';
-	print '</form>';
 	print '</div>';
 
-	// JavaScript fuer Toggle alle Kabel
-	print '<script>';
-	print 'function metallzuschlagToggleAllCables() {';
-	print '  var checkboxes = document.querySelectorAll(\'input[name="cable_ids[]"]\');';
-	print '  var allChecked = Array.from(checkboxes).every(cb => cb.checked);';
-	print '  checkboxes.forEach(cb => cb.checked = !allChecked);';
-	print '  checkboxes[0].form.submit();';
-	print '}';
-	print '</script>';
-
-	// Kabel-Chart-Daten holen
-	$cableChartData = $api->getCableChartData($chartDays, $cableIds, $cableMode);
-
-	if (!empty($cableChartData['products'])) {
+	// Chart Canvas
+	if (!empty($cableChartDataPerMeter['products'])) {
 		print '<div style="max-width: 100%; height: 400px;">';
 		print '<canvas id="cableChart"></canvas>';
 		print '</div>';
 
-		// Farben fuer Kabel (verschiedene Farben)
-		$colors = array(
-			'#e6194B', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
-			'#911eb4', '#42d4f4', '#f032e6', '#bfef45', '#fabed4',
-			'#469990', '#dcbeff', '#9A6324', '#fffac8', '#800000',
-		);
-
-		// Datasets fuer Chart.js vorbereiten
-		$jsLabels = json_encode($cableChartData['labels']);
-		$datasets = array();
+		// Datasets fuer beide Modi vorbereiten
+		$jsLabels = json_encode($cableChartDataPerMeter['labels']);
+		$datasetsPerMeter = array();
+		$datasetsTotal = array();
 		$colorIndex = 0;
 
-		foreach ($cableChartData['products'] as $productId => $productData) {
+		foreach ($cableChartDataPerMeter['products'] as $productId => $productData) {
 			$color = $colors[$colorIndex % count($colors)];
-			$datasets[] = array(
+			$datasetsPerMeter[] = array(
 				'label' => $productData['label'],
 				'data' => $productData['data'],
 				'borderColor' => $color,
@@ -380,49 +415,151 @@ if (!empty($cablesWithKupfer) && !empty($chartData['labels'])) {
 				'borderWidth' => 2,
 				'tension' => 0.3,
 				'spanGaps' => true,
+				'productId' => $productId,
 			);
 			$colorIndex++;
 		}
 
-		$jsDatasets = json_encode($datasets);
-		$yAxisLabel = ($cableMode == 'total') ? $langs->trans("MetallzuschlagTotalAmountEUR") : $langs->trans("MetallzuschlagPerMeterEUR");
+		$colorIndex = 0;
+		foreach ($cableChartDataTotal['products'] as $productId => $productData) {
+			$color = $colors[$colorIndex % count($colors)];
+			$datasetsTotal[] = array(
+				'label' => $productData['label'],
+				'data' => $productData['data'],
+				'borderColor' => $color,
+				'backgroundColor' => 'transparent',
+				'borderWidth' => 2,
+				'tension' => 0.3,
+				'spanGaps' => true,
+				'productId' => $productId,
+			);
+			$colorIndex++;
+		}
+
+		$jsDatasetsPerMeter = json_encode($datasetsPerMeter);
+		$jsDatasetsTotal = json_encode($datasetsTotal);
+		$yAxisLabelPerMeter = $langs->trans("MetallzuschlagPerMeterEUR");
+		$yAxisLabelTotal = $langs->trans("MetallzuschlagTotalAmountEUR");
 
 		print '<script>';
-		print 'document.addEventListener("DOMContentLoaded", function() {';
+		print 'var cableChartInstance = null;';
+		print 'var cableChartLabels = '.$jsLabels.';';
+		print 'var cableChartDatasetsPerMeter = '.$jsDatasetsPerMeter.';';
+		print 'var cableChartDatasetsTotal = '.$jsDatasetsTotal.';';
+		print 'var cableChartCurrentMode = "'.dol_escape_js($cableMode).'";';
+		print 'var cableChartShowDiff = false;';
+		print 'var cableChartYLabelPerMeter = "'.dol_escape_js($yAxisLabelPerMeter).'";';
+		print 'var cableChartYLabelTotal = "'.dol_escape_js($yAxisLabelTotal).'";';
+		print '';
+		print 'var cableDiffPlugin = {';
+		print '  id: "cableDiffLabels",';
+		print '  afterDatasetsDraw: function(chart) {';
+		print '    if (!cableChartShowDiff) return;';
+		print '    var ctx = chart.ctx;';
+		print '    chart.data.datasets.forEach(function(dataset, i) {';
+		print '      var meta = chart.getDatasetMeta(i);';
+		print '      if (meta.hidden) return;';
+		print '      var data = dataset.data;';
+		print '      ctx.font = "9px Arial";';
+		print '      ctx.textAlign = "center";';
+		print '      meta.data.forEach(function(point, index) {';
+		print '        if (index === 0 || data[index] === null || data[index - 1] === null) return;';
+		print '        var diff = data[index] - data[index - 1];';
+		print '        if (Math.abs(diff) < 0.001) return;';
+		print '        var sign = diff > 0 ? "+" : "";';
+		print '        ctx.fillStyle = dataset.borderColor;';
+		print '        ctx.fillText(sign + diff.toFixed(2), point.x, point.y - 6);';
+		print '      });';
+		print '    });';
+		print '  }';
+		print '};';
+		print '';
+		print 'function cableChartGetDatasets() {';
+		print '  var datasets = cableChartCurrentMode === "total" ? cableChartDatasetsTotal : cableChartDatasetsPerMeter;';
+		print '  return JSON.parse(JSON.stringify(datasets));';
+		print '}';
+		print '';
+		print 'function cableChartInit() {';
 		print '  var ctx = document.getElementById("cableChart").getContext("2d");';
-		print '  new Chart(ctx, {';
+		print '  var yLabel = cableChartCurrentMode === "total" ? cableChartYLabelTotal : cableChartYLabelPerMeter;';
+		print '  cableChartInstance = new Chart(ctx, {';
 		print '    type: "line",';
+		print '    plugins: [cableDiffPlugin],';
 		print '    data: {';
-		print '      labels: '.$jsLabels.',';
-		print '      datasets: '.$jsDatasets;
+		print '      labels: cableChartLabels,';
+		print '      datasets: cableChartGetDatasets()';
 		print '    },';
 		print '    options: {';
 		print '      responsive: true,';
 		print '      maintainAspectRatio: false,';
 		print '      interaction: { mode: "index", intersect: false },';
 		print '      plugins: {';
+		print '        legend: { display: false },';
 		print '        tooltip: {';
 		print '          callbacks: {';
 		print '            label: function(ctx) {';
-		print '              return ctx.dataset.label + ": " + (ctx.parsed.y !== null ? ctx.parsed.y.toFixed(2) : "-") + " €";';
+		print '              var val = ctx.parsed.y !== null ? ctx.parsed.y.toFixed(2) : "-";';
+		print '              var diff = "";';
+		print '              if (ctx.dataIndex > 0 && ctx.parsed.y !== null) {';
+		print '                var prev = ctx.dataset.data[ctx.dataIndex - 1];';
+		print '                if (prev !== null) {';
+		print '                  var d = ctx.parsed.y - prev;';
+		print '                  diff = " (" + (d >= 0 ? "+" : "") + d.toFixed(2) + ")";';
+		print '                }';
+		print '              }';
+		print '              return ctx.dataset.label + ": " + val + " €" + diff;';
 		print '            }';
 		print '          }';
 		print '        }';
 		print '      },';
 		print '      scales: {';
-		print '        x: {';
-		print '          ticks: { maxTicksLimit: 12 }';
-		print '        },';
+		print '        x: { ticks: { maxTicksLimit: 12 } },';
 		print '        y: {';
 		print '          type: "linear",';
 		print '          position: "left",';
-		print '          title: { display: true, text: "'.dol_escape_js($yAxisLabel).'" },';
+		print '          title: { display: true, text: yLabel },';
 		print '          ticks: { callback: function(v) { return v.toFixed(2) + " €"; } }';
 		print '        }';
 		print '      }';
 		print '    }';
 		print '  });';
-		print '});';
+		print '  cableChartUpdateVisibility();';
+		print '}';
+		print '';
+		print 'function cableChartSwitchMode(mode) {';
+		print '  cableChartCurrentMode = mode;';
+		print '  var datasets = cableChartGetDatasets();';
+		print '  cableChartInstance.data.datasets = datasets;';
+		print '  cableChartInstance.options.scales.y.title.text = mode === "total" ? cableChartYLabelTotal : cableChartYLabelPerMeter;';
+		print '  cableChartUpdateVisibility();';
+		print '}';
+		print '';
+		print 'function cableChartToggleDiff() {';
+		print '  cableChartShowDiff = document.getElementById("cableShowDiff").checked;';
+		print '  cableChartInstance.update();';
+		print '}';
+		print '';
+		print 'function cableChartUpdateVisibility() {';
+		print '  var checkboxes = document.querySelectorAll(".cable-checkbox");';
+		print '  var visibleIds = [];';
+		print '  checkboxes.forEach(function(cb) {';
+		print '    if (cb.checked) visibleIds.push(parseInt(cb.dataset.id));';
+		print '  });';
+		print '  cableChartInstance.data.datasets.forEach(function(ds, i) {';
+		print '    var meta = cableChartInstance.getDatasetMeta(i);';
+		print '    meta.hidden = !visibleIds.includes(ds.productId);';
+		print '  });';
+		print '  cableChartInstance.update();';
+		print '}';
+		print '';
+		print 'function cableChartToggleAll() {';
+		print '  var checkboxes = document.querySelectorAll(".cable-checkbox");';
+		print '  var allChecked = Array.from(checkboxes).every(cb => cb.checked);';
+		print '  checkboxes.forEach(cb => cb.checked = !allChecked);';
+		print '  cableChartUpdateVisibility();';
+		print '}';
+		print '';
+		print 'document.addEventListener("DOMContentLoaded", cableChartInit);';
 		print '</script>';
 	} else {
 		print '<div class="opacitymedium">'.$langs->trans("MetallzuschlagNoData").'</div>';