diff --git a/addon/modifiers/vega.ts b/addon/modifiers/vega.ts index 4b0973d..5334a9b 100644 --- a/addon/modifiers/vega.ts +++ b/addon/modifiers/vega.ts @@ -1,9 +1,11 @@ import Modifier, { ArgsFor, PositionalArgs, NamedArgs } from 'ember-modifier'; -// import { registerDestructor } from '@ember/destroyable'; +import { registerDestructor } from '@ember/destroyable'; + +import { isEmpty } from 'lodash'; + import * as Vega from 'vega'; import * as VegaLite from 'vega-lite'; import * as VegaTooltip from 'vega-tooltip'; -import { isEmpty } from 'lodash'; import { Resource, View } from 'opendatafit-types'; @@ -79,6 +81,13 @@ export default class VegaModifier extends Modifier { args: ArgsFor ) { super(owner, args); + registerDestructor(this, this.destructor); + } + + destructor() { + if (this._vegaView) { + this._vegaView.finalize(); + } } async modify( @@ -90,6 +99,23 @@ export default class VegaModifier extends Modifier { throw new Error('Vega has no element'); } + if (!this._vegaView) { + // Create new Vega.View instance + await this._createView(element, args); + await this._populateData(args); + } else { + // Update data only + // TODO: Handle changes to config + await this._populateData(args); + } + } + + private async _createView( + element: Element, + args: NamedArgs + ): Promise { + element.classList.add('vega-view-modifier'); + let tooltipHandler = new VegaTooltip.Handler(); let config = {}; @@ -107,47 +133,27 @@ export default class VegaModifier extends Modifier { } this._vegaView = new Vega.View(Vega.parse(viewSpec, config), { - renderer: 'svg', // Renderer (canvas or svg) - container: this.element, // Parent DOM container - hover: true, // Enable hover processing + renderer: 'svg', + container: element, + hover: true, // autosize: { type: 'fit', resize: true }, tooltip: tooltipHandler.call, }); await this._vegaView.runAsync(); - // await this.populateData(); - for (const name of Object.keys(args.data)) { - this._vegaView.data(name, args.data[name]); - } - await this._vegaView.runAsync(); - - this.element.classList.add('vega-view-modifier'); - // TODO: Temporary bug fix for incorrect chart sizing on load before // first resize window.dispatchEvent(new Event('resize')); } - private _setup(): void { - } - - willDestroy() { - if (this._vegaView) { - this._vegaView.finalize(); + private async _populateData( + args: NamedArgs + ): Promise { + for (const name of Object.keys(args.data)) { + this._vegaView.data(name, args.data[name]); } - this.element.classList.remove('vega-view-modifier'); + await this._vegaView.runAsync(); } - - // async didUpdateArguments() { - // if (!this._vegaView) { - // await this._setup(); - // } else { - // // Already loaded, we don't expect the view/config to change - // // Just need to update data package - // await this.populateData(); - // await this._vegaView.runAsync(); - // } - // } } diff --git a/package.json b/package.json index decbfaf..25ed733 100644 --- a/package.json +++ b/package.json @@ -28,19 +28,20 @@ "postpack": "ember ts:clean" }, "dependencies": { - "ember-auto-import": "^2.4.2", - "ember-lodash": "^4.19.5", "@types/lodash": "^4.14.182", - "ember-modifier": "^3.2.7", + "ember-auto-import": "^2.4.2", "ember-cli-babel": "^7.26.11", "ember-cli-htmlbars": "^6.0.1", "ember-cli-typescript": "^5.1.0", + "ember-lodash": "^4.19.5", + "ember-modifier": "^3.2.7", + "opendatafit-types": "git+ssh://git@github.com:opendatafit/opendatafit-types.git", "vega": "^5.22.1", "vega-lite": "^5.2.0", - "vega-tooltip": "^0.28.0", - "opendatafit-types": "git+ssh://git@github.com:opendatafit/opendatafit-types.git" + "vega-tooltip": "^0.28.0" }, "devDependencies": { + "@types/ember": "^4.0.0", "@ember/optional-features": "^2.0.0", "@ember/test-helpers": "^2.7.0", "@embroider/test-setup": "^1.6.0", @@ -53,6 +54,7 @@ "@types/ember__component": "^4.0.8", "@types/ember__controller": "^4.0.0", "@types/ember__debug": "^4.0.1", + "@types/ember__destroyable": "^4.0.0", "@types/ember__engine": "^4.0.0", "@types/ember__error": "^4.0.0", "@types/ember__object": "^4.0.2", diff --git a/yarn.lock b/yarn.lock index c085705..52025ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1390,7 +1390,7 @@ dependencies: "@types/ember__object" "*" -"@types/ember@*": +"@types/ember@*", "@types/ember@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@types/ember/-/ember-4.0.0.tgz#0c29294fa0e5aa07ba6090f60243707dde8fc411" integrity sha512-IR4o8OkFgoiRKVLRI8URvyNhEBSkjO5DXp2900/TptxOl0Retu8/tKtFaRTwkqteg2a0/6zXAA1rpFb3BbxNpA== @@ -1460,6 +1460,11 @@ "@types/ember__debug" "*" "@types/ember__object" "*" +"@types/ember__destroyable@^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/ember__destroyable/-/ember__destroyable-4.0.0.tgz#997af44863323979796fbd153e9ad76498defb33" + integrity sha512-QxyRhCOlQmc056tbWvHOQZ7vIjlFOFYMOU82P3pcCFfxyi55+NRhj4ySruymcBCfrzKQmVQLCbbOGhyFMLqq0Q== + "@types/ember__engine@*", "@types/ember__engine@^4.0.0": version "4.0.0" resolved "https://registry.yarnpkg.com/@types/ember__engine/-/ember__engine-4.0.0.tgz#e39c06d98c7a085912508e8257c48a70196c1a87"