diff --git a/index.html b/index.html index 5abadfec..b15a8146 100644 --- a/index.html +++ b/index.html @@ -20,11 +20,21 @@ + + + \n","index.ts":"{{ripple}}\n/**\n * Sample for CSS Cards Tile View.\n */\nimport { compile, detach} from '@syncfusion/ej2-base';\nimport { MultiSelect, SelectEventArgs, RemoveEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\n//import { cardBook } from './data-source';\nimport * as book from './data-source.json';\n\n/* tslint:disable:max-line-length\n tslint:disable:max-func-body-length\n tslint:disable:no-string-literal */\n\n\n \n\n interface FilterKey {\n Code : string;\n }\n let cardTemplateFn: (data: object) => NodeList = compile(document.getElementById('card_template').innerHTML.trim());\n let card: NodeList; let cardEle: HTMLElement; let cardObj: JSON[] = book as any; let data: Object[] = []; let multiSelectData: Object[] = []; let searchData: Object[] = [];\n let searchValCount: number = 0; let filterCategory: { [key: string]: Object; }[] = [{ Name: 'Client-Side', Code: 'client' }, { Name: 'Server-Side', Code: 'server' }, { Name: 'Front-End', Code: 'ui' }];\n let emptyData: boolean = true;\n cardRendering(cardObj);\n /* Initialize MultiSelect component */\n let multiselectComp: MultiSelect = new MultiSelect({\n // set the local data to dataSource property\n dataSource: filterCategory,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code'},\n // set the placeholder to MultiSelect input element\n placeholder: 'Search by categories',\n select: multiSelectFun,\n removed: multiSelectRemove,\n });\n multiselectComp.appendTo('#local');\n\n /* Funtion for Rendering Cards */\n function cardRendering(cardObj: Object[]): void {\n let errorContent: HTMLElement = document.querySelector('.tile_layout .row.error') as HTMLElement;\n if (cardObj.length > 0) {\n errorContent.style.display = 'none';\n cardObj.forEach((data: Object, index: number): void => {\n card = cardTemplateFn(data); cardEle = document.getElementById('card_sample_' + (++index));\n if (cardEle) { cardEle.appendChild(card[0]); } });\n } else {\n errorContent.style.display = 'flex';\n }\n }\n /* Funtion for Destroying Cards */\n function destroyAllCard(): void {\n let cards: NodeList = document.querySelectorAll('.card-control-section .e-card');\n [].slice.call(cards).forEach( (el: HTMLElement) => {\n detach(el);\n });\n }\n /* Remove event function for multiSelect component */\n function multiSelectRemove(e: RemoveEventArgs): void {\n let cardDa: Object[] = searchData.length > 0 ? searchData : (multiSelectData.length > 0 ? multiSelectData : cardObj);\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = cardDa; destroyAllCard(); cardRendering(cardObj);\n } else if (multiselectComp.value.length === 0 && searchValCount > 0) {\n searchFilter((document.getElementById('search_Card')).value);\n } else if (multiselectComp.value.length === 0) {\n destroyAllCard(); multiSelectData = cardDa;\n cardRendering(cardDa); } else {\n let keywords: string[] = (e.itemData).Code.split(',');\n let dublicate: Object[];\n keywords.forEach((key: string): void => {\n dublicate = new DataManager(cardObj as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\n dublicate.forEach((da: Object): void => {\n if (cardDa.indexOf(da) !== -1) {\n cardDa.splice(cardDa.indexOf(da), 1); }\n });\n multiSelectData = cardDa;\n });\n destroyAllCard(); cardRendering(multiSelectData); }\n }\n /* Select event function for multiSelect component */\n function multiSelectFun(e: SelectEventArgs): void {\n let keywords: string[] = ((e.itemData).Code).split(','); let dublicate: Object[];\n let cardDa: Object[] = searchData.length > 0 ? searchData : cardObj;\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = []; }\n keywords.forEach((key: string): void => {\n dublicate = new DataManager(cardDa as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\n if (dublicate.length === 0) {\n multiSelectData = [];\n destroyAllCard();\n return; }\n dublicate.forEach((da: Object): void => {\n if (multiSelectData.indexOf(da) === -1) {\n multiSelectData.push(da); }\n }); });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n /* Function for Filtering Cards */\n function searchFilter(key: string): void {\n searchValCount = key.length;\n let predicate: Predicate = new Predicate('cardContent', 'Contains', key, true);\n predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);\n let cardDa: Object[] = (multiSelectData.length > 0 && multiselectComp.value.length > 0 ) ? multiSelectData : cardObj;\n searchData = data = new DataManager(cardDa as JSON[]).executeLocal(new Query().where(predicate));\n destroyAllCard(); cardRendering(data);\n }\n document.getElementById('search_Card').onkeyup = (e: KeyboardEvent) => {\n if (e.code === 'Tab' || e.code === 'Escape' || e.code === 'ShiftLeft' || (e.code === 'Backspace' && emptyData)) {\n return; }\n let inputVal: string = (e.target).value;\n inputVal.length === 0 ? emptyData = true : emptyData = false;\n searchFilter(inputVal);\n };\n\n/* tslint:enable:max-line-length\n tslint:enable:no-string-literal */"} \ No newline at end of file +{"data-source.ts":"\n/**\n * Card datasource\n */\n// tslint:disable:max-line-length\nexport let cardBook: Object[] = [\n {\n header_title: ' ASP.NET MVC',\n header_subtitle: 'Nick Harrison',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_1.png', tag: 'server' },\n cardContent: 'ASP.NET Model View Controller design pattern to keep the data, views, and logic clearly separated in apps.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/ASPNET_MVC_Succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' Node.js',\n header_subtitle: 'Emanuele DelBono ',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_2.png', tag: 'client' },\n cardContent: ' Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/nodejs', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' React.js',\n header_subtitle: 'Dmitri Nesteruk',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_3.png', tag: 'client' },\n cardContent: 'React is a JavaScript library that has revolutionized how developers design and think about views in web applications.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/reactjs_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' TypeScript',\n header_subtitle: 'Steve Fenton',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_4.png', tag: 'client' },\n cardContent: 'Microsoft TypeScript extends many familiar features of .NET programming to JavaScript.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/typescript', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' PHP',\n header_subtitle: 'Jose Roberto Olivas Mendoza',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_5.png', tag: 'server' },\n cardContent: 'Known for its straightforward simplicity, PHP is an open source, general-purpose scripting language oriented for web development.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/php_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' CSS3',\n header_subtitle: 'Peter Shaw',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_6.png', tag: 'ui' },\n cardContent: 'In CSS3 Succinctly, author Peter Shaw provides an overview of the latest features available for custom cascading style sheets.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/css3', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: ' ASP.NET Core',\n header_subtitle: 'Simone Chiaretta and Ugo Lattanzi',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_7.png', tag: 'server' },\n cardContent: 'In ASP.NET Core Succinctly, seasoned authors Simone Chiaretta and Ugo Lattanzi update you on all the advances provided by Microsoft’s landmark framework.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/asp_net_core_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: 'Aurelia',\n header_subtitle: 'Matthew Duffield',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_8.png', tag: 'client' },\n cardContent: 'Aurelia is a relatively new, open-source JavaScript library/framework that simplifies the creation of web-based applications.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/aurelia_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: 'ECMAScript 6 ',\n header_subtitle: 'Matthew Duffield',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_9.png', tag: 'client' },\n cardContent: 'ECMAScript 6 (ES6), also known as ECMAScript 2015, brings new functionality and features to the table that developers have been wanting for a long time.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/ecmascript_6_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: 'JavaScript',\n header_subtitle: 'Cody Lindley',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_10.png', tag: 'client' },\n cardContent: 'JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/javascript', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: 'Knockout.js',\n header_subtitle: 'Ryan Hodson',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_11.png', tag: 'client' },\n cardContent: 'Knockout.js Succinctly is intended for professional web developers who need to build dynamic, scalable user interfaces with minimal code.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/knockoutjs', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n {\n header_title: 'Angular 2',\n header_subtitle: 'Joseph D. Booth',\n cardImage: { url: '//ej2.syncfusion.com/demos/src/card/images/Tile_12.png', tag: 'client' },\n cardContent: 'Angular 2 is a massively popular JavaScript framework built to take advantage of component development in web apps.',\n card_action_btn: {\n action_btns: [{ tag: 'a', href: 'https://www.syncfusion.com/ebooks/angular2_succinctly', target: '_blank', text: 'Read More' }],\n isVertical: true\n },\n isHorizontal: false\n },\n];\n// tslint:enable:max-line-length","data-source.json":"[\n { \"header_title\": \" ASP.NET MVC\",\n \"header_subtitle\": \"Nick Harrison\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_1.png\",\n \"tag\": \"server\"\n },\n \"cardContent\": \"ASP.NET Model View Controller design pattern to keep the data, views, and logic clearly separated in apps.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/ASPNET_MVC_Succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \" Node.js\",\n \"header_subtitle\": \"Emanuele DelBono \",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_2.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \" Node.js is a wildly popular platform for writing web applications that has revolutionized web development in many ways.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/nodejs\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \" React.js\",\n \"header_subtitle\": \"Dmitri Nesteruk\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_3.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"React is a JavaScript library that has revolutionized how developers design and think about views in web applications.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/reactjs_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"TypeScript\",\n \"header_subtitle\": \"Steve Fenton\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_4.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"Microsoft TypeScript extends many familiar features of .NET programming to JavaScript.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/typescript\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \" PHP\",\n \"header_subtitle\": \"Jose Roberto Olivas Mendoza\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_5.png\",\n \"tag\": \"server\"\n },\n \"cardContent\": \"Known for its straightforward simplicity, PHP is an open source, general-purpose scripting language oriented for web development.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/php_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \" CSS3\",\n \"header_subtitle\": \"Peter Shaw\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_6.png\",\n \"tag\": \"ui\"\n },\n \"cardContent\": \"In CSS3 Succinctly, author Peter Shaw provides an overview of the latest features available for custom cascading style sheets.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/css3\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \" ASP.NET Core\",\n \"header_subtitle\": \"Simone Chiaretta and Ugo Lattanzi\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_7.png\",\n \"tag\": \"server\"\n },\n \"cardContent\": \"In ASP.NET Core Succinctly, seasoned authors Simone Chiaretta and Ugo Lattanzi update you on all the advances provided by Microsoft’s landmark framework.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/asp_net_core_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"Aurelia\",\n \"header_subtitle\": \"Matthew Duffield\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_8.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"Aurelia is a relatively new, open-source JavaScript library/framework that simplifies the creation of web-based applications.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/aurelia_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"ECMAScript 6 \",\n \"header_subtitle\": \"Matthew Duffield\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_9.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"ECMAScript 6 (ES6), also known as ECMAScript 2015, brings new functionality and features to the table that developers have been wanting for a long time.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/ecmascript_6_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"JavaScript\",\n \"header_subtitle\": \"Cody Lindley\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_10.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"JavaScript Succinctly was written to give readers an accurate, concise examination of JavaScript objects and their supporting nuances.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/javascript\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"Knockout.js\",\n \"header_subtitle\": \"Ryan Hodson\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_11.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"Knockout.js Succinctly is intended for professional web developers who need to build dynamic, scalable user interfaces with minimal code.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/knockoutjs\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n },\n { \"header_title\": \"Angular 2\",\n \"header_subtitle\": \"Joseph D. Booth\",\n \"cardImage\": {\n \"url\": \"//ej2.syncfusion.com/demos/src/card/images/Tile_12.png\",\n \"tag\": \"client\"\n },\n \"cardContent\": \"Angular 2 is a massively popular JavaScript framework built to take advantage of component development in web apps.\",\n \"card_action_btn\": {\n \"action_btns\": [{\n \"tag\": \"a\",\n \"href\": \"https://www.syncfusion.com/ebooks/angular2_succinctly\",\n \"target\": \"_blank\",\n \"text\": \"Read More\"\n }],\n \"isVertical\": true\n },\n \"isHorizontal\": false\n }\n]","index.html":"\n\n \n\n
\n
\n
\n
\n
\n \n \n \n
\n
\n
\n \n
\n
\n
\n
\n
\n
No results found. Please try a different search.
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Sample for CSS Cards Tile View.\n */\nimport { compile, detach} from '@syncfusion/ej2-base';\nimport { MultiSelect, SelectEventArgs, RemoveEventArgs } from '@syncfusion/ej2-dropdowns';\nimport { Query, DataManager, Predicate } from '@syncfusion/ej2-data';\n//import { cardBook } from './data-source';\nimport * as book from './data-source.json';\n\n/* tslint:disable:max-line-length\n tslint:disable:max-func-body-length\n tslint:disable:no-string-literal */\n\n\n \n\n interface FilterKey {\n Code : string;\n }\n let cardTemplateFn: (data: object) => NodeList = compile(document.getElementById('card_template').innerHTML.trim());\n let card: NodeList; let cardEle: HTMLElement; let cardObj: JSON[] = book as any; let data: Object[] = []; let multiSelectData: Object[] = []; let searchData: Object[] = [];\n let searchValCount: number = 0; let filterCategory: { [key: string]: Object; }[] = [{ Name: 'Client-Side', Code: 'client' }, { Name: 'Server-Side', Code: 'server' }, { Name: 'Front-End', Code: 'ui' }];\n let emptyData: boolean = true;\n cardRendering(cardObj);\n /* Initialize MultiSelect component */\n let multiselectComp: MultiSelect = new MultiSelect({\n // set the local data to dataSource property\n dataSource: filterCategory,\n // map the appropriate columns to fields property\n fields: { text: 'Name', value: 'Code'},\n // set the placeholder to MultiSelect input element\n placeholder: 'Search by categories',\n select: multiSelectFun,\n removed: multiSelectRemove,\n });\n multiselectComp.appendTo('#local');\n\n /* Funtion for Rendering Cards */\n function cardRendering(cardObj: Object[]): void {\n let errorContent: HTMLElement = document.querySelector('.tile_layout .row.error') as HTMLElement;\n if (cardObj.length > 0) {\n errorContent.style.display = 'none';\n cardObj.forEach((data: Object, index: number): void => {\n card = cardTemplateFn(data); cardEle = document.getElementById('card_sample_' + (++index));\n if (cardEle) { cardEle.appendChild(card[0]); } });\n } else {\n errorContent.style.display = 'flex';\n }\n }\n /* Funtion for Destroying Cards */\n function destroyAllCard(): void {\n let cards: NodeList = document.querySelectorAll('.card-control-section .e-card');\n [].slice.call(cards).forEach( (el: HTMLElement) => {\n detach(el);\n });\n }\n /* Remove event function for multiSelect component */\n function multiSelectRemove(e: RemoveEventArgs): void {\n let cardDa: Object[] = searchData.length > 0 ? searchData : (multiSelectData.length > 0 ? multiSelectData : cardObj);\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = cardDa; destroyAllCard(); cardRendering(cardObj);\n } else if (multiselectComp.value.length === 0 && searchValCount > 0) {\n searchFilter((document.getElementById('search_Card')).value);\n } else if (multiselectComp.value.length === 0) {\n destroyAllCard(); multiSelectData = cardDa;\n cardRendering(cardDa); } else {\n let keywords: string[] = (e.itemData).Code.split(',');\n let dublicate: Object[];\n keywords.forEach((key: string): void => {\n dublicate = new DataManager(cardObj as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\n dublicate.forEach((da: Object): void => {\n if (cardDa.indexOf(da) !== -1) {\n cardDa.splice(cardDa.indexOf(da), 1); }\n });\n multiSelectData = cardDa;\n });\n destroyAllCard(); cardRendering(multiSelectData); }\n }\n /* Select event function for multiSelect component */\n function multiSelectFun(e: SelectEventArgs): void {\n let keywords: string[] = ((e.itemData).Code).split(','); let dublicate: Object[];\n let cardDa: Object[] = searchData.length > 0 ? searchData : cardObj;\n if (multiselectComp.value && multiselectComp.value.length === 0 && searchValCount === 0) {\n multiSelectData = []; }\n keywords.forEach((key: string): void => {\n dublicate = new DataManager(cardDa as JSON[]).executeLocal(new Query().where('cardImage.tag', 'Contains', key, true));\n if (dublicate.length === 0) {\n multiSelectData = [];\n destroyAllCard();\n return; }\n dublicate.forEach((da: Object): void => {\n if (multiSelectData.indexOf(da) === -1) {\n multiSelectData.push(da); }\n }); });\n destroyAllCard();\n cardRendering(multiSelectData);\n }\n /* Function for Filtering Cards */\n function searchFilter(key: string): void {\n searchValCount = key.length;\n let predicate: Predicate = new Predicate('cardContent', 'Contains', key, true);\n predicate = predicate.or('cardImage.title', 'Contains', key, true).or('header_title', 'Contains', key, true).or('header_subtitle', 'Contains', key, true);\n let cardDa: Object[] = (multiSelectData.length > 0 && multiselectComp.value.length > 0 ) ? multiSelectData : cardObj;\n searchData = data = new DataManager(cardDa as JSON[]).executeLocal(new Query().where(predicate));\n destroyAllCard(); cardRendering(data);\n }\n document.getElementById('search_Card').onkeyup = (e: KeyboardEvent) => {\n if (e.code === 'Tab' || e.code === 'Escape' || e.code === 'ShiftLeft' || (e.code === 'Backspace' && emptyData)) {\n return; }\n let inputVal: string = (e.target).value;\n inputVal.length === 0 ? emptyData = true : emptyData = false;\n searchFilter(inputVal);\n };\n\n/* tslint:enable:max-line-length\n tslint:enable:no-string-literal */"} \ No newline at end of file diff --git a/src/card/vertical-stack.json b/src/card/vertical-stack.json index 1c6afbd6..c35eecbd 100644 --- a/src/card/vertical-stack.json +++ b/src/card/vertical-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Mayumi Ohno
\n
Marketing Representative
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n
\n
\n
John Doe
\n
Real Estate Agent
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
johndoe@mail.com
011-141-221
www.johndoe.com
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Laura Callahan
\n
Sales Coordinator
\n
\n
\n
\n
\n Laura received a BA in psychology from the University of Washington. She has also completed a course in business French.\n She reads and writes French.\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Sample for CSS Vertical Layout Cards.\n */\n\n \n //\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Mayumi Ohno
\n
Marketing Representative
\n
\n
\n
\n \n \n \n
\n
\n
\n
\n
\n
\n
\n
John Doe
\n
Real Estate Agent
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n
johndoe@mail.com
011-141-221
www.johndoe.com
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Laura Callahan
\n
Sales Coordinator
\n
\n
\n
\n
\n Laura received a BA in psychology from the University of Washington. She has also completed a course in business French.\n She reads and writes French.\n
\n
\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Sample for CSS Vertical Layout Cards.\n */\n\n \n //\n\n"} \ No newline at end of file diff --git a/src/chart/sample.json b/src/chart/sample.json index a4ed6342..32fe02fc 100644 --- a/src/chart/sample.json +++ b/src/chart/sample.json @@ -198,6 +198,20 @@ ] } }, + { + "url": "stacked-step-area", + "name": "Stacked Step Area", + "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to render and configure the stacking step area series.", + "category": "Area Charts", + "type": "new", + "api": { + "Chart": [ + "primaryXAxis", + "primaryYAxis", + "series" + ] + } + }, { "url": "stacked-area-100", "name": "100% Stacked Area", @@ -839,7 +853,6 @@ "name": "Smart Labels", "description": "This demo sample for Essential JavaScript2 Chart control demonstrates how to arrange the labels smartly without overlapping with each other.", "category": "Accumulation Charts", - "type": "update", "api": { "AccumulationChart": [ "series", diff --git a/src/chart/stacked-step-area.html b/src/chart/stacked-step-area.html new file mode 100644 index 00000000..c9bfc476 --- /dev/null +++ b/src/chart/stacked-step-area.html @@ -0,0 +1,29 @@ +
+
+
+
+

+ This sample visualizes the data about electricity production using stacked stepped area chart. +

+
+
+

+ In this example, you can see how to render and configure the Stacked StepArea type charts. This series forms the step line progress, by connecting points through vertical and horizontal lines with area filled. + You can use dashArray, width, fill properties to customize the area. marker and dataLabel are used to represent individual data and its value. +

+
+

Injecting Module

+

+ Chart component features are segregated into individual feature-wise modules. To use step area series, we need to inject + StackingStepAreaSeries module using Chart.Inject(StackingStepAreaSeries) method. +

+

+ More information on the Stacked StepArea series can be found in this + documentation section. +

+
+ diff --git a/src/chart/stacked-step-area.ts b/src/chart/stacked-step-area.ts new file mode 100644 index 00000000..52d6b6ac --- /dev/null +++ b/src/chart/stacked-step-area.ts @@ -0,0 +1,64 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Chart, StackingStepAreaSeries, Legend, ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-charts'; +Chart.Inject(StackingStepAreaSeries, Legend); +import { Browser } from '@syncfusion/ej2-base'; + +/** + * Sample for StepArea Series + */ +(window as any).default = (): void => { + loadCultureFiles(); + let chart: Chart = new Chart({ + primaryXAxis: { + valueType: 'Double', + majorGridLines: { width: 0 }, + edgeLabelPlacement: 'Shift', + }, + primaryYAxis: { + title: 'Production (Billion as kWh)', + valueType: 'Double', + labelFormat: '{value}B', + lineStyle: { width: 0 }, + majorTickLines: { width: 0 } + }, + chartArea: { + border: { + width: 0 + } + }, + series: [ + { + type: 'StackingStepArea', + dataSource: [{ x: 2000, y: 416 }, { x: 2001, y: 490 }, { x: 2002, y: 470 }, { x: 2003, y: 500 }, + { x: 2004, y: 449 }, { x: 2005, y: 470 }, { x: 2006, y: 437 }, { x: 2007, y: 458 }, + { x: 2008, y: 500 }, { x: 2009, y: 473 }, { x: 2010, y: 520 }, { x: 2011, y: 509 }], + name: 'Renewable', + xName: 'x', + yName: 'y', + fill: '#56CCF2', + opacity: 0.5 + }, + { + type: 'StackingStepArea', + dataSource: [{ x: 2000, y: 180 }, { x: 2001, y: 240 }, { x: 2002, y: 370 }, { x: 2003, y: 200 }, + { x: 2004, y: 229 }, { x: 2005, y: 210 }, { x: 2006, y: 337 }, { x: 2007, y: 258 }, + { x: 2008, y: 300 }, { x: 2009, y: 173 }, { x: 2010, y: 220 }, { x: 2011, y: 309 }], + name: 'Non-Renewable', + xName: 'x', + yName: 'y', + fill: '#2F80ED', + opacity: 0.5 + }, + ], + //Initializing Chart title + title: 'Electricity- Production', + width: Browser.isDevice ? '100%' : '60%', + load: (args: ILoadedEventArgs) => { + let selectedTheme: string = location.hash.split('/')[1]; + selectedTheme = selectedTheme ? selectedTheme : 'Material'; + args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + + selectedTheme.slice(1)).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast'); + } + }); + chart.appendTo('#container'); +}; \ No newline at end of file diff --git a/src/circular-gauge/sample.json b/src/circular-gauge/sample.json index edab124e..b793a3ca 100644 --- a/src/circular-gauge/sample.json +++ b/src/circular-gauge/sample.json @@ -2,7 +2,6 @@ "name": "Circular Gauge", "directory": "circular-gauge", "category": "Data Visualization", - "type": "update", "ftName": "circulargauge", "samples": [ { @@ -60,7 +59,6 @@ { "url": "gradient-color", "name": "Gradient Color", - "type": "new", "category": "Circular Gauge" }, { @@ -108,7 +106,6 @@ { "url": "export", "name": "Print & Export", - "type": "update", "category": "Export", "description": "This demo for Essential JS2 Circular Gauge control demonstrates the export and print methode of circular gauge." }, diff --git a/src/common/index.ts b/src/common/index.ts index 0f70edfc..b274dada 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -1105,7 +1105,9 @@ function controlSelect(arg: any): void { toggleLeftPane(); } window.hashString = '#/' + theme + path; - setTimeout(() => { location.hash = '#/' + theme + path; }, 600); + setTimeout(() => { + location.hash = '#/' + theme + path; + }, 600); } } } diff --git a/src/dashboard-layout/analytics-dashboard.html b/src/dashboard-layout/analytics-dashboard.html index d9a09740..da22799f 100644 --- a/src/dashboard-layout/analytics-dashboard.html +++ b/src/dashboard-layout/analytics-dashboard.html @@ -176,6 +176,10 @@ #dockSidebar { text-align: center; } + + #dockSidebar.e-sidebar .content-area{ + margin: 0px; + } .e-icons::before { font-size: 20px; diff --git a/src/diagram/swimlane.ts b/src/diagram/swimlane.ts index f618acb7..0746172e 100644 --- a/src/diagram/swimlane.ts +++ b/src/diagram/swimlane.ts @@ -67,20 +67,20 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel { let gridlines: GridlinesModel = { lineColor: '#e0e0e0', lineIntervals: interval }; let port: PointPortModel[] = [ - { id:'Port1', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }, - { id:'Port2',offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }, - { id:'Port3',offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw }, - { id:'Port4',offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Draw } + { id:'Port1', offset: { x: 0, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw }, + { id:'Port2',offset: { x: 0.5, y: 0 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw }, + { id:'Port3',offset: { x: 1, y: 0.5 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw }, + { id:'Port4',offset: { x: 0.5, y: 1 }, visibility: PortVisibility.Connect | PortVisibility.Hover, constraints: PortConstraints.Default | PortConstraints.Draw } ] let nodes: NodeModel[] = [ { id: 'swimlane', shape: { type: 'SwimLane', + orientation: 'Horizontal', header: { annotation: { content: 'SALES PROCESS FLOW CHART', style: { fill: 'transparent' } }, height: 50, style: { fontSize: 11 }, - orientation: 'Horizontal', }, lanes: [ { @@ -196,7 +196,7 @@ function getConnectorDefaults(connector: ConnectorModel): ConnectorModel { phases: [ { id: 'phase1', offset: 170, - header: { content: { content: 'Phase' } } + header: { annotation: { content: 'Phase' } } }, ], phaseSize: 20, diff --git a/src/document-editor/data-mail-merge.json b/src/document-editor/data-mail-merge.json new file mode 100644 index 00000000..30a3f720 --- /dev/null +++ b/src/document-editor/data-mail-merge.json @@ -0,0 +1,4007 @@ +{ + "sections": [ + { + "blocks": [ + { + "rows": [ + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 83.5999984741211, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD TableStart:Orders \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«TableStart:Orders»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "characterFormat": { + "bold": true, + "fontSize": 24.0, + "fontSizeBidi": 24.0 + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "INVOICE", + "characterFormat": { + "bold": true, + "fontSize": 24.0, + "fontSizeBidi": 24.0 + } + } + ] + }, + { + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "imageString": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM4AAAAJCAYAAAB68hPIAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAA+SURBVFhH7dgxEQAwDAOxgCuiYiyiEEgxxLN8Jwi/uMbM1qvuHmCnzn0D7AgHAsKBgHAgIBwICAcC7mhY6/kc4VEEyn2PzAAAAABJRU5ErkJggg==", + "length": 1, + "width": 103.0, + "height": 4.499999523162842, + "isInlineImage": true, + "isMetaFile": false + } + ] + }, + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "Invoice to:", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + } + ] + }, + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShipName \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«ShipName»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShipAddress \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«ShipAddress»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShipCity \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«ShipCity»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + }, + { + "text": " - ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShipPostalCode \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«ShipPostalCode»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShipCountry \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "text": "ShipCountry", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 347.1000061035156, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#FFFFFFFF" + }, + "cellWidth": 347.1000061035156 + } + }, + { + "blocks": [ + { + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [] + }, + { + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [] + }, + { + "paragraphFormat": { + "afterSpacing": 0.0, + "styleName": "Normal" + }, + "inlines": [] + }, + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "afterSpacing": 0.0, + "styleName": "Normal" + }, + "inlines": [] + }, + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "Order ID ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " :", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD OrderID \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«OrderID»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "characterFormat": { + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "Order", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " Date ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " :", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD OrderDate \\@ \"dd-MMM-yyyy\" \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«OrderDate»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + }, + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "Customer ID ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " :", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "text": " ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD CustomerID \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«CustomerID»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + }, + { + "paragraphFormat": { + "styleName": "Header", + "tabs": [ + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 234.0 + }, + { + "tabJustification": "Left", + "position": 0.0, + "tabLeader": "None", + "deletePosition": 468.0 + } + ] + }, + "inlines": [ + { + "text": "Shipped Date : ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ShippedDate \\@ \"dd-MMM-yyyy\" \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«ShippedDate»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + }, + { + "text": " ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIEL", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "text": "D TableEnd:Orders \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 2 + }, + { + "text": "«TableEnd:Orders»", + "characterFormat": { + "fontFamily": "Calibri" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 203.6999969482422, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#FFFFFFFF" + }, + "cellWidth": 203.6999969482422 + } + } + ] + } + ], + "title": null, + "description": null, + "tableFormat": { + "allowAutoFit": false, + "leftIndent": 0.0, + "tableAlignment": "Left", + "preferredWidthType": "Auto", + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": true + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "bidi": false + } + }, + { + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [] + }, + { + "rows": [ + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 1.0, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Product", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": " ID", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#2E74B5FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Quantity", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#2E74B5FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Unit ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": "Price", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#2E74B5FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Discount", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#2E74B5FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Price", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "fontColor": "#FFFFFFFF", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#2E74B5FF" + }, + "cellWidth": 107.9000015258789 + } + } + ] + }, + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 1.0, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD TableStart:Order \\* MERGEFORMAT ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": "TableStart:Order", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + }, + { + "text": " ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ProductName \\* MERGEFORMAT ", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": "ProductName", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "bold": true, + "fontFamily": "Calibri", + "boldBidi": true, + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD Quantity \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "Quantity", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "$", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD UnitPrice \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "UnitPrice", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD Discount \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "Discount", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 107.9000015258789 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "$", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD ExtendedPrice \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "ExtendedPrice", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + }, + { + "text": " ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD TableEnd:Order \\* ME", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "RGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "TableEnd:Order", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidth": 107.9000015258789, + "preferredWidthType": "Point", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 107.9000015258789 + } + } + ] + } + ], + "title": null, + "description": null, + "tableFormat": { + "allowAutoFit": true, + "leftIndent": 0.0, + "tableAlignment": "Left", + "preferredWidthType": "Auto", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "bidi": false + } + }, + { + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [] + }, + { + "rows": [ + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 1.0, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Sub Total", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 56.349998474121097 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Right", + "styleName": "Normal" + }, + "inlines": [ + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD TableStart:OrderTotals \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "TableStart:OrderTotals", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + }, + { + "text": " ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "name": "_GoBack", + "bookmarkType": 0 + }, + { + "name": "_GoBack", + "bookmarkType": 1 + }, + { + "text": "$", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD Subtotal \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«Subtotal»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 134.39999389648438 + } + } + ] + }, + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 1.0, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Freight", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 56.349998474121097 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Right", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "$", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD Freight \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "Freight", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 134.39999389648438 + } + } + ] + }, + { + "rowFormat": { + "allowBreakAcrossPages": true, + "isHeader": false, + "height": 1.0, + "heightType": "AtLeast", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + } + }, + "cells": [ + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Total", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 56.349998474121097 + } + }, + { + "blocks": [ + { + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + }, + "paragraphFormat": { + "textAlignment": "Right", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "$", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD Total \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«Total»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + }, + { + "text": " ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "hasFieldEnd": true, + "fieldType": 0 + }, + { + "text": " MERGEFIELD TableEnd:OrderTotals \\* MERGEFORMAT ", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 2 + }, + { + "text": "«", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "TableEnd:OrderTotals", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "text": "»", + "characterFormat": { + "fontFamily": "Calibri", + "fontFamilyBidi": "Arial" + } + }, + { + "fieldType": 1 + } + ] + } + ], + "cellFormat": { + "leftMargin": 5.400000095367432, + "rightMargin": 5.400000095367432, + "topMargin": 0.0, + "bottomMargin": 0.0, + "columnSpan": 1, + "rowSpan": 1, + "preferredWidthType": "Auto", + "verticalAlignment": "Top", + "isSamePaddingAsTable": false, + "borders": { + "left": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "right": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "top": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "bottom": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "vertical": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "horizontal": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "cellWidth": 134.39999389648438 + } + } + ] + } + ], + "title": null, + "description": null, + "tableFormat": { + "allowAutoFit": true, + "leftIndent": 0.0, + "tableAlignment": "Right", + "preferredWidthType": "Auto", + "borders": { + "left": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "right": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "top": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "bottom": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "vertical": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "horizontal": { + "lineStyle": "Single", + "lineWidth": 0.5, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false, + "color": "#FFFFFFFF" + }, + "diagonalDown": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + }, + "diagonalUp": { + "lineStyle": "None", + "lineWidth": 0.0, + "shadow": false, + "space": 0.0, + "hasNoneStyle": false + } + }, + "shading": { + "texture": "TextureNone", + "backgroundColor": "#E7E6E6FF" + }, + "bidi": false + } + }, + { + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [] + }, + { + "characterFormat": { + "fontSize": 16.0, + "fontSizeBidi": 16.0 + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [] + }, + { + "characterFormat": { + "fontSize": 16.0, + "fontFamily": "Calibri", + "fontSizeBidi": 16.0 + }, + "paragraphFormat": { + "textAlignment": "Center", + "styleName": "Normal" + }, + "inlines": [ + { + "text": "Thank you for doing business with us!", + "characterFormat": { + "fontSize": 16.0, + "fontFamily": "Calibri", + "fontSizeBidi": 16.0 + } + } + ] + } + ], + "headersFooters": { + "header": { + "blocks": [ + { + "paragraphFormat": { + "styleName": "Header" + }, + "inlines": [ + { + "shapeId": 2, + "name": "Rectangle 2", + "alternativeText": null, + "title": null, + "visible": true, + "width": 614.8, + "height": 15.05, + "widthScale": 100.0, + "heightScale": 100.0, + "lineFormat": { + "lineFormatType": "Solid", + "color": "#000000FF", + "weight": 1.0, + "lineStyle": "Solid" + }, + "verticalPosition": -183.55, + "verticalOrigin": "Paragraph", + "verticalAlignment": "None", + "horizontalPosition": -74.45, + "horizontalOrigin": "Column", + "horizontalAlignment": "None", + "zOrderPosition": 251657728, + "allowOverlap": true, + "layoutInCell": true, + "lockAnchor": false, + "autoShapeType": "Rectangle", + "textFrame": { + "textVerticalAlignment": "Top", + "leftMargin": 7.087, + "rightMargin": 7.087, + "topMargin": 3.685, + "bottomMargin": 3.685, + "blocks": [ + { + "paragraphFormat": { + "styleName": "Normal" + }, + "inlines": [] + } + ] + } + } + ] + } + ] + } + }, + "sectionFormat": { + "headerDistance": 36.0, + "footerDistance": 36.0, + "pageWidth": 612.0, + "pageHeight": 792.0, + "leftMargin": 36.0, + "rightMargin": 36.0, + "topMargin": 36.0, + "bottomMargin": 36.0, + "differentFirstPage": false, + "differentOddAndEvenPages": false, + "bidi": false, + "restartPageNumbering": false, + "pageStartingNumber": 0 + } + } + ], + "characterFormat": { + "fontSize": 11.0, + "fontFamily": "Times New Roman", + "fontColor": "#000000FF", + "fontSizeBidi": 11.0, + "fontFamilyBidi": "Times New Roman" + }, + "background": { + "color": "#FFFFFFFF" + }, + "styles": [ + { + "type": "Paragraph", + "name": "Normal", + "next": "Normal", + "characterFormat": { + "fontSize": 12.0, + "fontSizeBidi": 12.0 + }, + "paragraphFormat": { + "afterSpacing": 8.0, + "lineSpacing": 1.0791666507720948, + "lineSpacingType": "Multiple" + } + }, + { + "type": "Paragraph", + "name": "Heading 1", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 1 Char", + "characterFormat": { + "fontSize": 16.0, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + }, + "paragraphFormat": { + "beforeSpacing": 12.0, + "afterSpacing": 0.0, + "outlineLevel": "Level1" + } + }, + { + "type": "Paragraph", + "name": "Heading 2", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 2 Char", + "characterFormat": { + "fontSize": 13.0, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + }, + "paragraphFormat": { + "beforeSpacing": 2.0, + "afterSpacing": 0.0, + "outlineLevel": "Level2" + } + }, + { + "type": "Paragraph", + "name": "Heading 3", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 3 Char", + "characterFormat": { + "fontFamily": "Calibri Light", + "fontColor": "#1F3763FF" + }, + "paragraphFormat": { + "beforeSpacing": 2.0, + "afterSpacing": 0.0, + "outlineLevel": "Level3" + } + }, + { + "type": "Paragraph", + "name": "Heading 4", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 4 Char", + "characterFormat": { + "italic": true, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + }, + "paragraphFormat": { + "beforeSpacing": 2.0, + "afterSpacing": 0.0, + "outlineLevel": "Level4" + } + }, + { + "type": "Paragraph", + "name": "Heading 5", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 5 Char", + "characterFormat": { + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + }, + "paragraphFormat": { + "beforeSpacing": 2.0, + "afterSpacing": 0.0, + "outlineLevel": "Level5" + } + }, + { + "type": "Paragraph", + "name": "Heading 6", + "basedOn": "Normal", + "next": "Normal", + "link": "Heading 6 Char", + "characterFormat": { + "fontFamily": "Calibri Light", + "fontColor": "#1F3763FF" + }, + "paragraphFormat": { + "beforeSpacing": 2.0, + "afterSpacing": 0.0, + "outlineLevel": "Level6" + } + }, + { + "type": "Character", + "name": "Default Paragraph Font" + }, + { + "type": "Paragraph", + "name": "Header", + "basedOn": "Normal", + "next": "Header", + "link": "Header Char", + "paragraphFormat": { + "afterSpacing": 0.0, + "lineSpacing": 1.0, + "lineSpacingType": "Multiple", + "tabs": [ + { + "tabJustification": "Center", + "position": 234.0, + "tabLeader": "None", + "deletePosition": 0.0 + }, + { + "tabJustification": "Right", + "position": 468.0, + "tabLeader": "None", + "deletePosition": 0.0 + } + ] + } + }, + { + "type": "Character", + "name": "Header Char", + "basedOn": "Default Paragraph Font" + }, + { + "type": "Paragraph", + "name": "Footer", + "basedOn": "Normal", + "next": "Footer", + "link": "Footer Char", + "paragraphFormat": { + "afterSpacing": 0.0, + "lineSpacing": 1.0, + "lineSpacingType": "Multiple", + "tabs": [ + { + "tabJustification": "Center", + "position": 234.0, + "tabLeader": "None", + "deletePosition": 0.0 + }, + { + "tabJustification": "Right", + "position": 468.0, + "tabLeader": "None", + "deletePosition": 0.0 + } + ] + } + }, + { + "type": "Character", + "name": "Footer Char", + "basedOn": "Default Paragraph Font" + }, + { + "type": "Character", + "name": "Hyperlink", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "underline": "Single", + "fontColor": "#0563C1FF" + } + }, + { + "type": "Character", + "name": "Heading 1 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "fontSize": 16.0, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + } + }, + { + "type": "Character", + "name": "Heading 2 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "fontSize": 13.0, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + } + }, + { + "type": "Character", + "name": "Heading 3 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "fontSize": 12.0, + "fontFamily": "Calibri Light", + "fontColor": "#1F3763FF" + } + }, + { + "type": "Character", + "name": "Heading 4 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "italic": true, + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + } + }, + { + "type": "Character", + "name": "Heading 5 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "fontFamily": "Calibri Light", + "fontColor": "#2F5496FF" + } + }, + { + "type": "Character", + "name": "Heading 6 Char", + "basedOn": "Default Paragraph Font", + "characterFormat": { + "fontFamily": "Calibri Light", + "fontColor": "#1F3763FF" + } + } + ], + "defaultTabWidth": 36.0, + "formatting": false, + "trackChanges": false, + "protectionType": "NoProtection", + "enforcement": false, + "dontUseHTMLParagraphAutoSpacing": false +} \ No newline at end of file diff --git a/src/document-editor/mail-merge.html b/src/document-editor/mail-merge.html new file mode 100644 index 00000000..1e36a8a5 --- /dev/null +++ b/src/document-editor/mail-merge.html @@ -0,0 +1,186 @@ +
+
+
+ +
+
+
+
+
+
+
+
+ + + +
+ + + +
+
+
+

This example demonstrates the mail merge operation in DocumentEditor. Use the "Merge Document" toolbar button to perform the mail merge operation.

+
+
+

Mail merge feature in the DocumentEditor. +

+
    +
  • Fields can be inserted using API.
    • +
  • Document generated is mail merged by Syncfusion DocIO on the server-side.
    • +
  • Merged document is opened in the DocumentEditor.
    • +
+

More information about the document editor features can be found in this documentation + section. +

+
+ + diff --git a/src/document-editor/mail-merge.ts b/src/document-editor/mail-merge.ts new file mode 100644 index 00000000..3c34b9f4 --- /dev/null +++ b/src/document-editor/mail-merge.ts @@ -0,0 +1,291 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor'; +import { TitleBar } from './title-bar'; +import { ListView, SelectEventArgs } from '@syncfusion/ej2-lists'; +import { ClickEventArgs } from '@syncfusion/ej2-navigations/src/toolbar/toolbar'; +import * as data from './data-mail-merge.json'; +import { Dialog, DialogUtility } from '@syncfusion/ej2-popups'; +/** + * Default document editor sample + */ +// tslint:disable:max-func-body-length +(window as any).default = (): void => { + loadCultureFiles(); + let hostUrl: string = 'https://ej2services.syncfusion.com/production/web-services/'; + let container: DocumentEditorContainer = new DocumentEditorContainer({enableToolbar: true, height: '590px', + toolbarItems: [ + 'New', 'Open', 'Separator', 'Undo', + 'Redo', + 'Separator', + 'Image', + 'Table', + 'Hyperlink', + 'Bookmark', + 'TableOfContents', + 'Separator', + 'Header', + 'Footer', + 'PageSetup', + 'PageNumber', + 'Break', + 'Separator', + 'Find', + 'Separator', + 'Comments', + 'TrackChanges', + 'Separator', + 'LocalClipboard', + 'RestrictEditing', + 'Separator', + 'FormFields', + 'UpdateFields', + 'Separator', + { + prefixIcon: 'sf-icon-InsertMergeField', + tooltipText: 'Insert Field', + text: onWrapText('Insert Field'), + id: 'InsertField' + }, + { + prefixIcon: 'sf-icon-FinishMerge', + tooltipText: 'Merge Document', + text: onWrapText('Merge Document'), + id: 'MergeDocument' + }, + ] + }); + DocumentEditorContainer.Inject(Toolbar); + container.serviceUrl = hostUrl + 'api/documenteditor/'; + container.appendTo('#container'); + let titleBar: TitleBar = new TitleBar(document.getElementById('documenteditor_titlebar'), container.documentEditor, true); + container.documentEditor.open(JSON.stringify((data))); + container.documentEditor.documentName = 'Mail Merge'; + titleBar.updateDocumentTitle(); + container.documentChange = (): void => { + titleBar.updateDocumentTitle(); + container.documentEditor.focusIn(); + }; + function onWrapText(text: string): string { + let content: string = ''; + let index: number = text.lastIndexOf(' '); + content = text.slice(0, index); + text.slice(index); + content += '
' + text.slice(index) + '
'; + return content; + } + container.toolbarClick = (args: ClickEventArgs): void => { + switch (args.item.id) { + case 'MergeDocument': + mergeDocument(); + break; + case 'InsertField': + showInsertFielddialog(); + break; + } + }; + let waitingPopUp: HTMLElement; + let inActiveDiv: HTMLElement; + let listData: { [key: string]: Object }[] = [ + { + text: 'ProductName', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'ShipName', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'CustomerID', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'Quantity', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'UnitPrice', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'Discount', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'ShipAddress', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'ShipCity', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'ShipCountry', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'OrderId', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + }, + { + text: 'OrderDate', + category: 'Drag or click the field to insert.', + htmlAttributes: { draggable: true } + } + ]; + let listDivElement: HTMLElement = document.getElementById('listview'); + let listView: ListView = new ListView({ + dataSource: listData, + fields: { tooltip: 'category' }, + select: onselect + }); + listView.appendTo(listDivElement); + document.getElementById('listview').addEventListener('dragstart', (event: any): void => { + event.dataTransfer.setData('Text', event.target.innerText); + event.target.classList.add('de-drag-target'); + }); + function onselect(args: SelectEventArgs): void { + let fieldName: any = args.text; + listView.selectItem(undefined); + insertField(fieldName); + } + function insertField(fieldName: any): void { + let fileName: any = fieldName.replace(/\n/g, '').replace(/\r/g, '').replace(/\r\n/g, ''); + let fieldCode: any = 'MERGEFIELD ' + fileName + ' \\* MERGEFORMAT '; + container.documentEditor.editor.insertField(fieldCode, '«' + fieldName + '»'); + container.documentEditor.focusIn(); + } + + // Prevent default drag over for document editor element + document.getElementById('container').addEventListener('dragover', (event: any): void => { + event.preventDefault(); + }); + + // Drop Event for document editor element + document.getElementById('container').addEventListener('drop', (e: any) => { + let text: string = e.dataTransfer.getData('Text'); + container.documentEditor.selection.select({ x: e.offsetX, y: e.offsetY, extend: false }); + insertField(text); + }); + + document.addEventListener('dragend', (event: any) => { + if (event.target.classList.contains('de-drag-target')) { + event.target.classList.remove('de-drag-target'); + } + }); + function showInsertFielddialog(): void { + let instance: any = this; + if (document.getElementById('insert_merge_field') === null || document.getElementById('insert_merge_field') === undefined) { + let fieldcontainer: any = document.createElement('div'); + fieldcontainer.id = 'insert_merge_field'; + document.body.appendChild(fieldcontainer); + insertFieldDialogObj.appendTo('#insert_merge_field'); + fieldcontainer.parentElement.style.position = 'fixed'; + fieldcontainer.style.width = 'auto'; + fieldcontainer.style.height = 'auto'; + } + insertFieldDialogObj.close = (): void => { container.documentEditor.focusIn(); }; + insertFieldDialogObj.beforeOpen = (): void => { container.documentEditor.focusIn(); }; + insertFieldDialogObj.show(); + let fieldNameTextBox: any = document.getElementById('field_text'); + fieldNameTextBox.value = ''; + } + function closeFieldDialog(): void { + insertFieldDialogObj.hide(); + container.documentEditor.focusIn(); + } + let insertFieldDialogObj: Dialog = new Dialog({ + header: 'Merge Field', + content: + '
' + // tslint:disable-next-line:max-line-length + + '
' + + '
', + showCloseIcon: true, + isModal: true, + width: 'auto', + height: 'auto', + close: closeFieldDialog, + buttons: [ + { + 'click': (): void => { + let fieldNameTextBox: any = document.getElementById('field_text'); + let fieldName: any = fieldNameTextBox.value; + if (fieldName !== '') { + container.documentEditor.editor.insertField('MERGEFIELD ' + fieldName + ' \\* MERGEFORMAT'); + } + insertFieldDialogObj.hide(); + container.documentEditor.focusIn(); + }, + buttonModel: { + content: 'Ok', + cssClass: 'e-flat', + isPrimary: true, + }, + }, + { + 'click': (): void => { + insertFieldDialogObj.hide(); + container.documentEditor.focusIn(); + }, + buttonModel: { + content: 'Cancel', + cssClass: 'e-flat', + }, + }, + ], + }); + + function mergeDocument(): void { + container.documentEditor.saveAsBlob('Docx').then((blob: Blob) => { + let exportedDocumment: Blob = blob; + let fileReader: any = new FileReader(); + fileReader.onload = (): void => { + let base64String: any = fileReader.result; + let responseData: any = { + fileName: container.documentEditor.documentName + '.docx', + documentData: base64String + }; + waitingPopUp = document.getElementById('waiting-popup'); + inActiveDiv = document.getElementById('popup-overlay'); + showHideWaitingIndicator(true); + let baseUrl: string = hostUrl + 'api/documenteditor/MailMerge'; + let httpRequest: XMLHttpRequest = new XMLHttpRequest(); + httpRequest.open('POST', baseUrl, true); + httpRequest.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); + httpRequest.onreadystatechange = () => { + if (httpRequest.readyState === 4) { + if (httpRequest.status === 200 || httpRequest.status === 304) { + container.documentEditor.open(httpRequest.responseText); + } else { + // Failed to merge document + DialogUtility.alert({ + title: 'Information', + content: 'failure to merge document', + showCloseIcon: true, + closeOnEscape: true, + }); + } + showHideWaitingIndicator(false); + } + }; + httpRequest.send(JSON.stringify((responseData))); + }; + fileReader.readAsDataURL(blob); + }); + } + function showHideWaitingIndicator(show: boolean): void { + inActiveDiv.style.display = show ? 'block' : 'none'; + waitingPopUp.style.display = show ? 'block' : 'none'; + } +}; + diff --git a/src/document-editor/print.html b/src/document-editor/print.html index a1ab301b..75abfb55 100644 --- a/src/document-editor/print.html +++ b/src/document-editor/print.html @@ -86,7 +86,7 @@ body { .overlay { z-index: 10; display: none; - position: fixed; + position: absolute; background-color: #383838; height: 100%; width: 100%; diff --git a/src/document-editor/sample.json b/src/document-editor/sample.json index 625ad3ae..35ea325b 100644 --- a/src/document-editor/sample.json +++ b/src/document-editor/sample.json @@ -1253,7 +1253,6 @@ "url": "comments", "name": "Comments", "category": "Review", - "type":"update", "description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.", "api": { "Editor": [ @@ -1272,7 +1271,6 @@ "url": "track-changes", "name": "Track Changes", "category": "Review", - "type":"new", "description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.", "api": { "DocumentEditor": [ @@ -1309,7 +1307,6 @@ "url": "form-fields", "name": "Form Fields", "category": "Editing Features", - "type":"new", "description": "The Document Editor component supports add and edit comments in a Word document for comment discussion.", "api": { "DocumentEditor": [ @@ -1341,7 +1338,43 @@ "resize" ] } - } - + }, + { + "url": "mail-merge", + "name": "Mail Merge", + "category": "Mail Merge", + "type":"new", + "description": "The Document Editor component provides support to mail merge document with the help of Syncfusion DocIO.", + "api": { + "DocumentEditor": [ + "isReadOnly", + "enableAllModules", + "acceptTab", + "documentName", + "pageOutline", + "selection", + "editor", + "editorHistory", + "enableLocalPaste", + "pageCount", + "zoomFactor", + "documentChange", + "viewChange", + "selectionChange", + "requestNavigate", + "contentChange", + "open", + "print", + "openBlank", + "focusIn", + "save", + "showDialog", + "showOptionsPane", + "fitPage", + "getStyleNames", + "resize" + ] + } + } ] } \ No newline at end of file diff --git a/src/drop-down-tree/icons.html b/src/drop-down-tree/icons.html index 0ea66e27..2b9b87ac 100644 --- a/src/drop-down-tree/icons.html +++ b/src/drop-down-tree/icons.html @@ -1,12 +1,12 @@
- + - +

This sample explains you about the Dropdown Tree item that can be configured by the icons or images. Click on the icon or double click on it to expand or collapse and to show the icons or images that are configured with the diff --git a/src/drop-down-tree/sample.json b/src/drop-down-tree/sample.json index 59f9ef4d..a3b21369 100644 --- a/src/drop-down-tree/sample.json +++ b/src/drop-down-tree/sample.json @@ -3,7 +3,6 @@ "directory": "drop-down-tree", "category": "Dropdowns", "ftName": "dropdown-tree", - "type": "update", "samples": [ { "url": "default", @@ -79,7 +78,6 @@ "name": "Filtering", "description": "This example demonstrates how the filtering functionalities works based on the typed characters in the JavaScript drop-down tree control.", "category": "Dropdown Tree", - "type": "new", "api": { "DropDownTree": [ "placeholder", diff --git a/src/drop-down-tree/template.html b/src/drop-down-tree/template.html index 2f1a2cd1..1d118cb9 100644 --- a/src/drop-down-tree/template.html +++ b/src/drop-down-tree/template.html @@ -1,5 +1,5 @@

-
+
diff --git a/src/drop-down-tree/template.ts b/src/drop-down-tree/template.ts index 0ac9a424..e1b60ab1 100644 --- a/src/drop-down-tree/template.ts +++ b/src/drop-down-tree/template.ts @@ -11,7 +11,7 @@ import * as dataSource from './dataSource.json'; headerTemplate: '#headerTemplate', itemTemplate: '#itemTemplate', footerTemplate: '#footerTemplate', - width: '350px', + width: '100%', cssClass: 'ddt-template', placeholder: 'Select an employee', popupHeight: '250px' diff --git a/src/file-manager/locale.json b/src/file-manager/locale.json index 3239f339..852ef55f 100644 --- a/src/file-manager/locale.json +++ b/src/file-manager/locale.json @@ -43,6 +43,7 @@ "Permission": "Permission", "Ascending": "Ascending", "Descending": "Descending", + "None": "None", "View-LargeIcons": "Large icons", "View-Details": "Details", "Search": "Search", @@ -60,8 +61,10 @@ "Content-Rename-Confirmation": "If you change a file name extension, the file might become unstable. Are you sure you want to change it?", "Header-Delete": "Delete File", "Content-Delete": "Are you sure you want to delete this file?", - "Header-Multiple-Delete": "Delete Multiple Files", - "Content-Multiple-Delete": "Are you sure you want to delete these {0} files?", + "Header-Folder-Delete": "Delete Folder", + "Content-Folder-Delete": "Are you sure you want to delete this folder?", + "Header-Multiple-Delete": "Delete Multiple Items", + "Content-Multiple-Delete": "Are you sure you want to delete these {0} items?", "Header-Duplicate": "File/Folder exists", "Content-Duplicate": "{0} already exists. Do you want to rename and paste?", "Header-Upload": "Upload Files", @@ -129,6 +132,7 @@ "Permission": "Genehmigung", "Ascending": "Aufsteigend", "Descending": "Absteigend", + "None": "Keiner", "View-LargeIcons": "Große Icons", "View-Details": "Einzelheiten", "Search": "Suche", @@ -146,8 +150,10 @@ "Content-Rename-Confirmation": "Wenn Sie eine Dateinamenerweiterung ändern, wird die Datei möglicherweise instabil. Möchten Sie sie wirklich ändern?", "Header-Delete": "Datei löschen", "Content-Delete": "Möchten Sie diese Datei wirklich löschen?", - "Header-Multiple-Delete": "Mehrere Dateien löschen", - "Content-Multiple-Delete": "Möchten Sie diese {0} Dateien wirklich löschen?", + "Header-Folder-Delete": "Lösche Ordner", + "Content-Folder-Delete": "Möchten Sie diesen Ordner wirklich löschen?", + "Header-Multiple-Delete": "Mehrere Elemente löschen", + "Content-Multiple-Delete": "Möchten Sie diese {0} -Elemente wirklich löschen?", "Header-Duplicate": "Datei / Ordner existiert", "Content-Duplicate": "{0} existiert bereits. Möchten Sie umbenennen und einfügen?", "Header-Upload": "Daten hochladen", @@ -215,6 +221,7 @@ "Permission": "Autorisation", "Ascending": "Ascendant", "Descending": "Descendant", + "None": "Aucun", "View-LargeIcons": "Grandes icônes", "View-Details": "Détails", "Search": "Chercher", @@ -232,8 +239,10 @@ "Content-Rename-Confirmation": "Si vous modifiez une extension de nom de fichier, le fichier peut devenir instable. Voulez-vous vraiment le changer?", "Header-Delete": "Supprimer le fichier", "Content-Delete": "Êtes-vous sûr de vouloir supprimer ce fichier?", - "Header-Multiple-Delete": "Supprimer plusieurs fichiers", - "Content-Multiple-Delete": "Êtes-vous sûr de vouloir supprimer ces {0} fichiers?", + "Header-Folder-Delete": "Supprimer le dossier", + "Content-Folder-Delete": "Voulez-vous vraiment supprimer ce dossier?", + "Header-Multiple-Delete": "Supprimer plusieurs éléments", + "Content-Multiple-Delete": "Voulez-vous vraiment supprimer ces {0} éléments?", "Header-Duplicate": "Fichier / Dossier existe", "Content-Duplicate": "{0} existe déjà. Voulez-vous renommer et coller?", "Header-Upload": "Télécharger des fichiers", @@ -301,6 +310,7 @@ "Permission": "الإذن", "Ascending": "تصاعدي", "Descending": "ترتيب تنازلي", + "None": "لا شيء", "View-LargeIcons": "الرموز الكبيرة", "View-Details": "تفاصيل", "Search": "بحث", @@ -318,8 +328,10 @@ "Content-Rename-Confirmation": "إذا قمت بتغيير ملحق اسم الملف , فقد يصبح الملف غير مستقر. هل تريد بالتأكيد تغييره؟", "Header-Delete": "حذف ملف", "Content-Delete": "هل أنت متأكد أنك تريد حذف هذا الملف؟", - "Header-Multiple-Delete": "حذف ملفات متعددة", - "Content-Multiple-Delete": "هل أنت متأكد من أنك تريد حذف هذه الملفات {0}؟", + "Header-Folder-Delete": "احذف المجلد", + "Content-Folder-Delete": "هل أنت متأكد أنك تريد حذف هذا المجلد؟", + "Header-Multiple-Delete": "حذف عناصر متعددة", + "Content-Multiple-Delete": "هل أنت متأكد أنك تريد حذف هذه العناصر {0}؟", "Header-Duplicate": "الملف / المجلد موجود", "Content-Duplicate": "{0} موجود بالفعل. هل تريد إعادة التسمية واللصق؟", "Header-Upload": "تحميل الملفات", @@ -387,6 +399,7 @@ "Permission": "允许", "Ascending": "上升", "Descending": "降序", + "None": "没有", "View-LargeIcons": "大图标", "View-Details": "细节", "Search": "搜索", @@ -404,8 +417,10 @@ "Content-Rename-Confirmation": "如果更改文件扩展名,文件可能会变得不稳定。您确定要更改它吗？", "Header-Delete": "删除文件", "Content-Delete": "你确定要删除这个文件吗？", - "Header-Multiple-Delete": "删除多个文件", - "Content-Multiple-Delete": "您确定要删除这些{0}文件吗？", + "Header-Folder-Delete": "删除资料夹", + "Content-Folder-Delete": "您确定要删除此文件夹吗？", + "Header-Multiple-Delete": "删除多个项目", + "Content-Multiple-Delete": "您确定要删除这{0}个项目吗？", "Header-Duplicate": "文件/文件夹存在", "Content-Duplicate": "{0}已经存在。您要重命名和粘贴吗？", "Header-Upload": "上传文件", diff --git a/src/gantt/resources.ts b/src/gantt/resources.ts index 6ff21df3..0f1d8d13 100644 --- a/src/gantt/resources.ts +++ b/src/gantt/resources.ts @@ -24,7 +24,8 @@ Gantt.Inject(Selection, DayMarkers, Toolbar, Edit); dependency: 'Predecessor', resourceInfo: 'resources', work: 'work', - child: 'subtasks' + child: 'subtasks', + type: 'taskType' }, editSettings: { allowAdding: true, diff --git a/src/gantt/sample.json b/src/gantt/sample.json index 3b6557e4..8aab7689 100644 --- a/src/gantt/sample.json +++ b/src/gantt/sample.json @@ -2,7 +2,6 @@ "name": "Gantt", "directory": "gantt", "category": "Calendars", - "type": "update", "ftName": "gantt", "samples": [ { @@ -119,7 +118,6 @@ "url": "resource-view", "name": "Resource View", "category": "Resources", - "type": "update", "api": { "Gantt": [ "dataSource", @@ -150,7 +148,6 @@ "url": "resource-multi-taskbar", "name": "Resource Multi Taskbar", "category": "Resources", - "type": "new", "api": { "Gantt": [ "dataSource", @@ -386,7 +383,6 @@ "url": "editing", "name": "Editing", "category": "Gantt", - "type": "update", "api": { "Gantt": [ "dataSource", @@ -435,38 +431,10 @@ }, "description": "This example demonstrates the various selection support of row and cell with different type in Syncfusion Essential JS2 Gantt" }, - { - "url": "filtering", - "name": "Filtering", - "category": "Gantt", - "api": { - "Gantt": [ - "dataSource", - "dateFormat", - "taskFields", - "columns", - "treeColumnIndex", - "height", - "timelineSettings", - "labelSettings", - "toolbar", - "allowFiltering", - "includeWeekend", - "timelineSettings", - "splitterSettings", - "durationUnit", - "dayWorkingTime", - "projectStartDate", - "projectEndDate" - ] - }, - "description": "This example demonstrates the filtering support with filter menu option for various types of columns in Gantt" - }, { "url": "contextMenu", "name": "Context Menu", "category": "Gantt", - "type": "update", "api": { "Gantt": [ "dataSource", @@ -527,6 +495,33 @@ }, "description": "This demo explains how to export Gantt content to Excel and CSV documents using the Syncfusion TypeScript Gantt control." }, + { + "url": "filtering", + "name": "Filtering", + "category": "Gantt", + "api": { + "Gantt": [ + "dataSource", + "dateFormat", + "taskFields", + "columns", + "treeColumnIndex", + "height", + "timelineSettings", + "labelSettings", + "toolbar", + "allowFiltering", + "includeWeekend", + "timelineSettings", + "splitterSettings", + "durationUnit", + "dayWorkingTime", + "projectStartDate", + "projectEndDate" + ] + }, + "description": "This example demonstrates the filtering support with filter menu option for various types of columns in Gantt" + }, { "url": "events", "name": "Events", diff --git a/src/gantt/tasklabel-template.ts b/src/gantt/tasklabel-template.ts index 8afa5ca9..5e35b1fe 100644 --- a/src/gantt/tasklabel-template.ts +++ b/src/gantt/tasklabel-template.ts @@ -14,7 +14,7 @@ Gantt.Inject(DayMarkers, Selection); span.style.marginLeft = '5px'; span.style.marginRight = '5px'; for (let index: number = 0; index < value.length; index++) { - img.src = 'src/gantt/images/' + value[index].resourceName + '.png'; + img.src = 'https://ej2.syncfusion.com/demos/src/gantt/images/' + value[index].resourceName + '.png'; span.innerHTML = value[index].resourceName; out = out + img.outerHTML + span.outerHTML; } diff --git a/src/grid/data-source.ts b/src/grid/data-source.ts index 2a0423a8..2d819ffb 100644 --- a/src/grid/data-source.ts +++ b/src/grid/data-source.ts @@ -53,6 +53,83 @@ export function getTradeData(dataCount?: number): object { } return tradeData; } +export let lazyLoadData: Object[] = []; +export function createLazyLoadData(): void { + if (lazyLoadData.length) { + return; + } + let customerid: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', + 'ERNSH', 'CENTC', 'OTTIK', 'QUEDE', 'RATTC', 'ERNSH', 'FOLKO', 'BLONP', 'WARTH', 'FRANK', 'GROSR', 'WHITC', 'WARTH', + 'SPLIR', 'RATTC', 'QUICK', 'VINET', 'MAGAA', 'TORTU', 'MORGK', 'BERGS', 'LEHMS', 'BERGS', 'ROMEY', 'ROMEY', 'LILAS', + 'LEHMS', 'QUICK', 'QUICK', 'RICAR', 'REGGC', 'BSBEV', 'COMMI', 'QUEDE', 'TRADH', 'TORTU', 'RATTC', 'VINET', 'LILAS', + 'BLONP', 'HUNGO', 'RICAR', 'MAGAA', 'WANDK', 'SUPRD', 'GODOS', 'TORTU', 'OLDWO', 'ROMEY', 'LONEP', 'ANATR', 'HUNGO', + 'THEBI', 'DUMON', 'WANDK', 'QUICK', 'RATTC', 'ISLAT', 'RATTC', 'LONEP', 'ISLAT', 'TORTU', 'WARTH', 'ISLAT', 'PERIC', + 'KOENE', 'SAVEA', 'KOENE', 'BOLID', 'FOLKO', 'FURIB', 'SPLIR', 'LILAS', 'BONAP', 'MEREP', 'WARTH', 'VICTE', + 'HUNGO', 'PRINI', 'FRANK', 'OLDWO', 'MEREP', 'BONAP', 'SIMOB', 'FRANK', 'LEHMS', 'WHITC', 'QUICK', 'RATTC', 'FAMIA']; + + let product: string[] = ['Chai', 'Chang', 'Aniseed Syrup', 'Chef Anton\'s Cajun Seasoning', 'Chef Anton\'s Gumbo Mix', + 'Grandma\'s Boysenberry Spread', 'Uncle Bob\'s Organic Dried Pears', 'Northwoods Cranberry Sauce', 'Mishi Kobe Niku', + 'Ikura', 'Queso Cabrales', 'Queso Manchego La Pastora', 'Konbu', 'Tofu', 'Genen Shouyu', 'Pavlova', 'Alice Mutton', + 'Carnarvon Tigers', 'Teatime Chocolate Biscuits', 'Sir Rodney\'s Marmalade', 'Sir Rodney\'s Scones', + 'Gustaf\'s Knäckebröd', 'Tunnbröd', 'Guaraná Fantástica', 'NuNuCa Nuß-Nougat-Creme', 'Gumbär Gummibärchen', + 'Schoggi Schokolade', 'Rössle Sauerkraut', 'Thüringer Rostbratwurst', 'Nord-Ost Matjeshering', 'Gorgonzola Telino', + 'Mascarpone Fabioli', 'Geitost', 'Sasquatch Ale', 'Steeleye Stout', 'Inlagd Sill', + 'Gravad lax', 'Côte de Blaye', 'Chartreuse verte', 'Boston Crab Meat', 'Jack\'s New England Clam Chowder', + 'Singaporean Hokkien Fried Mee', 'Ipoh Coffee', 'Gula Malacca', 'Rogede sild', 'Spegesild', 'Zaanse koeken', + 'Chocolade', 'Maxilaku', 'Valkoinen suklaa', 'Manjimup Dried Apples', 'Filo Mix', 'Perth Pasties', + 'Tourtière', 'Pâté chinois', 'Gnocchi di nonna Alice', 'Ravioli Angelo', 'Escargots de Bourgogne', + 'Raclette Courdavault', 'Camembert Pierrot', 'Sirop d\'érable', + 'Tarte au sucre', 'Vegie-spread', 'Wimmers gute Semmelknödel', 'Louisiana Fiery Hot Pepper Sauce', + 'Louisiana Hot Spiced Okra', 'Laughing Lumberjack Lager', 'Scottish Longbreads', + 'Gudbrandsdalsost', 'Outback Lager', 'Flotemysost', 'Mozzarella di Giovanni', 'Röd Kaviar', 'Longlife Tofu', + 'Rhönbräu Klosterbier', 'Lakkalikööri', 'Original Frankfurter grüne Soße']; + + let customername: string[] = ['Maria', 'Ana Trujillo', 'Antonio Moreno', 'Thomas Hardy', 'Christina Berglund', + 'Hanna Moos', 'Frédérique Citeaux', 'Martín Sommer', 'Laurence Lebihan', 'Elizabeth Lincoln', + 'Victoria Ashworth', 'Patricio Simpson', 'Francisco Chang', 'Yang Wang', 'Pedro Afonso', 'Elizabeth Brown', + 'Sven Ottlieb', 'Janine Labrune', 'Ann Devon', 'Roland Mendel', 'Aria Cruz', 'Diego Roel', + 'Martine Rancé', 'Maria Larsson', 'Peter Franken', 'Carine Schmitt', 'Paolo Accorti', 'Lino Rodriguez', + 'Eduardo Saavedra', 'José Pedro Freyre', 'André Fonseca', 'Howard Snyder', 'Manuel Pereira', + 'Mario Pontes', 'Carlos Hernández', 'Yoshi Latimer', 'Patricia McKenna', 'Helen Bennett', 'Philip Cramer', + 'Daniel Tonini', 'Annette Roulet', 'Yoshi Tannamuri', 'John Steel', 'Renate Messner', 'Jaime Yorres', + 'Carlos González', 'Felipe Izquierdo', 'Fran Wilson', 'Giovanni Rovelli', 'Catherine Dewey', 'Jean Fresnière', + 'Alexander Feuer', 'Simon Crowther', 'Yvonne Moncada', 'Rene Phillips', 'Henriette Pfalzheim', + 'Marie Bertrand', 'Guillermo Fernández', 'Georg Pipps', 'Isabel de Castro', 'Bernardo Batista', 'Lúcia Carvalho', + 'Horst Kloss', 'Sergio Gutiérrez', 'Paula Wilson', 'Maurizio Moroni', 'Janete Limeira', 'Michael Holz', + 'Alejandra Camino', 'Jonas Bergulfsen', 'Jose Pavarotti', 'Hari Kumar', 'Jytte Petersen', 'Dominique Perrier', + 'Art Braunschweiger', 'Pascale Cartrain', 'Liz Nixon', 'Liu Wong', 'Karin Josephs', 'Miguel Angel Paolino', + 'Anabela Domingues', 'Helvetius Nagy', 'Palle Ibsen', 'Mary Saveley', 'Paul Henriot', 'Rita Müller', + 'Pirkko Koskitalo', 'Paula Parente', 'Karl Jablonski', 'Matti Karttunen', 'Zbyszek Piestrzeniewicz']; + + let customeraddress: string[] = ['507 - 20th Ave. E.\r\nApt. 2A', '908 W. Capital Way', '722 Moss Bay Blvd.', + '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', 'Edgeham Hollow\r\nWinchester Way', + '4726 - 11th Ave. N.E.', '7 Houndstooth Rd.', '59 rue de l\'Abbaye', 'Luisenstr. 48', '908 W. Capital Way', + '722 Moss Bay Blvd.', '4110 Old Redmond Rd.', '14 Garrett Hill', 'Coventry House\r\nMiner Rd.', + 'Edgeham Hollow\r\nWinchester Way', + '7 Houndstooth Rd.', '2817 Milton Dr.', 'Kirchgasse 6', 'Sierras de Granada 9993', 'Mehrheimerstr. 369', + 'Rua da Panificadora, 12', '2817 Milton Dr.', 'Mehrheimerstr. 369']; + + let quantityperunit: string[] = ['10 boxes x 20 bags', '24 - 12 oz bottles', '12 - 550 ml bottles', + '48 - 6 oz jars', '36 boxes', '12 - 8 oz jars', '12 - 1 lb pkgs.', '12 - 12 oz jars', + '18 - 500 g pkgs.', '12 - 200 ml jars', + '1 kg pkg.', '10 - 500 g pkgs.', '2 kg box', '40 - 100 g pkgs.', '24 - 250 ml bottles', '32 - 500 g boxes', + '20 - 1 kg tins', '16 kg pkg.', '10 boxes x 12 pieces', '30 gift boxes', '24 pkgs. x 4 pieces', '24 - 500 g pkgs.', + '12 - 250 g pkgs.', + '12 - 355 ml cans', '20 - 450 g glasses', '100 - 250 g bags']; + + let orderID: number = 10248; + for (let i: number = 0; i < 20000; i++) { + lazyLoadData.push({ + 'OrderID': orderID + i, + 'CustomerID': customerid[Math.floor(Math.random() * customerid.length)], + 'CustomerName': customername[Math.floor(Math.random() * customername.length)], + 'CustomerAddress': customeraddress[Math.floor(Math.random() * customeraddress.length)], + 'ProductName': product[Math.floor(Math.random() * product.length)], + 'ProductID': i, + 'Quantity': quantityperunit[Math.floor(Math.random() * quantityperunit.length)] + }); + } +} export let virtualData: Object[] = []; export function dataSource(): void { let names: string[] = ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU', 'WELLI', 'HILAA', 'ERNSH', 'CENTC', diff --git a/src/grid/lazy-load-grouping.html b/src/grid/lazy-load-grouping.html new file mode 100644 index 00000000..077c8bb6 --- /dev/null +++ b/src/grid/lazy-load-grouping.html @@ -0,0 +1,25 @@ +
+
+
+
+
+ +
+

This sample demonstrates the lazy load grouping feature of the Grid component.

+
+ +
+

+ The Lazy load grouping, allows the Grid to render only the initial level caption rows in collapsed state while grouping. + The child rows of each caption will render only when we expand the captions. + To enable lazy load grouping, set + groupSettings->enableLazyLoading property as true. +

+

Injecting Module:

+

+ Grid features are segregated into individual feature-wise modules. + To use lazy load grouping feature, we need to inject + LazyLoadGroup using the Grid.Inject(LazyLoadGroup) section. +

+
\ No newline at end of file diff --git a/src/grid/lazy-load-grouping.ts b/src/grid/lazy-load-grouping.ts new file mode 100644 index 00000000..bd276bda --- /dev/null +++ b/src/grid/lazy-load-grouping.ts @@ -0,0 +1,28 @@ +import { loadCultureFiles } from '../common/culture-loader'; +import { Grid, Page, Group, LazyLoadGroup } from '@syncfusion/ej2-grids'; +import { lazyLoadData, createLazyLoadData } from './data-source'; +/** + * lazy load grouping sample + */ +Grid.Inject(Page, Group, LazyLoadGroup); + +(window as any).default = (): void => { + loadCultureFiles(); + /* create lazyLoadData */ + createLazyLoadData(); + let grid: Grid = new Grid( + { + dataSource: lazyLoadData, + allowPaging: true, + allowGrouping: true, + groupSettings: { enableLazyLoading: true, columns: ['ProductName', 'CustomerName'] }, + columns: [ + { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, + { field: 'ProductName', headerText: 'Product Name', width: 160 }, + { field: 'ProductID', headerText: 'Product ID', textAlign: 'Right', width: 120 }, + { field: 'CustomerID', headerText: 'Customer ID', width: 120 }, + { field: 'CustomerName', headerText: 'Customer Name', width: 160 } + ] + }); + grid.appendTo('#Grid'); +}; diff --git a/src/grid/local-data.ts b/src/grid/local-data.ts index 15ad417c..f7ab06b4 100644 --- a/src/grid/local-data.ts +++ b/src/grid/local-data.ts @@ -1,3 +1,4 @@ +import { loadCultureFiles } from '../common/culture-loader'; import { Grid, Page, Selection } from '@syncfusion/ej2-grids'; import { orderData } from './data-source'; @@ -7,6 +8,7 @@ Grid.Inject(Page, Selection); * Local Data sample */ (window as any).default = (): void => { + loadCultureFiles(); let grid: Grid = new Grid( { dataSource: orderData, diff --git a/src/grid/sample.json b/src/grid/sample.json index 72084ec5..04f40a23 100644 --- a/src/grid/sample.json +++ b/src/grid/sample.json @@ -7,7 +7,8 @@ "samples" : [ {"url":"grid-overview", "name": "Overview", "description":"This demo for Essential JS 2 grid control is an overview of how to display and manipulate large data with configuration options.", "category":"Data Grid","api":{"Grid":["dataSource","enableVirtualization","allowFiltering","allowSorting","allowSelection","selectionSettings","height","columns","dataBound","actionComplete","load"] }}, {"url":"default", "name": "Default Functionalities", "description":"This demo for Essential JS 2 grid control shows the default rendering of the grid control with minimum configuration.", "category":"Data Grid","api":{"Grid":["columns","dataSource"] }}, - {"url":"grouping", "name": "Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "category":"Data Grid","api":{"Grid":["dataSource","allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping","height","columns"] }}, + {"url":"grouping", "name": "Default Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the grouping feature of the grid control. The grid control has options to group records based on columns.", "category":"Grouping","api":{"Grid":["dataSource","allowPaging","allowSorting","groupSettings","pageSettings","allowGrouping","height","columns"] }}, + {"url":"lazy-load-grouping", "name": "Lazy Load Grouping", "description":"This demo for Essential JS 2 grid control demonstrates the usage of the lazy load grouping feature.", "type": "new", "category":"Grouping","api":{"Grid":["dataSource","allowPaging","allowGrouping","groupSettings","height","columns"] }}, {"url":"grid-lines", "name": "GridLines" , "description":"This demo for Essential JS 2 grid control demonstrates the visibility of the grid lines that separate the rows and columns.", "category":"Data Grid","api":{"Grid":["dataSource","gridLines","columns"] }}, {"url":"scrolling", "name": "Default Scrolling", "description":"This demo for Essential JS 2 grid control shows the usage of the horizontal and vertical scrollbars to view grid content that exceeds the grid area.", "category":"Scrolling","api":{"Grid":["dataSource","height","width","columns"] }}, {"url":"virtual-scrolling", "name": "Virtual Scrolling", "description":"This demo demonstrates how to use Essential JS 2 grid to show a large data view without performance degradation by rendering only the required rows and columns.", "category":"Scrolling","api":{"Grid":["dataSource","enableVirtualization","enableColumnVirtualization","dataBound","height","columns"] }}, @@ -30,7 +31,7 @@ {"url":"drag-drop-within-grid", "name": "Row Drag And Drop Within Grid", "category":"Rows", "description":"This demo for Essential JS 2 grid control demonstrates how the rows can be dragged within the grids using the row drag-and-drop feature.", "hideOnDevice":true,"api":{"Grid":["dataSource","allowPaging","pageSettings","columns","allowRowDragAndDrop","selectionSettings","rowDropSettings","width","persistSelection"] }}, {"url":"sorting", "name": "Multi Sorting", "description":"This demo for Essential JS 2 grid control shows the grid multisorting feature. Using this feature, grid rows can be sorted by two or more columns.", "category":"Sorting","api":{"Grid":["dataSource","allowSelection","selectionSettings","columns","enableHover"] }}, {"url":"sorting-api", "name": "Sorting API", "description":"This demo for Essential JS 2 grid control shows the usage of the sorting API in grid. Use the properties panel to sort/unsort columns using API.", "category":"Sorting","api":{"Grid":["dataSource","allowPaging","allowSelection","selectionSettings","enableHover","columns","pageSettings"] }}, - {"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "type": "update", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, + {"url":"filter", "name": "Default Filtering", "description":"This demo for Essential JS 2 grid control shows how to place a filter bar row in the header to filter grid rows.", "category":"Filtering","api":{"Grid":["allowFiltering","dataSource","allowPaging","pageSettings","columns"] }}, {"url":"filter-menu", "name": "Filter Menu", "description":"This demo for Essential JS 2 grid control demonstrates a way of filtering rows using a menu, check box, and Excel filter UI.", "category":"Filtering", "api":{"Grid":["allowFiltering","filterSettings","dataSource","allowPaging","pageSettings","columns"] }}, {"url":"search", "name": "Search", "description":"This demo for Essential JS 2 grid control shows the content searching feature. Use the search box from toolbar to search for records in grid.", "category":"Filtering","api":{"Grid":["dataSource","allowPaging","pageSettings","columns","toolbar"] }}, {"url":"default-paging", "name": "Default Paging", "description":"This demo for Essential JS 2 grid control shows how you can display the contents of the grid in page segments using the paging feature.", "category": "Paging","api":{"Grid":["dataSource","allowPaging","pageSettings","columns"] }}, diff --git a/src/heatmap-chart/sample.json b/src/heatmap-chart/sample.json index d8b07aea..fc2ea29e 100644 --- a/src/heatmap-chart/sample.json +++ b/src/heatmap-chart/sample.json @@ -1,7 +1,6 @@ { "name": "HeatMap Chart", "directory": "heatmap-chart", - "type":"update", "ftName": "heatmap-chart", "category": "Data Visualization", "samples": [ @@ -306,7 +305,6 @@ "url": "color-range", "name": "Color Range", "category": "Features", - "type":"new", "description": "This demo for Essential JS2 Heatmap control demonstrates applying color gradient mode for the heatmap cells.", "sourceFiles": [{"displayName": "color-range.ts", "path": "./src/heatmap-chart/color-range.ts"}, {"displayName": "color-range.html", "path": "./src/heatmap-chart/color-range.html"}, diff --git a/src/kanban/dialog-editing.ts b/src/kanban/dialog-editing.ts index f3dc3922..64b6e94f 100644 --- a/src/kanban/dialog-editing.ts +++ b/src/kanban/dialog-editing.ts @@ -37,7 +37,7 @@ import * as dataSource from './datasource.json'; let priorityData: string[] = ['Low', 'Normal', 'Critical', 'Release Breaker', 'High']; function onDialogOpen(args: DialogEventArgs): void { if (args.requestType !== 'Delete') { - let curData: { [key: string]: Object } = args.data; + let curData: { [key: string]: Object } = args.data as { [key: string]: Object }; let filledTextBox: TextBox = new TextBox({}); filledTextBox.appendTo(args.element.querySelector('#Id') as HTMLInputElement); let numericObj: NumericTextBox = new NumericTextBox({ @@ -68,7 +68,7 @@ import * as dataSource from './datasource.json'; } let count: number = 31; document.getElementById('addNew').onclick = (e: Event): void => { - let curData: object = { + let curData: Object = { Id: 'Task ' + count, Status: 'Open', Priority: 'Normal', Assignee: 'Andrew Fuller', Estimate: 0, Tags: '', Summary: '' }; kanbanObj.openDialog('Add', curData); diff --git a/src/kanban/events.ts b/src/kanban/events.ts index c60f3069..b141ed62 100644 --- a/src/kanban/events.ts +++ b/src/kanban/events.ts @@ -62,16 +62,16 @@ import * as dataSource from './datasource.json'; appendElement('Kanban Data Bound event called
'); } function OnCardRendered(args: CardRenderedEventArgs): void { - appendElement('Kanban - ' + args.data.Id + ' - Card Rendered event called
'); + appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - Card Rendered event called
'); } function OnQueryCellInfo(): void { appendElement('Kanban Query Cell Info event called
'); } function OnCardClick(args: CardClickEventArgs): void { - appendElement('Kanban - ' + args.data.Id + ' - Card Click event called
'); + appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - Card Click event called
'); } function OnCardDoubleClick(args: CardClickEventArgs): void { - appendElement('Kanban - ' + args.data.Id + ' - Card Double Click event called
'); + appendElement('Kanban - ' + (args.data as { [key: string]: Object }).Id + ' - Card Double Click event called
'); } function OnDragStart(): void { appendElement('Kanban Drag Start event called
'); diff --git a/src/kanban/sample.json b/src/kanban/sample.json index ccebbf2a..058c5c8c 100644 --- a/src/kanban/sample.json +++ b/src/kanban/sample.json @@ -3,7 +3,6 @@ "directory": "kanban", "category": "Data Visualization", "ftName": "kanban", - "type": "preview", "samples": [ { "url": "overview", @@ -16,7 +15,6 @@ "url": "default", "name": "Default Functionalities", "category": "Kanban", - "type": "update", "description": "The example demonstrates the default functionalities of JS Kanban with very minimal essential settings such as data source, columns, and card details.", "api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings"] } }, @@ -45,7 +43,6 @@ "url": "search-filter", "name": "Search and Filter Cards", "category": "Kanban", - "type": "new", "description": "The example demo shows how to filter the cards and make searching when more number of cards on a JavaScript Kanban board that helps you to focus.", "api": { "Kanban": [ "dataSource", "keyField", "columns", "cardSettings", "swimlaneSettings", "query"] } }, @@ -53,7 +50,6 @@ "url": "sorting", "name": "Sorting Cards", "category": "Kanban", - "type": "new", "description": "The example demonstrates how to sort the cards in the ascending or descending based on the data source order or indexing or custom field on the Kanban board.", "api": { "Kanban": ["dataSource", "keyField", "columns", "cardSettings", "sortSettings"] } }, diff --git a/src/linear-gauge/sample.json b/src/linear-gauge/sample.json index 1d52b98e..ba91106a 100644 --- a/src/linear-gauge/sample.json +++ b/src/linear-gauge/sample.json @@ -2,7 +2,6 @@ "name": "Linear Gauge", "directory": "linear-gauge", "category": "Data Visualization", - "type": "update", "ftName": "lineargauge", "samples": [ { @@ -50,7 +49,6 @@ { "url": "gradient-color", "name": "Gradient Color", - "type": "new", "description": "This demo for Essential JS2 Linear Gauge control visualizes the gradient support for pointers and ranges.", "category": "Linear Gauge" }, @@ -71,7 +69,6 @@ { "url": "export", "name": "Print & Export", - "type": "update", "description": "This demo for Essential JS2 Linear Gauge control will print and export linear gauge into different format.", "category": "Linear Gauge", "api":{"LinearGauge": ["axes"]} diff --git a/src/maps/annotation-stack.json b/src/maps/annotation-stack.json index 0c59520a..99cf0de0 100644 --- a/src/maps/annotation-stack.json +++ b/src/maps/annotation-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n\n
\n
\n
Source:\n en.wikipedia.org\n
\n
\n\n\n \n \n \n \n \n \n\n\n
\n
\n
\n

Facts about Africa

\n
\n
\n
\n
    \n
  • Africa is the second largest and second most populated continent in the world.
    • \n
  • Africa has 54 sovereign states and 10 non-sovereign territories.
    • \n
  • Algeria is the largest country in Africa, where as Mayotte is the smallest.
    • \n
\n
\n
\n
\n\n
\n \n
\n\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps Annotation\n */\nimport { Maps, Annotations, Marker, MapsTheme, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Annotations, Marker);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '80%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '

{{:name}}

',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n\n
\n
\n
Source:\n en.wikipedia.org\n
\n
\n\n\n \n \n \n \n \n \n\n\n
\n
\n
\n

Facts about Africa

\n
\n
\n
\n
    \n
  • Africa is the second largest and second most populated continent in the world.
    • \n
  • Africa has 54 sovereign states and 10 non-sovereign territories.
    • \n
  • Algeria is the largest country in Africa, where as Mayotte is the smallest.
    • \n
\n
\n
\n
\n\n
\n \n
\n\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps Annotation\n */\nimport { Maps, Annotations, Marker, MapsTheme, ILoadEventArgs, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Annotations, Marker);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n annotations: [\n {\n content: '#maps-annotation',\n x: '0%', y: '70%'\n }, {\n content: '#compass-maps',\n x: '80%', y: '5%'\n }\n ],\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/africa-continent.json'),\n shapeSettings: {\n fill: 'url(#grad1)'\n },\n markerSettings: [\n {\n visible: true,\n template: '

{{:name}}

',\n animationDuration: 1,\n dataSource: [{\n name: 'Africa', latitude: 13.97274101999902, longitude: 20.390625\n }]\n }\n ]\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file diff --git a/src/maps/bubble-stack.json b/src/maps/bubble-stack.json index 2d4993ef..19ee836f 100644 --- a/src/maps/bubble-stack.json +++ b/src/maps/bubble-stack.json @@ -1 +1 @@ -{"map-data/population-data.ts":"/**\n * Countries population\n */\n//tslint:disable\nexport let internetUsers: any = [\n { 'rank': 1, 'name': 'China', 'value': bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194},\n { 'rank': 2, 'name': 'India', 'value': bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },\n { 'rank': 3, 'name': 'United States', 'value': bubblesize(245436423), 'color': '#99295D ','population': 245436423 },\n { 'rank': 4, 'name': 'Brazil', 'value': bubblesize(123927230), 'color': '#364A98','population': 123927230 },\n { 'rank': 5, 'name': 'Japan', 'value': bubblesize(117528631), 'color': '#7F38A0 ','population': 117528631 },\n { 'rank': 6, 'name': 'Russia', 'value': bubblesize(110003284), 'color': '#2E769F','population': 110003284 },\n { 'rank': 7, 'name': 'Mexico', 'value': bubblesize(75937568), 'color': '#99295D ','population': 75937568 },\n { 'rank': 8, 'name': 'Germany', 'value': bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },\n { 'rank': 9, 'name': 'Indonesia', 'value': bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },\n { 'rank': 10, 'name': 'United Kingdom', 'value': bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },\n { 'rank': 11, 'name': 'Philippines', 'value': bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },\n { 'rank': 12, 'name': 'France', 'value': bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },\n { 'rank': 13, 'name': 'Nigeria', 'value': bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },\n { 'rank': 14, 'name': 'South Africa', 'value': bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },\n { 'rank': 15, 'name': 'Turkey', 'value': bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },\n { 'rank': 16, 'name': 'Vietnam', 'value': bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },\n { 'rank': 17, 'name': 'Iran', 'value': bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },\n { 'rank': 18, 'name': 'Egypt', 'value': bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },\n { 'rank': 19, 'name': 'Spain', 'value': bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },\n { 'rank': 20, 'name': 'Italy', 'value': bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },\n { 'rank': 21, 'name': 'Thailand', 'value': bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },\n { 'rank': 22, 'name': 'Canada', 'value': bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },\n { 'rank': 23, 'name': 'Argentina', 'value': bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },\n { 'rank': 24, 'name': 'South Africa', 'value': bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },\n { 'rank': 25, 'name': 'Pakistan', 'value': bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },\n { 'rank': 26, 'name': 'Bangladesh', 'value': bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },\n { 'rank': 27, 'name': 'Colombia', 'value': bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },\n { 'rank': 28, 'name': 'Poland', 'value': bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },\n { 'rank': 29, 'name': 'Malaysia', 'value': bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },\n { 'rank': 30, 'name': 'Saudi Arabia', 'value': bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },\n\n];\nfunction bubblesize(value: number): number {\n let max: number = 1347565324;\n let min: number = 324366;\n let maxBox: number = 70 * 70 * 2 * Math.PI;\n let minBox: number = 3 * 3 * 2 * Math.PI;\n let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;\n if (box < minBox) {\n box = minBox;\n }\n return Math.sqrt(box / (Math.PI * 2)) / 2;\n}\n ","index.html":"\n\n \n\n
\n\n
\n
\n
\n
\n ${name} \n
\n
\n
\n
\n Rank : ${rank}\n
\n
\n Population : ${population}\n
\n
\n \n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n \n \n
","index.ts":"{{ripple}}\n let maps: Maps = new Maps({\n\n bubbleRendering: (args: IBubbleRenderingEventArgs) => {\n args.radius = (args.data as Data).value;\n },\n format: 'n',\n useGroupingSeparator: true,\n zoomSettings: {\n enable: true,\n horizontalAlignment: 'Near',\n toolBarOrientation: 'Vertical',\n pinchZooming: true\n },\n titleSettings: {\n text: 'Top 30 countries with highest Internet users',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5'\n },\n bubbleSettings: [\n {\n visible: true,\n valuePath: 'value',\n colorValuePath: 'color',\n minRadius: 3,\n maxRadius: 70,\n opacity: 0.8,\n dataSource: internetUsers,\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n template: '#template'\n },\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"map-data/population-data.ts":"/**\n * Countries population\n */\n//tslint:disable\nexport let internetUsers: any = [\n { 'rank': 1, 'name': 'China', 'value': bubblesize(746662194), 'color': '#7F38A0', 'population': 746662194},\n { 'rank': 2, 'name': 'India', 'value': bubblesize(391292635), 'color': '#7F38A0 ', 'population': 391292635 },\n { 'rank': 3, 'name': 'United States', 'value': bubblesize(245436423), 'color': '#99295D ','population': 245436423 },\n { 'rank': 4, 'name': 'Brazil', 'value': bubblesize(123927230), 'color': '#364A98','population': 123927230 },\n { 'rank': 5, 'name': 'Japan', 'value': bubblesize(117528631), 'color': '#7F38A0 ','population': 117528631 },\n { 'rank': 6, 'name': 'Russia', 'value': bubblesize(110003284), 'color': '#2E769F','population': 110003284 },\n { 'rank': 7, 'name': 'Mexico', 'value': bubblesize(75937568), 'color': '#99295D ','population': 75937568 },\n { 'rank': 8, 'name': 'Germany', 'value': bubblesize(73436503), 'color': '#2E769F', 'population': 73436503 },\n { 'rank': 9, 'name': 'Indonesia', 'value': bubblesize(66244991), 'color': '#7F38A0 ', 'population': 66244991 },\n { 'rank': 10, 'name': 'United Kingdom', 'value': bubblesize(62354410), 'color': '#2E769F', 'population': 62354410 },\n { 'rank': 11, 'name': 'Philippines', 'value': bubblesize(57342723), 'color': '#7F38A0 ', 'population': 57342723 },\n { 'rank': 12, 'name': 'France', 'value': bubblesize(55413854), 'color': '#2E769F', 'population': 55413854 },\n { 'rank': 13, 'name': 'Nigeria', 'value': bubblesize(47743541), 'color': '#816F28', 'population': 47743541 },\n { 'rank': 14, 'name': 'South Africa', 'value': bubblesize(47094267), 'color': '#816F28', 'population': 47094267 },\n { 'rank': 15, 'name': 'Turkey', 'value': bubblesize(46395500), 'color': '#2E769F', 'population': 46395500 },\n { 'rank': 16, 'name': 'Vietnam', 'value': bubblesize(43974618), 'color': '#7F38A0 ', 'population': 43974618 },\n { 'rank': 17, 'name': 'Iran', 'value': bubblesize(42731675), 'color': '#7F38A0 ', 'population': 42731675 },\n { 'rank': 18, 'name': 'Egypt', 'value': bubblesize(37519531), 'color': '#816F28', 'population': 37519531 },\n { 'rank': 19, 'name': 'Spain', 'value': bubblesize(37337607), 'color': '#2E769F', 'population': 37337607 },\n { 'rank': 20, 'name': 'Italy', 'value': bubblesize(36442438), 'color': '#2E769F', 'population': 36442438 },\n { 'rank': 21, 'name': 'Thailand', 'value': bubblesize(32710169), 'color': '#7F38A0 ', 'population': 32710169 },\n { 'rank': 22, 'name': 'Canada', 'value': bubblesize(32602776), 'color': '#99295D ', 'population': 32602776 },\n { 'rank': 23, 'name': 'Argentina', 'value': bubblesize(30758972), 'color': '#364A98', 'population': 30758972 },\n { 'rank': 24, 'name': 'South Africa', 'value': bubblesize(30248355), 'color': '#816F28', 'population': 30248355 },\n { 'rank': 25, 'name': 'Pakistan', 'value': bubblesize(29965859), 'color': '#7F38A0 ', 'population': 29965859 },\n { 'rank': 26, 'name': 'Bangladesh', 'value': bubblesize(29738660), 'color': '#7F38A0 ', 'population': 29738660 },\n { 'rank': 27, 'name': 'Colombia', 'value': bubblesize(28287098), 'color': '#364A98', 'population': 28287098 },\n { 'rank': 28, 'name': 'Poland', 'value': bubblesize(28018492), 'color': '#2E769F', 'population': 28018492 },\n { 'rank': 29, 'name': 'Malaysia', 'value': bubblesize(24572446), 'color': '#7F38A0 ', 'population': 24572446 },\n { 'rank': 30, 'name': 'Saudi Arabia', 'value': bubblesize(23803319), 'color': '#7F38A0 ', 'population': 23803319 },\n\n];\nfunction bubblesize(value: number): number {\n let max: number = 1347565324;\n let min: number = 324366;\n let maxBox: number = 70 * 70 * 2 * Math.PI;\n let minBox: number = 3 * 3 * 2 * Math.PI;\n let box: number = (value - min) / (max - min) * (maxBox - minBox) + minBox;\n if (box < minBox) {\n box = minBox;\n }\n return Math.sqrt(box / (Math.PI * 2)) / 2;\n}\n ","index.html":"\n\n \n\n
\n\n
\n
\n
\n
\n ${name} \n
\n
\n
\n
\n Rank : ${rank}\n
\n
\n Population : ${population}\n
\n
\n \n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n \n \n
","index.ts":"{{ripple}}\n let maps: Maps = new Maps({\n\n bubbleRendering: (args: IBubbleRenderingEventArgs) => {\n args.radius = (args.data as Data).value;\n },\n format: 'n',\n useGroupingSeparator: true,\n zoomSettings: {\n enable: true,\n horizontalAlignment: 'Near',\n toolBarOrientation: 'Vertical',\n pinchZooming: true\n },\n titleSettings: {\n text: 'Top 30 countries with highest Internet users',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5'\n },\n bubbleSettings: [\n {\n visible: true,\n valuePath: 'value',\n colorValuePath: 'color',\n minRadius: 3,\n maxRadius: 70,\n opacity: 0.8,\n dataSource: internetUsers,\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n template: '#template'\n },\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/curved-lines-stack.json b/src/maps/curved-lines-stack.json index 6dd2c490..a1e7dc7a 100644 --- a/src/maps/curved-lines-stack.json +++ b/src/maps/curved-lines-stack.json @@ -1 +1 @@ -{"map-data/marker-location.json":"{\n \"markerLocation\": [ \n { \"name\" : \"New Delhi\",\n \"latitude\": 28.6139391,\n \"longitude\": 77.2090212\n }, {\n \"name\" : \"Mumbai\",\n \"latitude\": 19.0759837,\n \"longitude\": 72.8776559\n }, {\n \"name\" : \"Chennai\",\n \"latitude\": 13.0826802,\n \"longitude\": 80.2707184\n }, {\n \"name\" : \"Kolkata\",\n \"latitude\": 22.572646,\n \"longitude\": 88.363895\n }, {\n \"name\" : \"Kunming\",\n \"latitude\": 24.880095,\n \"longitude\": 102.832891\n }, {\n \"name\" : \"Beijing\",\n \"latitude\": 39.9041999,\n \"longitude\": 116.4073963\n }, {\n \"name\" : \"Shanghai\",\n \"latitude\": 31.2303904,\n \"longitude\": 121.4737021\n }, {\n \"name\" : \"Hong Kong\",\n \"latitude\": 22.396428,\n \"longitude\": 114.109497\n }, {\n \"name\" : \"Guangzhou\",\n \"latitude\": 23.12911,\n \"longitude\": 113.264385\n }\n ],\n \"data\": [\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 39.9041999],\n \"longitude\": [77.2090212, 116.4073963]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 31.2303904],\n \"longitude\": [77.2090212, 121.4737021]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 23.12911],\n \"longitude\": [77.2090212, 113.264385]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.4,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 22.396428],\n \"longitude\": [77.2090212, 114.109497]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [19.0759837, 23.12911],\n \"longitude\": [72.8776559, 113.264385]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [13.0826802, 22.396428],\n \"longitude\": [80.2707184, 114.109497]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [22.572646, 24.880095],\n \"longitude\": [88.363895, 102.832891] \n }\n ]\n}","index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.tibettravel.org\n
\n
\n\n \n
","index.ts":"{{ripple}}/**\n * Maps Curved line\n */\nimport { Maps, Marker, MapsTooltip, NavigationLine, ILoadEventArgs, Zoom, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport * as marker_location from './map-data/marker-location.json';\nMaps.Inject(Marker, MapsTooltip, NavigationLine, Zoom);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 30.41078179084589,\n longitude: 90.52734374999999\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 3.5,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: 'Flights from India to China',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: [\n {\n name: 'India'\n },\n {\n name: 'China'\n }\n ],\n shapeSettings: {\n colorValuePath: 'name',\n fill: '#fcfbf9',\n border: {\n width: 0.1,\n color: 'black'\n },\n colorMapping: [\n {\n value: 'China',\n color: '#f7d083'\n },\n {\n value: 'India',\n color: '#FFFE99'\n }\n ]\n },\n navigationLineSettings: (marker_location as any).data,\n markerSettings: [\n {\n dataSource: (marker_location as any).markerLocation,\n visible: true,\n shape: 'Circle',\n fill: 'white',\n border: { width: 1, color: 'black' },\n width: 4,\n animationDuration: 0,\n tooltipSettings: {\n visible: true,\n valuePath: 'title'\n }\n },\n {\n dataSource: [\n {\n 'name': 'New Delhi',\n 'latitude': 28.6139391,\n 'longitude': 77.2090212\n }\n ],\n visible: true,\n template: '
New Delhi' +\n '
',\n animationDuration: 0,\n offset: {\n x: -50,\n y: 10\n }\n },\n {\n dataSource: [\n {\n 'name': 'Mumbai',\n 'latitude': 19.0759837,\n 'longitude': 72.8776559\n }\n ],\n visible: true,\n template: '
Mumbai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Chennai',\n 'latitude': 13.0826802,\n 'longitude': 80.2707184\n }\n ],\n visible: true,\n template: '
Chennai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kolkata',\n 'latitude': 22.572646,\n 'longitude': 88.363895\n }\n ],\n visible: true,\n template: '
Kolkata' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kunming',\n 'latitude': 24.880095,\n 'longitude': 102.832891\n }\n ],\n visible: true,\n template: '
Kunming' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Beijing',\n 'latitude': 39.9041999,\n 'longitude': 116.4073963\n }\n ],\n visible: true,\n template: '
Beijing' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Shanghai',\n 'latitude': 31.2303904,\n 'longitude': 121.4737021\n }\n ],\n visible: true,\n template: '
Shanghai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Hong Kong',\n 'latitude': 22.396428,\n 'longitude': 114.109497\n }\n ],\n visible: true,\n template: '
Hong Kong' +\n '
',\n animationDuration: 0,\n offset: {\n x: 20,\n y: 20\n }\n },\n {\n dataSource: [\n {\n 'name': 'Guangzhou',\n 'latitude': 23.12911,\n 'longitude': 113.264385\n }\n ],\n visible: true,\n template: '
Guangzhou' +\n '
',\n animationDuration: 0,\n offset: {\n x: 35,\n y: -10\n }\n }\n ],\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json')\n }\n ],\n });\n maps.appendTo('#container');\n\n\n"} \ No newline at end of file +{"map-data/marker-location.json":"{\n \"markerLocation\": [ \n { \"name\" : \"New Delhi\",\n \"latitude\": 28.6139391,\n \"longitude\": 77.2090212\n }, {\n \"name\" : \"Mumbai\",\n \"latitude\": 19.0759837,\n \"longitude\": 72.8776559\n }, {\n \"name\" : \"Chennai\",\n \"latitude\": 13.0826802,\n \"longitude\": 80.2707184\n }, {\n \"name\" : \"Kolkata\",\n \"latitude\": 22.572646,\n \"longitude\": 88.363895\n }, {\n \"name\" : \"Kunming\",\n \"latitude\": 24.880095,\n \"longitude\": 102.832891\n }, {\n \"name\" : \"Beijing\",\n \"latitude\": 39.9041999,\n \"longitude\": 116.4073963\n }, {\n \"name\" : \"Shanghai\",\n \"latitude\": 31.2303904,\n \"longitude\": 121.4737021\n }, {\n \"name\" : \"Hong Kong\",\n \"latitude\": 22.396428,\n \"longitude\": 114.109497\n }, {\n \"name\" : \"Guangzhou\",\n \"latitude\": 23.12911,\n \"longitude\": 113.264385\n }\n ],\n \"data\": [\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 39.9041999],\n \"longitude\": [77.2090212, 116.4073963]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 31.2303904],\n \"longitude\": [77.2090212, 121.4737021]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 23.12911],\n \"longitude\": [77.2090212, 113.264385]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.4,\n \"color\": \"black\",\n \"latitude\": [28.6139391, 22.396428],\n \"longitude\": [77.2090212, 114.109497]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [19.0759837, 23.12911],\n \"longitude\": [72.8776559, 113.264385]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [13.0826802, 22.396428],\n \"longitude\": [80.2707184, 114.109497]\n \n },\n {\n \"dashArray\": \"5,1\",\n \"visible\": true, \n \"angle\": -0.2,\n \"color\": \"black\",\n \"latitude\": [22.572646, 24.880095],\n \"longitude\": [88.363895, 102.832891] \n }\n ]\n}","index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.tibettravel.org\n
\n
\n\n \n
","index.ts":"{{ripple}}/**\n * Maps Curved line\n */\nimport { Maps, Marker, MapsTooltip, NavigationLine, ILoadEventArgs, Zoom, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport * as marker_location from './map-data/marker-location.json';\nMaps.Inject(Marker, MapsTooltip, NavigationLine, Zoom);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 30.41078179084589,\n longitude: 90.52734374999999\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 3.5,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: 'Flights from India to China',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: [\n {\n name: 'India'\n },\n {\n name: 'China'\n }\n ],\n shapeSettings: {\n colorValuePath: 'name',\n fill: '#fcfbf9',\n border: {\n width: 0.1,\n color: 'black'\n },\n colorMapping: [\n {\n value: 'China',\n color: '#f7d083'\n },\n {\n value: 'India',\n color: '#FFFE99'\n }\n ]\n },\n navigationLineSettings: (marker_location as any).data,\n markerSettings: [\n {\n dataSource: (marker_location as any).markerLocation,\n visible: true,\n shape: 'Circle',\n fill: 'white',\n border: { width: 1, color: 'black' },\n width: 4,\n animationDuration: 0,\n tooltipSettings: {\n visible: true,\n valuePath: 'title'\n }\n },\n {\n dataSource: [\n {\n 'name': 'New Delhi',\n 'latitude': 28.6139391,\n 'longitude': 77.2090212\n }\n ],\n visible: true,\n template: '
New Delhi' +\n '
',\n animationDuration: 0,\n offset: {\n x: -50,\n y: 10\n }\n },\n {\n dataSource: [\n {\n 'name': 'Mumbai',\n 'latitude': 19.0759837,\n 'longitude': 72.8776559\n }\n ],\n visible: true,\n template: '
Mumbai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Chennai',\n 'latitude': 13.0826802,\n 'longitude': 80.2707184\n }\n ],\n visible: true,\n template: '
Chennai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kolkata',\n 'latitude': 22.572646,\n 'longitude': 88.363895\n }\n ],\n visible: true,\n template: '
Kolkata' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Kunming',\n 'latitude': 24.880095,\n 'longitude': 102.832891\n }\n ],\n visible: true,\n template: '
Kunming' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Beijing',\n 'latitude': 39.9041999,\n 'longitude': 116.4073963\n }\n ],\n visible: true,\n template: '
Beijing' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Shanghai',\n 'latitude': 31.2303904,\n 'longitude': 121.4737021\n }\n ],\n visible: true,\n template: '
Shanghai' +\n '
',\n animationDuration: 0,\n offset: {\n x: 0,\n y: 12\n }\n },\n {\n dataSource: [\n {\n 'name': 'Hong Kong',\n 'latitude': 22.396428,\n 'longitude': 114.109497\n }\n ],\n visible: true,\n template: '
Hong Kong' +\n '
',\n animationDuration: 0,\n offset: {\n x: 20,\n y: 20\n }\n },\n {\n dataSource: [\n {\n 'name': 'Guangzhou',\n 'latitude': 23.12911,\n 'longitude': 113.264385\n }\n ],\n visible: true,\n template: '
Guangzhou' +\n '
',\n animationDuration: 0,\n offset: {\n x: 35,\n y: -10\n }\n }\n ],\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json')\n }\n ],\n });\n maps.appendTo('#container');\n\n\n"} \ No newline at end of file diff --git a/src/maps/data-label-stack.json b/src/maps/data-label-stack.json index ffa6abf3..3dd4cf1a 100644 --- a/src/maps/data-label-stack.json +++ b/src/maps/data-label-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Show Labels
\n 		\n \n
\n
Smart label mode
\n 		\n \n
\n
Intersect action
\n 		\n \n
\n \n
\n \n \n \n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps datalabel sample\n */\nimport { Maps, MapsTooltip, DataLabel, ILoadEventArgs, MapsTheme, SmartLabelMode, IntersectAction, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(MapsTooltip, DataLabel);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n// code for property panel\n let intersectaction: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.intersectionAction = intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n let smartlabelmode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.smartLabelMode = smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Show Labels
\n 		\n \n
\n
Smart label mode
\n 		\n \n
\n
Intersect action
\n 		\n \n
\n \n
\n \n \n \n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps datalabel sample\n */\nimport { Maps, MapsTooltip, DataLabel, ILoadEventArgs, MapsTheme, SmartLabelMode, IntersectAction, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(MapsTooltip, DataLabel);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Trim'\n },\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n autofill: true\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ]\n });\n maps.appendTo('#datalabel');\n// code for property panel\n let intersectaction: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select intersect action',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.intersectionAction = intersectaction.value;\n maps.refresh();\n }\n });\n intersectaction.appendTo('#intersectaction');\n let smartlabelmode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select smartlabel mode',\n width: 120,\n change: () => {\n maps.layers[0].dataLabelSettings.smartLabelMode = smartlabelmode.value;\n maps.refresh();\n }\n });\n smartlabelmode.appendTo('#smartlabelmode');\n document.getElementById('select').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('select'));\n maps.layers[0].dataLabelSettings.visible = element.checked;\n maps.refresh();\n };\n"} \ No newline at end of file diff --git a/src/maps/default-stack.json b/src/maps/default-stack.json index 82db76fe..2d2ac5ea 100644 --- a/src/maps/default-stack.json +++ b/src/maps/default-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n\n
\n
\n \n \n
\n\n \n \n\n
","index.ts":"{{ripple}}/**\n * Maps default sample\n */\nimport { Maps, Legend, Marker, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Legend, Marker, MapsTooltip);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n titleSettings: {\n text: 'YouTube office locations',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/default-datasource.json'),\n shapeSettings: {\n colorValuePath: 'color',\n },\n markerSettings: [\n {\n visible: true,\n dataSource: [\n { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },\n { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },\n { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' },\n { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' },\n { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' },\n { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' },\n { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' },\n { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' },\n { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' },\n { latitude: 51.5326602, longitude: -0.1262422, name: 'London' }\n ],\n shape: 'Image',\n imageUrl: '//ej2.syncfusion.com/demos/src/maps/images/ballon.png',\n height: 20,\n width: 20,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Asia' +\n '
',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Australia' +\n '
',\n dataSource: [\n { latitude: -25.88583769986199, longitude: 134.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Africa' +\n '
',\n dataSource: [\n { latitude: 16.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Europe' +\n '
',\n dataSource: [\n { latitude: 49.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
North America' +\n '
',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
South America' +\n '
',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n ],\n\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n\n
\n
\n \n \n
\n\n \n \n\n
","index.ts":"{{ripple}}/**\n * Maps default sample\n */\nimport { Maps, Legend, Marker, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Legend, Marker, MapsTooltip);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n titleSettings: {\n text: 'YouTube office locations',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/default-datasource.json'),\n shapeSettings: {\n colorValuePath: 'color',\n },\n markerSettings: [\n {\n visible: true,\n dataSource: [\n { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },\n { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },\n { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' },\n { latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' },\n { latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' },\n { latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' },\n { latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' },\n { latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' },\n { latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' },\n { latitude: 51.5326602, longitude: -0.1262422, name: 'London' }\n ],\n shape: 'Image',\n imageUrl: '//npmci.syncfusion.com/production/demos/src/maps/images/ballon.png',\n height: 20,\n width: 20,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Asia' +\n '
',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Australia' +\n '
',\n dataSource: [\n { latitude: -25.88583769986199, longitude: 134.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Africa' +\n '
',\n dataSource: [\n { latitude: 16.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Europe' +\n '
',\n dataSource: [\n { latitude: 49.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
North America' +\n '
',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
South America' +\n '
',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n ],\n\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/drilldown-stack.json b/src/maps/drilldown-stack.json index 332ac0e0..beab87fc 100644 --- a/src/maps/drilldown-stack.json +++ b/src/maps/drilldown-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n \n World Map\n \n

 >> 

\n

\n
\n
\n
\n
\n

\n \n

\n

Click on a shape to drill

\n
\n \n

\n
\n
\n\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps drilldown sample\n */\nimport {\n Maps, shapeSelected, IShapeSelectedEventArgs, Highlight, MapsTooltip, Marker, ILoadEventArgs,\n MapsTheme, MapAjax\n} from '@syncfusion/ej2-maps';\nMaps.Inject(Highlight, MapsTooltip, Marker);\nexport interface ShapeData {\n continent?: string;\n}\n\n\n\n let touchmove: boolean = false;\n let maps: Maps = new Maps({\n\n loaded: (args: ILoadEventArgs) => {\n let mapsSVG: HTMLElement = document.getElementById('mapdrilldown_svg') as HTMLElement;\n if (mapsSVG) {\n mapsSVG.addEventListener('touchmove', (e: MouseEvent) => { touchmove = true; }, false);\n }\n },\n // code for shape selection \n shapeSelected: (args: IShapeSelectedEventArgs): void => {\n let shape: string = (args.shapeData as ShapeData).continent;\n if (maps.baseLayerIndex === 0 && !touchmove) {\n if (shape === 'Africa') {\n maps.baseLayerIndex = 1;\n maps.refresh();\n } else if (shape === 'Europe') {\n maps.baseLayerIndex = 2;\n maps.refresh();\n } else if (shape === 'Asia') {\n maps.baseLayerIndex = 3;\n maps.refresh();\n } else if (shape === 'North America') {\n maps.baseLayerIndex = 4;\n maps.refresh();\n } else if (shape === 'South America') {\n maps.baseLayerIndex = 5;\n maps.refresh();\n } else if (shape === 'Australia') {\n maps.baseLayerIndex = 6;\n maps.refresh();\n }\n let button: HTMLElement = document.getElementById('button');\n button.style.display = 'block';\n document.getElementById('content').innerHTML = '';\n (document.getElementById('category')).style.visibility = 'visible';\n (document.getElementById('text')).innerHTML = shape;\n (document.getElementById('symbol')).style.visibility = 'visible';\n }\n touchmove = false;\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n layerType: 'Geometry',\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/default-datasource.json'),\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n colorValuePath: 'drillColor'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'continent'\n },\n markerSettings: [\n {\n visible: true,\n template: '
Asia' +\n '
',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Australia' +\n '
',\n dataSource: [\n { latitude: -28.88583769986199, longitude: 130.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Africa' +\n '
',\n dataSource: [\n { latitude: 10.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Europe' +\n '
',\n dataSource: [\n { latitude: 47.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
North America' +\n '
',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
South America' +\n '
',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#80306A'\n },\n highlightSettings: {\n enable: true,\n fill: '#80306A'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/europe.json'),\n shapeSettings: {\n fill: '#622D6C'\n },\n highlightSettings: {\n enable: true,\n fill: '#622D6C'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/asia.json'),\n shapeSettings: {\n fill: '#462A6D'\n },\n highlightSettings: {\n enable: true,\n fill: '#462A6D'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/north-america.json'),\n shapeSettings: {\n fill: '#C13664'\n },\n highlightSettings: {\n enable: true,\n fill: '#C13664'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/south-america.json'),\n shapeSettings: {\n fill: '#9C3367'\n },\n highlightSettings: {\n enable: true,\n fill: '#9C3367'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/oceania.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n });\n maps.appendTo('#mapdrilldown');\n // code for onclick event\n document.getElementById('category').onclick = () => {\n maps.baseLayerIndex = 0;\n maps.refresh();\n let button: HTMLElement = document.getElementById('button');\n button.style.display = 'none';\n document.getElementById('content').innerHTML = 'Click on a shape to drill';\n (document.getElementById('category')).style.visibility = 'hidden';\n (document.getElementById('text')).innerHTML = '';\n (document.getElementById('symbol')).style.visibility = 'hidden';\n };\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n \n World Map\n \n

 >> 

\n

\n
\n
\n
\n
\n

\n \n

\n

Click on a shape to drill

\n
\n \n

\n
\n
\n\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps drilldown sample\n */\nimport {\n Maps, shapeSelected, IShapeSelectedEventArgs, Highlight, MapsTooltip, Marker, ILoadEventArgs,\n MapsTheme, MapAjax\n} from '@syncfusion/ej2-maps';\nMaps.Inject(Highlight, MapsTooltip, Marker);\nexport interface ShapeData {\n continent?: string;\n}\n\n\n\n let touchmove: boolean = false;\n let maps: Maps = new Maps({\n\n loaded: (args: ILoadEventArgs) => {\n let mapsSVG: HTMLElement = document.getElementById('mapdrilldown_svg') as HTMLElement;\n if (mapsSVG) {\n mapsSVG.addEventListener('touchmove', (e: MouseEvent) => { touchmove = true; }, false);\n }\n },\n // code for shape selection \n shapeSelected: (args: IShapeSelectedEventArgs): void => {\n let shape: string = (args.shapeData as ShapeData).continent;\n if (maps.baseLayerIndex === 0 && !touchmove) {\n if (shape === 'Africa') {\n maps.baseLayerIndex = 1;\n maps.refresh();\n } else if (shape === 'Europe') {\n maps.baseLayerIndex = 2;\n maps.refresh();\n } else if (shape === 'Asia') {\n maps.baseLayerIndex = 3;\n maps.refresh();\n } else if (shape === 'North America') {\n maps.baseLayerIndex = 4;\n maps.refresh();\n } else if (shape === 'South America') {\n maps.baseLayerIndex = 5;\n maps.refresh();\n } else if (shape === 'Australia') {\n maps.baseLayerIndex = 6;\n maps.refresh();\n }\n let button: HTMLElement = document.getElementById('button');\n button.style.display = 'block';\n document.getElementById('content').innerHTML = '';\n (document.getElementById('category')).style.visibility = 'visible';\n (document.getElementById('text')).innerHTML = shape;\n (document.getElementById('symbol')).style.visibility = 'visible';\n }\n touchmove = false;\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n layerType: 'Geometry',\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/default-datasource.json'),\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n colorValuePath: 'drillColor'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'continent'\n },\n markerSettings: [\n {\n visible: true,\n template: '
Asia' +\n '
',\n dataSource: [\n { latitude: 50.32087157990324, longitude: 90.015625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Australia' +\n '
',\n dataSource: [\n { latitude: -28.88583769986199, longitude: 130.296875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Africa' +\n '
',\n dataSource: [\n { latitude: 10.97274101999902, longitude: 16.390625 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
Europe' +\n '
',\n dataSource: [\n { latitude: 47.95121990866204, longitude: 18.468749999999998 }\n ],\n animationDuration: 0,\n },\n {\n visible: true,\n template: '
North America' +\n '
',\n dataSource: [\n { latitude: 59.88893689676585, longitude: -109.3359375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
South America' +\n '
',\n dataSource: [\n { latitude: -6.64607562172573, longitude: -55.54687499999999 }\n ],\n animationDuration: 0\n },\n ]\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/africa.json'),\n shapeSettings: {\n fill: '#80306A'\n },\n highlightSettings: {\n enable: true,\n fill: '#80306A'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/europe.json'),\n shapeSettings: {\n fill: '#622D6C'\n },\n highlightSettings: {\n enable: true,\n fill: '#622D6C'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/asia.json'),\n shapeSettings: {\n fill: '#462A6D'\n },\n highlightSettings: {\n enable: true,\n fill: '#462A6D'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/north-america.json'),\n shapeSettings: {\n fill: '#C13664'\n },\n highlightSettings: {\n enable: true,\n fill: '#C13664'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/south-america.json'),\n shapeSettings: {\n fill: '#9C3367'\n },\n highlightSettings: {\n enable: true,\n fill: '#9C3367'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n },\n {\n layerType: 'Geometry',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/oceania.json'),\n shapeSettings: {\n fill: '#2A2870'\n },\n highlightSettings: {\n enable: true,\n fill: '#2A2870'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n }\n }\n ]\n });\n maps.appendTo('#mapdrilldown');\n // code for onclick event\n document.getElementById('category').onclick = () => {\n maps.baseLayerIndex = 0;\n maps.refresh();\n let button: HTMLElement = document.getElementById('button');\n button.style.display = 'none';\n document.getElementById('content').innerHTML = 'Click on a shape to drill';\n (document.getElementById('category')).style.visibility = 'hidden';\n (document.getElementById('text')).innerHTML = '';\n (document.getElementById('symbol')).style.visibility = 'hidden';\n };\n\n"} \ No newline at end of file diff --git a/src/maps/earthquake-stack.json b/src/maps/earthquake-stack.json index 52ebeab5..ef04879f 100644 --- a/src/maps/earthquake-stack.json +++ b/src/maps/earthquake-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n\n\n
","index.ts":"{{ripple}}\n/**\n * Earth quake map sample\n */\nimport { Maps, Zoom, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Zoom, Marker);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n
\n
\n
\n
\n
\n
\n
\n\n\n
","index.ts":"{{ripple}}\n/**\n * Earth quake map sample\n */\nimport { Maps, Zoom, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Zoom, Marker);\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 1.5053645409602877,\n longitude: 105.14038085937499\n },\n zoomSettings: {\n enable: false,\n zoomFactor: 7,\n mouseWheelZoom: false,\n toolbars: []\n },\n mapsArea: {\n background: '#AEE2FA'\n },\n titleSettings: {\n text: '7.6 Magnitude earthquake strikes Sumatra - 2009',\n textStyle: {\n size: '18px'\n }\n },\n layers: [\n {\n animationDuration: 1000,\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/asia.json'),\n markerSettings: [{\n visible: true,\n height: 100,\n width: 100,\n template: '#template',\n animationDuration: 0,\n dataSource: [{\n latitude: 1.625758360412755, longitude: 98.5693359375\n }]\n }],\n shapeSettings: {\n fill: '#FFFDCF',\n border: {\n color: '#3497C3 ',\n width: 0.5\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'name',\n smartLabelMode: 'Hide'\n }\n }\n ]\n });\n maps.appendTo('#maps');\n"} \ No newline at end of file diff --git a/src/maps/export-stack.json b/src/maps/export-stack.json index a99fdefd..ac066793 100644 --- a/src/maps/export-stack.json +++ b/src/maps/export-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Map Type\n
\n 		\n
\n \n
\n
\n
Export Type\n
\n 		\n
\n \n
\n
\n
File Name
\n 		\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport {\n Maps, Marker, MapsTooltip, ILoadEventArgs, MapsTheme,\n ExportType, MapAjax, ShapeLayerType, ImageExport, PdfExport\n} from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { Button } from '@syncfusion/ej2-buttons';\n\nMaps.Inject(Marker, MapsTooltip, ImageExport, PdfExport);\n\n\n let maps: Maps = new Maps({\n\n allowPdfExport: true,\n allowImageExport: true,\n titleSettings: {\n text: 'Location of the Wonders in the World',\n textStyle: {\n size: '16px'\n },\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeSettings: { fill: 'lightgrey', border: { color: 'black', width: 0.1 } },\n markerSettings: [\n {\n animationDuration: 0,\n visible: true,\n dataSource: [\n { longitude: 116.5703749, latitude: 40.4319077, name: 'The Great Wall of China, China ' },\n { longitude: 35.4443622, latitude: 30.3284544, name: 'Petra, Jorden' },\n { longitude: 78.0421552, latitude: 27.1750151, name: 'Taj Mahal, Agra, India' },\n { longitude: 12.4922309, latitude: 41.8902102, name: 'The Roman Colosseum, Rome, Italy' },\n { longitude: -88.5677826, latitude: 20.6842849, name: 'The Chichen Itza, Mexico' },\n { longitude: -72.5449629, latitude: -13.1631412, name: 'Machu Picchu, Peru' },\n { longitude: -43.2104872, latitude: -22.951916, name: 'Christ Redeemer, Rio de janeiro, Brazil' },\n ],\n shape: 'Balloon',\n fill: '#E13E40',\n height: 20,\n width: 15,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ],\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let modeData : string[] = ['JPEG', 'PNG', 'PDF', 'SVG'];\n let mode: DropDownList = new DropDownList({\n index: 0,\n dataSource: modeData,\n width: '100px'\n });\n mode.appendTo('#mode');\n let layertype: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select layer type',\n width: '100px',\n change: () => {\n if (layertype.value === 'OSM') {\n mode.dataSource = modeData.slice(0, 3);\n } else {\n mode.dataSource = modeData;\n }\n maps.layers[maps.layersCollection.length - 1].layerType = layertype.value;\n maps.refresh();\n }\n });\n layertype.appendTo('#layertype');\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n let fileName: string = ((document.getElementById('fileName'))).value;\n maps.export(mode.value, fileName);\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Map Type\n
\n 		\n
\n \n
\n
\n
Export Type\n
\n 		\n
\n \n
\n
\n
File Name
\n 		\n
\n \n
\n
\n
\n \n
\n
\n
\n
\n\n\n\n
","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport {\n Maps, Marker, MapsTooltip, ILoadEventArgs, MapsTheme,\n ExportType, MapAjax, ShapeLayerType, ImageExport, PdfExport\n} from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nimport { Button } from '@syncfusion/ej2-buttons';\n\nMaps.Inject(Marker, MapsTooltip, ImageExport, PdfExport);\n\n\n let maps: Maps = new Maps({\n\n allowPdfExport: true,\n allowImageExport: true,\n titleSettings: {\n text: 'Location of the Wonders in the World',\n textStyle: {\n size: '16px'\n },\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeSettings: { fill: 'lightgrey', border: { color: 'black', width: 0.1 } },\n markerSettings: [\n {\n animationDuration: 0,\n visible: true,\n dataSource: [\n { longitude: 116.5703749, latitude: 40.4319077, name: 'The Great Wall of China, China ' },\n { longitude: 35.4443622, latitude: 30.3284544, name: 'Petra, Jorden' },\n { longitude: 78.0421552, latitude: 27.1750151, name: 'Taj Mahal, Agra, India' },\n { longitude: 12.4922309, latitude: 41.8902102, name: 'The Roman Colosseum, Rome, Italy' },\n { longitude: -88.5677826, latitude: 20.6842849, name: 'The Chichen Itza, Mexico' },\n { longitude: -72.5449629, latitude: -13.1631412, name: 'Machu Picchu, Peru' },\n { longitude: -43.2104872, latitude: -22.951916, name: 'Christ Redeemer, Rio de janeiro, Brazil' },\n ],\n shape: 'Balloon',\n fill: '#E13E40',\n height: 20,\n width: 15,\n tooltipSettings: {\n visible: true,\n valuePath: 'name'\n },\n }\n ],\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let modeData : string[] = ['JPEG', 'PNG', 'PDF', 'SVG'];\n let mode: DropDownList = new DropDownList({\n index: 0,\n dataSource: modeData,\n width: '100px'\n });\n mode.appendTo('#mode');\n let layertype: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select layer type',\n width: '100px',\n change: () => {\n if (layertype.value === 'OSM') {\n mode.dataSource = modeData.slice(0, 3);\n } else {\n mode.dataSource = modeData;\n }\n maps.layers[maps.layersCollection.length - 1].layerType = layertype.value;\n maps.refresh();\n }\n });\n layertype.appendTo('#layertype');\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n let fileName: string = ((document.getElementById('fileName'))).value;\n maps.export(mode.value, fileName);\n };\n"} \ No newline at end of file diff --git a/src/maps/heat-map-stack.json b/src/maps/heat-map-stack.json index ea57e30b..d06d8bee 100644 --- a/src/maps/heat-map-stack.json +++ b/src/maps/heat-map-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n
","index.ts":"{{ripple}}\n/**\n * Heat Map sample\n */\nimport { Maps, Marker, MapsTooltip, Legend, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name}
Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n \n
","index.ts":"{{ripple}}\n/**\n * Heat Map sample\n */\nimport { Maps, Marker, MapsTooltip, Legend, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: \"State wise India's population - 2011\",\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/india.json'),\n shapePropertyPath: 'NAME_1',\n shapeDataPath: 'Name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/heatmap-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${Name}
Population: ${population}'\n },\n shapeSettings: {\n border: {\n width: 0.2,\n color: 'white'\n },\n colorValuePath: 'population',\n colorMapping: [{\n from: 60000, to: 400000, color: '#9fdfdf', label: '<0.4M'\n },\n {\n from: 400000, to: 10000000, color: '#79d2d2', label: '0.4-10M'\n },\n {\n from: 10000000, to: 20000000, color: '#53C6C6', label: '10-20M'\n },\n {\n from: 20000000, to: 70000000, color: '#39acac', label: '20-70M'\n },\n {\n from: 70000000, to: 100000000, color: '#339999', label: '70-100M'\n },\n {\n from: 100000000, to: 200000000, color: '#2d8686', label: '>100M'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/maps/highlighted-region-stack.json b/src/maps/highlighted-region-stack.json index 845b6b7b..5e7acbf6 100644 --- a/src/maps/highlighted-region-stack.json +++ b/src/maps/highlighted-region-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
ATM locations in Oklahoma, USA
\n
\n \n
\n \n
\n\n\n
","index.ts":"{{ripple}}\n/**\n * Highlighted region map sample\n */\nimport { Maps, Marker, Zoom, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, Zoom, MapsTooltip);\n\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 35.65, longitude: -97.3\n },\n zoomSettings: {\n enable: false,\n toolbars: [],\n mouseWheelZoom: false,\n zoomFactor: 1.75\n },\n layers: [\n {\n animationDuration: 1000,\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/oklahoma.json'),\n shapeSettings: {\n fill: '#F5F5F5',\n border: { color: '#EEDA97', width: 1 }\n },\n markerSettings: [\n {\n width: 20,\n height: 20,\n animationDuration: 0,\n visible: true,\n shape: 'Image',\n imageUrl: '//ej2.syncfusion.com/demos/src/maps/images/ballon.png',\n fill: '#000080',\n border: {\n color: 'transparent'\n },\n dataSource: [\n {\n latitude: 35.6379762, longitude: -97.4823761\n }, {\n latitude: 35.5676663, longitude: -97.5128031\n }, {\n latitude: 35.5412361, longitude: -97.601552\n }, {\n latitude: 35.5451471, longitude: -97.5661039\n }, {\n latitude: 35.5120376, longitude: -97.5918531\n }, {\n latitude: 35.5112516, longitude: -97.5843\n }, {\n latitude: 35.4737072, longitude: -97.5158072\n }, {\n latitude: 35.4575239, longitude: -97.6179457\n }, {\n latitude: 35.4362676, longitude: -97.5998354\n }, {\n latitude: 35.3954872, longitude: -97.5962305\n }, {\n latitude: 35.3492258, longitude: -97.5294113\n },\n {\n latitude: 35.5260794, longitude: -98.7032318\n },\n {\n latitude: 34.7827916, longitude: -98.3001709\n },\n {\n latitude: 34.0793936, longitude: -98.5583496\n },\n {\n latitude: 36.1434199, longitude: -97.0690155\n },\n {\n latitude: 36.0170318, longitude: -96.11063\n },\n {\n latitude: 36.1608845, longitude: -96.0205078\n },\n {\n latitude: 36.1323292, longitude: -95.9624863\n },\n {\n latitude: 36.1317746, longitude: -95.9046364\n },\n {\n latitude: 36.1604341, longitude: -95.8885002\n },\n ]\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 130,\n height: 130,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 35.5112516,\n longitude: -97.5843,\n text: '10/18 ATMs'\n }\n ],\n border: {\n color: 'transparent'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n }\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 100,\n height: 100,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 36.0808845,\n longitude: -96.0205078,\n text: '5/18 ATMs'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n },\n border: {\n color: 'transparent'\n }\n },\n {\n visible: true,\n template: '
{{:name}}
',\n dataSource: [\n {\n longitude: -101.9450281, latitude: 35.2018863, name: 'Amarillo'\n },\n {\n longitude: -98.0971969, latitude: 35.5514624, name: 'El Reno'\n },\n {\n longitude: -97.8432238, latitude: 35.5150073, name: 'Yukon'\n },\n {\n longitude: -97.2557752, latitude: 35.4933852, name: 'Harrah'\n },\n {\n longitude: -97.1019391, latitude: 35.3620257, name: 'Shawnee'\n },\n {\n longitude: -97.072877, latitude: 35.6853011, name: 'Wellston'\n },\n {\n longitude: -96.2093353, latitude: 36.133417, name: 'Lotsee'\n },\n {\n longitude: -96.3077788, latitude: 36.1879088, name: 'Sand Springs'\n },\n {\n longitude: -98.7075369, latitude: 35.931371, name: 'Oakwood'\n },\n {\n longitude: -98.0003367, latitude: 35.0403272, name: 'Chickasha'\n },\n {\n longitude: -97.1836494, latitude: 36.4595554, name: 'Red Rock'\n },\n {\n longitude: -96.7148021, latitude: 35.4859752, name: 'Prague'\n },\n {\n longitude: -97.9339651, latitude: 36.1022835, name: 'Hennessey'\n },\n {\n longitude: -96.2595621, latitude: 35.2453183, name: 'Wetumka'\n },\n {\n longitude: -97.4499583, latitude: 35.0304344, name: 'Purcell'\n },\n {\n longitude: -96.1059044, latitude: 35.605942, name: 'Okmulgee'\n },\n {\n longitude: -97.9684792, latitude: 35.8439429, name: 'Kingfisher'\n },\n {\n longitude: -95.7691956, latitude: 34.9332303, name: 'McAlester'\n },\n {\n longitude: -96.1289978, latitude: 34.3853794, name: 'Atoka'\n },\n {\n longitude: -97.1191406, latitude: 34.5042932, name: 'Davis'\n },\n {\n longitude: -98.0310059, latitude: 37.1537496, name: 'Anthony'\n },\n {\n longitude: -98.3564758, latitude: 36.7542898, name: 'Cherokee'\n },\n {\n longitude: -95.3695679, latitude: 35.7476268, name: 'Muskogee'\n },\n {\n longitude: -95.582428, latitude: 35.2871057, name: 'Eufaula'\n },\n {\n longitude: -96.9412994, latitude: 36.0446575, name: 'Mehan'\n },\n {\n longitude: -99.0925598, latitude: 35.0299964, name: 'Hobart'\n },\n {\n longitude: -98.4924316, latitude: 33.9137338, name: 'Wichita Falls'\n },\n {\n longitude: -98.9675903, latitude: 35.5154609, name: 'Clinton'\n },\n {\n longitude: -98.923645, latitude: 36.1478557, name: 'Seiling'\n },\n {\n longitude: -99.2985535, latitude: 36.1500735, name: 'Vici'\n },\n {\n longitude: -95.3173828, latitude: 36.3084855, name: 'Pryor'\n },\n {\n longitude: -96.7524719, latitude: 34.9596836, name: 'Konawa'\n }\n ]\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
ATM locations in Oklahoma, USA
\n
\n \n
\n \n
\n\n\n
","index.ts":"{{ripple}}\n/**\n * Highlighted region map sample\n */\nimport { Maps, Marker, Zoom, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, Zoom, MapsTooltip);\n\n\n\n let maps: Maps = new Maps({\n\n centerPosition: {\n latitude: 35.65, longitude: -97.3\n },\n zoomSettings: {\n enable: false,\n toolbars: [],\n mouseWheelZoom: false,\n zoomFactor: 1.75\n },\n layers: [\n {\n animationDuration: 1000,\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/oklahoma.json'),\n shapeSettings: {\n fill: '#F5F5F5',\n border: { color: '#EEDA97', width: 1 }\n },\n markerSettings: [\n {\n width: 20,\n height: 20,\n animationDuration: 0,\n visible: true,\n shape: 'Image',\n imageUrl: '//npmci.syncfusion.com/production/demos/src/maps/images/ballon.png',\n fill: '#000080',\n border: {\n color: 'transparent'\n },\n dataSource: [\n {\n latitude: 35.6379762, longitude: -97.4823761\n }, {\n latitude: 35.5676663, longitude: -97.5128031\n }, {\n latitude: 35.5412361, longitude: -97.601552\n }, {\n latitude: 35.5451471, longitude: -97.5661039\n }, {\n latitude: 35.5120376, longitude: -97.5918531\n }, {\n latitude: 35.5112516, longitude: -97.5843\n }, {\n latitude: 35.4737072, longitude: -97.5158072\n }, {\n latitude: 35.4575239, longitude: -97.6179457\n }, {\n latitude: 35.4362676, longitude: -97.5998354\n }, {\n latitude: 35.3954872, longitude: -97.5962305\n }, {\n latitude: 35.3492258, longitude: -97.5294113\n },\n {\n latitude: 35.5260794, longitude: -98.7032318\n },\n {\n latitude: 34.7827916, longitude: -98.3001709\n },\n {\n latitude: 34.0793936, longitude: -98.5583496\n },\n {\n latitude: 36.1434199, longitude: -97.0690155\n },\n {\n latitude: 36.0170318, longitude: -96.11063\n },\n {\n latitude: 36.1608845, longitude: -96.0205078\n },\n {\n latitude: 36.1323292, longitude: -95.9624863\n },\n {\n latitude: 36.1317746, longitude: -95.9046364\n },\n {\n latitude: 36.1604341, longitude: -95.8885002\n },\n ]\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 130,\n height: 130,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 35.5112516,\n longitude: -97.5843,\n text: '10/18 ATMs'\n }\n ],\n border: {\n color: 'transparent'\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n }\n },\n {\n animationDuration: 0,\n visible: true,\n shape: 'Circle',\n width: 100,\n height: 100,\n fill: 'rgba(70,130,180,0.3)',\n dataSource: [\n {\n latitude: 36.0808845,\n longitude: -96.0205078,\n text: '5/18 ATMs'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'text'\n },\n border: {\n color: 'transparent'\n }\n },\n {\n visible: true,\n template: '
{{:name}}
',\n dataSource: [\n {\n longitude: -101.9450281, latitude: 35.2018863, name: 'Amarillo'\n },\n {\n longitude: -98.0971969, latitude: 35.5514624, name: 'El Reno'\n },\n {\n longitude: -97.8432238, latitude: 35.5150073, name: 'Yukon'\n },\n {\n longitude: -97.2557752, latitude: 35.4933852, name: 'Harrah'\n },\n {\n longitude: -97.1019391, latitude: 35.3620257, name: 'Shawnee'\n },\n {\n longitude: -97.072877, latitude: 35.6853011, name: 'Wellston'\n },\n {\n longitude: -96.2093353, latitude: 36.133417, name: 'Lotsee'\n },\n {\n longitude: -96.3077788, latitude: 36.1879088, name: 'Sand Springs'\n },\n {\n longitude: -98.7075369, latitude: 35.931371, name: 'Oakwood'\n },\n {\n longitude: -98.0003367, latitude: 35.0403272, name: 'Chickasha'\n },\n {\n longitude: -97.1836494, latitude: 36.4595554, name: 'Red Rock'\n },\n {\n longitude: -96.7148021, latitude: 35.4859752, name: 'Prague'\n },\n {\n longitude: -97.9339651, latitude: 36.1022835, name: 'Hennessey'\n },\n {\n longitude: -96.2595621, latitude: 35.2453183, name: 'Wetumka'\n },\n {\n longitude: -97.4499583, latitude: 35.0304344, name: 'Purcell'\n },\n {\n longitude: -96.1059044, latitude: 35.605942, name: 'Okmulgee'\n },\n {\n longitude: -97.9684792, latitude: 35.8439429, name: 'Kingfisher'\n },\n {\n longitude: -95.7691956, latitude: 34.9332303, name: 'McAlester'\n },\n {\n longitude: -96.1289978, latitude: 34.3853794, name: 'Atoka'\n },\n {\n longitude: -97.1191406, latitude: 34.5042932, name: 'Davis'\n },\n {\n longitude: -98.0310059, latitude: 37.1537496, name: 'Anthony'\n },\n {\n longitude: -98.3564758, latitude: 36.7542898, name: 'Cherokee'\n },\n {\n longitude: -95.3695679, latitude: 35.7476268, name: 'Muskogee'\n },\n {\n longitude: -95.582428, latitude: 35.2871057, name: 'Eufaula'\n },\n {\n longitude: -96.9412994, latitude: 36.0446575, name: 'Mehan'\n },\n {\n longitude: -99.0925598, latitude: 35.0299964, name: 'Hobart'\n },\n {\n longitude: -98.4924316, latitude: 33.9137338, name: 'Wichita Falls'\n },\n {\n longitude: -98.9675903, latitude: 35.5154609, name: 'Clinton'\n },\n {\n longitude: -98.923645, latitude: 36.1478557, name: 'Seiling'\n },\n {\n longitude: -99.2985535, latitude: 36.1500735, name: 'Vici'\n },\n {\n longitude: -95.3173828, latitude: 36.3084855, name: 'Pryor'\n },\n {\n longitude: -96.7524719, latitude: 34.9596836, name: 'Konawa'\n }\n ]\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/legend-stack.json b/src/maps/legend-stack.json index 77d6b997..e8abdce9 100644 --- a/src/maps/legend-stack.json +++ b/src/maps/legend-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Legend mode
\n 		\n \n
\n
Legend position
\n 		\n \n
\n
Show legend for remaining data source items
\n 		\n
\n \n
\n
\n
Show population density when the legend item is toggled
\n 		\n
\n \n
\n
\n
\n\n \n
","index.ts":"{{ripple}}\n/**\n * Legend Sample\n */\nimport { Maps, Legend, LegendMode, MapsTooltip, ITooltipRenderEventArgs,\n ILoadEventArgs, MapsTheme, MapAjax, LegendPosition } from '@syncfusion/ej2-maps';\nimport { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';\nimport { EmitType } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Legend, MapsTooltip);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Population density (per square kilometer) - 2015',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/legend-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name} : ${density}'\n },\n shapeSettings: {\n colorValuePath: 'density',\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0.00001, to: 100, color: 'rgb(153,174,214)', label: '<100'\n },\n {\n from: 100, to: 200, color: 'rgb(115,143,199)', label: '100 - 200'\n },\n {\n from: 200, to: 300, color: 'rgb(77,112,184)', label: '200 - 300'\n },\n {\n from: 300, to: 500, color: 'rgb(38,82,168)', label: '300 - 500'\n },\n {\n from: 500, to: 19000, color: 'rgb(0,51,153)', label: '>500'\n },\n {\n color: null, label: null\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n //code for property panel\n let legendPosition: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: 100,\n change: () => {\n maps.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n maps.legendSettings.orientation = 'Vertical';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n } else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n } else {\n maps.legendSettings.orientation = 'Horizontal';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n }\n maps.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n let mode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 100,\n change: () => {\n maps.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (maps.legendSettings.orientation === 'Horizontal' || maps.legendSettings.orientation === 'None') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n } else {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n } else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n maps.refresh();\n }\n });\n mode.appendTo('#legendMode');\n let opacity: EmitType;\n let highlightCheckBox: CheckBox = new CheckBox(\n {\n change: opacity, checked: false\n },\n '#opacity');\n highlightCheckBox.change = opacity = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].shapeSettings.colorMapping[5].color = 'lightgrey';\n maps.layers[0].shapeSettings.colorMapping[5].label = 'No Data';\n } else {\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n }\n maps.refresh();\n };\n let toggleLegend: EmitType;\n let legendCheckBox: CheckBox = new CheckBox(\n {\n change: toggleLegend, checked: false\n },\n '#toggleLegend');\n legendCheckBox.change = toggleLegend = (e: CheckBoxChangeEvents) => {\n maps.legendSettings.toggleLegendSettings.enable = e.checked;\n maps.refresh();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n\n \n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Legend mode
\n 		\n \n
\n
Legend position
\n 		\n \n
\n
Show legend for remaining data source items
\n 		\n
\n \n
\n
\n
Show population density when the legend item is toggled
\n 		\n
\n \n
\n
\n
\n\n \n
","index.ts":"{{ripple}}\n/**\n * Legend Sample\n */\nimport { Maps, Legend, LegendMode, MapsTooltip, ITooltipRenderEventArgs,\n ILoadEventArgs, MapsTheme, MapAjax, LegendPosition } from '@syncfusion/ej2-maps';\nimport { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';\nimport { EmitType } from '@syncfusion/ej2-base';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Legend, MapsTooltip);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Population density (per square kilometer) - 2015',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Top',\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/legend-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name} : ${density}'\n },\n shapeSettings: {\n colorValuePath: 'density',\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0.00001, to: 100, color: 'rgb(153,174,214)', label: '<100'\n },\n {\n from: 100, to: 200, color: 'rgb(115,143,199)', label: '100 - 200'\n },\n {\n from: 200, to: 300, color: 'rgb(77,112,184)', label: '200 - 300'\n },\n {\n from: 300, to: 500, color: 'rgb(38,82,168)', label: '300 - 500'\n },\n {\n from: 500, to: 19000, color: 'rgb(0,51,153)', label: '>500'\n },\n {\n color: null, label: null\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n //code for property panel\n let legendPosition: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Legend Position',\n width: 100,\n change: () => {\n maps.legendSettings.position = legendPosition.value;\n if (legendPosition.value === 'Left' || legendPosition.value === 'Right') {\n maps.legendSettings.orientation = 'Vertical';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n } else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n } else {\n maps.legendSettings.orientation = 'Horizontal';\n if (maps.legendSettings.mode === 'Interactive') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n }\n }\n maps.refresh();\n }\n });\n legendPosition.appendTo('#legendPosition');\n let mode: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select layoutMode type',\n width: 100,\n change: () => {\n maps.legendSettings.mode = mode.value;\n if (mode.value === 'Interactive') {\n if (maps.legendSettings.orientation === 'Horizontal' || maps.legendSettings.orientation === 'None') {\n maps.legendSettings.height = '10';\n maps.legendSettings.width = '';\n } else {\n maps.legendSettings.height = '70%';\n maps.legendSettings.width = '10';\n }\n } else {\n maps.legendSettings.height = '';\n maps.legendSettings.width = '';\n }\n maps.refresh();\n }\n });\n mode.appendTo('#legendMode');\n let opacity: EmitType;\n let highlightCheckBox: CheckBox = new CheckBox(\n {\n change: opacity, checked: false\n },\n '#opacity');\n highlightCheckBox.change = opacity = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].shapeSettings.colorMapping[5].color = 'lightgrey';\n maps.layers[0].shapeSettings.colorMapping[5].label = 'No Data';\n } else {\n maps.layers[0].shapeSettings.colorMapping[5].color = null;\n maps.layers[0].shapeSettings.colorMapping[5].label = null;\n }\n maps.refresh();\n };\n let toggleLegend: EmitType;\n let legendCheckBox: CheckBox = new CheckBox(\n {\n change: toggleLegend, checked: false\n },\n '#toggleLegend');\n legendCheckBox.change = toggleLegend = (e: CheckBoxChangeEvents) => {\n maps.legendSettings.toggleLegendSettings.enable = e.checked;\n maps.refresh();\n };\n"} \ No newline at end of file diff --git a/src/maps/marker-stack.json b/src/maps/marker-stack.json index 87389c5a..e3beee04 100644 --- a/src/maps/marker-stack.json +++ b/src/maps/marker-stack.json @@ -1 +1 @@ -{"map-data/top-location.json":"{\n \"topPopulation\":[\n {\n \"name\": \"Tokyo\",\n \"latitude\": 35.6894875,\n \"longitude\": 139.6917064,\n \"population\": 33200000,\n \"Country\": \"Japan\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"New York\",\n \"latitude\": 40.7127753,\n \"longitude\": -74.0059728,\n \"population\": 17800000,\n \"Country\": \"United States\",\n \"Continent\": \"North America\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Sao Paulo\",\n \"latitude\": -23.5505199,\n \"longitude\": -46.6333094,\n \"population\": 17700000,\n \"Country\": \"Brazil\",\n \"Continent\": \"South America\",\n \"color\": \"orange\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Seoul/Incheon\",\n \"latitude\": 37.566535,\n \"longitude\": 126.9779692,\n \"population\": 17500000,\n \"Country\": \"South Korea\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Mexico City\",\n \"latitude\": 19.2464696,\n \"longitude\": -99.1013498,\n \"population\": 17400000,\n \"Country\": \"Mexico\",\n \"Continent\": \"North America\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Osaka/Kobe/Kyoto\",\n \"latitude\": 35.0212466,\n \"longitude\": 135.7555968,\n \"population\": 16425000,\n \"Country\": \"Japan\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Manila\",\n \"latitude\": 14.5995124,\n \"longitude\": 120.9842195,\n \"population\": 14750000,\n \"Country\": \"Philippines\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Mumbai\",\n \"latitude\": 19.0759837,\n \"longitude\": 72.8776559,\n \"population\": 14350000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Delhi\",\n \"latitude\": 28.6139391,\n \"longitude\": 77.2090212,\n \"population\": 14300000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Jakarta\",\n \"latitude\": -6.17511,\n \"longitude\": 106.8650395,\n \"population\": 14250000,\n \"Country\": \"Indonesia\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Lagos\",\n \"latitude\": 6.5243793,\n \"longitude\": 3.3792057,\n \"population\": 13400000,\n \"Continent\": \"Africa\",\n \"Country\": \"Nigeria\",\n \"color\": \"blue\",\n \"shape\": \"Rectangle\"\n },\n {\n \"name\": \"Kolkata\",\n \"latitude\": 22.572646,\n \"longitude\": 88.363895,\n \"population\": 12700000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Cairo\",\n \"latitude\": 30.0444196,\n \"longitude\": 31.2357116,\n \"population\": 12200000,\n \"Country\": \"Egypt\",\n \"Continent\": \"Africa\",\n \"color\": \"blue\",\n \"shape\": \"Rectangle\"\n },\n {\n \"name\": \"Los Angeles\",\n \"latitude\": 34.0522265,\n \"longitude\": -118.2436596,\n \"population\": 11789000,\n \"Continent\": \"North America\",\n \"Country\": \"United States\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Buenos Aires\",\n \"latitude\": -34.6036844,\n \"longitude\": -58.3815591,\n \"population\": 11200000,\n \"Country\": \"Argentina\",\n \"color\": \"orange\",\n \"Continent\": \"South America\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Rio de Janeiro\",\n \"latitude\": -22.9068467,\n \"longitude\": -43.1728965,\n \"population\": 10800000,\n \"Country\": \"Brazil\",\n \"color\": \"orange\",\n \"Continent\": \"South America\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Moscow\",\n \"latitude\": 55.755826,\n \"longitude\": 37.6173,\n \"population\": 10500000,\n \"Country\": \"Russia\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Shanghai\",\n \"latitude\": 31.2303904,\n \"longitude\": 121.4737021,\n \"population\": 10000000,\n \"Country\": \"China\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Karachi\",\n \"latitude\": 25.0700428,\n \"longitude\": 67.2847875,\n \"population\": 9800000,\n \"Country\": \"Pakistan\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Paris\",\n \"latitude\": 48.856614,\n \"longitude\": 2.3522219,\n \"population\": 9645000,\n \"Country\": \"France\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Istanbul\",\n \"latitude\": 41.0082376,\n \"longitude\": 28.9783589,\n \"population\": 9000000,\n \"Country\": \"Istanbul\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Nagoya\",\n \"latitude\": 35.1814464,\n \"longitude\": 136.906398,\n \"population\": 9000000,\n \"Country\": \"Japan\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Beijing\",\n \"latitude\": 39.9041999,\n \"longitude\": 116.4073963,\n \"population\": 8614000,\n \"Country\": \"China\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Chicago\",\n \"latitude\": 41.8781136,\n \"longitude\": -87.6297982,\n \"population\": 8308000,\n \"Country\": \"United States\",\n \"color\": \"green\",\n \"Continent\": \"North America\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"London\",\n \"latitude\": 51.5073509,\n \"longitude\": -0.1277583,\n \"population\": 8278000,\n \"Country\": \"United Kingdom\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n }\n ]\n}","index.html":"\n\n \n\n
\n
\n
\n
\n \n
Source:\n www.citymayors.com\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
Bind markers shape from data source\n
\n 		\n
\n \n
\n
\n
Bind markers color from data source\n
\n 		\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n ${name}\n
\n
\n
\n
\n Country : ${Country}\n
\n
\n Continent : ${Continent}\n
\n
\n Population : ${population}\n
\n
\n\n
\n\n\n\n\n
","index.ts":"{{ripple}}/**\n * Marker sample\n */\nimport { Maps, Marker, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport * as dataSource from './map-data/top-location.json';\nimport { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';\nimport { EmitType } from '@syncfusion/ej2-base';\nlet data: any = dataSource as any;\nMaps.Inject(Marker, MapsTooltip);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n\n useGroupingSeparator: true,\n format: 'n',\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Top 25 populated cities in the world',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#C3E6ED'\n },\n markerSettings: [\n {\n dataSource: data.topPopulation,\n visible: true,\n animationDuration: 0,\n shape: 'Circle',\n fill: 'white',\n width: 10,\n border: { width: 2, color: '#285255' },\n tooltipSettings: {\n template: '#template',\n visible: true,\n valuePath: 'population',\n }\n },\n ]\n }\n ]\n });\n maps.appendTo('#container');\n\n let markerShape: EmitType;\n let markerShapeCheckBox: CheckBox = new CheckBox(\n {\n change: markerShape, checked: false\n },\n '#shape');\n markerShapeCheckBox.change = markerShape = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].markerSettings[0].shapeValuePath = 'shape';\n } else {\n maps.layers[0].markerSettings[0].shapeValuePath = null;\n }\n };\n let markerColor: EmitType;\n let markerColorCheckBox: CheckBox = new CheckBox(\n {\n change: markerColor, checked: false\n },\n '#color');\n markerColorCheckBox.change = markerColor = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].markerSettings[0].colorValuePath = 'color';\n } else {\n maps.layers[0].markerSettings[0].colorValuePath = null;\n }\n };\n"} \ No newline at end of file +{"map-data/top-location.json":"{\n \"topPopulation\":[\n {\n \"name\": \"Tokyo\",\n \"latitude\": 35.6894875,\n \"longitude\": 139.6917064,\n \"population\": 33200000,\n \"Country\": \"Japan\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"New York\",\n \"latitude\": 40.7127753,\n \"longitude\": -74.0059728,\n \"population\": 17800000,\n \"Country\": \"United States\",\n \"Continent\": \"North America\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Sao Paulo\",\n \"latitude\": -23.5505199,\n \"longitude\": -46.6333094,\n \"population\": 17700000,\n \"Country\": \"Brazil\",\n \"Continent\": \"South America\",\n \"color\": \"orange\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Seoul/Incheon\",\n \"latitude\": 37.566535,\n \"longitude\": 126.9779692,\n \"population\": 17500000,\n \"Country\": \"South Korea\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Mexico City\",\n \"latitude\": 19.2464696,\n \"longitude\": -99.1013498,\n \"population\": 17400000,\n \"Country\": \"Mexico\",\n \"Continent\": \"North America\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Osaka/Kobe/Kyoto\",\n \"latitude\": 35.0212466,\n \"longitude\": 135.7555968,\n \"population\": 16425000,\n \"Country\": \"Japan\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Manila\",\n \"latitude\": 14.5995124,\n \"longitude\": 120.9842195,\n \"population\": 14750000,\n \"Country\": \"Philippines\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Mumbai\",\n \"latitude\": 19.0759837,\n \"longitude\": 72.8776559,\n \"population\": 14350000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Delhi\",\n \"latitude\": 28.6139391,\n \"longitude\": 77.2090212,\n \"population\": 14300000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Jakarta\",\n \"latitude\": -6.17511,\n \"longitude\": 106.8650395,\n \"population\": 14250000,\n \"Country\": \"Indonesia\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Lagos\",\n \"latitude\": 6.5243793,\n \"longitude\": 3.3792057,\n \"population\": 13400000,\n \"Continent\": \"Africa\",\n \"Country\": \"Nigeria\",\n \"color\": \"blue\",\n \"shape\": \"Rectangle\"\n },\n {\n \"name\": \"Kolkata\",\n \"latitude\": 22.572646,\n \"longitude\": 88.363895,\n \"population\": 12700000,\n \"Country\": \"India\",\n \"Continent\": \"Asia\",\n \"color\": \"red\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Cairo\",\n \"latitude\": 30.0444196,\n \"longitude\": 31.2357116,\n \"population\": 12200000,\n \"Country\": \"Egypt\",\n \"Continent\": \"Africa\",\n \"color\": \"blue\",\n \"shape\": \"Rectangle\"\n },\n {\n \"name\": \"Los Angeles\",\n \"latitude\": 34.0522265,\n \"longitude\": -118.2436596,\n \"population\": 11789000,\n \"Continent\": \"North America\",\n \"Country\": \"United States\",\n \"color\": \"green\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"Buenos Aires\",\n \"latitude\": -34.6036844,\n \"longitude\": -58.3815591,\n \"population\": 11200000,\n \"Country\": \"Argentina\",\n \"color\": \"orange\",\n \"Continent\": \"South America\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Rio de Janeiro\",\n \"latitude\": -22.9068467,\n \"longitude\": -43.1728965,\n \"population\": 10800000,\n \"Country\": \"Brazil\",\n \"color\": \"orange\",\n \"Continent\": \"South America\",\n \"shape\": \"InvertedTriangle\"\n },\n {\n \"name\": \"Moscow\",\n \"latitude\": 55.755826,\n \"longitude\": 37.6173,\n \"population\": 10500000,\n \"Country\": \"Russia\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Shanghai\",\n \"latitude\": 31.2303904,\n \"longitude\": 121.4737021,\n \"population\": 10000000,\n \"Country\": \"China\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Karachi\",\n \"latitude\": 25.0700428,\n \"longitude\": 67.2847875,\n \"population\": 9800000,\n \"Country\": \"Pakistan\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Paris\",\n \"latitude\": 48.856614,\n \"longitude\": 2.3522219,\n \"population\": 9645000,\n \"Country\": \"France\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Istanbul\",\n \"latitude\": 41.0082376,\n \"longitude\": 28.9783589,\n \"population\": 9000000,\n \"Country\": \"Istanbul\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n },\n {\n \"name\": \"Nagoya\",\n \"latitude\": 35.1814464,\n \"longitude\": 136.906398,\n \"population\": 9000000,\n \"Country\": \"Japan\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Beijing\",\n \"latitude\": 39.9041999,\n \"longitude\": 116.4073963,\n \"population\": 8614000,\n \"Country\": \"China\",\n \"color\": \"red\",\n \"Continent\": \"Asia\",\n \"shape\": \"Pentagon\"\n },\n {\n \"name\": \"Chicago\",\n \"latitude\": 41.8781136,\n \"longitude\": -87.6297982,\n \"population\": 8308000,\n \"Country\": \"United States\",\n \"color\": \"green\",\n \"Continent\": \"North America\",\n \"shape\": \"Diamond\"\n },\n {\n \"name\": \"London\",\n \"latitude\": 51.5073509,\n \"longitude\": -0.1277583,\n \"population\": 8278000,\n \"Country\": \"United Kingdom\",\n \"color\": \"yellow\",\n \"Continent\": \"Europe\",\n \"shape\": \"Triangle\"\n }\n ]\n}","index.html":"\n\n \n\n
\n
\n
\n
\n \n
Source:\n www.citymayors.com\n
\n
\n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
Bind markers shape from data source\n
\n 		\n
\n \n
\n
\n
Bind markers color from data source\n
\n 		\n
\n \n
\n
\n
\n\n
\n
\n
\n
\n ${name}\n
\n
\n
\n
\n Country : ${Country}\n
\n
\n Continent : ${Continent}\n
\n
\n Population : ${population}\n
\n
\n\n
\n\n\n\n\n
","index.ts":"{{ripple}}/**\n * Marker sample\n */\nimport { Maps, Marker, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport * as dataSource from './map-data/top-location.json';\nimport { CheckBox, ChangeEventArgs as CheckBoxChangeEvents } from '@syncfusion/ej2-buttons';\nimport { EmitType } from '@syncfusion/ej2-base';\nlet data: any = dataSource as any;\nMaps.Inject(Marker, MapsTooltip);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n\n useGroupingSeparator: true,\n format: 'n',\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: 'Top 25 populated cities in the world',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#C3E6ED'\n },\n markerSettings: [\n {\n dataSource: data.topPopulation,\n visible: true,\n animationDuration: 0,\n shape: 'Circle',\n fill: 'white',\n width: 10,\n border: { width: 2, color: '#285255' },\n tooltipSettings: {\n template: '#template',\n visible: true,\n valuePath: 'population',\n }\n },\n ]\n }\n ]\n });\n maps.appendTo('#container');\n\n let markerShape: EmitType;\n let markerShapeCheckBox: CheckBox = new CheckBox(\n {\n change: markerShape, checked: false\n },\n '#shape');\n markerShapeCheckBox.change = markerShape = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].markerSettings[0].shapeValuePath = 'shape';\n } else {\n maps.layers[0].markerSettings[0].shapeValuePath = null;\n }\n };\n let markerColor: EmitType;\n let markerColorCheckBox: CheckBox = new CheckBox(\n {\n change: markerColor, checked: false\n },\n '#color');\n markerColorCheckBox.change = markerColor = (e: CheckBoxChangeEvents) => {\n if (e.checked) {\n maps.layers[0].markerSettings[0].colorValuePath = 'color';\n } else {\n maps.layers[0].markerSettings[0].colorValuePath = null;\n }\n };\n"} \ No newline at end of file diff --git a/src/maps/marker-template-stack.json b/src/maps/marker-template-stack.json index ec99954d..856edd02 100644 --- a/src/maps/marker-template-stack.json +++ b/src/maps/marker-template-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.bom.gov.au\n
\n
\n\n \n \n\n
","index.ts":"{{ripple}}/**\n * Marker template sample\n */\nimport { Maps, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker);\n\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: ' Australia cities weather detail',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/australia.json'),\n shapeDataPath: 'STATE_NAME',\n markerSettings: [\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Perth', latitude: -31.950527, longitude: 115.860457, Temperature: 31.6 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Adelaide', latitude: -34.928499, longitude: 138.600746, Temperature: 28.5 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Townsville', latitude: -19.2589635, longitude: 146.8169483, Temperature: 31.3 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Sydney', latitude: -33.868820, longitude: 151.209296, Temperature: 26.4 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Alice Springs', latitude: -23.698042, longitude: 133.880747, Temperature: 36.4 },\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
'\n + '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Brisbane', latitude: -27.469771, longitude: 153.025124, Temperature: 29.1 }\n ]\n }\n ],\n tooltipSettings: {\n visible: false\n },\n shapeSettings: {\n autofill: true,\n palette: ['#E2B247', '#88DB46', '#42C4E2', '#C08AF8', '#52BACC', '#F4CE2F', '#6986ED'],\n border: {\n width: 0.5,\n color: 'white'\n },\n }\n }\n ]\n });\n maps.appendTo('#markertemp');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.bom.gov.au\n
\n
\n\n \n \n\n
","index.ts":"{{ripple}}/**\n * Marker template sample\n */\nimport { Maps, Marker, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker);\n\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: false\n },\n titleSettings: {\n text: ' Australia cities weather detail',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/australia.json'),\n shapeDataPath: 'STATE_NAME',\n markerSettings: [\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Perth', latitude: -31.950527, longitude: 115.860457, Temperature: 31.6 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Adelaide', latitude: -34.928499, longitude: 138.600746, Temperature: 28.5 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Townsville', latitude: -19.2589635, longitude: 146.8169483, Temperature: 31.3 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Sydney', latitude: -33.868820, longitude: 151.209296, Temperature: 26.4 }\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
' +\n '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Alice Springs', latitude: -23.698042, longitude: 133.880747, Temperature: 36.4 },\n ]\n },\n {\n height: 30,\n width: 30,\n visible: true,\n template: '
'\n + '

{{:Name}}:{{:Temperature}}°C

',\n dataSource: [\n { Name: 'Brisbane', latitude: -27.469771, longitude: 153.025124, Temperature: 29.1 }\n ]\n }\n ],\n tooltipSettings: {\n visible: false\n },\n shapeSettings: {\n autofill: true,\n palette: ['#E2B247', '#88DB46', '#42C4E2', '#C08AF8', '#52BACC', '#F4CE2F', '#6986ED'],\n border: {\n width: 0.5,\n color: 'white'\n },\n }\n }\n ]\n });\n maps.appendTo('#markertemp');\n"} \ No newline at end of file diff --git a/src/maps/multilayer-stack.json b/src/maps/multilayer-stack.json index 3ef96309..522ef3cf 100644 --- a/src/maps/multilayer-stack.json +++ b/src/maps/multilayer-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.samsung.com\n
\n \n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n\n \n\t\n\t\n\n
","index.ts":"{{ripple}}/**\n * Multi-layer map sample\n */\nimport { Maps, Marker, ILoadEventArgs, MapsTheme, MapsTooltip, DataLabel, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, DataLabel);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: true,\n pinchZooming: true\n },\n titleSettings: {\n text: 'Samsung Semiconductor office locations in USA',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.1\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'iso_3166_2',\n smartLabelMode: 'Hide'\n }\n },\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/texas.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n template: '#markercircle',\n dataSource: [\n {\n latitude: 30.267153,\n longitude: -97.7430608,\n name: 'Austin'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
Manufacturing Center,
Research and Development Center'\n }\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 31.80289258670676,\n longitude: -98.96484375\n }\n ],\n template: '
TX
'\n }\n ]\n },\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/california.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n dataSource: [\n {\n latitude: 37.3382082,\n longitude: -121.8863286,\n name: 'San Jose'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
Regional Office,
Research and Development Center'\n },\n template: '#markercircle'\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 37.09023980307208,\n longitude: -119.35546875000001\n }\n ],\n template: '
CA
'\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n www.samsung.com\n
\n \n\t
\n\t\t\n\t\t\t\n\t\t\n\t
\n\n \n\t\n\t\n\n
","index.ts":"{{ripple}}/**\n * Multi-layer map sample\n */\nimport { Maps, Marker, ILoadEventArgs, MapsTheme, MapsTooltip, DataLabel, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(Marker, MapsTooltip, DataLabel);\n\n/**\n * Code for Maps\n */\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: true,\n pinchZooming: true\n },\n titleSettings: {\n text: 'Samsung Semiconductor office locations in USA',\n textStyle: {\n size: '16px'\n }\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n border: {\n color: 'black',\n width: 0.1\n }\n },\n dataLabelSettings: {\n visible: true,\n labelPath: 'iso_3166_2',\n smartLabelMode: 'Hide'\n }\n },\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/texas.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n template: '#markercircle',\n dataSource: [\n {\n latitude: 30.267153,\n longitude: -97.7430608,\n name: 'Austin'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
Manufacturing Center,
Research and Development Center'\n }\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 31.80289258670676,\n longitude: -98.96484375\n }\n ],\n template: '
TX
'\n }\n ]\n },\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/california.json'),\n type: 'SubLayer',\n shapeSettings: {\n fill: 'rgba(141, 206, 255, 0.6)',\n border: {\n color: '#1a9cff',\n width: 0.25\n }\n },\n markerSettings: [\n {\n visible: true,\n width: 20,\n height: 20,\n dataSource: [\n {\n latitude: 37.3382082,\n longitude: -121.8863286,\n name: 'San Jose'\n }\n ],\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n format: '${name}
Regional Office,
Research and Development Center'\n },\n template: '#markercircle'\n },\n {\n visible: true,\n dataSource: [\n {\n latitude: 37.09023980307208,\n longitude: -119.35546875000001\n }\n ],\n template: '
CA
'\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n"} \ No newline at end of file diff --git a/src/maps/pie-stack.json b/src/maps/pie-stack.json index b2c645f0..31e19382 100644 --- a/src/maps/pie-stack.json +++ b/src/maps/pie-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n \n \n
\n\n\n
","index.ts":"{{ripple}}\nimport { Maps, Marker, ILoadEventArgs, ILoadedEventArgs, IResizeEventArgs, MapsTheme, Legend, MapAjax } from '@syncfusion/ej2-maps';\nimport { AccumulationChart, PieSeries, DataLabel, AccumulationTooltip } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationChart, PieSeries, DataLabel, AccumulationTooltip);\nMaps.Inject(Marker, Legend);\n/**\n * Dynamic Pie\n */\n\n\n\n let maps: Maps = new Maps({\n\n loaded: (args: ILoadedEventArgs) => {\n let markers: Element = document.getElementById(args.maps.element.id + '_LayerIndex_0_Markers_Template_Group');\n if (markers) {\n for (let i: number = 0; i < markers.childElementCount; i++) {\n AccumulationChartRender((markers.childNodes[i].childNodes[0]).id);\n }\n count = 0;\n }\n },\n resize: (args: IResizeEventArgs) => {\n for (let i: number = 0; i < chartCollection.length; i++) {\n chartCollection[i].destroy();\n }\n },\n titleSettings: {\n text: 'Top 6 largest countries age group details',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Bottom'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0, to: 4, color: '#634D6F', label: '0-14 years',\n },\n {\n from: 5, to: 14, color: '#B34D6D', label: '15-24 years'\n },\n {\n from: 15, to: 59, color: '#557C5C', label: '25-54 years'\n },\n {\n from: 60, to: 100, color: '#5E55E2', label: '55-64 years'\n }\n ]\n },\n markerSettings: [\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 61.938950426660604, 'longitude': 97.03125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 57.70414723434193, 'longitude': -114.08203125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 39.90973623453719, 'longitude': -103.0078125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 35.746512259918504, 'longitude': 102.216796875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': -8.667918002363107, 'longitude': -52.55859375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': -23.725011735951796, 'longitude': 132.978515625 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n\nlet chartCollection: AccumulationChart[] = [];\nlet count: number = 0;\n\nexport function AccumulationChartRender(id: string): void {\n let chartData: any = getData();\n let dataSource: object[] = chartData['data'];\n let name: string = chartData['name'];\n let chart: AccumulationChart = new AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: name,\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: dataSource,\n dataLabel: {\n visible: true\n },\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#' + id);\n chartCollection.push(chart);\n}\n\nexport function getData(): object {\n let dataSource: object[];\n let dataName: string;\n if (count === 0) {\n dataSource = [\n { 'x': '0-14 years', y: 16 }, { 'x': '15-24 years', y: 11.5 },\n { 'x': '25-54 years', y: 45.9 }, { 'x': '55-64 years', y: 13.5 },\n ];\n dataName = 'Russia';\n } else if (count === 1) {\n dataSource = [\n { 'x': '0-14 years', y: 15.5 }, { 'x': '15-24 years', y: 12.9 },\n { 'x': '25-54 years', y: 41.4 }, { 'x': '55-64 years', y: 13.3 },\n ];\n dataName = 'Canada';\n } else if (count === 2) {\n dataSource = [\n { 'x': '0-14 years', y: 20 }, { 'x': '15-24 years', y: 13.7 },\n { 'x': '25-54 years', y: 40.2 }, { 'x': '55-64 years', y: 12.3 },\n ];\n dataName = 'USA';\n } else if (count === 3) {\n dataSource = [\n { 'x': '0-14 years', y: 17.2 }, { 'x': '15-24 years', y: 15.4 },\n { 'x': '25-54 years', y: 46.9 }, { 'x': '55-64 years', y: 11.3 },\n ];\n dataName = 'China';\n } else if (count === 4) {\n dataSource = [\n { 'x': '0-14 years', y: 24.2 }, { 'x': '15-24 years', y: 16.7 },\n { 'x': '25-54 years', y: 43.6 }, { 'x': '55-64 years', y: 8.2 },\n ];\n dataName = 'Brazil';\n } else if (count === 5) {\n dataSource = [\n { 'x': '0-14 years', y: 18.1 }, { 'x': '15-24 years', y: 13.4 },\n { 'x': '25-54 years', y: 42 }, { 'x': '55-64 years', y: 11.8 },\n ];\n dataName = 'Australia';\n }\n count++;\n return new Object({ name: dataName, data: dataSource });\n}"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n \n \n
\n\n\n
","index.ts":"{{ripple}}\nimport { Maps, Marker, ILoadEventArgs, ILoadedEventArgs, IResizeEventArgs, MapsTheme, Legend, MapAjax } from '@syncfusion/ej2-maps';\nimport { AccumulationChart, PieSeries, DataLabel, AccumulationTooltip } from '@syncfusion/ej2-charts';\nAccumulationChart.Inject(AccumulationChart, PieSeries, DataLabel, AccumulationTooltip);\nMaps.Inject(Marker, Legend);\n/**\n * Dynamic Pie\n */\n\n\n\n let maps: Maps = new Maps({\n\n loaded: (args: ILoadedEventArgs) => {\n let markers: Element = document.getElementById(args.maps.element.id + '_LayerIndex_0_Markers_Template_Group');\n if (markers) {\n for (let i: number = 0; i < markers.childElementCount; i++) {\n AccumulationChartRender((markers.childNodes[i].childNodes[0]).id);\n }\n count = 0;\n }\n },\n resize: (args: IResizeEventArgs) => {\n for (let i: number = 0; i < chartCollection.length; i++) {\n chartCollection[i].destroy();\n }\n },\n titleSettings: {\n text: 'Top 6 largest countries age group details',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n position: 'Bottom'\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n from: 0, to: 4, color: '#634D6F', label: '0-14 years',\n },\n {\n from: 5, to: 14, color: '#B34D6D', label: '15-24 years'\n },\n {\n from: 15, to: 59, color: '#557C5C', label: '25-54 years'\n },\n {\n from: 60, to: 100, color: '#5E55E2', label: '55-64 years'\n }\n ]\n },\n markerSettings: [\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 61.938950426660604, 'longitude': 97.03125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 57.70414723434193, 'longitude': -114.08203125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 39.90973623453719, 'longitude': -103.0078125 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': 35.746512259918504, 'longitude': 102.216796875 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': -8.667918002363107, 'longitude': -52.55859375 }\n ],\n animationDuration: 0\n },\n {\n visible: true,\n template: '
',\n dataSource: [\n { 'latitude': -23.725011735951796, 'longitude': 132.978515625 }\n ],\n animationDuration: 0\n }\n ]\n }\n ]\n });\n maps.appendTo('#container');\n\nlet chartCollection: AccumulationChart[] = [];\nlet count: number = 0;\n\nexport function AccumulationChartRender(id: string): void {\n let chartData: any = getData();\n let dataSource: object[] = chartData['data'];\n let name: string = chartData['name'];\n let chart: AccumulationChart = new AccumulationChart({\n background: 'transparent',\n width: '70',\n height: '70',\n tooltip: {\n enable: true,\n format: '${point.x} : ${point.y}%'\n },\n series: [\n {\n explode: true,\n explodeIndex: 0,\n explodeOffset: '20%',\n name: name,\n palettes: ['#634D6F', '#B34D6D', '#557C5C', '#5E55E2', '#7C744D'],\n dataSource: dataSource,\n dataLabel: {\n visible: true\n },\n type: 'Pie',\n xName: 'x',\n yName: 'y'\n }\n ]\n });\n chart.appendTo('#' + id);\n chartCollection.push(chart);\n}\n\nexport function getData(): object {\n let dataSource: object[];\n let dataName: string;\n if (count === 0) {\n dataSource = [\n { 'x': '0-14 years', y: 16 }, { 'x': '15-24 years', y: 11.5 },\n { 'x': '25-54 years', y: 45.9 }, { 'x': '55-64 years', y: 13.5 },\n ];\n dataName = 'Russia';\n } else if (count === 1) {\n dataSource = [\n { 'x': '0-14 years', y: 15.5 }, { 'x': '15-24 years', y: 12.9 },\n { 'x': '25-54 years', y: 41.4 }, { 'x': '55-64 years', y: 13.3 },\n ];\n dataName = 'Canada';\n } else if (count === 2) {\n dataSource = [\n { 'x': '0-14 years', y: 20 }, { 'x': '15-24 years', y: 13.7 },\n { 'x': '25-54 years', y: 40.2 }, { 'x': '55-64 years', y: 12.3 },\n ];\n dataName = 'USA';\n } else if (count === 3) {\n dataSource = [\n { 'x': '0-14 years', y: 17.2 }, { 'x': '15-24 years', y: 15.4 },\n { 'x': '25-54 years', y: 46.9 }, { 'x': '55-64 years', y: 11.3 },\n ];\n dataName = 'China';\n } else if (count === 4) {\n dataSource = [\n { 'x': '0-14 years', y: 24.2 }, { 'x': '15-24 years', y: 16.7 },\n { 'x': '25-54 years', y: 43.6 }, { 'x': '55-64 years', y: 8.2 },\n ];\n dataName = 'Brazil';\n } else if (count === 5) {\n dataSource = [\n { 'x': '0-14 years', y: 18.1 }, { 'x': '15-24 years', y: 13.4 },\n { 'x': '25-54 years', y: 42 }, { 'x': '55-64 years', y: 11.8 },\n ];\n dataName = 'Australia';\n }\n count++;\n return new Object({ name: dataName, data: dataSource });\n}"} \ No newline at end of file diff --git a/src/maps/print-stack.json b/src/maps/print-stack.json index 6e5b8675..332f5c35 100644 --- a/src/maps/print-stack.json +++ b/src/maps/print-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n
\n \n \n\n\n
","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport { Maps, ILoadEventArgs, MapsTheme, ITooltipRenderEventArgs, MapsTooltip, Legend, MapAjax, Print } from '@syncfusion/ej2-maps';\nimport { Button } from '@syncfusion/ej2-buttons';\nMaps.Inject(Legend, MapsTooltip, Print);\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n allowPrint: true,\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000, to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name}
Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // onclick event\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n maps.print();\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n
\n
\n \n \n \n \n
\n
\n \n
\n
\n
\n \n \n\n\n
","index.ts":"{{ripple}}\n/**\n * Changing exporting sample.\n */\nimport { Maps, ILoadEventArgs, MapsTheme, ITooltipRenderEventArgs, MapsTooltip, Legend, MapAjax, Print } from '@syncfusion/ej2-maps';\nimport { Button } from '@syncfusion/ej2-buttons';\nMaps.Inject(Legend, MapsTooltip, Print);\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (args.options.toString().indexOf('population') > -1) {\n args.cancel = true;\n }\n },\n allowPrint: true,\n format: 'n',\n useGroupingSeparator: true,\n titleSettings: {\n text: 'State-wise US population - 2010',\n textStyle: {\n size: '16px'\n },\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Bottom',\n height: '10',\n width: '350',\n labelDisplayMode: 'Trim',\n alignment: 'Center'\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapeDataPath: 'name',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/print-datasource.json'),\n shapeSettings: {\n border: {\n width: 0.5,\n color: 'gray'\n },\n colorValuePath: 'population',\n colorMapping: [\n {\n from: 580000, to: 2800000, color: '#dae8f1', label: '<3M'\n },\n {\n from: 2800000, to: 5280000, color: '#b0cde1', label: '3-6M'\n },\n {\n from: 5280000, to: 8260000, color: '#90bad8', label: '6-9M'\n },\n {\n from: 8260000, to: 11660000, color: '#6ea7d2', label: '9-12M'\n },\n {\n from: 11660000, to: 19600000, color: '#4c96cb', label: '12-20M'\n },\n {\n from: 19600000, to: 26500000, color: '#3182bd', label: '20-25M'\n },\n {\n from: 26500000, to: 38400000, color: '#004374', label: '>25M'\n }\n ]\n },\n tooltipSettings: {\n visible: true,\n valuePath: 'population',\n format: 'State: ${name}
Population: ${population}'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // onclick event\n let togglebtn: Button = new Button({\n iconCss: 'e-icons e-play-icon', cssClass: 'e-flat', isPrimary: true\n });\n togglebtn.appendTo('#togglebtn');\n document.getElementById('togglebtn').onclick = () => {\n maps.print();\n };\n"} \ No newline at end of file diff --git a/src/maps/projection-stack.json b/src/maps/projection-stack.json index 8facb1ca..0ce28091 100644 --- a/src/maps/projection-stack.json +++ b/src/maps/projection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n
\n \n \n \n \n \n
\n
Projection Type
\n 		\n \n
\n
\n\n \n\n
","index.ts":"{{ripple}}/**\n * Changing projection sample\n */\nimport { Maps, Zoom, Legend, ProjectionType, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Zoom, Legend, MapsTooltip);\n\n/**\n * code for maps\n */\n\n\n let maps: Maps = new Maps({\n\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far'\n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let projection: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: () => {\n maps.projectionType = projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n
\n \n \n \n \n \n
\n
Projection Type
\n 		\n \n
\n
\n\n \n\n
","index.ts":"{{ripple}}/**\n * Changing projection sample\n */\nimport { Maps, Zoom, Legend, ProjectionType, MapsTooltip, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { DropDownList } from '@syncfusion/ej2-dropdowns';\nMaps.Inject(Zoom, Legend, MapsTooltip);\n\n/**\n * code for maps\n */\n\n\n let maps: Maps = new Maps({\n\n titleSettings: {\n text: 'Members of the UN Security Council',\n textStyle: {\n size: '16px'\n },\n subtitleSettings: {\n text: '- In 2017',\n alignment: 'Far'\n }\n },\n legendSettings: {\n visible: true\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapeDataPath: 'Country',\n shapePropertyPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/projection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'Country',\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: 'Permanent',\n color: '#EDB46F'\n },\n {\n color: '#F1931B',\n value: 'Non-Permanent'\n }\n ],\n colorValuePath: 'Membership'\n }\n }\n ]\n });\n maps.appendTo('#container');\n // code for property panel \n let projection: DropDownList = new DropDownList({\n index: 0,\n placeholder: 'Select projection type',\n width: 120,\n change: () => {\n maps.projectionType = projection.value;\n maps.refresh();\n }\n });\n projection.appendTo('#projectiontype');\n"} \ No newline at end of file diff --git a/src/maps/sample.json b/src/maps/sample.json index 77af414d..b6534812 100644 --- a/src/maps/sample.json +++ b/src/maps/sample.json @@ -3,7 +3,6 @@ "directory": "maps", "category": "Data Visualization", "ftName": "maps", - "type": "update", "samples": [{ "url": "default", "name": "Default Functionalities", @@ -368,7 +367,6 @@ "name": "Print", "description": "This demo for Essential JS2 Maps control illustrates the printing functionality in the maps control.", "category": "Print and Export", - "type": "update", "api": { "Maps": [ "titleSettings", @@ -386,7 +384,6 @@ { "url": "export", "name": "Export", - "type": "update", "description": "This demo for Essential JS2 Maps control illustrates the exporting functionality in the maps control.", "category": "Print and Export", "api": { diff --git a/src/maps/seat-selection-stack.json b/src/maps/seat-selection-stack.json index aa2ba289..8829641d 100644 --- a/src/maps/seat-selection-stack.json +++ b/src/maps/seat-selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n\n
\n
\n \n
Bus seat selection
\n
\n
\n \n
\n
\n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
Available\n
\n
\n\n
Selected\n
\n
\n\n
Booked\n
\n
\n
\n Clear Selection

\n
\n
\n\t\t\n \n \n \n
","index.ts":"{{ripple}}\n/**\n * Seat Selection sample\n */\nimport { Maps, ISelectionEventArgs, Selection, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\n\n\n let seatInfo: HTMLDivElement = document.getElementById('selectedseats');\n Maps.Inject(Selection);\n interface SeatInfo {\n seatno?: number;\n fill?: string;\n }\n let maps: Maps = new Maps({\n\n projectionType: 'Equirectangular',\n itemSelection: (args: ISelectionEventArgs) => {\n if ((args.shapeData as SeatInfo).fill === 'Orange') {\n args.fill = 'Orange !important';\n document.getElementById(args.target).setAttribute('class', 'ShapeselectionMapStyle');\n return;\n }\n args.fill = 'green';\n let seat: number = (args.shapeData as SeatInfo).seatno;\n let connector: string = ' ';\n if (seatInfo.innerHTML === '') {\n seatInfo.innerHTML = 'Seats Selected -';\n } else {\n connector = ', ';\n }\n let seatString: string = '' + connector + seat + '';\n let seatString1: string = ' ' + seat + ',';\n let lastString: string = 'Seats Selected - ' + seat + '';\n if (seatInfo.innerHTML.indexOf(seatString) === -1 && seatInfo.innerHTML.indexOf(seatString1) === -1 &&\n seatInfo.innerHTML.indexOf(lastString) === -1) {\n seatInfo.innerHTML += '' + connector + seat + '';\n } else {\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString, '');\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString1, '');\n if (seatInfo.innerHTML === lastString) {\n seatInfo.innerHTML = '';\n }\n }\n },\n height: '400',\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n geometryType: 'Normal',\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/seat.json'),\n shapeSettings: {\n colorValuePath: 'fill'\n },\n selectionSettings: {\n enable: true,\n opacity: 1,\n enableMultiSelect: true\n }\n }\n ]\n });\n maps.appendTo('#maps');\n document.getElementById('clear-btn').onclick = () => {\n seatInfo.innerHTML = '';\n let selected: HTMLCollection = document.getElementsByClassName('ShapeselectionMapStyle');\n for (let i: number = 0, length: number = selected.length; i < length; i++) {\n selected[0].setAttribute('class', '');\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n\n
\n
\n \n
Bus seat selection
\n
\n
\n \n
\n
\n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n
Available\n
\n
\n\n
Selected\n
\n
\n\n
Booked\n
\n
\n
\n Clear Selection

\n
\n
\n\t\t\n \n \n \n
","index.ts":"{{ripple}}\n/**\n * Seat Selection sample\n */\nimport { Maps, ISelectionEventArgs, Selection, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\n\n\n let seatInfo: HTMLDivElement = document.getElementById('selectedseats');\n Maps.Inject(Selection);\n interface SeatInfo {\n seatno?: number;\n fill?: string;\n }\n let maps: Maps = new Maps({\n\n projectionType: 'Equirectangular',\n itemSelection: (args: ISelectionEventArgs) => {\n if ((args.shapeData as SeatInfo).fill === 'Orange') {\n args.fill = 'Orange !important';\n document.getElementById(args.target).setAttribute('class', 'ShapeselectionMapStyle');\n return;\n }\n args.fill = 'green';\n let seat: number = (args.shapeData as SeatInfo).seatno;\n let connector: string = ' ';\n if (seatInfo.innerHTML === '') {\n seatInfo.innerHTML = 'Seats Selected -';\n } else {\n connector = ', ';\n }\n let seatString: string = '' + connector + seat + '';\n let seatString1: string = ' ' + seat + ',';\n let lastString: string = 'Seats Selected - ' + seat + '';\n if (seatInfo.innerHTML.indexOf(seatString) === -1 && seatInfo.innerHTML.indexOf(seatString1) === -1 &&\n seatInfo.innerHTML.indexOf(lastString) === -1) {\n seatInfo.innerHTML += '' + connector + seat + '';\n } else {\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString, '');\n seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString1, '');\n if (seatInfo.innerHTML === lastString) {\n seatInfo.innerHTML = '';\n }\n }\n },\n height: '400',\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n geometryType: 'Normal',\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/seat.json'),\n shapeSettings: {\n colorValuePath: 'fill'\n },\n selectionSettings: {\n enable: true,\n opacity: 1,\n enableMultiSelect: true\n }\n }\n ]\n });\n maps.appendTo('#maps');\n document.getElementById('clear-btn').onclick = () => {\n seatInfo.innerHTML = '';\n let selected: HTMLCollection = document.getElementsByClassName('ShapeselectionMapStyle');\n for (let i: number = 0, length: number = selected.length; i < length; i++) {\n selected[0].setAttribute('class', '');\n }\n };\n"} \ No newline at end of file diff --git a/src/maps/selection-stack.json b/src/maps/selection-stack.json index 6d765cb2..ede07c66 100644 --- a/src/maps/selection-stack.json +++ b/src/maps/selection-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n
\n
\n \n
\n
Source:\n en.wikipedia.org\n
\n \n
\n\t x\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n\n\n\n
\n\n
\n\n \n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps selction sample\n */\nimport {\n Maps, MapsTooltip, ISelectionEventArgs, Selection, Highlight, Legend, ILoadEventArgs, MapsTheme, MapAjax\n} from '@syncfusion/ej2-maps';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nMaps.Inject(MapsTooltip, Selection, Highlight, Legend);\ninterface PopulationData {\n State?: string;\n Candidate?: string;\n Trump?: string;\n Clinton?: string;\n}\n\n\n\n let maps: Maps = new Maps({\n\n itemSelection: (args: ISelectionEventArgs) => {\n if (args.shapeData !== isNullOrUndefined) {\n let matched: string = navigator.userAgent;\n let browser: string = matched.toLowerCase();\n let isIE11: boolean = !!navigator.userAgent.match(/Trident\\/7\\./);\n if (isIE11) {\n browser = 'msie';\n }\n let object: object = args.data;\n let popup: HTMLElement = document.getElementById('closepopup');\n let closebutton: HTMLElement = document.getElementById('closebutton');\n let winner: HTMLElement = document.getElementById('winner');\n let state: HTMLElement = document.getElementById('state');\n let trumpvote: HTMLElement = document.getElementById('trumpvotes');\n let clintonvote: HTMLElement = document.getElementById('clintonvotes');\n popup.style.display = 'block';\n closebutton.style.display = 'block';\n closebutton.onclick = () => {\n let popup: HTMLElement = document.getElementById('closepopup');\n let closebutton: HTMLElement = document.getElementById('closebutton');\n popup.style.display = 'none';\n closebutton.style.display = 'none';\n };\n\n if (browser !== 'mozilla') {\n state.innerText = (args.data as PopulationData).State;\n winner.innerText = (args.data as PopulationData).Candidate;\n trumpvote.innerText = (args.data as PopulationData).Trump + '%';\n clintonvote.innerText = (args.data as PopulationData).Clinton + '%';\n } else {\n state.textContent = (args.data as PopulationData).State;\n winner.textContent = (args.data as PopulationData).Candidate;\n trumpvote.textContent = (args.data as PopulationData).Trump + '%';\n clintonvote.textContent = (args.data as PopulationData).Clinton + '%';\n }\n }\n },\n titleSettings: {\n text: 'USA Election Results - 2016',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Top',\n width: '80%',\n textStyle: {\n fontWeight: '400',\n size: '14px'\n }\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'State',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/selection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'State'\n },\n highlightSettings: {\n enable: true,\n fill: '#A3B0D0'\n },\n selectionSettings: {\n enable: true,\n fill: '#4C515B ',\n opacity: 1\n },\n shapeSettings: {\n colorValuePath: 'Candidate',\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n
\n
\n \n
\n
Source:\n en.wikipedia.org\n
\n \n
\n\t x\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n \n \n \n \n \n
\n\n\n\n
\n\n
\n\n \n\n\n
","index.ts":"{{ripple}}\n/**\n * Maps selction sample\n */\nimport {\n Maps, MapsTooltip, ISelectionEventArgs, Selection, Highlight, Legend, ILoadEventArgs, MapsTheme, MapAjax\n} from '@syncfusion/ej2-maps';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nMaps.Inject(MapsTooltip, Selection, Highlight, Legend);\ninterface PopulationData {\n State?: string;\n Candidate?: string;\n Trump?: string;\n Clinton?: string;\n}\n\n\n\n let maps: Maps = new Maps({\n\n itemSelection: (args: ISelectionEventArgs) => {\n if (args.shapeData !== isNullOrUndefined) {\n let matched: string = navigator.userAgent;\n let browser: string = matched.toLowerCase();\n let isIE11: boolean = !!navigator.userAgent.match(/Trident\\/7\\./);\n if (isIE11) {\n browser = 'msie';\n }\n let object: object = args.data;\n let popup: HTMLElement = document.getElementById('closepopup');\n let closebutton: HTMLElement = document.getElementById('closebutton');\n let winner: HTMLElement = document.getElementById('winner');\n let state: HTMLElement = document.getElementById('state');\n let trumpvote: HTMLElement = document.getElementById('trumpvotes');\n let clintonvote: HTMLElement = document.getElementById('clintonvotes');\n popup.style.display = 'block';\n closebutton.style.display = 'block';\n closebutton.onclick = () => {\n let popup: HTMLElement = document.getElementById('closepopup');\n let closebutton: HTMLElement = document.getElementById('closebutton');\n popup.style.display = 'none';\n closebutton.style.display = 'none';\n };\n\n if (browser !== 'mozilla') {\n state.innerText = (args.data as PopulationData).State;\n winner.innerText = (args.data as PopulationData).Candidate;\n trumpvote.innerText = (args.data as PopulationData).Trump + '%';\n clintonvote.innerText = (args.data as PopulationData).Clinton + '%';\n } else {\n state.textContent = (args.data as PopulationData).State;\n winner.textContent = (args.data as PopulationData).Candidate;\n trumpvote.textContent = (args.data as PopulationData).Trump + '%';\n clintonvote.textContent = (args.data as PopulationData).Clinton + '%';\n }\n }\n },\n titleSettings: {\n text: 'USA Election Results - 2016',\n textStyle: {\n size: '16px'\n }\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Top',\n width: '80%',\n textStyle: {\n fontWeight: '400',\n size: '14px'\n }\n },\n zoomSettings: {\n enable: false\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/usa.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'State',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/selection-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'State'\n },\n highlightSettings: {\n enable: true,\n fill: '#A3B0D0'\n },\n selectionSettings: {\n enable: true,\n fill: '#4C515B ',\n opacity: 1\n },\n shapeSettings: {\n colorValuePath: 'Candidate',\n colorMapping: [\n {\n value: 'Trump', color: '#D84444'\n },\n {\n value: 'Clinton', color: '#316DB5'\n }\n ]\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/maps/tooltip-stack.json b/src/maps/tooltip-stack.json index ed50b1b6..8f5ec0c9 100644 --- a/src/maps/tooltip-stack.json +++ b/src/maps/tooltip-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n\n
\n
\n
\n
\n ${country} \n
\n
\n
\n
\n Finalist : ${value1}\n
\n
\n Win : ${value2}\n
\n
\n \n
\n\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n\n\n\n \n
","index.ts":"{{ripple}}\n/**\n * Maps Tooltip\n */\nimport { Maps, MapsTooltip, Legend, ITooltipRenderEventArgs, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n titleSettings: {\n text: 'Finalist in Cricket World Cup',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Left',\n orientation: 'Vertical',\n height: '70%',\n width: '10'\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/tooltip-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n template: '#template'\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: '1',\n color: '#b3daff'\n },\n {\n color: '#80c1ff',\n value: '2'\n },\n {\n color: '#1a90ff',\n value: '3'\n },\n {\n color: '#005cb3',\n value: '7'\n }\n ],\n colorValuePath: 'value1'\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n\n
\n
\n
\n
\n ${country} \n
\n
\n
\n
\n Finalist : ${value1}\n
\n
\n Win : ${value2}\n
\n
\n \n
\n\n
\n
\n \n
Source:\n en.wikipedia.org\n
\n
\n\n\n\n\n \n
","index.ts":"{{ripple}}\n/**\n * Maps Tooltip\n */\nimport { Maps, MapsTooltip, Legend, ITooltipRenderEventArgs, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nMaps.Inject(MapsTooltip, Legend);\n\n\n\n let maps: Maps = new Maps({\n\n tooltipRender: (args: ITooltipRenderEventArgs) => {\n if (!args.options['data']) {\n args.cancel = true;\n }\n },\n titleSettings: {\n text: 'Finalist in Cricket World Cup',\n textStyle: {\n size: '16px'\n }\n },\n zoomSettings: {\n enable: false\n },\n legendSettings: {\n visible: true,\n mode: 'Interactive',\n position: 'Left',\n orientation: 'Vertical',\n height: '70%',\n width: '10'\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'name',\n shapeDataPath: 'name',\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/tooltip-datasource.json'),\n tooltipSettings: {\n visible: true,\n valuePath: 'name',\n template: '#template'\n },\n shapeSettings: {\n fill: '#E5E5E5',\n colorMapping: [\n {\n value: '1',\n color: '#b3daff'\n },\n {\n color: '#80c1ff',\n value: '2'\n },\n {\n color: '#1a90ff',\n value: '3'\n },\n {\n color: '#005cb3',\n value: '7'\n }\n ],\n colorValuePath: 'value1'\n }\n }\n ]\n });\n maps.appendTo('#container');\n\n"} \ No newline at end of file diff --git a/src/maps/zooming-stack.json b/src/maps/zooming-stack.json index e671d8b8..937c272c 100644 --- a/src/maps/zooming-stack.json +++ b/src/maps/zooming-stack.json @@ -1 +1 @@ -{"index.html":"\n\n \n\n
\n\n\n
\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Zooming
\n 		\n \n
\n
Panning
\n 		\n \n
\n
Mouse wheel zoom
\n 		\n \n
\n
Pinch zoom
\n 		\n \n
\n
Single click zoom
\n 		\n \n
\n
Double click zoom
\n 		\n \n
\n
Animation duration
500 ms
\n 		\n
\n
\n
\n \n \n\n
","index.ts":"{{ripple}}\n/**\n * Maps zooming sample\n */\nimport { Maps, Zoom, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';\nimport { EmitType } from '@syncfusion/ej2-base';\nMaps.Inject(Zoom);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: true,\n toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],\n pinchZooming: true\n },\n layers: [\n {\n shapeData: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n animationDuration: 500,\n shapeSettings: {\n autofill: true,\n colorValuePath: 'color'\n },\n dataSource: new MapAjax('//ej2.syncfusion.com/demos/src/maps/map-data/zooming-datasource.json')\n }\n ]\n });\n maps.appendTo('#mapszooming');\n // code for property panel\n let sliderChange: EmitType;\n let slider: Slider = new Slider(\n {\n value: 500,\n min: 0, max: 1000, step: 250,\n change: sliderChange\n },\n '#range');\n slider.change = sliderChange = (e: SliderChangeEventArgs) => {\n maps.layers[0].animationDuration = e.value as number;\n maps.refresh();\n document.getElementById('dur').innerHTML = e.value.toString() + ' ms';\n };\n document.getElementById('mousewheel').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('mousewheel'));\n maps.zoomSettings.mouseWheelZoom = element.checked;\n maps.refresh();\n };\n document.getElementById('pinch').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('pinch'));\n maps.zoomSettings.pinchZooming = element.checked;\n maps.refresh();\n };\n document.getElementById('zoom').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('zoom'));\n maps.zoomSettings.enable = element.checked;\n maps.refresh();\n };\n document.getElementById('pan').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('pan'));\n maps.zoomSettings.enablePanning = element.checked;\n maps.refresh();\n };\n document.getElementById('doubletap').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('doubletap'));\n maps.zoomSettings.doubleClickZoom = element.checked;\n let ele1: HTMLInputElement = document.getElementById('singletap');\n if (element.checked) {\n ele1.disabled = true;\n } else {\n ele1.disabled = false;\n }\n };\n document.getElementById('singletap').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('singletap'));\n let ele1: HTMLInputElement = document.getElementById('doubletap');\n maps.zoomSettings.zoomOnClick = element.checked;\n if (element.checked) {\n ele1.disabled = true;\n } else {\n ele1.disabled = false;\n }\n };\n"} \ No newline at end of file +{"index.html":"\n\n \n\n
\n\n\n
\n
\n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
Zooming
\n 		\n \n
\n
Panning
\n 		\n \n
\n
Mouse wheel zoom
\n 		\n \n
\n
Pinch zoom
\n 		\n \n
\n
Single click zoom
\n 		\n \n
\n
Double click zoom
\n 		\n \n
\n
Animation duration
500 ms
\n 		\n
\n
\n
\n \n \n\n
","index.ts":"{{ripple}}\n/**\n * Maps zooming sample\n */\nimport { Maps, Zoom, ILoadEventArgs, MapsTheme, MapAjax } from '@syncfusion/ej2-maps';\nimport { Slider, SliderChangeEventArgs } from '@syncfusion/ej2-inputs';\nimport { EmitType } from '@syncfusion/ej2-base';\nMaps.Inject(Zoom);\n\n\n let maps: Maps = new Maps({\n\n zoomSettings: {\n enable: true,\n toolbars: ['Zoom', 'ZoomIn', 'ZoomOut', 'Pan', 'Reset'],\n pinchZooming: true\n },\n layers: [\n {\n shapeData: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/world-map.json'),\n shapePropertyPath: 'continent',\n shapeDataPath: 'continent',\n animationDuration: 500,\n shapeSettings: {\n autofill: true,\n colorValuePath: 'color'\n },\n dataSource: new MapAjax('//npmci.syncfusion.com/production/demos/src/maps/map-data/zooming-datasource.json')\n }\n ]\n });\n maps.appendTo('#mapszooming');\n // code for property panel\n let sliderChange: EmitType;\n let slider: Slider = new Slider(\n {\n value: 500,\n min: 0, max: 1000, step: 250,\n change: sliderChange\n },\n '#range');\n slider.change = sliderChange = (e: SliderChangeEventArgs) => {\n maps.layers[0].animationDuration = e.value as number;\n maps.refresh();\n document.getElementById('dur').innerHTML = e.value.toString() + ' ms';\n };\n document.getElementById('mousewheel').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('mousewheel'));\n maps.zoomSettings.mouseWheelZoom = element.checked;\n maps.refresh();\n };\n document.getElementById('pinch').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('pinch'));\n maps.zoomSettings.pinchZooming = element.checked;\n maps.refresh();\n };\n document.getElementById('zoom').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('zoom'));\n maps.zoomSettings.enable = element.checked;\n maps.refresh();\n };\n document.getElementById('pan').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('pan'));\n maps.zoomSettings.enablePanning = element.checked;\n maps.refresh();\n };\n document.getElementById('doubletap').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('doubletap'));\n maps.zoomSettings.doubleClickZoom = element.checked;\n let ele1: HTMLInputElement = document.getElementById('singletap');\n if (element.checked) {\n ele1.disabled = true;\n } else {\n ele1.disabled = false;\n }\n };\n document.getElementById('singletap').onchange = () => {\n let element: HTMLInputElement = (document.getElementById('singletap'));\n let ele1: HTMLInputElement = document.getElementById('doubletap');\n maps.zoomSettings.zoomOnClick = element.checked;\n if (element.checked) {\n ele1.disabled = true;\n } else {\n ele1.disabled = false;\n }\n };\n"} \ No newline at end of file diff --git a/src/pdfviewer/right-to-left.ts b/src/pdfviewer/right-to-left.ts index 2c21bf99..5906acfe 100644 --- a/src/pdfviewer/right-to-left.ts +++ b/src/pdfviewer/right-to-left.ts @@ -150,11 +150,7 @@ L10n.load({ 'Free Text': 'نص حر', 'Import Failed': 'نوع ملف سلمان أو اسم الملف غير صالح ؛ يرجى تحديد ملف سلمانصالح', 'File not found': 'لم يتم العثور على ملف سلمان المستورد في الموقع المطلوب', - 'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح', - 'Highlight context': 'تسليط الضوء', - 'Underline context': 'تسطير', - 'Strikethrough context': 'الإضراب من خلال', - 'Draw Ink': 'رسم الحبر' + 'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح' } } }); diff --git a/src/pdfviewer/sample.json b/src/pdfviewer/sample.json index 71151e2f..9f6ec5f5 100644 --- a/src/pdfviewer/sample.json +++ b/src/pdfviewer/sample.json @@ -3,10 +3,9 @@ "directory": "pdfviewer", "category": "Viewer", "ftName": "pdfviewer", - "type": "update", "samples": [ { - "url":"default", "name": "Default Functionalities", "description": "This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer", "type": "update" + "url":"default", "name": "Default Functionalities", "description": "This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with minimum configuration.", "category": "PDF Viewer" }, { "url":"custom-toolbar", "name": "Custom Toolbar", "description":"This demo for Essential JS 2 PdfViewer shows the default rendering of the PdfViewer with custom toolbar configuration.", "category": "PDF Viewer" diff --git a/src/pivot-table/filtering.ts b/src/pivot-table/filtering.ts index abc09f6d..78801b74 100644 --- a/src/pivot-table/filtering.ts +++ b/src/pivot-table/filtering.ts @@ -50,8 +50,6 @@ let Pivot_Data: IDataSet[] = (pivotData as any).data; fieldCnt--; } values = fieldCollections[fields[0]]; - valuesddl.dataSource = values; - valuesddl.dataBind(); isInitial = false; } for (let field of pivotObj.dataSourceSettings.filterSettings) { diff --git a/src/pivot-table/local.html b/src/pivot-table/local.html index e30d48da..07da3baf 100644 --- a/src/pivot-table/local.html +++ b/src/pivot-table/local.html @@ -1,6 +1,6 @@