@perses-dev/components 0.29.1 → 0.31.0

package/dist/TimeSeriesTooltip/tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.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 { useEffect, useState } from 'react';\nimport { FocusedSeriesArray } from './focused-series';\n\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 400;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\n\nexport const TOOLTIP_MAX_ITEMS = 50;\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface CursorCoordinates {\n  page: {\n    x: number;\n    y: number;\n  };\n  plotCanvas: {\n    x: number;\n    y: number;\n  };\n  zrender: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: FocusedSeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n"],"names":["useEffect","useState","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_MAX_ITEMS","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAG5C,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,kBAAkB,GAAG,GAAG,CAAC;AACtC,OAAO,MAAMC,wBAAwB,GAAGF,iBAAiB,GAAG,GAAG,CAAC;AAEhE,OAAO,MAAMG,iBAAiB,GAAG,EAAE,CAAC;AAEpC,OAAO,MAAMC,mBAAmB,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IACpEC,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAG;IAC/BC,MAAM,EAAE;QACNC,UAAU,EAAE;YACVC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDC,OAAO,EAAE;YACPF,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDE,MAAM,EAAE,IAAI;KACb;IACDC,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAG;IAC9BC,MAAM,EAAET,iBAAiB;IACzBU,aAAa,EAAE,IAAI;CACpB,CAAC;AAsCF,OAAO,MAAMC,gBAAgB,GAAG,IAA4B;IAC1D,MAAM,CAACV,MAAM,EAAEW,SAAS,CAAC,GAAG5B,QAAQ,CAAuB,IAAI,CAAC,AAAC;IAEjED,SAAS,CAAC,IAAM;QACd,MAAM8B,YAAY,GAAG,CAACC,CAAkB,GAAK;YAC3C,OAAOF,SAAS,CAAC;gBACfG,IAAI,EAAE;oBACJZ,CAAC,EAAEW,CAAC,CAACE,KAAK;oBACVZ,CAAC,EAAEU,CAAC,CAACG,KAAK;iBACX;gBACDf,UAAU,EAAE;oBACVC,CAAC,EAAEW,CAAC,CAACI,OAAO;oBACZd,CAAC,EAAEU,CAAC,CAACK,OAAO;iBACb;gBACDd,OAAO,EAAE;oBACP,4DAA4D;oBAC5D,iHAAiH;oBACjHF,CAAC,EAAEW,CAAC,CAACM,GAAG;oBACRhB,CAAC,EAAEU,CAAC,CAACO,GAAG;iBACT;gBACD,0HAA0H;gBAC1Hf,MAAM,EAAEQ,CAAC,CAACR,MAAM;aACjB,CAAC,CAAC;QACL,CAAC,AAAC;QACFgB,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEV,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAM;YACXS,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEX,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOZ,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.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 { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 600;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface CursorCoordinates {\n  page: {\n    x: number;\n    y: number;\n  };\n  client: {\n    x: number;\n    y: number;\n  };\n  plotCanvas: {\n    x: number;\n    y: number;\n  };\n  zrender: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"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,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAG5C,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,kBAAkB,GAAG,GAAG,CAAC;AACtC,OAAO,MAAMC,wBAAwB,GAAGF,iBAAiB,GAAG,GAAG,CAAC;AAChE,OAAO,MAAMG,+BAA+B,GAAG,IAAI,CAAC;AAEpD,OAAO,MAAMC,oBAAoB,GAAG,GAAG,CAAC;AAExC,OAAO,MAAMC,yBAAyB,GAAG,kCAAkC,CAAC;AAC5E,OAAO,MAAMC,6BAA6B,GAAG,8CAA8C,CAAC;AAE5F,OAAO,MAAMC,mBAAmB,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IACpEC,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAG;IAC/BC,MAAM,EAAE;QACNC,UAAU,EAAE;YACVC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDC,OAAO,EAAE;YACPF,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDE,MAAM,EAAE,IAAI;KACb;IACDC,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAG;IAC9BC,MAAM,EAAET,iBAAiB;IACzBU,aAAa,EAAE,IAAI;CACpB,CAAC;AA0CF,OAAO,MAAMC,gBAAgB,GAAG,IAA4B;IAC1D,MAAM,CAACV,MAAM,EAAEW,SAAS,CAAC,GAAGhC,QAAQ,CAAuB,IAAI,CAAC,AAAC;IAEjED,SAAS,CAAC,IAAM;QACd,MAAMkC,YAAY,GAAG,CAACC,CAAkB,GAAK;YAC3C,OAAOF,SAAS,CAAC;gBACfG,IAAI,EAAE;oBACJZ,CAAC,EAAEW,CAAC,CAACE,KAAK;oBACVZ,CAAC,EAAEU,CAAC,CAACG,KAAK;iBACX;gBACDC,MAAM,EAAE;oBACNf,CAAC,EAAEW,CAAC,CAACK,OAAO;oBACZf,CAAC,EAAEU,CAAC,CAACM,OAAO;iBACb;gBACDlB,UAAU,EAAE;oBACVC,CAAC,EAAEW,CAAC,CAACO,OAAO;oBACZjB,CAAC,EAAEU,CAAC,CAACQ,OAAO;iBACb;gBACDjB,OAAO,EAAE;oBACP,4DAA4D;oBAC5D,iHAAiH;oBACjHF,CAAC,EAAEW,CAAC,CAACS,GAAG;oBACRnB,CAAC,EAAEU,CAAC,CAACU,GAAG;iBACT;gBACD,0HAA0H;gBAC1HlB,MAAM,EAAEQ,CAAC,CAACR,MAAM;aACjB,CAAC,CAAC;QACL,CAAC,AAAC;QACFmB,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEb,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAM;YACXY,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEd,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOZ,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -2,5 +2,5 @@ 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'], seriesNum: number, chartWidth: number, chartHeight: number, pinnedPos: CursorCoordinates | null): string;
+export declare function assembleTransform(mousePos: CursorData['coords'], chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number): 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,EAAqB,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,iBAAiB,GAAG,IAAI,UAwCpC"}
+{"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"}

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 } from './tooltip-model';
+import { TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
- */ export function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+ */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -27,20 +27,12 @@ import { TOOLTIP_MAX_WIDTH } from './tooltip-model';
     // absolutely positioned correctly as the user scrolls
     const x = mousePos.page.x;
     let y = mousePos.page.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.page.y > window.innerHeight * 0.8;
-    const yPosAdjustThreshold = chartHeight * 0.75;
-    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
-    if (isCloseToBottom === true) {
-        if (seriesNum > 6) {
-            y = mousePos.page.y * 0.75;
-        } else {
-            y = mousePos.page.y * 0.9;
-        }
-    } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.page.y * 0.95;
+    // 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;
     }
-    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
-    const tooltipWidth = seriesNum > 1 ? TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH / 2;
+    // 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)`;

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 } 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  seriesNum: number,\n  chartWidth: number,\n  chartHeight: number,\n  pinnedPos: CursorCoordinates | null\n) {\n  if (mousePos === null) {\n    return 'translate3d(0, 0)';\n  }\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\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  const isCloseToBottom = mousePos.page.y > window.innerHeight * 0.8;\n  const yPosAdjustThreshold = chartHeight * 0.75;\n  // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up\n  if (isCloseToBottom === true) {\n    if (seriesNum > 6) {\n      y = mousePos.page.y * 0.75;\n    } else {\n      y = mousePos.page.y * 0.9;\n    }\n  } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {\n    y = mousePos.page.y * 0.95;\n  }\n\n  // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)\n  const tooltipWidth = seriesNum > 1 ? TOOLTIP_MAX_WIDTH : TOOLTIP_MAX_WIDTH / 2;\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","assembleTransform","mousePos","seriesNum","chartWidth","chartHeight","pinnedPos","cursorPaddingX","cursorPaddingY","x","page","y","isCloseToBottom","window","innerHeight","yPosAdjustThreshold","plotCanvas","tooltipWidth","xPosAdjustThreshold"],"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,QAAQ,iBAAiB,CAAC;AAEnF;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,QAA8B,EAC9BC,SAAiB,EACjBC,UAAkB,EAClBC,WAAmB,EACnBC,SAAmC,EACnC;IACA,IAAIJ,QAAQ,KAAK,IAAI,EAAE;QACrB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,IAAII,SAAS,KAAK,IAAI,EAAE;QACtBJ,QAAQ,GAAGI,SAAS,CAAC;IACvB,CAAC;IAED,MAAMC,cAAc,GAAG,EAAE,AAAC;IAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;IAE1B,uDAAuD;IACvD,oEAAoE;IACpE,sDAAsD;IACtD,MAAMC,CAAC,GAAGP,QAAQ,CAACQ,IAAI,CAACD,CAAC,AAAC;IAC1B,IAAIE,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGH,cAAc,AAAC;IAEzC,MAAMI,eAAe,GAAGV,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGE,MAAM,CAACC,WAAW,GAAG,GAAG,AAAC;IACnE,MAAMC,mBAAmB,GAAGV,WAAW,GAAG,IAAI,AAAC;IAC/C,0FAA0F;IAC1F,IAAIO,eAAe,KAAK,IAAI,EAAE;QAC5B,IAAIT,SAAS,GAAG,CAAC,EAAE;YACjBQ,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAG,IAAI,CAAC;QAC7B,OAAO;YACLA,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAG,GAAG,CAAC;QAC5B,CAAC;IACH,OAAO,IAAIT,QAAQ,CAACc,UAAU,CAACL,CAAC,GAAGI,mBAAmB,EAAE;QACtDJ,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,mIAAmI;IACnI,MAAMM,YAAY,GAAGd,SAAS,GAAG,CAAC,GAAGH,iBAAiB,GAAGA,iBAAiB,GAAG,CAAC,AAAC;IAC/E,MAAMkB,mBAAmB,GAAGd,UAAU,GAAGa,YAAY,GAAG,GAAG,AAAC;IAE5D,iGAAiG;IACjG,OAAOf,QAAQ,CAACc,UAAU,CAACP,CAAC,GAAGS,mBAAmB,IAAIT,CAAC,GAAGT,iBAAiB,GACvE,CAAC,YAAY,EAAES,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 { 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  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\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,IAAIE,SAAS,KAAK,IAAI,EAAE;QACtBF,QAAQ,GAAGE,SAAS,CAAC;IACvB,CAAC;IAED,MAAMG,cAAc,GAAG,EAAE,AAAC;IAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;IAE1B,uDAAuD;IACvD,oEAAoE;IACpE,sDAAsD;IACtD,MAAMC,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"}

package/dist/UnitSelector/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EACL,WAAW,EAMZ,MAAM,UAAU,CAAC;AAGlB,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AAeD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAiFlE"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,WAAW,EAA0E,MAAM,UAAU,CAAC;AAI/G,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAkFlE"}

package/dist/UnitSelector/UnitSelector.js

@@ -12,7 +12,8 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, Switch, TextField, Autocomplete } from '@mui/material';
-import { UNIT_CONFIG, DEFAULT_DECIMAL_PLACES, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';
+import { UNIT_CONFIG, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';
+import { shouldAbbreviate } from '../model/units/utils';
 import { OptionsEditorControl } from '../OptionsEditorLayout';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
@@ -20,13 +21,35 @@ const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
         ...config
     };
 }).filter((config)=>!config.disableSelectorOption);
-const DECIMAL_OPTIONS = [
-    0,
-    1,
-    2,
-    3,
-    4
+const DECIMAL_PLACES_OPTIONS = [
+    {
+        label: 'Default',
+        decimal_places: undefined
+    },
+    {
+        label: '0',
+        decimal_places: 0
+    },
+    {
+        label: '1',
+        decimal_places: 1
+    },
+    {
+        label: '2',
+        decimal_places: 2
+    },
+    {
+        label: '3',
+        decimal_places: 3
+    },
+    {
+        label: '4',
+        decimal_places: 4
+    }
 ];
+function getOptionByDecimalPlaces(decimal_places) {
+    return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
+}
 export function UnitSelector({ value , onChange  }) {
     const hasDecimalPlaces = isUnitWithDecimalPlaces(value);
     const hasAbbreviate = isUnitWithAbbreviate(value);
@@ -35,11 +58,11 @@ export function UnitSelector({ value , onChange  }) {
             kind: newValue.id
         });
     };
-    const handleDecimalChange = (_, newValue)=>{
+    const handleDecimalPlacesChange = (_, { decimal_places  })=>{
         if (hasDecimalPlaces) {
             onChange({
                 ...value,
-                decimal_places: newValue
+                decimal_places: decimal_places
             });
         }
     };
@@ -52,19 +75,18 @@ export function UnitSelector({ value , onChange  }) {
         }
     };
     const kindConfig = UNIT_CONFIG[value.kind];
-    var _decimal_places;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Abbreviate",
                 control: /*#__PURE__*/ _jsx(Switch, {
-                    checked: hasAbbreviate ? !!value.abbreviate : false,
+                    checked: hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false,
                     onChange: handleAbbreviateChange,
                     disabled: !hasAbbreviate
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Units",
+                label: "Unit",
                 control: /*#__PURE__*/ _jsx(Autocomplete, {
                     value: {
                         id: value.kind,
@@ -92,15 +114,16 @@ export function UnitSelector({ value , onChange  }) {
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Decimal",
+                label: "Decimals",
                 control: /*#__PURE__*/ _jsx(Autocomplete, {
-                    value: hasDecimalPlaces ? (_decimal_places = value.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : DEFAULT_DECIMAL_PLACES : 0,
-                    options: DECIMAL_OPTIONS,
-                    getOptionLabel: (option)=>`${option}`,
+                    value: getOptionByDecimalPlaces(value.decimal_places),
+                    options: DECIMAL_PLACES_OPTIONS,
+                    getOptionLabel: (o)=>o.label,
+                    isOptionEqualToValue: (option, value)=>option.label === value.label,
                     renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
                             ...params
                         }),
-                    onChange: handleDecimalChange,
+                    onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true
                 })

package/dist/UnitSelector/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Box, Switch, TextField, Autocomplete, SwitchProps } from '@mui/material';\nimport {\n  UnitOptions,\n  UNIT_CONFIG,\n  DEFAULT_DECIMAL_PLACES,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '../model';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_OPTIONS = [0, 1, 2, 3, 4];\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalChange = (_: unknown, newValue: number) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: newValue,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? !!value.abbreviate : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Units\"\n        control={\n          <Autocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            groupBy={(option) => option.group}\n            renderInput={(params) => <TextField {...params} />}\n            renderOption={(renderOptsProps, option) => {\n              // Custom option needed to get some increased left padding to make\n              // the items more distinct from the group label.\n              return (\n                <li {...renderOptsProps}>\n                  <Box paddingLeft={(theme) => theme.spacing(1)}>{option.label}</Box>\n                </li>\n              );\n            }}\n            onChange={handleKindChange}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimal\"\n        control={\n          <Autocomplete\n            value={hasDecimalPlaces ? value.decimal_places ?? DEFAULT_DECIMAL_PLACES : 0}\n            options={DECIMAL_OPTIONS}\n            getOptionLabel={(option) => `${option}`}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleDecimalChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n    </>\n  );\n}\n"],"names":["Box","Switch","TextField","Autocomplete","UNIT_CONFIG","DEFAULT_DECIMAL_PLACES","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_OPTIONS","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalChange","decimal_places","handleAbbreviateChange","checked","abbreviate","kindConfig","label","control","disabled","options","isOptionEqualToValue","option","groupBy","group","renderInput","params","renderOption","renderOptsProps","li","paddingLeft","theme","spacing","disableClearable","getOptionLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.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.\nimport { Box, Switch, TextField, Autocomplete, SwitchProps } from '@mui/material';\nimport { UnitOptions, UNIT_CONFIG, UnitConfig, isUnitWithDecimalPlaces, isUnitWithAbbreviate } from '../model';\nimport { shouldAbbreviate } from '../model/units/utils';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { label: 'Default', decimal_places: undefined },\n  { label: '0', decimal_places: 0 },\n  { label: '1', decimal_places: 1 },\n  { label: '2', decimal_places: 2 },\n  { label: '3', decimal_places: 3 },\n  { label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <Autocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            isOptionEqualToValue={(option, value) => option.id === value.id}\n            groupBy={(option) => option.group}\n            renderInput={(params) => <TextField {...params} />}\n            renderOption={(renderOptsProps, option) => {\n              // Custom option needed to get some increased left padding to make\n              // the items more distinct from the group label.\n              return (\n                <li {...renderOptsProps}>\n                  <Box paddingLeft={(theme) => theme.spacing(1)}>{option.label}</Box>\n                </li>\n              );\n            }}\n            onChange={handleKindChange}\n            disableClearable\n          ></Autocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <Autocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            isOptionEqualToValue={(option, value) => option.label === value.label}\n            renderInput={(params) => <TextField {...params} />}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Box","Switch","TextField","Autocomplete","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","shouldAbbreviate","OptionsEditorControl","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","isOptionEqualToValue","option","groupBy","group","renderInput","params","renderOption","renderOptsProps","li","paddingLeft","theme","spacing","disableClearable","getOptionLabel"],"mappings":"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"}

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -42,8 +42,14 @@ function TimeRangeSelector(props) {
             'aria-label': `Select time range. Currently set to ${formattedValue}`
         },
         sx: {
+            // `transform: none` prevents calendar icon from flipping over when menu is open
             '.MuiSelect-icon': {
-                marginTop: '1px'
+                marginTop: '1px',
+                transform: 'none'
+            },
+            // paddingRight creates more space for the calendar icon (it's a bigger icon)
+            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                paddingRight: '36px'
             },
             '.MuiSelect-select': height ? {
                 lineHeight: height,

package/dist/cjs/EChart/EChart.js

@@ -23,7 +23,6 @@ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _core = require("echarts/core");
 const _material = require("@mui/material");
 const _lodashEs = require("lodash-es");
-const _utils = require("../utils");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -154,12 +153,7 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         ref: containerRef,
-        sx: (0, _utils.combineSx)({
-            // Ensures chart fills container and updates size correctly when resizing,
-            // combineSx allows this default behavior to be overriden from parent component
-            width: '100%',
-            height: '100%'
-        }, sx)
+        sx: sx
     });
 });
 // Validate event config and bind custom events

package/dist/cjs/Legend/CompactLegend.js

@@ -20,8 +20,9 @@ Object.defineProperty(exports, "CompactLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-function CompactLegend({ height , items  }) {
+function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
@@ -38,6 +39,8 @@ function CompactLegend({ height , items  }) {
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',
                     float: 'left',

package/dist/cjs/Legend/Legend.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "Legend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _immer = require("immer");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
 // When the number of items to display is above this number, it is likely to
@@ -28,7 +29,45 @@ const _compactLegend = require("./CompactLegend");
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , listProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+    const onLegendItemClick = (e, seriesId)=>{
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
+            if (draft === 'ALL') {
+                return {
+                    [seriesId]: true
+                };
+            }
+            const isSelected = !!draft[seriesId];
+            // Clicks with modifier key can select multiple items.
+            if (isModifiedClick) {
+                if (isSelected) {
+                    // Modified click on already selected item. Remove that item.
+                    delete draft[seriesId];
+                } else {
+                    // Modified click on not-selected item. Add it.
+                    draft[seriesId] = true;
+                }
+                return draft;
+            }
+            if (isSelected) {
+                // Clicked item was already selected. Unselect it and return to
+                // ALL state.
+                return 'ALL';
+            }
+            // Select clicked item.
+            return {
+                [seriesId]: true
+            };
+        });
+        onSelectedItemsChange(newSelected);
+    };
+    const commonLegendProps = {
+        height,
+        items: data,
+        selectedItems,
+        onLegendItemClick
+    };
     if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
@@ -39,10 +78,8 @@ function Legend({ width , height , options , data , listProps  }) {
                 right: 0
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-                items: data,
-                width: width,
-                height: height,
-                ...listProps
+                ...commonLegendProps,
+                width: width
             })
         });
     }
@@ -59,13 +96,10 @@ function Legend({ width , height , options , data , listProps  }) {
             bottom: 0
         },
         children: needsVirtualization ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-            items: data,
-            width: width,
-            height: height,
-            ...listProps
+            ...commonLegendProps,
+            width: width
         }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-            items: data,
-            height: height
+            ...commonLegendProps
         })
     });
 }

package/dist/cjs/Legend/ListLegend.js

@@ -20,85 +20,36 @@ Object.defineProperty(exports, "ListLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _reactWindow = require("react-window");
-const _react = require("react");
+const _reactVirtuoso = require("react-virtuoso");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
-function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = (0, _react.useRef)(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = (0, _react.useRef)({});
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     const theme = (0, _material.useTheme)();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
+    // Padding value used in the react virtuoso header/footer components to
+    // simulate top/bottom padding based on recommendation in this
+    // issue.
+    // https://github.com/petyosi/react-virtuoso/issues/238
     const LIST_PADDING = parseInt(theme.spacing(1), 10);
+    const mockPadding = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            width: '100%',
+            height: `${LIST_PADDING}px`
+        }
+    });
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = (0, _react.useRef)(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = (0, _react.useCallback)(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        (0, _react.useEffect)(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
@@ -106,32 +57,16 @@ function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ (0, _react.forwardRef)(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
+            }, item.id);
+        },
+        role: "list",
+        components: {
+            Header: ()=>{
+                return mockPadding;
             },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            Footer: ()=>{
+                return mockPadding;
+            }
+        }
     });
 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,7 +62,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -74,14 +74,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
             setNoWrap(true);
         }
     }
-    (0, _react.useEffect)(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
         component: "div",
@@ -92,8 +89,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {