Skip to content

Commit 87d8f99

Browse files
oblomov-devoblomov-dev
committed
update
1 parent eaac443 commit 87d8f99

3 files changed

+205
-1
lines changed

‎src/z2ui5_cl_demo_app_147.clas.xml

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<VSEOCLASS>
66
<CLSNAME>Z2UI5_CL_DEMO_APP_147</CLSNAME>
77
<LANGU>E</LANGU>
8-
<DESCRIPT>chartjs demo</DESCRIPT>
8+
<DESCRIPT>chartjs demo I</DESCRIPT>
99
<STATE>1</STATE>
1010
<CLSCCINCL>X</CLSCCINCL>
1111
<FIXPT>X</FIXPT>

‎src/z2ui5_cl_demo_app_148.clas.abap

+188
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
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 .
21+
PROTECTED SECTION.
22+
23+
METHODS z2ui5_on_rendering.
24+
METHODS z2ui5_on_event.
25+
METHODS z2ui5_on_init.
26+
27+
PRIVATE SECTION.
28+
DATA client TYPE REF TO z2ui5_if_client.
29+
ENDCLASS.
30+
31+
32+
33+
CLASS Z2UI5_CL_DEMO_APP_148 IMPLEMENTATION.
34+
35+
36+
* <SIGNATURE>---------------------------------------------------------------------------------------+
37+
* | Instance Public Method Z2UI5_CL_DEMO_APP_147TEST->Z2UI5_IF_APP~MAIN
38+
* +-------------------------------------------------------------------------------------------------+
39+
* | [--->] CLIENT TYPE REF TO Z2UI5_IF_CLIENT
40+
* +--------------------------------------------------------------------------------------</SIGNATURE>
41+
METHOD Z2UI5_IF_APP~MAIN.
42+
43+
me->client = client.
44+
45+
IF check_initialized = abap_false.
46+
check_initialized = abap_true.
47+
z2ui5_on_init( ).
48+
49+
client->view_display( z2ui5_cl_xml_view=>factory( client
50+
)->_z2ui5( )->timer( finished = client->_event( `START` ) delayms = `0`
51+
)->_generic( ns = `html` name = `script` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>load_js( datalabels = abap_false
52+
autocolors = abap_false
53+
) )->get_parent(
54+
)->_generic( ns = `html` name = `script` )->_cc_plain_xml( z2ui5_cl_cc_chartjs=>load_cc( )
55+
56+
)->stringify( ) ).
57+
58+
59+
ENDIF.
60+
61+
z2ui5_on_event( ).
62+
63+
ENDMETHOD.
64+
65+
66+
* <SIGNATURE>---------------------------------------------------------------------------------------+
67+
* | Instance Protected Method Z2UI5_CL_DEMO_APP_147TEST->Z2UI5_ON_EVENT
68+
* +-------------------------------------------------------------------------------------------------+
69+
* +--------------------------------------------------------------------------------------</SIGNATURE>
70+
METHOD Z2UI5_ON_EVENT.
71+
72+
CASE client->get( )-event.
73+
WHEN 'UPDATE_CHART'.
74+
* READ TABLE ms_chartjs_config_bar-data-datasets ASSIGNING FIELD-SYMBOL(<fs_bar>) INDEX 1.
75+
* <fs_bar>-data = VALUE #( ( `11` ) ( `1` ) ( `1` ) ( `13` ) ( `15` ) ( `12` ) ( `13` ) ).
76+
77+
ms_chartjs_config_bar-options-plugins-autocolors-mode = 'dataset'.
78+
79+
WHEN 'START'.
80+
z2ui5_on_rendering( ).
81+
WHEN 'BACK'.
82+
client->nav_app_leave( client->get_app( client->get( )-s_draft-id_prev_app_stack ) ).
83+
ENDCASE.
84+
85+
ENDMETHOD.
86+
87+
88+
* <SIGNATURE>---------------------------------------------------------------------------------------+
89+
* | Instance Protected Method Z2UI5_CL_DEMO_APP_147TEST->Z2UI5_ON_INIT
90+
* +-------------------------------------------------------------------------------------------------+
91+
* +--------------------------------------------------------------------------------------</SIGNATURE>
92+
METHOD Z2UI5_ON_INIT.
93+
94+
DATA ls_dataset TYPE z2ui5_cl_cc_chartjs=>ty_dataset.
95+
96+
ms_chartjs_config_bar-type = 'bar'.
97+
ms_chartjs_config_bar-data-labels = VALUE #( ( `Red` ) ( `Blue` ) ( `Yellow` ) ( `Green` ) ( `Purple` ) ( `Orange` ) ).
98+
99+
ls_dataset-border_width = 1.
100+
ls_dataset-label = `# of Votes`.
101+
ls_dataset-rtl = abap_true.
102+
ls_dataset-data = VALUE #( ( `1` ) ( `12` ) ( `19` ) ( `3` ) ( `5` ) ( `2` ) ( `3` ) ).
103+
APPEND ls_dataset TO ms_chartjs_config_bar-data-datasets.
104+
105+
ms_chartjs_config_bar-options-plugins-autocolors-mode = 'data'.
106+
ms_chartjs_config_bar-options-plugins-datalabels-text_align = `center`.
107+
ms_chartjs_config_bar-options-scales-y-begin_at_zero = abap_true.
108+
109+
110+
111+
ms_chartjs_config_bar2-type = 'bar'.
112+
ms_chartjs_config_bar2-data-labels = VALUE #( ( `Jan` ) ( `Feb` ) ( `Mar` ) ( `Apr` ) ( `May` ) ( `Jun` ) ).
113+
114+
CLEAR ls_dataset.
115+
ls_dataset-label = 'Fully Rounded'.
116+
ls_dataset-border_width = 2.
117+
ls_dataset-border_radius = 200.
118+
ls_dataset-border_skipped = abap_false.
119+
ls_dataset-data = VALUE #( ( `1` ) ( `-12` ) ( `19` ) ( `3` ) ( `5` ) ( `-2` ) ( `3` ) ).
120+
APPEND ls_dataset TO ms_chartjs_config_bar2-data-datasets.
121+
122+
CLEAR ls_dataset.
123+
ls_dataset-label = 'Small Radius'.
124+
ls_dataset-border_width = 2.
125+
ls_dataset-border_radius = 5.
126+
ls_dataset-border_skipped = abap_false.
127+
ls_dataset-data = VALUE #( ( `11` ) ( `2` ) ( `-3` ) ( `13` ) ( `-9` ) ( `7` ) ( `-4` ) ).
128+
APPEND ls_dataset TO ms_chartjs_config_bar2-data-datasets.
129+
130+
ms_chartjs_config_bar2-options-responsive = abap_true.
131+
ms_chartjs_config_bar2-options-plugins-legend-position = `top`.
132+
ms_chartjs_config_bar2-options-plugins-title-display = abap_true.
133+
ms_chartjs_config_bar2-options-plugins-title-text = `Bar Chart`.
134+
135+
ms_chartjs_config_bar2-options-plugins-autocolors-offset = 11.
136+
ms_chartjs_config_bar2-options-plugins-autocolors-mode = 'dataset'.
137+
ms_chartjs_config_bar2-options-plugins-datalabels-text_align = `center`.
138+
ms_chartjs_config_bar2-options-plugins-datalabels-color = `white`.
139+
140+
ENDMETHOD.
141+
142+
143+
* <SIGNATURE>---------------------------------------------------------------------------------------+
144+
* | Instance Protected Method Z2UI5_CL_DEMO_APP_147TEST->Z2UI5_ON_RENDERING
145+
* +-------------------------------------------------------------------------------------------------+
146+
* +--------------------------------------------------------------------------------------</SIGNATURE>
147+
METHOD Z2UI5_ON_RENDERING.
148+
149+
DATA(view) = z2ui5_cl_xml_view=>factory( ).
150+
151+
DATA(page) = view->shell(
152+
)->page(
153+
showheader = xsdbool( abap_false = client->get( )-check_launchpad_active )
154+
title = 'abap2UI5 - ChartJS demo'
155+
navbuttonpress = client->_event( 'BACK' )
156+
enablescrolling = abap_false
157+
shownavbutton = abap_true ).
158+
159+
page->header_content(
160+
)->link( text = 'Demo' target = '_blank' href = `https://twitter.com/abap2UI5/status/1628701535222865922`
161+
)->link( text = 'Source_Code' target = '_blank' href = z2ui5_cl_demo_utility=>factory( client )->app_get_url_source_code( )
162+
)->button( text = 'Update Chart' press = client->_event( 'UPDATE_CHART' )
163+
)->get_parent( ).
164+
165+
166+
* DATA(vbox) = page->vbox( justifycontent = `Center` ).
167+
DATA(car) = page->carousel( class = `sapUiContentPadding` ).
168+
DATA(vl1) = car->vertical_layout( width = `100%` ).
169+
DATA(fb1) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
170+
DATA(fb2) = vl1->flex_box( width = `100%` height = `50%` justifycontent = `SpaceAround` ).
171+
fb1->vbox( justifycontent = `Center`
172+
)->_z2ui5( )->chartjs( canvas_id = `bar`
173+
height = `300`
174+
width = `400`
175+
config = client->_bind( val = ms_chartjs_config_bar pretty_name = 'X' compress = abap_true )
176+
).
177+
* fb1->vbox( justifycontent = `Center`
178+
* )->_z2ui5( )->chartjs( canvas_id = `bar2`
179+
* height = `300`
180+
* width = `400`
181+
* config = client->_bind_edit( val = ms_chartjs_config_bar2 pretty_name = 'X' compress = abap_true )
182+
* ).
183+
184+
185+
client->view_display( page->stringify( ) ).
186+
187+
ENDMETHOD.
188+
ENDCLASS.

‎src/z2ui5_cl_demo_app_148.clas.xml

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<abapGit version="v1.0.0" serializer="LCL_OBJECT_CLAS" serializer_version="v1.0.0">
3+
<asx:abap xmlns:asx="http://www.sap.com/abapxml" version="1.0">
4+
<asx:values>
5+
<VSEOCLASS>
6+
<CLSNAME>Z2UI5_CL_DEMO_APP_148</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>chartjs demo II</DESCRIPT>
9+
<STATE>1</STATE>
10+
<CLSCCINCL>X</CLSCCINCL>
11+
<FIXPT>X</FIXPT>
12+
<UNICODE>X</UNICODE>
13+
</VSEOCLASS>
14+
</asx:values>
15+
</asx:abap>
16+
</abapGit>

0 commit comments

Comments
 (0)