From 5657183bc04969fbdf3b2627521a6d5b00f32b89 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 22 Nov 2024 16:30:03 -0800
Subject: [PATCH 1/3] Move all Elastic Charts docs from the `Component` tab to
 the `Data visualization` tab

+ remove unnecessary badge with charts version (handle that holistically if we're going to add it back in)

+ sidebar and copy tweaks
---
 .../components/elastic_charts/_category_.yml     |   3 ---
 .../accessibility_features.mdx                   |   5 ++---
 .../dashboard_good_practices.mdx                 |   3 ++-
 .../data.tsx                                     |   0
 .../elastic_charts_design_system.mdx             |   3 ++-
 .../sizes.tsx                                    |   2 +-
 .../sizing.mdx                                   |   3 +--
 .../theming.mdx}                                 |  15 +++++----------
 .../docs/data_visualization/types/_category_.yml |   3 +++
 .../types}/categorical.mdx                       |   5 ++---
 .../types}/categorical.tsx                       |   6 ++++--
 .../types}/category_chart.tsx                    |   4 ++--
 .../types}/metric_anatomy.png                    | Bin
 .../types}/metric_chart.mdx                      |   7 +++----
 .../types}/metric_chart_no_data.tsx              |   9 ++-------
 .../types}/metric_chart_resizing.tsx             |   2 +-
 .../types}/metric_intro.png                      | Bin
 .../types}/part_to_whole_comparisons.mdx         |  15 +++++++--------
 .../types}/pie_alts.tsx                          |   4 ++--
 .../types}/pie_slices.tsx                        |   4 ++--
 .../types}/shared.tsx                            |   0
 .../types}/time_chart.tsx                        |   4 ++--
 .../types}/time_series.mdx                       |   5 ++---
 .../use_chart_base_theme.ts                      |   0
 24 files changed, 45 insertions(+), 57 deletions(-)
 delete mode 100644 packages/website/docs/components/elastic_charts/_category_.yml
 rename packages/website/docs/{components/elastic_charts => data_visualization}/accessibility_features.mdx (98%)
 rename packages/website/docs/{components/elastic_charts => data_visualization}/data.tsx (100%)
 rename packages/website/docs/{components/elastic_charts => data_visualization}/sizes.tsx (99%)
 rename packages/website/docs/{components/elastic_charts => data_visualization}/sizing.mdx (99%)
 rename packages/website/docs/{components/elastic_charts/creating_charts.mdx => data_visualization/theming.mdx} (93%)
 create mode 100644 packages/website/docs/data_visualization/types/_category_.yml
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/categorical.mdx (87%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/categorical.tsx (98%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/category_chart.tsx (98%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/metric_anatomy.png (100%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/metric_chart.mdx (99%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/metric_chart_no_data.tsx (92%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/metric_chart_resizing.tsx (95%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/metric_intro.png (100%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/part_to_whole_comparisons.mdx (97%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/pie_alts.tsx (99%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/pie_slices.tsx (98%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/shared.tsx (100%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/time_chart.tsx (97%)
 rename packages/website/docs/{components/elastic_charts => data_visualization/types}/time_series.mdx (85%)
 rename packages/website/docs/{components/elastic_charts => data_visualization}/use_chart_base_theme.ts (100%)

diff --git a/packages/website/docs/components/elastic_charts/_category_.yml b/packages/website/docs/components/elastic_charts/_category_.yml
deleted file mode 100644
index aa3eb8b30a3..00000000000
--- a/packages/website/docs/components/elastic_charts/_category_.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-label: Elastic Charts
-position: 10
-collapsed: false
diff --git a/packages/website/docs/components/elastic_charts/accessibility_features.mdx b/packages/website/docs/data_visualization/accessibility_features.mdx
similarity index 98%
rename from packages/website/docs/components/elastic_charts/accessibility_features.mdx
rename to packages/website/docs/data_visualization/accessibility_features.mdx
index 52cce48872e..4217abf7900 100644
--- a/packages/website/docs/components/elastic_charts/accessibility_features.mdx
+++ b/packages/website/docs/data_visualization/accessibility_features.mdx
@@ -1,6 +1,7 @@
 ---
-slug: /elastic-charts/accessibility-features
+slug: /charts/accessibility
 id: elastic_charts_accessibility_features
+sidebar_position: 3
 ---
 
 # Accessibility features
@@ -10,8 +11,6 @@ import * as ElasticCharts from '@elastic/charts';
 import { useChartBaseTheme } from './use_chart_base_theme.ts';
 ```
 
-<Badge href="https://github.com/elastic/elastic-charts">External library: @elastic/charts v64.1.0</Badge>
-
 [Elastic Charts](https://elastic.github.io/elastic-charts) provides some accessibilty features for all users.
 
 **Available a11y-related features**
diff --git a/packages/website/docs/data_visualization/dashboard_good_practices.mdx b/packages/website/docs/data_visualization/dashboard_good_practices.mdx
index 71a9c3506ac..15e2f72a988 100644
--- a/packages/website/docs/data_visualization/dashboard_good_practices.mdx
+++ b/packages/website/docs/data_visualization/dashboard_good_practices.mdx
@@ -1,6 +1,7 @@
 ---
 id: dashboard_good_practices
-slug: /data-viz/dashboard-good-practices
+slug: /charts/dashboard-good-practices
+sidebar_position: 2
 ---
 
 # Dashboard good practices
diff --git a/packages/website/docs/components/elastic_charts/data.tsx b/packages/website/docs/data_visualization/data.tsx
similarity index 100%
rename from packages/website/docs/components/elastic_charts/data.tsx
rename to packages/website/docs/data_visualization/data.tsx
diff --git a/packages/website/docs/data_visualization/elastic_charts_design_system.mdx b/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
index 940147353df..ea3f73683ec 100644
--- a/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
+++ b/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
@@ -1,6 +1,7 @@
 ---
 id: elastic_charts_design_system
-slug: /data-viz/elastic-charts-design-system
+slug: /charts/design-system
+sidebar_position: 1
 ---
 
 # Elastic Charts as a design system
diff --git a/packages/website/docs/components/elastic_charts/sizes.tsx b/packages/website/docs/data_visualization/sizes.tsx
similarity index 99%
rename from packages/website/docs/components/elastic_charts/sizes.tsx
rename to packages/website/docs/data_visualization/sizes.tsx
index a0132ff6598..dac8312178f 100644
--- a/packages/website/docs/components/elastic_charts/sizes.tsx
+++ b/packages/website/docs/data_visualization/sizes.tsx
@@ -34,7 +34,7 @@ import {
   type WithEuiThemeProps,
 } from '@elastic/eui';
 
-import { MultiChartCard, ChartCard } from './shared';
+import { MultiChartCard, ChartCard } from './types/shared';
 
 import { TIME_DATA, TIME_DATA_2 } from './data';
 
diff --git a/packages/website/docs/components/elastic_charts/sizing.mdx b/packages/website/docs/data_visualization/sizing.mdx
similarity index 99%
rename from packages/website/docs/components/elastic_charts/sizing.mdx
rename to packages/website/docs/data_visualization/sizing.mdx
index 24c40b8a2fb..919f35ff151 100644
--- a/packages/website/docs/components/elastic_charts/sizing.mdx
+++ b/packages/website/docs/data_visualization/sizing.mdx
@@ -1,12 +1,11 @@
 ---
 slug: /elastic-charts/sizing
 id: elastic_charts_sizing
+sidebar_position: 5
 ---
 
 # Sizing
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
 When placing charts into smaller containers or panels, you must re-evaluate your data to provide a more simplified version. This could be as simple as shifting legend positions from the right side to the bottom or adding annotations to give context and describe the key points in your data.
 
 ```mdx-code-block
diff --git a/packages/website/docs/components/elastic_charts/creating_charts.mdx b/packages/website/docs/data_visualization/theming.mdx
similarity index 93%
rename from packages/website/docs/components/elastic_charts/creating_charts.mdx
rename to packages/website/docs/data_visualization/theming.mdx
index 265de92c91e..9001afdac92 100644
--- a/packages/website/docs/components/elastic_charts/creating_charts.mdx
+++ b/packages/website/docs/data_visualization/theming.mdx
@@ -1,21 +1,16 @@
 ---
-slug: /elastic-charts/creating-charts
-id: elastic_charts_creating_charts
+slug: /charts/theming
+id: elastic_charts_theming
+sidebar_position: 6
 ---
 
-# Creating charts
+# Theming
 
 ```mdx-code-block
 import { useChartBaseTheme } from './use_chart_base_theme';
 import * as ElasticCharts from '@elastic/charts';
 ```
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
-EUI provides utilities and documentation for working with [Elastic Charts](https://elastic.github.io/elastic-charts), an open source charting library also created and maintained by Elastic.
-
-## Theming via EUI
-
 EUI provides both light and dark theme files to use in tandem with Elastic Charts. Simply import these objects from the themes folder and pass the correct one to the Settings.theme property.
 
 ```tsx
@@ -194,7 +189,7 @@ When coloring for sequential series data (not categorical), rely on conventions.
 Whan signifying quantities, group values into intervals instead of a continuous gradient scale.
 
 ```mdx-code-block
-import { Categorical } from './categorical';
+import { Categorical } from './types/categorical';
 ```
 
 <Categorical />
diff --git a/packages/website/docs/data_visualization/types/_category_.yml b/packages/website/docs/data_visualization/types/_category_.yml
new file mode 100644
index 00000000000..1c6b767e80e
--- /dev/null
+++ b/packages/website/docs/data_visualization/types/_category_.yml
@@ -0,0 +1,3 @@
+label: Types
+collapsed: false
+position: 4
diff --git a/packages/website/docs/components/elastic_charts/categorical.mdx b/packages/website/docs/data_visualization/types/categorical.mdx
similarity index 87%
rename from packages/website/docs/components/elastic_charts/categorical.mdx
rename to packages/website/docs/data_visualization/types/categorical.mdx
index b19807b6f85..78ec9f3c579 100644
--- a/packages/website/docs/components/elastic_charts/categorical.mdx
+++ b/packages/website/docs/data_visualization/types/categorical.mdx
@@ -1,12 +1,11 @@
 ---
-slug: /elastic-charts/categorical
+slug: /charts/types/categorical
 id: elastic_charts_categorical
+sidebar_position: 1
 ---
 
 # Categorical
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
 Categorical charts compare data between multiple distinct categories. Avoid using a line chart because it might create confusion with a time series chart. Use a bar chart instead.
 
 **Key configurations**
diff --git a/packages/website/docs/components/elastic_charts/categorical.tsx b/packages/website/docs/data_visualization/types/categorical.tsx
similarity index 98%
rename from packages/website/docs/components/elastic_charts/categorical.tsx
rename to packages/website/docs/data_visualization/types/categorical.tsx
index c3f81141cab..6bb6001d75f 100644
--- a/packages/website/docs/components/elastic_charts/categorical.tsx
+++ b/packages/website/docs/data_visualization/types/categorical.tsx
@@ -21,7 +21,7 @@ import {
 } from '@elastic/eui';
 import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared';
 
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 
 export const Categorical = () => {
   const chartBaseTheme = useChartBaseTheme();
@@ -58,7 +58,9 @@ export const Categorical = () => {
     []
   );
   const [dataString, setDataString] = useState('[{x: 1, y: 5.5, g: 0}]');
-  const [vizColors, setVizColors] = useState<ReturnType<typeof euiPaletteGray> | undefined>();
+  const [vizColors, setVizColors] = useState<
+    ReturnType<typeof euiPaletteGray> | undefined
+  >();
   const [vizColorsString, setVizColorsString] = useState('');
   const [chartType, setChartType] = useState<ChartType>('LineSeries');
 
diff --git a/packages/website/docs/components/elastic_charts/category_chart.tsx b/packages/website/docs/data_visualization/types/category_chart.tsx
similarity index 98%
rename from packages/website/docs/components/elastic_charts/category_chart.tsx
rename to packages/website/docs/data_visualization/types/category_chart.tsx
index 28240f624d8..9eb4074adea 100644
--- a/packages/website/docs/components/elastic_charts/category_chart.tsx
+++ b/packages/website/docs/data_visualization/types/category_chart.tsx
@@ -15,7 +15,8 @@ import {
   EuiButton,
 } from '@elastic/eui';
 
-import { SIMPLE_GITHUB_DATASET, GITHUB_DATASET } from './data';
+import { useChartBaseTheme } from '../use_chart_base_theme';
+import { SIMPLE_GITHUB_DATASET, GITHUB_DATASET } from '../data';
 import {
   ChartTypeCard,
   MultiChartCard,
@@ -23,7 +24,6 @@ import {
   type ChartType,
   ChartCard,
 } from './shared';
-import { useChartBaseTheme } from './use_chart_base_theme';
 
 export const CategoryChart = () => {
   const chartBaseTheme = useChartBaseTheme();
diff --git a/packages/website/docs/components/elastic_charts/metric_anatomy.png b/packages/website/docs/data_visualization/types/metric_anatomy.png
similarity index 100%
rename from packages/website/docs/components/elastic_charts/metric_anatomy.png
rename to packages/website/docs/data_visualization/types/metric_anatomy.png
diff --git a/packages/website/docs/components/elastic_charts/metric_chart.mdx b/packages/website/docs/data_visualization/types/metric_chart.mdx
similarity index 99%
rename from packages/website/docs/components/elastic_charts/metric_chart.mdx
rename to packages/website/docs/data_visualization/types/metric_chart.mdx
index 57726cf0ada..a9f7baf03c2 100644
--- a/packages/website/docs/components/elastic_charts/metric_chart.mdx
+++ b/packages/website/docs/data_visualization/types/metric_chart.mdx
@@ -1,18 +1,17 @@
 ---
-slug: /elastic-charts/metric-chart
+slug: /charts/types/metric-chart
 id: elastic_charts_metric_chart
+sidebar_position: 1
 ---
 
 # Metric Chart
 
 ```mdx-code-block
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 import * as ElasticCharts from '@elastic/charts';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 ```
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
 The **Metric** chart is a single value visualization available from [Elastic Charts](https://elastic.github.io/elastic-charts). It allows you to represent a metric, a KPI, a specific state with a very simple interface, similar to [**EuiStat**](/docs/display/stat) but with more data visualization oriented capabilities.
 
 ![Overview of metric component.](./metric_intro.png)
diff --git a/packages/website/docs/components/elastic_charts/metric_chart_no_data.tsx b/packages/website/docs/data_visualization/types/metric_chart_no_data.tsx
similarity index 92%
rename from packages/website/docs/components/elastic_charts/metric_chart_no_data.tsx
rename to packages/website/docs/data_visualization/types/metric_chart_no_data.tsx
index 33d7201bfbd..be7437cf13a 100644
--- a/packages/website/docs/components/elastic_charts/metric_chart_no_data.tsx
+++ b/packages/website/docs/data_visualization/types/metric_chart_no_data.tsx
@@ -1,12 +1,7 @@
 import React from 'react';
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPanel,
-  EuiText,
-} from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import { Chart, Metric, Settings } from '@elastic/charts';
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 
 export const MetricChartNoData = () => {
   const chartBaseTheme = useChartBaseTheme();
diff --git a/packages/website/docs/components/elastic_charts/metric_chart_resizing.tsx b/packages/website/docs/data_visualization/types/metric_chart_resizing.tsx
similarity index 95%
rename from packages/website/docs/components/elastic_charts/metric_chart_resizing.tsx
rename to packages/website/docs/data_visualization/types/metric_chart_resizing.tsx
index ae0439e67a5..a3ae84bf8e8 100644
--- a/packages/website/docs/components/elastic_charts/metric_chart_resizing.tsx
+++ b/packages/website/docs/data_visualization/types/metric_chart_resizing.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 import { Chart, Metric, Settings } from '@elastic/charts';
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 
 export const MetricChartResizing = () => {
   const chartBaseTheme = useChartBaseTheme();
diff --git a/packages/website/docs/components/elastic_charts/metric_intro.png b/packages/website/docs/data_visualization/types/metric_intro.png
similarity index 100%
rename from packages/website/docs/components/elastic_charts/metric_intro.png
rename to packages/website/docs/data_visualization/types/metric_intro.png
diff --git a/packages/website/docs/components/elastic_charts/part_to_whole_comparisons.mdx b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
similarity index 97%
rename from packages/website/docs/components/elastic_charts/part_to_whole_comparisons.mdx
rename to packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
index 2499da92952..717e88ef6e0 100644
--- a/packages/website/docs/components/elastic_charts/part_to_whole_comparisons.mdx
+++ b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
@@ -1,12 +1,11 @@
 ---
-slug: /elastic-charts/part-to-whole-comparisons
+slug: /charts/types/part-to-whole-comparisons
 id: elastic_charts_part_to_whole_comparisons
+sidebar_position: 2
 ---
 
 # Part to whole comparisons
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
 ## Pie and donut charts
 
 A common argument is made that pie charts are not usually the best representation for understanding data. However there are situations where pie charts are useful. Like when:
@@ -19,7 +18,7 @@ The guidelines for [donut charts](http://kosara.net/publications/Skau-EuroVis-20
 
 ```mdx-code-block
 import * as ElasticCharts from '@elastic/charts';
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 ```
 
@@ -142,15 +141,15 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
   ```
 </Demo>
 
-## Slices and labelling
+### Slices and labelling
 
 Try to keep the labels **within the slices** (or just outside) and consider appending their values. However, if there are many small slices or long labels, use a legend, especially one that displays the values in a table format with right aligned values.
 
-### Other slices
+#### Other slices
 
 Again, pie charts should have no more than six slices. However, it can be beneficial to **group smaller/overflow slices** into a single “Other” category. Careful consideration should be given when doing so as this could end up being the largest category and therefore obscuring the meaning of the chart.
 
-### Slice order
+#### Slice order
 
 The order of the slices should always **start from the 12 o’clock position**, showing the largest slice in the clockwise position then the rest ordering counterclockwise in descending order. However, categories that have a natural order, should follow this natural order, be it low to high or good to bad.
 
@@ -169,7 +168,7 @@ Multi-level pie charts (also known as sunbursts) and treemaps are great for visu
 Below are some basic examples and how EUI supports them with theming. However, this site will not document the best uses of these chart types. For more guidance, go to the [Elastic Charts documentation](https://elastic.github.io/elastic-charts).
 
 ```mdx-code-block
-import { GITHUB_DATASET_MOD } from './data';
+import { GITHUB_DATASET_MOD } from '../data';
 ```
 
 <Demo scope={{ ...ElasticCharts, useChartBaseTheme, GITHUB_DATASET_MOD }}>
diff --git a/packages/website/docs/components/elastic_charts/pie_alts.tsx b/packages/website/docs/data_visualization/types/pie_alts.tsx
similarity index 99%
rename from packages/website/docs/components/elastic_charts/pie_alts.tsx
rename to packages/website/docs/data_visualization/types/pie_alts.tsx
index 4731e191e18..b918db9aca8 100644
--- a/packages/website/docs/components/elastic_charts/pie_alts.tsx
+++ b/packages/website/docs/data_visualization/types/pie_alts.tsx
@@ -21,9 +21,9 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 
-import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data';
+import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from '../data';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 import { ChartCard } from './shared';
-import { useChartBaseTheme } from './use_chart_base_theme';
 
 export const PieAlts = () => {
   const { colorMode } = useEuiTheme();
diff --git a/packages/website/docs/components/elastic_charts/pie_slices.tsx b/packages/website/docs/data_visualization/types/pie_slices.tsx
similarity index 98%
rename from packages/website/docs/components/elastic_charts/pie_slices.tsx
rename to packages/website/docs/data_visualization/types/pie_slices.tsx
index 9f568c3efdf..5cdf67bef45 100644
--- a/packages/website/docs/components/elastic_charts/pie_slices.tsx
+++ b/packages/website/docs/data_visualization/types/pie_slices.tsx
@@ -19,8 +19,8 @@ import {
 } from '@elastic/eui';
 
 import { ChartCard } from './shared';
-import { BROWSER_DATA_2019 } from './data';
-import { useChartBaseTheme } from './use_chart_base_theme';
+import { BROWSER_DATA_2019 } from '../data';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 
 export const PieSlices = () => {
   const chartBaseTheme = useChartBaseTheme();
diff --git a/packages/website/docs/components/elastic_charts/shared.tsx b/packages/website/docs/data_visualization/types/shared.tsx
similarity index 100%
rename from packages/website/docs/components/elastic_charts/shared.tsx
rename to packages/website/docs/data_visualization/types/shared.tsx
diff --git a/packages/website/docs/components/elastic_charts/time_chart.tsx b/packages/website/docs/data_visualization/types/time_chart.tsx
similarity index 97%
rename from packages/website/docs/components/elastic_charts/time_chart.tsx
rename to packages/website/docs/data_visualization/types/time_chart.tsx
index b38de18921c..61a216ed0ff 100644
--- a/packages/website/docs/components/elastic_charts/time_chart.tsx
+++ b/packages/website/docs/data_visualization/types/time_chart.tsx
@@ -22,7 +22,8 @@ import {
   dateFormatAliases,
 } from '@elastic/eui';
 
-import { TIME_DATA, TIME_DATA_2 } from './data';
+import { TIME_DATA, TIME_DATA_2 } from '../data';
+import { useChartBaseTheme } from '../use_chart_base_theme';
 import {
   ChartTypeCard,
   CHART_COMPONENTS,
@@ -30,7 +31,6 @@ import {
   MultiChartCard,
   ChartCard,
 } from './shared';
-import { useChartBaseTheme } from './use_chart_base_theme';
 
 export const TimeChart = () => {
   const chartBaseTheme = useChartBaseTheme();
diff --git a/packages/website/docs/components/elastic_charts/time_series.mdx b/packages/website/docs/data_visualization/types/time_series.mdx
similarity index 85%
rename from packages/website/docs/components/elastic_charts/time_series.mdx
rename to packages/website/docs/data_visualization/types/time_series.mdx
index 6c8a08e9260..e2a00161c18 100644
--- a/packages/website/docs/components/elastic_charts/time_series.mdx
+++ b/packages/website/docs/data_visualization/types/time_series.mdx
@@ -1,12 +1,11 @@
 ---
-slug: /elastic-charts/time-series
+slug: /charts/types/time-series
 id: elastic_charts_time_series
+sidebar_position: 1
 ---
 
 # Time series
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
-
 Time series charts show data over a period of time, such as trends or comparisons across multiple categories. When smaller changes exist, it’s better to use line charts rather than bar charts.
 
 **Key configurations**
diff --git a/packages/website/docs/components/elastic_charts/use_chart_base_theme.ts b/packages/website/docs/data_visualization/use_chart_base_theme.ts
similarity index 100%
rename from packages/website/docs/components/elastic_charts/use_chart_base_theme.ts
rename to packages/website/docs/data_visualization/use_chart_base_theme.ts

From d6bfd4c90e783b0ee9192cb733742dfd814aa91a Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 25 Nov 2024 10:26:11 -0800
Subject: [PATCH 2/3] [PR feedback] Re-add charts version/link badge to all
 docs under data visualization

+ fix version to be dynamic with package.json instead of incorrectly static
---
 .../data_visualization/accessibility_features.mdx  |  7 ++++++-
 .../dashboard_good_practices.mdx                   |  5 +++++
 .../elastic_charts_design_system.mdx               |  5 +++++
 .../website/docs/data_visualization/sizing.mdx     |  5 +++++
 .../website/docs/data_visualization/theming.mdx    |  5 +++++
 .../docs/data_visualization/types/categorical.mdx  |  5 +++++
 .../docs/data_visualization/types/metric_chart.mdx |  7 ++++++-
 .../types/part_to_whole_comparisons.mdx            |  5 +++++
 .../docs/data_visualization/types/time_series.mdx  |  5 +++++
 .../docs/data_visualization/version_badge.tsx      | 14 ++++++++++++++
 10 files changed, 61 insertions(+), 2 deletions(-)
 create mode 100644 packages/website/docs/data_visualization/version_badge.tsx

diff --git a/packages/website/docs/data_visualization/accessibility_features.mdx b/packages/website/docs/data_visualization/accessibility_features.mdx
index 4217abf7900..49b13c2858f 100644
--- a/packages/website/docs/data_visualization/accessibility_features.mdx
+++ b/packages/website/docs/data_visualization/accessibility_features.mdx
@@ -1,9 +1,14 @@
 ---
+title: Accessibility features
 slug: /charts/accessibility
 id: elastic_charts_accessibility_features
 sidebar_position: 3
 ---
 
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
 # Accessibility features
 
 ```mdx-code-block
@@ -11,7 +16,7 @@ import * as ElasticCharts from '@elastic/charts';
 import { useChartBaseTheme } from './use_chart_base_theme.ts';
 ```
 
-[Elastic Charts](https://elastic.github.io/elastic-charts) provides some accessibilty features for all users.
+Elastic Charts provides some accessibilty features for all users.
 
 **Available a11y-related features**
 
diff --git a/packages/website/docs/data_visualization/dashboard_good_practices.mdx b/packages/website/docs/data_visualization/dashboard_good_practices.mdx
index 15e2f72a988..a0703fa12be 100644
--- a/packages/website/docs/data_visualization/dashboard_good_practices.mdx
+++ b/packages/website/docs/data_visualization/dashboard_good_practices.mdx
@@ -1,9 +1,14 @@
 ---
+title: Dashboard good practices
 id: dashboard_good_practices
 slug: /charts/dashboard-good-practices
 sidebar_position: 2
 ---
 
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
 # Dashboard good practices
 
 Dashboards are the most common way to monitor our own data, to be alerted of important events and to gather insights. They typically work combining different charts that might be completely unrelated as they can share the same data source from different points of view.
diff --git a/packages/website/docs/data_visualization/elastic_charts_design_system.mdx b/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
index ea3f73683ec..e5ebcca4177 100644
--- a/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
+++ b/packages/website/docs/data_visualization/elastic_charts_design_system.mdx
@@ -1,9 +1,14 @@
 ---
+title: Elastic Charts as a design system
 id: elastic_charts_design_system
 slug: /charts/design-system
 sidebar_position: 1
 ---
 
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
 # Elastic Charts as a design system
 
 Elastic Charts ([github repository](https://github.com/elastic/elastic-charts), [storybook](https://elastic.github.io/elastic-charts/?path=/story/annotations-lines--x-continuous-domain&globals=theme:light)) is library of charts, a set of independent components that share a series of common rules in terms of style and behavior.
diff --git a/packages/website/docs/data_visualization/sizing.mdx b/packages/website/docs/data_visualization/sizing.mdx
index 919f35ff151..dc2137aa0dd 100644
--- a/packages/website/docs/data_visualization/sizing.mdx
+++ b/packages/website/docs/data_visualization/sizing.mdx
@@ -1,9 +1,14 @@
 ---
+title: Sizing
 slug: /elastic-charts/sizing
 id: elastic_charts_sizing
 sidebar_position: 5
 ---
 
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
 # Sizing
 
 When placing charts into smaller containers or panels, you must re-evaluate your data to provide a more simplified version. This could be as simple as shifting legend positions from the right side to the bottom or adding annotations to give context and describe the key points in your data.
diff --git a/packages/website/docs/data_visualization/theming.mdx b/packages/website/docs/data_visualization/theming.mdx
index 9001afdac92..c965e0f9fa1 100644
--- a/packages/website/docs/data_visualization/theming.mdx
+++ b/packages/website/docs/data_visualization/theming.mdx
@@ -1,9 +1,14 @@
 ---
+title: Theming
 slug: /charts/theming
 id: elastic_charts_theming
 sidebar_position: 6
 ---
 
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
 # Theming
 
 ```mdx-code-block
diff --git a/packages/website/docs/data_visualization/types/categorical.mdx b/packages/website/docs/data_visualization/types/categorical.mdx
index 78ec9f3c579..4abe74ee5fa 100644
--- a/packages/website/docs/data_visualization/types/categorical.mdx
+++ b/packages/website/docs/data_visualization/types/categorical.mdx
@@ -1,9 +1,14 @@
 ---
+title: Categorical
 slug: /charts/types/categorical
 id: elastic_charts_categorical
 sidebar_position: 1
 ---
 
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
+
 # Categorical
 
 Categorical charts compare data between multiple distinct categories. Avoid using a line chart because it might create confusion with a time series chart. Use a bar chart instead.
diff --git a/packages/website/docs/data_visualization/types/metric_chart.mdx b/packages/website/docs/data_visualization/types/metric_chart.mdx
index a9f7baf03c2..38d35362800 100644
--- a/packages/website/docs/data_visualization/types/metric_chart.mdx
+++ b/packages/website/docs/data_visualization/types/metric_chart.mdx
@@ -1,10 +1,15 @@
 ---
+title: Metric chart
 slug: /charts/types/metric-chart
 id: elastic_charts_metric_chart
 sidebar_position: 1
 ---
 
-# Metric Chart
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
+
+# Metric chart
 
 ```mdx-code-block
 import { useChartBaseTheme } from '../use_chart_base_theme';
diff --git a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
index 717e88ef6e0..5462b6e5250 100644
--- a/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
+++ b/packages/website/docs/data_visualization/types/part_to_whole_comparisons.mdx
@@ -1,9 +1,14 @@
 ---
+title: Part to whole comparisons
 slug: /charts/types/part-to-whole-comparisons
 id: elastic_charts_part_to_whole_comparisons
 sidebar_position: 2
 ---
 
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
+
 # Part to whole comparisons
 
 ## Pie and donut charts
diff --git a/packages/website/docs/data_visualization/types/time_series.mdx b/packages/website/docs/data_visualization/types/time_series.mdx
index e2a00161c18..30e639ada84 100644
--- a/packages/website/docs/data_visualization/types/time_series.mdx
+++ b/packages/website/docs/data_visualization/types/time_series.mdx
@@ -1,9 +1,14 @@
 ---
+title: Time series
 slug: /charts/types/time-series
 id: elastic_charts_time_series
 sidebar_position: 1
 ---
 
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
+
 # Time series
 
 Time series charts show data over a period of time, such as trends or comparisons across multiple categories. When smaller changes exist, it’s better to use line charts rather than bar charts.
diff --git a/packages/website/docs/data_visualization/version_badge.tsx b/packages/website/docs/data_visualization/version_badge.tsx
new file mode 100644
index 00000000000..3a8d6976b9a
--- /dev/null
+++ b/packages/website/docs/data_visualization/version_badge.tsx
@@ -0,0 +1,14 @@
+import { EuiBadge } from '@elastic/eui';
+
+import { dependencies } from '../../package.json';
+const chartsVersion = dependencies['@elastic/charts'].replace(/[^0-9\.]/g, '');
+
+export default () => (
+  <EuiBadge
+    iconType="popout"
+    iconSide="right"
+    href={`https://github.com/elastic/elastic-charts/tree/v${chartsVersion}`}
+  >
+    @elastic/charts v{chartsVersion}
+  </EuiBadge>
+);

From 65b5dafec4d4d3ea859f21a72317d806df67d108 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 25 Nov 2024 11:09:02 -0800
Subject: [PATCH 3/3] Fix webpack warning about destructured import from
 package.json

---
 packages/website/docs/data_visualization/version_badge.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/website/docs/data_visualization/version_badge.tsx b/packages/website/docs/data_visualization/version_badge.tsx
index 3a8d6976b9a..ffa87bf264b 100644
--- a/packages/website/docs/data_visualization/version_badge.tsx
+++ b/packages/website/docs/data_visualization/version_badge.tsx
@@ -1,7 +1,10 @@
 import { EuiBadge } from '@elastic/eui';
 
-import { dependencies } from '../../package.json';
-const chartsVersion = dependencies['@elastic/charts'].replace(/[^0-9\.]/g, '');
+import pkg from '../../package.json';
+const chartsVersion = pkg.dependencies['@elastic/charts'].replace(
+  /[^0-9\.]/g,
+  ''
+);
 
 export default () => (
   <EuiBadge