@syncfusion/ej2-maps 25.2.4 → 26.1.35

package/src/maps/model/base.js

@@ -88,7 +88,7 @@ var Font = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate([
-        Property('12px')
+        Property(null)
     ], Font.prototype, "size", void 0);
     __decorate([
         Property(null)
@@ -132,7 +132,7 @@ var ZoomToolbarButtonSettings = /** @class */ (function (_super) {
         Property(null)
     ], ZoomToolbarButtonSettings.prototype, "borderColor", void 0);
     __decorate([
-        Property(30)
+        Property(null)
     ], ZoomToolbarButtonSettings.prototype, "radius", void 0);
     __decorate([
         Property(null)
@@ -289,7 +289,7 @@ var TooltipSettings = /** @class */ (function (_super) {
         Property('')
     ], TooltipSettings.prototype, "fill", void 0);
     __decorate([
-        Complex({ color: 'transparent', width: 1 }, Border)
+        Complex({ color: null, width: 1 }, Border)
     ], TooltipSettings.prototype, "border", void 0);
     __decorate([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
@@ -300,6 +300,9 @@ var TooltipSettings = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], TooltipSettings.prototype, "valuePath", void 0);
+    __decorate([
+        Property(2000)
+    ], TooltipSettings.prototype, "duration", void 0);
     return TooltipSettings;
 }(ChildProperty));
 export { TooltipSettings };
@@ -318,11 +321,14 @@ var PolygonTooltipSettings = /** @class */ (function (_super) {
         Property('')
     ], PolygonTooltipSettings.prototype, "fill", void 0);
     __decorate([
-        Complex({ color: 'transparent', width: 1 }, Border)
+        Complex({ color: null, width: 1 }, Border)
     ], PolygonTooltipSettings.prototype, "border", void 0);
     __decorate([
         Complex({ fontFamily: null, size: null, fontWeight: null }, Font)
     ], PolygonTooltipSettings.prototype, "textStyle", void 0);
+    __decorate([
+        Property(2000)
+    ], PolygonTooltipSettings.prototype, "duration", void 0);
     return PolygonTooltipSettings;
 }(ChildProperty));
 export { PolygonTooltipSettings };
@@ -786,27 +792,6 @@ var ZoomSettings = /** @class */ (function (_super) {
     __decorate([
         Property(true)
     ], ZoomSettings.prototype, "enableSelectionZooming", void 0);
-    __decorate([
-        Property('Horizontal')
-    ], ZoomSettings.prototype, "toolBarOrientation", void 0);
-    __decorate([
-        Property(null)
-    ], ZoomSettings.prototype, "color", void 0);
-    __decorate([
-        Property(null)
-    ], ZoomSettings.prototype, "highlightColor", void 0);
-    __decorate([
-        Property(null)
-    ], ZoomSettings.prototype, "selectionColor", void 0);
-    __decorate([
-        Property('Far')
-    ], ZoomSettings.prototype, "horizontalAlignment", void 0);
-    __decorate([
-        Property('Near')
-    ], ZoomSettings.prototype, "verticalAlignment", void 0);
-    __decorate([
-        Property(['ZoomIn', 'ZoomOut', 'Reset'])
-    ], ZoomSettings.prototype, "toolbars", void 0);
     __decorate([
         Property(true)
     ], ZoomSettings.prototype, "mouseWheelZoom", void 0);
@@ -920,7 +905,7 @@ var LegendSettings = /** @class */ (function (_super) {
         Property(10)
     ], LegendSettings.prototype, "shapePadding", void 0);
     __decorate([
-        Complex({ color: '#000000', width: 0 }, Border)
+        Complex({ color: null, width: 0 }, Border)
     ], LegendSettings.prototype, "border", void 0);
     __decorate([
         Complex({ color: '#000000', width: 0 }, Border)
@@ -1032,7 +1017,7 @@ var ShapeSettings = /** @class */ (function (_super) {
         Property(5)
     ], ShapeSettings.prototype, "circleRadius", void 0);
     __decorate([
-        Complex({ width: null, color: '#000000' }, Border)
+        Complex({ width: null, color: null }, Border)
     ], ShapeSettings.prototype, "border", void 0);
     __decorate([
         Property('')
@@ -1155,7 +1140,7 @@ export { MarkerBase };
  */
 var MarkerSettings = /** @class */ (function (_super) {
     __extends(MarkerSettings, _super);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function MarkerSettings(parent, propName, defaultValue, isArray) {
         return _super.call(this, parent, propName, defaultValue, isArray) || this;
     }
@@ -1193,18 +1178,6 @@ var LayerSettings = /** @class */ (function (_super) {
     __decorate([
         Property('Geographic')
     ], LayerSettings.prototype, "geometryType", void 0);
-    __decorate([
-        Property('Aerial')
-    ], LayerSettings.prototype, "bingMapType", void 0);
-    __decorate([
-        Property('RoadMap')
-    ], LayerSettings.prototype, "staticMapType", void 0);
-    __decorate([
-        Property('')
-    ], LayerSettings.prototype, "key", void 0);
-    __decorate([
-        Property('Geometry')
-    ], LayerSettings.prototype, "layerType", void 0);
     __decorate([
         Property('')
     ], LayerSettings.prototype, "urlTemplate", void 0);

package/src/maps/model/constants.d.ts

@@ -203,21 +203,17 @@ export declare const zoomComplete: string;
 export declare const itemHighlight: string;
 /**
  * Specifies the maps before print event name.
- *
  */
 export declare const beforePrint: string;
 /**
  * Specifies the maps zoom in event name.
- *
  */
 export declare const zoomIn: string;
 /**
  * Specifies the maps zoom out event name.
- *
  */
 export declare const zoomOut: string;
 /**
  * Specifies the maps pan event name.
- *
  */
 export declare const pan: string;

package/src/maps/model/constants.js

@@ -203,21 +203,17 @@ export var zoomComplete = 'zoomComplete';
 export var itemHighlight = 'itemHighlight';
 /**
  * Specifies the maps before print event name.
- *
  */
 export var beforePrint = 'beforePrint';
 /**
  * Specifies the maps zoom in event name.
- *
  */
 export var zoomIn = 'zoomIn';
 /**
  * Specifies the maps zoom out event name.
- *
  */
 export var zoomOut = 'zoomOut';
 /**
  * Specifies the maps pan event name.
- *
  */
 export var pan = 'pan';

package/src/maps/model/export-image.js

@@ -41,10 +41,13 @@ var ImageExport = /** @class */ (function () {
             var svgObject = getElementByID(maps.element.id + '_svg').cloneNode(true);
             var backgroundElement = svgObject.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
             }
             if (!maps.isTileMap) {

package/src/maps/model/export-pdf.js

@@ -43,10 +43,13 @@ var PdfExport = /** @class */ (function () {
             var exportElement = maps.svgObject.cloneNode(true);
             var backgroundElement = exportElement.childNodes[0];
             var backgroundColor = backgroundElement.getAttribute('fill');
-            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
             }
-            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+            else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                 exportElement.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
             }
             var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :

package/src/maps/model/interface.d.ts

@@ -65,7 +65,8 @@ export interface ILoadedEventArgs extends IMinMaxLatitudeLongitude, IMapsEventAr
  * Specifies the event argument of the load event in maps.
  */
 export interface ILoadEventArgs extends IMapsEventArgs {
-    /** Defines the current maps instance.
+    /**
+     * Defines the current maps instance.
      *
 
      */
@@ -834,12 +835,24 @@ export interface IThemeStyle {
     zoomSelectionColor?: string;
     /** Specifies the color for the shapes in the maps. */
     shapeFill?: string;
+    /** Specifies the color of the border of the shapes in the maps. */
+    shapeBorderColor?: string;
     /** Specifies the color by using rectangle zoom fill color in maps. */
     rectangleZoomFillColor?: string;
     /** Specifies the color by using rectangle zoom fill color in maps. */
     rectangleZoomFillOpacity?: number;
     /** Specifies the color by using rectangle zoom fill color in maps. */
     rectangleZoomBorderColor?: string;
+    /** Specifies the color of the legend border in maps. */
+    legendBorderColor?: string;
+    /** Specifies the width of the legend border in maps. */
+    legendBorderWidth?: number;
+    /** Specifies the border color of the zoom toolbar buttons in maps. */
+    zoomBorderColor?: string;
+    /** Specifies the border color of the tooltip in maps. */
+    tooltipBorderColor?: string;
+    /** Specifies the radius of the zoom buttons in maps. */
+    zoomButtonRadius: number;
 }
 /**
  * Defines the template for the marker.

package/src/maps/model/interface.js

@@ -1 +0,0 @@
-

package/src/maps/model/print.d.ts

@@ -6,13 +6,13 @@ import { Maps } from '../../index';
  */
 export declare class Print {
     /**
-     * Constructor for Maps
+     * Constructor for Maps.
      *
      * @param {Maps} control - Specifies the instance of the Maps
      */
     constructor(control: Maps);
     /**
-     * To print the Maps
+     * To print the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the element of the Maps
@@ -21,7 +21,7 @@ export declare class Print {
      */
     print(maps: Maps, elements?: string[] | string | Element): void;
     /**
-     * To get the html string of the Maps
+     * To get the html string of the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element

package/src/maps/model/print.js

@@ -8,7 +8,7 @@ import { beforePrint } from '../model/constants';
  */
 var Print = /** @class */ (function () {
     /**
-     * Constructor for Maps
+     * Constructor for Maps.
      *
      * @param {Maps} control - Specifies the instance of the Maps
      */
@@ -16,7 +16,7 @@ var Print = /** @class */ (function () {
     function Print(control) {
     }
     /**
-     * To print the Maps
+     * To print the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the element of the Maps
@@ -38,7 +38,7 @@ var Print = /** @class */ (function () {
         });
     };
     /**
-     * To get the html string of the Maps
+     * To get the html string of the Maps.
      *
      * @param {Maps} maps -Specifies the Maps instance.
      * @param {string[] | string | Element} elements - Specifies the html element
@@ -54,10 +54,13 @@ var Print = /** @class */ (function () {
             backgroundElement = backgroundElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 var backgroundColor = backgroundElement.getAttribute('fill');
-                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
-                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
+                    maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
+                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     backgroundElement.setAttribute('fill', 'rgba(0, 0, 0, 1)');
                 }
             }

package/src/maps/model/theme.d.ts

@@ -89,7 +89,7 @@ export declare namespace DarkTheme {
     const legendLabelFont: IFontMapping;
 }
 /**
- * Method to get the theme style
+ * Method to get the theme style.
  *
  * @param {MapsTheme} theme - Specifies the theme.
  * @returns {IThemeStyle} - Returns the theme style.

package/src/maps/model/theme.js

@@ -46,7 +46,7 @@ export var Theme;
     };
     /** @private */
     Theme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -199,6 +199,15 @@ export function getShapeColor(theme) {
             themePalette = ['#4EAAFF', '#FA4EAB', '#FFF500', '#17EA58', '#38FFE7',
                 '#FF9E45', '#B3F32F', '#B93CE4', '#FC5664', '#9B55FF'];
             break;
+        case 'fluent2':
+            themePalette = ['#6200EE', '#09AF74', '#0076E5', '#CB3587', '#E7910F',
+                '#0364DE', '#66CD15', '#F3A93C', '#107C10', '#C19C00'];
+            break;
+        case 'fluent2dark':
+        case 'fluent2highcontrast':
+            themePalette = ['#9BB449', '#2A72D5', '#43B786', '#3F579A', '#584EC6',
+                '#E85F9C', '#6E7A89', '#EA6266', '#0B6A0B', '#C19C00'];
+            break;
         default:
             themePalette = ['#B5E485', '#7BC1E8', '#DF819C', '#EC9B79', '#78D0D3',
                 '#D6D572', '#9178E3', '#A1E5B4', '#87A4B4', '#E4C16C'];
@@ -254,7 +263,7 @@ export var HighContrastTheme;
     };
     /** @private */
     HighContrastTheme.dataLabelFont = {
-        size: '12px',
+        size: null,
         fontWeight: 'Medium',
         color: '#000000',
         fontStyle: 'Medium',
@@ -309,7 +318,7 @@ export var DarkTheme;
     };
 })(DarkTheme || (DarkTheme = {}));
 /**
- * Method to get the theme style
+ * Method to get the theme style.
  *
  * @param {MapsTheme} theme - Specifies the theme.
  * @returns {IThemeStyle} - Returns the theme style.
@@ -348,13 +357,19 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'highcontrast':
@@ -372,14 +387,20 @@ export function getThemeStyle(theme) {
                 zoomFillColor: '#FFFFFF',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap4':
@@ -405,9 +426,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'tailwind':
@@ -433,9 +459,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: '500',
                 zoomSelectionColor: '#374151',
                 shapeFill: '#E5E7EB',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'tailwinddark':
@@ -461,9 +492,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: '500',
                 zoomSelectionColor: '#F3F4F6',
                 shapeFill: '#374151',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap5':
@@ -489,9 +525,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#343A40',
                 shapeFill: '#E9ECEF',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'bootstrap5dark':
@@ -517,9 +558,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: 'normal',
                 zoomSelectionColor: '#DEE2E6',
                 shapeFill: '#495057',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'fluent':
@@ -545,9 +591,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#323130',
                 shapeFill: '#F3F2F1',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'fluentdark':
@@ -573,9 +624,14 @@ export function getThemeStyle(theme) {
                 titleFontWeight: '600',
                 zoomSelectionColor: '#F3F2F1',
                 shapeFill: '#252423',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'material3':
@@ -602,9 +658,14 @@ export function getThemeStyle(theme) {
                 fontWeight: '400',
                 zoomSelectionColor: '#49454E',
                 shapeFill: '#E7E0EC',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#6750A4',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: '#6750A4'
+                rectangleZoomBorderColor: '#6750A4',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
         case 'material3dark':
@@ -631,9 +692,117 @@ export function getThemeStyle(theme) {
                 fontWeight: '400',
                 zoomSelectionColor: '#E6E1E5',
                 shapeFill: '#49454F',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#D0BCFF',
                 rectangleZoomFillOpacity: 0.24,
-                rectangleZoomBorderColor: '#D0BCFF'
+                rectangleZoomBorderColor: '#D0BCFF',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
+            };
+            break;
+        case 'fluent2':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#242424',
+                subTitleFontColor: '#242424',
+                legendTitleFontColor: '#242424',
+                legendTextColor: '#242424',
+                dataLabelFontColor: '#242424',
+                tooltipFontColor: '#242424',
+                tooltipFillColor: '#FFFFFF',
+                zoomFillColor: '#D1D1D1',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#242424',
+                shapeFill: '#E6E6E6',
+                shapeBorderColor: '#EBEBEB',
+                rectangleZoomFillColor: '#B4D6FA',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#0F6CBD',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'fluent2dark':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFillColor: '#292929',
+                zoomFillColor: '#666',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#FFFFFF',
+                shapeFill: '#333333',
+                shapeBorderColor: '#000000',
+                rectangleZoomFillColor: '#0E4775',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#0E4775',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 32
+            };
+            break;
+        case 'fluent2highcontrast':
+            style = {
+                backgroundColor: 'transparent',
+                areaBackgroundColor: 'transparent',
+                titleFontColor: '#FFFFFF',
+                subTitleFontColor: '#FFFFFF',
+                legendTitleFontColor: '#FFFFFF',
+                legendTextColor: '#FFFFFF',
+                dataLabelFontColor: '#FFFFFF',
+                tooltipFontColor: '#FFFFFF',
+                tooltipFillColor: '#000000',
+                zoomFillColor: '#3FF23F',
+                fontFamily: 'Segoe UI',
+                fontSize: '10px',
+                fontWeight: '400',
+                titleFontSize: '14px',
+                subTitleFontSize: '12px',
+                legendFontSize: '12px',
+                tooltipFillOpacity: 1,
+                tooltipTextOpacity: 1,
+                labelFontFamily: 'Segoe UI',
+                titleFontWeight: '600',
+                zoomSelectionColor: '#FFFFFF',
+                zoomBorderColor: '#FFFFFF',
+                shapeFill: '#292827',
+                shapeBorderColor: '#292827',
+                rectangleZoomFillColor: '#1AEBFF',
+                rectangleZoomFillOpacity: 0.25,
+                rectangleZoomBorderColor: '#1AEBFF',
+                legendBorderColor: '#FFFFFF',
+                legendBorderWidth: 1,
+                tooltipBorderColor: '#FFF',
+                zoomButtonRadius: 32
             };
             break;
         default:
@@ -652,13 +821,19 @@ export function getThemeStyle(theme) {
                 labelFontFamily: 'Roboto, Noto, Sans-serif',
                 fontFamily: 'Roboto, Noto, Sans-serif',
                 fontSize: '12px',
+                legendFontSize: '12px',
                 fontWeight: 'Medium',
                 titleFontWeight: 'Medium',
                 zoomSelectionColor: '#e61576',
                 shapeFill: '#A6A6A6',
+                shapeBorderColor: '#000000',
                 rectangleZoomFillColor: '#d3d3d3',
                 rectangleZoomFillOpacity: 0.5,
-                rectangleZoomBorderColor: '#009900'
+                rectangleZoomBorderColor: '#009900',
+                legendBorderColor: '#000000',
+                legendBorderWidth: 0,
+                tooltipBorderColor: 'transparent',
+                zoomButtonRadius: 30
             };
             break;
     }