@visactor/vchart-tt-platform-theme
v1.12.2
Published
Extended themes for VChart
Downloads
208
Maintainers
Keywords
Readme
@visactor/vchart-tt-platform-theme
Description
The extension TT Platform 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 TikTok Platform Design
Dynamic Theme (RECOMMENDED solution, to be used in conjunction with @semi-bot/semi-theme-ttpd-internal
)
In order to provide a better experience for VChart in the TikTok platform page environment, VisActor has launched an additional theme package called @visactor/vchart-tt-platform-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 TikTok platform design language and also automatically adapted to theme packages customized by users through Semi DSM.
- Responsive:
@visactor/vchart-tt-platform-theme
supports listening for changes of light/dark mode and theme switching on the page, and automatically updates the theme of the charts on the page.
DEMO
For a complete demo, please visit the codeSandBox page.
Installation
https://www.npmjs.com/package/@visactor/vchart-tt-platform-theme
# npm
npm install @visactor/vchart-tt-platform-theme
# yarn
yarn add @visactor/vchart-tt-platform-theme
Usage
To access the default functionality, simply execute the initVChartTTPlatformTheme
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 { initVChartTTPlatformTheme } from '@visactor/vchart-tt-platform-theme';
// initialization
initVChartTTPlatformTheme();
const dom = document.querySelector('#root');
const root = createRoot(dom);
root.render(<App />);
The initVChartTTPlatformTheme
method supports passing in an object as a parameter, whose type declaration is:
interface IInitVChartTTPlatformThemeOption {
/** 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;
/** Whether to listen for theme switching and automatically change the chart theme. The default setting is false (applicable to the official theme switching interface of Semi: https://semi.design/dsm/install_switcher) */
isWatchingThemeSwitch?: boolean;
/** Specify a ThemeManager, usually not specified. If multiple versions of vchart coexist, it needs to be specified */
themeManager?: typeof ThemeManager;
}
Static Theme (Suitable for business parties who do not currently install @semi-bot/semi-theme-ttpd-internal
, or semi version<2.53.0)
@visactor/vchart-tt-platform-theme
also exports static themes in JSON format, with built-in default style values for TikTok Platform Design, eliminating the need for business parties to install @semi-bot/semi-theme-ttpd-internal
.
Installation
https://www.npmjs.com/package/@visactor/vchart-tt-platform-theme
# npm
npm install @visactor/vchart-tt-platform-theme
# yarn
yarn add @visactor/vchart-tt-platform-theme
Usage
Directly import the JSON file corresponding to the theme from the package, and globally execute it only once:
import ttPlatformLight from '@visactor/vchart-tt-platform-theme/public/ttPlatformLight.json';
import VChart from '@visactor/vchart';
// register the theme
VChart.ThemeManager.registerTheme('ttPlatformLight', ttPlatformLight);
// apply the theme
VChart.ThemeManager.setCurrentTheme('ttPlatformLight');
Static resources
This package contains both static theme JSON resources (static resources only apply to the default Semi theme), which can be used on demand.
- ttPlatformLight TT Platform - light
- ttPlatformDark TT Platform - dark
Debug
Run the following command from any location in the project to start the dev server:
rush tt