Wyn Enterprise: Creating Custom Visualization

You can take advantage of custom visualization possibilities, provided by Wyn Enterprise, that meet your unique visualization demands. To do that, you must first create a custom visualization project and then add it as your own visualization plugin on WynDashboards.

The steps to work with custom visuals are as follows:

  1. Install the build tools package from the GrapeCity npm library.
npm install @grapecity/wyn-visual-tools -g
  1. Create a custom visual project and install the dependencies.
wyn-visual-tools init
  1. Provide the name of the visual in the command prompt.

  2. Start the developer server.

wyn-visual-tools develop

The developer server starts on the localhost. You can specify the port by option '-p'. The default port is 3000. See the folder structure of the custom visual project here.

      4.a) Modify the visual.json.
      4.b) Modify the capabilities.json.
      4.c) Add i18n resource to 'i18nResources' folder. This step is optional.
      4.d) Add image to 'assets' folder. This step is optional.
      4.e) Develop the custom visual using visual api. We suggest developing it by 'Typescript' and 'Less'. The work flow is already available to make it easy to build.

Note: The Administrator should enable the developer mode. In the Admin Portal > Dashboards Settings, set Enable Developer Mode to True.

  1. To open Dashboard Designer, go to Document Portal > Create Dashboard.
  2. From Custom Visualization, drag-drop the Dev Tools scenario on dashboard designer.

  3. Click Refresh button on action bar to refresh the scenario and load the custom visual.

A port can be specified if it is necessary from the Inspector tab on the right side of the designer.

  1. Pack the visual by using build tools to get a .viz file on your project root. Run the following command in the folder where your custom visual source is located.
wyn-visual-tools package
  1. Upload the .viz file to the Resource Portal.

  2. Use the the custom visual on your dashboard.

Custom Visual Project

The folder structure of the custom visual project is as follows:

  • assets: This folder is for assets. At present, only image is supported. The image used by definition will be encoded to base64 string.
  • i18nResources: This folder is for the 'i18n' file.
  • src/visual.ts: The entrance of your visual.
  • style: The 'Less' code.
  • visual.json: Provide some meta info about this visual.

    • name: The name of custom visual.
    • displayName: The display name in dashboard designer.
    • icon: The icon for the custom visual available in assets.
    • description: The description of the visual.
    • externalJs/externalCss: The external javascript/css code.
    • assets: The name of image, which is the only asset supported.
    • configuration: Some parameters for visual run time. Can be modified after uploading on Resource Portal.
  • capabilities.json: Contains information about the configuration - data binding, properties on inspector tab, and action bar.

    • dataBinding: Describes the aggregation of the visual.
    • options: Describes the properties of the visual.
    • actions: Describes the action bar of the visual.
    • analysis: Describes the analysis panel of the visual.