@perses-dev/components 0.29.0 → 0.30.0

package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,OAAO,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAgCtD,CAAC"}
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,MAAM,EAAE;QACN,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,OAAO,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAoCtD,CAAC"}

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -51,6 +51,10 @@ export const useMousePosition = ()=>{
                     x: e.pageX,
                     y: e.pageY
                 },
+                client: {
+                    x: e.clientX,
+                    y: e.clientY
+                },
                 plotCanvas: {
                     x: e.offsetX,
                     y: e.offsetY

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 { 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  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: 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        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_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","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,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;AA0CF,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;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'], seriesNum: number, 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,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,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,UA+BrB"}

package/dist/TimeSeriesTooltip/utils.js

@@ -13,7 +13,7 @@
 import { TOOLTIP_MAX_WIDTH } 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, seriesNum, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -27,20 +27,11 @@ 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) {
+        y = mousePos.page.y - tooltipHeight;
     }
-    // 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 } 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  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    y = mousePos.page.y - tooltipHeight;\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","assembleTransform","mousePos","seriesNum","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,QAAQ,iBAAiB,CAAC;AAEnF;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,QAA8B,EAC9BC,SAAiB,EACjBC,UAAkB,EAClBC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpB;IACA,IAAIL,QAAQ,KAAK,IAAI,EAAE;QACrB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,IAAIG,SAAS,KAAK,IAAI,EAAE;QACtBH,QAAQ,GAAGG,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,GAAGR,QAAQ,CAACS,IAAI,CAACD,CAAC,AAAC;IAC1B,IAAIE,CAAC,GAAGV,QAAQ,CAACS,IAAI,CAACC,CAAC,GAAGH,cAAc,AAAC;IAEzC,4DAA4D;IAC5D,IAAIP,QAAQ,CAACW,MAAM,CAACD,CAAC,GAAGN,aAAa,GAAGG,cAAc,GAAGK,MAAM,CAACC,WAAW,EAAE;QAC3EH,CAAC,GAAGV,QAAQ,CAACS,IAAI,CAACC,CAAC,GAAGN,aAAa,CAAC;IACtC,CAAC;IAED,kEAAkE;IAClE,MAAMU,mBAAmB,GAAGZ,UAAU,GAAGG,YAAY,GAAG,GAAG,AAAC;IAE5D,iGAAiG;IACjG,OAAOL,QAAQ,CAACe,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/LineChart/LineChart.js

@@ -230,6 +230,10 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 unit: unit
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,

package/dist/cjs/StatChart/StatChart.js

@@ -117,11 +117,15 @@ function StatChart(props) {
                 sx: (theme)=>({
                         color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
                         fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
+                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 renderer: "svg"

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -19,12 +19,18 @@ Object.defineProperty(exports, "TimeSeriesTooltip", {
     get: ()=>TimeSeriesTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
+const _tooltipContent = require("./TooltipContent");
 const _focusedSeries = require("./focused-series");
 const _tooltipModel = require("./tooltip-model");
-const _tooltipContent = require("./TooltipContent");
 const _utils = require("./utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -67,6 +73,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
 const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
+    const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
     if (mousePos === null || mousePos.target === null) return null;
     // ensure user is hovering over a chart before checking for nearby series
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
@@ -74,9 +81,7 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
     const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
     const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    var ref1;
-    const chartHeight = (ref1 = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && ref1 !== void 0 ? ref1 : 230;
-    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
     if (focusedSeries.length === 0) {
         return null;
     }
@@ -85,6 +90,7 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            ref: tooltipRef,
             sx: (theme)=>({
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -27,8 +27,8 @@ function TooltipContent(props) {
     const { focusedSeries , wrapLabels  } = props;
     const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
-    const formatTimeSeriesHeader = (timeString)=>{
-        const date = new Date(timeString);
+    const formatTimeSeriesHeader = (timeMs)=>{
+        const date = new Date(timeMs);
         const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
         const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/TimeSeriesTooltip/focused-series.js

@@ -53,13 +53,12 @@ function getNearbySeries(data, pointInGrid, yBuffer, unit) {
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                                const formattedDate = _tooltipModel.TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
                                 const formattedY = (0, _model.formatValue)(yValue, unit);
                                 currentFocusedData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
                                     seriesName: currentSeriesName,
-                                    date: formattedDate,
+                                    date: xValueMilliSeconds,
                                     x: xValue,
                                     y: yValue,
                                     formattedY: formattedY,

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

@@ -71,6 +71,10 @@ const useMousePosition = ()=>{
                     x: e.pageX,
                     y: e.pageY
                 },
+                client: {
+                    x: e.clientX,
+                    y: e.clientY
+                },
                 plotCanvas: {
                     x: e.offsetX,
                     y: e.offsetY

package/dist/cjs/TimeSeriesTooltip/utils.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "assembleTransform", {
     get: ()=>assembleTransform
 });
 const _tooltipModel = require("./tooltip-model");
-function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+function assembleTransform(mousePos, seriesNum, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -33,20 +33,11 @@ function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedP
     // 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) {
+        y = mousePos.page.y - tooltipHeight;
     }
-    // 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 ? _tooltipModel.TOOLTIP_MAX_WIDTH : _tooltipModel.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 > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "UnitSelector", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _model = require("../model");
+const _utils = require("../model/units/utils");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
 const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
     return {
@@ -28,13 +29,35 @@ const KIND_OPTIONS = Object.entries(_model.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);
+}
 function UnitSelector({ value , onChange  }) {
     const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
     const hasAbbreviate = (0, _model.isUnitWithAbbreviate)(value);
@@ -43,11 +66,11 @@ 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
             });
         }
     };
@@ -60,19 +83,18 @@ function UnitSelector({ value , onChange  }) {
         }
     };
     const kindConfig = _model.UNIT_CONFIG[value.kind];
-    var _decimal_places;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Abbreviate",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? !!value.abbreviate : false,
+                    checked: hasAbbreviate ? (0, _utils.shouldAbbreviate)(value.abbreviate) : false,
                     onChange: handleAbbreviateChange,
                     disabled: !hasAbbreviate
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
-                label: "Units",
+                label: "Unit",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
                         id: value.kind,
@@ -100,15 +122,16 @@ function UnitSelector({ value , onChange  }) {
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
-                label: "Decimal",
+                label: "Decimals",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
-                    value: hasDecimalPlaces ? (_decimal_places = value.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _model.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__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                             ...params
                         }),
-                    onChange: handleDecimalChange,
+                    onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true
                 })