Example for Stacked Bar Micro Chart in Table

[pelicanny]

Hello Fiori Team,

I'm struggling to find an example for how to use a Stacked Bar Micro Chart in a table line with Fiori Annotations.

Is there already an example existing? If not please help add one :)

Thank you and Kind Regards!

[schiwekM]

Hi @pelicanny,

you can refer to https://github.com/SAP-samples/fiori-elements-feature-showcase?tab=readme-ov-file#stacked-bar-micro-chart. For within tables it is essentially implemented the same way, just that a DataField would be used instead of a ReferenceFacet for including the chart, like:

{
                $Type   : 'UI.DataFieldForAnnotation',
                Target  : 'chartEntities/@UI.Chart#stackedBarChart',
                Label               : 'Stacked bar',
},

[pelicanny]

Hi @schiwekM , thanks for the quick answer, still struggling with the table line specific reference though. When I try to reference my Charters entity in the DataFieldForAnnotation 's Target I get an editor error "Path does not exist.CDS (annotations)".

{ 
   $Type: 'UI.DataFieldForAnnotation', 
   Target: 'Charters/@UI.Chart#ValidationStatusStacked', 
   Label: 'Validation Stacked' 
}, ... 

Resorted to this...

annotate OperatorService.Charters with @(
   UI.LineItem : [
        { $Type: 'UI.DataFieldForAnnotation', Target: '@UI.Chart#ValidationStatusStacked', Label: 'Validation Stacked' },
        { $Type: 'UI.DataField', Value: modifiedAt,           Label: 'Changed' },
        { $Type: 'UI.DataField', Value: status,               Label: 'Status' },                   
    ],
    UI.DataPoint #ValidationStatusStackedSuccess: { Value : validationStatusSuccess },
    UI.DataPoint #ValidationStatusStackedError:   { Value : validationStatusError },
    UI.DataPoint #ValidationStatusStackedSkipped: { Value : validationStatusSkipped },
    UI.DataPoint #ValidationStatusStackedOpen:    { Value : validationOpen },    
    UI.Chart #ValidationStatusStacked : {
        Title : 'Validation',
        ChartType : #BarStacked,
        Measures : [ validationStatusSuccess, validationStatusError, validationStatusSkipped, validationOpen ],
        MeasureAttributes : [ 
            { DataPoint : '@UI.DataPoint#ValidationStatusStackedSuccess' , Role: #Axis1, Measure : validationStatusSuccess },
            { DataPoint : '@UI.DataPoint#ValidationStatusStackedError'   , Role: #Axis1, Measure : validationStatusError   },
            { DataPoint : '@UI.DataPoint#ValidationStatusStackedSkipped' , Role: #Axis1, Measure : validationStatusSkipped },
            { DataPoint : '@UI.DataPoint#ValidationStatusStackedOpen'    , Role: #Axis1, Measure : validationOpen        },
        ],
    },
... 

but unfortunately get a weird looking Chart:

[schiwekM]

Hi @pelicanny,

the path itself looks correct - can you restart VS Code and see if it still comes?

Frankly the result of the stacked bar chart is kinda expected. It behaves this way since its introduction in 2020 that the values are not aggregated and you have to do the aggregation yourself within the view. But I agree that the behaviour is suboptimal and would encourage you to open an SAP Incident for Fiori elements v4, so this can be addressed.

I'll check with the colleagues what is possible.

BR, Marten

[pelicanny]

Hi @schiwekM, unfortunately the > Reload Developer Window and VS Code reboot did not help. I opened an incident DINC0305773

Kind Regards :)