asked on September 21, 2023
Greetings,
Is it possible to customize the label formatting through the data source?
Now I've done this by setting on the hierarchy level but I would need to customize some individual labels.
For example see the attachment.
Best regards
Fabrizio
⋅ September 22, 2023
Hello, Fabrizio!
Thank you for reaching out to us.
Kindly note that it is possible to customize labels shown on the grid without modifying the original data.
Could you please provide us with more details about the desired customization? The before/after screenshots and any additional details would help us greatly.
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ September 28, 2023
Depending on the graph I used, the system is told which nodes to make in bold. For this reason, it is difficult to define it statically in the script. Is there a way to pass the data via data-source?
However, I attach the example where G means bold and C means italic
thanks
⋅ September 29, 2023
Hello, Fabrizio!
Thank you for getting back to us.
Kindly note it is possible to customize labels on the grid depending on the values from the data source.
Here is a brief description of the approach:
1. Set the property type for the corresponding data field using mapping. This way, the field won't be shown on the Field List but will remain accessible from the cade. Please note that fields mapped as property must be associated with a different field as follows:
mapping: {
/* name of the field which contains 'C' and 'G' keywords for styling */
"Style": {
type: "property",
/* name of the field to associate property with */
hierarchy: "YourField"
}
}
2. Add the CSS classes which contain necessary stylings.
3. Use the customizeCell function to customize the grid depending on the property value and assign the corresponding CSS class to the cell. You can access the property inside the customizeCell function as follows:
function customizeCellFunction(cell, data) {
/* name of the field which contains 'C' and 'G' keywords for styling */
data.rows[0].properties.Style
}
We have prepared a JSFiddle to illustrate the approach: https://jsfiddle.net/flexmonster/gnm1fwts/. Please note that it is only the sample, which may require further customization on your end.
Hope you will find our answer helpful.
Kind regards,
Solomiia
⋅ September 29, 2023
Hello Solomiia,
I think we are close to the solution but there is one step missing.
my answer is split the layers, and I should pass the style on the single layer. I provide an example of what it could look like and below is the current response.
Can I also add the level to customize in the customizeCellFunction function?
Thank you
possible reponse:
{
"G1": "Reddito Netto",
"G1_Style": "B",
"G2": " EBITDA",
"G2_Style": "C",
"G3": "Profitto Operativo Lordo (GOP)",
"G3_Style": null,
"G4": " Profitto dei Reparti Operativi",
"G4_Style": "G",
"G5": "Costi Operativi",
"G5_Style": null,
"G6": " Camere",
"G6_Style": null,
"G7": null,
"G7_Style": null,
"G8": null,
"G8_Style": null,
"G9": null,
"G9_Style": null,
"G10": null,
"G10_Style": null,
"G11": null,
"G11_Style": null,
"Anno": "2023",
"Mese": "Gennaio",
"Valori": -0.9303254934122216,
"Link": "https:\/\/www.ansa.it"
},
actual response:
{
"G1": "Reddito Netto",
"G2": " EBITDA",
"G3": "Profitto Operativo Lordo (GOP)",
"G4": " Profitto dei Reparti Operativi",
"G5": "Costi Operativi",
"G6": " Camere",
"G7": null,
"G8": null,
"G9": null,
"G10": null,
"G11": null,
"Anno": "2023",
"Mese": "Gennaio",
"Valori": -0.9303254934122216,
"Link": "https:\/\/www.ansa.it"
},
{
"G1": "Reddito Netto",
"G2": " EBITDA",
"G3": "Profitto Operativo Lordo (GOP)",
"G4": " Profitto dei Reparti Operativi",
"G5": "Costi Operativi",
"G6": " Camere",
"G7": null,
"G8": null,
"G9": null,
"G10": null,
"G11": null,
"Anno": "2023",
"Mese": "Febbraio",
"Valori": -0.9251336898395722,
"Link": "https:\/\/www.ansa.it"
},
{
"G1": "Reddito Netto",
"G2": " EBITDA",
"G3": "Profitto Operativo Lordo (GOP)",
"G4": " Profitto dei Reparti Operativi",
"G5": "Costi Operativi",
"G6": "Alimenti e Bevande",
"G7": "Bar",
"G8": "Barrettino",
"G9": null,
"G10": null,
"G11": null,
"Anno": "2023",
"Mese": "Gennaio",
"Valori": -0.034266135986693314,
"Link": "https:\/\/www.ansa.it"
},
⋅ October 3, 2023
Hello, Fabrizio!
Thank you for your swift response.
Kindly note that in our previous answer, for illustration purposes we assumed that the C and G keywords for the styles were included in the data source.
Using the same approach, you can further specify the customization logic to style only a single layer. For example, the customizeCell hook provides information about the grid level in the data object - via the level property. Aside from the level property, you can also retrieve information about the hierarchy or measure connected with the cell. This information about the current grid cell can be used to apply the desired text formatting through CSS.
Please let us know if the described approach works well for you.
Also, it is possible to style specific levels on the grid by using special CSS classes.
Please see this example from our Examples page: https://jsfiddle.net/flexmonster/qf4c5zL8/.
This example shows how you can style separate levels using special CSS classes. The same approach can be used to make the text bold or italic on specific levels on the grid without having to modify the underlying data.
If your use case is different, could you please tell us how Flexmonster is informed about the styles from your system? You can provide us with the code sample or modify the following JSFiddle: https://jsfiddle.net/flexmonster/gnm1fwts/.
With this information, we'll be able to suggest a more suitable solution.
Looking forward to hearing from you.
Kind regards,
Solomiia
⋅ October 24, 2023
Hello, Fabrizio!
Hope you are doing well.
Our team is wondering if you had some time to try the suggested approach to customize the labels for specific layers. Could you please let us know if everything works well now?
Looking forward to hearing your feedback.
Kind regards,
Solomiia
⋅ October 27, 2023
Good morning,
I'm trying to implement the solution starting from the database response. They are still in development.
Thank you
⋅ October 27, 2023
Hello, Fabrizio!
Thank you for getting back to us.
Your feedback is valuable to our team, so we'll be waiting for the following updates on the case.
Feel free to reach out to us if any other questions arise.
Kind regards,
Solomiia
⋅ October 31, 2023
I'll try to explain you
I have this code for the pivot
pivot = new Flexmonster({
container: "pivotContainer",
licenseKey: license_flexmonster,
//licenseKey: "Z7A4-XG480X-3Q5N3Y-1R5M0Q-236H1B-5M3L2T-124K34-0I2G1M-5X3F6X-303S",
componentFolder: "https://cdn.flexmonster.com/",
customizeCell: customizeCellFunction,
afterchartdraw: () => {
console.log('afterchartdraw')
},
aftergriddraw: () => {
console.log('aftergriddraw')
},
reportcomplete: () => {
console.log('reportcomplete')
},
toolbar: true,
//beforetoolbarcreated: customizeToolbar,
global: {
localization: "loc/it.json"
},
report: {
localization: {
"grid": {
"blankMember": " ",
}
},
dataSource: {
data: getData(),
mapping: {
G1: {
hierarchy: "G"
},
G1_style: {
type: "property",
hierarchy: "G"
},
G2: {
hierarchy: "G",
parent: "G1"
},
G3: {
hierarchy: "G",
parent: "G2"
},
G4: {
hierarchy: "G",
parent: "G3"
},
G5: {
hierarchy: "G",
parent: "G4"
},
G6: {
hierarchy: "G",
parent: "G5"
},
G7: {
hierarchy: "G",
parent: "G6"
},
G8: {
hierarchy: "G",
parent: "G7"
},
G9: {
hierarchy: "G",
parent: "G8"
},
G10: {
hierarchy: "G",
parent: "G9"
},
G11: {
hierarchy: "G",
parent: "G10"
}
}
},
options: {
grid: {
type: "compact",
showTotals: "off",
showGrandTotals: showGrandTotal,
showAllLabels: false
}
, sorting: false
, showHierarchies: false
, grandTotalsPosition: "bottom"
, configuratorButton: false
, showFilter: false
},
"slice": {
"rows": [{
"uniqueName": "G"
//,sort: "desc"
}],
"columns": [{
"uniqueName": "Anno"
},
{
"uniqueName": "Mese"
},
{
"uniqueName": "[Measures]"
}
],
"measures": [{
"uniqueName": "Valori",
"aggregation": "sum",
"format": "euroformato"
}
],
"expands": {
"columns": [
{
"tuple": [
"Anno.[delta]"
]
}
]
}
},
formats: [{
name: "euroformato",
thousandsSeparator: ".",
decimalSeparator: ",",
decimalPlaces: 0,
currencySymbol: "€ ",
currencySymbolAlign: "left",
nullValue: "",
textAlign: "center",
isPercent: false
},
{
name: "price",
decimalPlaces: 2,
isPercent: true
}
]
}
});
and the data object is like this:
[{"G1":"Profitto Operativo Lordo (GOP)","G1_Style":"C","G2":"Costi Operativi","G3":" Costo del Lavoro","G4":" Salari e Stipendi","G5":"Salari e Stipendi - Non Management","G6":"Spese personale reception|\/gest\/fornitori.php?Azione=form_fornitori_dati&id_fornitori=10465","G7":null,"G8":null,"G9":null,"G10":null,"G11":null,"Anno":"2023","Mese":"Gennaio","Valori":"-30366.0014648438"}, ......
when I log the data object in customizeCellFunction
function customizeCellFunction(cell, data) {
console.log(data);
I can't find the "data.rows[0].properties.Style"
I attach the object I get
Hoping I was able to explain the problem, I wish you a good day.
⋅ November 1, 2023
Hello, Fabrizio!
Thank you for the provided report and sample data.
Kindly note that Flexmonster is case-sensitive by default, so if you have the field named G1_Style in your data, you need to use the same keyword in mapping. We also want to mention that property type needs to be attached to one of the fields from the original data, for example, for the highest parent in the multilevel hierarchy, which is G1 in our case.
Please try modifying your code as follows:
mapping: {
G1: {
hierarchy: "G"
},
G1_Style: {
type: "property",
hierarchy: "G1"
},
//other mapping properties
}
Hope you will find our answer helpful.
Kind regards,
Solomiia