Forem: 玄魂

Powerful and High-Performance: VTable Practice Sharing — The Ultimate Tool for Table Data Visualization

玄魂 — Tue, 30 Dec 2025 09:59:27 +0000

This article is contributed by VTable user LLmoskk (https://github.com/LLmoskk).

VTable Overview

Quoted from the official website:

VTable: Not just a high-performance multidimensional analysis table — it’s a grid artist creating between rows and columns!

In modern applications, table components are indispensable. They can quickly present large volumes of data and provide solid visualization and interactive experiences. VTable is a high-performance table component library based on the visualization rendering engine VRender. It offers excellent performance, powerful multidimensional analysis capabilities, and flexible, robust graphics abilities.

Official site: https://visactor.com/vtable

GitHub: https://github.com/VisActor/VTable

Create a Project

I’ll share a few simple practical cases. I currently mainly use the basic ListTable in a React project, so most examples are for ListTable. I’ll continue sharing additional content as I encounter valuable tips while using other VTable types.

Full example code: https://github.com/LLmoskk/vtable-demo

Online preview: https://llmoskk.github.io/vtable-demo/

Start a React project with Vite. Note: react-vtable does not yet support React 19 — use React 18.

Use AI + MCP to Drive VTable Quickly and Accurately

I currently use AWS’s krio as my AI IDE. First, add the context7 MCP. This MCP lets the AI fetch the latest documentation to avoid outdated APIs. Most mainstream IDEs support adding MCP; no need to list them here.

{
  "mcpServers": {
    "context7": {
      "args": [
        "-y",
        "@upstash/context7-mcp@latest"
      ],
      "command": "npx",
      "disabled": false,
      "autoApprove": [
        "resolve-library-id"
      ]
    }
  }
}

You can see MCP was successfully invoked to fetch documentation. I asked it to implement a tree table.

Quickly, the AI finished. The effect is pretty good. I won’t paste the code here since it’s mainly to demonstrate using AI + MCP to implement VTable features fast, without manually paging through docs.

Auto-Calculated Column Widths with Persistent Drag-Resize Memory

Project context:

With large datasets, fixing all column widths to 120px can waste space for columns with short content. The solution: dynamically adjust column widths by measuring values to set a final width per column.

Column auto-fit: Analyze the first 20 rows to dynamically compute each column’s optimal width for a more reasonable layout.
User drag-resize: Allow users to drag column borders to adjust widths. Store the result in localStorage to improve UX.
Load priority: On table load, set widths by this order:
- Local storage value
- Auto-calculated value
- Default width

We’ll create a file named use-column-width.ts to encapsulate a custom Hook. It computes widths per the above logic and remembers user drag-resized widths. We use ahooks’ useLocalStorageState to keep state synchronized with localStorage.

Measuring text width — reference: https://juejin.cn/post/7091990279565082655. Full code is in the repo: https://github.com/LLmoskk/vtable-demo/blob/main/src/pages/demo1/utils/calculate-column-width.ts

(No need to write it yourself — VTable provides measureText 😅)

If you don’t have customization needs, you can directly use VTable’s autoWidth mode — it already performs one pass of width calculation.

Text measure in VTable: https://github.com/VisActor/VUtil/blob/main/packages/vutils/src/graphics/text/measure/textMeasure.ts

https://www.npmjs.com/package/@visactor/vutils

import { useLocalStorageState } from 'ahooks';
import { useCallback, useMemo } from 'react';
import { type ColumnDefine } from '@visactor/vtable';
import { calculateColumnsWidthMap } from '../utils/calculate-column-width';
import type { Sort } from '../type';

type UseColumnWidthParams<T extends ColumnDefine> = {
  /** Column config list */
  columns?: T[];
  /** Key for localStorage */
  storageKey: string;
  /** Table data used to calculate column widths */
  data?: any[];
  /** Default column width */
  defaultWidth?: number;
  /** View ID */
  viewId?: string | number;
  /** Sort info applied */
  sorts?: Sort[];
};

type UseColumnWidthReturn<T extends ColumnDefine> = {
  /** Column configs with width applied (priority: localStorage > calculated > default) */
  columnsWithWidth: T[];
  /** Function to save column widths */
  saveColumnWidths: (colWidths: number[]) => void;
  /** Column width map */
  columnWidths: Record<string, number>;
};

/**
 * Manage persistent column widths for a table
 * Automatically cleans widths for fields no longer present when columns change
 * Priority: localStorage > calculated > default
 */
const useColumnWidth = <T extends ColumnDefine>({
  columns,
  storageKey,
  data = [],
  defaultWidth = 120,
  sorts,
}: UseColumnWidthParams<T>): UseColumnWidthReturn<T> => {
  const [storedValue, setStoredValue] = useLocalStorageState<any>(storageKey, {
    defaultValue: {},
  });
  const columnWidths = storedValue;

  const calculatedWidthMap = useMemo(
    () =>
      calculateColumnsWidthMap(
        columns,
        data,
        sorts,
      ),
    [columns, data, sorts],
  );

  // Save column widths to localStorage
  const saveColumnWidths = useCallback(
    (colWidths: number[]) => {
      const widthMap: Record<string, number> = {};
      columns?.forEach((col, index) => {
        if (colWidths[index]) {
          widthMap[String(col.field)] = colWidths[index];
        }
      });

      setStoredValue(widthMap);
    },
    [columns, setStoredValue],
  );

  // Apply widths to column config
  // Priority: localStorage > calculated > default
  const columnsWithWidth = useMemo(() => {
    return columns?.map((col) => {
      // Fixed width 40 for checkbox; cellType may be a function
      if (col.cellType === 'checkbox' || col.headerType === 'checkbox') {
        return {
          ...col,
          width: 40,
        };
      }

      // Prefer localStorage width
      if (columnWidths?.[String(col.field)]) {
        return {
          ...col,
          width: columnWidths[String(col.field)],
        };
      }

      // Otherwise use calculated width
      const calculatedWidth = calculatedWidthMap.get(String(col.field));
      if (calculatedWidth) {
        return {
          ...col,
          width: calculatedWidth,
        };
      }

      // Fallback to default width
      return {
        ...col,
        width: defaultWidth,
      };
    });
  }, [columns, columnWidths, calculatedWidthMap, defaultWidth]);

  return {
    columnsWithWidth: columnsWithWidth || [],
    saveColumnWidths,
    columnWidths: columnWidths || {},
  };
};

export default useColumnWidth;

Theme Switching

VTable provides themes for Arco Design and Dark Mode. My project migrated from Arco Design’s Table to VTable, so I used the official theme package, and since we also needed dark mode, I customized the Dark Mode settings. See docs for base theme config: https://visactor.com/vtable/option/ListTable#theme

There are five built-in themes:

const builtinThemes = [
  { key: 'DEFAULT', name: 'Default', theme: themes.DEFAULT },
  { key: 'DARK', name: 'Dark', theme: themes.DARK },
  { key: 'BRIGHT', name: 'Bright', theme: themes.BRIGHT },
  { key: 'ARCO', name: 'Arco', theme: themes.ARCO },
  { key: 'SIMPLIFY', name: 'Simplify', theme: themes.SIMPLIFY }
];

You can extend themes for customization. After switching to the ARCO theme, I still found differences from the component library’s Table. So I implemented some style overrides.

import { themes } from '@visactor/vtable';

/** Get a common VTable theme config */
export const getCommonVTableTheme = () => {
  return themes.ARCO.extends({
    frameStyle: {
      borderLineWidth: 0,
    },
    headerStyle: {
      bgColor: '#F0F1F5',
      fontSize: 12,
      fontWeight: 400,
      autoWrapText: true,
      lineClamp: 3,
    },
    bodyStyle: {
      // Use a function to set background color dynamically. Use headerStyle for aggregation rows.
      bgColor: (args: any) => {
        // Check whether this is an aggregation row
        if (args.table && typeof args.table.isAggregation === 'function') {
          const isAggregationCell = args.table.isAggregation(args.col, args.row);
          if (isAggregationCell) {
            return '#F0F1F5';
          }
        }
        return '#FFFFFF';
      },
    },
    bottomFrozenStyle: {
      bgColor: '#F0F1F5',
      fontWeight: 600,
      fontSize: 14,
    },
    tooltipStyle: {
      bgColor: 'black',
      color: 'white',
      fontSize: 12,
      padding: [8, 12, 8, 12],
    },
    scrollStyle: {
      visible: 'always', // Scrollbar always visible
      hoverOn: false, // Scrollbar does not overlay content; shows independently
    },
    selectionStyle: {
      cellBgColor: 'rgba(133,165,242,0.2)',
    },
  });
};

For conditional cell styling, traverse column config and set styles per condition.

const salesColumn = baseColumns.find(col => col.field === 'sales');
if (salesColumn) {
  (salesColumn as any).style = {
    color: (args: any) => {
      const value = args.dataValue;
      if (value >= 150000) return '#059669'; // Green: high sales
      if (value >= 100000) return '#0891b2'; // Blue: medium sales
      return '#dc2626'; // Red: low sales
    },
    fontWeight: (args: any) => {
      return args.dataValue >= 150000 ? 'bold' : 'normal';
    }
  };
}

Transpose and Frozen Columns/Rows

Frozen columns/rows config: https://visactor.com/vtable/guide/basic_function/frozen_column_row

Admin tables often need to fix a few columns on the left. VTable supports freezing at top, bottom, left, and right.

Issue I encountered: when switching to dark mode, the freeze button icon color didn’t follow the theme. Docs show you can register custom icons. I grabbed the original SVG from source and injected a theme-following frozen_color.

export const registerVtableIcon = (isDark?: boolean) => {
  const frozen_size = 22;
  const frozen_size_2 = 22;
  const frozen_color = isDark ? '#FFFFFF' : '#282F38';
  const frozen_color_opacity = '0.35';
  const freeze_color_opacity = '0.2';

  register.icon('frozen', {
    type: 'svg',
    svg:
      '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">' +
      `<path d="M8.49975 3.66663C8.32294 3.66663 8.15337 3.73686 8.02835 3.86189C7.90332 3.98691 7.83309 4.15648 7.83309 4.33329V9.63246C6.76475 10.2533 6.07942 11.1795 6.00625 12.2308C5.99892 12.2786 5.99692 12.3268 6.00009 12.3741L5.99975 12.4166C5.99975 12.5934 6.06999 12.763 6.19501 12.888C6.32004 13.0131 6.48961 13.0833 6.66642 13.0833H10.3333L10.3331 17.5L10.8611 18.292C10.8763 18.3148 10.8969 18.3335 10.9211 18.3464C10.9453 18.3594 10.9723 18.3662 10.9998 18.3662C11.0272 18.3662 11.0542 18.3594 11.0784 18.3464C11.1026 18.3335 11.1232 18.3148 11.1384 18.292L11.6664 17.5L11.6666 13.0833H15.3331C15.5099 13.0833 15.6795 13.0131 15.8045 12.888C15.9295 12.763 15.9998 12.5934 15.9998 12.4166C15.9998 12.4025 15.9998 12.3883 15.9994 12.3741C16.0028 12.3263 16.0008 12.2776 15.9933 12.2295C15.9196 11.1786 15.2343 10.2528 14.1664 9.63229V4.33329C14.1664 4.15648 14.0962 3.98691 13.9712 3.86189C13.8461 3.73686 13.6766 3.66663 13.4998 3.66663H8.49975Z" fill="${frozen_color}" fill-opacity="${frozen_color_opacity}"/>` +
      '</svg>',
    width: frozen_size,
    height: frozen_size,
    name: 'frozen',
    funcType: IconFuncTypeEnum.frozen,
    positionType: IconPosition.right,
    marginRight: 0,
    hover: {
      width: frozen_size_2,
      height: frozen_size_2,
      bgColor: 'rgba(101, 117, 168, 0.1)',
    },
    cursor: 'pointer',
  });

  register.icon('freeze', {
    type: 'svg',
    svg:
      '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">' +
      '<g clip-path="url(#clip0)">' +
      `<path d="M17.1313 8.42047C17.1932 8.48238 17.2423 8.55587 17.2759 8.63676C17.3094 8.71764 17.3266 8.80434 17.3266 8.89189C17.3266 8.97944 17.3094 9.06613 17.2759 9.14702C17.2423 9.2279 17.1932 9.3014 17.1313 9.3633L13.3843 13.1103C13.7007 14.3048 13.5305 15.4443 12.8388 16.2395C12.8104 16.2781 12.7778 16.3136 12.7417 16.3451L12.712 16.3755C12.6501 16.4374 12.5766 16.4865 12.4957 16.52C12.4148 16.5535 12.3281 16.5707 12.2406 16.5707C12.153 16.5707 12.0663 16.5535 11.9854 16.52C11.9046 16.4865 11.8311 16.4374 11.7692 16.3755L9.17633 13.7826L6.05316 16.9058L5.11983 17.0925C5.09291 17.0979 5.06508 17.0965 5.03881 17.0886C5.01254 17.0806 4.98863 17.0663 4.96923 17.0469C4.94982 17.0275 4.9355 17.0036 4.92755 16.9773C4.9196 16.951 4.91827 16.9232 4.92366 16.8963L5.11033 15.963L8.23333 12.8396L5.64066 10.2471C5.57875 10.1852 5.52964 10.1117 5.49614 10.0309C5.46263 9.94997 5.44539 9.86327 5.44539 9.77572C5.44539 9.68817 5.46263 9.60148 5.49614 9.52059C5.52964 9.43971 5.57875 9.36621 5.64066 9.3043C5.65066 9.2943 5.66066 9.2843 5.67099 9.27464C5.70266 9.2383 5.73833 9.20547 5.77766 9.17664C6.57283 8.48564 7.71199 8.31564 8.90599 8.63197L12.6528 4.88497C12.7147 4.82306 12.7882 4.77395 12.8691 4.74045C12.95 4.70694 13.0367 4.6897 13.1242 4.6897C13.2118 4.6897 13.2985 4.70694 13.3794 4.74045C13.4603 4.77395 13.5338 4.82306 13.5957 4.88497L17.1312 8.42047H17.1313ZM15.7172 8.8918L13.1243 6.29914L9.56483 9.8588C9.47574 9.94788 9.36323 10.0099 9.24034 10.0376C9.11746 10.0654 8.98922 10.0578 8.87049 10.0156C8.22783 9.78764 7.63899 9.7553 7.17749 9.89814L12.1182 14.8388C12.261 14.3771 12.2287 13.7885 12.0007 13.146C11.9585 13.0272 11.9509 12.899 11.9787 12.7761C12.0064 12.6532 12.0684 12.5407 12.1575 12.4516L15.7172 8.89164V8.8918Z" fill="${frozen_color}" fill-opacity="${freeze_color_opacity}"/>` +
      '</g>' +
      '<defs>' +
      '<clipPath id="clip0">' +
      '<rect width="22" height="22" fill="white"/>' +
      '</clipPath>' +
      '</defs>' +
      '</svg>',
    width: frozen_size,
    height: frozen_size,
    name: 'freeze',
    funcType: IconFuncTypeEnum.frozen,
    positionType: IconPosition.right,
    marginRight: 0,
    hover: {
      width: frozen_size_2,
      height: frozen_size_2,
      bgColor: 'rgba(101, 117, 168, 0.1)',
    },
    cursor: 'pointer',
  });
};

To transpose the table, set transpose — it converts rows to columns. Transposed tables are ideal when there are many data columns but few rows. I haven’t used it in my current project yet.

Table Size Configuration

Row height & column width docs: https://visactor.com/vtable/guide/basic_function/row_height_column_width

widthMode supports three modes: 'standard' | 'adaptive' | 'autoWidth'.

If you don’t have special business requirements for column widths, autoWidth is best. It automatically computes widths based on header and body content, ignoring width and defaultColWidth. The calculation does cost some performance — tradeoffs apply.

Also, it’s best to set table maxWidth + minWidth. Since we allow users to drag-resize freely, we don’t want unlimited width — add boundaries.

Sticky Header-like Behavior

Traditional DOM tables can use sticky positioning for headers. With VTable, I initially tried making the entire VTable DOM sticky, but the effect wasn’t great. The final approach: keep VTable’s height within one viewport so the header behaves similarly to sticky when scrolling.

const [tableHeight, setTableHeight] = useState(500); // Default expanded height

useEffect(() => {
  const calculateHeight = () => {
    // Table height: viewport height - top nav (60) - bottom spacing (16) - Tabs (36) - pagination (32) - extra (80)
    // Goal: occupy one full screen so when scrolled to bottom, the table fills the viewport
    const height = window.innerHeight - 60 - 16 - 36 - 32 - 80;
    setTableHeight(Math.max(height, 400)); // Minimum height
  };

  calculateHeight();
  window.addEventListener('resize', calculateHeight);

  return () => {
    window.removeEventListener('resize', calculateHeight);
  };
}, []);

<ListTable
  // ...
  height={tableHeight}
/>

Copy Table Content

Enable keyboard copy with keyboardOptions.copySelected to support Ctrl + C copying.

keyboardOptions={{
  copySelected: true,
}}

However, in my project, some cells use customRender to show JSON as icon + text. Copying raw content would be incorrect. Use formatCopyValue: https://visactor.com/vtable/option/ListTable#formatCopyValue((value:%20string)%20=%3E%20string)

{
  "icon": "xxxx",
  "text": "Demo"
}

export const formatCopyValueForVTable = (value: unknown): string => {
  const toStr = (v: unknown) => (v == null ? '' : String(v));
  if (typeof value !== 'string') return toStr(value);

  const parseCell = (cell: string) => {
    const trimmed = cell.trim();
    if (trimmed.startsWith('{') && trimmed.endsWith('}')) {
      try {
        const obj = JSON.parse(trimmed);
        if (obj && typeof obj === 'object') {
          // Prefer the describe field (asset object)
          if ('describe' in obj) {
            return toStr((obj as any).describe ?? '');
          }
          // Then check text field (icon-text object)
          if ('text' in obj) {
            return toStr((obj as any).text ?? '');
          }
        }
      } catch (_) {
        // Not valid JSON — keep original
      }
    }
    return cell;
  };

  return value
    .split('\n')
    .map((line) => line.split('\t').map(parseCell).join('\t'))
    .join('\n');
};

Now copied content is correct.

Conclusion

VTable delivers high-performance table experiences that simplify development. Its open and rich configurable APIs meet most business needs. VTable also responds quickly to issues and iterates efficiently, providing quality support and service.

We’re grateful to the VTable open-source project for such a useful tool. Its performance and flexible configuration greatly facilitate our development work. The spirit of open source benefits more developers — may more excellent open-source projects continue to emerge!

Finally, we warmly welcome everyone interested in data visualization to join VisActor’s open-source efforts:

VTable: VTable Official Site, VTable GitHub (please star)

VisActor official website: www.visactor.io/ or www.viactor.com

Discord: discord.gg/3wPyxVyH6m

Feishu group (external): Open link to scan

WeChat official account: Open link to scan

GitHub: github.com/VisActor

How to add a live star history chart to your github readme

玄魂 — Thu, 18 Dec 2025 02:17:36 +0000

Disclaimer

Important Notice: This application is based on star-history/star-history and has been modified and upgraded. We will continue to add more data analysis features. We express our sincere gratitude to the original authors! This document has also been modified and improved based on the original repository's documentation.

New repository: github-data-analysis-

We updated the chart implementation and introduced MongoDB-based caching to reduce GitHub API calls and improve performance.

Added a dark theme.

Data query and image download

We provide direct data query and image download capabilities, but you need to supply your GitHub personal access token. The system does not store your token on the server side.

Directly embedding chart images currently does not require your token. However, contributions are appreciated because GitHub rate limits may affect usage. We use MongoDB to cache data to mitigate this impact as much as possible.

Add a live star-history chart to your GitHub README

Now we support embedding a live star history chart into your GitHub README. Above is the screenshot from our own GitHub data analysis.

This feature is quite handy. A snippet would appear after querying the repository from our star-history.com main page; the only thing you need to do is simply copy that snippet into your GitHub README markdown file.

Under the hood, it's actually a long story about developing this embedded star history chart. It all starts from an issue 6 years ago.

Embed with `<iframe />`

After looking through the popular web-side embedding implementations, we decide to use <iframe /> as the embedded block container. It can display original charts on a webpage without implementing a backend server. And <iframe /> is also interactive with real-time data.

Because GitHub API imposes a strict rate limit on the anonymous callers, we need users to provide their self-generated tokens to overcome that limit.

Step-to-step guide to use `iframe` embed

Open gitdata.xuanhun520.com and query for a repository;
Click the Embed button below the chart;
Input your personal access token;
Click the Copy button, then paste it into your websites or blogs;

Live chart image in SVG format

The iframe-based embed block is a decent improvement, while it still has some flaws:

One commonly used case is to embed the GitHub star-history chart into the repository README file, so that it can be displayed on the repo's front page. However, the GitHub markdown flavor disallows rendering <iframe />, which makes it impossible to directly embed star-history charts there.
We require users to provide their personal access tokens. Though star-history never stores the token on our own server (we don't have a server at all), the token itself could be found if someone views the webpage source code. This limits the usage since it's not fully secure unless adding the chart to a trusted platform, i.e. the internal dashboard of a team.

Step-to-step guide to add the chart to your GitHub README

Open gitdata.xuanhun520.com and query for a repository;
Scroll the page below the action buttons;
Click the Copy button;
Paste the code into your repository's README;
Everything is done. 😎

Conclusion

We provide two ways to embed the real-time star history chart into web pages.

If you want to put an auto-sizeable and interactive chart on your private network, try the embedded chart with <iframe />.
If you want to show a static chart with up-to-date star history data to the public (e.g. in your GitHub README), use the image link such as:

https://gitdata.xuanhun520.com/api/starimg?repos=visactor/vchart&type=Date&theme=dark

Future Plans

Add more data analysis capabilities, such as forks history charts and contributor activity charts.
Add user authentication to support analysis for private repositories.
Add more visualization forms, including infographics and animated charts.

[Boost]

玄魂 — Thu, 06 Mar 2025 04:24:46 +0000

[Practical] Create a Dynamic Infographic in 10 Minutes

玄魂・ Mar 6

#datavis #infographic #vstory #visactor

[Practical] Create a Dynamic Infographic in 10 Minutes

玄魂 — Thu, 06 Mar 2025 04:23:54 +0000

Background

Dynamic infographics are a powerful form of visual expression that can transform complex data and information into intuitive, vivid graphical presentations. Through dynamic infographics, we can:

Better tell data stories, making dry data lively and interesting
Improve information transmission efficiency, helping audiences quickly understand core information
Enhance expressiveness and interactivity, providing immersive user experiences
Achieve real-time data updates and dynamic display

This article will detail how to create a dynamic infographic using VStory, helping everyone quickly master this powerful tool.

Preparation

Understanding VStory

First, visit the VStory official website to understand VStory and its basic concepts: https://www.visactor.com/vstory/guide/tutorial_docs/Getting_Started

Clone Repository and Local Environment

First, globally install @microsoft/rush:

npm i --global @microsoft/rush

Then clone the code to your local machine:

git clone git@github.com:VisActor/VStory.git
cd VStory

You can also choose Github Desktop

Install Dependencies

// Note: Execute in the project root directory
rush update

Start VStory Local Development

rush story

After success, open http://localhost:6789/ in your browser to see the following screen:

You can check completed infographics under infographic

Start Creating

Decide What to Create

You can choose topics based on your interests or current news events. Infographics are charts that tell data stories through various visualizations containing data.

Here, I plan to use charts to introduce the impact of DeepSeek's open-source model release on the AI market and explain why it had such an impact.

Collect Data

Based on the purpose, I need to collect relevant data: what changes occurred in US stocks after DeepSeek released its open-source model.

Ask AI for relevant information:

DeepSeek officially released its latest open-source model DeepSeek R1 on January 20, 2025. The model achieved performance comparable to OpenAI's o1 model at an extremely low training cost (only about $6 million) and caused a sensation globally.
After the open-source model became increasingly popular, one week later on January 27 (US local time), the US tech sector plummeted due to DeepSeek's impact. NVIDIA's stock price fell nearly 17% in a single day, setting a record for the largest single-day market value drop in US stock history. Microsoft, AMD, and other companies' stock prices also suffered significantly.

Collect accurate data for January 27 from financial websites:

Company Name	Stock Code	Jan 24 Closing Price	Jan 27 Closing Price
NVIDIA	NVDA	142.62	118.42
Broadcom	AVGO	244.70	202.13
AMD	AMD	122.84	115.01

Prepare Graphic Content

Data Display

I choose to use charts to display this data. Ask AI what chart type would be better for display. Got the following recommendation:

Now I go to the VChart official website to draw this chart using VChart. No need to download VChart; you can debug directly using the online editing capability provided on the official website.

First, find the grouped column chart example

Then adjust the chart's display effect:

Modify the chart's data to what I want to display
Narrow the data range to make data changes clearer
Remove the value axis as individual stock prices aren't very meaningful compared to decline percentages
Add annotations to mark the decline percentage for each stock

Here's the final chart effect. Record this configuration spec.

Title and Content Introduction

Use AI to generate titles and text that match my ideas:

**English Title:**

DeepSeek's Shockwaves: AI Giants Lose $170B in 72 Hours

(Subtitle: When Algorithms Crack the Silicon Fortress)

**Analysis Text (English):**

DeepSeek's breakthrough exposes a seismic shift in computing economics. The synchronized collapse of chip leaders signals that AI's next phase may bypass brute-force hardware scaling. NVIDIA's historic plunge—its worst performance since the crypto-mining crash—mirrors Wall Street's awakening: when algorithms can achieve 10x training efficiency, the $3 trillion semiconductor industry must reinvent its value proposition. This isn't a correction, but a Copernican revolution in AI infrastructure.

Add a Background Image

Create a background image related to the content using AI:

Design Content Layout and Display Effect

Ask AI for a basic layout suggestion:

Summary of layout effects:

A large title at the top
Subtitle right above the chart
Description on the right side of the chart

Given there's no more content, pay attention to the chart's dimensions and text content size to avoid too much blank space at the bottom.

Start Creating

Step 1: Create New Demo

Create your own demo file in this directory of the project:

packages/vstory/demo/src/demos/infographic

Here's the file I created:

Then you can first copy content from another infographic to your file, delete the DSL content, it looks something like this:

import React, { useEffect } from 'react';
import { IStoryDSL, Player, Story } from '../../../../../vstory-core/src';
import { registerAll } from '../../../../src';

registerAll();
export const DeepseekShockwave = () => {
  const id = 'DeepseekShockwave';
  useEffect(() => {
    const container = document.getElementById(id);
    const canvas = document.createElement('canvas');
    canvas.width = 1024;
    canvas.height = 1024;
    container?.appendChild(canvas);

    const dsl: IStoryDSL = {
      acts: [],
      characters: []
    };

    const story = new Story(dsl, {
      canvas,
      width: 1024, // Planning to make a 1024 X 700 rectangular infographic
      height: 700,
      scaleX: 'auto',
      scaleY: 'auto'
    });
    const player = new Player(story);
    story.init(player);
    player.play(-1);

    return () => {
      story.release();
    };
  }, []);

  return <div style={{ width: '100%', height: '100%' }} id={id}></div>;
};

Add your demo to the app directory. app.tsx is located at:

Then add your content under Infographic in menus, remember to import your component in app.tsx first:

import { DeepseekShockwave } from './demos/infographic/deepseek-shockwave';

Here's what I added:

Now you can see your demo in the right menu after starting debug.

Add Elements

Let's first add all elements we need to display, giving them random positions. Elements are added to characters:

Background

First add image resources:

Note the rule: Image resources must be placed in this directory:

packages/vstory/demo/src/assest/infographic/${yourDemoName}

Then add an image type element:

// Import image element
import bg from '../../assets/infographic/deepseek-shockwave/bg.png';

characters: [
        {
          id: 'background', // Element ID will be used later
          type: 'Image', // Type
          zIndex: 0,  // Layer level
          position: { // Element position and size
            x: 0,
            y: 0,
            width: 1024,
            height: 700
          },
          options: {
            graphic: {
              image: bg, 
              fillOpacity: 0.4 // Opacity
            }
          }
        },
]

Chart

characters: [
    // ... others
    {
      id: 'chart',
      type: 'VChart',
      zIndex: 1,
      position: { // Give it a random position first
        x: 50,
        y: 50,
        width: 400, // Note to give width and height
        height: 400
      },
      options: {
        spec: spec // Chart configuration from content preparation
      }
    }
]

Text

characters: [
    // ... others
    {
      id: 'title',
      type: 'Text',
      zIndex: 1,
      position: { x: 512, y: 0, width: 1024, height: 100 },
      options: {
        graphic: {
          text: `DeepSeek's shockwave: AI's technological revolution`,
          fill: 'black',
          fontSize: 48,
          textAlign: 'center',
          fontWeight: 'bolder'
        }
      }
    },
]

After adding all elements.

Configure a display action for them. (We'll configure animations last)

const dsl: IStoryDSL = {
  acts: [
    {
      id: 'defaultAct',
      scenes: [
        {
          id: 'defaultScene',
          actions: [
            {
            // Give all elements a display action first, without specific animation properties, they will display directly
              characterId: ['background', 'title', 'subTitle', 'desc1', 'desc2', 'chart'],
              characterActions: [
                {
                  action: 'appear'
                }
              ]
            }
          ]
        }
      ]
    }
    ...character
}

You should see a messy infographic:

Layout and Fine-tuning

Now we need to adjust elements to their corresponding positions and adjust properties to make it look more coordinated:

You can adjust element position and size through the character's position property
Text's text property can be an array, so you can manually line break like this:

 text: [`When Algorithms Crack`, '\n', `the Silicon Fortress`],

Specific property configurations are here: https://www.visactor.com/vstory/guide/tutorial_docs/VStory_Concepts/character

After simple adjustment of positions, text colors, and sizes, this infographic is almost complete:

Artistic Enhancement

This part is subjective, such as adding shapes, watermarks, adding backgrounds to text, etc.

Add Animations

Just now when adding elements, we added a unified appear action in the action. Now let's configure different animation effects for elements individually.

Taking the right text as an example:

const dsl: IStoryDSL = {
  acts: [
    {
      id: 'defaultAct',
      scenes: [
        {
          id: 'defaultScene',
          actions: [
            {
              characterId: ['desc1'],
              characterActions: [
                {
                  action: 'appear',
                  startTime: 1000, // Animation start time
                  payload: [
                    {
                      animation: {
                        duration: 800, // Duration
                        easing: 'linear', // Interpolation method
                        effect: 'wipe' // Effect
                      }
                    }
                  ]
                }
              ]
            }
           // ... other actions
           ]
         }
       }
     ]
   }
   // ... characters

Specific animation configuration documentation is here: https://www.visactor.com/vstory/guide/tutorial_docs/VStory_Concepts/action

Final Effect

Upload

Pull new branch from develop, PR target is also develop.
When submitting PR, select demo update and invite Reviewers: xuefei1313 or neuqzxy or xiaoluoHe

Reference PR
How to submit PR

Welcome to Communicate

VisActor Github: https://github.com/VisActor (Welcome to star)
VStory Github: https://github.com/VisActor/VStory (Welcome to star)
VisActor Feishu Group: https://applink.larkoffice.com/client/chat/chatter/add_by_link?link_token=43bu05e4-4cf6-41f0-82de-f20d83c2535e

Discord: discord.gg/3wPyxVyH6m

WeChat Official Account: Open link to scan code

Twitter: twitter.com/xuanhun1

Creating Cool Pyramid Charts with VTable

玄魂 — Tue, 18 Feb 2025 04:07:37 +0000

In the field of data analysis and visualization, tables are one of the most intuitive and effective ways to display data. Today, let's explore how to use VTable, a powerful table component, to create beautiful and informative pyramid charts, and delve into the usage of various cell types in VTable, enabling your tables to "draw" amazing charts!

Implementing Population Pyramid with VTable

The population pyramid is a classic chart form that clearly shows the gender distribution of different age groups. In VTable, we can create this chart by cleverly setting cell types and data.

Data Preparation

Taking China's 2023 population pyramid as an example, we first need to prepare population data, including male and female population numbers for different age groups. The following is a two-dimensional array where the first column represents age, the second column represents male population, and the third column represents female population.

const records = [
  [0, 5634674, 5063545],
  [1, 5705095, 5104886],
  [2, 6428332, 5727205],
  // ... (same data as original)
  [100, 3722, 45558]
];

Configure Column Information

Then, create a table in VTable, using age groups and gender as column labels. The key step is to set the cell type of male and female population columns to progressbar, so each cell can display a progress bar whose length represents the population of the corresponding age group and gender.

In the specific implementation, we can configure the table's column information as follows:

const columns = [
  {
    field: '0',
    title: 'Age',
    width: 'auto'
  },
  {
    field: '1',
    title: 'Male (Population)',
    width: 'auto',
    cellType: 'progressbar',
    min: 0,
    max: 13601860 + 1000000,
  },
  {
    field: '2',
    title: 'Female (Population)',
    width: 'auto',
    cellType: 'progressbar',
    min: 0,
    max: 13601860 + 1000000,
  },
  {
    field: '0',
    title: 'Age',
    width: 'auto',
  }
];

In the above configuration, both the first and last columns are age groups, the second column is male population, and the third column is female population. Our data is a two-dimensional array with each age from 0-100 corresponding to one row of data, so we set the array index directly to the field in the column configuration. The cellType of the second and third columns is set to 'progressbar' to display as data bars. The data bars need to be configured with {min: number, max: number} to specify the data range. For max, I chose the maximum value in records, and added a buffer: 1000000 to make it look better overall with padding from the edges.

Current display effect:

Optimize Display Effect

First, optimize the crowded text issue due to the small row height (defaultRowHeight: 6 is only 6px). To optimize the incomplete display of age numbers on both sides, enable mergeCell: true. This configuration will merge cells with the same content above and below. But how about when each row's data is different? We force adjacent five rows to have the same content through fieldFormat:

    fieldFormat(args) {
      if (args[0] >= 100) {
        return 100;
      }
      return Math.round(args[0] / 5) * 5;
    },

For the second and third columns, we don't want to display data, also using fieldFormat:

    fieldFormat(args) {
      return '';
    }

Current effect after optimization:

Continue to optimize the data bar style. First, make the second column's data bars right-aligned by setting style:

    style: {
      barRightToLeft: true
    }

After optimization:

After optimizing the colors of data bars on both sides, the final configuration for these two columns is:

{
    field: '1',
    title: 'Male (Population)',
    width: 'auto',
    fieldFormat(args) {
      return '';
    },
    cellType: 'progressbar',
    min: 0,
    max: 13601860 + 1000000,
    style: {
      barHeight: 5,
      barColor: '#4cba72',
      barRightToLeft: true
    }
  },
  {
    field: '2',
    title: 'Female (Population)',
    width: 'auto',
    cellType: 'progressbar',
    fieldFormat(args) {
      return '';
    },
    min: 0,
    max: 13601860 + 1000000,
    style: {
      barColor:'#f66d6c',
      barHeight: 5,
    }
  },

Other border and header cell background color and text style configurations are in the theme:

  theme: VTable.themes.DEFAULT.extends({
    headerStyle: {
      color: '#dfeef7',
      bgColor: '#038dc8'
    },
    frameStyle: {
      borderColor: '#1d80b0',
      borderLineWidth: 2
    }
  })

Through the above code, we can see that the male and female population numbers for each age group are displayed with progress bars in different colors, forming an intuitive population pyramid chart.

Chart Title

A complete chart needs a concise and accurate title that precisely conveys its core information to clearly communicate its meaning. For the powerful VTable, this is a piece of cake. We only need to easily add title configuration to the existing configuration to give the chart an appropriate and comprehensive title, making the chart's meaning clear at a glance, allowing users to quickly capture key information, greatly improving the chart's readability and practicality.

title: {
    text: 'China Population 2023 Pyramid: 1,425,849,286',
    padding: 10,
    orient: 'top',
    textStyle: { fill: '#16cdcd' }
  },

The complete example code can be found on the official website: https://visactor.com/vtable/demo/business/population-pyramid

Using Progressbar Type in VTable

Progress bars play an important role in various applications, intuitively showing users task progress. The progressbar type provided by VTable offers rich options that, combined with other table capabilities, allow developers to create unique progress bars according to specific needs and design styles.

Let's look at the key configurations in detail:

min: Minimum data value for progress bar display, default is 0.
max: Maximum data value for progress bar display, default is 100.
barType: Progress bar type, default is 'default'. Available values include:
- 'default': Normal progress bar
- 'negative': Progress bar considering negative values, showing progress bars in both positive and negative directions with 0 as the divider
- 'negative_no_axis': Similar to 'negative' but without 0 value axis
dependField: If the text displayed in the cell and the data field used by the progress bar need to be different, configure the data field used by the progress bar in dependField.

Additionally, the progressbar type has many exclusive style configuration items, such as barColor, barHeight, barAxisColor, barMarkXXX, etc. Through these configuration items, we can further beautify the appearance of progress bars.

Introduction to Other Cell Types in VTable

Besides the progressbar type, VTable provides various rich cell types, each with unique characteristics and functions, allowing us to flexibly choose according to different data display needs.

Here's a brief introduction:

text: The most basic cell type, used to display text information. In tables, we can use the text type to display row labels, column labels, and some auxiliary explanatory text to help audiences better understand the meaning of data.
link: Used to display link-type data. Through setting different formatting functions, styles, and click jump addresses, whether to check link validity, etc., we can flexibly display and handle links.
image: Allows us to insert images in cells. If our data is related to images, such as product images, geographic location images, etc., using the image type can intuitively display this information, enhancing the table's visual effect.
video: Similar to the image type, used to display video-type data, with all configuration items the same as image.
sparkline: Used to display sparkline-type data. By setting specific sparklineSpec configuration items for sparklines, we can display various trends, distributions, and other mini charts, providing more possibilities for data visualization.
chart: Used to display chart-type data. Before using this type, you need to first register a chart type through VTable.chart.register. After registration, you can display rich chart content through configuration items like chartModule and chartSpec.
checkbox: Checkbox type cells are widely used in many applications, including task management, data filtering, permission settings, etc. Whether the checkbox cell is in a checked state defaults to false and supports configuring functions with different configurations for different cells.
radio: Radio button type

Below is a screenshot of the demo list showing various types from the official website for reference! Don't you feel its functionality is quite powerful? From these demos, we can clearly feel the convenience and efficiency brought by its powerful functions. Whether in data display or data analysis scenarios, it can play a significant role, providing us with quality experience and solutions.

Summary

By reasonably using various cell types in VTable, we can create feature-rich and diverse table charts. Whether it's an intuitive population pyramid or other complex data visualization needs, VTable can provide powerful support. Go ahead and try it out, let your tables also "draw" a wonderful world of charts!

Contact Us

GitHub: github.com/VisActor

Follow our WeChat Official Account (join WeChat group through menu):

VisActor Website: www.visactor.io/ ; www.visactor.com

Feishu Group:

Discord: https://discord.com/invite/3wPyxVyH6m

Using Cursor with DeepSeek to Quickly Get Started with Unfamiliar Components

玄魂 — Sat, 08 Feb 2025 10:27:55 +0000

In today's software development field, developers face the challenge of continuously improving development efficiency and reducing the learning curve. The core purpose of this document is to help developers achieve this goal, especially by cleverly using component official documentation and combining tools like Cursor and DeepSeek to let AI automatically generate the required code, quickly lowering the entry barrier. Next, we will experiment with several projects in the relatively new open-source project, VisActor (https://www.visactor.com; https://www.visactor.io/), an open-source visualization solution, to see how effective it is.

Preparation

Create a Test Project

For example, I have a simple project initialized with npx create-react-app my-app --template typescript, which looks like this after starting:

Obtain DeepSeek API Key

Configure Cursor

Official website: https://www.cursor.com/

Download and register, open your VChart project with Cursor, and configure Cursor.

Using DeepSeek-V3 as an example, its API model name is deepseek-chat, and the API address is https://api.deepseek.com/v1. For more details, see the API usage official website.

Create a new model on the model page, set the corresponding API address and model name.

Of course, you can also use any other AI model; here, we use DeepSeek.

Inject Official Tutorial into @Docs

Practical Verification

VTable Test

VTable (https://www.visactor.io/vtable/; https://www.visactor.com/vtable/) is a powerful table component in the VisActor visualization library. It is designed to meet diverse data presentation needs, offering high flexibility and customizability. Whether it's simple data listing or complex data analysis display scenarios, VTable can provide excellent solutions.

VTable has the following core features:

Supports various table types: basic tables, pivot tables, transposed tables, pivot charts, etc.
Powerful interaction features: sorting, filtering, row and column dragging, cell editing, etc.
Rich cell types: text, charts, progress bars, checkboxes, sparklines, etc.
High-performance rendering: supports smooth display of millions of data
Multi-platform adaptation: perfect support for mainstream frameworks like Vue, React

Invoke AI Interaction Panel in Cursor and Generate Code

After setting up the project environment, use cmd + i to invoke the AI interaction panel. We directly let AI generate a basic table code snippet for inserting VTable.

However, the initial generation result shows that AI does not recognize VTable's ListTable, possibly due to the inability to accurately recognize VTable's ListTable configuration.

Inject Official Tutorial into @Docs

To solve the above problem, we inject the official tutorial into @Docs.

Explicitly specify VisActor VTable in the prompt in @Docs. After this step, we are pleasantly surprised to find that AI can correctly write the implementation logic according to the option in VTable.

Code Application and Effect Display

Copy the generated code into the corresponding file, run the project, and you can see the initial effect, with the table correctly generated.

Then, we continue to let AI modify the table style. AI provided reasonable modification suggestions,

After running the project again, we got a display effect that better meets the requirements:

VChart Test

Add a Bar Chart

Invoke AI interaction with the cmd+i command, and let AI help us generate a simple bar chart code first.

Directly apply this spec, and we check the result; a simple bar chart is rendered. It can be seen that DeepSeek has a certain understanding of VChart, and simple charts can be directly added. Let's try a more complex scenario.

Complex Scenario, Inject Docs

We hope to add an average auxiliary line on the y-axis, check the result, but the result is incorrect. Upon closer inspection, it can be found that although the markLine is written as if it is correct, the spec does not conform to the specification, and the average line is calculated. We solve this problem by injecting docs.

Set Docs

Enter the Cursor settings page, select Features, add new docs, the docs address is https://visactor.com/vchart (https://visactor.io/vchart); you can also directly add through @Docs on the editing page.

Experimental Results

By editing again with the newly added docs, the correct result can be obtained!

VStory Test

VStory (GitHub: https://github.com/VisActor/VStory/; site: https://www.visactor.io/vstory/, https://www.visactor.com/vstory/) is a narrative-oriented visualization development framework that integrates the capabilities of all VisActor visualization components, making it more challenging to use. We conduct a simple test.

Invoke AI interaction with the cmd+i command, and let AI help us generate a simple dashboard demo first.

It can be found that it is completely incorrect because DeepSeek uses data from 2023, and VStory had not been released at that time, so it does not know how to use it. At this point, we need to let it read the documentation to learn.

Inject Docs

We solve this problem by injecting docs.

Enter the Cursor settings page, select Features, add new docs, the docs address is https://visactor.com/vstory/guide/tutorial_docs/VStory_Website_Guide; you can also directly add through @Docs on the editing page.

Experimental Results

By editing again with the newly added docs, the correct result can be obtained!

Since VStory uses VChart, VTable, and VRender, to achieve better results, you should add the documentation of VChart, VTable, and VRender to the context simultaneously.

Simple Summary

Improve Development Efficiency

Quick Access: Directly access VisActor API documentation through Cursor
Intelligent Suggestions: Precise code completion based on VisActor documentation

Enhance Development Experience

Seamless Integration: Directly obtain VTable usage guidance in the development environment
Real-time Feedback: Quickly verify code effects

Reduce Learning Costs

Documentation Assistance: Access VisActor official examples at any time
Code Generation: Automatically generate code that complies with VisActor standards

Improve Code Quality

Standard Check: Ensure code complies with VTable best practices
Performance Optimization: Automatically generate high-performance table configurations

Contact Us

GitHub: github.com/VisActor

Leave a message on the VisActor WeChat subscription account (you can join the WeChat group through the subscription account menu):

VisActor official website: www.visactor.io/; www.visactor.com

Feishu Group:

Discord: https://discord.com/invite/3wPyxVyH6m

Developing VTable Custom Edit Component with React

玄魂 — Tue, 23 Apr 2024 09:36:37 +0000

The content of this article is based on the user interview of @VisActor/VTable.

Introduction to Business Scenarios

In traditional evaluation systems, multiple reviewers usually need to collaborate on annotating the same dataset on a Feishu form. This process involves multiple users editing the same document and uploading the annotated data to the evaluation platform. However, this approach has certain drawbacks: firstly, the original data is not effectively accumulated on the platform, resulting in the inability to form a complete closed loop for dataset construction; secondly, users need to manually upload the annotated data, which not only reduces efficiency but also results in a suboptimal user experience.

To address these issues, improve user annotation efficiency, and reduce reliance on offline Feishu forms, our platform adopts the VTable visual editing solution. This solution allows users to directly edit the data in the table form in our system, enabling direct data storage, historical record retention, and other functions.

Through the VTable editor interface and related event listeners, it is easy to integrate HTML or React/Vue components to expand editing capabilities. This article demonstrates a generalizable solution through an example.

Introduction to VTable

VTable is a key component of the VisActor open-source visualization solution launched by ByteDance - a high-performance table component. It is known for its ultra-high performance and rich visualization capabilities. For more details, please refer to:

Official website: https://www.visactor.io/vtable
1. Github: https://github.com/VisActor/VTable

Editing Capabilities of VTable

VTable currently offers two main types of editing capabilities:

Cell editing
Data filling

Data filling uses the fill handle component.

Cell editing is based on the @visactor/vtable-editors component. This article mainly introduces the custom table editing capabilities based on the @visactor/vtable-editors component.

@visactor/vtable-editors

This component comes with built-in editors such as text input boxes, date pickers, drop-down lists, etc., which users can directly use or extend and customize.

First, make sure that the VTable library @visactor/vtable and the related editor package @visactor/vtable-editors have been correctly installed. You can use the following commands to install them:

To install VTable:

//Install using npm
npm install @visactor/vtable
//Install using yarn
yarn add @visactor/vtable

Install @visactor/vtable-editors：

//Install using npm
npm install @visactor/vtable-editors
//Install using yarn
yarn add @visactor/vtable-editors

Import the required type of editor module in the code (you can customize the implementation or reference the editor class in the vtable-editors package):

// Editor classes provided by vtable-editors
import { DateInputEditor, InputEditor, ListEditor } from '@visactor/vtable-editors';

Next, create the editor instance you need to use:

const inputEditor = new InputEditor();
const dateInputEditor = new DateInputEditor();
const listEditor = new ListEditor({ values: ['女', '男'] });

In the above example, we created a text input box editor (InputEditor), a date picker editor (DateInputEditor), and a drop-down list editor (ListEditor). You can choose the appropriate editor type according to actual needs.

To use the created editor instance, it needs to be registered in VTable.

// Register the Editors to VTable
VTable.register.editor('name-editor', inputEditor);
VTable.register.editor('name-editor2', inputEditor2);
VTable.register.editor('number-editor', numberEditor);
VTable.register.editor('date-editor', dateInputEditor);
VTable.register.editor('list-editor', listEditor);

Next, you need to specify the editor to use in the columns configuration (if it is a pivot table, configure the editor in indicators):

columns: [
  { title: 'name', field: 'name', editor(args)=>{
    if(args.row%2==0)
      return 'name-editor';
    else
      return 'name-editor2';
  } },
  { title: 'age', field: 'age', editor: 'number-editor' },
  { title: 'gender', field: 'gender', editor: 'list-editor' },
  { title: 'birthday', field: 'birthDate', editor: 'date-editor' },
]

Now users can start editing by double-clicking a cell, and then choose the editor to input.

Customize the Editor

If the few editors provided by the VTable-editors library cannot meet your needs, you can customize an editor. To do this, you need to create a class, implement the requirements of the editor interface (IEditor), and provide necessary methods and logic.

You can understand the relationship between the editor and VTable by combining the following flowchart:

Here is an example code of a custom editor, which is a relatively complex cascading list selector, inheriting from the IEditor interface in @visactor/vtable-editors. The interfaces that must be implemented in IEditor are onStart, onEnd, and getValue.

The IEditor interface is defined as follows:

export interface IEditor<V = any> {
  /** * Called when the cell enters edit mode */
  onStart: (context: EditContext<V>) => void;
  /** * Called when the cell exits edit mode */
  onEnd: () => void;
  /**
If this function is provided, VTable will call this function when the user clicks elsewhere.
If this function returns a false value, VTable will call onEnd and exit edit mode.
If this function is not defined or this function returns a true value, VTable will not do anything.
This means that you need to manually call the endEdit provided in onStart to end the edit mode.
   */
  isEditorElement?: (target: HTMLElement) => boolean;
  /** et the current value of the editor. It will be called after onEnd is called.*/
  getValue: () => V;
  /**
Verify whether the new input value is valid
   */
  validateValue?: () => boolean;
}

export interface EditContext<V = any> {
  /**  The container element where the VTable instance is located */
  container: HTMLElement;
  /** Position information of the cell being edited */
  referencePosition: ReferencePosition;
  /** The current value of the cell that is entering the edit mode */
  value: V;
  /**
Callback used to end the edit mode。
   *
In most cases, you don't need to use this callback,
 because VTable already comes with the behavior of pressing the Enter key to end the edit mode; and the behavior of clicking elsewhere with the mouse to end the edit mode can also be obtained through the isEditorElement function.
   *
However, if you have special requirements,
 such as you want to provide a "complete" button inside the editor, 
 or you have external elements like Tooltip that cannot be obtained, 
 you can save this callback and manually end the edit mode when you need it.
   */
  endEdit: () => void;
  col: number;
  row: number;
}

Practical Customization of Editors

Function Definition

Our goal is to define a React cascading component Cascader, with the aim of editing interactions through this component and updating the results to VTable.

For convenience, we directly use the Cascader component of arco-design. The integration method of other React components is also similar.

Code Implementation

We first import the necessary components and related definitions, and import the IEditor interface definition from @visactor/vtable-editors.

import { Cascader } from '@arco-design/web-react';
import React from 'react';
import type { Root } from 'react-dom/client';
import { createRoot } from 'react-dom/client';
import type { IEditor } from '@visactor/vtable-editors';

Next, we implement the CascaderEditor class, the overall definition is as follows:



export class CascaderEditor extends IEditor{
  editorType: string;
  cascaderOptions: null | []; // All columns information
  field: null | string; // The field of the selected cell
  inputRef: React.RefObject<HTMLInputElement>;
  root: null | Root; // In order to mount reactDOM
  container: null | HTMLElement;
  element: null | HTMLElement;

  constructor(editorConfig: any) {
    this.editorType = 'Cascader';
    this.cascaderOptions = null;
    this.field = null;
    this.root = null;
    this.element = null;
    this.container = null;
    this.init(editorConfig);
    this.inputRef = React.createRef();
  }
  /**
   * @description:
   * @param {any} editorConfig
   * @return {*}
   */
  init(editorConfig: any) {
    const { options, value } = editorConfig;
    const filed = value.field;
    this.cascaderOptions = options;
    this.field = filed;
  }
  /**
   * @description: Overwrite the built-in methods of the editor
   */
  onStart(editorContext:{container: HTMLElement | null, referencePosition: any, value: string}) {....}

//Create Component
  createElement(selectMode: string, Options: [], defaultValue: (string | string[])[]) {....}
  //Positioning
  adjustPosition(rect: { top: string; left: string; width: string; height: string }) {...}
  /**
   * @description:Overwrite the built-in methods of the editor
   * @param {object} rect
   * @return {*}
   */
  onEnd() {
    console.log('endEditing cascader');
  }
  /**
   * @description:Overwrite the built-in methods of the editor
   * @param {object} rect
   * @return {*}
   */
  exit() {
    this.container.removeChild(this.element);
  }
  /**
   * @description:Overwrite the built-in methods of the editor, execute when targetIsOnEditor is false
   * @param {object} rect
   * @return {*}
   */
  getValue() {...  }
  /**
   * @description:Overwrite the built-in methods of the editor
   */
  setValue(value: (string | string[])[]) {....}
  /**
   * @description: It will be executed every time you click, the purpose is to judge whether the current clicked area is within the editor range
   * @param {Node} target The element that was clicked
   * @return {Boolean}
   */
  isEditorElement(target: Node | null) {....}
  bindSuccessCallback(successCallback: any) {
    this.successCallback = successCallback;
  }
  /**
   * @param {object} rect
   * @return {*}
   */
  changeValue(value: []) {....}
  /**
   * @description: Filter out the corresponding option from the full cascaderOptions based on the field
   * @param {*} value When entering the edit state, the text in the input box is also the value in the records
   * @param {*} field
   * @param {*} cascaderOptions Full options
   * @return {*}
   */
  getCascaderOptions(value: string, field: null | string, cascaderOptions: null | []) {.....}
  /**
   * @description: Return the corresponding value based on the text
   * @param {*} options
   * @param {*} searchTexts
   * @return {*}
   */
  findValuesAndParents(options: [], searchTexts: string) {.....}
  isClickPopUp(target: { classList: { contains: (arg0: string) => any }; parentNode: any }) {....}
}

After the user triggers the edit state through interaction, VTable will call the onStart method. We initialize the React component in the onStart method and use editorContext to get the position of the cell and position the component. The onStart method is as follows:

  /**
   * @description: Overwrite the built-in methods of the editor
   * @param {HTMLElement} container
   * @param {any} referencePosition
   * @param {string} value
   * @return {*}
   */
  onStart(editorContext:{container: HTMLElement | null, referencePosition: any, value: string}) {
    const {container,referencePosition} = editorContext;
    this.container = container;
    const { selectMode, options } = this.getCascaderOptions(value, this.field, this.cascaderOptions);
    const defaultOptions = this.findValuesAndParents(options, value);
    this.createElement(selectMode, options, defaultOptions);
    setTimeout(() => {
      value && this.setValue(value);
      (null == referencePosition ? void 0 : referencePosition.rect) && this.adjustPosition(referencePosition.rect);
      this.element?.focus();
    }, 0);
  }

The onStart method first calls the getCascaderOptions method, which returns the options and selectMode of the component. The implementation of this method is as follows:：

  /**
   * @description: Filter out the corresponding option from the full cascaderOptions based on the field
   * @param {*} Value - When entering the edit state, the text in the input box is also the value in the records
   * @param {*} field
   * @param {*} cascaderOptions Full options
   * @return {*}
   */
  getCascaderOptions(value: string, field: null | string, cascaderOptions: null | []) {
    const advancedConfig = cascaderOptions.filter((option) => option.name === field);
    const selectMode = advancedConfig[0]?.advancedConfig?.selectMode;
    const options = advancedConfig[0]?.advancedConfig?.Cascader;
    return { selectMode, options };
  }

Then call the findValuesAndParents method to return the value selected by the user on the component. The implementation of the findValuesAndParents method is as follows:

/**
   * @description: Return the corresponding value based on the text
   * @param {*} options
   * @param {*} searchTexts
   * @return {*}
   */
  findValuesAndParents(options: [], searchTexts: string) {
    const searchLabels = searchTexts?.split(', ').map((text) => text.trim());
    const results: any[][] = [];

    function search(options, parents: any[]) {
      for (const option of options) {
        // Record the current node's value and parent_id
        const currentParents = [...parents, option.value];
        // If a matching label is found, add its value and parent_id to the result
        if (searchLabels?.includes(option.label)) {
          results.push(currentParents);
        }
        // If there are child nodes, search recursively
        if (option?.children && option.children.length > 0) {
          search(option.children, currentParents);
        }
      }
    }

    search(options, []);
    return results;
  }

Next, call the createElement method to load the component.

/**
   * @description:Overwrite the built-in methods of the editor,
   * @param {string} selectMode
   * @param {*} Options
   * @param {*} defaultValue
   * @return {*}
   */
  createElement(selectMode: string, Options: [], defaultValue: (string | string[])[]) {
    const div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width = '100%';
    div.style.padding = '4px';
    div.style.boxSizing = 'border-box';
    div.style.backgroundColor = '#232324';
    this.container?.appendChild(div);
    this.root = createRoot(div);
    this.root.render(
      <Cascader
        ref={this.inputRef}
        options={Options}
        expandTrigger="hover"
        onChange={this.changeValue.bind(this)}
        mode={selectMode}
        defaultValue={defaultValue}
        maxTagCount={1}
        style={{ border: 'none' }}
        bordered={false}
      />
    );
    this.element = div;
  }

At this point, the react component has been displayed, and we update the value of VTable through the setValue method. The implementation of setValue is as follows:

/**
   * @description:Overwrite the built-in methods of the editor,
   * @param {object} rect
   * @return {*}
   */
  setValue(value: (string | string[])[]) {
    if (this.inputRef.current) {
      this.inputRef.current.value = value;
    }
  }

Call the adjustPosition method to adjust the position of the component. The implementation of the adjustPosition method is as follows:

  /**
   * @description:Overwrite the built-in methods of the editor,
   * @param {object} rect
   * @return {*}
   */
  adjustPosition(rect: { top: string; left: string; width: string; height: string }) {
    if (this.element) {
      (this.element.style.top = rect.top + 'px'),
        (this.element.style.left = rect.left + 'px'),
        (this.element.style.width = rect.width + 'px'),
        (this.element.style.height = rect.height + 'px');
    }
  }

If you want VTable to automatically end the edit mode, you need to provide the isEditorElement method to determine whether the mouse is clicked inside the component. The implementation is as follows:

/**
   * @description: It will be executed every time you click, the purpose is to judge whether the current clicked area is within the editor range
   * @param {Node} target The element that was clicked
   * @return {Boolean}
   */
  isEditorElement(target: Node | null) {
    // When the cascader is created, a dom is appended after the canvas, and the popup is appended at the end of the body. Whether it is a popup or a dom, it should be considered as clicking on the editor area.
    return this.element?.contains(target) || this.isClickPopUp(target);
  }

When you need to update the value of a cell, VTable will call the getValue method. In this example, the implementation of this method is as follows:

/**
   * @description:Overwrite the built-in methods of the editor,
   * @param {object} rect
   * @return {*}
   */
  getValue() {
    return this.inputRef?.current?.value;
  }

Register and Use the Editor

First, reference the custom editor definition.

// Custom implemented editor class
import { CascaderEditor, InputNumberEditor, SelectEditor, TextAreaEditor } from '@/client/components/TableEditor';

Before using the editor, you need to register the editor instance in VTable.

  useEffect(() => {
    if (!dataTable?.datasetQueryDataList?.columns || !clickedCellValue?.field) return;
    const cascaderEditor = new CascaderEditor({
      options: dataTable?.datasetQueryDataList?.columns,
      value: clickedCellValue,
    });
    VTable?.register?.editor('cascader-editor', cascaderEditor);
  }, [dataTable?.datasetQueryDataList?.columns, clickedCellValue, VTable]);

In the above example, we created the dataTable?.datasetQueryDataList?.columns returned according to the interface, and the cell data clickedCellValue clicked by the current user, set the parameters of the custom CascaderEditor, and registered and used after initializing the editor. The aboveVTable?.register?.editor('cascader-editor', cascaderEditor)is.

Next, you need to specify the editor to use in the columns configuration (if it is a pivot table, configure the editor in indicators):

  const buildTableColumns = useCallback(
    (columns: DatasetColumnSchema[], isView: boolean) => {
      const temp = columns.map((colItem) => {
        const dataType = colItem?.dataType;
        if (dataType === DatasetColumnDataType.Category) {
          return {
            field: colItem.name,
            title: colItem.displayName,
            editor: 'cascader-editor',
            icon: 'edit',
          };
        } else if (dataType === DatasetColumnDataType.Int) {
          return {
            field: colItem.name,
            title: colItem.displayName,
            editor: 'input-number-editor',
            icon: 'edit',
          };
        } else if (dataType === DatasetColumnDataType.Boolean) {
          return {
            field: colItem.name,
            title: colItem.displayName,
            editor: 'list-editor',
            icon: 'edit',
          };
        } else {
          return {
            field: colItem.name,
            title: colItem.displayName,
            editor: 'text-editor',
            icon: 'edit',
          };
        }
      });

      !isView &&
        temp.unshift({
          field: 'isCheck',
          title: '',
          width: 30,
          headerType: 'checkbox',
          cellType: 'checkbox',
        });
      return temp;
    },
    [dataTable?.datasetQueryDataList]
  );

Listen to Edit Events

VTable provides the function of listening to edit events. You can listen to edit data events and execute corresponding logic in the event callback.

Below is an example code of listening to edit events:

const tableInstance = new VTable.ListTable(option);
tableInstance.on('change_cell_value', () => {
  // Edit Cell Data
});

Data Acquisition After Editing

After the user completes the editing and submits the data, you can get the edited data for subsequent processing. You can directly take the value of records.

// Get the full data of the current table
tableInstance.records;

Full Code

Full code：

https://visactor.io/vtable/demo-react/functional-components/arco-select-editor

Implementation Effect

Double-click the cell to enter the edit mode, as shown below:

Some Expectations

VTable also provides the React-VTable component. The overall solution for integrating pop-up type React components will be further improved in React-VTable , making the combination of React components and VTable more user-friendly and powerful.

Collection of Table Requirements and Practical Scenarios

The business party in this practical scenario received a beautiful gift from VisActor.

We continue to collect typical business scenarios and cases in terms of tables, including requirements, and welcome everyone to contact us.

discord：https://discord.gg/3wPyxVyH6m

twiter：https://twitter.com/xuanhun1

VisActor official website: www.visactor.io/

On this moonless night, I look forward to you lighting up the starry sky. Thank you for giving us a star.：

github：https://github.com/VisActor/VTable

More reference：

Unveiling the visualization capabilities of the DataWind product in Volcano Engine

玄魂 — Thu, 09 Nov 2023 02:46:17 +0000

Introduction

BI, short for Business Intelligence, is a platform that effectively integrates existing data within an organization. It helps enterprises, organizations, and individuals better understand their business situation, identify problems, and make decisions. BI products commonly utilize visualization techniques to help users analyze and present data in a more intuitive, efficient, and intelligent manner, thereby enhancing data-driven decision-making capabilities and providing timely and accurate reports for decision-making.

DataWind is an all-in-one data analysis and collaboration platform that supports self-service analysis of billions of data. It seamlessly integrates data access, data integration, query analysis, and collaborative sharing, enabling business users to gain intelligent insights and realize the value of data through visual forms such as data portals, digital dashboards, and management cockpits.

This article focuses on the core visualization capabilities of DataWind products and reveals its implementation principles.

Rich visualization presentation options

Charts are one of the most commonly used data visualization tools in BI products. With charts, users can have a more intuitive understanding of data trends, relationships, and distributions. Common types of charts include line charts, bar charts, pie charts, scatter plots, and more. Different types of charts are suitable for different data types and analytical purposes. For example, line charts can showcase the trend of time series data, bar charts can compare data across different categories, pie charts can display the proportion of data, and so on. Choosing the appropriate chart type is crucial for users to comprehend the data effectively.

Visual representation

1. Statistical charts

In DataWind product, a wide range of chart types are available for users, including bar charts, column charts, line charts, area charts, dual-axis charts, pie charts, donut charts, rose charts, scatter plots, filled maps, scatter maps, word cloud charts, histogram charts, radar charts, funnel charts, scorecards, gauge charts, progress charts, waterfall charts, and Sankey diagrams for network visualizations.

One of the distinctive features of DataWind is the ability to create combination charts and pivot tables.

Combination charts in DataWind allow users to display multiple charts with Cartesian coordinate systems side by side. This facilitates the comparison and observation of different metrics under the same dimension. By providing the combination of basic chart types, as well as the combination with dual-axis charts, DataWind empowers users to effectively analyze and visualize data from different perspectives.

Pivot tables, on the other hand, are used to observe the breakdown of aggregated data across multiple dimensions. This is reflected in the chart as a hierarchical or tree-like structure. By introducing segmented dimensions, users can observe the characteristics and trends of data in different facets, allowing for a more granular understanding of the information contained within the data. Pivot tables provide a flexible and interactive way to analyze data from various angles and gain insights into different levels of detail.

（Pviot Chart & Combination Chart）

2. Tables

In DataWind, in addition to the basic rendering of two-dimensional tables, users are provided with the ability to apply conditional formatting within cells. This includes rendering icon sets, color scales, data bars, etc. Users can also customize cell rendering by displaying images, videos, links, mini-charts, and other elements. Furthermore, DataWind supports features such as sorting data, freezing columns, and configuring fields from the menu options available in table headers. These functionalities enhance the flexibility and usability of tables in DataWind, allowing users to effectively visualize and interact with their data.

DataWind supports the creation of pivot tables, which summarize and present data based on column and row dimensions. By configuring column dimensions, row dimensions, and measures, users can easily create pivot tables. Compared to regular tables, pivot tables differentiate dimensions into rows and columns, making it easier to present data in a multi-dimensional context. Additionally, pivot tables in DataWind support features such as conditional formatting and content rendering, which are commonly used in two-dimensional tables. These features further enhance the versatility and functionality of pivot tables in DataWind.

In addition, DataWind also provides users with the functionality of trend analysis tables. The trend analysis tables allow users to view aggregated data for core metrics based on different date granularities. Users can further compare individual metrics, observe trends, and calculate averages.

3. GIS Maps

DataWind provides GIS maps to support Location-Based Services (LBS) requirements. These maps include various types such as heat maps, scatter maps, flow maps, and bar charts.

Revealing the implementation

The rich visual presentation in DataWind is due to the open source visualization solution VisActor. DataWind heavily uses the chart component VChart and the multi-dimensional table component library VTable.

At the same time, DataWind’s R&D team deeply cooperates with the VisActor team, participating in open-source development, which allows some personalized needs to be quickly met. VChart covers nearly all commonly used statistical chart types, and also provides rich extension interfaces. This makes it very easy for DataWind to expand chart types and enhance chart abilities based on user feedback.

（VChart Gallery：https://www.visactor.io/vchart/example）

In terms of tables, the VTable component fully meets the requirements of the business by using Canvas for high-performance rendering of the tables. In addition to the ability to implement two-dimensional tables, pivot tables, and pivot views, it also supports custom cell rendering, rendering of mini-charts in cells, tree display, pivot analysis, and other advanced features.

（online example：https://www.visactor.io/vtable/example）

The implementation of combined charts and pivot tables combines the advantages and features of both VChart and VTable. Thanks to the unified underlying rendering implementation of VisActor, it is easy to use the layout capability of VTable and nest the chart rendering capability of VChart to achieve combined charts and pivot tables.

By registering the VChart chart component on VTable, and utilizing the pivot table layout capability of VTable, the VChart chart component is rendered within the cells. VTable is responsible for maintaining the chart instances and updating events.

For example, the demonstrated perspective view table above is fully implemented：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6

The code structure is as follows：

From the code, we can see that by defining rows and columns and configuring the data, we can express the pivot structure of the data. Additionally, components such as axes, legends, and annotations used in statistical charts can be seamlessly integrated into the table, greatly enhancing the visualization and extensibility of the table.

Due to the complexity of BI systems and the need for custom visualization capabilities beyond generic charts and tables, DataWind has built a visualization encapsulation layer specifically for BI systems, building upon the extension mechanism of VisActor. The architectural design is as follows:

Through the above encapsulation, it is possible to quickly implement a BI system or a similar BI metric reporting platform.

Adaptable to different scenarios, styles, and customizable themes.

In DataWind products, different chart designs are often used for different business objects. A good chart should have a clear structure, readable labels and axes, appropriate colors and fonts, and should be tailored to the characteristics of the current business.

Chart styles and theme configuration in DataWind

DataWind supports flexible configuration of chart styles at multiple levels.

At the chart level, it supports one-click replacement of the chart’s data color palette：

At the dashboard level, it supports setting a unified theme style for the entire dashboard.

DataWind’s chart theme design follows the following principles:

Structure and layout of charts: The structure of charts should be clear and uncluttered, without too many elements and noise. For example, there should be sufficient spacing between bars in a bar chart to facilitate easier differentiation of different data.
Design of labels and axis lines: Labels and axis lines should be easy to read and understand. Labels should be clear and axis lines should have appropriate scales and labels. For example, a timeline should have suitable time intervals and labels to help users better understand the temporal trends of the data.
Selection of colors and fonts: Colors and fonts should be appropriate for the style and theme of the chart. Colors should have appropriate contrast and saturation, and fonts should be easy to read and understand. For example, certain charts may require different colors to distinguish different data, while others may require similar colors to highlight the relationships within the data.

Revealing the implementation

VisActor provides a rich configuration of chart styles. It not only allows customizing color themes but also provides high customization options such as adaptive text, layout arrangement, and animation configuration to accommodate complex visualization needs in DataWind products.

Let’s take the theme palette feature of VChart as an example. Color is a crucial element in visualizing data. Choosing appropriate colors for charts to highlight data features and achieve a harmonious combination is an art in data visualization. VChart provides powerful and flexible palette functionality to meet various color requirements in different application scenarios.

VChart supports two types of palettes:

Data Palette: It assigns colors to data items based on their categories. The data palette is a sequence of multiple colors.
Semantic Palette: It supports semantically meaningful color values that can be used throughout the chart to maintain a consistent color style. In other words, colors are assigned meaningful names, making it easier to maintain and modify them.
Among them, the data palette allows multiple sets of palette schemes to coexist. The specific palette to be used depends on specific conditions (such as the number of data categories). As a result, VChart can easily meet flexible design requirements：

The code for registering and applying themes in VChart is simple and straightforward：


    const theme = {  
      name: "dark",  
      background: "#202020",  
      colorScheme: {  
        default: {  
          palette: {  
            titleFontColor: "#e2e3e6",  
            labelFontColor: "#888c93",  
            labelReverseFontColor: "#202020",  
            axisGridColor: "#404349",  
            axisDomainColor: "#55595f",  
            backgroundColor: "#202020"  
          }  
        }  
      }  
    };

    // registering theme  
    VChart.ThemeManager.registerTheme("dark_tmp", theme);const vchart = new VChart(spec, { dom: "container" });  
    vchart.renderAsync();// hot update  
    vchart.setCurrentTheme("dark_tmp");

（VChart Theme Demo：https://codesandbox.io/s/dark-theme-whm775）

Simple and easy-to-use interaction

DataWind interaction

In addition to well-designed charts, the interactivity of charts is also crucial. Through the interactive features of charts, users can gain a deeper understanding of the data and engage in more complex analysis and exploration.

1. Prompt information

When the user hovers the mouse over the chart, it can display detailed information and labels about the data. This is known as triggering chart tooltip. DataWind supports rich-text rendering for tooltips, and even has the ability to render charts within tooltips.

2. Zooming and panning

Users can zoom in and pan the chart to view more detailed data.

3. Selection and Filtering

Users can select specific data points or areas and filter the data.

4. Zooming and Drilling

Many components in VisActor allow for interactive actions defined by the business, such as clicking, selecting, hovering over chart elements; zooming and selecting on axes; displaying and customizing tooltips; selecting and deselecting legends, etc.

Through the chart events provided by VisActor, DataWind has implemented exploratory analysis features for the chart. For example, zooming in and drilling down, chart annotations, reference alerts, and more.

Revealing the implementation

Most of the interactive features in DataWind are based on various custom extension capabilities provided by VisActor. Examples are given below to illustrate this.

VisActor has built-in support for tooltips with certain customization capabilities. It also supports completely custom rendering of tooltips. DataWind utilizes this capability for advanced tooltip customization.

By leveraging the comprehensive and detailed interactive events provided by VisActor, DataWind is able to develop corresponding data exploration and analysis workflows based on these events.


    // register events  
    chart.on(event: string, callback: (params: EventParams) => void): void;  
    chart.on(event: string, query: EventQuery, callback: (params: EventParams) => void): void;  
    // unregister eventes  
    chart.off(event: string, callback: (params: EventParams) => void): void;

As shown in the above interface: Lock the component that interacts through the query parameter, and specify the type of interaction event through the event parameter. By using the above interface, you can obtain the specific interactive behavior performed by the user on the chart. For detailed settings, refer to the VisActor Event Introduction: https://visactor.io/vchart/api/API/event.

he following demonstrates the ability to draw custom tooltips by handling mouse hover events. By registering events triggered by the Tooltip within the chart, you can receive messages for drawing or updating the tooltip, and parse the message to obtain specific information about the chart’s hover.

Example code is as follows:


    vchart.setTooltipHandler({  
      showTooltip: (activeType, tooltipData, params) => {  
        const tooltip = document.getElementById('tooltip');  
        tooltip.style.left = params.event.x + 'px';  
        tooltip.style.top = params.event.y + 'px';  
        let data = [];  
        if (activeType === 'dimension') {  
          data = tooltipData[0]?.data[0]?.datum ?? [];  
        } else if (activeType === 'mark') {  
          data = tooltipData[0]?.datum ?? [];  
        }  
        tooltipChart.updateData(  
          'tooltipData',  
          data.map(({ type, value, month }) => ({ type, value, month }))  
        );  
        tooltip.style.visibility = 'visible';  
      },  
      hideTooltip: () => {  
        const tooltip = document.getElementById('tooltip');  
        tooltip.style.visibility = 'hidden';  
      },  
      release: () => {  
        tooltipChart.release();  
        const tooltip = document.getElementById('tooltip');  
        tooltip.remove();  
      }  
    });

The result is as follows:

（Complete example:https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler）

In business intelligence (BI), it is necessary to translate user actions into specific business actions. For example, the specific actions triggered by clicking on an element may include various functionalities such as chart linking, drill-up/drill-down, dimension drill-down, chart annotation, and redirection. By extracting specific parameters from the events and defining the priorities among multiple events, one can establish rules for triggering events. In addition, some business actions are composed of a combination of multiple actions. For example, to achieve chart drill-down behavior, both the change of chart dimension and the filtering of the range need to be performed simultaneously when the interaction event is triggered. Therefore, complex business actions can be achieved through the combination and overlay of multiple basic events. This not only makes the interaction logic clear but also reduces ongoing maintenance costs.

Flexible and vivid narrative effects

DataWind Narrative

DataWind enables flexible visual storytelling through its dashboard. In a single chart, DataWind’s narrative primarily focuses on data annotation. By using data annotations, the cost for users to read charts, reports, or dashboards is significantly reduced, allowing them to quickly gain insights.

Revealing the implementation

VisActor’s powerful narrative capabilities support this. For example, custom data annotations can be added to charts:

The core code is as follows:

 const spec = {  
      type: 'line',  
      markPoint: [  
        {  
          coordinate: {  
            year: '1878',  
            population: 100  
          },  
          itemContent: {//text annotations  
            offsetY: -100,  
            type: 'richText',  
            autoRotate: false,  
            richText: {  
              （...rich text config）  
            }  
          },  
          itemLine: {// Mark line  
          ...  
        },  
        {  
          (...)  
        }  
      ],  
    ...  
    };  
    const vchart = new VChart(spec, { dom: CONTAINER_ID });  
    vchart.renderAsync();

（Link to the complete example code：https://www.visactor.io/vchart/demo/marker/mark-point-basic）

“VisActor” can also tell independent narratives through dynamic charts and animations. For example, using a chart with an autoplay progress bar to represent data changing over time:

（Link to the complete example code：https://www.visactor.io/vchart/demo/storytelling/timeline-scatter)

Moreover, when combined with VRender, it can present more complex chart narratives:

（Link to the complete example code：https://www.visactor.io)

Intelligent recommendations that understand data and users

DataWind chart recommendations

Intelligence is the trend in BI products. Once the fields in a chart are determined, selecting the appropriate chart type for data presentation is crucial in quickly gaining insights. DataWind’s chart recommendations include recommendations for chart types and chart fields. The former suggests the most suitable chart type for data display based on the selected dimensions and metrics, while the latter automatically assigns data fields to appropriate visual channels when users switch chart types. This greatly enhances users’ exploratory analysis capabilities, making it easy to create visual reports.

（DataWind Chart Recommend）

Revealing the implementation

@VisActor/VChart provides a complete end-to-end solution from data to visualization, with “visual storytelling” and “intelligence” as its core competencies. The powerful generation capability of large language models provides VChart with a natural language interaction interface, allowing users to call upon VChart’s capabilities through natural language, making chart generation and editing simple, fast, and of high quality.

@VisActor/VMind is a chart intelligence module based on VChart and large language models. It offers capabilities such as intelligent chart recommendations, intelligent coloring, and conversational chart editing. It greatly reduces the learning curve of using VChart and improves the efficiency of users in creating data visualizations.

The chart intelligence recommendation feature in VMind can generate data charts from scratch based on data characteristics and user intentions, including field selection, chart type recommendations, visual channel mappings, and chart coloring.

A code example for invoking the VMind component is as follows:：

import VMind from '@visactor/VMind'  
    const vmind = new VMind(openAIKey) //Your openAI key  
    const data=`Brand Name,Market Share,Average Price,Net Profit  
    Apple,0.5,7068,314531  
    Samsung,0.2,6059,362345  
    Vivo,0.05,3406,234512  
    Nokia,0.01,1064,-1345  
    Xiaomi,0.1,4087,131345  
    `  
    const describe="Display market share of each brand, forest style"  
    ////Input data in CSV format and chart description, return chart spec and animation duration.  
    const { spec, time } = await vmind.generateChart(data, describe);   
    //Call VChart for rendering.  
    const vchart = new VChart(spec, { dom: CONTAINER_ID });  
    vchart.renderAsync();

Pursuing Ultimate Performance

VisActor Performance Experience

With the superior performance of the visual rendering engine VRender and various optimization strategies, VChart and VTable provide excellent rendering performance and smooth interactive experience.

VChart offers the LTTB downsampling scheme, which maintains the visual characteristics of the original data with fewer data points, thereby reducing the computational burden of rendering.

In addition, VChart also supports progressive rendering to avoid page lag caused by rendering a large number of graphics. By splitting rendering tasks, VChart places created graphic elements within multiple frames for rendering, avoiding long synchronous computational tasks from blocking page logic and ensuring smooth chart presentation. VChart supports enabling progressive rendering configuration in any chart, as illustrated in the following image:

The core code for this example is as follows:


    const spec = {  
      type: 'common',  
      data: [  
    ...  
      ],  
      series: [  
        {  
          data: {  
            id: 'data0'  
          },  
          type: 'bar',  
          xField: 'time',  
          yField: 'value',  
          /** Whether to enable big data rendering mode, enabling it will reduce rendering precision.*/  
          large: false,  
          /** Set the threshold for enabling big data rendering optimization based on the length of the data; recommende largeThreshold < progressiveThreshold  */  
          largeThreshold: 500,  
          /** Segment length*/  
          progressiveStep: 100,  
          /** Set the threshold for enabling segmented rendering based on the length of data for a single series. */  
          progressiveThreshold: 1000,  
        },  
     ...  
      ],  
    };

（Link to the complete example code：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Progressive_Render）

VTable supports millisecond-level rendering for large data volumes, enabling rapid visualization of massive data content. Even when dealing with data in the order of millions, VTable can provide efficient rendering and a seamless interactive experience.

（demo：https://visactor.io/vtable/demo/performance/100W）

DataWind Performance Optimization Solution

In addition to the high-performance rendering of VisActor itself, VisActor also provides Web Worker and chart scheduling technologies to improve the parallel rendering capability of charts and prevent blocking that can cause frame drops and lagging in the webpage.

To fully utilize the CPU’s multi-core performance, VisActor supports parallel chart rendering using Web Workers. By using Web Workers, not only can client performance be fully utilized, but page blocking can also be avoided at its root. On top of this, DataWind encapsulates the Worker Pool component, which simulates the concept of a thread pool and implements the scheduling and reuse of Workers.

Furthermore, DataWind has developed a chart scheduler for asynchronous scheduling of chart rendering tasks. When a large number of rendering tasks enter the page within a short period of time, the chart scheduler will schedule and allocate rendering tasks in an orderly manner based on the chart priority and internal strategies. It will also cancel or merge repetitive and invalid rendering tasks to reduce rendering performance overhead.

User-friendly and smooth cross-platform experience

With the prevalence of mobile devices, an increasing number of users need to use BI products on their mobile devices. BI products in the mobile environment need to consider the following factors:

Responsive design: The UI of BI products should have responsive design to adapt to screens of different sizes on mobile devices. The elements within the charts also need to be responsive.
Mobile adaptation: Rendering and event handling in BI products, among other things, need to be specifically adapted for mobile devices.
Mobile optimization: The UI and functionality of BI products should be optimized for mobile devices. For example, the presentation format of data in the charts and the layout of various components need to be specifically optimized for mobile devices.

DataWind mobile experience

The charts and dashboards in DataWind are perfectly adapted for mobile scenarios, allowing users to access and view data reports anytime and anywhere, breaking the barriers of time and space.

Revealing the implementation

Thanks to the powerful cross-platform rendering capability provided by the VRender graphics rendering library, VChart supports multiple scenarios such as web, node, h5, and mini-programs. In cross-platform scenarios, charts may have different interactive responses and features, adapting to the interaction methods and events of touchscreens and other mobile devices.

VChart provides wrappers such as lark-vchart and taro-vchart, making it more convenient and simple to use VChart in different cross-platform scenarios.

For web scenarios, VChart provides the React-VChart wrapper, which offers a range of easy-to-use React components for creating various types of charts in the React development environment. The components are highly customizable and extensible, allowing different chart effects to be achieved by passing different parameters and configurations, enabling the quick creation of various types of charts.

Whether in web, mobile, or other scenarios, VChart chart library can provide high-quality chart rendering and interactive effects, meeting users’ needs for data visualization.

aking Feishu mini-program (widget) as an example, users can quickly embed charts into a widget using the provided template by VChart:

Below is a code example from the mini-program:


    Page({  
      data: {  
        canvasId: 'chartId', // canvasId  
        events: [], // custom events  
        styles: `  
          height: 50vh;  
          width: 100%  
        `,  
        // chart spec  
        spec: {  
          type: 'pie',  
          data: [  
            {  
              id: 'data1',  
              values: [  
               ...]  
            }  
          ],  
        }  
      },  
      onLoad: function (options) {}  
    });

（demo:https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/lark）

Summary

In the future, with the development of technology and the continuous growth of user demand, the requirements for visualization in BI products will continue to evolve in terms of interaction, usability, intelligence, and narrative features, demanding higher standards.

VisActor, as a free and open-source visualization solution, has undergone validation and refinement through extensive real-user scenarios with the Volcano Engine. It has achieved excellent results in functionality, aesthetics, performance, and cross-platform support, effectively enhancing and implementing the visualization capabilities for businesses.

DataWind embraces openness and works closely with VisActor, cooperating to demonstrate the successful adoption of open-source products in commercial environments.

Feel free to reach out

We are willing to have more in-depth discussions and exchanges with data product managers, designers, and developers regarding data products:

If you are interested in a particular aspect of the solution and would like to further discuss it, you can contact us.
If you would like to share your products, scenarios, and experiences, you can get in touch with us.
If you encounter challenging problems during the visualization application process, we can collaborate in discussing and researching them together.

Contact information:

VisActor Discord Community: https://discord.gg/3wPyxVyH6m
VisActor Official Website and GitHub:

https://www.visactor.io/

github.com

Twitter:https://twitter.com/xuanhun1

A brief history of chart

玄魂 — Thu, 09 Nov 2023 02:34:10 +0000

A brief history of chart,mabe by VisActor

ReadMore:VisActor — Narrative-oriented Intelligent Visualization Solution

VisActor — Narrative-oriented Intelligent Visualization Solution

玄魂 — Wed, 08 Nov 2023 08:21:21 +0000

1. What is VisActor ？

（Official Website： https://www.visactor.io)

VisActor is a data visualization solution

VisActor originates from a multitude of visualization scenarios within ByteDance. While covering conventional visualization scenarios, it takes narrative visualization as a new focus and aims for intelligent visualization. It has formed a visualization solution composed of multiple modules including a rendering engine, visualization grammar, data analysis components, chart components, table components, GIS components, graph visualization components, intelligent components, and other peripheral ecological components.

As a comprehensive solution, VisActor provides capabilities support at all key points in the complete visualization process.

VRender

It’s not just a feature-rich visualization rendering engine, but also a handy and exquisite brush for creating visualization artistry.

github：https://github.com/VisActor/VRender

website：https://www.visactor.io/vrender

VRender is a visualization graphics rendering engine responsible for the final presentation of visual charts.

In addition to providing basic graphic drawing capabilities, VRender caters to a wider range of visualization scenarios, offering various capabilities such as custom animations, graphic combinations, and narrative orchestration.

demo of vrender

All the components, events, and cross-end capabilities needed in the whole solution are built around VRender as the core, and each module provides expansion interfaces. For instance, it allows the introduction of third-party libraries to add hand-drawn style rendering:

a hand-drawn style pie

3D Chart Rendering:

VGrammar

It’s not just a visualization grammar that generates thousands of charts, but also a data magician that transforms the mundane into the extraordinary.

github：https://github.com/VisActor/VGrammar

website：https://www.visactor.io/vgrammar

Visualization grammar is a universal visualization system that implements the transition from data to graphic display, providing semantical grammar (or language). In theory, any desired visualization form can be achieved based on the visualization grammar, not limited to specific chart types. For scenarios with more customization requirements, we recommend using VGrammar.

VGrammar is the core of the entire VisActor system. On this basis, we abstract out component libraries such as VChart, VTable, VGraph, and VGis for specific business scenarios.

a demo created by VGrammar

To lower the cost of using visualization grammar, we offer both declarative and imperative syntax.

In addition, aimed at common visualization scenarios, we provide common basic components.

Screenshot source of VGrammar

Compared to the chart library, VGrammar provides flexible and powerful feature support in many aspects such as graphic element types, animation arrangements, layout, rendering, custom extensions, and more. Here are a few examples:

Archimedean Spiral

Cell Graphic Element

Custom Animation

VChart

It’s not just a ready-to-use multi-end chart library, but also a vivid and flexible data storytelling narrator.

github：https://github.com/VisActor/VChart

website：https://www.visactor.io/vchart

Based on VGrammar, VChart initially caters to traditional statistical chart applications, covering common types of charts based on existing business deposits.

screenshots of VChart

It extends to 3D charts on the basis of regular 2D charts.

a demo of VChart

Meanwhile, in the direction of narrative visualization, by utilizing the powerful and flexible interfaces of VGrammar, it continues to perfect various narrative features, add various narrative templates, and match more narrative scenarios.

dynamic scatter chart created by VChart

VTable

It’s not just a high-performance multi-dimensional data analysis table, but also a grid artist creating between rows and columns.

github：https://github.com/VisActor/VTable

website：https://www.visactor.io/vtable

VTable is a high-performance multi-dimensional analysis table component developed based on Canvas. Compared to the traditional DOM table components, VTable primarily solves rendering and interaction performance issues under the condition of massive data, providing a smooth experience even with millions-of-level data.

a demo of VTable

In terms of business scenarios, it mainly provides data computation and visualization capabilities for multi-dimensional data display scenes, such as pivot analysis and tree-shaped display. At the same time, VTable can directly embed VChart instances to become a chart container, achieving high-performance rendering of multiple charts on a single canvas, greatly expanding the visual presentation forms based on the table.

more examples of VTable

Intelligent Visualization

Intelligence is the future core direction of VisActor. Only on this basis can we truly reduce the access and development costs for developers and focus their attention beyond visualization. The VisActor team has been conducting research and practice in several areas including intelligent color matching, intelligent chart recommendations, automatic layout, data parsing, and intent recognition by integrating large models as well as traditional intelligent algorithms. The first intelligent visualization component will be released in the third quarter of 2023.

Regarding the direction of intelligent visualization, we will continue to output content from multiple perspectives. You’re welcome to keep an eye on our GitHub and social media for updates.

There’s More

Other components of the VisActor visualization solution have been implemented in hundreds of projects within ByteDance, and we are currently preparing for open-sourcing and will meet you gradually. This includes (but is not limited to) the following directions:

VGraph in the direction of graph visualization.

（Creating with @visactor/vgraph）

VGis in the direction of GIS.

Creating with @visactor/vgis

In cross-platform direction, VisActor can currently adapt to Node, H5, and various mini-program ends. The solutions to embed in Python, Flutter, and Rust will officially meet you soon, as which time VisActor will become a truly full-platform visualization solution.

demo of word-cloud

For the BI field, where statistical chart applications are most used, we will also open source a lightweight Headless BI system. Please stay tuned.

2、VisActor Open Source Philosophy

Open source is not just about showing off code, but connecting to the community through the code.

Placing the code on GitHub is the beginning of embracing the community. We hope to truly integrate VisActor into the community and push for its better and healthier development along with thousands of developers.

Open source is not just about opening code, but also sharing experiences.

VisActor is not castles in the air — it’s a distillation and upgrade based on a vast amount of practical experience. To better assist developers in using visualization components, we will continue to share our best practices, while also aggregating and sharing the community’s experience summaries.

Open source is not just geared towards developers, but also designers, product managers, and end users.

The value of VisActor ultimately has to be reflected in the enhancement of different products’ quality and value. The same as serving developers, we are also committed to connecting designers, product managers, and end users through open-source means. We will offer visualization design resources, product practice cases, and are willing to enter more product teams for valuable exchanges, looking forward to hearing voices from different segments.

3、Welcome to Join Us

Finally, we sincerely welcome all friends interested in data visualization to join us. You can participate in VisActor’s open-source construction in several ways:

Clone the project you’re interested in, submit a PR. For specific methods, please refer to: Code of Conduct 和 contributing guide 。
Of course, you can also create your own open-source project to contribute to the Visactor ecosystem, and we will promote and build it together!
You can also share your experiences with everyone, including demos, articles, cases. Each project has a Wiki for recording, where you can edit VChart VTable VGrammar
If you find a bug or have a good suggestion, you can raise an issue on GitHub . You can also directly join our community （VisActor Channel）for communication. Of course, you can also leave us a message on Twitter.

Multidimensional Data Presentation Based on VTable

玄魂 — Wed, 08 Nov 2023 04:56:19 +0000

Introduction to Multidimensional Tables

A multidimensional table, also known as a pivot table, cross-tabulation, or pivot table, refers to a type of table that allows the inclusion of one or more dimensions in both the row and column dimensions, displaying the relationships between dimensions. Users can easily analyze various scenario metrics and comparisons, aiming to assist in business analysis and decision-making.

Suppose we need to analyze sales data as shown in the table below:

When analyzing this type of tabular data, different data analysts or roles may raise relevant questions based on their business interests. For example, some may be interested in the sales revenue across different regions and would like to identify regions with lower sales performance. Others may want to understand the sales revenue comparison for different product categories in recent periods to facilitate product research and development.

In these questions, the business perspectives such as region, category, and time period (year) are dimensions, while “sales revenue” is the metric or measure.

Concepts of Multidimensional Tables

To understand the core concepts in multidimensional analysis in business intelligence (BI), consider the following:

Dimensions: These are the perspectives or angles used to classify and observe business data. Dimensions provide the context for analyzing data and are used to categorize and filter information. Examples of dimensions include region, category, and time.
Dimension Hierarchies: Dimension hierarchies represent different levels of detail within a dimension. They are predefined levels of a dimension based on varying levels of granularity. For example, a date dimension hierarchy might include levels such as year, month, and day. Similarly, a region dimension hierarchy might have levels such as country, province, and city. Each level within a dimension hierarchy is considered a dimension itself, with a hierarchical relationship among its members. Dimension hierarchies are often used for drilling down or rolling up data during analysis.
Dimension Members: These are the specific values or items within a dimension. They represent the distinct values that can be attributed to a dimension. For instance, within the month level of the date dimension, the dimension members could be January, February, March, and so on. Similarly, for the region dimension, members could include Northeast, North China, Central China, and so forth.
Indicators: Indicators are the data that describe the business situation or performance. They are quantitative values used to analyze and evaluate business metrics. Examples of measures include sales revenue, costs, profits, and other quantitative indicators.

How can we display multiple dimensions in a multidimensional analysis table? In the following image, there are four business dimensions: Region, Province, Year, and Quarter, and two indicators: Sales and Profit.

Regarding the sales data in the figure, the location is in cell [5, 5], that is, the data in column 5 and row 5: represents the sales profit value of Heilongjiang Province in the Northeast region in the Q2 quarter of 2016. That is to say, it corresponds to the row dimension value: [‘Northeast’, ‘Heilongjiang’], the column dimension: [‘2016’, ‘2016-Q2’], and the indicator: ‘Profit’. Next, we will introduce how to use VTable to implement this multi-dimensional table.

VTable implements multi-dimensional tables

Concept mapping to configuration items

The configuration of the pivot table above is as follows:

const option={  
  rows:['region','province'], //row dimensions  
  columns:['year','quarter'], //column dimensions  
  indicators:['sales','profit'], //indicators  
  records:[ //datasource  
    {  
      region:'东北',  
      province:'黑龙江',  
      year:'2016',  
      quarter:'2016-Q1',  
      sales:1243,  
      profit:546  
    },  
    ...  
  ]  
}

This configuration is the simplest configuration for multidimensional tables. As the functional requirements become more complex, various configurations can be added for each function point to meet the needs.

Data analysis related configuration:

dataConfig Type Define：

/**  
 * Data processing configuration  
 */  
export interface IDataConfig {  
  aggregationRules?: AggregationRules;  
  sortRules?: SortRules;   
  filterRules?: FilterRules;   
  totals?: Totals;   
  derivedFieldRules?: DerivedFieldRules;   
  ...  
}

DataConfig application examples：

Total or sub-total rules

demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-total


dataConfig: {  
      totals: {  
        row: {  
          showGrandTotals: true,  
          showSubTotals: true,  
          subTotalsDimensions: ['province'],  
          grandTotalLabel: 'RowTotal',  
          subTotalLabel: 'sub-total'  
        },  
        column: {  
          showGrandTotals: true,  
          showSubTotals: true,  
          subTotalsDimensions: ['quarter'],  
          grandTotalLabel: 'ColumnTotal',  
          subTotalLabel: 'sub-total'  
        }  
      }  
    },

Sort rules

demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-sort-dimension

dataConfig: {  
    sortRules: [  
      {  
        sortField: 'Category',  
        sortBy: ['Office Supplies', 'Technology','Furniture']  
      },  
      {  
        sortField: 'Sub-Category',  
        sortBy: ['Chairs', 'Tables','Labels', 'Art', 'Paper', 'Appliances']  
      }  
    ],  
  },

Filter rules

demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-filter

dataConfig: {  
    filterRules: [  
      {  
        filterFunc: (record) =>record['Sub-Category'] !== 'Chairs'  
      }  
    ]  
  },

Aggregation rules

demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-aggregation

dataConfig: {  
    aggregationRules: [  
        //As the basis for aggregate calculations, if the sales amount is not configured,   
        //the cell content will be displayed by default according to the aggregate sum calculation.  
        {  
          indicatorKey: 'TotalSales', //Indicator name  
          field: 'Sales', //The field  which the indicator is based  
          aggregationType: VTable.TYPES.AggregationType.SUM, //Calculation type  
          formatFun: sumNumberFormat  
        },  
        {  
          indicatorKey: 'OrderCount', //Indicator name  
          field: 'Sales', //The field  which the indicator is based  
          aggregationType: VTable.TYPES.AggregationType.COUNT, //Calculation type  
          formatFun: countNumberFormat  
        },  
        {  
          indicatorKey: 'AverageOrderSales', //Indicator name  
          field: 'Sales', //The field  which the indicator is based  
          aggregationType: VTable.TYPES.AggregationType.AVG, //Calculation type  
          formatFun: sumNumberFormat  
        }  
      ]  
  },

Derived field rules

demo：https://visactor.io/vtable/demo/data-analysis/pivot-analysis-derivedField

derivedFieldRules: [  
      {  
        fieldName: 'Year',  
        derivedFunc: VTable.DataStatistics.dateFormat('Order Date', '%y', true),  
      },  
      {  
        fieldName: 'Month',  
        derivedFunc: VTable.DataStatistics.dateFormat('Order Date', '%n', true),  
      }  
    ]

data analysis process

Dependent configuration: dimensions, indicators and dataConfig.

The process of traversing data:

Traverse the records once, parse the row header dimension value to display the header cell, distribute all data in the records to the corresponding row and column path set, and calculate the aggregate value of the body part indicator cell.

Data dimension tree

According to the above traversed structure, a dimension tree will be generated, from which the value of the cell and the original data entry of the value can be found.

After analysis and calculation of record grouping and aggregation, the corresponding relationship between the cell data in the table and the records data source is finally presented:

Custom dimension tree

Although multidimensional tables with analytical capabilities can automatically analyze the dimension values of each dimension to form a tree structure of row headers, and can sort according to dataConfig.sortRules, scenarios with complex business logic still expect to be able to customize row header dimensions. values and their order. Then these business requirement scenarios can be realized through rowTree and columnTree.

Configuration details for custom trees:

const option = {  
    rowTree: [{  
        dimensionKey: 'region',  
        value: '中南',  
        children: [  
            {  
                dimensionKey: 'province',  
                value: '广东',  
            },  
            {  
                dimensionKey: 'province',  
                value: '广西',  
            }  
        ]  
    },  
    {  
        dimensionKey: 'region',  
        value: '华东',  
        children: [  
            {  
                dimensionKey: 'province',  
                value: '上海',  
            },  
            {  
                dimensionKey: 'province',  
                value: '山东',  
            }  
        ]  
    }],  
    columnTree: [{  
        dimensionKey: 'year',  
        value: '2016',  
        children: [  
            {  
                dimensionKey: 'quarter',  
                value: '2016-Q1',  
                children: [  
                    {  
                        indicatorKey: 'sales',  
                        value: 'sales'  
                    },  
                    {  
                        indicatorKey: 'profit',  
                        value: 'profit'  
                    }  
                ]  
            },  
            {  
                dimensionKey: 'quarter',  
                value: '2016-Q2',  
                children: [  
                    {  
                        indicatorKey: 'sales',  
                        value: 'sales'  
                    },  
                    {  
                        indicatorKey: 'profit',  
                        value: 'profit'  
                    }  
                ]  
            }  
        ]  
    }],  
    indicators: ['sales', 'profit'],  
    //enableDataAnalysis:true,  
    corner: {  
        titleOnDimension: 'none'  
    },  
    records: [  
        {  
            region: '中南',  
            province: '广东',  
            year: '2016',  
            quarter: '2016-Q1',  
            sales: 1243,  
            profit: 546  
        },  
        {  
            region: '中南',  
            province: '广东',  
            year: '2016',  
            quarter: '2016-Q2',  
            sales: 2243,  
            profit: 169  
        }, {  
            region: '中南',  
            province: '广西',  
            year: '2016',  
            quarter: '2016-Q1',  
            sales: 3043,  
            profit: 1546  
        },  
        {  
            region: '中南',  
            province: '广西',  
            year: '2016',  
            quarter: '2016-Q2',  
            sales: 1463,  
            profit: 609  
        },  
        {  
            region: '华东',  
            province: '上海',  
            year: '2016',  
            quarter: '2016-Q1',  
            sales: 4003,  
            profit: 1045  
        },  
        {  
            region: '华东',  
            province: '上海',  
            year: '2016',  
            quarter: '2016-Q2',  
            sales: 5243,  
            profit: 3169  
        }, {  
            region: '华东',  
            province: '山东',  
            year: '2016',  
            quarter: '2016-Q1',  
            sales: 4543,  
            profit: 3456  
        },  
        {  
            region: '华东',  
            province: '山东',  
            year: '2016',  
            quarter: '2016-Q2',  
            sales: 6563,  
            profit: 3409  
        }  
    ]  
};

The final effect is as follows:

VTable website demo：https://visactor.io/vtable/demo/table-type/pivot-table

The complexity of the custom tree lies in the formation of the row, column and dimension trees. You can choose to use it according to the business scenario. If you have complex sorting, aggregation or paging rules, you can choose to use a custom method.

Note that choosing a custom tree configuration method will not have data aggregation capabilities, that is, one of the matched data entries will be used as the cell indicator value.

Some typical application scenarios

Requirements: Different indicators set different formats

Configuration method: Set different cellTypes for indicators.

Demo*：*https://codesandbox.io/s/vtable-pivot-table-indicators-pxphqx

2. Requirements: Set different font sizes for different dimensions. Set the font size for the region dimension value of the row dimension to 20, and set the font size for the province dimension value to 16.

Configuration method: This can be achieved by configuring the style in the headerStyle of the corresponding dimension.

3. Requirement: Corner header configuration displays row dimension name.

Configuration method: By default, the corner header will display the dimension name in columns of the column dimension. If you want to display the dimension name of the row dimension in the corner header, configure titleOnDimension to row.

4. Requirements: Trend analysis table — showing sales in different time periods, year-on-year comparisons and trend charts

Configuration method: Set the cellType of one of the indicators to ‘sparkline’. You can use icon to configure the chart trend.

Demo*：*https://visactor.io/vtable/demo/business/trend

5. Requirement: Integrate charts into tables to express data more vividly

6. Requirements: PivotChart, comprehensive view of data distribution and trends by dimension and indicator

VTable can seamlessly integrate VChart and render the chart type of VChart as the element type of the cell, which greatly improves the visual expression of the table. At the same time, it also provides a new solution to solve the performance problem of single-page multi-chart rendering.

Welcome to communicate and exchange ideas

discord：https://discord.gg/3wPyxVyH6m

twiter：https://twitter.com/xuanhun1

On this moonless night, I look forward to you lighting up the starry sky. Thank you for giving a star.：

github：https://github.com/VisActor/VTable

More reference：

Forem: 玄魂

Powerful and High-Performance: VTable Practice Sharing — The Ultimate Tool for Table Data Visualization

VTable Overview

Create a Project

Use AI + MCP to Drive VTable Quickly and Accurately

Auto-Calculated Column Widths with Persistent Drag-Resize Memory

Theme Switching

Transpose and Frozen Columns/Rows

Table Size Configuration

Sticky Header-like Behavior

Copy Table Content

Conclusion

How to add a live star history chart to your github readme

Disclaimer

Data query and image download

Add a live star-history chart to your GitHub README

Embed with <iframe />

Step-to-step guide to use iframe embed

Live chart image in SVG format

Step-to-step guide to add the chart to your GitHub README

Conclusion

Future Plans

[Boost]

[Practical] Create a Dynamic Infographic in 10 Minutes

玄魂 ・ Mar 6

[Practical] Create a Dynamic Infographic in 10 Minutes

Background

Preparation

Understanding VStory

Clone Repository and Local Environment

Start Creating

Decide What to Create

Collect Data

Prepare Graphic Content

Data Display

Title and Content Introduction

Add a Background Image

Design Content Layout and Display Effect

Start Creating

Step 1: Create New Demo

Add Elements

Layout and Fine-tuning

Artistic Enhancement

Add Animations

Final Effect

Upload

Welcome to Communicate

Creating Cool Pyramid Charts with VTable

Implementing Population Pyramid with VTable

Data Preparation

Configure Column Information

Optimize Display Effect

Chart Title

Using Progressbar Type in VTable

Introduction to Other Cell Types in VTable

Summary

Contact Us

Using Cursor with DeepSeek to Quickly Get Started with Unfamiliar Components

Preparation

Create a Test Project

Obtain DeepSeek API Key

Configure Cursor

Inject Official Tutorial into @Docs

Practical Verification

VTable Test

Invoke AI Interaction Panel in Cursor and Generate Code

Inject Official Tutorial into @Docs

Code Application and Effect Display

VChart Test

Add a Bar Chart

Complex Scenario, Inject Docs

Set Docs

Experimental Results

VStory Test

Inject Docs

Experimental Results

Simple Summary

Contact Us

Developing VTable Custom Edit Component with React

Introduction to Business Scenarios

Embed with `<iframe />`

Step-to-step guide to use `iframe` embed

玄魂・ Mar 6