@antscorp/antsomi-ui 1.3.3-beta.2 → 1.3.3-beta.21

package/es/services/index.js

@@ -1,64 +1,64 @@
-// Libraries
-import axios from 'axios';
-import qs from 'qs';
-export const instance = axios.create();
-const { CancelToken } = axios;
-export const services = {
-    mediaTemplateSavedImages: {
-        getList: function getList(params, infos) {
-            if (typeof params.API_HOST !== 'undefined') {
-                const { API_HOST } = params;
-                const { userId, accountId, token } = infos;
-                const cancelToken = params.cancelToken ? params.cancelToken : new CancelToken(() => { });
-                const { signal } = params;
-                delete params.API_HOST;
-                delete params.cancelToken;
-                delete params.signal;
-                const snapParams = Object.assign(Object.assign({}, params), { _token: token, _user_id: userId, _account_id: accountId });
-                return instance.get(API_HOST, {
-                    params: snapParams,
-                    cancelToken,
-                    signal,
-                });
-            }
-            return false;
-        },
-        create: function create(params, infos) {
-            if (params.API_HOST !== 'undefined') {
-                const { API_HOST } = params;
-                const { userId, accountId, token } = infos;
-                const cancelToken = params.cancelToken ? params.cancelToken : new CancelToken(() => { });
-                delete params.API_HOST;
-                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                params.cancelToken && delete params.cancelToken;
-                const paramsInfo = {
-                    _token: token,
-                    _user_id: userId,
-                    _account_id: accountId,
-                };
-                return instance.post(API_HOST, params, { cancelToken, params: paramsInfo });
-            }
-            return Promise.resolve(false);
-        },
-        upload: function upload(params, infos) {
-            if (typeof params.API_HOST !== 'undefined') {
-                const { API_HOST } = params;
-                const { userId, accountId, token } = infos;
-                delete params.API_HOST;
-                const paramsInfo = {
-                    _token: token,
-                    _user_id: userId,
-                    _account_id: accountId,
-                };
-                const url = `${API_HOST}?${qs.stringify(params.params)}`;
-                return instance.post(url, params.formData, {
-                    params: paramsInfo,
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-            }
-            return false;
-        },
-    },
-};
+// Libraries
+import axios from 'axios';
+import qs from 'qs';
+export const instance = axios.create();
+const { CancelToken } = axios;
+export const services = {
+    mediaTemplateSavedImages: {
+        getList: function getList(params, infos) {
+            if (typeof params.API_HOST !== 'undefined') {
+                const { API_HOST } = params;
+                const { userId, accountId, token } = infos;
+                const cancelToken = params.cancelToken ? params.cancelToken : new CancelToken(() => { });
+                const { signal } = params;
+                delete params.API_HOST;
+                delete params.cancelToken;
+                delete params.signal;
+                const snapParams = Object.assign(Object.assign({}, params), { _token: token, _user_id: userId, _account_id: accountId });
+                return instance.get(API_HOST, {
+                    params: snapParams,
+                    cancelToken,
+                    signal,
+                });
+            }
+            return false;
+        },
+        create: function create(params, infos) {
+            if (params.API_HOST !== 'undefined') {
+                const { API_HOST } = params;
+                const { userId, accountId, token } = infos;
+                const cancelToken = params.cancelToken ? params.cancelToken : new CancelToken(() => { });
+                delete params.API_HOST;
+                // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                params.cancelToken && delete params.cancelToken;
+                const paramsInfo = {
+                    _token: token,
+                    _user_id: userId,
+                    _account_id: accountId,
+                };
+                return instance.post(API_HOST, params, { cancelToken, params: paramsInfo });
+            }
+            return Promise.resolve(false);
+        },
+        upload: function upload(params, infos) {
+            if (typeof params.API_HOST !== 'undefined') {
+                const { API_HOST } = params;
+                const { userId, accountId, token } = infos;
+                delete params.API_HOST;
+                const paramsInfo = {
+                    _token: token,
+                    _user_id: userId,
+                    _account_id: accountId,
+                };
+                const url = `${API_HOST}?${qs.stringify(params.params)}`;
+                return instance.post(url, params.formData, {
+                    params: paramsInfo,
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                    },
+                });
+            }
+            return false;
+        },
+    },
+};

package/es/test.d.ts

@@ -1,13 +1,14 @@
-import '@antscorp/icons/main.css';
-export declare const BACKGROUND_COLOR_STYLE: {
-    SOLID: {
-        value: string;
-        label: string;
-    };
-    GRADIENT: {
-        value: string;
-        label: string;
-    };
-};
-export declare const customColors: string[];
-export declare const App: () => JSX.Element;
+import React from 'react';
+import '@antscorp/icons/main.css';
+export declare const BACKGROUND_COLOR_STYLE: {
+    SOLID: {
+        value: string;
+        label: string;
+    };
+    GRADIENT: {
+        value: string;
+        label: string;
+    };
+};
+export declare const customColors: string[];
+export declare const App: () => React.JSX.Element;

package/es/test.js

@@ -1,155 +1,162 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import '@antscorp/icons/main.css';
-import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
-// Slider,
-SliderWithInputNumber, Space, UploadImage, } from './components';
-// import { Slider } from 'antd';
-import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
-import { Rate } from './components/atoms/Rate';
-export const BACKGROUND_COLOR_STYLE = {
-    SOLID: {
-        value: 'color',
-        label: 'Solid',
-    },
-    GRADIENT: {
-        value: 'gradient',
-        label: 'Gradient',
-    },
-};
-export const customColors = [
-    '#f7da64',
-    '#8912dd',
-    '#ed1515',
-    '#230439',
-    '#d11a66',
-    '#ffbd64',
-    '#f1ab96',
-    '#824ccd',
-    '#5858e9',
-    '#57b8c2',
-];
-export const App = () => {
-    const [state, setState] = useState({
-        option: {
-            dateType: 'today',
-            calculationDate: 'years',
-            calculationType: 'minus',
-            value: 1,
-        },
-        date: '',
-        format: 'YYYYMMDD',
-    });
-    const [colorSettingState, setColorSettingState] = useState({
-        color: 'green',
-        customColors,
-    });
-    const [radioValue, setRadioValue] = useState('color');
-    const [sliderValue, setSliderValue] = useState(10);
-    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
-    const [icon, setIcon] = useState('');
-    const callbackColorSetting = (key, dataIn) => {
-        switch (key) {
-            case 'ON_ADD_NEW_PRESET':
-                // eslint-disable-next-line no-case-declarations
-                const { customColors = [] } = dataIn;
-                setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { customColors })));
-                break;
-            case 'ON_EDIT_CLICKED': {
-                // eslint-disable-next-line no-console
-                console.log('insideee.dev - clicked edit preset :>');
-                break;
-            }
-            default:
-                break;
-        }
-    };
-    const handleChangeColorSetting = (colorOut) => {
-        setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { color: colorOut })));
-    };
-    const handleChangeRadio = e => {
-        const { value = '' } = e.target;
-        setRadioValue(value);
-    };
-    const handleChangeSlider = value => {
-        setSliderValue(value);
-    };
-    const handleSetIcon = value => {
-        setIcon(value);
-    };
-    // ----------------------------  Test Helps Start ------------------------------
-    // return (
-    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
-    //     <Help />
-    //   </div>
-    // );
-    // ----------------------------  Test Helps End ------------------------------
-    // ------------------------ Media template components test start -------------------------
-    return (React.createElement(ConfigProvider, null,
-        React.createElement("div", { style: {
-                width: 500,
-                height: 1000,
-                border: '1px solid black',
-                margin: '0 auto',
-                padding: 12,
-                borderRadius: '10px',
-                marginTop: 12,
-            } },
-            React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
-            React.createElement(Space, { size: 20, direction: "vertical" },
-                React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
-                    React.createElement(GradientSetting, null)),
-                React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
-                React.createElement(EdgeSetting, { label: "Notification Spacing", unit: "px", linked: false, values: edge, 
-                    // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
-                    onChange: ({ values, linked, unit }) => {
-                        setEdge(values);
-                        // onUpdateSettings({
-                        //   gapX: values[0] + unit,
-                        //   gapY: values[1] + unit,
-                        //   gapSuffix: unit,
-                        //   linkedGapInput: linked,
-                        // });
-                    } }),
-                React.createElement(PositionSetting, { settings: { linkedPositionInput: false, positionSuffix: 'px' }, styles: { top: '10px', right: '20px', bottom: '30', left: '40' }, onChange: () => { } })),
-            React.createElement(Space, { size: 10, direction: "vertical" },
-                React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
-                    React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
-                            token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
-                            userId: '1600084695',
-                            accountId: '1600084695',
-                        }, 
-                        // title="Background Image"
-                        selectedImage: {
-                            url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
-                        }, onChangeImage: image => { }, onRemoveImage: () => {
-                            // onChangeSettings('backgroundImageObj', {
-                            //   name: '',
-                            //   previewUrl: '',
-                            // });
-                        } })),
-                React.createElement(SettingWrapper, { vertical: true, label: "Icon" },
-                    React.createElement(IconSelection, { isOpen: false, labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search for toggle...", icon: icon, onChange: handleSetIcon, iconTypes: ['cus', 'font-awesome'], onChangeSvg: value => {
-                            console.log('onChangeSvg', value);
-                        } }))))));
-    // ------------------------ Media template components test end -------------------------
-    return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
-        React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname", min: -10, max: 10, onChange: e => console.log('slider change', e) }),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Rate, null),
-        React.createElement("br", null),
-        React.createElement("br", null),
-        React.createElement(Slider, { className: "test-classname" })));
-};
-const container = document.getElementById('root');
-const root = createRoot(container);
-root.render(React.createElement(React.StrictMode, null,
-    React.createElement(ConfigProvider, { locale: "en" },
-        React.createElement(App, null))));
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@antscorp/icons/main.css';
+import { ConfigProvider, EdgeSetting, GradientSetting, IconSelection, PositionSetting, SettingWrapper, 
+// Slider,
+SliderWithInputNumber, Space, UploadImage, RateV2, } from './components';
+// import { Slider } from 'antd';
+import { Slider } from '@antscorp/antsomi-ui/es/components/atoms/Slider';
+import { Rate } from './components/atoms/Rate';
+export const BACKGROUND_COLOR_STYLE = {
+    SOLID: {
+        value: 'color',
+        label: 'Solid',
+    },
+    GRADIENT: {
+        value: 'gradient',
+        label: 'Gradient',
+    },
+};
+export const customColors = [
+    '#f7da64',
+    '#8912dd',
+    '#ed1515',
+    '#230439',
+    '#d11a66',
+    '#ffbd64',
+    '#f1ab96',
+    '#824ccd',
+    '#5858e9',
+    '#57b8c2',
+];
+export const App = () => {
+    const [state, setState] = useState({
+        option: {
+            dateType: 'today',
+            calculationDate: 'years',
+            calculationType: 'minus',
+            value: 1,
+        },
+        date: '',
+        format: 'YYYYMMDD',
+    });
+    const [colorSettingState, setColorSettingState] = useState({
+        color: 'green',
+        customColors,
+    });
+    const [radioValue, setRadioValue] = useState('color');
+    const [sliderValue, setSliderValue] = useState(10);
+    const [edge, setEdge] = useState(['auto', 'auto', 700, 700]);
+    const [icon, setIcon] = useState('');
+    const callbackColorSetting = (key, dataIn) => {
+        switch (key) {
+            case 'ON_ADD_NEW_PRESET':
+                // eslint-disable-next-line no-case-declarations
+                const { customColors = [] } = dataIn;
+                setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { customColors })));
+                break;
+            case 'ON_EDIT_CLICKED': {
+                // eslint-disable-next-line no-console
+                console.log('insideee.dev - clicked edit preset :>');
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    const handleChangeColorSetting = (colorOut) => {
+        setColorSettingState(prev => (Object.assign(Object.assign({}, prev), { color: colorOut })));
+    };
+    const handleChangeRadio = e => {
+        const { value = '' } = e.target;
+        setRadioValue(value);
+    };
+    const handleChangeSlider = value => {
+        setSliderValue(value);
+    };
+    const handleSetIcon = value => {
+        setIcon(value);
+    };
+    // ----------------------------  Test Helps Start ------------------------------
+    // return (
+    //   <div style={{ display: 'flex', justifyContent: 'center', width: '100vw', height: '100vh' }}>
+    //     <Help />
+    //   </div>
+    // );
+    // ----------------------------  Test Helps End ------------------------------
+    // ------------------------ Media template components test start -------------------------
+    const [starValue, setStarValue] = useState(1.3);
+    return (React.createElement(ConfigProvider, null,
+        React.createElement("div", { style: {
+                width: 500,
+                height: 1000,
+                border: '1px solid black',
+                margin: '0 auto',
+                padding: 12,
+                borderRadius: '10px',
+                marginTop: 12,
+            } },
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(RateV2, { value: starValue, onChange: value => setStarValue(value) }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement("h2", { style: { textAlign: 'center' } }, "Test component of media template"),
+            React.createElement(Space, { size: 20, direction: "vertical" },
+                React.createElement(SettingWrapper, { vertical: true, label: "Color Setting" },
+                    React.createElement(GradientSetting, null)),
+                React.createElement(SliderWithInputNumber, { label: "Size (px)", labelStyling: { marginTop: 10 }, min: 0, max: 100, value: sliderValue, onAfterChange: handleChangeSlider }),
+                React.createElement(EdgeSetting, { label: "Notification Spacing", unit: "px", linked: false, values: edge, 
+                    // edgeLabels={[t(translations.column.title), t(translations.row.title)]}
+                    onChange: ({ values, linked, unit }) => {
+                        setEdge(values);
+                        // onUpdateSettings({
+                        //   gapX: values[0] + unit,
+                        //   gapY: values[1] + unit,
+                        //   gapSuffix: unit,
+                        //   linkedGapInput: linked,
+                        // });
+                    } }),
+                React.createElement(PositionSetting, { settings: { linkedPositionInput: false, positionSuffix: 'px' }, styles: { top: '10px', right: '20px', bottom: '30', left: '40' }, onChange: () => { } })),
+            React.createElement(Space, { size: 10, direction: "vertical" },
+                React.createElement(SettingWrapper, { vertical: true, label: "Background Image", containerStyle: { gap: '20px' } },
+                    React.createElement(UploadImage, { domainMedia: "https://sandbox-media-template.antsomi.com", slug: "cdp/api/v1", labelButtonSelect: "Select Toggle from Computor", labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search toggle", paramConfigs: {
+                            token: '5474r2x214z294b423a4y474d4j5q274p4g494f4k5p5',
+                            userId: '1600084695',
+                            accountId: '1600084695',
+                        }, 
+                        // title="Background Image"
+                        selectedImage: {
+                            url: 'https://th.bing.com/th?id=OSK.8664d1b5838c79a3d74a3e97739978b5&w=148&h=148&c=7&o=6&dpr=2&pid=SANGAM',
+                        }, onChangeImage: image => { }, onRemoveImage: () => {
+                            // onChangeSettings('backgroundImageObj', {
+                            //   name: '',
+                            //   previewUrl: '',
+                            // });
+                        } })),
+                React.createElement(SettingWrapper, { vertical: true, label: "Icon" },
+                    React.createElement(IconSelection, { isOpen: false, labelHeadingModal: "Toggle Selection", searchPlaceholder: "Search for toggle...", icon: icon, onChange: handleSetIcon, iconTypes: ['cus', 'font-awesome'], onChangeSvg: value => {
+                            console.log('onChangeSvg', value);
+                        } }))))));
+    // ------------------------ Media template components test end -------------------------
+    return (React.createElement("div", { style: { width: '500px', margin: '32px' } },
+        React.createElement(GradientSetting, { onChange: e => console.log('gradient change') }),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Slider, { className: "test-classname", min: -10, max: 10, onChange: e => console.log('slider change', e) }),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Rate, null),
+        React.createElement("br", null),
+        React.createElement("br", null),
+        React.createElement(Slider, { className: "test-classname" })));
+};
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(React.StrictMode, null,
+    React.createElement(ConfigProvider, { locale: "en" },
+        React.createElement(App, null))));

package/es/types/index.d.ts

@@ -1,6 +1,6 @@
-export type THandleErrorPayload = {
-    path: string;
-    name: string;
-    args: Record<string, any>;
-};
-export type TLocale = 'en' | 'vi';
+export type THandleErrorPayload = {
+    path: string;
+    name: string;
+    args: Record<string, any>;
+};
+export type TLocale = 'en' | 'vi';

package/es/types/index.js

@@ -1 +1 @@
-export {};
+export {};

package/es/utils/color.d.ts

@@ -1,10 +1,10 @@
-export declare const isDarkColor: (hexcolor: any, alpha?: number) => boolean;
-export declare const hexWithAlpha: (color: ColorResult) => string;
-/**
- * Converts a hexadecimal color code to its corresponding RGB values.
- * @param {string} hexCode - The hexadecimal color code to convert.
- * @returns {Array} An array containing the RGB values.
- * @throws {Error} If the input is an invalid hexadecimal color code.
- */
-export declare const hexToRgb: (hexCode: string) => [number, number, number];
-export declare const generateHeatMapColor: (value: number, maxValue: number, rgbColor: [number, number, number]) => string;
+export declare const isDarkColor: (hexcolor: any, alpha?: number) => boolean;
+export declare const hexWithAlpha: (color: ColorResult) => string;
+/**
+ * Converts a hexadecimal color code to its corresponding RGB values.
+ * @param {string} hexCode - The hexadecimal color code to convert.
+ * @returns {Array} An array containing the RGB values.
+ * @throws {Error} If the input is an invalid hexadecimal color code.
+ */
+export declare const hexToRgb: (hexCode: string) => [number, number, number];
+export declare const generateHeatMapColor: (value: number, maxValue: number, rgbColor: [number, number, number]) => string;

package/es/utils/color.js

@@ -1,61 +1,61 @@
-export const isDarkColor = (hexcolor, alpha) => {
-    if (alpha) {
-        if (alpha < 0.5) {
-            return false;
-        }
-        return true;
-    }
-    const r = parseInt(hexcolor.substr(1, 2), 16);
-    const g = parseInt(hexcolor.substr(3, 2), 16);
-    const b = parseInt(hexcolor.substr(4, 2), 16);
-    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq < 155;
-};
-export const hexWithAlpha = (color) => {
-    if (color.hex === 'transparent') {
-        return 'transparent';
-    }
-    let alpha = Math.round((color.rgb.a || 0) * 255).toString(16);
-    if (alpha.length < 2)
-        alpha = `0${alpha}`;
-    const hexWithAlpha = color.hex + (alpha === 'ff' ? '' : alpha);
-    return hexWithAlpha;
-};
-/**
- * Converts a hexadecimal color code to its corresponding RGB values.
- * @param {string} hexCode - The hexadecimal color code to convert.
- * @returns {Array} An array containing the RGB values.
- * @throws {Error} If the input is an invalid hexadecimal color code.
- */
-export const hexToRgb = (hexCode) => {
-    let hex = hexCode.replace('#', '');
-    const hexLen = hex.length;
-    if (hexLen !== 3 && hexLen !== 6) {
-        throw new Error('Invalid hexadecimal color code');
-    }
-    if (hexLen === 3) {
-        hex = hex
-            .split('')
-            .map(char => char + char)
-            .join('');
-    }
-    try {
-        const r = parseInt(hex.substring(0, 2), 16);
-        const g = parseInt(hex.substring(2, 4), 16);
-        const b = parseInt(hex.substring(4, 6), 16);
-        return [r, g, b];
-    }
-    catch (error) {
-        throw new Error('Invalid hexadecimal color code');
-    }
-};
-export const generateHeatMapColor = (value, maxValue, rgbColor) => {
-    // Normalize the value between 0.05 and 1
-    const normalizedValue = value / maxValue + 0.05;
-    // Set the base color components
-    const baseRed = rgbColor[0];
-    const baseGreen = rgbColor[1];
-    const baseBlue = rgbColor[2];
-    // Return the RGBA color as a string
-    return `rgba(${baseRed},${baseGreen},${baseBlue},${normalizedValue})`;
-};
+export const isDarkColor = (hexcolor, alpha) => {
+    if (alpha) {
+        if (alpha < 0.5) {
+            return false;
+        }
+        return true;
+    }
+    const r = parseInt(hexcolor.substr(1, 2), 16);
+    const g = parseInt(hexcolor.substr(3, 2), 16);
+    const b = parseInt(hexcolor.substr(4, 2), 16);
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq < 155;
+};
+export const hexWithAlpha = (color) => {
+    if (color.hex === 'transparent') {
+        return 'transparent';
+    }
+    let alpha = Math.round((color.rgb.a || 0) * 255).toString(16);
+    if (alpha.length < 2)
+        alpha = `0${alpha}`;
+    const hexWithAlpha = color.hex + (alpha === 'ff' ? '' : alpha);
+    return hexWithAlpha;
+};
+/**
+ * Converts a hexadecimal color code to its corresponding RGB values.
+ * @param {string} hexCode - The hexadecimal color code to convert.
+ * @returns {Array} An array containing the RGB values.
+ * @throws {Error} If the input is an invalid hexadecimal color code.
+ */
+export const hexToRgb = (hexCode) => {
+    let hex = hexCode.replace('#', '');
+    const hexLen = hex.length;
+    if (hexLen !== 3 && hexLen !== 6) {
+        throw new Error('Invalid hexadecimal color code');
+    }
+    if (hexLen === 3) {
+        hex = hex
+            .split('')
+            .map(char => char + char)
+            .join('');
+    }
+    try {
+        const r = parseInt(hex.substring(0, 2), 16);
+        const g = parseInt(hex.substring(2, 4), 16);
+        const b = parseInt(hex.substring(4, 6), 16);
+        return [r, g, b];
+    }
+    catch (error) {
+        throw new Error('Invalid hexadecimal color code');
+    }
+};
+export const generateHeatMapColor = (value, maxValue, rgbColor) => {
+    // Normalize the value between 0.05 and 1
+    const normalizedValue = value / maxValue + 0.05;
+    // Set the base color components
+    const baseRed = rgbColor[0];
+    const baseGreen = rgbColor[1];
+    const baseBlue = rgbColor[2];
+    // Return the RGBA color as a string
+    return `rgba(${baseRed},${baseGreen},${baseBlue},${normalizedValue})`;
+};