MrWindlike
commented
2 years ago This is the screenshot of the chart demo:
And the JSON schema is:
{
"version": "sunmao/v1",
"kind": "Application",
"metadata": {
"name": "Chart Application"
},
"spec": {
"components": [
{
"id": "Title",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "🌏 World Development Indicator Charts 📈",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "font-size: 24px;\nfont-weight: bold;"
}
]
}
}
]
},
{
"id": "Form",
"type": "chakra_ui/v1/form",
"properties": {
"hideSubmit": true
},
"traits": [
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "margin-top: 8px;\noverflow: visible;"
}
]
}
}
]
},
{
"id": "FormTitle",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "FILTERS",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Form",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "font-size: 18px;\nfont-weight: bold;"
}
]
}
}
]
},
{
"id": "Indicator",
"type": "chakra_ui/v1/formControl",
"properties": {
"label": "Indicator",
"fieldName": "indicator",
"isRequired": false,
"helperText": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Form",
"slot": "content"
}
}
}
]
},
{
"id": "IndicatorSelect",
"type": "chakra_ui/v1/select",
"properties": {
"options": "{{\nFetchIndicators.fetch.data?.[1]?.map((indicator)=> ({\n label: indicator.name,\n value: indicator.id\n})) ?? []\n}}",
"placeholder": "Select an indicator",
"defaultValue": "BG.GSR.NFSV.GD.ZS",
"isDisabled": false,
"isInvalid": false,
"isReadOnly": false,
"isRequired": false,
"size": "md",
"variant": "outline",
"errorBorderColor": "red",
"focusBorderColor": "blue"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Indicator",
"slot": "content"
}
}
}
]
},
{
"id": "Start",
"type": "chakra_ui/v1/formControl",
"properties": {
"label": "Start",
"fieldName": "start",
"isRequired": false,
"helperText": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Form",
"slot": "content"
}
}
}
]
},
{
"id": "StartInput",
"type": "chakra_ui/v1/numberInput",
"properties": {
"defaultValue": 1960,
"min": 1960,
"max": 2050,
"step": 1,
"precision": 0,
"clampValueOnBlur": false,
"allowMouseWheel": false,
"size": "md"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Start",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "width: 100%;"
}
]
}
}
]
},
{
"id": "End",
"type": "chakra_ui/v1/formControl",
"properties": {
"label": "End",
"fieldName": "end",
"isRequired": false,
"helperText": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Form",
"slot": "content"
}
}
}
]
},
{
"id": "EndInput",
"type": "chakra_ui/v1/numberInput",
"properties": {
"defaultValue": 2019,
"min": "{{Start.value}}",
"max": 2050,
"step": 1,
"precision": 0,
"clampValueOnBlur": false,
"allowMouseWheel": false,
"size": "md"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "End",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "width: 100%;"
}
]
}
}
]
},
{
"id": "Countries",
"type": "chakra_ui/v1/formControl",
"properties": {
"label": "Countries",
"fieldName": "contries",
"isRequired": false,
"helperText": ""
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Form",
"slot": "content"
}
}
}
]
},
{
"id": "CountriesSelect",
"type": "chakra_ui/v1/multiSelect",
"properties": {
"options": "{{\nFetchCountries.fetch.data?.[1]?.map((country)=> ({\n label: country.name,\n value: country.id\n})) ?? []\n}}",
"placeholder": "",
"defaultValue": [
{
"value": "CHN",
"name": "China",
"label": "China"
}
],
"isDisabled": false,
"isRequired": false,
"size": "md",
"variant": "outline"
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Countries",
"slot": "content"
}
}
},
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "overflow: visible;"
}
]
}
}
]
},
{
"id": "DataLineChart",
"type": "echarts/v1/line",
"properties": {
"notMerge": false,
"lazyUpdate": false,
"showLoading": "{{FetchDatas.fetch.loading}}",
"title": {
"text": "{{IndicatorSelect.value}}",
"left": "",
"right": "",
"top": "",
"bottom": ""
},
"grid": {
"left": "64",
"right": "64",
"top": "",
"bottom": "24",
"containLabel": true
},
"xAxis": [
{
"name": "Year",
"type": "category",
"data": "{{\nArray.from(new Set(FetchDatas.fetch.data[1]?.map(data=> data.date) ?? []))\n }}",
"nameLocation": "end",
"offset": 0,
"position": "bottom"
}
],
"yAxis": [
{
"name": "Value",
"type": "value",
"data": [],
"nameLocation": "end",
"offset": 0,
"position": "left"
}
],
"tooltip": {
"trigger": "axis",
"triggerOn": "mousemove"
},
"legend": {
"show": true,
"data": [],
"type": "scroll",
"left": "",
"right": "",
"top": "",
"bottom": "",
"icon": "circle"
},
"color": [],
"series": "{{\n(FetchDatas.fetch?.data?.[1] ?? []).reduce((result, data)=> {\n const categories = result.map((series) => series.name);\n const categoryIndex = categories.indexOf(data.country.value);\n\n if (categoryIndex === -1) {\n result.push({\n name: data.country.value,\n data: [data.value],\n });\n } else {\n result[categoryIndex].data.push(data.value);\n }\n \n return result\n}, []) ?? []\n}}"
},
"traits": [
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "wrapper",
"style": "margin-top: 24px;"
}
]
}
}
]
},
{
"id": "Footer",
"type": "chakra_ui/v1/hstack",
"properties": {
"direction": "row",
"wrap": "wrap",
"align": "",
"justify": "",
"spacing": "12px"
},
"traits": [
{
"type": "core/v1/style",
"properties": {
"styles": [
{
"styleSlot": "content",
"style": "border: none;"
}
]
}
}
]
},
{
"id": "FooterText",
"type": "core/v1/text",
"properties": {
"value": {
"raw": "Source:",
"format": "plain"
}
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Footer",
"slot": "content"
}
}
}
]
},
{
"id": "FooterLink",
"type": "chakra_ui/v1/link",
"properties": {
"text": {
"raw": "World Bank Data API",
"format": "plain"
},
"href": "https://datahelpdesk.worldbank.org/knowledgebase/topics/125589-developer-information",
"isExternal": false
},
"traits": [
{
"type": "core/v1/slot",
"properties": {
"container": {
"id": "Footer",
"slot": "content"
}
}
}
]
},
{
"id": "FetchIndicators",
"type": "core/v1/dummy",
"properties": {},
"traits": [
{
"type": "core/v1/fetch",
"properties": {
"url": "http://api.worldbank.org/v2/indicator?format=json&source=2&per_page=100",
"method": "get",
"lazy": false,
"headers": {},
"body": {},
"onComplete": [],
"onError": []
}
}
]
},
{
"id": "FetchCountries",
"type": "core/v1/dummy",
"properties": {},
"traits": [
{
"type": "core/v1/fetch",
"properties": {
"url": "http://api.worldbank.org/v2/countries?per_page=200&format=json",
"method": "get",
"lazy": false,
"headers": {},
"body": {},
"onComplete": [],
"onError": []
}
}
]
},
{
"id": "FetchDatas",
"type": "core/v1/dummy",
"properties": {},
"traits": [
{
"type": "core/v1/fetch",
"properties": {
"url": "http://api.worldbank.org/V2/country/{{CountriesSelect.value.join(';')}}/indicator/{{IndicatorSelect.value}}?format=json&date={{StartInput.value}}%3A{{EndInput.value}}&per_page=100",
"method": "get",
"lazy": false,
"headers": {},
"body": {},
"onComplete": [],
"onError": []
}
}
]
}
]
}
}
xzdry
Try to use arco components first.