I have following code in Vega lite. I want to change transform filter 1850 to 2000. Please suggest how I can Change transform filter of schema. If possible is there any sample example for dynamic data change and update view.
Data for population took from
https://vega.github.io/editor/data/population.json
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "https://vega.github.io/editor/data/population.json",
"format": {
"type": "json"
}
},
"transform": [
{
"filter": "datum.year == 1850"
}
],
"mark": "bar",
"encoding": {
"x": {
"aggregate": "sum",
"field": "people",
"type": "quantitative",
"axis": {
"title": "population"
}
}
},
"config": {
"scale": {
"rangeStep": 21
}
}
}
vegaEmbed('#vis', yourVlSpec).then(function (result) {
result.spec.transform[0] = '{filter: "datum.year == 2000"}';
}).catch(console.error);
<html>
<head>
<title>Embedding Vega-Lite</title>
<script src="https://cdn.jsdelivr.net/npm/vega#3.0.10"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#2.1.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#3.0.0"></script>
</head>
<body>
<div id="vis"></div>
<div id="view"></div>
</body>
</html>
You can achieve that with selections (https://vega.github.io/vega-lite/docs/selection.html) and a filter based on that selection (https://vega.github.io/vega-lite/docs/filter.html#selection-predicate). If that's not an option, you will need to use Vega Signals and the Vega View API.
Related
This is for select a city and area, It will filter the same data to show it. But I meet with a problem is that when I selected, the value doesn't appear.
I have been try and searched similar code but still doesn't find the solution.
This is the image when of HTML rendering :
Here is template :
<a href="#" class="list-group-item" v-for="(live , idx) of filterLivingNames" :key="idx">
<h3 class="text-center">{{live.Name}}</h3>
<p>Address：</p>
<p>Phone：</p>
</a>
Here is script
import LivingData from '#/assets/LivingData.json';
export default {
computed: {
livedata(){
return LivingData;
},
filterLivingNames(){
let livelength = this.livedata.length
for(let i = 0 ; i < livelength ; i++){
if(this.livedata[i].Region === this.city && this.livedata[i].Town === this.area){
console.log(this.livedata[i])
return this.livedata[i]
}
else{
continue
}
}
}
}
}
Update json file
[
{
"Id": "1",
"Name": "Hotel-1",
"Region": "Region-1",
"Town": "Town-1",
},
{
"Id": "2",
"Name": "Hotel-2",
"Region": "Region-2",
"Town": "Town-2",
},
{
"Id": "3",
"Name": "Hotel-3",
"Region": "Region-2",
"Town": "Town-1",
},
{
"Id": "4",
"Name": "Hotel-4",
"Region": "Region-1",
"Town": "Town-2",
},
]
As you are filtering out the livedata based on Region and Town. You can simply use the Array.filter() method and this will resolve the issue you are facing as it will return the array.
Live Demo :
new Vue({
el: '#app',
data: {
livedata: [
{
"Id": "1",
"Name": "Hotel-1",
"Region": "Region-1",
"Town": "Town-1",
},
{
"Id": "2",
"Name": "Hotel-2",
"Region": "Region-2",
"Town": "Town-2",
},
{
"Id": "3",
"Name": "Hotel-3",
"Region": "Region-2",
"Town": "Town-1",
},
{
"Id": "4",
"Name": "Hotel-4",
"Region": "Region-1",
"Town": "Town-2",
}
],
city: 'Region-1',
area: 'Town-1'
},
computed: {
filterLivingNames() {
return this.livedata.filter(obj => obj.Region === this.city && obj.Town === this.area)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<a href="#" class="list-group-item" v-for="(livingData, index) of filterLivingNames" :key="index">
<h3 class="text-center">{{ livingData.Name }}</h3>
<p>Address：</p>
<p>Phone：</p>
</a>
</div>
Since the last Splunk update I've noticed some unexpected behavior when it comes to tokens with Splunk Dashboard Studio.
If you have an input (dropdown or multiselect) with a default value set to None.
After loading the dashboard page, then setting the input value,
The base searches in the dashboard that use the input token will update,
but any chain searches of that base search do not.
It does however update if you either refresh the page with the tokens set in the url, or a change to the input for a second time. (any other action which causes the page to refresh in some way eg: editing page will update the dashboard and the chain search will update)
is this behaviour a bug, and is there currently a way to fix this behaviour?
Thanks Daniel
Below is a self contained minimal example to demonstrate this.
Splunk Dashboard Studio: Absolute/Full control layout
{
"visualizations": {
"viz_cdPoxmBV": {
"type": "splunk.table",
"dataSources": {
"primary": "ds_CJTH14Fk"
},
"title": "Base"
},
"viz_t4aAHmKH": {
"type": "splunk.table",
"title": "Chain",
"dataSources": {
"primary": "ds_aqLh17e3"
}
}
},
"dataSources": {
"ds_CJTH14Fk": {
"type": "ds.search",
"options": {
"query": "| makeresults\n| eval a=\"$input$\"\n| table a ",
"queryParameters": {
"earliest": "0",
"latest": ""
}
},
"name": "Search_Base"
},
"ds_aqLh17e3": {
"type": "ds.chain",
"options": {
"extend": "ds_CJTH14Fk",
"query": "| eval a=a+\"_END\""
},
"name": "Search_1"
}
},
"defaults": {
"dataSources": {
"ds.search": {
"options": {
"queryParameters": {
"latest": "$global_time.latest$",
"earliest": "$global_time.earliest$"
}
}
}
}
},
"inputs": {
"input_aXQ6s8I2": {
"options": {
"items": [
{
"label": "All",
"value": "*"
},
{
"label": "Item 1",
"value": "item001"
},
{
"label": "Item 2",
"value": "item002"
}
],
"token": "input"
},
"title": "Dropdown Input Title",
"type": "input.dropdown"
}
},
"layout": {
"type": "absolute",
"options": {
"display": "auto-scale"
},
"structure": [
{
"item": "viz_cdPoxmBV",
"type": "block",
"position": {
"x": 10,
"y": 10,
"w": 410,
"h": 140
}
},
{
"item": "viz_t4aAHmKH",
"type": "block",
"position": {
"x": 430,
"y": 10,
"w": 400,
"h": 140
}
}
],
"globalInputs": [
"input_aXQ6s8I2"
]
},
"description": "",
"title": "Test_Token"
}
below is classic dashboard example where behaviour is not seen.
<form version="1.1">
<label>Test_Token</label>
<search id="baseSearch">
<query>| makeresults
| eval a="$input$"
| table a</query>
<earliest>-24h#h</earliest>
<latest>now</latest>
</search>
<fieldset submitButton="false">
<input type="dropdown" token="input">
<label>dropdown</label>
<choice value="*">All</choice>
<choice value="item001">Item 1</choice>
<choice value="item002">Item 2</choice>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>| makeresults
| eval a="$input$"
| table a</query>
<earliest>-24h#h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
<row>
<panel>
<table>
<search base="baseSearch">
<query>| eval a=a+"_END"</query>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>
I am trying to loop through the following JSON:
[ { "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:378.2608642578125,328.9855041503906,147.82611083984375,210.14492797851562", "type": "FragmentSelector" } }, "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "value": "new annotation", "purpose": "commenting", "type": "TextualBody" }, { "purpose": "tagging", "type": "TextualBody", "value": "error" } ], "id": "698RTBGMwWahQ15rXbe6", "type": "Annotation", "#context": "http://www.w3.org/ns/anno.jsonld" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:695.6521606445312,60.869564056396484,139.13043212890625,127.53622817993164", "type": "FragmentSelector" } }, "id": "AUMwWBjizjl8L8vU0XtA", "#context": "http://www.w3.org/ns/anno.jsonld", "type": "Annotation", "body": [ { "value": "clouds!", "type": "TextualBody", "purpose": "commenting" }, { "type": "TextualBody", "value": "clouds", "purpose": "tagging" } ] }, { "type": "Annotation", "body": [ { "type": "TextualBody", "value": "fourth anno", "purpose": "commenting" } ], "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "type": "FragmentSelector", "conformsTo": "http://www.w3.org/TR/media-frags/", "value": "xywh=pixel:631.884033203125,389.8551025390625,172.4637451171875,128.9854736328125" } }, "#context": "http://www.w3.org/ns/anno.jsonld", "id": "CecyGAt47krNIOPgk8Su", "photoDocId": "92wNwz2aaqy7CWf3mGo1" }, { "photoDocId": "92wNwz2aaqy7CWf3mGo1", "body": [ { "type": "TextualBody", "purpose": "commenting", "value": "mountain top . Anyone ever climbed this?" }, { "value": "mountain", "type": "TextualBody", "purpose": "tagging" } ], "#context": "http://www.w3.org/ns/anno.jsonld", "id": "KxIMdih1fTSULjde3Ay4", "type": "Annotation", "target": { "selector": { "type": "FragmentSelector", "value": "xywh=pixel:272.4637756347656,60.869564056396484,252.17391967773438,185.50725173950195", "conformsTo": "http://www.w3.org/TR/media-frags/" }, "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0" } } ]
I want to return just the following values:
purpose, type, and value. They are located within the body array of clientAnnos
Will this need to be a v-for within a v-for loop?
Update: I tried:
<ul>
<li v-for="{ body, index } in clientAnnos" :key="index">
{{ body }}
</li>
</ul>
But I am wondering if there's possible update issues due to index variable not having a true id.
you can try by mapping through the data then looping through the body since its an array. You can use a method for this for example
methods: {
info() {
let required = this.data.map(d => d.body)
return required
}
}
Then use the blog as a data value in the v for. The method will return an array of the body array properties
<li v-for="{ body, index } in info" :key="index">
{{ body }}
</li>
I hope it helps...
It's possible to specify Rule as encoding over the data. But sometimes it's too verbose. Is there a shorter way to specify it with just a single number?
In example below I want to draw a horizontal line with y=1 and it requires me to specify a calculate transform. Wonder if it's possible with something more compact, like:
"layer": [
...,
{ "mark": { "type": "rule", "y": 1 }, // Specify ruler with just a single line
...
]
Playground
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"transform":[
{ "calculate": "1", "as": "one" }
],
"layer": [
{
"mark": { "type": "bar" },
"encoding": {
"x": { "field": "diff", "type": "quantitative" },
"y": { "field": "diff", "type": "quantitative" }
}
},
{
"mark": { "type": "rule" },
"encoding": {
"y": { "field": "one", "type": "quantitative" }
}
}
],
"data": {
"values": [
{ "diff": 1 },
{ "diff": 2 },
{ "diff": 3 }
]
}
}
You can specify a single value using the "value" field in the encoding; e.g.
{
"mark": { "type": "rule" },
"encoding": {
"y": { "value": 133 }
}
}
(Playground)
But be aware this value is a value in the axis domain, rather than in the data domain; i.e. it represents pixels from the top-left of the chart.
If you want to specify a value in the data domain, there is no such shorthand. You have to either use a transform (as you did in your question) or define a new dataset for your layer. The most compact way of doing this, I think, is something like this:
{
"mark": { "type": "rule" },
"data": {"values": {"y": 1}},
"encoding": {
"y": { "field": "y" }
}
}
I use vega in Kibana.
I select two values from two different index in section "data". But now I need to summarize this values and visualize it in the section "marks". Is anybody know, how can I do this? Now in the section "marks" I use only one value from first "data".
My code is the following:
{
"$schema": "https://vega.github.io/schema/vega/v3.0.json",
"title": {
"text": "Lead time, hr.",
"orient": "bottom"
},
"data": [
{
"name": "source_1",
"url": {
"index": "metrics-bitbucket-*",
"%context_query%": "#timestamp",
"body": {
"size": 0,
"aggs": {
"etb": {
"avg": {
"field": "elapsed_time",
"script": {"source": "_value/3600*10"}
}
}
}
}
},
"format": {"type": "json", "property": "aggregations.etb"}
},
{
"name": "source_2",
"url": {
"index": "metrics-jenkins-*",
"%context_query%": "#timestamp",
"body": {
"size": 0,
"aggs": {
"etj": {
"avg": {
"field": "elapsed_time",
"script": {"source": "_value/3600*10"}
}
}
}
}
},
"format": {"type": "json", "property": "aggregations.etj"}
}
],
"marks": {
"type": "text",
"from": {"data": "source_1"},
"encode": {
"update": {
"text": {"signal": "round(datum.value)/10"},
"fontSize": {"value": 60},
"fontStyle": {"value": "bold"},
"x": {"signal": "width/2-50"},
"y": {"signal": "height/2"}
}
}
}
}
You essentially have two lists of data objects: source1: [{}, {}, ...] and source2: [{}, {}, {}, ...]. When you draw items, you have to specify just one data source. That data source could be the concatenation of the first two, e.g. you create source3 with its source parameter set to ["source1", "source2"], which includes all elements from both, but I suspect this is not what you want here. Rather, you need to merge the data using lookup transform - iterate over the items in one data source, and pull the corresponding values from another data source. Afterwards, add a formula transform to sum the values. The mark would than use the result of the formula for drawing.