candidate-snippet.js

var url = 'elastic/tw_post_ews*/_search?q=ori_post:' + this.dt_oripost.id +
    '&size=' + total;
var urltop10 = 'elastic/tw_post_ews*/_search?size=' + total;
console.log("ini url", url);
// var url_chart = 'elastic/_search?&size='+total;

//SENTIMEN
var body = {
    "query": {
        "range": {
            "date": {
                "gte": "now-1d/d",
                "lt": "now/d"
            }
        }
    },
    "aggs": {
        "sentiment": {
            "terms": {
                "field": "sentiment",
                "order": { "_key": "desc" }
            },
            "aggs": {
                "timeline": {
                    "date_histogram": {
                        "field": "date_dt",
                        "interval": "10m",
                        "format": "YYYY-MM-dd'T'HH:mm:ss.000'Z'"
                    }
                }
            }
        }
    }
};

axios.post(url, body).then(
    result => {
        // console.log("RESULT SENTIMENT : ", result.data.hits.hits)
        this.dt_sentimen_emotion = result.data.hits.hits;
        this.loadingx = false;
        var data_tampung = {};
        this.dt_sentimen_emotion.forEach(function (item) {
            if (item._source.sentiment in data_tampung) {
                data_tampung[item._source.sentiment] = data_tampung[item._source.sentiment] +
                    1
                // this.loadingx = false;
                // console.log("datatampung : ", data_tampung);
            } else {
                data_tampung[item._source.sentiment] = 1
                // this.loadingx = false;
                // console.log("datatampung 1", data_tampung);
            }
        });


        // PIE CHART
        var chartvalues = []
        Object.keys(data_tampung).forEach(function (key) {
            chartvalues.push({ "id": key, "field": data_tampung[key] })
        });
        var chartdata = [
            {
                "name": "table",
                "values": chartvalues,
                "transform": [
                    {
                        "type": "pie",
                        "field": "field"
                    }
                ]
            }
        ]
        this.jsonvar = this.jsonvar = {
            "$schema": "https://vega.github.io/schema/vega/v3.json",
            "width": 300,
            "height": 280,
            "autosize": { "type": "fit", "resize": true },

            "signals": [
                {
                    "name": "x",
                    "value": 120
                },
                {
                    "name": "y",
                    "value": 120
                },
                {
                    "name": "dx",
                    "value": 0
                },
                {
                    "name": "startAngle", "value": 0
                },
                {
                    "name": "endAngle", "value": 6.29
                },
                {
                    "name": "innerRadius", "value": 0
                },
                {
                    "name": "cornerRadius", "value": 0
                },
                {
                    "name": "sort", "value": false
                },
                {
                    "name": "tooltip",
                    "value": {},
                    "on": [
                        { "events": "arc:mouseover", "update": "datum" },
                        { "events": "arc:mouseout", "update": "{}" }
                    ]
                }
            ],

            "data": chartdata,

            "scales": [
                {
                    "name": "color",
                    "type": "ordinal",
                    "domain": { "data": "table", "field": "id" },
                    "range": { "scheme": "category20" }
                }
            ],

            "legends": [
                {
                    "stroke": "color",
                    "title": "Emotion",
                    "orient": "top-right",
                    "encode": {
                        "symbols": {
                            "update": {
                                "fill": { "value": "" },
                                "strokeWidth": { "value": 2 },
                                "size": { "value": 45 }
                            }
                        }
                    }
                }
            ],

            "marks": [
                {
                    "type": "arc",
                    "from": { "data": "table" },
                    "encode": {
                        "enter": {
                            "fill": { "scale": "color", "field": "id" },
                            "x": { "value": 120 },
                            "y": {
                                "value": 120
                            }
                        },
                        "update": {
                            "startAngle": { "field": "startAngle" },
                            "endAngle": { "field": "endAngle" },
                            "innerRadius": { "signal": "innerRadius" },
                            "outerRadius": { "signal": "width / 4" },
                            "fill": { "scale": "color", "field": "id" },
                            "stroke": { "value": "#fff" }
                        },
                        "hover": {
                            "stroke": { "value": "#030303" }
                        }
                    }
                },
                {
                    "type": "text",
                    "encode": {
                        "enter": {
                            "align": { "value": "right" },
                            "baseline": { "value": "center" },
                            "fill": { "value": "#000" }
                        },
                        "update": {
                            "text": { "signal": " tooltip.id " },
                            "opacity": {
                                "value": 1
                            },
                            "x": {
                                "signal": "x"
                            },
                            "y": {
                                "signal": "y"
                            },
                            "dx": {
                                "value": 10
                            },
                            "fontWeight": { "value": "bold" }
                        },
                        "hover": {
                            "opacity": {
                                "value": 0.5
                            }
                        }
                    }
                },
                {
                    "type": "text",
                    "encode": {
                        "enter": {
                            "align": { "value": "left" },
                            "baseline": { "value": "center" },
                            "fill": { "value": "#000" }
                        },
                        "update": {
                            "text": { "signal": " tooltip.field " },
                            "opacity": {
                                "value": 1
                            },
                            "x": {
                                "signal": "x"
                            },
                            "y": {
                                "signal": "y"
                            },
                            "dx": {
                                "value": 15
                            }
                        },
                        "hover": {
                            "opacity": {
                                "value": 0.5
                            }
                        }
                    }
                }
            ]
        }
        // console.log('jsonvar', this.jsonvar);
        vegaEmbed('#ewsSentimen', this.jsonvar, { theme: this.theme, actions: false });
    },
    error => {
        console.error(error);
    });