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 pathdefault-plnkr.json
More file actions
1 lines (1 loc) · 106 KB
/
default-plnkr.json
File metadata and controls
1 lines (1 loc) · 106 KB
1
{"index.css":"","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 · Default · 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\">Default</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 visualizes population, population density, population growth rate, and birth rate of various countries from 2005 to 2014.\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 a sparkline in a table. The color and type of the sparklines have been customized. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over the data points or tap on a data point in touch enabled devices.\n </p>\n\n <b>Injecting Module</b>\n\n <p>\n Sparkline component features are segregated into individual feature-wise modules. To use tooltip, inject the <code>SparklineTooltip</code> module using the <code>Sparkline.Inject(SparklineTooltip)</code> method.\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 * Default sample for sparkline\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { SparklineComponent, SparklineTheme, ISparklineLoadedEventArgs, Inject, SparklineTooltip } from '@syncfusion/ej2-react-charts';\r\nimport { SampleBase } from './sample-base';\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n\t\tpadding: 0px !important;\r\n }`;\r\nconst titleStyle = { \"width\": \"400px\", \"text-align\": \"center\", \"font-size\": \"17px\", \"margin\": \"auto\" };\r\nconst centerAlign = { \"text-align\": \"center\" };\r\nconst width100 = { width: \"100%\" };\r\nconst sparklineStyle1 = { \"width\": \"150px\", \"height\": \"50px\", \"text-align\": \"center\" };\r\n\r\nexport class Default extends SampleBase<{}, {}> {\r\n private sparklineInstance: SparklineComponent;\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 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=\"control-section\">\r\n <div id=\"spark-container\" className=\"row\" >\r\n <div className=\"cols-sample-area\" style={{ \"margin\": \"10\" }}>\r\n <div style={titleStyle}>Population comparision between various countries\r\n </div>\r\n <div style={{\"text-align\": \"center\"}}>(From 2005 to 2014)</div>\r\n <br />\r\n <br />\r\n <table style={width100}>\r\n <tbody>\r\n <tr>\r\n <td style={centerAlign}></td>\r\n <td>\r\n <div id=\"population\" style={sparklineStyle1}>\r\n <b>Population</b>\r\n </div>\r\n </td>\r\n <td>\r\n <div id=\"density\" style={sparklineStyle1}>\r\n <b>Population Density</b>\r\n </div>\r\n </td>\r\n <td>\r\n <div id=\"growth\" style={sparklineStyle1}>\r\n <b>Population Growth Rate</b>\r\n </div>\r\n </td>\r\n <td>\r\n <div id=\"birth\" style={sparklineStyle1}>\r\n <b>Birth Rate</b>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>Australia</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='a-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 20090440 },\r\n { x: 1, xval: '2006', yval: 20264080 },\r\n { x: 2, xval: '2007', yval: 20434180 },\r\n { x: 3, xval: '2008', yval: 21007310 },\r\n { x: 4, xval: '2009', yval: 21262640 },\r\n { x: 5, xval: '2010', yval: 21515750 },\r\n { x: 6, xval: '2011', yval: 21766710 },\r\n { x: 7, xval: '2012', yval: 22015580 },\r\n { x: 8, xval: '2013', yval: 22262500 },\r\n { x: 9, xval: '2014', yval: 22507620 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='a-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type='Area' valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 2.61 },\r\n { x: 1, xval: '2006', yval: 2.64 },\r\n { x: 2, xval: '2007', yval: 2.66 },\r\n { x: 3, xval: '2008', yval: 2.73 },\r\n { x: 4, xval: '2009', yval: 2.75 },\r\n { x: 5, xval: '2010', yval: 2.78 },\r\n { x: 6, xval: '2011', yval: 2.81 },\r\n { x: 7, xval: '2012', yval: 2.84 },\r\n { x: 8, xval: '2013', yval: 2.88 },\r\n { x: 9, xval: '2014', yval: 2.91 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='a-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: -1 },\r\n { x: 3, xval: '2008', yval: 1 },\r\n { x: 4, xval: '2009', yval: -1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: -1 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='a-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 12 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 12.26 },\r\n { x: 1, xval: '2006', yval: 12.14 },\r\n { x: 2, xval: '2007', yval: 12.02 },\r\n { x: 3, xval: '2008', yval: 12.55 },\r\n { x: 4, xval: '2009', yval: 12.47 },\r\n { x: 5, xval: '2010', yval: 12.39 },\r\n { x: 6, xval: '2011', yval: 12.33 },\r\n { x: 7, xval: '2012', yval: 12.28 },\r\n { x: 8, xval: '2013', yval: 12.23 },\r\n { x: 9, xval: '2014', yval: 12.19 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>Canada</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='c-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 32805040 },\r\n { x: 1, xval: '2006', yval: 33098930 },\r\n { x: 2, xval: '2007', yval: 33390140 },\r\n { x: 3, xval: '2008', yval: 33212700 },\r\n { x: 4, xval: '2009', yval: 33487210 },\r\n { x: 5, xval: '2010', yval: 33759740 },\r\n { x: 6, xval: '2011', yval: 34030590 },\r\n { x: 7, xval: '2012', yval: 34300080 },\r\n { x: 8, xval: '2013', yval: 34568210 },\r\n { x: 9, xval: '2014', yval: 34834840 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='c-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type='Area' valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 3.29 },\r\n { x: 1, xval: '2006', yval: 3.31 },\r\n { x: 2, xval: '2007', yval: 3.34 },\r\n { x: 3, xval: '2008', yval: 3.33 },\r\n { x: 4, xval: '2009', yval: 3.35 },\r\n { x: 5, xval: '2010', yval: 3.38 },\r\n { x: 6, xval: '2011', yval: 3.41 },\r\n { x: 7, xval: '2012', yval: 3.44 },\r\n { x: 8, xval: '2013', yval: 3.46 },\r\n { x: 9, xval: '2014', yval: 3.49 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='c-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: -1 },\r\n { x: 3, xval: '2008', yval: -1 },\r\n { x: 4, xval: '2009', yval: -1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: -1 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='c-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 10.20 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 10.84 },\r\n { x: 1, xval: '2006', yval: 10.78 },\r\n { x: 2, xval: '2007', yval: 10.75 },\r\n { x: 3, xval: '2008', yval: 10.29 },\r\n { x: 4, xval: '2009', yval: 10.28 },\r\n { x: 5, xval: '2010', yval: 10.28 },\r\n { x: 6, xval: '2011', yval: 10.28 },\r\n { x: 7, xval: '2012', yval: 10.28 },\r\n { x: 8, xval: '2013', yval: 10.28 },\r\n { x: 9, xval: '2014', yval: 10.29 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>China</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='ch-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1306314000 },\r\n { x: 1, xval: '2006', yval: 1313974000 },\r\n { x: 2, xval: '2007', yval: 1321852000 },\r\n { x: 3, xval: '2008', yval: 1330045000 },\r\n { x: 4, xval: '2009', yval: 1338613000 },\r\n { x: 5, xval: '2010', yval: 1330141000 },\r\n { x: 6, xval: '2011', yval: 1336718000 },\r\n { x: 7, xval: '2012', yval: 1343240000 },\r\n { x: 8, xval: '2013', yval: 1349586000 },\r\n { x: 9, xval: '2014', yval: 1355693000 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='ch-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 136.12 },\r\n { x: 1, xval: '2006', yval: 136.92 },\r\n { x: 2, xval: '2007', yval: 137.74 },\r\n { x: 3, xval: '2008', yval: 138.59 },\r\n { x: 4, xval: '2009', yval: 139.48 },\r\n { x: 5, xval: '2010', yval: 138.6 },\r\n { x: 6, xval: '2011', yval: 139.29 },\r\n { x: 7, xval: '2012', yval: 139.97 },\r\n { x: 8, xval: '2013', yval: 140.63 },\r\n { x: 9, xval: '2014', yval: 141.26 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='ch-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: 1 },\r\n { x: 2, xval: '2007', yval: 1 },\r\n { x: 3, xval: '2008', yval: 1 },\r\n { x: 4, xval: '2009', yval: 1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: 0 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='ch-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 12 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 13.14 },\r\n { x: 1, xval: '2006', yval: 13.25 },\r\n { x: 2, xval: '2007', yval: 13.45 },\r\n { x: 3, xval: '2008', yval: 13.71 },\r\n { x: 4, xval: '2009', yval: 14 },\r\n { x: 5, xval: '2010', yval: 12.17 },\r\n { x: 6, xval: '2011', yval: 12.29 },\r\n { x: 7, xval: '2012', yval: 12.31 },\r\n { x: 8, xval: '2013', yval: 12.25 },\r\n { x: 9, xval: '2014', yval: 12.17 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>France</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='f-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 60656180 },\r\n { x: 1, xval: '2006', yval: 60876140 },\r\n { x: 2, xval: '2007', yval: 63713930 },\r\n { x: 3, xval: '2008', yval: 64057790 },\r\n { x: 4, xval: '2009', yval: 64057790 },\r\n { x: 5, xval: '2010', yval: 64768390 },\r\n { x: 6, xval: '2011', yval: 65312250 },\r\n { x: 7, xval: '2012', yval: 65630690 },\r\n { x: 8, xval: '2013', yval: 65951610 },\r\n { x: 9, xval: '2014', yval: 66259010 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='f-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 110.88 },\r\n { x: 1, xval: '2006', yval: 111.28 },\r\n { x: 2, xval: '2007', yval: 99.02 },\r\n { x: 3, xval: '2008', yval: 99.56 },\r\n { x: 4, xval: '2009', yval: 99.56 },\r\n { x: 5, xval: '2010', yval: 100.66 },\r\n { x: 6, xval: '2011', yval: 101.45 },\r\n { x: 7, xval: '2012', yval: 101.94 },\r\n { x: 8, xval: '2013', yval: 102.44 },\r\n { x: 9, xval: '2014', yval: 102.92 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='f-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: 1 },\r\n { x: 3, xval: '2008', yval: -1 },\r\n { x: 4, xval: '2009', yval: -1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: -1 },\r\n { x: 7, xval: '2012', yval: 0 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='f-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 11.5 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 12.15 },\r\n { x: 1, xval: '2006', yval: 11.99 },\r\n { x: 2, xval: '2007', yval: 12.91 },\r\n { x: 3, xval: '2008', yval: 12.73 },\r\n { x: 4, xval: '2009', yval: 12.57 },\r\n { x: 5, xval: '2010', yval: 12.43 },\r\n { x: 6, xval: '2011', yval: 12.29 },\r\n { x: 7, xval: '2012', yval: 12.72 },\r\n { x: 8, xval: '2013', yval: 12.6 },\r\n { x: 9, xval: '2014', yval: 12.6 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>Germany</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='g-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 82431390 },\r\n { x: 1, xval: '2006', yval: 82422300 },\r\n { x: 2, xval: '2007', yval: 82400990 },\r\n { x: 3, xval: '2008', yval: 82369550 },\r\n { x: 4, xval: '2009', yval: 82329760 },\r\n { x: 5, xval: '2010', yval: 82282990 },\r\n { x: 6, xval: '2011', yval: 81471830 },\r\n { x: 7, xval: '2012', yval: 81305860 },\r\n { x: 8, xval: '2013', yval: 81147260 },\r\n { x: 9, xval: '2014', yval: 80996690 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='g-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 230.89 },\r\n { x: 1, xval: '2006', yval: 230.86 },\r\n { x: 2, xval: '2007', yval: 230.8 },\r\n { x: 3, xval: '2008', yval: 230.71 },\r\n { x: 4, xval: '2009', yval: 230.6 },\r\n { x: 5, xval: '2010', yval: 230.47 },\r\n { x: 6, xval: '2011', yval: 228.2 },\r\n { x: 7, xval: '2012', yval: 227.73 },\r\n { x: 8, xval: '2013', yval: 227.29 },\r\n { x: 9, xval: '2014', yval: 226.87 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='g-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 0 },\r\n { x: 1, xval: '2006', yval: 1 },\r\n { x: 2, xval: '2007', yval: -1 },\r\n { x: 3, xval: '2008', yval: -1 },\r\n { x: 4, xval: '2009', yval: -1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: 1 },\r\n { x: 7, xval: '2012', yval: 1 },\r\n { x: 8, xval: '2013', yval: 1 },\r\n { x: 9, xval: '2014', yval: 1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='g-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 8 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 8.33 },\r\n { x: 1, xval: '2006', yval: 8.25 },\r\n { x: 2, xval: '2007', yval: 8.2 },\r\n { x: 3, xval: '2008', yval: 8.18 },\r\n { x: 4, xval: '2009', yval: 8.18 },\r\n { x: 5, xval: '2010', yval: 8.21 },\r\n { x: 6, xval: '2011', yval: 8.3 },\r\n { x: 7, xval: '2012', yval: 8.33 },\r\n { x: 8, xval: '2013', yval: 8.37 },\r\n { x: 9, xval: '2014', yval: 8.42 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>India</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='i-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1080264000 },\r\n { x: 1, xval: '2006', yval: 1095352000 },\r\n { x: 2, xval: '2007', yval: 1129866000 },\r\n { x: 3, xval: '2008', yval: 1147996000 },\r\n { x: 4, xval: '2009', yval: 1166079000 },\r\n { x: 5, xval: '2010', yval: 1173108000 },\r\n { x: 6, xval: '2011', yval: 1189173000 },\r\n { x: 7, xval: '2012', yval: 1205074000 },\r\n { x: 8, xval: '2013', yval: 1220800000 },\r\n { x: 9, xval: '2014', yval: 1236345000 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='i-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 328.59 },\r\n { x: 1, xval: '2006', yval: 333.18 },\r\n { x: 2, xval: '2007', yval: 343.68 },\r\n { x: 3, xval: '2008', yval: 349.19 },\r\n { x: 4, xval: '2009', yval: 354.73 },\r\n { x: 5, xval: '2010', yval: 356.86 },\r\n { x: 6, xval: '2011', yval: 361.75 },\r\n { x: 7, xval: '2012', yval: 366.59 },\r\n { x: 8, xval: '2013', yval: 371.37 },\r\n { x: 9, xval: '2014', yval: 376.1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='i-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: 1 },\r\n { x: 3, xval: '2008', yval: -1 },\r\n { x: 4, xval: '2009', yval: -1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: -1 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='i-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 19 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 22.32 },\r\n { x: 1, xval: '2006', yval: 22.01 },\r\n { x: 2, xval: '2007', yval: 22.69 },\r\n { x: 3, xval: '2008', yval: 22.22 },\r\n { x: 4, xval: '2009', yval: 21.76 },\r\n { x: 5, xval: '2010', yval: 21.34 },\r\n { x: 6, xval: '2011', yval: 20.97 },\r\n { x: 7, xval: '2012', yval: 20.6 },\r\n { x: 8, xval: '2013', yval: 20.24 },\r\n { x: 9, xval: '2014', yval: 19.89 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>Russia</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='r-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 143420300 },\r\n { x: 1, xval: '2006', yval: 142893500 },\r\n { x: 2, xval: '2007', yval: 141377800 },\r\n { x: 3, xval: '2008', yval: 140702100 },\r\n { x: 4, xval: '2009', yval: 140041200 },\r\n { x: 5, xval: '2010', yval: 139390200 },\r\n { x: 6, xval: '2011', yval: 138739900 },\r\n { x: 7, xval: '2012', yval: 142517700 },\r\n { x: 8, xval: '2013', yval: 142500500 },\r\n { x: 9, xval: '2014', yval: 142470300 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='r-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 8.4 },\r\n { x: 1, xval: '2006', yval: 8.37 },\r\n { x: 2, xval: '2007', yval: 8.28 },\r\n { x: 3, xval: '2008', yval: 8.24 },\r\n { x: 4, xval: '2009', yval: 8.19 },\r\n { x: 5, xval: '2010', yval: 8.15 },\r\n { x: 6, xval: '2011', yval: 8.11 },\r\n { x: 7, xval: '2012', yval: 8.34 },\r\n { x: 8, xval: '2013', yval: 8.33 },\r\n { x: 9, xval: '2014', yval: 8.33 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='r-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: 0 },\r\n { x: 2, xval: '2007', yval: -1 },\r\n { x: 3, xval: '2008', yval: 1 },\r\n { x: 4, xval: '2009', yval: 0 },\r\n { x: 5, xval: '2010', yval: 0 },\r\n { x: 6, xval: '2011', yval: 0 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: 1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='r-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 9.5 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 9.8 },\r\n { x: 1, xval: '2006', yval: 9.95 },\r\n { x: 2, xval: '2007', yval: 10.92 },\r\n { x: 3, xval: '2008', yval: 11.03 },\r\n { x: 4, xval: '2009', yval: 11.1 },\r\n { x: 5, xval: '2010', yval: 11.11 },\r\n { x: 6, xval: '2011', yval: 11.05 },\r\n { x: 7, xval: '2012', yval: 10.94 },\r\n { x: 8, xval: '2013', yval: 12.11 },\r\n { x: 9, xval: '2014', yval: 11.87 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>Sweden</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='sw-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 9001774 },\r\n { x: 1, xval: '2006', yval: 9016596 },\r\n { x: 2, xval: '2007', yval: 9031088 },\r\n { x: 3, xval: '2008', yval: 9045389 },\r\n { x: 4, xval: '2009', yval: 9059651 },\r\n { x: 5, xval: '2010', yval: 9074055 },\r\n { x: 6, xval: '2011', yval: 9074055 },\r\n { x: 7, xval: '2012', yval: 9103788 },\r\n { x: 8, xval: '2013', yval: 9119423 },\r\n { x: 9, xval: '2014', yval: 9723809 },\r\n\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='sw-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 20.01 },\r\n { x: 1, xval: '2006', yval: 20.04 },\r\n { x: 2, xval: '2007', yval: 20.07 },\r\n { x: 3, xval: '2008', yval: 20.1 },\r\n { x: 4, xval: '2009', yval: 20.12 },\r\n { x: 5, xval: '2010', yval: 20.15 },\r\n { x: 6, xval: '2011', yval: 20.18 },\r\n { x: 7, xval: '2012', yval: 20.22 },\r\n { x: 8, xval: '2013', yval: 20.25 },\r\n { x: 9, xval: '2014', yval: 21.59 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='sw-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: 0 },\r\n { x: 3, xval: '2008', yval: 0 },\r\n { x: 4, xval: '2009', yval: 0 },\r\n { x: 5, xval: '2010', yval: 0 },\r\n { x: 6, xval: '2011', yval: 0 },\r\n { x: 7, xval: '2012', yval: 1 },\r\n { x: 8, xval: '2013', yval: 1 },\r\n { x: 9, xval: '2014', yval: 1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='sw-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 10 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 10.36 },\r\n { x: 1, xval: '2006', yval: 10.27 },\r\n { x: 2, xval: '2007', yval: 10.2 },\r\n { x: 3, xval: '2008', yval: 10.15 },\r\n { x: 4, xval: '2009', yval: 10.13 },\r\n { x: 5, xval: '2010', yval: 10.14 },\r\n { x: 6, xval: '2011', yval: 10.18 },\r\n { x: 7, xval: '2012', yval: 10.24 },\r\n { x: 8, xval: '2013', yval: 10.33 },\r\n { x: 9, xval: '2014', yval: 11.92 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>United Kingdom</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='uk-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 60441460 },\r\n { x: 1, xval: '2006', yval: 60609150 },\r\n { x: 2, xval: '2007', yval: 60776240 },\r\n { x: 3, xval: '2008', yval: 60943910 },\r\n { x: 4, xval: '2009', yval: 61113200 },\r\n { x: 5, xval: '2010', yval: 62348450 },\r\n { x: 6, xval: '2011', yval: 62698360 },\r\n { x: 7, xval: '2012', yval: 63047160 },\r\n { x: 8, xval: '2013', yval: 63395580 },\r\n { x: 9, xval: '2014', yval: 63742980 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='uk-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 246.88 },\r\n { x: 1, xval: '2006', yval: 247.57 },\r\n { x: 2, xval: '2007', yval: 248.25 },\r\n { x: 3, xval: '2008', yval: 248.93 },\r\n { x: 4, xval: '2009', yval: 250.86 },\r\n { x: 5, xval: '2010', yval: 255.94 },\r\n { x: 6, xval: '2011', yval: 257.37 },\r\n { x: 7, xval: '2012', yval: 258.8 },\r\n { x: 8, xval: '2013', yval: 260.23 },\r\n { x: 9, xval: '2014', yval: 261.66 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='uk-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: 0 },\r\n { x: 2, xval: '2007', yval: 0 },\r\n { x: 3, xval: '2008', yval: 0 },\r\n { x: 4, xval: '2009', yval: 0 },\r\n { x: 5, xval: '2010', yval: 1 },\r\n { x: 6, xval: '2011', yval: 0 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: 0 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='uk-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 10 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 10.78 },\r\n { x: 1, xval: '2006', yval: 10.71 },\r\n { x: 2, xval: '2007', yval: 10.67 },\r\n { x: 3, xval: '2008', yval: 10.65 },\r\n { x: 4, xval: '2009', yval: 10.65 },\r\n { x: 5, xval: '2010', yval: 12.34 },\r\n { x: 6, xval: '2011', yval: 12.29 },\r\n { x: 7, xval: '2012', yval: 12.27 },\r\n { x: 8, xval: '2013', yval: 12.26 },\r\n { x: 9, xval: '2014', yval: 12.22 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"80px\" }}>\r\n <td style={centerAlign}><b>United Sates</b></td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='us-spark1-container'\r\n height='50px' width='150px' lineWidth={2} type='Line' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n format={\"n\"}\r\n useGroupingSeparator={true}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n visible: true,\r\n color: '#fc5070',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 295734100 },\r\n { x: 1, xval: '2006', yval: 298444200 },\r\n { x: 2, xval: '2007', yval: 301139900 },\r\n { x: 3, xval: '2008', yval: 303824600 },\r\n { x: 4, xval: '2009', yval: 307212100 },\r\n { x: 5, xval: '2010', yval: 310232900 },\r\n { x: 6, xval: '2011', yval: 313232000 },\r\n { x: 7, xval: '2012', yval: 313847500 },\r\n { x: 8, xval: '2013', yval: 316668600 },\r\n { x: 9, xval: '2014', yval: 318892100 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='us-spark2-container'\r\n height='50px' width='150px' lineWidth={2} type={'Area'} valueType='Category'\r\n fill='#3C78EF' opacity={1} border={{ color: '#fc5070', width: 2 }} negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 30.71 },\r\n { x: 1, xval: '2006', yval: 30.99 },\r\n { x: 2, xval: '2007', yval: 30.65 },\r\n { x: 3, xval: '2008', yval: 30.92 },\r\n { x: 4, xval: '2009', yval: 31.26 },\r\n { x: 5, xval: '2010', yval: 31.57 },\r\n { x: 6, xval: '2011', yval: 31.88 },\r\n { x: 7, xval: '2012', yval: 31.94 },\r\n { x: 8, xval: '2013', yval: 32.23 },\r\n { x: 9, xval: '2014', yval: 32.45 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='us-spark3-container'\r\n height='50px' width='150px' lineWidth={2} type='WinLoss' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070'\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 1 },\r\n { x: 1, xval: '2006', yval: -1 },\r\n { x: 2, xval: '2007', yval: -1 },\r\n { x: 3, xval: '2008', yval: -1 },\r\n { x: 4, xval: '2009', yval: 1 },\r\n { x: 5, xval: '2010', yval: -1 },\r\n { x: 6, xval: '2011', yval: -1 },\r\n { x: 7, xval: '2012', yval: -1 },\r\n { x: 8, xval: '2013', yval: -1 },\r\n { x: 9, xval: '2014', yval: -1 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} id='us-spark4-container'\r\n height='50px' width='150px' lineWidth={2} type='Column' valueType='Category'\r\n fill='#3C78EF' negativePointColor='#fc5070' axisSettings={{ minY: 13 }}\r\n tooltipSettings={{\r\n visible: true, format: '${xval} : ${yval}',\r\n }}\r\n dataSource={[\r\n { x: 0, xval: '2005', yval: 14.14 },\r\n { x: 1, xval: '2006', yval: 14.14 },\r\n { x: 2, xval: '2007', yval: 14.16 },\r\n { x: 3, xval: '2008', yval: 14.18 },\r\n { x: 4, xval: '2009', yval: 13.82 },\r\n { x: 5, xval: '2010', yval: 13.83 },\r\n { x: 6, xval: '2011', yval: 13.83 },\r\n { x: 7, xval: '2012', yval: 13.68 },\r\n { x: 8, xval: '2013', yval: 13.66 },\r\n { x: 9, xval: '2014', yval: 13.42 },\r\n ]}\r\n xName='xval' yName='yval'>\r\n <Inject services={[SparklineTooltip]} />\r\n </SparklineComponent>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <div style={{ \"float\": \"right\", \"margin-right\": \"10px\" }}>Source:\r\n <a href=\"https://www.indexmundi.com/g/g.aspx?v=21&v=21000&v=24&v=25&v=27&c=as&c=ch&c=fr&c=gm&c=in&c=rs&c=sn&c=sz&c=uk&c=us&l=en/\" target=\"_blank\"> www.indexmundi.com</a>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}\nReactDOM.render(<Default />, 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}"}