Skip to content
Snippets Groups Projects
Unverified Commit f1984c8e authored by Alexander Polyankin's avatar Alexander Polyankin Committed by GitHub
Browse files

Merge branch 'release-x.51.x' into backport-e20c00b1

parents 3ffc408f 4eb7006a
No related merge requests found
Showing
with 61 additions and 49 deletions
.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png

63.7 KiB | W: | H:

.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png

63.8 KiB | W: | H:

.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png
.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png
.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png
.loki/reference/chrome_laptop_embed_PublicOrEmbeddedDashboardView_Dark_Theme_No_Background_Default.png
  • 2-up
  • Swipe
  • Onion skin
.loki/reference/chrome_laptop_static_viz_PieChart_Sunburst_Other_Label.png

40.2 KiB

......@@ -60,6 +60,8 @@ Single Date and Date Range will provide a calendar widget, while the other optio
You can add a time grouping widget to a dashboard to change how charts are grouped by time. For example, you may want to look at the time series charts grouped by month by default, but give people the option to view the results by other groupings: by week, by quarter, and so on.
> Time grouping parameter widget can only be connected to questions built with the [graphical query builder](../questions/query-builder/introduction.md).
This widget doesn't filter data in the charts; the widget just changes the time granularity for any cards that have a datetime field connected to the widget.
You can group by:
......@@ -128,6 +130,8 @@ To undo this auto-connecting of cards, click on the toast that pops up when Meta
If you're trying to connect a filter to a card with a native/SQL questions, you'll need to [add a variable or field filter to your query](../questions/native-editor/sql-parameters.md). For an in-depth article, check out [Adding filters to dashboards with SQL questions](https://www.metabase.com/learn/dashboards/filters).
You can't connect a time grouping parameter widget to a card with a SQL question.
## Wiring up dashboard filters to text cards
You can even wire up filters to text cards, but only if [the text card includes a variable](./introduction.md#including-variables-in-text-cards).
......
---
title: Interactive dashboards
redirect_from:
- /docs/latest/users-guide/interactive-dashboards
- /docs/latest/users-guide/interactive-dashboards
---
# Interactive dashboards
......@@ -42,7 +42,7 @@ For questions composed using the query builder, you can select from three option
- Go to a custom destination.
- Update a dashboard filter (if the dashboard has a filter).
SQL questions will only have the option to **Go to a custom destination**, and **Update a dashboard filter**, as the drill-through menu is only available to questions composed with the query builder.
SQL questions will only have the option to **Go to a custom destination**, and **Update a dashboard filter**.
If your dashboard has a filter, you'll also see an option to [update the filter](#use-a-chart-to-filter-a-dashboard).
......@@ -94,11 +94,11 @@ What we need to do here is to type in the full URL of where a user should go whe
For example, we could type a URL like this:
```
https://www.metabase.com/search.html?query={% raw %}{{Category}}{% endraw %}
```
```
https://www.metabase.com/search.html?query={% raw %}{{Category}}{% endraw %}
```
The important part is the `{% raw %}{{Category}}{% endraw %}` bit. What we’re doing here is referring to the `Category` that the user clicked on. So if a user clicks on the `Widget` bar in our chart, the value of the `Category` column for that bar (`Widget`) would be inserted into our URL: `https://www.metabase.com/search.html?query=Widget`. Your URL can use as many column variables as you want - you can even refer to the same column multiple times in different parts of the URL. Click on the dropdown menu **Values you can reference** to see your options for which variables you can include in the URL.
The important part is the `{% raw %}{{Category}}{% endraw %}` bit. What we’re doing here is referring to the `Category` that the user clicked on. So if someone clicks on the `Widget` bar in our chart, the value of the `Category` column for that bar (`Widget`) would be inserted into our URL: `https://www.metabase.com/search.html?query=Widget`. Your URL can use as many column variables as you want - you can even refer to the same column multiple times in different parts of the URL. To see which variables you can include in the URL, click on the dropdown menu **Values you can reference**.
Next we’ll click **Done**, then **Save** our dashboard. Now when we click our chart, we’ll be taken to the URL that we entered above, with the value of the clicked bar inserted into the URL.
......
......@@ -41,7 +41,7 @@ Note: you won’t be able to add another saved question to multi-series visualiz
## Combining two saved questions
If you already have two or more saved questions you’d like to compare, and they share a dimension, they can be combined onto a single dashboard card. You can even compare questions that pull data from different databases. Here’s how:
If you already have two or more saved questions you’d like to compare, and they have the same first dimension, they can be combined onto a single dashboard card. You can even compare questions that pull data from different databases. Here’s how:
1. Add a question with a dimension like time or category to a dashboard. In practice, these will usually be line charts or bar charts.
......
......@@ -144,6 +144,10 @@ While data types themselves can't be edited in Metabase, admins can manually [ca
See [Working with JSON](./json-unfolding.md).
### Arrays
Metabase currently does not support array types with any database. You'll only be able to use **Is empty** or **Is not empty** filters on columns containing arrays.
## Further Reading
- [Exploring data with Metabase's data browser](https://www.metabase.com/learn/getting-started/data-browser.html).
......
......@@ -68,3 +68,4 @@ For example, if you upload a CSV with JSON in it, you might need to update the d
- [PostgreSQL](../databases/connections/postgresql.md)
- [MySQL](../databases/connections/mysql.md)
- [Druid (JDBC)](../databases/connections/druid.md)
- [BigQuery](../databases/connections/bigquery.md) (always enabled)
......@@ -23,7 +23,7 @@ For a deep dive on why and how to use models, check out our [Learn article on mo
You can use models to:
- Create, uh, models, with model here meaning an intuitive description of some concept in your business that you codify as a set of columns. An example model could be a "customer", which is a table that pulls together customer information from multiple tables and adds computed columns, like adding a lifetime value (LTV) column. This model represents the [measures and dimensions][measures-dimensions] that you think are relevant to your understanding of your customers.
- Let people explore the results of SQL queries with the drill-through menu and query builder (provided you [set the column types](#column-type)).
- Let people explore the results of SQL queries with the query builder (provided you [set the column types](#column-type)).
- Create summary tables that pull in or aggregate data from multiple tables.
- Clean up tables with unnecessary columns and rows filtered out.
......@@ -82,7 +82,7 @@ You can also edit the model's metadata.
## Add metadata to columns in a model
Metadata is the secret sauce of models. When you write a SQL query, Metabase can display the results, but it can't "know" what kind of data it's returning (like it can with questions built using the query builder). What this means in practice is that people won't be able to drill-through the results, or explore the results with the query builder, because Metabase doesn't understand what the results are. With models, however, you can tell Metabase what kind of data is in each returned column so that Metabase can still do its drill-through magic. Metadata will also make filtering nicer by showing the correct filter widget, and it will help Metabase to pick the right visualization for the results.
Metadata is the secret sauce of models. When you write a SQL query, Metabase can display the results, but it can't "know" what kind of data it's returning (like it can with questions built using the query builder). What this means in practice is that people won't be able explore the results with the query builder, because Metabase doesn't understand what the results are. With models, however, you can tell Metabase what kind of data is in each returned column so that Metabase can still do its query magic. Metadata will also make filtering nicer by showing the correct filter widget, and it will help Metabase to pick the right visualization for the results.
If you only set one kind of metadata, set the **Column type** to let Metabase know what kind of data it's working with.
......@@ -102,7 +102,7 @@ For models based on SQL queries, you can tell Metabase if the column has the sam
You can set the [column type][column-type]. The default is "No special type".
If your model is based on a SQL query and you want people to be able to explore the results with the query builder and drill-through menu, you'll need to set the [column type](./field-types.md) for each column in your model.
If your model is based on a SQL query and you want people to be able to explore the results with the query builder, you'll need to set the [column type](./field-types.md) for each column in your model.
### This column should appear in...
......
......@@ -83,11 +83,7 @@ See the PostgreSQL docs for a table about the different [SSL Modes](https://jdbc
If you set the SSL Mode to either "verify-ca" or "verify-full", you'll need to specify a root certificate (PEM). You have the option of using a **Local file path** or an **Uploaded file path**. If you're on Metabase Cloud, you'll need to select **Uploaded file path** and upload your certificate.
### Use an SSH tunnel
See our [guide to SSH tunneling](../ssh-tunnel.md).
### Authenticate client certificate
#### Authenticate client certificate
Toggle on to bring up client certificate options.
......@@ -109,6 +105,12 @@ openssl pkcs8 -topk8 -inform PEM -outform DER -in client-key.pem -out client-key
Note: if you're using GCP and you managed to issue client certificates, everything will be given in PEM format, you only need to transform the client-key.pem into a client-key.der for the "SSL Client Key"
### Use an SSH tunnel
See our [guide to SSH tunneling](../ssh-tunnel.md).
## Advanced settings
### Unfold JSON Columns
For PostgreSQL databases, Metabase can unfold JSON columns into component fields to yield a table where each JSON key becomes a column. JSON unfolding is on by default, but you can turn off JSON unfolding if performance is slow.
......
......@@ -32,7 +32,7 @@ if (auth.status === "success") {
You can customize how the SDK fetches the refresh token by specifying the `fetchRefreshToken` function in the `config` prop:
```typescript jsx
```typescript
/**
* This is the default implementation used in the SDK.
* You can customize this function to fit your needs, such as adding headers or excluding cookies.
......@@ -59,7 +59,7 @@ const config = { fetchRequestToken };
In case you need to reload a Metabase component, for example, your users modify your application data and that data is used to render a question in Metabase. If you embed this question and want to force Metabase to reload the question to show the latest data, you can do so by using the `key` prop to force a component to reload.
```typescript jsx
```typescript
// Inside your application component
const [data, setData] = useState({});
// This is used to force reloading Metabase components
......
......@@ -12,17 +12,18 @@ You can embed Metabase's collection browser so that people can explore items in
## `CollectionBrowser` props
| Prop | Type | Description |
| ------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
| pageSize | `number` | The number of items to display per page. The default is 25. |
| visibleEntityTypes | `("question" \| "model" \| "dashboard" \| "collection")[]` | The types of entities that should be visible. If not provided, all entities will be shown. |
| Prop | Type | Description |
| ------------------ | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| collectionId | `number` | The numerical ID of the collection. You can find this ID in the URL when accessing a collection in your Metabase instance. For example, the collection ID in `http://localhost:3000/collection/1-my-collection` would be `1`. If no ID is provided, the collection browser will start at the root `Our analytics` collection, which is ID = 0. |
| onClick | `(item: CollectionItem) => void` | An optional click handler that emits the clicked entity. |
| pageSize | `number` | The number of items to display per page. The default is 25. |
| visibleEntityTypes | `["question", "model", "dashboard", "collection"]` | The types of entities that should be visible. If not provided, all entities will be shown. |
## Example embedding code with `CollectionBrowser`
```tsx
import React from "react";
import { CollectionBrowser } from "@metabase/embedding-sdk-react"
import { CollectionBrowser } from "@metabase/embedding-sdk-react";
export default function App() {
const collectionId = 123; // This is the collection ID you want to browse
......
......@@ -37,7 +37,7 @@ _\* Not available for `StaticDashboard`._
## Example embedded dashboard with `InteractiveDashboard` component
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, InteractiveDashboard} from "@metabase/embedding-sdk-react";
......@@ -72,7 +72,7 @@ This plugin allows you to add, remove, and modify the custom actions on the over
The plugin's default configuration looks like this:
```typescript jsx
```typescript
const plugins = {
dashboard: {
dashcardMenu: {
......@@ -86,7 +86,7 @@ const plugins = {
`dashcardMenu`: can be used in the InteractiveDashboard like this:
```typescript jsx
```typescript
{% raw %}
<InteractiveDashboard
questionId={1}
......@@ -103,7 +103,7 @@ const plugins = {
To remove the download button from the dashcard menu, set `withDownloads` to `false`. To remove the edit link from the dashcard menu, set `withEditLink` to `false`.
```typescript jsx
```typescript
const plugins = {
dashboard: {
dashcardMenu: {
......@@ -119,7 +119,7 @@ const plugins = {
You can add custom actions to the dashcard menu by adding an object to the `customItems` array. Each element can either be an object or a function that takes in the dashcard's question, and outputs a list of custom items in the form of:
```typescript jsx
```typescript
{
iconName: string;
label: string;
......@@ -130,7 +130,7 @@ You can add custom actions to the dashcard menu by adding an object to the `cust
Here's an example:
```typescript jsx
```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: {
......@@ -161,7 +161,7 @@ const plugins: SdkPluginsConfig = {
If you want to replace the existing menu with your own component, you can do so by providing a function that returns a React component. This function also can receive the question as an argument.
```typescript jsx
```typescript
const plugins: SdkPluginsConfig = {
dashboard: {
dashcardMenu: ({ question }) => (
......@@ -177,7 +177,7 @@ Creating a dashboard could be done with `useCreateDashboardApi` hook or `CreateD
### Hook
```typescript jsx
```typescript
const { createDashboard } = useCreateDashboardApi();
const handleDashboardCreate = async () => {
......@@ -199,7 +199,7 @@ Props:
### Component
```typescript jsx
```typescript
const [dashboard, setDashboard] = useState<Dashboard | null>(null);
if (dashboard) {
......
......@@ -18,16 +18,16 @@ To give you and idea of what's possible with the SDK, we've put together example
![Pug and play example app built with embedding SDK](../images/pug-and-play.png)
# Embedding SDK prerequisites
# Embedded analytics SDK prerequisites
- React application. The SDK is tested to work with React 18 or higher, though it may work with earlier versions.
- [Metabase Pro or Enterprise subscription or free trial](https://www.metabase.com/pricing/).
- Metabase version 1.50 or higher.
- [Node.js 18.x LTS](https://nodejs.org/en) or higher.
## Embedding SDK on NPM
## Embedded analytics SDK on NPM
Check out the [Metabase embedding SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
Check out the Metabase Embedded analytics SDK on NPM: [metaba.se/sdk](https://metaba.se/sdk).
## Installation
......
......@@ -14,7 +14,7 @@ The Metabase Embedding SDK supports plugins to customize the behavior of compone
To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsConfig` prop:
```typescript jsx
```typescript
{% raw %}
<MetabaseProvider
config={config}
......@@ -32,7 +32,7 @@ To use a plugin globally, add the plugin to the `MetabaseProvider`'s `pluginsCon
To use a plugin on a per-component basis, pass the plugin as a prop to the component:
```typescript jsx
```typescript
{% raw %}
<InteractiveQuestion
questionId={1}
......
......@@ -21,7 +21,7 @@ You can embed a static question using the `StaticQuestion` component.
The component has a default height, which can be customized by using the `height` prop. To inherit the height from the parent container, you can pass `100%` to the height prop.
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, StaticQuestion} from "@metabase/embedding-sdk-react";
......@@ -50,7 +50,7 @@ You can pass parameter values to questions defined with SQL via `parameterValues
You can embed an interactive question using the `InteractiveQuestion` component.
```typescript jsx
```typescript
import React from "react";
import {MetabaseProvider, InteractiveQuestion} from "@metabase/embedding-sdk-react";
......@@ -89,13 +89,13 @@ By default, the Embedded Analytics SDK provides a default layout for interactive
Here's an example of using the `InteractiveQuestion` component with its default layout:
```typescript jsx
```typescript
<InteractiveQuestion questionId={95} />
```
To customize the layout, use namespaced components within the `InteractiveQuestion` component. For example:
```typescript jsx
```typescript
{% raw %}
<InteractiveQuestion questionId={95}>
<div
......@@ -160,7 +160,7 @@ This plugin allows you to add custom actions to
the click-through menu of an interactive question. You can add and
customize the appearance and behavior of the custom actions.
```typescript jsx
```typescript
// You can provide a custom action with your own `onClick` logic.
const createCustomAction = clicked => ({
buttonType: "horizontal",
......
......@@ -88,7 +88,7 @@ In this example of orders by product category per month, clicking on a data poin
- **Automatic insights**: See orders for a particular category over a shorter time range.
- **Filter by this value**: update the chart based on the value you clicked: equal to, less than, greater than, or not equal to.
> Note that while charts created with SQL don't currently have the drill-through menu, you can add SQL questions to a dashboard and customize their click behavior. You can send people to a [custom destination](https://www.metabase.com/learn/building-analytics/dashboards/custom-destinations.html) (like another dashboard or an external URL), or have the clicked value [update a dashboard filter](https://www.metabase.com/learn/building-analytics/dashboards/cross-filtering.html).
> Note that while charts created with SQL currently only have [limited drill-through menu](../questions/native-editor/writing-sql.md#drill-though-in-sql-questions), you can add SQL questions to a dashboard and customize their click behavior. You can send people to a [custom destination](https://www.metabase.com/learn/building-analytics/dashboards/custom-destinations.html) (like another dashboard or an external URL), or have the clicked value [update a dashboard filter](https://www.metabase.com/learn/building-analytics/dashboards/cross-filtering.html).
Clicking on a table cell will often allow you to filter the results using a comparison operator, like =, >, or <. For example, you can click on a table cell, and select the less than operator `<` to filter for values that are less than the selected value.
......
---
title: observability-with-prometheus
title: Observability with Prometheus
---
# Observability with Prometheus
......@@ -47,24 +47,24 @@ Change into the Prometheus directory, add the following YAML file to configure y
```yaml
global:
scrape_interval: 15s # By default, scrape targets every 15 seconds.
scrape_interval: 15s # By default, scrape targets every 15 seconds.
# Attach these labels to any time series or alerts when communicating with
# external systems (federation, remote storage, Alertmanager).
external_labels:
monitor: 'codelab-monitor'
monitor: "codelab-monitor"
# A scrape configuration containing exactly one endpoint to scrape:
# Here it's Prometheus itself.
scrape_configs:
# The job name is added as a label `job=<job_name>` to any timeseries scraped from this config.
- job_name: 'prometheus'
- job_name: "prometheus"
# Override the global default and scrape targets from this job every 5 seconds.
scrape_interval: 5s
# use whatever port here that you set for MB_PROMETHEUS_SERVER_PORT
static_configs:
- targets: ['localhost:9191']
- targets: ["localhost:9191"]
```
You need to change the "target" to where Metabase is, for this particular example, Metabase resides in the same host where Prometheus is running ("localhost").
......
docs/questions/images/bulk-filter-modal.png

180 KiB | W: | H:

docs/questions/images/bulk-filter-modal.png

207 KiB | W: | H:

docs/questions/images/bulk-filter-modal.png
docs/questions/images/bulk-filter-modal.png
docs/questions/images/bulk-filter-modal.png
docs/questions/images/bulk-filter-modal.png
  • 2-up
  • Swipe
  • Onion skin
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment