td-plots 1.5.1 → 1.5.2

package/dist/components/Utils.d.ts

@@ -5,3 +5,5 @@ export declare function calculateStandardDeviation(arr: number[] | Date[]): numb
 export declare const formatDateMDY: (timestamp: number) => string;
 export declare const roundToNextDay: (timestamp: number) => string;
 export declare const roundToPrevDay: (timestamp: number) => string;
+export declare const plotlyMToMilliseconds: (mString: string) => number;
+export declare const convertDateDescriptionToTimestamp: (startValue: string | number) => number;

package/dist/index.esm.js

@@ -37,6 +37,7 @@ var css_248z = ".plot-container{height:100%;max-width:100%;min-height:300px;over
 styleInject(css_248z);
 
 // Utility functions for our components
+var ONEAVGMONTH = 2629800000; // Average month length in ms, copied from plotly constants in plotly.js/src/constants/numerical.js
 // Type guard to check if array contains only numbers
 var isNumberArray = function (arr) {
     return arr.every(function (item) { return typeof item === 'number' && !isNaN(item); });
@@ -89,6 +90,44 @@ var roundToPrevDay = function (timestamp) {
     date.setHours(0, 0, 0, 0); // Start of day
     return date.toISOString();
 };
+// Convert plotly M# string to number of milliseconds
+// According to the docs, plotly will use M# whenever the bin size is
+// larger than one average month. Even if the bin size is 2 years, plotly 
+// will still use M24 instead of Y2 (plotly.js/src/plots/cartesian/axes.js).
+var plotlyMToMilliseconds = function (mString) {
+    var match = mString.match(/^M(\d+)$/);
+    if (match) {
+        var months = parseInt(match[1], 10);
+        return months * ONEAVGMONTH;
+    }
+    else {
+        console.error("plotlyMToMilliseconds: Invalid M# string: ".concat(mString));
+    }
+    return 0;
+};
+// Convert a string specifying a day (with no time) to a timestamp
+var convertDateDescriptionToTimestamp = function (startValue) {
+    if (typeof startValue === 'number') {
+        // Then we're assuming it's already a timestamp
+        return startValue;
+    }
+    if (typeof startValue === 'string') {
+        // Try to parse the date string.
+        var date = new Date(startValue);
+        // Sometimes the date will fail to be a proper Date if it does not
+        // have a time component. Add a time stamp if necessary.
+        if (isNaN(date.getTime())) {
+            // Then date did not have a time and is just a day. Try adding a time.
+            var dateWithTime = new Date(startValue + 'T00:00:00');
+            if (isNaN(dateWithTime.getTime())) {
+                throw new Error("Cannot parse date: ".concat(startValue));
+            }
+            return dateWithTime.getTime();
+        }
+        return date.getTime();
+    }
+    throw new Error("Unexpected type for start value: ".concat(typeof startValue));
+};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6093,8 +6132,8 @@ var HistogramPlot = function (props) {
             // This is the start of the first bin out of all the traces. The global first bin.
             var globalFirstBinStart = void 0;
             if (isDateArray(data)) {
-                // Date bins are represented as strings. We'll need to convert them to timestamps.
-                globalFirstBinStart = new Date(event.points[0].data.xbins.start).getTime();
+                // Date bins are represented as strings (sometimes). We'll need to convert whatever plotly gives us to timestamps.
+                globalFirstBinStart = convertDateDescriptionToTimestamp(event.points[0].data.xbins.start);
                 minTraceValue = Math.min.apply(Math, data.map(function (d) { return d.getTime(); }));
             }
             else {
@@ -6107,10 +6146,14 @@ var HistogramPlot = function (props) {
                 minTraceValue = Math.min.apply(Math, data);
                 globalFirstBinStart = event.points[0].data.xbins.start;
             }
+            // Finally, we need to calculate the min and max values of the clicked bin.
+            // If the bin size is a month or more, plotly records it in their "mstring" format like "M3" for 3 months.
+            // We then must convert it back to milliseconds. Otherwise, it's always ms.
+            var binSize = typeof event.points[0].data.xbins.size === 'string'
+                ? plotlyMToMilliseconds(event.points[0].data.xbins.size)
+                : event.points[0].data.xbins.size;
             // This minTraceValue is in the 0th bin of this trace. Find the index of this bin in the whole plot.
-            var clickedBinGlobalIndex = clickedBinIndex + Math.floor((minTraceValue - globalFirstBinStart) / event.points[0].data.xbins.size);
-            // Finally we can calculate the min and max values of the clicked bin.
-            var binSize = event.points[0].data.xbins.size;
+            var clickedBinGlobalIndex = clickedBinIndex + Math.floor((minTraceValue - globalFirstBinStart) / binSize);
             var _a = [
                 globalFirstBinStart + clickedBinGlobalIndex * binSize,
                 globalFirstBinStart + (clickedBinGlobalIndex + 1) * binSize
@@ -6143,7 +6186,11 @@ var HistogramPlot = function (props) {
                     // Means at least one bin has been selected
                     var firstBinMidPoint = new Date(event.points[0].x).getTime();
                     var lastBinMidPoint = new Date(event.points[event.points.length - 1].x).getTime();
-                    var binSize = event.points[0].data.xbins.size;
+                    // If the bin size is a month or more, plotly records it in their "mstring" format like "M3" for 3 months.
+                    // We then must convert it back to milliseconds. Otherwise, it's always ms.
+                    var binSize = typeof event.points[0].data.xbins.size === 'string'
+                        ? plotlyMToMilliseconds(event.points[0].data.xbins.size)
+                        : event.points[0].data.xbins.size;
                     minValue = new Date(firstBinMidPoint - binSize / 2);
                     maxValue = new Date(lastBinMidPoint + binSize / 2);
                 }
@@ -6308,7 +6355,7 @@ var HistogramPlot = function (props) {
     // If binSizeOverride is provided, use it to set the bin size and range explicitly. 
     // Plotly does a better job of setting bins and ending them at nice numbers, so only use
     // this prop when necessary.
-    var xBins = binSizeOverride
+    var xBins = (binSizeOverride && allData.length > 0)
         ? (isDateArray(allData)
             ? {
                 start: roundToPrevDay(Math.min.apply(Math, allData.map(function (d) { return d.getTime(); }))), // Find a nice round number as a starting point.
@@ -6338,7 +6385,7 @@ var HistogramPlot = function (props) {
                 width: 0.5,
             },
         },
-        hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>', // Custom hover text
+        hovertemplate: '[%{x})<br>Count: %{y}<extra></extra>',
     };
     var meanAnnotation = (statsAnnotations.includes('mean') && meanLine && data.length > 0) ? [{
             x: meanValue,
@@ -6429,6 +6476,7 @@ var HistogramPlot = function (props) {
             ticklabelposition: 'outside',
             tickformat: isDateArray(data) ? dateTickFormat : undefined, // Format ticks for dates
             automargin: true, // Adjust margin if tick labels rotate
+            hoverformat: (isNumberArray(allData) && Math.max.apply(Math, allData) - Math.min.apply(Math, allData) > 3) ? '.1~f' : undefined,
         },
         yaxis: {
             title: {