Results 1 to 8 of 8

Thread: Can't override default Axis renderer function

  1. #1
    a.silanskas
    Guest

    Default Can't override default Axis renderer function

    I successfully override the class, as I can now freely use newly added methods, however the renderer does not default to what I want it to, and I still have to set it on every single Axis for it to work.

    Code:
    Ext.define('Dashboards.overrides.chart.axis.Axis', {
    
        override : 'Ext.chart.axis.Axis',
        
        config : {
            maxLabelLength : 15,
            numberPrecision : 2
        },
        
        override_label_bbox : function (override, value) {
             
                this.getSprites()[0].override_bbox = {
                    override_bool : override,
                    height_value : value,
                    width_value : value
                };
        },
        
        abbreviateNumber : function(value, precision) {
                var newValue = value;
                if (value >= 1000) {
                    var suffixes = ["", "k", "m", "b","t"];
                    var suffixNum = Math.floor( (""+value).length/3 );
                    var shortValue = '';
                    for (; precision >= 1; precision--) {
                            shortValue = parseFloat( (suffixNum != 0 ? (value / Math.pow(1000,suffixNum) ) : value).toPrecision(precision));
                            var dotLessShortValue = (shortValue + '').replace(/[^a-zA-Z 0-9]+/g,'');
                            if (dotLessShortValue.length <= 2) { break; }
                    }
                    if (shortValue % 1 != 0)  shortNum = shortValue.toFixed(1);
                    newValue = shortValue+suffixes[suffixNum];
                }
                return newValue;
        },
        
        shortenLabel : function (axis, data, max_length) {
                var str = data;
                     var chart = axis.getChart();
                       if (str.length > max_length) {
                    str = str.substring(0, max_length-3)+"...";
            }
            return str;
        },
        
        shorteningRenderer : function (axis, label) {
                if (!isNaN(label)) {
                            return axis.abbreviateNumber(label, this.getNumberPrecision());
                        } else return shortenLabel (axis, label, maxLabelLength);
                },
                
            renderer : this.shorteningRenderer
    })

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Maybe because "this" resolves to global window object and "this.shorteningRenderer" doesn't exist?

    Edit: Also, you can just define your renderer function once in your ViewController and then just configure all your axis with " renderer: 'myRendererFunction' " instead of trying to override Axis class.

  3. #3
    a.silanskas
    Guest

    Default

    if it didn't exist I would get an error in console, which I don't. So I suppose it is never even tried to be called.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Why should you get an error?
    Code:
    if (me.getRenderer()) {
                    baseSprite.setRenderer(me.getRenderer());
                }
    It doesn't explicitly check for null. It checks for falsy value and "undefined" is also a falsy value.

  5. #5
    a.silanskas
    Guest

    Default

    I see. But removing `this` doesn't solve it either. I can't touch the controller - the project was not made by me and is fairly big; I'm not even sure where exactly in code the widgets are used. I was only instructed to fix some issues, one of which is that if labels are too long, the chart becomes very thin. I could go with adding 'renderer : ...' to each and every axis (which works correctly), however given the quantity of various charts, I'd rather not.

  6. #6
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    Have you tried assigning your new function directly to the config?

  7. #7
    a.silanskas
    Guest

    Default

    What do you mean?

  8. #8
    Sencha User
    Join Date
    Apr 2013
    Posts
    914
    Answers
    105

    Default

    In your override, instead of "renderer: this.shorteningRenderer", have you tried:
    Code:
    renderer: function(axis, label) {
        if (!isNaN(label)) {
            return axis.abbreviateNumber(label, this.getNumberPrecision());
        } else {
            return axis.shortenLabel(axis, label, maxLabelLength);
        }
    }

Similar Threads

  1. Replies: 0
    Last Post: 4 Nov 2015, 11:03 AM
  2. How to override an axis class
    By asulhyan in forum Ext: Q&A
    Replies: 2
    Last Post: 26 Jun 2013, 6:19 PM
  3. Ext.grid.ColumnModel: Default renderer overwrites column renderer.
    By Bojoer in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 25 Mar 2011, 4:49 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •