Se arreglan las traducciones del graficador 3D

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.html

@@ -4,18 +4,28 @@
       <button
         type="button"
         class="btn btn-secondary"
-				style="min-width: 70px;"
-				(click)=changeZoomType()>
+        style="min-width: 70px"
+        (click)="changeZoomType()"
+      >
         {{ getZoom3DTypeName(graphProps.zoomType) }}
       </button>
-			<div class="btn-group" ngbDropdown role="group" aria-label="Button group with nested dropdown">
-				<button class="btn btn-secondary dropdown-toggle-split" ngbDropdownToggle></button>
+      <div
+        class="btn-group"
+        ngbDropdown
+        role="group"
+        aria-label="Button group with nested dropdown"
+      >
+        <button
+          class="btn btn-secondary dropdown-toggle-split"
+          ngbDropdownToggle
+        ></button>
         <div class="dropdown-menu" ngbDropdownMenu>
           <button
             *ngFor="let type of [1, 2, 3, 4]"
             class="dropdown-item"
             [disabled]="type === graphProps.zoomType"
-						(click)=changeZoomType(type)>
+            (click)="changeZoomType(type)"
+          >
             {{ getZoom3DTypeName(type) }}
           </button>
         </div>
@@ -23,29 +33,32 @@
     </div>
 
     <button
-			ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} +' 
+      ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} +"
       triggers="mouseenter:mouseleave"
       data-placement="bottom"
       class="btn btn-sm btn-secondary"
-			(click)=zoomIn() >
+      (click)="zoomIn()"
+    >
       <i class="fa fa-plus"></i>
     </button>
 
     <button
-			ngbPopover='{{ "i18n.action.zoom" | translate | titleCase}} -'  
+      ngbPopover="{{ 'i18n.action.zoom' | translate | titleCase }} -"
       triggers="mouseenter:mouseleave"
       data-placement="bottom"
       class="btn btn-sm btn-secondary"
-			(click)=zoomOut() >
+      (click)="zoomOut()"
+    >
       <i class="fa fa-minus"></i>
     </button>
 
     <button
-			ngbPopover='{{ "i18n.action.center" | translate | titleCase}}'  
+      ngbPopover="{{ 'i18n.action.center' | translate | titleCase }}"
       triggers="mouseenter:mouseleave"
       data-placement="bottom"
       class="btn btn-sm btn-secondary"
-			(click)=center() >
+      (click)="center()"
+    >
       <i class="fa fa-arrows"></i>
     </button>
 
@@ -53,10 +66,11 @@
       closePopoverDirective
       class="btn btn-sm btn-secondary"
       placement="bottom"
-			[ngbPopover]=popoverAxesSize
+      [ngbPopover]="popoverAxesSize"
       popoverTitle="Rango de ejes"
       #popover="ngbPopover"
-			tiggers="click">
+      tiggers="click"
+    >
       <i class="fa fa-arrows-h"></i>
     </button>
     <ng-template #popoverAxesSize>
@@ -70,9 +84,7 @@
             [min]="-99"
             (change)="onChangeAxesSize('xMin', $event)"
           />
-					<div class="less-than">
-						<span>&#8804;</span>x<span>&#8804;</span>
-					</div>
+          <div class="less-than"><span>&#8804;</span>x<span>&#8804;</span></div>
 
           <input
             type="number"
@@ -93,9 +105,7 @@
             [min]="-99"
             (change)="onChangeAxesSize('yMin', $event)"
           />
-					<div class="less-than">
-						<span>&#8804;</span>y<span>&#8804;</span>
-					</div>
+          <div class="less-than"><span>&#8804;</span>y<span>&#8804;</span></div>
 
           <input
             type="number"
@@ -116,9 +126,7 @@
             [min]="-99"
             (change)="onChangeAxesSize('zMin', $event)"
           />
-					<div class="less-than">
-						<span>&#8804;</span>z<span>&#8804;</span>
-					</div>
+          <div class="less-than"><span>&#8804;</span>z<span>&#8804;</span></div>
 
           <input
             type="number"
@@ -132,36 +140,40 @@
       </div>
     </ng-template>
 
-
     <button
-			ngbPopover='{{ "i18n.action.delete" | translate | titleCase }}'  
+      ngbPopover="{{ 'i18n.action.delete' | translate | titleCase }}"
       triggers="mouseenter:mouseleave"
       data-placement="bottom"
       class="btn btn-sm btn-secondary"
-			(click)=clear() >
+      (click)="clear()"
+    >
       <i class="fa fa-trash"></i>
     </button>
 
     <button
-			[ngbPopover]=popoverConfig
+      [ngbPopover]="popoverConfig"
       closePopoverDirective
       placement="bottom"
       tiggers="click"
       class="btn btn-sm btn-secondary"
-			popoverTitle='{{ "i18n.object.settings" | translate | titleCase }}'
+      popoverTitle="{{ 'i18n.object.settings' | translate | titleCase }}"
     >
       <i class="fa fa-gear"></i>
     </button>
 
     <ng-template #popoverConfig>
-			<div style="width: 140px;">
+      <div style="width: 140px">
         <label class="d-block">
-					<input type="checkbox"[checked]=graphProps.showAxes (click)="changeAxesVisibility()">
+          <input
+            type="checkbox"
+            [checked]="graphProps.showAxes"
+            (click)="changeAxesVisibility()"
+          />
           {{ "i18n.object.grid" | translate | titleCase }}
         </label>
 
-				<div style="display: flex;">
-					<span style="margin-right: 8px; align-self: center;">
+        <div style="display: flex">
+          <span style="margin-right: 8px; align-self: center">
             {{ "i18n.object.quality" | translate | titleCase }}:
           </span>
 
@@ -172,13 +184,11 @@
             [max]="99"
             [min]="2"
             (change)="onChangeQuality()"
-						style="width: 55px;"
+            style="width: 55px"
           />
         </div>
       </div>
     </ng-template>
-
-	
   </div>
 
   <div class="card-block contenedor-canvas">
@@ -193,8 +203,6 @@
     >
     </animation-control>
 
-		<div #graph3DElement style="width: 100%; height: 100%;">
+    <div #graph3DElement style="width: 100%; height: 100%"></div>
   </div>
 </div>
-  
-</div>

Frontend Angular 4/src/app/layout/plotter/graph3D/graph3D.component.ts

@@ -33,6 +33,16 @@ export class Graph3DComponent implements AfterViewInit {
   private translateService: any;
   private titlecasePipe: any;
 
+  /**
+   * Diccionario de traducciones para los tipos de Zoom.
+   */
+  private translationTypes = {
+    [Zoom3DType.Normal]: "i18n.object.normal",
+    [Zoom3DType.XAxis]: "i18n.object.axis",
+    [Zoom3DType.YAxis]: "i18n.object.axis",
+    [Zoom3DType.ZAxis]: "i18n.object.axis",
+  };
+
   @ViewChild("graph3DElement", { static: true })
   private graph3DRef: ElementRef;
 
@@ -198,29 +208,20 @@ export class Graph3DComponent implements AfterViewInit {
   };
 
   public getZoom3DTypeName = (type: Zoom3DType) => {
-    switch (type) {
-      case Zoom3DType.Normal:
-        return this.titlecasePipe.transform(
-          this.translateService.get("i18n.object.normal").value
-        );
-      case Zoom3DType.XAxis:
-        return (
-          this.titlecasePipe.transform(
-            this.translateService.get("i18n.object.axis").value
-          ) + " x"
-        );
-      case Zoom3DType.YAxis:
-        return (
-          this.titlecasePipe.transform(
-            this.translateService.get("i18n.object.axis").value
-          ) + " y"
-        );
-      case Zoom3DType.ZAxis:
-        return (
-          this.titlecasePipe.transform(
-            this.translateService.get("i18n.object.axis").value
-          ) + " z"
-        );
+    let translation: string;
+
+    this.translateService.get(this.translationTypes[type]).subscribe((res) => {
+      translation = res;
+    });
+
+    if (type == 2) {
+      translation += " x";
+    } else if (type == 3) {
+      translation += " y";
+    } else if (type == 4) {
+      translation += " z";
     }
+
+    return this.titlecasePipe.transform(translation);
   };
 }