Sparkline 0.5.2+
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| ✅ | ✅ | - | ✅ | UniverSheetsAdvancedPreset |
A sparkline is a concise and intuitive small chart, typically embedded within table cells, used to quickly showcase data trends or key metrics.
This feature includes the following plugin packages:
@univerjs-pro/sheets-sparklineSparkline plugin@univerjs-pro/sheets-sparkline-uiSparkline UI plugin
Presets Installation
Please follow the instructions in Print.
Piecemeal Installation
npm install @univerjs-pro/sheets-sparkline @univerjs-pro/sheets-sparkline-uiimport { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import { UniverSheetSparklineUIPlugin } from '@univerjs-pro/sheets-sparkline-ui';
import SheetsSparklineUIEnUS from '@univerjs-pro/sheets-sparkline-ui/locale/en-US';
import '@univerjs-pro/sheets-sparkline/facade';
import '@univerjs-pro/sheets-sparkline-ui/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
SheetsSparklineUIEnUS
),
},
});
univer.registerPlugin(UniverSheetSparklinePlugin);
univer.registerPlugin(UniverSheetSparklineUIPlugin);Univer on Node.js Piecemeal Installation
npm install @univerjs-pro/sheets-sparklineimport { LocaleType, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetSparklinePlugin } from '@univerjs-pro/sheets-sparkline';
import '@univerjs-pro/sheets-sparkline/facade';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
});
univer.registerPlugin(UniverSheetSparklinePlugin);Facade API
To get full defination of facade api, please refer to FacadeAPI
Add Sparkline
The FWorksheet.addSparkline method is used to add sparklines in a specified range and returns an FSparkline instance.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
// Create a sparkline in the range A10, with the data source in the range A1:A7.
const sourceRanges = [fWorksheet.getRange('A1:A7').getRange()];
const targetRanges = [fWorksheet.getRange('A10').getRange()];
const sparkline = fWorksheet.addSparkline(sourceRanges, targetRanges, univerAPI.Enum.SparklineTypeEnum.LINE_CHART);
console.log('sparkline instance', sparkline);Compose & Uncompose Sparkline
The FWorksheet.composeSparkline and FWorksheet.unComposeSparkline methods are used to compose and uncompose sparklines.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
// Create a sparkline in the range A10, with the data source in the range A1:A7.
const firstSparkline = fWorksheet.addSparkline(
[fWorksheet.getRange('A1:A7').getRange()],
[fWorksheet.getRange('A10').getRange()]
);
// Create a sparkline in the range B10, with the data source in the range B1:B7.
const secondSparkline = fWorksheet.addSparkline(
[fWorksheet.getRange('B1:B7').getRange()],
[fWorksheet.getRange('B10').getRange()]
);
// Compose the two sparklines into one group
fWorksheet.composeSparkline([fWorksheet.getRange('A10:B10').getRange()]);
console.log('debugger', fWorksheet.getAllSubSparkline().size); // 1
// Uncompose the sparkline group after 3 seconds
setTimeout(() => {
fWorksheet.unComposeSparkline([fWorksheet.getRange('A10:B10').getRange()]);
console.log('debugger', fWorksheet.getAllSubSparkline().size); // 2
}, 3000);Get Sparkline & Sparkline Group Instances
The FWorksheet.getSparklineByCell method is used to get the sparkline instance in a specified cell and returns an FSparkline instance.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
// Create a sparkline in the range A10, with the data source in the range A1:A7.
const sourceRanges = [fWorksheet.getRange('A1:A7').getRange()];
const targetRanges = [fWorksheet.getRange('A10').getRange()];
const sparkline = fWorksheet.addSparkline(sourceRanges, targetRanges);
console.log('Cell A10: ', fWorksheet.getSparklineByCell(9, 0));
console.log('Cell A11: ', fWorksheet.getSparklineByCell(10, 0));The FWorksheet.getSparklineGroupByCell method is used to get the sparkline group instance in a specified cell and returns an FSparklineGroup instance.
const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
// Create a sparkline in the range A10, with the data source in the range A1:A7.
const firstSparkline = fWorksheet.addSparkline(
[fWorksheet.getRange('A1:A7').getRange()],
[fWorksheet.getRange('A10').getRange()]
);
// Create a sparkline in the range B10, with the data source in the range B1:B7.
const secondSparkline = fWorksheet.addSparkline(
[fWorksheet.getRange('B1:B7').getRange()],
[fWorksheet.getRange('B10').getRange()]
);
console.log('Cell A10: ', fWorksheet.getSparklineGroupByCell(9, 0));
// Compose the two sparklines into one group after 3 seconds
setTimeout(() => {
fWorksheet.composeSparkline([fWorksheet.getRange('A10:B10').getRange()]);
console.log('Cell A10: ', fWorksheet.getSparklineGroupByCell(9, 0));
}, 3000);The FSparkline instance includes the following methods for managing sparklines:
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline in the current cell. |
| removeSparkline | Remove the sparkline in the current cell. |
The FSparklineGroup instance includes the following methods for managing sparkline groups:
| Methods | Description |
|---|---|
| changeDataSource | Modify the data source and placement of the sparkline group in the current cell. |
| removeSparklineGroup | Remove the sparkline group containing the sparkline in the current cell. |
| setConfig | Change the configuration of the sparkline group in the current cell. |
Event Listening
Full event type definitions, please refer to Events .
univerAPI.Event.SheetSparklineChanged event is triggered when the sparkline changes.
const disposable = univerAPI.addEvent(univerAPI.Event.SheetSparklineChanged, (params) => {
console.log('SheetSparklineChanged', params);
const { workbook, worksheet, sparklines } = params;
});
// Remove the event listener, use `disposable.dispose()`.Last updated on