import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';
import buildChart from './modules/wikipedia-views-spiral-chart.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';
import buildChart from './modules/wikipedia-views-spiral-chart.js';const canvas = scrawl.library.canvas.mycanvas;We need to generate an initial chart to display
const initialAssetName = 'wiki-Cat-chart';
buildChart({
page: 'Cat',
assetName: initialAssetName,
canvas,
scrawl,
});And we need a picture entity in which to display the chart
const piccy = scrawl.makePicture({
name: 'spiral-chart',
dimensions: ['100%', '100%'],
copyDimensions: ['100%', '100%'],
asset: initialAssetName,
});Function to display frames-per-second data, and other information relevant to the demo
const entitys = scrawl.library.entitynames;
const report = reportSpeed('#reportmessage', function () {
return `Entity count: ${entitys.length}`;
});Create the Display cycle animation
scrawl.makeRender({
name: 'demo-animation',
target: canvas,
afterShow: report,
});scrawl.addNativeListener('change', () => {
/** @ts-expect-error */
const page = document.querySelector('#wikipedia-page').value;
if (page) {
const assetName = `wiki-${page}-chart`;
if (!scrawl.library.assetnames.includes(assetName)) {
buildChart({
page,
assetName,
canvas,
scrawl,
});
}
piccy.set({
asset: assetName,
});
}
}, '#wikipedia-page');console.log(scrawl.library);