{"_id":"@cherie-xf/lit-chart","_rev":"3-cbbbf1fe60de10f3bcf7d0defc78ab96","name":"@cherie-xf/lit-chart","dist-tags":{"latest":"0.0.3"},"versions":{"0.0.1":{"name":"@cherie-xf/lit-chart","version":"0.0.1","main":"dist/lit-chart.es.js","exports":{".":"./dist/lit-chart.es.js"},"types":"types/lit-chart.d.ts","scripts":{"dev":"vite","build":"tsc && vite build","clean":"rm -rf node_modules","reinstall":"npm run clean && npm install","prepublishOnly":"npm run build"},"dependencies":{"@cherie-xf/lit-echarts":"1.0.2-alpha.2","lit-element":"^2.4.0"},"devDependencies":{"vite":"^2.3.8","typescript":"^4.3.2","@types/echarts":"^4.9.10"},"peerDependencies":{"echarts":"5.2.0"},"repository":{"type":"git","url":"git+https://github.com/cherie-xf/lit-chart.git"},"type":"module","publishConfig":{"access":"public"},"gitHead":"4e3837a64c6db270250d12305e610c6e40e10200","description":"The simplest and useful Web Component for DataSource based Echarts created[Apache Echarts](https://github.com/apache/echarts) ### Introduce","bugs":{"url":"https://github.com/cherie-xf/lit-chart/issues"},"homepage":"https://github.com/cherie-xf/lit-chart#readme","_id":"@cherie-xf/lit-chart@0.0.1","_nodeVersion":"16.10.0","_npmVersion":"8.2.0","dist":{"integrity":"sha512-8c+C52kuUsu50lynWOK09sIaOjhYPhzncd+CTMMhJ5neBgmEmr8VL5O8LNp+Y1FUzxW89yhXJkikid++neq7PA==","shasum":"ab78693db44dadc47b5a596c7efac2054398edc4","tarball":"https://registry.npmjs.org/@cherie-xf/lit-chart/-/lit-chart-0.0.1.tgz","fileCount":18,"unpackedSize":1046230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrye4CRA9TVsSAnZWagAAFU8P/1zhtJftaUIJ4i0jYIaS\nV56Yzc5IxFYApSYRYZSAeHV58qt0SSnwh67CIcMLneJnaWZjoOnAq17KKiko\nez2uVgZVGzMKcWSsFXRaq7kg9syEaYNWmnGntM5EBof5//fZnX5vlVIOKDYB\nt7y+lOVPmdYP0IfMt4DP/l2kUNilHe6nPPLygl58tIC/xu4Y8sTNY9KuezG/\nPsXcYQnMiqzlBoR28LPpgddHPFaN5c0K2b4gtGG5kC8WjpKlJrkTqzc/wtAd\n2CiW0mcQWhbtCk0DgrMkxPKqjhlnxWFFlA9NFMDapvyFF2wVl7OQdeEug4xo\nG1UJmeOshTOEU05Gw+x2WR3MzQqr5fPFOtpFhtfZs6hQ6ztkikdSWboYRiJZ\n81sPDslA6wlB9gn9p8gTVjZysm00toFTepVgrHvAjGVlp6nSPJu5UgyUUwFI\nGUJOUpnGm9VSu6DSHNKeejAIoqX2svDcgvowejlY4uftQ2bN0uI4McdaJTRb\nUXgAkT+jbwpOtcAlsBsiQRS5FbrdwZJPQlFBfgXUfzu47z8bJnNGqZR8dsCK\n+ZQkCGDukSbjziY9U70b9OKr07z0AKAWz54YUbswyuSOlrifDHzynkOeJYYr\nWtFVm28V3bqpuF8ExbAKImglJ35u11G7OEJbje34MafWeoJxlG6CZbUncwUh\nGpD1\r\n=1AXY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhSasxQzBXUW0HpW+fCSICMmeeZrPjhyEwnH5kiYy8TQIhAKnqwlV4C+uR3ptB8kJm3dMurynupTtpJjcNyYvYNT9k"}]},"_npmUser":{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"},"directories":{},"maintainers":[{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lit-chart_0.0.1_1638868919964_0.11520377145976779"},"_hasShrinkwrap":false},"0.0.2":{"name":"@cherie-xf/lit-chart","version":"0.0.2","main":"dist/index.es.js","exports":{".":"./dist/index.es.js"},"types":"dist/index.d.ts","scripts":{"dev":"vite","lib":"tsc  --emitDeclarationOnly  --outDir dist","build":"tsc && vite build && npm run lib","clean":"rm -rf node_modules","reinstall":"npm run clean && npm install","prepublishOnly":"npm run build"},"dependencies":{"@cherie-xf/lit-echarts":"1.0.2-alpha.2","lit-element":"^2.4.0"},"devDependencies":{"vite":"^2.3.8","typescript":"^4.3.2","@types/echarts":"^4.9.10"},"peerDependencies":{"echarts":"5.2.0"},"repository":{"type":"git","url":"git+https://github.com/cherie-xf/lit-chart.git"},"type":"module","publishConfig":{"access":"public"},"gitHead":"954a29ba5a2f2a1a705cf5274903a47f2cac2a61","description":"The simplest and useful Web Component for DataSource based Echarts created[Apache Echarts](https://github.com/apache/echarts) ### Introduce","bugs":{"url":"https://github.com/cherie-xf/lit-chart/issues"},"homepage":"https://github.com/cherie-xf/lit-chart#readme","_id":"@cherie-xf/lit-chart@0.0.2","_nodeVersion":"16.10.0","_npmVersion":"8.2.0","dist":{"integrity":"sha512-4M27TtcB4udN9NETN+WACSE8p5j4FFMfVXPgMqxGKHKPmglA3ZJy/qsmoRq4VmpqvNsRiVxBXbZ1GEKVhM5feQ==","shasum":"f75be3cd404fb44f123c9ab14098a7a6a32ff511","tarball":"https://registry.npmjs.org/@cherie-xf/lit-chart/-/lit-chart-0.0.2.tgz","fileCount":16,"unpackedSize":1045749,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsz6yCRA9TVsSAnZWagAAihsP/AodYM0p5mPfciY+2VQK\npjdGYfumczxO2wGKYQnykBkYvo+eHKzoRDdikOuoF2Pv1KlNClTKvebmUn4S\ny/gkWPKiOUghmIIdhf1zLNsSe32a7pJkbogQ//ts9VW3fBZxp8VlOlrxPN0L\nA26lnV1QSTElikis/xMT4g7kkoCDlQLuFsGSJqFq+r6DJzciHoWPBDr7aAu+\nYbluSccVnCeHXIM1ZLqJlXok629ze25S7D0eBadv/BlwKjdEViA/8j/p463l\nfJ0wUiHht2m9pMNiiA4FZkgWNOHgnpiN/9B1D+rqAEYqRV3PV8j/0pMkZZ73\n0IV+V57wsjAWecUpmfX3ZyUpn2zuc2OwRLdCTUlONTL7qw142JbLjgdmJg9D\nUtAEeMuPNPqwGjA+alM2ByRI8bvCXgGwjt34UV3ikNcGPDCIZ4qmTnpvGmQ+\nBePiN2aJkqTRxtm+EtWZ09L7G0KA7tX/ZddsRolPlC7m+87P7y1IhJRUIn1k\nQjg6/a4tVUxJZ+CQO/555UUk2ObJHh++JyhF7nFwfFIxmTJVNZTQrRsSnQfM\n0K60Mr/y6afss+LelgOHXNZjYKh0yvXqQ1GwHM1EklrE/uoHNxIDzCjVW+3g\nEKRVndl39jMtGuDHFuQz7mkz9OlqGn60KjK+3fj9X41nVF3DD10NboL4APZV\nY3/k\r\n=q8Zf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID50a3XIij6DYG+KeqM9IgF90JyZELWhvCZNUgqbaRi/AiBIq3Pvo95V4VeToGzKFPKBic2KQH9RtMNeusoaZYAkug=="}]},"_npmUser":{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"},"directories":{},"maintainers":[{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lit-chart_0.0.2_1639136946619_0.06446083922401824"},"_hasShrinkwrap":false},"0.0.3":{"name":"@cherie-xf/lit-chart","version":"0.0.3","main":"dist/lit-chart.es.js","exports":{".":"./dist/lit-chart.es.js"},"types":"types/lit-chart.d.ts","scripts":{"dev":"vite","lib":"tsc  --emitDeclarationOnly  --outDir dist","build":"tsc && vite build && npm run lib","clean":"rm -rf node_modules","reinstall":"npm run clean && npm install","prepublishOnly":"npm run build"},"dependencies":{"@cherie-xf/lit-echarts":"^1.0.3","fast-deep-equal":"^3.1.3","lit":"^2.1.1"},"devDependencies":{"typescript":"^4.5.4","vite":"^2.7.13"},"peerDependencies":{"echarts":"^5.2.2"},"repository":{"type":"git","url":"git+https://github.com/cherie-xf/lit-chart.git"},"type":"module","publishConfig":{"access":"public"},"gitHead":"675c70b9b299d1fd2e0fa5a6c70ee808dd24eeae","description":"The simplest and useful Web Component for DataSource based ECharts(5.0.0^) [Apache Echarts](https://github.com/apache/echarts) ### Introduce","bugs":{"url":"https://github.com/cherie-xf/lit-chart/issues"},"homepage":"https://github.com/cherie-xf/lit-chart#readme","_id":"@cherie-xf/lit-chart@0.0.3","_nodeVersion":"16.10.0","_npmVersion":"8.2.0","dist":{"integrity":"sha512-eNruv0kiGiZOsA/REe0eb6qb5VoWLwc0xBY6i3Zvf4IUggpqB22/xkQf8JB0xi0ybn/zkEZ3ea2hSCesjt2M8w==","shasum":"f8be6fa50ec8e9f0670c60467f5eb6b02682af13","tarball":"https://registry.npmjs.org/@cherie-xf/lit-chart/-/lit-chart-0.0.3.tgz","fileCount":28,"unpackedSize":2488460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh+cZICRA9TVsSAnZWagAA5mYP/012jJUeNOZaLnZrTlTS\nPejrjkqLnHFWGoI2H6pQ4ULmh4noR/AsrhweazhyofI5F42Rnf2EKmKLTXBs\nLnd0rpHhTuPwdXvXEDFPrlesZMIS7eSmnKGjmOLVzpZhU23R6avooQyTDqB8\ntHMutgSSFNXYnQqM/ITIRkTcdajOH9uxjliouoi3LoFMMyTj77SWf2WcjX92\nETWpZNRJeMfomu7/hqMJYcplItBY6EQXaf2oWCNdPto8F1K7ze6P+0E4KVyK\n4XuDVtDffYcxNz4Fc1bXmeXdAQdOx8QocDJfEglX0fDrDYETjCECAK8LQwgp\nrUZLVHCS9kfNg36mIwHaKT96uQrqVclgXHGNVPFb0LEOKzyQUYk+McxGq28u\nUgb70GSgMC7ifuCwBKj4NtXTR40mCo/e9b9aek/EJDbcqNuib0s9ZuXiaZjR\n9G+lvslbXBQmlkB4W3+E5kbT8FCwiQwtbsGtmtIxz4w4FTpdh8ZmYggxP9UL\nGeaTWgQYV/NKBe5DWRTPRg949KBuihiIEPKxql/9/M5Hfz+LSBEPdTa9rXk0\nFew+OvF88uXRIQIt7nFmuqxC2fsLFh6dkx0Y7e9iO7g/9HbQiJslUyyA/hGN\nXQAwf9ebWZIL5ra4UG7Bc8g6sVXJc5pA/EgrFxUfxoEDvQBi9FfqU9Tw/xe6\nsFDi\r\n=5yr2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIJfJ7f+8dnv5vCctHQZiMjloWyI5NhwAlkF76imEZOAiEAqyJJRCwfXwSpNlmYkbhqzutfALkM9QVnS7QBCqBQK8g="}]},"_npmUser":{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"},"directories":{},"maintainers":[{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lit-chart_0.0.3_1643759175840_0.28451833459697795"},"_hasShrinkwrap":false}},"time":{"created":"2021-12-07T09:21:59.876Z","0.0.1":"2021-12-07T09:22:00.239Z","modified":"2022-04-04T22:39:27.028Z","0.0.2":"2021-12-10T11:49:06.817Z","0.0.3":"2022-02-01T23:46:16.273Z"},"maintainers":[{"name":"cherie-xf","email":"cherie.x.fu@gmail.com"}],"description":"The simplest and useful Web Component for DataSource based ECharts(5.0.0^) [Apache Echarts](https://github.com/apache/echarts) ### Introduce","homepage":"https://github.com/cherie-xf/lit-chart#readme","repository":{"type":"git","url":"git+https://github.com/cherie-xf/lit-chart.git"},"bugs":{"url":"https://github.com/cherie-xf/lit-chart/issues"},"readme":"# lit-chart\n\nThe simplest and useful Web Component for DataSource based ECharts(5.0.0^) [Apache Echarts](https://github.com/apache/echarts)\n### Introduce\n\n- Components are built with [LitElement](https://lit-element.polymer-project.org/)\n- Code bunlder and dev server are provided by [Vite](https://vitejs.dev/guide/)\n\n### Install\n\nOnce you've cloned the repo, run the following command.\n\n```bash\nnpm install @cherie-xf/lit-chart\n```\n\n## Useage Examples\n\n### Simple Examples\nIt's recommended to use dataset to brings convenience in data management separated with styles and enabq data reuse by different series types.\n```html preview\n<nw-chart id=\"line-chart\"></nw-chart>\n<script>\n  let type = 'line';\n  let theme = 'dark';\n  const dataset = {\n    source: [\n      ['users', 'Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],\n      ['user1', 120, 132, 101, 134, 90, 230, 210],\n      ['user2', 220, 182, 191, 234, 290, 330, 310],\n      ['user3', 150, 232, 201, 154, 190, 330, 410],\n      ['user4', 320, 332, 301, 334, 390, 330, 320],\n      ['user5', 820, 932, 901, 934, 1290, 1330, 1320]\n    ]\n  };\n  const dom = document.querySelector('#line-chart');\n  dom.type = type;\n  dom.theme = theme;\n  dom.chartDataset = dataset;\n  dom.seriesLayoutBy = 'row';\n</script>\n<style>\n  #line-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nTrantional way to set data in option\n```html preview\n<nw-chart id=\"line-chart-style\"></nw-chart>\n<script>\n  let type = 'line';\n  let theme = 'dark';\n  const chartData = {\n    xAxis: {\n      data: [...Array(31).keys()]\n    },\n    series:  [{\n        name: \"number of views\",\n        type: \"line\",\n        itemStyle: {\n            color: \"#6f7de3\",\n        },\n        markPoint: {\n            label: {\n                      color: '#fff'\n            },\n            data: [{\n                type: 'max',\n\n            }, {\n                type: 'min',\n            }]\n        },\n        data: [\n            509, 917, 2455, 2610, 2719, 3033, 3044, 3085, 2708, 2809, 2117,2000,1455,1210,719,\n            733,944,2285,2208,3372,3936,3693,2962,2810,3519,2455,2610,2719,2484,2078\n        ],\n    }, {\n        name: \"number of order\",\n        type: \"line\",\n        itemStyle: {\n            color: \"#c257F6\",\n        },\n        markPoint: {\n            label: {\n                  color: '#fff'\n            },\n            data: [{\n                type: 'max',\n\n            }, {\n                type: 'min',\n            }]\n        },\n        data: [\n            2136,3693,2962,3810,3519,3484,3915,3823,3455,4310,4019,3433,3544,3885,4208,3372,\n            3484,3915,3748,3675,4009,4433,3544,3285,4208,3372,3484,3915,3823,4265,4298\n        ]\n    }, ]\n  }\n  const dom = document.querySelector('#line-chart-style');\n  dom.type = type;\n  dom.theme = theme;\n  dom.chartData = chartData;\n</script>\n<style>\n  #line-chart-style{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nShow No Data\n\n```html preview\n<nw-button id=\"no-data-button\"> Click to toggle show No Data</nw-button>\n<nw-chart id=\"no-data-chart\"></nw-chart>\n<script>\n  let noData = false;\n  const dataset = {\n    source: [\n        ['app','sessions'],\n        ['Video/Audio',\t1103],\n        ['General.Interest',\t839],\n        ['Web.Client',\t140],\n        ['Collaboration',\t298],\n        ['Update',\t1099],\n        ['Web.Others',\t97],\n        ['Social.Media',\t1474],]\n  };\n  const dom = document.querySelector('#no-data-chart');\n  dom.type = 'donut';\n  dom.chartDataset = dataset;\n  const sumNum = dataset.source.slice(1).reduce((val, row) => val += Number(row[1]), 0)\n  const titleText = 'Sessions by Applications'\n  dom.legendFormat = '{percent} {name} ({value|number})';\n  dom.pieTitle = {\n    text: '{a|' + sumNum + '}\\n{b|' + titleText + '}',\n    textStyle: {\n      rich: {\n          a: {\n              fontSize: 18,\n              color: '#999',\n              fontWeight: '600',\n          },\n          b: {\n              fontSize: 10,\n              color: '#999',\n              padding: [5, 0]\n          }\n      }\n    }\n  }\n  const onDataBtn = document.querySelector('#no-data-button');\n  onDataBtn.addEventListener('click', (e) => {console.log(e)\n    noData = !noData;\n    dom.noData = noData;\n    if(!noData){\n      dom.chartDataset = Object.assign({}, dataset);\n    }\n  });\n</script>\n<style>\n  #no-data-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nBar chart Horizontal\n\n```html preview\n<nw-button id=\"horizontal-button\"> Click to toggle horizontal</nw-button>\n<nw-chart id=\"bar-horizontal-chart\"></nw-chart>\n<script>\n  const dataset = {\n        source: [\n            ['product','score'],\n            ['Matcha Latte',89.3 ],\n            ['Milk Tea',57.1 ],\n            ['Cheese Cocoa',74.4 ],\n            ['Cheese Brownie',50.1 ],\n            ['Matcha Cocoa',89.7 ],\n            ['Tea',68.1 ],\n            ['Orange Juice',19.6 ],\n            ['Lemon Juice',10.6 ],\n            ['Walnut Brownie',32.7 ]\n        ]\n  };\n  const dom = document.querySelector('#bar-horizontal-chart');\n  const horizontalBtn = document.querySelector('#horizontal-button');\n  let isHorizontal = true;\n  horizontalBtn.addEventListener('click', (e) => {console.log(e)\n    isHorizontal = !isHorizontal;\n    dom.barHorizontal = isHorizontal;\n  });\n  dom.barHorizontal = isHorizontal;\n  dom.type = 'bar';\n  dom.chartDataset = dataset;\n</script>\n<style>\n  #bar-horizontal-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nLenged Format\n\n```html preview\n<nw-chart id=\"legend-format-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source: [\n        ['app','bandwidth'],\n        ['Video/Audio',\t4369853248],\n        ['General.Interest',\t320065743],\n        ['Web.Client',\t296712124],\n        ['Collaboration',\t121727840],\n        ['Update',\t120717549],\n        ['Web.Others',\t119950230],\n        ['Social.Media',\t104562104],\n        ['Storage.Backup',\t69489727],\n        ['Email',\t67417552],\n        ['Network.Service',\t47828200],\n        ['Proxy',\t32291625],\n        ['Business',\t3926503],\n        ['Botnet',\t2048437],\n        ['Remote.Access',\t1937289],\n        ['Cloud.IT',\t910802],\n        ['VoIP',\t103774]]\n  };\n  const dom = document.querySelector('#legend-format-chart');\n  dom.type = 'donut';\n  dom.chartDataset = dataset;\n  dom.legendFormat = '{percent} {name} ({value|bytes})';\n</script>\n<style>\n  #legend-format-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nLabel Format\n\n```html preview\n<nw-chart id=\"label-format-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source: [\n        ['app','bandwidth'],\n        ['Video/Audio',\t4369853248],\n        ['General.Interest',\t320065743],\n        ['Web.Client',\t296712124],\n        ['Collaboration',\t121727840],\n        ['Update',\t120717549],\n        ['Web.Others',\t119950230],\n        ['Social.Media',\t104562104],\n        ['Storage.Backup',\t69489727],\n        ['Email',\t67417552],\n        ['Network.Service',\t47828200],\n        ['Proxy',\t32291625],\n        ['Business',\t3926503],\n        ['Botnet',\t2048437],\n        ['Remote.Access',\t1937289],\n        ['Cloud.IT',\t910802],\n        ['VoIP',\t103774]]\n  };\n  const dom = document.querySelector('#label-format-chart');\n  dom.type = 'bar';\n  dom.barHorizontal = false;\n  dom.chartDataset = dataset;\n  dom.axisLabelFormat = 'bytes';\n</script>\n<style>\n  #label-format-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nPie Centre Title\n\n```html preview\n<nw-chart id=\"pie-title-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source: [\n        ['app','sessions'],\n        ['Video/Audio',\t1103],\n        ['General.Interest',\t839],\n        ['Web.Client',\t140],\n        ['Collaboration',\t298],\n        ['Update',\t1099],\n        ['Web.Others',\t97],\n        ['Social.Media',\t1474],]\n  };\n  const dom = document.querySelector('#pie-title-chart');\n  dom.type = 'donut';\n  dom.chartDataset = dataset;\n  const sumNum = dataset.source.slice(1).reduce((val, row) => val += Number(row[1]), 0)\n  const titleText = 'Sessions by Applications'\n  dom.legendFormat = '{percent} {name} ({value|number})';\n  dom.pieTitle = {\n    text: '{a|' + sumNum + '}\\n{b|' + titleText + '}',\n    textStyle: {\n      rich: {\n          a: {\n              fontSize: 18,\n              color: '#999',\n              fontWeight: '600',\n          },\n          b: {\n              fontSize: 10,\n              color: '#999',\n              padding: [5, 0]\n          }\n      }\n    }\n  }\n</script>\n<style>\n  #pie-title-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nTwo Directions Line Chart\n\n```html preview\n<nw-chart id=\"two-driections-line-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source: [\n      ['hodex',\t'traffic_out',\t'traffic_in'],\n      ['2021-08-04 12:00',\t882631069,\t2409598028],\n      ['2021-08-05 12:00',\t599132216,\t2034742409],\n      ['2021-08-05 13:00',\t1013432572,\t2412315785],\n      ['2021-08-05 15:00',\t323660103,\t1465572402],\n      ['2021-08-05 16:00',\t1107409869,\t2343007502],\n      ['2021-08-07 17:00',\t596405933,\t2020447260],\n      ['2021-08-07 18:00',\t1016775704,\t2428736055],\n    ]\n  };\n  const dom = document.querySelector('#two-driections-line-chart');\n  dom.type = 'twoDirectionsArea';\n  dom.chartDataset = dataset;\n  dom.axisLabelFormat= 'bytes';\n</script>\n<style>\n  #two-driections-line-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nHeatmap Chart\n\n```html preview\n<nw-chart id=\"heatmap-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source:[\n      ['Day', 'City', 'Number'],\n      ['Mon', 'BeiJing', 1000],\n      ['Mon', 'HangZhou', 700],\n      ['Tue', 'ChengDu', 500],\n      ['Tue', 'ShenZheng', 200],\n      ['Tue', 'ShangHai', 400],\n      ['Wen', 'ChangChun', 100],\n      ['Wen', 'HangZhou', 800],\n      ['Wen', 'ShangHai', 300],\n      ['Thu', 'ChengDu', 800],\n      ['Fri', 'NaiJing', 300],\n    ]\n  };\n  const dom = document.querySelector('#heatmap-chart');\n  dom.type = 'heatmap';\n  dom.chartDataset = dataset;\n  const valArr = dataset.source.slice(1).map(arr=>arr[2]);\n  const max = Math.max.apply(null, valArr);\n  dom.visualMap= {\n    min: 0,\n    max: max,\n    calculable: true,\n    orient: 'horizontal',\n    left: 'center',\n    bottom: '2%'\n  };\n</script>\n<style>\n  #heatmap-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nRadar Chart\n\n```html preview\n<nw-chart id=\"radar-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source:[\n      ['name','Sales', 'Administration', 'Information Technology', 'Customer Support', 'Development', 'Marketing'],\n      ['Allocated Budget',4200,3000,20000, 35000, 50000, 18000],\n      ['Actual Spending',5000,1400, 28000, 26000, 42000, 21000],\n    ]\n  };\n  const dom = document.querySelector('#radar-chart');\n  dom.type = 'radar';\n  dom.chartDataset = dataset;\n  dom.labelFormat = 'bignumber'\n</script>\n<style>\n  #radar-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\nSankey Chart\n\n```html preview\n<nw-chart id=\"sankey-chart\"></nw-chart>\n<script>\n  const dataset = {\n    source: [\n      ['summary', 'appcat', 'app_group', 'bandwidth'],\n      ['External', 'unscanned', 'HTTPS', '13348980042'],\n      ['External', 'Video%2FAudio', 'YouTube', '8876117511'],\n      ['External', 'unscanned', 'DNS', '2194491065'],\n      ['External', 'unscanned', 'HTTP', '1800715704'],\n      ['External', 'unscanned', 'RSH', '674078138'],\n      ['External', 'Web.Client', 'HTTP.BROWSER', '476648745'],\n      ['External', 'General.Interest', 'Google.Services', '230378445'],\n      ['External', 'General.Interest', 'Google.Maps', '190646528'],\n      ['External', 'unscanned', 'SYSLOG', '170477268'],\n      ['External', 'General.Interest', 'Google.Accounts', '139881690'],\n      ['External', 'Web.Client', 'HTTPS.BROWSER', '132308701'],\n      ['External', 'Video%2FAudio', 'Vimeo', '128472913'],\n      ['External', 'unscanned', 'FTP', '124228574'],\n      ['External', 'General.Interest', 'Google.Ads', '70378911'],\n      ['External', 'General.Interest', 'Google.Search', '24753216'],\n      ['External', 'unscanned', 'tcp%2F873', '18698936'],\n      ['External', 'unscanned', 'TELNET', '12393826'],\n    ]\n  };\n  const dom = document.querySelector('#sankey-chart');\n  dom.type = 'sankey';\n  dom.chartDataset = dataset;\n  dom.labelFormat = 'bytes'\n</script>\n<style>\n  #sankey-chart{\n    width: 100%;\n    height: 400px;\n  }\n</style>\n```\n\n### Complex Examples\nDraw a simple chart by just given type and aync loading data\n```html preview\n<nw-button id=\"data-button\"> Click to load data</nw-button>\n<nw-button id=\"theme-button\"> Click to toggle theme</nw-button>\n<div class=\"type-selector\">\n  <span>Select chart type:</span>\n  <nw-dropdown id=\"type-dropdown\">\n    <nw-button slot=\"trigger\" caret><span>line</span></nw-button>\n    <nw-menu>\n      <nw-menu-item value=\"line\">line</nw-menu-item>\n      <nw-menu-item value=\"bar\">bar</nw-menu-item>\n      <nw-menu-item value=\"pie\">pie</nw-menu-item>\n      <nw-menu-item value=\"donut\">donut</nw-menu-item>\n    </nw-menu>\n  </nw-dropdown>\n</div>\n\n<nw-chart id=\"my-chart\"></nw-chart>\n<script>\n  let type = 'line';\n  let theme = 'dark';\n  const dataset = {\n    source: [\n      ['product', '2015', '2016', '2017'],\n      ['Matcha Latte', 43.3, 85.8, 93.7],\n      ['Milk Tea', 83.1, 73.4, 55.1],\n      ['Cheese Cocoa', 86.4, 65.2, 82.5],\n      ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n  };\n  const dom = document.querySelector('#my-chart');\n  const databtn = document.querySelector('#data-button');\n  const themebtn = document.querySelector('#theme-button');\n  const typedropdown = document.querySelector('#type-dropdown');\n  dom.type = type;\n  dom.theme = theme;\n  databtn.addEventListener('click', (e) => {console.log(e)\n    dom.chartDataset = dataset;\n  });\n  themebtn.addEventListener('click', (e) => {console.log(e)\n    theme = theme ==='light' ? 'dark' : 'light';\n    dom.theme = theme;\n  });\n  typedropdown.addEventListener('nwSelect', (e) => {console.log(e)\n    type = e.detail.item.value;\n    dom.type = type;\n    let triggerDom = typedropdown.querySelector('[slot=\"trigger\"]')\n    triggerDom.innerText = e.detail.item.value\n  });\n</script>\n<style>\n  #my-chart{\n    width: 100%;\n    height: 400px;\n  }\n  .type-selector {\n    margin-left: 20px;\n    display: inline;\n  }\n</style>\n```\n### Events & Action Examples\nBelow displays how to highlight each sector of pie chart in turn through dispatchAction\n```html preview\n<nw-chart id=\"my-chart2\"></nw-chart>\n<script>\n  let type = 'pie';\n  let theme = 'dark';\n  let app = {\n    currentIndex: -1\n  };\n  const dataset = {\n    source: [\n      ['product', '2015', '2016', '2017'],\n      ['Matcha Latte', 43.3, 85.8, 93.7],\n      ['Milk Tea', 83.1, 73.4, 55.1],\n      ['Cheese Cocoa', 86.4, 65.2, 82.5],\n      ['Walnut Brownie', 72.4, 53.9, 39.1]\n    ]\n  };\n  const dom = document.querySelector('#my-chart2');\n  dom.type = type;\n  dom.theme = theme;\n  dom.chartDataset = dataset;\n  setInterval(function () {\n    var dataLen = dataset.source.length;\n    dom.dispatchAction({\n        type: 'downplay',\n        seriesIndex: 0,\n        dataIndex: app.currentIndex\n    });\n    app.currentIndex = (app.currentIndex + 1) % dataLen;\n    dom.dispatchAction({\n        type: 'highlight',\n        seriesIndex: 0,\n        dataIndex: app.currentIndex\n    });\n    dom.dispatchAction({\n        type: 'showTip',\n        seriesIndex: 0,\n        dataIndex: app.currentIndex\n    });\n}, 1000);\n\n</script>\n<style>\n  #my-chart2{\n    width: 100%;\n    height: 400px;\n  }\n  .type-selector {\n    margin-left: 20px;\n    display: inline;\n  }\n</style>\n```","readmeFilename":"README.md"}