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 97% rename from packages/website/docs/components/elastic_charts/accessibility_features.mdx rename to packages/website/docs/data_visualization/accessibility_features.mdx index 52cce48872e..49b13c2858f 100644 --- a/packages/website/docs/components/elastic_charts/accessibility_features.mdx +++ b/packages/website/docs/data_visualization/accessibility_features.mdx @@ -1,8 +1,14 @@ --- -slug: /elastic-charts/accessibility-features +title: Accessibility features +slug: /charts/accessibility id: elastic_charts_accessibility_features +sidebar_position: 3 --- +import VersionBadge from './version_badge'; + + + # Accessibility features ```mdx-code-block @@ -10,9 +16,7 @@ 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. +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..a0703fa12be 100644 --- a/packages/website/docs/data_visualization/dashboard_good_practices.mdx +++ b/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'; + + + # 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/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..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,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'; + + + # 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/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 98% rename from packages/website/docs/components/elastic_charts/sizing.mdx rename to packages/website/docs/data_visualization/sizing.mdx index 24c40b8a2fb..dc2137aa0dd 100644 --- a/packages/website/docs/components/elastic_charts/sizing.mdx +++ b/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'; + + -External library: @elastic/charts v64.1.0 +# 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/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..c965e0f9fa1 100644 --- a/packages/website/docs/components/elastic_charts/creating_charts.mdx +++ b/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'; + + + +# 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 +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'; ``` 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 82% rename from packages/website/docs/components/elastic_charts/categorical.mdx rename to packages/website/docs/data_visualization/types/categorical.mdx index b19807b6f85..4abe74ee5fa 100644 --- a/packages/website/docs/components/elastic_charts/categorical.mdx +++ b/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'; + + -External library: @elastic/charts v64.1.0 +# 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/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..38d35362800 100644 --- a/packages/website/docs/components/elastic_charts/metric_chart.mdx +++ b/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'; + + + +# 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 96% 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..5462b6e5250 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,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'; + + -External library: @elastic/charts v64.1.0 +# 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'; ``` -## 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'; ``` 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 80% rename from packages/website/docs/components/elastic_charts/time_series.mdx rename to packages/website/docs/data_visualization/types/time_series.mdx index 6c8a08e9260..30e639ada84 100644 --- a/packages/website/docs/components/elastic_charts/time_series.mdx +++ b/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'; + + -External library: @elastic/charts v64.1.0 +# 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/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 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..ffa87bf264b --- /dev/null +++ b/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 () => ( + + @elastic/charts v{chartsVersion} + +);