ClickHouse · gingerwizard · Apr 9, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
@@ -2,7 +2,7 @@
 sidebar_label: 'Dashboards'
 slug: /cloud/manage/dashboards
 title: 'Dashboards'
-description: 'The SQL Console's dashboards feature allows you to collect and share visualizations from saved queries.'
+description: 'The SQL Console dashboards feature allows you to collect and share visualizations from saved queries.'
 ---
 
 import BetaBadge from '@theme/badges/BetaBadge';

@@ -24,7 +24,6 @@ Partitioning can be enabled when a table is initially defined via the [PARTITION
 
 To illustrate this, we [enhance](https://sql.clickhouse.com/?query=U0hPVyBDUkVBVEUgVEFCTEUgdWsudWtfcHJpY2VfcGFpZF9zaW1wbGVfcGFydGl0aW9uZWQ&run_query=true&tab=results) the [What are table parts](/parts) example table by adding a `PARTITION BY toStartOfMonth(date)` clause, which organizes the table`s data parts based on the months of property sales:
 
-
 ```sql
 CREATE TABLE uk.uk_price_paid_simple_partitioned
 (
@@ -67,26 +66,15 @@ As sketched in the diagram above, parts belonging to different partitions are ne
 
 You can [query](https://sql.clickhouse.com/?query=U0VMRUNUIERJU1RJTkNUIF9wYXJ0aXRpb25fdmFsdWUgQVMgcGFydGl0aW9uCkZST00gdWsudWtfcHJpY2VfcGFpZF9zaW1wbGVfcGFydGl0aW9uZWQKT1JERVIgQlkgcGFydGl0aW9uIEFTQw&run_query=true&tab=results) the list of all existing unique partitions of our example table by using the [virtual column](/engines/table-engines#table_engines-virtual_columns) `_partition_value`:
 
-```sql
+```sql runnable
 SELECT DISTINCT _partition_value AS partition
 FROM uk.uk_price_paid_simple_partitioned
 ORDER BY partition ASC;
-
-
-     ┌─partition──────┐
-  1. │ ('1995-01-01') │
-  2. │ ('1995-02-01') │
-  3. │ ('1995-03-01') │
- ...
-304. │ ('2021-04-01') │
-305. │ ('2021-05-01') │
-306. │ ('2021-06-01') │
-     └────────────────┘
 ```
 
 Alternatively, ClickHouse tracks all parts and partitions of all tables in the [system.parts](/operations/system-tables/parts) system table, and the following query [returns](https://sql.clickhouse.com/?query=U0VMRUNUCiAgICBwYXJ0aXRpb24sCiAgICBjb3VudCgpIEFTIHBhcnRzLAogICAgc3VtKHJvd3MpIEFTIHJvd3MKRlJPTSBzeXN0ZW0ucGFydHMKV0hFUkUgKGRhdGFiYXNlID0gJ3VrJykgQU5EIChgdGFibGVgID0gJ3VrX3ByaWNlX3BhaWRfc2ltcGxlX3BhcnRpdGlvbmVkJykgQU5EIGFjdGl2ZQpHUk9VUCBCWSBwYXJ0aXRpb24KT1JERVIgQlkgcGFydGl0aW9uIEFTQzs&run_query=true&tab=results) for our example table above the list of all partitions, plus the current number of active parts and the sum of rows in these parts per partition:
 
-```sql
+```sql runnable
 SELECT
     partition,
     count() AS parts,
@@ -95,17 +83,6 @@ FROM system.parts
 WHERE (database = 'uk') AND (`table` = 'uk_price_paid_simple_partitioned') AND active
 GROUP BY partition
 ORDER BY partition ASC;
-
-
-     ┌─partition──┬─parts─┬───rows─┐
-  1. │ 1995-01-01 │     1 │  50473 │
-  2. │ 1995-02-01 │     1 │  50840 │
-  3. │ 1995-03-01 │     1 │  71276 │
- ...
-304. │ 2021-04-01 │     3 │  23160 │
-305. │ 2021-05-01 │     3 │  17607 │
-306. │ 2021-06-01 │     3 │   5652 │
-     └─partition──┴─parts─┴───rows─┘
 ```
 
 
@@ -152,20 +129,12 @@ TTL date + INTERVAL 12 MONTH TO VOLUME 'slow_but_cheap';
 
 Partitions can assist with query performance, but this depends heavily on the access patterns. If queries target only a few partitions (ideally one), performance can potentially improve. This is only typically useful if the partitioning key is not in the primary key and you are filtering by it, as shown in the example query below.
 
-```sql
+```sql runnable
 SELECT MAX(price) AS highest_price
-FROM uk_price_paid_simple_partitioned
+FROM uk.uk_price_paid_simple_partitioned
 WHERE date >= '2020-12-01'
   AND date <= '2020-12-31'
   AND town = 'LONDON';
-
-
-   ┌─highest_price─┐
-1. │     296280000 │ -- 296.28 million
-   └───────────────┘
-
-1 row in set. Elapsed: 0.006 sec. Processed 8.19 thousand rows, 57.34 KB (1.36 million rows/s., 9.49 MB/s.)
-Peak memory usage: 2.73 MiB.
 ```
 
 The query runs over our example table from above and [calculates](https://sql.clickhouse.com/?query=U0VMRUNUIE1BWChwcmljZSkgQVMgaGlnaGVzdF9wcmljZQpGUk9NIHVrLnVrX3ByaWNlX3BhaWRfc2ltcGxlX3BhcnRpdGlvbmVkCldIRVJFIGRhdGUgPj0gJzIwMjAtMTItMDEnCiAgQU5EIGRhdGUgPD0gJzIwMjAtMTItMzEnCiAgQU5EIHRvd24gPSAnTE9ORE9OJzs&run_query=true&tab=results) the highest price of all sold properties in London in December 2020 by filtering on both a column (`date`) used in the table's partition key and on a column (`town`) used in the table's primary key (and `date` is not part of the primary key).
@@ -182,10 +151,10 @@ ClickHouse processes that query by applying a sequence of pruning techniques to
 
 We can observe these data pruning steps by [inspecting](https://sql.clickhouse.com/?query=RVhQTEFJTiBpbmRleGVzID0gMQpTRUxFQ1QgTUFYKHByaWNlKSBBUyBoaWdoZXN0X3ByaWNlCkZST00gdWsudWtfcHJpY2VfcGFpZF9zaW1wbGVfcGFydGl0aW9uZWQKV0hFUkUgZGF0ZSA-PSAnMjAyMC0xMi0wMScKICBBTkQgZGF0ZSA8PSAnMjAyMC0xMi0zMScKICBBTkQgdG93biA9ICdMT05ET04nOw&run_query=true&tab=results) the physical query execution plan for our example query from above via an [EXPLAIN](/sql-reference/statements/explain) clause :
 
-```sql
+```sql style="fontSize:13px"
 EXPLAIN indexes = 1
 SELECT MAX(price) AS highest_price
-FROM uk_price_paid_simple_partitioned
+FROM uk.uk_price_paid_simple_partitioned
 WHERE date >= '2020-12-01'
   AND date <= '2020-12-31'
   AND town = 'LONDON';
@@ -240,37 +209,27 @@ With partitioning, the data is usually distributed across more data parts, which
 
 We can demonstrate this by running the same query over both the [What are table parts](/parts) example table (without partitioning enabled), and our current example table from above (with partitioning enabled). Both tables [contain](https://sql.clickhouse.com/?query=U0VMRUNUCiAgICB0YWJsZSwKICAgIHN1bShyb3dzKSBBUyByb3dzCkZST00gc3lzdGVtLnBhcnRzCldIRVJFIChkYXRhYmFzZSA9ICd1aycpIEFORCAoYHRhYmxlYCBJTiBbJ3VrX3ByaWNlX3BhaWRfc2ltcGxlJywgJ3VrX3ByaWNlX3BhaWRfc2ltcGxlX3BhcnRpdGlvbmVkJ10pIEFORCBhY3RpdmUKR1JPVVAgQlkgdGFibGU7&run_query=true&tab=results) the same data and number of rows:
 
-```sql
+```sql runnable
 SELECT
     table,
     sum(rows) AS rows
 FROM system.parts
 WHERE (database = 'uk') AND (table IN ['uk_price_paid_simple', 'uk_price_paid_simple_partitioned']) AND active
 GROUP BY table;
-
-   ┌─table────────────────────────────┬─────rows─┐
-1. │ uk_price_paid_simple             │ 25248433 │
-2. │ uk_price_paid_simple_partitioned │ 25248433 │
-   └──────────────────────────────────┴──────────┘
 ```
 
 However, the table with partitions enabled, [has](https://sql.clickhouse.com/?query=U0VMRUNUCiAgICB0YWJsZSwKICAgIGNvdW50KCkgQVMgcGFydHMKRlJPTSBzeXN0ZW0ucGFydHMKV0hFUkUgKGRhdGFiYXNlID0gJ3VrJykgQU5EIChgdGFibGVgIElOIFsndWtfcHJpY2VfcGFpZF9zaW1wbGUnLCAndWtfcHJpY2VfcGFpZF9zaW1wbGVfcGFydGl0aW9uZWQnXSkgQU5EIGFjdGl2ZQpHUk9VUCBCWSB0YWJsZTs&run_query=true&tab=results) more active [data parts](/parts), because, as mentioned above, ClickHouse only [merges](/parts) data parts within, but not across partitions:
 
-```sql
+```sql runnable
 SELECT
     table,
     count() AS parts
 FROM system.parts
 WHERE (database = 'uk') AND (table IN ['uk_price_paid_simple', 'uk_price_paid_simple_partitioned']) AND active
 GROUP BY table;
 
-
-   ┌─table────────────────────────────┬─parts─┐
-1. │ uk_price_paid_simple             │     1 │
-2. │ uk_price_paid_simple_partitioned │   436 │
-   └──────────────────────────────────┴───────┘
 ```
-As shown further above, the partitioned table `uk_price_paid_simple_partitioned` has 306 partitions, and therefore at least 306 active data parts. Whereas for our non-partitioned table `uk_price_paid_simple` all [initial](/parts) data parts could be merged into a single active part by background merges.
+As shown further above, the partitioned table `uk_price_paid_simple_partitioned` has over 600 partitions, and therefore at 600 306 active data parts. Whereas for our non-partitioned table `uk_price_paid_simple` all [initial](/parts) data parts could be merged into a single active part by background merges.
 
 
 When we [check](https://sql.clickhouse.com/?query=RVhQTEFJTiBpbmRleGVzID0gMQpTRUxFQ1QgTUFYKHByaWNlKSBBUyBoaWdoZXN0X3ByaWNlCkZST00gdWsudWtfcHJpY2VfcGFpZF9zaW1wbGVfcGFydGl0aW9uZWQKV0hFUkUgdG93biA9ICdMT05ET04nOw&run_query=true&tab=results) the physical query execution plan with an [EXPLAIN](/sql-reference/statements/explain) clause for our example query from above without the partition filter running over the partitioned table, we can see in row 19 and 20 of the output below that ClickHouse identified 671 out of 3257 existing [granules](/guides/best-practices/sparse-primary-indexes#data-is-organized-into-granules-for-parallel-data-processing) (blocks of rows) spread over 431 out of 436 existing active data parts that potentially contain rows matching the query's filter, and therefore will be scanned and processed by the query engine:
@@ -338,10 +297,9 @@ SELECT MAX(price) AS highest_price
 FROM uk.uk_price_paid_simple_partitioned
 WHERE town = 'LONDON';
 
-
-   ┌─highest_price─┐
-1. │     594300000 │ -- 594.30 million
-   └───────────────┘
+┌─highest_price─┐
+│     594300000 │ -- 594.30 million
+└───────────────┘
 
 1 row in set. Elapsed: 0.090 sec. Processed 5.48 million rows, 27.95 MB (60.66 million rows/s., 309.51 MB/s.)
 Peak memory usage: 163.44 MiB.
@@ -355,10 +313,9 @@ SELECT MAX(price) AS highest_price
 FROM uk.uk_price_paid_simple
 WHERE town = 'LONDON';
 
-
-   ┌─highest_price─┐
-1. │     594300000 │ -- 594.30 million
-   └───────────────┘
+┌─highest_price─┐
+│     594300000 │ -- 594.30 million
+└───────────────┘
 
 1 row in set. Elapsed: 0.012 sec. Processed 1.97 million rows, 9.87 MB (162.23 million rows/s., 811.17 MB/s.)
 Peak memory usage: 62.02 MiB.

@@ -138,7 +138,7 @@ ORDER BY timestamp
 ```
 Notice the response comes back in a nice table format:
 
-```response
+```text
 ┌─user_id─┬─message────────────────────────────────────────────┬───────────timestamp─┬──metric─┐
 │     102 │ Insert a lot of rows per batch                     │ 2022-03-21 00:00:00 │ 1.41421 │
 │     102 │ Sort your data based on your commonly-used queries │ 2022-03-22 00:00:00 │   2.718 │

@@ -287,7 +287,7 @@ const config = {
       prism: {
         theme: themes.darkTheme,
         darkTheme: themes.darkTheme,
-        additionalLanguages: ["java", "cpp", "rust"],
+        additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
         magicComments: [
           // Remember to extend the default highlight class name as well!
           {
@@ -355,7 +355,8 @@ const config = {
     [
       pluginLlmsTxt,
       {}
-    ]
+    ],
+    ['./plugins/tailwind-config.js', {}],
   ],
   customFields: {
     blogSidebarLink: "/docs/knowledgebase", // Used for KB article page

@@ -254,7 +254,7 @@ const config = {
       prism: {
         theme: themes.darkTheme,
         darkTheme: themes.darkTheme,
-        additionalLanguages: ["java", "cpp", "rust"],
+        additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
         magicComments: [
           // Remember to extend the default highlight class name as well!
           {
@@ -292,6 +292,7 @@ const config = {
       },
     ],
     chHeader,
+    ['./plugins/tailwind-config.js', {}],
   ],
   customFields: {
     blogSidebarLink: "/docs/knowledgebase", // Used for KB article page

@@ -265,7 +265,7 @@ const config = {
       prism: {
         theme: themes.darkTheme,
         darkTheme: themes.darkTheme,
-        additionalLanguages: ["java", "cpp", "rust"],
+        additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
         magicComments: [
           // Remember to extend the default highlight class name as well!
           {
@@ -309,6 +309,7 @@ const config = {
       },
     ],
     chHeader,
+    ['./plugins/tailwind-config.js', {}],
   ],
   customFields: {
     blogSidebarLink: "/docs/knowledgebase", // Used for KB article page

@@ -254,7 +254,7 @@ const config = {
       prism: {
         theme: themes.darkTheme,
         darkTheme: themes.darkTheme,
-        additionalLanguages: ["java", "cpp", "rust"],
+        additionalLanguages: ["java", "cpp", "rust", "python", "javascript"],
         magicComments: [
           // Remember to extend the default highlight class name as well!
           {
@@ -292,6 +292,7 @@ const config = {
       },
     ],
     chHeader,
+    ['./plugins/tailwind-config.js', {}],
   ],
   customFields: {
     blogSidebarLink: "/docs/knowledgebase", // Used for KB article page

@@ -27,6 +27,8 @@
     "run-markdown-linter": "yarn markdownlint-cli2 --config ./scripts/.markdownlint-cli2.yaml 'docs/**/*.md'"
   },
   "dependencies": {
+    "@clickhouse/click-ui": "^0.0.199",
+    "@clickhouse/client-web": "^1.11.0",
     "@docusaurus/core": "3.7.0",
     "@docusaurus/faster": "^3.7.0",
     "@docusaurus/plugin-client-redirects": "^3.7.0",
@@ -41,15 +43,19 @@
     "axios": "^1.8.2",
     "clsx": "^2.1.0",
     "docusaurus-plugin-sass": "^0.2.6",
+    "echarts": "^5.6.0",
+    "echarts-for-react": "^3.0.2",
     "esbuild": "^0.25.0",
     "esbuild-loader": "^4.0.3",
+    "filesize": "^10.1.6",
     "flexsearch": "^0.7.43",
     "gray-matter": "^4.0.3",
     "hast-util-is-element": "1.1.0",
     "http-proxy-middleware": "3.0.3",
     "katex": "^0.16.21",
     "markdownlint-cli2": "^0.17.2",
     "node-fetch": "^3.3.2",
+    "numeral": "^2.0.6",
     "prism-react-renderer": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -59,18 +65,23 @@
     "remark-link-rewrite": "^1.0.7",
     "remark-math": "^6.0.0",
     "sass": "^1.86.1",
-    "search-insights": "^2.17.3"
+    "search-insights": "^2.17.3",
+    "short-uuid": "^5.2.0"
   },
   "devDependencies": {
     "@argos-ci/cli": "^2.5.5",
     "@argos-ci/playwright": "^3.9.4",
     "@docusaurus/module-type-aliases": "3.7.0",
     "@playwright/test": "^1.51.1",
+    "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/react": "^19.0.4",
     "@types/styled-jsx": "^3.4.4",
     "cheerio": "^1.0.0",
     "markdownlint-rule-helpers": "^0.28.0",
+    "postcss": "^8.5.3",
     "rsync": "^0.6.1",
+    "tailwindcss": "^4.1.3",
     "typescript": "^5.8.2"
   },
   "browserslist": {

@@ -0,0 +1,9 @@
+module.exports = function tailwindPlugin(context, options) {
+    return {
+        name: 'tailwind-plugin',
+        configurePostCss(postcssOptions) {
+        postcssOptions.plugins = [require('@tailwindcss/postcss')]
+        return postcssOptions
+        }
+    }
+}
@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+    }
+}