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 pathcustomization-plnkr.json
More file actions
1 lines (1 loc) · 49.7 KB
/
customization-plnkr.json
File metadata and controls
1 lines (1 loc) · 49.7 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","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 · Customization · 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\">Customization</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 various 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 various customization options available in sparklines. 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 \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 * Customization samples 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 { CheckBoxComponent, ChangeEventArgs } from \"@syncfusion/ej2-react-buttons\";\r\nimport { SparklineComponent, SparklineTheme, VisibleType, ISparklineLoadedEventArgs, SparklineTooltip, Inject } 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\n #axis > * {\r\n padding: 0px !important;\r\n }`;\r\nconst slidercss = ` \r\n .content-wrapper {\r\n width: 40%;\r\n margin: 0 auto;\r\n min-width: 170px;\r\n }`;\r\n\r\nexport class Customization extends SampleBase<{}, {}> {\r\n private percentage: SparklineComponent;\r\n private sales: SparklineComponent;\r\n private sparklineElement: DropDownListComponent;\r\n private allElement: CheckBoxComponent;\r\n private negativeElement: CheckBoxComponent;\r\n private firstElement: CheckBoxComponent;\r\n private lastElement: CheckBoxComponent;\r\n private highElement: CheckBoxComponent;\r\n private lowElement: CheckBoxComponent;\r\n private markerElement: CheckBoxComponent;\r\n private datalabelElement: CheckBoxComponent;\r\n private tooltipElement: CheckBoxComponent;\r\n private tracklineElement: CheckBoxComponent;\r\n private axislineElement: CheckBoxComponent;\r\n private axisElement: SliderComponent;\r\n\r\n private droplist: { [key: string]: Object }[] = [\r\n { value: 'Sales Percentage' },\r\n { value: 'Sales Count' },\r\n ];\r\n\r\n private sparklineChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n if (element1.value === 'Sales Percentage') {\r\n this.axisElement.value = this.percentage.axisSettings.value;\r\n this.axisElement.min = 0;\r\n this.axisElement.max = 10;\r\n } else {\r\n this.axisElement.value = this.sales.axisSettings.value;\r\n this.axisElement.min = 0;\r\n this.axisElement.max = 5000000;\r\n }\r\n if ((element1.value === 'Sales Percentage' && this.percentage.markerSettings.visible.length) ||\r\n (element1.value === 'Sales Count' && this.sales.markerSettings.visible.length)) {\r\n this.markerElement.checked = true;\r\n } else {\r\n this.markerElement.checked = false;\r\n }\r\n\r\n this.markerChange();\r\n\r\n if ((element1.value === 'Sales Percentage' && this.percentage.dataLabelSettings.visible.length) ||\r\n (element1.value === 'Sales Count' && this.sales.dataLabelSettings.visible.length)) {\r\n this.datalabelElement.checked = true;\r\n } else {\r\n this.datalabelElement.checked = false;\r\n }\r\n\r\n let all: CheckBoxComponent = this.allElement;\r\n let negative: CheckBoxComponent = this.negativeElement;\r\n let first: CheckBoxComponent = this.firstElement;\r\n let last: CheckBoxComponent = this.lastElement;\r\n let high: CheckBoxComponent = this.highElement;\r\n let low: CheckBoxComponent = this.lowElement;\r\n let label: CheckBoxComponent = this.datalabelElement;\r\n let marker: CheckBoxComponent = this.markerElement;\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n\r\n if (!marker.checked && !label.checked) {\r\n all.checked = false;\r\n negative.checked = false;\r\n first.checked = false;\r\n last.checked = false;\r\n high.checked = false;\r\n low.checked = false;\r\n }\r\n if (marker.checked) {\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n all.checked = spark.markerSettings.visible.indexOf('All') > -1;\r\n negative.checked = spark.markerSettings.visible.indexOf('Negative') > -1;\r\n first.checked = spark.markerSettings.visible.indexOf('Start') > -1;\r\n last.checked = spark.markerSettings.visible.indexOf('End') > -1;\r\n high.checked = spark.markerSettings.visible.indexOf('High') > -1;\r\n low.checked = spark.markerSettings.visible.indexOf('Low') > -1;\r\n }\r\n if (label.checked) {\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n all.checked = spark.dataLabelSettings.visible.indexOf('All') > -1;\r\n negative.checked = spark.dataLabelSettings.visible.indexOf('Negative') > -1;\r\n first.checked = spark.dataLabelSettings.visible.indexOf('Start') > -1;\r\n last.checked = spark.dataLabelSettings.visible.indexOf('End') > -1;\r\n high.checked = spark.dataLabelSettings.visible.indexOf('High') > -1;\r\n low.checked = spark.dataLabelSettings.visible.indexOf('Low') > -1;\r\n }\r\n\r\n this.datalabelChange();\r\n\r\n if ((element1.value === 'Sales Percentage' && this.percentage.tooltipSettings.visible === true) ||\r\n (element1.value === 'Sales Count' && this.sales.tooltipSettings.visible === true)) {\r\n this.tooltipElement.checked = true;\r\n } else {\r\n this.tooltipElement.checked = false;\r\n }\r\n\r\n this.tooltipChange();\r\n\r\n if ((element1.value === 'Sales Percentage' && this.percentage.tooltipSettings.trackLineSettings.visible === true) ||\r\n (element1.value === 'Sales Count' && this.sales.tooltipSettings.trackLineSettings.visible === true)) {\r\n this.tracklineElement.checked = true;\r\n } else {\r\n this.tracklineElement.checked = false;\r\n }\r\n\r\n this.tracklineChange();\r\n\r\n if ((element1.value === 'Sales Percentage' && this.percentage.axisSettings.lineSettings.visible === true) ||\r\n (element1.value === 'Sales Count' && this.sales.axisSettings.lineSettings.visible === true)) {\r\n this.axislineElement.checked = true;\r\n } else {\r\n this.axislineElement.checked = false;\r\n }\r\n\r\n this.axislineChange();\r\n\r\n if (element1.value === 'Sales Percentage' && this.percentage.axisSettings.value !== 0) {\r\n this.axisElement.value = this.percentage.axisSettings.value;\r\n this.axisElement.min = 0;\r\n this.axisElement.max = 10;\r\n document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + this.percentage.axisSettings.value;\r\n }\r\n if (element1.value === 'Sales Count' && this.sales.axisSettings.value !== 0) {\r\n this.axisElement.value = this.sales.axisSettings.value;\r\n this.axisElement.min = 0;\r\n this.axisElement.max = 5000000;\r\n document.getElementById('axisval').innerHTML = 'Axis value: <span> ' + this.sales.axisSettings.value;\r\n }\r\n\r\n this.axisChange();\r\n\r\n all.checked = !(negative.checked || high.checked || low.checked || first.checked || last.checked);\r\n negative.disabled = high.disabled = low.disabled = first.disabled = last.disabled = all.checked;\r\n }\r\n\r\n private allColorChange() {\r\n let negative: CheckBoxComponent = this.negativeElement;\r\n let first: CheckBoxComponent = this.firstElement;\r\n let last: CheckBoxComponent = this.lastElement;\r\n let high: CheckBoxComponent = this.highElement;\r\n let low: CheckBoxComponent = this.lowElement;\r\n\r\n if (this.allElement.checked == true) {\r\n this.negativeElement.disabled = true;\r\n this.firstElement.disabled = true;\r\n this.lastElement.disabled = true;\r\n this.highElement.disabled = true;\r\n this.lowElement.disabled = true;\r\n } else {\r\n this.negativeElement.disabled = false;\r\n this.firstElement.disabled = false;\r\n this.lastElement.disabled = false;\r\n this.highElement.disabled = false;\r\n this.lowElement.disabled = false;\r\n }\r\n\r\n let marker: CheckBoxComponent = this.markerElement;\r\n let label: CheckBoxComponent = this.datalabelElement;\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.markerSettings.visible = (true && marker.checked) ? ['All'] : (marker.checked) ? this.getVisible() : [];\r\n spark.dataLabelSettings.visible = (true && label.checked) ? ['All'] : (label.checked) ? this.getVisible() : [];\r\n spark.refresh();\r\n }\r\n\r\n private colorChange() {\r\n this.processMarkerLabel();\r\n }\r\n\r\n private processMarkerLabel() {\r\n let marker: CheckBoxComponent = this.markerElement;\r\n let label: CheckBoxComponent = this.datalabelElement;\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n if (marker.checked) {\r\n spark.markerSettings.visible = this.getVisible();\r\n spark.refresh();\r\n }\r\n if (label.checked) {\r\n spark.dataLabelSettings.visible = this.getVisible();\r\n spark.refresh();\r\n }\r\n }\r\n\r\n private getVisible(): VisibleType[] {\r\n let visible: VisibleType[] = [];\r\n if (this.allElement.checked)\r\n return ['All'];\r\n else {\r\n if (this.negativeElement.checked)\r\n visible.push(\"Negative\");\r\n if (this.firstElement.checked)\r\n visible.push(\"Start\");\r\n if (this.lastElement.checked)\r\n visible.push(\"End\");\r\n if (this.firstElement.checked)\r\n visible.push(\"High\");\r\n if (this.lowElement.checked)\r\n visible.push(\"Low\");\r\n }\r\n return visible;\r\n }\r\n\r\n private markerChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.markerSettings.visible = this.markerElement.checked ? this.getVisible() : [];\r\n spark.refresh();\r\n }\r\n\r\n private datalabelChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.dataLabelSettings.visible = this.datalabelElement.checked ? this.getVisible() : [];\r\n spark.refresh();\r\n }\r\n\r\n private tooltipChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.tooltipSettings.visible = this.tooltipElement.checked;\r\n spark.tooltipSettings.format = '${xval}: ${yval}';\r\n spark.refresh();\r\n }\r\n\r\n private tracklineChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.tooltipSettings.trackLineSettings.visible = this.tracklineElement.checked;\r\n spark.tooltipSettings.trackLineSettings.color = 'red';\r\n spark.tooltipSettings.trackLineSettings.width = 1;\r\n spark.refresh();\r\n }\r\n\r\n private axislineChange() {\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.axisSettings.lineSettings.visible = this.axislineElement.checked;\r\n spark.axisSettings.lineSettings.color = 'red';\r\n spark.axisSettings.lineSettings.width = 2;\r\n spark.refresh();\r\n }\r\n\r\n private axisChange() {\r\n let value: number = parseInt(this.axisElement.value.toString(), 10);\r\n let element1: HTMLInputElement = (document.getElementById('spark') as HTMLInputElement);\r\n let spark: SparklineComponent = element1.value === 'Sales Percentage' ? this.percentage : this.sales;\r\n spark.axisSettings.value = value;\r\n document.getElementById('axisval').innerHTML = \"Axis Value <span>\" + value;\r\n spark.refresh();\r\n }\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 render() {\r\n return (\r\n <div className='control-pane'>\r\n <style>\r\n {SAMPLE_CSS}\r\n </style>\r\n <div className=\"col-lg-8 control-section\">\r\n <div id=\"spark-container\" className=\"row\">\r\n <div className=\"cols-sample-area\" style={{ \"margin\": \"auto\", \"textAlign\": \"center\" }}>\r\n <p style={{ \"font-size\": \"18px\" }}> Worldwide car sales by brand - 2017</p>\r\n <table style={{ \"width\": \"100%\", \"margin\": \"auto\" }}>\r\n <tbody>\r\n <tr>\r\n <td style={{ \"margin\": \"auto\" }}>Sales Percentage</td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} ref={m => this.percentage = m} id='spark1-container'\r\n height='200px' width='200px' lineWidth={1} type='Column' valueType='Category'\r\n tooltipSettings={{\r\n format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n color: 'red',\r\n width: 1\r\n }\r\n }}\r\n markerSettings={{\r\n fill: 'red',\r\n size: 5\r\n }}\r\n axisSettings={{\r\n lineSettings: {\r\n color: 'red',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: 'AUDI', yval: 1 },\r\n { x: 1, xval: 'BMW', yval: 5 },\r\n { x: 2, xval: 'BUICK', yval: -1 },\r\n { x: 3, xval: 'CETROEN', yval: -6 },\r\n { x: 4, xval: 'CHEVROLET', yval: 0 },\r\n { x: 5, xval: 'FIAT', yval: 1 },\r\n { x: 6, xval: 'FORD', yval: -2 },\r\n { x: 7, xval: 'HONDA', yval: 7 },\r\n { x: 8, xval: 'HYUNDAI', yval: -9 },\r\n { x: 9, xval: 'JEEP', yval: 0 },\r\n { x: 10, xval: 'KIA', yval: -10 },\r\n { x: 11, xval: 'MAZDA', yval: 3 },\r\n { x: 12, xval: 'MERCEDES', yval: 13 },\r\n { x: 13, xval: 'NISSAN', yval: 5 },\r\n { x: 14, xval: 'OPEL/VHALL', yval: -6 },\r\n { x: 15, xval: 'PEUGEOT', yval: 0 },\r\n { x: 16, xval: 'RENAULT', yval: 7 },\r\n { x: 17, xval: 'SKODA', yval: 5 },\r\n { x: 18, xval: 'SUBARU', yval: 5 },\r\n { x: 19, xval: 'SUZUKI', yval: 11 },\r\n { x: 20, xval: 'TOYOTA', yval: 5 },\r\n { x: 21, xval: 'VOLKSWAGEN', yval: 3 },\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>\r\n <td style={{ \"margin\": \"auto\" }}>Sales Count</td>\r\n <td>\r\n <SparklineComponent load={this.load.bind(this)} ref={m => this.sales = m} id='spark2-container'\r\n height='200px' width='200px' lineWidth={1} type='Column' valueType='Category'\r\n tooltipSettings={{\r\n format: '${xval} : ${yval}',\r\n trackLineSettings: {\r\n color: 'red',\r\n width: 1\r\n }\r\n }}\r\n markerSettings={{\r\n fill: 'red',\r\n size: 5\r\n }}\r\n axisSettings={{\r\n lineSettings: {\r\n color: 'red',\r\n width: 2\r\n }\r\n }}\r\n dataSource={[\r\n { x: 0, xval: 'AUDI', yval: 1847613 },\r\n { x: 1, xval: 'BMW', yval: 2030331 },\r\n { x: 2, xval: 'BUICK', yval: 1465823 },\r\n { x: 3, xval: 'CETROEN', yval: 999888 },\r\n { x: 4, xval: 'CHEVROLET', yval: 3857388 },\r\n { x: 5, xval: 'FIAT', yval: 1503806 },\r\n { x: 6, xval: 'FORD', yval: 5953122 },\r\n { x: 7, xval: 'HONDA', yval: 4967689 },\r\n { x: 8, xval: 'HYUNDAI', yval: 3951176 },\r\n { x: 9, xval: 'JEEP', yval: 1390130 },\r\n { x: 10, xval: 'KIA', yval: 2511293 },\r\n { x: 11, xval: 'MAZDA', yval: 1495557 },\r\n { x: 12, xval: 'MERCEDES', yval: 2834181 },\r\n { x: 13, xval: 'NISSAN', yval: 4834694 },\r\n { x: 14, xval: 'OPEL/VHALL', yval: 996559 },\r\n { x: 15, xval: 'PEUGEOT', yval: 1590300 },\r\n { x: 16, xval: 'RENAULT', yval: 2275227 },\r\n { x: 17, xval: 'SKODA', yval: 1180672 },\r\n { x: 18, xval: 'SUBARU', yval: 1050390 },\r\n { x: 19, xval: 'SUZUKI', yval: 2891415 },\r\n { x: 20, xval: 'TOYOTA', yval: 7843423 },\r\n { x: 21, xval: 'VOLKSWAGEN', yval: 6639250 },\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 style={{ \"float\": \"right\", \"margin-right\": \"10px\" }}>Source: <a href=\" http://carsalesbase.com/global-car-sales-2017\" target=\"_blank\">carsalesbase.com</a>\r\n </div>\r\n </div>\r\n\r\n\r\n <div className='col-lg-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 style={{ \"height\": \"30px\" }}>\r\n <td>\r\n <div> Sparkline </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <DropDownListComponent id=\"spark\" width=\"100%\" index={0} change={this.sparklineChange.bind(this)} ref={d => this.sparklineElement = d} dataSource={this.droplist} fields={{ text: 'value', value: 'value' }} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Special Points </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <table>\r\n <tr>\r\n <td style={{ \"padding\": \"5px\" }}>All</td>\r\n <td>\r\n <CheckBoxComponent change={this.allColorChange.bind(this)} ref={d => this.allElement = d} id='all' checked={true} />\r\n </td>\r\n <td style={{ \"padding\": \"5px\" }}>Negative</td>\r\n <td>\r\n <CheckBoxComponent change={this.colorChange.bind(this)} ref={d => this.negativeElement = d} id='negative' disabled={true} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ \"padding\": \"5px\" }}>First</td>\r\n <td>\r\n <CheckBoxComponent change={this.colorChange.bind(this)} ref={d => this.firstElement = d} id='first' disabled={true} />\r\n </td>\r\n <td style={{ \"padding\": \"5px\" }}>Last</td>\r\n <td>\r\n <CheckBoxComponent change={this.colorChange.bind(this)} ref={d => this.lastElement = d} id='last' disabled={true} />\r\n </td>\r\n </tr>\r\n <tr>\r\n <td style={{ \"padding\": \"5px\" }}>High</td>\r\n <td>\r\n <CheckBoxComponent change={this.colorChange.bind(this)} ref={d => this.highElement = d} id='high' disabled={true} />\r\n </td>\r\n <td style={{ \"padding\": \"5px\" }}>Low</td>\r\n <td>\r\n <CheckBoxComponent change={this.colorChange.bind(this)} ref={d => this.lowElement = d} id='low' disabled={true} />\r\n </td>\r\n </tr>\r\n </table>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Marker </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <CheckBoxComponent change={this.markerChange.bind(this)} ref={d => this.markerElement = d} id='marker' disabled={false} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Data Label </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <CheckBoxComponent change={this.datalabelChange.bind(this)} ref={d => this.datalabelElement = d} id='datalabel' disabled={false} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Tooltip </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <CheckBoxComponent change={this.tooltipChange.bind(this)} ref={d => this.tooltipElement = d} id='tooltip' disabled={false} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Track Line </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <CheckBoxComponent change={this.tracklineChange.bind(this)} ref={d => this.tracklineElement = d} id='trackline' disabled={false} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ \"height\": \"30px\" }}>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div> Axis Line </div>\r\n </td>\r\n <td style={{ \"width\": \"50%\" }}>\r\n <div>\r\n <CheckBoxComponent change={this.axislineChange.bind(this)} ref={d => this.axislineElement = d} id='axis1' disabled={false} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr>\r\n <td>\r\n <div id='axisval'>Axis Value <span> 0</span> </div>\r\n </td>\r\n <td>\r\n <div className=\"content-wrapper\">\r\n <style> {slidercss} </style>\r\n <SliderComponent change={this.axisChange.bind(this)} ref={(slider) => this.axisElement = slider} type='MinRange' step={1} id=\"axis\" value={0} min={0} max={10} style={{ width: '100px' }} disabled={false} />\r\n </div>\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(<Customization />, 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}"}