Apex chart in Perspective component

[Grace_Gan]

I'm building a custom perspective component using apex chart. What do I need to include the apexchart bundle in the module?

I got the perspective component working on my local ignition instance (running on docker) but when I install the module in another ignition instance (prod instance), the component gives the following error
TypeError: t.put is not a function
when try to call chart.render().

What could've caused this error

[louagejasper]

What are you trying to build? You know there is an Perspective ApexChart component already, right? Or are you trying to expand on that module?

[Grace_Gan]

I'm trying to build a custom perspective component that includes an ApexChart, it's a pretty customized component as it handles data querying within the component so different to the exisitng Perspective ApexChart component.

[pturmel]

@Grace_Gan

as it handles data querying within the component

Ewww! Sounds like the same foolishness you've been advised against before (different components?):

Perspective component get dropdown props from gateway

Seems like an anti-pattern. Components are best when they’re flexible, and making a component do its own queries is at odds with the goals of Ignition. Is there a reason you don’t want to provide your options through a binding?

Perspective Component

Ignition's query bindings are extraordinarily flexible. If you really want users to not worry about the behavior of the query inside your component, do not put the query inside your component. You are re-inventing the wheel. You are unlikely to do this as well as IA already did, with query bindings. Really. Don't have your component run its own queries. IA has some components that run their own queries. They are frustrating to use and utterly inflexible. Don't follow that example.

You really shouldn't be doing this.

[Grace_Gan]

I am aware of that but it does make sense in my use case for it to be a not flexible component

[bmusson]

Maybe a silly question, but why are you even building Perspective components?

If you don’t care about Ignition’s binding/data model I’d think it’d be easier to use iFrames.

[Grace_Gan]

I'm building a perspective component so that once the module is installed on the gateway, it is possible to drag a component into a perspective views and bind it with some simple input properties (e.g. start and end time). The component will then handle the querying of the related data (from a connected database) and display them in the charts.

It's a kind of component that is created multiple times in various projects and I want to abstract away most the data querying to reduce the time and effort required to set up the view. Since the data querying logic is same, it'll be nicer to have it abstracted away and handled by the component. Ideally, the user just need to drag the component in, bind the properties and the chart will display the relevant data.

I'm not so familiar with iFrames in ignition and how to set them up...they could be a potential solution to if you don't mind explaining how it could work for me? An example could be helpful.

Putting this aside, my initial question on this post was regarding the error with rendering the chart. It surprisingly works on my local ignition designer instance that is running on docker but not on the prod ignition designer instance. This is the error that I am getting TypeError: t.put is not a function when calling chart.render()

I am suspecting that this is due to the ApexChart bundle isn't installed properly with the module installation? But have no idea how to fix, any help will be appreciated.

[Grace_Gan]

I did some exploring and found out that it's because I have the
Apex Chart Module installed on my ignition gateway (GitHub - Kyvis-Labs/ignition-apexcharts-module: The module provides Perspective ApexCharts components), which uses a different version of apexcharts, after changing it to the same version, my component now works. I do wonder if there is any better ways to include the apexcharts bundle so that it'll work despite the different versions used in two modules? Because I want to avoid having to update my module apexcharts versions whenever KyvisLabs update theirs.

Cheers

[bmusson]

@Grace_Gan

It's a kind of component that is created multiple times in various projects and I want to abstract away most the data querying to reduce the time and effort required to set up the view.

Is there a reason you can’t use embedded views?

Perspective - Embedded View | Ignition User Manual

I’m not trying to be unhelpful, but what you’re doing seems wildly over complicated. 99.999…% of people using Ignition solve this problem by creating reusable views that take parameters.

@Grace_Gan

I'm not so familiar with iFrames in ignition and how to set them up...

Search the forum, I think there’s some examples floating around. Basically you set up a separate web server and use Perspective to load it in an iFrame. Beyond my capacity for free forum help

@Grace_Gan

I do wonder if there is any better ways to include the apexcharts bundle so that it'll work despite the different versions used in two modules? Because I want to avoid having to update my module apexcharts versions whenever KyvisLabs update theirs.

I think this is configurable in your bundler (Rollup, Webpack, etc.). You’ll want to avoid a namespace collision with the ApexCharts version the KyvisLabs module supplies.