Remove tick labels that are outside the selected date interval

classes/DataWarehouse/Visualization/TimeseriesChart.php

@@ -636,7 +636,6 @@ public function configure(
                         $value_count = count($xValues);
 
                         if (($this->_aggregationUnit == 'Day' || $this->_aggregationUnit == 'day')) {
-                            $this->_chart['layout']['xaxis']['type'] = 'category';
                             $this->_chart['layout']['xaxis']['tickmode'] = 'auto';
                         }
 

html/.eslintrc.json

@@ -24,6 +24,7 @@
     "DashboardStore": false,
     "grecaptcha": false,
     "StringUtilities": false,
-    "Plotly": false
+    "Plotly": false,
+    "removeExtraTimeseriesTickLabels": false
   }
 }

html/gui/js/PlotlyChartWrapper.js

@@ -130,11 +130,13 @@ XDMoD.utils.createChart = function (chartOptions, extraHandlers) {
 
         if (baseChartOptions.layout.annotations.length === 0
            || (baseChartOptions.summary || baseChartOptions.dashboard || baseChartOptions.realmOverview)) {
+            removeExtraTimeseriesTickLabels(chartDiv, baseChartOptions);
             return;
         }
 
         const update = relayoutChart(chartDiv, baseChartOptions.layout.height, true);
         Plotly.relayout(baseChartOptions.renderTo, update);
+        removeExtraTimeseriesTickLabels(chartDiv, baseChartOptions);
     });
 
     return chart;

html/gui/js/PlotlyPanel.js

@@ -253,6 +253,7 @@ Ext.extend(CCR.xdmod.ui.PlotlyPanel, Ext.Panel, {
                                         return false;
                                 }
                             });
+                            removeExtraTimeseriesTickLabels(chartDiv, this.chartOptions);
                         });
                         // Subtitle context menu
                         chartDiv.on('plotly_clickannotation', (evt) => {

html/gui/js/libraries/PlotlyUtilities.js

@@ -543,3 +543,29 @@ function overrideLegendEvent(chartDiv) {
 
     chartDiv.on('plotly_legenddoubleclick', (evt) => false);
 }
+/**
+ * Removes tick labels outside the selected time interval
+ * from the domain axis of the timeseries plot.
+ *
+ * @param {Object} chartDiv - Plotly JS chart div
+ * @param {Object} baseChartOptions - Object contain Plotly JS layout and data
+ */
+function removeExtraTimeseriesTickLabels(chartDiv, baseChartOptions) { // eslint-disable-line
+    const axis = baseChartOptions.layout.swapXY ? 'yaxis' : 'xaxis';
+    const isEmpty = (!baseChartOptions.data) || (baseChartOptions.data && baseChartOptions.data.length === 0);
+    if (!isEmpty && baseChartOptions.layout[axis].timeseries) {
+        const xAxisTicks = chartDiv.getElementsByClassName(`${axis}layer-below`)[0];
+        const len = baseChartOptions.layout.swapXY ? baseChartOptions.data[0].y.length - 1 : baseChartOptions.data[0].x.length - 1;
+        const min = baseChartOptions.layout.swapXY ? baseChartOptions.data[0].y[0] : baseChartOptions.data[0].x[0];
+        const max = baseChartOptions.layout.swapXY ? baseChartOptions.data[0].y[len] : baseChartOptions.data[0].x[len];
+        const minString = moment(min).format('YYYY-MM-DD');
+        const maxString = moment(max).format('YYYY-MM-DD');
+        for (let i = 0; i < xAxisTicks.children.length; i++) {
+            const currTick = xAxisTicks.children[i];
+            const currDate = moment(currTick.__data__.text);
+            if (currDate.isBefore(minString) || currDate.isAfter(maxString)) {
+                currTick.remove();
+            }
+        }
+    }
+}

html/gui/js/modules/Usage.js

@@ -2592,6 +2592,7 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
                     Plotly.relayout(this.chartId, { width: adjWidth, height: adjHeight });
                     const update = relayoutChart(chartDiv, adjHeight, false);
                     Plotly.relayout(this.chartId, update);
+                    removeExtraTimeseriesTickLabels(chartDiv, this.chartOptions);
                 }
             }
         } //onResize
@@ -2726,6 +2727,10 @@ Ext.extend(XDMoD.Module.Usage, XDMoD.PortalModule, {
                             this.chartOptions = chartOptions;
                             var chartDiv = document.getElementById(baseChartOptions.renderTo);
 
+                            chartDiv.on('plotly_relayout', (evt) => {
+                                removeExtraTimeseriesTickLabels(chartDiv, this.chartOptions);
+                            });
+
                             chartDiv.on('plotly_click', (evt) => {
                                 let drillId;
                                 let label;

html/gui/js/modules/metric_explorer/MetricExplorer.js

@@ -6337,6 +6337,7 @@ Ext.extend(XDMoD.Module.MetricExplorer, XDMoD.PortalModule, {
                 Plotly.relayout(`plotly-panel${this.id}`, { width: adjWidth, height: adjHeight });
                 const update = relayoutChart(chartDiv, adjHeight, false);
                 Plotly.relayout(`plotly-panel${this.id}`, update);
+                removeExtraTimeseriesTickLabels(chartDiv, CCR.xdmod.ui.metricExplorer.plotlyPanel.chartOptions);
             }
         } //onResize
 

html/plotly_template.html

@@ -115,7 +115,7 @@
                 }
                 const update = relayoutChart(chartDiv, chartOptions.layout.height, true, true);
                 Plotly.relayout('container', update);
-
+                removeExtraTimeseriesTickLabels(chartDiv, chartOptions);
             });
         });