#chart
This page showcases chart builder examples.
#ChartType
| Example | Description | Label |
|---|---|---|
| area-by-order-date | Area Chart - Sales trend by date | - |
| bar-by-product-type | Bar Chart - Sales by product type | - |
| chart-type-switching | Switch between line and bar chart types | - |
| column-by-area | Column Chart - Sales by region | - |
| donut-by-customer-type | Donut Chart - Sales share by customer type | - |
| line-by-province | Line Chart - Sales trend by province | - |
| line-chart | Line Chart - Sales trend by province | - |
| pie-by-area | Pie Chart - Sales share by region | - |
| pie-chart-measure-encoding | Pie Chart Measure Encoding - Test measure-encoding.ts Pie chart type | - |
| rose-by-city | Rose Chart - Sales by city | - |
| scatter-chart-measure-encoding | Scatter Chart Measure Encoding - Test measure-encoding.ts Scatter chart type | - |
| scatter-sales-profit | Scatter Chart - Relationship between Sales and Profit | - |
#Dimensions
| Example | Description | Label |
|---|---|---|
| add-date-dimension-year | Add date dimension with yearly aggregation | - |
| add-dimension | Add dimension | - |
| add-multiple-dimensions | Add multiple dimensions (chained calls) | - |
| mixed-date-and-normal-dimensions | Mixed grouping with regular dimension and quarterly-aggregated date dimension | - |
| remove-dimension | Remove dimension | - |
| update-date-dimension-month | Update existing date dimension to monthly aggregation | - |
| update-dimension | Update dimension | - |
#HavingFilter
| Example | Description | Label |
|---|---|---|
| add-having-filter | Filter high-performing regions with sales over 1M after grouping by region | - |
| add-multiple-having-filter | Chain multiple Having conditions to filter regions with high sales and high profit | - |
| clear-having-filter | Clear all Having filter conditions to display full grouped aggregation results | - |
| having-array-value-with-in-operator | Having filter with array value that triggers 'in' operator conversion | - |
| having-array-value-with-not-in-operator | Having filter with array value that triggers 'not in' operator conversion | - |
| having-clear-and-rebuild | Clear existing having conditions and rebuild new group filters, simulating user resetting the filter panel and reconfiguring | - |
| having-deeply-nested-groups | Three-level nested grouping: OR(AND(Sales > 500K, Profit > 50K), AND(Quantity > 100, Avg Discount < 0.3)), simulating complex business filtering | - |
| having-empty-dsl-compose-target | Starting from an empty DSL, use builder to assemble where/having/measures/dimensions, including having conditions combining sum and countDistinct aggregations | - |
| having-field-not-in-measures-and-dimensions | Initialize empty DSL, only add dimension area and measure sales via builder, and use the profit field (SUM(profit) > 100000) in having that does not appear in measures/dimensions | - |
| having-find-and-update | Add having conditions first, then use find to locate and dynamically update thresholds and operators, simulating interactive user filter adjustment | - |
| having-group-add-to-existing | Append new conditions to an existing having group, simulating a user progressively refining filter rules | - |
| having-group-remove-condition | Remove a specific condition from an existing having group, simulating a user canceling a filter | - |
| having-mix-filters-and-groups | Mix standalone filter conditions with OR groups: Sales > 500K AND (Profit > 100K OR Quantity >= 30) | - |
| having-multi-dimension-aggregate | Group by two dimensions (category and region), filter combinations where avg discount < 20% and total sales > 100K, analyzing high-value low-discount business | - |
| having-nested-groups | Nested grouping: AND(Sales > 1M, OR(Profit > 200K, Quantity >= 50)) | - |
| having-or-group | Use OR grouping to filter regions with high sales or high profit | - |
| having-scatter-profit-analysis | Scatter chart analysis: Group by category to filter categories with high profit rate and transaction count > 20, identifying high-quality business | - |
| having-update-group-operator | Update the logical operator of an existing Having group from AND to OR | - |
| having-with-where-combined | Combined where and having filtering: first filter office products category with where, then filter provinces with sales > 50K or profit > 10K with having | - |
| remove-having-filter | Remove redundant Having filter conditions, keeping only the profit filter | - |
#Locale
| Example | Description | Label |
|---|---|---|
| en-US-locale | English locale test | - |
| zh-CN-locale | Chinese locale test | - |
#Measures
| Example | Description | Label |
|---|---|---|
| add-measure | Add a measure | - |
| add-measure-encoding | Add a measure and set encoding | - |
| measure-with-custom-and-auto-format | Measure formatting: sales uses a custom ten-thousand-unit format (¥ prefix, two decimals), profit margin uses automatic formatting, and discount uses percentage formatting | - |
| remove-measure | Remove a measure | - |
| update-measure | Update a measure | - |
#Theme
| Example | Description | Label |
|---|---|---|
| dark-theme | Dark theme chart | - |
| light-theme | Light theme chart | - |
#UndoManager
| Example | Description | Label |
|---|---|---|
| undo-redo | Undo/redo behavior test | - |
#WhereFilter
| Example | Description | Label |
|---|---|---|
| between-sales-range-analysis | Sales range analysis: use between to filter individual orders from 1000 to 10000 and summarize profit by category | - |
| clear-and-rebuild-filters | Clear and rebuild filters: clear old simple filters and rebuild complex grouped conditions | - |
| date-filter-period-and-range-combo | Date range combined filter: use period to filter 2024 Q1 data, while range limits the profit interval, then cross-analyze by category and shipping mode | - |
| date-filter-relative-with-nested-conditions | Date filter with nested conditions: filter high-value orders from Consumer or Corporate customers in the last 30 days and summarize sales and profit by province | - |
| deeply-nested-or-and-groups | Multi-level nested grouping: high-value Same Day orders from Consumer customers or First Class orders from Corporate customers, using three levels of AND/OR nesting | - |
| high-discount-tech-profit-analysis | High-discount Technology product profit analysis: filter Technology category orders with discount greater than 0.5 and compare profit by region | - |
| in-operator-multi-area-delivery | Multi-region delivery efficiency comparison: use in to filter East China, North China, and Central South, then count orders by shipping mode | - |
| nested-group-region-product-filter | Office Supplies or Furniture sales in East China: use nested grouping with AND connecting the region condition and OR category conditions | - |
| not-between-sales-range | Not between filter: exclude sales between 1000 and 10000 | - |
| not-between-with-explicit-operators | Not between filter with explicit leftOp/rightOp to test invert functions | - |
| office-supplies-sales-by-province | Office Supplies sales ranking by province: filter the Office Supplies category and summarize sales by province | - |
| or-group-product-category-comparison | Office Supplies versus Technology category comparison: use an OR group to filter two categories and compare sales by region | - |
| remove-condition-from-group | Remove a condition from a group: the preset OR group contains three categories, and updateGroup removes one of them | - |
| remove-filter-by-index | Remove a filter by index: remove the first category filter and keep only the region condition | - |
| update-filter-switch-province | Dynamically modify a filter: update the province filter from Zhejiang to Guangdong and observe sales changes | - |
| update-group-or-to-and | Modify group logic: switch the preset OR category group to AND to narrow the filter scope | - |
| where-filter-array-value-converts-to-in | Where filter with array value using '=' operator should convert to 'in' | - |
| where-filter-array-value-converts-to-not-in | Where filter with array value using '!=' operator should convert to 'not in' | - |