import * as React from 'react' ; import * as vg from 'vega' ; import { exporter } from '../../ctrl/export' ; import { download , toBlob } from '../../util/io' ; import { Icon } from '../Icon' ; const assets = require ( '../../util/assets' ) ; const RENDERER = { png : 'canvas' , svg : 'svg' } ; export class Export extends React . Component { param { string } type returns { void } public toImageURL ( type ) { const spec = exporter ( ) ; const view = new vg . View ( vg . parse ( spec ) , { renderer : RENDERER [ type ] } ) ; view . runAsync ( ) . then ( ( ) => view . toImageURL ( type ) . then ( ( url ) => download ( url , type ) ) ) ; } returns { void } public toJSONURL ( ) { const spec = JSON . stringify ( exporter ( ) , null , 2 ) ; return toBlob ( spec , 'json' ) ; } returns { void } public toHTMLURL ( ) { const spec = JSON . stringify ( exporter ( ) , null , 2 ) ; const html = assets . scaffold . replace ( 'INJECT_SPEC' , spec ) ; return toBlob ( html , 'html' ) ; } public render ( ) { return ( < ul > < li > < Icon glyph = { assets . export } / > Export < ul > < li onClick = { this . toImageURL . bind ( null , 'png' ) } > As PNG < /li> < li onClick = { this . toImageURL . bind ( null , 'svg' ) } > As SVG < /li> < li onClick = { this . toJSONURL } > As JSON < /li> < li onClick = { this . toHTMLURL } > As HTML < /li> < /ul> < /li> < /ul>); } }