zhipenghe / orgminer-arya Goto Github PK

In pull request #6, I use Vega-Lite to replace d3.js to draw diagram. However, Vega-Lite was directly coded in visualize.html throughout JavaScript, which is not elegant and reusable. Thus, I want to find some way to modularising the Vega-Lite visualisation.

The right panel has some terminologies that might make users confused. If it can use tooltips to explain these terminologies, the users would understand system easily.

Currently, Vega, Vega-Lite and Vega-Embed are used through online CDN.

<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

It would be better to deploy them offline.

In visualize page, Member Contribution diagram displays out the website border if restoring down the browser to small window. Also, when changing the scale of Windows in the system, the SVG diagrams would not be aligned with the scaling. It looks wired.

• Recode the size of svg to make sure them display suitable under different scales

Potential solution for resize automatically:

• use event listener to detect the resize of browser
• use function to get up-to-date width and height
• render the svg file under the new size

The right panel in OrgMiner-Arya would show the information for Global Conformance and Local Diagnostics. To make the website more beautiful, it is a good choice to create a button that can toggle to hide or show the side bar.

• Create new div elements in html parts
• Figure out the data types from js
• Plot a basic Vega-Lite diagram
• Configure the format of diagram

Update 1:

• research about how vega-embed works

Update 2:
use vega scripts or configurations to replace d3.js remove function
Keep using d3.js to remove svg