### Example Data Records Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/chartType/boxplot.mdx This snippet shows example data entries, each representing a record with 'Survived', 'Sex', and 'Age' attributes. 'Survived' is a binary indicator, 'Sex' is categorical, and 'Age' is a numerical value which can be null. ```json { "Survived": 0, "Sex": "male", "Age": 60 }, { "Survived": 0, "Sex": "male", "Age": 48 }, { "Survived": 0, "Sex": "male", "Age": 22 }, { "Survived": 0, "Sex": "male", "Age": 40.5 }, { "Survived": 1, "Sex": "male", "Age": 36 }, { "Survived": 1, "Sex": "female", "Age": 33 }, { "Survived": 1, "Sex": "female", "Age": 30 }, { "Survived": 0, "Sex": "male", "Age": 62 }, { "Survived": 0, "Sex": "male", "Age": 25 }, { "Survived": 1, "Sex": "female", "Age": 2 }, { "Survived": 1, "Sex": "female", "Age": null }, { "Survived": 1, "Sex": "female", "Age": 34 }, { "Survived": 1, "Sex": "male", "Age": 36 }, { "Survived": 0, "Sex": "male", "Age": 35 }, { "Survived": 0, "Sex": "male", "Age": 18 }, { "Survived": 0, "Sex": "male", "Age": 45 }, { "Survived": 1, "Sex": "female", "Age": 63 }, { "Survived": 1, "Sex": "male", "Age": 30 }, { "Survived": 1, "Sex": "female", "Age": 19 }, { "Survived": 0, "Sex": "male", "Age": 18 }, { "Survived": 1, "Sex": "female", "Age": null }, { "Survived": 1, "Sex": "female", "Age": 24 }, { "Survived": 0, "Sex": "male", "Age": 30 }, { "Survived": 0, "Sex": "male", "Age": 40.5 }, { "Survived": 0, "Sex": "female", "Age": 24 }, { "Survived": 0, "Sex": "male", "Age": null }, { "Survived": 0, "Sex": "male", "Age": 34 }, { "Survived": 1, "Sex": "male", "Age": 32 }, { "Survived": 1, "Sex": "female", "Age": 27 }, { "Survived": 1, "Sex": "male", "Age": null }, { "Survived": 1, "Sex": "female", "Age": 42 }, { "Survived": 0, "Sex": "male", "Age": 32 }, { "Survived": 0, "Sex": "male", "Age": 22 }, { "Survived": 1, "Sex": "female", "Age": 33 }, { "Survived": 1, "Sex": "female", "Age": 48 }, { "Survived": 0, "Sex": "male", "Age": 47 }, { "Survived": 1, "Sex": "female", "Age": 30 }, { "Survived": 0, "Sex": "male", "Age": 16 } ``` -------------------------------- ### Setup and Query Data Connector with VQuery Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/playground/vbi.mdx This snippet demonstrates how to register a data connector using VBI and VQuery. It defines schema discovery and data querying logic, including fetching data from a CSV URL if the dataset doesn't exist. The connector is then used to query data using a provided DSL. ```tsx const run = async (setVSeed) => { const vquery = new VQuery() const connectorId = 'demoDataset' VBI.registerConnector('demoDataset', async () => { return { discoverSchema: async () => { return [ { name: 'id', type: 'string' }, { name: 'order_id', type: 'string' }, { name: 'order_date', type: 'date' }, { name: 'delivery_date', type: 'date' }, { name: 'delivery_method', type: 'string' }, { name: 'customer_id', type: 'string' }, { name: 'customer_name', type: 'string' }, { name: 'customer_type', type: 'string' }, { name: 'city', type: 'string' }, { name: 'province', type: 'string' }, { name: 'country_or_region', type: 'string' }, { name: 'area', type: 'string' }, { name: 'product_id', type: 'string' }, { name: 'product_type', type: 'string' }, { name: 'product_sub_type', type: 'string' }, { name: 'product_name', type: 'string' }, { name: 'sales', type: 'number' }, { name: 'amount', type: 'number' }, { name: 'discount', type: 'number' }, { name: 'profit', type: 'number' }, ] }, query: async ({ queryDSL, schema }) => { if (!(await vquery.hasDataset(connectorId))) { const url = 'https://visactor.github.io/VSeed/dataset/supermarket.csv' const datasetSource = { type: 'csv', rawDataset: url } await vquery.createDataset(connectorId, schema, datasetSource) } const dataset = await vquery.connectDataset(connectorId) const queryResult = await dataset.query(queryDSL) await dataset.disconnect() await vquery.close() return { dataset: queryResult.dataset, } }, } }) const builder = VBI.from(VBI.generateEmptyDSL(connectorId)) builder.measures .addMeasure('sales', (node) => { node.setAlias('Sum(sales)').setAggregate({ func: 'sum' }) }) .addMeasure('profit', (node) => { node.setAlias('Sum(profit)').setAggregate({ func: 'sum' }) }) builder.dimensions.addDimension('area', (node) => { node.setAlias('区域') }) console.log('debug vbidsl', builder.build()) const vseed = await builder.buildVSeed() setVSeed(() => vseed) return () => { vquery = null } } ``` -------------------------------- ### Column Chart with Polynomial Regression - VChartRender Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/regressionLine/polynomial.mdx This snippet demonstrates how to create a column chart with polynomial regression lines using VChartRender. The chart displays profit and sales data over several years, with 'date' as the x-axis and 'profit' as the y-axis. It includes two polynomial regression lines (degree 2 and 3) with confidence intervals. ```tsx export const ColumnPolynomial = memo(() => { const vseed: VSeed = { chartType: 'column', dataset: [ { date: '2019', profit: 10, sales: 20 }, { date: '2020', profit: 30, sales: 60 }, { date: '2021', profit: 30, sales: 60 }, { date: '2022', profit: 50, sales: 100 }, { date: '2023', profit: 40, sales: 80 }, ], dimensions: [{ id: 'date', encoding: 'xAxis' }], measures: [{ id: 'profit', encoding: 'yAxis' }], polynomialRegressionLine: [ { color: 'red', text: 'Degree-2', degree: 2, confidenceIntervalVisible: true }, { color: 'green', text: 'Degree-3', degree: 3, confidenceIntervalVisible: true }, ], } return }) ``` -------------------------------- ### Configure VSeed Legend Border Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/baseConfig/chart/legend.mdx Demonstrates how to control the visibility of the legend border in VSeed charts by setting the 'border' property to true or false. This example shows the border disabled. ```tsx export const BaseConfigLegendMaxSize = memo(() => { const vseed: VSeed = { chartType: 'columnParallel', legend: { enable: true, border: false, position: 'rt', maxSize: 2, }, dataset: [ { date: '2019', region: 'east', city: 'A', profit: 1, sales: 2, discount: 0.5 }, { date: '2019', region: 'east', city: 'B', profit: 3, sales: 6, discount: 0.5 }, { date: '2019', region: 'east', city: 'C', profit: 3, sales: 6, discount: 0.5 }, { date: '2019', region: 'east', city: 'D', profit: 5, sales: 10, discount: 0.5 }, { date: '2019', region: 'east', city: 'E', profit: 4, sales: 8, discount: 0.5 }, { date: '2020', region: 'north of east', city: 'A', profit: 1, sales: 2, discount: 0.5 }, { date: '2020', region: 'north of east', city: 'B', profit: 3, sales: 6, discount: 0.5 }, { date: '2020', region: 'north of east', city: 'C', profit: 3, sales: 6, discount: 0.5 }, { date: '2020', region: 'north of east', city: 'D', profit: 5, sales: 10, discount: 0.5 }, { date: '2020', region: 'north of east', city: 'E', profit: 4, sales: 8, discount: 0.5 }, ], } return }) ``` -------------------------------- ### Configure Area Charts with VSeed Builder (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Illustrates the creation of area charts using the VSeed Builder. It details configuration options for dataset, dimensions, measures, labels, legends, tooltips, area styles, line styles, and sorting, enabling customization of the chart's appearance and behavior. ```typescript import { Builder, registerArea, Area } from '@visactor/vseed' registerArea() const areaConfig: Area = { chartType: 'area', dataset: [ { month: 'Jan', product: 'A', value: 100 }, { month: 'Jan', product: 'B', value: 80 }, { month: 'Feb', product: 'A', value: 150 }, { month: 'Feb', product: 'B', value: 120 }, { month: 'Mar', product: 'A', value: 120 }, { month: 'Mar', product: 'B', value: 140 } ], dimensions: [ { id: 'month', alias: 'Month', encoding: 'xAxis' }, { id: 'product', alias: 'Product', encoding: 'color' } ], measures: [ { id: 'value', alias: 'Sales Value', encoding: 'yAxis' } ], label: { enable: true }, legend: { enable: true, position: 'top' }, tooltip: { enable: true }, areaStyle: { fillOpacity: 0.6 }, lineStyle: { lineWidth: 2 }, sort: { orderBy: 'value', order: 'desc' } } const builder = Builder.from(areaConfig) const spec = builder.build() ``` -------------------------------- ### Style VSeed Legend Labels Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/baseConfig/chart/legend.mdx Provides an example of how to customize the appearance of legend labels in VSeed charts, including font size, color, and font weight. The 'labelFontSize' property is set to 12, with black color and bold weight. ```tsx export const BaseConfigLegendLabel = memo(() => { const vseed: VSeed = { chartType: 'columnParallel', legend: { enable: true, position: 'rt', labelFontSize: 12, labelColor: '#000', labelFontWeight: 'bold', }, dataset: [ { date: '2019', profit: 10, sales: 20 }, { date: '2020', profit: 30, sales: 60 }, { date: '2021', profit: 30, sales: 60 }, { date: '2022', profit: 50, sales: 100 }, { date: '2023', profit: 40, sales: 80 }, ], } return }) ``` -------------------------------- ### Scatter Plot with Polynomial Regression - VChartRender Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/regressionLine/polynomial.mdx This snippet shows how to configure VChartRender to display a scatter plot with polynomial regression lines. It includes data for countries, specifying measures for GDP and LifeExpectancy, and defines two polynomial regression lines of degree 2 and 3 with visible confidence intervals. ```tsx import React, { memo } from 'react'; import { VChartRender, VSeed } from '@src/vchart-render'; export const ScatterPolynomial = memo(() => { const vseed: VSeed = { chartType: 'scatter', dataset: [ { continent: 'Europe', Country: 'Greece', LifeExpectancy: 79.483, GDP: 27538.41188, Population: 10706290 }, { continent: 'Europe', Country: 'Hungary', LifeExpectancy: 73.338, GDP: 18008.94444, Population: 9956108 }, { continent: 'Europe', Country: 'Iceland', LifeExpectancy: 81.757, GDP: 36180.78919, Population: 301931 }, { continent: 'Europe', Country: 'Ireland', LifeExpectancy: 78.885, GDP: 40675.99635, Population: 4109086 }, { continent: 'Europe', Country: 'Italy', LifeExpectancy: 80.546, GDP: 28569.7197, Population: 58147733 }, { continent: 'Europe', Country: 'Montenegro', LifeExpectancy: 74.543, GDP: 9253.896111, Population: 684736 }, { continent: 'Europe', Country: 'Netherlands', LifeExpectancy: 79.762, GDP: 36797.93332, Population: 16570613 }, { continent: 'Europe', Country: 'Norway', LifeExpectancy: 80.196, GDP: 49357.19017, Population: 4627926 }, { continent: 'Europe', Country: 'Poland', LifeExpectancy: 75.563, GDP: 15389.92468, Population: 38518241 }, { continent: 'Europe', Country: 'Portugal', LifeExpectancy: 78.098, GDP: 20509.64777, Population: 10642836 }, { continent: 'Europe', Country: 'Romania', LifeExpectancy: 72.476, GDP: 10808.47561, Population: 22276056 }, { continent: 'Europe', Country: 'Serbia', LifeExpectancy: 74.002, GDP: 9786.534714, Population: 10150265 }, { continent: 'Europe', Country: 'Slovak Republic', LifeExpectancy: 74.663, GDP: 18678.31435, Population: 5447502, }, { continent: 'Europe', Country: 'Slovenia', LifeExpectancy: 77.926, GDP: 25768.25759, Population: 2009245 }, { continent: 'Europe', Country: 'Spain', LifeExpectancy: 80.941, GDP: 28821.0637, Population: 40448191 }, { continent: 'Europe', Country: 'Sweden', LifeExpectancy: 80.884, GDP: 33859.74835, Population: 9031088 }, { continent: 'Europe', Country: 'Switzerland', LifeExpectancy: 81.701, GDP: 37506.41907, Population: 7554661 }, { continent: 'Europe', Country: 'Turkey', LifeExpectancy: 71.777, GDP: 8458.276384, Population: 71158647 }, { continent: 'Europe', Country: 'United Kingdom', LifeExpectancy: 79.425, GDP: 33203.26128, Population: 60776238, }, { continent: 'Oceania', Country: 'Australia', LifeExpectancy: 81.235, GDP: 34435.36744, Population: 20434176 }, { continent: 'Oceania', Country: 'New Zealand', LifeExpectancy: 80.204, GDP: 25185.00911, Population: 4115771 }, ], measures: [ { id: 'GDP', encoding: 'xAxis' }, { id: 'LifeExpectancy', encoding: 'yAxis' }, ], polynomialRegressionLine: [ { color: 'red', text: 'Degree-2', degree: 2, confidenceIntervalVisible: true }, { color: 'green', text: 'Degree-3', degree: 3, confidenceIntervalVisible: true }, ], } return }) ``` -------------------------------- ### Build Dataset Sources with DatasetSourceBuilder (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Demonstrates how to construct dataset sources from different file formats (CSV, JSON, Excel, Parquet) using the DatasetSourceBuilder in VQuery. It takes RawDatasetSource objects with specified types and blob data as input and builds VQuery datasets. ```typescript import { DatasetSourceBuilder, RawDatasetSource } from '@visactor/vquery' // Build from CSV const csvSource: RawDatasetSource = { type: 'csv', blob: new Blob(['id,name\n1,Alice\n2,Bob'], { type: 'text/csv' }) } const csvDataset = await DatasetSourceBuilder.from(csvSource).build() // Build from JSON const jsonSource: RawDatasetSource = { type: 'json', blob: new Blob([JSON.stringify([{ id: 1, name: 'Alice' }])], { type: 'application/json' }) } const jsonDataset = await DatasetSourceBuilder.from(jsonSource).build() // Build from Excel const xlsxSource: RawDatasetSource = { type: 'xlsx', blob: await fetch('data.xlsx').then(r => r.blob()) } const xlsxDataset = await DatasetSourceBuilder.from(xlsxSource).build() // Build from Parquet const parquetSource: RawDatasetSource = { type: 'parquet', blob: await fetch('data.parquet').then(r => r.blob()) } const parquetDataset = await DatasetSourceBuilder.from(parquetSource).build() ``` -------------------------------- ### VSeed Scatter Plot with Country Data (TypeScript) Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/regressionLine/polynomial.mdx This TypeScript code defines a React component that renders a scatter plot using VSeed. It configures the chart type to 'scatter' and provides a dataset containing country-level information such as continent, life expectancy, GDP, and population. The component is memoized for performance. ```tsx export const ScatterPolynomial = memo(() => { const vseed: VSeed = { chartType: 'scatter', dataset: [ { continent: 'Americas', Country: 'Argentina', LifeExpectancy: 75.32, GDP: 12779.37964, Population: 40301927 }, { continent: 'Americas', Country: 'Brazil', LifeExpectancy: 72.39, GDP: 9065.800825, Population: 190010647 }, { continent: 'Americas', Country: 'Canada', LifeExpectancy: 80.653, GDP: 36319.23501, Population: 33390141 }, { continent: 'Americas', Country: 'Chile', LifeExpectancy: 78.553, GDP: 13171.63885, Population: 16284741 }, { continent: 'Americas', Country: 'Colombia', LifeExpectancy: 72.889, GDP: 7006.580419, Population: 44227550 }, { continent: 'Americas', Country: 'Costa Rica', LifeExpectancy: 78.782, GDP: 9645.06142, Population: 4133884 }, { continent: 'Americas', Country: 'Cuba', LifeExpectancy: 78.273, GDP: 8948.102923, Population: 11416987 }, { continent: 'Americas', Country: 'Dominican Republic', LifeExpectancy: 72.235, GDP: 6025.374752, Population: 9319622, }, { continent: 'Americas', Country: 'Ecuador', LifeExpectancy: 74.994, GDP: 6873.262326, Population: 13755680 }, { continent: 'Americas', Country: 'El Salvador', LifeExpectancy: 71.878, GDP: 5728.353514, Population: 6939688 }, { continent: 'Americas', Country: 'Guatemala', LifeExpectancy: 70.259, GDP: 5186.050003, Population: 12572928 }, { continent: 'Americas', Country: 'Honduras', LifeExpectancy: 70.198, GDP: 3548.330846, Population: 7483763 }, { continent: 'Americas', Country: 'Jamaica', LifeExpectancy: 72.567, GDP: 7320.880262, Population: 2780132 }, { continent: 'Americas', Country: 'Mexico', LifeExpectancy: 76.195, GDP: 11977.57496, Population: 108700891 }, { continent: 'Americas', Country: 'Nicaragua', LifeExpectancy: 72.899, GDP: 2749.320965, Population: 5675356 }, { continent: 'Americas', Country: 'Panama', LifeExpectancy: 75.537, GDP: 9809.185636, Population: 3242173 }, { continent: 'Americas', Country: 'Paraguay', LifeExpectancy: 71.752, GDP: 4172.838464, Population: 6667147 }, { continent: 'Americas', Country: 'Peru', LifeExpectancy: 71.421, GDP: 7408.905561, Population: 28674757 }, { continent: 'Americas', Country: 'Puerto Rico', LifeExpectancy: 78.746, GDP: 19328.70901, Population: 3942491 }, { continent: 'Americas', Country: 'Trinidad and Tobago', LifeExpectancy: 69.819, GDP: 18008.50924, Population: 1056608, }, { continent: 'Americas', Country: 'United States', LifeExpectancy: 78.242, GDP: 42951.65309, Population: 301139947, }, { continent: 'Americas', Country: 'Uruguay', LifeExpectancy: 76.384, GDP: 10611.46299, Population: 3447496 }, { continent: 'Americas', Country: 'Venezuela', LifeExpectancy: 73.747, GDP: 11415.80569, Population: 26084662 }, { continent: 'Asia', Country: 'China', LifeExpectancy: 72.961, GDP: 4959.114854, Population: 1318683096 }, { continent: 'Asia', Country: 'Hong Kong, China', LifeExpectancy: 82.208, GDP: 39724.97867, Population: 6980412 }, { continent: 'Asia', Country: 'Japan', LifeExpectancy: 82.603, GDP: 31656.06806, Population: 127467972 }, { continent: 'Asia', Country: 'Korea, Dem. Rep.', LifeExpectancy: 67.297, GDP: 1593.06548, Population: 23301725 }, { continent: 'Asia', Country: 'Korea, Rep.', LifeExpectancy: 78.623, GDP: 23348.13973, Population: 49044790 }, { continent: 'Europe', Country: 'Albania', LifeExpectancy: 76.423, GDP: 5937.029526, Population: 3600523 }, { continent: 'Europe', Country: 'Austria', LifeExpectancy: 79.829, GDP: 36126.4927, Population: 8199783 }, { continent: 'Europe', Country: 'Belgium', LifeExpectancy: 79.441, GDP: 33692.60508, Population: 10392226 }, { continent: 'Europe', Country: 'Bosnia and Herzegovina', LifeExpectancy: 74.852, GDP: 7446.298803, Population: 4552198, }, { continent: 'Europe', Country: 'Bulgaria', LifeExpectancy: 73.005, GDP: 10680.79282, Population: 7322858 }, { continent: 'Europe', Country: 'Croatia', LifeExpectancy: 75.748, GDP: 14619.22272, Population: 4493312 }, { continent: 'Europe', Country: 'Czech Republic', LifeExpectancy: 76.486, GDP: 22833.30851, Population: 10228744, }, { continent: 'Europe', Country: 'Denmark', LifeExpectancy: 78.332, GDP: 35278.41874, Population: 5468120 }, { continent: 'Europe', Country: 'Finland', LifeExpectancy: 79.313, GDP: 33207.0844, Population: 5238460 }, { continent: 'Europe', Country: 'France', LifeExpectancy: 80.657, GDP: 30470.0167, Population: 61083916 }, { continent: 'Europe', Country: 'Germany', LifeExpectancy: 79.406, GDP: 32170.37442, Population: 82400996 }, ] }; return <>{vseed && }; }); ``` -------------------------------- ### React Component for Rendering VSeed Visualizations Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/playground/vbi.mdx This React component, 'Demo', utilizes `useState` and `useEffect` hooks to manage and render VSeed visualizations. It calls the `run` function to set up the data and visualization configuration and then renders the resulting VSeed using `SimpleVSeedRender`. It also includes necessary imports for VQuery, VBI, and React. ```tsx const Demo = () => { const [vseed, setVSeed] = useState() const vquery = useRef() useEffect(() => { run(setVSeed) }, []) return vseed && } import { VQuery, QueryDSL } from '@visactor/vquery' import { VBI } from '@visactor/vbi' import { useRef, useEffect, useState } from 'react' import { useDark } from 'rspress/runtime' import VChart from '@visactor/vchart' import { ListTable, PivotTable, PivotChart, register } from '@visactor/vtable' import { registerAll, VSeed, Builder, isPivotChart, isVChart, isPivotTable, isTable, zVSeed, ColorIdEncoding, } from '@visactor/vseed' registerAll() register.chartModule('vchart', VChart) ``` -------------------------------- ### Build Chart Specification with Builder Source: https://context7.com/visactor/vseed/llms.txt The Builder class constructs visualization specifications from VSeed DSL. It processes configurations through pipelines to generate intermediate and final VChart specs. It also provides access to color mappings, pipeline information, and theme management. ```typescript import { Builder, registerAll, VSeed } from '@visactor/vseed' // Register all chart types registerAll() // Create a parallel column chart with multiple measures const vseedConfig: VSeed = { chartType: 'columnParallel', dimensions: [ { id: 'date', alias: 'Date', encoding: 'xAxis' }, { id: 'region', alias: 'Region', encoding: 'color' }, { id: 'city', alias: 'City', encoding: 'label' } ], measures: [ { id: 'profit', alias: 'Profit' }, { id: 'sales', alias: 'Sales' }, { id: 'count', alias: 'Count', encoding: 'label' } ], dataset: [ { date: '2019', region: 'east', city: 'A', profit: 10, sales: 20, count: 100 }, { date: '2019', region: 'east', city: 'B', profit: 30, sales: 60, count: 100 }, { date: '2020', region: 'west', city: 'A', profit: 35, sales: 40, count: 100 }, { date: '2021', region: 'west', city: 'B', profit: 60, sales: 65, count: 100 } ], label: { enable: true } } // Build the visualization const builder = Builder.from(vseedConfig) const advanced = builder.buildAdvanced() // Intermediate representation const spec = builder.buildSpec(advanced!) // Final VChart spec // Or build directly const directSpec = builder.build() // Access color mappings const colorIdMap = builder.getColorIdMap() const colorItems = builder.getColorItems() // Get pipeline information const advancedPipeline = Builder.getAdvancedPipeline('columnParallel') const specPipeline = Builder.getSpecPipeline('columnParallel') // Theme management const theme = Builder.getTheme('dark') const allThemes = Builder.getThemeMap() ``` -------------------------------- ### Configure Chart Themes with VSeed Builder (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Shows how to register and utilize built-in themes (dark and light) for VChart using the VSeed Builder. This allows for quick application of pre-defined visual styles to charts, affecting elements like background and color schemes. ```typescript import { Builder, registerDarkTheme, registerLightTheme } from '@visactor/vseed' registerDarkTheme() registerLightTheme() // Use built-in theme const darkChart = Builder.from({ chartType: 'area', theme: 'dark', dataset: [ { month: 'Jan', value: 100 }, { month: 'Feb', value: 150 } ], dimensions: [{ id: 'month', encoding: 'xAxis' }], measures: [{ id: 'value', encoding: 'yAxis' }], backgroundColor: '#1a1a1a', color: { colorScheme: ['#4fc3f7', '#ba68c8', '#f06292'] } }) const spec = darkChart.build() ``` -------------------------------- ### Query Data with VQuery (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Provides SQL-based data querying in the browser using DuckDB and supports IndexedDB persistence. It allows for creating datasets from various sources like CSV, connecting to them, and performing queries using a type-safe DSL or raw SQL. The API includes methods for dataset creation, connection management, querying, and cleanup. ```typescript import { VQuery, DatasetColumn } from '@visactor/vquery' // Initialize VQuery const vquery = new VQuery() // Define dataset schema const columns: DatasetColumn[] = [ { name: 'date', type: 'string' }, { name: 'profit', type: 'number' }, { name: 'sales', type: 'number' } ] // Create dataset from CSV const csvBlob = new Blob(['date,profit,sales\n2019,100,200\n2020,150,250'], { type: 'text/csv' }) await vquery.createDataset('sales_data', columns, { type: 'csv', blob: csvBlob }) // Connect to dataset const dataset = await vquery.connectDataset('sales_data') // Query using DSL const result = await dataset.query({ select: ['date', 'profit', 'sales'], where: { profit: { $gt: 100 } }, orderBy: [{ column: 'profit', order: 'desc' }], limit: 10 }) console.log(result.data) // Query results console.log(result.performance) // Query timing // Raw SQL query const sqlResult = await dataset.queryBySQL( 'SELECT date, SUM(profit) as total FROM sales_data GROUP BY date' ) // Cleanup await dataset.disconnect() await vquery.close() ``` -------------------------------- ### Configure Thousand Separator in VSeed Chart (TypeScript/JSX) Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/dataConfig/numFormat.mdx This snippet demonstrates how to configure the `thousandSeparator` option within VSeed's `format` object for measures. It allows specifying whether to use thousand separators for 'percent', 'permille', or 'number' data types. The example includes validation using `zVSeed` and rendering with `SimpleVSeedRender`. Dependencies include `@visactor/vchart`, `@visactor/vtable`, and `@visactor/vseed`. ```tsx const Demo = () => { const vseed: VSeed = { chartType: 'column', dataset: [ { profit: 12344567, sales: 12344567, count: 12344567, }, ], measures: [ { id: 'profit', format: { type: 'percent', thousandSeparator: true } }, { id: 'sales', format: { type: 'permille', thousandSeparator: false } }, { id: 'count', format: { type: 'number', thousandSeparator: true } }, ], } if (zVSeed.safeParse(vseed).success) { console.log('zVSeed parse success!!!') } else { console.error('zVSeed parse error!!!') } return } import { useRef, useEffect, useState } from 'react' import { useDark } from 'rspress/runtime' import VChart, { ISpec } from '@visactor/vchart' import { ListTable, ListTableConstructorOptions, PivotChart, PivotChartConstructorOptions, register, } from '@visactor/vtable' import { registerAll, VSeed, Builder, isPivotChart, isVChart, isVTable, zVSeed, Locale } from '@visactor/vseed' registerAll() register.chartModule('vchart', VChart) const SimpleVSeedRender = (props: { vseed: VSeed }) => { const { vseed } = props const ref = useRef(null) const builderRef = useRef(Builder.from({ chartType: 'line', dataset: [] })) const dark = useDark() useEffect(() => { if (!ref.current) { return } const theme = dark ? 'dark' : 'light' const builder = Builder.from({ ...vseed, theme }) const spec = builder.build() builderRef.current = builder if (isPivotChart(vseed)) { const tableInstance = new PivotChart(ref.current, spec as PivotChartConstructorOptions) return () => tableInstance.release() } else if (isVChart(vseed)) { const vchart = new VChart(spec as ISpec, { dom: ref.current }) vchart.renderSync() return () => vchart.release() } else if (isVTable(vseed)) { const tableInstance = new ListTable(ref.current, spec as ListTableConstructorOptions) return () => tableInstance.release() } }, [vseed, dark]) return (
{ console.group(`selected ${vseed.chartType}`) console.log('builder', builderRef.current) console.log('spec', builderRef.current?.spec) console.log('vseed', builderRef.current?.vseed) console.log('advancedVSeed', builderRef.current?.advancedVSeed) console.groupEnd() }} >
) } export default Demo ``` -------------------------------- ### Register All Chart Types with Builder Source: https://context7.com/visactor/vseed/llms.txt The `registerAll` function is essential for making all available chart types and themes accessible to the Builder. It must be called before initializing any Builder instances to ensure full functionality. ```typescript import { registerAll, Builder } from '@visactor/vseed' // Register all chart types (required) registerAll() // Now you can use any chart type const lineChart = Builder.from({ chartType: 'line', dataset: [ { month: 'Jan', value: 100 }, { month: 'Feb', value: 150 }, { month: 'Mar', value: 120 } ], dimensions: [{ id: 'month', alias: 'Month', encoding: 'xAxis' }], measures: [{ id: 'value', alias: 'Value', encoding: 'yAxis' }] }) const spec = lineChart.build() ``` -------------------------------- ### Column Percent Chart Configuration Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/chartType/columnPercent.mdx Defines the configuration for a basic Column Percent Chart. It requires a chart type and a dataset. The dataset contains numerical values for different categories over time. ```json { "chartType": "columnPercent", "dataset": [ { "date": "2019", "profit": 10, "sales": 20 }, { "date": "2020", "profit": 30, "sales": 60 }, { "date": "2021", "profit": 30, "sales": 60 }, { "date": "2022", "profit": 50, "sales": 100 }, { "date": "2023", "profit": 40, "sales": 80 } ] } ``` -------------------------------- ### Basic Line Chart Configuration (JSON) Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/chartType/line.mdx This JSON configuration defines a basic line chart. It specifies the chart type and the dataset, which includes date and corresponding profit and sales values. This is suitable for simple time-series data visualization. ```json { "chartType": "line", "dataset": [ { "date": "2019", "profit": 10, "sales": 20 }, { "date": "2020", "profit": 30, "sales": 60 }, { "date": "2021", "profit": 30, "sales": 60 }, { "date": "2022", "profit": 50, "sales": 100 }, { "date": "2023", "profit": 40, "sales": 80 } ] } ``` -------------------------------- ### Log VSeed Builder Properties Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/playground/vquery.mdx Logs the current state of the VSeed builder, including its spec, vseed data, and advancedVSeed configuration to the console. This is useful for debugging and inspecting the builder's internal state. ```javascript console.log('builder', builderRef.current) console.log('spec', builderRef.current.spec) console.log('vseed', builderRef.current.vseed) console.log('advancedVSeed', builderRef.current.advancedVSeed) console.groupEnd() ``` -------------------------------- ### Import ScatterLinear Component Source: https://github.com/visactor/vseed/blob/main/apps/website/docs/zh-CN/galley/regressionLine/linear.mdx Demonstrates how to import the ScatterLinear component from the @components library. This component is likely used for creating scatter plot visualizations with linear scaling. ```typescript import { ScatterLinear } from '@components' ``` -------------------------------- ### Convert Query DSL to SQL (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Converts type-safe query DSL objects into SQL strings, specifically designed for DuckDB execution. This utility enhances type safety and simplifies query construction by abstracting the SQL syntax. It supports various clauses like select, where, groupBy, orderBy, and limit, and can be used with generic types for schema definition. ```typescript import { convertDSLToSQL } from '@visactor/vquery' interface Order { id: number name: string age: number department: string active: number } // Simple grouping query const sql = convertDSLToSQL( { select: ['id', 'department'], groupBy: ['id', 'department'], limit: 100 }, 'orders' ) // Result: 'select "id", "department" from "orders" group by "id", "department" limit 100' // Complex query with filtering and ordering const complexSql = convertDSLToSQL( { select: ['department', { func: 'count', column: 'id', as: 'total' }], where: { active: { $eq: 1 } }, groupBy: ['department'], orderBy: [{ column: 'total', order: 'desc' }], limit: 50 }, 'orders' ) ``` -------------------------------- ### Build Business Intelligence Dashboards with VBIBuilder (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Facilitates the creation of Visual Business Intelligence applications through a collaborative chart-building interface. It leverages Yjs CRDT for real-time collaboration and abstracts data connectors. The API offers a fluent interface for defining chart types, measures, dimensions, and themes, and can generate VQuery and VSeed DSLs for data fetching and processing. ```typescript import { VBI, VBIDSL } from '@visactor/vbi' // Create VBI builder from empty DSL const dsl: VBIDSL = { connectorId: 'my-database', chartType: 'table', measures: [], dimensions: [], theme: 'light', locale: 'zh-CN', version: 0 } const builder = VBI.from(dsl) // Add measures with fluent API builder.measures.addMeasure('sales', (node) => { node .setAlias('Max Sales') .setAggregate({ func: 'max' }) .setEncoding('yAxis') }) builder.measures.addMeasure('profit', (node) => { node .setAlias('Total Profit') .setAggregate({ func: 'sum' }) .setEncoding('yAxis') }) // Add dimensions builder.dimensions.addDimension('area', (node) => { node.setAlias('Area').setEncoding('xAxis') }) builder.dimensions.addDimension('year', (node) => { node.setAlias('Year').setEncoding('color') }) // Build final DSL const finalDSL = builder.build() // Build VQuery DSL for data fetching const queryDSL = builder.buildVQuery() // Register connector VBI.registerConnector('my-database', async () => { return { discoverSchema: async () => ({ /* schema */ }), query: async ({ queryDSL, schema, connectorId }) => { // Execute query and return dataset return { dataset: [/* results */] } } } }) // Build VSeed DSL with data const vseedDSL = await builder.buildVSeed() ``` -------------------------------- ### Configure Internationalization (i18n) with VSeed (TypeScript) Source: https://context7.com/visactor/vseed/llms.txt Explains how to manage chart localization using the `intl` module in VSeed. It covers setting the global locale and also configuring locale settings on a per-chart basis, allowing for charts to display labels and text in different languages. ```typescript import { Builder, intl } from '@visactor/vseed' // Set global locale intl.setLocale('en-US') // Or set per-chart locale const chart = Builder.from({ chartType: 'column', locale: 'zh-CN', dataset: [ { category: '产品A', value: 100 }, { category: '产品B', value: 150 } ], dimensions: [ { id: 'category', alias: '产品类别', encoding: 'xAxis' } ], measures: [ { id: 'value', alias: '销售额', encoding: 'yAxis' } ] }) const spec = chart.build() ```