@perses-dev/components 0.36.2 → 0.37.1

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -1,6 +1,31 @@
+import { Theme } from '@mui/material';
 import { CursorCoordinates, CursorData } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
  */
-export declare function assembleTransform(mousePos: CursorData['coords'], chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number): string;
+export declare function assembleTransform(mousePos: CursorData['coords'], chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number, containerElement?: Element | null): string;
+/**
+ * Helper for tooltip positioning styles
+ */
+export declare function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null): {
+    minWidth: number;
+    maxWidth: number;
+    maxHeight: number;
+    padding: number;
+    position: string;
+    top: number;
+    left: number;
+    backgroundColor: `#${string}`;
+    borderRadius: string;
+    color: string;
+    fontSize: string;
+    visibility: string;
+    opacity: number;
+    transition: string;
+    zIndex: string | number;
+    overflow: string;
+    '&:hover': {
+        overflowY: string;
+    };
+};
 //# sourceMappingURL=utils.d.ts.map

package/dist/TimeSeriesTooltip/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsD,MAAM,iBAAiB,CAAC;AAEpH;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,UAgCrB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAMX,MAAM,iBAAiB,CAAC;AAEzB;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,UAyClC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;EAuBjF"}

package/dist/TimeSeriesTooltip/utils.js

@@ -10,10 +10,10 @@
 // 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 { TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-model';
+import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER, TOOLTIP_BG_COLOR_FALLBACK } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
- */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
+ */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -22,20 +22,56 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-mo
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
-    // Tooltip is located in a Portal attached to the body.
+    // By default, tooltip is located in a Portal attached to the body.
     // Using page coordinates instead of viewport ensures the tooltip is
     // absolutely positioned correctly as the user scrolls
-    const x = mousePos.page.x;
+    let x = mousePos.page.x;
     let y = mousePos.page.y + cursorPaddingY;
+    // If containerElement is defined, tooltip is attached to the containerElement instead.
+    if (containerElement) {
+        // get the container's position relative to viewport
+        const containerRect = containerElement.getBoundingClientRect();
+        // calculate the mouse position relative to container
+        x = x - containerRect.left + containerElement.scrollLeft;
+        y = y - containerRect.top + containerElement.scrollTop;
+    }
     // adjust so tooltip does not get cut off at bottom of chart
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
         // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
-        y = mousePos.page.y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+        y = y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
     }
     // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
     // reposition so tooltip is never too close to right side of chart or left side of browser window
     return mousePos.plotCanvas.x > xPosAdjustThreshold && x > TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
 }
+/**
+ * Helper for tooltip positioning styles
+ */ export function getTooltipStyles(theme, pinnedPos) {
+    var ref;
+    var ref1;
+    return {
+        minWidth: TOOLTIP_MIN_WIDTH,
+        maxWidth: TOOLTIP_MAX_WIDTH,
+        maxHeight: TOOLTIP_MAX_HEIGHT,
+        padding: 0,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        backgroundColor: (ref1 = (ref = theme.palette.designSystem) === null || ref === void 0 ? void 0 : ref.grey[800]) !== null && ref1 !== void 0 ? ref1 : TOOLTIP_BG_COLOR_FALLBACK,
+        borderRadius: '6px',
+        color: '#fff',
+        fontSize: '11px',
+        visibility: 'visible',
+        opacity: 1,
+        transition: 'all 0.1s ease-out',
+        // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+        zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
+        overflow: 'hidden',
+        '&:hover': {
+            overflowY: 'auto'
+        }
+    };
+}
 
 //# sourceMappingURL=utils.js.map

package/dist/TimeSeriesTooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.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 { CursorCoordinates, CursorData, TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  chartWidth: number,\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number\n) {\n  if (mousePos === null) {\n    return 'translate3d(0, 0)';\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  // Tooltip is located in a Portal attached to the body.\n  // Using page coordinates instead of viewport ensures the tooltip is\n  // absolutely positioned correctly as the user scrolls\n  const x = mousePos.page.x;\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // adjust so tooltip does not get cut off at bottom of chart\n  if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {\n    // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport\n    y = mousePos.page.y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;\n  }\n\n  // use tooltip width to determine when to repos from right to left\n  const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;\n\n  // reposition so tooltip is never too close to right side of chart or left side of browser window\n  return mousePos.plotCanvas.x > xPosAdjustThreshold && x > TOOLTIP_MAX_WIDTH\n    ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`\n    : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","assembleTransform","mousePos","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","cursorPaddingX","cursorPaddingY","x","page","y","client","window","innerHeight","xPosAdjustThreshold","plotCanvas"],"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,SAAwCA,iBAAiB,EAAEC,+BAA+B,QAAQ,iBAAiB,CAAC;AAEpH;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,QAA8B,EAC9BC,UAAkB,EAClBC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpB;IACA,IAAIJ,QAAQ,KAAK,IAAI,EAAE;QACrB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,MAAMK,cAAc,GAAG,EAAE,AAAC;IAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;IAE1B,IAAIJ,SAAS,KAAK,IAAI,EAAE;QACtBF,QAAQ,GAAGE,SAAS,CAAC;IACvB,CAAC;IAED,uDAAuD;IACvD,oEAAoE;IACpE,sDAAsD;IACtD,MAAMK,CAAC,GAAGP,QAAQ,CAACQ,IAAI,CAACD,CAAC,AAAC;IAC1B,IAAIE,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGH,cAAc,AAAC;IAEzC,4DAA4D;IAC5D,IAAIN,QAAQ,CAACU,MAAM,CAACD,CAAC,GAAGN,aAAa,GAAGG,cAAc,GAAGK,MAAM,CAACC,WAAW,EAAE;QAC3E,+FAA+F;QAC/FH,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGN,aAAa,GAAGL,+BAA+B,CAAC;IACxE,CAAC;IAED,kEAAkE;IAClE,MAAMe,mBAAmB,GAAGZ,UAAU,GAAGG,YAAY,GAAG,GAAG,AAAC;IAE5D,iGAAiG;IACjG,OAAOJ,QAAQ,CAACc,UAAU,CAACP,CAAC,GAAGM,mBAAmB,IAAIN,CAAC,GAAGV,iBAAiB,GACvE,CAAC,YAAY,EAAEU,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,wBAAwB,CAAC,GACnE,CAAC,YAAY,EAAEF,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.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 { Theme } from '@mui/material';\nimport {\n  CursorCoordinates,\n  CursorData,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_ADJUST_Y_POS_MULTIPLIER,\n  TOOLTIP_BG_COLOR_FALLBACK,\n} from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  chartWidth: number,\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number,\n  containerElement?: Element | null\n) {\n  if (mousePos === null) {\n    return 'translate3d(0, 0)';\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  // By default, tooltip is located in a Portal attached to the body.\n  // Using page coordinates instead of viewport ensures the tooltip is\n  // absolutely positioned correctly as the user scrolls\n  let x = mousePos.page.x;\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // If containerElement is defined, tooltip is attached to the containerElement instead.\n  if (containerElement) {\n    // get the container's position relative to viewport\n    const containerRect = containerElement.getBoundingClientRect();\n    // calculate the mouse position relative to container\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n  }\n\n  // adjust so tooltip does not get cut off at bottom of chart\n  if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {\n    // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport\n    y = y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;\n  }\n\n  // use tooltip width to determine when to repos from right to left\n  const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;\n\n  // reposition so tooltip is never too close to right side of chart or left side of browser window\n  return mousePos.plotCanvas.x > xPosAdjustThreshold && x > TOOLTIP_MAX_WIDTH\n    ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`\n    : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;\n}\n\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null) {\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    transition: 'all 0.1s ease-out',\n    // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_BG_COLOR_FALLBACK","assembleTransform","mousePos","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","containerElement","cursorPaddingX","cursorPaddingY","x","page","y","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","client","window","innerHeight","xPosAdjustThreshold","plotCanvas","getTooltipStyles","theme","minWidth","maxWidth","maxHeight","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY"],"mappings":"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"}

package/dist/cjs/FontSizeSelector/FontSizeSelector.js

@@ -0,0 +1,130 @@
+// Copyright 2023 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, "FontSizeSelector", {
+    enumerable: true,
+    get: ()=>FontSizeSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const FONT_SIZE_OPTIONS = [
+    {
+        id: 'default',
+        label: 'Default',
+        value: undefined
+    },
+    {
+        id: '12',
+        label: '12',
+        value: 12
+    },
+    {
+        id: '14',
+        label: '14',
+        value: 14
+    },
+    {
+        id: '16',
+        label: '16',
+        value: 16
+    },
+    {
+        id: '20',
+        label: '20',
+        value: 20
+    },
+    {
+        id: '24',
+        label: '24',
+        value: 24
+    },
+    {
+        id: '28',
+        label: '28',
+        value: 28
+    },
+    {
+        id: '32',
+        label: '32',
+        value: 32
+    },
+    {
+        id: '36',
+        label: '36',
+        value: 36
+    },
+    {
+        id: '40',
+        label: '40',
+        value: 40
+    },
+    {
+        id: '48',
+        label: '48',
+        value: 48
+    },
+    {
+        id: '56',
+        label: '56',
+        value: 56
+    },
+    {
+        id: '64',
+        label: '64',
+        value: 64
+    },
+    {
+        id: '72',
+        label: '72',
+        value: 72
+    },
+    {
+        id: '96',
+        label: '96',
+        value: 96
+    },
+    {
+        id: '128',
+        label: '128',
+        value: 128
+    },
+    {
+        id: '160',
+        label: '160',
+        value: 160
+    },
+    {
+        id: '192',
+        label: '192',
+        value: 192
+    }
+];
+function FontSizeSelector({ value , onChange  }) {
+    const handleFontSizeChange = (_, { value  })=>{
+        onChange(value);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+        label: "Font Size",
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+            value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
+            options: FONT_SIZE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleFontSizeChange,
+            disableClearable: true
+        })
+    });
+}

package/dist/cjs/FontSizeSelector/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 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
+});
+_exportStar(require("./FontSizeSelector"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/LineChart/LineChart.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "LineChart", {
     get: ()=>LineChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
@@ -29,46 +29,7 @@ const _echart = require("../EChart");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
-const _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
+const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
@@ -97,7 +58,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
         return {
             highlightSeries ({ id  }) {
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not highlight series when hovering over legend
                     return;
                 }
                 chartRef.current.dispatchAction({
@@ -107,7 +68,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             },
             clearHighlightedSeries: ()=>{
                 if (!chartRef.current) {
-                    // No chart. Do nothing.
+                    // when chart undef, do not clear highlight series
                     return;
                 }
                 (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
@@ -292,7 +253,7 @@ const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ heig
             }
         },
         children: [
-            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,

package/dist/cjs/LineChart/index.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./LineChart"), exports);
-_exportStar(require("./utils"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/StatChart/StatChart.js

@@ -49,7 +49,7 @@ const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
     var ref, ref1;
-    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
+    const { width , height , data , unit , color , sparkline , showSeriesName , valueFontSize  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     let formattedValue = '';
     if (data.calculatedValue === null) {
@@ -72,8 +72,10 @@ function StatChart(props) {
     // calculate value font size and height
     const availableWidth = width - containerPadding * 2;
     const availableHeight = height - seriesNameHeight;
-    const valueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+    const optimalValueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
         text: formattedValue,
+        // override the font size if user selects it in the settings
+        fontSizeOverride: valueFontSize,
         fontWeight: VALUE_FONT_WEIGHT,
         // without sparkline, use only 50% of the available width so it looks better for multiseries
         width: sparkline ? availableWidth : availableWidth * 0.5,
@@ -82,9 +84,9 @@ function StatChart(props) {
         height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
         lineHeight: LINE_HEIGHT
     });
-    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;
     // make sure the series name font size is slightly smaller than value font size
-    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
+    seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);
     const option = (0, _react.useMemo)(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -163,7 +165,7 @@ function StatChart(props) {
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(Value, {
                 variant: "h3",
                 color: color,
-                fontSize: valueFontSize,
+                fontSize: optimalValueFontSize,
                 padding: containerPadding,
                 children: formattedValue
             }),

package/dist/cjs/StatChart/calculateFontSize.js

@@ -29,9 +29,13 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
-function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
     const ctx = getGlobalCanvasContext();
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    // if user has selected a font size in the settings, use it instead of calculating the optimal size
+    if (fontSizeOverride !== undefined) {
+        return Number(fontSizeOverride);
+    }
     const textStyle = chartsTheme.echartsTheme.textStyle;
     var ref;
     const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;