Blue sky: more bare bones `BespokeChart`

[basilesimon]

I took BespokeChart for a spin this morning and I've worked this chart we're currently discussing in EMEA:

This chart is actually an extension of BespokeBase:

class Division extends ReutersCharter.BespokeBase {
...
}

And if you look at it, I'm actually only using this.svg, this.width, this.height, and the render()/update() lifecycle.

Just curious: where would you stand regarding have a more bare bones bespoke component?

[Matthew-Weber]

Ya, I certainly thought about it, but wasn't sure how helpful it would be. (as in, would be easier at that point just to write a class completely from scratch? )

If we did do one, what would it entail?

starter proposal: -- width -- height --Create SVG -- import data and save as JSON w/ no parsing -- resize event to resize SVG

[basilesimon]

I like your list indeed, though I'm not sure about the data loading part. I should think that whoever uses this thing would have an opinion or a preference as to their data loading (straight API fetch v a nice orderly queue, for example)

[Matthew-Weber]

ya, sure. But then we go back to my original question, with so little in it, is it still helpful? We're looking at about 5 lines of code, is it easier to just write a new class than to extend this class and not have access to it?

[basilesimon]

So I'm not quite clear just how I would go about writing this from scratch myself. I'm not able to say how often I'll be using this but would be good to run through it with you if you think this doesn't really have a place in the generator (which I would totes understand)

[Matthew-Weber]

I'm not opposed to it categorically. This is basically what it would entail:

class BareBones {
    constructor(opts){
        this.options = opts;                
        _.each(opts, (item, key) => {
            this[key] = item;
        });
        this.defaults = {
            someDefault:'value',
        }   
        _.each(this.defaults, (item, key) => {
            this[key] = item;
        });
        this.render();  

    }

    render(){
        this.$el = $(this.el);
        this.width = $el.width();
        this.height = $el.height();
        this.svg = d3.select(this.el)
            .append("svg")
            .attrs({
                width:this.width,
                height:this.height
            })

        $(window).on("resize", _.debounce( (event) => {
            let width = this.$el.width();
            if (width == this.masterWidth){
                return;
            }
            this.masterWidth = width;
            this.update();
        },100));    

    }

    update(){
        this.width = $el.width();
        this.height = $el.height();
        this.svg 
            .transition()
            .duration(1000)
            .attrs({
                width:this.width,
                height:this.height
            })      

    }

}

export { BareBones }

[Matthew-Weber]

my worry about it, is that with so little in it, having that locked away in Node_Modules is maybe less helpful then just writing one.

My thinking is, say you want to do something else in the constructor? or what if you want to do something BEFORE you append the SVG. now all those things are not accessible, and you have to overwrite them, and that's fine to some degree, if it saves time in writing a bunch of stuff, but there is so little to write here, I wonder if it's worth it. Open to your thoughts.

[basilesimon]

That actually sounds more than fine, I totally get your argument about there being very little in it.

I'll have a go next time I've got the chance :)