This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathrange-band-plnkr.json
More file actions
1 lines (1 loc) · 35.1 KB
/
range-band-plnkr.json
File metadata and controls
1 lines (1 loc) · 35.1 KB
1
{"index.css":"","app/property-pane.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nexport class PropertyPane extends React.Component<{ title: string }, {}>{\r\n\r\n render() {\r\n return (\r\n <div className='property-panel-section'>\r\n <div className=\"property-panel-header\">\r\n {this.props.title}\r\n </div>\r\n <div className=\"property-panel-content\">\r\n {this.props.children}\r\n </div>\r\n </div>\r\n\r\n )\r\n }\r\n}\r\n","data-source":"// tslint:disable\r\nexport let orderdata: Object[] = [{\r\n OrderID: 10248,\r\n CustomerID: \"VINET\",\r\n EmployeeID: 1,\r\n OrderDate: new Date(8364186e5),\r\n ShipName: \"Vins et alcools Chevalier\",\r\n ShipCity: \"Reims\",\r\n ShipAddress: \"59 rue de l'Abbaye\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"51100\",\r\n ShipCountry: \"France\",\r\n Freight: 32.38,\r\n Verified: !0\r\n}, {\r\n OrderID: 10249,\r\n CustomerID: \"TOMSP\",\r\n EmployeeID: 2,\r\n OrderDate: new Date(836505e6),\r\n ShipName: \"Toms Spezialit�ten\",\r\n ShipCity: \"M�nster\",\r\n ShipAddress: \"Luisenstr. 48\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"44087\",\r\n ShipCountry: \"Germany\",\r\n Freight: 11.61,\r\n Verified: !1\r\n}, {\r\n OrderID: 10250,\r\n CustomerID: \"HANAR\",\r\n EmployeeID: 3,\r\n OrderDate: new Date(8367642e5),\r\n ShipName: \"Hanari Carnes\",\r\n ShipCity: \"Rio de Janeiro\",\r\n ShipAddress: \"Rua do Pa�o, 67\",\r\n ShipRegion: \"RJ\",\r\n ShipPostalCode: \"05454-876\",\r\n ShipCountry: \"Brazil\",\r\n Freight: 65.83,\r\n Verified: !0\r\n}, {\r\n OrderID: 10251,\r\n CustomerID: \"VICTE\",\r\n EmployeeID: 4,\r\n OrderDate: new Date(8367642e5),\r\n ShipName: \"Victuailles en stock\",\r\n ShipCity: \"Lyon\",\r\n ShipAddress: \"2, rue du Commerce\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"69004\",\r\n ShipCountry: \"France\",\r\n Freight: 41.34,\r\n Verified: !0\r\n}, {\r\n OrderID: 10252,\r\n CustomerID: \"SUPRD\",\r\n EmployeeID: 5,\r\n OrderDate: new Date(8368506e5),\r\n ShipName: \"Supr�mes d�lices\",\r\n ShipCity: \"Charleroi\",\r\n ShipAddress: \"Boulevard Tirou, 255\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"B-6000\",\r\n ShipCountry: \"Belgium\",\r\n Freight: 51.3,\r\n Verified: !0\r\n}, {\r\n OrderID: 10253,\r\n CustomerID: \"HANAR\",\r\n EmployeeID: 6,\r\n OrderDate: new Date(836937e6),\r\n ShipName: \"Hanari Carnes\",\r\n ShipCity: \"Rio de Janeiro\",\r\n ShipAddress: \"Rua do Pa�o, 67\",\r\n ShipRegion: \"RJ\",\r\n ShipPostalCode: \"05454-876\",\r\n ShipCountry: \"Brazil\",\r\n Freight: 58.17,\r\n Verified: !0\r\n}, {\r\n OrderID: 10254,\r\n CustomerID: \"CHOPS\",\r\n EmployeeID: 7,\r\n OrderDate: new Date(8370234e5),\r\n ShipName: \"Chop-suey Chinese\",\r\n ShipCity: \"Bern\",\r\n ShipAddress: \"Hauptstr. 31\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"3012\",\r\n ShipCountry: \"Switzerland\",\r\n Freight: 22.98,\r\n Verified: !1\r\n}, {\r\n OrderID: 10255,\r\n CustomerID: \"RICSU\",\r\n EmployeeID: 8,\r\n OrderDate: new Date(8371098e5),\r\n ShipName: \"Richter Supermarkt\",\r\n ShipCity: \"Gen�ve\",\r\n ShipAddress: \"Starenweg 5\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"1204\",\r\n ShipCountry: \"Switzerland\",\r\n Freight: 148.33,\r\n Verified: !0\r\n}, {\r\n OrderID: 10256,\r\n CustomerID: \"WELLI\",\r\n EmployeeID: 9,\r\n OrderDate: new Date(837369e6),\r\n ShipName: \"Wellington Importadora\",\r\n ShipCity: \"Resende\",\r\n ShipAddress: \"Rua do Mercado, 12\",\r\n ShipRegion: \"SP\",\r\n ShipPostalCode: \"08737-363\",\r\n ShipCountry: \"Brazil\",\r\n Freight: 13.97,\r\n Verified: !1\r\n}, {\r\n OrderID: 10257,\r\n CustomerID: \"HILAA\",\r\n EmployeeID: 10,\r\n OrderDate: new Date(8374554e5),\r\n ShipName: \"HILARION-Abastos\",\r\n ShipCity: \"San Crist�bal\",\r\n ShipAddress: \"Carrera 22 con Ave. Carlos Soublette #8-35\",\r\n ShipRegion: \"T�chira\",\r\n ShipPostalCode: \"5022\",\r\n ShipCountry: \"Venezuela\",\r\n Freight: 81.91,\r\n Verified: !0\r\n}, {\r\n OrderID: 10258,\r\n CustomerID: \"ERNSH\",\r\n EmployeeID: 11,\r\n OrderDate: new Date(8375418e5),\r\n ShipName: \"Ernst Handel\",\r\n ShipCity: \"Graz\",\r\n ShipAddress: \"Kirchgasse 6\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"8010\",\r\n ShipCountry: \"Austria\",\r\n Freight: 140.51,\r\n Verified: !0\r\n}, {\r\n OrderID: 10259,\r\n CustomerID: \"CENTC\",\r\n EmployeeID: 12,\r\n OrderDate: new Date(8376282e5),\r\n ShipName: \"Centro comercial Moctezuma\",\r\n ShipCity: \"M�xico D.F.\",\r\n ShipAddress: \"Sierras de Granada 9993\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"05022\",\r\n ShipCountry: \"Mexico\",\r\n Freight: 3.25,\r\n Verified: !1\r\n}, {\r\n OrderID: 10260,\r\n CustomerID: \"OTTIK\",\r\n EmployeeID: 13,\r\n OrderDate: new Date(8377146e5),\r\n ShipName: \"Ottilies K�seladen\",\r\n ShipCity: \"K�ln\",\r\n ShipAddress: \"Mehrheimerstr. 369\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"50739\",\r\n ShipCountry: \"Germany\",\r\n Freight: 55.09,\r\n Verified: !0\r\n}, {\r\n OrderID: 10261,\r\n CustomerID: \"QUEDE\",\r\n EmployeeID: 14,\r\n OrderDate: new Date(8377146e5),\r\n ShipName: \"Que Del�cia\",\r\n ShipCity: \"Rio de Janeiro\",\r\n ShipAddress: \"Rua da Panificadora, 12\",\r\n ShipRegion: \"RJ\",\r\n ShipPostalCode: \"02389-673\",\r\n ShipCountry: \"Brazil\",\r\n Freight: 3.05,\r\n Verified: !1\r\n}, {\r\n OrderID: 10262,\r\n CustomerID: \"RATTC\",\r\n EmployeeID: 15,\r\n OrderDate: new Date(8379738e5),\r\n ShipName: \"Rattlesnake Canyon Grocery\",\r\n ShipCity: \"Albuquerque\",\r\n ShipAddress: \"2817 Milton Dr.\",\r\n ShipRegion: \"NM\",\r\n ShipPostalCode: \"87110\",\r\n ShipCountry: \"USA\",\r\n Freight: 48.29,\r\n Verified: !0\r\n}, {\r\n OrderID: 10263,\r\n CustomerID: \"ERNSH\",\r\n EmployeeID: 16,\r\n OrderDate: new Date(8380602e5),\r\n ShipName: \"Ernst Handel\",\r\n ShipCity: \"Graz\",\r\n ShipAddress: \"Kirchgasse 6\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"8010\",\r\n ShipCountry: \"Austria\",\r\n Freight: 146.06,\r\n Verified: !0\r\n}, {\r\n OrderID: 10264,\r\n CustomerID: \"FOLKO\",\r\n EmployeeID: 17,\r\n OrderDate: new Date(8381466e5),\r\n ShipName: \"Folk och f� HB\",\r\n ShipCity: \"Br�cke\",\r\n ShipAddress: \"�kergatan 24\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"S-844 67\",\r\n ShipCountry: \"Sweden\",\r\n Freight: 3.67,\r\n Verified: !1\r\n}, {\r\n OrderID: 10265,\r\n CustomerID: \"BLONP\",\r\n EmployeeID: 18,\r\n OrderDate: new Date(838233e6),\r\n ShipName: \"Blondel p�re et fils\",\r\n ShipCity: \"Strasbourg\",\r\n ShipAddress: \"24, place Kl�ber\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"67000\",\r\n ShipCountry: \"France\",\r\n Freight: 55.28,\r\n Verified: !0\r\n}, {\r\n OrderID: 10266,\r\n CustomerID: \"WARTH\",\r\n EmployeeID: 19,\r\n OrderDate: new Date(8383194e5),\r\n ShipName: \"Wartian Herkku\",\r\n ShipCity: \"Oulu\",\r\n ShipAddress: \"Torikatu 38\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"90110\",\r\n ShipCountry: \"Finland\",\r\n Freight: 25.73,\r\n Verified: !1\r\n}, {\r\n OrderID: 10267,\r\n CustomerID: \"FRANK\",\r\n EmployeeID: 20,\r\n OrderDate: new Date(8385786e5),\r\n ShipName: \"Frankenversand\",\r\n ShipCity: \"M�nchen\",\r\n ShipAddress: \"Berliner Platz 43\",\r\n ShipRegion: null,\r\n ShipPostalCode: \"80805\",\r\n ShipCountry: \"Germany\",\r\n Freight: 208.58,\r\n Verified: !0\r\n}\r\n];\r\nexport let products: Object[] = [\r\n {\r\n id: 1,\r\n name: 'Product A',\r\n previousYear: 10,\r\n lastYear: 20\r\n },\r\n {\r\n id: 2,\r\n name: 'Product B',\r\n previousYear: 20,\r\n lastYear: 30\r\n },\r\n {\r\n id: 3,\r\n name: 'Product C',\r\n previousYear: 30,\r\n lastYear: 20\r\n },\r\n {\r\n id: 4,\r\n name: 'Product D',\r\n previousYear: 40,\r\n lastYear: 10\r\n },\r\n {\r\n id: 5,\r\n name: 'Product E',\r\n previousYear: 20,\r\n lastYear: 30\r\n }];","systemjs.config.js":"System.config({\r\n transpiler: \"ts\",\r\n typescriptOptions: {\r\n target: \"es5\",\r\n module: \"commonjs\",\r\n moduleResolution: \"node\",\r\n emitDecoratorMetadata: true,\r\n experimentalDecorators: true,\r\n \"jsx\": \"react\"\r\n },\r\n meta: {\r\n 'typescript': {\r\n \"exports\": \"ts\"\r\n },\r\n '*.json': { loader: 'plugin-json' }\r\n },\r\n paths: {\r\n \"syncfusion:\": \"http://cdn.syncfusion.com/ej2/\"},\r\n map: {\r\n app: 'app',\r\n ts: \"https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js\",\r\n typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\r\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\r\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\r\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-splitbuttons\": \"syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\r\n \"@syncfusion/ej2-maps\": \"syncfusion:ej2-maps/dist/ej2-maps.umd.min.js\",\r\n \"@syncfusion/ej2-treemap\": \"syncfusion:ej2-treemap/dist/ej2-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\r\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\r\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\r\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\r\n \"@syncfusion/ej2-schedule\": \"syncfusion:ej2-schedule/dist/ej2-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-pdf-export\": \"syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js\", \r\n \"@syncfusion/ej2-compression\": \"syncfusion:ej2-compression/dist/ej2-compression.umd.min.js\",\r\n \"@syncfusion/ej2-excel-export\": \"syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js\", \r\n \"@syncfusion/ej2-file-utils\": \"syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js\",\r\n \"@syncfusion/ej2-documenteditor\": \"syncfusion:ej2-documenteditor/dist/ej2-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-notifications\": \"syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-richtexteditor\": \"syncfusion:ej2-richtexteditor/dist/ej2-richtexteditor.umd.min.js\",\r\n\t\t\"@syncfusion/ej2-svg-base\": \"syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js\",\r\n \"@syncfusion/ej2-pivotview\": \"syncfusion:ej2-pivotview/dist/ej2-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-heatmap\": \"syncfusion:ej2-heatmap/dist/ej2-heatmap.umd.min.js\",\r\n \"@syncfusion/ej2-react-base\": \"syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js\",\r\n \"@syncfusion/ej2-react-buttons\": \"syncfusion:ej2-react-buttons/dist/ej2-react-buttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-splitbuttons\": \"syncfusion:ej2-react-splitbuttons/dist/ej2-react-splitbuttons.umd.min.js\",\r\n \"@syncfusion/ej2-react-charts\": \"syncfusion:ej2-react-charts/dist/ej2-react-charts.umd.min.js\",\r\n \"@syncfusion/ej2-react-maps\": \"syncfusion:ej2-react-maps/dist/ej2-react-maps.umd.min.js\",\r\n \"@syncfusion/ej2-react-treemap\": \"syncfusion:ej2-react-treemap/dist/ej2-react-treemap.umd.min.js\",\r\n \"@syncfusion/ej2-react-circulargauge\": \"syncfusion:ej2-react-circulargauge/dist/ej2-react-circulargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-lineargauge\": \"syncfusion:ej2-react-lineargauge/dist/ej2-react-lineargauge.umd.min.js\",\r\n \"@syncfusion/ej2-react-calendars\": \"syncfusion:ej2-react-calendars/dist/ej2-react-calendars.umd.min.js\",\r\n \"@syncfusion/ej2-react-dropdowns\": \"syncfusion:ej2-react-dropdowns/dist/ej2-react-dropdowns.umd.min.js\",\r\n \"@syncfusion/ej2-react-grids\": \"syncfusion:ej2-react-grids/dist/ej2-react-grids.umd.min.js\",\r\n \"@syncfusion/ej2-react-inputs\": \"syncfusion:ej2-react-inputs/dist/ej2-react-inputs.umd.min.js\",\r\n \"@syncfusion/ej2-react-lists\": \"syncfusion:ej2-react-lists/dist/ej2-react-lists.umd.min.js\",\r\n \"@syncfusion/ej2-react-navigations\": \"syncfusion:ej2-react-navigations/dist/ej2-react-navigations.umd.min.js\",\r\n \"@syncfusion/ej2-react-popups\": \"syncfusion:ej2-react-popups/dist/ej2-react-popups.umd.min.js\",\r\n \"@syncfusion/ej2-react-schedule\": \"syncfusion:ej2-react-schedule/dist/ej2-react-schedule.umd.min.js\",\r\n \"@syncfusion/ej2-react-documenteditor\": \"syncfusion:ej2-react-documenteditor/dist/ej2-react-documenteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-notifications\": \"syncfusion:ej2-react-notifications/dist/ej2-react-notifications.umd.min.js\",\r\n \"@syncfusion/ej2-react-richtexteditor\": \"syncfusion:ej2-react-richtexteditor/dist/ej2-react-richtexteditor.umd.min.js\",\r\n \"@syncfusion/ej2-react-pivotview\": \"syncfusion:ej2-react-pivotview/dist/ej2-react-pivotview.umd.min.js\",\r\n \"@syncfusion/ej2-react-heatmap\": \"syncfusion:ej2-react-heatmap/dist/ej2-react-heatmap.umd.min.js\",\r\n \"react-dom\":\"https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js\",\r\n \"react\":\"https://unpkg.com/react@15.5.4/dist/react.min.js\",\r\n },\r\n packages: {\r\n 'app': { main: 'index', defaultExtension: 'tsx' },\r\n }\r\n});\r\n\r\nSystem.import('app');","index.html":"<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>Sparkline · GridData · Essential JS 2 for React · Syncfusion</title>\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\" />\r\n <meta http-equiv=\"x-ua-compatible\" content=\"ie=edge\">\r\n <!-- {{:meta}} -->\r\n <meta name=\"author\" content=\"Syncfusion\" />\r\n <script type=\"text/javascript\">\r\n var themeName = location.hash || 'material';\r\n themeName = themeName.replace('#','');\r\n window.ripple = (themeName === \"material\")\r\n document.write('<link href=\"http://cdn.syncfusion.com/ej2/' + themeName + '.css\" rel=\"stylesheet\">');\r\n </script>\r\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\" />\r\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\r\n <script src=\"systemjs.config.js\"></script>\r\n <link href=\"index.css\" rel=\"stylesheet\" />\r\n <style>\r\n #loader {\r\n color: #008cff;\r\n height: 40px;\r\n left: 45%;\r\n position: absolute;\r\n top: 45%;\r\n width: 30%;\r\n }\r\n body {\r\n touch-action:none;\r\n }\r\n .body {\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n }\r\n\r\n .e-view {\r\n bottom: 0;\r\n left: 0;\r\n overflow: hidden;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n }\r\n\r\n .sb-left {\r\n float: left;\r\n }\r\n\r\n .sb-right {\r\n float: right;\r\n }\r\n\r\n .sb-block {\r\n display: block;\r\n }\r\n\r\n .sb-table {\r\n display: table;\r\n }\r\n\r\n .sb-table-cell {\r\n display: table-cell;\r\n vertical-align: middle;\r\n }\r\n\r\n /*sample header*/\r\n\r\n\r\n .sb-header {\r\n height: 48px;\r\n background: #FFFFFF;\r\n box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12);\r\n z-index: 1001;\r\n opacity: 100;\r\n }\r\n\r\n\r\n .sb-header-left, .sb-header-right {\r\n height: 100%;\r\n }\r\n\r\n #sb-header-text {\r\n padding-left: 22px;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n .header-logo {\r\n float: left;\r\n padding-left: 8px;\r\n padding-right: 22px;\r\n }\r\n\r\n .footer-logo {\r\n background: url(https://ej2.syncfusion.com/home/images/footer-logo.svg) no-repeat right;\r\n height: 40px;\r\n width: 140px;\r\n }\r\n\r\n .sb-header-splitter {\r\n float: left;\r\n border-left: 1px solid rgb(196, 196, 196);\r\n height: 32px;\r\n margin-top: 8px;\r\n padding-left: 22 px;\r\n }\r\n\r\n .sb-header-settings {\r\n display: none;\r\n }\r\n\r\n .product-style a{\r\n padding-right: 15px;\r\n font-family:Roboto;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #363636;\r\n text-align: center;\r\n text-decoration: none;\r\n }\r\n .product-style a:hover {\r\n color:#3C78EF;\r\n }\r\n\r\n .sb-download-btn a {\r\n text-decoration: none;\r\n }\r\n\r\n .sb-download-text {\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-wrapper {\r\n padding-right: 27px;\r\n }\r\n\r\n .sb-download-btn:hover .sb-download-btn:focus .sb-download-btn.active {\r\n border-radius: 2px;\r\n font-family: \"Roboto\";\r\n font-weight: bold;\r\n color: #FFFFFF;\r\n }\r\n\r\n .sb-download-btn:hover {\r\n background: #006CE6;\r\n }\r\n\r\n .sb-download-btn:focus {\r\n background: #0051CB;\r\n }\r\n\r\n .sb-download-btn.active {\r\n background: #0036B1;\r\n }\r\n\r\n .sb-download-btn {\r\n background-color: #3C78EF;\r\n opacity: 100;\r\n border-radius: 2px;\r\n font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\";\r\n font-weight: 500;\r\n line-height: 18px;\r\n height: 32px;\r\n border-color: transparent;\r\n }\r\n\r\n .sb-bread-crumb {\r\n padding-left: 20px;\r\n padding-top: 24px;\r\n padding-bottom: 10px;\r\n }\r\n\r\n .category-allcontrols a, .category-text a, .crumb-sample {\r\n display: table;\r\n opacity: 0.87;\r\n font-family: Roboto;\r\n font-weight: 500;\r\n font-size: 15px;\r\n color: #3C78EF;\r\n text-align: left;\r\n text-decoration: none;\r\n }\r\n\r\n .sb-bread-crumb .sb-bread-crumb-text>div {\r\n font-size: 15px;\r\n font-weight: 500;\r\n padding-right: 8px;\r\n cursor: default;\r\n display: table-cell;\r\n }\r\n\r\n .sb-bread-crumb-text>div.seperator {\r\n font-weight: 700;\r\n font-size: 15px;\r\n vertical-align: bottom;\r\n } \r\n\r\n .content {\r\n overflow: auto;\r\n height: calc(100% - 50px);\r\n top: 50px;\r\n }\r\n\r\n\r\n .sample-content {\r\n top: 48px;\r\n background: #FFFFFF;\r\n }\r\n\r\n .div {\r\n display: block;\r\n }\r\n\r\n .control-section {\r\n padding-left: 4px;\r\n }\r\n\r\n .crumb-sample {\r\n color: #000000;\r\n line-height: 18px;\r\n }\r\n\r\n #description {\r\n padding-bottom: 16px;\r\n padding-left: 20px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n padding-top: 14px;\r\n }\r\n\r\n #action-description {\r\n padding-left: 20px;\r\n padding-bottom: 15px;\r\n opacity: 0.75;\r\n font-family: Roboto;\r\n font-size: 13px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n #description-section {\r\n padding-left: 20px;\r\n padding-top: 30px;\r\n opacity: 0.87;\r\n font-family:Roboto;\r\n font-weight: 700;\r\n font-size: 15px;\r\n color: #000000;\r\n text-align: left;\r\n }\r\n\r\n\r\n\r\n </style>\r\n</head>\r\n\r\n<body class='e-view ej2-new' aria-busy=\"true\">\r\n <div class=\"sample-browser\">\r\n <div id='sample-header' class=\"sb-header\" role=\"banner\">\r\n <div class='sb-header-left sb-left sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"header-logo\">\r\n <a href=\"https://ej2.syncfusion.com/home/react.html\" target=\"\" rel=\"noopener noreferrer\">\r\n <div class=\"footer-logo\"> </div>\r\n </a>\r\n </div>\r\n \r\n </div>\r\n <div class=\"sb-header-splitter sb-download-splitter\"></div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div id='sb-header-text' class='e-sb-header-text'>\r\n \r\n <span class='sb-header-text-left'>Essential JS 2 for React</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class='sb-header-right sb-right sb-table'>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class='product-style'>\r\n <div><a href=\"https://www.syncfusion.com/products/react/sparkline\">PRODUCT DETAILS</a></div>\r\n </div>\r\n </div>\r\n <div class='sb-header-item sb-table-cell'>\r\n <div class=\"sb-header-item sb-table-cell sb-download-wrapper\">\r\n <a href=\"https://www.syncfusion.com/downloads/essential-js2\" target=\"_blank\">\r\n <button id=\"download-now\" class=\"sb-download-btn\">\r\n <span class=\"sb-download-text\">DOWNLOAD</span>\r\n </button>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n </div>\r\n <div class ='content e-view'>\r\n <div class='sample-content'>\r\n <div id=\"sample-bread-crumb\" class=\"sb-bread-crumb\">\r\n <div class=\"sb-bread-crumb-text\">\r\n <div class=\"category-allcontrols\"><a href=\"https://ej2.syncfusion.com/react/demos\"><span>All Controls</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"category-text bread-ctext\"><a href=\"https://ej2.syncfusion.com/react/demos/#/material/sparkline/default.html\"><span>Sparkline</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">GridData</div>\r\n </div>\r\n </div>\r\n <div class=\"control-content\">\r\n <div id=\"action-description\">\r\n <p>\r\n \n <p>\n This sample depicts the range band feature and its customization options available in sparklines.\n </p>\n \r\n </p>\r\n </div>\r\n <div class=\"container-fluid\">\r\n <div class=\"control-section\">\r\n <div id='sample'>\r\n <div id='loader'>Loading....</div>\r\n </div>\r\n \r\n </div>\r\n </div>\r\n <div id=\"description-section\">Description</div> \r\n <div id=\"description\">\r\n <p>\r\n \n <p>\n In this example, you can see how to render sparkline with range band and the customization options available in range band. Here, the sparklines are placed inside the data grid control.\n </p>\n \r\n </p> \r\n </div> \r\n </div> \r\n </div>\r\n \r\n </div>\r\n </div>\r\n \r\n</body>\r\n</html>\r\n","app/index.tsx":"/**\r\n * Rangeband sample for sparkline\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { PropertyPane } from './property-pane';\r\nimport { SliderComponent } from \"@syncfusion/ej2-react-inputs\";\r\nimport {\r\n SparklineComponent, SparklineTheme, RangeBandSettingsDirective, RangeBandSettingDirective,\r\n ISparklineLoadedEventArgs, SparklineModel, Sparkline\r\n} from '@syncfusion/ej2-react-charts';\r\nimport { getInstance } from '@syncfusion/ej2-base';\r\nimport { GridComponent, ColumnsDirective, ColumnDirective, Selection, Inject } from '@syncfusion/ej2-react-grids';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { SampleBase } from './sample-base';\r\nimport { products } from '../data-source';\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n\t\tpadding: 0px !important;\r\n }\r\n td{\r\n padding: 10px;\r\n }\r\n .e-headertext{\r\n font-weight: bolder;\r\n }\r\n #range-min > * {\r\n padding: 0px !important;\r\n }\r\n #range-max > * {\r\n padding: 0px !important;\r\n }`;\r\n\r\nexport class GridData {\r\n public id: string;\r\n}\r\n\r\nexport class RangeBand extends SampleBase<{}, {}> {\r\n private sparklineInstance: SparklineComponent;\r\n private minElement: SliderComponent;\r\n private maxElement: SliderComponent;\r\n\r\n public load(args: ISparklineLoadedEventArgs): void {\r\n let theme: string = location.hash.split('/')[1];\r\n theme = theme ? theme : 'Material';\r\n args.sparkline.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)) as SparklineTheme;\r\n }\r\n\r\n private lineData: Object[] = [\r\n [0, 6, 4, 1, 3, 2, 5],\r\n [5, 4, 6, 3, 1, 2, 0],\r\n [6, 4, 0, 3, 2, 5, 1],\r\n [4, 6, 3, 0, 1, 2, 5],\r\n [3, 5, 6, 4, 0, 1, 2],\r\n [1, 3, 4, 2, 5, 0, 6],\r\n [2, 4, 0, 3, 5, 6, 1],\r\n [5, 4, 6, 3, 1, 2, 0],\r\n [0, 6, 4, 1, 3, 2, 5],\r\n [6, 4, 0, 3, 2, 5, 1],\r\n [4, 6, 3, 0, 1, 2, 5],\r\n [3, 5, 6, 4, 0, 1, 2],\r\n [1, 3, 4, 2, 5, 0, 6],\r\n [2, 4, 0, 3, 5, 6, 1],\r\n [5, 4, 6, 3, 1, 2, 0],\r\n [0, 6, 4, 1, 3, 2, 5],\r\n [6, 4, 0, 3, 2, 5, 1],\r\n [4, 6, 3, 0, 1, 2, 5],\r\n [2, 4, 0, 3, 5, 6, 1],\r\n [3, 5, 6, 4, 0, 1, 2],\r\n [1, 3, 4, 2, 5, 0, 6]\r\n ];\r\n\r\n private minChange = () => {\r\n let value: number = parseInt(this.minElement.value.toString(), 10);\r\n this.changeRangeMin(value);\r\n }\r\n\r\n private maxChange = () => {\r\n let value: number = parseInt(this.maxElement.value.toString(), 10);\r\n this.changeRangeMax(value);\r\n }\r\n\r\n private changeRangeMin: Function = (min: number): void => {\r\n for (let i: number = 1; i < 6; i++) {\r\n let first: SparklineComponent = getInstance('#sparkline2010' + i, Sparkline) as SparklineComponent;\r\n let second: SparklineComponent = getInstance('#sparkline2011' + i, Sparkline) as SparklineComponent;\r\n first.rangeBandSettings[0].startRange = min;\r\n second.rangeBandSettings[0].startRange = min;\r\n document.getElementById('range1').innerHTML = 'Range Band Min <span>' + this.minElement.value;\r\n first.refresh();\r\n second.refresh();\r\n }\r\n }\r\n\r\n private changeRangeMax: Function = (max: number): void => {\r\n for (let i: number = 1; i < 6; i++) {\r\n let first: SparklineComponent = getInstance('#sparkline2010' + i, Sparkline) as SparklineComponent;\r\n let second: SparklineComponent = getInstance('#sparkline2011' + i, Sparkline) as SparklineComponent;\r\n first.rangeBandSettings[0].endRange = max;\r\n second.rangeBandSettings[0].endRange = max;\r\n document.getElementById('range2').innerHTML = 'Range Band Max <span>' + this.maxElement.value;\r\n first.refresh();\r\n second.refresh();\r\n }\r\n }\r\n\r\n private renderSparkline(): void {\r\n\r\n let sparkline: SparklineModel = {\r\n height: '50px',\r\n width: '150px',\r\n lineWidth: 2,\r\n fill: '#0d3c9b',\r\n dataSource: this.lineData[0] as Number[],\r\n rangeBandSettings: [{ startRange: 1, endRange: 3, color: '#bfd4fc' }]\r\n };\r\n\r\n setTimeout(() => {\r\n\r\n for (let i: number = 1; i < 6; i++) {\r\n let first: SparklineComponent = new SparklineComponent(sparkline);\r\n first.dataSource = this.lineData[i] as number[];\r\n first.appendTo('#sparkline2010' + i);\r\n let second: SparklineComponent = new SparklineComponent(sparkline);\r\n second.dataSource = this.lineData[i + 5] as number[];\r\n second.appendTo('#sparkline2011' + i);\r\n }\r\n\r\n }, 500);\r\n }\r\n\r\n render() {\r\n return (\r\n <div className='control-pane'>\r\n <style>\r\n {SAMPLE_CSS}\r\n </style>\r\n\r\n <div className='col-md-8 control-section'>\r\n <div style={{ \"font-size\": \"16px\", \"textAlign\": \"center\" }}>\r\n Sales Growth Comparison with various Products\r\n </div>\r\n <GridComponent dataSource={products} resizing={this.renderSparkline.bind(this)} load={this.renderSparkline.bind(this)}\r\n height='400'\r\n allowSelection={false}\r\n enableColumnVirtualization={true}\r\n enableHover={true}>\r\n <ColumnsDirective>\r\n <ColumnDirective field='name' headerText='Name' textAlign='Right' width='50' />\r\n <ColumnDirective headerText='2010' template={(props: GridData) => {\r\n return (<div id={\"sparkline2010\" + props.id}></div>);\r\n }} textAlign='Center' width='100' />\r\n <ColumnDirective headerText='One Day Index' template={(props: GridData) => {\r\n return (<div id={\"sparkline2011\" + props.id}></div>);\r\n }} textAlign='Center' width='100' />\r\n </ColumnsDirective>\r\n </GridComponent>\r\n </div>\r\n <div className='col-md-4 property-section'>\r\n <PropertyPane title='Properties'>\r\n <table id='property' title='Properties' className='property-panel-table' style={{ width: '100%' }}>\r\n <tbody>\r\n <tr>\r\n <td>\r\n <div id='range1'>Range Band Min <span> 1</span> </div>\r\n </td>\r\n <td>\r\n <SliderComponent type='MinRange' change={this.minChange.bind(this)} ref={(slider) => this.minElement = slider} step={1} id=\"range-min\" value={1} min={0} max={6} style={{ width: '100px' }} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div id='range2'>Range Band Max <span> 3</span> </div>\r\n </td>\r\n <td>\r\n <SliderComponent type='MinRange' change={this.maxChange.bind(this)} ref={(slider) => this.maxElement = slider} step={1} id=\"range-max\" value={3} min={0} max={6} style={{ width: '100px' }} />\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\nReactDOM.render(<GridData />, document.getElementById('sample'));","app/sample-base.tsx":"import * as ReactDOM from 'react-dom';\r\nimport * as React from 'react';\r\nimport { RouteComponentProps } from 'react-router-dom';\r\nimport { enableRipple } from '@syncfusion/ej2-base';\r\n\r\nenableRipple((window as any).ripple);\r\nexport class SampleBase<P, S> extends React.PureComponent<RouteComponentProps<any> & P, S>{\r\n public rendereComplete(): void {\r\n /**custom render complete function */\r\n }\r\n componentDidMount(): void {\r\n setTimeout(() => {\r\n this.rendereComplete();\r\n }\r\n );\r\n }\r\n}"}