@perses-dev/timeseries-chart-plugin 0.12.1 → 0.13.0-beta.0

package/lib/cjs/TimeSeriesChartBase.js

@@ -25,13 +25,13 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
 const _isEqual = /*#__PURE__*/ _interop_require_default(require("lodash/isEqual"));
-const _datefnstz = require("date-fns-tz");
 const _core = require("@perses-dev/core");
 const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _components1 = require("@perses-dev/components");
+const _timezoneformatter = require("./utils/timezone-formatter");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -61,6 +61,9 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
     const { timeZone } = (0, _components1.useTimeZone)();
+    const getTimezoneAwareAxisFormatter = (0, _react.useCallback)((rangeMs)=>(0, _timezoneformatter.createTimezoneAwareAxisFormatter)(rangeMs, timeZone), [
+        timeZone
+    ]);
     let timeScale;
     if (timeScaleProp === undefined) {
         const commonTimeScale = (0, _core.getCommonTimeScale)(data);
@@ -142,12 +145,11 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         // Utilizes ECharts dataset so raw data is separate from series option style properties
         // https://apache.github.io/echarts-handbook/en/concepts/dataset/
         const dataset = [];
-        const isLocalTimeZone = timeZone === 'local';
         data.map((d, index)=>{
             const values = d.values.map(([timestamp, value])=>{
                 const val = value === null ? '-' : value; // echarts use '-' to represent null data
                 return [
-                    isLocalTimeZone ? timestamp : (0, _datefnstz.toZonedTime)(timestamp, timeZone),
+                    timestamp,
                     val
                 ];
             });
@@ -171,11 +173,11 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
             series: updatedSeriesMapping,
             xAxis: {
                 type: 'time',
-                min: isLocalTimeZone ? timeScale.startMs : (0, _datefnstz.toZonedTime)(timeScale.startMs, timeZone),
-                max: isLocalTimeZone ? timeScale.endMs : (0, _datefnstz.toZonedTime)(timeScale.endMs, timeZone),
+                min: timeScale.startMs,
+                max: timeScale.endMs,
                 axisLabel: {
                     hideOverlap: true,
-                    formatter: (0, _components1.getFormattedAxisLabel)(timeScale.rangeMs ?? 0)
+                    formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0)
                 },
                 axisPointer: {
                     snap: false
@@ -224,10 +226,10 @@ const TimeSeriesChartBase = /*#__PURE__*/ (0, _react.forwardRef)(function TimeCh
         noDataOption,
         __experimentalEChartsOptionsOverride,
         noDataVariant,
-        timeZone,
         isStackedBar,
         enablePinning,
-        pinnedCrosshair
+        pinnedCrosshair,
+        getTimezoneAwareAxisFormatter
     ]);
     // Update adjacent charts so tooltip is unpinned when current chart is clicked.
     (0, _react.useEffect)(()=>{

package/lib/cjs/utils/timezone-formatter.js

@@ -0,0 +1,48 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createTimezoneAwareAxisFormatter", {
+    enumerable: true,
+    get: function() {
+        return createTimezoneAwareAxisFormatter;
+    }
+});
+const _components = require("@perses-dev/components");
+const DAY_MS = 86400000;
+const MONTH_MS = 2629440000;
+const YEAR_MS = 31536000000;
+function createTimezoneAwareAxisFormatter(rangeMs, timeZone) {
+    return function(value) {
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > YEAR_MS * 5) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'yyyy', timeZone);
+        }
+        // more than 2 years
+        if (rangeMs > YEAR_MS * 2) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'MMM yyyy', timeZone);
+        }
+        // between 10 days to 6 months
+        if (rangeMs > DAY_MS * 10 && rangeMs < MONTH_MS * 6) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM', timeZone);
+        }
+        // between 2 and 10 days
+        if (rangeMs > DAY_MS * 2 && rangeMs <= DAY_MS * 10) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timeZone);
+        }
+        return (0, _components.formatWithTimeZone)(timeStamp, 'HH:mm', timeZone);
+    };
+}

package/lib/utils/timezone-formatter.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */
+export declare function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string): (value: number) => string;
+//# sourceMappingURL=timezone-formatter.d.ts.map

package/lib/utils/timezone-formatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-formatter.d.ts","sourceRoot":"","sources":["../../../src/utils/timezone-formatter.ts"],"names":[],"mappings":"AAmBA;;GAEG;AACH,wBAAgB,gCAAgC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAC/D,OAAO,MAAM,KAAG,MAAM,CAyBxC"}

package/lib/utils/timezone-formatter.js

@@ -0,0 +1,42 @@
+// Copyright The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { formatWithTimeZone } from '@perses-dev/components';
+const DAY_MS = 86400000;
+const MONTH_MS = 2629440000;
+const YEAR_MS = 31536000000;
+/**
+ * Creates a timezone-aware axis formatter function for different time ranges
+ */ export function createTimezoneAwareAxisFormatter(rangeMs, timeZone) {
+    return function(value) {
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > YEAR_MS * 5) {
+            return formatWithTimeZone(timeStamp, 'yyyy', timeZone);
+        }
+        // more than 2 years
+        if (rangeMs > YEAR_MS * 2) {
+            return formatWithTimeZone(timeStamp, 'MMM yyyy', timeZone);
+        }
+        // between 10 days to 6 months
+        if (rangeMs > DAY_MS * 10 && rangeMs < MONTH_MS * 6) {
+            return formatWithTimeZone(timeStamp, 'dd.MM', timeZone);
+        }
+        // between 2 and 10 days
+        if (rangeMs > DAY_MS * 2 && rangeMs <= DAY_MS * 10) {
+            return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timeZone);
+        }
+        return formatWithTimeZone(timeStamp, 'HH:mm', timeZone);
+    };
+}
+
+//# sourceMappingURL=timezone-formatter.js.map

package/lib/utils/timezone-formatter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/timezone-formatter.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { formatWithTimeZone } from '@perses-dev/components';\n\nconst DAY_MS = 86400000;\nconst MONTH_MS = 2629440000;\nconst YEAR_MS = 31536000000;\n\n/**\n * Creates a timezone-aware axis formatter function for different time ranges\n */\nexport function createTimezoneAwareAxisFormatter(rangeMs: number, timeZone: string) {\n  return function (value: number): string {\n    const timeStamp = new Date(Number(value));\n\n    // more than 5 years\n    if (rangeMs > YEAR_MS * 5) {\n      return formatWithTimeZone(timeStamp, 'yyyy', timeZone);\n    }\n\n    // more than 2 years\n    if (rangeMs > YEAR_MS * 2) {\n      return formatWithTimeZone(timeStamp, 'MMM yyyy', timeZone);\n    }\n\n    // between 10 days to 6 months\n    if (rangeMs > DAY_MS * 10 && rangeMs < MONTH_MS * 6) {\n      return formatWithTimeZone(timeStamp, 'dd.MM', timeZone);\n    }\n\n    // between 2 and 10 days\n    if (rangeMs > DAY_MS * 2 && rangeMs <= DAY_MS * 10) {\n      return formatWithTimeZone(timeStamp, 'dd.MM HH:mm', timeZone);\n    }\n\n    return formatWithTimeZone(timeStamp, 'HH:mm', timeZone);\n  };\n}\n"],"names":["formatWithTimeZone","DAY_MS","MONTH_MS","YEAR_MS","createTimezoneAwareAxisFormatter","rangeMs","timeZone","value","timeStamp","Date","Number"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,kBAAkB,QAAQ,yBAAyB;AAE5D,MAAMC,SAAS;AACf,MAAMC,WAAW;AACjB,MAAMC,UAAU;AAEhB;;CAEC,GACD,OAAO,SAASC,iCAAiCC,OAAe,EAAEC,QAAgB;IAChF,OAAO,SAAUC,KAAa;QAC5B,MAAMC,YAAY,IAAIC,KAAKC,OAAOH;QAElC,oBAAoB;QACpB,IAAIF,UAAUF,UAAU,GAAG;YACzB,OAAOH,mBAAmBQ,WAAW,QAAQF;QAC/C;QAEA,oBAAoB;QACpB,IAAID,UAAUF,UAAU,GAAG;YACzB,OAAOH,mBAAmBQ,WAAW,YAAYF;QACnD;QAEA,8BAA8B;QAC9B,IAAID,UAAUJ,SAAS,MAAMI,UAAUH,WAAW,GAAG;YACnD,OAAOF,mBAAmBQ,WAAW,SAASF;QAChD;QAEA,wBAAwB;QACxB,IAAID,UAAUJ,SAAS,KAAKI,WAAWJ,SAAS,IAAI;YAClD,OAAOD,mBAAmBQ,WAAW,eAAeF;QACtD;QAEA,OAAON,mBAAmBQ,WAAW,SAASF;IAChD;AACF"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "TimeSeriesChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.12.1",
+      "buildVersion": "0.13.0-beta.0",
       "buildName": "@perses-dev/timeseries-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/TimeSeriesChart.734ed3ec.js",
+      "name": "__mf/js/TimeSeriesChart.7df900ef.js",
       "path": "",
       "type": "global"
     },
@@ -20,8 +20,7 @@
       "api": ""
     },
     "globalName": "TimeSeriesChart",
-    "pluginVersion": "0.21.6",
-    "prefetchInterface": false,
+    "pluginVersion": "2.4.0",
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/TimeSeriesChart/\"; }"
   },
   "shared": [
@@ -35,34 +34,36 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/274.8e8950b6.js"
+            "__mf/js/async/274.d112354f.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:@emotion/styled",
       "name": "@emotion/styled",
-      "version": "11.14.0",
+      "version": "11.14.1",
       "singleton": true,
-      "requiredVersion": "^11.14.0",
+      "requiredVersion": "^11.14.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/235.a53a2591.js",
-            "__mf/js/async/616.6d37f37b.js"
+            "__mf/js/async/235.c24f24f7.js",
+            "__mf/js/async/616.52acb1b4.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:@hookform/resolvers",
@@ -74,53 +75,58 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/587.40becf9b.js",
-            "__mf/js/async/968.2ea36b8a.js"
+            "__mf/js/async/587.c12780da.js",
+            "__mf/js/async/968.6de5fa7c.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.1",
+      "version": "0.54.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.53.1",
+      "requiredVersion": "^0.54.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/472.fd3069f0.js"
+            "__mf/js/async/826.c7b150c6.js"
           ]
         },
         "css": {
           "async": [],
-          "sync": []
+          "sync": [
+            "__mf/css/async/826.85c2cbf6.css"
+          ]
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.1",
+      "version": "0.54.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.53.1",
+      "requiredVersion": "^0.54.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/634.8646a5de.js"
+            "__mf/js/async/366.084dd32e.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:date-fns",
@@ -132,14 +138,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/192.30450189.js"
+            "__mf/js/async/192.beef3a1a.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:echarts",
@@ -151,33 +158,35 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/873.11e0e15e.js"
+            "__mf/js/async/873.9aad328a.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:lodash",
       "name": "lodash",
-      "version": "4.17.23",
+      "version": "4.18.1",
       "singleton": true,
-      "requiredVersion": "^4.17.23",
+      "requiredVersion": "^4.18.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/392.550376f0.js"
+            "__mf/js/async/392.2350fb02.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:react-dom",
@@ -189,14 +198,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/470.4c93905a.js"
+            "__mf/js/async/470.a4fd777e.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:react",
@@ -208,14 +218,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/121.a742c022.js"
+            "__mf/js/async/121.df4898d6.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     },
     {
       "id": "TimeSeriesChart:date-fns-tz",
@@ -227,14 +238,15 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/978.844227d5.js"
+            "__mf/js/async/978.5c14e175.js"
           ]
         },
         "css": {
           "async": [],
           "sync": []
         }
-      }
+      },
+      "fallback": ""
     }
   ],
   "remotes": [],
@@ -245,28 +257,27 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/702.5d93a78a.js",
-            "__mf/js/async/390.ad50daba.js",
-            "__mf/js/async/78.362ece9d.js",
-            "__mf/js/async/544.4dd63985.js",
-            "__mf/js/async/489.8bb61ec9.js",
-            "__mf/js/async/__federation_expose_TimeSeriesChart.54276867.js"
+            "__mf/js/async/702.de247ad8.js",
+            "__mf/js/async/721.88bf4be4.js",
+            "__mf/js/async/78.91de282a.js",
+            "__mf/js/async/377.7ec764e5.js",
+            "__mf/js/async/945.1a85358e.js",
+            "__mf/js/async/__federation_expose_TimeSeriesChart.0329eb0a.js"
           ],
           "async": [
-            "__mf/js/async/71.e481dbdb.js",
-            "__mf/js/async/588.33924c3f.js",
-            "__mf/js/async/356.dee0f34a.js",
-            "__mf/js/async/867.12a42f78.js",
-            "__mf/js/async/491.35fc6280.js",
-            "__mf/js/async/lib-router.9730f5e9.js",
-            "__mf/js/async/177.97e14ed0.js"
+            "__mf/js/async/588.6662e16a.js",
+            "__mf/js/async/356.9f551c8a.js",
+            "__mf/js/async/71.84e486c9.js",
+            "__mf/js/async/891.18ba0e56.js",
+            "__mf/js/async/491.6f81cf51.js",
+            "__mf/js/async/lib-router.1934857d.js",
+            "__mf/js/async/177.56f1be10.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/61.d3010b86.css",
-            "__mf/css/async/823.d3010b86.css"
+            "__mf/css/async/826.85c2cbf6.css"
           ]
         }
       },