The book continues:

Open eyes! Ali uses such components to develop large screens (part 1)

Open eyes! Ali uses components like this to develop large screens (PART 2)

Hi ~ I am Yefeng (@malpor), the front-end apprentice. Are you happy to buy on Singles’ Day? Today I will continue to show you how our front end open source charting library 📈 CloudCharts (Github welcome &Issue&PR) is based on G2 encapsulation to solve its problems in large-scale usage scenarios, charting with a few configuration items, serving nearly 200 internal products and many external cloud products. Those who are interested can come to the official website to experience the portal

This is the last installment in the series, answering the last two questions:

How to converge chart theme presentation and quickly switch themes?

How to build diagrams in low code?

What is a chart topic?

CloudCharts is a data-driven chart in which data determines what the chart shows. While the theme system controls the appearance of non-data elements of the chart, it cannot change the sensory nature of the chart, but can make the chart more aesthetic and meet the requirements of the overall visual consistency.

The details of the theme control include patterns such as the axes of the chart, legends, color combinations of grid lines and geometric markers.

By default, we provide two themes, one for light and dark scenes:

How to implement the subject system?

CloudCharts’ theme system mainly consists of three parts: theme package, theme manager and component call:

1. Theme package

A theme package is a KV-map composed of multiple theme variable values, usually given by the designer for a scene color value, font size, spacing, etc. For example, the default theme provided by light and dark themes are two theme packs. Something like this:

{
  "widgets-color-background": "#ffffff"."widgets-color-blue": "#3f90ff"."widgets-color-orange": "#fa8c15". }Copy the code

2. Topic Manager

The manager is responsible for CUR (adding, modifying, and querying topics, not deleting them here), exposing interfaces that allow users to switch topics and set up custom topic packages. At the same time, the internal charting component can get the current theme package to draw.

// Get the theme package, return the current theme without passing the name
function getTheme(name) {... }// Set the theme package, passing in the name or theme package
function setTheme(nameOrTheme) {... }// Define a map that stores the current topic variables and get/set methods
const themes = {
  // Interface method
  getTheme,
  setTheme,
  // Subject variable. };// Themes can be exported directly through references to ensure that the themes are consistent between the components
export default themes;
Copy the code

3. Component invocation

The G2 component and the custom React component are available in the chart library. The G2-based component requires JS theme variables, while the custom React component uses CSS theme variables. So there are two kinds of calls: JS calls and CSS calls.

JS calls

In the manager, we export the Themes object. This object can fetch the current theme variable directly, which is easy to call from JS:

import themes from '.. /themes';

// Use variables
const mainColor = themes['widgets-color-blue'];
Copy the code

CSS call

During diagram initialization, we will convert the theme variable to CSS variable, which is inserted into the document with the style tag, so that we can use the theme variable directly in the CSS of the React component:

// insert into HTML<style>
  .cloud-charts {
    --widgets-color-background: #ffffff;
    --widgets-color-blue: #3f90ff;
    --widgets-color-orange: #fa8c15; . }</style>Cloud-wcontainer {background: var(--widgets-color-background); padding: var(--widgets-container-padding); . }Copy the code

The theme manager also dynamically updates CSS variables when the setTheme is called to ensure theme consistency.

Through these three parts, our theme system is basically completed.

Enhancement – Theme Designer

Our theme package relies on designers to provide visual schemes. In the past, designers were required to produce the design draft first, and the front-end adjusted the theme variables according to the design draft. It takes a lot of time and effort for the two parties to coordinate, which is fine if it is just one or two scenarios, but it is inefficient as the business develops more and more scenarios.

So we created a widget called Theme Designer:

Designers can configure chart theme packs online to dynamically see how they look in different components. The tool can also be assisted by algorithms to automatically supplement part of the color palette after modifying the main color, reducing the design workload. Once the design is complete, the tool directly exports the subject packages that can be used by the front end, making the whole design delivery process easier and wySIWYG.

You can experience it directly on the official website: Theme Designer

Low code charting scheme

The wrapped chart library is relatively simple to use and can be developed quickly by referring to examples and documentation. But is there an easier way to configure diagrams without looking at documentation?

The answer is visual editing.

Generate the configuration items needed for the chart through the visual form configuration. Developers can configure charts with the click of a mouse and copy them to their own projects with one click. Is a relatively simple low code solution.

The chart library is also configurable and can be easily plugged into a variety of more complex low-code scaffolding systems. For example, we export materials to products such as Easa and DataV.

The dividing line at the end

By adding theme designers and visual editing capabilities, we are bridging the graph upstream and downstream, perfecting the visual link “from designer to developer to low code construction system”.

This concludes our series on Developing large Screens with Components like this. If you have any questions, you are welcome to put forward in the comments. If you are interested in what you want to see, you can also comment

📢 📢 another thing, the Vue version that many people are interested in has been added to the development plan, you can see the specific progress in the Issue: portal

Keep an eye on us