Using Vue to build a Github “visual big data platform” -GitDataV, design and development sharing

If you are interested, you can click here to visit the simple: GitDataV website (currently packaged with some bugs, but not affecting normal use) and check out your Github “big Data analysis” details.

It is recommended to download the GitDataV (Github source code) project, run the project on the local machine, open the web page in the local browser, and generate your own “big data analysis” details.

It shows you the data you have on Github: Personal information (✔), warehouse stars (✔), number of language classification (✔) public warehouse warehouse number (✔), fans (✔), follow the quantity (✔), warehouse data (✔), recently your operation (✔), fans (✔) recently, following the recent (✔), the latest information (✔), the upper left arrow small eggs: ✔ Full screen, international language switch (in development…) , skin switch (under development..)

Looking good (no designer, as their own front-end design, aesthetic [Chou] so), a little feeling (LA) feel (ji). Next, I will start from the following points: requirements analysis, development preparation, functional design and code implementation. I will share my independent design, development and construction of this “visual big data platform” gadget:

Demand analysis

In the age of information and data, everyone is sensitive to data. For your data on Github, in addition to the data given to you by the official website of Github, you can actually see more data. At that time, MY original intention was to obtain useful data in Github through users’ input of their Own Github account. Portal in the front page in the last, interactive applications and tip came across the original lot provides a developer API, address portal (https://developer.github.com/v3/)

Point into a look to discover a new continent, ecstatic of MY feeling had a whim, oneself idea or oneself come true, open make!

The development of preparation

Read the GitHub developer documentation

V3 API documentation links, v3 API official tutorial

First look at making interface can access any data, do a simple test me first by my own account (hongqingcao) to request/users interface (https://api.github.com/users/hongqingcao) to get the following data, abut. From the top down, so comprehensive, even I forgot my GitHub registration time, there are

Of course, if you don’t bother to read the official documentation, there are actually some people who summarize the Github API calls.

2. Understand visuality-related design

First entered Baidu to understand a ha, at first glance, basically are slightly dark blue tone, of course, not only so “big data data visualization design principles”, I also have to see, specific information interested students can study.

Alibaba’s DataV data visualization is relatively 6, I am confident that baidu found the “Double 11 large screen display” selling point ah (mentioned baidu, Ali, haha).

After reading this, to be honest, I have a spectrum of data visualization design in my mind. Without a designer, the front end can play well. Here’s a disclaimer: the background image of the whole project is from 17 Materials and other online platforms (not for commercial use).

Technology selection and knowledge preparation

Since the last article was “carried away” by various parties, I will continue to use Vue to do things. Here I think about the whole project (recall the function) and sort out the following technical stacks and knowledge points:

1. Vue (VUE project construction, flexible use of instructions, component packaging, communication between components)

Vue-router (Route preparation knowledge: Hash and history distinction, dynamic routing, route switching parameter)

3. Network request AXIOS (encapsulate AXIOS yourself, cross-domain proxy configuration)

4, Visual tools Echarts, V-Charts processing graphics (control size, layout, color, accepted data format)

5. Es6 (Basic syntax, e.g. map traversal of arrays, object and array conversions, etc.)

6. SCSS (Configuration, Syntax)

7, Bootstrap, iconfont (for no designer, as a front-end design capacity is limited, so reference these two)

8. Packing line (some pits)

All right, now that we’re done with the development, we’re equipped with the skills, we’re strapped in, and we’re on our way

Function design and code implementation

1. Build projects

Directly build with scaffolding, install and configure axios, Echarts, V-Charts, SCSS and bootstrap as needed. For details, you can find related resources on the Internet for axios cross-domain proxy configuration. Mainly look at the SRC file structure I planned, in fact, I have packaged many common components. I won’t go into details here

├─ SRC source directory │ ├── SRC source directory │ ├── assets │ ├── app.vue Root Component │ ├── public Component directory │ │ ├─ assets Resource directory, │ │ ├─ ├─ exercises │ ├─ routes │ ├─ all the resources in this section will be built by wabpack ├─ ├─ data │ ├─ PDF ├─ PDFCopy the code

Second, entrance homepage design

Look at the renderings first (no designer, a front-end aesthetic)

Main functions:

1. Terms of Service pop-up box, here I encapsulated a component of the home page, using bootstrap style. Here there is a parent-child component communication

The home page (parent component) references the “Terms of Service pop-up” component

<pmodal :isShow="isShow" @sayhidden="sayhidden" v-if="isShow"/>Copy the code

Home (parent component) control the methods of the popbox

showpm(){
    	this.isShow = true
    },
    sayhidden(sayhidden){
    	this.isShow = sayhidden
    }Copy the code

The “Terms of Service pop-up” component receives the command of whether to display the pop-up on the home page, and then sends the “close” state to the home page through $emit click close

export default {
  name: 'pmodal',
  props: {
    isShow: null,
  },
  data () {
      return {
        sayhidden: false
      }
  },
  methods:{
  	closebtn(){
  		this.$emit('sayhidden', this.sayhidden)
  	}
  }
}
Copy the code

2, input box form validation, here are two main judgment, when input box is empty point “generate” button, can’t be empty, when user input prompt disappear, click on the submit request interface and then put the information feedback, if the user is flawed, prompted to input, if correct, with parameters to “big data visualization” page

Main code:

  generate(username){
    	let name = this.username
    	let self = this
    	if(name.length <= 0){
    		this.namelg = true
    		return
    	}else{
	        this.$axios.get('/api/users/'+ name).then((response)=>{
          	    let res = JSON.parse(JSON.stringify(response))
          	    if(res.status === 200){
          	     	this.$router.push({ 
          	     		name: 'data',
          	     		params: { user: name }
          	     	})
			      }   
			      return
		    	}).catch(err => {
		    		this.nousename = truethis.errname = name console.log(err.message); }}})Copy the code

3. Home page background and particle dynamic effect (already mentioned in the previous article) are omitted here

Ii. Big data page design and development

First take a look at the renderings (no designer, a front-end aesthetic), here I use you yuxi big account to query the data instance (salute to Vue author), you big data bar, worship face. Img

Ok, my design can be divided into three parts: upper and middle (left and right).

[1] Above is basically a title, there is an “egg” in the upper left corner (more on later)

[2] Middle – left part: personal information, warehouse stars, warehouse language classification

[3] Middle-middle part: the number of open warehouse, the number of fans, the number of followers, warehouse data, your recent operation

[4] Center-right: recent fans, recent followers, latest information

It is worth mentioning that each function on my side is a module component. First of all, the box with the border is a component box, the chart is a component box, the quantity data module is a component box, and the fan and follow is a component box

Now I will talk about it according to the functional modules:

1. Personal information, number of public warehouse, number of fans, number of followers: personal profile picture, user name, joining time. Which can be directly obtained through the interface (https://api.github.com/users), and then directly put up with respect to OK

2 stars, warehouse, warehouse language classification, here I use is an interface (https://api.github.com/users/ username/repos), for example, I side with his account of the first data

You’ll notice that there are 93 lines of data in each row, and you’ll get your head in knots, but all you need here is the name of the warehouse and the number of stars you got and the language type.

This time you have to study the v – charts the website (for experienced students skip), take a look at it to accept what type of object data, and then you according to his request to assemble it can identify the data format, it can be created to visual chart, looked at it and the data format is basically like this, see here, You can also learn how to set the appearance and size of V-Charts. Legend, Grid and Series are most frequently used in my summary.

<script>
  export default {
    data: function () {
      return {
        chartData: {
          columns: ['date'.'Access user'.'Order user'.'Order rate'],
          rows: [
            { 'date': '1/1'.'Access user': 1393, 'Order user': 1093, 'Order rate': 0.32}, {'date': 'half'.'Access user': 3530, 'Order user': 3230, 'Order rate': 0.26}, {'date': 'one third'.'Access user': 2923, 'Order user': 2623, 'Order rate': 0.76}, {'date': 'quarter'.'Access user': 1723, 'Order user': 1423, 'Order rate': 0.49}, {'date': '1/5'.'Access user': 3792, 'Order user': 3492, 'Order rate': 0.323}, {'date': '1/6'.'Access user': 4593, 'Order user': 4293, 'Order rate': 0.78}]}}}} </script>Copy the code

So you pull away together

  data () {
  	 this.extend = {
        legend:{
        	 textStyle: {color: '#fff'},
        },
        grid: {
            textStyle: {
                color: "#fff"
            }
          },
          series:{
          	radius:['0'.'40%'],
          	center: ['50%'.'50%']}}return {
      personalD:{},
      starData:{
		  columns: ['reposName'.'getStars'],
		  rows: [
		  ]
		},
      noStarData:false,
      languageData:{
		  columns: ['lang'.'number'],
		  rows: [
		  ]
		},
      nolanguageData:false}}Copy the code

Note: starData and languageData, respectively, are warehouse stars cases, warehouse language classification initialization data objects

Here is the code to request the data and comb through the repository name and the number of stars and language types obtained

getData(username){
  	let comUrl = "https://api.github.com/users/"
    	axios.get(comUrl + username + '/repos').then((response)=>{
      	    let data = JSON.parse(JSON.stringify(response.data))
      	    if(data.length<1){
	    		this.noStarData = true
	    	}else{
	    		let rowdata = []
	    		let languages = {}
		        for(var i=0; i<data.length; I++){// warehouse and warehouse starlet reposName = data[i].name
	        		let getStars = data[i].stargazers_count
	        		letObj = {reposName:reposName, getStars:getStars} rowdata.push(objlet langData =data[i].language
                    if (langData) {
			            if (langData in languages) {
			                languages[langData]++;
			            }else{ languages[langData] = 1; Rows = rowData //console.log(this.stardata.rows) // Reassemble the language into objectslet objL = JSON.parse(JSON.stringify(languages))
		        let dataL =[]
		        for(var key in objL){
		         	dataL.push({"lang":key,"number":objL[key]}) 
		         }
		       this.languageData.rows = dataL
		        //console.log(objL)  
		        //console.log(this.languageData.rows)
	    	}  
		    return}).catch(err => { console.log(err.message); })}Copy the code

Code here enough grace (don’t ask me why not use the map function), for example, I calculate the specific language of warehouse type, each warehouse may have several languages, a language is different, each warehouse I’m going to the warehouse statistics all the Numbers of each language, and then encapsulated into a v – charts can identify the data types, so do in two steps, First, put all the traversed languages into an object, as follows

1, {"JavaScript": 2."CSS": 2."less"2} :Copy the code

This data is then converted to the data type recognized by V-Charts as follows

[{"lang":"JavaScript"."number":2
}
{"lang":"CSS"."number": 2}]Copy the code

3, warehouse data, recent your operations, recent fans, recent follow this data can be obtained directly

4, the latest information, here is also done, a news rolling effect, specific implementation can move I wrote this article here

Third, some processing of optimization and experience interaction

1. When loading data, there will be a mask layer design. When the data is loaded, the mask layer will disappear and show the data

2, when the user is embarrassed, there will be a corresponding prompt without data options if there is no search for countless data

3, when the user inputs the non-existent user query in the address bar, there will be a judgment, and then the pop-up box prompts, click close will jump to the home page entrance page