PowerBI_SVG_Sparkline_Bar_Chart_v2

gistfile1.txt

DATAMEERKAT_SVG_V3 = 
VAR _width = 330 
VAR _height = 200 
VAR _columnRounding = 5 
VAR _initialTbl =
ADDCOLUMNS (
SELECTCOLUMNS(SUMMARIZE ( 'Website Sales_Data', 'Website Sales_Data'[YearMonth] ), "@xAxisPeriod", 'Website Sales_Data'[YearMonth] ),
"@val", [SUM Gross Sales]
)
VAR _target = 4600 
VAR _rowCounter = COUNTROWS ( _initialTbl )
VAR _dynamicSpaceBetweenColumns = DIVIDE(100, _rowCounter + 1)
VAR _dynamicMaxSizeOfColumn = DIVIDE(_width, _rowCounter * 1.5)
VAR _totalColumnSpacePercentage = 60
VAR _totalSpacePercentage = 40
VAR _individualColumnWidth = DIVIDE(_totalColumnSpacePercentage, _rowCounter)
VAR _individualSpacing = DIVIDE(_totalSpacePercentage, _rowCounter + 1)

VAR _firstLineInitialText = "Total target is on"
VAR _firstLineEndText =  "~ missing"
VAR _secondLineInitialText = "Period target is on"
VAR _secondLineEndText =  "~ sold"
VAR _thirdLineMiddleText = "of"
VAR _thirdLineEndText =  "months were successful"

VAR _grey = "#939393"
VAR _activePartsColor = "#323232"
VAR _darkGrey = "#323232"
VAR _targetLineColor = "#323232"
VAR _red = "#ff000c"
VAR _green = "#8cb400"
VAR _darkgreen = "#708E08"

VAR _svgDeclaration = "data:image/svg+xml;utf8,"
VAR _svgHeader = "<svg xmlns='http://www.w3.org/2000/svg' width='"&_width&"' height='"&_height&"'>"
VAR _svgEnd = "</svg>"

VAR _style = 
"<style>
text{
font-family:Segoe UI;
}
.columns{
opacity: 1;
outline: none;
}
.line{
stroke:"&_targetLineColor&"; 
stroke-width:1;
stroke-dasharray:3 3;
}
.baseline{
stroke-linecap: round;
}
.txtGroup{
dominant-baseline: middle;
text-anchor:start;
}
.bolder{
font-weight: bold;
}
text {
font-family: Arial;
}
</style>"

VAR _preparedTbl = 
ADDCOLUMNS (
_initialTbl,
"@rowNum", ROWNUMBER (_initialTbl, ORDERBY ( [@xAxisPeriod], ASC ) )
)
VAR _maxValue =
MAXX ( _preparedTbl, [@val] )

VAR _modifiedValue = _rowCounter*_target

VAR _resultSizeOfColumns =
VAR _cal =
ROUND ( DIVIDE ( 80 - ( ( _rowCounter + 1 ) * _dynamicSpaceBetweenColumns ), _rowCounter ), 1 )
RETURN
IF ( _cal > _dynamicMaxSizeOfColumn, _dynamicMaxSizeOfColumn, _cal )

VAR _columns = 
CONCATENATEX (
_preparedTbl,
VAR _currentRowNum = [@rowNum]
VAR _currentVal = [@val]
VAR _colorOfColumn = IF( _currentVal >= _target, _green, _red )
VAR _startOfColumn = ROUND ( DIVIDE ( _currentVal, _maxValue ) * 40, 1 )
VAR _positionCounter = (_currentRowNum - 1) * (_individualColumnWidth + _individualSpacing) + _individualSpacing
RETURN
"<rect class='columns' x='" & _positionCounter & "%' y='" & 85-_startOfColumn & "%' width='" & _individualColumnWidth & "%' height='" & _startOfColumn & "%' fill='" & _colorOfColumn & "' rx='0' />"
)

VAR _targetLine =
VAR _y = 85-ROUND ( DIVIDE ( _target, _maxValue ) * 40, 1 )
RETURN
"<line class='line' x1='0%' x2='100%' y1='"&_y&"%' y2='"&_y&"%' />"

VAR _baseLine =
"<line class='baseline' x1='0%' x2='100%' y1='85%' y2='85%' stroke='"&_darkGrey&"' stroke-width='1.5' />"

VAR _initialText =
"<g class='txtGroup'>"&
"<text y='4%' x='2.5%' font-size='107.5%' fill='"&_darkGrey&"'><tspan class='bolder'> "&_firstLineInitialText&" <tspan fill='"&_activePartsColor&"'>"
&FORMAT(ROUND(DIVIDE(SUMX(_preparedTbl,[@val]),_modifiedValue),2),"0%")& 
"</tspan></tspan><tspan font-size='80%'> "&_firstLineEndText&" "& ROUND(_modifiedValue-SUMX(_preparedTbl,[@val]),2)&" </tspan>
</text>"
&
"<text y='16.5%' x='2.5%' fill='"&_darkGrey&"'>
"&_secondLineInitialText&" <tspan fill='"&_activePartsColor&"' class='bolder'>"
&FORMAT(ROUND(DIVIDE(SUMX(_preparedTbl,[@val]),_modifiedValue),2),"0%")& 
"</tspan> <tspan font-size='80%'> "&_secondLineEndText&" "&ROUND(SUMX(_preparedTbl,[@val]),2)&" </tspan>
</text>"
&
"<text y='29%' x='2.5%' fill='"&_darkGrey&"'>
<tspan fill='"&_darkgreen&"' class='bolder'>"
& COUNTROWS(FILTER(_preparedTbl,[@val]>=_target)) & 
"</tspan> "&_thirdLineMiddleText&"
<tspan class='bolder'>"
& _rowCounter & 
"</tspan> "&_thirdLineEndText&"
</text>
</g>"

VAR _minFontSize = 8
VAR _maxFontSize = 10

VAR _calculatedFontSize = ROUND(2.5 * _individualColumnWidth, 2) 
VAR _adjustedFontSize = 
MIN(
_maxFontSize,
MAX(
_calculatedFontSize,
_minFontSize
)
)
VAR _dynamicFontSize = _adjustedFontSize & "px" 

VAR _monthNumbers = 
CONCATENATEX (
_preparedTbl,
VAR _currentRowNum = [@rowNum]
VAR _positionCounter = (_currentRowNum - 1) * (_individualColumnWidth + _individualSpacing) + _individualSpacing + _individualColumnWidth/2
VAR _currentMonthName = FORMAT(DATEVALUE(LEFT([@xAxisPeriod], 4) & "-" & RIGHT([@xAxisPeriod], 2) & "-01"), "MMM")
VAR _currentMonthFirstLetter = LEFT(_currentMonthName, 1)
RETURN
"<text y='91%' x='" & _positionCounter & "%' fill='"&_darkGrey&"' text-anchor='middle' font-size='" & _dynamicFontSize & "'>" & _currentMonthFirstLetter & "</text>"

)

VAR _yearTexts = 
CONCATENATEX (
_preparedTbl,
VAR _currentRowNum = [@rowNum]
VAR _positionCounter = (_currentRowNum - 1) * (_individualColumnWidth + _individualSpacing) + _individualSpacing + _individualColumnWidth/2
VAR _year = YEAR([@xAxisPeriod])
VAR _smallestMonthInYear = MINX(FILTER(_preparedTbl, YEAR([@xAxisPeriod]) = _year), [@xAxisPeriod])
VAR _year2Digit = RIGHT(_year, 2)
RETURN
IF (
[@xAxisPeriod] = _smallestMonthInYear,
"<text y='97%' x='" & _positionCounter & "%' fill='"&_darkGrey&"' text-anchor='middle' font-size='" & _dynamicFontSize & "'>" & _year2Digit & "</text>",
""
)
)

VAR SVGImageURL = _svgDeclaration & _svgHeader & _style & _initialText & _targetLine &  _columns  & _baseLine & _monthNumbers & _yearTexts & _svgEnd
RETURN
SVGImageURL

Have now added month letters (J,F,M,A,M,J,J,A,S,O,N,D etc)
Have also added Year number (2 digit) under first Month for that year. Works for multiple years.

Font size is dynamic also.