Zoomdata Version

Migrating Custom Charts

A new version (4.0) of the CLI was introduced with Zoomdata 3.2. The new and old versions of the CLI create custom charts using different commands and use a different file structure.

Zoomdata recommends that you install the new CLI version globally and migrate your existing custom charts to the new format as described here. The following table lists the version of the CLI supported by different Zoomdata versions.

CLI Version Supported Zoomdata Versions
3.0 3.1 and earlier
4.0 3.2 and later

File Structures

The following pictures depict the file structures of a customer chart created using the version 3 and version 4 CLI.

Version 3 CLI File Structure

Version 4 CLI File Structure

CLI Command Differences

The command differences between CLI version 3 and 4 are described in the following table:

Command CLI Version Support Description
v3 v4
zd-chart add Yes No Use the zd-chart import command instead in CLI version 4.
zd-chart init No Yes Use this CLI version 4 command to create a new chart in a folder you specify. This command combines the functions of the zd-chart create and zd-chart pull commands.
zd-chart edit Yes Yes With CLI version 4, this command updates the chart locally, but no longer pushes the updated chart to the server.
zd-chart push Yes Yes With CLI version 4, this command pushes the new version 4 bundled format of a custom chart to the server.
zd-chart import <zip-file-path> No Yes Use this CLI version 4 command to import a chart in a zip file.
zd-chart watch Yes Yes With CLI version 4, this command watches changes in the src directory and pushes them to the server.
zd-chart create Yes No Use the zd-chart init command instead in CLI version 4.
zd-chart pull Yes No Use the zd-chart init command instead in CLI version 4.

Migration Procedure

The examples given in the procedure below describe how to migrate an existing custom chart (old_bar) to a new custom chart (new_bar) using the new version of the CLI. These examples assume you are using the globally installed zoomdata-chart-cli. If you are using a locally installed version, replace the zd-chart commands in this example with $yarn chart or with $npm run chart as described in Using Previous and New Versions of the CLI on a Single Machine.

To migrate an existing custom chart to the new version of the CLI:

  1. Create a new chart with CLI 4.0 using the $zd-chart init command. For example, the following command creates a new bar chart called new_bar:

    $ zd-chart init new_bar
  2. Create a /libs directory inside the new custom chart. The following commands set up a new_bar/libs directory:

    $ cd new_bar
    $ mkdir libs
  3. Update the package.json file. Add dependencies for all libraries that you have in the older custom chart to the libraries for the new custom chart, except for the echarts-all.js and zchart.js. files. For example:

    "dependencies": {
    "d3": "^3.5",
    "lodash": "3.10.1",
    ...
    },
  4. Copy the visualization.json file from the directory for the older custom chart to the directory for the new custom chart.

  5. Copy the echarts-all.js and zchart.js files from the older custom chart /libs directory to the new custom chart /libs directory.

  6. Copy the contents of the /components directory from the older custom chart to the /src/components directory of the new custom chart.

  7. Add dependencies and import statements for all third-party libraries for the new custom chart. For example:

    "dependencies": {
    "d3": "^3.5",
    "lodash": "3.10.1",
    "jquery": "^3.3.1"
    },
  8. Change the src/index.js file for the new custom chart.

    • Add imports from ./libs

    • Add imports from ./src/components (the order is important)

    For example:

    import '../libs/echarts-all';
    import '../libs/zchart';
    import * as d3 from 'd3';
    import _ from 'lodash';
    import './components/a3_HorizontalBarsMultiMetric';
    import './components/a4_VerticalBarsMultiMetric';
    import './components/style.css';
    import './components/z6_initter';
  9. Add your custom code for the new custom chart.

  10. Install the dependencies.

    $ npm install
  11. Build the new custom chart.

    $ npm run build
  12. Push the new custom chart to the server.

    $ zd-chart push -d ./dist

Was this topic helpful?