awing-library 2.1.129-beta → 2.1.129

package/lib/ACM-AXN/Wizard/CreateOrEdit/PageTemplate.js

@@ -19,55 +19,45 @@ var react_1 = require("react");
 var react_i18next_1 = require("react-i18next");
 var Add_1 = __importDefault(require("@mui/icons-material/Add"));
 var material_1 = require("@mui/material");
-var Hooks_1 = __importDefault(require("../Hooks"));
 var RowTemplate_1 = __importDefault(require("./RowTemplate"));
 var AWING_1 = require("../../../AWING");
 var enums_1 = require("../../../ACM-AXN/Page/enums");
 var Utils_1 = require("../Utils");
 function PageTemplate(props) {
-    var pageCodeValue = props.pageCodeValue, wizardTemplates = props.wizardTemplates, onChange = props.onChange, onConfirmExit = props.onConfirmExit, _a = props.onUpdateWizardLogin, onUpdateWizardLogin = _a === void 0 ? function () { return null; } : _a;
+    var pageCodeValue = props.pageCodeValue, wizardTemplates = props.wizardTemplates, templateTypes = props.templateTypes, directories = props.directories, onChange = props.onChange, onConfirmExit = props.onConfirmExit, _a = props.onUpdateWizardLogin, onUpdateWizardLogin = _a === void 0 ? function () { return null; } : _a;
     var t = (0, react_i18next_1.useTranslation)().t;
-    var service = (0, Hooks_1.default)().service;
     var isPageCodeLogin = pageCodeValue === enums_1.PageCode.Lgn;
     var pageCode = pageCodeValue === enums_1.PageCode.Lgn ? Utils_1.CPageCode.LGN : Utils_1.CPageCode.WLC;
     var _b = (0, react_1.useState)(true), loadingDirectory = _b[0], setLoadingDirectories = _b[1];
     var _c = (0, react_1.useState)(true), loadingtemplateTypes = _c[0], setLoadingTemplateTypes = _c[1];
     // DATA => Tên Thư Mục
-    var _d = (0, react_1.useState)([]), directories = _d[0], setDirectories = _d[1];
+    var _d = (0, react_1.useState)([]), pageDirectories = _d[0], setPageDirectories = _d[1];
     // DATA => Kiểu template
-    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
-    (0, react_1.useEffect)(function () {
-        service
-            .templatesGetDirectories()
-            .then(function (directories_) {
+    var _e = (0, react_1.useState)([]), pageTemplateTypes = _e[0], setPageTemplateTypes = _e[1];
+    (0, react_1.useLayoutEffect)(function () {
+        if (directories.length > 0) {
             // CALL API => DATA => Tên Thư Mục
-            var systemDirectoryIndex = directories_ === null || directories_ === void 0 ? void 0 : directories_.findIndex(function (directory) {
+            var systemDirectoryIndex = directories === null || directories === void 0 ? void 0 : directories.findIndex(function (directory) {
                 return directory.parentDirectoryId ===
                     Utils_1.ROOT_DIRECTORY.SYSTEM_DIRECTORY.toString();
             });
             if (systemDirectoryIndex !== -1) {
-                directories_[systemDirectoryIndex].name = 'SYSTEM TEMPLATE';
+                directories[systemDirectoryIndex].name = 'SYSTEM TEMPLATE';
             }
-            setDirectories(directories_);
-        })
-            .finally(function () {
-            setLoadingDirectories(false);
-        });
+            setPageDirectories(directories);
+            loadingDirectory && setLoadingDirectories(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    (0, react_1.useEffect)(function () {
-        service
-            .templateTypesGet()
-            .then(function (templateTypes_) {
-            setTemplateTypes(templateTypes_.filter(function (itemTemplate) {
+    }, [directories.length]);
+    (0, react_1.useLayoutEffect)(function () {
+        if (templateTypes.length > 0) {
+            setPageTemplateTypes(templateTypes.filter(function (itemTemplate) {
                 return itemTemplate.templateTypeCode === pageCode;
             }));
-        })
-            .finally(function () {
-            setLoadingTemplateTypes(false);
-        });
+            loadingtemplateTypes && setLoadingTemplateTypes(false);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pageCodeValue]);
+    }, [templateTypes.length]);
     var handleChangeRowTemplate = function (fieldValue, sortOrder) {
         var _a;
         onConfirmExit();
@@ -93,6 +83,6 @@ function PageTemplate(props) {
                             ? t('Wizard.LoginTemplate')
                             : t('Wizard.WelcomeTemplate') }), isPageCodeLogin && ((0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", "aria-label": "button-add", title: t('Common.Add'), "data-testid": "button-add", onClick: function () {
                             return onUpdateWizardLogin(Utils_1.TYPE_LOGIN_TEMPLATE.ADD);
-                        }, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] }), loadingDirectory || loadingtemplateTypes ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wizardTemplates.map(function (template, idx) { return ((0, jsx_runtime_1.jsx)(RowTemplate_1.default, { template: template, pageCode: pageCode, directories: directories, templateTypes: templateTypes, onChangeRow: handleChangeRowTemplate, onUpdateWizardLogin: onUpdateWizardLogin, disabledIconDelete: wizardTemplates.length === 1 }, idx)); }) }))] }));
+                        }, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] }), loadingDirectory || loadingtemplateTypes ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: wizardTemplates.map(function (template, idx) { return ((0, jsx_runtime_1.jsx)(RowTemplate_1.default, { template: template, pageCode: pageCode, directories: pageDirectories, templateTypes: pageTemplateTypes, onChangeRow: handleChangeRowTemplate, onUpdateWizardLogin: onUpdateWizardLogin, disabledIconDelete: wizardTemplates.length === 1 }, idx)); }) }))] }));
 }
 exports.default = (0, react_1.memo)(PageTemplate);

package/lib/ACM-AXN/Wizard/CreateOrEdit/PageTemplate.test.js

@@ -76,6 +76,8 @@ describe('PageTemplate component', function () {
     var mockData = {
         pageCodeValue: 1,
         wizardTemplates: [],
+        directories: [],
+        templateTypes: [],
         onConfirmExit: jest.fn(),
         onChange: jest.fn(),
         onUpdateWizardLogin: jest.fn(),

package/lib/ACM-AXN/Wizard/CreateOrEdit/RowTemplate.js

@@ -47,7 +47,7 @@ function RowTemplate(props) {
     }, [template]);
     (0, react_1.useEffect)(function () {
         if (wizardTemplate === null || wizardTemplate === void 0 ? void 0 : wizardTemplate.directoryId) {
-            setIsLoadingParameter(true);
+            !isLoadingParameter && setIsLoadingParameter(true);
             service
                 .templatesGetByDirectoryId(wizardTemplate.directoryId)
                 .then(function (template_) {

package/lib/ACM-AXN/Wizard/CreateOrEdit/index.js

@@ -49,6 +49,22 @@ function CreateOrEdit() {
     }), wizardData = _c[0], setWizardData = _c[1];
     // Nhóm Wizard
     var _d = (0, react_1.useState)([]), wizardGroup = _d[0], setWizardGroup = _d[1];
+    // DATA => Kiểu template
+    var _e = (0, react_1.useState)([]), templateTypes = _e[0], setTemplateTypes = _e[1];
+    // DATA => Tên Thư Mục
+    var _f = (0, react_1.useState)([]), directories = _f[0], setDirectories = _f[1];
+    (0, react_1.useEffect)(function () {
+        if (!templateTypes.length) {
+            service.templateTypesGet().then(setTemplateTypes);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [templateTypes.length]);
+    (0, react_1.useEffect)(function () {
+        if (!directories.length) {
+            service.templatesGetDirectories().then(setDirectories);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [directories.length]);
     (0, react_1.useEffect)(function () {
         if (id) {
             setLoading(true);
@@ -125,7 +141,7 @@ function CreateOrEdit() {
             hasValidData((wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) || []));
     };
     return ((0, jsx_runtime_1.jsx)(ClassicDrawer_1.default, { title: id ? t('Common.Edit') : t('Common.Create'), onSubmit: handleSubmit, confirmExit: confirmExit, childrenWrapperStyle: { padding: 0 }, disableButtonSubmit: !(isDisable() && confirmExit), children: loading ? ((0, jsx_runtime_1.jsx)(AWING_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormInformationBasic_1.default, { wizardData: wizardData, wizardGroup: wizardGroup, onChange: handleChange, onConfirmExit: handleConfirmExit }), TEMPLATES.map(function (value) {
-                    return ((0, jsx_runtime_1.jsx)(PageTemplate_1.default, { pageCodeValue: value, onChange: handleChange, onConfirmExit: handleConfirmExit, wizardTemplates: value === enums_1.PageCode.Lgn
+                    return ((0, jsx_runtime_1.jsx)(PageTemplate_1.default, { pageCodeValue: value, onChange: handleChange, directories: directories, templateTypes: templateTypes, onConfirmExit: handleConfirmExit, wizardTemplates: value === enums_1.PageCode.Lgn
                             ? (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardLoginTemplates) || []
                             : (wizardData === null || wizardData === void 0 ? void 0 : wizardData.wizardWelcomeTemplates) ||
                                 [], onUpdateWizardLogin: handleUpdateWizardLoginTemplate }, value));

package/lib/ACM-AXN/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./PlaceFilter";
 export * from "./Permission";
+export * from "./Template";

package/lib/ACM-AXN/index.js

@@ -16,3 +16,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./PlaceFilter"), exports);
 __exportStar(require("./Permission"), exports);
+__exportStar(require("./Template"), exports);

package/lib/AWING/AsyncAutocomplete/index.js

@@ -33,7 +33,7 @@ var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
 var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 var CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 var CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
-var throttle_1 = __importDefault(require("lodash/throttle"));
+var lodash_1 = require("lodash");
 function AsyncAutocomplete(props) {
     var _a;
     var multiple = props.multiple, _b = props.value, value = _b === void 0 ? null : _b, onChange = props.onChange, fetchData = props.fetchData, getOptionValue = props.getOptionValue, getOptionLabel = props.getOptionLabel, readOnly = props.readOnly, TextFieldProps = props.TextFieldProps, renderOption = props.renderOption;
@@ -41,7 +41,7 @@ function AsyncAutocomplete(props) {
     var _d = react_2.default.useState([]), options = _d[0], setOptions = _d[1];
     var _e = react_2.default.useState(false), loading = _e[0], setLoading = _e[1];
     var fetch = react_2.default.useMemo(function () {
-        return (0, throttle_1.default)(function (input, callback) {
+        return (0, lodash_1.debounce)(function (input, callback) {
             setLoading(true);
             fetchData(input)
                 .then(function (response) {

package/lib/AWING/BasicDataForm/BasicDataForm.js

@@ -65,6 +65,7 @@ var BasicDataForm = function (props) {
     var _b = react_1.default.useState(function () {
         return getCurrentObj({ oldValue: oldValue, fields: fields });
     }), currentObj = _b[0], setCurrentObj = _b[1];
+    var renderCount = react_1.default.useRef(0);
     var _c = react_1.default.useState({}), currentValid = _c[0], setCurrentValid = _c[1];
     var errorText = react_1.default.useRef({
         default: t('Common.InvalidData'),
@@ -100,7 +101,7 @@ var BasicDataForm = function (props) {
                 : (0, exports.DefaultCheckValid)(fieldType, value);
     };
     react_1.default.useEffect(function () {
-        if (oldValue) {
+        if (oldValue && renderCount.current !== 0) {
             setCurrentObj(getCurrentObj({ oldValue: oldValue, fields: fields }));
             var valid = {};
             for (var i = 0; i < fields.length; i++) {
@@ -109,6 +110,7 @@ var BasicDataForm = function (props) {
             }
             setCurrentValid(valid);
         }
+        renderCount.current += 1;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var handleChange = function (fieldName, fieldValue) {
@@ -159,7 +161,7 @@ var BasicDataForm = function (props) {
                                 width: '100%',
                             }, children: actions }))] })), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, spacing: 2, children: fields.map(function (fieldDef, index) {
                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-                        var fieldName = fieldDef.fieldName, _t = fieldDef.type, type = _t === void 0 ? 'text' : _t, checkValid = fieldDef.checkValid, options = fieldDef.options, loading = fieldDef.loading, customeFieldChange = fieldDef.customeFieldChange, AsynchronousAutocompleteProps = fieldDef.AsynchronousAutocompleteProps, SearchProps = fieldDef.SearchProps, defaultValue = fieldDef.defaultValue, value = fieldDef.value, other = __rest(fieldDef, ["fieldName", "type", "checkValid", "options", "loading", "customeFieldChange", "AsynchronousAutocompleteProps", "SearchProps", "defaultValue", "value"]);
+                        var fieldName = fieldDef.fieldName, _t = fieldDef.type, type = _t === void 0 ? 'text' : _t, checkValid = fieldDef.checkValid, options = fieldDef.options, loading = fieldDef.loading, customeFieldChange = fieldDef.customeFieldChange, AsynchronousAutocompleteProps = fieldDef.AsynchronousAutocompleteProps, AutocompleteBasicProps = fieldDef.AutocompleteBasicProps, SearchProps = fieldDef.SearchProps, defaultValue = fieldDef.defaultValue, value = fieldDef.value, other = __rest(fieldDef, ["fieldName", "type", "checkValid", "options", "loading", "customeFieldChange", "AsynchronousAutocompleteProps", "AutocompleteBasicProps", "SearchProps", "defaultValue", "value"]);
                         var fieldValue = value !== null && value !== void 0 ? value : currentObj[fieldName];
                         var showError = currentValid[fieldName] !== undefined &&
                             !currentValid[fieldName];
@@ -189,7 +191,7 @@ var BasicDataForm = function (props) {
                                                             .endAdornment] })) }), error: showError, helperText: showError
                                                 ? (_a = fieldDef.helperText) !== null && _a !== void 0 ? _a : t('Common.InvalidData')
                                                 : '' })));
-                                    } }, index));
+                                    }, disableClearable: AutocompleteBasicProps === null || AutocompleteBasicProps === void 0 ? void 0 : AutocompleteBasicProps.disableClearable }, index));
                                 break;
                             case 'checkbox':
                                 currentField = ((0, jsx_runtime_1.jsx)(material_1.FormControl, { fullWidth: true, required: fieldDef.required, children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { id: fieldName, name: fieldName, checked: fieldValue, onChange: function (event) {
@@ -217,7 +219,7 @@ var BasicDataForm = function (props) {
                                     } }, fieldDef.DateProps), fieldName));
                                 break;
                             case 'date-range':
-                                currentField = ((0, jsx_runtime_1.jsx)(DateRangePicker_1.default, __assign({ variant: "outlined", textFieldProps: {
+                                currentField = ((0, jsx_runtime_1.jsx)(DateRangePicker_1.default, __assign({ required: fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.required, variant: "outlined", textFieldProps: {
                                         fullWidth: true,
                                     }, value: {
                                         startDate: (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue[0]) || null,
@@ -369,8 +371,9 @@ var BasicDataForm = function (props) {
                             case 'geo-fencing': {
                                 var geoProps = (fieldDef === null || fieldDef === void 0 ? void 0 : fieldDef.GeoFencingProps) || {};
                                 currentField = ((0, jsx_runtime_1.jsx)("div", { style: { margin: '16px 0px' }, children: (0, jsx_runtime_1.jsx)(GeoFencing_1.default, __assign({ configs: {
-                                            GOONG_API_KEY: '',
-                                            GOONG_MAP_KEY: '',
+                                            // GOONG_API_KEY: '',
+                                            // GOONG_MAP_KEY: '',
+                                            GOOGLE_MAP_KEY: '',
                                         }, label: '' }, geoProps, { onChange: function (value) {
                                             return handleChange(fieldName, value ? value : null);
                                         } }), index) }, index));

package/lib/AWING/BasicDataForm/interface.d.ts

@@ -37,6 +37,9 @@ export interface BasicFieldDefinition extends BaseTextFieldProps {
      */
     customeFieldChange?(fieldValue: any): DataObject;
     AsynchronousAutocompleteProps?: AsynchronousAutocompleteProps;
+    AutocompleteBasicProps?: {
+        disableClearable?: boolean;
+    };
     SearchProps?: {
         searchResult?: any;
         error: boolean;

package/lib/AWING/Chart/BarLineComponent.js

@@ -70,7 +70,7 @@ var BarLineComponent = function (props) {
                 titleColor: '#212121',
                 bodyFont: {
                     size: 14,
-                    family: "'AW-Roboto', sans-serif",
+                    family: "'Roboto', sans-serif",
                     lineHeight: 1.5,
                 },
             },
@@ -82,14 +82,14 @@ var BarLineComponent = function (props) {
                 position: 'bottom',
                 labels: {
                     usePointStyle: true,
-                    pointStyle: 'circle',
+                    // pointStyle: 'circle',
                     boxHeight: 12,
                     boxWidth: 12,
                     padding: 30,
                     boxPadding: 50,
                     font: {
                         size: 15,
-                        family: "'AW-Roboto', sans-serif",
+                        family: "'Roboto', sans-serif",
                         lineHeight: 1.5,
                     },
                 },
@@ -124,7 +124,7 @@ var BarLineComponent = function (props) {
                     title: {
                         font: {
                             size: 14,
-                            family: "'AW-Roboto', sans-serif",
+                            family: "'Roboto', sans-serif",
                         },
                     },
                 },
@@ -147,7 +147,7 @@ var BarLineComponent = function (props) {
                     font: {
                         size: 14,
                         weight: 'bold',
-                        family: "'AW-Roboto', sans-serif",
+                        family: "'Roboto', sans-serif",
                     },
                 },
             },
@@ -166,7 +166,7 @@ var BarLineComponent = function (props) {
                     font: {
                         size: 14,
                         weight: 'bold',
-                        family: "'AW-Roboto', sans-serif",
+                        family: "'Roboto', sans-serif",
                     },
                 },
             },
@@ -229,16 +229,21 @@ var BarLineComponent = function (props) {
                     chart.update();
                 };
                 // Color box
-                var boxSpan = document.createElement('span');
+                var boxSpan = document.createElement('div');
                 boxSpan.style.background = item.fillStyle;
                 boxSpan.style.borderColor = item.strokeStyle;
                 boxSpan.style.borderWidth = item.lineWidth + 'px';
                 boxSpan.style.display = 'inline-block';
                 boxSpan.style.flexShrink = '0';
-                boxSpan.style.height = '20px';
-                boxSpan.style.marginRight = '10px';
-                boxSpan.style.width = '20px';
-                boxSpan.style.borderRadius = '20px';
+                boxSpan.style.height = '15px';
+                boxSpan.style.marginRight = '15px';
+                boxSpan.style.width = '15px';
+                if (item === null || item === void 0 ? void 0 : item.lineWidth) {
+                    boxSpan.setAttribute("class", 'point');
+                }
+                if ((item === null || item === void 0 ? void 0 : item.pointStyle) === 'circle') {
+                    boxSpan.style.borderRadius = '20px';
+                }
                 // Text
                 var textContainer = document.createElement('p');
                 textContainer.style.color = item.fontColor;
@@ -260,6 +265,19 @@ var BarLineComponent = function (props) {
             height: height,
             position: 'relative',
             marginBottom: '80px',
+            '.point': {
+                position: "relative",
+                '&::after': {
+                    content: '""',
+                    position: 'absolute',
+                    top: '50%',
+                    left: '-5px', /* Adjust as needed */
+                    right: '-5px', /* Adjust as needed */
+                    height: '2px', /* Thickness of the line */
+                    backgroundColor: 'inherit',
+                    transform: 'translateY(-50%)'
+                }
+            },
         }, children: [(0, jsx_runtime_1.jsx)(Chart, { data: chartData, type: type, options: (0, Helpers_1.updateObjectFields)(options, optionCustom), plugins: [htmlLegendPlugin] }), (0, jsx_runtime_1.jsx)(material_1.Box, { id: "legend-container", sx: {
                     marginTop: '35px',
                     display: 'flex',

package/lib/AWING/Chart/PieComponent.d.ts

@@ -1,11 +1,10 @@
-import { ChartData, ChartOptions, ChartType } from 'chart.js';
+import { ChartOptions, ChartType } from 'chart.js';
 import { ChartProps, TypedChartComponent } from 'react-chartjs-2/dist/types';
 export interface IPieComponent extends ChartProps {
-    dataConvert?: ChartData<ChartType>;
     widthChart?: number;
     heightChart?: number;
     optionCustom?: ChartOptions<ChartType>;
-    chart: TypedChartComponent<"pie">;
+    chart: TypedChartComponent<'pie'>;
 }
-declare const PieComponent: ({ chart, data, dataConvert, widthChart, heightChart, optionCustom, options, }: IPieComponent) => import("react/jsx-runtime").JSX.Element;
+declare const PieComponent: ({ chart, data, widthChart, heightChart, optionCustom, options, }: IPieComponent) => import("react/jsx-runtime").JSX.Element;
 export default PieComponent;

package/lib/AWING/Chart/PieComponent.js

@@ -11,17 +11,7 @@ var chartColorDefaults = [
     '#4a536b',
 ];
 var PieComponent = function (_a) {
-    var chart = _a.chart, data = _a.data, _b = _a.dataConvert, dataConvert = _b === void 0 ? {
-        labels: [],
-        datasets: [
-            {
-                data: [],
-                backgroundColor: chartColorDefaults,
-                borderColor: 'white',
-                borderWidth: 2,
-            },
-        ],
-    } : _b, _c = _a.widthChart, widthChart = _c === void 0 ? 300 : _c, _d = _a.heightChart, heightChart = _d === void 0 ? 300 : _d, _e = _a.optionCustom, optionCustom = _e === void 0 ? {} : _e, _f = _a.options, options = _f === void 0 ? {
+    var chart = _a.chart, data = _a.data, _b = _a.widthChart, widthChart = _b === void 0 ? 300 : _b, _c = _a.heightChart, heightChart = _c === void 0 ? 300 : _c, _d = _a.optionCustom, optionCustom = _d === void 0 ? {} : _d, _e = _a.options, options = _e === void 0 ? {
         responsive: true,
         elements: {
             arc: {
@@ -38,7 +28,7 @@ var PieComponent = function (_a) {
                     pointStyle: 'circle',
                     font: {
                         size: 14,
-                        family: "'AW-Roboto', sans-serif",
+                        family: "'Roboto', sans-serif",
                         lineHeight: 1.5,
                     },
                 },
@@ -54,12 +44,11 @@ var PieComponent = function (_a) {
                 bodySpacing: 8,
                 bodyFont: {
                     size: 14,
-                    family: "'AW-Roboto', sans-serif",
+                    family: "'Roboto', sans-serif",
                     lineHeight: 1.5,
                 },
                 callbacks: {
                     label: function (tooltipItem) {
-                        console.log('tooltipItem', tooltipItem);
                         return (' ' +
                             (tooltipItem === null || tooltipItem === void 0 ? void 0 : tooltipItem.label) +
                             ': ' +
@@ -71,8 +60,19 @@ var PieComponent = function (_a) {
                 },
             },
         },
-    } : _f;
+    } : _e;
     var Pie = chart;
-    return ((0, jsx_runtime_1.jsx)(Pie, { data: (0, Helpers_1.updateObjectFields)(data, dataConvert), width: widthChart, height: heightChart, options: (0, Helpers_1.updateObjectFields)(options, optionCustom) }));
+    var dataConvert = {
+        labels: [],
+        datasets: [
+            {
+                data: [],
+                backgroundColor: chartColorDefaults.slice(0, data.datasets[0].data.length),
+                borderColor: 'white',
+                borderWidth: 2,
+            },
+        ],
+    };
+    return ((0, jsx_runtime_1.jsx)(Pie, { data: (0, Helpers_1.updateObjectFields)(dataConvert, data), width: widthChart, height: heightChart, options: (0, Helpers_1.updateObjectFields)(options, optionCustom) }));
 };
 exports.default = PieComponent;

package/lib/AWING/Chart/Styles.js

@@ -46,32 +46,67 @@ var styledLineFill = function (defaultStyle, variant) {
     }
 };
 exports.styledLineFill = styledLineFill;
+// Click: 004b95
+// Impression: d10717
+// Engagement: 0082ed
+// ER: 8bc1f7
+// CTR: 518be9
+// Các đường phụ 
+// ef9234, 5752d1, 38812f
 function getColorByVariant(variant) {
-    switch (variant) {
+    switch (String(variant).toLowerCase()) {
         case '0':
-            return '#0055b8';
+        case 'impression':
+        case 'view':
+            return '#d10717';
         case '1':
-            return '#dd040c';
+        case 'click':
+        case 'authenticationsuccess':
+            return '#004b95';
         case '2':
-            return 'green';
+        case 'engagement':
+        case 'authentication':
+            return '#0082ed';
         case '3':
-            return 'violet';
+        case 'spot':
+        case 'er':
+            return '#8bc1f7';
         case '4':
-            return 'black';
+        case 'ctr':
+        case 'ar':
+            return '#518be9';
         case '5':
-            return 'yellow';
+        case 'other':
+            return '#ef9234';
         case '6':
-            return 'indigo';
+        case 'other1':
+            return '#5752d1';
         case '7':
-            return 'orange';
-        case '8':
-            return 'cyan';
-        case '9':
-            return 'lime';
-        case undefined:
-            return '#80b0ff';
+        case 'other2':
+            return '#38812f';
+        // case '0':
+        //     return '#0055b8'
+        // case '1':
+        //     return '#dd040c'
+        // case '2':
+        //     return 'green'
+        // case '3':
+        //     return 'violet'
+        // case '4':
+        //     return 'black'
+        // case '5':
+        //     return 'yellow'
+        // case '6':
+        //     return 'indigo'
+        // case '7':
+        //     return 'orange'
+        // case '8':
+        //     return 'cyan'
+        // case '9':
+        // return 'lime'
         default:
-            return '#' + Math.floor(Math.random() * 16777216).toString(16);
+            return '#38812f';
+        // return '#' + Math.floor(Math.random() * 16777216).toString(16)
     }
 }
 var getStyle = function (defaultStyle, type, color) {