I have the following BLOX widget:
Which is generated via this BLOX code:
{
"style": "",
"titleStyle": [
{
"display": "none"
}
],
"script": "[].slice.call( document.getElementsByClassName('blox-date') ).forEach(function ( div ) { div.innerHTML = new Date().toLocaleDateString(); })",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"delay": 0,
"showButtons": false
},
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 0,
"color": "#FA5656",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
},
{
"minRange": 0,
"maxRange": "Infinity",
"color": "#54a254",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
}
],
"body": [
{
"spacing": "",
"type": "Container",
"width": "100%",
"style": {
"margin": "0 auto"
},
"items": [
{
"type": "TextBlock",
"text": "FINANCIAL KPI'S | RUNNING WEEKLY TREND",
"class": "blox-pivot-title",
"horizontalAlignment": "center",
"size": "medium",
"style": {
"padding": "2px",
"border-radius": "5px",
"background-color": "#006374",
"color": "#ffffff"
}
},
{
"type": "ColumnSet",
"class": "condition_container ",
"columns": [
{
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "REVENUE",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "ColumnSet",
"class": "condition_container ",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{panel:REVENUE}",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#a90a40"
}
}
]
}
]
},
{
"type": "ColumnSet",
"class": "condition_container",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#A90A40'>{spark:-21REVENUE},{spark:-14REVENUE},{spark:-7REVENUE}</span>",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "BUDGET:",
"style": {
"text-align": "left",
"font-size": "small",
"font-style": "",
"color": "#d5d5d5"
}
},
{
"type": "TextBlock",
"text": "FULL MONTH FORECAST:",
"style": {
"text-align": "left",
"font-size": "small",
"font-style": "",
"color": "#d5d5d5"
}
}
]
},
{
"type": "Column",
"width": "30%",
"items": [
{
"type": "TextBlock",
"text": "{panel:REV_BUDGET}",
"style": {
"text-align": "center",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
},
{
"type": "TextBlock",
"text": "{panel:REVENUE_FORECAST}",
"style": {
"text-align": "center",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
}
]
}
]
}
]
},
{
"separator": true,
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "CONTRIBUTION MARGIN",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "TextBlock",
"text": "{panel:CONT. MARGIN $} ({panel: CM%})",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#a90a40"
}
},
{
"type": "ColumnSet",
"class": "condition_container 2",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>{spark:-21CM$},{spark:-14CM$},{spark:-7CM$}</span>",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#117899"
}
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{panel:CM_BUDGET} ({panel:CMPERC_BUDGET})",
"style": {
"text-align": "right",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
},
{
"type": "TextBlock",
"text": "{panel:CM_FORECAST} ({panel:CM%})",
"style": {
"text-align": "right",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
}
]
}
]
}
]
},
{
"separator": true,
"type": "Column",
"items": [
{
"spacing": "small",
"type": "TextBlock",
"text": "PRODUCTIVITY",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "#000000"
}
},
{
"type": "TextBlock",
"text": "{panel:PRODUCTIVITY}",
"horizontalAlignment": "center",
"weight": "bold",
"size": "large",
"style": {
"color": "#a90a40"
}
},
{
"type": "ColumnSet",
"class": "condition_container 3",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<span class='blox-sparkline' type='line' line-color='#006374' width='200' height='30' line-width='2' fill-color='#B2D4DF' point-color:'#117899'>{spark:PROD_M1},{spark:PROD_M2}, {spark:PROD_M3}</span>",
"horizontalAlignment": "center",
"weight": "bold",
"size": "small",
"style": {
"color": "grey"
}
}
]
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "BUDGET:",
"style": {
"text-align": "left",
"font-size": "small",
"font-style": "",
"color": "#FFFFFF"
}
},
{
"type": "TextBlock",
"text": "PREV. MONTH:",
"style": {
"text-align": "left",
"font-size": "small",
"font-style": "",
"color": "#d5d5d5"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "{panel:PROD_BUDGET}",
"style": {
"text-align": "center",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
},
{
"type": "TextBlock",
"text": "{panel:PRODUCTIVITY -1M}",
"style": {
"text-align": "center",
"font-size": "small",
"font-weight": "regular",
"color": "#006274",
"font-style": ""
}
}
]
}
]
}
]
}
]
}
]
}
],
"actions": []
}
How do I update the BLOX script to equally space each of the 3 KPI's horizontally in an even/equal fashion? The sections highlighted in yellow I feel are not being stretched as far as they could be. The same thing with the trending sparkline - it would be best if that would stretch from border to border.
Thanks for your help!
