@antv/t8
Version:
T8 is a text visualization solution for unstructured data within the AntV technology stack, and it is a declarative T8 markdown syntax that can be used to describe the content of data interpretation reports.
122 lines (118 loc) • 4.17 kB
JavaScript
;
var tslib = require('tslib');
var preact = require('preact');
require('preact/jsx-runtime');
require('uuid');
require('./schema/paragraph.js');
require('./schema/phrase.js');
require('./vis-components/styled/bullet.js');
require('./vis-components/styled/container.js');
require('./vis-components/styled/entity.js');
require('./vis-components/styled/heading.js');
require('./vis-components/styled/marks.js');
require('./vis-components/styled/paragraph.js');
require('./vis-components/context/hooks/theme.js');
require('./vis-components/context/hooks/plugin.js');
require('./vis-components/context/hooks/event.js');
require('./vis-components/context/hooks/currentParagraphInfo.js');
require('./plugin/index.js');
var util = require('./theme/util.js');
require('./theme/seed/index.js');
require('preact/hooks');
var NarrativeTextVis = require('./vis-components/NarrativeTextVis.js');
var EE = require('@antv/event-emitter');
var syntaxParser = require('./parser/syntax-parser.js');
var PluginManager = require('./plugin/PluginManager.js');
var index = require('./plugin/presets/index.js');
/**
* Text component for rendering narrative text visualizations.
*
* Usage:
* ```javascript
* const text = new Text('#container');
* text.theme('light').render(`
* # Sales Report
* Total sales are [¥1,234,567](metric_value).
* `);
* ```
*/
var Text = /** @class */ (function (_super) {
tslib.__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.PluginManager(index.presetPlugins);
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 = util.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.
* Accepts a T8 syntax string for rendering.
* @param t8Syntax - T8 syntax string to render.
* @returns A function to unmount the component.
*/
Text.prototype.render = function (t8Syntax) {
var container = this.container;
var spec;
// Parse T8 syntax if provided
if (t8Syntax) {
try {
// Parse T8 syntax string with error tolerance
spec = syntaxParser.parseSyntax(t8Syntax);
}
catch (error) {
// Log error but continue with empty spec for error tolerance
console.error("T8 Syntax parsing failed: ".concat(error instanceof Error ? error.message : String(error)));
spec = { sections: [] };
}
}
else {
// Use stored spec if no content provided
spec = this.spec;
}
// Render the component.
// We use `preact` to code the `NarrativeTextVis` components.
preact.render(preact.h(NarrativeTextVis.NarrativeTextVis, {
spec: spec,
pluginManager: this.pluginManager,
themeSeedToken: this.themeSeedToken,
onEvent: this.emit.bind(this),
}), container);
// Return unmount function.
return function () {
preact.render(null, container);
};
};
/**
* Clear the visualization.
*/
Text.prototype.clear = function () {
this.unmount();
};
/**
* Unmount the component.
*/
Text.prototype.unmount = function () {
preact.render(null, this.container);
};
return Text;
}(EE));
exports.Text = Text;
//# sourceMappingURL=text.js.map