Move all Elastic Charts docs from the Component tab to the `Data vi…

…sualization` tab

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

+ sidebar and copy tweaks

packages/website/docs/components/elastic_charts/accessibility_features.mdx → 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**

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

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

packages/website/docs/components/elastic_charts/sizes.tsx → 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';
 

packages/website/docs/components/elastic_charts/sizing.mdx → 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

packages/website/docs/components/elastic_charts/creating_charts.mdx → 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 />

packages/website/docs/data_visualization/types/_category_.yml

@@ -0,0 +1,3 @@
+label: Types
+collapsed: false
+position: 4

packages/website/docs/components/elastic_charts/categorical.mdx → 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**

packages/website/docs/components/elastic_charts/categorical.tsx → 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');
 

packages/website/docs/components/elastic_charts/category_chart.tsx → packages/website/docs/data_visualization/types/category_chart.tsx

@@ -15,15 +15,15 @@ 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,
   CHART_COMPONENTS,
   type ChartType,
   ChartCard,
 } from './shared';
-import { useChartBaseTheme } from './use_chart_base_theme';
 
 export const CategoryChart = () => {
   const chartBaseTheme = useChartBaseTheme();

packages/website/docs/components/elastic_charts/metric_chart.mdx → 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)

packages/website/docs/components/elastic_charts/metric_chart_no_data.tsx → 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();

packages/website/docs/components/elastic_charts/metric_chart_resizing.tsx → 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();

packages/website/docs/components/elastic_charts/part_to_whole_comparisons.mdx → 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 }}>

packages/website/docs/components/elastic_charts/pie_alts.tsx → 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();

packages/website/docs/components/elastic_charts/pie_slices.tsx → 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();

packages/website/docs/components/elastic_charts/time_chart.tsx → packages/website/docs/data_visualization/types/time_chart.tsx

@@ -22,15 +22,15 @@ 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,
   type ChartType,
   MultiChartCard,
   ChartCard,
 } from './shared';
-import { useChartBaseTheme } from './use_chart_base_theme';
 
 export const TimeChart = () => {
   const chartBaseTheme = useChartBaseTheme();

packages/website/docs/components/elastic_charts/time_series.mdx → 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**