Chart.js 이외에 여러 차트 선택지를 추가하였습니다.
display: billboardjs
- billboard.js 스크립트를 사용할 수 있습니다.
- ChatGPT 등을 통해 더 잘 활용할 수 있습니다. (e.g. “billboard.js로 bar 그리는 js 코드를 알려줘”)
displayFn
- block.id와 displayFn안에 차트를 그릴때 ID가 동일해야합니다.
- sqlMany 기능이 추가되었습니다. (여러개 쿼리 실행시 rows[0], rows[1] 안에 각각 결과가 담깁니다: 지난주/이번주 데이터 비교 등에 사용 가능)
- displayFn안에서 쓸수있는 변수: rows, id, openModal, openAction,
_lodash 데이터 처리용
예시 YAML 코드
menus:
- path: pages/8y_rbk-4
name: billboard
pages:
- path: pages/8y_rbk-4
# title: 제목
# subtitle: 내용
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: >
SELECT DATE(created_at), COUNT(id) FROM TestLog
WHERE created_at > '2024-05-15'
GROUP BY 1
modals:
- path: view
blocks:
- type: query
resource: mysql.qa
sqlType: select
sql: SELECT :id
params:
- key: id
valueFromRow: id
display: billboardjs
id: gaugeChart
displayFn: |
var chart = bb.generate({
data: {
columns: [
["data", 91.4]
],
type: "gauge", // for ESM specify as: gauge()
onclick: function (d, i) {
console.log("onclick", d, i);
},
onover: function (d, i) {
console.log("onover", d, i);
},
onout: function (d, i) {
console.log("onout", d, i);
}
},
gauge: {},
color: {
pattern: [
"#FF0000",
"#F97600",
"#F6C600",
"#60B044"
],
threshold: {
values: [
30,
60,
90,
100
]
}
},
size: {
height: 180
},
bindto: "#gaugeChart"
});
setTimeout(function () {
chart.load({
columns: [
["data", 10]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
["data", 50]
]
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
["data", 70]
]
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [
["data", 0]
]
});
}, 4000);
setTimeout(function () {
chart.load({
columns: [
["data", 100]
]
});
}, 5000);