Skip to content

Commit 096c1b4

Browse files
choper725choper725
authored
update demo 148 - chartjs demo (#100)
1 parent cf57f2f commit 096c1b4

File tree

1 file changed

+154
-35
lines changed

1 file changed

+154
-35
lines changed

‎src/z2ui5_cl_demo_app_148.clas.abap‎

Lines changed: 154 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,45 @@
1-
class Z2UI5_CL_DEMO_APP_148 definition
2-
public
3-
create public .
4-
5-
public section.
6-
7-
interfaces IF_SERIALIZABLE_OBJECT .
8-
interfaces Z2UI5_IF_APP .
9-
10-
data CHECK_INITIALIZED type ABAP_BOOL .
11-
data MS_CHARTJS_CONFIG_BAR type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
12-
data MS_CHARTJS_CONFIG_BAR_t type TABLE OF Z2UI5_CL_CC_CHARTJS=>TY_CHART .
13-
data MS_CHARTJS_CONFIG_BAR2 type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
14-
data MS_CHARTJS_CONFIG_HBAR type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
15-
data MS_CHARTJS_CONFIG_LINE type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
16-
data MS_CHARTJS_CONFIG_AREA type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
17-
data MS_CHARTJS_CONFIG_PIE type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
18-
data MS_CHARTJS_CONFIG_BUBBLE type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
19-
data MS_CHARTJS_CONFIG_POLAR type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
20-
data MS_CHARTJS_CONFIG_DOUGHNUT type Z2UI5_CL_CC_CHARTJS=>TY_CHART .
1+
CLASS z2ui5_cl_demo_app_148 DEFINITION
2+
PUBLIC
3+
CREATE PUBLIC .
4+
5+
PUBLIC SECTION.
6+
7+
INTERFACES if_serializable_object .
8+
INTERFACES z2ui5_if_app .
9+
10+
DATA ls_dataset TYPE z2ui5_cl_cc_chartjs=>ty_dataset.
11+
DATA check_initialized TYPE abap_bool .
12+
13+
"bar charts
14+
DATA ms_chartjs_config_bar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
15+
DATA ms_chartjs_config_bar2 TYPE z2ui5_cl_cc_chartjs=>ty_chart .
16+
DATA ms_chartjs_config_hbar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
17+
18+
"venn chart - plugin
19+
DATA ms_chartjs_config_venn TYPE z2ui5_cl_cc_chartjs=>ty_chart .
20+
21+
"wordCloud
22+
DATA ms_chartjs_config_wordcloud TYPE z2ui5_cl_cc_chartjs=>ty_chart .
23+
24+
"line charts
25+
DATA ms_chartjs_config_line TYPE z2ui5_cl_cc_chartjs=>ty_chart .
26+
27+
"area charts
28+
DATA ms_chartjs_config_area TYPE z2ui5_cl_cc_chartjs=>ty_chart .
29+
30+
"pie charts
31+
DATA ms_chartjs_config_pie TYPE z2ui5_cl_cc_chartjs=>ty_chart .
32+
33+
"bubble charts
34+
DATA ms_chartjs_config_bubble TYPE z2ui5_cl_cc_chartjs=>ty_chart .
35+
36+
"polar charts
37+
DATA ms_chartjs_config_polar TYPE z2ui5_cl_cc_chartjs=>ty_chart .
38+
39+
"doughnut charts
40+
DATA ms_chartjs_config_doughnut TYPE z2ui5_cl_cc_chartjs=>ty_chart .
41+
42+
2143
PROTECTED SECTION.
2244

2345
METHODS z2ui5_on_rendering.
@@ -33,7 +55,7 @@ ENDCLASS.
3355
CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
3456

3557

36-
METHOD Z2UI5_IF_APP~MAIN.
58+
METHOD z2ui5_if_app~main.
3759

3860
me->client = client.
3961

@@ -43,8 +65,10 @@ CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
4365

4466
client->view_display( z2ui5_cl_xml_view=>factory( client
4567
)->_z2ui5( )->timer( finished = client->_event( `START` ) delayms = `0`
46-
)->_generic( ns = `html` name = `script` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>load_js( datalabels = abap_false
68+
)->_generic( ns = `html` name = `script` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>load_js( datalabels = abap_true
4769
autocolors = abap_false
70+
venn = abap_true
71+
wordcloud = abap_true
4872
) )->get_parent(
4973
)->_generic( ns = `html` name = `script` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>load_cc( )
5074
)->stringify( ) ).
@@ -56,17 +80,42 @@ CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
5680
ENDMETHOD.
5781

5882

59-
METHOD Z2UI5_ON_EVENT.
83+
METHOD z2ui5_on_event.
6084

6185
CASE client->get( )-event.
6286
WHEN 'UPDATE_CHART'.
6387
READ TABLE ms_chartjs_config_bar-data-datasets ASSIGNING FIELD-SYMBOL(<fs_bar>) INDEX 1.
6488
<fs_bar>-data = VALUE #( ( `11` ) ( `1` ) ( `1` ) ( `13` ) ( `15` ) ( `12` ) ( `13` ) ).
6589

66-
* ms_chartjs_config_bar-options-plugins-autocolors-mode = 'dataset'.
67-
6890
ms_chartjs_config_bar2-options-plugins-legend-position = `left`.
6991

92+
ms_chartjs_config_venn-data-labels = VALUE #( ( `Reading` )
93+
( `Maths` )
94+
( `GPS` )
95+
( `Reading ∩ Maths` )
96+
( `GPS ∩ Reading` )
97+
( `Maths ∩ GPS` )
98+
( `Reading ∩ Maths ∩ GPS` ) ).
99+
100+
CLEAR ls_dataset.
101+
ls_dataset-label = `At or Above Expected`.
102+
ls_dataset-background_color = `rgba(75, 192, 192, 0.2)`.
103+
ls_dataset-border_color = `rgba(75, 192, 192, 1)`.
104+
ls_dataset-data_venn = VALUE #(
105+
( sets = VALUE #( ( `Reading` ) ) value = `15%` )
106+
( sets = VALUE #( ( `Maths` ) ) value = `3%` )
107+
( sets = VALUE #( ( `GPS` ) ) value = `3%` )
108+
( sets = VALUE #( ( `Reading` ) ( `Maths` ) ) value = `3%` )
109+
( sets = VALUE #( ( `GPS` ) ( `Reading` ) ) value = `21%` )
110+
( sets = VALUE #( ( `Maths` ) ( `GPS` ) ) value = `0%` )
111+
( sets = VALUE #( ( `Reading` ) ( `Maths` ) ( `GPS` ) ) value = `13%` )
112+
).
113+
CLEAR ms_chartjs_config_venn-data-datasets.
114+
APPEND ls_dataset TO ms_chartjs_config_venn-data-datasets.
115+
116+
117+
ms_chartjs_config_wordcloud-options-plugins-datalabels-display = '-'.
118+
70119
client->view_model_update( ).
71120

72121
WHEN 'START'.
@@ -78,9 +127,9 @@ CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
78127
ENDMETHOD.
79128

80129

81-
METHOD Z2UI5_ON_INIT.
130+
METHOD z2ui5_on_init.
82131

83-
DATA ls_dataset TYPE z2ui5_cl_cc_chartjs=>ty_dataset.
132+
"bar
84133

85134
ms_chartjs_config_bar-type = 'bar'.
86135
ms_chartjs_config_bar-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ( `Black` ) ).
@@ -124,10 +173,68 @@ CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
124173
ms_chartjs_config_bar2-options-plugins-datalabels-text_align = `center`.
125174
ms_chartjs_config_bar2-options-plugins-datalabels-color = `white`.
126175

176+
177+
"venn
178+
ms_chartjs_config_venn-type = 'venn'.
179+
ms_chartjs_config_venn-data-labels = VALUE #( ( `Soccer` )
180+
( `Tennis` )
181+
( `Volleyball` )
182+
( `Soccer ∩ Tennis` )
183+
( `Soccer ∩ Volleyball` )
184+
( `Tennis ∩ Volleyball` )
185+
( `Soccer ∩ Tennis ∩ Volleyball` ) ).
186+
187+
CLEAR ls_dataset.
188+
ls_dataset-label = `Sports`.
189+
ls_dataset-data_venn = VALUE #(
190+
( sets = VALUE #( ( `Soccer` ) ) value = `2` )
191+
( sets = VALUE #( ( `Tennis` ) ) value = `0` )
192+
( sets = VALUE #( ( `Volleyball` ) ) value = `1` )
193+
( sets = VALUE #( ( `Soccer` ) ( `Tennis` ) ) value = `1` )
194+
( sets = VALUE #( ( `Soccer` ) ( `Volleyball` ) ) value = `0` )
195+
( sets = VALUE #( ( `Tennis` ) ( `Volleyball` ) ) value = `1` )
196+
( sets = VALUE #( ( `Soccer` ) ( `Tennis` ) ( `Volleyball` ) ) value = `1` )
197+
).
198+
199+
APPEND ls_dataset TO ms_chartjs_config_venn-data-datasets.
200+
201+
"wordcloud
202+
203+
ms_chartjs_config_wordcloud-type = `wordCloud`.
204+
ms_chartjs_config_wordcloud-data-labels = VALUE #(
205+
( `Hello` )
206+
( `world` )
207+
( `normally` )
208+
( `you` )
209+
( `want` )
210+
( `more` )
211+
( `words` )
212+
( `than` )
213+
( `this` )
214+
).
215+
CLEAR ls_dataset.
216+
ls_dataset-label = `DS`.
217+
ls_dataset-data = VALUE #(
218+
( `90` )
219+
( `80` )
220+
( `70` )
221+
( `60` )
222+
( `50` )
223+
( `40` )
224+
( `30` )
225+
( `20` )
226+
( `10` )
227+
).
228+
229+
APPEND ls_dataset TO ms_chartjs_config_wordcloud-data-datasets.
230+
231+
"disable datalabels
232+
ms_chartjs_config_wordcloud-options-plugins-datalabels-display = '-'.
233+
127234
ENDMETHOD.
128235

129236

130-
METHOD Z2UI5_ON_RENDERING.
237+
METHOD z2ui5_on_rendering.
131238

132239
DATA(view) = z2ui5_cl_xml_view=>factory( ).
133240

@@ -151,18 +258,30 @@ CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
151258
DATA(vl1) = car->vertical_layout( width = `100%` ).
152259
DATA(fb1) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
153260
DATA(fb2) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
154-
* fb1->vbox( justifycontent = `Center`
155-
* )->_z2ui5( )->chartjs( canvas_id = `bar`
156-
* height = `300`
157-
* width = `400`
158-
* config = client->_bind_edit( val = ms_chartjs_config_bar pretty_name = 'X' compress = abap_true )
159-
* ).
160261
fb1->vbox( justifycontent = `Center`
161-
)->_z2ui5( )->chartjs( canvas_id = `bar2`
262+
)->_z2ui5( )->chartjs( canvas_id = `bar`
162263
height = `300`
163264
width = `400`
265+
config = client->_bind_edit( val = ms_chartjs_config_bar pretty_name = 'X' compress = abap_true )
266+
).
267+
fb1->vbox( justifycontent = `Center`
268+
)->_z2ui5( )->chartjs( canvas_id = `bar2`
269+
height = `300`
270+
width = `600`
164271
config = client->_bind_edit( val = ms_chartjs_config_bar2 pretty_name = 'X' compress = abap_true )
165272
).
273+
fb2->vbox( justifycontent = `Center`
274+
)->_z2ui5( )->chartjs( canvas_id = `venn`
275+
height = `300`
276+
width = `600`
277+
config = client->_bind_edit( val = ms_chartjs_config_venn pretty_name = 'X' compress = abap_true )
278+
).
279+
fb2->vbox( justifycontent = `Center`
280+
)->_z2ui5( )->chartjs( canvas_id = `wordCloud`
281+
height = `300`
282+
width = `600`
283+
config = client->_bind_edit( val = ms_chartjs_config_wordcloud pretty_name = 'X' compress = abap_true )
284+
).
166285

167286

168287
client->view_display( page->stringify( ) ).

0 commit comments

Comments
 (0)