@perses-dev/components 0.51.0-rc.0 → 0.51.0

package/dist/cjs/StatChart/index.js

@@ -1,30 +0,0 @@
-// 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
-});
-_export_star(require("./StatChart"), 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/dist/cjs/StatChart/utils/formatStatChartValue.js

@@ -1,34 +0,0 @@
-// 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, "formatStatChartValue", {
-    enumerable: true,
-    get: function() {
-        return formatStatChartValue;
-    }
-});
-const _core = require("@perses-dev/core");
-const formatStatChartValue = (value, format)=>{
-    if (value === null) {
-        return 'null';
-    } else if (typeof value === 'number') {
-        return (0, _core.formatValue)(value, format);
-    } else if (value === undefined) {
-        return '';
-    } else {
-        return value;
-    }
-};

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -1,140 +0,0 @@
-// 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, "StatusHistoryChart", {
-    enumerable: true,
-    get: function() {
-        return StatusHistoryChart;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _charts = require("echarts/charts");
-const _components = require("echarts/components");
-const _core = require("echarts/core");
-const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
-const _TimeZoneProvider = require("../context/TimeZoneProvider");
-const _EChart = require("../EChart");
-const _getformattedaxislabel = require("./get-formatted-axis-label");
-const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
-(0, _core.use)([
-    _charts.HeatmapChart,
-    _components.VisualMapComponent,
-    _components.GridComponent,
-    _components.DatasetComponent,
-    _components.TitleComponent,
-    _components.TooltipComponent,
-    _renderers.CanvasRenderer
-]);
-const StatusHistoryChart = (props)=>{
-    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
-    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    const theme = (0, _material.useTheme)();
-    const option = {
-        tooltip: {
-            appendToBody: true,
-            formatter: (params)=>{
-                return (0, _StatusHistoryTooltip.generateTooltipHTML)({
-                    data: params.data.value,
-                    label: params.data.label,
-                    marker: params.marker,
-                    xAxisCategories,
-                    yAxisCategories,
-                    theme
-                });
-            }
-        },
-        grid: {
-            top: '5%',
-            bottom: '5%'
-        },
-        xAxis: {
-            type: 'category',
-            data: xAxisCategories,
-            axisLine: {
-                show: false
-            },
-            splitArea: {
-                show: false
-            },
-            axisLabel: {
-                hideOverlap: true,
-                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)(timeScale?.rangeMs ?? 0, timeZone)
-            }
-        },
-        yAxis: {
-            type: 'category',
-            data: yAxisCategories,
-            axisLine: {
-                show: false
-            },
-            splitArea: {
-                show: false,
-                interval: 0
-            },
-            splitLine: {
-                show: false
-            },
-            axisLabel: {
-                interval: 0
-            }
-        },
-        visualMap: {
-            show: false,
-            type: 'piecewise',
-            pieces: colors
-        },
-        series: [
-            {
-                name: 'Status history',
-                type: 'heatmap',
-                coordinateSystem: 'cartesian2d',
-                data: data,
-                label: {
-                    show: false
-                },
-                itemStyle: {
-                    borderWidth: 1,
-                    borderType: 'solid',
-                    borderColor: '#ffffff'
-                },
-                emphasis: {
-                    itemStyle: {
-                        opacity: 0.5
-                    }
-                }
-            }
-        ]
-    };
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        style: {
-            height: height
-        },
-        sx: {
-            overflow: 'auto'
-        },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
-            sx: {
-                width: '100%',
-                height: height
-            },
-            option: option,
-            theme: chartsTheme.echartsTheme
-        })
-    });
-};

package/dist/cjs/StatusHistoryChart/StatusHistoryTooltip.js

@@ -1,55 +0,0 @@
-// 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, "generateTooltipHTML", {
-    enumerable: true,
-    get: function() {
-        return generateTooltipHTML;
-    }
-});
-const _material = require("@mui/material");
-const _utils = require("../utils");
-function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
-    const [x, y] = data;
-    const xAxisLabel = xAxisCategories[x];
-    const { formattedDate, formattedTime } = (0, _utils.getDateAndTime)(xAxisLabel);
-    const tooltipHeader = (0, _material.css)`
-    border-bottom: 1px solid ${theme.palette.grey[500]};
-    padding-bottom: 8px;
-  `;
-    const tooltipContentStyles = (0, _material.css)`
-    display: flex;
-    justify-content: space-between;
-    padding-top: 8px;
-  `;
-    const labelStyles = (0, _material.css)`
-    margin-right: 16px;
-  `;
-    return `
-    <div>
-      <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
-      <div style="${tooltipContentStyles.styles}">
-        <div style="${labelStyles.styles}">
-          ${marker}
-          <strong>${yAxisCategories[y]}</strong>
-        </div>
-        <div>
-          ${label}
-        </div>
-      </div>
-    </div>
-  `;
-}

package/dist/cjs/StatusHistoryChart/get-formatted-axis-label.js

@@ -1,48 +0,0 @@
-// 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, "getFormattedStatusHistoryAxisLabel", {
-    enumerable: true,
-    get: function() {
-        return getFormattedStatusHistoryAxisLabel;
-    }
-});
-const _utils = require("../utils");
-function getFormattedStatusHistoryAxisLabel(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, _utils.formatWithTimeZone)(timeStamp, 'yyy', timezone);
-        }
-        // more than 2 years
-        if (rangeMs > yearMs * 2) {
-            return (0, _utils.formatWithTimeZone)(timeStamp, 'MMM yyy', timezone);
-        }
-        // between 5 days to 6 months
-        if (rangeMs > dayMs * 10 && rangeMs < monthMs * 6) {
-            return (0, _utils.formatWithTimeZone)(timeStamp, 'dd.MM', timezone); // 12-01
-        }
-        // between 2 and 10 days
-        if (rangeMs > dayMs * 2 && rangeMs <= dayMs * 10) {
-            return (0, _utils.formatWithTimeZone)(timeStamp, 'dd.MM HH:mm', timezone); // 12-01; // 12-01 12:30
-        }
-        return (0, _utils.formatWithTimeZone)(timeStamp, 'HH:mm', timezone);
-    };
-}

package/dist/cjs/StatusHistoryChart/index.js

@@ -1,31 +0,0 @@
-// 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
-});
-_export_star(require("./StatusHistoryChart"), exports);
-_export_star(require("./utils/get-color"), 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/dist/cjs/StatusHistoryChart/utils/get-color.js

@@ -1,125 +0,0 @@
-// 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
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    FALLBACK_COLOR: function() {
-        return FALLBACK_COLOR;
-    },
-    getColorForValue: function() {
-        return getColorForValue;
-    },
-    getColorsForValues: function() {
-        return getColorsForValues;
-    },
-    hexToHSL: function() {
-        return hexToHSL;
-    },
-    hslToHex: function() {
-        return hslToHex;
-    }
-});
-const FALLBACK_COLOR = '#1f77b4';
-function getColorForValue(value, baseColor) {
-    // Validate base color
-    if (!baseColor.match(/^#[0-9A-Fa-f]{6}$/)) {
-        baseColor = FALLBACK_COLOR;
-    }
-    try {
-        const [baseH, baseS, baseL] = hexToHSL(baseColor);
-        // Ensure numeric values are valid
-        if (isNaN(baseH) || isNaN(baseS) || isNaN(baseL)) {
-            throw new Error('Invalid HSL values');
-        }
-        // Create deterministic hash
-        const hash = String(value).split('').reduce((acc, char)=>acc + char.charCodeAt(0), 0);
-        const hueStep = 60;
-        const lightnessVariation = 15;
-        const hueOffset = hash % 6 * hueStep; // 6 segments of 60° each
-        const newH = (baseH + hueOffset) % 360;
-        const newL = baseL + (hash % 2 ? lightnessVariation : -lightnessVariation);
-        // Keep saturation high for better distinction
-        const newS = Math.min(baseS + 10, 90);
-        const color = hslToHex(Math.abs(newH), Math.min(Math.max(newS, 50), 90), Math.min(Math.max(newL, 30), 70) // Keep lightness 30-70%
-        );
-        // Validate generated color
-        if (!color.match(/^#[0-9A-Fa-f]{6}$/)) {
-            throw new Error('Invalid generated color');
-        }
-        return color;
-    } catch (_) {
-        return FALLBACK_COLOR;
-    }
-}
-function getColorsForValues(uniqueValues, themeColors) {
-    // If we have enough theme colors, use them
-    if (themeColors.length >= uniqueValues.length) {
-        return themeColors.slice(0, uniqueValues.length);
-    }
-    // Use theme colors first, then generate additional ones
-    return uniqueValues.map((value, index)=>{
-        if (index < themeColors.length) {
-            return themeColors[index] || FALLBACK_COLOR;
-        }
-        return getColorForValue(value, themeColors[0] || FALLBACK_COLOR);
-    });
-}
-function hexToHSL(hex) {
-    const r = parseInt(hex.slice(1, 3), 16) / 255;
-    const g = parseInt(hex.slice(3, 5), 16) / 255;
-    const b = parseInt(hex.slice(5, 7), 16) / 255;
-    const max = Math.max(r, g, b);
-    const min = Math.min(r, g, b);
-    let h = 0;
-    let s = 0;
-    const l = (max + min) / 2;
-    if (max !== min) {
-        const d = max - min;
-        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-        switch(max){
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-        }
-        h /= 6;
-    }
-    return [
-        h * 360,
-        s * 100,
-        l * 100
-    ];
-}
-function hslToHex(h, s, l) {
-    l /= 100;
-    const a = s * Math.min(l, 1 - l) / 100;
-    const f = (n)=>{
-        const k = (n + h / 30) % 12;
-        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-        return Math.round(255 * color).toString(16).padStart(2, '0');
-    };
-    return `#${f(0)}${f(8)}${f(4)}`;
-}

package/dist/cjs/StatusHistoryChart/utils/get-tooltip-position.js

@@ -1,35 +0,0 @@
-// 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, "getTooltipPosition", {
-    enumerable: true,
-    get: function() {
-        return getTooltipPosition;
-    }
-});
-const getTooltipPosition = (...data)=>{
-    const point = data[0];
-    const size = data[4];
-    // calculate the position to avoid overflow
-    const [x, y] = point;
-    const { contentSize, viewSize } = size;
-    const posX = x + contentSize[0] > viewSize[0] ? x - contentSize[0] : x;
-    const posY = y + contentSize[1] > viewSize[1] ? y - contentSize[1] : y;
-    return [
-        posX,
-        posY
-    ];
-};