@antv/t8
Version:
T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative JSON Schema syntax that can be used to describe the content of data interpretation reports.
128 lines (125 loc) • 4.5 kB
JavaScript
import { __extends } from 'tslib';
import { render, h } from 'preact';
import 'preact/jsx-runtime';
import 'uuid';
import './schema/paragraph.js';
import './schema/phrase.js';
import { createT8ClarinetParser } from './utils/t8ClarinetParser.js';
import './vis-components/styled/bullet.js';
import './vis-components/styled/container.js';
import './vis-components/styled/entity.js';
import './vis-components/styled/heading.js';
import './vis-components/styled/marks.js';
import './vis-components/styled/paragraph.js';
import './vis-components/context/hooks/theme.js';
import './vis-components/context/hooks/plugin.js';
import './vis-components/context/hooks/event.js';
import './plugin/index.js';
import { getThemeSeedToken } from './theme/util.js';
import './theme/seed/index.js';
import 'preact/hooks';
import { NarrativeTextVis } from './vis-components/NarrativeTextVis.js';
import EE from '@antv/event-emitter';
import { PluginManager } from './plugin/PluginManager.js';
import { presetPlugins } from './plugin/presets/index.js';
/**
* Text component for rendering narrative text visualizations.
*
* Usage:
* ```javascript
* const text = new Text('#container');
* text.schema(spec).theme(theme).render();
* ```
*/
var Text = /** @class */ (function (_super) {
__extends(Text, _super);
function Text(container) {
var _this = _super.call(this) || this;
_this.container = typeof container === 'string' ? document.querySelector(container) : container;
_this.pluginManager = new PluginManager(presetPlugins);
_this.parser = createT8ClarinetParser();
return _this;
}
/**
* Set the schema for the narrative text visualization.
* @param spec - The specification object containing narrative text details.
* @returns The Text instance for method chaining.
*/
Text.prototype.schema = function (spec) {
this.spec = spec;
return this;
};
/**
* Set the theme for the narrative text visualization.
* @param theme - The theme configuration for the text visualization.
* @returns The Text instance for method chaining.
*/
Text.prototype.theme = function (theme, seedToken) {
this.themeSeedToken = getThemeSeedToken(theme, seedToken);
return this;
};
/**
* Register a plugin for the text visualization.
* @param plugin - The plugin to register.
* @returns The Text instance for method chaining.
*/
Text.prototype.registerPlugin = function (plugin) {
this.pluginManager.register(plugin);
return this;
};
/**
* Render the narrative text visualization.
* @returns A function to unmount the component.
*/
Text.prototype.render = function () {
var container = this.container;
var spec = this.spec;
// Render the component.
// We use `preact` to code the `NarrativeTextVis` components.
render(h(NarrativeTextVis, {
spec: spec,
pluginManager: this.pluginManager,
themeSeedToken: this.themeSeedToken,
onEvent: this.emit.bind(this),
}), container);
// Return unmount function.
return function () {
render(null, container);
};
};
/**
* Stream render the narrative text visualization.
* @param newJSONFragment - The new JSON fragment to render.
* @param options - The options for the stream render.
* @returns The Text instance for method chaining.
*/
Text.prototype.streamRender = function (newJSONFragment, options) {
var _a, _b;
this.parser.append(newJSONFragment);
var result = this.parser.getResult();
if (result.error) {
(_a = options === null || options === void 0 ? void 0 : options.onError) === null || _a === void 0 ? void 0 : _a.call(options, result.error);
}
else {
(_b = options === null || options === void 0 ? void 0 : options.onComplete) === null || _b === void 0 ? void 0 : _b.call(options, result);
this.schema(result.document);
this.render();
}
};
/**
* Clear the parser.
*/
Text.prototype.clear = function () {
this.parser.reset();
this.unmount();
};
/**
* Unmount the component.
*/
Text.prototype.unmount = function () {
render(null, this.container);
};
return Text;
}(EE));
export { Text };
//# sourceMappingURL=text.js.map