From bda692bd87b13934fe0ade1baf594d06926f2f5b Mon Sep 17 00:00:00 2001 From: Chip Cuccio Date: Sun, 14 May 2023 12:54:58 -0500 Subject: [PATCH] For my custom WindDir charts, use ordinal direction names for labels (degrees are still in the hover tooltip). Also cleaned up WindDir chart grid for consistency. --- src/graph_line_archive_config.inc | 2 +- src/graph_line_config.inc | 2 +- src/index.html.tmpl | 39 ++++++++++++++++++++++++++----- src/js.inc | 9 ++++++- src/month-%Y-%m.html.tmpl | 39 ++++++++++++++++++++++++++----- src/month.html.tmpl | 39 ++++++++++++++++++++++++++----- src/week.html.tmpl | 39 ++++++++++++++++++++++++++----- src/year-%Y.html.tmpl | 39 ++++++++++++++++++++++++++----- src/year.html.tmpl | 39 ++++++++++++++++++++++++++----- src/yesterday.html.tmpl | 39 ++++++++++++++++++++++++++----- 10 files changed, 241 insertions(+), 45 deletions(-) diff --git a/src/graph_line_archive_config.inc b/src/graph_line_archive_config.inc index 6f55697..c5f98b7 100644 --- a/src/graph_line_archive_config.inc +++ b/src/graph_line_archive_config.inc @@ -63,7 +63,7 @@ grid: { position: 'back', xaxis: { lines: { - show: true + show: false } }, yaxis: { diff --git a/src/graph_line_config.inc b/src/graph_line_config.inc index cd73c19..29e7f29 100644 --- a/src/graph_line_config.inc +++ b/src/graph_line_config.inc @@ -63,7 +63,7 @@ grid: { position: 'back', xaxis: { lines: { - show: true + show: false } }, yaxis: { diff --git a/src/index.html.tmpl b/src/index.html.tmpl index e57b51a..2dd346d 100644 --- a/src/index.html.tmpl +++ b/src/index.html.tmpl @@ -229,18 +229,45 @@ new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/js.inc b/src/js.inc index cebab32..1db9810 100644 --- a/src/js.inc +++ b/src/js.inc @@ -76,4 +76,11 @@ }, }, } - \ No newline at end of file + +## Ordinals conversion for W0CHP's custom WindDir Charts: +function getOrdinalDirection(degrees) { + var sectors = ['North', 'NE', 'East', 'SE', 'South', 'SW', 'West', 'NW']; + var index = Math.round(degrees / (360 / sectors.length)); + return sectors[index % sectors.length]; +} + diff --git a/src/month-%Y-%m.html.tmpl b/src/month-%Y-%m.html.tmpl index 0f7fea2..1178602 100644 --- a/src/month-%Y-%m.html.tmpl +++ b/src/month-%Y-%m.html.tmpl @@ -258,18 +258,45 @@ new ApexCharts(document.querySelector('#$id'), { new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/month.html.tmpl b/src/month.html.tmpl index 2194af5..d19a0f7 100644 --- a/src/month.html.tmpl +++ b/src/month.html.tmpl @@ -211,18 +211,45 @@ new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/week.html.tmpl b/src/week.html.tmpl index 01f6939..7b75d35 100644 --- a/src/week.html.tmpl +++ b/src/week.html.tmpl @@ -211,18 +211,45 @@ new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/year-%Y.html.tmpl b/src/year-%Y.html.tmpl index de577a5..e8b8dc6 100644 --- a/src/year-%Y.html.tmpl +++ b/src/year-%Y.html.tmpl @@ -304,18 +304,45 @@ new ApexCharts(document.querySelector('#$id'), { new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/year.html.tmpl b/src/year.html.tmpl index d79e518..05b8a53 100644 --- a/src/year.html.tmpl +++ b/src/year.html.tmpl @@ -256,18 +256,45 @@ new ApexCharts(document.querySelector('#$id'), { new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)", diff --git a/src/yesterday.html.tmpl b/src/yesterday.html.tmpl index 86b835b..8fee606 100644 --- a/src/yesterday.html.tmpl +++ b/src/yesterday.html.tmpl @@ -230,18 +230,45 @@ half_length4 = Math.ceil(series4data.length / 2); new ApexCharts(document.querySelector('#$id'), { ...graph_${type}_config, - yaxis: { - #if $name == "windDir" + #if $name == "windDir" + yaxis: { max: 360, min: 0, + type: 'datetime', tickAmount: 8, - #end if + trim: false, labels: { - formatter: function (val) { - return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + tickAmount: 8, + rotateAlways: false, + hideOverlappingLabels: true, + showDuplicates: false, + trim: false, + formatter: function(val, timestamp) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction; } }, - }, + }, + tooltip: { + enabled: true, + y: { + formatter: function (val) { + var degrees = Number(val); + var direction = getOrdinalDirection(degrees); + return direction + ' (' + degrees.toFixed(0) + '°)'; + } + }, + }, + #else + yaxis: { + labels: { + formatter: function (val) { + return formatNumber(val, "$getVar('unit.format.' + name)") + "$getVar('unit.label.' + name)"; + } + }, + }, + #end if series: [ { name: "$getVar('obs.label.' + series1)",