Skip to content

Commit 3dbfbf7

Browse files
tothmanotothmano
authored
Rewrite and restructure Dashboards section (#93)
1 parent 57babdf commit 3dbfbf7

25 files changed

+506
-291
lines changed

‎dashboard-elements/configure.mdx

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: 'Configure dashboard elements'
3+
description: 'This section explains how to configure dashboard elements.'
4+
sidebarTitle: Configure
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
When you create a chart, click <img src="/doc-assets/icons/options.svg" className="inline-icon" alt="View options icon" /> to access the following options.
10+
11+
## Values
12+
13+
Specify how to treat missing or undefined values:
14+
15+
- **Auto:** This option automatically decides the best way to represent missing or undefined values in the data series based on the chart type and the rest of the data.
16+
- **Ignore:** This option ignores any missing or undefined values in the data series. This means that the chart only displays the known, defined values.
17+
- **Join adjacent values:** This option connects adjacent data points in the data series, effectively filling in any gaps caused by missing values. The benefit of joining adjacent values is that it can provide a smoother, more continuous visualization of your data.
18+
- **Fill with zeros:** This option replaces any missing or undefined values in the data series with zero. This can be useful if you want to emphasize that the data is missing or undefined, as it causes a drop to zero in your chart.
19+
20+
## Variant
21+
22+
Specify the chart type.
23+
24+
**Area:** An area chart displays the area between the data line and the axes, often filled with a color or pattern. Stacked charts provide the capability to design and implement intricate query dashboards while integrating advanced visualizations, enriching your logging experience over time.
25+
26+
<Frame>
27+
<img src="/doc-assets/shots/area-variant-section-chart.png" alt="Area chart" />
28+
</Frame>
29+
30+
**Bars:** A bar chart represents data in rectangular bars. The length of each bar is proportional to the value it represents. Bar charts can be used to compare discrete quantities, or when you have categorical data.
31+
32+
<Frame>
33+
<img src="/doc-assets/shots/bar-variant-chart-1.png" alt="Bar chart" />
34+
</Frame>
35+
36+
**Line:** A line chart connects individual data points into a continuous line, which is useful for showing logs over time. Line charts are often used for time series data.
37+
38+
<Frame>
39+
<img src="/doc-assets/shots/line-variant-section-chart.png" alt="Line chart" />
40+
</Frame>
41+
42+
## Y-Axis
43+
44+
Specify the scale of the vertical axis.
45+
46+
**Linear:** A linear scale maintains a consistent scale where equal distances represent equal changes in value. This is the most common scale type and is useful for most types of data.
47+
48+
<Frame>
49+
<img src="/doc-assets/shots/linear-scale-y-axis-chart.png" alt="Linear scale" />
50+
</Frame>
51+
52+
**Log:** A logarithmic (or log) scale represents values in terms of their order of magnitude. Each unit of distance on a log scale represents a tenfold increase in value. Log scales make it easy to see backend errors and compare values across a wide range.
53+
54+
<Frame>
55+
<img src="/doc-assets/shots/log-scale-y-axis-chart.png" alt="Log scale" />
56+
</Frame>
57+
58+
## Annotations
59+
60+
Specify the types of annotations to display in the chart:
61+
62+
- Show all annotations
63+
- Hide all annotations
64+
- Selective determine the annotations types to display

‎dashboard-elements/create.mdx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
title: 'Create dashboard elements'
3+
description: 'This section explains how to create dashboard elements.'
4+
sidebarTitle: Create
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
To create new dashboard elements:
10+
11+
1. [Create a dashboard](/dashboards/create) or open an existing dashboard.
12+
1. Click <img src="/doc-assets/icons/plus.svg" className="inline-icon" alt="Add chart" /> **Add chart** in the top right corner.
13+
1. Choose the dashboard element from the list. For more information on each dashboard element, choose one of the following:
14+
- [Filter bar](/query-data/filters)
15+
- [Log stream](/dashboard-elements/log-stream)
16+
- [Scatter plot](/dashboard-elements/scatter-plot)
17+
- [Statistic](/dashboard-elements/statistic)
18+
- [Table](/dashboard-elements/table)
19+
- [Time series](/dashboard-elements/time-series)
20+
1. Choose one of the following:
21+
- Click **Simple Query Builder** to create your chart using a visual query builder. Create a chart in the same way you create a chart in the [Datasets tab](/query-data/datasets).
22+
- Click **Advanced Query Language** to create your chart using the Axiom Processing Language (APL). Create a chart in the same way you create a chart in the APL query builder of the [Explore tab](/query-data/explore#create-a-query-using-apl).
23+
1. Optional: [Configure chart options](/dashboard-elements/configure).
24+
1. Click **Save**.
25+
26+
The new element appears in your dashboard. In the bottom, click **Save** to save your changes to the dashboard.
27+
28+
## Change element’s position
29+
30+
To change element’s position on the dashboard, drag the title bar of the chart.
31+
32+
<Frame>
33+
<video autoPlay muted loop playsInline className="w-full aspect-video" src="/doc-assets/videos/reposition-dashboard-element.mp4"></video>
34+
</Frame>
35+
36+
## Change element size
37+
38+
To change the size of the element, drag the bottom-right corner.
39+
40+
<Frame>
41+
<video autoPlay muted loop playsInline className="w-full aspect-video" src="/doc-assets/videos/resize-dashboard-element.mp4"></video>
42+
</Frame>

‎dashboard-elements/log-stream.mdx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: 'Log stream'
3+
description: 'This section explains how to create log stream dashboard elements and add them to your dashboard.'
4+
sidebarTitle: Log Stream
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
The log stream dashboard element displays your logs as they come in real-time. Each log appears as a separate line with various details. The benefit of a log stream is that it provides immediate visibility into your system’s operations. When you’re debugging an issue or trying to understand an ongoing event, the log stream allows you to see exactly what’s happening as it occurs.
10+
11+
## Example with Simple Query Builder
12+
13+
<Frame>
14+
<img src="/doc-assets/shots/logstream-simple-query.png" />
15+
</Frame>
16+
17+
## Example with Advanced Query Language
18+
19+
<Frame>
20+
<img src="/doc-assets/shots/log-stream-chart-apl.png" />
21+
</Frame>

‎dashboard-elements/overview.mdx

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: 'Dashboard elements'
3+
description: 'This section explains how to create different dashboard elements and add them to your dashboard.'
4+
sidebarTitle: Overview
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
Dashboard elements are the different visual elements that you can include in your dashboard to display your data and other information. For example, you can track key metrics, logs, and traces, and monitor real-time data flow.
10+
11+
Choose one of the following to learn more about a dashboard element:
12+
13+
<Card
14+
title="Filter bar"
15+
icon="filter"
16+
href="/query-data/filters"
17+
>
18+
</Card>
19+
<Card
20+
title="Log stream"
21+
icon="screencast"
22+
href="/dashboard-elements/log-stream"
23+
>
24+
</Card>
25+
<Card
26+
title="Scatter plot"
27+
icon="chart-scatter"
28+
href="/dashboard-elements/scatter-plot"
29+
>
30+
</Card>
31+
<Card
32+
title="Statistic"
33+
icon="1"
34+
href="/dashboard-elements/statistic"
35+
>
36+
</Card>
37+
<Card
38+
title="Table"
39+
icon="table"
40+
href="/dashboard-elements/table"
41+
>
42+
</Card>
43+
<Card
44+
title="Time series"
45+
icon="chart-line"
46+
href="/dashboard-elements/time-series"
47+
>
48+
</Card>

‎dashboard-elements/scatter-plot.mdx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
title: 'Scatter plot'
3+
description: 'This section explains how to create scatter plot dashboard elements and add them to your dashboard.'
4+
sidebarTitle: Scatter Plot
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
Scatter plots are used to visualize the correlation or distribution between two distinct metrics or logs. Each point in the scatter plot could represent a log entry, with the X and Y axes showing different log attributes (like request time and response size). The scatter plot chart can be created using the simple query builder or advanced query builder.
10+
11+
For example, plot response size against response time for an API to see if larger responses are correlated with slower response times.
12+
13+
## Example with Simple Query Builder
14+
15+
<Frame>
16+
<img src="/doc-assets/shots/scatter-chart-simple-1.png" />
17+
</Frame>
18+
19+
## Example with Advanced Query Language
20+
21+
<Frame>
22+
<img src="/doc-assets/shots/scatter-chart-apl-2.png" />
23+
</Frame>

‎dashboard-elements/statistic.mdx

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: 'Statistic'
3+
description: 'This section explains how to create statistic dashboard elements and add them to your dashboard.'
4+
tags:
5+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
6+
---
7+
8+
Statistics dashboard elements display a summary of the selected metrics over a given time period. For example, you can use a statistic dashboard element to show the average, sum, min, max, and count of response times or error counts.
9+
10+
## Example with Simple Query Builder
11+
12+
<Frame>
13+
<img src="/doc-assets/shots/simple-chart-statistic-1.png" />
14+
</Frame>
15+
16+
## Example with Advanced Query Language
17+
18+
<Frame>
19+
<img src="/doc-assets/shots/apl-chart-statistic-2.png" />
20+
</Frame>

‎dashboard-elements/table.mdx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
title: 'Table'
3+
description: 'This section explains how to create table dashboard elements and add them to your dashboard.'
4+
tags:
5+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
6+
---
7+
8+
The table dashboard element displays a summary of any attributes from your metrics, logs, or traces in a sortable table format. Each row in the table could represent a different service, host, or other entity, with columns showing various attributes or metrics for that entity.
9+
10+
## Example with Simple Query Builder
11+
12+
<Frame>
13+
<img src="/doc-assets/shots/table-chart-simple.png" />
14+
</Frame>
15+
16+
## Example with Advanced Query Language
17+
18+
With this option, the table chart type has the capability to display a non-aggregated view of events.
19+
20+
<Frame>
21+
<img src="/doc-assets/shots/table-chart-apl.png" />
22+
</Frame>

‎dashboard-elements/time-series.mdx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
title: 'Time series'
3+
description: 'This section explains how to create time series dashboard elements and add them to your dashboard.'
4+
sidebarTitle: Time Series
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
Time series charts show the change in your data over time which can help identify infrastructure issues, spikes, or dips in the data. This can be a simple line chart, an area chart, or a bar chart. A time series chart might be used to show the change in the volume of log events, error rates, latency, or other time-sensitive data.
10+
11+
## Example with Simple Query Builder
12+
13+
<Frame>
14+
<img src="/doc-assets/shots/timeseries-simple-chart.png" />
15+
</Frame>
16+
17+
## Example with Advanced Query Language
18+
19+
<Frame>
20+
<img src="/doc-assets/shots/timeseries-chart-apl.png" />
21+
</Frame>

‎dashboards/configure.mdx

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: 'Configure dashboards'
3+
description: 'This page explains how to configure your dashboards.'
4+
sidebarTitle: Configure
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
## Select time range
10+
11+
When you select the time range, you specify the time interval for which you want to display data in the dashboard. Changing the time range affects the data displayed in all dashboard elements.
12+
13+
To select the time range:
14+
1. In the top right, click <img src="/doc-assets/icons/clock.svg" className="inline-icon" alt="Time range" /> **Time range**.
15+
1. Choose one of the following options:
16+
- Use the **Quick range** items to quickly select popular time ranges.
17+
- Use the **Custom start/end date** fields to select specific times.
18+
19+
## Share dashboards
20+
21+
To specify who can access a dashboard:
22+
23+
1. In the top right, click <img src="/doc-assets/icons/share.svg" className="inline-icon" alt="Share" /> **Share**.
24+
1. Select one of the following:
25+
- Select **Just Me** to make the dashboard private. Only you can access the dashboard.
26+
- Select a group in your Axiom organization. Only members of the selected group can access the dashboard. For more information about groups, see [Access](/reference/settings#access-overview).
27+
- Select **Everyone** to make the dashboard accessible to all users in your Axiom organization.
28+
1. In the bottom, click **Save** to save your changes to the dashboard.
29+
30+
<Note>
31+
The data that individual users see in the dashboard is determined by the datasets the users have access to. If a user has access to a dashboard but only to some of the datasets referenced in the dashboard’s charts, the user only sees data from the datasets they have access to.
32+
</Note>
33+
34+
## Control display of annotations
35+
36+
To specify the types of annotations to display in all dashboard elements:
37+
38+
1. In the top right, click <img src="/doc-assets/icons/diamond.svg" className="inline-icon" alt="Annotations" /> **Annotations**.
39+
1. Select one of the following:
40+
- Show all annotations
41+
- Hide all annotations
42+
- Selective determine the annotations types to display
43+
1. In the bottom, click **Save** to save your changes to the dashboard.
44+
45+
## Set dashboard as homepage
46+
47+
To set a dashboard as the homepage of your browser, click <img src="/doc-assets/icons/house.svg" className="inline-icon" alt="Home icon" /> **Set as homepage** in the top right.
48+
49+
## Enter full screen
50+
51+
Full-screen mode is useful for displaying the dashboard on a TV or shared monitor.
52+
53+
To enter full-screen mode, click <img src="/doc-assets/icons/up-right-and-down-left-from-center.svg" className="inline-icon" alt="Full screen icon" /> **Full screen** in the top right.

‎dashboards/create.mdx

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: 'Create dashboards'
3+
description: 'This section explains how to create and delete dashboards.'
4+
sidebarTitle: Create
5+
tags:
6+
['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
7+
---
8+
9+
To create a dashboard, choose one of the following:
10+
11+
- [Create an empty dashboard](#create-empty-dashboards).
12+
- [Fork an existing dashboard](#fork-dashboards). This is how you make a copy of prebuilt integration dashboards that you cannot directly edit.
13+
- [Duplicate an existing dashboard](#duplicate-dashboards). This is how you make a copy of dashboards other than prebuilt integration dashboards.
14+
15+
After creating a dashboard:
16+
- [Add dashboard elements](/dashboard-elements/create). For example, add a table or a time series chart.
17+
- [Configure the dashboard](/dashboards/configure). For example, control who can access the dashboard and change the time range.
18+
19+
## Create empty dashboards
20+
21+
1. Click the Dashboards tab.
22+
1. In the top right corner, click **New dashboard**.
23+
1. Add a name and a description.
24+
1. Click **Create**.
25+
26+
## Fork dashboards
27+
28+
1. Click the Dashboards tab.
29+
1. Find the dashboard in the list.
30+
1. Click <img src="/doc-assets/icons/ellipsis-vertical.svg" className="inline-icon" alt="More" /> **More**.
31+
1. Click **Fork dashboard**.
32+
33+
Alternatively:
34+
1. Open the dashboard.
35+
1. Click <img src="/doc-assets/icons/code-branch.svg" className="inline-icon" alt="Fork dashboard" /> **Fork dashboard** in the top right corner.
36+
37+
## Duplicate dashboards
38+
39+
1. Click the Dashboards tab.
40+
1. Find the dashboard in the list.
41+
1. Click <img src="/doc-assets/icons/ellipsis-vertical.svg" className="inline-icon" alt="More" /> **More**.
42+
1. Click **Duplicate dashboard**.
43+
44+
## Delete dashboard
45+
46+
1. Click the Dashboards tab.
47+
1. Find the dashboard in the list.
48+
1. Click <img src="/doc-assets/icons/ellipsis-vertical.svg" className="inline-icon" alt="More" /> **More**.
49+
1. Click **Delete dashboard**.
50+
1. Click **Delete**.

0 commit comments

Comments
 (0)