chartjsv2-pie.vtl

#** ===========================================================================
CHARTJS v2 PIE

This Confluence user macro adds an animated pie chart to your page.

Version:    1.1.0
Updated:    2021-01-08
Author/s:   George Lewe
Source:     https://github.com/glewe/confluence-user-macros
License:    GNU LGPLv3

Macro Body processing:  No macro body
*#

#** ---------------------------------------------------------------------------
PARAMETER
*#
## @param ChartID:title=Chart ID|type=string|required=true|desc=Enter a unique (!) identifier for this chart on your page. Use no blanks.|default=MyPieChart
## @param ChartTitle:title=Chart Title|type=string|required=false|desc=Enter the title of your chart.|default=My Pie Chart
## @param ChartWidth:title=Chart Width|type=string|required=true|desc=Enter the width of your chart in pixels or percent here. The height will be automatically adjusted.|default=500px
## @param BorderWidth:title=Chart Border Width|type=string|required=false|desc=Enter the width of the chart border followed by 'px'. Enter 0px for no border.|default=1px
## @param BorderColor:title=Chart Border Color|type=string|required=false|desc=Enter the border color as a hex value starting with a hash.|default=#d7d7d7
## @param ShowTitle:title=Show Chart Title|type=boolean|desc=Select whether the chart title shall be displayed.|default=true
## @param Doughnut:title=Show as Doughnut|type=boolean|desc=Select whether the chart shall be displayed as a doughnut.|default=false
## @param DataLabels:title=Dataset Labels|type=string|required=true|desc=Enter a comma separated list of your datasete labels. They apply to all datasets. Make sure you enter as much labels as you enter dataset values below.|default=Apples,Oranges,Bananas
## @param DataLegend:title=Dataset 1 Legend|type=string|required=true|desc=Enter a legend for the dataset.|default=Maximum
## @param DataValues:title=Dataset 1 Values|type=string|required=true|desc=Enter a comma separated list of your slice values.|default=18,29,110
## @param DataColors:title=Dataset 1 Colors|type=string|required=true|desc=Enter a comma separated list of your slice colors.|default=#F7464A,#46BFBD,#FDB45C
## @param ShowSecondSet:title=Show Second Dataset|type=boolean|desc=Select whether the chart shall show a second dataset. If unchecked, the values below have no effect.|default=false
## @param Data2Legend:title=Dataset 2 Legend|type=string|required=true|desc=Enter a legend for the dataset.|default=Maximum
## @param Data2Values:title=Dataset 2 Values|type=string|required=true|desc=Enter a comma separated list of your slice values.|default=18,29,110
## @param Data2Colors:title=Dataset 2 Colors|type=string|required=true|desc=Enter a comma separated list of your slice colors.|default=#F7464A,#46BFBD,#FDB45C

#** ---------------------------------------------------------------------------
PROCESS INPUT
*#
#if (!$paramChartTitle)
    #set ($paramTitle="My Pie Chart")
#end

#if ($paramDoughnut == true) 
    #set ($paramType = "doughnut")
#else
    #set ($paramType = "pie")
#end

#** ---------------------------------------------------------------------------
OUTPUT
*#
<!-- User Macro: ChartJSv2 Pie START -->
<div style="width: $paramChartWidth;">
    #if ($paramShowTitle == true)
    <div style="text-align: center; font-weight: bold;">$paramChartTitle</div>
    #end
    <canvas id="$paramChartID" data-charttype="$paramType" style="border: $paramBorderWidth solid $paramBorderColor; border-radius: 4px; padding: 10px;"></canvas>
</div>

<script type="text/javascript">
//<![CDATA[
    var data$paramChartID = {
    datasets: [
        {
            data: [
                #set( $myDataValues = $paramDataValues.split(","))
                #foreach( $dataValue in $myDataValues )
                $dataValue,
                #end
            ],
            backgroundColor: [
                #set( $myDataColors = $paramDataColors.split(","))
                #foreach( $dataColor in $myDataColors )
                '$dataColor',
                #end
            ],
            label: '$paramDataLegend'
        }
        #if ($paramShowSecondSet == true)
        ,{
            data: [
                #set( $myData2Values = $paramData2Values.split(","))
                #foreach( $data2Value in $myData2Values )
                $data2Value,
                #end
            ],
            backgroundColor: [
                #set( $myData2Colors = $paramData2Colors.split(","))
                #foreach( $data2Color in $myData2Colors )
                '$data2Color',
                #end
            ],
            label: '$paramData2Legend'
        }
        #end
    ],
    labels: [
        #set( $myDataLabels = $paramDataLabels.split(","))
        #foreach( $dataLabel in $myDataLabels )
            "$dataLabel",
        #end
    ]
    }
//]]>
</script>
<!-- User Macro: ChartJSv2 Pie END -->