@revolist/vue-charts

RevoGrid Vue Charts

One generic RevoChart component backed by the standalone chart engine.

Installation: public wrapper, private engine

The four wrapper packages are configured for public npm publishing. @revolist/charts remains a private commercial package on GitHub Packages; you need licensed access to install and use it. The wrapper imports the engine and does not bundle it.

Before the first release

The wrappers are not published yet; registry install commands below apply after publication. In this monorepo, replace your-app with your consumer workspace name and use the local package:

pnpm --filter your-app add "@revolist/vue-charts@workspace:*" "@revolist/charts@workspace:*"
pnpm build

Source: packages/charts/packages/vue-charts. The public import name is unchanged.

Registry installation after publication

Configure your project's .npmrc for the engine, keeping credentials in your environment:

@revolist:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}

Both registries use the @revolist scope. Install the public wrapper by its explicit npm tarball URL so the scope mapping continues to send the engine to GitHub Packages. A plain pnpm add @revolist/vue-charts with that mapping would look for the wrapper on GitHub instead. Changing only the default --registry does not override the scope mapping.

pnpm add @revolist/charts@3.0.0
pnpm add https://registry.npmjs.org/@revolist/vue-charts/-/vue-charts-3.0.0.tgz

Use matching released wrapper and engine versions; replace 3.0.0 in these examples when upgrading. Commit your lockfile so CI retains both registries' resolved tarball URLs, and provide GITHUB_PACKAGES_TOKEN during CI installs. Missing or unauthorized engine access causes installation to fail. No separate wrapper trial package is published.

<script setup lang="ts">
import { shallowRef } from 'vue';
import { RevoChart, type ChartComponentOptions } from '@revolist/vue-charts';
const options = shallowRef<ChartComponentOptions>({
  chartType: 'line',
  data: [{ month: 'Jan', revenue: 120 }, { month: 'Feb', revenue: 180 }],
  mapping: { category: { field: 'month' }, series: [{ field: 'revenue' }] },
});
</script>
<template>
  <RevoChart :options="options" @ready="chart => console.log(chart.model)"
    style="height:400px" class="sales-chart" />
</template>

Updates and lifecycle

options has type Omit<ChartOptions, 'container'>. It accepts the same rows and mapping, dataset, saved model, renderer, data source and chart settings as @revolist/charts. Existing callbacks such as onNodeClick, onChange and onError belong inside options. Callback replacements take effect without recreating a chart.

Replace options and changed nested values to update the chart; do not mutate nested objects in place. In Vue, replace the ref value; in Svelte, prefer $state.raw for chart configuration. Ordinary data/settings changes update the current chart. Source replacements use setDataSource. Initialization settings, input-mode changes and removed settings recreate it to restore engine defaults.

The host defaults to width 100% and height 300px. Override its dimensions with framework styles. The engine observes resizing. No stylesheet, element registration or manual mount call is needed.

The readiness callback/event receives ChartRef for download, getCSV, getImageDataURL, selection and transactions. It fires again after recreation; replace any stored ref on each readiness event. The component owns destruction, so do not destroy its ref yourself.

Creation and updates are asynchronous. Pending work is cancelled on unmount or superseding configuration, and stale results are destroyed. Failures call options.onError, or console.error when no error handler is supplied. Server rendering produces an empty host by default. Pass the optional serverRender result from renderChartToSVG to include initial SVG and hydrate it on mounting. See the engine's server rendering guide.

Building and distribution

The package compiles with the monorepo's root pnpm build. Framework runtimes and @revolist/charts stay external. Install the framework peers listed in package.json; the engine version follows the wrapper version.

The normal charts release publishes this wrapper to public npmjs using the repository's NPM_TOKEN secret. The private engine is published separately to GitHub Packages using GitHub credentials. No wrapper build:trial or trial publication is needed.