npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@visactor/vchart-ve-o-theme

v1.12.2

Published

Extended themes for VChart

Downloads

636

Readme

@visactor/vchart-ve-o-theme

Description

The extension O Design themes for VChart.

Installing and Using VChart

In React projects, you can use the following command to install react-vchart:

# npm
npm install @visactor/react-vchart
# yarn
yarn add @visactor/react-vchart

The method of drawing charts and more detailed guidance can be found in this tutorial.

Chart Theme Package for O Design

In order to provide a better experience for VChart in the O Design page environment, VisActor has launched an additional theme package called @visactor/vchart-ve-o-theme. This package has the following features:

  • Ready to use out of the box: With simple configuration, VChart styles can be automatically integrated into the O Design language and also automatically adapted to theme packages customized by users based on Arco.
  • Responsive: @visactor/vchart-ve-o-theme supports listening for changes of light/dark mode and CSS variable update on the page, and automatically updates the theme of the charts on the page.

DEMO

For a complete demo, please visit the this page.

Installation

https://www.npmjs.com/package/@visactor/vchart-ve-o-theme

# npm
npm install @visactor/vchart-ve-o-theme

# yarn
yarn add @visactor/vchart-ve-o-theme

Usage

To access the default functionality, simply execute the initVChartVeOTheme method once globally for initialization. This statement can usually be placed in the entry file of a React project. As an example:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './app.jsx';
import { initVChartVeOTheme } from '@visactor/vchart-ve-o-theme';

// initialization
initVChartVeOTheme();

const dom = document.querySelector('#root');
const root = createRoot(dom);
root.render(<App />);

The initVChartVeOTheme method supports passing in an object as a parameter, whose type declaration is:

interface IInitVChartVeOThemeOption {
  /** Initial light/dark mode */
  defaultMode?: 'light' | 'dark';
  /** Whether to listen for the light/dark mode switching and automatically change the chart theme. The default setting is true */
  isWatchingMode?: boolean;
  /** Specify a ThemeManager, usually not specified. If multiple versions of vchart coexist, it needs to be specified */
  themeManager?: typeof ThemeManager;
  /** The initial color palette type, with a default value of 'default' */
  colorScheme?: ColorSchemeType | string;
}

Advanced Features

The following will introduce the other built-in features of the @visactor/vchart-ve-o-theme package in sequence.

Default Color Palette & Industry Color Palette

@visactor/vchart-ve-o-theme supports 8 sets of data color palettes, namely:

  • default - Default color palette (consistent with VChart)
  • finance - Color palette for financial industry
  • government - Color palette for government industry
  • consumer - Color palette for major consumer industries
  • automobile - Color palette for the automotive industry
  • culturalTourism - Color palette for the cultural and tourism industry
  • medical - Color palette for medical industry
  • newEnergy - Color palette for the new energy industry

You can preview by switching color palettes through the dropdown menu in the demo (https://www.visactor.io/vchart/theme/demo/veo).

The theme pack provides initialization and switching functions for these data palettes. In terms of usage, in addition to configuring colorScheme in the initialization parameter options mentioned earlier, it is also possible to perform hot updates on the data palette. An example is as follows:

// init once globally
const helper = initVChartVeOTheme();

// some your codes... (eg. init charts)

// change the current color scheme
helper.switchVChartColorScheme('finance');

Bar Chart Interaction Plugin

In O Design system, the bar chart elements have the following two default interaction effects:

  • When hovering over a bar element with the mouse, highlight all elements in the same group
  • Circular markers appear at the edges of the bar elements hovered over by the mouse

The theme package provides a chart plugin to achieve this customized interactive effect. The following functions need to be run globally once (usually placed in the entry file of the React project) to automatically add this interaction to all bar charts:

import { registerBarMarker } from '@visactor/vchart-ve-o-theme';

// initialization
registerBarMarker();

Built in Shapes and Colors

The theme package has customized special legend shapes for VChart (which can also be used with tooltips):

img

The shape declaration is in the VeOSymbolType constant of the theme package. Contains the following shape types:

  • VeOSymbolType.roundSpuare:Rounded rectangle
  • VeOSymbolType.line:Short horizontal line
  • VeOSymbolType.linePoint:Short horizontal line overlapping circle
  • VeOSymbolType.linePointHollow:Short horizontal line superimposed with hollow circle
  • VeOSymbolType.lineDash:Short dashed line
  • VeOSymbolType.triangleUp:Upward triangle (used to label lines)
  • VeOSymbolType.triangleDown:Downward triangle (used to label lines)

The following example shows changing the legend and tooltip shape to VeOSymbolType.linePoint in a line chart:

const spec = {
  type: 'area',
  data: {
    values: [
      { type: 'Nail polish', country: 'Africa', value: 4229 },
      { type: 'Nail polish', country: 'EU', value: 4376 },
      { type: 'Nail polish', country: 'China', value: 3054 },
      { type: 'Eyebrow pencil', country: 'Africa', value: 3932 },
      { type: 'Eyebrow pencil', country: 'EU', value: 3987 },
      { type: 'Eyebrow pencil', country: 'China', value: 5067 },
      { type: 'Rouge', country: 'Africa', value: 5221 },
      { type: 'Rouge', country: 'EU', value: 3574 },
      { type: 'Rouge', country: 'China', value: 7004 },
      { type: 'Lipstick', country: 'Africa', value: 9256 },
      { type: 'Lipstick', country: 'EU', value: 4376 },
      { type: 'Lipstick', country: 'China', value: 9054 },
      { type: 'Eyeshadows', country: 'Africa', value: 3308 },
      { type: 'Eyeshadows', country: 'EU', value: 4572 },
      { type: 'Eyeshadows', country: 'China', value: 12043 },
      { type: 'Eyeliner', country: 'Africa', value: 5432 },
      { type: 'Eyeliner', country: 'EU', value: 3417 },
      { type: 'Eyeliner', country: 'China', value: 15067 },
      { type: 'Foundation', country: 'Africa', value: 13701 },
      { type: 'Foundation', country: 'EU', value: 5231 },
      { type: 'Foundation', country: 'China', value: 10119 },
      { type: 'Lip gloss', country: 'Africa', value: 4008 },
      { type: 'Lip gloss', country: 'EU', value: 4572 },
      { type: 'Lip gloss', country: 'China', value: 12043 },
      { type: 'Mascara', country: 'Africa', value: 18712 },
      { type: 'Mascara', country: 'EU', value: 6134 },
      { type: 'Mascara', country: 'China', value: 10419 }
    ]
  },
  stack: true,
  xField: 'type',
  yField: 'value',
  seriesField: 'country',
  legends: [
    {
      visible: true,
      item: {
        shape: { style: { symbolType: VeOSymbolType.linePoint } }
      }
    }
  ],
  tooltip: {
    visible: true,
    style: {
      shape: {
        shapeType: VeOSymbolType.linePoint
      }
    }
  }
};

The theme package also includes 5 colors that represent different levels of urgency, declare as a VeOColor constant, using the same method as VeOSymbolType.

export const VeOColor = {
  /** 致命 */
  fatal: '#7E0C06',
  /** 高危、不健康 */
  critical: '#D7312A',
  /** 中危、警告 */
  warning: '#EF7D2E',
  /** 低危,提示 */
  notice: '#F0A50F',
  /** 安全,健康 */
  safe: '#309256'
};

Static resources

This package contains both static theme JSON resources, which can be used on demand.

When in use, directly reference the corresponding JSON file of the theme from the package, and only need to execute it globally once:

import ttPlatformLight from '@visactor/vchart-ve-o-theme/public/veODesignLight.json';
import VChart from '@visactor/vchart';
// register the theme
VChart.ThemeManager.registerTheme('veODesignLight', veODesignLight);
// apply the theme
VChart.ThemeManager.setCurrentTheme('veODesignLight');

Debug

Run the following command from any location in the project to start the dev server:

rush veo