Add pie charts (#98)

Author: tothmano

dashboard-elements/overview.mdx

@@ -22,6 +22,12 @@ Choose one of the following to learn more about a dashboard element:
     href="/dashboard-elements/log-stream"
 >
 </Card>
+<Card
+    title="Pie chart"
+    icon="chart-pie"
+    href="/dashboard-elements/pie-chart"
+>
+</Card>
 <Card
     title="Scatter plot"
     icon="chart-scatter"

dashboard-elements/pie-chart.mdx

@@ -0,0 +1,28 @@
+---
+title: 'Pie chart'
+description: 'This section explains how to create pie chart dashboard elements and add them to your dashboard.'
+sidebarTitle: Pie Chart
+tags:
+    ['axiom documentation', 'documentation', 'axiom', 'dashboards', 'collaboration', 'queries', 'visualizations', 'filters', 'charts', 'simple query builder', 'advanced query builder']
+---
+
+import Prerequisites from "/snippets/dashboard-prerequisites.mdx"
+import CreateElement from "/snippets/create-dashboard-element.mdx"
+
+Pie charts can illustrate the distribution of different types of event data. Each slice represents the proportion of a specific value relative to the total. For example, a pie chart can show the breakdown of status codes in HTTP logs. This helps quickly identify the dominant types of status responses and assess the system’s health at a glance.
+
+<Prerequisites />
+
+<CreateElement elementName="pie chart" elementButtonLabel="Pie"/>
+
+## Example with Simple Query Builder
+
+<Frame>
+  <img src="/doc-assets/shots/pie-chart-builder.png" />
+</Frame>
+
+## Example with Advanced Query Language
+
+<Frame>
+  <img src="/doc-assets/shots/pie-chart-apl.png" />
+</Frame>

doc-assets/shots/pie-chart-apl.png

@@ -187,6 +187,7 @@
             "dashboard-elements/configure",
             "query-data/filters",
             "dashboard-elements/log-stream",
+            "dashboard-elements/pie-chart",
             "dashboard-elements/scatter-plot",
             "dashboard-elements/statistic",
             "dashboard-elements/table",

doc-assets/shots/pie-chart-builder.png

@@ -19,8 +19,8 @@ import Prerequisites from "/snippets/minimal-prerequisites.mdx"
 
 <Prerequisites />
 {/* list separator */}
+- [Send data](/send-data/ingest) to your Axiom dataset.
 - [Create an API token in Axiom](/reference/tokens) with permissions to create, read, update, and delete annotations.
-- [Send data to your Axiom dataset](/send-data/ingest).
 
 ## Create annotations
 

mint.json

@@ -10,12 +10,9 @@ Filters let you choose the data you want to display in your dashboard. This page
 
 Try out all the examples explained on this page in the [HTTP logs dashboard of the Axiom Playground](https://play.axiom.co/axiom-play-qf1k/dashboards/gZXp8KNJy68q7yGsuA).
 
-## Prerequisites
+import Prerequisites from "/snippets/dashboard-prerequisites.mdx"
 
-- [Create an Axiom account](https://app.axiom.co/).
-- [Create a dataset in Axiom](/reference/datasets) where you send your data.
-- [Send data to the dataset](/send-data/ingest).
-- [Create an empty dashboard](/dashboards/create).
+<Prerequisites />
 
 ## Filter types
 

query-data/annotate-charts.mdx

@@ -0,0 +1,12 @@
+## Create {elementName}
+
+1. Go to the Dashboards tab and open the dashboard where you want to add the {elementName}.
+1. Click <img src="/doc-assets/icons/plus.svg" className="inline-icon" alt="Add chart" /> **Add chart** in the top right corner.
+1. Click **{elementButtonLabel}** from the list.
+1. Choose one of the following:
+    - 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).
+    - 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).
+1. Optional: [Configure the dashboard element](/dashboard-elements/configure).
+1. Click **Save**.
+
+The new element appears in your dashboard. In the bottom, click **Save** to save your changes to the dashboard.

query-data/filters.mdx

@@ -0,0 +1,6 @@
+## Prerequisites
+
+- [Create an Axiom account](https://app.axiom.co/register).
+- [Create a dataset in Axiom](/reference/datasets) where you send your data.
+- [Send data](/send-data/ingest) to your Axiom dataset.
+- [Create an empty dashboard](/dashboards/create).