<!--
~ Copyright 2019-present Open Networking Foundation
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ You may obtain a copy of the License at
~
~     http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing, software
~ distributed under the License is distributed on an "AS IS" BASIS,
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ See the License for the specific language governing permissions and
~ limitations under the License.
-->
<svg:g *ngFor="let pt of gridPointsHoriz" xmlns:svg="http://www.w3.org/2000/svg"
       [attr.transform]="'translate(' + horizCentreOffset + ',' + vertCentreOffset + '), ' +
        'scale(' + gridScaleX + ',' + gridScaleY +')'">
    <svg:desc>Vertical grid lines</svg:desc>
    <svg:rect id="gridRectVert" class="gridrect"
              [ngStyle]="{'stroke': gridcolor, 'stroke-width': 1/gridScaleX }"
            [attr.width]="spacing"
            [attr.height]="vertUpperLimit-vertLowerLimit"
            [attr.x]="pt"
            [attr.y]="vertLowerLimit">
    </svg:rect>
    <svg:text id="gridTextVert" class="gridtext"
              [ngStyle]="{'stroke': gridcolor, 'font-size': 100/gridScaleX+'%', 'stroke-width': 1/gridScaleX }"
            [attr.x]="pt"
            [attr.y]="(vertUpperLimit - vertLowerLimit)/2">{{pt}}</svg:text>
</svg:g>

<svg:g *ngFor="let pt of gridPointsVert" xmlns:svg="http://www.w3.org/2000/svg"
       [attr.transform]="'translate(' + horizCentreOffset + ',' + vertCentreOffset + '), ' +
        'scale(' + gridScaleX + ',' + gridScaleY + ')'">
    <svg:desc>Horizontal grid lines</svg:desc>
    <svg:rect id="gridRectHoriz" class="gridrect"
              [ngStyle]="{'stroke': gridcolor, 'stroke-width': 1/gridScaleY }"
            [attr.width]="horizUpperLimit-horizLowerLimit"
            [attr.height]="spacing"
            [attr.x]="horizLowerLimit"
            [attr.y]="pt">
    </svg:rect>
    <svg:text id="gridTextHoriz" class="gridtext"
              [ngStyle]="{'stroke': gridcolor, 'font-size': 100/gridScaleY+'%', 'stroke-width': 1/gridScaleY }"
            [attr.x]="(horizUpperLimit - horizLowerLimit)/2"
            [attr.y]="invertVertical ? -pt : pt">{{pt}}</svg:text>
</svg:g>