integration-widget-pie-chart v1.3.0
Pie chart My TS widget template
A template to build a pie chart widget.
Prerequisites
- git
- node 8.12
- yarn 1.10.1
Commands
All those commands must be run in a terminal in the repository folder.
Download the dependencies
yarn install
Build the package for production
yarn build
Build the package for debug
yarn build:debug
Build the package for debug and watch for file modifications
yarn watch
Launch the testing tool
yarn display
When the widget is successfully built, it creates a folder dist
with a
main.bundle.js
inside. When the widget is ready you can send the file to Talentsoft.
Project description
package.json: node package description
tsconfig.json: typescript compiler options
webpack.config.js: build setup
widget.conf.json: the widget configuration. The widgetName key identifies this widget for talentsoft.
resources: contains one file per supported language. Each file must contain the same set of resource keys and the corresponding text in the file's language.
asset: contains the less files needed for the widget display.
app: contains the app code. The main file (as configured in
webpack.config.js
is widget.tsx
). This file must export a Widget
class
the defines a react component.
Css management
All style information must be included in the javascript bundle. With this
project you can acheive this behavior by importing less files (see import
'../asset/widget.less';
in widget.tsx
). The less will be compiled to css and
put into a function that will insert it in the widget's html body when it is
loaded.
If you want to use a different preprocessor or directly css you can edit the webpack configuration.
Host api
The widget receive a number of properties that allows it to communicate with the host page. It receives data (current language, display mode, etc) and can send information using the provided methods (eg to notify the host that the loading has finished).
You can find the host api reference here: Host api reference
Testing
You can use the widget display tool to test a widget. Please see this link for more information.