Compare commits

..

3 Commits

Author SHA1 Message Date
Elizabeth Thompson
51cda4cb4f update contstraint logic and test 2025-04-10 13:29:29 -07:00
Elizabeth Thompson
3162bb3f59 fix typing on python 3.10 2025-04-09 18:02:04 -07:00
Elizabeth Thompson
b7de9ab17f use create table util 2025-04-09 16:58:49 -07:00
296 changed files with 28276 additions and 58591 deletions

5
.github/labeler.yml vendored
View File

@@ -127,11 +127,6 @@
- any-glob-to-any-file:
- 'superset/translations/es/**'
"i18n:persian":
- changed-files:
- any-glob-to-any-file:
- 'superset/translations/fa/**'
############################################
# Sub-projects and monorepo packages
############################################

View File

@@ -17,12 +17,13 @@ jobs:
check-python-deps:
runs-on: ubuntu-22.04
steps:
- name: "Checkout ${{ github.ref }} ( ${{ github.sha }} )"
uses: actions/checkout@v4
with:
persist-credentials: false
submodules: recursive
fetch-depth: 1
depth: 1
- name: Setup Python
if: steps.check.outputs.python

View File

@@ -50,8 +50,8 @@ jobs:
PYTHONPATH: ${{ github.workspace }}
REDIS_PORT: 16379
GITHUB_TOKEN: ${{ github.token }}
# Only use dashboard when explicitly requested via workflow_dispatch
USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true' || 'false' }}
# use the dashboard feature when running manually OR merging to master
USE_DASHBOARD: ${{ github.event.inputs.use_dashboard == 'true'|| (github.ref == 'refs/heads/master' && 'true') || 'false' }}
services:
postgres:
image: postgres:16-alpine

View File

@@ -44,7 +44,7 @@ jobs:
SUPERSET_TESTENV: true
SUPERSET_SECRET_KEY: not-a-secret
run: |
pytest --durations-min=0.5 --cov-report= --cov=superset ./tests/common ./tests/unit_tests --cache-clear --maxfail=50
pytest --durations-min=0.5 --cov-report= --cov=superset ./tests/common ./tests/unit_tests --cache-clear
- name: Upload code coverage
uses: codecov/codecov-action@v5
with:

View File

@@ -101,7 +101,6 @@ Join our growing community!
- [ELMO Cloud HR & Payroll](https://elmosoftware.com.au/)
- [Endress+Hauser](https://www.endress.com/) [@rumbin]
- [FBK - ICT center](https://ict.fbk.eu)
- [Formbricks](https://formbricks.com)
- [Gavagai](https://gavagai.io) [@gavagai-corp]
- [GfK Data Lab](https://www.gfk.com/home) [@mherr]
- [Hydrolix](https://www.hydrolix.io/)
@@ -217,7 +216,6 @@ Join our growing community!
- [Increff](https://www.increff.com/) [@ishansinghania]
- [komoot](https://www.komoot.com/) [@christophlingg]
- [Let's Roam](https://www.letsroam.com/)
- [Machrent SA](https://www.machrent.com/)
- [Onebeat](https://1beat.com/) [@GuyAttia]
- [X](https://x.com/)
- [VLMedia](https://www.vlmedia.com.tr/) [@ibotheperfect]

View File

@@ -23,8 +23,7 @@ This file documents any backwards-incompatible changes in Superset and
assists people when migrating to a new version.
## Next
- [33116](https://github.com/apache/superset/pull/33116) In Echarts Series charts (e.g. Line, Area, Bar, etc.) charts, the `x_axis_sort_series` and `x_axis_sort_series_ascending` form data items have been renamed with `x_axis_sort` and `x_axis_sort_asc`.
There's a migration added that can potentially affect a significant number of existing charts.
- [32317](https://github.com/apache/superset/pull/32317) The horizontal filter bar feature is now out of testing/beta development and its feature flag `HORIZONTAL_FILTER_BAR` has been removed.
- [31976](https://github.com/apache/superset/pull/31976) Removed the `DISABLE_LEGACY_DATASOURCE_EDITOR` feature flag. The previous value of the feature flag was `True` and now the feature is permanently removed.
- [31959](https://github.com/apache/superset/pull/32000) Removes CSV_UPLOAD_MAX_SIZE config, use your web server to control file upload size.

View File

@@ -50,11 +50,7 @@ fi
#
if [ -f "${REQUIREMENTS_LOCAL}" ]; then
echo "Installing local overrides at ${REQUIREMENTS_LOCAL}"
if command -v uv > /dev/null 2>&1; then
uv pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
else
pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
fi
uv pip install --no-cache-dir -r "${REQUIREMENTS_LOCAL}"
else
echo "Skipping local overrides"
fi

View File

@@ -86,7 +86,6 @@
"Israel",
"Italy",
"Italy (regions)",
"Ivory Coast",
"Japan",
"Jordan",
"Kazakhstan",
@@ -144,7 +143,6 @@
"Poland",
"Portugal",
"Qatar",
"Republic Of Serbia",
"Romania",
"Russia",
"Rwanda",

View File

@@ -302,15 +302,6 @@ AUTH_USER_REGISTRATION = True
AUTH_USER_REGISTRATION_ROLE = "Public"
```
In case you want to assign the `Admin` role on new user registration, it can be assigned as follows:
```python
AUTH_USER_REGISTRATION_ROLE = "Admin"
```
If you encounter the [issue](https://github.com/apache/superset/issues/13243) of not being able to list users from the Superset main page settings, although a newly registered user has an `Admin` role, please re-run `superset init` to sync the required permissions. Below is the command to re-run `superset init` using docker compose.
```
docker-compose exec superset superset init
```
Then, create a `CustomSsoSecurityManager` that extends `SupersetSecurityManager` and overrides
`oauth_user_info`:

View File

@@ -1293,13 +1293,6 @@ The connection string for SQL Server looks like this:
mssql+pyodbc:///?odbc_connect=Driver%3D%7BODBC+Driver+17+for+SQL+Server%7D%3BServer%3Dtcp%3A%3Cmy_server%3E%2C1433%3BDatabase%3Dmy_database%3BUid%3Dmy_user_name%3BPwd%3Dmy_password%3BEncrypt%3Dyes%3BConnection+Timeout%3D30
```
:::note
You might have noticed that some special charecters are used in the above connection string. For example see the `odbc_connect` parameter. The value is `Driver%3D%7BODBC+Driver+17+for+SQL+Server%7D%3B` which is a URL-encoded form of `Driver={ODBC+Driver+17+for+SQL+Server};`. It's important to give the connection string is URL encoded.
For more information about this check the [sqlalchemy documentation](https://docs.sqlalchemy.org/en/20/core/engines.html#escaping-special-characters-such-as-signs-in-passwords). Which says `When constructing a fully formed URL string to pass to create_engine(), special characters such as those that may be used in the user and password need to be URL encoded to be parsed correctly. This includes the @ sign.`
:::
#### StarRocks
The [sqlalchemy-starrocks](https://pypi.org/project/starrocks/) library is the recommended

View File

@@ -4,95 +4,9 @@ version: 1
---
import InteractiveSVG from '../../src/components/InteractiveERDSVG';
import Mermaid from '@theme/Mermaid';
# Resources
## High Level Architecture
<div style={{ maxWidth: "600px", margin: "0 auto", marginLeft: 0, marginRight: "auto" }}>
```mermaid
flowchart TD
%% Top Level
LB["<b>Load Balancer(s)</b><br/>(optional)"]
LB -.-> WebServers
%% Web Servers
subgraph WebServers ["<b>Web Server(s)</b>"]
WS1["<b>Frontend</b><br/>(React, AntD, ECharts, AGGrid)"]
WS2["<b>Backend</b><br/>(Python, Flask, SQLAlchemy, Pandas, ...)"]
end
%% Infra
subgraph InfraServices ["<b>Infra</b>"]
DB[("<b>Metadata Database</b><br/>(Postgres / MySQL)")]
subgraph Caching ["<b>Caching Subservices<br/></b>(Redis, memcache, S3, ...)"]
direction LR
DummySpace[" "]:::invisible
QueryCache["<b>Query Results Cache</b><br/>(Accelerated Dashboards)"]
CsvCache["<b>CSV Exports Cache</b>"]
ThumbnailCache["<b>Thumbnails Cache</b>"]
AlertImageCache["<b>Alert/Report Images Cache</b>"]
QueryCache -- " " --> CsvCache
linkStyle 1 stroke:transparent;
ThumbnailCache -- " " --> AlertImageCache
linkStyle 2 stroke:transparent;
end
Broker(("<b>Message Queue</b><br/>(Redis / RabbitMQ / SQS)"))
end
AsyncBackend["<b>Async Workers (Celery)</b><br>required for Alerts & Reports, thumbnails, CSV exports, long-running workloads, ..."]
%% External DBs
subgraph ExternalDatabases ["<b>Analytics Databases</b>"]
direction LR
BigQuery[(BigQuery)]
Snowflake[(Snowflake)]
Redshift[(Redshift)]
Postgres[(Postgres)]
Postgres[(... any ...)]
end
%% Connections
LB -.-> WebServers
WebServers --> DB
WebServers -.-> Caching
WebServers -.-> Broker
WebServers -.-> ExternalDatabases
Broker -.-> AsyncBackend
AsyncBackend -.-> ExternalDatabases
AsyncBackend -.-> Caching
%% Legend styling
classDef requiredNode stroke-width:2px,stroke:black;
class Required requiredNode;
class Optional optionalNode;
%% Hide real arrow
linkStyle 0 stroke:transparent;
%% Styling
classDef optionalNode stroke-dasharray: 5 5, opacity:0.9;
class LB optionalNode;
class Caching optionalNode;
class AsyncBackend optionalNode;
class Broker optionalNode;
class QueryCache optionalNode;
class CsvCache optionalNode;
class ThumbnailCache optionalNode;
class AlertImageCache optionalNode;
class Celery optionalNode;
classDef invisible fill:transparent,stroke:transparent;
```
</div>
## Entity-Relationship Diagram
Here is our interactive ERD:

View File

@@ -1,7 +1,7 @@
---
title: Docker Builds
hide_title: true
sidebar_position: 7
sidebar_position: 6
version: 1
---
@@ -44,7 +44,7 @@ Here are the build presets that are exposed through the `supersetbot docker` uti
- `py311`, e.g., Py311: Similar to lean but with a different Python version (in this example, 3.11).
- `ci`: For certain CI workloads.
- `websocket`: For Superset clusters supporting advanced features.
- `dockerize`: Used by Helm in initContainers to wait for database dependencies to be available.
- `dockerize`: Used by Helm.
## Key tags examples

View File

@@ -1,7 +1,7 @@
---
title: Docker Compose
hide_title: true
sidebar_position: 5
sidebar_position: 4
version: 1
---

View File

@@ -1,58 +0,0 @@
---
title: Installation Methods
hide_title: true
sidebar_position: 2
version: 1
---
import useBaseUrl from "@docusaurus/useBaseUrl";
# Installation Methods
How should you install Superset? Here's a comparison of the different options. It will help if you've first read the [Architecture](/docs/installation/architecture.mdx) page to understand Superset's different components.
The fundamental trade-off is between you needing to do more of the detail work yourself vs. using a more complex deployment route that handles those details.
## [Docker Compose](/docs/installation/docker-compose.mdx)
**Summary:** This takes advantage of containerization while remaining simpler than Kubernetes. This is the best way to try out Superset; it's also useful for developing & contributing back to Superset.
If you're not just demoing the software, you'll need a moderate understanding of Docker to customize your deployment and avoid a few risks. Even when fully-optimized this is not as robust a method as Kubernetes when it comes to large-scale production deployments.
You manage a superset-config.py file and a docker-compose.yml file. Docker Compose brings up all the needed services - the Superset application, a Postgres metadata DB, Redis cache, Celery worker and beat. They are automatically connected to each other.
**Responsibilities**
You will need to back up your metadata DB. That could mean backing up the service running as a Docker container and its volume; ideally you are running Postgres as a service outside of that container and backing up that service.
You will also need to extend the Superset docker image. The default `lean` images do not contain drivers needed to access your metadata database (Postgres or MySQL), nor to access your data warehouse, nor the headless browser needed for Alerts & Reports. You could run a `-dev` image while demoing Superset, which has some of this, but you'll still need to install the driver for your data warehouse. The `-dev` images run as root, which is not recommended for production.
Ideally you will build your own image of Superset that extends `lean`, adding what your deployment needs.
See [Docker Build Presets](/docs/installation/docker-builds/#build-presets) for more information about the different image versions you can extend.
## [Kubernetes (K8s)](/docs/installation/kubernetes.mdx)
**Summary:** This is the best-practice way to deploy a production instance of Superset, but has the steepest skill requirement - someone who knows Kubernetes.
You will deploy Superset into a K8s cluster. The most common method is using the community-maintained Helm chart, though work is now underway to implement [SIP-149 - a Kubernetes Operator for Superset](https://github.com/apache/superset/issues/31408).
A K8s deployment can scale up and down based on usage and deploy rolling updates with zero downtime - features that big deployments appreciate.
**Responsibilities**
You will need to build your own Docker image, and back up your metadata DB, both as described in Docker Compose above. You'll also need to customize your Helm chart values and deploy and maintain your Kubernetes cluster.
## [PyPI (Python)](/docs/installation/pypi.mdx)
**Summary:** This is the only method that requires no knowledge of containers. It requires the most hands-on work to deploy, connect, and maintain each component.
You install Superset as a Python package and run it that way, providing your own metadata database. Superset has documentation on how to install this way, but it is updated infrequently.
If you want caching, you'll set up Redis or RabbitMQ. If you want Alerts & Reports, you'll set up Celery.
**Responsibilities**
You will need to get the component services running and communicating with each other. You'll need to arrange backups of your metadata database.
When upgrading, you'll need to manage the system environment and packages and ensure all components have functional dependencies.

View File

@@ -1,7 +1,7 @@
---
title: Kubernetes
hide_title: true
sidebar_position: 3
sidebar_position: 2
version: 1
---

View File

@@ -1,7 +1,7 @@
---
title: PyPI
hide_title: true
sidebar_position: 4
sidebar_position: 3
version: 1
---

View File

@@ -1,7 +1,7 @@
---
title: Upgrading Superset
hide_title: true
sidebar_position: 6
sidebar_position: 5
version: 1
---

View File

@@ -32,7 +32,7 @@ git clone https://github.com/apache/superset
$ cd superset
# Set the repo to the state associated with the latest official version
$ git checkout tags/4.1.2
$ git checkout tags/4.1.1
# Fire up Superset using Docker Compose
$ docker compose -f docker-compose-image-tag.yml up

View File

@@ -64,26 +64,6 @@ tables in the **Permissions** dropdown. To select the data sources you want to a
You can then confirm with users assigned to the **Gamma** role that they see the
objects (dashboards and slices) associated with the tables you just extended them.
### SQL Execution Security Considerations
Apache Superset includes features designed to provide safeguards when interacting with connected databases, such as the `DISALLOWED_SQL_FUNCTIONS` configuration setting. This aims to prevent the execution of potentially harmful database functions or system variables directly from Superset interfaces like SQL Lab.
However, it is crucial to understand the following:
**Superset is Not a Database Firewall**: Superset's built-in checks, like `DISALLOWED_SQL_FUNCTIONS`, provide a layer of protection but cannot guarantee complete security against all database-level threats or advanced bypass techniques (like specific comment injection methods). They should be viewed as a supplement to, not a replacement for, robust database security.
**Configuration is Key**: The effectiveness of Superset's safeguards heavily depends on proper configuration by the Superset administrator. This includes maintaining the `DISALLOWED_SQL_FUNCTIONS` list, carefully managing feature flags (like `ENABLE_TEMPLATE_PROCESSING`), and configuring other security settings appropriately.
**Database Security is Paramount**: The ultimate responsibility for securing database access, controlling permissions, and preventing unauthorized function execution lies with the database administrators (DBAs) and security teams managing the underlying database instance.
**Recommended Database Practices**: We strongly recommend implementing security best practices at the database level, including:
* **Least Privilege**: Connecting Superset using dedicated database user accounts with the minimum permissions required for Superset's operation (typically read-only access to necessary schemas/tables).
* **Database Roles & Permissions**: Utilizing database-native roles and permissions to restrict access to sensitive functions, system variables (like `@@hostname`), schemas, or tables.
* **Network Security**: Employing network-level controls like database firewalls or proxies to restrict connections.
* **Auditing**: Enabling database-level auditing to monitor executed queries and access patterns.
By combining Superset's configurable safeguards with strong database-level security practices, you can achieve a more robust and layered security posture.
### REST API for user & role management
Flask-AppBuilder supports a REST API for user CRUD,

View File

@@ -31,13 +31,10 @@ const config: Config = {
baseUrl: '/',
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'throw',
markdown: {
mermaid: true,
},
favicon: '/img/favicon.ico',
organizationName: 'apache',
projectName: 'superset',
themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'],
themes: ['@saucelabs/theme-github-codeblock'],
plugins: [
[
'docusaurus-plugin-less',

View File

@@ -19,23 +19,22 @@
},
"dependencies": {
"@ant-design/icons": "^5.5.2",
"@docusaurus/core": "3.7.0",
"@docusaurus/plugin-client-redirects": "3.7.0",
"@docusaurus/preset-classic": "3.7.0",
"@docusaurus/theme-mermaid": "3.7.0",
"@docusaurus/core": "^3.5.2",
"@docusaurus/plugin-client-redirects": "^3.5.2",
"@docusaurus/preset-classic": "^3.5.2",
"@emotion/styled": "^10.0.27",
"@saucelabs/theme-github-codeblock": "^0.3.0",
"@superset-ui/style": "^0.14.23",
"antd": "^5.24.9",
"antd": "^5.24.5",
"docusaurus-plugin-less": "^2.0.2",
"less": "^4.3.0",
"less": "^4.2.2",
"less-loader": "^11.0.0",
"prism-react-renderer": "^2.4.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-github-btn": "^1.4.0",
"react-svg-pan-zoom": "^3.13.1",
"swagger-ui-react": "^5.21.0"
"swagger-ui-react": "^5.20.2"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "^3.7.0",
@@ -44,12 +43,12 @@
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
"eslint": "^8.0.0",
"eslint-config-prettier": "^10.1.2",
"eslint-config-prettier": "^10.1.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react": "^7.0.0",
"prettier": "^2.0.0",
"typescript": "~5.8.3",
"webpack": "^5.99.7"
"typescript": "~5.8.2",
"webpack": "^5.98.0"
},
"browserslist": {
"production": [

View File

@@ -111,7 +111,7 @@ const StyledTitleContainer = styled('div')`
}
`;
const StyledButton = styled(Link as React.ComponentType<any>)`
const StyledButton = styled(Link)`
border-radius: 10px;
font-size: 20px;
font-weight: bold;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -44,7 +44,7 @@ dependencies = [
"cryptography>=42.0.4, <45.0.0",
"deprecation>=2.1.0, <2.2.0",
"flask>=2.2.5, <3.0.0",
"flask-appbuilder>=4.6.3, <5.0.0",
"flask-appbuilder>=4.6.1, <5.0.0",
"flask-caching>=2.1.0, <3",
"flask-compress>=1.13, <2.0",
"flask-talisman>=1.0.0, <2.0",
@@ -81,7 +81,7 @@ dependencies = [
"python-dateutil",
"python-dotenv", # optional dependencies for Flask but required for Superset, see https://flask.palletsprojects.com/en/stable/installation/#optional-dependencies
"python-geohash",
"pyarrow>=18.1.0, <19",
"pyarrow>=14.0.1, <15",
"pyyaml>=6.0.0, <7.0.0",
"PyJWT>=2.4.0, <3.0",
"redis>=4.6.0, <5.0",
@@ -125,7 +125,7 @@ denodo = ["denodo-sqlalchemy~=1.0.6"]
dremio = ["sqlalchemy-dremio>=1.2.1, <4"]
drill = ["sqlalchemy-drill>=1.1.4, <2"]
druid = ["pydruid>=0.6.5,<0.7"]
duckdb = ["duckdb-engine>=0.12.1, <0.13"]
duckdb = ["duckdb-engine>=0.10", "duckdb>=1.1.0"]
dynamodb = ["pydynamodb>=0.4.2"]
solr = ["sqlalchemy-solr >= 0.2.0"]
elasticsearch = ["elasticsearch-dbapi>=0.2.9, <0.3.0"]
@@ -146,7 +146,6 @@ hive = [
impala = ["impyla>0.16.2, <0.17"]
kusto = ["sqlalchemy-kusto>=3.0.0, <4"]
kylin = ["kylinpy>=2.8.1, <2.9"]
motherduck = ["duckdb==0.10.2", "duckdb-engine>=0.12.1, <0.13"]
mssql = ["pymssql>=2.2.8, <3"]
mysql = ["mysqlclient>=2.1.0, <3"]
ocient = [
@@ -371,14 +370,12 @@ authorized_licenses = [
"apache software",
"apache software, bsd",
"bsd",
"bsd-3-clause",
"isc license (iscl)",
"isc license",
"mit",
"mozilla public license 2.0 (mpl 2.0)",
"osi approved",
"osi approved",
"psf-2.0",
"python software foundation",
"the unlicense (unlicense)",
"the unlicense",

View File

@@ -44,7 +44,7 @@ cachetools==5.5.2
# via google-auth
cattrs==24.1.2
# via requests-cache
celery==5.5.2
celery==5.4.0
# via apache-superset (pyproject.toml)
certifi==2025.1.31
# via
@@ -82,7 +82,7 @@ cron-descriptor==1.4.5
# via apache-superset (pyproject.toml)
croniter==6.0.0
# via apache-superset (pyproject.toml)
cryptography==44.0.3
cryptography==44.0.2
# via
# apache-superset (pyproject.toml)
# paramiko
@@ -118,7 +118,7 @@ flask==2.3.3
# flask-session
# flask-sqlalchemy
# flask-wtf
flask-appbuilder==4.6.3
flask-appbuilder==4.6.1
# via apache-superset (pyproject.toml)
flask-babel==2.0.0
# via flask-appbuilder
@@ -158,23 +158,22 @@ greenlet==3.1.1
# via
# apache-superset (pyproject.toml)
# shillelagh
# sqlalchemy
gunicorn==23.0.0
# via apache-superset (pyproject.toml)
h11==0.16.0
h11==0.14.0
# via wsproto
hashids==1.3.1
# via apache-superset (pyproject.toml)
holidays==0.25
# via apache-superset (pyproject.toml)
humanize==4.12.3
humanize==4.12.2
# via apache-superset (pyproject.toml)
idna==3.10
# via
# email-validator
# requests
# trio
importlib-metadata==8.7.0
importlib-metadata==8.6.1
# via apache-superset (pyproject.toml)
isodate==0.7.2
# via apache-superset (pyproject.toml)
@@ -192,17 +191,17 @@ jsonschema==4.23.0
# via flask-appbuilder
jsonschema-specifications==2024.10.1
# via jsonschema
kombu==5.5.3
kombu==5.5.0
# via celery
korean-lunar-calendar==0.3.1
# via holidays
limits==5.1.0
limits==4.4.1
# via flask-limiter
mako==1.3.10
mako==1.3.9
# via
# apache-superset (pyproject.toml)
# alembic
markdown==3.8
markdown==3.7
# via apache-superset (pyproject.toml)
markdown-it-py==3.0.0
# via rich
@@ -236,6 +235,7 @@ numpy==1.26.4
# bottleneck
# numexpr
# pandas
# pyarrow
odfpy==1.4.1
# via pandas
openpyxl==3.1.5
@@ -244,7 +244,7 @@ ordered-set==4.1.0
# via flask-limiter
outcome==1.3.0.post0
# via trio
packaging==25.0
packaging==24.2
# via
# apache-superset (pyproject.toml)
# apispec
@@ -271,9 +271,9 @@ polyline==2.0.2
# via apache-superset (pyproject.toml)
prison==0.2.1
# via flask-appbuilder
prompt-toolkit==3.0.51
prompt-toolkit==3.0.50
# via click-repl
pyarrow==18.1.0
pyarrow==14.0.2
# via apache-superset (pyproject.toml)
pyasn1==0.6.1
# via
@@ -294,7 +294,7 @@ pynacl==1.5.0
# via paramiko
pyopenssl==25.0.0
# via shillelagh
pyparsing==3.2.3
pyparsing==3.2.2
# via apache-superset (pyproject.toml)
pysocks==1.7.1
# via urllib3
@@ -307,11 +307,11 @@ python-dateutil==2.9.0.post0
# holidays
# pandas
# shillelagh
python-dotenv==1.1.0
python-dotenv==1.0.1
# via apache-superset (pyproject.toml)
python-geohash==0.8.5
# via apache-superset (pyproject.toml)
pytz==2025.2
pytz==2025.1
# via
# croniter
# flask-babel
@@ -373,7 +373,7 @@ sqlalchemy-utils==0.38.3
# via
# apache-superset (pyproject.toml)
# flask-appbuilder
sqlglot==26.16.4
sqlglot==26.11.1
# via apache-superset (pyproject.toml)
sqlparse==0.5.3
# via apache-superset (pyproject.toml)
@@ -398,8 +398,9 @@ typing-extensions==4.12.2
# rich
# selenium
# shillelagh
tzdata==2025.2
tzdata==2025.1
# via
# celery
# kombu
# pandas
url-normalize==1.4.3

View File

@@ -72,7 +72,7 @@ cattrs==24.1.2
# via
# -c requirements/base.txt
# requests-cache
celery==5.5.2
celery==5.4.0
# via
# -c requirements/base.txt
# apache-superset
@@ -138,7 +138,7 @@ croniter==6.0.0
# via
# -c requirements/base.txt
# apache-superset
cryptography==44.0.3
cryptography==44.0.2
# via
# -c requirements/base.txt
# apache-superset
@@ -202,7 +202,7 @@ flask==2.3.3
# flask-sqlalchemy
# flask-testing
# flask-wtf
flask-appbuilder==4.6.3
flask-appbuilder==4.6.1
# via
# -c requirements/base.txt
# apache-superset
@@ -318,7 +318,6 @@ greenlet==3.1.1
# apache-superset
# gevent
# shillelagh
# sqlalchemy
grpcio==1.71.0
# via
# apache-superset
@@ -330,7 +329,7 @@ gunicorn==23.0.0
# via
# -c requirements/base.txt
# apache-superset
h11==0.16.0
h11==0.14.0
# via
# -c requirements/base.txt
# wsproto
@@ -343,7 +342,7 @@ holidays==0.25
# -c requirements/base.txt
# apache-superset
# prophet
humanize==4.12.3
humanize==4.12.2
# via
# -c requirements/base.txt
# apache-superset
@@ -355,7 +354,7 @@ idna==3.10
# email-validator
# requests
# trio
importlib-metadata==8.7.0
importlib-metadata==8.6.1
# via
# -c requirements/base.txt
# apache-superset
@@ -396,7 +395,7 @@ jsonschema-specifications==2024.10.1
# openapi-schema-validator
kiwisolver==1.4.7
# via matplotlib
kombu==5.5.3
kombu==5.5.0
# via
# -c requirements/base.txt
# celery
@@ -406,16 +405,16 @@ korean-lunar-calendar==0.3.1
# holidays
lazy-object-proxy==1.10.0
# via openapi-spec-validator
limits==5.1.0
limits==4.4.1
# via
# -c requirements/base.txt
# flask-limiter
mako==1.3.10
mako==1.3.9
# via
# -c requirements/base.txt
# alembic
# apache-superset
markdown==3.8
markdown==3.7
# via
# -c requirements/base.txt
# apache-superset
@@ -473,6 +472,7 @@ numpy==1.26.4
# pandas
# pandas-gbq
# prophet
# pyarrow
oauthlib==3.2.2
# via requests-oauthlib
odfpy==1.4.1
@@ -495,7 +495,7 @@ outcome==1.3.0.post0
# via
# -c requirements/base.txt
# trio
packaging==25.0
packaging==24.2
# via
# -c requirements/base.txt
# apache-superset
@@ -565,7 +565,7 @@ prison==0.2.1
# flask-appbuilder
progress==1.6
# via apache-superset
prompt-toolkit==3.0.51
prompt-toolkit==3.0.50
# via
# -c requirements/base.txt
# click-repl
@@ -586,7 +586,7 @@ psutil==6.1.0
# via apache-superset
psycopg2-binary==2.9.6
# via apache-superset
pyarrow==18.1.0
pyarrow==14.0.2
# via
# -c requirements/base.txt
# apache-superset
@@ -635,7 +635,7 @@ pyopenssl==25.0.0
# via
# -c requirements/base.txt
# shillelagh
pyparsing==3.2.3
pyparsing==3.2.2
# via
# -c requirements/base.txt
# apache-superset
@@ -668,7 +668,7 @@ python-dateutil==2.9.0.post0
# pyhive
# shillelagh
# trino
python-dotenv==1.1.0
python-dotenv==1.0.1
# via
# -c requirements/base.txt
# apache-superset
@@ -678,7 +678,7 @@ python-geohash==0.8.5
# apache-superset
python-ldap==3.4.4
# via apache-superset
pytz==2025.2
pytz==2025.1
# via
# -c requirements/base.txt
# croniter
@@ -799,7 +799,7 @@ sqlalchemy-utils==0.38.3
# -c requirements/base.txt
# apache-superset
# flask-appbuilder
sqlglot==26.16.4
sqlglot==26.11.1
# via
# -c requirements/base.txt
# apache-superset
@@ -850,9 +850,10 @@ typing-extensions==4.12.2
# rich
# selenium
# shillelagh
tzdata==2025.2
tzdata==2025.1
# via
# -c requirements/base.txt
# celery
# kombu
# pandas
tzlocal==5.2

View File

@@ -63,10 +63,7 @@ def fetch_files_github_api(url: str): # type: ignore
def fetch_changed_files_pr(repo: str, pr_number: str) -> List[str]:
"""Fetches files changed in a PR using the GitHub API."""
# NOTE: limited to 100 files ideally should page-through but instead resorting
# to assuming we should trigger when 100 files have been touched
url = f"https://api.github.com/repos/{repo}/pulls/{pr_number}/files?per_page=100"
url = f"https://api.github.com/repos/{repo}/pulls/{pr_number}/files"
files = fetch_files_github_api(url)
return [file_info["filename"] for file_info in files]
@@ -106,7 +103,7 @@ def main(event_type: str, sha: str, repo: str) -> None:
"""Main function to check for file changes based on event context."""
print("SHA:", sha)
print("EVENT_TYPE", event_type)
files = []
files = None
if event_type == "pull_request":
pr_number = os.getenv("GITHUB_REF", "").split("/")[-2]
if is_int(pr_number):
@@ -136,11 +133,8 @@ def main(event_type: str, sha: str, repo: str) -> None:
output_path = os.getenv("GITHUB_OUTPUT") or "/tmp/GITHUB_OUTPUT.txt" # noqa: S108
with open(output_path, "a") as f:
for check, changed in changes_detected.items():
# NOTE: as noted above, we assume that if 100 files are touched, we should
# trigger all checks. This is a workaround for the GitHub API limit of 100
# files. Using >= 99 because off-by-one errors are not uncommon
if changed or len(files) >= 99:
print(f"{check}=true", file=f)
if changed:
print(f"{check}={str(changed).lower()}", file=f)
print(f"Triggering group: {check}")

View File

@@ -55,7 +55,6 @@ export function prepareDashboardFilters(
controlValues: {
enableEmptyFilter: false,
defaultToFirstItem: false,
creatable: true,
multiSelect: true,
searchAllOptions: false,
inverseSelection: false,

View File

@@ -56,6 +56,7 @@ describe('Visualization > Big Number with Trendline', () => {
it('should work', () => {
verify(BIG_NUMBER_FORM_DATA);
cy.get('.chart-container .header-line');
cy.get('.chart-container .subheader-line');
cy.get('.chart-container canvas');
});
@@ -65,7 +66,7 @@ describe('Visualization > Big Number with Trendline', () => {
compare_lag: null,
});
cy.get('.chart-container .header-line');
cy.get('.chart-container .subtitle-line').should('not.exist');
cy.get('.chart-container .subheader-line').should('not.exist');
cy.get('.chart-container canvas');
});
@@ -75,6 +76,7 @@ describe('Visualization > Big Number with Trendline', () => {
show_trend_line: false,
});
cy.get('[data-test="chart-container"] .header-line');
cy.get('[data-test="chart-container"] .subheader-line');
cy.get('[data-test="chart-container"] canvas').should('not.exist');
});
});

View File

@@ -252,215 +252,4 @@ describe('Visualization > Table', () => {
});
cy.get('td').contains(/\d*%/);
});
it('Test row limit with server pagination toggle', () => {
cy.visitChartByParams({
...VIZ_DEFAULTS,
metrics: ['count'],
row_limit: 100,
});
// Enable server pagination
cy.get('[data-test="server_pagination-header"] div.pull-left').click();
// Click row limit control and select high value (200k)
cy.get('div[aria-label="Row limit"]').click();
// Type 200000 and press enter to select the option
cy.get('div[aria-label="Row limit"]')
.find('.ant-select-selection-search-input:visible')
.type('200000{enter}');
// Verify that there is no error tooltip when server pagination is enabled
cy.get('[data-test="error-tooltip"]').should('not.exist');
// Disable server pagination
cy.get('[data-test="server_pagination-header"] div.pull-left').click();
// Verify error tooltip appears
cy.get('[data-test="error-tooltip"]').should('be.visible');
// Trigger mouseover and verify tooltip text
cy.get('[data-test="error-tooltip"]').trigger('mouseover');
// Verify tooltip content
cy.get('.antd5-tooltip-inner').should('be.visible');
cy.get('.antd5-tooltip-inner').should(
'contain',
'Server pagination needs to be enabled for values over',
);
// Hide the tooltip by adding display:none style
cy.get('.antd5-tooltip').invoke('attr', 'style', 'display: none');
// Enable server pagination again
cy.get('[data-test="server_pagination-header"] div.pull-left').click();
cy.get('[data-test="error-tooltip"]').should('not.exist');
cy.get('div[aria-label="Row limit"]').click();
// Type 1000000
cy.get('div[aria-label="Row limit"]')
.find('.ant-select-selection-search-input:visible')
.type('1000000');
// Wait for 1 second
cy.wait(1000);
// Press enter
cy.get('div[aria-label="Row limit"]')
.find('.ant-select-selection-search-input:visible')
.type('{enter}');
// Wait for error tooltip to appear and verify its content
cy.get('[data-test="error-tooltip"]')
.should('be.visible')
.trigger('mouseover');
// Wait for tooltip content and verify
cy.get('.antd5-tooltip-inner').should('exist');
cy.get('.antd5-tooltip-inner').should('be.visible');
// Verify tooltip content separately
cy.get('.antd5-tooltip-inner').should('contain', 'Value cannot exceed');
});
it('Test sorting with server pagination enabled', () => {
cy.visitChartByParams({
...VIZ_DEFAULTS,
metrics: ['count'],
groupby: ['name'],
row_limit: 100000,
server_pagination: true, // Enable server pagination
});
// Wait for the initial data load
cy.wait('@chartData');
// Get the first column header (name)
cy.get('.chart-container th').contains('name').as('nameHeader');
// Click to sort ascending
cy.get('@nameHeader').click();
cy.wait('@chartData');
// Verify first row starts with 'A'
cy.get('.chart-container td:first').invoke('text').should('match', /^[Aa]/);
// Click again to sort descending
cy.get('@nameHeader').click();
cy.wait('@chartData');
// Verify first row starts with 'Z'
cy.get('.chart-container td:first').invoke('text').should('match', /^[Zz]/);
// Test numeric sorting
cy.get('.chart-container th').contains('COUNT').as('countHeader');
// Click to sort ascending by count
cy.get('@countHeader').click();
cy.wait('@chartData');
// Get first two count values and verify ascending order
cy.get('.chart-container td:nth-child(2)').then($cells => {
const first = parseFloat($cells[0].textContent || '0');
const second = parseFloat($cells[1].textContent || '0');
expect(first).to.be.at.most(second);
});
// Click again to sort descending
cy.get('@countHeader').click();
cy.wait('@chartData');
// Get first two count values and verify descending order
cy.get('.chart-container td:nth-child(2)').then($cells => {
const first = parseFloat($cells[0].textContent || '0');
const second = parseFloat($cells[1].textContent || '0');
expect(first).to.be.at.least(second);
});
});
it('Test search with server pagination enabled', () => {
cy.visitChartByParams({
...VIZ_DEFAULTS,
metrics: ['count'],
groupby: ['name', 'state'],
row_limit: 100000,
server_pagination: true,
include_search: true,
});
cy.wait('@chartData');
// Basic search test
cy.get('span.dt-global-filter input.form-control.input-sm').should(
'be.visible',
);
cy.get('span.dt-global-filter input.form-control.input-sm').type('John');
cy.wait('@chartData');
cy.get('.chart-container tbody tr').each($row => {
cy.wrap($row).contains(/John/i);
});
// Clear and test case-insensitive search
cy.get('span.dt-global-filter input.form-control.input-sm').clear();
cy.wait('@chartData');
cy.get('span.dt-global-filter input.form-control.input-sm').type('mary');
cy.wait('@chartData');
cy.get('.chart-container tbody tr').each($row => {
cy.wrap($row).contains(/Mary/i);
});
// Test special characters
cy.get('span.dt-global-filter input.form-control.input-sm').clear();
cy.get('span.dt-global-filter input.form-control.input-sm').type('Nicole');
cy.wait('@chartData');
cy.get('.chart-container tbody tr').each($row => {
cy.wrap($row).contains(/Nicole/i);
});
// Test no results
cy.get('span.dt-global-filter input.form-control.input-sm').clear();
cy.get('span.dt-global-filter input.form-control.input-sm').type('XYZ123');
cy.wait('@chartData');
cy.get('.chart-container').contains('No records found');
// Test column-specific search
cy.get('.search-select').should('be.visible');
cy.get('.search-select').click();
cy.get('.ant-select-dropdown').should('be.visible');
cy.get('.ant-select-item-option').contains('state').should('be.visible');
cy.get('.ant-select-item-option').contains('state').click();
cy.get('span.dt-global-filter input.form-control.input-sm').clear();
cy.get('span.dt-global-filter input.form-control.input-sm').type('CA');
cy.wait('@chartData');
cy.wait(1000);
cy.get('td[aria-labelledby="header-state"]').should('be.visible');
cy.get('td[aria-labelledby="header-state"]')
.first()
.should('contain', 'CA');
});
});

View File

@@ -2581,12 +2581,11 @@
"peer": true
},
"node_modules/@babel/runtime": {
"version": "7.27.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
"license": "MIT",
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
@@ -9245,10 +9244,9 @@
}
},
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"license": "MIT"
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
},
"node_modules/regenerator-transform": {
"version": "0.15.1",
@@ -12808,11 +12806,11 @@
"peer": true
},
"@babel/runtime": {
"version": "7.27.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
"version": "7.17.2",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.2.tgz",
"integrity": "sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==",
"requires": {
"regenerator-runtime": "^0.14.0"
"regenerator-runtime": "^0.13.4"
}
},
"@babel/template": {
@@ -17859,9 +17857,9 @@
}
},
"regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
"version": "0.13.7",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
"integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
},
"regenerator-transform": {
"version": "0.15.1",

View File

@@ -23,7 +23,7 @@
"@reduxjs/toolkit": "^1.9.3",
"@rjsf/core": "^5.21.1",
"@rjsf/utils": "^5.24.3",
"@rjsf/validator-ajv8": "^5.24.9",
"@rjsf/validator-ajv8": "^5.22.3",
"@scarf/scarf": "^1.4.0",
"@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
"@superset-ui/core": "file:./packages/superset-ui-core",
@@ -115,7 +115,7 @@
"react-dom": "^17.0.2",
"react-draggable": "^4.4.6",
"react-hot-loader": "^4.13.1",
"react-intersection-observer": "^9.16.0",
"react-intersection-observer": "^9.10.2",
"react-js-cron": "^2.1.2",
"react-json-tree": "^0.17.0",
"react-lines-ellipsis": "^0.15.4",
@@ -162,7 +162,7 @@
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.26.3",
"@babel/plugin-transform-runtime": "^7.27.1",
"@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.26.7",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",
@@ -1146,14 +1146,14 @@
}
},
"node_modules/@babel/code-frame": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
"integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
"version": "7.26.2",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
"integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
"license": "MIT",
"dependencies": {
"@babel/helper-validator-identifier": "^7.27.1",
"@babel/helper-validator-identifier": "^7.25.9",
"js-tokens": "^4.0.0",
"picocolors": "^1.1.1"
"picocolors": "^1.0.0"
},
"engines": {
"node": ">=6.9.0"
@@ -1240,13 +1240,13 @@
}
},
"node_modules/@babel/generator": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.1.tgz",
"integrity": "sha512-UnJfnIpc/+JO0/+KRVQNGU+y5taA5vCbwN8+azkX6beii/ZF+enZJSOKo11ZSzGJjlNfJHfQtmQT8H+9TXPG2w==",
"version": "7.26.5",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
"integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
"license": "MIT",
"dependencies": {
"@babel/parser": "^7.27.1",
"@babel/types": "^7.27.1",
"@babel/parser": "^7.26.5",
"@babel/types": "^7.26.5",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^3.0.2"
@@ -1387,13 +1387,13 @@
}
},
"node_modules/@babel/helper-module-imports": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
"integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
"integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
"license": "MIT",
"dependencies": {
"@babel/traverse": "^7.27.1",
"@babel/types": "^7.27.1"
"@babel/traverse": "^7.25.9",
"@babel/types": "^7.25.9"
},
"engines": {
"node": ">=6.9.0"
@@ -1431,9 +1431,9 @@
}
},
"node_modules/@babel/helper-plugin-utils": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz",
"integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==",
"version": "7.26.5",
"resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
"integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
"dev": true,
"license": "MIT",
"engines": {
@@ -1491,18 +1491,18 @@
}
},
"node_modules/@babel/helper-string-parser": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
"integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/helper-validator-identifier": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
"integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
"license": "MIT",
"engines": {
"node": ">=6.9.0"
@@ -1572,12 +1572,12 @@
}
},
"node_modules/@babel/parser": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.1.tgz",
"integrity": "sha512-I0dZ3ZpCrJ1c04OqlNsQcKiZlsrXf/kkE4FXzID9rIOYICsAbA8mMDzhW/luRNAHdCNt7os/u8wenklZDlUVUQ==",
"version": "7.26.7",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
"integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
"license": "MIT",
"dependencies": {
"@babel/types": "^7.27.1"
"@babel/types": "^7.26.7"
},
"bin": {
"parser": "bin/babel-parser.js"
@@ -2849,16 +2849,16 @@
}
},
"node_modules/@babel/plugin-transform-runtime": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.27.1.tgz",
"integrity": "sha512-TqGF3desVsTcp3WrJGj4HfKokfCXCLcHpt4PJF0D8/iT6LPd9RS82Upw3KPeyr6B22Lfd3DO8MVrmp0oRkUDdw==",
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.25.9.tgz",
"integrity": "sha512-nZp7GlEl+yULJrClz0SwHPqir3lc0zsPrDHQUcxGspSL7AKrexNSEfTbfqnDNJUO13bgKyfuOLMF8Xqtu8j3YQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-module-imports": "^7.27.1",
"@babel/helper-plugin-utils": "^7.27.1",
"@babel/helper-module-imports": "^7.25.9",
"@babel/helper-plugin-utils": "^7.25.9",
"babel-plugin-polyfill-corejs2": "^0.4.10",
"babel-plugin-polyfill-corejs3": "^0.11.0",
"babel-plugin-polyfill-corejs3": "^0.10.6",
"babel-plugin-polyfill-regenerator": "^0.6.1",
"semver": "^6.3.1"
},
@@ -2869,20 +2869,6 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@babel/plugin-transform-runtime/node_modules/babel-plugin-polyfill-corejs3": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz",
"integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-define-polyfill-provider": "^0.6.3",
"core-js-compat": "^3.40.0"
},
"peerDependencies": {
"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
}
},
"node_modules/@babel/plugin-transform-runtime/node_modules/semver": {
"version": "6.3.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -3293,30 +3279,30 @@
}
},
"node_modules/@babel/template": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.1.tgz",
"integrity": "sha512-Fyo3ghWMqkHHpHQCoBs2VnYjR4iWFFjguTDEqA5WgZDOrFesVjMhMM2FSqTKSoUSDO1VQtavj8NFpdRBEvJTtg==",
"version": "7.25.9",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
"integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/parser": "^7.27.1",
"@babel/types": "^7.27.1"
"@babel/code-frame": "^7.25.9",
"@babel/parser": "^7.25.9",
"@babel/types": "^7.25.9"
},
"engines": {
"node": ">=6.9.0"
}
},
"node_modules/@babel/traverse": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.1.tgz",
"integrity": "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==",
"version": "7.26.7",
"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
"integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/generator": "^7.27.1",
"@babel/parser": "^7.27.1",
"@babel/template": "^7.27.1",
"@babel/types": "^7.27.1",
"@babel/code-frame": "^7.26.2",
"@babel/generator": "^7.26.5",
"@babel/parser": "^7.26.7",
"@babel/template": "^7.25.9",
"@babel/types": "^7.26.7",
"debug": "^4.3.1",
"globals": "^11.1.0"
},
@@ -3325,13 +3311,13 @@
}
},
"node_modules/@babel/types": {
"version": "7.27.1",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.1.tgz",
"integrity": "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==",
"version": "7.26.9",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
"license": "MIT",
"dependencies": {
"@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1"
"@babel/helper-string-parser": "^7.25.9",
"@babel/helper-validator-identifier": "^7.25.9"
},
"engines": {
"node": ">=6.9.0"
@@ -8512,9 +8498,9 @@
}
},
"node_modules/@rjsf/validator-ajv8": {
"version": "5.24.9",
"resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.24.9.tgz",
"integrity": "sha512-leHb39Qa612QhAfvw36qi/ubWa7LQ6hrPN4Ge93QBlWywRfV/M0Wmx9bPccCGgIL4Qnn1Wmt53EWV8kQT28xTA==",
"version": "5.24.1",
"resolved": "https://registry.npmjs.org/@rjsf/validator-ajv8/-/validator-ajv8-5.24.1.tgz",
"integrity": "sha512-p6URehglU9yFUAoQXE1ryqZjLYSjc6qdbiUfCVvEFAzUuMECsIFomz2hH3CPlt10K72sAFdzwVvrKn1iWTnxDw==",
"license": "Apache-2.0",
"dependencies": {
"ajv": "^8.12.0",
@@ -26696,9 +26682,9 @@
}
},
"node_modules/http-proxy-middleware": {
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
"integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
"integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -39490,9 +39476,9 @@
}
},
"node_modules/react-intersection-observer": {
"version": "9.16.0",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
"integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
"version": "9.15.1",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
"integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
"license": "MIT",
"peerDependencies": {
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -48989,7 +48975,6 @@
"@types/react": "*",
"@types/react-loadable": "*",
"@types/tinycolor2": "*",
"nanoid": "^5.0.9",
"react": "^17.0.2",
"react-loadable": "^5.5.0",
"tinycolor2": "*"
@@ -50878,7 +50863,7 @@
"version": "0.20.3",
"license": "Apache-2.0",
"dependencies": {
"@types/react-redux": "^7.1.34",
"@types/react-redux": "^7.1.10",
"d3-array": "^1.2.0",
"dayjs": "^1.11.13",
"lodash": "^4.17.21"

View File

@@ -90,7 +90,7 @@
"@reduxjs/toolkit": "^1.9.3",
"@rjsf/core": "^5.21.1",
"@rjsf/utils": "^5.24.3",
"@rjsf/validator-ajv8": "^5.24.9",
"@rjsf/validator-ajv8": "^5.22.3",
"@scarf/scarf": "^1.4.0",
"@superset-ui/chart-controls": "file:./packages/superset-ui-chart-controls",
"@superset-ui/core": "file:./packages/superset-ui-core",
@@ -182,7 +182,7 @@
"react-dom": "^17.0.2",
"react-draggable": "^4.4.6",
"react-hot-loader": "^4.13.1",
"react-intersection-observer": "^9.16.0",
"react-intersection-observer": "^9.10.2",
"react-js-cron": "^2.1.2",
"react-json-tree": "^0.17.0",
"react-lines-ellipsis": "^0.15.4",
@@ -229,7 +229,7 @@
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-modules-commonjs": "^7.26.3",
"@babel/plugin-transform-runtime": "^7.27.1",
"@babel/plugin-transform-runtime": "^7.25.9",
"@babel/preset-env": "^7.26.7",
"@babel/preset-react": "^7.26.3",
"@babel/preset-typescript": "^7.26.0",

View File

@@ -42,7 +42,7 @@ const FlexRowContainer = styled.div`
`;
export interface MetricOptionProps {
metric: Omit<Metric, 'id' | 'uuid'> & { label?: string };
metric: Omit<Metric, 'id'> & { label?: string };
openInNewWindow?: boolean;
showFormula?: boolean;
showType?: boolean;

View File

@@ -97,7 +97,7 @@ export const getColumnTooltipNode = (
);
};
type MetricType = Omit<Metric, 'id' | 'uuid'> & { label?: string };
type MetricType = Omit<Metric, 'id'> & { label?: string };
export const getMetricTooltipNode = (
metric: MetricType,

View File

@@ -26,7 +26,6 @@ import {
import { ColumnMeta, SortSeriesData, SortSeriesType } from './types';
export const DEFAULT_MAX_ROW = 100000;
export const DEFAULT_MAX_ROW_TABLE_SERVER = 500000;
// eslint-disable-next-line import/prefer-default-export
export const TIME_FILTER_LABELS = {

View File

@@ -21,6 +21,7 @@ import { Dataset } from './types';
export const TestDataset: Dataset = {
column_formats: {},
currency_formats: {},
columns: [
{
advanced_data_type: undefined,
@@ -120,7 +121,6 @@ export const TestDataset: Dataset = {
main_dttm_col: 'ds',
metrics: [
{
uuid: '123',
certification_details: null,
certified_by: null,
d3format: null,

View File

@@ -26,7 +26,6 @@ import {
} from '@superset-ui/core';
import { PostProcessingFactory } from './types';
import { getMetricOffsetsMap, isTimeComparison } from './utils';
import { TIME_COMPARISON_SEPARATOR } from './utils/constants';
export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
formData,
@@ -38,60 +37,50 @@ export const renameOperator: PostProcessingFactory<PostProcessingRename> = (
);
const { truncate_metric } = formData;
const xAxisLabel = getXAxisLabel(formData);
const isTimeComparisonValue = isTimeComparison(formData, queryObject);
// remove or rename top level of column name(metric name) in the MultiIndex when
// 1) at least 1 metric
// 1) only 1 metric
// 2) dimension exist
// 3) xAxis exist
// 4) truncate_metric in form_data and truncate_metric is true
// 4) time comparison exist, and comparison type is "actual values"
// 5) truncate_metric in form_data and truncate_metric is true
if (
metrics.length > 0 &&
metrics.length === 1 &&
columns.length > 0 &&
xAxisLabel &&
!(
// todo: we should provide an approach to handle derived metrics
(
isTimeComparison(formData, queryObject) &&
[
ComparisonType.Difference,
ComparisonType.Ratio,
ComparisonType.Percentage,
].includes(formData.comparison_type)
)
) &&
truncate_metric !== undefined &&
!!truncate_metric
) {
const renamePairs: [string, string | null][] = [];
if (
// "actual values" will add derived metric.
// we will rename the "metric" from the metricWithOffset label
// for example: "count__1 year ago" => "1 year ago"
isTimeComparisonValue
isTimeComparison(formData, queryObject) &&
formData.comparison_type === ComparisonType.Values
) {
const metricOffsetMap = getMetricOffsetsMap(formData, queryObject);
const timeOffsets = ensureIsArray(formData.time_compare);
[...metricOffsetMap.entries()].forEach(
([metricWithOffset, metricOnly]) => {
const offsetLabel = timeOffsets.find(offset =>
metricWithOffset.includes(offset),
);
renamePairs.push([
formData.comparison_type === ComparisonType.Values
? metricWithOffset
: [formData.comparison_type, metricOnly, metricWithOffset].join(
TIME_COMPARISON_SEPARATOR,
),
metrics.length > 1 ? `${metricOnly}, ${offsetLabel}` : offsetLabel,
]);
},
);
[...metricOffsetMap.keys()].forEach(metricWithOffset => {
const offsetLabel = timeOffsets.find(offset =>
metricWithOffset.includes(offset),
);
renamePairs.push([metricWithOffset, offsetLabel]);
});
}
if (
![
ComparisonType.Difference,
ComparisonType.Percentage,
ComparisonType.Ratio,
].includes(formData.comparison_type) &&
metrics.length === 1
) {
renamePairs.push([getMetricLabel(metrics[0]), null]);
}
if (renamePairs.length === 0) {
return undefined;
}
renamePairs.push([getMetricLabel(metrics[0]), null]);
return {
operation: 'rename',

View File

@@ -23,6 +23,8 @@ import {
xAxisForceCategoricalControl,
xAxisSortAscControl,
xAxisSortControl,
xAxisSortSeriesAscendingControl,
xAxisSortSeriesControl,
} from '../shared-controls';
const controlsWithoutXAxis: ControlSetRow[] = [
@@ -53,6 +55,8 @@ export const echartsTimeSeriesQueryWithXAxisSort: ControlPanelSectionConfig = {
[xAxisForceCategoricalControl],
[xAxisSortControl],
[xAxisSortAscControl],
[xAxisSortSeriesControl],
[xAxisSortSeriesAscendingControl],
...controlsWithoutXAxis,
],
};

View File

@@ -57,7 +57,9 @@ export const contributionModeControl = {
};
const xAxisSortVisibility = ({ controls }: { controls: ControlStateMapping }) =>
isSortable(controls);
isSortable(controls) &&
ensureIsArray(controls?.groupby?.value).length === 0 &&
ensureIsArray(controls?.metrics?.value).length === 1;
// TODO: Expand this aggregation options list to include all backend-supported aggregations.
// TODO: Migrate existing chart types (Pivot Table, etc.) to use this shared control.
@@ -85,6 +87,15 @@ export const aggregationControl = {
},
};
const xAxisMultiSortVisibility = ({
controls,
}: {
controls: ControlStateMapping;
}) =>
isSortable(controls) &&
(!!ensureIsArray(controls?.groupby?.value).length ||
ensureIsArray(controls?.metrics?.value).length > 1);
export const xAxisSortControl = {
name: 'x_axis_sort',
config: {
@@ -93,7 +104,7 @@ export const xAxisSortControl = {
state.form_data?.orientation === 'horizontal'
? t('Y-Axis Sort By')
: t('X-Axis Sort By'),
description: t('Decides which column or measure to sort the base axis by.'),
description: t('Decides which column to sort the base axis by.'),
shouldMapStateToProps: () => true,
mapStateToProps: (state: ControlPanelState, controlState: ControlState) => {
const { controls, datasource } = state;
@@ -101,35 +112,23 @@ export const xAxisSortControl = {
const columns = [controls?.x_axis?.value as QueryFormColumn].filter(
Boolean,
);
const isSingleSortAvailable =
ensureIsArray(controls?.groupby?.value).length === 0;
const isMultiSortAvailable =
!!ensureIsArray(controls?.groupby?.value).length ||
ensureIsArray(controls?.metrics?.value).length > 1;
const metrics = [
...ensureIsArray(controls?.metrics?.value as QueryFormMetric),
controls?.timeseries_limit_metric?.value as QueryFormMetric,
].filter(Boolean);
const metricLabels = [...new Set(metrics.map(getMetricLabel))];
const options = [
...(isSingleSortAvailable
? [
...columns.map(column => {
const value = getColumnLabel(column);
return { value, label: dataset?.verbose_map?.[value] || value };
}),
...metricLabels.map(value => ({
value,
label: dataset?.verbose_map?.[value] || value,
})),
]
: []),
...(isMultiSortAvailable
? SORT_SERIES_CHOICES.map(choice => ({
value: choice[0],
label: choice[1],
}))
: []),
...columns.map(column => {
const value = getColumnLabel(column);
return {
value,
label: dataset?.verbose_map?.[value] || value,
};
}),
...metricLabels.map(value => ({
value,
label: dataset?.verbose_map?.[value] || value,
})),
];
const shouldReset = !(
@@ -158,7 +157,7 @@ export const xAxisSortAscControl = {
state.form_data?.orientation === 'horizontal'
? t('Y-Axis Sort Ascending')
: t('X-Axis Sort Ascending'),
default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_ascending,
default: true,
description: t('Whether to sort ascending or descending on the base Axis.'),
visibility: ({ controls }: { controls: ControlStateMapping }) =>
controls?.x_axis_sort?.value !== undefined &&
@@ -185,3 +184,37 @@ export const xAxisForceCategoricalControl = {
shouldMapStateToProps: () => true,
},
};
export const xAxisSortSeriesControl = {
name: 'x_axis_sort_series',
config: {
type: 'SelectControl',
freeForm: false,
label: (state: ControlPanelState) =>
state.form_data?.orientation === 'horizontal'
? t('Y-Axis Sort By')
: t('X-Axis Sort By'),
choices: SORT_SERIES_CHOICES,
default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_type,
renderTrigger: true,
description: t('Decides which measure to sort the base axis by.'),
visibility: xAxisMultiSortVisibility,
},
};
export const xAxisSortSeriesAscendingControl = {
name: 'x_axis_sort_series_ascending',
config: {
type: 'CheckboxControl',
label: (state: ControlPanelState) =>
state.form_data?.orientation === 'horizontal'
? t('Y-Axis Sort Ascending')
: t('X-Axis Sort Ascending'),
default: DEFAULT_XAXIS_SORT_SERIES_DATA.sort_series_ascending,
description: t('Whether to sort ascending or descending on the base Axis.'),
renderTrigger: true,
visibility: ({ controls }: { controls: ControlStateMapping }) =>
controls?.x_axis_sort_series?.value !== undefined &&
xAxisMultiSortVisibility({ controls }),
},
};

View File

@@ -69,6 +69,7 @@ export interface Dataset {
columns: ColumnMeta[];
metrics: Metric[];
column_formats: Record<string, string>;
currency_formats: Record<string, Currency>;
verbose_map: Record<string, string>;
main_dttm_col: string;
// eg. ['["ds", true]', 'ds [asc]']

View File

@@ -43,12 +43,12 @@ const queryObject: QueryObject = {
post_processing: [],
};
test('should skip renameOperator for empty metrics', () => {
test('should skip renameOperator if exists multiple metrics', () => {
expect(
renameOperator(formData, {
...queryObject,
...{
metrics: [],
metrics: ['count(*)', 'sum(sales)'],
},
}),
).toEqual(undefined);
@@ -77,23 +77,7 @@ test('should skip renameOperator if does not exist x_axis and is_timeseries', ()
).toEqual(undefined);
});
test('should skip renameOperator if not is_timeseries and multi metrics', () => {
expect(
renameOperator(formData, {
...queryObject,
...{ is_timeseries: false, metrics: ['count(*)', 'sum(val)'] },
}),
).toEqual(undefined);
});
test('should add renameOperator', () => {
expect(renameOperator(formData, queryObject)).toEqual({
operation: 'rename',
options: { columns: { 'count(*)': null }, inplace: true, level: 0 },
});
});
test('should add renameOperator if exists derived metrics', () => {
test('should skip renameOperator if exists derived metrics', () => {
[
ComparisonType.Difference,
ComparisonType.Ratio,
@@ -115,14 +99,14 @@ test('should add renameOperator if exists derived metrics', () => {
},
},
),
).toEqual({
operation: 'rename',
options: {
columns: { [`${type}__count(*)__count(*)__1 year ago`]: '1 year ago' },
inplace: true,
level: 0,
},
});
).toEqual(undefined);
});
});
test('should add renameOperator', () => {
expect(renameOperator(formData, queryObject)).toEqual({
operation: 'rename',
options: { columns: { 'count(*)': null }, inplace: true, level: 0 },
});
});
@@ -186,61 +170,6 @@ test('should add renameOperator if exist "actual value" time comparison', () =>
});
});
test('should add renameOperator if derived time comparison exists', () => {
expect(
renameOperator(
{
...formData,
...{
comparison_type: ComparisonType.Ratio,
time_compare: ['1 year ago', '1 year later'],
},
},
queryObject,
),
).toEqual({
operation: 'rename',
options: {
columns: {
'ratio__count(*)__count(*)__1 year ago': '1 year ago',
'ratio__count(*)__count(*)__1 year later': '1 year later',
},
inplace: true,
level: 0,
},
});
});
test('should add renameOperator if multiple metrics exist', () => {
expect(
renameOperator(
{
...formData,
...{
comparison_type: ComparisonType.Values,
time_compare: ['1 year ago'],
},
},
{
...queryObject,
...{
metrics: ['count(*)', 'sum(sales)'],
},
},
),
).toEqual({
operation: 'rename',
options: {
columns: {
'count(*)__1 year ago': 'count(*), 1 year ago',
'sum(sales)__1 year ago': 'sum(sales), 1 year ago',
},
inplace: true,
level: 0,
},
});
});
test('should remove renameOperator', () => {
expect(
renameOperator(

View File

@@ -53,6 +53,7 @@ describe('columnChoices()', () => {
],
verbose_map: {},
column_formats: { fiz: 'NUMERIC', about: 'STRING', foo: 'DATE' },
currency_formats: {},
datasource_name: 'my_datasource',
description: 'this is my datasource',
}),
@@ -104,6 +105,7 @@ describe('columnChoices()', () => {
],
verbose_map: {},
column_formats: { fiz: 'NUMERIC', about: 'STRING', foo: 'DATE' },
currency_formats: {},
datasource_name: 'my_datasource',
description: 'this is my datasource',
}),

View File

@@ -32,7 +32,6 @@ describe('defineSavedMetrics', () => {
{
metric_name: 'COUNT(*) non-default-dataset-metric',
expression: 'COUNT(*) non-default-dataset-metric',
uuid: '1',
},
],
type: DatasourceType.Table,
@@ -41,6 +40,7 @@ describe('defineSavedMetrics', () => {
columns: [],
verbose_map: {},
column_formats: {},
currency_formats: {},
datasource_name: 'my_datasource',
description: 'this is my datasource',
};
@@ -48,7 +48,6 @@ describe('defineSavedMetrics', () => {
{
metric_name: 'COUNT(*) non-default-dataset-metric',
expression: 'COUNT(*) non-default-dataset-metric',
uuid: '1',
},
]);
// @ts-ignore

View File

@@ -24,24 +24,15 @@ describe('mainMetric', () => {
expect(mainMetric(null)).toBeUndefined();
});
it('prefers the "count" metric when first', () => {
const metrics = [
{ metric_name: 'count', uuid: '1' },
{ metric_name: 'foo', uuid: '2' },
];
const metrics = [{ metric_name: 'count' }, { metric_name: 'foo' }];
expect(mainMetric(metrics)).toBe('count');
});
it('prefers the "count" metric when not first', () => {
const metrics = [
{ metric_name: 'foo', uuid: '1' },
{ metric_name: 'count', uuid: '2' },
];
const metrics = [{ metric_name: 'foo' }, { metric_name: 'count' }];
expect(mainMetric(metrics)).toBe('count');
});
it('selects the first metric when "count" is not an option', () => {
const metrics = [
{ metric_name: 'foo', uuid: '2' },
{ metric_name: 'not_count', uuid: '2' },
];
const metrics = [{ metric_name: 'foo' }, { metric_name: 'not_count' }];
expect(mainMetric(metrics)).toBe('foo');
});
});

View File

@@ -81,7 +81,6 @@
"@types/react": "*",
"@types/react-loadable": "*",
"@types/tinycolor2": "*",
"nanoid": "^5.0.9",
"react": "^17.0.2",
"react-loadable": "^5.5.0",
"tinycolor2": "*"

View File

@@ -59,37 +59,3 @@ test('should truncate', () => {
expect(isTruncated).toBe(true);
});
test('should not truncate with vertical orientation', () => {
const ref = { current: document.createElement('p') };
Object.defineProperty(ref.current, 'offsetHeight', { get: () => 100 });
Object.defineProperty(ref.current, 'scrollHeight', { get: () => 50 });
jest.spyOn(global.React, 'useRef').mockReturnValue({ current: ref.current });
const { result } = renderHook(() =>
useCSSTextTruncation<HTMLParagraphElement>({
isVertical: true,
isHorizontal: false,
}),
);
const [, isTruncated] = result.current;
expect(isTruncated).toBe(false);
});
test('should truncate with vertical orientation', () => {
const ref = { current: document.createElement('p') };
Object.defineProperty(ref.current, 'offsetHeight', { get: () => 50 });
Object.defineProperty(ref.current, 'scrollHeight', { get: () => 100 });
jest.spyOn(global.React, 'useRef').mockReturnValue({ current: ref.current });
const { result } = renderHook(() =>
useCSSTextTruncation<HTMLParagraphElement>({
isVertical: true,
isHorizontal: false,
}),
);
const [, isTruncated] = result.current;
expect(isTruncated).toBe(true);
});

View File

@@ -36,37 +36,24 @@ export const truncationCSS = css`
* to be displayed, this hook returns a ref to attach to the text
* element and a boolean for whether that element is currently truncated.
*/
const useCSSTextTruncation = <T extends HTMLElement>(
{ isVertical, isHorizontal } = { isVertical: false, isHorizontal: true },
): [RefObject<T>, boolean] => {
const useCSSTextTruncation = <T extends HTMLElement>(): [
RefObject<T>,
boolean,
] => {
const [isTruncated, setIsTruncated] = useState(true);
const ref = useRef<T>(null);
const [offsetWidth, setOffsetWidth] = useState(0);
const [scrollWidth, setScrollWidth] = useState(0);
const [offsetHeight, setOffsetHeight] = useState(0);
const [scrollHeight, setScrollHeight] = useState(0);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => {
setOffsetWidth(ref.current?.offsetWidth ?? 0);
setScrollWidth(ref.current?.scrollWidth ?? 0);
setOffsetHeight(ref.current?.offsetHeight ?? 0);
setScrollHeight(ref.current?.scrollHeight ?? 0);
});
useEffect(() => {
setIsTruncated(
(isVertical && offsetHeight < scrollHeight) ||
(isHorizontal && offsetWidth < scrollWidth),
);
}, [
offsetWidth,
scrollWidth,
offsetHeight,
scrollHeight,
isVertical,
isHorizontal,
]);
setIsTruncated(offsetWidth < scrollWidth);
}, [offsetWidth, scrollWidth]);
return [ref, isTruncated];
};

View File

@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
import { nanoid } from 'nanoid';
import { Column } from './Column';
import { Metric } from './Metric';
@@ -59,7 +58,6 @@ export const DEFAULT_METRICS: Metric[] = [
{
metric_name: 'COUNT(*)',
expression: 'COUNT(*)',
uuid: nanoid(),
},
];

View File

@@ -60,7 +60,6 @@ export type SavedMetric = string;
*/
export interface Metric {
id?: number;
uuid: string;
metric_name: string;
expression?: Maybe<string>;
certification_details?: Maybe<string>;

View File

@@ -35,8 +35,7 @@ export type Locale =
| 'pt'
| 'pt_BR'
| 'ru'
| 'zh'
| 'zh_TW'; // supported locales in Superset
| 'zh'; // supported locales in Superset
/**
* Language pack provided to `jed`.

View File

@@ -25,4 +25,3 @@ export { default as validateNonEmpty } from './validateNonEmpty';
export { default as validateMaxValue } from './validateMaxValue';
export { default as validateMapboxStylesUrl } from './validateMapboxStylesUrl';
export { default as validateTimeComparisonRangeValues } from './validateTimeComparisonRangeValues';
export { default as validateServerPagination } from './validateServerPagination';

View File

@@ -1,30 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { t } from '../translation';
export default function validateServerPagination(
v: unknown,
serverPagination: boolean,
max: number,
) {
if (Number(v) > +max && !serverPagination) {
return t('Server pagination needs to be enabled for values over %s', max);
}
return false;
}

View File

@@ -20,10 +20,10 @@ import { DatasourceType, DEFAULT_METRICS } from '@superset-ui/core';
test('DEFAULT_METRICS', () => {
expect(DEFAULT_METRICS).toEqual([
expect.objectContaining({
{
metric_name: 'COUNT(*)',
expression: 'COUNT(*)',
}),
},
]);
});

View File

@@ -1,46 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { validateServerPagination } from '@superset-ui/core';
import './setup';
test('validateServerPagination returns warning message when server pagination is disabled and value exceeds max', () => {
expect(validateServerPagination(100001, false, 100000)).toBeTruthy();
expect(validateServerPagination('150000', false, 100000)).toBeTruthy();
expect(validateServerPagination(200000, false, 100000)).toBeTruthy();
});
test('validateServerPagination returns false when server pagination is enabled', () => {
expect(validateServerPagination(100001, true, 100000)).toBeFalsy();
expect(validateServerPagination(150000, true, 100000)).toBeFalsy();
expect(validateServerPagination('200000', true, 100000)).toBeFalsy();
});
test('validateServerPagination returns false when value is below max', () => {
expect(validateServerPagination(50000, false, 100000)).toBeFalsy();
expect(validateServerPagination('75000', false, 100000)).toBeFalsy();
expect(validateServerPagination(99999, false, 100000)).toBeFalsy();
});
test('validateServerPagination handles edge cases', () => {
expect(validateServerPagination(undefined, false, 100000)).toBeFalsy();
expect(validateServerPagination(null, false, 100000)).toBeFalsy();
expect(validateServerPagination(NaN, false, 100000)).toBeFalsy();
expect(validateServerPagination('invalid', false, 100000)).toBeFalsy();
});

View File

@@ -60,7 +60,7 @@
"@storybook/react-webpack5": "8.2.9",
"babel-loader": "^9.1.3",
"fork-ts-checker-webpack-plugin": "^9.0.2",
"ts-loader": "^9.5.2",
"ts-loader": "^9.5.1",
"typescript": "^5.7.2"
},
"peerDependencies": {

View File

@@ -103,7 +103,6 @@ import iran from './countries/iran.geojson';
import israel from './countries/israel.geojson';
import italy from './countries/italy.geojson';
import italy_regions from './countries/italy_regions.geojson';
import ivory_coast from './countries/ivory_coast.geojson';
import japan from './countries/japan.geojson';
import jordan from './countries/jordan.geojson';
import kazakhstan from './countries/kazakhstan.geojson';
@@ -161,7 +160,6 @@ import philippines_regions from './countries/philippines_regions.geojson';
import poland from './countries/poland.geojson';
import portugal from './countries/portugal.geojson';
import qatar from './countries/qatar.geojson';
import republic_of_serbia from './countries/republic_of_serbia.geojson';
import romania from './countries/romania.geojson';
import russia from './countries/russia.geojson';
import rwanda from './countries/rwanda.geojson';
@@ -306,7 +304,6 @@ export const countries = {
israel,
italy,
italy_regions,
ivory_coast,
japan,
jordan,
kazakhstan,
@@ -364,7 +361,6 @@ export const countries = {
poland,
portugal,
qatar,
republic_of_serbia,
romania,
russia,
rwanda,

View File

@@ -77,7 +77,7 @@ export function getLayer(
getTargetColor: (d: any) =>
d.targetColor || d.color || [tc.r, tc.g, tc.b, 255 * tc.a],
id: `path-layer-${fd.slice_id}` as const,
getWidth: fd.stroke_width ? fd.stroke_width : 3,
strokeWidth: fd.stroke_width ? fd.stroke_width : 3,
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
});
}

View File

@@ -36,25 +36,13 @@ import {
} from './types';
import { useOverflowDetection } from './useOverflowDetection';
const MetricNameText = styled.div<{ metricNameFontSize?: number }>`
${({ theme, metricNameFontSize }) => `
font-family: ${theme.typography.families.sansSerif};
font-weight: ${theme.typography.weights.normal};
font-size: ${metricNameFontSize || theme.typography.sizes.s * 2}px;
text-align: center;
margin-bottom: ${theme.gridUnit * 3}px;
`}
`;
const NumbersContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
overflow: auto;
padding: 12px;
`;
const ComparisonValue = styled.div<PopKPIComparisonValueStyleProps>`
@@ -85,8 +73,6 @@ export default function PopKPI(props: PopKPIProps) {
prevNumber,
valueDifference,
percentDifferenceFormattedString,
metricName,
metricNameFontSize,
headerFontSize,
subheaderFontSize,
comparisonColorEnabled,
@@ -95,11 +81,9 @@ export default function PopKPI(props: PopKPIProps) {
currentTimeRangeFilter,
startDateOffset,
shift,
subtitle,
subtitleFontSize,
dashboardTimeRange,
showMetricName,
} = props;
const [comparisonRange, setComparisonRange] = useState<string>('');
useEffect(() => {
@@ -156,16 +140,6 @@ export default function PopKPI(props: PopKPIProps) {
margin-bottom: ${theme.gridUnit * 4}px;
`;
const SubtitleText = styled.div`
${({ theme }) => `
font-family: ${theme.typography.families.sansSerif};
font-weight: ${theme.typography.weights.medium};
text-align: center;
margin-top: -10px;
margin-bottom: ${theme.gridUnit * 4}px;
`}
`;
const getArrowIndicatorColor = () => {
if (!comparisonColorEnabled || percentDifferenceNumber === 0) {
return theme.colors.grayscale.base;
@@ -221,40 +195,31 @@ export default function PopKPI(props: PopKPIProps) {
]);
const SYMBOLS_WITH_VALUES = useMemo(
() =>
[
{
defaultSymbol: '#',
value: prevNumber,
tooltipText: t('Data for %s', comparisonRange || 'previous range'),
columnKey: 'Previous value',
},
{
defaultSymbol: '△',
value: valueDifference,
tooltipText: t('Value difference between the time periods'),
columnKey: 'Delta',
},
{
defaultSymbol: '%',
value: percentDifferenceFormattedString,
tooltipText: t('Percentage difference between the time periods'),
columnKey: 'Percent change',
},
].map(item => {
const config = props.columnConfig?.[item.columnKey];
return {
...item,
symbol: config?.displayTypeIcon === false ? '' : item.defaultSymbol,
label: config?.customColumnName || item.columnKey,
};
}),
() => [
{
symbol: '#',
value: prevNumber,
tooltipText: t('Data for %s', comparisonRange || 'previous range'),
columnKey: 'Previous value',
},
{
symbol: '△',
value: valueDifference,
tooltipText: t('Value difference between the time periods'),
columnKey: 'Delta',
},
{
symbol: '%',
value: percentDifferenceFormattedString,
tooltipText: t('Percentage difference between the time periods'),
columnKey: 'Percent change',
},
],
[
comparisonRange,
prevNumber,
valueDifference,
percentDifferenceFormattedString,
props.columnConfig,
],
);
@@ -274,16 +239,9 @@ export default function PopKPI(props: PopKPIProps) {
width: fit-content;
margin: auto;
align-items: flex-start;
overflow: auto;
`
}
>
{showMetricName && metricName && (
<MetricNameText metricNameFontSize={metricNameFontSize}>
{metricName}
</MetricNameText>
)}
<div css={bigValueContainerStyles}>
{bigNumber}
{percentDifferenceNumber !== 0 && (
@@ -292,15 +250,6 @@ export default function PopKPI(props: PopKPIProps) {
</span>
)}
</div>
{subtitle && (
<SubtitleText
style={{
fontSize: `${subtitleFontSize * height * 0.4}px`,
}}
>
{subtitle}
</SubtitleText>
)}
{visibleSymbols.length > 0 && (
<div
@@ -327,7 +276,7 @@ export default function PopKPI(props: PopKPIProps) {
>
{visibleSymbols.map((symbol_with_value, index) => (
<ComparisonValue
key={`comparison-symbol-${symbol_with_value.columnKey}`}
key={`comparison-symbol-${symbol_with_value.symbol}`}
subheaderFontSize={subheaderFontSize}
>
<Tooltip
@@ -335,19 +284,15 @@ export default function PopKPI(props: PopKPIProps) {
placement="top"
title={symbol_with_value.tooltipText}
>
{symbol_with_value.symbol && (
<SymbolWrapper
backgroundColor={
index > 0 ? backgroundColor : defaultBackgroundColor
}
textColor={index > 0 ? textColor : defaultTextColor}
>
{symbol_with_value.symbol}
</SymbolWrapper>
)}
{symbol_with_value.value}{' '}
{props.columnConfig?.[symbol_with_value.columnKey]
?.customColumnName || ''}
<SymbolWrapper
backgroundColor={
index > 0 ? backgroundColor : defaultBackgroundColor
}
textColor={index > 0 ? textColor : defaultTextColor}
>
{symbol_with_value.symbol}
</SymbolWrapper>
{symbol_with_value.value}
</Tooltip>
</ComparisonValue>
))}

View File

@@ -23,14 +23,7 @@ import {
sharedControls,
sections,
} from '@superset-ui/chart-controls';
import {
headerFontSize,
subheaderFontSize,
subtitleControl,
subtitleFontSize,
showMetricNameControl,
metricNameFontSizeWithVisibility,
} from '../sharedControls';
import { headerFontSize, subheaderFontSize } from '../sharedControls';
import { ColorSchemeEnum } from './types';
const config: ControlPanelConfig = {
@@ -70,10 +63,6 @@ const config: ControlPanelConfig = {
config: { ...headerFontSize.config, default: 0.2 },
},
],
[subtitleControl],
[subtitleFontSize],
[showMetricNameControl],
[metricNameFontSizeWithVisibility],
[
{
...subheaderFontSize,
@@ -131,11 +120,7 @@ const config: ControlPanelConfig = {
[GenericDataType.Numeric]: [
{
tab: t('General'),
children: [
['customColumnName'],
['displayTypeIcon'],
['visible'],
],
children: [['visible']],
},
],
},

View File

@@ -32,7 +32,6 @@ export default class PopKPIPlugin extends ChartPlugin {
tags: [
t('Comparison'),
t('Business'),
t('ECharts'),
t('Percentages'),
t('Report'),
t('Advanced-Analytics'),

View File

@@ -26,13 +26,7 @@ import {
SimpleAdhocFilter,
ensureIsArray,
} from '@superset-ui/core';
import {
getComparisonFontSize,
getHeaderFontSize,
getMetricNameFontSize,
} from './utils';
import { getOriginalLabel } from '../utils';
import { getComparisonFontSize, getHeaderFontSize } from './utils';
dayjs.extend(utc);
@@ -89,23 +83,17 @@ export default function transformProps(chartProps: ChartProps) {
headerFontSize,
headerText,
metric,
metricNameFontSize,
yAxisFormat,
currencyFormat,
subheaderFontSize,
comparisonColorScheme,
comparisonColorEnabled,
percentDifferenceFormat,
subtitle = '',
subtitleFontSize,
columnConfig = {},
columnConfig,
} = formData;
const { data: dataA = [] } = queriesData[0];
const data = dataA;
const metricName = metric ? getMetricLabel(metric) : '';
const metrics = chartProps.datasource?.metrics || [];
const originalLabel = getOriginalLabel(metric, metrics);
const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
const timeComparison = ensureIsArray(chartProps.rawFormData?.time_compare)[0];
const startDateOffset = chartProps.rawFormData?.start_date_offset;
const currentTimeRangeFilter = chartProps.rawFormData?.adhoc_filters?.filter(
@@ -189,16 +177,12 @@ export default function transformProps(chartProps: ChartProps) {
width,
height,
data,
metricName: originalLabel,
metricName,
bigNumber,
prevNumber,
valueDifference,
percentDifferenceFormattedString: percentDifference,
boldText,
subtitle,
subtitleFontSize,
showMetricName,
metricNameFontSize: getMetricNameFontSize(metricNameFontSize),
headerFontSize: getHeaderFontSize(headerFontSize),
subheaderFontSize: getComparisonFontSize(subheaderFontSize),
headerText,

View File

@@ -35,8 +35,6 @@ export interface PopKPIStylesProps {
export type TableColumnConfig = {
visible?: boolean;
customColumnName?: string;
displayTypeIcon?: boolean;
};
interface PopKPICustomizeProps {
@@ -61,12 +59,8 @@ export type PopKPIProps = PopKPIStylesProps &
data: TimeseriesDataRecord[];
metrics: Metric[];
metricName: string;
metricNameFontSize?: number;
showMetricName: boolean;
bigNumber: string;
prevNumber: string;
subtitle?: string;
subtitleFontSize: number;
valueDifference: string;
percentDifferenceFormattedString: string;
compType: string;

View File

@@ -16,19 +16,10 @@
* specific language governing permissions and limitations
* under the License.
*/
import {
headerFontSize,
subheaderFontSize,
metricNameFontSize,
} from '../sharedControls';
import { headerFontSize, subheaderFontSize } from '../sharedControls';
const headerFontSizes = [16, 20, 30, 48, 60];
const sharedFontSizes = [16, 20, 26, 32, 40];
const metricNameProportionValues =
metricNameFontSize.config.options.map(
(option: { label: string; value: number }) => option.value,
) ?? [];
const comparisonFontSizes = [16, 20, 26, 32, 40];
const headerProportionValues =
headerFontSize.config.options.map(
@@ -49,10 +40,6 @@ const getFontSizeMapping = (
return acc;
}, {});
const metricNameFontSizesMapping = getFontSizeMapping(
metricNameProportionValues,
sharedFontSizes,
);
const headerFontSizesMapping = getFontSizeMapping(
headerProportionValues,
headerFontSizes,
@@ -60,17 +47,13 @@ const headerFontSizesMapping = getFontSizeMapping(
const comparisonFontSizesMapping = getFontSizeMapping(
subheaderProportionValues,
sharedFontSizes,
comparisonFontSizes,
);
export const getMetricNameFontSize = (proportionValue: number) =>
metricNameFontSizesMapping[proportionValue] ??
sharedFontSizes[sharedFontSizes.length - 1];
export const getHeaderFontSize = (proportionValue: number) =>
headerFontSizesMapping[proportionValue] ??
headerFontSizes[headerFontSizes.length - 1];
export const getComparisonFontSize = (proportionValue: number) =>
comparisonFontSizesMapping[proportionValue] ??
sharedFontSizes[sharedFontSizes.length - 1];
comparisonFontSizes[comparisonFontSizes.length - 1];

View File

@@ -1,97 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { SqlaFormData } from '@superset-ui/core';
import * as ChartControls from '@superset-ui/chart-controls';
import controlPanel from './controlPanel';
const { __mockShiftMetric } = ChartControls as any;
jest.mock('@superset-ui/core', () => ({
GenericDataType: { Numeric: 'numeric' },
SMART_DATE_ID: 'SMART_DATE_ID',
t: (str: string) => str,
}));
jest.mock('@superset-ui/chart-controls', () => {
// Define the mock function inside the factory
const mockShiftMetric = jest.fn(() => 'shiftedMetric');
return {
ControlPanelConfig: {},
D3_FORMAT_DOCS: 'Format docs',
D3_TIME_FORMAT_OPTIONS: [['', 'default']],
getStandardizedControls: () => ({
shiftMetric: mockShiftMetric,
}),
// Optional export to let tests access the mock
__mockShiftMetric: mockShiftMetric,
};
});
describe('BigNumber Total Control Panel Config', () => {
it('should have the required control panel sections', () => {
expect(controlPanel).toHaveProperty('controlPanelSections');
const sections = controlPanel.controlPanelSections;
expect(Array.isArray(sections)).toBe(true);
expect(sections.length).toBe(2);
// First section should have label 'Query' and contain rows with metric and adhoc_filters
expect(sections[0]!.label).toBe('Query');
expect(Array.isArray(sections[0]!.controlSetRows)).toBe(true);
expect(sections[0]!.controlSetRows[0]).toEqual(['metric']);
expect(sections[0]!.controlSetRows[1]).toEqual(['adhoc_filters']);
// Second section should contain a control named subtitle
const secondSectionRow = sections[1]!.controlSetRows[1];
expect(secondSectionRow[0]).toHaveProperty('name', 'subtitle');
// Second section should include controls for time_format and conditional_formatting
const thirdSection = sections[1]!.controlSetRows;
// Check time_format control exists in one of the rows
const timeFormatRow = thirdSection.find(row =>
row.some((control: any) => control.name === 'time_format'),
);
expect(timeFormatRow).toBeTruthy();
// Check conditional_formatting control exists in one of the rows
const conditionalFormattingRow = thirdSection.find(row =>
row.some((control: any) => control.name === 'conditional_formatting'),
);
expect(conditionalFormattingRow).toBeTruthy();
});
it('should have y_axis_format override with correct label', () => {
expect(controlPanel).toHaveProperty('controlOverrides');
expect(controlPanel.controlOverrides).toHaveProperty('y_axis_format');
expect(controlPanel.controlOverrides!.y_axis_format!.label).toBe(
'Number format',
);
});
it('should override formData metric using getStandardizedControls', () => {
const dummyFormData = { someProp: 'test' } as unknown as SqlaFormData;
const newFormData = controlPanel.formDataOverrides!(dummyFormData);
// The original properties are spread correctly.
expect(newFormData.someProp).toBe('test');
// The metric property should be replaced by the output of shiftMetric.
expect(newFormData.metric).toBe('shiftedMetric');
// Ensure that the mockShiftMetric function was called.
expect(__mockShiftMetric).toHaveBeenCalled();
});
});

View File

@@ -24,13 +24,7 @@ import {
Dataset,
getStandardizedControls,
} from '@superset-ui/chart-controls';
import {
headerFontSize,
subtitleFontSize,
subtitleControl,
showMetricNameControl,
metricNameFontSizeWithVisibility,
} from '../sharedControls';
import { headerFontSize, subheaderFontSize } from '../sharedControls';
export default {
controlPanelSections: [
@@ -39,15 +33,32 @@ export default {
expanded: true,
controlSetRows: [['metric'], ['adhoc_filters']],
},
{
label: t('Display settings'),
expanded: true,
tabOverride: 'data',
controlSetRows: [
[
{
name: 'subheader',
config: {
type: 'TextControl',
label: t('Subheader'),
renderTrigger: true,
description: t(
'Description text that shows up below your Big Number',
),
},
},
],
],
},
{
label: t('Chart Options'),
expanded: true,
controlSetRows: [
[headerFontSize],
[subtitleControl],
[subtitleFontSize],
[showMetricNameControl],
[metricNameFontSizeWithVisibility],
[subheaderFontSize],
['y_axis_format'],
['currency_format'],
[

View File

@@ -39,7 +39,6 @@ const metadata = {
tags: [
t('Additive'),
t('Business'),
t('ECharts'),
t('Legacy'),
t('Percentages'),
t('Featured'),

View File

@@ -1,253 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { GenericDataType } from '@superset-ui/core';
import { getColorFormatters } from '@superset-ui/chart-controls';
import { BigNumberTotalChartProps } from '../types';
import transformProps from './transformProps';
jest.mock('@superset-ui/chart-controls', () => ({
getColorFormatters: jest.fn(),
}));
jest.mock('@superset-ui/core', () => ({
GenericDataType: { Temporal: 2, String: 1 },
getMetricLabel: jest.fn(metric => metric),
extractTimegrain: jest.fn(() => 'P1D'),
getValueFormatter: jest.fn(() => (v: any) => `$${v}`),
}));
jest.mock('../utils', () => ({
getDateFormatter: jest.fn(() => (v: any) => `${v}pm`),
parseMetricValue: jest.fn(val => Number(val)),
getOriginalLabel: jest.fn((metric, metrics) => metric),
}));
describe('BigNumberTotal transformProps', () => {
const onContextMenu = jest.fn();
const baseFormData = {
headerFontSize: 20,
metric: 'value',
subheader: 'sub header text',
subheaderFontSize: 14,
forceTimestampFormatting: false,
timeFormat: 'YYYY-MM-DD',
yAxisFormat: 'SMART_NUMBER',
conditionalFormatting: [{ color: 'red', op: '>', value: 0 }],
currencyFormat: { symbol: '$', symbolPosition: 'prefix' },
};
const baseDatasource = {
currencyFormats: { value: '$0,0.00' },
columnFormats: { value: '$0,0.00' },
metrics: [{ metric_name: 'value', d3format: '.2f' }],
};
const baseHooks = { onContextMenu };
const baseRawFormData = { dummy: 'raw' };
it('should return null bigNumber when no data is provided', () => {
const chartProps = {
width: 400,
height: 300,
queriesData: [{ data: [], coltypes: [] }],
formData: baseFormData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const result = transformProps(
chartProps as unknown as BigNumberTotalChartProps,
);
expect(result.bigNumber).toBeNull();
expect(result.width).toBe(400);
expect(result.height).toBe(300);
expect(result.subtitle).toBe(baseFormData.subheader);
expect(result.onContextMenu).toBe(onContextMenu);
expect(result.refs).toEqual({});
// headerFormatter should be set even if there's no data
expect(typeof result.headerFormatter).toBe('function');
// colorThresholdFormatters fallback to empty array when getColorFormatters returns falsy
expect(result.colorThresholdFormatters).toEqual([]);
});
it('should convert subheader to subtitle', () => {
const chartProps = {
width: 400,
height: 300,
queriesData: [{ data: [], coltypes: [] }],
formData: { ...baseFormData, subheader: 'test' },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const result = transformProps(
chartProps as unknown as BigNumberTotalChartProps,
);
expect(result.subtitle).toBe('test');
});
const baseChartProps = {
width: 400,
height: 300,
queriesData: [{ data: [], coltypes: [] }],
rawFormData: { dummy: 'raw' },
hooks: { onContextMenu: jest.fn() },
datasource: {
currencyFormats: { value: '$0,0.00' },
columnFormats: { value: '$0,0.00' },
metrics: [{ metric_name: 'value', d3format: '.2f' }],
},
};
it('uses subtitle font size when subtitle is provided', () => {
const result = transformProps({
...baseChartProps,
formData: {
subtitle: 'Subtitle wins',
subheader: 'Fallback subheader',
subtitleFontSize: 0.4,
subheaderFontSize: 0.99,
metric: 'value',
headerFontSize: 0.3,
yAxisFormat: 'SMART_NUMBER',
timeFormat: 'smart_date',
},
} as unknown as BigNumberTotalChartProps);
expect(result.subtitle).toBe('Subtitle wins');
expect(result.subtitleFontSize).toBe(0.4);
});
it('should compute bigNumber using parseMetricValue when data exists', () => {
const chartProps = {
width: 500,
height: 400,
queriesData: [
{ data: [{ value: '456' }], coltypes: [GenericDataType.String] },
],
formData: { ...baseFormData, forceTimestampFormatting: false },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
sortBy: 'value',
};
const result = transformProps(
chartProps as unknown as BigNumberTotalChartProps,
);
// parseMetricValue converts '456' to number 456 by our mock
expect(result.bigNumber).toEqual(456);
});
it('should use formatTime as headerFormatter for Temporal or String types or forced formatting', () => {
// Case 1: Temporal type
const chartPropsTemporal = {
width: 600,
height: 450,
queriesData: [
{ data: [{ value: '789' }], coltypes: [GenericDataType.Temporal] },
],
formData: { ...baseFormData, forceTimestampFormatting: false },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const resultTemporal = transformProps(
chartPropsTemporal as unknown as BigNumberTotalChartProps,
);
expect(resultTemporal.headerFormatter(5)).toBe('5pm');
// Case 2: String type regardless of forcing formatting
const chartPropsString = {
width: 600,
height: 450,
queriesData: [
{ data: [{ value: '789' }], coltypes: [GenericDataType.String] },
],
formData: { ...baseFormData, forceTimestampFormatting: false },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const resultString = transformProps(
chartPropsString as unknown as BigNumberTotalChartProps,
);
expect(resultString.headerFormatter(5)).toBe('5pm');
// Case 3: Forced timestamp formatting
const chartPropsForced = {
width: 600,
height: 450,
queriesData: [{ data: [{ value: '789' }], coltypes: [0] }], // non-temporal/non-string
formData: { ...baseFormData, forceTimestampFormatting: true },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const resultForced = transformProps(
chartPropsForced as unknown as BigNumberTotalChartProps,
);
expect(resultForced.headerFormatter(5)).toBe('5pm');
});
it('should use numberFormatter as headerFormatter when not Temporal/String and no forced formatting', () => {
const chartProps = {
width: 700,
height: 500,
queriesData: [{ data: [{ value: '321' }], coltypes: [0] }], // non-temporal/non-string
formData: { ...baseFormData, forceTimestampFormatting: false },
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const result = transformProps(
chartProps as unknown as BigNumberTotalChartProps,
);
expect(result.headerFormatter(500)).toBe('$500');
});
it('should propagate colorThresholdFormatters from getColorFormatters', () => {
// Override the getColorFormatters mock to return specific value
const mockFormatters = [{ formatter: 'red' }];
(getColorFormatters as jest.Mock).mockReturnValueOnce(mockFormatters);
const chartProps = {
width: 800,
height: 600,
queriesData: [
{ data: [{ value: '100' }], coltypes: [GenericDataType.Temporal] },
],
formData: baseFormData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
};
const result = transformProps(
chartProps as unknown as BigNumberTotalChartProps,
);
expect(result.colorThresholdFormatters).toEqual(mockFormatters);
});
});

View File

@@ -29,7 +29,7 @@ import {
getValueFormatter,
} from '@superset-ui/core';
import { BigNumberTotalChartProps, BigNumberVizProps } from '../types';
import { getDateFormatter, getOriginalLabel, parseMetricValue } from '../utils';
import { getDateFormatter, parseMetricValue } from '../utils';
import { Refs } from '../../types';
export default function transformProps(
@@ -45,30 +45,21 @@ export default function transformProps(
datasource: { currencyFormats = {}, columnFormats = {} },
} = chartProps;
const {
metricNameFontSize,
headerFontSize,
metric = 'value',
subtitle,
subtitleFontSize,
subheader = '',
subheaderFontSize,
forceTimestampFormatting,
timeFormat,
yAxisFormat,
conditionalFormatting,
currencyFormat,
subheader,
subheaderFontSize,
} = formData;
const refs: Refs = {};
const { data = [], coltypes = [] } = queriesData[0] || {};
const { data = [], coltypes = [] } = queriesData[0];
const granularity = extractTimegrain(rawFormData as QueryFormData);
const metrics = chartProps.datasource?.metrics || [];
const originalLabel = getOriginalLabel(metric, metrics);
const metricName = getMetricLabel(metric);
const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
const formattedSubtitle = subtitle?.trim() ? subtitle : subheader || '';
const formattedSubtitleFontSize = subtitle?.trim()
? (subtitleFontSize ?? 1)
: (subheaderFontSize ?? 1);
const formattedSubheader = subheader;
const bigNumber =
data.length === 0 ? null : parseMetricValue(data[0][metricName]);
@@ -107,6 +98,7 @@ export default function transformProps(
const colorThresholdFormatters =
getColorFormatters(conditionalFormatting, data, false) ??
defaultColorFormatters;
return {
width,
height,
@@ -114,13 +106,9 @@ export default function transformProps(
headerFormatter,
headerFontSize,
subheaderFontSize,
subtitleFontSize: formattedSubtitleFontSize,
subtitle: formattedSubtitle,
subheader: formattedSubheader,
onContextMenu,
refs,
colorThresholdFormatters,
metricName: originalLabel,
showMetricName,
metricNameFontSize,
};
}

View File

@@ -16,7 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import { PureComponent, MouseEvent, createRef } from 'react';
import { PureComponent, MouseEvent } from 'react';
import {
t,
getNumberFormatter,
@@ -35,7 +35,6 @@ const defaultNumberFormatter = getNumberFormatter();
const PROPORTION = {
// text size: proportion of the chart container sans trendline
METRIC_NAME: 0.125,
KICKER: 0.1,
HEADER: 0.3,
SUBHEADER: 0.125,
@@ -43,20 +42,13 @@ const PROPORTION = {
TRENDLINE: 0.3,
};
type BigNumberVisState = {
elementsRendered: boolean;
recalculateTrigger: boolean;
};
class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
class BigNumberVis extends PureComponent<BigNumberVizProps> {
static defaultProps = {
className: '',
headerFormatter: defaultNumberFormatter,
formatTime: getTimeFormatter(SMART_DATE_VERBOSE_ID),
headerFontSize: PROPORTION.HEADER,
kickerFontSize: PROPORTION.KICKER,
metricNameFontSize: PROPORTION.METRIC_NAME,
showMetricName: true,
mainColor: BRAND_COLOR,
showTimestamp: false,
showTrendLine: false,
@@ -66,40 +58,6 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
timeRangeFixed: false,
};
// Create refs for each component to measure heights
metricNameRef = createRef<HTMLDivElement>();
kickerRef = createRef<HTMLDivElement>();
headerRef = createRef<HTMLDivElement>();
subheaderRef = createRef<HTMLDivElement>();
subtitleRef = createRef<HTMLDivElement>();
state = {
elementsRendered: false,
recalculateTrigger: false,
};
componentDidMount() {
// Wait for elements to render and then calculate heights
setTimeout(() => {
this.setState({ elementsRendered: true });
}, 0);
}
componentDidUpdate(prevProps: BigNumberVizProps) {
if (
prevProps.height !== this.props.height ||
prevProps.showTrendLine !== this.props.showTrendLine
) {
this.setState(prevState => ({
recalculateTrigger: !prevState.recalculateTrigger,
}));
}
}
getClassName() {
const { className, showTrendLine, bigNumberFallback } = this.props;
const names = `superset-legacy-chart-big-number ${className} ${
@@ -134,37 +92,6 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
);
}
renderMetricName(maxHeight: number) {
const { metricName, width, showMetricName } = this.props;
if (!showMetricName || !metricName) return null;
const text = metricName;
const container = this.createTemporaryContainer();
document.body.append(container);
const fontSize = computeMaxFontSize({
text,
maxWidth: width,
maxHeight,
className: 'metric-name',
container,
});
container.remove();
return (
<div
ref={this.metricNameRef}
className="metric-name"
style={{
fontSize,
height: 'auto',
}}
>
{text}
</div>
);
}
renderKicker(maxHeight: number) {
const { timestamp, showTimestamp, formatTime, width } = this.props;
if (
@@ -191,7 +118,6 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
return (
<div
ref={this.kickerRef}
className="kicker"
style={{
fontSize,
@@ -247,7 +173,6 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
return (
<div
ref={this.headerRef}
className="header-line"
style={{
display: 'flex',
@@ -263,45 +188,8 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
);
}
rendermetricComparisonSummary(maxHeight: number) {
const { subheader, width } = this.props;
let fontSize = 0;
const text = subheader;
if (text) {
const container = this.createTemporaryContainer();
document.body.append(container);
try {
fontSize = computeMaxFontSize({
text,
maxWidth: width * 0.9,
maxHeight,
className: 'subheader-line',
container,
});
} finally {
container.remove();
}
return (
<div
ref={this.subheaderRef}
className="subheader-line"
style={{
fontSize,
height: maxHeight,
}}
>
{text}
</div>
);
}
return null;
}
renderSubtitle(maxHeight: number) {
const { subtitle, width, bigNumber, bigNumberFallback } = this.props;
renderSubheader(maxHeight: number) {
const { bigNumber, subheader, width, bigNumberFallback } = this.props;
let fontSize = 0;
const NO_DATA_OR_HASNT_LANDED = t(
@@ -310,38 +198,32 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
const NO_DATA = t(
'Try applying different filters or ensuring your datasource has data',
);
let text = subtitle;
let text = subheader;
if (bigNumber === null) {
text =
subtitle || (bigNumberFallback ? NO_DATA : NO_DATA_OR_HASNT_LANDED);
text = bigNumberFallback ? NO_DATA : NO_DATA_OR_HASNT_LANDED;
}
if (text) {
const container = this.createTemporaryContainer();
document.body.append(container);
fontSize = computeMaxFontSize({
text,
maxWidth: width * 0.9,
maxWidth: width * 0.9, // max width reduced
maxHeight,
className: 'subtitle-line',
className: 'subheader-line',
container,
});
container.remove();
return (
<>
<div
ref={this.subtitleRef}
className="subtitle-line subheader-line"
style={{
fontSize: `${fontSize}px`,
height: maxHeight,
}}
>
{text}
</div>
</>
<div
className="subheader-line"
style={{
fontSize,
height: maxHeight,
}}
>
{text}
</div>
);
}
return null;
@@ -393,43 +275,12 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
);
}
getTotalElementsHeight() {
const marginPerElement = 8; // theme.gridUnit = 4, so margin-bottom = 8px
const refs = [
this.metricNameRef,
this.kickerRef,
this.headerRef,
this.subheaderRef,
this.subtitleRef,
];
// Filter refs to only those with a current element
const visibleRefs = refs.filter(ref => ref.current);
const totalHeight = visibleRefs.reduce((sum, ref, index) => {
const height = ref.current?.offsetHeight || 0;
const margin = index < visibleRefs.length - 1 ? marginPerElement : 0;
return sum + height + margin;
}, 0);
return totalHeight;
}
shouldApplyOverflow(availableHeight: number) {
if (!this.state.elementsRendered) return false;
const totalHeight = this.getTotalElementsHeight();
return totalHeight > availableHeight;
}
render() {
const {
showTrendLine,
height,
kickerFontSize,
headerFontSize,
subtitleFontSize,
metricNameFontSize,
subheaderFontSize,
} = this.props;
const className = this.getClassName();
@@ -437,31 +288,11 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
if (showTrendLine) {
const chartHeight = Math.floor(PROPORTION.TRENDLINE * height);
const allTextHeight = height - chartHeight;
const shouldApplyOverflow = this.shouldApplyOverflow(allTextHeight);
return (
<div className={className}>
<div
className="text-container"
style={{
height: allTextHeight,
...(shouldApplyOverflow
? {
display: 'block',
boxSizing: 'border-box',
overflowX: 'hidden',
overflowY: 'auto',
width: '100%',
}
: {}),
}}
>
<div className="text-container" style={{ height: allTextHeight }}>
{this.renderFallbackWarning()}
{this.renderMetricName(
Math.ceil(
(metricNameFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
),
)}
{this.renderKicker(
Math.ceil(
(kickerFontSize || 0) * (1 - PROPORTION.TRENDLINE) * height,
@@ -470,46 +301,23 @@ class BigNumberVis extends PureComponent<BigNumberVizProps, BigNumberVisState> {
{this.renderHeader(
Math.ceil(headerFontSize * (1 - PROPORTION.TRENDLINE) * height),
)}
{this.rendermetricComparisonSummary(
{this.renderSubheader(
Math.ceil(
subheaderFontSize * (1 - PROPORTION.TRENDLINE) * height,
),
)}
{this.renderSubtitle(
Math.ceil(subtitleFontSize * (1 - PROPORTION.TRENDLINE) * height),
)}
</div>
{this.renderTrendline(chartHeight)}
</div>
);
}
const shouldApplyOverflow = this.shouldApplyOverflow(height);
return (
<div
className={className}
style={{
height,
...(shouldApplyOverflow
? {
display: 'block',
boxSizing: 'border-box',
overflowX: 'hidden',
overflowY: 'auto',
width: '100%',
}
: {}),
}}
>
<div className="text-container">
{this.renderFallbackWarning()}
{this.renderMetricName((metricNameFontSize || 0) * height)}
{this.renderKicker((kickerFontSize || 0) * height)}
{this.renderHeader(Math.ceil(headerFontSize * height))}
{this.rendermetricComparisonSummary(
Math.ceil(subheaderFontSize * height),
)}
{this.renderSubtitle(Math.ceil(subtitleFontSize * height))}
</div>
<div className={className} style={{ height }}>
{this.renderFallbackWarning()}
{this.renderKicker((kickerFontSize || 0) * height)}
{this.renderHeader(Math.ceil(headerFontSize * height))}
{this.renderSubheader(Math.ceil(subheaderFontSize * height))}
</div>
);
}
@@ -544,12 +352,7 @@ export default styled(BigNumberVis)`
.kicker {
line-height: 1em;
margin-bottom: ${theme.gridUnit * 2}px;
}
.metric-name {
line-height: 1em;
margin-bottom: ${theme.gridUnit * 2}px;
padding-bottom: 2em;
}
.header-line {
@@ -565,12 +368,7 @@ export default styled(BigNumberVis)`
.subheader-line {
line-height: 1em;
margin-bottom: ${theme.gridUnit * 2}px;
}
.subtitle-line {
line-height: 1em;
margin-bottom: ${theme.gridUnit * 2}px;
padding-bottom: 0;
}
&.is-fallback-value {

View File

@@ -26,14 +26,7 @@ import {
getStandardizedControls,
temporalColumnMixin,
} from '@superset-ui/chart-controls';
import {
headerFontSize,
subheaderFontSize,
subtitleFontSize,
subtitleControl,
showMetricNameControl,
metricNameFontSizeWithVisibility,
} from '../sharedControls';
import { headerFontSize, subheaderFontSize } from '../sharedControls';
const config: ControlPanelConfig = {
controlPanelSections: [
@@ -141,10 +134,6 @@ const config: ControlPanelConfig = {
['color_picker', null],
[headerFontSize],
[subheaderFontSize],
[subtitleControl],
[subtitleFontSize],
[showMetricNameControl],
[metricNameFontSizeWithVisibility],
['y_axis_format'],
['currency_format'],
[

View File

@@ -37,7 +37,6 @@ const metadata = {
name: t('Big Number with Trendline'),
tags: [
t('Advanced-Analytics'),
t('ECharts'),
t('Line'),
t('Percentages'),
t('Featured'),

View File

@@ -1,197 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import { GenericDataType } from '@superset-ui/core';
import transformProps from './transformProps';
import { BigNumberWithTrendlineChartProps, BigNumberDatum } from '../types';
jest.mock('@superset-ui/core', () => ({
GenericDataType: { Temporal: 2, String: 1 },
extractTimegrain: jest.fn(() => 'P1D'),
getMetricLabel: jest.fn(metric => metric),
getXAxisLabel: jest.fn(() => '__timestamp'),
getValueFormatter: jest.fn(() => ({
format: (v: number) => `$${v}`,
})),
getNumberFormatter: jest.fn(() => (v: number) => `${(v * 100).toFixed(1)}%`),
t: jest.fn(v => v),
tooltipHtml: jest.fn(() => '<div>tooltip</div>'),
NumberFormats: {
PERCENT_SIGNED_1_POINT: '.1%',
},
}));
jest.mock('../utils', () => ({
getDateFormatter: jest.fn(() => (v: any) => `${v}pm`),
parseMetricValue: jest.fn(val => Number(val)),
getOriginalLabel: jest.fn((metric, metrics) => metric),
}));
jest.mock('../../utils/tooltip', () => ({
getDefaultTooltip: jest.fn(() => ({})),
}));
describe('BigNumberWithTrendline transformProps', () => {
const onContextMenu = jest.fn();
const baseFormData = {
headerFontSize: 20,
metric: 'value',
subtitle: 'subtitle message',
subtitleFontSize: 14,
forceTimestampFormatting: false,
timeFormat: 'YYYY-MM-DD',
yAxisFormat: 'SMART_NUMBER',
compareLag: 1,
compareSuffix: 'WoW',
colorPicker: { r: 0, g: 0, b: 0 },
currencyFormat: { symbol: '$', symbolPosition: 'prefix' },
};
const baseDatasource = {
currencyFormats: { value: '$0,0.00' },
columnFormats: { value: '$0,0.00' },
metrics: [{ metric_name: 'value', d3format: '.2f' }],
};
const baseHooks = { onContextMenu };
const baseRawFormData = { dummy: 'raw' };
it('should return null bigNumber when no data is provided', () => {
const chartProps = {
width: 400,
height: 300,
queriesData: [{ data: [] as unknown as BigNumberDatum[], coltypes: [] }],
formData: baseFormData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
theme: { colors: { grayscale: { light5: '#eee' } } },
};
const result = transformProps(
chartProps as unknown as BigNumberWithTrendlineChartProps,
);
expect(result.bigNumber).toBeNull();
expect(result.subtitle).toBe('subtitle message');
});
it('should calculate subheader as percent change with suffix', () => {
const chartProps = {
width: 500,
height: 400,
queriesData: [
{
data: [
{ __timestamp: 2, value: 110 },
{ __timestamp: 1, value: 100 },
] as unknown as BigNumberDatum[],
colnames: ['__timestamp', 'value'],
coltypes: ['TEMPORAL', 'NUMERIC'],
},
],
formData: baseFormData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
theme: { colors: { grayscale: { light5: '#eee' } } },
};
const result = transformProps(
chartProps as unknown as BigNumberWithTrendlineChartProps,
);
expect(result.subheader).toBe('10.0% WoW');
});
it('should compute bigNumber from parseMetricValue', () => {
const chartProps = {
width: 600,
height: 450,
queriesData: [
{
data: [
{ __timestamp: 2, value: '456' },
] as unknown as BigNumberDatum[],
colnames: ['__timestamp', 'value'],
coltypes: [GenericDataType.Temporal, GenericDataType.String],
},
],
formData: baseFormData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
theme: { colors: { grayscale: { light5: '#eee' } } },
};
const result = transformProps(
chartProps as unknown as BigNumberWithTrendlineChartProps,
);
expect(result.bigNumber).toEqual(456);
});
it('should use formatTime as headerFormatter for Temporal/String or forced', () => {
const formData = { ...baseFormData, forceTimestampFormatting: true };
const chartProps = {
width: 600,
height: 450,
queriesData: [
{
data: [
{ __timestamp: 2, value: '123' },
] as unknown as BigNumberDatum[],
colnames: ['__timestamp', 'value'],
coltypes: [0, GenericDataType.String],
},
],
formData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
theme: { colors: { grayscale: { light5: '#eee' } } },
};
const result = transformProps(
chartProps as unknown as BigNumberWithTrendlineChartProps,
);
expect(result.headerFormatter(5)).toBe('5pm');
});
it('should use numberFormatter when not Temporal/String and not forced', () => {
const formData = { ...baseFormData, forceTimestampFormatting: false };
const chartProps = {
width: 600,
height: 450,
queriesData: [
{
data: [{ __timestamp: 2, value: 500 }] as unknown as BigNumberDatum[],
colnames: ['__timestamp', 'value'],
coltypes: [0, 0],
},
],
formData,
rawFormData: baseRawFormData,
hooks: baseHooks,
datasource: baseDatasource,
theme: { colors: { grayscale: { light5: '#eee' } } },
};
const result = transformProps(
chartProps as unknown as BigNumberWithTrendlineChartProps,
);
expect(result.headerFormatter.format(500)).toBe('$500');
});
});

View File

@@ -35,7 +35,7 @@ import {
BigNumberWithTrendlineChartProps,
TimeSeriesDatum,
} from '../types';
import { getDateFormatter, parseMetricValue, getOriginalLabel } from '../utils';
import { getDateFormatter, parseMetricValue } from '../utils';
import { getDefaultTooltip } from '../../utils/tooltip';
import { Refs } from '../../types';
@@ -62,13 +62,10 @@ export default function transformProps(
compareLag: compareLag_,
compareSuffix = '',
timeFormat,
metricNameFontSize,
headerFontSize,
metric = 'value',
showTimestamp,
showTrendLine,
subtitle = '',
subtitleFontSize,
aggregation,
startYAxisAtZero,
subheader = '',
@@ -97,9 +94,6 @@ export default function transformProps(
const aggregatedData = hasAggregatedData ? aggregatedQueryData.data[0] : null;
const refs: Refs = {};
const metricName = getMetricLabel(metric);
const metrics = chartProps.datasource?.metrics || [];
const originalLabel = getOriginalLabel(metric, metrics);
const showMetricName = chartProps.rawFormData?.show_metric_name ?? false;
const compareLag = Number(compareLag_) || 0;
let formattedSubheader = subheader;
@@ -307,12 +301,7 @@ export default function transformProps(
headerFormatter,
formatTime,
formData,
metricName: originalLabel,
showMetricName,
metricNameFontSize,
headerFontSize,
subtitleFontSize,
subtitle,
subheaderFontSize,
mainColor,
showTimestamp,

View File

@@ -21,95 +21,70 @@
import { t } from '@superset-ui/core';
import { CustomControlItem } from '@superset-ui/chart-controls';
const FONT_SIZE_OPTIONS_SMALL = [
{ label: t('Tiny'), value: 0.125 },
{ label: t('Small'), value: 0.15 },
{ label: t('Normal'), value: 0.2 },
{ label: t('Large'), value: 0.3 },
{ label: t('Huge'), value: 0.4 },
];
const FONT_SIZE_OPTIONS_LARGE = [
{ label: t('Tiny'), value: 0.2 },
{ label: t('Small'), value: 0.3 },
{ label: t('Normal'), value: 0.4 },
{ label: t('Large'), value: 0.5 },
{ label: t('Huge'), value: 0.6 },
];
function makeFontSizeControl(
name: string,
label: string,
defaultValue: number,
options: { label: string; value: number }[],
): CustomControlItem {
return {
name,
config: {
type: 'SelectControl',
label: t(label),
renderTrigger: true,
clearable: false,
default: defaultValue,
options,
},
};
}
export const headerFontSize = makeFontSizeControl(
'header_font_size',
'Big Number Font Size',
0.4,
FONT_SIZE_OPTIONS_LARGE,
);
export const subtitleFontSize = makeFontSizeControl(
'subtitle_font_size',
'Subtitle Font Size',
0.15,
FONT_SIZE_OPTIONS_SMALL,
);
export const subheaderFontSize = makeFontSizeControl(
'subheader_font_size',
'Subheader Font Size',
0.15,
FONT_SIZE_OPTIONS_SMALL,
);
export const metricNameFontSize = makeFontSizeControl(
'metric_name_font_size',
'Metric Name Font Size',
0.15,
FONT_SIZE_OPTIONS_SMALL,
);
export const subtitleControl: CustomControlItem = {
name: 'subtitle',
export const headerFontSize: CustomControlItem = {
name: 'header_font_size',
config: {
type: 'TextControl',
label: t('Subtitle'),
type: 'SelectControl',
label: t('Big Number Font Size'),
renderTrigger: true,
description: t('Description text that shows up below your Big Number'),
clearable: false,
default: 0.4,
// Values represent the percentage of space a header should take
options: [
{
label: t('Tiny'),
value: 0.2,
},
{
label: t('Small'),
value: 0.3,
},
{
label: t('Normal'),
value: 0.4,
},
{
label: t('Large'),
value: 0.5,
},
{
label: t('Huge'),
value: 0.6,
},
],
},
};
export const showMetricNameControl: CustomControlItem = {
name: 'show_metric_name',
export const subheaderFontSize: CustomControlItem = {
name: 'subheader_font_size',
config: {
type: 'CheckboxControl',
label: t('Show Metric Name'),
type: 'SelectControl',
label: t('Subheader Font Size'),
renderTrigger: true,
default: false,
description: t('Whether to display the metric name'),
},
};
export const metricNameFontSizeWithVisibility: CustomControlItem = {
...metricNameFontSize,
config: {
...metricNameFontSize.config,
visibility: ({ controls }) => controls?.show_metric_name?.value === true,
resetOnHide: false,
clearable: false,
default: 0.15,
// Values represent the percentage of space a subheader should take
options: [
{
label: t('Tiny'),
value: 0.125,
},
{
label: t('Small'),
value: 0.15,
},
{
label: t('Normal'),
value: 0.2,
},
{
label: t('Large'),
value: 0.3,
},
{
label: t('Huge'),
value: 0.4,
},
],
},
};

View File

@@ -75,16 +75,10 @@ export type BigNumberVizProps = {
bigNumberFallback?: TimeSeriesDatum;
headerFormatter: ValueFormatter | TimeFormatter;
formatTime?: TimeFormatter;
metricName?: string;
friendlyMetricName?: string;
metricNameFontSize?: number;
showMetricName?: boolean;
headerFontSize: number;
kickerFontSize?: number;
subheader?: string;
subtitle: string;
subheader: string;
subheaderFontSize: number;
subtitleFontSize: number;
showTimestamp?: boolean;
showTrendLine?: boolean;
startYAxisAtZero?: boolean;

View File

@@ -22,10 +22,6 @@ import utc from 'dayjs/plugin/utc';
import {
getTimeFormatter,
getTimeFormatterForGranularity,
isAdhocMetricSimple,
isSavedMetric,
Metric,
QueryFormMetric,
SMART_DATE_ID,
TimeGranularity,
} from '@superset-ui/core';
@@ -51,43 +47,3 @@ export const getDateFormatter = (
timeFormat === SMART_DATE_ID
? getTimeFormatterForGranularity(granularity)
: getTimeFormatter(timeFormat ?? fallbackFormat);
export function getOriginalLabel(
metric: QueryFormMetric,
metrics: Metric[] = [],
): string {
const metricLabel = typeof metric === 'string' ? metric : metric.label || '';
if (isSavedMetric(metric)) {
const metricEntry = metrics.find(m => m.metric_name === metric);
return (
metricEntry?.verbose_name ||
metricEntry?.metric_name ||
metric ||
'Unknown Metric'
);
}
if (isAdhocMetricSimple(metric)) {
const column = metric.column || {};
const columnName = column.column_name || 'unknown_column';
const verboseName = column.verbose_name || columnName;
const aggregate = metric.aggregate || 'UNKNOWN';
return metric.hasCustomLabel && metric.label
? metric.label
: `${aggregate}(${verboseName})`;
}
if (
typeof metric === 'object' &&
'expressionType' in metric &&
metric.expressionType === 'SQL' &&
'sqlExpression' in metric
) {
return metric.hasCustomLabel && metric.label
? metric.label
: metricLabel || 'Custom Metric';
}
return metricLabel || 'Unknown Metric';
}

View File

@@ -150,7 +150,7 @@ export default function transformProps(
data: data.map(row =>
colnames.map(col => {
const value = row[col];
if (value === null || value === undefined) {
if (!value) {
return NULL_STRING;
}
if (typeof value === 'boolean' || typeof value === 'bigint') {

View File

@@ -84,7 +84,7 @@ export default function transformProps(
.filter(key => !groupbySet.has(key))
.map(key => {
const array = key.split(' - ').map(value => parseFloat(value));
return `${xAxisFormatter(array[0])} - ${xAxisFormatter(array[1])}`;
return `${xAxisFormatter(array[0])} '-' ${xAxisFormatter(array[1])}`;
});
const barSeries: BarSeriesOption[] = data.map(datum => {
const seriesName =

View File

@@ -57,7 +57,7 @@ export default class EchartsSankeyChartPlugin extends ChartPlugin<
),
exampleGallery: [{ url: example1 }, { url: example2 }],
name: t('Sankey Chart'),
tags: [t('Directional'), t('ECharts'), t('Distribution'), t('Flow')],
tags: [t('Directional'), t('Distribution'), t('Flow')],
thumbnail,
}),
transformProps,

View File

@@ -58,7 +58,6 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
name: t('Generic Chart'),
tags: [
t('Advanced-Analytics'),
t('ECharts'),
t('Line'),
t('Predictive'),
t('Time'),

View File

@@ -179,8 +179,8 @@ export default function transformProps(
xAxisBounds,
xAxisForceCategorical,
xAxisLabelRotation,
xAxisSort,
xAxisSortAsc,
xAxisSortSeries,
xAxisSortSeriesAscending,
xAxisTimeFormat,
xAxisTitle,
xAxisTitleMargin,
@@ -242,8 +242,10 @@ export default function transformProps(
isHorizontal,
sortSeriesType,
sortSeriesAscending,
xAxisSortSeries: isMultiSeries ? xAxisSort : undefined,
xAxisSortSeriesAscending: isMultiSeries ? xAxisSortAsc : undefined,
xAxisSortSeries: isMultiSeries ? xAxisSortSeries : undefined,
xAxisSortSeriesAscending: isMultiSeries
? xAxisSortSeriesAscending
: undefined,
},
);
const showValueIndexes = extractShowValueIndexes(rawSeries, {

View File

@@ -25,7 +25,6 @@ import {
useLayoutEffect,
useCallback,
Ref,
useState,
} from 'react';
import { useSelector } from 'react-redux';
@@ -107,16 +106,6 @@ use([
LabelLayout,
]);
const loadLocale = async (locale: string) => {
let lang;
try {
lang = await import(`echarts/lib/i18n/lang${locale}`);
} catch (e) {
console.error(`Locale ${locale} not supported in ECharts`, e);
}
return lang?.default;
};
function Echart(
{
width,
@@ -134,7 +123,6 @@ function Echart(
// eslint-disable-next-line no-param-reassign
refs.divRef = divRef;
}
const [didMount, setDidMount] = useState(false);
const chartRef = useRef<EChartsType>();
const currentSelection = useMemo(
() => Object.keys(selectedValues) || [],
@@ -160,20 +148,20 @@ function Echart(
);
useEffect(() => {
loadLocale(locale).then(localeObj => {
if (localeObj) {
registerLocale(locale, localeObj);
}
const loadLocaleAndInitChart = async () => {
if (!divRef.current) return;
const lang = await import(`echarts/lib/i18n/lang${locale}`).catch(e => {
console.error(`Locale ${locale} not supported in ECharts`, e);
});
if (lang?.default) {
registerLocale(locale, lang.default);
}
if (!chartRef.current) {
chartRef.current = init(divRef.current, null, { locale });
}
setDidMount(true);
});
}, [locale]);
useEffect(() => {
if (didMount) {
Object.entries(eventHandlers || {}).forEach(([name, handler]) => {
chartRef.current?.off(name);
chartRef.current?.on(name, handler);
@@ -184,14 +172,14 @@ function Echart(
chartRef.current?.getZr().on(name, handler);
});
chartRef.current?.setOption(echartOptions, true);
chartRef.current.setOption(echartOptions, true);
// did mount
handleSizeChange({ width, height });
}
}, [didMount, echartOptions, eventHandlers, zrEventHandlers]);
};
useEffect(() => () => chartRef.current?.dispose(), []);
loadLocaleAndInitChart();
}, [echartOptions, eventHandlers, zrEventHandlers, locale]);
// highlighting
useEffect(() => {

View File

@@ -78,7 +78,7 @@ export function getTooltipTimeFormatter(
format?: string,
): TimeFormatter | StringConstructor {
if (format === SMART_DATE_ID) {
return getSmartDateVerboseFormatter();
return getSmartDateDetailedFormatter();
}
if (format) {
return getTimeFormatter(format);

View File

@@ -149,7 +149,6 @@ describe('BigNumberWithTrendline', () => {
label: 'value',
metric_name: 'value',
d3format: '.2f',
uuid: '1',
},
],
},
@@ -175,7 +174,6 @@ describe('BigNumberWithTrendline', () => {
metric_name: 'value',
d3format: '.2f',
currency: { symbol: 'USD', symbolPosition: 'prefix' },
uuid: '1',
},
],
},

View File

@@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-extraneous-dependencies */
import {
useCallback,
useRef,
@@ -25,7 +24,6 @@ import {
MutableRefObject,
CSSProperties,
DragEvent,
useEffect,
} from 'react';
import {
@@ -41,9 +39,8 @@ import {
Row,
} from 'react-table';
import { matchSorter, rankings } from 'match-sorter';
import { styled, typedMemo, usePrevious } from '@superset-ui/core';
import { typedMemo, usePrevious } from '@superset-ui/core';
import { isEqual } from 'lodash';
import { Space } from 'antd';
import GlobalFilter, { GlobalFilterProps } from './components/GlobalFilter';
import SelectPageSize, {
SelectPageSizeProps,
@@ -53,8 +50,6 @@ import SimplePagination from './components/Pagination';
import useSticky from './hooks/useSticky';
import { PAGE_SIZE_OPTIONS } from '../consts';
import { sortAlphanumericCaseInsensitive } from './utils/sortAlphanumericCaseInsensitive';
import { SearchOption, SortByItem } from '../types';
import SearchSelectDropdown from './components/SearchSelectDropdown';
export interface DataTableProps<D extends object> extends TableOptions<D> {
tableClassName?: string;
@@ -67,12 +62,7 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
height?: string | number;
serverPagination?: boolean;
onServerPaginationChange: (pageNumber: number, pageSize: number) => void;
serverPaginationData: {
pageSize?: number;
currentPage?: number;
sortBy?: SortByItem[];
searchColumn?: string;
};
serverPaginationData: { pageSize?: number; currentPage?: number };
pageSize?: number;
noResults?: string | ((filterString: string) => ReactNode);
sticky?: boolean;
@@ -81,14 +71,6 @@ export interface DataTableProps<D extends object> extends TableOptions<D> {
onColumnOrderChange: () => void;
renderGroupingHeaders?: () => JSX.Element;
renderTimeComparisonDropdown?: () => JSX.Element;
handleSortByChange: (sortBy: SortByItem[]) => void;
sortByFromParent: SortByItem[];
manualSearch?: boolean;
onSearchChange?: (searchText: string) => void;
initialSearchText?: string;
searchInputId?: string;
onSearchColChange: (searchCol: string) => void;
searchOptions: SearchOption[];
}
export interface RenderHTMLCellProps extends HTMLProps<HTMLTableCellElement> {
@@ -99,20 +81,6 @@ const sortTypes = {
alphanumeric: sortAlphanumericCaseInsensitive,
};
const StyledSpace = styled(Space)`
display: flex;
justify-content: flex-end;
.search-select-container {
display: flex;
}
.search-by-label {
align-self: center;
margin-right: 4px;
}
`;
// Be sure to pass our updateMyData and the skipReset option
export default typedMemo(function DataTable<D extends object>({
tableClassName,
@@ -137,14 +105,6 @@ export default typedMemo(function DataTable<D extends object>({
onColumnOrderChange,
renderGroupingHeaders,
renderTimeComparisonDropdown,
handleSortByChange,
sortByFromParent = [],
manualSearch = false,
onSearchChange,
initialSearchText,
searchInputId,
onSearchColChange,
searchOptions,
...moreUseTableOptions
}: DataTableProps<D>): JSX.Element {
const tableHooks: PluginHook<D>[] = [
@@ -155,7 +115,6 @@ export default typedMemo(function DataTable<D extends object>({
doSticky ? useSticky : [],
hooks || [],
].flat();
const columnNames = Object.keys(data?.[0] || {});
const previousColumnNames = usePrevious(columnNames);
const resultsSize = serverPagination ? rowCount : data.length;
@@ -168,8 +127,7 @@ export default typedMemo(function DataTable<D extends object>({
...initialState_,
// zero length means all pages, the `usePagination` plugin does not
// understand pageSize = 0
// sortBy: sortByRef.current,
sortBy: serverPagination ? sortByFromParent : sortByRef.current,
sortBy: sortByRef.current,
pageSize: initialPageSize > 0 ? initialPageSize : resultsSize || 10,
};
const defaultWrapperRef = useRef<HTMLDivElement>(null);
@@ -230,13 +188,7 @@ export default typedMemo(function DataTable<D extends object>({
wrapStickyTable,
setColumnOrder,
allColumns,
state: {
pageIndex,
pageSize,
globalFilter: filterValue,
sticky = {},
sortBy,
},
state: { pageIndex, pageSize, globalFilter: filterValue, sticky = {} },
} = useTable<D>(
{
columns,
@@ -246,46 +198,10 @@ export default typedMemo(function DataTable<D extends object>({
globalFilter: defaultGlobalFilter,
sortTypes,
autoResetSortBy: !isEqual(columnNames, previousColumnNames),
manualSortBy: !!serverPagination,
...moreUseTableOptions,
},
...tableHooks,
);
const handleSearchChange = useCallback(
(query: string) => {
if (manualSearch && onSearchChange) {
onSearchChange(query);
} else {
setGlobalFilter(query);
}
},
[manualSearch, onSearchChange, setGlobalFilter],
);
// updating the sort by to the own State of table viz
useEffect(() => {
const serverSortBy = serverPaginationData?.sortBy || [];
if (serverPagination && !isEqual(sortBy, serverSortBy)) {
if (Array.isArray(sortBy) && sortBy.length > 0) {
const [sortByItem] = sortBy;
const matchingColumn = columns.find(col => col?.id === sortByItem?.id);
if (matchingColumn && 'columnKey' in matchingColumn) {
const sortByWithColumnKey: SortByItem = {
...sortByItem,
key: (matchingColumn as { columnKey: string }).columnKey,
};
handleSortByChange([sortByWithColumnKey]);
}
} else {
handleSortByChange([]);
}
}
}, [sortBy]);
// make setPageSize accept 0
const setPageSize = (size: number) => {
if (serverPagination) {
@@ -439,7 +355,6 @@ export default typedMemo(function DataTable<D extends object>({
resultOnPageChange = (pageNumber: number) =>
onServerPaginationChange(pageNumber, serverPageSize);
}
return (
<div
ref={wrapperRef}
@@ -466,31 +381,16 @@ export default typedMemo(function DataTable<D extends object>({
) : null}
</div>
{searchInput ? (
<StyledSpace className="col-sm-6">
{serverPagination && (
<div className="search-select-container">
<span className="search-by-label">Search by: </span>
<SearchSelectDropdown
searchOptions={searchOptions}
value={serverPaginationData?.searchColumn || ''}
onChange={onSearchColChange}
/>
</div>
)}
<div className="col-sm-6">
<GlobalFilter<D>
searchInput={
typeof searchInput === 'boolean' ? undefined : searchInput
}
preGlobalFilteredRows={preGlobalFilteredRows}
setGlobalFilter={
manualSearch ? handleSearchChange : setGlobalFilter
}
filterValue={manualSearch ? initialSearchText : filterValue}
id={searchInputId}
serverPagination={!!serverPagination}
rowCount={rowCount}
setGlobalFilter={setGlobalFilter}
filterValue={filterValue}
/>
</StyledSpace>
</div>
) : null}
{renderTimeComparisonDropdown ? (
<div

View File

@@ -16,13 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
import {
memo,
ComponentType,
ChangeEventHandler,
useRef,
useEffect,
} from 'react';
import { memo, ComponentType, ChangeEventHandler } from 'react';
import { Row, FilterValue } from 'react-table';
import useAsyncState from '../utils/useAsyncState';
@@ -30,12 +24,8 @@ export interface SearchInputProps {
count: number;
value: string;
onChange: ChangeEventHandler<HTMLInputElement>;
onBlur?: () => void;
inputRef?: React.RefObject<HTMLInputElement>;
}
const isSearchFocused = new Map();
export interface GlobalFilterProps<D extends object> {
preGlobalFilteredRows: Row<D>[];
// filter value cannot be `undefined` otherwise React will report component
@@ -43,28 +33,17 @@ export interface GlobalFilterProps<D extends object> {
filterValue: string;
setGlobalFilter: (filterValue: FilterValue) => void;
searchInput?: ComponentType<SearchInputProps>;
id?: string;
serverPagination: boolean;
rowCount: number;
}
function DefaultSearchInput({
count,
value,
onChange,
onBlur,
inputRef,
}: SearchInputProps) {
function DefaultSearchInput({ count, value, onChange }: SearchInputProps) {
return (
<span className="dt-global-filter">
Search{' '}
<input
ref={inputRef}
className="form-control input-sm"
placeholder={`${count} records...`}
value={value}
onChange={onChange}
onBlur={onBlur}
/>
</span>
);
@@ -77,13 +56,8 @@ export default (memo as <T>(fn: T) => T)(function GlobalFilter<
filterValue = '',
searchInput,
setGlobalFilter,
id = '',
serverPagination,
rowCount,
}: GlobalFilterProps<D>) {
const count = serverPagination ? rowCount : preGlobalFilteredRows.length;
const inputRef = useRef<HTMLInputElement>(null);
const count = preGlobalFilteredRows.length;
const [value, setValue] = useAsyncState(
filterValue,
(newValue: string) => {
@@ -92,37 +66,17 @@ export default (memo as <T>(fn: T) => T)(function GlobalFilter<
200,
);
// Preserve focus during server-side filtering to maintain a better user experience
useEffect(() => {
if (
serverPagination &&
isSearchFocused.get(id) &&
document.activeElement !== inputRef.current
) {
inputRef.current?.focus();
}
}, [value, serverPagination]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const target = e.target as HTMLInputElement;
e.preventDefault();
isSearchFocused.set(id, true);
setValue(target.value);
};
const handleBlur = () => {
isSearchFocused.set(id, false);
};
const SearchInput = searchInput || DefaultSearchInput;
return (
<SearchInput
count={count}
value={value}
inputRef={inputRef}
onChange={handleChange}
onBlur={handleBlur}
onChange={e => {
const target = e.target as HTMLInputElement;
e.preventDefault();
setValue(target.value);
}}
/>
);
});

View File

@@ -1,53 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
/* eslint-disable import/no-extraneous-dependencies */
import { styled } from '@superset-ui/core';
import { Select } from 'antd';
import { SearchOption } from '../../types';
const StyledSelect = styled(Select)`
width: 120px;
margin-right: 8px;
`;
interface SearchSelectDropdownProps {
/** The currently selected search column value */
value?: string;
/** Callback triggered when a new search column is selected */
onChange: (searchCol: string) => void;
/** Available search column options to populate the dropdown */
searchOptions: SearchOption[];
}
function SearchSelectDropdown({
value,
onChange,
searchOptions,
}: SearchSelectDropdownProps) {
return (
<StyledSelect
className="search-select"
value={value || (searchOptions?.[0]?.value ?? '')}
options={searchOptions}
onChange={onChange}
/>
);
}
export default SearchSelectDropdown;

View File

@@ -115,11 +115,3 @@ declare module 'react-table' {
extends UseTableHooks<D>,
UseSortByHooks<D> {}
}
interface TableOwnState {
currentPage?: number;
pageSize?: number;
sortColumn?: string;
sortOrder?: 'asc' | 'desc';
searchText?: string;
}

View File

@@ -18,7 +18,6 @@
*/
import { SetDataMaskHook } from '@superset-ui/core';
import { TableOwnState } from '../types/react-table';
export const updateExternalFormData = (
setDataMask: SetDataMaskHook = () => {},
@@ -31,11 +30,3 @@ export const updateExternalFormData = (
pageSize,
},
});
export const updateTableOwnState = (
setDataMask: SetDataMaskHook = () => {},
modifiedOwnState: TableOwnState,
) =>
setDataMask({
ownState: modifiedOwnState,
});

View File

@@ -24,7 +24,6 @@ import {
useState,
MouseEvent,
KeyboardEvent as ReactKeyboardEvent,
useEffect,
} from 'react';
import {
@@ -62,12 +61,10 @@ import {
PlusCircleOutlined,
TableOutlined,
} from '@ant-design/icons';
import { debounce, isEmpty, isEqual } from 'lodash';
import { isEmpty } from 'lodash';
import {
ColorSchemeEnum,
DataColumnMeta,
SearchOption,
SortByItem,
TableChartTransformedProps,
} from './types';
import DataTable, {
@@ -80,7 +77,7 @@ import DataTable, {
import Styles from './Styles';
import { formatColumnValue } from './utils/formatValue';
import { PAGE_SIZE_OPTIONS } from './consts';
import { updateTableOwnState } from './DataTable/utils/externalAPIs';
import { updateExternalFormData } from './DataTable/utils/externalAPIs';
import getScrollBarSize from './DataTable/utils/getScrollBarSize';
type ValueRange = [number, number];
@@ -179,26 +176,20 @@ function SortIcon<D extends object>({ column }: { column: ColumnInstance<D> }) {
return sortIcon;
}
const SearchInput = ({
count,
value,
onChange,
onBlur,
inputRef,
}: SearchInputProps) => (
<span className="dt-global-filter">
{t('Search')}{' '}
<input
ref={inputRef}
aria-label={t('Search %s records', count)}
className="form-control input-sm"
placeholder={tn('search.num_records', count)}
value={value}
onChange={onChange}
onBlur={onBlur}
/>
</span>
);
function SearchInput({ count, value, onChange }: SearchInputProps) {
return (
<span className="dt-global-filter">
{t('Search')}{' '}
<input
aria-label={t('Search %s records', count)}
className="form-control input-sm"
placeholder={tn('search.num_records', count)}
value={value}
onChange={onChange}
/>
</span>
);
}
function SelectPageSize({
options,
@@ -276,9 +267,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
isUsingTimeComparison,
basicColorFormatters,
basicColorColumnFormatters,
hasServerPageLengthChanged,
serverPageLength,
slice_id,
} = props;
const comparisonColumns = [
{ key: 'all', label: t('Display all') },
@@ -691,41 +679,16 @@ export default function TableChart<D extends DataRecord = DataRecord>(
);
const getColumnConfigs = useCallback(
(
column: DataColumnMeta,
i: number,
): ColumnWithLooseAccessor<D> & {
columnKey: string;
} => {
(column: DataColumnMeta, i: number): ColumnWithLooseAccessor<D> => {
const {
key,
label: originalLabel,
label,
isNumeric,
dataType,
isMetric,
isPercentMetric,
config = {},
} = column;
const label = config.customColumnName || originalLabel;
let displayLabel = label;
const isComparisonColumn = ['#', '△', '%', t('Main')].includes(
column.label,
);
if (isComparisonColumn) {
if (column.label === t('Main')) {
displayLabel = config.customColumnName || column.originalLabel || '';
} else if (config.customColumnName) {
displayLabel =
config.displayTypeIcon !== false
? `${column.label} ${config.customColumnName}`
: config.customColumnName;
} else if (config.displayTypeIcon === false) {
displayLabel = '';
}
}
const columnWidth = Number.isNaN(Number(config.columnWidth))
? config.columnWidth
: Number(config.columnWidth);
@@ -783,7 +746,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
// must use custom accessor to allow `.` in column names
// typing is incorrect in current version of `@types/react-table`
// so we ask TS not to check.
columnKey: key,
accessor: ((datum: D) => datum[key]) as never,
Cell: ({ value, row }: { value: DataRecordValue; row: Row<D> }) => {
const [isHtml, text] = formatColumnValue(column, value);
@@ -833,9 +795,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
white-space: ${value instanceof Date ? 'nowrap' : undefined};
position: relative;
background: ${backgroundColor || undefined};
padding-left: ${column.isChildColumn
? `${theme.gridUnit * 5}px`
: `${theme.gridUnit}px`};
`;
const cellBarStyles = css`
@@ -1011,12 +970,11 @@ export default function TableChart<D extends DataRecord = DataRecord>(
alignItems: 'flex-end',
}}
>
<span data-column-name={col.id}>{displayLabel}</span>
<span data-column-name={col.id}>{label}</span>
<SortIcon column={col} />
</div>
</th>
),
Footer: totals ? (
i === 0 ? (
<th key={`footer-summary-${i}`}>
@@ -1066,60 +1024,18 @@ export default function TableChart<D extends DataRecord = DataRecord>(
],
);
const visibleColumnsMeta = useMemo(
() => filteredColumnsMeta.filter(col => col.config?.visible !== false),
[filteredColumnsMeta],
);
const columns = useMemo(
() => visibleColumnsMeta.map(getColumnConfigs),
[visibleColumnsMeta, getColumnConfigs],
() => filteredColumnsMeta.map(getColumnConfigs),
[filteredColumnsMeta, getColumnConfigs],
);
const [searchOptions, setSearchOptions] = useState<SearchOption[]>([]);
useEffect(() => {
const options = (
columns as unknown as ColumnWithLooseAccessor &
{
columnKey: string;
sortType?: string;
}[]
)
.filter(col => col?.sortType === 'alphanumeric')
.map(column => ({
value: column.columnKey,
label: column.columnKey,
}));
if (!isEqual(options, searchOptions)) {
setSearchOptions(options || []);
}
}, [columns]);
const handleServerPaginationChange = useCallback(
(pageNumber: number, pageSize: number) => {
const modifiedOwnState = {
...serverPaginationData,
currentPage: pageNumber,
pageSize,
};
updateTableOwnState(setDataMask, modifiedOwnState);
updateExternalFormData(setDataMask, pageNumber, pageSize);
},
[setDataMask],
);
useEffect(() => {
if (hasServerPageLengthChanged) {
const modifiedOwnState = {
...serverPaginationData,
currentPage: 0,
pageSize: serverPageLength,
};
updateTableOwnState(setDataMask, modifiedOwnState);
}
}, []);
const handleSizeChange = useCallback(
({ width, height }: { width: number; height: number }) => {
setTableSize({ width, height });
@@ -1155,42 +1071,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
const { width: widthFromState, height: heightFromState } = tableSize;
const handleSortByChange = useCallback(
(sortBy: SortByItem[]) => {
if (!serverPagination) return;
const modifiedOwnState = {
...serverPaginationData,
sortBy,
};
updateTableOwnState(setDataMask, modifiedOwnState);
},
[setDataMask, serverPagination],
);
const handleSearch = (searchText: string) => {
const modifiedOwnState = {
...(serverPaginationData || {}),
searchColumn:
serverPaginationData?.searchColumn || searchOptions[0]?.value,
searchText,
currentPage: 0, // Reset to first page when searching
};
updateTableOwnState(setDataMask, modifiedOwnState);
};
const debouncedSearch = debounce(handleSearch, 800);
const handleChangeSearchCol = (searchCol: string) => {
if (!isEqual(searchCol, serverPaginationData?.searchColumn)) {
const modifiedOwnState = {
...(serverPaginationData || {}),
searchColumn: searchCol,
searchText: '',
};
updateTableOwnState(setDataMask, modifiedOwnState);
}
};
return (
<Styles>
<DataTable<D>
@@ -1206,9 +1086,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
serverPagination={serverPagination}
onServerPaginationChange={handleServerPaginationChange}
onColumnOrderChange={() => setColumnOrderToggle(!columnOrderToggle)}
initialSearchText={serverPaginationData?.searchText || ''}
sortByFromParent={serverPaginationData?.sortBy || []}
searchInputId={`${slice_id}-search`}
// 9 page items in > 340px works well even for 100+ pages
maxPageItemCount={width > 340 ? 9 : 7}
noResults={getNoResultsMessage}
@@ -1222,11 +1099,6 @@ export default function TableChart<D extends DataRecord = DataRecord>(
renderTimeComparisonDropdown={
isUsingTimeComparison ? renderTimeComparisonDropdown : undefined
}
handleSortByChange={handleSortByChange}
onSearchColChange={handleChangeSearchCol}
manualSearch={serverPagination}
onSearchChange={debouncedSearch}
searchOptions={searchOptions}
/>
</Styles>
);

View File

@@ -22,7 +22,6 @@ import {
ensureIsArray,
getMetricLabel,
isPhysicalColumn,
QueryFormOrderBy,
QueryMode,
QueryObject,
removeDuplicates,
@@ -35,7 +34,7 @@ import {
} from '@superset-ui/chart-controls';
import { isEmpty } from 'lodash';
import { TableChartFormData } from './types';
import { updateTableOwnState } from './DataTable/utils/externalAPIs';
import { updateExternalFormData } from './DataTable/utils/externalAPIs';
/**
* Infer query mode from form data. If `all_columns` is set, then raw records mode,
@@ -192,40 +191,18 @@ const buildQuery: BuildQuery<TableChartFormData> = (
const moreProps: Partial<QueryObject> = {};
const ownState = options?.ownState ?? {};
// Build Query flag to check if its for either download as csv, excel or json
const isDownloadQuery =
['csv', 'xlsx'].includes(formData?.result_format || '') ||
(formData?.result_format === 'json' &&
formData?.result_type === 'results');
if (isDownloadQuery) {
moreProps.row_limit = Number(formDataCopy.row_limit) || 0;
moreProps.row_offset = 0;
}
if (!isDownloadQuery && formDataCopy.server_pagination) {
const pageSize = ownState.pageSize ?? formDataCopy.server_page_length;
const currentPage = ownState.currentPage ?? 0;
moreProps.row_limit = pageSize;
moreProps.row_offset = currentPage * pageSize;
}
// getting sort by in case of server pagination from own state
let sortByFromOwnState: QueryFormOrderBy[] | undefined;
if (Array.isArray(ownState?.sortBy) && ownState?.sortBy.length > 0) {
const sortByItem = ownState?.sortBy[0];
sortByFromOwnState = [[sortByItem?.key, !sortByItem?.desc]];
if (formDataCopy.server_pagination) {
moreProps.row_limit =
ownState.pageSize ?? formDataCopy.server_page_length;
moreProps.row_offset =
(ownState.currentPage ?? 0) * (ownState.pageSize ?? 0);
}
let queryObject = {
...baseQueryObject,
columns,
extras,
orderby:
formData.server_pagination && sortByFromOwnState
? sortByFromOwnState
: orderby,
orderby,
metrics,
post_processing: postProcessing,
time_offsets: timeOffsets,
@@ -239,12 +216,11 @@ const buildQuery: BuildQuery<TableChartFormData> = (
JSON.stringify(queryObject.filters)
) {
queryObject = { ...queryObject, row_offset: 0 };
const modifiedOwnState = {
...(options?.ownState || {}),
currentPage: 0,
pageSize: queryObject.row_limit ?? 0,
};
updateTableOwnState(options?.hooks?.setDataMask, modifiedOwnState);
updateExternalFormData(
options?.hooks?.setDataMask,
0,
queryObject.row_limit ?? 0,
);
}
// Because we use same buildQuery for all table on the page we need split them by id
options?.hooks?.setCachedChanges({
@@ -276,32 +252,12 @@ const buildQuery: BuildQuery<TableChartFormData> = (
}
if (formData.server_pagination) {
// Add search filter if search text exists
if (ownState.searchText && ownState?.searchColumn) {
queryObject = {
...queryObject,
filters: [
...(queryObject.filters || []),
{
col: ownState?.searchColumn,
op: 'ILIKE',
val: `${ownState.searchText}%`,
},
],
};
}
}
// Now since row limit control is always visible even
// in case of server pagination
// we must use row limit from form data
if (formData.server_pagination && !isDownloadQuery) {
return [
{ ...queryObject },
{
...queryObject,
time_offsets: [],
row_limit: Number(formData?.row_limit) ?? 0,
row_limit: 0,
row_offset: 0,
post_processing: [],
is_rowcount: true,

View File

@@ -28,10 +28,7 @@ import {
ControlStateMapping,
D3_TIME_FORMAT_OPTIONS,
Dataset,
DEFAULT_MAX_ROW,
DEFAULT_MAX_ROW_TABLE_SERVER,
defineSavedMetrics,
formatSelectOptions,
getStandardizedControls,
QueryModeLabel,
sections,
@@ -40,20 +37,15 @@ import {
import {
ensureIsArray,
GenericDataType,
getMetricLabel,
isAdhocColumn,
isPhysicalColumn,
legacyValidateInteger,
QueryFormColumn,
QueryFormMetric,
QueryMode,
SMART_DATE_ID,
t,
validateMaxValue,
validateServerPagination,
} from '@superset-ui/core';
import { isEmpty, last } from 'lodash';
import { isEmpty } from 'lodash';
import { PAGE_SIZE_OPTIONS } from './consts';
import { ColorSchemeEnum } from './types';
@@ -194,15 +186,6 @@ const processComparisonColumns = (columns: any[], suffix: string) =>
})
.flat();
/*
Options for row limit control
*/
export const ROW_LIMIT_OPTIONS_TABLE = [
10, 50, 100, 250, 500, 1000, 5000, 10000, 50000, 100000, 150000, 200000,
250000, 300000, 350000, 400000, 450000, 500000,
];
const config: ControlPanelConfig = {
controlPanelSections: [
{
@@ -357,6 +340,14 @@ const config: ControlPanelConfig = {
},
],
[
{
name: 'row_limit',
override: {
default: 1000,
visibility: ({ controls }: ControlPanelsContainerProps) =>
!controls?.server_pagination?.value,
},
},
{
name: 'server_page_length',
config: {
@@ -371,47 +362,6 @@ const config: ControlPanelConfig = {
},
},
],
[
{
name: 'row_limit',
config: {
type: 'SelectControl',
freeForm: true,
label: t('Row limit'),
clearable: false,
mapStateToProps: state => ({
maxValue: state?.common?.conf?.TABLE_VIZ_MAX_ROW_SERVER,
server_pagination: state?.form_data?.server_pagination,
maxValueWithoutServerPagination:
state?.common?.conf?.SQL_MAX_ROW,
}),
validators: [
legacyValidateInteger,
(v, state) =>
validateMaxValue(
v,
state?.maxValue || DEFAULT_MAX_ROW_TABLE_SERVER,
),
(v, state) =>
validateServerPagination(
v,
state?.server_pagination,
state?.maxValueWithoutServerPagination || DEFAULT_MAX_ROW,
),
],
// Re run the validations when this control value
validationDependancies: ['server_pagination'],
default: 10000,
choices: formatSelectOptions(ROW_LIMIT_OPTIONS_TABLE),
description: t(
'Limits the number of the rows that are computed in the query that is the source of the data used for this chart.',
),
},
override: {
default: 1000,
},
},
],
[
{
name: 'order_desc',
@@ -536,69 +486,38 @@ const config: ControlPanelConfig = {
return true;
},
mapStateToProps(explore, _, chart) {
const timeComparisonValue =
explore?.controls?.time_compare?.value;
const timeComparisonStatus = !isEmpty(
explore?.controls?.time_compare?.value,
);
const { colnames: _colnames, coltypes: _coltypes } =
chart?.queriesResponse?.[0] ?? {};
let colnames: string[] = _colnames || [];
let coltypes: GenericDataType[] = _coltypes || [];
const childColumnMap: Record<string, boolean> = {};
const timeComparisonColumnMap: Record<string, boolean> = {};
if (!isEmpty(timeComparisonValue)) {
if (timeComparisonStatus) {
/**
* Replace numeric columns with sets of comparison columns.
*/
const updatedColnames: string[] = [];
const updatedColtypes: GenericDataType[] = [];
colnames
.filter(
colname =>
last(colname.split('__')) !== timeComparisonValue,
)
.forEach((colname, index) => {
if (
explore.form_data.metrics?.some(
metric => getMetricLabel(metric) === colname,
) ||
explore.form_data.percent_metrics?.some(
(metric: QueryFormMetric) =>
getMetricLabel(metric) === colname,
)
) {
const comparisonColumns =
generateComparisonColumns(colname);
comparisonColumns.forEach((name, idx) => {
updatedColnames.push(name);
updatedColtypes.push(
...generateComparisonColumnTypes(4),
);
timeComparisonColumnMap[name] = true;
if (idx === 0 && name.startsWith('Main ')) {
childColumnMap[name] = false;
} else {
childColumnMap[name] = true;
}
});
} else {
updatedColnames.push(colname);
updatedColtypes.push(coltypes[index]);
childColumnMap[colname] = false;
timeComparisonColumnMap[colname] = false;
}
});
colnames.forEach((colname, index) => {
if (coltypes[index] === GenericDataType.Numeric) {
updatedColnames.push(
...generateComparisonColumns(colname),
);
updatedColtypes.push(...generateComparisonColumnTypes(4));
} else {
updatedColnames.push(colname);
updatedColtypes.push(coltypes[index]);
}
});
colnames = updatedColnames;
coltypes = updatedColtypes;
}
return {
columnsPropsObject: {
colnames,
coltypes,
childColumnMap,
timeComparisonColumnMap,
},
columnsPropsObject: { colnames, coltypes },
};
},
},

View File

@@ -90,15 +90,6 @@ const processDataRecords = memoizeOne(function processDataRecords(
return data;
});
// Create a map to store cached values per slice
const sliceCache = new Map<
number,
{
cachedServerLength: number;
passedColumns?: DataColumnMeta[];
}
>();
const calculateDifferences = (
originalValue: number,
comparisonValue: number,
@@ -489,7 +480,6 @@ const transformProps = (
comparison_color_enabled: comparisonColorEnabled = false,
comparison_color_scheme: comparisonColorScheme = ColorSchemeEnum.Green,
comparison_type,
slice_id,
} = formData;
const isUsingTimeComparison =
!isEmpty(time_compare) &&
@@ -685,26 +675,6 @@ const transformProps = (
conditionalFormatting,
);
// Get cached values for this slice
const cachedValues = sliceCache.get(slice_id);
let hasServerPageLengthChanged = false;
if (
cachedValues?.cachedServerLength !== undefined &&
cachedValues.cachedServerLength !== serverPageLength
) {
hasServerPageLengthChanged = true;
}
// Update cache with new values
sliceCache.set(slice_id, {
cachedServerLength: serverPageLength,
passedColumns:
Array.isArray(passedColumns) && passedColumns?.length > 0
? passedColumns
: cachedValues?.passedColumns,
});
const startDateOffset = chartProps.rawFormData?.start_date_offset;
return {
height,
@@ -712,10 +682,7 @@ const transformProps = (
isRawRecords: queryMode === QueryMode.Raw,
data: passedData,
totals,
columns:
Array.isArray(passedColumns) && passedColumns?.length > 0
? passedColumns
: cachedValues?.passedColumns || [],
columns: passedColumns,
serverPagination,
metrics,
percentMetrics,
@@ -730,9 +697,7 @@ const transformProps = (
includeSearch,
rowCount,
pageSize: serverPagination
? serverPaginationData?.pageSize
? serverPaginationData?.pageSize
: serverPageLength
? serverPageLength
: getPageSize(pageLength, data.length, columns.length),
filters: filterState.filters,
emitCrossFilters,
@@ -746,9 +711,6 @@ const transformProps = (
basicColorFormatters,
startDateOffset,
basicColorColumnFormatters,
hasServerPageLengthChanged,
serverPageLength,
slice_id,
};
};

View File

@@ -49,9 +49,6 @@ export type TableColumnConfig = {
colorPositiveNegative?: boolean;
truncateLongCells?: boolean;
currencyFormat?: Currency;
visible?: boolean;
customColumnName?: string;
displayTypeIcon?: boolean;
};
export interface DataColumnMeta {
@@ -71,7 +68,6 @@ export interface DataColumnMeta {
isPercentMetric?: boolean;
isNumeric?: boolean;
config?: TableColumnConfig;
isChildColumn?: boolean;
}
export interface TableChartData {
@@ -114,32 +110,13 @@ export type BasicColorFormatterType = {
mainArrow: string;
};
export type SortByItem = {
id: string;
key: string;
desc?: boolean;
};
export type SearchOption = {
value: string;
label: string;
};
export interface ServerPaginationData {
pageSize?: number;
currentPage?: number;
sortBy?: SortByItem[];
searchText?: string;
searchColumn?: string;
}
export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
timeGrain?: TimeGranularity;
height: number;
width: number;
rowCount?: number;
serverPagination: boolean;
serverPaginationData: ServerPaginationData;
serverPaginationData: { pageSize?: number; currentPage?: number };
setDataMask: SetDataMaskHook;
isRawRecords?: boolean;
data: D[];
@@ -171,11 +148,6 @@ export interface TableChartTransformedProps<D extends DataRecord = DataRecord> {
basicColorFormatters?: { [Key: string]: BasicColorFormatterType }[];
basicColorColumnFormatters?: { [Key: string]: BasicColorFormatterType }[];
startDateOffset?: string;
// For explore page to reset the server Pagination data
// if server page length is changed from control panel
hasServerPageLengthChanged: boolean;
serverPageLength: number;
slice_id: number;
}
export enum ColorSchemeEnum {

Some files were not shown because too many files have changed in this diff Show More