For most of the tags in the database, we'd like to be able to show a simple pie chart in the middle of an article, event text, vulnerability description, or tag text. By embedding this into our VHP markdown, we can refer to it in our writing templates and it'll update live on the client.
Details
Anywhere we have VHP-flavored markdown (i.e. vhp-markdown as a CSS class), we will process the special syntax :pie-tag:tag-shortname:, for example :pie-tag:bounty: and it'll render something that looks like these CSS pie charts or these done in Foundation.
Note that VHP-flavored markdown is rendered on the client, so this would be a Javascript fetch() back to the, e.g., /api/tags/bounty?percentage=true endpoint. We don't have the ?percentage=true parameter, so we'd have to add that.
We should make this a fixed em size - like 5em square, and display:block.
Todo list
[x] VHP markdown takes in the new syntax
[ ] Placeholder is rendered while fetch call takes place
[x] Add ?percentage=true option to the API
[x] Pie chart is rendered in client
[ ] If this works, before closing, write up similar issues for rendering Events per Vulnerability (for a given type of event) and a multi-category tag family syntax
[ ] If this works, before closing, write up an issue that identifies what taggers and articles we should update to include this
Motivation
For most of the tags in the database, we'd like to be able to show a simple pie chart in the middle of an article, event text, vulnerability description, or tag text. By embedding this into our VHP markdown, we can refer to it in our writing templates and it'll update live on the client.
Details
Anywhere we have VHP-flavored markdown (i.e.
vhp-markdownas a CSS class), we will process the special syntax:pie-tag:tag-shortname:, for example:pie-tag:bounty:and it'll render something that looks like these CSS pie charts or these done in Foundation.Note that VHP-flavored markdown is rendered on the client, so this would be a Javascript
fetch()back to the, e.g.,/api/tags/bounty?percentage=trueendpoint. We don't have the?percentage=trueparameter, so we'd have to add that.We should make this a fixed
emsize - like5emsquare, anddisplay:block.Todo list
?percentage=trueoption to the APICheck the following: