-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: validation set + chart + data (#16)
* fix(security): fixed some vulnerabilities Fixed a few vulnerabilities, bumped dependencies and added some security measures * feat: add validation sets * refactor(index): use validationSet * chore(package): change/add dependencies * refactor(index): updated test cases * chore(public): added an HTML chart * chore(labels): added 40 new instances * build(circleci): bump node to v10 * fix(index): minor tweak
- Loading branch information
1 parent
2b08af1
commit ad113b1
Showing
11 changed files
with
1,097 additions
and
142 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| _*.js | ||
| dist | ||
| dist | ||
| public/*.min.js |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
| <title>ac-learn charts</title> | ||
| </head> | ||
| <body> | ||
| <canvas id="labels" width="400" height="400"></canvas> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js" type="text/javascript"></script> | ||
| <!-- https://raw.githubusercontent.com/anomal/RainbowVis-JS/master/rainbowvis.js --> | ||
| <!-- <script src="rainbowvis.min.js" type="text/javascript"></script> --> | ||
| <script src="chart.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,184 @@ | ||
| /* eslint-disable no-console */ | ||
| /* global Chart */ | ||
| const ctx = document.getElementById('labels').getContext('2d') | ||
|
|
||
| // const loadData = async () => { | ||
| // try { | ||
| // const data = await Promise.all([ | ||
| // fetch('../src/categories.json').then(res => res.json(), console.error), | ||
| // fetch('../src/labels.json').then(res => res.json(), console.error), | ||
| // ]); | ||
|
|
||
| // return data //[categories, dataset] | ||
| // } catch (error) { | ||
| // console.log('Error downloading one or more files:', error); | ||
| // } | ||
| // } | ||
|
|
||
| // const rainbow = new Rainbow(); | ||
|
|
||
| // const init = async () => { | ||
| // const [CATEGORIES, DATASET] = await loadData(); | ||
| // rainbow.setNumberRange(1, CATEGORIES.length); | ||
| // rainbow.setSpectrum('red', 'blue'); //purple | ||
|
|
||
| // const colours = CATEGORIES.map((_, i) => `#${rainbow.colourAt(i)}`); | ||
|
|
||
| // /** | ||
| // * Organise a dataset for ChartJS. | ||
| // * @param {[...{label: string, category: string}]} data Dataset | ||
| // * @param {string} caption Caption of the chart | ||
| // * @returns {Object} Data for ChartJS | ||
| // */ | ||
| // const organize = (data, caption = 'Data') => { | ||
| // const res = { | ||
| // labels: CATEGORIES, | ||
| // datasets: { | ||
| // label: caption, | ||
| // data: new Array(CATEGORIES.length).fill(0), | ||
| // backgroundColor: colours | ||
| // } | ||
| // } | ||
|
|
||
| // data.forEach(instance => { | ||
| // const idx = CATEGORIES.indexOf(instance.category); | ||
| // res.datasets.data[idx]++; | ||
| // }); | ||
| // // console.log('dataset=', res.dataset.backgroundColor); | ||
| // return res; | ||
| // }; | ||
|
|
||
| // const data = organize(DATASET); | ||
| // console.log('data=', data); | ||
|
|
||
| // const chart = new Chart(ctx, { | ||
| // type: 'bar', | ||
| // data, | ||
| // options: { | ||
| // scales: { | ||
| // yAxes: [{ | ||
| // ticks: { | ||
| // beginAtZero: true | ||
| // } | ||
| // }] | ||
| // } | ||
| // } | ||
| // }); | ||
| // console.log(chart); | ||
| // } | ||
|
|
||
| const myChart = new Chart(ctx, { | ||
| type: 'bar', | ||
| data: { | ||
| labels: [ | ||
| 'blog', | ||
| 'bug', | ||
| 'business', | ||
| 'code', | ||
| 'content', | ||
| 'design', | ||
| 'doc', | ||
| 'eventOrganizing', | ||
| 'example', | ||
| 'financial', | ||
| 'fundingFinding', | ||
| 'ideas', | ||
| 'infra', | ||
| 'maintenance', | ||
| 'null', | ||
| 'platform', | ||
| 'plugin', | ||
| 'projectManagement', | ||
| 'question', | ||
| 'review', | ||
| 'security', | ||
| 'talk', | ||
| 'test', | ||
| 'tool', | ||
| 'translation', | ||
| 'tutorial', | ||
| 'userTesting', | ||
| 'video', | ||
| ], | ||
| datasets: [ | ||
| { | ||
| label: 'Categories', | ||
| data: [ | ||
| 1, | ||
| 17, | ||
| 2, | ||
| 47, | ||
| 0, | ||
| 8, | ||
| 17, | ||
| 0, | ||
| 1, | ||
| 1, | ||
| 0, | ||
| 23, | ||
| 5, | ||
| 26, | ||
| 197, | ||
| 11, | ||
| 4, | ||
| 1, | ||
| 5, | ||
| 1, | ||
| 6, | ||
| 0, | ||
| 8, | ||
| 13, | ||
| 1, | ||
| 0, | ||
| 0, | ||
| 0, | ||
| ], | ||
| backgroundColor: [ | ||
| '#ff0000', | ||
| '#ff0000', | ||
| '#f60009', | ||
| '#ec0013', | ||
| '#e3001c', | ||
| '#d90026', | ||
| '#d0002f', | ||
| '#c60039', | ||
| '#bd0042', | ||
| '#b3004c', | ||
| '#aa0055', | ||
| '#a1005e', | ||
| '#970068', | ||
| '#8e0071', | ||
| '#84007b', | ||
| '#7b0084', | ||
| '#71008e', | ||
| '#680097', | ||
| '#5e00a1', | ||
| '#5500aa', | ||
| '#4c00b3', | ||
| '#4200bd', | ||
| '#3900c6', | ||
| '#2f00d0', | ||
| '#2600d9', | ||
| '#1c00e3', | ||
| '#1300ec', | ||
| '#0900f6', | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| options: { | ||
| scales: { | ||
| yAxes: [ | ||
| { | ||
| ticks: { | ||
| beginAtZero: true, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }) | ||
|
|
||
| console.log(myChart) | ||
|
|
||
| // init(); |
Oops, something went wrong.