@mxtommy/kip 1.2.3 → 1.3.0

package/src/app/svg-autopilot/svg-autopilot.component.spec.ts

@@ -1,25 +1,25 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-
-import { SvgAutopilotComponent } from './svg-autopilot.component';
-
-describe('SvgAutopilotComponent', () => {
-  let component: SvgAutopilotComponent;
-  let fixture: ComponentFixture<SvgAutopilotComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SvgAutopilotComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SvgAutopilotComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { SvgAutopilotComponent } from './svg-autopilot.component';
+
+describe('SvgAutopilotComponent', () => {
+  let component: SvgAutopilotComponent;
+  let fixture: ComponentFixture<SvgAutopilotComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SvgAutopilotComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SvgAutopilotComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/svg-autopilot/svg-autopilot.component.ts

@@ -1,174 +1,174 @@
-import { Component, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core';
-import { trigger, state, style, animate, transition } from '@angular/animations';
-
-
-@Component({
-  selector: 'app-svg-autopilot',
-  templateUrl: './svg-autopilot.component.html',
-  // uses svg-wind SCSS styles
-  animations: [
-    trigger('fadeInOut', [
-      state('connected', style({
-        opacity: 0,
-      })),
-      state('disconnected', style({
-        opacity: 1,
-      })),
-      transition('connected => disconnected', [
-        animate('.3s')
-      ]),
-      transition('disconnected => connected', [
-        animate('1s')
-      ]),
-    ]),
-  ]
-})
-export class SvgAutopilotComponent {
-  // AP screen
-  @ViewChild('apStencil', {static: true, read: ElementRef}) ApStencil: ElementRef;
-  @ViewChild('countDown', {static: true, read: ElementRef}) countDown: ElementRef;
-
-  // SVG
-  @ViewChild('compassAnimate', {static: true, read: ElementRef}) compassAnimate: ElementRef;
-  @ViewChild('appWindAnimate', {static: true, read: ElementRef}) appWindAnimate: ElementRef;
-  @ViewChild('rudderPrtAnimate', {static: true, read: ElementRef}) rudderPrtAnimate: ElementRef;
-  @ViewChild('rudderStbAnimate', {static: true, read: ElementRef}) rudderStbAnimate: ElementRef;
-
-  @Input('compassHeading') compassHeading: number;
-  @Input('appWindAngle') appWindAngle: number;
-  @Input('rudderAngle') rudderAngle: number;
-  @Input('apState') apState: string;
-  @Input('apTargetAppWindAngle') apTargetAppWindAngle: string;
-  @Input('isApConnected') isApConnected: boolean;
-
-  constructor() { }
-
-  // compass
-  oldCompassRotate: number = 0;
-  newCompassRotate: number = 0;
-  headingValue: string ="0";
-
-  // Apparent wind
-  oldAppWindAngle: string = "0";
-  newAppWindAngle: string = "0";
-  oldAppWindRotateAngle: string = "0";
-  newAppWindRotateAngle: string = "0";
-
-  // rudder
-  oldRudderPrtAngle: number = 0;
-  newRudderPrtAngle: number = 0;
-  oldRudderStbAngle: number = 0;
-  newRudderStbAngle: number = 0;
-
-  activityIconVisibility: string = "hidden;";
-  errorIconVisibility: string = "hidden";
-  msgStencilVisibility: string = "hidden";
-  msgStencilInnerHTML: string = "Empty Message Stencil";
-  errorStencilVisibility: string = "hidden";
-  errorStencilInnerText: string = "Empty Error Stencil";
-  messageVisibility: string = "hidden";
-  messageInnerText: string = "";
-
-
-  ngOnChanges(changes: SimpleChanges) {
-
-    //heading
-    if (changes.compassHeading) {
-      if (! changes.compassHeading.firstChange) {
-        this.oldCompassRotate = this.newCompassRotate;
-        this.newCompassRotate = changes.compassHeading.currentValue;
-        this.headingValue = this.newCompassRotate.toFixed(0);
-        this.compassAnimate.nativeElement.beginElement();
-      }
-    }
-
-    //AP State
-    if (changes.apState) {
-      if (! changes.apState.firstChange) {
-        this.apState = this.apState.toUpperCase();
-      }
-    }
-
-    //AP Target Apparent Wind Angle
-    if (changes.apTargetAppWindAngle) {
-      if (! changes.apTargetAppWindAngle.firstChange) {
-        this.apTargetAppWindAngle = changes.apTargetAppWindAngle.currentValue.toFixed(0);
-      }
-    }
-
-    //appWindAngle
-    if (changes.appWindAngle) {
-      if (! changes.appWindAngle.firstChange) {
-        this.oldAppWindAngle = this.newAppWindAngle;
-        this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-
-        let oldAngle = Number(this.oldAppWindAngle)
-        let newAngle = Number(this.newAppWindAngle);
-        let diff = oldAngle - newAngle;
-
-        // only update if on DOM and value rounded changed
-        if (this.appWindAnimate && (diff != 0)) {
-          // Special cases to smooth out passing between 359 to/from 0
-          // if more than half the circle, it could need to go over the 359 / 0 values
-          if ( Math.abs(diff) > 180 ) {
-            // In what direction are we moving?
-            if (Math.sign(diff) == 1) {
-              if (oldAngle == 359) {
-                // special cases
-                this.oldAppWindAngle = "0";
-                this.appWindAnimate.nativeElement.beginElement();
-              } else {
-                this.newAppWindAngle = "359";
-                this.appWindAnimate.nativeElement.beginElement();
-                this.oldAppWindAngle = "0";
-                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-                this.appWindAnimate.nativeElement.beginElement();
-              }
-            } else {
-              if (oldAngle == 0) {
-                // special cases
-                this.oldAppWindAngle = "359";
-                this.appWindAnimate.nativeElement.beginElement();
-              } else {
-                this.newAppWindAngle = "0";
-                this.appWindAnimate.nativeElement.beginElement();
-                this.oldAppWindAngle = "359";
-                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
-                this.appWindAnimate.nativeElement.beginElement();
-              }
-            }
-          } else {
-            this.appWindAnimate.nativeElement.beginElement();
-          }
-        }
-      }
-    }
-
-    //rudderAngle
-    if (changes.rudderAngle) {
-      if (! changes.rudderAngle.firstChange) {
-        if (changes.rudderAngle.currentValue <=0) {
-          this.oldRudderPrtAngle = 0;
-          this.newRudderPrtAngle = 0;
-
-          this.oldRudderStbAngle = this.newRudderStbAngle
-          this.newRudderStbAngle = Math.round(changes.rudderAngle.currentValue * 7.16 * -1); //pixel to angle ratio for rudder box and set positive
-        } else {
-          this.oldRudderStbAngle = 0;
-          this.newRudderStbAngle = 0;
-
-          this.oldRudderPrtAngle = this.newRudderPrtAngle;
-          this.newRudderPrtAngle = Math.round(changes.rudderAngle.currentValue * 7.16); //pixel to angle ratio for rudder box
-        }
-
-        if (this.rudderPrtAnimate) { // only update if on dom...
-          this.rudderPrtAnimate.nativeElement.beginElement();
-        }
-        if (this.rudderStbAnimate) { // only update if on dom...
-          this.rudderStbAnimate.nativeElement.beginElement();
-        }
-      }
-    }
-  }
-
-}
+import { Component, Input, ViewChild, ElementRef, SimpleChanges } from '@angular/core';
+import { trigger, state, style, animate, transition } from '@angular/animations';
+
+
+@Component({
+  selector: 'app-svg-autopilot',
+  templateUrl: './svg-autopilot.component.html',
+  // uses svg-wind SCSS styles
+  animations: [
+    trigger('fadeInOut', [
+      state('connected', style({
+        opacity: 0,
+      })),
+      state('disconnected', style({
+        opacity: 1,
+      })),
+      transition('connected => disconnected', [
+        animate('.3s')
+      ]),
+      transition('disconnected => connected', [
+        animate('1s')
+      ]),
+    ]),
+  ]
+})
+export class SvgAutopilotComponent {
+  // AP screen
+  @ViewChild('apStencil', {static: true, read: ElementRef}) ApStencil: ElementRef;
+  @ViewChild('countDown', {static: true, read: ElementRef}) countDown: ElementRef;
+
+  // SVG
+  @ViewChild('compassAnimate', {static: true, read: ElementRef}) compassAnimate: ElementRef;
+  @ViewChild('appWindAnimate', {static: true, read: ElementRef}) appWindAnimate: ElementRef;
+  @ViewChild('rudderPrtAnimate', {static: true, read: ElementRef}) rudderPrtAnimate: ElementRef;
+  @ViewChild('rudderStbAnimate', {static: true, read: ElementRef}) rudderStbAnimate: ElementRef;
+
+  @Input('compassHeading') compassHeading: number;
+  @Input('appWindAngle') appWindAngle: number;
+  @Input('rudderAngle') rudderAngle: number;
+  @Input('apState') apState: string;
+  @Input('apTargetAppWindAngle') apTargetAppWindAngle: string;
+  @Input('isApConnected') isApConnected: boolean;
+
+  constructor() { }
+
+  // compass
+  oldCompassRotate: number = 0;
+  newCompassRotate: number = 0;
+  headingValue: string ="0";
+
+  // Apparent wind
+  oldAppWindAngle: string = "0";
+  newAppWindAngle: string = "0";
+  oldAppWindRotateAngle: string = "0";
+  newAppWindRotateAngle: string = "0";
+
+  // rudder
+  oldRudderPrtAngle: number = 0;
+  newRudderPrtAngle: number = 0;
+  oldRudderStbAngle: number = 0;
+  newRudderStbAngle: number = 0;
+
+  activityIconVisibility: string = "hidden;";
+  errorIconVisibility: string = "hidden";
+  msgStencilVisibility: string = "hidden";
+  msgStencilInnerHTML: string = "Empty Message Stencil";
+  errorStencilVisibility: string = "hidden";
+  errorStencilInnerText: string = "Empty Error Stencil";
+  messageVisibility: string = "hidden";
+  messageInnerText: string = "";
+
+
+  ngOnChanges(changes: SimpleChanges) {
+
+    //heading
+    if (changes.compassHeading) {
+      if (! changes.compassHeading.firstChange) {
+        this.oldCompassRotate = this.newCompassRotate;
+        this.newCompassRotate = changes.compassHeading.currentValue;
+        this.headingValue = this.newCompassRotate.toFixed(0);
+        this.compassAnimate.nativeElement.beginElement();
+      }
+    }
+
+    //AP State
+    if (changes.apState) {
+      if (! changes.apState.firstChange) {
+        this.apState = this.apState.toUpperCase();
+      }
+    }
+
+    //AP Target Apparent Wind Angle
+    if (changes.apTargetAppWindAngle) {
+      if (! changes.apTargetAppWindAngle.firstChange) {
+        this.apTargetAppWindAngle = changes.apTargetAppWindAngle.currentValue.toFixed(0);
+      }
+    }
+
+    //appWindAngle
+    if (changes.appWindAngle) {
+      if (! changes.appWindAngle.firstChange) {
+        this.oldAppWindAngle = this.newAppWindAngle;
+        this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
+
+        let oldAngle = Number(this.oldAppWindAngle)
+        let newAngle = Number(this.newAppWindAngle);
+        let diff = oldAngle - newAngle;
+
+        // only update if on DOM and value rounded changed
+        if (this.appWindAnimate && (diff != 0)) {
+          // Special cases to smooth out passing between 359 to/from 0
+          // if more than half the circle, it could need to go over the 359 / 0 values
+          if ( Math.abs(diff) > 180 ) {
+            // In what direction are we moving?
+            if (Math.sign(diff) == 1) {
+              if (oldAngle == 359) {
+                // special cases
+                this.oldAppWindAngle = "0";
+                this.appWindAnimate.nativeElement.beginElement();
+              } else {
+                this.newAppWindAngle = "359";
+                this.appWindAnimate.nativeElement.beginElement();
+                this.oldAppWindAngle = "0";
+                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
+                this.appWindAnimate.nativeElement.beginElement();
+              }
+            } else {
+              if (oldAngle == 0) {
+                // special cases
+                this.oldAppWindAngle = "359";
+                this.appWindAnimate.nativeElement.beginElement();
+              } else {
+                this.newAppWindAngle = "0";
+                this.appWindAnimate.nativeElement.beginElement();
+                this.oldAppWindAngle = "359";
+                this.newAppWindAngle = changes.appWindAngle.currentValue.toFixed(0);
+                this.appWindAnimate.nativeElement.beginElement();
+              }
+            }
+          } else {
+            this.appWindAnimate.nativeElement.beginElement();
+          }
+        }
+      }
+    }
+
+    //rudderAngle
+    if (changes.rudderAngle) {
+      if (! changes.rudderAngle.firstChange) {
+        if (changes.rudderAngle.currentValue <=0) {
+          this.oldRudderPrtAngle = 0;
+          this.newRudderPrtAngle = 0;
+
+          this.oldRudderStbAngle = this.newRudderStbAngle
+          this.newRudderStbAngle = Math.round(changes.rudderAngle.currentValue * 7.16 * -1); //pixel to angle ratio for rudder box and set positive
+        } else {
+          this.oldRudderStbAngle = 0;
+          this.newRudderStbAngle = 0;
+
+          this.oldRudderPrtAngle = this.newRudderPrtAngle;
+          this.newRudderPrtAngle = Math.round(changes.rudderAngle.currentValue * 7.16); //pixel to angle ratio for rudder box
+        }
+
+        if (this.rudderPrtAnimate) { // only update if on dom...
+          this.rudderPrtAnimate.nativeElement.beginElement();
+        }
+        if (this.rudderStbAnimate) { // only update if on dom...
+          this.rudderStbAnimate.nativeElement.beginElement();
+        }
+      }
+    }
+  }
+
+}

package/src/app/svg-simple-linear-gauge/svg-simple-linear-gauge.component.html

@@ -1,119 +1,119 @@
-
-<svg
-   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   height="100%"
-   width="100%"
-   viewBox="0 0 205 50"
-   version="1.1"
-   id="svg8">
-   <defs
-     id="defs2">
-    <linearGradient id="gaugeBarGradient">
-      <stop
-         id="stop849"
-         offset="0"
-         style="stop-opacity:1;"
-         [style.stop-color]="barColorGradient" />
-      <stop
-         id="stop851"
-         offset="0.40"
-         style="stop-opacity:0;"
-         [style.stop-color]="barColorGradient" />
-    </linearGradient>
-    <linearGradient
-       gradientTransform="translate(5,-30)"
-       gradientUnits="userSpaceOnUse"
-       y2="34.5"
-       x2="-5"
-       y1="34.5"
-       x1="-6"
-       id="linearGradient855"
-       xlink:href="#gaugeBarGradient" />
-  </defs>
-  <g
-     id="layer1"
-     style="display:inline">
-    <rect
-       style="opacity:1;fill-opacity:1;stroke:none;stroke-width:0.265899;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       [style.fill]="barColorBackground"
-       id="GaugeBackground"
-       width="195"
-       height="9"
-       x="5"
-       y="30"
-       ry="0" />
-    <defs>
-      <g
-        id="gaugeBar">
-        <rect
-          id="gaugeValue"
-          width="1"
-          height="9"
-          x="0"
-          y="0"
-          ry="0"
-          style="mix-blend-mode:normal;fill-opacity:1;stroke-width:0.0864229;"
-          />
-        <rect
-          id="GaugeValueGradient"
-          transform="scale(-1,1)"
-          width="1"
-          height="9"
-          x="-1"
-          y="0"
-          ry="0"
-          style="display:inline;opacity:0.38141;mix-blend-mode:multiply;fill:url(#linearGradient855);fill-opacity:1;stroke-width:0.0864229"/>
-      </g>
-    </defs>
-    <use xlink:href="#gaugeBar" transform="translate(5,30)" [style.fill]="barColor">
-      <animateTransform #gaugeBarAnimate attributeName="transform"
-      type="scale"
-      [attr.from]="oldGaugeValue + ' 1'"
-      [attr.to]="newGaugeValue +' 1'"
-      begin="indefinite"
-      dur="0.5s"
-      additive="sum"
-      fill="freeze" />
-    </use>
-  </g>
-  <g
-     id="layer2"
-     style="display:inline">
-    <text
-       xml:space="preserve"
-       class="wind-text"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
-       x="4.1731763"
-       y="25.413595"
-       id="displayNameText"><tspan
-         id="tspan1945"
-         x="4.1731763"
-         y="25.413595"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;">{{displayName}}</tspan>
-    </text>
-    <text
-       text-anchor="end"
-       id="gaugeTexts"
-       y="25.293016"
-       x="200.37138"
-       class="wind-text"
-       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
-       xml:space="preserve">
-       <tspan
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;"
-         y="25.293016"
-         x="200.37138"
-         id="valueText">{{dataValue}}</tspan>
-        <tspan
-         dy="-9"
-         id="unitText"
-         style="text-transform: capitalize;font-size:9.87778px">{{unitLabel}}</tspan>
-    </text>
-  </g>
-</svg>
+
+<svg
+   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   height="100%"
+   width="100%"
+   viewBox="0 0 205 50"
+   version="1.1"
+   id="svg8">
+   <defs
+     id="defs2">
+    <linearGradient id="gaugeBarGradient">
+      <stop
+         id="stop849"
+         offset="0"
+         style="stop-opacity:1;"
+         [style.stop-color]="barColorGradient" />
+      <stop
+         id="stop851"
+         offset="0.40"
+         style="stop-opacity:0;"
+         [style.stop-color]="barColorGradient" />
+    </linearGradient>
+    <linearGradient
+       gradientTransform="translate(5,-30)"
+       gradientUnits="userSpaceOnUse"
+       y2="34.5"
+       x2="-5"
+       y1="34.5"
+       x1="-6"
+       id="linearGradient855"
+       xlink:href="#gaugeBarGradient" />
+  </defs>
+  <g
+     id="layer1"
+     style="display:inline">
+    <rect
+       style="opacity:1;fill-opacity:1;stroke:none;stroke-width:0.265899;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       [style.fill]="barColorBackground"
+       id="GaugeBackground"
+       width="195"
+       height="9"
+       x="5"
+       y="30"
+       ry="0" />
+    <defs>
+      <g
+        id="gaugeBar">
+        <rect
+          id="gaugeValue"
+          width="1"
+          height="9"
+          x="0"
+          y="0"
+          ry="0"
+          style="mix-blend-mode:normal;fill-opacity:1;stroke-width:0.0864229;"
+          />
+        <rect
+          id="GaugeValueGradient"
+          transform="scale(-1,1)"
+          width="1"
+          height="9"
+          x="-1"
+          y="0"
+          ry="0"
+          style="display:inline;opacity:0.38141;mix-blend-mode:multiply;fill:url(#linearGradient855);fill-opacity:1;stroke-width:0.0864229"/>
+      </g>
+    </defs>
+    <use xlink:href="#gaugeBar" transform="translate(5,30)" [style.fill]="barColor">
+      <animateTransform #gaugeBarAnimate attributeName="transform"
+      type="scale"
+      [attr.from]="oldGaugeValue + ' 1'"
+      [attr.to]="newGaugeValue +' 1'"
+      begin="indefinite"
+      dur="0.5s"
+      additive="sum"
+      fill="freeze" />
+    </use>
+  </g>
+  <g
+     id="layer2"
+     style="display:inline">
+    <text
+       xml:space="preserve"
+       class="wind-text"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
+       x="4.1731763"
+       y="25.413595"
+       id="displayNameText"><tspan
+         id="tspan1945"
+         x="4.1731763"
+         y="25.413595"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;">{{displayName}}</tspan>
+    </text>
+    <text
+       text-anchor="end"
+       id="gaugeTexts"
+       y="25.293016"
+       x="200.37138"
+       class="wind-text"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;line-height:1.25;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0px;word-spacing:0px;"
+       xml:space="preserve">
+       <tspan
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:22.5778px;font-family:Arial;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;"
+         y="25.293016"
+         x="200.37138"
+         id="valueText">{{dataValue}}</tspan>
+        <tspan
+         dy="-9"
+         id="unitText"
+         style="text-transform: capitalize;font-size:9.87778px">{{unitLabel}}</tspan>
+    </text>
+  </g>
+</svg>