config(EJ2-2116): lineargauge added

Author: pipeline

package.json

@@ -17,6 +17,7 @@
 		"@syncfusion/ej2-popups": "*",
 		"@syncfusion/ej2-charts": "*",
 		"@syncfusion/ej2-circulargauge": "*",
+		"@syncfusion/ej2-lineargauge": "*",
 		"@syncfusion/ej2-navigations": "*",
 		"cheerio": "^1.0.0-rc.1",
 		"crossroads": "^0.12.2",

src/common/sampleList.ts

@@ -1,5 +1,5 @@
 {
-    "Data Visualization": ["Chart", "Circular Gauge"],
+    "Data Visualization": ["Chart", "Circular Gauge", "Linear Gauge"],
     "Grids": ["Grid"],
     "Editors": ["Form Validator", "DropDownList", "Calendar", "NumericTextBox", "Button", "TextBoxes"],
     "Layout": ["ListView", "Dialog", "Popup", "Tooltip"],

src/common/sampleOrder.json

@@ -0,0 +1 @@
+{"index.ts":"import { LinearGauge, Annotations, ILoadEventArgs } from '@syncfusion/ej2-lineargauge';\nLinearGauge.Inject(Annotations);\n\n/**\n * Default linear gauge\n */\nlet gauge: LinearGauge;\n\n    let count: number = 0;\n    gauge = new LinearGauge({\n        rangePalettes: ['#30b32d', '#ffdd00', '#f03e3e'],\n        orientation: 'Horizontal',\n        axes: [{\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        load: gaugeLoad\n    });\n    gauge.appendTo('#annotationContainer');\n\n\nfunction gaugeLoad(args: ILoadEventArgs): void {\n    if (this.count === undefined) {\n        gauge.annotations = [\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/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/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/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        this.count = 0;\n        gauge.refresh();\n    }\n}\n\n\n\n","index.html":"<html><head>\n    <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\">\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<body>\n<div class=\"control-section\">\n    <div id=\"annotationContainer\">\n\n    </div>\n</div>\n<div id=\"description \">\n    <p>\n        In this sample we have used annotations to indicate low, moderate and high ranges. Annotations are used to place the texts,\n        shapes or images anywhere in the gauge. You can use <code>content</code>, <code>x</code>, <code>y</code>,\n        <code>zIndex</code> properties to customize the annotations. And you can specify the id of the element that needs\n        to be displayed, in the content property.\n        <br>\n        </p><p style=\"font-weight: 500 \">Injecting Module</p>\n        <p>\n            Linear gauge component features are segregated into individual feature-wise modules. To render annotations, we need to inject\n            <code>Annotations</code> module using <code>LinearGauge.Inject(LinearGauge)</code> method.\n        </p>\n        <p>\n            More information about annotations can be found in this\n            <a target=\"_blank \" href=\"http://ej2.syncfusion.com/documentation \">documentation section</a>.\n        </p>\n</div>\n<style>\n    #control-container {\n        padding: 0px !important;\n    }\n    /* Set black background color, white text and some padding */\n\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    p {\n        padding: 0.5em;\n        font-size: 16px;\n    }\n\n    #targetContainer .text-center {\n        color: rgba(0, 0, 0, 0.54);\n    }\n</style>\n\n</body></html>","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    },\n    map: {\n        main: \"index.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    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\nSystem.import('index.ts').catch(console.error.bind(console));"}

src/lineargauge/annotation-plnkr.json

@@ -0,0 +1,50 @@
+<div class="control-section">
+    <div id="annotationContainer">
+
+    </div>
+</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.
+        <br>
+        <p style="font-weight: 500 ">Injecting Module</p>
+        <p>
+            Linear gauge component features are segregated into individual feature-wise modules. To render annotations, we need to inject
+            <code>Annotations</code> module using <code>LinearGauge.Inject(LinearGauge)</code> method.
+        </p>
+        <p>
+            More information about annotations can be found in this
+            <a target="_blank " href="http://ej2.syncfusion.com/documentation ">documentation section</a>.
+        </p>
+</div>
+<style>
+    #control-container {
+        padding: 0px !important;
+    }
+    /* Set black background color, white text and some padding */
+
+    #templateWrap img {
+        border-radius: 30px;
+        width: 30px;
+        height: 30px;
+        margin: 0 auto;
+    }
+
+    #templateWrap .des {
+        float: right;
+        padding-left: 10px;
+        line-height: 30px;
+    }
+
+    p {
+        padding: 0.5em;
+        font-size: 16px;
+    }
+
+    #targetContainer .text-center {
+        color: rgba(0, 0, 0, 0.54);
+    }
+</style>

src/lineargauge/annotation.html

@@ -0,0 +1,120 @@
+import { LinearGauge, Annotations, ILoadEventArgs } from '@syncfusion/ej2-lineargauge';
+LinearGauge.Inject(Annotations);
+
+/**
+ * Default linear gauge
+ */
+let gauge: LinearGauge;
+this.default = (): void => {
+    let count: number = 0;
+    gauge = new LinearGauge({
+        rangePalettes: ['#30b32d', '#ffdd00', '#f03e3e'],
+        orientation: 'Horizontal',
+        axes: [{
+            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
+            }]
+        }],
+        load: gaugeLoad
+    });
+    gauge.appendTo('#annotationContainer');
+};
+
+function gaugeLoad(args: ILoadEventArgs): void {
+    if (this.count === undefined) {
+        gauge.annotations = [
+            {
+                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
+            }
+        ];
+        this.count = 0;
+        gauge.refresh();
+    }
+}
+
+
+