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'; ``` -External library: @elastic/charts v64.1.0 - [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 -External library: @elastic/charts v64.1.0 - 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'; ``` -External library: @elastic/charts v64.1.0 - -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'; ``` 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 -External library: @elastic/charts v64.1.0 - 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 | undefined>(); + const [vizColors, setVizColors] = useState< + ReturnType | undefined + >(); const [vizColorsString, setVizColorsString] = useState(''); const [chartType, setChartType] = useState('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'; ``` -External library: @elastic/charts v64.1.0 - 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 -External library: @elastic/charts v64.1.0 - ## 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'; ``` -## 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'; ``` 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 -External library: @elastic/charts v64.1.0 - 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