Re: [Dev] Widget generation for the UUF based dashboard component

[Lasantha Samarakoon]

+1 on the idea.

Basically do not use the ID attributes within Handlebar templates since it
is a template and there can be multiple instances. Simply generate
necessary markup using a template, do the necessary modifications and then
push the modified content into the parent DOM. Then run the script to draw
the chart.

*Lasantha Samarakoon* | Software Engineer
WSO2, Inc.
#20, Palm Grove, Colombo 03, Sri Lanka
Mobile: +94 (71) 214 1576
Email:  lasant...@wso2.com
Web:www.wso2.com

lean . enterprise . middleware

On Wed, Apr 19, 2017 at 8:37 PM, Udara Rathnayake  wrote:

>
> While working on the new dashboard UUF component we noticed, there can be
> ID conflicts due to the lack of widget isolation.
>
> Eg:-
> In a widget hbs we declare a simple div so later we can append/draw the
> widget content(graph etc..)
>
>> 
>
>
> ​Then we provide data and config to the VizGrammar library and then draw
> the content inside above defined div.
>
>
>> var lineChart = new vizg(data, config);
>> lineChart.draw("#bar");​
>
>
> *​Problem​*
>
> ​With this approach one can't have multiple instances(with different
> data-source/configs) of the same bar-chart widget.
>
> ​We evaluated some technologies like web-components, shadow-dom in-order
> to overcome this.
> Shadow-dom is a viable solution but with the current implementation of
> VizGrammar we can't directly go with that[1].
>
>
>
> *Current solution*
> As we identified, most of the time above problem can occur with the
> widgets generated through the widget-gen tool where end-users use the same
> templated widget to create multiple instances. Simplest way to solve this
> is to have a placeholder when we define the div ID and within the script,
> then dynamically replace this placeholders with the widget-id(or some other
> unique value) during widget generation process.
>
> [1] Creating a widget web-component using existing charting libraries
>
> --
> Regards,
> UdaraR
>
> ___
> Dev mailing list
> Dev@wso2.org
> http://wso2.org/cgi-bin/mailman/listinfo/dev
>
>
___
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev

[Dev] Widget generation for the UUF based dashboard component

[Udara Rathnayake]

While working on the new dashboard UUF component we noticed, there can be
ID conflicts due to the lack of widget isolation.

Eg:-
In a widget hbs we declare a simple div so later we can append/draw the
widget content(graph etc..)

> 


​Then we provide data and config to the VizGrammar library and then draw
the content inside above defined div.


> var lineChart = new vizg(data, config);
> lineChart.draw("#bar");​


*​Problem​*

​With this approach one can't have multiple instances(with different
data-source/configs) of the same bar-chart widget.

​We evaluated some technologies like web-components, shadow-dom in-order to
overcome this.
Shadow-dom is a viable solution but with the current implementation of
VizGrammar we can't directly go with that[1].



*Current solution*
As we identified, most of the time above problem can occur with the widgets
generated through the widget-gen tool where end-users use the same
templated widget to create multiple instances. Simplest way to solve this
is to have a placeholder when we define the div ID and within the script,
then dynamically replace this placeholders with the widget-id(or some other
unique value) during widget generation process.

[1] Creating a widget web-component using existing charting libraries

-- 
Regards,
UdaraR
___
Dev mailing list
Dev@wso2.org
http://wso2.org/cgi-bin/mailman/listinfo/dev