[EUI+] Move all Elastic Charts docs from the Components tab to the …

…`Data visualization` (#8182)

packages/website/docs/components/elastic_charts/accessibility_features.mdx → packages/website/docs/data_visualization/accessibility_features.mdx

@@ -1,18 +1,22 @@
 ---
-slug: /elastic-charts/accessibility-features
+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
 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.
+Elastic Charts provides some accessibilty features for all users.
 
 **Available a11y-related features**
 

packages/website/docs/data_visualization/dashboard_good_practices.mdx

@@ -1,8 +1,14 @@
 ---
+title: Dashboard good practices
 id: dashboard_good_practices
-slug: /data-viz/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.

packages/website/docs/data_visualization/elastic_charts_design_system.mdx

@@ -1,8 +1,14 @@
 ---
+title: Elastic Charts as a design system
 id: elastic_charts_design_system
-slug: /data-viz/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.

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,11 +1,15 @@
 ---
+title: Sizing
 slug: /elastic-charts/sizing
 id: elastic_charts_sizing
+sidebar_position: 5
 ---
 
-# Sizing
+import VersionBadge from './version_badge';
+
+<VersionBadge />
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
+# 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.
 

packages/website/docs/components/elastic_charts/creating_charts.mdx → packages/website/docs/data_visualization/theming.mdx

@@ -1,21 +1,21 @@
 ---
-slug: /elastic-charts/creating-charts
-id: elastic_charts_creating_charts
+title: Theming
+slug: /charts/theming
+id: elastic_charts_theming
+sidebar_position: 6
 ---
 
-# Creating charts
+import VersionBadge from './version_badge';
+
+<VersionBadge />
+
+# 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 +194,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,11 +1,15 @@
 ---
-slug: /elastic-charts/categorical
+title: Categorical
+slug: /charts/types/categorical
 id: elastic_charts_categorical
+sidebar_position: 1
 ---
 
-# Categorical
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
+# 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.
 

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,22 @@
 ---
-slug: /elastic-charts/metric-chart
+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';
+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,11 +1,15 @@
 ---
-slug: /elastic-charts/part-to-whole-comparisons
+title: 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
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
+# Part to whole comparisons
 
 ## Pie and donut charts
 
@@ -19,7 +23,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 +146,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 +173,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,11 +1,15 @@
 ---
-slug: /elastic-charts/time-series
+title: Time series
+slug: /charts/types/time-series
 id: elastic_charts_time_series
+sidebar_position: 1
 ---
 
-# Time series
+import VersionBadge from '../version_badge';
+
+<VersionBadge />
 
-<Badge>External library: @elastic/charts v64.1.0</Badge>
+# 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.
 

packages/website/docs/data_visualization/version_badge.tsx

@@ -0,0 +1,17 @@
+import { EuiBadge } from '@elastic/eui';
+
+import pkg from '../../package.json';
+const chartsVersion = pkg.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>
+);