Visual Query

1. Data Structure Design

Sql statement to achieve data storage structure. For delicate part is that and, orconditional logic design.
Of course, the last time realized there are some differences, ha ha ha.

    Column = {
        distinct: true,
        aggr_func: 'sum',
        name: 'col1', # func(col) sum/count/avg/distinct # db.tb
        id: 12344,
        alias: 'a', # 重命名
        table: Table()
    }
    Table = {
        id: 234,
        name: "table.name",
        alias: 't'
    }
    Condition = {
        op: {
            name: 'eq',
            value: '='
        }
        value: [
            # type: condition,column,expr 
            # 如果type是condition，表示and，or类型，value内的对象都是condition类型。
            {
                type: 'column',
                col: Column()
            },
            {
                type: 'expr',
                value: '20170291'
            }
            ...
        ]
    }
    # 单条查询语句，支持mysql，hive语法
    # union 链接多个select
    json = [{
        select: [Column(),..],
        from: [Table(),..] # db.tb
        join: [{
            type: 'left join'
            table: Table()
            on: Condition()
        }],
        where: Condition(),
        group_by: [Column(),..]
        having:Condition(),
        order_by: [{
            col: Column(),
            sort: 'desc'
        }]
        limit: 10,
    }]

2. Check the mode from the dirty to the observer

1. angularjs migration project to vue
   vue project more and more fire, component-based trends are becoming evident. Large and angularjs, slowly being replaced by the new technologies.
   We always want to migrate to the project vue development.
   ngvueA directivepackage vue function, may be used so angularjs vue.

vue-component(v-props="ng" name="QueryVisualComponent")

QueryVisualComponent = Vue.component('query-visual-component', {
    props: ['ng']
    data: ->
        return {
            info: null
            columns: null
        }

    template: '#query-visual-component-template'
})
MetronicApp.value('QueryVisualComponent', QueryVisualComponent)

2. AngularJS processing, communication vue
   will depend AngularJS are packaged in injection method may also be used vue, $stateThe props will generate this circular reference, stack overflow.
   Lump global variables. Vue easy to use in the $httpdependent request data.（当然也可以引入axios）

g.utils.setDependencies($state.current.controller, arguments, {ctrl: @})
@ng = g.utils.dependencies
setDependencies: (controller_name, args, extra) ->
    g.utils.dependencies = extra ? {}
    for i in MetronicApp._invokeQueue
        if i[0] == '$controllerProvider'
            if i[2][0] == controller_name
                for dependency, index in i[2][1].slice(0, -1)
                    g.utils.dependencies[dependency] = args[index]
                break

3. Page design and development features

Because of the basis for approval of the development stream, granted designed as a flow chart.
Finally, referring to the navicat.

Visualization

The actual development process, a lot of problems, like the Red Army twenty-five thousand long march, but fortunately now be reached Yan'an, ha ha ha.

1. How to generate node node is no problem on the svg?
   1. Use of svg forignObject element https://github.com/memloom-development/svg.foreignobject.js
   2.vue Extend the compile (dom obtain structural element vue)
   3.Mac foreignObject internal element can not have scrollbars, overflow: autothan the height after or the width, DOM occupying the correct position, the actual offset of the display.
   4.node draggable will affect the click event is triggered. The double-click, the manual focus.
   5.vuex global data exchange.
   6. Drag the lower right side column node page size.

      #vue compile extend
        visual_header = Header(world, snippet, table_id)
        VisualHeader = Vue.extend(visual_header)
        h_comp = new VisualHeader().$mount()

        @header = world.svg.foreignObject()
            .addClass('visual-header-object')
            .appendChild(h_comp.$el, {className: 'visual-header-box flex'})

2. SELECT, from, WHERE, join, by Group, by Order, limit
   1.select (DISTINCT, calculation, alias)
   2.from join statement binding
   mismatch processing the last comma 3. question (here above and indeed the design data structure ha ha ha.)
   4.where jqueryBuilder processing and orconditions and sql show.
   The process has never join statement to the directed graph.

        count: 1
        sql: {
            '1':{
                columns: [],
                from: [],
                join: {},
                where: null,
                limit: 10,
                where_sql: ''
                join_sql: {}
                add_item: []
                max_select: -1,
                max_order_by: -1,
                max_group_by: -1,
                max_from: -1
            }
        }
        columns_dict: {}
        table_dict: {}
        checkedCol: {}
    }

4. Data Assembly

Reproduced in: https: //www.jianshu.com/p/f6488a458eeb