Bom dia!
Estou tentando usar o Custom Chart com o Vega mas não estou conseguindo linkar as variáveis… já olhei a documentação do WEGnology e até as perguntas do fórum, mas não consigo avançar.
O código está assim:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": {{block.width}},
"height": {{block.height}},
"autosize": {
"type": "fit",
"contains": "padding"
},
"signals": [
{
"name": "centerX",
"update": "width/2"
},
{
"name": "centerY",
"update": "height/2 + outerRadius/2"
},
{
"name": "outerRadius",
"update": "targetValue ? radiusRef * 0.9 : radiusRef * 0.95"
},
{
"name": "radiusRef",
"update": "min(width/2, height/2)"
},
{
"name": "innerRadius",
"update": "outerRadius - outerRadius * 0.10"
},
{
"name": "ticksNumber",
"value":6
},
{
"name": "ticksColor",
"value": "rgba(255, 255, 255, 0.2)"
},
{
"name": "showTicks",
"value":true
},
{
"name": "mainValue",
"data": "load"
},
{
"name": "unit",
"value":" %"
},
{
"name": "usedValue",
"update": "min(max(minValue, mainValue), maxValue)"
},
{
"name": "minValue",
"value":0
},
{
"name": "maxValue",
"value":100
},
{
"name": "targetValue",
"value":50
},
{
"name": "fontFactor",
"update": "(radiusRef/5)/25"
},
{
"name": "backgroundColor",
"value":"#cbd1d6"
},
{
"name": "fillColor",
"value": "rgba(0, 120, 134, 0.6)"
}
],
"data": [
{
"name": "load",
"transform": [
{
"type": "sequence",
"as": "data",
"start":{
"signal":"0"
},
"stop":{
"signal":"(maxValue - minValue) + 0.1"
},
"step": {
"signal":"(maxValue - minValue)/(ticksNumber-1)"
}
},
{
"type":"formula",
"expr":"datum.data + minValue",
"as": "data_2"
},
{
"type": "formula",
"as":"radianRef",
"expr":"PI * (datum.data/(maxValue - minValue))"
},
{
"type": "formula",
"as":"x",
"expr": "centerX - ((outerRadius - (outerRadius - innerRadius) * 0.6) * cos(datum.radianRef))"
},
{
"type": "formula",
"as":"y",
"expr": "centerY - ((outerRadius - (outerRadius - innerRadius) * 0.7) * sin(datum.radianRef))"
}
]
}
],
"scales": [
{
"name": "gaugeScale",
"type": "linear",
"domain":{"data":"load", "field":"load_2"},
"zero":false,
"range":{"signal":"[-PI/2, PI/2]"}
},
{
"name": "tickScale",
"type": "linear",
"domain":{"data": "load", "field":"data"},
"range":{"signal":"[PI/2, -PI/2]"}
}
],
"marks": [
{
"type": "arc",
"name": "gauge",
"encode": {
"enter":{
"x":{"signal":"centerX"},
"y":{"signal":"centerY"},
"startAngle":{"signal": "-PI/2"},
"endAngle":{"signal":"PI/2"},
"outerRadius":{"signal":"outerRadius"},
"innerRadius":{"signal":"innerRadius"},
"fill":{"signal":"backgroundColor"}
}
}
},
{
"type": "arc",
"encode": {
"enter":{
"startAngle":{"signal":"-PI/2"}
},
"update":{
"x":{"signal":"centerX"},
"y":{"signal":"centerY"},
"innerRadius":{"signal":"innerRadius"},
"outerRadius":{"signal":"outerRadius"},
"endAngle":{"scale":"gaugeScale", "signal":"usedValue"},
"fill":{"signal":"fillColor"}
}
}
},
{
"type": "arc",
"description":"ticks on the arc",
"from": {"data":"load"},
"encode": {
"enter":{
"x":{"signal":"centerX"},
"y":{"signal":"centerY"},
"outerRadius":{"signal":"outerRadius"},
"innerRadius":{"signal":"outerRadius - (radiusRef*0.05)"},
"startAngle":{ "scale": "tickScale",
"field": "data"},
"endAngle":{ "scale": "tickScale",
"field": "data"},
"stroke":{"signal":"ticksColor"},
"opacity":{"signal":"showTicks ? 0 : 1"}
}
}
},
{
"type": "text",
"from": {"data":"load"},
"encode": {
"enter":{
"align":{"value":"center"},
"baseline":{"value":"alphabetic"}
},
"update":{
"text":{"signal":"format(datum.data_2, '.0f')"},
"x":{"field":"x"},
"y":{"field":"y"},
"fontSize":{"signal":"fontFactor* 11"},
"fill":{"signal":"ticksColor"},
"opacity":{"signal":"showTicks ? 0 : 1"}
}
}
},
{
"type": "text",
"description":"displayed min value at the bottom left of gauge when showTicks is false",
"from": {"data":"gauge"},
"encode": {
"enter":{
"align":{"value":"center"},
"baseline":{"value":"top"}
},
"update":{
"text":{"signal":"minValue"},
"x":{"signal":"centerX - outerRadius + (outerRadius - innerRadius)/2"},
"y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}},
"fontSize":{"signal":"fontFactor * 15"},
"opacity":{"signal":"showTicks ? 1 : 0"},
"fill": {
"signal": "ticksColor"
}
}
}
},
{
"type": "text",
"description":"displayed max value at the bottom right of gauge when showTicks is false",
"from": {"data":"gauge"},
"encode": {
"enter":{
"align":{"value":"center"},
"baseline":{"value":"top"}
},
"update":{
"text":{"signal":"maxValue"},
"x":{"signal":"centerX + innerRadius + (outerRadius - innerRadius)/2"},
"y":{"signal":"centerY", "offset":{"signal":"fontFactor*5"}},
"fontSize":{"signal":"fontFactor * 15"},
"opacity":{"signal":"showTicks ? 1 : 0"},
"fill": {
"signal": "ticksColor"
}
}
}
},
{
"type": "text",
"description":"displayed main value at the bottom center of the gauge ",
"name": "gaugeValue",
"encode": {
"enter":{
"x":{"signal": "centerX"},
"baseline":{"value":"top"},
"align":{"value":"center"}
},
"update":{
"text":{"signal":"format(mainValue, '.0f') + unit"},
"y":{"signal":"centerY", "offset": {"signal": "fontFactor*5"}},
"fontSize":{"signal":"fontFactor * 30"},
"fill": {
"signal": "ticksColor"
}
}
}
}
]
}
Criei também uma Gauge Query com o nome load e não funciona.
O que faço pra funcionar?
