refactoring and visualization (#121)

* refactoring && to ||

* refactoring

* refactoring

* renaming

* refactoring

* refactoring and visualization
This commit is contained in:
oblomov 2023-03-23 13:47:19 +01:00
parent 8283f76a0c
commit 9bdc16f140
9 changed files with 365 additions and 217 deletions

View File

@ -132,6 +132,23 @@ CLASS Z2UI5_CL_APP_DEMO_00 IMPLEMENTATION.
)->flex_item_data(
growfactor = '3'
styleclass = 'sapUiTinyMargin' ).
* form->flex_box( class = 'columns'
* )->button(
* text = 'Visualization'
* press = client->_event( 'z2ui5_cl_app_demo_16' ) )->get(
* )->layout_data(
* )->flex_item_data(
* growfactor = '1'
* styleclass = 'sapUiTinyMargin'
* )->get_parent( )->get_parent(
* )->text( `Use the sap.suite.ui.microchart controls to visualize data - `
* && 'choose between bar charts, donut charts, line charts or radial charts and make your boring data beautiful' )->get(
* )->layout_data(
* )->flex_item_data(
* growfactor = '3'
* styleclass = 'sapUiTinyMargin' ).
ENDCASE.
ENDMETHOD.

View File

@ -122,9 +122,8 @@ CLASS z2ui5_cl_app_demo_02 IMPLEMENTATION.
title = 'abap2UI5 - Selection-Screen Example'
navbuttonpress = client->_event( 'BACK' )
)->header_content(
)->link(
text = 'Source_Code'
href = client->get( )-s_request-url_source_code
)->link( text = 'Demo' href = `https://twitter.com/OblomovDev/status/1628701535222865922`
)->link( text = 'Source_Code' href = client->get( )-s_request-url_source_code
)->get_parent( ).
DATA(grid) = page->grid( 'L6 M12 S12'

View File

@ -136,79 +136,6 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
ENDMETHOD.
METHOD z2ui5_on_init.
mt_suggestion = VALUE #(
( descr = 'this is the color Green' value = 'GREEN' )
( descr = 'this is the color Blue' value = 'BLUE' )
( descr = 'this is the color Black' value = 'BLACK' )
( descr = 'this is the color Grey' value = 'GREY' )
( descr = 'this is the color Blue2' value = 'BLUE2' )
( descr = 'this is the color Blue3' value = 'BLUE3' ) ).
mt_suggestion_city = VALUE #(
( value = 'London' descr = 'London' )
( value = 'Paris' descr = 'Paris' )
( value = 'Rome' descr = 'Rome' ) ).
mt_employees = VALUE #(
( city = 'London' name = 'Tom' lastname = 'lastname1' nr = '00001' )
( city = 'London' name = 'Tom2' lastname = 'lastname2' nr = '00002' )
( city = 'London' name = 'Tom3' lastname = 'lastname3' nr = '00003' )
( city = 'London' name = 'Tom4' lastname = 'lastname4' nr = '00004' )
( city = 'Rome' name = 'Michaela1' lastname = 'lastname5' nr = '00005' )
( city = 'Rome' name = 'Michaela2' lastname = 'lastname6' nr = '00006' )
( city = 'Rome' name = 'Michaela3' lastname = 'lastname7' nr = '00007' )
( city = 'Rome' name = 'Michaela4' lastname = 'lastname8' nr = '00008' )
( city = 'Paris' name = 'Hermine1' lastname = 'lastname9' nr = '00009' )
( city = 'Paris' name = 'Hermine2' lastname = 'lastname10' nr = '00010' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' ) ).
ENDMETHOD.
METHOD z2ui5_on_rendering.
DATA(page) = client->factory_view( 'MAIN'
@ -224,7 +151,7 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
href = client->get( )-s_request-url_source_code
)->get_parent( ).
DATA(form) = page->grid( 'XL12 L12 M12 S12'
DATA(form) = page->grid( 'L7 M7 S7'
)->content( 'l'
)->simple_form( 'Input with Value Help'
)->content( 'f' ).
@ -356,4 +283,78 @@ CLASS Z2UI5_CL_APP_DEMO_09 IMPLEMENTATION.
type = 'Emphasized' ).
ENDMETHOD.
METHOD z2ui5_on_init.
mt_suggestion = VALUE #(
( descr = 'this is the color Green' value = 'GREEN' )
( descr = 'this is the color Blue' value = 'BLUE' )
( descr = 'this is the color Black' value = 'BLACK' )
( descr = 'this is the color Grey' value = 'GREY' )
( descr = 'this is the color Blue2' value = 'BLUE2' )
( descr = 'this is the color Blue3' value = 'BLUE3' ) ).
mt_suggestion_city = VALUE #(
( value = 'London' descr = 'London' )
( value = 'Paris' descr = 'Paris' )
( value = 'Rome' descr = 'Rome' ) ).
mt_employees = VALUE #(
( city = 'London' name = 'Tom' lastname = 'lastname1' nr = '00001' )
( city = 'London' name = 'Tom2' lastname = 'lastname2' nr = '00002' )
( city = 'London' name = 'Tom3' lastname = 'lastname3' nr = '00003' )
( city = 'London' name = 'Tom4' lastname = 'lastname4' nr = '00004' )
( city = 'Rome' name = 'Michaela1' lastname = 'lastname5' nr = '00005' )
( city = 'Rome' name = 'Michaela2' lastname = 'lastname6' nr = '00006' )
( city = 'Rome' name = 'Michaela3' lastname = 'lastname7' nr = '00007' )
( city = 'Rome' name = 'Michaela4' lastname = 'lastname8' nr = '00008' )
( city = 'Paris' name = 'Hermine1' lastname = 'lastname9' nr = '00009' )
( city = 'Paris' name = 'Hermine2' lastname = 'lastname10' nr = '00010' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' )
( city = 'Paris' name = 'Hermine3' lastname = 'lastname11' nr = '00011' ) ).
ENDMETHOD.
ENDCLASS.

View File

@ -5,7 +5,7 @@
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_APP_DEMO_09</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>selscreen - f4 help</DESCRIPT>
<DESCRIPT>selscreen - value help</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>

View File

@ -161,7 +161,7 @@ CLASS Z2UI5_CL_APP_DEMO_13 IMPLEMENTATION.
DATA(page) = client->factory_view( 'IMPORT_TABLE'
)->page(
title = 'abap2ui5 - Table Maintenance'
title = 'abap2UI5 - Table Maintenance'
navbuttonpress = client->_event( 'BACK' )
)->header_content(
)->link(

View File

@ -45,53 +45,68 @@ ENDCLASS.
CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
CLASS z2ui5_cl_app_demo_16 IMPLEMENTATION.
METHOD render_tab_bar.
DATA(tab) = container->tab( text = 'Bar Chart' selected = client->_bind( mv_tab_bar_active ) ).
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
DATA(grid) = container->tab(
text = 'Bar Chart'
selected = client->_bind( mv_tab_bar_active )
)->grid( 'XL6 L6 M6 S12' ).
grid->link(
text = 'Go to the SAP Demos for Interactive bar Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveBarChart/sample/sap.suite.ui.microchart.sample.InteractiveBarChart'
).
text = 'Go to the SAP Demos for Interactive bar Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveBarChart/sample/sap.suite.ui.microchart.sample.InteractiveBarChart'
)->text(
text = 'Absolute and Percentage value'
class = 'sapUiSmallMargin'
)->get( )->layout_data(
)->grid_data( 'XL12 L12 M12 S12' ).
grid->text( text = 'Absolute and Percentage value' class = 'sapUiSmallMargin'
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
"Example with absolute and percentage values
DATA(bar) = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Center' class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
)->bars( ).
DATA(bar) = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Center'
class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
)->bars( ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel1 ) label = 'Product 1' value = '10' ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel2 ) label = 'Product 2' value = '20' ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel3 ) label = 'Product 3' value = '70' ).
bar = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Center' class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
)->bars( ).
bar = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Center'
class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
)->bars( ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel1 ) label = 'Product 1' value = '10' displayedvalue = '10%' ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel2 ) label = 'Product 2' value = '20' displayedvalue = '20%' ).
bar->interact_bar_chart_bar( selected = client->_bind( mv_sel3 ) label = 'Product 3' value = '70' displayedvalue = '70%' ).
DATA(layout) = grid->vertical_layout( )->layout_data( 'l' )->grid_data( 'XL12 L12 M12 S12' )->get_parent( )->get_parent( ).
layout->text( text = 'Positive and Negative values' class = 'sapUiSmallMargin' ).
bar = layout->flex_box( width = '20rem' height = '10rem' alignitems = 'Center' class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
labelwidth = '25%'
)->bars( ).
bar = grid->vertical_layout(
)->layout_data( 'l'
)->grid_data( 'XL12 L12 M12 S12'
)->get_parent(
)->text(
text = 'Positive and Negative values'
class = 'sapUiSmallMargin'
)->flex_box(
width = '20rem'
height = '10rem'
alignitems = 'Center'
class = 'sapUiSmallMargin'
)->items( )->interact_bar_chart(
selectionchanged = client->_event( 'BAR_CHANGED' )
press = client->_event( 'BAR_PRESS' )
labelwidth = '25%'
)->bars( ).
bar->interact_bar_chart_bar( label = 'Product 1' value = '25' ).
bar->interact_bar_chart_bar( label = 'Product 2' value = '-50' ).
bar->interact_bar_chart_bar( label = 'Product 3' value = '-100' ).
@ -101,58 +116,74 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
METHOD render_tab_donut.
DATA(tab) = container->tab( text = 'Donut Chart' selected = client->_bind( mv_tab_donut_active ) ).
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
DATA(grid) = container->tab(
text = 'Donut Chart'
selected = client->_bind( mv_tab_donut_active )
)->grid( 'XL6 L6 M6 S12' ).
grid->link(
text = 'Go to the SAP Demos for Interactive Donut Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveDonutChart/sample/sap.suite.ui.microchart.sample.InteractiveDonutChart'
).
grid->text( text = 'Three segments' class = 'sapUiSmallMargin'
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
text = 'Go to the SAP Demos for Interactive Donut Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveDonutChart/sample/sap.suite.ui.microchart.sample.InteractiveDonutChart'
)->text(
text = 'Three segments'
class = 'sapUiSmallMargin'
)->get( )->layout_data(
)->grid_data( 'XL12 L12 M12 S12' ).
DATA(seg) = grid->flex_box(
width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
)->items(
)->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
)->segments( ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel1 ) label = 'Implementation Phase' value = '40.0' displayedvalue = '40.0%' ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel2 )
label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel3 )
label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
width = '22rem'
height = '13rem'
alignitems = 'Start'
justifycontent = 'SpaceBetween'
)->items(
)->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
)->segments( ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel1 ) label = 'Impl. Phase' value = '40.0' displayedvalue = '40.0%' ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel2 ) label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
seg->interact_donut_chart_segment( selected = client->_bind( mv_sel3 ) label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
grid->text(
text = 'Four segments'
class = 'sapUiSmallMargin'
)->get( )->layout_data(
)->grid_data( 'XL12 L12 M12 S12' ).
grid->text( text = 'Four segments' class = 'sapUiSmallMargin'
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
seg = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Start'
justifycontent = 'SpaceBetween'
)->items( )->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
press = client->_event( 'DONUT_PRESS' )
displayedsegments = '4'
)->segments( ).
seg->interact_donut_chart_segment( label = 'Design Phase' value = '32.0' displayedvalue = '32.0%' ).
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '28' displayedvalue = '28%' ).
seg->interact_donut_chart_segment( label = 'Test Phase' value = '25' displayedvalue = '25%' ).
seg->interact_donut_chart_segment( label = 'Launch Phase' value = '15' displayedvalue = '15%' ).
seg = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
)->items(
)->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
press = client->_event( 'DONUT_PRESS' )
displayedsegments = '4'
)->segments( ).
seg->interact_donut_chart_segment( label = 'Design Phase' value = '32.0' displayedvalue = '32.0%' ).
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '28' displayedvalue = '28%' ).
seg->interact_donut_chart_segment( label = 'Test Phase' value = '25' displayedvalue = '25%' ).
seg->interact_donut_chart_segment( label = 'Launch Phase' value = '15' displayedvalue = '15%' ).
grid->text(
text = 'Error Messages'
class = 'sapUiSmallMargin'
)->get( )->layout_data(
)->grid_data( 'XL12 L12 M12 S12' ).
grid->text( text = 'Error Messages' class = 'sapUiSmallMargin'
)->get( )->layout_data( )->grid_data( 'XL12 L12 M12 S12' ).
seg = grid->flex_box( width = '22rem' height = '13rem' alignitems = 'Start' justifycontent = 'SpaceBetween'
)->items( )->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
showerror = abap_true
errormessagetitle = 'No data'
errormessage = 'Currently no data is available'
)->segments( ).
seg = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Start'
justifycontent = 'SpaceBetween'
)->items( )->interact_donut_chart(
selectionchanged = client->_event( 'DONUT_CHANGED' )
showerror = abap_true
errormessagetitle = 'No data'
errormessage = 'Currently no data is available'
)->segments( ).
seg->interact_donut_chart_segment( label = 'Implementation Phase' value = '40.0' displayedvalue = '40.0%' ).
seg->interact_donut_chart_segment( label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
seg->interact_donut_chart_segment( label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
seg->interact_donut_chart_segment( label = 'Design Phase' value = '21.5' displayedvalue = '21.5%' ).
seg->interact_donut_chart_segment( label = 'Test Phase' value = '38.5' displayedvalue = '38.5%' ).
@ -165,24 +196,136 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
grid->link(
text = 'Go to the SAP Demos for Interactive Line Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveLineChart/sample/sap.suite.ui.microchart.sample.InteractiveLineChart'
).
text = 'Go to the SAP Demos for Interactive Line Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.InteractiveLineChart/sample/sap.suite.ui.microchart.sample.InteractiveLineChart' ).
grid->text(
text = 'Absolute and Percentage values'
class = 'sapUiSmallMargin'
)->get(
)->layout_data(
)->grid_data( 'XL12 L12 M12 S12' ).
DATA(point) = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Center'
class = 'sapUiSmallMargin'
)->items( )->interact_line_chart(
selectionchanged = client->_event( 'LINE_CHANGED' )
precedingpoint = '15'
succeddingpoint = '89'
)->points( ).
point->interact_line_chart_point( label = 'May' value = '33.1' secondarylabel = 'Q2' ).
point->interact_line_chart_point( label = 'June' value = '12' ).
point->interact_line_chart_point( label = 'July' value = '51.4' secondarylabel = 'Q3' ).
point->interact_line_chart_point( label = 'Aug' value = '52' ).
point->interact_line_chart_point( label = 'Sep' value = '69.9').
point->interact_line_chart_point( label = 'Oct' value = '0.9' secondarylabel = 'Q4' ).
point = grid->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Start'
class = 'SpaceBetween'
)->items(
)->interact_line_chart(
selectionchanged = client->_event( 'LINE_CHANGED' )
press = client->_event( 'LINE_PRESS' )
precedingpoint = '-20'
)->points( ).
point->interact_line_chart_point( label = 'May' value = '33.1' displayedvalue = '33.1%' secondarylabel = '2015' ).
point->interact_line_chart_point( label = 'June' value = '2.2' displayedvalue = '2.2%' secondarylabel = '2015' ).
point->interact_line_chart_point( label = 'July' value = '51.4' displayedvalue = '51.4%' secondarylabel = '2015' ).
point->interact_line_chart_point( label = 'Aug' value = '19.9' displayedvalue = '19.9%' ).
point->interact_line_chart_point( label = 'Sep' value = '69.9' displayedvalue = '69.9%' ).
point->interact_line_chart_point( label = 'Oct' value = '0.9' displayedvalue = '9.9%' ).
point = grid->vertical_layout(
)->layout_data( ns = 'l'
)->grid_data( 'XL12 L12 M12 S12'
)->get_parent(
)->text(
text = 'Preselected values'
class = 'sapUiSmallMargin'
)->flex_box(
width = '22rem'
height = '13rem'
alignitems = 'Start'
class = 'sapUiSmallMargin'
)->items(
)->interact_line_chart(
selectionchanged = client->_event( 'LINE_CHANGED' )
press = client->_event( 'LINE_PRESS' )
)->points( ).
point->interact_line_chart_point( label = 'May' value = '33.1' displayedvalue = '33.1%' selected = abap_true ).
point->interact_line_chart_point( label = 'June' value = '2.2' displayedvalue = '2.2%' ).
point->interact_line_chart_point( label = 'July' value = '51.4' displayedvalue = '51.4%' ).
point->interact_line_chart_point( label = 'Aug' value = '19.9' displayedvalue = '19.9%' selected = abap_true ).
point->interact_line_chart_point( label = 'Sep' value = '69.9' displayedvalue = '69.9%' ).
point->interact_line_chart_point( label = 'Oct' value = '0.9' displayedvalue = '9.9%' ).
ENDMETHOD.
METHOD render_tab_radial.
DATA(tab) = container->tab( text = 'Radial Chart' selected = client->_bind( mv_tab_radial_active ) ).
DATA(grid) = tab->grid( 'XL6 L6 M6 S12' ).
DATA(grid) = container->tab(
text = 'Radial Chart'
selected = client->_bind( mv_tab_radial_active )
)->grid( 'XL12 L12 M12 S12' ).
grid->link(
text = 'Go to the SAP Demos for Radial Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.RadialMicroChart/sample/sap.suite.ui.microchart.sample.RadialMicroChart'
).
text = 'Go to the SAP Demos for Radial Charts here...'
href = 'https://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.microchart.RadialMicroChart/sample/sap.suite.ui.microchart.sample.RadialMicroChart' ).
grid->vertical_layout(
)->horizontal_layout(
)->radial_micro_chart(
sice = 'M'
percentage = '45'
press = client->_event( 'RADIAL_PRESS' )
)->radial_micro_chart(
sice = 'S'
percentage = '45'
press = client->_event( 'RADIAL_PRESS' )
)->get_parent(
)->horizontal_layout(
)->radial_micro_chart(
sice = 'M'
percentage = '99.9'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Good'
)->radial_micro_chart(
sice = 'S'
percentage = '99.9'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Good'
)->get_parent(
)->horizontal_layout(
)->radial_micro_chart(
sice = 'M'
percentage = '0'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Error'
)->radial_micro_chart(
sice = 'S'
percentage = '0'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Error'
)->get_parent(
)->horizontal_layout(
)->radial_micro_chart(
sice = 'M'
percentage = '0.1'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Critical'
)->radial_micro_chart(
sice = 'S'
percentage = '0.1'
press = client->_event( 'RADIAL_PRESS' )
valueColor = 'Critical'
).
ENDMETHOD.
@ -240,27 +383,11 @@ CLASS Z2UI5_CL_APP_DEMO_16 IMPLEMENTATION.
).
DATA(container) = page->tab_container( ).
render_tab_donut( client = client container = container ).
render_tab_bar( client = client container = container ).
render_tab_line( client = client container = container ).
render_tab_donut( client = client container = container ).
render_tab_bar( client = client container = container ).
render_tab_line( client = client container = container ).
render_tab_radial( client = client container = container ).
" tab = container->tab( 'Interactive Line Chart' ).
" tab = container->tab( 'Radial Micro Chart' ).
page->footer( )->overflow_toolbar(
)->overflow_toolbar_button(
text = 'Delete'
icon = 'sap-icon://delete'
)->toolbar_spacer(
)->overflow_toolbar_button(
text = 'Edit'
icon = 'sap-icon://edit'
)->overflow_toolbar_button(
text = 'Upload'
type = 'Emphasized'
icon = 'sap-icon://upload-to-cloud' ).
ENDCASE.

View File

@ -5,7 +5,7 @@
<VSEOCLASS>
<CLSNAME>Z2UI5_CL_APP_DEMO_16</CLSNAME>
<LANGU>E</LANGU>
<DESCRIPT>demo - charts a diagrams</DESCRIPT>
<DESCRIPT>demo - visualization</DESCRIPT>
<STATE>1</STATE>
<CLSCCINCL>X</CLSCCINCL>
<FIXPT>X</FIXPT>

View File

@ -15,45 +15,26 @@ CLASS z2ui5_lcl_utility DEFINITION INHERITING FROM cx_no_check.
TYPES:
BEGIN OF ty,
BEGIN OF s,
BEGIN OF msg,
id TYPE string,
ty TYPE string,
no TYPE string,
v1 TYPE string,
v2 TYPE string,
v3 TYPE string,
v4 TYPE string,
END OF msg,
BEGIN OF msg_result,
message TYPE string,
is_error TYPE abap_bool,
type TYPE abap_bool,
t_bapi TYPE bapirettab,
s_bapi TYPE LINE OF bapirettab,
message TYPE string,
s_bapi TYPE LINE OF bapirettab,
END OF msg_result,
END OF s,
BEGIN OF t,
attri TYPE STANDARD TABLE OF ty_attri WITH EMPTY KEY,
END OF t,
BEGIN OF o,
me TYPE REF TO z2ui5_lcl_utility,
END OF o,
END OF ty.
DATA:
BEGIN OF ms_error,
x_root TYPE REF TO cx_root,
uuid TYPE string,
kind TYPE string,
text TYPE string,
s_msg TYPE ty-s-msg_result,
o_log TYPE ty-o-me,
END OF ms_error.
METHODS constructor
IMPORTING
val TYPE any OPTIONAL
kind TYPE string OPTIONAL
previous LIKE previous OPTIONAL
PREFERRED PARAMETER val.
@ -210,8 +191,6 @@ CLASS z2ui5_lcl_utility IMPLEMENTATION.
ms_error-s_msg-message = val.
ENDTRY.
ms_error-kind = kind.
TRY.
ms_error-uuid = get_uuid( ).
CATCH cx_root ##CATCH_ALL.
@ -2040,6 +2019,18 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
ENDMETHOD.
METHOD z2ui5_if_view~horizontal_layout.
result = _generic(
name = `HorizontalLayout`
ns = `l`
t_prop = VALUE #(
( n = `class` v = class )
( n = `width` v = width )
) ).
ENDMETHOD.
METHOD z2ui5_if_view~vertical_layout.
result = _generic(
@ -2069,7 +2060,8 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
METHOD z2ui5_if_view~grid_data.
result = _generic(
result = me.
_generic(
name = `GridData`
ns = `l`
t_prop = VALUE #(
@ -2204,6 +2196,8 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
( n = `label` v = label )
( n = `secondaryLabel` v = secondarylabel )
( n = `value` v = value )
( n = `displayedValue` v = displayedvalue )
( n = `selected` v = _=>get_json_boolean( selected ) )
) ).
ENDMETHOD.
@ -2211,7 +2205,7 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
METHOD z2ui5_if_view~points.
result = _generic(
name = `Points`
name = `points`
ns = `mchart`
t_prop = VALUE #(
) ).
@ -2220,15 +2214,16 @@ CLASS z2ui5_lcl_if_view IMPLEMENTATION.
METHOD z2ui5_if_view~radial_micro_chart.
result = _generic(
name = `RadialMicorChart`
ns = `mchart`
t_prop = VALUE #(
( n = `percentage` v = percentage )
( n = `press` v = press )
( n = `sice` v = sice )
( n = `valueColor` v = valuecolor )
) ).
result = me.
_generic(
name = `RadialMicroChart`
ns = `mchart`
t_prop = VALUE #(
( n = `percentage` v = percentage )
( n = `press` v = press )
( n = `sice` v = sice )
( n = `valueColor` v = valuecolor )
) ).
ENDMETHOD.
@ -2677,7 +2672,7 @@ CLASS z2ui5_lcl_system_runtime IMPLEMENTATION.
ENDTRY.
LOOP AT result->ms_db-t_attri REFERENCE INTO DATA(lr_attri)
WHERE bind_type = z2ui5_if_view=>cs-bind_type-two_way.
WHERE bind_type = z2ui5_if_view=>cs-bind_type-two_way.
FIELD-SYMBOLS <attribute> TYPE any.
DATA(lv_name) = c_prefix && to_upper( lr_attri->name ).

View File

@ -63,6 +63,13 @@ INTERFACE z2ui5_if_view
RETURNING
VALUE(result) TYPE REF TO z2ui5_if_view.
METHODS horizontal_layout
IMPORTING
class TYPE clike OPTIONAL
width TYPE clike OPTIONAL
RETURNING
VALUE(result) TYPE REF TO z2ui5_if_view.
METHODS flex_box
IMPORTING
class TYPE clike OPTIONAL
@ -278,6 +285,8 @@ INTERFACE z2ui5_if_view
label TYPE clike OPTIONAL
value TYPE clike OPTIONAL
secondarylabel TYPE clike OPTIONAL
displayedvalue TYPE clike OPTIONAL
selected TYPE clike OPTIONAL
RETURNING
VALUE(result) TYPE REF TO z2ui5_if_view.