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 pathexport-plnkr.json
More file actions
1 lines (1 loc) · 45.7 KB
/
export-plnkr.json
File metadata and controls
1 lines (1 loc) · 45.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","export-data":"\r\nexport let dataCollection: object[] = [\r\n { xDate: new Date(2013, 0, 1), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.54 },\r\n { xDate: new Date(2013, 0, 3), Open: 85.83, High: 85.85, Low: 85.55, Close: 85.64 },\r\n { xDate: new Date(2013, 0, 5), Open: 86.19, High: 86.25, Low: 85.8, Close: 85.98 },\r\n { xDate: new Date(2013, 0, 7), Open: 86.17, High: 86.28, Low: 85.96, Close: 86.07 },\r\n { xDate: new Date(2013, 0, 9), Open: 86.19, High: 86.26, Low: 85.97, Close: 86.2 },\r\n { xDate: new Date(2013, 0,11), Open: 85.98, High: 86.31, Low: 85.86, Close: 86.15 },\r\n { xDate: new Date(2013, 0,13), Open: 85.82, High: 86.18, Low: 85.74, Close: 85.78 },\r\n { xDate: new Date(2013, 0,15), Open: 85.45, High: 85.66, Low: 85.41, Close: 85.55 },\r\n { xDate: new Date(2013, 0,17), Open: 85.53, High: 85.53, Low: 85.31, Close: 85.48 },\r\n { xDate: new Date(2013, 0,19), Open: 85.6, High: 85.68, Low: 85.34, Close: 85.39 },\r\n { xDate: new Date(2013, 0,21), Open: 85.6, High: 85.72, Low: 85.5, Close: 85.61 },\r\n { xDate: new Date(2013, 0,23), Open: 85.34, High: 85.52, Low: 85.3, Close: 85.49 },\r\n { xDate: new Date(2013, 0,25), Open: 85.66, High: 85.72, Low: 85.38, Close: 85.41 },\r\n { xDate: new Date(2013, 0,27), Open: 85.93, High: 85.95, Low: 85.59, Close: 85.62 },\r\n { xDate: new Date(2013, 0,29), Open: 85.91, High: 85.93, Low: 85.63, Close: 85.58 },\r\n { xDate: new Date(2013, 1, 1), Open: 85.85, High: 86.25, Low: 85.79, Close: 86.06 },\r\n { xDate: new Date(2013, 1, 3), Open: 85.6, High: 85.85, Low: 85.49, Close: 85.81 },\r\n { xDate: new Date(2013, 1, 5), Open: 85.94, High: 86, Low: 85.48, Close: 85.66 },\r\n { xDate: new Date(2013, 1, 7), Open: 86.55, High: 86.64, Low: 85.36, Close: 85.92 },\r\n { xDate: new Date(2013, 1, 9), Open: 86.46, High: 86.87, Low: 86.4, Close: 86.71 },\r\n { xDate: new Date(2013, 1,11), Open: 86.3, High: 86.39, Low: 86.13, Close: 86.38 },\r\n { xDate: new Date(2013, 1,13), Open: 85.74, High: 86.44, Low: 85.67, Close: 86.19 },\r\n { xDate: new Date(2013, 1,15), Open: 85.56, High: 85.62, Low: 85.34, Close: 85.61 },\r\n { xDate: new Date(2013, 1,17), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.52 },\r\n { xDate: new Date(2013, 1,19), Open: 85.54, High: 86, Low: 85.51, Close: 85.76 },\r\n { xDate: new Date(2013, 1,21), Open: 85, High: 85.17, Low: 84.87, Close: 85.15 },\r\n { xDate: new Date(2013, 1,23), Open: 85.1, High: 85.28, Low: 84.72, Close: 85.08 },\r\n { xDate: new Date(2013, 1,25), Open: 85.46, High: 85.56, Low: 85.18, Close: 85.37 },\r\n { xDate: new Date(2013, 1,27), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 },\r\n { xDate: new Date(2013, 1,29), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 },\r\n { xDate: new Date(2013, 2, 1), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.54 },\r\n { xDate: new Date(2013, 2, 3), Open: 85.83, High: 85.85, Low: 85.55, Close: 85.64 },\r\n { xDate: new Date(2013, 2, 5), Open: 86.19, High: 86.25, Low: 85.8, Close: 85.98 },\r\n { xDate: new Date(2013, 2, 7), Open: 86.17, High: 86.28, Low: 85.96, Close: 86.07 },\r\n { xDate: new Date(2013, 2, 9), Open: 86.19, High: 86.26, Low: 85.97, Close: 86.2 },\r\n { xDate: new Date(2013, 2,11), Open: 85.98, High: 86.31, Low: 85.86, Close: 86.15 },\r\n { xDate: new Date(2013, 2,13), Open: 85.82, High: 86.18, Low: 85.74, Close: 85.78 },\r\n { xDate: new Date(2013, 2,15), Open: 85.45, High: 85.66, Low: 85.41, Close: 85.55 },\r\n { xDate: new Date(2013, 2,17), Open: 85.53, High: 85.53, Low: 85.31, Close: 85.48 },\r\n { xDate: new Date(2013, 2,19), Open: 85.6, High: 85.68, Low: 85.34, Close: 85.39 },\r\n { xDate: new Date(2013, 2,21), Open: 85.6, High: 85.72, Low: 85.5, Close: 85.61 },\r\n { xDate: new Date(2013, 2,23), Open: 85.34, High: 85.52, Low: 85.3, Close: 85.49 },\r\n { xDate: new Date(2013, 2,25), Open: 85.66, High: 85.72, Low: 85.38, Close: 85.41 },\r\n { xDate: new Date(2013, 2,27), Open: 85.93, High: 85.95, Low: 85.59, Close: 85.62 },\r\n { xDate: new Date(2013, 2,29), Open: 85.91, High: 85.93, Low: 85.63, Close: 85.58 },\r\n { xDate: new Date(2013, 3, 1), Open: 86.1, High: 86.15, Low: 85.9, Close: 86.03 },\r\n { xDate: new Date(2013, 3, 3), Open: 85.93, High: 86.17, Low: 85.84, Close: 86.02 },\r\n { xDate: new Date(2013, 3, 5), Open: 85.74, High: 86, Low: 85.66, Close: 86 },\r\n { xDate: new Date(2013, 3, 7), Open: 85.71, High: 85.71, Low: 85.36, Close: 85.62 },\r\n { xDate: new Date(2013, 3, 9), Open: 85.3, High: 85.92, Low: 85.16, Close: 85.8 },\r\n { xDate: new Date(2013, 3,11), Open: 84.23, High: 85.46, Low: 84.23, Close: 85.2 },\r\n { xDate: new Date(2013, 3,13), Open: 84.51, High: 84.54, Low: 84.19, Close: 84.3 },\r\n { xDate: new Date(2013, 3,15), Open: 84.44, High: 84.65, Low: 84.2, Close: 84.63 },\r\n { xDate: new Date(2013, 3,17), Open: 84.6, High: 84.81, Low: 84.59, Close: 84.65 },\r\n { xDate: new Date(2013, 3,19), Open: 84.52, High: 84.86, Low: 84.4, Close: 84.76 },\r\n { xDate: new Date(2013, 3,21), Open: 84.17, High: 84.66, Low: 84.16, Close: 84.47 },\r\n { xDate: new Date(2013, 3,23), Open: 84.22, High: 84.3, Low: 83.98, Close: 84.26 },\r\n { xDate: new Date(2013, 3,25), Open: 83.75, High: 84.1, Low: 83.65, Close: 84 },\r\n { xDate: new Date(2013, 3,27), Open: 84, High: 84.01, Low: 83.67, Close: 83.74 },\r\n { xDate: new Date(2013, 3,29), Open: 84, High: 84.01, Low: 83.67, Close: 83.74 },\r\n { xDate: new Date(2013, 4, 1), Open: 84.3, High: 84.45, Low: 84.19, Close: 84.22 },\r\n { xDate: new Date(2013, 4, 3), Open: 83.79, High: 84.19, Low: 83.7, Close: 84.04 },\r\n { xDate: new Date(2013, 4, 5), Open: 84.02, High: 84.02, Low: 83.69, Close: 83.71 },\r\n { xDate: new Date(2013, 4, 7), Open: 84.01, High: 84.04, Low: 83.82, Close: 83.96 },\r\n { xDate: new Date(2013, 4, 9), Open: 83.9, High: 84.02, Low: 83.86, Close: 83.94 },\r\n { xDate: new Date(2013, 4,11), Open: 84.09, High: 84.17, Low: 83.9, Close: 84.06 },\r\n { xDate: new Date(2013, 4,13), Open: 83.89, High: 84.25, Low: 83.77, Close: 84.01 },\r\n { xDate: new Date(2013, 4,15), Open: 84.05, High: 84.14, Low: 83.84, Close: 83.91 },\r\n { xDate: new Date(2013, 4,17), Open: 84.49, High: 84.65, Low: 84.18, Close: 84.22 },\r\n { xDate: new Date(2013, 4,19), Open: 84.99, High: 85.1, Low: 84.37, Close: 84.43 },\r\n { xDate: new Date(2013, 4,21), Open: 84.96, High: 85.06, Low: 84.7, Close: 85.01 },\r\n { xDate: new Date(2013, 4,23), Open: 84.68, High: 84.9, Low: 84.65, Close: 84.76 },\r\n { xDate: new Date(2013, 4,25), Open: 84.35, High: 85.03, Low: 84.32, Close: 84.67 },\r\n { xDate: new Date(2013, 4,27), Open: 84.19, High: 84.31, Low: 84.16, Close: 84.19 },\r\n { xDate: new Date(2013, 4,29), Open: 84.19, High: 84.31, Low: 84.16, Close: 84.19 },\r\n { xDate: new Date(2013, 5, 1), Open: 84.2, High: 84.29, Low: 84.04, Close: 84.15 },\r\n { xDate: new Date(2013, 5, 3), Open: 84.21, High: 84.25, Low: 84.03, Close: 84.17 },\r\n { xDate: new Date(2013, 5, 5), Open: 84.72, High: 84.87, Low: 84.44, Close: 84.49 },\r\n { xDate: new Date(2013, 5, 7), Open: 84.85, High: 84.88, Low: 84.5, Close: 84.72 },\r\n { xDate: new Date(2013, 5, 9), Open: 84.53, High: 84.74, Low: 84.25, Close: 84.69 },\r\n { xDate: new Date(2013, 5,11), Open: 84.4, High: 84.7, Low: 84.27, Close: 84.52 },\r\n { xDate: new Date(2013, 5,13), Open: 84.96, High: 85.07, Low: 84.5, Close: 84.57 },\r\n { xDate: new Date(2013, 5,15), Open: 85.28, High: 85.32, Low: 84.95, Close: 85.03 },\r\n { xDate: new Date(2013, 5,17), Open: 85.35, High: 85.39, Low: 85.1, Close: 85.32 },\r\n { xDate: new Date(2013, 5,19), Open: 85.65, High: 85.66, Low: 85.21, Close: 85.36 },\r\n { xDate: new Date(2013, 5,21), Open: 85.38, High: 85.85, Low: 85.25, Close: 85.67 },\r\n { xDate: new Date(2013, 5,23), Open: 85.8, High: 85.96, Low: 85.67, Close: 85.83 },\r\n { xDate: new Date(2013, 5,25), Open: 86.07, High: 86.22, Low: 85.75, Close: 85.87 },\r\n { xDate: new Date(2013, 5,27), Open: 86.05, High: 86.08, Low: 85.68, Close: 85.79 },\r\n { xDate: new Date(2013, 5,29), Open: 86.05, High: 86.08, Low: 85.68, Close: 85.79 },\r\n { xDate: new Date(2013, 6, 1), Open: 85.85, High: 86.25, Low: 85.79, Close: 86.06 },\r\n { xDate: new Date(2013, 6, 3), Open: 85.6, High: 85.85, Low: 85.49, Close: 85.81 },\r\n { xDate: new Date(2013, 6, 5), Open: 85.94, High: 86, Low: 85.48, Close: 85.66 },\r\n { xDate: new Date(2013, 6, 7), Open: 86.55, High: 86.64, Low: 85.36, Close: 85.92 },\r\n { xDate: new Date(2013, 6, 9), Open: 86.46, High: 86.87, Low: 86.4, Close: 86.71 },\r\n { xDate: new Date(2013, 6,11), Open: 86.3, High: 86.39, Low: 86.13, Close: 86.38 },\r\n { xDate: new Date(2013, 6,13), Open: 85.74, High: 86.44, Low: 85.67, Close: 86.19 },\r\n { xDate: new Date(2013, 6,15), Open: 85.56, High: 85.62, Low: 85.34, Close: 85.61 },\r\n { xDate: new Date(2013, 6,17), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.52 },\r\n { xDate: new Date(2013, 6,19), Open: 85.54, High: 86, Low: 85.51, Close: 85.76 },\r\n { xDate: new Date(2013, 6,21), Open: 85, High: 85.17, Low: 84.87, Close: 85.15 },\r\n { xDate: new Date(2013, 6,23), Open: 85.1, High: 85.28, Low: 84.72, Close: 85.08 },\r\n { xDate: new Date(2013, 6,25), Open: 85.46, High: 85.56, Low: 85.18, Close: 85.37 },\r\n { xDate: new Date(2013, 6,27), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 },\r\n { xDate: new Date(2013, 6,29), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 },\r\n { xDate: new Date(2013, 7, 1), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.54 },\r\n { xDate: new Date(2013, 7, 3), Open: 85.83, High: 85.85, Low: 85.55, Close: 85.64 },\r\n { xDate: new Date(2013, 7, 5), Open: 86.19, High: 86.25, Low: 85.8, Close: 85.98 },\r\n { xDate: new Date(2013, 7, 7), Open: 86.17, High: 86.28, Low: 85.96, Close: 86.07 },\r\n { xDate: new Date(2013, 7, 9), Open: 86.19, High: 86.26, Low: 85.97, Close: 86.2 },\r\n { xDate: new Date(2013, 7,11), Open: 85.98, High: 86.31, Low: 85.86, Close: 86.15 },\r\n { xDate: new Date(2013, 7,13), Open: 85.82, High: 86.18, Low: 85.74, Close: 85.78 },\r\n { xDate: new Date(2013, 7,15), Open: 85.45, High: 85.66, Low: 85.41, Close: 85.55 },\r\n { xDate: new Date(2013, 7,17), Open: 85.53, High: 85.53, Low: 85.31, Close: 85.48 },\r\n { xDate: new Date(2013, 7,19), Open: 85.6, High: 85.68, Low: 85.34, Close: 85.39 },\r\n { xDate: new Date(2013, 7,21), Open: 85.6, High: 85.72, Low: 85.5, Close: 85.61 },\r\n { xDate: new Date(2013, 7,23), Open: 85.34, High: 85.52, Low: 85.3, Close: 85.49 },\r\n { xDate: new Date(2013, 7,25), Open: 85.66, High: 85.72, Low: 85.38, Close: 85.41 },\r\n { xDate: new Date(2013, 7,27), Open: 85.93, High: 85.95, Low: 85.59, Close: 85.62 },\r\n { xDate: new Date(2013, 7,29), Open: 85.91, High: 85.93, Low: 85.63, Close: 85.58 },\r\n { xDate: new Date(2013, 8, 1), Open: 86.1, High: 86.15, Low: 85.9, Close: 86.03 },\r\n { xDate: new Date(2013, 8, 3), Open: 85.93, High: 86.17, Low: 85.84, Close: 86.02 },\r\n { xDate: new Date(2013, 8, 5), Open: 85.74, High: 86, Low: 85.66, Close: 86 },\r\n { xDate: new Date(2013, 8, 7), Open: 85.71, High: 85.71, Low: 85.36, Close: 85.62 },\r\n { xDate: new Date(2013, 8, 9), Open: 85.3, High: 85.92, Low: 85.16, Close: 85.8 },\r\n { xDate: new Date(2013, 8,11), Open: 84.23, High: 85.46, Low: 84.23, Close: 85.2 },\r\n { xDate: new Date(2013, 8,13), Open: 84.51, High: 84.54, Low: 84.19, Close: 84.3 },\r\n { xDate: new Date(2013, 8,15), Open: 84.44, High: 84.65, Low: 84.2, Close: 84.63 },\r\n { xDate: new Date(2013, 8,17), Open: 84.6, High: 84.81, Low: 84.59, Close: 84.65 },\r\n { xDate: new Date(2013, 8,19), Open: 84.52, High: 84.86, Low: 84.4, Close: 84.76 },\r\n { xDate: new Date(2013, 8,21), Open: 84.17, High: 84.66, Low: 84.16, Close: 84.47 },\r\n { xDate: new Date(2013, 8,23), Open: 84.22, High: 84.3, Low: 83.98, Close: 84.26 },\r\n { xDate: new Date(2013, 8,25), Open: 83.75, High: 84.1, Low: 83.65, Close: 84 },\r\n { xDate: new Date(2013, 8,27), Open: 84, High: 84.01, Low: 83.67, Close: 83.74 },\r\n { xDate: new Date(2013, 8,29), Open: 84, High: 84.01, Low: 83.67, Close: 83.74 },\r\n { xDate: new Date(2013, 9, 1), Open: 84.3, High: 84.45, Low: 84.19, Close: 84.22 },\r\n { xDate: new Date(2013, 9, 3), Open: 83.79, High: 84.19, Low: 83.7, Close: 84.04 },\r\n { xDate: new Date(2013, 9, 5), Open: 84.02, High: 84.02, Low: 83.69, Close: 83.71 },\r\n { xDate: new Date(2013, 9, 7), Open: 84.01, High: 84.04, Low: 83.82, Close: 83.96 },\r\n { xDate: new Date(2013, 9, 9), Open: 83.9, High: 84.02, Low: 83.86, Close: 83.94 },\r\n { xDate: new Date(2013, 9,11), Open: 84.09, High: 84.17, Low: 83.9, Close: 84.06 },\r\n { xDate: new Date(2013, 9,13), Open: 83.89, High: 84.25, Low: 83.77, Close: 84.01 },\r\n { xDate: new Date(2013, 9,15), Open: 84.05, High: 84.14, Low: 83.84, Close: 83.91 },\r\n { xDate: new Date(2013, 9,17), Open: 84.49, High: 84.65, Low: 84.18, Close: 84.22 },\r\n { xDate: new Date(2013, 9,19), Open: 84.99, High: 85.1, Low: 84.37, Close: 84.43 },\r\n { xDate: new Date(2013, 9,21), Open: 84.96, High: 85.06, Low: 84.7, Close: 85.01 },\r\n { xDate: new Date(2013, 9,23), Open: 84.68, High: 84.9, Low: 84.65, Close: 84.76 },\r\n { xDate: new Date(2013, 9,25), Open: 84.35, High: 85.03, Low: 84.32, Close: 84.67 },\r\n { xDate: new Date(2013, 9,27), Open: 84.19, High: 84.31, Low: 84.16, Close: 84.19 },\r\n { xDate: new Date(2013, 9,29), Open: 84.19, High: 84.31, Low: 84.16, Close: 84.19 },\r\n { xDate: new Date(2013,10, 1), Open: 84.2, High: 84.29, Low: 84.04, Close: 84.15 },\r\n { xDate: new Date(2013,10, 3), Open: 84.21, High: 84.25, Low: 84.03, Close: 84.17 },\r\n { xDate: new Date(2013,10, 5), Open: 84.72, High: 84.87, Low: 84.44, Close: 84.49 },\r\n { xDate: new Date(2013,10, 7), Open: 84.85, High: 84.88, Low: 84.5, Close: 84.72 },\r\n { xDate: new Date(2013,10, 9), Open: 84.53, High: 84.74, Low: 84.25, Close: 84.69 },\r\n { xDate: new Date(2013,10,11), Open: 84.4, High: 84.7, Low: 84.27, Close: 84.52 },\r\n { xDate: new Date(2013,10,13), Open: 84.96, High: 85.07, Low: 84.5, Close: 84.57 },\r\n { xDate: new Date(2013,10,15), Open: 85.28, High: 85.32, Low: 84.95, Close: 85.03 },\r\n { xDate: new Date(2013,10,17), Open: 85.35, High: 85.39, Low: 85.1, Close: 85.32 },\r\n { xDate: new Date(2013,10,19), Open: 85.65, High: 85.66, Low: 85.21, Close: 85.36 },\r\n { xDate: new Date(2013,10,21), Open: 85.38, High: 85.85, Low: 85.25, Close: 85.67 },\r\n { xDate: new Date(2013,10,23), Open: 85.8, High: 85.96, Low: 85.67, Close: 85.83 },\r\n { xDate: new Date(2013,10,25), Open: 86.07, High: 86.22, Low: 85.75, Close: 85.87 },\r\n { xDate: new Date(2013,10,27), Open: 86.05, High: 86.08, Low: 85.68, Close: 85.79 },\r\n { xDate: new Date(2013,10,29), Open: 86.05, High: 86.08, Low: 85.68, Close: 85.79 },\r\n { xDate: new Date(2013,11, 1), Open: 85.85, High: 86.25, Low: 85.79, Close: 86.06 },\r\n { xDate: new Date(2013,11, 3), Open: 85.6, High: 85.85, Low: 85.49, Close: 85.81 },\r\n { xDate: new Date(2013,11, 5), Open: 85.94, High: 86, Low: 85.48, Close: 85.66 },\r\n { xDate: new Date(2013,11, 7), Open: 86.55, High: 86.64, Low: 85.36, Close: 85.92 },\r\n { xDate: new Date(2013,11, 9), Open: 86.46, High: 86.87, Low: 86.4, Close: 86.71 },\r\n { xDate: new Date(2013,11,11), Open: 86.3, High: 86.39, Low: 86.13, Close: 86.38 },\r\n { xDate: new Date(2013,11,13), Open: 85.74, High: 86.44, Low: 85.67, Close: 86.19 },\r\n { xDate: new Date(2013,11,15), Open: 85.56, High: 85.62, Low: 85.34, Close: 85.61 },\r\n { xDate: new Date(2013,11,17), Open: 85.79, High: 85.89, Low: 85.36, Close: 85.52 },\r\n { xDate: new Date(2013,11,19), Open: 85.54, High: 86, Low: 85.51, Close: 85.76 },\r\n { xDate: new Date(2013,11,21), Open: 85, High: 85.17, Low: 84.87, Close: 85.15 },\r\n { xDate: new Date(2013,11,23), Open: 85.1, High: 85.28, Low: 84.72, Close: 85.08 },\r\n { xDate: new Date(2013,11,25), Open: 85.46, High: 85.56, Low: 85.18, Close: 85.37 },\r\n { xDate: new Date(2013,11,27), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 },\r\n { xDate: new Date(2013,11,29), Open: 85.42, High: 85.44, Low: 85.09, Close: 85.42 }\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>Range-navigator · Export · 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/range-navigator\">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/range-navigator/default.html\"><span>Range-navigator</span></a></div>\r\n <div class=\"category-seperator sb-icons\"> / </div>\r\n <div class=\"crumb-sample\">Export</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 illustrates the export feature in the range navigator. \n You can export the range navigator in PNG, SVG, PDF, or JPEG format by clicking <code>Export</code>.\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 and configure the export feature. \n The rendered range navigator can be exported as either JPEG, PNG, or SVG format. It can be achieved using the Blob. It is supported only in modern browsers.\n </p>\n <p>\n More information on the export can be found in this\n <a target=\"_blank\" href=\"http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype\">documentation section</a>.\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 * Sample for Range Navigator Export\r\n */\r\nimport * as React from \"react\";\r\nimport * as ReactDOM from \"react-dom\";\r\nimport {\r\n StepLineSeries, SplineAreaSeries, ChartComponent, SeriesCollectionDirective,\r\n RangeNavigatorComponent, DateTime, ExportType, SeriesDirective, ILoadedEventArgs,\r\n IChangedEventArgs, IRangeLoadedEventArgs, ChartTheme, Inject, Tooltip\r\n} from '@syncfusion/ej2-react-charts';\r\nimport { ButtonComponent } from '@syncfusion/ej2-react-buttons';\r\nimport { } from '@syncfusion/ej2-react-inputs';\r\nimport { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';\r\nimport { PropertyPane } from './property-pane';\r\nimport { Browser } from '@syncfusion/ej2-base';\r\nimport { SampleBase } from './sample-base';\r\nimport { dataCollection } from '../export-data';\r\n\r\nexport let zoomFactor : number;\r\nexport let zoomPosition :number;\r\nexport let dateTimeData: Object[] = dataCollection;\r\nexport let themes: string[] = ['Material', 'Fabric', 'Bootstrap', 'Highcontrast'];\r\nexport let borderColor: string[] = ['#FF4081', '#007897', '#428BCA', '#FFD939'];\r\nexport let regionColor: string[] = ['rgba(255, 64, 129, 0.3)', ' rgba(0, 120, 151, 0.3)',\r\n 'rgba(66, 139, 202, 0.3)', 'rgba(255, 217, 57, 0.3)'];\r\n\r\nconst SAMPLE_CSS = `\r\n .control-fluid {\r\n padding: 0px !important;\r\n }\r\n #title{\r\n font-size: 15px;\r\n font-style: normal;\r\n font-family: \"Segoe UI\";\r\n font-weight: 500;\r\n text-anchor: middle;\r\n transform: none;\r\n opacity: 1;\r\n }\r\n #btn-control {\r\n width: 100%;\r\n text-align: center;\r\n }\r\n .e-export-icon::before {\r\n content: '\\\\e728';\r\n }\r\n \r\n .e-print-icon::before {\r\n content: '\\\\e813';\r\n }`;\r\nexport class Export extends SampleBase<{}, {}> {\r\n private chartInstance: ChartComponent;\r\n private rangeInstance: RangeNavigatorComponent;\r\n private mode: DropDownListComponent;\r\n private chartRendered: boolean;\r\n private type: { [key: string]: Object }[] = [\r\n { value: 'JPEG' },\r\n { value: 'PNG' },\r\n { value: 'SVG' },\r\n { value: 'PDF' }\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='control-section row'>\r\n <div className='col-md-9'>\r\n <div className=\"row\" style={{ textAlign: \"center\" }}>\r\n <div id=\"title\">Conns,Inc Stock Details</div>\r\n </div>\r\n <div className=\"row\">\r\n <RangeNavigatorComponent id='rangenavigator' \r\n ref={rangenav => this.rangeInstance = rangenav}\r\n style={{ textAlign: \"center\" }}\r\n valueType='DateTime'\r\n intervalType='Months'\r\n labelFormat='MMM'\r\n enableGrouping={true}\r\n value={[new Date('2013-05-01'), new Date('2013-08-01')]}\r\n dataSource={dateTimeData}\r\n xName='xDate'\r\n yName='Close'\r\n width={Browser.isDevice ? '100%' : '80%'}\r\n load={this.rangeLoad.bind(this)}\r\n changed={this.changed.bind(this)}>\r\n <Inject services={[DateTime]} />\r\n </RangeNavigatorComponent>\r\n </div>\r\n <div className=\"row\">\r\n <ChartComponent id='charts' \r\n ref={chart => this.chartInstance = chart}\r\n style={{ textAlign: \"center\" }}\r\n primaryXAxis={{\r\n valueType: 'DateTime', \r\n crosshairTooltip: { enable: true },\r\n edgeLabelPlacement: 'Shift', \r\n majorGridLines: { width: 0 }\r\n }}\r\n primaryYAxis={{\r\n minimum: 81, maximum: 87, interval: 2,\r\n title: 'Million in USD',\r\n majorTickLines: { width: 0 },\r\n lineStyle: { width: 0 },\r\n labelFormat: '${value}M'\r\n }}\r\n load={this.chartLoad.bind(this)}\r\n width={Browser.isDevice ? '100%' : '80%'}\r\n height='350'\r\n chartArea={{ border: { width: 0 } }}\r\n tooltip={{\r\n enable: true, shared: true\r\n }}>\r\n <Inject services={[SplineAreaSeries, DateTime, Tooltip]} />\r\n <SeriesCollectionDirective>\r\n <SeriesDirective dataSource={dateTimeData}\r\n xName='xDate' yName='Close' border={{ width: 2}}\r\n animation={{ enable: false }} name='Close'\r\n type='SplineArea' width={2}>\r\n </SeriesDirective>\r\n </SeriesCollectionDirective>\r\n </ChartComponent>\r\n </div>\r\n </div>\r\n <div className='col-md-3 property-section'>\r\n <PropertyPane title='Properties'>\r\n <table id='property' title='Properties' className='property-panel-table' style={{ width: '80%' }}>\r\n <tr style={{ height: \"50px\" }}>\r\n <td style={{ width: \"30%\" }}>\r\n Export Type:\r\n </td>\r\n <td style={{ width: \"30%\" }}>\r\n <DropDownListComponent width={60} id=\"etype\" value=\"JPEG\" ref={d => this.mode = d} dataSource={this.type} fields={{ text: 'value', value: 'value' }} placeholder=\"JPEG\" />\r\n </td>\r\n </tr>\r\n <tr style={{ height: \"50px\" }}>\r\n <td style={{ width: \"40%\" }}>\r\n File Name:\r\n </td>\r\n <td style={{ width: \"40%\" }}>\r\n <div className=\"e-float-input\" style={{ width: 70, 'margin-top': '0px' }}>\r\n <input type=\"text\" defaultValue=\"Chart\" id=\"fileName\" style={{ \"margin-left\": \"-10px\" }} />\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '40px' }}>\r\n <td>\r\n <div id=\"btn-control\" style={{ 'margin-left': '20px' }}>\r\n <ButtonComponent id=\"exporticon\" onClick={this.exportClick.bind(this)} iconCss='e-icons e-export-icon' cssClass='e-flat' isPrimary={true}>Export</ButtonComponent>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr style={{ height: '50px' }}>\r\n <td>\r\n <div id=\"btn-control\" style={{ 'margin-left': '20px' }}>\r\n <ButtonComponent id=\"printicon\" onClick={this.printClick.bind(this)} iconCss='e-icons e-print-icon' cssClass='e-flat' isPrimary={true}>Print</ButtonComponent>\r\n </div>\r\n </td>\r\n </tr>\r\n </table>\r\n </PropertyPane>\r\n </div>\r\n </div>\r\n </div >\r\n )\r\n }\r\n public changed(args: IChangedEventArgs): void {\r\n if (this.chartInstance && this.chartRendered) {\r\n this.chartInstance.primaryXAxis.zoomFactor = args.zoomFactor;\r\n this.chartInstance.primaryXAxis.zoomPosition = args.zoomPosition;\r\n this.chartInstance.dataBind();\r\n } else {\r\n zoomFactor =args.zoomFactor;\r\n zoomPosition = args.zoomPosition;\r\n }\r\n };\r\n public chartLoad(args: ILoadedEventArgs): void {\r\n args.chart.primaryXAxis.zoomFactor = zoomFactor;\r\n args.chart.primaryXAxis.zoomPosition = zoomPosition;\r\n let selectedTheme: string = location.hash.split('/')[1];\r\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as ChartTheme;\r\n let chartTheme: string = args.chart.theme;\r\n args.chart.series[0].fill = regionColor[themes.indexOf(chartTheme)];\r\n args.chart.series[0].border.color = borderColor[themes.indexOf(chartTheme)];\r\n this.chartRendered = true;\r\n };\r\n public rangeLoad(args: IRangeLoadedEventArgs): void {\r\n let selectedTheme: string = location.hash.split('/')[1];\r\n selectedTheme = selectedTheme ? selectedTheme : 'Material';\r\n args.rangeNavigator.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)) as ChartTheme;\r\n };\r\n public exportClick(e: Event): void {\r\n let fileName: string = (document.getElementById('fileName') as HTMLInputElement).value;\r\n this.rangeInstance.export(\r\n (this.mode.value as ExportType), fileName, null, [this.rangeInstance,this.chartInstance]\r\n );\r\n }\r\n public printClick(e: Event): void {\r\n this.rangeInstance.print(['rangenavigator', 'charts']);\r\n }\r\n}\nReactDOM.render(<Export />, 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}"}