@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/PieChart/index.js

@@ -0,0 +1,30 @@
+// 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
+});
+_export_star(require("./PieChart"), 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/SettingsAutocomplete/SettingsAutocomplete.js

@@ -26,8 +26,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         ...params
     }), ...otherProps }) {
     const getOptionLabel = (option)=>{
-        var _option_label;
-        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
+        return option.label ?? option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of
@@ -39,7 +38,7 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
         getOptionLabel: getOptionLabel,
         options: options,
         renderInput: renderInput,
-        renderOption: (props, option)=>{
+        renderOption: ({ key, ...props }, option)=>{
             return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                 ...props,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -52,12 +51,14 @@ function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (
                         option.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "body2",
                             component: "div",
-                            color: (theme)=>theme.palette.text.secondary,
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            },
                             children: option.description
                         })
                     ]
                 })
-            });
+            }, key);
         },
         filterOptions: (0, _material.createFilterOptions)({
             // Include the label and the description in search.

package/dist/cjs/SortSelector/SortSelectorButtons.js

@@ -0,0 +1,50 @@
+// 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, "SortSelectorButtons", {
+    enumerable: true,
+    get: function() {
+        return SortSelectorButtons;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SortSelectorButtons({ onChange, value, ...props }) {
+    const handleSortChange = (sort)=>{
+        onChange(sort);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
+        "aria-label": "Sort",
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange(undefined),
+                variant: value === undefined ? 'contained' : 'outlined',
+                children: "None"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('asc'),
+                variant: value === 'asc' ? 'contained' : 'outlined',
+                children: "Asc"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('desc'),
+                variant: value === 'desc' ? 'contained' : 'outlined',
+                children: "Desc"
+            })
+        ]
+    });
+}

package/dist/cjs/SortSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./SortSelector"), exports);
+_export_star(require("./SortSelectorButtons"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/StatChart/StatChart.js

@@ -22,22 +22,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _EChart = require("../EChart");
 const _calculateFontSize = require("./calculateFontSize");
+const _formatStatChartValue = require("./utils/formatStatChartValue");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -49,21 +49,15 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
-function StatChart(props) {
-    var _data_seriesData, _data_seriesData1;
-    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = (0, _core.formatValue)(data.calculatedValue, format);
-    }
+const StatChart = (props)=>{
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
+    const chartsTheme = (0, _context.useChartsTheme)();
+    const color = data.color;
+    const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -162,7 +156,7 @@ function StatChart(props) {
             showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
                 variant: "h3",
@@ -182,7 +176,7 @@ function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
 })(({ theme, padding, fontSize })=>({
@@ -196,7 +190,7 @@ const SeriesName = (0, _material.styled)(_material.Typography, {
 const Value = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
 })(({ theme, color, padding, fontSize, sparkline })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/cjs/StatChart/calculateFontSize.js

@@ -39,10 +39,8 @@ function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSi
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/cjs/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,140 @@
+// 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

@@ -0,0 +1,55 @@
+// 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

@@ -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, "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

@@ -0,0 +1,31 @@
+// 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

@@ -0,0 +1,125 @@
+// 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)}`;
+}