Chart updates

btcpayserver · Nov 18, 2024 · 951636a · 951636a
1 parent 7d96c69
commit 951636a
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 62 deletions.
diff --git a/BTCPayApp.UI/Components/AppItemStats.razor b/BTCPayApp.UI/Components/AppItemStats.razor
@@ -66,8 +66,9 @@
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (Series == null) return;
+        var labels = Series.Select(s => s.Title);
         var series = Series.Select(s => s.SalesCount);
-        await JS.InvokeVoidAsync("Chart.renderHorizontalBarChart", $"#{HtmlId} .ct-chart", null, series);
+        await JS.InvokeVoidAsync("Chart.renderHorizontalBarChart", $"#{HtmlId} .ct-chart", labels, series);
     }
 
     public void Dispose()

diff --git a/BTCPayApp.UI/wwwroot/chartist/chartist-plugin-tooltip.css b/BTCPayApp.UI/wwwroot/chartist/chartist-plugin-tooltip.css
@@ -5,17 +5,40 @@
  */
 
 .chartist-tooltip {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+  visibility: hidden;
+  transform: translateY(3em);
+  opacity: 0;
+  transition: transform 50ms ease-in-out;
+  pointer-events: none;
+}
+.chartist-tooltip:not([hidden]) {
+  margin: 0;
+  visibility: visible;
+  transform: none;
+  opacity: 1;
+}
+.chartist-tooltip .chartist-tooltip-inner {
+  display: block;
+  padding: var(--btcpay-space-xs) var(--btcpay-space-s);
+  border-radius: var(--btcpay-border-radius);
+  border: 1px solid var(--btcpay-bg-tile);
+  background-color: var(--btcpay-bg-tile);
+  color: var(--btcpay-body-text);
 }
 .chartist-tooltip .chartist-tooltip-value {
-    background-color: var(--btcpay-bg-tile);
-    border-radius: var(--btcpay-border-radius);
-    padding: var(--btcpay-space-xs) var(--btcpay-space-s);
-    font-size: var(--btcpay-font-size-s);
-    text-align: center;
+  background-color: var(--btcpay-bg-tile);
+  border-radius: var(--btcpay-border-radius);
+  padding: 0 var(--btcpay-space-s);
+  font-size: var(--btcpay-font-size-s);
+  text-align: center;
 }
 .chartist-tooltip .chartist-tooltip-value-date {
   color: var(--btcpay-body-text-muted);
@@ -26,45 +49,28 @@
     background: var(--btcpay-body-text);
     opacity: .8;
 }
-.chartist-tooltip {
-    position: absolute;
-    left: 0;
-    top: 0;
-    z-index: 1000;
-    visibility: hidden;
-    transform: translateY(3em);
-    opacity: 0;
-    transition: transform 50ms ease-in-out;
-    pointer-events: none;
-}
-.chartist-tooltip:not([hidden]) {
-    margin: 0;
-    visibility: visible;
-    transform: none;
-    opacity: 1;
-}
 
-/* Tooltip arrow
-.chartist-tooltip::before {
-    content: '\25BC';
-    position: absolute;
-    left: calc(50% - .5em);
-    top: 100%;
-    z-index: -1;
-    font-size: 1.3em;
-    line-height: .5em;
-    font-family: Arial, sans-serif;
-    color: var(--btcpay-body-border-light);
-    transform: scaleY(0.7);
-    text-shadow: 0 0.25em 0.35em rgba(0, 0, 0, 0.1);
+/* Tooltip arrow */
+.chartist-tooltip-inner::before {
+  content: '\25BC';
+  position: absolute;
+  left: calc(50% - .5em);
+  top: 90%;
+  z-index: -1;
+  font-size: 1.3em;
+  line-height: .5em;
+  font-family: Arial, sans-serif;
+  color: var(--btcpay-bg-tile);
+  transform: scaleY(0.7);
+  text-shadow: 0 0.25em 0.35em rgba(0, 0, 0, 0.1);
+}
+.chartist-tooltip--left .chartist-tooltip-inner::before {
+  left: 0.75em;
 }
-.chartist-tooltip--left::before {
-    left: 0.75em;
+.chartist-tooltip--right .chartist-tooltip-inner::before {
+  left: auto;
+  right: 0.75em;
 }
-.chartist-tooltip--right::before {
-    left: auto;
-    right: 0.75em;
-}*/
 
 /* Adds a small point transition (line charts) when the point is active */
 .ct-chart[data-charttooltip-id] .ct-point {

diff --git a/BTCPayApp.UI/wwwroot/chartist/chartist-plugin-tooltip.js b/BTCPayApp.UI/wwwroot/chartist/chartist-plugin-tooltip.js
@@ -199,18 +199,13 @@
                     seriesData = chart.options.reverseData ? seriesData.reverse()[seriesIndex] : seriesData[seriesIndex];
                     seriesData = (!Array.isArray(seriesData) && typeof seriesData == 'object' && seriesData.data) ? seriesData.data : seriesData;
 
-                    if (!seriesData) {
-                        return;
-                    }
-
+                    if (!seriesData) return;
                     itemData = (!Array.isArray(seriesData) && typeof seriesData == 'object') ? seriesData : seriesData[valueIndex];
-
-                    if (typeof itemData == 'undefined') {
-                        return;
-                    }
+                    if (!itemData && typeof seriesData == 'number') itemData = { value: seriesData, meta: chart.data.labels[seriesIndex] };
+                    if (typeof itemData == 'undefined') return;
                     meta = itemData.meta;
                     value = itemData.value || itemData;
-
+                    if (typeof itemData == 'undefined') return;
                     if (typeof options.valueTransformFunction === 'function') {
                         value = options.valueTransformFunction.call(chart, value, chart.data.labels[valueIndex], valueIndex);
                     }

diff --git a/BTCPayApp.UI/wwwroot/js/global.js b/BTCPayApp.UI/wwwroot/js/global.js
@@ -113,9 +113,7 @@ Chart = {
       low,
       fullWidth: true,
       showArea: true,
-      //lineSmooth: false,
       axisY: {
-        //labelInterpolationFnc: valueTransform,
         showLabel: false,
         offset: 0
       },
@@ -129,8 +127,8 @@ Chart = {
           template: '<div class="chartist-tooltip-value">{{value}}</div><div class="chartist-tooltip-line"></div>',
           offset: {
             x: 0,
-            y: -32,
-            lineY: -17.5
+            y: -24,
+            lineY: -24
           },
           valueTransformFunction(value, label) {
             return Chart.lineChartTooltipValueTransform(value, label)
@@ -146,15 +144,24 @@ Chart = {
   renderHorizontalBarChart(selector, labels, series) {
     const $el = document.querySelector(selector);
     if (!$el) return;
-    const data = { series };
+    const data = { series, labels };
     const opts = {
       distributeSeries: true,
       horizontalBars: true,
       showLabel: false,
       stackBars: true,
       axisY: {
         offset: 0
-      }
+      },
+      plugins: [
+        Chartist.plugins.tooltip2({
+          template: '<div class="chartist-tooltip-inner">{{meta}} - Sales: {{value}}</div>',
+          offset: {
+            x: 0,
+            y: -8
+          }
+        })
+      ]
     };
     if (!$el.__chartist__)
       new Chartist.Bar(selector, data, opts);
@@ -168,7 +175,21 @@ Chart = {
     const max = Math.max(...series);
     const low = min === max ? 0 : Math.max(min - ((max - min) / 5), 0);
     const data = { labels, series: [series] }
-    const opts = { low, axisY: { onlyInteger: true } };
+    const opts = {
+      low,
+      axisY: {
+        onlyInteger: true
+      },
+      plugins: [
+        Chartist.plugins.tooltip2({
+          template: '<div class="chartist-tooltip-inner">Sales: {{value}}</div>',
+          offset: {
+            x: 0,
+            y: -8
+          }
+        })
+      ]
+    };
     if (!$el.__chartist__)
       new Chartist.Bar(selector, data, opts);
     else