@if (!isViewMode()) {
    <div cdkDrag #container oitcResizable [aspectRatio]="true" class="map-element-container"
         (cdkDragEnded)="onDragEnd($event)"
         (cdkDragMoved)="onDragMove($event)"
         (resizeStop)="onResizeStop($event, type)"
         cdkDragBoundary=".map-canvas">
        @if (allowView && hasEnoughData) {
            <div cdkDragHandle class="bg-light" [style.width.px]="width">
                <div [id]="'mapgraph-' + item()!.id" [style.height.px]="height" style="padding:0; position:relative;"
                     echarts [options]="chartOption"
                     [theme]="theme"
                     (chartInit)="onChartInit($event)">
                </div>
            </div>
        }
        @if (!hasEnoughData) {
            <div cdkDragHandle>
                <c-alert [color]="'info'">
                    <fa-icon [icon]="['fas', 'chart-area']"></fa-icon>
                    {{ notEnoughDataString }}
                </c-alert>
            </div>
        }
    </div>
    @if (!isViewMode()) {
        <p-contextMenu [target]="container" [model]="contextMenuItems"
                       appendTo="body"></p-contextMenu>
    }
} @else {
    <div #container class="map-element-container cursor-normal" [ngClass]="{'cursor-pointer': enablePointerCursor()}">
        @if (allowView && hasEnoughData) {
            <div class="bg-light" [style.width.px]="width">
                <div [id]="'mapgraph-' + item()!.id" [style.height.px]="height" style="padding:0; position:relative;"
                     echarts [options]="chartOption"
                     [theme]="theme"
                     (chartInit)="onChartInit($event)">
                </div>
            </div>
        }
        @if (!hasEnoughData) {
            <div>
                <c-alert [color]="'info'">
                    <fa-icon [icon]="['fas', 'chart-area']"></fa-icon>
                    {{ notEnoughDataString }}
                </c-alert>
            </div>
        }
    </div>
}