Skip to content

Commit 7d8efb8

Browse files
axelmohnenaxelmohnen
authored
New VizFrame Chart control demo (#448)
* New VizFrame Chart control demo Demo Class: Z2UI5_CL_DEMO_APP_312 List of methods: VIZ_FRAME VIZ_DATASET VIZ_FLATTENED_DATASET VIZ_DIMENSIONS VIZ_DIMENSION_DEFINITION VIZ_MEASURES VIZ_MEASURE_DEFINITION VIZ_FEEDS VIZ_FEED_ITEM * New VizFrame Chart control Demo class: Z2UI5_CL_DEMO_APP_312 List of methods: VIZ_FRAME VIZ_DATASET VIZ_FLATTENED_DATASET VIZ_DIMENSIONS VIZ_DIMENSION_DEFINITION VIZ_MEASURES VIZ_MEASURE_DEFINITION VIZ_FEEDS VIZ_FEED_ITEM * New VizFrame Chart control demo Demo class: Z2UI5_CL_DEMO_APP_312 List of methods: VIZ_FRAME VIZ_DATASET VIZ_FLATTENED_DATASET VIZ_DIMENSIONS VIZ_DIMENSION_DEFINITION VIZ_MEASURES VIZ_MEASURE_DEFINITION VIZ_FEEDS VIZ_FEED_ITEM
1 parent ad098dd commit 7d8efb8

File tree

3 files changed

+378
-0
lines changed

3 files changed

+378
-0
lines changed

‎src/z2ui5_cl_demo_app_000.clas.abap

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1818,6 +1818,13 @@ CLASS z2ui5_cl_demo_app_000 IMPLEMENTATION.
18181818
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
18191819
).
18201820

1821+
panel->generic_tile( header = 'VizFrame Charts'
1822+
subheader = ``
1823+
press = client->_event( 'Z2UI5_CL_DEMO_APP_312' )
1824+
mode = 'LineMode'
1825+
class = 'sapUiTinyMarginEnd sapUiTinyMarginBottom'
1826+
).
1827+
18211828
panel = page->panel( expandable = abap_false
18221829
expanded = abap_true
18231830
headertext = `Higher-Releases-Only`

‎src/z2ui5_cl_demo_app_312.clas.abap

Lines changed: 355 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,355 @@
1+
class Z2UI5_CL_DEMO_APP_312 definition
2+
public
3+
create public .
4+
5+
public section.
6+
7+
interfaces IF_SERIALIZABLE_OBJECT .
8+
interfaces Z2UI5_IF_APP .
9+
10+
types:
11+
BEGIN OF ts_data_chart,
12+
week TYPE string,
13+
revenue TYPE string,
14+
cost TYPE string,
15+
END OF ts_data_chart .
16+
types:
17+
tt_data_chart TYPE STANDARD TABLE OF ts_data_chart WITH DEFAULT KEY .
18+
types:
19+
BEGIN OF ts_combobox,
20+
key TYPE string,
21+
text TYPE string,
22+
END OF ts_combobox .
23+
types:
24+
tt_combobox TYPE STANDARD TABLE OF ts_combobox WITH KEY key .
25+
types:
26+
BEGIN OF ts_screen,
27+
viztype TYPE string,
28+
viztypesel TYPE string,
29+
END OF ts_screen .
30+
31+
data MS_SCREEN type TS_SCREEN .
32+
data MT_DATA_CHART type TT_DATA_CHART .
33+
data MV_PROP type STRING .
34+
data:
35+
mt_feed_values TYPE TABLE OF string .
36+
data CHECK_INITIALIZED type ABAP_BOOL .
37+
data MT_VIZTYPES type TT_COMBOBOX .
38+
protected section.
39+
40+
data CLIENT type ref to Z2UI5_IF_CLIENT .
41+
42+
methods ON_RENDERING .
43+
methods ON_EVENT .
44+
methods ON_INIT .
45+
private section.
46+
ENDCLASS.
47+
48+
49+
50+
CLASS Z2UI5_CL_DEMO_APP_312 IMPLEMENTATION.
51+
52+
53+
METHOD ON_EVENT.
54+
DATA: lt_param TYPE string_table,
55+
lv_message TYPE string.
56+
57+
* ---------- Get event parameter ------------------------------------------------------------------
58+
lt_param = client->get( )-t_event_arg.
59+
60+
CASE client->get( )-event.
61+
WHEN 'BACK'.
62+
client->nav_app_leave( ).
63+
64+
WHEN 'EVT_DATA_SELECT'.
65+
READ TABLE lt_param INTO lv_message INDEX 1.
66+
client->message_toast_display( text = lv_message ).
67+
68+
WHEN 'EVT_VIZTYPE_CHANGE'.
69+
70+
me->ms_screen-viztype = me->ms_screen-viztypesel.
71+
me->on_rendering( ).
72+
ENDCASE.
73+
74+
ENDMETHOD.
75+
76+
77+
METHOD ON_INIT.
78+
* ---------- Set vizframe chart data --------------------------------------------------------------
79+
me->mt_data_chart = VALUE #( ( week = 'Week 1 - 4'
80+
revenue = '431000.22'
81+
cost = '230000.00' )
82+
( week = 'Week 5 - 8'
83+
revenue = '494000.30'
84+
cost = '238000.00' )
85+
( week = 'Week 9 - 12'
86+
revenue = '491000.17'
87+
cost = '221000.00' )
88+
( week = 'Week 13 - 16'
89+
revenue = '536000.34'
90+
cost = '280000.00' )
91+
).
92+
* ---------- Set vizframe properties (optional) ---------------------------------------------------
93+
me->mv_prop = `{` && |\n| &&
94+
`"plotArea": {` && |\n| &&
95+
`"dataLabel": {` && |\n| &&
96+
`"formatString": "",` && |\n| &&
97+
`"visible": true` && |\n| &&
98+
`}` && |\n| &&
99+
`},` && |\n| &&
100+
`"valueAxis": {` && |\n| &&
101+
`"label": {` && |\n| &&
102+
`"formatString": ""` && |\n| &&
103+
`},` && |\n| &&
104+
`"title": {` && |\n| &&
105+
`"visible": true` && |\n| &&
106+
`}` && |\n| &&
107+
`},` && |\n| &&
108+
`"categoryAxis": {` && |\n| &&
109+
`"title": {` && |\n| &&
110+
`"visible": true` && |\n| &&
111+
`}` && |\n| &&
112+
`},` && |\n| &&
113+
`"title": {` && |\n| &&
114+
`"visible": true,` && |\n| &&
115+
`"text": "Vizframe Charts for 2UI5"` && |\n| &&
116+
`}` && |\n| &&
117+
`}`.
118+
119+
* ---------- Set vizframe feed item values for value axis -----------------------------------------
120+
me->mt_feed_values = VALUE #( ( `Revenue` )
121+
( `Cost` ) ) .
122+
123+
* ---------- Set viz type default -----------------------------------------------------------------
124+
me->ms_screen-viztype = 'column'.
125+
me->ms_screen-viztypesel = 'column'.
126+
127+
* ---------- Set VizFrame types -------------------------------------------------------------------
128+
me->mt_viztypes = VALUE #(
129+
( key = 'column'
130+
text = 'column' )
131+
* ( key = 'dual_column'
132+
* text = 'dual_column' )
133+
( key = 'bar'
134+
text = 'bar' )
135+
* ( key = 'dual_bar'
136+
* text = 'dual_bar' )
137+
( key = 'stacked_bar'
138+
text = 'stacked_bar' )
139+
( key = 'stacked_column'
140+
text = 'stacked_column' )
141+
( key = 'line'
142+
text = 'line' )
143+
* ( key = 'dual_line'
144+
* text = 'dual_line' )
145+
( key = 'combination'
146+
text = 'combination' )
147+
( key = 'bullet'
148+
text = 'bullet' )
149+
* ( key = 'time_bullet'
150+
* text = 'time_bullet' )
151+
* ( key = 'bubble'
152+
* text = 'bubble' )
153+
* ( key = 'time_bubble'
154+
* text = 'time_bubble' )
155+
* ( key = 'pie'
156+
* text = 'pie' )
157+
* ( key = 'donut'
158+
* text = 'donut' )
159+
* ( key = 'timeseries_column'
160+
* text = 'timeseries_column' )
161+
* ( key = 'timeseries_line'
162+
* text = 'timeseries_line' )
163+
* ( key = 'timeseries_scatter'
164+
* text = 'timeseries_scatter' )
165+
* ( key = 'timeseries_bubble'
166+
* text = 'timeseries_bubble' )
167+
* ( key = 'timeseries_stacked_column'
168+
* text = 'timeseries_stacked_column' )
169+
* ( key = 'timeseries_100_stacked_column'
170+
* text = 'timeseries_100_stacked_column' )
171+
* ( key = 'timeseries_bullet'
172+
* text = 'timeseries_bullet' )
173+
* ( key = 'timeseries_waterfall'
174+
* text = 'timeseries_waterfall' )
175+
* ( key = 'timeseries_stacked_combination scatter'
176+
* text = 'timeseries_stacked_combination scatter' )
177+
( key = 'vertical_bullet'
178+
text = 'vertical_bullet' )
179+
* ( key = 'dual_stacked_bar'
180+
* text = 'dual_stacked_bar' )
181+
( key = '100_stacked_bar'
182+
text = '100_stacked_bar' )
183+
* ( key = '100_dual_stacked_bar'
184+
* text = '100_dual_stacked_bar' )
185+
* ( key = 'dual_stacked_column'
186+
* text = 'dual_stacked_column' )
187+
( key = '100_stacked_column'
188+
text = '100_stacked_column' )
189+
* ( key = '100_dual_stacked_column'
190+
* text = '100_dual_stacked_column' )
191+
( key = 'stacked_combination'
192+
text = 'stacked_combination' )
193+
( key = 'horizontal_stacked_combination'
194+
text = 'horizontal_stacked_combination' )
195+
* ( key = 'dual_stacked_combination'
196+
* text = 'dual_stacked_combination' )
197+
* ( key = 'dual_horizontal_stacked_combination'
198+
* text = 'dual_horizontal_stacked_combination' )
199+
* ( key = 'heatmap'
200+
* text = 'heatmap' )
201+
* ( key = 'treemap'
202+
* text = 'treemap' )
203+
( key = 'waterfall'
204+
text = 'waterfall' )
205+
( key = 'horizontal_waterfall'
206+
text = 'horizontal_waterfall' )
207+
( key = 'area'
208+
text = 'area' )
209+
( key = 'radar'
210+
text = 'radar' )
211+
).
212+
213+
ENDMETHOD.
214+
215+
216+
METHOD ON_RENDERING.
217+
218+
DATA(lr_view) = z2ui5_cl_xml_view=>factory( ).
219+
220+
* ---------- Set dynamic page ---------------------------------------------------------------------
221+
DATA(lr_dyn_page) = lr_view->dynamic_page( showfooter = abap_false ).
222+
223+
* ---------- Get header title ---------------------------------------------------------------------
224+
DATA(lr_header_title) = lr_dyn_page->title( ns = 'f' )->get( )->dynamic_page_title( ).
225+
226+
* ---------- Set header title text ----------------------------------------------------------------
227+
lr_header_title->heading( ns = 'f' )->title( 'abap2UI5 - VizFrame Charts' ).
228+
229+
* ---------- Get page header area ----------------------------------------------------------------
230+
DATA(lr_header) = lr_dyn_page->header( ns = 'f' )->dynamic_page_header( pinnable = abap_true )->content( ns = 'f' ).
231+
232+
* ---------- Set Filter bar -----------------------------------------------------------------------
233+
DATA(lr_filter_bar) = lr_header->filter_bar( usetoolbar = 'false' )->filter_group_items( ).
234+
235+
* ---------- Set filter ---------------------------------------------------------------------------
236+
DATA(lr_filter) = lr_filter_bar->filter_group_item( name = 'VizFrameType'
237+
label = 'VizFrame type'
238+
groupname = |GroupVizFrameType|
239+
visibleinfilterbar = 'true'
240+
)->filter_control( ).
241+
242+
* ---------- Set combo box input field ------------------------------------------------------------
243+
lr_filter->combobox( selectedkey = client->_bind_edit( me->ms_screen-viztypesel )
244+
change = client->_event( val = 'EVT_VIZTYPE_CHANGE' )
245+
showclearicon = abap_true
246+
items = client->_bind( me->mt_viztypes )
247+
)->item(
248+
key = '{KEY}'
249+
text = '{TEXT}' ).
250+
251+
* ---------- Get page content area ----------------------------------------------------------------
252+
DATA(lr_content) = lr_dyn_page->content( ns = 'f' ).
253+
254+
* ---------- Set vizframe chart -------------------------------------------------------------------
255+
DATA(lr_vizframe) = lr_content->viz_frame(
256+
id = 'idVizFrame'
257+
* legendvisible =
258+
* vizcustomizations =
259+
vizproperties = me->mv_prop
260+
* vizscales =
261+
viztype = client->_bind( me->ms_screen-viztype )
262+
height = '500px'
263+
width = '100%'
264+
* uiconfig = `{applicationSet:'fiori'}`
265+
* visible =
266+
selectdata = client->_event( val = 'EVT_DATA_SELECT'
267+
t_arg = value #( ( `${$parameters>/data/0/data/}` ) ) ) ).
268+
269+
* ---------- Set vizframe dataset -----------------------------------------------------------------
270+
DATA(lr_dataset) = lr_vizframe->viz_dataset( ).
271+
272+
* ---------- Set vizframe flattened dataset --------------------------------------------------------
273+
DATA(lr_flatteneddataset) = lr_dataset->viz_flattened_dataset( data = client->_bind( me->mt_data_chart ) ).
274+
275+
* ---------- Set vizframe dimensions ---------------------------------------------------------------
276+
DATA(lr_dimensions) = lr_flatteneddataset->viz_dimensions( ).
277+
278+
* ---------- Set vizframe dimension ----------------------------------------------------------------
279+
DATA(lr_dimensions_def) = lr_dimensions->viz_dimension_definition(
280+
* axis =
281+
* datatype =
282+
* displayvalue =
283+
* identity =
284+
name = 'Week'
285+
* sorter =
286+
value = '{WEEK}' ).
287+
288+
* ---------- Set vizframe measures ----------------------------------------------------------------
289+
DATA(lr_measures) = lr_flatteneddataset->viz_measures( ).
290+
291+
* ---------- Set vizframe measure definition 1 ----------------------------------------------------
292+
DATA(lr_measures_def1) = lr_measures->viz_measure_definition(
293+
* format =
294+
* group =
295+
* identity =
296+
name = 'Revenue'
297+
* range =
298+
* unit =
299+
value = '{REVENUE}' ).
300+
301+
* ---------- Set vizframe measure definition 2 ----------------------------------------------------
302+
DATA(lr_measures_def2) = lr_measures->viz_measure_definition(
303+
* format =
304+
* group =
305+
* identity =
306+
name = 'Cost'
307+
* range =
308+
* unit =
309+
value = '{COST}' ).
310+
311+
312+
* ---------- Set vizframe feeds -------------------------------------------------------------------
313+
DATA(lr_feeds) = lr_vizframe->viz_feeds( ).
314+
315+
* ---------- Set vizframe feed for value axis -----------------------------------------------------
316+
DATA(lr_lr_feed_item1) = lr_feeds->viz_feed_item(
317+
id = 'valueAxisFeed'
318+
uid = 'valueAxis'
319+
type = 'Measure'
320+
values = client->_bind( me->mt_feed_values ) ).
321+
322+
* ---------- Set vizframe feed for category axis --------------------------------------------------
323+
DATA(lr_lr_feed_item2) = lr_feeds->viz_feed_item(
324+
id = 'categoryAxisFeed'
325+
uid = 'categoryAxis'
326+
type = 'Dimension'
327+
values = 'Week' ).
328+
329+
330+
client->view_display( lr_view->stringify( ) ).
331+
332+
ENDMETHOD.
333+
334+
335+
METHOD Z2UI5_IF_APP~MAIN.
336+
337+
me->client = client.
338+
339+
IF check_initialized = abap_false.
340+
check_initialized = abap_true.
341+
342+
* ---------- ON INIT ------------------------------------------------------------------------------
343+
me->on_init( ).
344+
345+
* ---------- ON RENDERING -------------------------------------------------------------------------
346+
me->on_rendering( ).
347+
RETURN.
348+
349+
ENDIF.
350+
351+
* ---------- ON EVENT -----------------------------------------------------------------------------
352+
me->on_event( ).
353+
354+
ENDMETHOD.
355+
ENDCLASS.

‎src/z2ui5_cl_demo_app_312.clas.xml

Lines changed: 16 additions & 0 deletions
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_312</CLSNAME>
7+
<LANGU>E</LANGU>
8+
<DESCRIPT>VizFrame Charts</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)