Discuss anything related to web development but no technical support questions


Post by Stanleyliu1006 »

Hi

I have followed the chart demo instruction to insert pie chart into my project. but the label and legends are not showing properly. Label is not display on the chart, and legends always display on the top event i set
legend: { docked: 'bottom'},

My project has a little bit different with you demo, in my Viewport i have a tab panel like below:
            {
                xtype: 'allocationrosterlegendtab',
                width: 400,
                split: true,
                region: 'east',
                weight: 10
            },
And in that tab panel i have three individual panel which shows three different pie chart, all three my chart has this issue.
Ext.define('AS.sch.view.tab.LegendTab', {
    extend : 'Ext.tab.Panel',
    xtype  : 'legendtab',
    cls      : 'legend-tab',
    title    : 'Legends',
    requires : [
         'AS.sch.view.panel.OperationChartPanel',
        'AS.sch.view.panel.ExperimentmodeChartPanel',
        'AS.sch.view.panel.RosterstaffChartPanel',
    ],

    items : [
        {
            xtype     : 'operationchartpanel',
        },
        {
            xtype     : 'experimentmodechartpanel',
        },
        {
            xtype     : 'rosterstaffchartpanel',
        },
    ],

});
Take ExperimentmodeChartPanel as example:
Ext.define('AS.sch.view.panel.ExperimentmodeChartPanel', {
    extend : 'Ext.panel.Panel',
    alias  : 'widget.experimentmodechartpanel',
    id     : 'experimentmodechartpanel',
    requires : [
        'AS.sch.view.chart.ExperimentmodeChart',
    ],
    layout: {
       type:  'hbox',
       align: 'stretch'
    },

    title: 'Experiment Modes',
    items: [
         {
             xtype    : 'experimentmodechart',
             flex     : 1
         },
    ],

});
And ExperimentmodeChart is defined as below:
Ext.define('AS.sch.view.chart.ExperimentmodeChart', {
    extend : 'Ext.chart.PolarChart',
    xtype: 'experimentmodechart',
    id   : 'experimentmodechart',
    width: 350,
    border: false,
    animate: true,

   store: {
      fields: ['name', 'g1'],
      data: [
         {"name": "Item-0", "g1": 57},
         {"name": "Item-1", "g1": 45},
         {"name": "Item-2", "g1": 67}
      ]
   },

   //configure the legend.
   legend: {
      docked: 'bottom'
   },

   //describe the actual pie series.
   series: [{
      type: 'pie',
      xField: 'g1',
      label: {
         field: 'name',
         display  : 'inside',
         contrast : true
      },
      donut: 30   // increase or decrease for increasing or decreasing donut area in middle.
   }]

})
I also check the html code on the browser by typing F12, it actually shows the label canvas, but the position of label is far below the chart, when i hard code margin-top: -500px, it appears.

<canvas class="x-surface-canvas" id="ext-element-35" style="left: 0px; top: 0px; height: 498px; width: 350px;" height="515" width="362"></canvas>

I also attach the current pie chart on my scheduler, which has no label not matter it set as inside or outside as display attribute.

Any advice would be appreciated.
Attachments
Label_display_issue.PNG
Label_display_issue.PNG (91.78 KiB) Viewed 5532 times

Post by pmiklashevich »

Hello,

I don't see any Scheduler specific data in your sample. It pretty much looks like what Sencha provides as an example: https://docs.sencha.com/extjs/6.6.0/cla ... s.Pie.html

I would start from the isolation the chart from other components, to see if it works without other components and layouts. It more looks like a layout issue to me. I'm afraid I don't see any reason to have "hbox" layout on your Tab. The layout could easily affect legends and labels positions. Please try to get rid of this and see if it helps:
layout: {
       type:  'hbox',
       align: 'stretch'
    },

Pavlo Miklashevych
Sr. Frontend Developer


Post by Stanleyliu1006 »

Hi Pmiklashevich

Thanks for your suggestion.

In 'AS.sch.view.chart.ExperimentmodeChart' i have sample data in store like below (so it should have data in chart)

store: {
fields: ['name', 'g1'],
data: [
{"name": "Item-0", "g1": 57},
{"name": "Item-1", "g1": 45},
{"name": "Item-2", "g1": 67}
]
},

I have disabled the 'hbox', but the whole pie chart is disappeared.

I also attached part of my viewPort code as below, which only includes my scheduler and tab menu
 this.items = [
            Ext.create('AS.sch.view.Scheduler', {
                eventBarTextField: 'Name',
                region: 'center',
                crudManager: crudManager,
                viewPreset: 'beamlineShift',
                tbar: [
                    {
                        xtype: 'as_sch_resourcefilterfield',
                        emptyText: 'Filter Equipments...',
                        store: resourceStore,
                        margin: '0 10 10 10',
                        property: resourceStore,
                        id: 'resourcefilter',
                        value: 'All',
                    },
                    {
                        xtype: 'as_sch_filterfield',
                        margin: '0 10 10 10',
                        emptyText: 'Search Visits ...',
                        store: eventStore,
                        property: 'Name',
                        id: 'eventfilter'
                    },
                    '-',
                    {
                        xtype: 'checkbox',
                        id: 'ProposalTypes',
                        scope: this,
                        boxLabel: 'Proposal Types',
                        enableToggle: true,
                        handler: function () {
                            this.items.getAt(0).getSchedulingView().showProposalTypeCls = '';
                            if (Ext.getCmp('ProposalTypes').getValue()) {
                                this.items.getAt(0).getSchedulingView().showProposalTypeCls = 'border-top: 3px solid ';
                            }
                            this.items.getAt(0).fullRefresh();
                        }
                    },
                    {
                        xtype: 'checkbox',
                        id: 'OperationTypes',
                        scope: this,
                        boxLabel: 'Operation Types',
                        enableToggle: true,
                        handler: function () {
                            Ext.getCmp('OperationTypes').disable();
                            Sch.preset.Manager.getPreset('beamlineShift').headerConfig.bottom.renderer = Ext.Function.bind(this.displayOperation, this);
                            this.down('schedulergrid').setViewPreset('beamlineShift');
                            this.items.getAt(0).fullRefresh();
                            //Ensure Asynchronize call finish to enable the checkbox
                            setTimeout(function(){ Ext.getCmp('OperationTypes').enable(); 20});
                        }
                    },
                    {
                        xtype: 'checkbox',
                        id: 'ImpossibleDates',
                        scope: this,
                        boxLabel: 'Show Impossible Dates',
                        enableToggle: true,
                        handler: function () {
                            resourceStore.clearFilter(true);
                            if (Ext.getCmp('resourcefilter').value != null && Ext.getCmp('resourcefilter').value !== 'All') {
                                resourceStore.filter([
                                {
                                    property: 'Id',
                                    value: Ext.getCmp('resourcefilter').value,
                                    anyMatch: true
                                }
                                ]);
                            }
                            resourceStore.filterBy(function(resource) {
                                if (Ext.getCmp('ImpossibleDates').getValue()) {
                                    if(Ext.getCmp('VisitNotes').getValue()){
                                        return resource;
                                    } else {
                                        if (resource.id.toString().indexOf('visit_note') == -1) {
                                            return resource;
                                        }
                                    }
                                } else {
                                    if(Ext.getCmp('VisitNotes').getValue()){
                                        if (resource.id.toString().indexOf('impossible_date') == -1) {
                                            return resource;
                                        }
                                    } else {
                                        if (resource.id.toString().indexOf('visit_note') == -1 && resource.id.toString().indexOf('impossible_date') == -1) {
                                            return resource;
                                        }
                                    }
                                }
                            });
                            this.items.getAt(0).fullRefresh();
                        }
                    },
                    {
                        xtype: 'checkbox',
                        id: 'VisitNotes',
                        scope: this,
                        boxLabel: 'Show Visit Notes',
                        enableToggle: true,
                        handler: function () {
                            resourceStore.clearFilter(true);
                            if (Ext.getCmp('resourcefilter').value != null && Ext.getCmp('resourcefilter').value !== 'All') {
                                resourceStore.filter([
                                {
                                    property: 'Id',
                                    value: Ext.getCmp('resourcefilter').value,
                                    anyMatch: true
                                }
                                ]);
                            }
                            resourceStore.filterBy(function(resource) {
                                if (Ext.getCmp('VisitNotes').getValue()) {
                                    if(Ext.getCmp('ImpossibleDates').getValue()){
                                        return resource;
                                    } else {
                                        if (resource.id.toString().indexOf('impossible_date') == -1) {
                                            return resource;
                                        }
                                    }
                                } else {
                                    if(Ext.getCmp('ImpossibleDates').getValue()){
                                        if (resource.id.toString().indexOf('visit_note') == -1) {
                                            return resource;
                                        }
                                    } else {
                                        if (resource.id.toString().indexOf('visit_note') == -1 && resource.id.toString().indexOf('impossible_date') == -1) {
                                            return resource;
                                        }
                                    }
                                }
                            });
                            this.items.getAt(0).fullRefresh();
                        }
                    },
                    '-',
                ],
            }),
            {
                xtype: 'allocationrosterlegendtab',
                width: 400,
                split: true,
                region: 'east',
                weight: 10
            },
        ];

        this.callParent(arguments);

    },

Post by Stanleyliu1006 »

And in your example both chart has set layout with
layout : { type : 'hbox', align : 'stretch' },

Can i customize the position of label and legend via CSS?

Post by pmiklashevich »

Could you please wrap it up in a test case? Please take a Bryntum demo (in "examples" folder) as a base and start changing it to add a chart. As soon as it's done, please zip it and attach here on the forum.

About our Charting demo. I've added
Ext.define('Sch.examples.charting.view.AllocationChart', {
    legend: {
        docked: 'bottom'
    },...
and it shows legends correct:
Снимок экрана 2018-10-17 в 12.08.56.png
Снимок экрана 2018-10-17 в 12.08.56.png (329.02 KiB) Viewed 5526 times
About layouts.
layout : { type : 'hbox', align : 'stretch' },
Layout specifies how child items should be organized on the screen. So in case of Charting demo Viewport is a container with "border" layout which has 2 items: "center" and "south". "Center" region is a container with "hbox" layout which aligns items horizontally. The first item is a Scheduler and the second item is a chart component. In your case the second item is a tab panel and "hbox" layout should be applied to the parent of the scheduler and of the tabpanel. You put chart in a tab of the tabpanel. Since tabpanel is already positioned, your chart should take all available space.
Can i customize the position of label and legend via CSS?
Should be doable, but it's better to learn how layout works in Ext, so the code would be more clear and cleaner.

Pavlo Miklashevych
Sr. Frontend Developer


Post by Stanleyliu1006 »

Hi Pavel

I think i figure it out the problem, i did not include the file below into app.css file. once i include it and add up the styles. Everything works fine now. Thanks
@import "/resources/extjs/build/packages/charts/classic/triton/resources/charts-all.css";

Kind regards
Stanley

Post by pmiklashevich »

Right, Charts is a separate package in latest Ext versions. So if you use Sencha cmd you need to require that package explicitly. Same goes for styles as well in this case. It probably was bad idea to put this importing inside resource/app.css from our side. app.css is a file with custom styles and there should be a possibility to exclude this file easily. I'll move importing of charts-all.css to the index.html file:
 <!--Ext JS styles and scripts -->
    <link href="../../../extjs-6.5.3/build/classic/theme-triton/resources/theme-triton-all.css" rel="stylesheet" type="text/css"/>
    <link href="../../../extjs-6.5.3/build/packages/charts/classic/triton/resources/charts-all.css" rel="stylesheet" type="text/css"/>

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply