mirror of
https://github.com/apache/superset.git
synced 2026-08-04 21:12:44 +00:00
feat(build): migrate from Prettier to Oxfmt for performant code formatting (#42434)
This commit is contained in:
@@ -5,7 +5,7 @@ sidebar_position: 2
|
||||
version: 1
|
||||
---
|
||||
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
## Exploring Data in Superset
|
||||
|
||||
@@ -30,12 +30,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
|
||||
|
||||
@@ -43,16 +43,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.
|
||||
|
||||
@@ -68,7 +68,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.
|
||||
|
||||
@@ -78,24 +78,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
|
||||
|
||||
@@ -107,7 +107,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.
|
||||
|
||||
@@ -122,7 +122,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
|
||||
@@ -132,7 +132,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
|
||||
@@ -144,7 +144,7 @@ selections we defined in the Time section.
|
||||
Within **Columns**, first select Department and then Travel Class. All set – let’s **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.
|
||||
@@ -159,7 +159,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.
|
||||
|
||||
@@ -176,7 +176,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 you’re done, publish the chart in your Tutorial Dashboard.
|
||||
|
||||
@@ -189,14 +189,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, don’t forget to keep your changes using
|
||||
**Save changes**.
|
||||
@@ -211,7 +211,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
|
||||
|
||||
@@ -228,7 +228,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
|
||||
@@ -239,11 +239,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
|
||||
@@ -265,7 +265,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.
|
||||
@@ -284,7 +284,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.
|
||||
|
||||
@@ -299,13 +299,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.
|
||||
|
||||
@@ -317,7 +319,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
|
||||
|
||||
Reference in New Issue
Block a user