@perses-dev/components 0.0.0-snapshot-color-palette-gen-test-bc1b508 → 0.0.0-snapshot-tooltip-highlight-c995fc8

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_DATE_FORMAT, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  date: string;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedDate = TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);\n                const formattedY = formatValue(yValue, unit);\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  date: formattedDate,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const seriesNum = chartData.timeSeries.length;\n  const yBuffer = seriesNum > TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, unit);\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_DATE_FORMAT","TOOLTIP_MAX_ITEMS","getNearbySeries","data","pointInGrid","yBuffer","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedDate","format","formattedY","push","seriesName","date","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","chart","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/focused-series.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { formatValue, UnitOptions, EChartsDataFormat } from '../model';\nimport { CursorData, TOOLTIP_MAX_ITEMS } from './tooltip-model';\n\n// increase multipliers to show more series in tooltip\nexport const DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER = 5.5; // adjusts how many focused series show in tooltip\nexport const NARROW_NEARBY_SERIES_RANGE_MULTIPLIER = 2; // used to reduce number of focused series for heavy queries\nexport const SHOW_MORE_NEARBY_SERIES_LIMIT = 5;\n\nexport interface FocusedSeriesInfo {\n  seriesIdx: number | null;\n  datumIdx: number | null;\n  seriesName: string;\n  dateMs: number;\n  markerColor: string;\n  x: number;\n  y: number;\n  formattedY: string;\n}\n\nexport type FocusedSeriesArray = FocusedSeriesInfo[];\n\n/**\n * Returns formatted series data for the points that are close to the user's cursor\n * Adjust yBuffer to increase or decrease number of series shown\n */\nexport function getNearbySeries(\n  data: EChartsDataFormat,\n  pointInGrid: number[],\n  yBuffer: number,\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n): FocusedSeriesArray {\n  const currentFocusedData: FocusedSeriesArray = [];\n  const focusedX: number | null = pointInGrid[0] ?? null;\n  const focusedY: number | null = pointInGrid[1] ?? null;\n\n  if (focusedX === null || focusedY === null) {\n    return currentFocusedData;\n  }\n\n  if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {\n    for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {\n      const currentSeries = data.timeSeries[seriesIdx];\n      if (currentFocusedData.length >= TOOLTIP_MAX_ITEMS) break;\n      if (currentSeries !== undefined) {\n        const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';\n        const markerColor = currentSeries.color ?? '#000';\n        if (Array.isArray(currentSeries.data)) {\n          for (let datumIdx = 0; datumIdx < currentSeries.data.length; datumIdx++) {\n            const xValue = data.xAxis[datumIdx] ?? 0;\n            const yValue = currentSeries.data[datumIdx];\n            // ensure null values not displayed in tooltip\n            if (yValue !== undefined && yValue !== null && focusedX === datumIdx) {\n              if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {\n                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201\n                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;\n                const formattedY = formatValue(yValue, unit);\n                // trigger emphasis state of nearby series so tooltip matches highlighted lines\n                // https://echarts.apache.org/en/api.html#action.highlight\n                if (chart?.dispatchAction !== undefined) {\n                  chart.dispatchAction({\n                    type: 'highlight',\n                    seriesIndex: seriesIdx,\n                  });\n                }\n                currentFocusedData.push({\n                  seriesIdx: seriesIdx,\n                  datumIdx: datumIdx,\n                  seriesName: currentSeriesName,\n                  dateMs: xValueMilliSeconds,\n                  x: xValue,\n                  y: yValue,\n                  formattedY: formattedY,\n                  markerColor: markerColor.toString(),\n                });\n              } else {\n                // clear emphasis state of lines that are not focused\n                if (chart?.dispatchAction !== undefined) {\n                  chart.dispatchAction({\n                    type: 'downplay',\n                    seriesIndex: seriesIdx,\n                  });\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  return currentFocusedData;\n}\n\n/**\n * Uses mouse position to determine whether user is hovering over a chart canvas\n * If yes, convert from pixel values to logical cartesian coordinates and return all focused series\n */\nexport function getFocusedSeriesData(\n  mousePos: CursorData['coords'],\n  chartData: EChartsDataFormat,\n  pinnedPos: CursorData['coords'],\n  chart?: EChartsInstance,\n  unit?: UnitOptions\n) {\n  if (chart === undefined || mousePos === null) return [];\n\n  // prevents multiple tooltips showing from adjacent charts\n  let cursorTargetMatchesChart = false;\n  if (mousePos.target !== null) {\n    const currentParent = (<HTMLElement>mousePos.target).parentElement;\n    if (currentParent !== null) {\n      const currentGrandparent = currentParent.parentElement;\n      if (currentGrandparent !== null) {\n        const chartDom = chart.getDom();\n        if (chartDom === currentGrandparent) {\n          cursorTargetMatchesChart = true;\n        }\n      }\n    }\n  }\n\n  // allows moving cursor inside tooltip\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n    cursorTargetMatchesChart = true;\n  }\n\n  if (cursorTargetMatchesChart === false) return [];\n\n  if (chart['_model'] === undefined) return [];\n  const chartModel = chart['_model'];\n  const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;\n\n  const seriesNum = chartData.timeSeries.length;\n\n  // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range\n  const yBuffer =\n    seriesNum > SHOW_MORE_NEARBY_SERIES_LIMIT\n      ? yAxisInterval * NARROW_NEARBY_SERIES_RANGE_MULTIPLIER\n      : yAxisInterval * DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER;\n\n  const pointInPixel = [mousePos.plotCanvas.x ?? 0, mousePos.plotCanvas.y ?? 0];\n  if (chart.containPixel('grid', pointInPixel)) {\n    const pointInGrid = chart.convertFromPixel('grid', pointInPixel);\n    if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {\n      return getNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);\n    }\n  }\n\n  // clear all highlighted series when cursor exits canvas\n  // https://echarts.apache.org/en/api.html#action.downplay\n  for (let i = 0; i < seriesNum; i++) {\n    if (chart?.dispatchAction !== undefined) {\n      chart.dispatchAction({\n        type: 'downplay',\n        seriesIndex: i,\n      });\n    }\n  }\n  return [];\n}\n"],"names":["formatValue","TOOLTIP_MAX_ITEMS","DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER","NARROW_NEARBY_SERIES_RANGE_MULTIPLIER","SHOW_MORE_NEARBY_SERIES_LIMIT","getNearbySeries","data","pointInGrid","yBuffer","chart","unit","currentFocusedData","focusedX","focusedY","Array","isArray","xAxis","timeSeries","seriesIdx","length","currentSeries","undefined","currentSeriesName","name","toString","markerColor","color","datumIdx","xValue","yValue","xValueMilliSeconds","formattedY","dispatchAction","type","seriesIndex","push","seriesName","dateMs","x","y","getFocusedSeriesData","mousePos","chartData","pinnedPos","cursorTargetMatchesChart","target","currentParent","parentElement","currentGrandparent","chartDom","getDom","chartModel","yAxisInterval","getComponent","axis","scale","_interval","seriesNum","pointInPixel","plotCanvas","containPixel","convertFromPixel","i"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { FocusedSeriesArray } from './focused-series';
 export declare const TOOLTIP_MAX_WIDTH = 650;
-export declare const TOOLTIP_MAX_HEIGHT = 230;
+export declare const TOOLTIP_MAX_HEIGHT = 400;
 export declare const TOOLTIP_LABELS_MAX_WIDTH: number;
-export declare const TOOLTIP_MAX_ITEMS = 50;
+export declare const TOOLTIP_MAX_ITEMS = 30;
 export declare const TOOLTIP_DATE_FORMAT: Intl.DateTimeFormat;
 export declare const defaultCursorData: {
     coords: {

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -12,9 +12,9 @@
 // limitations under the License.
 import { useEffect, useState } from 'react';
 export const TOOLTIP_MAX_WIDTH = 650;
-export const TOOLTIP_MAX_HEIGHT = 230;
+export const TOOLTIP_MAX_HEIGHT = 400;
 export const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
-export const TOOLTIP_MAX_ITEMS = 50;
+export const TOOLTIP_MAX_ITEMS = 30;
 export const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',

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 = 230;\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 = 30;\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"}

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;AAG/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,7 @@
 // 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 { OptionsEditorControl } from '../OptionsEditorLayout';
 const KIND_OPTIONS = Object.entries(UNIT_CONFIG).map(([id, config])=>{
     return {
@@ -20,13 +20,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 +57,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,7 +74,6 @@ export function UnitSelector({ value , onChange  }) {
         }
     };
     const kindConfig = UNIT_CONFIG[value.kind];
-    var _decimal_places;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
@@ -64,7 +85,7 @@ export function UnitSelector({ value , onChange  }) {
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Units",
+                label: "Unit",
                 control: /*#__PURE__*/ _jsx(Autocomplete, {
                     value: {
                         id: value.kind,
@@ -92,15 +113,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 { 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 ? !!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","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/YAxisLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":";AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,eA0B3D"}
+{"version":3,"file":"YAxisLabel.d.ts","sourceRoot":"","sources":["../src/YAxisLabel.tsx"],"names":[],"mappings":";AAeA,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,eAAe,eA2B3D"}

package/dist/YAxisLabel.js

@@ -26,6 +26,7 @@ export function YAxisLabel({ name , height  }) {
         },
         children: /*#__PURE__*/ _jsx(Typography, {
             variant: "body1",
+            "aria-label": "y axis label",
             sx: {
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","whiteSpace","overflow","textOverflow"],"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;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfT,EAAE,EAAE;gBACFU,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAd,IAAI;UACM;MACT,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        aria-label=\"y axis label\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","aria-label","whiteSpace","overflow","textOverflow"],"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;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfC,YAAU,EAAC,cAAc;YACzBV,EAAE,EAAE;gBACFW,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAf,IAAI;UACM;MACT,CACN;AACJ,CAAC"}

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,6 +23,7 @@ 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();
@@ -153,7 +154,12 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         ref: containerRef,
-        sx: sx
+        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)
     });
 });
 // Validate event config and bind custom events

package/dist/cjs/LineChart/LineChart.js

@@ -163,11 +163,15 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             tooltip: {
                 show: !isOptimizedMode,
                 trigger: 'axis',
-                showContent: false,
-                axisPointer: {
-                    type: isOptimizedMode ? 'none' : 'line',
-                    z: 0
-                }
+                showContent: false
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: isOptimizedMode ? 'none' : 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: true
             },
             toolbox: {
                 feature: {
@@ -230,10 +234,6 @@ 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

@@ -98,12 +98,18 @@ function StatChart(props) {
     const charactersAdjust = formattedValue.length;
     const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
     const containerPadding = `${chartsTheme.container.padding.default}px`;
+    const textAlignment = sparkline ? 'auto' : 'center';
+    const textStyles = {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: textAlignment,
+        alignItems: textAlignment
+    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height: '100%',
             width: '100%',
-            display: 'flex',
-            flexDirection: 'column'
+            ...textStyles
         },
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
@@ -115,19 +121,10 @@ function StatChart(props) {
                     }),
                 children: formattedValue
             }),
-            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                    flex: 1
-                },
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
-                    sx: {
-                        width: '100%',
-                        height: '100%'
-                    },
-                    option: option,
-                    theme: chartsTheme.echartsTheme,
-                    renderer: "svg"
-                })
+            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                renderer: "svg"
             })
         ]
     });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -26,7 +26,7 @@ const _seriesInfo = require("./SeriesInfo");
 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 seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].dateMs ? focusedSeries[0].dateMs : null;
     const formatTimeSeriesHeader = (timeString)=>{
         const date = new Date(timeString);
         const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');

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

@@ -21,12 +21,18 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER: ()=>DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER,
+    NARROW_NEARBY_SERIES_RANGE_MULTIPLIER: ()=>NARROW_NEARBY_SERIES_RANGE_MULTIPLIER,
+    SHOW_MORE_NEARBY_SERIES_LIMIT: ()=>SHOW_MORE_NEARBY_SERIES_LIMIT,
     getNearbySeries: ()=>getNearbySeries,
     getFocusedSeriesData: ()=>getFocusedSeriesData
 });
 const _model = require("../model");
 const _tooltipModel = require("./tooltip-model");
-function getNearbySeries(data, pointInGrid, yBuffer, unit) {
+const DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER = 5.5; // adjusts how many focused series show in tooltip
+const NARROW_NEARBY_SERIES_RANGE_MULTIPLIER = 2; // used to reduce number of focused series for heavy queries
+const SHOW_MORE_NEARBY_SERIES_LIMIT = 5;
+function getNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
     const currentFocusedData = [];
     var ref;
     const focusedX = (ref = pointInGrid[0]) !== null && ref !== void 0 ? ref : null;
@@ -53,18 +59,33 @@ 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);
+                                // trigger emphasis state of nearby series so tooltip matches highlighted lines
+                                // https://echarts.apache.org/en/api.html#action.highlight
+                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                    chart.dispatchAction({
+                                        type: 'highlight',
+                                        seriesIndex: seriesIdx
+                                    });
+                                }
                                 currentFocusedData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
                                     seriesName: currentSeriesName,
-                                    date: formattedDate,
+                                    dateMs: xValueMilliSeconds,
                                     x: xValue,
                                     y: yValue,
                                     formattedY: formattedY,
                                     markerColor: markerColor.toString()
                                 });
+                            } else {
+                                // clear emphasis state of lines that are not focused
+                                if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+                                    chart.dispatchAction({
+                                        type: 'downplay',
+                                        seriesIndex: seriesIdx
+                                    });
+                                }
                             }
                         }
                     }
@@ -99,9 +120,9 @@ function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
     if (chart['_model'] === undefined) return [];
     const chartModel = chart['_model'];
     const yAxisInterval = chartModel.getComponent('yAxis').axis.scale._interval;
-    // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range
     const seriesNum = chartData.timeSeries.length;
-    const yBuffer = seriesNum > _tooltipModel.TOOLTIP_MAX_ITEMS ? yAxisInterval * 0.5 : yAxisInterval * 5;
+    // tooltip trigger area gets smaller with more series, increase yAxisInterval multiplier to expand nearby series range
+    const yBuffer = seriesNum > SHOW_MORE_NEARBY_SERIES_LIMIT ? yAxisInterval * NARROW_NEARBY_SERIES_RANGE_MULTIPLIER : yAxisInterval * DEFAULT_NEARBY_SERIES_RANGE_MULTIPLIER;
     var _x, _y;
     const pointInPixel = [
         (_x = mousePos.plotCanvas.x) !== null && _x !== void 0 ? _x : 0,
@@ -110,7 +131,17 @@ function getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit) {
     if (chart.containPixel('grid', pointInPixel)) {
         const pointInGrid = chart.convertFromPixel('grid', pointInPixel);
         if (pointInGrid[0] !== undefined && pointInGrid[1] !== undefined) {
-            return getNearbySeries(chartData, pointInGrid, yBuffer, unit);
+            return getNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
+        }
+    }
+    // clear all highlighted series when cursor exits canvas
+    // https://echarts.apache.org/en/api.html#action.downplay
+    for(let i = 0; i < seriesNum; i++){
+        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
+            chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: i
+            });
         }
     }
     return [];

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

@@ -32,9 +32,9 @@ _export(exports, {
 });
 const _react = require("react");
 const TOOLTIP_MAX_WIDTH = 650;
-const TOOLTIP_MAX_HEIGHT = 230;
+const TOOLTIP_MAX_HEIGHT = 400;
 const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
-const TOOLTIP_MAX_ITEMS = 50;
+const TOOLTIP_MAX_ITEMS = 30;
 const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -28,13 +28,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 +65,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,7 +82,6 @@ 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, {
@@ -72,7 +93,7 @@ function UnitSelector({ value , onChange  }) {
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
-                label: "Units",
+                label: "Unit",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
                         id: value.kind,
@@ -100,15 +121,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
                 })