Skip to content

VisActor/univer-vchart-plugin

Repository files navigation

univer-vchart-plugin

The vchart univer plugin encapsulates the capability to create chart overlays within Univer.

npm Version npm Download PRs Welcome

license

English | ็ฎ€ไฝ“ไธญๆ–‡

Introduction

VChart is a chart component library within the VisActor visualization system. Univer is an open-source Office suite. Using the univer-vchart-plugin, you can easily create chart overlays.

๐Ÿ”จ Usage

๐Ÿ“ฆ Installation

# npm
$ npm install @visactor/univer-vchart-plugin

# pnpm
$ pnpm add @visactor/univer-vchart-plugin

๐Ÿ“Š A Simple Chart

import {
  UniverVChartPlugin,
  CREATE_VCHART_COMMAND_ID,
} from "@visactor/univer-vchart-plugin";

export function setupUniver() {
  const univer = new Univer({
    theme: defaultTheme,
    locale: LocaleType.EN_US,
    locales: {
      [LocaleType.EN_US]: enUS,
    },
  });
  univer.registerPlugin(UniverVChartPlugin);
}

export function setupVChartDemo($toolbar: HTMLElement, univerAPI: FUniver) {
  const $button = document.createElement("a");
  $button.textContent = "Create vchart demo";
  $toolbar.appendChild($button);

  $button.addEventListener("click", async () => {
    if (!univerAPI) throw new Error("univerAPI is not defined");

    const activeWorkbook = univerAPI.getActiveWorkbook();
    if (!activeWorkbook) throw new Error("activeWorkbook is not defined");
    const activeSheet = activeWorkbook.getActiveSheet();
    if (!activeSheet) throw new Error("activeSheet is not defined");

    await univerAPI.executeCommand(CREATE_VCHART_COMMAND_ID, {
      spec: {
        type: "line",
        data: {
          values: [
            {
              time: "2:00",
              value: 8,
            },
            {
              time: "4:00",
              value: 9,
            },
            {
              time: "6:00",
              value: 11,
            },
            {
              time: "8:00",
              value: 14,
            },
            {
              time: "10:00",
              value: 16,
            },
            {
              time: "12:00",
              value: 17,
            },
            {
              time: "14:00",
              value: 17,
            },
            {
              time: "16:00",
              value: 16,
            },
            {
              time: "18:00",
              value: 15,
            },
          ],
        },
        xField: "time",
        yField: "value",
      },
    });
  });
}

๐Ÿ”— Related Links

๐Ÿค Contributing PRs Welcome

If you would like to contribute, please read the Code of Conduct and the Contribution Guide first.

Small streams make big rivers!

About

No description, website, or topics provided.

Resources

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published