feat: Differenz-Anzeige und UI-Verbesserungen
- 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>
This commit is contained in:
parent
0b280144c0
commit
105443f2e9
5 changed files with 223 additions and 74 deletions
11
ChangeLog.md
11
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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;">■</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>';
|
||||
|
|
|
|||
Loading…
Reference in a new issue