-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathchartjsv2-line.vtl
164 lines (156 loc) · 8.84 KB
/
chartjsv2-line.vtl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
#** ===========================================================================
CHARTJS v2 LINE
This Confluence user macro adds an animated line chart to your page.
Version: 1.1.1
Updated: 2024-09-20
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=MyLineChart
## @param ChartTitle:title=Chart Title|type=string|required=false|desc=Enter the title of your chart.|default=My Line 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 BezierCurve:title=Bezier Curve|type=boolean|desc=Use bezier curve between data points. If unchecked, straight lines are used.|default=false
## @param DataLabels:title=Dataset Labels|type=string|required=true|desc=Enter a comma separated list of your data labels. Make sure you enter as much labels as you enter values below.|default=Apples,Oranges,Bananas,Mangos,Grapes
## @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 data values. Make sure you enter as much values as you enter labels above.|default=18,29,40,34,24
## @param DataColor:title=Dataset 1 Color|type=string|required=false|desc=Enter the color of the dataset here in the form of three decimal values for R, G and B separated by a comma.|default=151,187,205
## @param DataFill:title=Dataset 1 Colorfill|type=boolean|required=false|desc=Select whether the area below the line shall be filled with color.|default=true
## @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=Minimum
## @param Data2Values:title=Dataset 2 Values|type=string|required=true|desc=Enter a comma separated list of your data values. Make sure you enter as much values as you entered labels above.|default=10,12,20,14,4
## @param Data2Color:title=Dataset 2 Color|type=string|required=false|desc=Enter the color of the second dataset here in the form of three decimal values for R, G and B separated by a comma.|default=179,179,0
## @param Data2Fill:title=Dataset 2 Colorfill|type=boolean|required=false|desc=Select whether the area below the line shall be filled with color.|default=true
## @param ShowThirdSet:title=Show Third Dataset|type=boolean|desc=Select whether the chart shall show a second dataset. If unchecked, the values below have no effect.|default=false
## @param Data3Legend:title=Dataset 3 Legend|type=string|required=true|desc=Enter a legend for the dataset.|default=Minimum
## @param Data3Values:title=Dataset 3 Values|type=string|required=true|desc=Enter a comma separated list of your data values. Make sure you enter as much values as you entered labels above.|default=10,12,20,14,4
## @param Data3Color:title=Dataset 3 Color|type=string|required=false|desc=Enter the color of the second dataset here in the form of three decimal values for R, G and B separated by a comma.|default=179,179,0
## @param Data3Fill:title=Dataset 3 Colorfill|type=boolean|required=false|desc=Select whether the area below the line shall be filled with color.|default=true
## @param ShowFourthSet:title=Show Fourth Dataset|type=boolean|desc=Select whether the chart shall show a second dataset. If unchecked, the values below have no effect.|default=false
## @param Data4Legend:title=Dataset 4 Legend|type=string|required=true|desc=Enter a legend for the dataset.|default=Minimum
## @param Data4Values:title=Dataset 4 Values|type=string|required=true|desc=Enter a comma separated list of your data values. Make sure you enter as much values as you entered labels above.|default=10,12,20,14,4
## @param Data4Color:title=Dataset 4 Color|type=string|required=false|desc=Enter the color of the second dataset here in the form of three decimal values for R, G and B separated by a comma.|default=179,179,0
## @param Data4Fill:title=Dataset 4 Colorfill|type=boolean|required=false|desc=Select whether the area below the line shall be filled with color.|default=true
#** ---------------------------------------------------------------------------
PROCESS INPUT
*#
#if (!$paramChartTitle)
#set ($paramTitle="My Line Chart")
#end
#** ---------------------------------------------------------------------------
OUTPUT
*#
<!-- User Macro: ChartJSv2 Line START -->
<div style="width: $paramChartWidth;">
#if ($paramShowTitle == true)
<div style="text-align: center; font-weight: bold;">$paramChartTitle</div>
#end
<canvas id="$paramChartID" data-charttype="line" style="border: $paramBorderWidth solid $paramBorderColor; border-radius: 4px; padding: 10px;"></canvas>
</div>
<script type="text/javascript">
//<![CDATA[
var data$paramChartID = {
labels: [
#set( $myLabels = $paramDataLabels.split(","))
#foreach( $item in $myLabels )
"$item",
#end
],
datasets: [
{
label: '$paramDataLegend',
backgroundColor: "rgba($paramDataColor,0.2)",
borderColor: "rgba($paramDataColor,1)",
borderWidth: 1,
pointBackgroundColor: "rgba($paramDataColor,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba($paramDataColor,1)",
pointHoverBorderWidth: 1,
fill : #if ($paramDataFill==true) true #else false #end ,
tension : #if ($paramBezierCurve==true) 0.4 #else 0 #end ,
data: [
#set( $myValues = $paramDataValues.split(","))
#foreach( $item in $myValues )
$item,
#end
]
}
#if ($paramShowSecondSet == true)
, {
label: '$paramData2Legend',
backgroundColor: "rgba($paramData2Color,0.2)",
borderColor: "rgba($paramData2Color,1)",
borderWidth: 1,
pointBackgroundColor: "rgba($paramData2Color,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba($paramData2Color,1)",
pointHoverBorderWidth: 1,
fill : #if ($paramData2Fill==true) true #else false #end ,
tension : #if ($paramBezierCurve==true) 0.4 #else 0 #end ,
data: [
#set( $myValues = $paramData2Values.split(","))
#foreach( $item in $myValues )
$item,
#end
]
}
#end
#if ($paramShowThirdSet == true)
, {
label: '$paramData3Legend',
backgroundColor: "rgba($paramData3Color,0.2)",
borderColor: "rgba($paramData3Color,1)",
borderWidth: 1,
pointBackgroundColor: "rgba($paramData3Color,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba($paramData3Color,1)",
pointHoverBorderWidth: 1,
fill : #if ($paramData3Fill==true) true #else false #end ,
tension : #if ($paramBezierCurve==true) 0.4 #else 0 #end ,
data: [
#set( $myValues = $paramData3Values.split(","))
#foreach( $item in $myValues )
$item,
#end
]
}
#end
#if ($paramShowFourthSet == true)
, {
label: '$paramData4Legend',
backgroundColor: "rgba($paramData4Color,0.2)",
borderColor: "rgba($paramData4Color,1)",
borderWidth: 1,
pointBackgroundColor: "rgba($paramData4Color,1)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba($paramData4Color,1)",
pointHoverBorderWidth: 1,
fill : #if ($paramData4Fill==true) true #else false #end ,
tension : #if ($paramBezierCurve==true) 0.4 #else 0 #end ,
data: [
#set( $myValues = $paramData4Values.split(","))
#foreach( $item in $myValues )
$item,
#end
]
}
#end
]
}
var options$paramChartID = {
responsive: true
}
//]]>
</script>
<!-- User Macro: ChartJSv2 Line END -->