feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)

This commit is contained in:
Đỗ Trọng Hải
2026-08-04 00:27:05 +07:00
committed by GitHub
parent 10f7927603
commit e4ef84ca72
2328 changed files with 90728 additions and 32682 deletions

View File

@@ -5,7 +5,7 @@ sidebar_position: 2
version: 1
---
import useBaseUrl from "@docusaurus/useBaseUrl";
import useBaseUrl from '@docusaurus/useBaseUrl';
## Exploring Data in Superset
@@ -32,12 +32,12 @@ explains how to enable this functionality for the examples database.
In the top menu, select **Settings ‣ Data ‣ Database Connections**. Find the **examples** database in the list and
select the **Edit** button.
<img src={useBaseUrl("/img/tutorial/edit-record.png" )} />
<img src={useBaseUrl('/img/tutorial/edit-record.png')} />
In the resulting modal window, switch to the **Advanced** tab and open **Security** section.
Then, tick the checkbox for **Allow file uploads to database**. End by clicking the **Finish** button.
<img src={useBaseUrl("/img/tutorial/allow-file-uploads.png" )} />
<img src={useBaseUrl('/img/tutorial/allow-file-uploads.png')} />
### Loading CSV Data
@@ -45,16 +45,16 @@ Download the CSV dataset to your computer from
[GitHub](https://raw.githubusercontent.com/apache-superset/examples-data/master/tutorial_flights.csv).
In the top menu, select **Settings ‣ Data ‣ Database Connections**. Then, **Upload file to database ‣ Upload CSV**.
<img src={useBaseUrl("/img/tutorial/upload_a_csv.png" )} />
<img src={useBaseUrl('/img/tutorial/upload_a_csv.png')} />
Then, select select the CSV file from your computer, select **Database** and **Schema**, and enter the **Table Name**
as _tutorial_flights_.
<img src={useBaseUrl("/img/tutorial/csv_to_database_configuration.png" )} />
<img src={useBaseUrl('/img/tutorial/csv_to_database_configuration.png')} />
Next enter the text _Travel Date_ into the **File settings ‣ Columns to be parsed as dates** field.
<img src={useBaseUrl("/img/tutorial/parse_dates_column.png" )} />
<img src={useBaseUrl('/img/tutorial/parse_dates_column.png')} />
Leaving all the other options in their default settings, select **Upload** at the bottom of the page.
@@ -70,7 +70,7 @@ By default, Apache Superset only shows the last week of data. In our example, we
of the data in the dataset. Click the **Time ‣ Time Range** section and change
the **Range Type** to **No Filter**.
<img src={useBaseUrl("/img/tutorial/no_filter_on_time_filter.png" )} />
<img src={useBaseUrl('/img/tutorial/no_filter_on_time_filter.png')} />
Click **Apply** to save.
@@ -80,24 +80,24 @@ example, we want to understand different Travel Classes, we select **Travel Clas
Next, we can specify the metrics we would like to see in our table with the **Metrics** option.
- `COUNT(*)`, which represents the number of rows in the table
(in this case, quantity of flights in each Travel Class)
(in this case, quantity of flights in each Travel Class)
- `SUM(Cost)`, which represents the total cost spent by each Travel Class
<img src={useBaseUrl("/img/tutorial/sum_cost_column.png" )} />
<img src={useBaseUrl('/img/tutorial/sum_cost_column.png')} />
Finally, select **Run Query** to see the results of the table.
<img src={useBaseUrl("/img/tutorial/tutorial_table.png" )} />
<img src={useBaseUrl('/img/tutorial/tutorial_table.png')} />
To save the visualization, click on **Save** in the top left of the screen. In the following modal,
- Select the **Save as**
option and enter the chart name as Tutorial Table (you will be able to find it again through the
**Charts** screen, accessible in the top menu).
option and enter the chart name as Tutorial Table (you will be able to find it again through the
**Charts** screen, accessible in the top menu).
- Select **Add To Dashboard** and enter
Tutorial Dashboard. Finally, select **Save & Go To Dashboard**.
Tutorial Dashboard. Finally, select **Save & Go To Dashboard**.
<img src={useBaseUrl("/img/tutorial/save_tutorial_table.png" )} />
<img src={useBaseUrl('/img/tutorial/save_tutorial_table.png')} />
### Dashboard Basics
@@ -109,7 +109,7 @@ On this dashboard you should see the table you created in the previous section.
dashboard** and then hover over the table. By selecting the bottom right hand corner of the table
(the cursor will change too), you can resize it by dragging and dropping.
<img src={useBaseUrl("/img/tutorial/resize_tutorial_table_on_dashboard.png" )} />
<img src={useBaseUrl('/img/tutorial/resize_tutorial_table_on_dashboard.png')} />
Finally, save your changes by selecting Save changes in the top right.
@@ -124,7 +124,7 @@ tutorial_flights again as a datasource, then click on the visualization type to
visualization menu. Select the **Pivot Table** visualization (you can filter by entering text in the
search box) and then **Create New Chart**.
<img src={useBaseUrl("/img/tutorial/create_pivot.png" )} />
<img src={useBaseUrl('/img/tutorial/create_pivot.png')} />
In the **Time** section, keep the Time Column as Travel Date (this is selected automatically as we
only have one time column in our dataset). Then select Time Grain to be month as having daily data
@@ -134,7 +134,7 @@ January 2011 and 30th June 2011 respectively by either entering directly the dat
calendar widget (by selecting the month name and then the year, you can move more quickly to far
away dates).
<img src={useBaseUrl("/img/tutorial/select_dates_pivot_table.png" )} />
<img src={useBaseUrl('/img/tutorial/select_dates_pivot_table.png')} />
Next, within the **Query** section, remove the default COUNT(\*) and add Cost, keeping the default
SUM aggregate. Note that Apache Superset will indicate the type of the metric by the symbol on the
@@ -146,7 +146,7 @@ selections we defined in the Time section.
Within **Columns**, first select Department and then Travel Class. All set lets **Run Query** to
see some data!
<img src={useBaseUrl("/img/tutorial/tutorial_pivot_table.png" )} />
<img src={useBaseUrl('/img/tutorial/tutorial_pivot_table.png')} />
You should see months in the rows and Department and Travel Class in the columns. Publish this chart
to your existing Tutorial Dashboard you created earlier.
@@ -161,7 +161,7 @@ time for the Time range select No filter as we want to look at entire dataset.
Within Metrics, remove the default `COUNT(*)` metric and instead add `AVG(Cost)`, to show the mean value.
<img src={useBaseUrl("/img/tutorial/average_aggregate_for_cost.png" )} />
<img src={useBaseUrl('/img/tutorial/average_aggregate_for_cost.png')} />
Next, select **Run Query** to show the data on the chart.
@@ -178,7 +178,7 @@ tab on the left hand pane. Within this pane, try changing the Color Scheme, remo
filter by selecting No in the Show Range Filter drop down and adding some labels using X Axis Label
and Y Axis Label.
<img src={useBaseUrl("/img/tutorial/tutorial_line_chart.png" )} />
<img src={useBaseUrl('/img/tutorial/tutorial_line_chart.png')} />
Once youre done, publish the chart in your Tutorial Dashboard.
@@ -191,14 +191,14 @@ dashboards. Got into edit mode by selecting **Edit dashboard**.
Within the Insert components pane, drag and drop a Markdown box on the dashboard. Look for the blue
lines which indicate the anchor where the box will go.
<img src={useBaseUrl("/img/tutorial/blue_bar_insert_component.png" )} />
<img src={useBaseUrl('/img/tutorial/blue_bar_insert_component.png')} />
Now, to edit the text, select the box. You can enter text, in markdown format (see
[this Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) for
more information about this format). You can toggle between Edit and Preview using the menu on the
top of the box.
<img src={useBaseUrl("/img/tutorial/markdown.png" )} />
<img src={useBaseUrl('/img/tutorial/markdown.png')} />
To exit, select any other part of the dashboard. Finally, dont forget to keep your changes using
**Save changes**.
@@ -213,7 +213,7 @@ If you would like to make your dashboard available to other users, simply select
title of your dashboard on the top left to change your dashboard to be in Published state. You can
also favorite this dashboard by selecting the star.
<img src={useBaseUrl("/img/tutorial/publish_dashboard.png" )} />
<img src={useBaseUrl('/img/tutorial/publish_dashboard.png')} />
### Annotations
@@ -230,7 +230,7 @@ Next, add an annotation by navigating to Manage ‣ Annotations and then create
selecting the green plus sign. Then, select the Volcanic Eruptions layer, add a short description
Grímsvötn and the eruption dates (23-25 May 2011) before finally saving.
<img src={useBaseUrl("/img/tutorial/edit_annotation.png" )} />
<img src={useBaseUrl('/img/tutorial/edit_annotation.png')} />
Then, navigate to the line chart by going to Charts then selecting Tutorial Line Chart from the
list. Next, go to the Annotations and Layers section and select Add Annotation Layer. Within this
@@ -241,11 +241,11 @@ dialogue:
- Set the Annotation Source as Superset annotation
- Specify the Annotation Layer as Volcanic Eruptions
<img src={useBaseUrl("/img/tutorial/annotation_settings.png" )} />
<img src={useBaseUrl('/img/tutorial/annotation_settings.png')} />
Select **Apply** to see your annotation shown on the chart.
<img src={useBaseUrl("/img/tutorial/annotation.png" )} />
<img src={useBaseUrl('/img/tutorial/annotation.png')} />
If you wish, you can change how your annotation looks by changing the settings in the Display
configuration section. Otherwise, select **OK** and finally **Save** to save your chart. If you keep
@@ -267,7 +267,7 @@ datasource and the **Line Chart** visualization type. Within the Time section, s
Next, in the query section, change the Metrics to the sum of Cost. Select **Run Query** to show the
chart. You should see the total cost per day for each month in October 2011.
<img src={useBaseUrl("/img/tutorial/advanced_analytics_base.png" )} />
<img src={useBaseUrl('/img/tutorial/advanced_analytics_base.png')} />
Finally, save the visualization as Tutorial Advanced Analytics Base, adding it to the Tutorial
Dashboard.
@@ -286,7 +286,7 @@ on 7 days and we avoid any ramp up period.
After displaying the chart by selecting **Run Query** you will see that the data is less variable
and that the series starts later as the ramp up period is excluded.
<img src={useBaseUrl("/img/tutorial/rolling_mean.png" )} />
<img src={useBaseUrl('/img/tutorial/rolling_mean.png')} />
Save the chart as Tutorial Rolling Mean and add it to the Tutorial Dashboard.
@@ -301,13 +301,15 @@ Next, in the Time Comparison subsection of **Advanced Analytics**, enter the Tim
“minus 1 week” (note this box accepts input in natural language). Run Query to see the new chart,
which has an additional series with the same values, shifted a week back in time.
<img src={useBaseUrl("/img/tutorial/time_comparison_two_series.png" )} />
<img src={useBaseUrl('/img/tutorial/time_comparison_two_series.png')} />
Then, change the **Calculation type** to Absolute difference and select **Run Query**. We can now
see only one series again, this time showing the difference between the two series we saw
previously.
<img src={useBaseUrl("/img/tutorial/time_comparison_absolute_difference.png" )} />
<img
src={useBaseUrl('/img/tutorial/time_comparison_absolute_difference.png')}
/>
Save the chart as Tutorial Time Comparison and add it to the Tutorial Dashboard.
@@ -319,7 +321,7 @@ As in the previous section, reopen the Tutorial Advanced Analytics Base chart.
Next, in the Python Functions subsection of **Advanced Analytics**, enter 7D, corresponding to seven
days, in the Rule and median as the Method and show the chart by selecting **Run Query**.
<img src={useBaseUrl("/img/tutorial/resample.png" )} />
<img src={useBaseUrl('/img/tutorial/resample.png')} />
Note that now we have a single data point every 7 days. In our case, the value showed corresponds to
the median value within the seven daily data points. For more information on the meaning of the
@@ -351,10 +353,11 @@ The **Custom** time range picker accepts natural language expressions alongside
These expressions are evaluated at query time, so saved charts always display data relative to the current date.
:::resources
- [Chart Walkthroughs](https://docs.preset.io/docs/chart-walkthroughs) - Detailed guides for most chart types
- [Blog: Why Apache ECharts is the Future of Apache Superset](https://preset.io/blog/2021-4-1-why-echarts/)
- [Blog: ECharts Time-Series Visualizations in Superset](https://preset.io/blog/echarts-time-series-visualizations-in-superset/)
- [Blog: Finding New Insights with Drill By](https://preset.io/blog/drill-by/)
- [Blog: From Drill Down to Drill By](https://preset.io/blog/drill-down-and-drill-by/)
- [Blog: Cross-Filtering in Apache Superset](https://preset.io/blog/cross-filtering-in-Superset-and-Preset/)
:::
:::