print-plnkr.json

{"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","treemap-data/product":"/**\r\n * \r\n */\r\n//tslint:disable\r\nexport let ProductSale: Object[] =[\r\n    {Product:\" Samsung\", Percentage:22},\r\n    {Product:\"Apple\", Percentage:11.2},\r\n    {Product:\"Huawei\", Percentage:10.5},\r\n    {Product:\"Oppo\", Percentage:8.4},\r\n    {Product:\"Vivo\", Percentage:6.6},\r\n    {Product:\"Xiaomi\", Percentage:6.3},\r\n    {Product:\"LG\", Percentage:3.6},\r\n    {Product:\"ZTE\", Percentage:3.3},\r\n    {Product:\"Lenovo\", Percentage:3.2},\r\n    {Product:\"Alcate\", Percentage:1.3}\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>Treemap · Print · 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/treemap\">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/treemap/default.html\"><span>Treemap</span></a></div>\r\n                        <div class=\"category-seperator sb-icons\"> / </div>\r\n                        <div class=\"crumb-sample\">Print</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\t\t\t\t\t<p>\n\t\t\t\t\t\tThis sample depicts the top 10 best-selling smartphone brands. Print and export options have been enabled in this sample.\n            </p>\n\t\t\t\t\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\t\t\t\t\t<p>\n\t\t\t\t\t\tIn this example, you can see how to export and print the rendered TreeMap. The TreeMap can be exported to JPEG, PNG, SVG, and PDF formats.\n\t\t\t\t\t</p>\n\t\t\t\t\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 * Print and Export sample for treemap\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport {\r\n\tTreeMapComponent, ExportType, Inject, TreeMapTooltip,\r\n\tILoadedEventArgs, TreeMapTheme\r\n} from '@syncfusion/ej2-react-treemap';\r\nimport { ProductSale } from '../treemap-data/product';\r\nimport { ButtonComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { PropertyPane } from './property-pane';\r\nimport { SampleBase } from './sample-base';\r\nconst SAMPLE_CSS = `\r\n    .control-fluid {\r\n\t\tpadding: 0px !important;\r\n    }\r\n\t#btn-control {\r\n        width: 100%;\r\n        text-align: center;\r\n    }\r\n\t.e-play-icon::before {\r\n        content: \"\\\\e813\";\r\n    }`;\r\n\r\nexport class Print extends SampleBase<{}, {}> {\r\n\tprivate treemapInstance: TreeMapComponent;\r\n\tprivate mode: DropDownListComponent;\r\n\tprivate nameElement: HTMLInputElement;\r\n\r\n\tprivate droplist: { [key: string]: Object }[] = [\r\n\t\t{ text: 'JPEG', value: 'JPEG' },\r\n\t\t{ text: 'PNG', value: 'PNG' },\r\n\t\t{ text: 'SVG', value: 'SVG' },\r\n\t\t{ text: 'PF', value: 'PDF' },\r\n\t];\r\n\r\n\tpublic onClick2(e: Event): void {\r\n\t\tthis.treemapInstance.print();\r\n\t}\r\n\tpublic onClick1(e: Event): void {\r\n\t\tlet fileName: string = (document.getElementById('fileName') as HTMLInputElement).value;\r\n\t\tthis.treemapInstance.export((this.mode.value as ExportType), fileName);\r\n\t}\r\n\r\n\tpublic load(args: ILoadedEventArgs): void {\r\n\t\tlet theme: string = location.hash.split('/')[1];\r\n\t\ttheme = theme ? theme : 'Material';\r\n\t\targs.treemap.theme = (theme.charAt(0).toUpperCase() + theme.slice(1)) as TreeMapTheme;\r\n\t}\r\n\trender() {\r\n\t\treturn (\r\n\t\t\t<div className='control-pane'>\r\n\t\t\t\t<style>\r\n\t\t\t\t\t{SAMPLE_CSS}\r\n\t\t\t\t</style>\r\n\t\t\t\t<div className='control-section'>\r\n\t\t\t\t\t<div className='col-md-9'>\r\n\t\t\t\t\t\t<TreeMapComponent load={this.load.bind(this)} id='treemap-container' ref={m => this.treemapInstance = m}\r\n\t\t\t\t\t\t\ttitleSettings={{\t\t\t//To config title for treemap\r\n\t\t\t\t\t\t\t\ttext: 'Top 10 best selling smartphone brands - 2017',\r\n\t\t\t\t\t\t\t\ttextStyle: { size: '15px' }\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tdataSource={ProductSale}\r\n\t\t\t\t\t\t\tlayoutType='SliceAndDiceVertical'\r\n\t\t\t\t\t\t\tweightValuePath='Percentage'\r\n\t\t\t\t\t\t\trangeColorValuePath='Percentage'\r\n\t\t\t\t\t\t\ttooltipSettings={{\t\t\t// To config tooltip for treemap\r\n\t\t\t\t\t\t\t\tvisible: true,\r\n\t\t\t\t\t\t\t\tformat: '${Product} (+${Percentage}) %'\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\tleafItemSettings={{\t\t\t// To config leafitem customization for treemap\r\n\t\t\t\t\t\t\t\tlabelPath: 'Product',\r\n\t\t\t\t\t\t\t\tfill: '#6699cc',\r\n\t\t\t\t\t\t\t\tborder: { color: 'black', width: 0.5 },\r\n\t\t\t\t\t\t\t\tlabelPosition: 'Center',\r\n\t\t\t\t\t\t\t\tinterSectAction: 'Hide',\r\n\t\t\t\t\t\t\t\tlabelFormat: '${Product} (+${Percentage}) %',\r\n\t\t\t\t\t\t\t\tcolorMapping: [\r\n\t\t\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\t\t\tfrom: 1.3,\r\n\t\t\t\t\t\t\t\t\t\tto: 22,\r\n\t\t\t\t\t\t\t\t\t\tcolor: '#FAB665',\r\n\t\t\t\t\t\t\t\t\t\tminOpacity: 0.5,\r\n\t\t\t\t\t\t\t\t\t\tmaxOpacity: 1\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t]\r\n\t\t\t\t\t\t\t}}>\r\n\t\t\t\t\t\t\t<Inject services={[TreeMapTooltip]} />\r\n\t\t\t\t\t\t</TreeMapComponent>\r\n\t\t\t\t\t\t<div style={{ float: 'right', marginright: '10px' }}>Source:\r\n       <a href=\" http://zeenews.india.com/photos/business/worlds-10-best-selling-smartphone-brands-2033958/samsung-2033959\" target=\"_blank\">zeenews.india.com</a>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className='col-md-3 property-section'>\r\n\t\t\t\t\t\t<PropertyPane title='Properties'>\r\n\t\t\t\t\t\t\t<table id='property' title='Properties' className='property-panel-table' style={{ width: '100%', marginBottom: '20px' }}>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div>Export Type</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t\t\t\t\t<DropDownListComponent id=\"mode\" width=\"90px\" index={0} placeholder=\"JPEG\" ref={d => this.mode = d} dataSource={this.droplist} fields={{ text: 'text', value: 'value' }} />\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div>File Name</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"e-float-input\" style={{ 'margin-top': '0px' }}>\r\n\t\t\t\t\t\t\t\t\t\t\t<input id=\"fileName\" ref={d => this.nameElement = d} type=\"text\" defaultValue=\"TreeMap\" />\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div id=\"btn-control\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ButtonComponent onClick={this.onClick1.bind(this)} iconCss='e-icons e-play-icon' cssClass='e-flat' isPrimary={true}>Export</ButtonComponent>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t\t<tr>\r\n\t\t\t\t\t\t\t\t\t<td>\r\n\t\t\t\t\t\t\t\t\t\t<div id=\"btn-control\">\r\n\t\t\t\t\t\t\t\t\t\t\t<ButtonComponent onClick={this.onClick2.bind(this)} iconCss='e-icons e-play-icon' cssClass='e-flat' isPrimary={true}>Print</ButtonComponent>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</td>\r\n\t\t\t\t\t\t\t\t</tr>\r\n\t\t\t\t\t\t\t</table>\r\n\t\t\t\t\t\t</PropertyPane>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div >\r\n\t\t)\r\n\t}\r\n}\nReactDOM.render(<Print />, 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}"}