npm - @perses-dev/components - Versions diffs - 0.25.0 → 0.26.1 - Mend

@perses-dev/components 0.25.0 → 0.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/LineChart/LineChart.d.ts CHANGED Viewed

@@ -1,8 +1,13 @@
 import { MouseEvent } from 'react';
-import type { GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
+import type { EChartsCoreOption, GridComponentOption, LegendComponentOption, YAXisComponentOption } from 'echarts';
 import { EChartsDataFormat } from '../model/graph';
 import { UnitOptions } from '../model/units';
 import { ZoomEventData } from './utils';
+export declare type TooltipConfig = {
+    showQuery: boolean;
+    wrapLabels: boolean;
+    hidden?: boolean;
+};
 export interface LineChartProps {
     /**
      * Height of the chart
@@ -13,8 +18,10 @@ export interface LineChartProps {
     unit?: UnitOptions;
     grid?: GridComponentOption;
     legend?: LegendComponentOption;
+    tooltipConfig?: TooltipConfig;
     onDataZoom?: (e: ZoomEventData) => void;
     onDoubleClick?: (e: MouseEvent) => void;
+    __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
 }
-export declare function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, yAxis, unit, grid, legend, tooltipConfig, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride, }: LineChartProps): JSX.Element;
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart/LineChart.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,~~EAEV~~,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,~~EACrB~~,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;~~CACzC~~;AAED,wBAAgB,SAAS,CAAC,~~EAAE~~,MAAM,~~EAAE~~,IAAI,~~EAAE~~,KAAK,~~EAAE~~,IAAI,~~EAAE~~,IAAI,~~EAAE~~,MAAM,~~EAAE~~,UAAU,~~EAAE~~,aAAa,~~EAAE~~,EAAE,cAAc,~~eAgJ/G~~"}
1	+ {"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,qBAAqB,EACrB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAAE,iBAAiB,EAA+B,MAAM,gBAAgB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,OAAO,EAA0E,aAAa,EAAE,MAAM,SAAS,CAAC;AAgBhH,oBAAY,aAAa,GAAG;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,aAAqD,EACrD,UAAU,EACV,aAAa,EACb,oCAAoC,GACrC,EAAE,cAAc,eA4JhB"}

package/dist/LineChart/LineChart.js CHANGED Viewed

@@ -36,7 +36,11 @@ use([
     LegendComponent,
     CanvasRenderer
 ]);
-export function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
+export function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+    wrapLabels: true,
+    showQuery: true
+} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+    var ref;
     const chartsTheme = useChartsTheme();
     const chartRef = useRef();
     const [showTooltip, setShowTooltip] = useState(true);
@@ -130,6 +134,9 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
             grid,
             legend
         };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
         return option;
     }, [
         data,
@@ -138,7 +145,8 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
         grid,
         legend,
         noDataOption,
-        timeZone
+        timeZone,
+        __experimentalEChartsOptionsOverride
     ]);
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
@@ -168,10 +176,11 @@ export function LineChart({ height , data , yAxis , unit , grid , legend , onDat
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
+            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
-                wrapLabels: true,
+                showQuery: tooltipConfig.showQuery,
+                wrapLabels: tooltipConfig.wrapLabels,
                 pinTooltip: pinTooltip,
                 unit: unit
             }),

package/dist/LineChart/LineChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n EChartsCoreOption,\n GridComponentOption,\n LineSeriesOption,\n LegendComponentOption,\n YAXisComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n GridComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n EChartsLineChart,\n GridComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n LegendComponent,\n CanvasRenderer,\n]);\n\nexport interface LineChartProps {\n /*\n Height of the chart\n */\n height: number;\n data: EChartsDataFormat;\n yAxis?: YAXisComponentOption;\n unit?: UnitOptions;\n grid?: GridComponentOption;\n legend?: LegendComponentOption;\n onDataZoom?: (e: ZoomEventData) => void;\n onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, yAxis, unit, grid, legend, onDataZoom, onDoubleClick }: LineChartProps) {\n const chartsTheme = useChartsTheme();\n const chartRef = useRef<EChartsInstance>();\n const [showTooltip, setShowTooltip] = useState<boolean>(true);\n const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n const { timeZone } = useTimeZone();\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] \| unknown> = useMemo(() => {\n return {\n datazoom: (params) => {\n if (onDataZoom === undefined) {\n setTimeout(() => {\n // workaround so unpin happens after click event\n setPinTooltip(false);\n }, 10);\n }\n if (onDataZoom === undefined \|\| params.batch[0] === undefined) return;\n const startIndex = params.batch[0].startValue ?? 0;\n const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n const xAxisStartValue = data.xAxis[startIndex];\n const xAxisEndValue = data.xAxis[endIndex];\n\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n startIndex,\n endIndex,\n };\n onDataZoom(zoomEvent);\n }\n },\n // TODO: use legendselectchanged event to fix tooltip when legend selected\n };\n }, [data, onDataZoom, setPinTooltip]);\n\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n\n const handleOnDoubleClick = (e: MouseEvent) => {\n setPinTooltip(false);\n // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n if (onDoubleClick === undefined) {\n if (chartRef.current !== undefined) {\n restoreChart(chartRef.current);\n }\n } else {\n onDoubleClick(e);\n }\n };\n\n const { noDataOption } = chartsTheme;\n\n const option: EChartsCoreOption = useMemo(() => {\n if (data.timeSeries === undefined) return {};\n if (data.timeSeries === null \|\| data.timeSeries.length === 0) return noDataOption;\n\n // show symbols and axisPointer dashed line on hover\n const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n const option: EChartsCoreOption = {\n series: data.timeSeries,\n xAxis: {\n type: 'category',\n data: data.xAxis,\n max: data.xAxisMax,\n axisLabel: {\n formatter: (value: number) => {\n return getFormattedDate(value, rangeMs, timeZone);\n },\n },\n },\n yAxis: getYAxes(yAxis, unit),\n animation: false,\n tooltip: {\n show: !isOptimizedMode,\n trigger: 'axis',\n showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n axisPointer: {\n type: isOptimizedMode ? 'none' : 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n },\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null, // https://stackoverflow.com/a/67684076/17575201\n yAxisIndex: 'none',\n },\n },\n },\n grid,\n legend,\n };\n\n return option;\n }, [data, yAxis, unit, grid, legend, noDataOption, timeZone]);\n\n return (\n <Box\n sx={{ height }}\n onClick={() => {\n setPinTooltip((current) => !current);\n }}\n onMouseDown={(e) => {\n // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n if (e.target instanceof HTMLCanvasElement) {\n setShowTooltip(false);\n }\n }}\n onMouseUp={() => {\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n setShowTooltip(false);\n setPinTooltip(false);\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n onDoubleClick={handleOnDoubleClick}\n >\n {showTooltip === true && (\n <TimeSeriesTooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip} unit={unit} />\n )}\n\n <EChart\n sx={{\n width: '100%',\n height: '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n />\n </Box>\n );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","option","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
1	+ {"version":3,"sources":["../../src/LineChart/LineChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport type {\n EChartsCoreOption,\n GridComponentOption,\n LineSeriesOption,\n LegendComponentOption,\n YAXisComponentOption,\n TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n GridComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n LegendComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { EChartsDataFormat, OPTIMIZED_MODE_SERIES_LIMIT } from '../model/graph';\nimport { UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { TimeSeriesTooltip } from '../TimeSeriesTooltip';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { enableDataZoom, getDateRange, getFormattedDate, getYAxes, restoreChart, ZoomEventData } from './utils';\n\nuse([\n EChartsLineChart,\n GridComponent,\n DataZoomComponent,\n MarkAreaComponent,\n MarkLineComponent,\n MarkPointComponent,\n TitleComponent,\n ToolboxComponent,\n TooltipComponent,\n LegendComponent,\n CanvasRenderer,\n]);\n\nexport type TooltipConfig = {\n showQuery: boolean;\n wrapLabels: boolean;\n hidden?: boolean;\n};\n\nexport interface LineChartProps {\n /*\n Height of the chart\n /\n height: number;\n data: EChartsDataFormat;\n yAxis?: YAXisComponentOption;\n unit?: UnitOptions;\n grid?: GridComponentOption;\n legend?: LegendComponentOption;\n tooltipConfig?: TooltipConfig;\n onDataZoom?: (e: ZoomEventData) => void;\n onDoubleClick?: (e: MouseEvent) => void;\n __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport function LineChart({\n height,\n data,\n yAxis,\n unit,\n grid,\n legend,\n tooltipConfig = { wrapLabels: true, showQuery: true },\n onDataZoom,\n onDoubleClick,\n __experimentalEChartsOptionsOverride,\n}: LineChartProps) {\n const chartsTheme = useChartsTheme();\n const chartRef = useRef<EChartsInstance>();\n const [showTooltip, setShowTooltip] = useState<boolean>(true);\n const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n const { timeZone } = useTimeZone();\n\n const handleEvents: OnEventsType<LineSeriesOption['data'] \| unknown> = useMemo(() => {\n return {\n datazoom: (params) => {\n if (onDataZoom === undefined) {\n setTimeout(() => {\n // workaround so unpin happens after click event\n setPinTooltip(false);\n }, 10);\n }\n if (onDataZoom === undefined \|\| params.batch[0] === undefined) return;\n const startIndex = params.batch[0].startValue ?? 0;\n const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n const xAxisStartValue = data.xAxis[startIndex];\n const xAxisEndValue = data.xAxis[endIndex];\n\n if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n const zoomEvent: ZoomEventData = {\n start: xAxisStartValue,\n end: xAxisEndValue,\n startIndex,\n endIndex,\n };\n onDataZoom(zoomEvent);\n }\n },\n // TODO: use legendselectchanged event to fix tooltip when legend selected\n };\n }, [data, onDataZoom, setPinTooltip]);\n\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n\n const handleOnDoubleClick = (e: MouseEvent) => {\n setPinTooltip(false);\n // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n if (onDoubleClick === undefined) {\n if (chartRef.current !== undefined) {\n restoreChart(chartRef.current);\n }\n } else {\n onDoubleClick(e);\n }\n };\n\n const { noDataOption } = chartsTheme;\n\n const option: EChartsCoreOption = useMemo(() => {\n if (data.timeSeries === undefined) return {};\n if (data.timeSeries === null \|\| data.timeSeries.length === 0) return noDataOption;\n\n // show symbols and axisPointer dashed line on hover\n const isOptimizedMode = data.timeSeries.length > OPTIMIZED_MODE_SERIES_LIMIT;\n\n const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n const option: EChartsCoreOption = {\n series: data.timeSeries,\n xAxis: {\n type: 'category',\n data: data.xAxis,\n max: data.xAxisMax,\n axisLabel: {\n formatter: (value: number) => {\n return getFormattedDate(value, rangeMs, timeZone);\n },\n },\n },\n yAxis: getYAxes(yAxis, unit),\n animation: false,\n tooltip: {\n show: !isOptimizedMode,\n trigger: 'axis',\n showContent: false, // echarts tooltip content hidden since we use custom tooltip instead\n axisPointer: {\n type: isOptimizedMode ? 'none' : 'line',\n z: 0, // ensure point symbol shows on top of dashed line\n },\n },\n toolbox: {\n feature: {\n dataZoom: {\n icon: null, // https://stackoverflow.com/a/67684076/17575201\n yAxisIndex: 'none',\n },\n },\n },\n grid,\n legend,\n };\n\n if (__experimentalEChartsOptionsOverride) {\n return __experimentalEChartsOptionsOverride(option);\n }\n return option;\n }, [data, yAxis, unit, grid, legend, noDataOption, timeZone, __experimentalEChartsOptionsOverride]);\n\n return (\n <Box\n sx={{ height }}\n onClick={() => {\n setPinTooltip((current) => !current);\n }}\n onMouseDown={(e) => {\n // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n if (e.target instanceof HTMLCanvasElement) {\n setShowTooltip(false);\n }\n }}\n onMouseUp={() => {\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n setShowTooltip(false);\n setPinTooltip(false);\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n if (chartRef.current !== undefined) {\n enableDataZoom(chartRef.current);\n }\n }}\n onDoubleClick={handleOnDoubleClick}\n >\n {/ Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n {showTooltip === true &&\n (option.tooltip as TooltipComponentOption)?.showContent === false &&\n tooltipConfig.hidden !== true && (\n <TimeSeriesTooltip\n chartRef={chartRef}\n chartData={data}\n showQuery={tooltipConfig.showQuery}\n wrapLabels={tooltipConfig.wrapLabels}\n pinTooltip={pinTooltip}\n unit={unit}\n />\n )}\n <EChart\n sx={{\n width: '100%',\n height: '100%',\n }}\n option={option}\n theme={chartsTheme.echartsTheme}\n onEvents={handleEvents}\n _instance={chartRef}\n />\n </Box>\n );\n}\n"],"names":["React","useMemo","useRef","useState","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","CanvasRenderer","EChart","OPTIMIZED_MODE_SERIES_LIMIT","useChartsTheme","TimeSeriesTooltip","useTimeZone","enableDataZoom","getDateRange","getFormattedDate","getYAxes","restoreChart","height","data","yAxis","unit","grid","legend","tooltipConfig","wrapLabels","showQuery","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","option","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","timeZone","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnDoubleClick","e","noDataOption","timeSeries","isOptimizedMode","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","animation","tooltip","show","trigger","showContent","axisPointer","z","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","target","HTMLCanvasElement","onMouseUp","onMouseLeave","onMouseEnter","hidden","chartData","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts CHANGED Viewed

@@ -6,6 +6,7 @@ export interface SeriesInfoProps {
     markerColor: string;
     totalSeries: number;
     wrapLabels?: boolean;
+    showQuery?: boolean;
 }
 export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;
 //# sourceMappingURL=SeriesInfo.d.ts.map

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;~~CACtB~~;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,~~eAuEhD~~"}
1	+ {"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAyEhD"}

package/dist/TimeSeriesTooltip/SeriesInfo.js CHANGED Viewed

@@ -16,7 +16,7 @@ import { SeriesMarker } from './SeriesMarker';
 import { SeriesLabelsStack } from './SeriesLabelsStack';
 import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
 export function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true , showQuery =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -36,8 +36,9 @@ export function SeriesInfo(props) {
             markerColor: markerColor
         });
     }
-    // add space after commas when more than one focused series
-    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    // when more than one series, either show full series name or formatted labels only
+    const seriesInfo = showQuery ? seriesName : formattedSeriesLabels;
+    const formattedSeriesInfo = seriesInfo.replace(/[,]/g, ', '); // add space after commas so wrapLabels works
     return /*#__PURE__*/ _jsxs(Box, {
         sx: {
             display: 'table-row',
@@ -68,7 +69,7 @@ export function SeriesInfo(props) {
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
-                        children: inlineSeriesLabels
+                        children: formattedSeriesInfo
                     })
                 ]
             }),

package/dist/TimeSeriesTooltip/SeriesInfo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.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 } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n seriesName: string;\n y: number;\n formattedY: string;\n markerColor: string;\n totalSeries: number;\n wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n const { seriesName, formattedY, markerColor, totalSeries, wrapLabels } = props;\n\n // metric __name__ comes before opening curly brace, ignore if not populated\n // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n // ex without metric name: {env=\"demo\",job=\"node\"}\n const splitName = seriesName.split('{');\n const seriesLabels = splitName[1] ?? seriesName;\n\n // remove curly braces that wrap labels\n const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n // determine whether to show labels on separate lines\n const splitLabels = formattedSeriesLabels.split(',');\n if (totalSeries === 1 && splitLabels.length > 1) {\n const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n return (\n <SeriesLabelsStack\n formattedY={formattedY}\n metricName={metricName}\n metricLabels={splitLabels}\n markerColor={markerColor}\n />\n );\n }\n\n // ~~add space after commas~~ when more than one ~~focused~~ series\n const ~~inlineSeriesLabels~~ = formattedSeriesLabels.replace(/[,]/g, ', ');\n return (\n <Box\n sx={{\n display: 'table-row',\n paddingTop: 0.5,\n }}\n >\n <Box\n sx={{\n display: 'table-cell',\n maxWidth: '520px',\n }}\n >\n <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n <Box\n component=\"span\"\n sx={(theme) => ({\n display: 'inline-block',\n width: 'calc(100% - 20px)',\n minWidth: 150,\n maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n overflow: 'hidden',\n color: theme.palette.common.white,\n textOverflow: 'ellipsis',\n whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n })}\n >\n {~~inlineSeriesLabels~~}\n </Box>\n </Box>\n <Box\n sx={{\n display: 'table-cell',\n paddingLeft: 1.5,\n textAlign: 'right',\n verticalAlign: 'top',\n fontWeight: '700',\n }}\n >\n {formattedY}\n </Box>\n </Box>\n );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","~~inlineSeriesLabels~~","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"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,QAAQ,eAAe,CAAC;AACpC,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAC9C,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AACxD,SAASC,wBAAwB,QAAQ,iBAAiB,CAAC;~~AAW3D~~,OAAO,SAASC,UAAU,CAACC,KAAsB,EAAE;IACjD,MAAM,EAAEC,UAAU,CAAA,EAAEC,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAEC,WAAW,CAAA,EAAEC,UAAU,CAAA,EAAE,~~GAAGL~~,KAAK,AAAC;~~IAE/E~~,4EAA4E;IAC5E,0DAA0D;IAC1D,kDAAkD;IAClD,~~MAAMM~~,SAAS,~~GAAGL~~,UAAU,~~CAACM~~,KAAK,CAAC,GAAG,CAAC,AAAC;QACnBD,GAAY;IAAjC,MAAME,YAAY,GAAGF,CAAAA,GAAY,GAAZA,SAAS,CAAC,CAAC,CAAC,cAAZA,GAAY,cAAZA,GAAY,~~GAAIL~~,UAAU,AAAC;IAEhD,uCAAuC;IACvC,~~MAAMQ~~,qBAAqB,GAAGD,YAAY,CAACE,OAAO,UAAU,EAAE,CAAC,AAAC;IAEhE,qDAAqD;IACrD,MAAMC,WAAW,GAAGF,qBAAqB,CAACF,KAAK,CAAC,GAAG,CAAC,AAAC;IACrD,~~IAAIH~~,WAAW,KAAK,CAAC,~~IAAIO~~,WAAW,CAACC,MAAM,GAAG,CAAC,EAAE;QAC/C,MAAMC,UAAU,GAAGP,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,EAAEA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,QAAQ,AAAC;QAChE,qBACE,~~KAACT~~,iBAAiB;YAChBK,UAAU,EAAEA,UAAU;~~YACtBW~~,UAAU,EAAEA,UAAU;YACtBC,YAAY,EAAEH,WAAW;~~YACzBR~~,WAAW,EAAEA,WAAW;UACxB,CACF;IACJ,CAAC;IAED,~~2DAA2D~~;~~IAC3D~~,~~MAAMY~~,~~kBAAkB~~,~~GAAGN~~,qBAAqB,~~CAACC~~,OAAO,SAAS,IAAI,CAAC,AAAC;~~IACvE~~,qBACE,~~MAACf~~,GAAG;~~QACFqB~~,EAAE,EAAE;YACFC,OAAO,EAAE,WAAW;YACpBC,UAAU,EAAE,GAAG;SAChB;;0BAED,~~MAACvB~~,GAAG;~~gBACFqB~~,EAAE,EAAE;oBACFC,OAAO,EAAE,YAAY;oBACrBE,QAAQ,EAAE,OAAO;iBAClB;;kCAED,~~KAACvB~~,YAAY;wBAACO,WAAW,EAAEA,WAAW;~~wBAAEa~~,EAAE,EAAE;4BAAEI,SAAS,EAAE,GAAG;yBAAE;sBAAI;kCAClE,~~KAACzB~~,GAAG;~~wBACF0B~~,SAAS,EAAC,MAAM;wBAChBL,EAAE,EAAE,CAACM,KAAK,GAAM,CAAA;gCACdL,OAAO,EAAE,cAAc;gCACvBM,KAAK,EAAE,mBAAmB;gCAC1BC,QAAQ,EAAE,GAAG;gCACbL,QAAQ,~~EAAErB~~,wBAAwB;~~gCAClC2B~~,QAAQ,EAAE,QAAQ;gCAClBC,KAAK,EAAEJ,KAAK,CAACK,OAAO,CAACC,MAAM,CAACC,KAAK;gCACjCC,YAAY,EAAE,UAAU;gCACxBC,UAAU,~~EAAE1B~~,UAAU,GAAG,QAAQ,GAAG,QAAQ;6BAC7C,CAAA,AAAC;~~kCAEDU~~,~~kBAAkB~~;~~sBACf~~;;cACF;0BACN,~~KAACpB~~,GAAG;~~gBACFqB~~,EAAE,EAAE;oBACFC,OAAO,EAAE,YAAY;oBACrBe,WAAW,EAAE,GAAG;oBAChBC,SAAS,EAAE,OAAO;oBAClBC,aAAa,EAAE,KAAK;oBACpBC,UAAU,EAAE,KAAK;iBAClB;~~0BAEAjC~~,UAAU;cACP;;MACF,CACN;AACJ,CAAC"}
1	+ {"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.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 } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n seriesName: string;\n y: number;\n formattedY: string;\n markerColor: string;\n totalSeries: number;\n wrapLabels?: boolean;\n showQuery?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n const { seriesName, formattedY, markerColor, totalSeries, wrapLabels = true, showQuery = true } = props;\n\n // metric __name__ comes before opening curly brace, ignore if not populated\n // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n // ex without metric name: {env=\"demo\",job=\"node\"}\n const splitName = seriesName.split('{');\n const seriesLabels = splitName[1] ?? seriesName;\n\n // remove curly braces that wrap labels\n const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n // determine whether to show labels on separate lines\n const splitLabels = formattedSeriesLabels.split(',');\n if (totalSeries === 1 && splitLabels.length > 1) {\n const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n return (\n <SeriesLabelsStack\n formattedY={formattedY}\n metricName={metricName}\n metricLabels={splitLabels}\n markerColor={markerColor}\n />\n );\n }\n\n // when more than one series, either show full series name or formatted labels only\n const seriesInfo = showQuery ? seriesName : formattedSeriesLabels;\n const formattedSeriesInfo = seriesInfo.replace(/[,]/g, ', '); // add space after commas so wrapLabels works\n\n return (\n <Box\n sx={{\n display: 'table-row',\n paddingTop: 0.5,\n }}\n >\n <Box\n sx={{\n display: 'table-cell',\n maxWidth: '520px',\n }}\n >\n <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n <Box\n component=\"span\"\n sx={(theme) => ({\n display: 'inline-block',\n width: 'calc(100% - 20px)',\n minWidth: 150,\n maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n overflow: 'hidden',\n color: theme.palette.common.white,\n textOverflow: 'ellipsis',\n whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n })}\n >\n {formattedSeriesInfo}\n </Box>\n </Box>\n <Box\n sx={{\n display: 'table-cell',\n paddingLeft: 1.5,\n textAlign: 'right',\n verticalAlign: 'top',\n fontWeight: '700',\n }}\n >\n {formattedY}\n </Box>\n </Box>\n );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","showQuery","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","seriesInfo","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
     pinTooltip: boolean;
+    showQuery?: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
 }

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,~~oDA2D5B~~,CAAC"}
1	+ {"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oDA4D5B,CAAC"}

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js CHANGED Viewed

@@ -17,7 +17,7 @@ import { getFocusedSeriesData } from './focused-series';
 import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { TooltipContent } from './TooltipContent';
 import { assembleTransform } from './utils';
-export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , showQuery , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     if (mousePos === null || mousePos.target === null) return null;
@@ -62,7 +62,8 @@ export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesToo
             },
             children: /*#__PURE__*/ _jsx(TooltipContent, {
                 focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
+                wrapLabels: wrapLabels,
+                showQuery: showQuery
             })
         })
     });

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n chartRef: React.MutableRefObject<EChartsInstance \| undefined>;\n chartData: EChartsDataFormat;\n pinTooltip: boolean;\n wrapLabels?: boolean;\n unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n chartRef,\n chartData,\n wrapLabels,\n pinTooltip,\n unit,\n}: TimeSeriesTooltipProps) {\n const [pinnedPos, setPinnedPos] = useState<CursorCoordinates \| null>(null);\n const mousePos = useMousePosition();\n\n if (mousePos === null \|\| mousePos.target === null) return null;\n\n // ensure user is hovering over a chart before checking for nearby series\n if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n const chart = chartRef.current;\n const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n const chartWidth = chart?.getWidth() ?? 750;\n const chartHeight = chart?.getHeight() ?? 230;\n const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n if (focusedSeries.length === 0) {\n return null;\n }\n\n if (pinTooltip === true && pinnedPos === null) {\n setPinnedPos(mousePos);\n }\n\n return (\n <Portal>\n <Box\n sx={(theme) => ({\n maxWidth: TOOLTIP_MAX_WIDTH,\n maxHeight: TOOLTIP_MAX_HEIGHT,\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n borderRadius: '6px',\n color: '#fff',\n fontSize: '11px',\n visibility: 'visible',\n opacity: 1,\n transition: 'all 0.1s ease-out',\n zIndex: theme.zIndex.tooltip,\n overflow: 'hidden',\n '&:hover': {\n overflowY: 'auto',\n },\n })}\n style={{\n transform: cursorTransform,\n }}\n >\n <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n </Box>\n </Portal>\n );\n});\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"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,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO,CAAC;AACxC,SAASC,GAAG,EAAEC,MAAM,QAAQ,eAAe,CAAC;AAG5C,SAASC,oBAAoB,QAAQ,kBAAkB,CAAC;AACxD,SAA4BC,kBAAkB,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,iBAAiB,CAAC;AAC7G,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAClD,SAASC,iBAAiB,QAAQ,SAAS,CAAC;~~AAU5C~~,OAAO,MAAMC,iBAAiB,iBAAGV,KAAK,CAACW,IAAI,CAAC,SAASD,iBAAiB,CAAC,EACrEE,QAAQ,CAAA,EACRC,SAAS,CAAA,EACTC,UAAU,CAAA,EACVC,UAAU,CAAA,EACVC,IAAI,CAAA,EACmB,EAAE;IACzB,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,~~GAAGjB~~,QAAQ,CAA2B,IAAI,CAAC,AAAC;IAC3E,~~MAAMkB~~,QAAQ,~~GAAGZ~~,gBAAgB,EAAE,AAAC;IAEpC,~~IAAIY~~,QAAQ,KAAK,IAAI,IAAIA,QAAQ,CAACC,MAAM,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;IAE/D,yEAAyE;IACzE,IAAIH,SAAS,KAAK,IAAI,IAAI,AAACE,QAAQ,CAACC,MAAM,CAAiBC,OAAO,KAAK,QAAQ,EAAE,OAAO,IAAI,CAAC;IAE7F,MAAMC,KAAK,~~GAAGV~~,QAAQ,~~CAACW~~,OAAO,AAAC;IAC/B,MAAMC,aAAa,~~GAAGpB~~,oBAAoB,~~CAACe~~,QAAQ,~~EAAEN~~,SAAS,~~EAAEI~~,SAAS,EAAEK,KAAK,EAAEN,IAAI,CAAC,AAAC;QACrEM,GAAiB;IAApC,MAAMG,UAAU,GAAGH,CAAAA,GAAiB,GAAjBA,KAAK,aAALA,KAAK,WAAU,GAAfA,KAAAA,CAAe,GAAfA,KAAK,CAAEI,QAAQ,EAAE,cAAjBJ,GAAiB,cAAjBA,GAAiB,GAAI,GAAG,AAAC;QACxBA,IAAkB;IAAtC,MAAMK,WAAW,GAAGL,CAAAA,IAAkB,GAAlBA,KAAK,aAALA,KAAK,WAAW,GAAhBA,KAAAA,CAAgB,GAAhBA,KAAK,CAAEM,SAAS,EAAE,cAAlBN,IAAkB,cAAlBA,IAAkB,GAAI,GAAG,AAAC;IAC9C,MAAMO,eAAe,~~GAAGpB~~,iBAAiB,~~CAACU~~,QAAQ,EAAEK,aAAa,CAACM,MAAM,EAAEL,UAAU,EAAEE,WAAW,EAAEV,SAAS,CAAC,AAAC;IAE9G,IAAIO,aAAa,CAACM,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAIf,UAAU,KAAK,IAAI,IAAIE,SAAS,KAAK,IAAI,EAAE;QAC7CC,YAAY,CAACC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAED,qBACE,~~KAAChB~~,MAAM;kBACL,cAAA,KAACD,GAAG;~~YACF6B~~,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;oBACdC,QAAQ,~~EAAE3B~~,iBAAiB;~~oBAC3B4B~~,SAAS,~~EAAE7B~~,kBAAkB;~~oBAC7B8B~~,QAAQ,EAAE,UAAU;oBACpBC,GAAG,EAAE,CAAC;oBACNC,IAAI,EAAE,CAAC;oBACPC,eAAe,EAAE,SAAS;oBAC1BC,YAAY,EAAE,KAAK;oBACnBC,KAAK,EAAE,MAAM;oBACbC,QAAQ,EAAE,MAAM;oBAChBC,UAAU,EAAE,SAAS;oBACrBC,OAAO,EAAE,CAAC;oBACVC,UAAU,EAAE,mBAAmB;oBAC/BC,MAAM,EAAEb,KAAK,CAACa,MAAM,CAACC,OAAO;oBAC5BC,QAAQ,EAAE,QAAQ;oBAClB,SAAS,EAAE;wBACTC,SAAS,EAAE,MAAM;qBAClB;iBACF,CAAA,AAAC;YACFC,KAAK,EAAE;gBACLC,SAAS,EAAErB,eAAe;aAC3B;sBAED,cAAA,~~KAACrB~~,cAAc;~~gBAACgB~~,aAAa,EAAEA,aAAa;~~gBAAEV~~,UAAU,EAAEA,UAAU;cAAI;~~UACpE~~;MACC,CACT;AACJ,CAAC,CAAC,CAAC"}
1	+ {"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n chartRef: React.MutableRefObject<EChartsInstance \| undefined>;\n chartData: EChartsDataFormat;\n pinTooltip: boolean;\n showQuery?: boolean;\n wrapLabels?: boolean;\n unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n chartRef,\n chartData,\n wrapLabels,\n showQuery,\n pinTooltip,\n unit,\n}: TimeSeriesTooltipProps) {\n const [pinnedPos, setPinnedPos] = useState<CursorCoordinates \| null>(null);\n const mousePos = useMousePosition();\n\n if (mousePos === null \|\| mousePos.target === null) return null;\n\n // ensure user is hovering over a chart before checking for nearby series\n if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n const chart = chartRef.current;\n const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n const chartWidth = chart?.getWidth() ?? 750;\n const chartHeight = chart?.getHeight() ?? 230;\n const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n if (focusedSeries.length === 0) {\n return null;\n }\n\n if (pinTooltip === true && pinnedPos === null) {\n setPinnedPos(mousePos);\n }\n\n return (\n <Portal>\n <Box\n sx={(theme) => ({\n maxWidth: TOOLTIP_MAX_WIDTH,\n maxHeight: TOOLTIP_MAX_HEIGHT,\n position: 'absolute',\n top: 0,\n left: 0,\n backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n borderRadius: '6px',\n color: '#fff',\n fontSize: '11px',\n visibility: 'visible',\n opacity: 1,\n transition: 'all 0.1s ease-out',\n zIndex: theme.zIndex.tooltip,\n overflow: 'hidden',\n '&:hover': {\n overflowY: 'auto',\n },\n })}\n style={{\n transform: cursorTransform,\n }}\n >\n <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} showQuery={showQuery} />\n </Box>\n </Portal>\n );\n});\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","showQuery","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@
 import { FocusedSeriesArray } from './focused-series';
 export interface TooltipContentProps {
     focusedSeries: FocusedSeriesArray | null;
+    showQuery?: boolean;
     wrapLabels?: boolean;
 }
 export declare function TooltipContent(props: TooltipContentProps): JSX.Element;

package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,~~eAqExD~~"}
1	+ {"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAsExD"}

package/dist/TimeSeriesTooltip/TooltipContent.js CHANGED Viewed

@@ -16,7 +16,7 @@ import { Box, Divider, Stack, Typography } from '@mui/material';
 import { useTimeZone } from '../context/TimeZoneProvider';
 import { SeriesInfo } from './SeriesInfo';
 export function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
+    const { focusedSeries , showQuery , wrapLabels  } = props;
     const { formatWithUserTimeZone  } = useTimeZone();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
     const formatTimeSeriesHeader = (timeString)=>{
@@ -75,6 +75,7 @@ export function TooltipContent(props) {
                             formattedY: formattedY,
                             markerColor: markerColor,
                             totalSeries: sortedFocusedSeries.length,
+                            showQuery: showQuery,
                             wrapLabels: wrapLabels
                         }, key);
                     })

package/dist/TimeSeriesTooltip/TooltipContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n focusedSeries: FocusedSeriesArray \| null;\n wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n const { focusedSeries, wrapLabels } = props;\n const { formatWithUserTimeZone } = useTimeZone();\n\n const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n const formatTimeSeriesHeader = (timeString: string) => {\n const date = new Date(timeString);\n const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n return (\n <>\n <Typography\n variant=\"caption\"\n sx={(theme) => ({\n color: theme.palette.common.white,\n })}\n >\n {formattedDate}\n </Typography>\n <Typography variant=\"caption\">\n <strong>{formattedTime}</strong>\n </Typography>\n </>\n );\n };\n\n const sortedFocusedSeries = useMemo(() => {\n if (focusedSeries === null) return null;\n return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n }, [focusedSeries]);\n\n if (sortedFocusedSeries !== null && seriesTime !== null) {\n return (\n <Stack py={1} px={1.5} spacing={0.5}>\n <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n <Divider\n sx={(theme) => ({\n borderColor: theme.palette.grey['500'],\n })}\n />\n <Box\n sx={{\n display: 'table',\n }}\n >\n {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n if (datumIdx === null \|\| seriesIdx === null) return null;\n const key = seriesIdx.toString() + datumIdx.toString();\n\n return (\n <SeriesInfo\n key={key}\n seriesName={seriesName}\n y={y}\n formattedY={formattedY}\n markerColor={markerColor}\n totalSeries={sortedFocusedSeries.length}\n wrapLabels={wrapLabels}\n />\n );\n })}\n </Box>\n </Stack>\n );\n } else {\n return <></>;\n }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeString","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChE,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAE1D,SAASC,UAAU,QAAQ,cAAc,CAAC;~~AAO1C~~,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,aAAa,CAAA,EAAEC,UAAU,CAAA,EAAE,~~GAAGF~~,KAAK,AAAC;~~IAC5C~~,MAAM,~~EAAEG~~,sBAAsB,CAAA,EAAE,~~GAAGN~~,WAAW,EAAE,AAAC;IAEjD,~~MAAMO~~,UAAU,~~GAAGH~~,aAAa,IAAIA,aAAa,CAAC,CAAC,CAAC,IAAIA,aAAa,CAAC,CAAC,CAAC,~~CAACI~~,IAAI,~~GAAGJ~~,aAAa,CAAC,CAAC,CAAC,~~CAACI~~,IAAI,GAAG,IAAI,AAAC;IAE7G,MAAMC,sBAAsB,GAAG,CAACC,UAAkB,GAAK;QACrD,MAAMF,IAAI,GAAG,IAAIG,IAAI,CAACD,UAAU,CAAC,AAAC;QAClC,MAAME,aAAa,GAAGN,sBAAsB,CAACE,IAAI,EAAE,iBAAiB,CAAC,AAAC;QACtE,MAAMK,aAAa,GAAGP,sBAAsB,CAACE,IAAI,EAAE,UAAU,CAAC,AAAC;QAE/D,qBACE;;8BACE,~~KAACT~~,UAAU;~~oBACTe~~,OAAO,EAAC,SAAS;oBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,MAAM,CAACC,KAAK;yBAClC,CAAA,AAAC;8BAEDR,aAAa;kBACH;8BACb,~~KAACb~~,UAAU;~~oBAACe~~,OAAO,EAAC,SAAS;8BAC3B,cAAA,KAACO,QAAM;kCAAER,aAAa;sBAAU;kBACrB;;UACZ,CACH;IACJ,CAAC,AAAC;IAEF,MAAMS,mBAAmB,~~GAAG3B~~,OAAO,CAAC,IAAM;QACxC,IAAIS,aAAa,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACxC,OAAOA,aAAa,~~CAACmB~~,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IAC5D,CAAC,EAAE;~~QAACtB~~,aAAa;KAAC,CAAC,AAAC;IAEpB,~~IAAIkB~~,mBAAmB,KAAK,IAAI,IAAIf,UAAU,KAAK,IAAI,EAAE;QACvD,qBACE,~~MAACT~~,KAAK;~~YAAC6B~~,EAAE,EAAE,CAAC;YAAEC,EAAE,EAAE,GAAG;YAAEC,OAAO,EAAE,GAAG;;8BACjC,~~KAAC9B~~,UAAU;~~oBAACe~~,OAAO,EAAC,SAAS;8BAAEL,sBAAsB,CAACF,UAAU,CAAC;kBAAc;8BAC/E,~~KAACV~~,OAAO;~~oBACNkB~~,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdc,WAAW,EAAEd,KAAK,CAACE,OAAO,CAACa,IAAI,CAAC,KAAK,CAAC;yBACvC,CAAA,AAAC;kBACF;8BACF,~~KAACnC~~,GAAG;~~oBACFmB~~,EAAE,EAAE;wBACFiB,OAAO,EAAE,OAAO;qBACjB;8BAEAV,mBAAmB,CAACW,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAEV,CAAC,CAAA,EAAEW,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAK;wBAC5F,IAAIJ,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;wBACzD,MAAMI,GAAG,GAAGJ,SAAS,CAACK,QAAQ,EAAE,GAAGN,QAAQ,CAACM,QAAQ,EAAE,AAAC;wBAEvD,qBACE,~~KAACvC~~,UAAU;~~4BAETmC~~,UAAU,EAAEA,UAAU;4BACtBV,CAAC,EAAEA,CAAC;4BACJW,UAAU,EAAEA,UAAU;4BACtBC,WAAW,EAAEA,WAAW;4BACxBG,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;~~4BACvCrC~~,UAAU,EAAEA,UAAU;~~2BANjBkC~~,GAAG,~~CAOR~~,CACF;oBACJ,CAAC,CAAC;kBACE;;UACA,CACR;IACJ,OAAO;QACL,qBAAO,mBAAK,CAAC;IACf,CAAC;AACH,CAAC"}
1	+ {"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n focusedSeries: FocusedSeriesArray \| null;\n showQuery?: boolean;\n wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n const { focusedSeries, showQuery, wrapLabels } = props;\n const { formatWithUserTimeZone } = useTimeZone();\n\n const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n const formatTimeSeriesHeader = (timeString: string) => {\n const date = new Date(timeString);\n const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n return (\n <>\n <Typography\n variant=\"caption\"\n sx={(theme) => ({\n color: theme.palette.common.white,\n })}\n >\n {formattedDate}\n </Typography>\n <Typography variant=\"caption\">\n <strong>{formattedTime}</strong>\n </Typography>\n </>\n );\n };\n\n const sortedFocusedSeries = useMemo(() => {\n if (focusedSeries === null) return null;\n return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n }, [focusedSeries]);\n\n if (sortedFocusedSeries !== null && seriesTime !== null) {\n return (\n <Stack py={1} px={1.5} spacing={0.5}>\n <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n <Divider\n sx={(theme) => ({\n borderColor: theme.palette.grey['500'],\n })}\n />\n <Box\n sx={{\n display: 'table',\n }}\n >\n {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n if (datumIdx === null \|\| seriesIdx === null) return null;\n const key = seriesIdx.toString() + datumIdx.toString();\n\n return (\n <SeriesInfo\n key={key}\n seriesName={seriesName}\n y={y}\n formattedY={formattedY}\n markerColor={markerColor}\n totalSeries={sortedFocusedSeries.length}\n showQuery={showQuery}\n wrapLabels={wrapLabels}\n />\n );\n })}\n </Box>\n </Stack>\n );\n } else {\n return <></>;\n }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","showQuery","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeString","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChE,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAE1D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAQ1C,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,aAAa,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGH,KAAK,AAAC;IACvD,MAAM,EAAEI,sBAAsB,CAAA,EAAE,GAAGP,WAAW,EAAE,AAAC;IAEjD,MAAMQ,UAAU,GAAGJ,aAAa,IAAIA,aAAa,CAAC,CAAC,CAAC,IAAIA,aAAa,CAAC,CAAC,CAAC,CAACK,IAAI,GAAGL,aAAa,CAAC,CAAC,CAAC,CAACK,IAAI,GAAG,IAAI,AAAC;IAE7G,MAAMC,sBAAsB,GAAG,CAACC,UAAkB,GAAK;QACrD,MAAMF,IAAI,GAAG,IAAIG,IAAI,CAACD,UAAU,CAAC,AAAC;QAClC,MAAME,aAAa,GAAGN,sBAAsB,CAACE,IAAI,EAAE,iBAAiB,CAAC,AAAC;QACtE,MAAMK,aAAa,GAAGP,sBAAsB,CAACE,IAAI,EAAE,UAAU,CAAC,AAAC;QAE/D,qBACE;;8BACE,KAACV,UAAU;oBACTgB,OAAO,EAAC,SAAS;oBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,MAAM,CAACC,KAAK;yBAClC,CAAA,AAAC;8BAEDR,aAAa;kBACH;8BACb,KAACd,UAAU;oBAACgB,OAAO,EAAC,SAAS;8BAC3B,cAAA,KAACO,QAAM;kCAAER,aAAa;sBAAU;kBACrB;;UACZ,CACH;IACJ,CAAC,AAAC;IAEF,MAAMS,mBAAmB,GAAG5B,OAAO,CAAC,IAAM;QACxC,IAAIS,aAAa,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACxC,OAAOA,aAAa,CAACoB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IAC5D,CAAC,EAAE;QAACvB,aAAa;KAAC,CAAC,AAAC;IAEpB,IAAImB,mBAAmB,KAAK,IAAI,IAAIf,UAAU,KAAK,IAAI,EAAE;QACvD,qBACE,MAACV,KAAK;YAAC8B,EAAE,EAAE,CAAC;YAAEC,EAAE,EAAE,GAAG;YAAEC,OAAO,EAAE,GAAG;;8BACjC,KAAC/B,UAAU;oBAACgB,OAAO,EAAC,SAAS;8BAAEL,sBAAsB,CAACF,UAAU,CAAC;kBAAc;8BAC/E,KAACX,OAAO;oBACNmB,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdc,WAAW,EAAEd,KAAK,CAACE,OAAO,CAACa,IAAI,CAAC,KAAK,CAAC;yBACvC,CAAA,AAAC;kBACF;8BACF,KAACpC,GAAG;oBACFoB,EAAE,EAAE;wBACFiB,OAAO,EAAE,OAAO;qBACjB;8BAEAV,mBAAmB,CAACW,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAEV,CAAC,CAAA,EAAEW,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAK;wBAC5F,IAAIJ,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;wBACzD,MAAMI,GAAG,GAAGJ,SAAS,CAACK,QAAQ,EAAE,GAAGN,QAAQ,CAACM,QAAQ,EAAE,AAAC;wBAEvD,qBACE,KAACxC,UAAU;4BAEToC,UAAU,EAAEA,UAAU;4BACtBV,CAAC,EAAEA,CAAC;4BACJW,UAAU,EAAEA,UAAU;4BACtBC,WAAW,EAAEA,WAAW;4BACxBG,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;4BACvCtC,SAAS,EAAEA,SAAS;4BACpBC,UAAU,EAAEA,UAAU;2BAPjBkC,GAAG,CAQR,CACF;oBACJ,CAAC,CAAC;kBACE;;UACA,CACR;IACJ,OAAO;QACL,qBAAO,mBAAK,CAAC;IACf,CAAC;AACH,CAAC"}

package/dist/cjs/LineChart/LineChart.js CHANGED Viewed

@@ -83,7 +83,11 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom , onDoubleClick  }) {
+function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+    wrapLabels: true,
+    showQuery: true
+} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+    var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -177,6 +181,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
             grid,
             legend
         };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
         return option;
     }, [
         data,
@@ -185,7 +192,8 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         grid,
         legend,
         noDataOption,
-        timeZone
+        timeZone,
+        __experimentalEChartsOptionsOverride
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
@@ -215,10 +223,11 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
-                wrapLabels: true,
+                showQuery: tooltipConfig.showQuery,
+                wrapLabels: tooltipConfig.wrapLabels,
                 pinTooltip: pinTooltip,
                 unit: unit
             }),

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js CHANGED Viewed

@@ -24,7 +24,7 @@ const _seriesMarker = require("./SeriesMarker");
 const _seriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true , showQuery =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -44,8 +44,9 @@ function SeriesInfo(props) {
             markerColor: markerColor
         });
     }
-    // add space after commas when more than one focused series
-    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    // when more than one series, either show full series name or formatted labels only
+    const seriesInfo = showQuery ? seriesName : formattedSeriesLabels;
+    const formattedSeriesInfo = seriesInfo.replace(/[,]/g, ', '); // add space after commas so wrapLabels works
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             display: 'table-row',
@@ -76,7 +77,7 @@ function SeriesInfo(props) {
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
-                        children: inlineSeriesLabels
+                        children: formattedSeriesInfo
                     })
                 ]
             }),

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js CHANGED Viewed

@@ -64,7 +64,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , showQuery , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     if (mousePos === null || mousePos.target === null) return null;
@@ -109,7 +109,8 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
                 focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
+                wrapLabels: wrapLabels,
+                showQuery: showQuery
             })
         })
     });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js CHANGED Viewed

@@ -24,7 +24,7 @@ const _material = require("@mui/material");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
 function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
+    const { focusedSeries , showQuery , wrapLabels  } = props;
     const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
     const formatTimeSeriesHeader = (timeString)=>{
@@ -83,6 +83,7 @@ function TooltipContent(props) {
                             formattedY: formattedY,
                             markerColor: markerColor,
                             totalSeries: sortedFocusedSeries.length,
+                            showQuery: showQuery,
                             wrapLabels: wrapLabels
                         }, key);
                     })

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.25.0",
+  "version": "0.26.1",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -36,7 +36,7 @@
     "@codemirror/lang-json": "^6.0.1",
     "@fontsource/lato": "^4.5.10",
     "@mui/x-date-pickers": "^5.0.0-beta.1",
-    "@perses-dev/core": "0.25.0",
+    "@perses-dev/core": "0.26.1",
     "@uiw/react-codemirror": "^4.19.1",
     "date-fns": "^2.28.0",
     "date-fns-tz": "^1.3.7",
@@ -48,7 +48,7 @@
     "react-error-boundary": "^3.1.4"
   },
   "devDependencies": {
-    "@perses-dev/storybook": "0.25.0"
+    "@perses-dev/storybook": "0.26.1"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.0",