@perses-dev/scatter-chart-plugin 0.6.0

package/lib/ScatterChartPanel.js

@@ -0,0 +1,182 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { NoDataOverlay, useChartsTheme } from '@perses-dev/components';
+import { Scatterplot } from './Scatterplot';
+/** default size range of the circles diameter */ const DEFAULT_SIZE_RANGE = [
+    6,
+    20
+];
+// Navigate to the Gantt Chart on the explore page by default
+function defaultClickHandler(data) {
+    // clone the original query spec (including the datasource) and replace the query value with the trace id
+    const query = JSON.parse(JSON.stringify(data.query));
+    query.spec.plugin.spec.query = data.traceId;
+    const exploreParams = new URLSearchParams({
+        explorer: 'traces',
+        data: JSON.stringify({
+            queries: [
+                query
+            ]
+        })
+    });
+    // do not use react-router here, as downstream products, which embed this panel, may not have a compatible version of it
+    window.location.href = `/explore?${exploreParams}`;
+}
+/**
+ * ScatterChartPanel receives data from the DataQueriesProvider and transforms it
+ * into a `dataset` object that Apache ECharts can consume. Additionally,
+ * data formatting is also dictated in this component. Formatting includes
+ * datapoint size and color.
+ *
+ * Documentation for data structures accepted by Apache ECharts:
+ *  https://echarts.apache.org/handbook/en/concepts/dataset
+ *
+ * Examples for scatter chart formatting in Apache ECharts:
+ *  https://echarts.apache.org/examples/en/index.html#chart-type-scatter
+ *
+ * @returns a `ScatterPlot` component that contains an EChart which will handle
+ * visualization of the data.
+ */ export function ScatterChartPanel(props) {
+    const { spec, contentDimensions, queryResults: traceResults, onClick } = props;
+    const chartsTheme = useChartsTheme();
+    const defaultColor = chartsTheme.thresholds.defaultColor || 'blue';
+    const sizeRange = spec.sizeRange || DEFAULT_SIZE_RANGE;
+    // Generate dataset
+    // Transform Tempo API response to fit 'dataset' structure from Apache ECharts
+    // https://echarts.apache.org/handbook/en/concepts/dataset
+    const { dataset, minSpanCount, maxSpanCount } = useMemo(()=>{
+        const dataset = [];
+        let minSpanCount;
+        let maxSpanCount;
+        for (const result of traceResults){
+            if (result.data.searchResult === undefined) continue;
+            const dataSeries = result.data.searchResult.map((trace)=>{
+                let spanCount = 0;
+                let errorCount = 0;
+                for (const stats of Object.values(trace.serviceStats)){
+                    spanCount += stats.spanCount;
+                    errorCount += stats.errorCount ?? 0;
+                }
+                if (minSpanCount === undefined || spanCount < minSpanCount) {
+                    minSpanCount = spanCount;
+                }
+                if (maxSpanCount === undefined || spanCount > maxSpanCount) {
+                    maxSpanCount = spanCount;
+                }
+                const newTraceValue = {
+                    ...trace,
+                    query: result.definition,
+                    name: `${trace.rootServiceName}: ${trace.rootTraceName}`,
+                    startTime: new Date(trace.startTimeUnixMs),
+                    spanCount,
+                    errorCount
+                };
+                return newTraceValue;
+            });
+            dataset.push({
+                source: dataSeries
+            });
+        }
+        return {
+            dataset,
+            minSpanCount: minSpanCount ?? 0,
+            maxSpanCount: maxSpanCount ?? 0
+        };
+    }, [
+        traceResults
+    ]);
+    // Formatting for the dataset
+    // 1. Map x,y coordinates
+    // 2. Datapoint size corresponds to the number of spans in a trace
+    // 3. Color datapoint red if the trace contains an error
+    const series = useMemo(()=>{
+        const seriesTemplate2 = {
+            type: 'scatter',
+            encode: {
+                // Map to x-axis.
+                x: 'startTime',
+                // Map to y-axis.
+                y: 'durationMs'
+            },
+            symbolSize: function(data) {
+                // returns the diameter of the circles
+                return getSymbolSize(data.spanCount, [
+                    minSpanCount,
+                    maxSpanCount
+                ], sizeRange);
+            },
+            itemStyle: {
+                color: function(params) {
+                    const traceData = params.data;
+                    // If the trace contains an error, color the datapoint in red
+                    if (traceData.errorCount > 0) {
+                        return 'red';
+                    }
+                    // Else return default color
+                    return defaultColor;
+                }
+            }
+        };
+        // Each data set needs to have a corresponding series formatting object
+        const series = [];
+        for(let i = 0; i < dataset.length; i++){
+            series.push({
+                ...seriesTemplate2,
+                datasetIndex: i
+            });
+        }
+        return series;
+    }, [
+        dataset,
+        defaultColor,
+        minSpanCount,
+        maxSpanCount,
+        sizeRange
+    ]);
+    const tracesFound = traceResults.some((traceData)=>(traceData.data?.searchResult ?? []).length > 0);
+    if (!tracesFound) {
+        return /*#__PURE__*/ _jsx(NoDataOverlay, {
+            resource: "traces"
+        });
+    }
+    const options = {
+        dataset: dataset,
+        series: series
+    };
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ _jsx("div", {
+        "data-testid": "ScatterChartPanel_ScatterPlot",
+        children: /*#__PURE__*/ _jsx(Scatterplot, {
+            width: contentDimensions.width,
+            height: contentDimensions.height,
+            options: options,
+            onClick: onClick === null ? undefined : onClick ?? defaultClickHandler
+        })
+    });
+}
+// exported for tests
+export function getSymbolSize(spanCount, spanCountRange, sizeRange) {
+    const [minSize, maxSize] = sizeRange;
+    const [minSpanCount, maxSpanCount] = spanCountRange;
+    // catch divison by zero
+    if (maxSpanCount - minSpanCount === 0) {
+        return maxSize;
+    }
+    // apply linear scale of spanCount from range [minSpanCount,maxSpanCount] to a value from range [minSize,maxSize]
+    const rel = (spanCount - minSpanCount) / (maxSpanCount - minSpanCount);
+    return minSize + (maxSize - minSize) * rel;
+}
+
+//# sourceMappingURL=ScatterChartPanel.js.map

package/lib/ScatterChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ScatterChartPanel.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 { PanelProps } from '@perses-dev/plugin-system';\nimport { ReactElement, useMemo } from 'react';\nimport { QueryDefinition, TraceData, TraceSearchResult } from '@perses-dev/core';\nimport { EChartsOption, SeriesOption } from 'echarts';\nimport { NoDataOverlay, useChartsTheme } from '@perses-dev/components';\nimport { Scatterplot } from './Scatterplot';\nimport { ScatterChartOptions } from './scatter-chart-model';\n\nexport interface EChartTraceValue extends Omit<TraceSearchResult, 'startTimeUnixMs' | 'serviceStats'> {\n  name: string;\n  query: QueryDefinition;\n  startTime: Date;\n  spanCount: number;\n  errorCount: number;\n}\n\nexport interface ScatterChartPanelProps extends PanelProps<ScatterChartOptions, TraceData> {\n  /**\n   * Custom onClick event handler.\n   * If this field is unset or undefined, a default handler which links to the Gantt chart on the explore page is configured.\n   * Set this field explicitly to null to disable handling the click event.\n   */\n  onClick?: ((data: EChartTraceValue) => void) | null;\n}\n\n/** default size range of the circles diameter */\nconst DEFAULT_SIZE_RANGE: [number, number] = [6, 20];\n\n// Navigate to the Gantt Chart on the explore page by default\nfunction defaultClickHandler(data: EChartTraceValue): void {\n  // clone the original query spec (including the datasource) and replace the query value with the trace id\n  const query: QueryDefinition = JSON.parse(JSON.stringify(data.query));\n  query.spec.plugin.spec.query = data.traceId;\n\n  const exploreParams = new URLSearchParams({\n    explorer: 'traces',\n    data: JSON.stringify({ queries: [query] }),\n  });\n\n  // do not use react-router here, as downstream products, which embed this panel, may not have a compatible version of it\n  window.location.href = `/explore?${exploreParams}`;\n}\n\n/**\n * ScatterChartPanel receives data from the DataQueriesProvider and transforms it\n * into a `dataset` object that Apache ECharts can consume. Additionally,\n * data formatting is also dictated in this component. Formatting includes\n * datapoint size and color.\n *\n * Documentation for data structures accepted by Apache ECharts:\n *  https://echarts.apache.org/handbook/en/concepts/dataset\n *\n * Examples for scatter chart formatting in Apache ECharts:\n *  https://echarts.apache.org/examples/en/index.html#chart-type-scatter\n *\n * @returns a `ScatterPlot` component that contains an EChart which will handle\n * visualization of the data.\n */\nexport function ScatterChartPanel(props: ScatterChartPanelProps): ReactElement | null {\n  const { spec, contentDimensions, queryResults: traceResults, onClick } = props;\n  const chartsTheme = useChartsTheme();\n  const defaultColor = chartsTheme.thresholds.defaultColor || 'blue';\n  const sizeRange = spec.sizeRange || DEFAULT_SIZE_RANGE;\n\n  // Generate dataset\n  // Transform Tempo API response to fit 'dataset' structure from Apache ECharts\n  // https://echarts.apache.org/handbook/en/concepts/dataset\n  const { dataset, minSpanCount, maxSpanCount } = useMemo(() => {\n    const dataset = [];\n    let minSpanCount: number | undefined;\n    let maxSpanCount: number | undefined;\n    for (const result of traceResults) {\n      if (result.data.searchResult === undefined) continue;\n      const dataSeries = result.data.searchResult.map((trace) => {\n        let spanCount = 0;\n        let errorCount = 0;\n        for (const stats of Object.values(trace.serviceStats)) {\n          spanCount += stats.spanCount;\n          errorCount += stats.errorCount ?? 0;\n        }\n\n        if (minSpanCount === undefined || spanCount < minSpanCount) {\n          minSpanCount = spanCount;\n        }\n        if (maxSpanCount === undefined || spanCount > maxSpanCount) {\n          maxSpanCount = spanCount;\n        }\n\n        const newTraceValue: EChartTraceValue = {\n          ...trace,\n          query: result.definition,\n          name: `${trace.rootServiceName}: ${trace.rootTraceName}`,\n          startTime: new Date(trace.startTimeUnixMs), // convert unix epoch time to Date\n          spanCount,\n          errorCount,\n        };\n        return newTraceValue;\n      });\n      dataset.push({\n        source: dataSeries,\n      });\n    }\n    return { dataset, minSpanCount: minSpanCount ?? 0, maxSpanCount: maxSpanCount ?? 0 };\n  }, [traceResults]);\n\n  // Formatting for the dataset\n  // 1. Map x,y coordinates\n  // 2. Datapoint size corresponds to the number of spans in a trace\n  // 3. Color datapoint red if the trace contains an error\n  const series = useMemo(() => {\n    const seriesTemplate2: SeriesOption = {\n      type: 'scatter',\n      encode: {\n        // Map to x-axis.\n        x: 'startTime',\n        // Map to y-axis.\n        y: 'durationMs',\n      },\n      symbolSize: function (data) {\n        // returns the diameter of the circles\n        return getSymbolSize(data.spanCount, [minSpanCount, maxSpanCount], sizeRange);\n      },\n      itemStyle: {\n        color: function (params) {\n          const traceData: EChartTraceValue = params.data as EChartTraceValue;\n          // If the trace contains an error, color the datapoint in red\n          if (traceData.errorCount > 0) {\n            return 'red';\n          }\n          // Else return default color\n          return defaultColor;\n        },\n      },\n    };\n\n    // Each data set needs to have a corresponding series formatting object\n    const series = [];\n    for (let i = 0; i < dataset.length; i++) {\n      series.push({ ...seriesTemplate2, datasetIndex: i });\n    }\n    return series;\n  }, [dataset, defaultColor, minSpanCount, maxSpanCount, sizeRange]);\n\n  const tracesFound = traceResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  const options: EChartsOption = {\n    dataset: dataset,\n    series: series,\n  };\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <div data-testid=\"ScatterChartPanel_ScatterPlot\">\n      <Scatterplot\n        width={contentDimensions.width}\n        height={contentDimensions.height}\n        options={options}\n        onClick={onClick === null ? undefined : (onClick ?? defaultClickHandler)}\n      />\n    </div>\n  );\n}\n\n// exported for tests\nexport function getSymbolSize(\n  spanCount: number,\n  spanCountRange: [number, number],\n  sizeRange: [number, number]\n): number {\n  const [minSize, maxSize] = sizeRange;\n  const [minSpanCount, maxSpanCount] = spanCountRange;\n\n  // catch divison by zero\n  if (maxSpanCount - minSpanCount === 0) {\n    return maxSize;\n  }\n\n  // apply linear scale of spanCount from range [minSpanCount,maxSpanCount] to a value from range [minSize,maxSize]\n  const rel = (spanCount - minSpanCount) / (maxSpanCount - minSpanCount);\n  return minSize + (maxSize - minSize) * rel;\n}\n"],"names":["useMemo","NoDataOverlay","useChartsTheme","Scatterplot","DEFAULT_SIZE_RANGE","defaultClickHandler","data","query","JSON","parse","stringify","spec","plugin","traceId","exploreParams","URLSearchParams","explorer","queries","window","location","href","ScatterChartPanel","props","contentDimensions","queryResults","traceResults","onClick","chartsTheme","defaultColor","thresholds","sizeRange","dataset","minSpanCount","maxSpanCount","result","searchResult","undefined","dataSeries","map","trace","spanCount","errorCount","stats","Object","values","serviceStats","newTraceValue","definition","name","rootServiceName","rootTraceName","startTime","Date","startTimeUnixMs","push","source","series","seriesTemplate2","type","encode","x","y","symbolSize","getSymbolSize","itemStyle","color","params","traceData","i","length","datasetIndex","tracesFound","some","resource","options","div","data-testid","width","height","spanCountRange","minSize","maxSize","rel"],"mappings":"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"}

package/lib/Scatterplot.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { EChartsOption } from 'echarts';
+interface ScatterplotProps<T> {
+    width: number;
+    height: number;
+    options: EChartsOption;
+    onClick?: (data: T) => void;
+}
+export declare function Scatterplot<T>(props: ScatterplotProps<T>): ReactElement;
+export {};
+//# sourceMappingURL=Scatterplot.d.ts.map

package/lib/Scatterplot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scatterplot.d.ts","sourceRoot":"","sources":["../../src/Scatterplot.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAa9C,OAAO,EAAE,aAAa,EAAuB,MAAM,SAAS,CAAC;AAe7D,UAAU,gBAAgB,CAAC,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC7B;AAOD,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAAG,YAAY,CA2EvE"}

package/lib/Scatterplot.js

@@ -0,0 +1,113 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { EChart, useChartsTheme } from '@perses-dev/components';
+import { use } from 'echarts/core';
+import { ScatterChart as EChartsScatterChart } from 'echarts/charts';
+import { DatasetComponent, DataZoomComponent, LegendComponent, GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { formatValue } from '@perses-dev/core';
+use([
+    DatasetComponent,
+    DataZoomComponent,
+    LegendComponent,
+    EChartsScatterChart,
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+const DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {
+    dateStyle: 'long',
+    timeStyle: 'medium'
+}).format;
+export function Scatterplot(props) {
+    const { width, height, options, onClick } = props;
+    const chartsTheme = useChartsTheme();
+    // Apache EChart Options Docs: https://echarts.apache.org/en/option.html
+    const eChartOptions = {
+        dataset: options.dataset,
+        series: options.series,
+        dataZoom: options.dataZoom,
+        grid: {
+            bottom: 40,
+            top: 50,
+            left: 50,
+            right: 100
+        },
+        xAxis: {
+            type: 'time',
+            name: 'Local Time'
+        },
+        yAxis: {
+            scale: true,
+            type: 'value',
+            name: 'Duration',
+            axisLabel: {
+                formatter: (durationMs)=>formatValue(durationMs, {
+                        unit: 'milliseconds'
+                    })
+            }
+        },
+        animation: false,
+        tooltip: {
+            padding: 5,
+            borderWidth: 1,
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross'
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            formatter: function(params) {
+                // TODO: import type from ECharts instead of using any
+                const data = params[0].data;
+                return [
+                    `<b>Service name</b>: ${data.rootServiceName}<br/>`,
+                    `<b>Span name</b>: ${data.rootTraceName}<br/>`,
+                    `<b>Time</b>: ${DATE_FORMATTER(data.startTime)}<br/>`,
+                    `<b>Duration</b>: ${formatValue(data.durationMs, {
+                        unit: 'milliseconds'
+                    })}<br/>`,
+                    `<b>Span count</b>: ${data.spanCount} (${data.errorCount} errors)<br/>`
+                ].join('');
+            }
+        },
+        legend: {
+            show: true,
+            type: 'scroll',
+            orient: 'horizontal',
+            bottom: 0
+        }
+    };
+    const handleEvents = useMemo(()=>{
+        const handlers = {};
+        if (onClick) {
+            handlers.click = (params)=>onClick(params.data);
+        }
+        return handlers;
+    }, [
+        onClick
+    ]);
+    return /*#__PURE__*/ _jsx(EChart, {
+        sx: {
+            width: width,
+            height: height
+        },
+        option: eChartOptions,
+        theme: chartsTheme.echartsTheme,
+        onEvents: handleEvents
+    });
+}
+
+//# sourceMappingURL=Scatterplot.js.map

package/lib/Scatterplot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Scatterplot.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 { ReactElement, useMemo } from 'react';\nimport { EChart, OnEventsType, useChartsTheme } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { ScatterChart as EChartsScatterChart } from 'echarts/charts';\nimport {\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChartsOption, ScatterSeriesOption } from 'echarts';\nimport { formatValue } from '@perses-dev/core';\nimport { EChartTraceValue } from './ScatterChartPanel';\n\nuse([\n  DatasetComponent,\n  DataZoomComponent,\n  LegendComponent,\n  EChartsScatterChart,\n  GridComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\ninterface ScatterplotProps<T> {\n  width: number;\n  height: number;\n  options: EChartsOption;\n  onClick?: (data: T) => void;\n}\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: 'long',\n  timeStyle: 'medium',\n}).format;\n\nexport function Scatterplot<T>(props: ScatterplotProps<T>): ReactElement {\n  const { width, height, options, onClick } = props;\n  const chartsTheme = useChartsTheme();\n\n  // Apache EChart Options Docs: https://echarts.apache.org/en/option.html\n  const eChartOptions: EChartsCoreOption = {\n    dataset: options.dataset,\n    series: options.series,\n    dataZoom: options.dataZoom,\n    grid: {\n      bottom: 40,\n      top: 50,\n      left: 50,\n      right: 100,\n    },\n    xAxis: {\n      type: 'time',\n      name: 'Local Time',\n    },\n    yAxis: {\n      scale: true,\n      type: 'value',\n      name: 'Duration',\n      axisLabel: {\n        formatter: (durationMs: number) => formatValue(durationMs, { unit: 'milliseconds' }),\n      },\n    },\n    animation: false,\n    tooltip: {\n      padding: 5,\n      borderWidth: 1,\n      trigger: 'axis',\n      axisPointer: {\n        type: 'cross',\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      formatter: function (params: any) {\n        // TODO: import type from ECharts instead of using any\n        const data = params[0].data as EChartTraceValue;\n        return [\n          `<b>Service name</b>: ${data.rootServiceName}<br/>`,\n          `<b>Span name</b>: ${data.rootTraceName}<br/>`,\n          `<b>Time</b>: ${DATE_FORMATTER(data.startTime)}<br/>`,\n          `<b>Duration</b>: ${formatValue(data.durationMs, { unit: 'milliseconds' })}<br/>`,\n          `<b>Span count</b>: ${data.spanCount} (${data.errorCount} errors)<br/>`,\n        ].join('');\n      },\n    },\n    legend: {\n      show: true,\n      type: 'scroll',\n      orient: 'horizontal',\n      bottom: 0,\n    },\n  };\n\n  const handleEvents: OnEventsType<ScatterSeriesOption['data'] | unknown> = useMemo(() => {\n    const handlers: OnEventsType<ScatterSeriesOption['data'] | unknown> = {};\n    if (onClick) {\n      handlers.click = (params): void => onClick(params.data as T);\n    }\n    return handlers;\n  }, [onClick]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n      }}\n      option={eChartOptions}\n      theme={chartsTheme.echartsTheme}\n      onEvents={handleEvents}\n    />\n  );\n}\n"],"names":["useMemo","EChart","useChartsTheme","use","ScatterChart","EChartsScatterChart","DatasetComponent","DataZoomComponent","LegendComponent","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","formatValue","DATE_FORMATTER","Intl","DateTimeFormat","undefined","dateStyle","timeStyle","format","Scatterplot","props","width","height","options","onClick","chartsTheme","eChartOptions","dataset","series","dataZoom","grid","bottom","top","left","right","xAxis","type","name","yAxis","scale","axisLabel","formatter","durationMs","unit","animation","tooltip","padding","borderWidth","trigger","axisPointer","params","data","rootServiceName","rootTraceName","startTime","spanCount","errorCount","join","legend","show","orient","handleEvents","handlers","click","sx","option","theme","echartsTheme","onEvents"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,MAAM,EAAgBC,cAAc,QAAQ,yBAAyB;AAC9E,SAASC,GAAG,QAA2B,eAAe;AACtD,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,gBAAgB,EAChBC,iBAAiB,EACjBC,eAAe,EACfC,aAAa,EACbC,cAAc,EACdC,gBAAgB,QACX,qBAAqB;AAC5B,SAASC,cAAc,QAAQ,oBAAoB;AAEnD,SAASC,WAAW,QAAQ,mBAAmB;AAG/CV,IAAI;IACFG;IACAC;IACAC;IACAH;IACAI;IACAC;IACAC;IACAC;CACD;AASD,MAAME,iBAAiB,IAAIC,KAAKC,cAAc,CAACC,WAAW;IACxDC,WAAW;IACXC,WAAW;AACb,GAAGC,MAAM;AAET,OAAO,SAASC,YAAeC,KAA0B;IACvD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAC5C,MAAMK,cAAczB;IAEpB,wEAAwE;IACxE,MAAM0B,gBAAmC;QACvCC,SAASJ,QAAQI,OAAO;QACxBC,QAAQL,QAAQK,MAAM;QACtBC,UAAUN,QAAQM,QAAQ;QAC1BC,MAAM;YACJC,QAAQ;YACRC,KAAK;YACLC,MAAM;YACNC,OAAO;QACT;QACAC,OAAO;YACLC,MAAM;YACNC,MAAM;QACR;QACAC,OAAO;YACLC,OAAO;YACPH,MAAM;YACNC,MAAM;YACNG,WAAW;gBACTC,WAAW,CAACC,aAAuB/B,YAAY+B,YAAY;wBAAEC,MAAM;oBAAe;YACpF;QACF;QACAC,WAAW;QACXC,SAAS;YACPC,SAAS;YACTC,aAAa;YACbC,SAAS;YACTC,aAAa;gBACXb,MAAM;YACR;YACA,8DAA8D;YAC9DK,WAAW,SAAUS,MAAW;gBAC9B,sDAAsD;gBACtD,MAAMC,OAAOD,MAAM,CAAC,EAAE,CAACC,IAAI;gBAC3B,OAAO;oBACL,CAAC,qBAAqB,EAAEA,KAAKC,eAAe,CAAC,KAAK,CAAC;oBACnD,CAAC,kBAAkB,EAAED,KAAKE,aAAa,CAAC,KAAK,CAAC;oBAC9C,CAAC,aAAa,EAAEzC,eAAeuC,KAAKG,SAAS,EAAE,KAAK,CAAC;oBACrD,CAAC,iBAAiB,EAAE3C,YAAYwC,KAAKT,UAAU,EAAE;wBAAEC,MAAM;oBAAe,GAAG,KAAK,CAAC;oBACjF,CAAC,mBAAmB,EAAEQ,KAAKI,SAAS,CAAC,EAAE,EAAEJ,KAAKK,UAAU,CAAC,aAAa,CAAC;iBACxE,CAACC,IAAI,CAAC;YACT;QACF;QACAC,QAAQ;YACNC,MAAM;YACNvB,MAAM;YACNwB,QAAQ;YACR7B,QAAQ;QACV;IACF;IAEA,MAAM8B,eAAoE/D,QAAQ;QAChF,MAAMgE,WAAgE,CAAC;QACvE,IAAItC,SAAS;YACXsC,SAASC,KAAK,GAAG,CAACb,SAAiB1B,QAAQ0B,OAAOC,IAAI;QACxD;QACA,OAAOW;IACT,GAAG;QAACtC;KAAQ;IAEZ,qBACE,KAACzB;QACCiE,IAAI;YACF3C,OAAOA;YACPC,QAAQA;QACV;QACA2C,QAAQvC;QACRwC,OAAOzC,YAAY0C,YAAY;QAC/BC,UAAUP;;AAGhB"}

package/lib/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.d.ts.map

package/lib/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/bootstrap.tsx"],"names":[],"mappings":""}

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"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,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/ScatterChart.js

@@ -0,0 +1,33 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ScatterChart", {
+    enumerable: true,
+    get: function() {
+        return ScatterChart;
+    }
+});
+const _scatterchartmodel = require("./scatter-chart-model");
+const _ScatterChartPanel = require("./ScatterChartPanel");
+const ScatterChart = {
+    PanelComponent: _ScatterChartPanel.ScatterChartPanel,
+    // TODO: add a chart options editor plugin, for example:
+    // panelOptionsEditorComponents: [{ label: 'Settings', content: ScatterChartOptionsEditorSettings }],
+    supportedQueryTypes: [
+        'TraceQuery'
+    ],
+    createInitialOptions: _scatterchartmodel.createInitialScatterChartOptions
+};

package/lib/cjs/ScatterChartPanel.js

@@ -0,0 +1,183 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ScatterChartPanel: function() {
+        return ScatterChartPanel;
+    },
+    getSymbolSize: function() {
+        return getSymbolSize;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _Scatterplot = require("./Scatterplot");
+/** default size range of the circles diameter */ const DEFAULT_SIZE_RANGE = [
+    6,
+    20
+];
+// Navigate to the Gantt Chart on the explore page by default
+function defaultClickHandler(data) {
+    // clone the original query spec (including the datasource) and replace the query value with the trace id
+    const query = JSON.parse(JSON.stringify(data.query));
+    query.spec.plugin.spec.query = data.traceId;
+    const exploreParams = new URLSearchParams({
+        explorer: 'traces',
+        data: JSON.stringify({
+            queries: [
+                query
+            ]
+        })
+    });
+    // do not use react-router here, as downstream products, which embed this panel, may not have a compatible version of it
+    window.location.href = `/explore?${exploreParams}`;
+}
+function ScatterChartPanel(props) {
+    const { spec, contentDimensions, queryResults: traceResults, onClick } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const defaultColor = chartsTheme.thresholds.defaultColor || 'blue';
+    const sizeRange = spec.sizeRange || DEFAULT_SIZE_RANGE;
+    // Generate dataset
+    // Transform Tempo API response to fit 'dataset' structure from Apache ECharts
+    // https://echarts.apache.org/handbook/en/concepts/dataset
+    const { dataset, minSpanCount, maxSpanCount } = (0, _react.useMemo)(()=>{
+        const dataset = [];
+        let minSpanCount;
+        let maxSpanCount;
+        for (const result of traceResults){
+            if (result.data.searchResult === undefined) continue;
+            const dataSeries = result.data.searchResult.map((trace)=>{
+                let spanCount = 0;
+                let errorCount = 0;
+                for (const stats of Object.values(trace.serviceStats)){
+                    spanCount += stats.spanCount;
+                    errorCount += stats.errorCount ?? 0;
+                }
+                if (minSpanCount === undefined || spanCount < minSpanCount) {
+                    minSpanCount = spanCount;
+                }
+                if (maxSpanCount === undefined || spanCount > maxSpanCount) {
+                    maxSpanCount = spanCount;
+                }
+                const newTraceValue = {
+                    ...trace,
+                    query: result.definition,
+                    name: `${trace.rootServiceName}: ${trace.rootTraceName}`,
+                    startTime: new Date(trace.startTimeUnixMs),
+                    spanCount,
+                    errorCount
+                };
+                return newTraceValue;
+            });
+            dataset.push({
+                source: dataSeries
+            });
+        }
+        return {
+            dataset,
+            minSpanCount: minSpanCount ?? 0,
+            maxSpanCount: maxSpanCount ?? 0
+        };
+    }, [
+        traceResults
+    ]);
+    // Formatting for the dataset
+    // 1. Map x,y coordinates
+    // 2. Datapoint size corresponds to the number of spans in a trace
+    // 3. Color datapoint red if the trace contains an error
+    const series = (0, _react.useMemo)(()=>{
+        const seriesTemplate2 = {
+            type: 'scatter',
+            encode: {
+                // Map to x-axis.
+                x: 'startTime',
+                // Map to y-axis.
+                y: 'durationMs'
+            },
+            symbolSize: function(data) {
+                // returns the diameter of the circles
+                return getSymbolSize(data.spanCount, [
+                    minSpanCount,
+                    maxSpanCount
+                ], sizeRange);
+            },
+            itemStyle: {
+                color: function(params) {
+                    const traceData = params.data;
+                    // If the trace contains an error, color the datapoint in red
+                    if (traceData.errorCount > 0) {
+                        return 'red';
+                    }
+                    // Else return default color
+                    return defaultColor;
+                }
+            }
+        };
+        // Each data set needs to have a corresponding series formatting object
+        const series = [];
+        for(let i = 0; i < dataset.length; i++){
+            series.push({
+                ...seriesTemplate2,
+                datasetIndex: i
+            });
+        }
+        return series;
+    }, [
+        dataset,
+        defaultColor,
+        minSpanCount,
+        maxSpanCount,
+        sizeRange
+    ]);
+    const tracesFound = traceResults.some((traceData)=>(traceData.data?.searchResult ?? []).length > 0);
+    if (!tracesFound) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.NoDataOverlay, {
+            resource: "traces"
+        });
+    }
+    const options = {
+        dataset: dataset,
+        series: series
+    };
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+        "data-testid": "ScatterChartPanel_ScatterPlot",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Scatterplot.Scatterplot, {
+            width: contentDimensions.width,
+            height: contentDimensions.height,
+            options: options,
+            onClick: onClick === null ? undefined : onClick ?? defaultClickHandler
+        })
+    });
+}
+function getSymbolSize(spanCount, spanCountRange, sizeRange) {
+    const [minSize, maxSize] = sizeRange;
+    const [minSpanCount, maxSpanCount] = spanCountRange;
+    // catch divison by zero
+    if (maxSpanCount - minSpanCount === 0) {
+        return maxSize;
+    }
+    // apply linear scale of spanCount from range [minSpanCount,maxSpanCount] to a value from range [minSize,maxSize]
+    const rel = (spanCount - minSpanCount) / (maxSpanCount - minSpanCount);
+    return minSize + (maxSize - minSize) * rel;
+}