Musson Industrial’s Embr-Charts Module

3rd Party Modules
84

Version 2.0.0

This version brings majors changes to scriptable options, and introduces a method for directly interacting with the Chart.js chart instance.

Breaking Changes

  • The previously available self and client globally scoped objects available in Scriptable Options are gone. They are replaced with a single perspective object that will be the home of future Perspective specific utility functions. Use perspective.context to access the current page, view, client, and component objects.
  • The this argument in Scriptable Options is now the component itself.
  • Scriptable Options now behave as normal arrow functions, and do not require return statements for expressions. See this post for more details.

New Feature, JavaScriptProxy Objects

I think this one is pretty cool.

I've been holding off on adding methods to the Chart.js component, because I couldn't find a way to make them practically useful. There's lots of methods on the chart instance that would be great to call from Perspective, but:

  1. There's a lot of them (+ functions added by plugins).
  2. Most of them require chaining with other methods in order to be useful.

This update adds a single component method getJavaScriptProxy(property), that returns a JavaScriptProxy object for the given property key. Using this proxy object you can call runAsync(function, args, callback) or runBlocking(function, args) in order to run JavaScript code with the proxied property as the this context.

This follows the same signature as the runJavaScript~ functions in our Embr-Periscope module:

  • function is JavaScript code as a string containing a JavaScript arrow function. If this function is async or returns a Promise it will do what you expect, returning on the gateway when resolved.
  • args is an optional dictionary, where the keys correspond to the names of the function arguments.
  • callback is an optional function to be called when the async version of the function completely. The callback function should take a single argument that will contain the return value of the JavaScript function.

Currently the only proxy-able property is chart - the component's Chart.js chart instance.

Examples

Reset the zoom state of the chart:

# Button onActionPerformed
def runAction(self, event):
	component = self.getSibling("Chartjs")
	chart = component.getJavaScriptProxy('chart')
	chart.runAsync("() => this.resetZoom('resize')")

Zooming to a specific part of the chart:

# Button onActionPerformed
def runAction(self, event):
	component = self.getSibling("Chartjs")
	chart = component.getJavaScriptProxy('chart')
	
	args = {
		'scale': 'x',
		'bounds': {
			'min': 5,
			'max': 10
		}
	}
	
	chart.runAsync('''(scale, bounds) => {
		console.log(`Zooming scale ${scale} to bounds:`, bounds)
		this.zoomScale(scale, bounds, 'resize')
	}''', args)

The sky is the limit here.

Full documentation coming soon at docs.mussonindustrial.com.

Third-Party Module Showcase

We're now listed on the Third-Party Module Showcase!

Download

Quick-link: Embr-Charts-2.0.0.modl

As always, the latest release can be found here.

4 Likes