@perses-dev/heatmap-chart-plugin 0.2.0

package/lib/cjs/heat-map-chart-model.js

@@ -0,0 +1,56 @@
+// Copyright 2025 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, {
+    DEFAULT_FORMAT: function() {
+        return DEFAULT_FORMAT;
+    },
+    DEFAULT_MAX_PERCENT: function() {
+        return DEFAULT_MAX_PERCENT;
+    },
+    DEFAULT_MAX_PERCENT_DECIMAL: function() {
+        return DEFAULT_MAX_PERCENT_DECIMAL;
+    },
+    DEFAULT_MIN_PERCENT: function() {
+        return DEFAULT_MIN_PERCENT;
+    },
+    DEFAULT_MIN_PERCENT_DECIMAL: function() {
+        return DEFAULT_MIN_PERCENT_DECIMAL;
+    },
+    createInitialHeatMapChartOptions: function() {
+        return createInitialHeatMapChartOptions;
+    }
+});
+const DEFAULT_FORMAT = {
+    unit: 'decimal'
+};
+const DEFAULT_MIN_PERCENT = 0;
+const DEFAULT_MAX_PERCENT = 100;
+const DEFAULT_MIN_PERCENT_DECIMAL = 0;
+const DEFAULT_MAX_PERCENT_DECIMAL = 1;
+function createInitialHeatMapChartOptions() {
+    return {
+        yAxisFormat: DEFAULT_FORMAT,
+        countFormat: DEFAULT_FORMAT,
+        showVisualMap: true
+    };
+}

package/lib/cjs/index-federation.js

@@ -0,0 +1,55 @@
+// Copyright 2025 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";
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/index.js

@@ -0,0 +1,47 @@
+// Copyright 2025 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, {
+    HeatMapChartPanel: function() {
+        return _components.HeatMapChartPanel;
+    },
+    getPluginModule: function() {
+        return _getPluginModule.getPluginModule;
+    }
+});
+const _getPluginModule = require("./getPluginModule");
+const _components = require("./components");
+_export_star(require("./heat-map-chart-model"), exports);
+_export_star(require("./HeatMapChart"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/setup-tests.js

@@ -0,0 +1,19 @@
+// Copyright 2025 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
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/lib/cjs/utils/data-transform.js

@@ -0,0 +1,34 @@
+"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, {
+    generateCompleteTimestamps: function() {
+        return generateCompleteTimestamps;
+    },
+    getCommonTimeScaleForQueries: function() {
+        return getCommonTimeScaleForQueries;
+    }
+});
+const _core = require("@perses-dev/core");
+function getCommonTimeScaleForQueries(queries) {
+    const seriesData = queries.map((query)=>query.data);
+    return (0, _core.getCommonTimeScale)(seriesData);
+}
+function generateCompleteTimestamps(timescale) {
+    if (!timescale) {
+        return [];
+    }
+    const { startMs, endMs, stepMs } = timescale;
+    const timestamps = [];
+    for(let time = startMs; time <= endMs; time += stepMs){
+        timestamps.push(time);
+    }
+    return timestamps;
+}

package/lib/cjs/utils/get-formatted-axis-label.js

@@ -0,0 +1,48 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getFormattedHeatmapAxisLabel", {
+    enumerable: true,
+    get: function() {
+        return getFormattedHeatmapAxisLabel;
+    }
+});
+const _components = require("@perses-dev/components");
+function getFormattedHeatmapAxisLabel(rangeMs, timezone) {
+    return function(value) {
+        const dayMs = 86400000;
+        const monthMs = 2629440000;
+        const yearMs = 31536000000;
+        const timeStamp = new Date(Number(value));
+        // more than 5 years
+        if (rangeMs > yearMs * 5) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'yyy', timezone);
+        }
+        // more than 2 years
+        if (rangeMs > yearMs * 2) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'MMM yyy', timezone);
+        }
+        // between 5 days to 6 months
+        if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM', timezone); // 12-01
+        }
+        // between 2 and 10 days
+        if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {
+            return (0, _components.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30
+        }
+        return (0, _components.formatWithTimeZone)(timeStamp, 'HH:mm', timezone);
+    };
+}

package/lib/cjs/utils/index.js

@@ -0,0 +1,32 @@
+// Copyright 2025 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
+});
+_export_star(require("./data-transform"), exports);
+_export_star(require("./get-formatted-axis-label"), exports);
+_export_star(require("./thresholds"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/utils/thresholds.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getColorFromThresholds", {
+    enumerable: true,
+    get: function() {
+        return getColorFromThresholds;
+    }
+});
+function getColorFromThresholds(value, thresholds, chartsTheme, defaultColor) {
+    if (thresholds?.steps) {
+        const matchingColors = thresholds.steps.map((step, index)=>{
+            if (value >= step.value) {
+                return step.color ?? chartsTheme.thresholds.palette[index] ?? thresholds.defaultColor ?? defaultColor;
+            }
+            return null;
+        }).filter((color)=>color !== null);
+        return matchingColors[matchingColors.length - 1] ?? thresholds.defaultColor ?? defaultColor;
+    }
+    return thresholds?.defaultColor ?? defaultColor;
+}

package/lib/components/HeatMapChart.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+import { FormatOptions, TimeScale } from '@perses-dev/core';
+export type HeatMapData = [number, number, number | undefined];
+export interface HeatMapDataItem {
+    value: HeatMapData;
+    label: string;
+    itemStyle?: {
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
+export interface HeatMapChartProps {
+    width: number;
+    height: number;
+    data: HeatMapDataItem[];
+    xAxisCategories: number[];
+    yAxisCategories: string[];
+    yAxisFormat?: FormatOptions;
+    countFormat?: FormatOptions;
+    countMin?: number;
+    countMax?: number;
+    timeScale?: TimeScale;
+    showVisualMap?: boolean;
+}
+export declare function HeatMapChart({ width, height, data, xAxisCategories, yAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap, }: HeatMapChartProps): ReactElement | null;
+//# sourceMappingURL=HeatMapChart.d.ts.map

package/lib/components/HeatMapChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatMapChart.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAyB5D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CAEzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAe,EACf,eAAe,EACf,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAwGzC"}

package/lib/components/HeatMapChart.js

@@ -0,0 +1,141 @@
+// Copyright 2025 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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { EChart, getFormattedAxis, useChartsTheme, useTimeZone } from '@perses-dev/components';
+import { use } from 'echarts/core';
+import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+import { useTheme } from '@mui/material';
+import { getFormattedHeatmapAxisLabel } from '../utils';
+import { generateTooltipHTML } from './HeatMapTooltip';
+use([
+    EChartsHeatmapChart
+]);
+// The default coloring is a blue->yellow->red gradient
+const DEFAULT_VISUAL_MAP_COLORS = [
+    '#313695',
+    '#4575b4',
+    '#74add1',
+    '#abd9e9',
+    '#e0f3f8',
+    '#ffffbf',
+    '#fee090',
+    '#fdae61',
+    '#f46d43',
+    '#d73027',
+    '#a50026'
+];
+export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap }) {
+    const chartsTheme = useChartsTheme();
+    const theme = useTheme();
+    const { timeZone } = useTimeZone();
+    const option = useMemo(()=>{
+        return {
+            tooltip: {
+                appendToBody: true,
+                formatter: (params)=>{
+                    return generateTooltipHTML({
+                        data: params.data.value,
+                        label: params.data.label,
+                        marker: params.marker,
+                        xAxisCategories,
+                        yAxisCategories,
+                        theme,
+                        yAxisFormat: yAxisFormat,
+                        countFormat: countFormat
+                    });
+                }
+            },
+            xAxis: {
+                type: 'category',
+                data: xAxisCategories,
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: getFormattedHeatmapAxisLabel(timeScale?.rangeMs ?? 0, timeZone)
+                }
+            },
+            yAxis: getFormattedAxis({
+                type: 'category',
+                data: yAxisCategories
+            }, yAxisFormat),
+            visualMap: {
+                show: showVisualMap ?? false,
+                type: 'continuous',
+                min: countMin,
+                max: countMax,
+                realtime: false,
+                itemHeight: height - 30,
+                itemWidth: 10,
+                orient: 'vertical',
+                left: 'right',
+                top: 'center',
+                inRange: {
+                    color: DEFAULT_VISUAL_MAP_COLORS
+                },
+                textStyle: {
+                    color: theme.palette.text.primary,
+                    textBorderColor: theme.palette.background.default,
+                    textBorderWidth: 5
+                }
+            },
+            series: [
+                {
+                    name: 'Gaussian',
+                    type: 'heatmap',
+                    data: data,
+                    emphasis: {
+                        itemStyle: {
+                            borderColor: '#333',
+                            borderWidth: 1
+                        }
+                    },
+                    progressive: 1000,
+                    animation: false
+                }
+            ]
+        };
+    }, [
+        xAxisCategories,
+        timeScale?.rangeMs,
+        timeZone,
+        yAxisCategories,
+        yAxisFormat,
+        showVisualMap,
+        countMin,
+        countMax,
+        height,
+        theme,
+        data,
+        countFormat
+    ]);
+    const chart = useMemo(()=>/*#__PURE__*/ _jsx(EChart, {
+            sx: {
+                width: width,
+                height: height,
+                padding: `${chartsTheme.container.padding.default}px`
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        }), [
+        chartsTheme.container.padding.default,
+        chartsTheme.echartsTheme,
+        height,
+        option,
+        width
+    ]);
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: chart
+    });
+}
+
+//# sourceMappingURL=HeatMapChart.js.map

package/lib/components/HeatMapChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HeatMapChart.tsx"],"sourcesContent":["// Copyright 2025 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 { FormatOptions, TimeScale } from '@perses-dev/core';\nimport { EChart, getFormattedAxis, useChartsTheme, useTimeZone } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport { useTheme } from '@mui/material';\nimport { getFormattedHeatmapAxisLabel } from '../utils';\nimport { generateTooltipHTML } from './HeatMapTooltip';\n\nuse([EChartsHeatmapChart]);\n\n// The default coloring is a blue->yellow->red gradient\nconst DEFAULT_VISUAL_MAP_COLORS = [\n  '#313695',\n  '#4575b4',\n  '#74add1',\n  '#abd9e9',\n  '#e0f3f8',\n  '#ffffbf',\n  '#fee090',\n  '#fdae61',\n  '#f46d43',\n  '#d73027',\n  '#a50026',\n];\n\nexport type HeatMapData = [number, number, number | undefined]; // [x, y, value]\n\nexport interface HeatMapDataItem {\n  value: HeatMapData;\n  label: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface HeatMapChartProps {\n  width: number;\n  height: number;\n  data: HeatMapDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  yAxisFormat?: FormatOptions;\n  countFormat?: FormatOptions;\n  countMin?: number;\n  countMax?: number;\n  timeScale?: TimeScale;\n  showVisualMap?: boolean;\n  // TODO: exponential?: boolean;\n}\n\nexport function HeatMapChart({\n  width,\n  height,\n  data,\n  xAxisCategories,\n  yAxisCategories,\n  yAxisFormat,\n  countFormat,\n  countMin,\n  countMax,\n  timeScale,\n  showVisualMap,\n}: HeatMapChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n  const { timeZone } = useTimeZone();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    return {\n      tooltip: {\n        appendToBody: true,\n        formatter: (params: { data: HeatMapDataItem; marker: string }) => {\n          return generateTooltipHTML({\n            data: params.data.value,\n            label: params.data.label,\n            marker: params.marker,\n            xAxisCategories,\n            yAxisCategories,\n            theme,\n            yAxisFormat: yAxisFormat,\n            countFormat: countFormat,\n          });\n        },\n      },\n      xAxis: {\n        type: 'category',\n        data: xAxisCategories,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedHeatmapAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n        },\n      },\n      yAxis: getFormattedAxis(\n        {\n          type: 'category',\n          data: yAxisCategories,\n        },\n        yAxisFormat\n      ),\n      visualMap: {\n        show: showVisualMap ?? false,\n        type: 'continuous',\n        min: countMin,\n        max: countMax,\n        realtime: false,\n        itemHeight: height - 30,\n        itemWidth: 10,\n        orient: 'vertical',\n        left: 'right',\n        top: 'center',\n        inRange: {\n          color: DEFAULT_VISUAL_MAP_COLORS,\n        },\n        textStyle: {\n          color: theme.palette.text.primary,\n          textBorderColor: theme.palette.background.default,\n          textBorderWidth: 5,\n        },\n      },\n      series: [\n        {\n          name: 'Gaussian',\n          type: 'heatmap',\n          data: data,\n          emphasis: {\n            itemStyle: {\n              borderColor: '#333',\n              borderWidth: 1,\n            },\n          },\n          progressive: 1000,\n          animation: false,\n        },\n      ],\n    };\n  }, [\n    xAxisCategories,\n    timeScale?.rangeMs,\n    timeZone,\n    yAxisCategories,\n    yAxisFormat,\n    showVisualMap,\n    countMin,\n    countMax,\n    height,\n    theme,\n    data,\n    countFormat,\n  ]);\n\n  const chart = useMemo(\n    () => (\n      <EChart\n        sx={{\n          width: width,\n          height: height,\n          padding: `${chartsTheme.container.padding.default}px`,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    ),\n    [chartsTheme.container.padding.default, chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return <>{chart}</>;\n}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","useTimeZone","use","HeatmapChart","EChartsHeatmapChart","useTheme","getFormattedHeatmapAxisLabel","generateTooltipHTML","DEFAULT_VISUAL_MAP_COLORS","HeatMapChart","width","height","data","xAxisCategories","yAxisCategories","yAxisFormat","countFormat","countMin","countMax","timeScale","showVisualMap","chartsTheme","theme","timeZone","option","tooltip","appendToBody","formatter","params","value","label","marker","xAxis","type","axisLabel","hideOverlap","rangeMs","yAxis","visualMap","show","min","max","realtime","itemHeight","itemWidth","orient","left","top","inRange","color","textStyle","palette","text","primary","textBorderColor","background","default","textBorderWidth","series","name","emphasis","itemStyle","borderColor","borderWidth","progressive","animation","chart","sx","padding","container","echartsTheme"],"mappings":"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"}

package/lib/components/HeatMapChartOptionsEditorSettings.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { HeatMapChartOptionsEditorProps } from '../heat-map-chart-model';
+export declare function HeatMapChartOptionsEditorSettings(props: HeatMapChartOptionsEditorProps): ReactElement;
+//# sourceMappingURL=HeatMapChartOptionsEditorSettings.d.ts.map

package/lib/components/HeatMapChartOptionsEditorSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatMapChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAuC,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAE9G,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,8BAA8B,GAAG,YAAY,CAiDrG"}

package/lib/components/HeatMapChartOptionsEditorSettings.js

@@ -0,0 +1,72 @@
+// Copyright 2025 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, jsxs as _jsxs } from "react/jsx-runtime";
+import { Switch } from '@mui/material';
+import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup } from '@perses-dev/components';
+import { produce } from 'immer';
+import merge from 'lodash/merge';
+import { DEFAULT_FORMAT } from '../heat-map-chart-model';
+export function HeatMapChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleYAxisFormatChange = (newFormat)=>{
+        onChange(produce(value, (draft)=>{
+            draft.yAxisFormat = newFormat;
+        }));
+    };
+    const handleCountFormatChange = (newFormat)=>{
+        onChange(produce(value, (draft)=>{
+            draft.countFormat = newFormat;
+        }));
+    };
+    const handleShowVisualMapChange = (_, checked)=>{
+        onChange(produce(value, (draft)=>{
+            draft.showVisualMap = checked;
+        }));
+    };
+    // ensures decimalPlaces defaults to correct value
+    const yAxisFormat = merge({}, DEFAULT_FORMAT, value.yAxisFormat);
+    const countFormat = merge({}, DEFAULT_FORMAT, value.countFormat);
+    return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                    title: "Bucket Count",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormatControls, {
+                            value: countFormat,
+                            onChange: handleCountFormatChange
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Show Visual Map",
+                            control: /*#__PURE__*/ _jsx(Switch, {
+                                checked: !!value.showVisualMap,
+                                onChange: handleShowVisualMapChange
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                    title: "Y Axis",
+                    children: /*#__PURE__*/ _jsx(FormatControls, {
+                        value: yAxisFormat,
+                        onChange: handleYAxisFormatChange
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=HeatMapChartOptionsEditorSettings.js.map

package/lib/components/HeatMapChartOptionsEditorSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 2025 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 { Switch, SwitchProps } from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n} from '@perses-dev/components';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement } from 'react';\nimport { DEFAULT_FORMAT, HeatMapChartOptions, HeatMapChartOptionsEditorProps } from '../heat-map-chart-model';\n\nexport function HeatMapChartOptionsEditorSettings(props: HeatMapChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleYAxisFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.yAxisFormat = newFormat;\n      })\n    );\n  };\n\n  const handleCountFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.countFormat = newFormat;\n      })\n    );\n  };\n\n  const handleShowVisualMapChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.showVisualMap = checked;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const yAxisFormat = merge({}, DEFAULT_FORMAT, value.yAxisFormat);\n  const countFormat = merge({}, DEFAULT_FORMAT, value.countFormat);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Bucket Count\">\n          <FormatControls value={countFormat} onChange={handleCountFormatChange} />\n          <OptionsEditorControl\n            label=\"Show Visual Map\"\n            control={<Switch checked={!!value.showVisualMap} onChange={handleShowVisualMapChange} />}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Y Axis\">\n          <FormatControls value={yAxisFormat} onChange={handleYAxisFormatChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","produce","merge","DEFAULT_FORMAT","HeatMapChartOptionsEditorSettings","props","onChange","value","handleYAxisFormatChange","newFormat","draft","yAxisFormat","handleCountFormatChange","countFormat","handleShowVisualMapChange","_","checked","showVisualMap","title","label","control"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SACEC,cAAc,EAEdC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,QACb,yBAAyB;AAChC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,WAAW,eAAe;AAEjC,SAASC,cAAc,QAA6D,0BAA0B;AAE9G,OAAO,SAASC,kCAAkCC,KAAqC;IACrF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,0BAA2D,CAACC;QAChEH,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMC,WAAW,GAAGF;QACtB;IAEJ;IAEA,MAAMG,0BAA2D,CAACH;QAChEH,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMG,WAAW,GAAGJ;QACtB;IAEJ;IAEA,MAAMK,4BAAqD,CAACC,GAAYC;QACtEV,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMO,aAAa,GAAGD;QACxB;IAEJ;IAEA,kDAAkD;IAClD,MAAML,cAAcT,MAAM,CAAC,GAAGC,gBAAgBI,MAAMI,WAAW;IAC/D,MAAME,cAAcX,MAAM,CAAC,GAAGC,gBAAgBI,MAAMM,WAAW;IAE/D,qBACE,MAACd;;0BACC,KAACF;0BACC,cAAA,MAACG;oBAAmBkB,OAAM;;sCACxB,KAACtB;4BAAeW,OAAOM;4BAAaP,UAAUM;;sCAC9C,KAACd;4BACCqB,OAAM;4BACNC,uBAAS,KAACzB;gCAAOqB,SAAS,CAAC,CAACT,MAAMU,aAAa;gCAAEX,UAAUQ;;;;;;0BAIjE,KAACjB;0BACC,cAAA,KAACG;oBAAmBkB,OAAM;8BACxB,cAAA,KAACtB;wBAAeW,OAAOI;wBAAaL,UAAUE;;;;;;AAKxD"}

package/lib/components/HeatMapChartPanel.d.ts

@@ -0,0 +1,7 @@
+import { TimeSeriesData } from '@perses-dev/core';
+import { PanelProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { HeatMapChartOptions } from '../heat-map-chart-model';
+export type HeatMapChartPanelProps = PanelProps<HeatMapChartOptions, TimeSeriesData>;
+export declare function HeatMapChartPanel(props: HeatMapChartPanelProps): ReactElement | null;
+//# sourceMappingURL=HeatMapChartPanel.d.ts.map

package/lib/components/HeatMapChartPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeatMapChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAyB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAO9E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAErF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CAmKpF"}