config(EJ2-2116): lineargauge added

Author: pipeline

package.json

@@ -24,6 +24,7 @@
 		"@syncfusion/ej2-ng-grids": "*",
 		"@syncfusion/ej2-ng-charts": "*",
 		"@syncfusion/ej2-ng-circulargauge": "*",
+		"@syncfusion/ej2-ng-lineargauge": "*",
 		"@syncfusion/ej2-ng-dropdowns": "*",
 		"@syncfusion/ej2-ng-calendars": "*",
 		"@syncfusion/ej2-ng-navigations": "*",

src/common/samplelist.ts

@@ -9,6 +9,7 @@ import { calendarAppRoutes } from '../calendar/calendar.module';
 import { chartAppRoutes } from '../chart/chart.module';
 import { dialogAppRoutes } from '../dialog/dialog.module';
 import { circulargaugeAppRoutes } from '../circulargauge/circulargauge.module';
+import { lineargaugeAppRoutes } from '../lineargauge/lineargauge.module';
 import { textboxesAppRoutes } from '../textboxes/textboxes.module';
 import { tooltipAppRoutes } from '../tooltip/tooltip.module';
 export let samplesList: any = [
@@ -18,6 +19,9 @@ export let samplesList: any = [
     {
         'name': 'CircularGauge', 'category': 'Datavisualization', 'order': '01', 'path': 'circulargauge', 'samples': circulargaugeAppRoutes, "type": "new"
     },
+    {
+        'name': 'LinearGauge', 'category': 'Datavisualization', 'order': '01', 'path': 'lineargauge', 'samples': lineargaugeAppRoutes, "type": "new"
+    },
     {
         'name': 'Grid', 'category': 'Grids', 'order': '02', 'path': 'grid', 'samples': gridRouteConfig, 'type': 'update'
     },

src/common/sb.router.ts

@@ -13,10 +13,12 @@ import { DialogSampleModule } from '../dialog/dialog.module';
 import { TextboxesModule } from '../textboxes/textboxes.module';
 import { TooltipSampleModule } from '../tooltip/tooltip.module';
 import { CircularGaugeSampleModule } from '../circulargauge/circulargauge.module';
+import { LinearGaugeSampleModule } from '../lineargauge/lineargauge.module';
 
 const appRoutes: any = [
     { path: 'chart', loadChildren: ChartSampleModule },
     { path: 'circulargauge', loadChildren: CircularGaugeSampleModule },
+    { path: 'lineargauge', loadChildren: LinearGaugeSampleModule },
     { path: 'grid', loadChildren: GridSampleModule },
     { path: 'form-validator', loadChildren: FormValidatorModule },
     { path: 'Button', loadChildren: ButtonModule },
@@ -35,6 +37,7 @@ const appRoutes: any = [
     imports: [
         ChartSampleModule,
         CircularGaugeSampleModule,
+        LinearGaugeSampleModule,
         GridSampleModule,
         FormValidatorModule,
         ButtonModule,

src/lineargauge/annotation-plnkr.json

@@ -0,0 +1 @@
+{"app.module":"import { AnnotationComponent } from './annotation.component';\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/**\n * Lineargauge Control\n */\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { LinearGaugeAllModule } from '@syncfusion/ej2-ng-lineargauge';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@NgModule({\n    imports: [LinearGaugeAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [AnnotationComponent],\nbootstrap: [AnnotationComponent]\n})\nexport class AppModule { }","annotation.component":"import { Component, ViewEncapsulation } from '@angular/core';\n\n/**\n * Annotation linear gauge\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'annotation.html',\n    encapsulation: ViewEncapsulation.None\n})\nexport class AnnotationComponent {\n    public Palette: String[] = ['#30b32d', '#ffdd00', '#f03e3e'];\n\n    public Axes: Object[] = [{\n        maximum: 90,\n        labelStyle: {\n            font: {\n                size: '0px'\n            }\n        },\n        line: {\n            width: 0\n        },\n        pointers: [\n            {\n                value: 35,\n                height: 15,\n                width: 15,\n                color: '#757575',\n                placement: 'Near',\n                markerType: 'Triangle',\n                offset: -50\n            }\n        ],\n        majorTicks: {\n            interval: 10,\n            height: 0\n        },\n        minorTicks: {\n            height: 0\n        },\n        ranges: [{\n            start: 0,\n            end: 30,\n            startWidth: 50,\n            endWidth: 50\n        },\n        {\n            start: 30,\n            end: 60,\n            startWidth: 50,\n            endWidth: 50\n        },\n        {\n            start: 60,\n            end: 90,\n            startWidth: 50,\n            endWidth: 50\n        }]\n    }];\n    public Annotation: Object[] = [\n        {\n            content: '<div id=\"title\" style=\"width:200px;\"><p style=\"font-size:18px;\">CPU Utilization</p></div>',\n            horizontalAlignment: 'Center',\n            x: 35,\n            y: 50\n        },\n        {\n            content: '<div id=\"low\"><img style=\"height:25px;width:25px;\" src=\"http://npmci.syncfusion.com/production/angular/demos/src/lineargauge/images/Low.png\"/></div>',\n            axisIndex: 0,\n            axisValue: 15,\n            y: -25,\n            zIndex: '1'\n        },\n        {\n            content: '<div id=\"moderate\"><img style=\"height:25px;width:25px;\" src=\"http://npmci.syncfusion.com/production/angular/demos/src/lineargauge/images/Moderate.png\"/></div>',\n            axisIndex: 0,\n            axisValue: 45,\n            y: -25,\n            zIndex: '1'\n        },\n        {\n            content: '<div id=\"high\"><img style=\"height:25px;width:25px;\" src=\"http://npmci.syncfusion.com/production/angular/demos/src/lineargauge/images/High.png\"/></div>',\n            axisIndex: 0,\n            axisValue: 75,\n            y: -25,\n            zIndex: '1'\n        },\n        {\n            content: '<div id=\"lowText\"><p style=\"font-size:15px;color:#248622;\">Low</p></div>',\n            axisIndex: 0,\n            axisValue: 15,\n            y: 20\n        },\n        {\n            content: '<div id=\"moderateText\"><p style=\"font-size:15px;color:#ba9e2a;\">Moderate</p></div>',\n            axisIndex: 0,\n            axisValue: 45,\n            y: 20\n        },\n        {\n            content: '<div id=\"highText\"><p style=\"font-size:15px;color:#b42f2f;\">High</p></div>',\n            axisIndex: 0,\n            axisValue: 75,\n            y: 20\n        }\n    ];\n    ;\n}","annotation.html":"<script id='tool' type=\"text/x-template\">\n    <div id='templateWrap'>\n        <img src='http://npmci.syncfusion.com/production/angular/demos/src/lineargauge/images/charging.png'>\n        <div class='des'>\n            <span>Energy &nbsp;&nbsp;:&nbsp; 60%</span>\n        </div>\n    </div>\n</script>\n<style>\n    #templateWrap img {\n        border-radius: 30px;\n        width: 30px;\n        height: 30px;\n        margin: 0 auto;\n    }\n\n    #templateWrap .des {\n        float: right;\n        padding-left: 10px;\n        line-height: 30px;\n    }\n\n    #targetContainer .text-center {\n        color: rgba(0, 0, 0, 0.54);\n    }\n</style>\n<div class=\"control-section\">\n    <ej-lineargauge id='annotationContainer' style='display:block;' orientation='Horizontal' [rangePalettes]='Palette' [axes]='Axes'\n        [annotations]='Annotation'>\n    </ej-lineargauge>\n</div>\n<style>\n    .control-section {\n        min-height: 450px;\n    }\n</style>","index.html":"<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/[email protected]\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}

src/lineargauge/annotation.component.ts

@@ -0,0 +1,111 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+/**
+ * Annotation linear gauge
+ */
+@Component({
+    selector: 'control-content',
+    templateUrl: 'annotation.html',
+    encapsulation: ViewEncapsulation.None
+})
+export class AnnotationComponent {
+    public Palette: String[] = ['#30b32d', '#ffdd00', '#f03e3e'];
+
+    public Axes: Object[] = [{
+        maximum: 90,
+        labelStyle: {
+            font: {
+                size: '0px'
+            }
+        },
+        line: {
+            width: 0
+        },
+        pointers: [
+            {
+                value: 35,
+                height: 15,
+                width: 15,
+                color: '#757575',
+                placement: 'Near',
+                markerType: 'Triangle',
+                offset: -50
+            }
+        ],
+        majorTicks: {
+            interval: 10,
+            height: 0
+        },
+        minorTicks: {
+            height: 0
+        },
+        ranges: [{
+            start: 0,
+            end: 30,
+            startWidth: 50,
+            endWidth: 50
+        },
+        {
+            start: 30,
+            end: 60,
+            startWidth: 50,
+            endWidth: 50
+        },
+        {
+            start: 60,
+            end: 90,
+            startWidth: 50,
+            endWidth: 50
+        }]
+    }];
+    public Annotation: Object[] = [
+        {
+            content: '<div id="title" style="width:200px;"><p style="font-size:18px;">CPU Utilization</p></div>',
+            horizontalAlignment: 'Center',
+            x: 35,
+            y: 50
+        },
+        {
+            content: '<div id="low"><img style="height:25px;width:25px;" src="src/lineargauge/images/Low.png"/></div>',
+            axisIndex: 0,
+            axisValue: 15,
+            y: -25,
+            zIndex: '1'
+        },
+        {
+            content: '<div id="moderate"><img style="height:25px;width:25px;" src="src/lineargauge/images/Moderate.png"/></div>',
+            axisIndex: 0,
+            axisValue: 45,
+            y: -25,
+            zIndex: '1'
+        },
+        {
+            content: '<div id="high"><img style="height:25px;width:25px;" src="src/lineargauge/images/High.png"/></div>',
+            axisIndex: 0,
+            axisValue: 75,
+            y: -25,
+            zIndex: '1'
+        },
+        {
+            content: '<div id="lowText"><p style="font-size:15px;color:#248622;">Low</p></div>',
+            axisIndex: 0,
+            axisValue: 15,
+            y: 20
+        },
+        {
+            content: '<div id="moderateText"><p style="font-size:15px;color:#ba9e2a;">Moderate</p></div>',
+            axisIndex: 0,
+            axisValue: 45,
+            y: 20
+        },
+        {
+            content: '<div id="highText"><p style="font-size:15px;color:#b42f2f;">High</p></div>',
+            axisIndex: 0,
+            axisValue: 75,
+            y: 20
+        }
+    ];
+    constructor() {
+        //code
+    };
+}

src/lineargauge/annotation.html

@@ -0,0 +1,50 @@
+<script id='tool' type="text/x-template">
+    <div id='templateWrap'>
+        <img src='src/lineargauge/images/charging.png'>
+        <div class='des'>
+            <span>Energy &nbsp;&nbsp;:&nbsp; 60%</span>
+        </div>
+    </div>
+</script>
+<style>
+    #templateWrap img {
+        border-radius: 30px;
+        width: 30px;
+        height: 30px;
+        margin: 0 auto;
+    }
+
+    #templateWrap .des {
+        float: right;
+        padding-left: 10px;
+        line-height: 30px;
+    }
+
+    #targetContainer .text-center {
+        color: rgba(0, 0, 0, 0.54);
+    }
+</style>
+<div class="control-section">
+    <ej-lineargauge id='annotationContainer' style='display:block;' orientation='Horizontal' [rangePalettes]='Palette' [axes]='Axes'
+        [annotations]='Annotation'>
+    </ej-lineargauge>
+</div>
+<div id="description">
+    <p>
+        In this sample we have used annotations to indicate low, moderate and high ranges. Annotations are used to place the texts,
+        shapes or images anywhere in the gauge. You can use <code>content</code>, <code>x</code>, <code>y</code>,
+        <code>zIndex</code> properties to customize the annotations. And you can specify the id of the element that needs
+        to be displayed, in the content property.
+    </p>
+    <br>
+    <p style="font-weight: 500">Injecting Module</p>
+    <p>Linear gauge component features are segregated into individual feature-wise modules. To render annotation, we need to
+        inject
+        <code>AnnotationsService</code> into the <code>@NgModule.providers</code> section.
+    </p>
+</div>
+<style>
+    .control-section {
+        min-height: 450px;
+    }
+</style>