@perses-dev/components 0.50.1 → 0.51.0-beta.0

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -68,18 +68,16 @@ function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, toolt
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipmodel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
 function getTooltipStyles(theme, pinnedPos, maxHeight) {
-    var _theme_palette_designSystem;
     const adjustedMaxHeight = maxHeight ? maxHeight - _tooltipmodel.TOOLTIP_PADDING : undefined;
-    var _theme_palette_designSystem_grey_;
     return {
         minWidth: _tooltipmodel.TOOLTIP_MIN_WIDTH,
         maxWidth: _tooltipmodel.TOOLTIP_MAX_WIDTH,
-        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : _tooltipmodel.TOOLTIP_MAX_HEIGHT,
+        maxHeight: adjustedMaxHeight ?? _tooltipmodel.TOOLTIP_MAX_HEIGHT,
         padding: 0,
         position: 'absolute',
         top: 0,
         left: 0,
-        backgroundColor: (_theme_palette_designSystem_grey_ = (_theme_palette_designSystem = theme.palette.designSystem) === null || _theme_palette_designSystem === void 0 ? void 0 : _theme_palette_designSystem.grey[800]) !== null && _theme_palette_designSystem_grey_ !== void 0 ? _theme_palette_designSystem_grey_ : _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
+        backgroundColor: theme.palette.designSystem?.grey[800] ?? _tooltipmodel.TOOLTIP_BG_COLOR_FALLBACK,
         borderRadius: '6px',
         color: '#fff',
         fontSize: '11px',

package/dist/cjs/TransformsEditor/TransformEditor.js

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _controls = require("../controls");
 function JoinByColumnValueTransformEditor({ value, onChange }) {
-    var _value_spec_columns;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         direction: "row",
         children: [
@@ -36,7 +35,7 @@ function JoinByColumnValueTransformEditor({ value, onChange }) {
                     width: '100%'
                 },
                 options: [],
-                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                value: value.spec.columns ?? [],
                 renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
                         variant: "outlined",
@@ -72,7 +71,6 @@ function JoinByColumnValueTransformEditor({ value, onChange }) {
     });
 }
 function MergeColumnsTransformEditor({ value, onChange }) {
-    var _value_spec_columns, _value_spec_name;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         direction: "row",
         gap: 1,
@@ -86,7 +84,7 @@ function MergeColumnsTransformEditor({ value, onChange }) {
                     width: '100%'
                 },
                 options: [],
-                value: (_value_spec_columns = value.spec.columns) !== null && _value_spec_columns !== void 0 ? _value_spec_columns : [],
+                value: value.spec.columns ?? [],
                 renderInput: (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
                         variant: "outlined",
@@ -107,7 +105,7 @@ function MergeColumnsTransformEditor({ value, onChange }) {
                 id: "merge-columns-name",
                 variant: "outlined",
                 label: "Output Name",
-                value: (_value_spec_name = value.spec.name) !== null && _value_spec_name !== void 0 ? _value_spec_name : '',
+                value: value.spec.name ?? '',
                 sx: {
                     width: '100%'
                 },
@@ -141,7 +139,6 @@ function MergeColumnsTransformEditor({ value, onChange }) {
     });
 }
 function MergeIndexedColumnsTransformEditor({ value, onChange }) {
-    var _value_spec_column;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         direction: "row",
         children: [
@@ -150,7 +147,7 @@ function MergeIndexedColumnsTransformEditor({ value, onChange }) {
                 variant: "outlined",
                 label: "Column",
                 placeholder: "Example: 'value' for merging 'value #1', 'value #2' and 'value #...'",
-                value: (_value_spec_column = value.spec.column) !== null && _value_spec_column !== void 0 ? _value_spec_column : '',
+                value: value.spec.column ?? '',
                 sx: {
                     width: '100%'
                 },

package/dist/cjs/TransformsEditor/TransformEditorContainer.js

@@ -35,14 +35,12 @@ function _interop_require_default(obj) {
     };
 }
 function TransformEditorContainer({ index, value, isCollapsed, onChange, onCollapse, onDelete, ...props }) {
-    var _value_spec, _value_spec1;
     function handleTransformDisable() {
-        var _value_spec;
         onChange({
             ...value,
             spec: {
                 ...value.spec,
-                disabled: !((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled)
+                disabled: !value.spec?.disabled
             }
         });
     }
@@ -90,7 +88,7 @@ function TransformEditorContainer({ index, value, isCollapsed, onChange, onColla
                             isCollapsed && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                                 children: [
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tooltip, {
-                                        title: ((_value_spec = value.spec) === null || _value_spec === void 0 ? void 0 : _value_spec.disabled) ? 'Enable transformation' : 'Disable transformation',
+                                        title: value.spec?.disabled ? 'Enable transformation' : 'Disable transformation',
                                         placement: "top",
                                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
                                             size: "small",
@@ -98,7 +96,7 @@ function TransformEditorContainer({ index, value, isCollapsed, onChange, onColla
                                                 marginLeft: 'auto'
                                             },
                                             onClick: handleTransformDisable,
-                                            children: ((_value_spec1 = value.spec) === null || _value_spec1 === void 0 ? void 0 : _value_spec1.disabled) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
+                                            children: value.spec?.disabled ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOffOutline.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_EyeOutline.default, {})
                                         })
                                     }),
                                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {

package/dist/cjs/TransformsEditor/TransformsEditor.js

@@ -81,17 +81,14 @@ function TransformsEditor({ value, onChange, ...props }) {
         gap: 1,
         ...props,
         children: [
-            value.map((transform, i)=>{
-                var _transformsCollapsed_i;
-                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditorContainer.TransformEditorContainer, {
+            value.map((transform, i)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_TransformEditorContainer.TransformEditorContainer, {
                     index: i,
                     value: transform,
-                    isCollapsed: (_transformsCollapsed_i = transformsCollapsed[i]) !== null && _transformsCollapsed_i !== void 0 ? _transformsCollapsed_i : true,
+                    isCollapsed: transformsCollapsed[i] ?? true,
                     onChange: (updatedTransform)=>handleTransformChange(i, updatedTransform),
                     onDelete: ()=>handleTransformDelete(i),
                     onCollapse: (collapsed)=>handleTransformCollapseExpand(i, collapsed)
-                }, i);
-            }),
+                }, i)),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
                 variant: "contained",
                 startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),

package/dist/cjs/ValueMappingEditor/ValueMappingEditor.js

@@ -33,8 +33,6 @@ function _interop_require_default(obj) {
 const ConditionEditor = ({ mapping, onChange, ...props })=>{
     switch(mapping.kind){
         case 'Value':
-            var _mapping_spec;
-            var _mapping_spec_value;
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 gap: 1,
                 direction: "row",
@@ -42,7 +40,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                     label: "Value",
                     placeholder: "Exact value",
-                    value: (_mapping_spec_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.value) !== null && _mapping_spec_value !== void 0 ? _mapping_spec_value : '',
+                    value: mapping.spec?.value ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -54,8 +52,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 })
             });
         case 'Range':
-            var _mapping_spec1, _mapping_spec2;
-            var _mapping_spec_from, _mapping_spec_to;
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 gap: 1,
                 direction: "row",
@@ -64,7 +60,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         label: "From",
                         placeholder: "Start of range",
-                        value: (_mapping_spec_from = (_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : _mapping_spec1.from) !== null && _mapping_spec_from !== void 0 ? _mapping_spec_from : '',
+                        value: mapping.spec?.from ?? '',
                         onChange: (e)=>onChange({
                                 ...mapping,
                                 spec: {
@@ -77,7 +73,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         label: "To",
                         placeholder: "End of range (inclusive)",
-                        value: (_mapping_spec_to = (_mapping_spec2 = mapping.spec) === null || _mapping_spec2 === void 0 ? void 0 : _mapping_spec2.to) !== null && _mapping_spec_to !== void 0 ? _mapping_spec_to : '',
+                        value: mapping.spec?.to ?? '',
                         onChange: (e)=>onChange({
                                 ...mapping,
                                 spec: {
@@ -90,8 +86,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 ]
             });
         case 'Regex':
-            var _mapping_spec3;
-            var _mapping_spec_pattern;
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 gap: 1,
                 direction: "row",
@@ -99,7 +93,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                     label: "Regular Expression",
                     placeholder: "JavaScript regular expression",
-                    value: (_mapping_spec_pattern = (_mapping_spec3 = mapping.spec) === null || _mapping_spec3 === void 0 ? void 0 : _mapping_spec3.pattern) !== null && _mapping_spec_pattern !== void 0 ? _mapping_spec_pattern : '',
+                    value: mapping.spec?.pattern ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -111,8 +105,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 })
             });
         case 'Misc':
-            var _mapping_spec4;
-            var _mapping_spec_value1;
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
                 gap: 1,
                 direction: "row",
@@ -120,7 +112,7 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TextField, {
                     select: true,
                     label: "Value",
-                    value: (_mapping_spec_value1 = (_mapping_spec4 = mapping.spec) === null || _mapping_spec4 === void 0 ? void 0 : _mapping_spec4.value) !== null && _mapping_spec_value1 !== void 0 ? _mapping_spec_value1 : '',
+                    value: mapping.spec?.value ?? '',
                     onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
@@ -225,7 +217,6 @@ const ConditionEditor = ({ mapping, onChange, ...props })=>{
     }
 };
 const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
-    var _mapping_spec_result, _mapping_spec, _mapping_spec_result1, _mapping_spec1;
     const handleColorChange = (color)=>{
         onChange({
             ...mapping,
@@ -238,7 +229,6 @@ const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
             }
         });
     };
-    var _mapping_spec_result_value, _mapping_spec_result_color;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
         container: true,
         spacing: 2,
@@ -341,20 +331,17 @@ const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
                 },
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                     label: "Display text",
-                    value: (_mapping_spec_result_value = (_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : (_mapping_spec_result = _mapping_spec.result) === null || _mapping_spec_result === void 0 ? void 0 : _mapping_spec_result.value) !== null && _mapping_spec_result_value !== void 0 ? _mapping_spec_result_value : '',
-                    onChange: (e)=>{
-                        var _mapping_spec;
-                        return onChange({
+                    value: mapping.spec?.result?.value ?? '',
+                    onChange: (e)=>onChange({
                             ...mapping,
                             spec: {
                                 ...mapping.spec,
                                 result: {
-                                    ...(_mapping_spec = mapping.spec) === null || _mapping_spec === void 0 ? void 0 : _mapping_spec.result,
+                                    ...mapping.spec?.result,
                                     value: e.target.value
                                 }
                             }
-                        });
-                    },
+                        }),
                     fullWidth: true
                 })
             }),
@@ -366,9 +353,9 @@ const ValueMappingEditor = ({ mapping, onChange, onDelete, ...props })=>{
                     direction: "row",
                     justifyContent: "center",
                     gap: 1,
-                    children: ((_mapping_spec1 = mapping.spec) === null || _mapping_spec1 === void 0 ? void 0 : (_mapping_spec_result1 = _mapping_spec1.result) === null || _mapping_spec_result1 === void 0 ? void 0 : _mapping_spec_result1.color) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
+                    children: mapping.spec?.result?.color ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsColorPicker.OptionsColorPicker, {
                         label: "Color",
-                        color: (_mapping_spec_result_color = mapping.spec.result.color) !== null && _mapping_spec_result_color !== void 0 ? _mapping_spec_result_color : '#000',
+                        color: mapping.spec.result.color ?? '#000',
                         onColorChange: handleColorChange,
                         onClear: ()=>handleColorChange(undefined)
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {

package/dist/cjs/context/TimeZoneProvider.js

@@ -87,7 +87,7 @@ function useTimeZone() {
     const timeZone = (0, _react.useContext)(TimeZoneContext);
     return {
         // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
-        timeZone: timeZone !== null && timeZone !== void 0 ? timeZone : 'local',
+        timeZone: timeZone ?? 'local',
         formatWithUserTimeZone (date, formatString) {
             return (0, _utils.formatWithTimeZone)(date, formatString, timeZone);
         },

package/dist/cjs/controls/TextField.js

@@ -36,7 +36,7 @@ const TextField = /*#__PURE__*/ (0, _react.forwardRef)(function({ debounceMs = 2
         debounceFn(event.target.value);
     }
     const handleDebounceFn = (0, _react.useCallback)((inputValue)=>{
-        onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+        onChange?.(inputValue);
     }, [
         onChange
     ]);

package/dist/cjs/utils/chart-actions.js

@@ -138,8 +138,7 @@ function batchDispatchNearbySeriesActions(chart, nearbySeriesIndexes, emphasized
     }
 }
 function checkCrosshairPinnedStatus(seriesMapping) {
-    var _seriesMapping_;
-    const isCrosshairPinned = ((_seriesMapping_ = seriesMapping[seriesMapping.length - 1]) === null || _seriesMapping_ === void 0 ? void 0 : _seriesMapping_.name) === _model.PINNED_CROSSHAIR_SERIES_NAME;
+    const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === _model.PINNED_CROSSHAIR_SERIES_NAME;
     return isCrosshairPinned;
 }
 function getClosestTimestamp(timeSeriesValues, cursorX) {

package/dist/cjs/utils/format.js

@@ -60,7 +60,7 @@ function formatWithTimeZone(date, formatString, timeZone) {
    * if timeZone is provided, and is not local|browser,
    * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)
    * otherwise, format without timeZone option, defaulting to browser timeZone setting
-   */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
+   */ const lowerTimeZone = timeZone?.toLowerCase();
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return (0, _datefns.format)(date, formatString);
     } else {

package/dist/cjs/utils/theme-gen.js

@@ -28,9 +28,7 @@ function _interop_require_default(obj) {
 }
 const DEFAULT_TEXT_COLOR = '#222';
 function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
-    var _muiTheme_palette_text, _muiTheme_palette_action, _muiTheme_palette, _muiTheme_palette_action1, _muiTheme_palette1, _muiTheme_palette_designSystem, _muiTheme_palette_designSystem1;
-    var _muiTheme_palette_text_primary;
-    const primaryTextColor = (_muiTheme_palette_text_primary = (_muiTheme_palette_text = muiTheme.palette.text) === null || _muiTheme_palette_text === void 0 ? void 0 : _muiTheme_palette_text.primary) !== null && _muiTheme_palette_text_primary !== void 0 ? _muiTheme_palette_text_primary : DEFAULT_TEXT_COLOR;
+    const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -157,8 +155,8 @@ function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
             pageTextStyle: {
                 color: muiTheme.palette.grey[600]
             },
-            pageIconColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette = muiTheme.palette) === null || _muiTheme_palette === void 0 ? void 0 : (_muiTheme_palette_action = _muiTheme_palette.action) === null || _muiTheme_palette_action === void 0 ? void 0 : _muiTheme_palette_action.active,
-            pageIconInactiveColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette1 = muiTheme.palette) === null || _muiTheme_palette1 === void 0 ? void 0 : (_muiTheme_palette_action1 = _muiTheme_palette1.action) === null || _muiTheme_palette_action1 === void 0 ? void 0 : _muiTheme_palette_action1.disabled
+            pageIconColor: muiTheme?.palette?.action?.active,
+            pageIconInactiveColor: muiTheme?.palette?.action?.disabled
         },
         toolbox: {
             show: true,
@@ -169,8 +167,8 @@ function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
             }
         },
         tooltip: {
-            backgroundColor: (_muiTheme_palette_designSystem = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem === void 0 ? void 0 : _muiTheme_palette_designSystem.grey[800],
-            borderColor: (_muiTheme_palette_designSystem1 = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem1 === void 0 ? void 0 : _muiTheme_palette_designSystem1.grey[800],
+            backgroundColor: muiTheme.palette.designSystem?.grey[800],
+            borderColor: muiTheme.palette.designSystem?.grey[800],
             textStyle: {
                 color: '#fff',
                 fontSize: 11

package/dist/context/TimeZoneProvider.js

@@ -25,7 +25,7 @@ export function useTimeZone() {
     const timeZone = useContext(TimeZoneContext);
     return {
         // fallback to "local" timezone if TimeZoneProvider is not present in the React tree
-        timeZone: timeZone !== null && timeZone !== void 0 ? timeZone : 'local',
+        timeZone: timeZone ?? 'local',
         formatWithUserTimeZone (date, formatString) {
             return formatWithTimeZone(date, formatString, timeZone);
         },

package/dist/context/TimeZoneProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/TimeZoneProvider.tsx"],"sourcesContent":["// Copyright 2023 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 React, { createContext, ReactElement, useContext } from 'react';\nimport { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';\n\nexport const TimeZoneContext = createContext<string | undefined>(undefined);\n\nexport interface TimeZoneProviderProps {\n  timeZone?: string;\n  children?: React.ReactNode;\n}\n\nexport function TimeZoneProvider(props: TimeZoneProviderProps): ReactElement {\n  const { children, timeZone } = props;\n  return <TimeZoneContext.Provider value={timeZone}>{children}</TimeZoneContext.Provider>;\n}\n\nexport function useTimeZone(): {\n  timeZone: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  dateFormatOptionsWithUserTimeZone: (dateFormatOptions: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatOptions;\n} {\n  const timeZone = useContext(TimeZoneContext);\n  return {\n    // fallback to \"local\" timezone if TimeZoneProvider is not present in the React tree\n    timeZone: timeZone ?? 'local',\n    formatWithUserTimeZone(date: Date, formatString: string): string {\n      return formatWithTimeZone(date, formatString, timeZone);\n    },\n    dateFormatOptionsWithUserTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions): Intl.DateTimeFormatOptions {\n      return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);\n    },\n  };\n}\n"],"names":["React","createContext","useContext","formatWithTimeZone","dateFormatOptionsWithTimeZone","TimeZoneContext","undefined","TimeZoneProvider","props","children","timeZone","Provider","value","useTimeZone","formatWithUserTimeZone","date","formatString","dateFormatOptionsWithUserTimeZone","dateFormatOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,QAAQ,QAAQ;AACvE,SAASC,kBAAkB,EAAEC,6BAA6B,QAAQ,WAAW;AAE7E,OAAO,MAAMC,gCAAkBJ,cAAkCK,WAAW;AAO5E,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGF;IAC/B,qBAAO,KAACH,gBAAgBM,QAAQ;QAACC,OAAOF;kBAAWD;;AACrD;AAEA,OAAO,SAASI;IAKd,MAAMH,WAAWR,WAAWG;IAC5B,OAAO;QACL,oFAAoF;QACpFK,UAAUA,qBAAAA,sBAAAA,WAAY;QACtBI,wBAAuBC,IAAU,EAAEC,YAAoB;YACrD,OAAOb,mBAAmBY,MAAMC,cAAcN;QAChD;QACAO,mCAAkCC,iBAA6C;YAC7E,OAAOd,8BAA8Bc,mBAAmBR;QAC1D;IACF;AACF"}
+{"version":3,"sources":["../../src/context/TimeZoneProvider.tsx"],"sourcesContent":["// Copyright 2023 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 React, { createContext, ReactElement, useContext } from 'react';\nimport { formatWithTimeZone, dateFormatOptionsWithTimeZone } from '../utils';\n\nexport const TimeZoneContext = createContext<string | undefined>(undefined);\n\nexport interface TimeZoneProviderProps {\n  timeZone?: string;\n  children?: React.ReactNode;\n}\n\nexport function TimeZoneProvider(props: TimeZoneProviderProps): ReactElement {\n  const { children, timeZone } = props;\n  return <TimeZoneContext.Provider value={timeZone}>{children}</TimeZoneContext.Provider>;\n}\n\nexport function useTimeZone(): {\n  timeZone: string;\n  formatWithUserTimeZone: (date: Date, formatString: string) => string;\n  dateFormatOptionsWithUserTimeZone: (dateFormatOptions: Intl.DateTimeFormatOptions) => Intl.DateTimeFormatOptions;\n} {\n  const timeZone = useContext(TimeZoneContext);\n  return {\n    // fallback to \"local\" timezone if TimeZoneProvider is not present in the React tree\n    timeZone: timeZone ?? 'local',\n    formatWithUserTimeZone(date: Date, formatString: string): string {\n      return formatWithTimeZone(date, formatString, timeZone);\n    },\n    dateFormatOptionsWithUserTimeZone(dateFormatOptions: Intl.DateTimeFormatOptions): Intl.DateTimeFormatOptions {\n      return dateFormatOptionsWithTimeZone(dateFormatOptions, timeZone);\n    },\n  };\n}\n"],"names":["React","createContext","useContext","formatWithTimeZone","dateFormatOptionsWithTimeZone","TimeZoneContext","undefined","TimeZoneProvider","props","children","timeZone","Provider","value","useTimeZone","formatWithUserTimeZone","date","formatString","dateFormatOptionsWithUserTimeZone","dateFormatOptions"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAgBC,UAAU,QAAQ,QAAQ;AACvE,SAASC,kBAAkB,EAAEC,6BAA6B,QAAQ,WAAW;AAE7E,OAAO,MAAMC,gCAAkBJ,cAAkCK,WAAW;AAO5E,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGF;IAC/B,qBAAO,KAACH,gBAAgBM,QAAQ;QAACC,OAAOF;kBAAWD;;AACrD;AAEA,OAAO,SAASI;IAKd,MAAMH,WAAWR,WAAWG;IAC5B,OAAO;QACL,oFAAoF;QACpFK,UAAUA,YAAY;QACtBI,wBAAuBC,IAAU,EAAEC,YAAoB;YACrD,OAAOb,mBAAmBY,MAAMC,cAAcN;QAChD;QACAO,mCAAkCC,iBAA6C;YAC7E,OAAOd,8BAA8Bc,mBAAmBR;QAC1D;IACF;AACF"}

package/dist/controls/TextField.js

@@ -21,7 +21,7 @@ export const TextField = /*#__PURE__*/ forwardRef(function({ debounceMs = 250, v
         debounceFn(event.target.value);
     }
     const handleDebounceFn = useCallback((inputValue)=>{
-        onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+        onChange?.(inputValue);
     }, [
         onChange
     ]);

package/dist/controls/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/controls/TextField.tsx"],"sourcesContent":["// Copyright 2024 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 { TextFieldProps as MuiTextFieldProps, TextField as MuiTextField } from '@mui/material';\nimport { ChangeEvent, ForwardedRef, forwardRef, useCallback, useMemo, useState } from 'react';\nimport debounce from 'lodash/debounce';\n\ntype TextFieldProps = Omit<MuiTextFieldProps, 'onChange'> & { debounceMs?: number; onChange?: (value: string) => void };\n\nexport const TextField = forwardRef(function (\n  { debounceMs = 250, value, onChange, ...props }: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [currentValue, setCurrentValue] = useState(value);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>): void {\n    setCurrentValue(event.target.value);\n    debounceFn(event.target.value);\n  }\n\n  const handleDebounceFn = useCallback(\n    (inputValue: string) => {\n      onChange?.(inputValue);\n    },\n    [onChange]\n  );\n\n  const debounceFn = useMemo(() => debounce(handleDebounceFn, debounceMs), [debounceMs, handleDebounceFn]);\n\n  return <MuiTextField ref={ref} value={currentValue} onChange={handleChange} {...props} />;\n});\nTextField.displayName = 'TextField';\n"],"names":["TextField","MuiTextField","forwardRef","useCallback","useMemo","useState","debounce","debounceMs","value","onChange","props","ref","currentValue","setCurrentValue","handleChange","event","target","debounceFn","handleDebounceFn","inputValue","displayName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAA8CA,aAAaC,YAAY,QAAQ,gBAAgB;AAC/F,SAAoCC,UAAU,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC9F,OAAOC,cAAc,kBAAkB;AAIvC,OAAO,MAAMN,0BAAYE,WAAW,SAClC,EAAEK,aAAa,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAuB,EAC/DC,GAAiC;IAEjC,MAAM,CAACC,cAAcC,gBAAgB,GAAGR,SAASG;IAEjD,SAASM,aAAaC,KAAoC;QACxDF,gBAAgBE,MAAMC,MAAM,CAACR,KAAK;QAClCS,WAAWF,MAAMC,MAAM,CAACR,KAAK;IAC/B;IAEA,MAAMU,mBAAmBf,YACvB,CAACgB;QACCV,qBAAAA,+BAAAA,SAAWU;IACb,GACA;QAACV;KAAS;IAGZ,MAAMQ,aAAab,QAAQ,IAAME,SAASY,kBAAkBX,aAAa;QAACA;QAAYW;KAAiB;IAEvG,qBAAO,KAACjB;QAAaU,KAAKA;QAAKH,OAAOI;QAAcH,UAAUK;QAAe,GAAGJ,KAAK;;AACvF,GAAG;AACHV,UAAUoB,WAAW,GAAG"}
+{"version":3,"sources":["../../src/controls/TextField.tsx"],"sourcesContent":["// Copyright 2024 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 { TextFieldProps as MuiTextFieldProps, TextField as MuiTextField } from '@mui/material';\nimport { ChangeEvent, ForwardedRef, forwardRef, useCallback, useMemo, useState } from 'react';\nimport debounce from 'lodash/debounce';\n\ntype TextFieldProps = Omit<MuiTextFieldProps, 'onChange'> & { debounceMs?: number; onChange?: (value: string) => void };\n\nexport const TextField = forwardRef(function (\n  { debounceMs = 250, value, onChange, ...props }: TextFieldProps,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const [currentValue, setCurrentValue] = useState(value);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>): void {\n    setCurrentValue(event.target.value);\n    debounceFn(event.target.value);\n  }\n\n  const handleDebounceFn = useCallback(\n    (inputValue: string) => {\n      onChange?.(inputValue);\n    },\n    [onChange]\n  );\n\n  const debounceFn = useMemo(() => debounce(handleDebounceFn, debounceMs), [debounceMs, handleDebounceFn]);\n\n  return <MuiTextField ref={ref} value={currentValue} onChange={handleChange} {...props} />;\n});\nTextField.displayName = 'TextField';\n"],"names":["TextField","MuiTextField","forwardRef","useCallback","useMemo","useState","debounce","debounceMs","value","onChange","props","ref","currentValue","setCurrentValue","handleChange","event","target","debounceFn","handleDebounceFn","inputValue","displayName"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAA8CA,aAAaC,YAAY,QAAQ,gBAAgB;AAC/F,SAAoCC,UAAU,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAC9F,OAAOC,cAAc,kBAAkB;AAIvC,OAAO,MAAMN,0BAAYE,WAAW,SAClC,EAAEK,aAAa,GAAG,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGC,OAAuB,EAC/DC,GAAiC;IAEjC,MAAM,CAACC,cAAcC,gBAAgB,GAAGR,SAASG;IAEjD,SAASM,aAAaC,KAAoC;QACxDF,gBAAgBE,MAAMC,MAAM,CAACR,KAAK;QAClCS,WAAWF,MAAMC,MAAM,CAACR,KAAK;IAC/B;IAEA,MAAMU,mBAAmBf,YACvB,CAACgB;QACCV,WAAWU;IACb,GACA;QAACV;KAAS;IAGZ,MAAMQ,aAAab,QAAQ,IAAME,SAASY,kBAAkBX,aAAa;QAACA;QAAYW;KAAiB;IAEvG,qBAAO,KAACjB;QAAaU,KAAKA;QAAKH,OAAOI;QAAcH,UAAUK;QAAe,GAAGJ,KAAK;;AACvF,GAAG;AACHV,UAAUoB,WAAW,GAAG"}

package/dist/utils/chart-actions.js

@@ -120,8 +120,7 @@ import { PINNED_CROSSHAIR_SERIES_NAME } from '../model';
 /*
  * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick
  */ export function checkCrosshairPinnedStatus(seriesMapping) {
-    var _seriesMapping_;
-    const isCrosshairPinned = ((_seriesMapping_ = seriesMapping[seriesMapping.length - 1]) === null || _seriesMapping_ === void 0 ? void 0 : _seriesMapping_.name) === PINNED_CROSSHAIR_SERIES_NAME;
+    const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;
     return isCrosshairPinned;
 }
 /*

package/dist/utils/chart-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 2023 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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}
+{"version":3,"sources":["../../src/utils/chart-actions.ts"],"sourcesContent":["// Copyright 2023 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 { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries, TimeSeriesValueTuple } from '@perses-dev/core';\nimport { DatapointInfo, PINNED_CROSSHAIR_SERIES_NAME, TimeChartSeriesMapping } from '../model';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  // TODO: remove startIndex and endIndex once LineChart is deprecated\n  startIndex?: number;\n  endIndex?: number;\n}\n\n/**\n * Enable dataZoom without requring user to click toolbox icon.\n * https://stackoverflow.com/questions/57183297/is-there-a-way-to-use-zoom-of-type-select-without-showing-the-toolbar\n */\nexport function enableDataZoom(chart: EChartsInstance): void {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n/**\n * Restore chart to original state before zoom or other actions were dispatched\n */\nexport function restoreChart(chart: EChartsInstance): void {\n  // TODO: support incremental unzoom instead of restore to original state\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n/*\n * Clear all highlighted series when cursor exits canvas\n * https://echarts.apache.org/en/api.html#action.downplay\n */\nexport function clearHighlightedSeries(chart: EChartsInstance): void {\n  if (chart.dispatchAction !== undefined) {\n    // Clear any selected data points\n    chart.dispatchAction({\n      type: 'unselect',\n    });\n\n    // Clear any highlighted series\n    chart.dispatchAction({\n      type: 'downplay',\n    });\n  }\n}\n\n/*\n * Convert a point from pixel coordinate to logical coordinate.\n * Used to determine if cursor is over chart canvas and closest datapoint.\n * https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel\n */\nexport function getPointInGrid(cursorCoordX: number, cursorCoordY: number, chart?: EChartsInstance): number[] | null {\n  if (chart === undefined) {\n    return null;\n  }\n\n  const pointInPixel = [cursorCoordX, cursorCoordY];\n  if (!chart.containPixel('grid', pointInPixel)) {\n    return null;\n  }\n\n  const pointInGrid: number[] = chart.convertFromPixel('grid', pointInPixel);\n  return pointInGrid;\n}\n\n/*\n * TimeSeriesChart tooltip is built custom to support finding nearby series instead of single or all series.\n * This means ECharts actions need to be dispatched manually for series highlighting, datapoint select state, etc.\n * More info: https://echarts.apache.org/en/api.html#action\n */\nexport function batchDispatchNearbySeriesActions(\n  chart: EChartsInstance,\n  nearbySeriesIndexes: number[],\n  emphasizedSeriesIndexes: number[],\n  nonEmphasizedSeriesIndexes: number[],\n  emphasizedDatapoints: DatapointInfo[],\n  duplicateDatapoints: DatapointInfo[]\n): void {\n  // Accounts for multiple series that are rendered direct on top of eachother.\n  // Only applies select state to the datapoint that is visible to avoid color mismatch.\n  const lastEmphasizedDatapoint =\n    duplicateDatapoints.length > 0\n      ? duplicateDatapoints[duplicateDatapoints.length - 1]\n      : emphasizedDatapoints[emphasizedDatapoints.length - 1];\n  if (lastEmphasizedDatapoint !== undefined) {\n    // Corresponds to select options inside getTimeSeries util.\n    // https://echarts.apache.org/en/option.html#series-line.select.itemStyle\n    chart.dispatchAction({\n      type: 'select',\n      seriesIndex: lastEmphasizedDatapoint.seriesIndex,\n      dataIndex: lastEmphasizedDatapoint.dataIndex,\n      // Shared crosshair should not emphasize datapoints on adjacent charts.\n      escapeConnect: true, // TODO: try to remove escapeConnect and match by seriesName for cross panel correlation\n    });\n  }\n\n  // Clears emphasis state of all lines that are not emphasized.\n  // Emphasized is a subset of just the nearby series that are closest to cursor.\n  chart.dispatchAction({\n    type: 'downplay',\n    seriesIndex: nonEmphasizedSeriesIndexes,\n  });\n\n  // https://echarts.apache.org/en/api.html#action.highlight\n  if (emphasizedSeriesIndexes.length > 0) {\n    // Fadeout opacity of all series not closest to cursor.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: emphasizedSeriesIndexes,\n      notBlur: false, // ensure blur IS triggered, this is default but setting so it is explicit\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n  } else {\n    // When no emphasized series with bold text, notBlur allows opacity fadeout to not trigger.\n    chart.dispatchAction({\n      type: 'highlight',\n      seriesIndex: nearbySeriesIndexes,\n      notBlur: true, // do not trigger blur state when cursor is not immediately close to any series\n      escapeConnect: true, // shared crosshair should not emphasize series on adjacent charts\n    });\n\n    // Clears selected datapoints since no bold series in tooltip, restore does not impact highlighting\n    chart.dispatchAction({\n      type: 'toggleSelect', // https://echarts.apache.org/en/api.html#action.toggleSelect\n    });\n  }\n}\n\n/*\n * Determine whether a markLine was pushed into the final series, which means crosshair was already pinned onClick\n */\nexport function checkCrosshairPinnedStatus(seriesMapping: TimeChartSeriesMapping): boolean {\n  const isCrosshairPinned = seriesMapping[seriesMapping.length - 1]?.name === PINNED_CROSSHAIR_SERIES_NAME;\n  return isCrosshairPinned;\n}\n\n/*\n * Find closest timestamp to logical x coordinate returned from echartsInstance.convertFromPixel\n * Used to find nearby series in time series tooltip.\n */\nexport function getClosestTimestamp(timeSeriesValues?: TimeSeriesValueTuple[], cursorX?: number): number | null {\n  if (timeSeriesValues === undefined || cursorX === undefined) {\n    return null;\n  }\n\n  let currentClosestTimestamp: number | null = null;\n  let currentClosestDistance = Infinity;\n\n  for (const [timestamp] of timeSeriesValues) {\n    const distance = Math.abs(timestamp - cursorX);\n    if (distance < currentClosestDistance) {\n      currentClosestTimestamp = timestamp;\n      currentClosestDistance = distance;\n    }\n  }\n  return currentClosestTimestamp;\n}\n\n/*\n * Find closest timestamp in full dataset, used to snap crosshair into place onClick when tooltip is pinned.\n */\nexport function getClosestTimestampInFullDataset(data: TimeSeries[], cursorX?: number): number | null {\n  if (cursorX === undefined) {\n    return null;\n  }\n  const totalSeries = data.length;\n  let closestTimestamp = null;\n  for (let seriesIdx = 0; seriesIdx < totalSeries; seriesIdx++) {\n    const currentDataset = totalSeries > 0 ? data[seriesIdx] : null;\n    if (!currentDataset) break;\n    const currentValues: TimeSeriesValueTuple[] = currentDataset.values;\n    closestTimestamp = getClosestTimestamp(currentValues, cursorX);\n  }\n  return closestTimestamp;\n}\n"],"names":["PINNED_CROSSHAIR_SERIES_NAME","enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","clearHighlightedSeries","getPointInGrid","cursorCoordX","cursorCoordY","pointInPixel","containPixel","pointInGrid","convertFromPixel","batchDispatchNearbySeriesActions","nearbySeriesIndexes","emphasizedSeriesIndexes","nonEmphasizedSeriesIndexes","emphasizedDatapoints","duplicateDatapoints","lastEmphasizedDatapoint","seriesIndex","dataIndex","escapeConnect","notBlur","checkCrosshairPinnedStatus","seriesMapping","isCrosshairPinned","name","getClosestTimestamp","timeSeriesValues","cursorX","currentClosestTimestamp","currentClosestDistance","Infinity","timestamp","distance","Math","abs","getClosestTimestampInFullDataset","data","totalSeries","closestTimestamp","seriesIdx","currentDataset","currentValues","values"],"mappings":"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"}

package/dist/utils/format.js

@@ -33,7 +33,7 @@ export function formatWithTimeZone(date, formatString, timeZone) {
    * if timeZone is provided, and is not local|browser,
    * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)
    * otherwise, format without timeZone option, defaulting to browser timeZone setting
-   */ const lowerTimeZone = timeZone === null || timeZone === void 0 ? void 0 : timeZone.toLowerCase();
+   */ const lowerTimeZone = timeZone?.toLowerCase();
     if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {
         return format(date, formatString);
     } else {

package/dist/utils/format.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/format.ts"],"sourcesContent":["// Copyright 2023 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 { formatInTimeZone } from 'date-fns-tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, default to browser timeZone setting\n   */\n  if (timeZone) {\n    const lowerTimeZone = timeZone.toLowerCase();\n    if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {\n      return {\n        ...dateFormatOptions,\n        timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone,\n      };\n    }\n  }\n  return dateFormatOptions;\n}\n\nexport function formatWithTimeZone(date: Date, formatString: string, timeZone?: string): string {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, format without timeZone option, defaulting to browser timeZone setting\n   */\n  const lowerTimeZone = timeZone?.toLowerCase();\n  if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {\n    return format(date, formatString);\n  } else {\n    return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);\n  }\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string): string {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (timeMs?: number): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  const formattedDate = format(date, 'MMM dd, yyyy - ');\n  const formattedTime = format(date, 'HH:mm:ss');\n  return {\n    formattedDate,\n    formattedTime,\n  };\n};\n"],"names":["formatInTimeZone","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","getFormattedDate","value","rangeMs","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","undefined","replace","getFormattedAxisLabel","monthMs","yearMs","year","getDateAndTime","timeMs","formattedDate","formattedTime","Date"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,qBAAAA,+BAAAA,SAAUE,WAAW;IAC3C,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOT,iBAAiBQ,MAAMH,kBAAkB,QAAQ,QAAQD,UAAUK;IAC5E;AACF;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,KAAa,EAAEC,OAAe,EAAER,QAAiB;IAChF,MAAMD,oBAAgDD,8BACpD;QACEW,MAAM;QACNC,QAAQ;QACRC,WAAW;IACb,GACAX;IAEF,MAAMY,cAAc;IACpB,MAAMC,QAAQ;IACd,IAAIL,WAAWI,aAAa;QAC1Bb,kBAAkBe,MAAM,GAAG;IAC7B,OAAO,IAAIN,WAAWK,OAAO;QAC3Bd,kBAAkBgB,KAAK,GAAG;QAC1BhB,kBAAkBiB,GAAG,GAAG;IAC1B;IACA,MAAMC,cAAc,IAAIC,KAAKC,cAAc,CAACC,WAAWrB;IACvD,wCAAwC;IACxC,OAAOkB,YAAYpB,MAAM,CAACU,OAAOc,OAAO,CAAC,OAAO;AAClD;AAEA,sEAAsE;AACtE,OAAO,SAASC,sBAAsBd,OAAe;IAOnD,MAAMK,QAAQ;IACd,MAAMU,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIhB,UAAUgB,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIhB,UAAUgB,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIhB,UAAUK,QAAQ,KAAKL,UAAUe,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIf,UAAUK,QAAQ,KAAKL,WAAWK,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLY,MAAM;QACNV,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMU,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO;YAAEC,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAMzB,OAAO,IAAI0B,KAAKH;IACtB,MAAMC,gBAAgB/B,OAAOO,MAAM;IACnC,MAAMyB,gBAAgBhC,OAAOO,MAAM;IACnC,OAAO;QACLwB;QACAC;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../src/utils/format.ts"],"sourcesContent":["// Copyright 2023 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 { formatInTimeZone } from 'date-fns-tz';\nimport { format } from 'date-fns';\n\nexport function dateFormatOptionsWithTimeZone(\n  dateFormatOptions: Intl.DateTimeFormatOptions,\n  timeZone?: string\n): Intl.DateTimeFormatOptions {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then set timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, default to browser timeZone setting\n   */\n  if (timeZone) {\n    const lowerTimeZone = timeZone.toLowerCase();\n    if (lowerTimeZone !== 'local' && lowerTimeZone !== 'browser') {\n      return {\n        ...dateFormatOptions,\n        timeZone: lowerTimeZone === 'utc' ? 'UTC' : timeZone,\n      };\n    }\n  }\n  return dateFormatOptions;\n}\n\nexport function formatWithTimeZone(date: Date, formatString: string, timeZone?: string): string {\n  /*\n   * if timeZone is provided, and is not local|browser,\n   * then format using timeZone option (recognize UTC regardless of uppercase/lowercase)\n   * otherwise, format without timeZone option, defaulting to browser timeZone setting\n   */\n  const lowerTimeZone = timeZone?.toLowerCase();\n  if (!timeZone || lowerTimeZone === 'local' || lowerTimeZone === 'browser') {\n    return format(date, formatString);\n  } else {\n    return formatInTimeZone(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);\n  }\n}\n\n/*\n * Determines time granularity for axis labels, defaults to hh:mm\n */\nexport function getFormattedDate(value: number, rangeMs: number, timeZone?: string): string {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = dateFormatOptionsWithTimeZone(\n    {\n      hour: 'numeric',\n      minute: 'numeric',\n      hourCycle: 'h23',\n    },\n    timeZone\n  );\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n\n// https://echarts.apache.org/en/option.html#xAxis.axisLabel.formatter\nexport function getFormattedAxisLabel(rangeMs: number):\n  | string\n  | {\n      month: '{MMM}';\n      year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}';\n      day: '{MM}/{dd}';\n    } {\n  const dayMs = 86400000;\n  const monthMs = 2629440000;\n  const yearMs = 31536000000;\n\n  // more than 5 years\n  if (rangeMs > yearMs * 5) {\n    return '{yyyy}';\n  }\n\n  // more than 2 years\n  if (rangeMs > yearMs * 2) {\n    return '{MMM} {yyyy}';\n  }\n\n  // between 5 days to 6 months\n  if (rangeMs > dayMs * 5 && rangeMs < monthMs * 6) {\n    return '{MM}/{dd}'; // 12/01\n  }\n\n  // between 2 and 5 days\n  if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 5) {\n    return '{MM}/{dd} {HH}:{mm}'; // 12/01 12:30\n  }\n\n  return {\n    year: '{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}',\n    month: '{MMM}', // Jan, Feb, ...\n    day: '{MM}/{dd}',\n  };\n}\n\ninterface FormattedDateTime {\n  formattedDate: string;\n  formattedTime: string;\n}\n\nexport const getDateAndTime = (timeMs?: number): FormattedDateTime => {\n  if (!timeMs) {\n    return { formattedDate: '', formattedTime: '' };\n  }\n  const date = new Date(timeMs);\n  const formattedDate = format(date, 'MMM dd, yyyy - ');\n  const formattedTime = format(date, 'HH:mm:ss');\n  return {\n    formattedDate,\n    formattedTime,\n  };\n};\n"],"names":["formatInTimeZone","format","dateFormatOptionsWithTimeZone","dateFormatOptions","timeZone","lowerTimeZone","toLowerCase","formatWithTimeZone","date","formatString","getFormattedDate","value","rangeMs","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","undefined","replace","getFormattedAxisLabel","monthMs","yearMs","year","getDateAndTime","timeMs","formattedDate","formattedTime","Date"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,MAAM,QAAQ,WAAW;AAElC,OAAO,SAASC,8BACdC,iBAA6C,EAC7CC,QAAiB;IAEjB;;;;GAIC,GACD,IAAIA,UAAU;QACZ,MAAMC,gBAAgBD,SAASE,WAAW;QAC1C,IAAID,kBAAkB,WAAWA,kBAAkB,WAAW;YAC5D,OAAO;gBACL,GAAGF,iBAAiB;gBACpBC,UAAUC,kBAAkB,QAAQ,QAAQD;YAC9C;QACF;IACF;IACA,OAAOD;AACT;AAEA,OAAO,SAASI,mBAAmBC,IAAU,EAAEC,YAAoB,EAAEL,QAAiB;IACpF;;;;GAIC,GACD,MAAMC,gBAAgBD,UAAUE;IAChC,IAAI,CAACF,YAAYC,kBAAkB,WAAWA,kBAAkB,WAAW;QACzE,OAAOJ,OAAOO,MAAMC;IACtB,OAAO;QACL,OAAOT,iBAAiBQ,MAAMH,kBAAkB,QAAQ,QAAQD,UAAUK;IAC5E;AACF;AAEA;;CAEC,GACD,OAAO,SAASC,iBAAiBC,KAAa,EAAEC,OAAe,EAAER,QAAiB;IAChF,MAAMD,oBAAgDD,8BACpD;QACEW,MAAM;QACNC,QAAQ;QACRC,WAAW;IACb,GACAX;IAEF,MAAMY,cAAc;IACpB,MAAMC,QAAQ;IACd,IAAIL,WAAWI,aAAa;QAC1Bb,kBAAkBe,MAAM,GAAG;IAC7B,OAAO,IAAIN,WAAWK,OAAO;QAC3Bd,kBAAkBgB,KAAK,GAAG;QAC1BhB,kBAAkBiB,GAAG,GAAG;IAC1B;IACA,MAAMC,cAAc,IAAIC,KAAKC,cAAc,CAACC,WAAWrB;IACvD,wCAAwC;IACxC,OAAOkB,YAAYpB,MAAM,CAACU,OAAOc,OAAO,CAAC,OAAO;AAClD;AAEA,sEAAsE;AACtE,OAAO,SAASC,sBAAsBd,OAAe;IAOnD,MAAMK,QAAQ;IACd,MAAMU,UAAU;IAChB,MAAMC,SAAS;IAEf,oBAAoB;IACpB,IAAIhB,UAAUgB,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,oBAAoB;IACpB,IAAIhB,UAAUgB,SAAS,GAAG;QACxB,OAAO;IACT;IAEA,6BAA6B;IAC7B,IAAIhB,UAAUK,QAAQ,KAAKL,UAAUe,UAAU,GAAG;QAChD,OAAO,aAAa,QAAQ;IAC9B;IAEA,uBAAuB;IACvB,IAAIf,UAAUK,QAAQ,KAAKL,WAAWK,QAAQ,GAAG;QAC/C,OAAO,uBAAuB,cAAc;IAC9C;IAEA,OAAO;QACLY,MAAM;QACNV,OAAO;QACPC,KAAK;IACP;AACF;AAOA,OAAO,MAAMU,iBAAiB,CAACC;IAC7B,IAAI,CAACA,QAAQ;QACX,OAAO;YAAEC,eAAe;YAAIC,eAAe;QAAG;IAChD;IACA,MAAMzB,OAAO,IAAI0B,KAAKH;IACtB,MAAMC,gBAAgB/B,OAAOO,MAAM;IACnC,MAAMyB,gBAAgBhC,OAAOO,MAAM;IACnC,OAAO;QACLwB;QACAC;IACF;AACF,EAAE"}

package/dist/utils/theme-gen.js

@@ -13,9 +13,7 @@
 import merge from 'lodash/merge';
 const DEFAULT_TEXT_COLOR = '#222';
 export function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
-    var _muiTheme_palette_text, _muiTheme_palette_action, _muiTheme_palette, _muiTheme_palette_action1, _muiTheme_palette1, _muiTheme_palette_designSystem, _muiTheme_palette_designSystem1;
-    var _muiTheme_palette_text_primary;
-    const primaryTextColor = (_muiTheme_palette_text_primary = (_muiTheme_palette_text = muiTheme.palette.text) === null || _muiTheme_palette_text === void 0 ? void 0 : _muiTheme_palette_text.primary) !== null && _muiTheme_palette_text_primary !== void 0 ? _muiTheme_palette_text_primary : DEFAULT_TEXT_COLOR;
+    const primaryTextColor = muiTheme.palette.text?.primary ?? DEFAULT_TEXT_COLOR;
     const muiConvertedTheme = {
         title: {
             show: false
@@ -142,8 +140,8 @@ export function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
             pageTextStyle: {
                 color: muiTheme.palette.grey[600]
             },
-            pageIconColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette = muiTheme.palette) === null || _muiTheme_palette === void 0 ? void 0 : (_muiTheme_palette_action = _muiTheme_palette.action) === null || _muiTheme_palette_action === void 0 ? void 0 : _muiTheme_palette_action.active,
-            pageIconInactiveColor: muiTheme === null || muiTheme === void 0 ? void 0 : (_muiTheme_palette1 = muiTheme.palette) === null || _muiTheme_palette1 === void 0 ? void 0 : (_muiTheme_palette_action1 = _muiTheme_palette1.action) === null || _muiTheme_palette_action1 === void 0 ? void 0 : _muiTheme_palette_action1.disabled
+            pageIconColor: muiTheme?.palette?.action?.active,
+            pageIconInactiveColor: muiTheme?.palette?.action?.disabled
         },
         toolbox: {
             show: true,
@@ -154,8 +152,8 @@ export function generateChartsTheme(muiTheme, persesChartsThemeOverride) {
             }
         },
         tooltip: {
-            backgroundColor: (_muiTheme_palette_designSystem = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem === void 0 ? void 0 : _muiTheme_palette_designSystem.grey[800],
-            borderColor: (_muiTheme_palette_designSystem1 = muiTheme.palette.designSystem) === null || _muiTheme_palette_designSystem1 === void 0 ? void 0 : _muiTheme_palette_designSystem1.grey[800],
+            backgroundColor: muiTheme.palette.designSystem?.grey[800],
+            borderColor: muiTheme.palette.designSystem?.grey[800],
             textStyle: {
                 color: '#fff',
                 fontSize: 11