-
- );
-};
diff --git a/src-docs/src/views/elastic_charts/category_example.js b/src-docs/src/views/elastic_charts/category_example.js
deleted file mode 100644
index 2a1cb86e68..0000000000
--- a/src-docs/src/views/elastic_charts/category_example.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import React, { Fragment } from 'react';
-import { ExternalBadge } from './shared';
-import { CategoryChart } from './category_chart';
-
-import { OuiCode } from '../../../../src/components';
-
-export const ElasticChartsCategoryExample = {
- title: 'Categorical',
- intro: (
-
-
-
- ),
- sections: [
- {
- text: (
-
-
- 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/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
deleted file mode 100644
index 0fb6f0ceeb..0000000000
--- a/src-docs/src/views/elastic_charts/pie_example.js
+++ /dev/null
@@ -1,380 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import React, { Fragment } from 'react';
-import { renderToHtml } from '../../services';
-import { GuideSectionTypes } from '../../components';
-
-import { ExternalBadge } from './shared';
-import pieSliceOrderImg from '../../images/pie_slice_order.png';
-
-import {
- OuiSpacer,
- OuiCard,
- OuiIcon,
- OuiFlexGroup,
- OuiFlexItem,
- OuiLink,
- OuiIconTip,
- OuiToolTip,
- OuiCallOut,
- OuiCode,
- OuiImage,
-} from '../../../../src/components';
-
-import PieChart from './pie';
-const pieSource = require('!!raw-loader!./pie');
-const pieHtml = renderToHtml(PieChart);
-
-import PieSlices from './pie_slices';
-
-import Treemaps from './treemap';
-const treemapsSource = require('!!raw-loader!./treemap');
-const treemapsHtml = renderToHtml(Treemaps);
-
-import PieAlts from './pie_alts';
-
-const introCards = [
- {
- title: 'Use',
- iconType: 'checkInCircleFilled',
- iconColor: 'success',
- description: (
- <>
- When categorical data is being compared to a whole{' '}
- (usually 100%).
-
- ),
- },
- {
- title: "Don't use",
- iconType: 'crossInACircleFilled',
- iconColor: 'danger',
- description: (
- <>
- With relational data or when needing to compare categories to{' '}
- each other.
-
- ),
- },
- {
- title: 'Tip',
- iconType: 'help',
- iconColor: 'primary',
- description: (
- <>
- Each subdivision or category must be mutually exclusive{' '}
- and sum up to a meaningful whole.
-
- ),
- },
- {
- title: 'Be careful',
- iconType: 'alert',
- iconColor: 'warning',
- description: (
- <>
- Don't leave out sub-sections as this would render
- the whole as artificial.
-
- ),
- },
-];
-
-const unsupportedTooltip = (
-
-);
-
-const orderingTooltip = (
-
- Wong, Donna M.{' '}
-
- The Wall Street Journal Guide to Information Graphics: The Dos and
- Don'ts of Presenting Data, Facts, and Figures.
- {' '}
- W. W. Norton & Company, 2013.
-
- }
- />
- }
- iconProps={{
- className: 'oui-alignTop',
- }}
- />
-);
-
-export const ElasticChartsPieExample = {
- title: 'Part to whole comparisons',
- intro: (
-
-
-
-
- {introCards.map((card) => (
-
-
-
-
-
- {card.title}
-
- }
- titleElement="h2"
- description={card.description}
- />
-
- ))}
-
-
- ),
- sections: [
- {
- title: 'Pie and donut charts',
- source: [
- {
- type: GuideSectionTypes.JS,
- code: pieSource,
- },
- {
- type: GuideSectionTypes.HTML,
- code: pieHtml,
- },
- ],
- text: (
- <>
-
- 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:
-
-
-
There are a maximum of 6 slices (divisions)
-
The values are around 25%, 50% or 75%
-
One of the categories is much bigger than the others
-
-
- The guidelines for{' '}
-
- It was originally thought that comparing the angles of the
- center vertices of the slices were how viewers read pie
- charts. However, certain research shows that it is the arc and
- area that are the crucial parts to understanding giving donut
- charts a firm foothold in the circular graph category.
-
-
- Click the link to read more on the study.
-
- }>
-
- donut charts
-
- {' '}
- are the same for pie charts. The empty center of donut charts can
- provide a place to display additional/related information
-
- .
-
-
- Elastic Charts'{' '}
-
- partition charts do not currently support theming
- {' '}
- through the {''} component.
-
- }>
-
- {' '}
- OUI provides a separate key for use with
-
- {'Partition.config={{...OUI_CHARTS_THEME_LIGHT.partition}}'}
-
- . The chart colors also need to be passed a different way via{' '}
-
- {'Partition.layers.shape.fillColor'}
-
- . See the snippet for full details.
-
-
-
- ),
- demo: ,
- snippet: `import { OUI_CHARTS_THEME_DARK, OUI_CHARTS_THEME_LIGHT } from '@opensearch-project/oui/dist/oui_charts_theme';
-
-const ouiChartTheme = isDarkTheme ? OUI_CHARTS_THEME_DARK : OUI_CHARTS_THEME_LIGHT;
-const ouiPartitionConfig = ouiChartTheme.partition;
-
-
- Number(d.percent)}
- valueFormatter={() => ''} // Hide the slice value if data values are already in percentages
- layers={[
- {
- groupByRollup: d => d.category,
- shape: {
- fillColor: d => ouiChartTheme.theme.colors.vizColors[d.sortIndex],
- },
- },
- ]}
- config={{
- ...ouiPartitionConfig,
- emptySizeRatio: 0.4, // To create a donut chart
- clockwiseSectors: false, // For correct slice order
- }}
- />
-`,
- },
- {
- title: 'Slices and labelling',
- text: (
- <>
-
- 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
-
- 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
-
- 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.{orderingTooltip} However,
- categories that have a natural order, should follow this natural
- order, be it low to high or good to bad.{unsupportedTooltip}
-
- Multi-level pie charts (also known as sunbursts) and treemaps are
- great for visualizing hierarchical relationships and for quickly
- referencing the overall data comparison. However, they’re not meant
- to represent trends or explicit/detailed value comparison.
-
-
- Below are some basic examples and how OUI 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
-
- .
-
- Most pie/donut/sunburst chart data can be better{' '}
- explained using bar charts with different configurations. You should
- definitely not use pie charts when:
-
-
-
- You want users to compare the size of slices
-
-
You have more than 6 slices
-
- You need multiple pie charts to compare multiple data sets, use
- part-to-whole bar charts with percentages
-
-
You have negative values
-
-
- And under no circumstances should you enlarge or explode slices.
- This leads to{' '}
-
- errors in understanding
-
- .
-
-
- );
- }
-}
-
-Sizes.contextType = ThemeContext;
diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.js
deleted file mode 100644
index f57c0d0580..0000000000
--- a/src-docs/src/views/elastic_charts/sparklines.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import React, { useContext, Fragment } from 'react';
-import cloneDeep from 'lodash/cloneDeep';
-import { ThemeContext } from '../../components';
-import {
- Chart,
- BarSeries,
- Settings,
- LineSeries,
- AreaSeries,
-} from '@elastic/charts';
-
-import {
- OUI_CHARTS_THEME_DARK,
- OUI_CHARTS_THEME_LIGHT,
- OUI_SPARKLINE_THEME_PARTIAL,
-} from '../../../../src/themes/charts/themes';
-
-import {
- OuiPanel,
- OuiStat,
- OuiFlexGrid,
- OuiFlexItem,
- OuiIcon,
- OuiSpacer,
- OuiText,
-} from '../../../../src/components';
-
-import { TIME_DATA_SMALL } from './data';
-import {
- ouiPaletteForDarkBackground,
- ouiPaletteForLightBackground,
-} from '../../../../src/services';
-
-export const Sparklines = () => {
- const themeContext = useContext(ThemeContext);
- const isDarkTheme = themeContext.theme.includes('dark');
-
- const theme = [
- OUI_SPARKLINE_THEME_PARTIAL,
- isDarkTheme ? OUI_CHARTS_THEME_DARK.theme : OUI_CHARTS_THEME_LIGHT.theme,
- ];
-
- const TIME_DATA_SMALL_REVERSE = cloneDeep(TIME_DATA_SMALL).reverse();
- const TIME_DATA_SMALL_REVERSE_MAJOR = cloneDeep(TIME_DATA_SMALL_REVERSE);
- TIME_DATA_SMALL_REVERSE_MAJOR[
- TIME_DATA_SMALL_REVERSE_MAJOR.length - 1
- ][1] = -100;
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 15%
-
-
-
-
-
-
-
- 15%
-
- }
- description="Major decrease over time"
- titleColor="danger"
- textAlign="right">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - 15 points since last Tuesday
-
-
-
-
-
-
- );
-};
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
deleted file mode 100644
index 5e50458670..0000000000
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import React, { Fragment } from 'react';
-import { renderToHtml } from '../../services';
-import { GuideSectionTypes } from '../../components';
-
-import { ExternalBadge } from './shared';
-import { Sizes } from './sizes';
-import { Sparklines } from './sparklines';
-const sparklinesSource = require('!!raw-loader!./sparklines');
-const sparklinesHtml = renderToHtml(Sparklines);
-
-import { OuiCode, OuiCodeBlock } from '../../../../src/components';
-
-export const ElasticChartsSparklinesExample = {
- title: 'Sizing',
- intro: (
-
-
-
- ),
- sections: [
- {
- text: (
-
-
- 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.
-
- Sparklines are quick visual summaries of data where actual values
- are not important. They should be only a single series and not
- contain more than 12 values. Be sure to remove all extraneous
- markings like ticks, labels, tooltips and grid. The surrounding
- content should give context to the sparkline.
-
-
- OUI also provides a quick theme alteration object that you can merge
- with the correct dark or light theme to properly style your
- sparklines.
-
-
- );
-};
diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js
deleted file mode 100644
index 03c3b39ea7..0000000000
--- a/src-docs/src/views/elastic_charts/theming_example.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-/* eslint-disable @typescript-eslint/no-var-requires */
-import React, { Fragment } from 'react';
-import { Link } from 'react-router-dom';
-import { renderToHtml } from '../../services';
-import { GuideSectionTypes } from '../../components';
-
-import { ExternalBadge } from './shared';
-
-import { Theming } from './theming';
-const themingSource = require('!!raw-loader!./theming');
-const themingHtml = renderToHtml(Theming);
-
-import { Categorical } from './theming_categorical';
-
-import {
- OuiSpacer,
- OuiText,
- OuiCodeBlock,
- OuiLink,
- OuiCallOut,
-} from '../../../../src/components';
-
-export const ElasticChartsThemingExample = {
- title: 'Creating charts',
- intro: (
-
-
-
-
-
- OUI provides utilities and documentation for working with{' '}
-
- Elastic Charts
-
- , an open source charting library also created and maintained by
- Elastic.
-
- OUI 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.
-
- OUI provides a plugin utility for ease of pulling in the correct
- theme object depending on the current Kibana theme. Learn more
- from this{' '}
-
- readme
-
- .
-
-
-
-
- OUI also provides some basic{' '}
-
- color palettes and functions
- {' '}
- if you would like to change the default color blind safe scheme to
- another palette. You can import these from the services folder.
- Create a new partial theme object with your chosen colors and
- prepend it to the list of themes supplied to Settings.
-
-
- Use color to distinguish categories, represent quantity/density,
- and highlight data. When using color in this way, be aware that
- too many colors in a single chart can create noise and hinder
- quick comprehension.
-
-
-
- When creating a multi-series chart where each series shows{' '}
- contrasting data, use the color blind safe palette
- of contrasting colors. This will also avoid implying levels of
- magnitude.
-
-
- Think about the data you are delivering and if there is a way to{' '}
- highlight key indicators. If you can combine the
- series into logical groups, use contrasting shapes and styles, but
- keep the same color for within groups.
-
-
Quantity vs trends
-
- When coloring for sequential series data (not categorical), rely on
- conventions. If the data signifies quantities, use
- a single color that spans from light colors for low amounts to dark
- colors for high amounts. If the data signifies{' '}
- trends, use a two-color divergent scheme, with the
- darkest colors at the extremes. Remember that red means bad/negative
- and green is good/positive.
-
-
- Whan signifying quantities, group values into intervals instead of a
- continuous gradient scale.
-
-
- );
-};
diff --git a/src-docs/src/views/elastic_charts/time_example.js b/src-docs/src/views/elastic_charts/time_example.js
deleted file mode 100644
index 75d8466cc4..0000000000
--- a/src-docs/src/views/elastic_charts/time_example.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * SPDX-License-Identifier: Apache-2.0
- *
- * The OpenSearch Contributors require contributions made to
- * this file be licensed under the Apache-2.0 license or a
- * compatible open source license.
- *
- * Modifications Copyright OpenSearch Contributors. See
- * GitHub history for details.
- */
-
-import React, { Fragment } from 'react';
-
-import { ExternalBadge } from './shared';
-import { TimeChart } from './time_chart';
-
-import { OuiCode } from '../../../../src/components';
-
-export const ElasticChartsTimeExample = {
- title: 'Time series',
- intro: (
-
-
-
- ),
- sections: [
- {
- text: (
-
-
- 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.
-