From 0d388a9d80e38bf5a7557f0578b28afbeeebb804 Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Thu, 2 Mar 2023 09:43:24 -0800 Subject: [PATCH] Remove Elastic Charts docs (#533) (#552) (cherry picked from commit 7c2f5e9826d140629c8569651070e743f6d42f4c) Signed-off-by: Matt Provost Signed-off-by: github-actions[bot] Co-authored-by: github-actions[bot] Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com> --- src-docs/src/routes.js | 22 - .../views/elastic_charts/category_chart.js | 228 -------- .../views/elastic_charts/category_example.js | 65 --- src-docs/src/views/elastic_charts/data.js | 526 ------------------ src-docs/src/views/elastic_charts/pie.js | 121 ---- src-docs/src/views/elastic_charts/pie_alts.js | 337 ----------- .../src/views/elastic_charts/pie_example.js | 380 ------------- .../src/views/elastic_charts/pie_slices.js | 338 ----------- src-docs/src/views/elastic_charts/shared.js | 172 ------ src-docs/src/views/elastic_charts/sizes.js | 374 ------------- .../src/views/elastic_charts/sparklines.js | 174 ------ .../elastic_charts/sparklines_example.js | 95 ---- src-docs/src/views/elastic_charts/theming.js | 147 ----- .../elastic_charts/theming_categorical.js | 463 --------------- .../views/elastic_charts/theming_example.js | 165 ------ .../src/views/elastic_charts/time_chart.js | 211 ------- .../src/views/elastic_charts/time_example.js | 56 -- src-docs/src/views/elastic_charts/treemap.js | 139 ----- 18 files changed, 4013 deletions(-) delete mode 100644 src-docs/src/views/elastic_charts/category_chart.js delete mode 100644 src-docs/src/views/elastic_charts/category_example.js delete mode 100644 src-docs/src/views/elastic_charts/data.js delete mode 100644 src-docs/src/views/elastic_charts/pie.js delete mode 100644 src-docs/src/views/elastic_charts/pie_alts.js delete mode 100644 src-docs/src/views/elastic_charts/pie_example.js delete mode 100644 src-docs/src/views/elastic_charts/pie_slices.js delete mode 100644 src-docs/src/views/elastic_charts/shared.js delete mode 100644 src-docs/src/views/elastic_charts/sizes.js delete mode 100644 src-docs/src/views/elastic_charts/sparklines.js delete mode 100644 src-docs/src/views/elastic_charts/sparklines_example.js delete mode 100644 src-docs/src/views/elastic_charts/theming.js delete mode 100644 src-docs/src/views/elastic_charts/theming_categorical.js delete mode 100644 src-docs/src/views/elastic_charts/theming_example.js delete mode 100644 src-docs/src/views/elastic_charts/time_chart.js delete mode 100644 src-docs/src/views/elastic_charts/time_example.js delete mode 100644 src-docs/src/views/elastic_charts/treemap.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index fb98310210..7d19640ea6 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -231,18 +231,6 @@ import { I18nTokens } from './views/package/i18n_tokens'; import { SuperSelectExample } from './views/super_select/super_select_example'; -/** Elastic Charts */ - -import { ElasticChartsThemingExample } from './views/elastic_charts/theming_example'; - -import { ElasticChartsTimeExample } from './views/elastic_charts/time_example'; - -import { ElasticChartsCategoryExample } from './views/elastic_charts/category_example'; - -import { ElasticChartsSparklinesExample } from './views/elastic_charts/sparklines_example'; - -import { ElasticChartsPieExample } from './views/elastic_charts/pie_example'; - const createExample = (example, customTitle) => { if (!example) { throw new Error( @@ -450,16 +438,6 @@ const navigation = [ CodeExample, ].map((example) => createExample(example)), }, - { - name: 'Elastic Charts', - items: [ - ElasticChartsThemingExample, - ElasticChartsSparklinesExample, - ElasticChartsTimeExample, - ElasticChartsCategoryExample, - ElasticChartsPieExample, - ].map((example) => createExample(example)), - }, { name: 'Utilities', items: [ diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.js deleted file mode 100644 index fbb764ff88..0000000000 --- a/src-docs/src/views/elastic_charts/category_chart.js +++ /dev/null @@ -1,228 +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, { useState, Fragment, useContext } from 'react'; -import orderBy from 'lodash/orderBy'; -import round from 'lodash/round'; - -import { ThemeContext } from '../../components'; -import { Chart, Settings, Axis } from '@elastic/charts'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSwitch, - OuiSpacer, - OuiTitle, - OuiFlexGrid, - OuiFlexItem, - OuiCode, - OuiCopy, - OuiButton, -} from '../../../../src/components'; - -import { SIMPLE_GITHUB_DATASET, GITHUB_DATASET } from './data'; -import { - ChartTypeCard, - MultiChartCard, - CHART_COMPONENTS, - ChartCard, -} from './shared'; - -export const CategoryChart = () => { - const themeContext = useContext(ThemeContext); - - const [multi, setMulti] = useState(false); - const [stacked, setStacked] = useState(false); - const [rotated, setRotated] = useState(true); - const [ordered, setOrdered] = useState(true); - const [formatted, setFormatted] = useState(false); - const [chartType, setChartType] = useState('BarSeries'); - - const onMultiChange = (multiObject) => { - const { multi, stacked } = multiObject; - setMulti(multi); - setStacked(stacked); - }; - - const onRotatedChange = (e) => { - setRotated(e.target.checked); - }; - - const onOrderedChange = (e) => { - setOrdered(e.target.checked); - }; - - const onFormatChange = (e) => { - setFormatted(e.target.checked); - }; - - const onChartTypeChange = (chartType) => { - setChartType(chartType); - }; - - const isDarkTheme = themeContext.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - - const ChartType = CHART_COMPONENTS[chartType]; - - const DATASET = multi ? GITHUB_DATASET : SIMPLE_GITHUB_DATASET; - - return ( - - -

- Number of GitHub issues per visualization type - {multi && ' by type of issue'} -

- - - - - - - - - `${round(Number(d) / 1000, 2)}k` : undefined - } - /> - - - - - - - - - - - - - - - - - - - - 1000 ⇢ 1k   20000 ⇢ 20k - - - - - - - - - - - - - - - - -
- - - <${chartType} - id="issues" - name="Issues" - data={${ - ordered - ? "orderBy([{vizType: 'Data Table', count: 24, issueType: 'Bug'},{vizType: 'Heatmap',count: 12, issueType: 'Other'}], ['count'], ['desc'])" - : "orderBy([{vizType: 'Data Table', count: 24, issueType: 'Bug'},{vizType: 'Heatmap',count: 12, issueType: 'Other'}], ['vizType'], ['asc'])" - }} - xAccessor="vizType" - yAccessors={['count']} - ${multi ? "splitSeriesAccessors={['issueType']}" : ''} - ${stacked ? "stackAccessors={['issueType']}" : ''} - /> - - `${round(Number(d) / 1000, 2)}k`}' : ''} - /> -`}> - {(copy) => ( - - Copy code of current configuration - - )} - -
- - ); -}; 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. -

- -

- Key configurations -

- -
    -
  • - Settings.rotation = 90 -
    • -
  • - - BarSeries.data = orderBy(DATASET, ['count'], - ['desc']) - -
    • -
  • - - BarSeries.xAccessor = "vizType" - -
    • -
  • - - Axis.tickFormat = (d => Number(d)'k') - -
    • -
- - ), - demo: , - }, - ], -}; diff --git a/src-docs/src/views/elastic_charts/data.js b/src-docs/src/views/elastic_charts/data.js deleted file mode 100644 index 9d4b8862a6..0000000000 --- a/src-docs/src/views/elastic_charts/data.js +++ /dev/null @@ -1,526 +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. - */ - -export const TIME_DATA_SMALL = [ - [1551438630000, 8.515625], - [1551438660000, 10.796875], - [1551438690000, 11.125], - [1551438720000, 21.40625], - [1551438750000, 17.921875], - [1551438780000, 26.640625], - [1551438810000, 31.390625], - [1551438840000, 23.953125], -]; - -export const TIME_DATA = [ - [1551438000000, 8.3203125], - [1551438030000, 7.9140625], - [1551438060000, 7.8671875], - [1551438090000, 7.125], - [1551438120000, 8.765625], - [1551438150000, 11.546875], - [1551438180000, 12.984375], - [1551438210000, 13.546875], - [1551438240000, 13.390625], - [1551438270000, 11.5625], - [1551438300000, 11.5859375], - [1551438330000, 10.0546875], - [1551438360000, 9.921875], - [1551438390000, 9.4921875], - [1551438420000, 9.78125], - [1551438450000, 10.046875], - [1551438480000, 14.0546875], - [1551438510000, 10.640625], - [1551438540000, 8.2421875], - [1551438570000, 8.5], - [1551438600000, 7.2578125], - [1551438630000, 8.515625], - [1551438660000, 10.796875], - [1551438690000, 11.125], - [1551438720000, 21.40625], - [1551438750000, 17.921875], - [1551438780000, 26.640625], - [1551438810000, 31.390625], - [1551438840000, 23.953125], -]; - -export const TIME_DATA_2 = [ - [1551438000000, 9.984375], - [1551438030000, 9.71875], - [1551438060000, 9.28125], - [1551438090000, 9.078125], - [1551438120000, 8.9921875], - [1551438150000, 9.640625], - [1551438180000, 10.171875], - [1551438210000, 10.421875], - [1551438240000, 10.625], - [1551438270000, 10.390625], - [1551438300000, 10.4296875], - [1551438330000, 10.1328125], - [1551438360000, 9.984375], - [1551438390000, 9.8203125], - [1551438420000, 9.8125], - [1551438450000, 9.78125], - [1551438480000, 10.625], - [1551438510000, 10.09375], - [1551438540000, 9.5546875], - [1551438570000, 9.390625], - [1551438600000, 9.015625], - [1551438630000, 8.8828125], - [1551438660000, 9.359375], - [1551438690000, 9.53125], - [1551438720000, 11.9453125], - [1551438750000, 11.828125], - [1551438780000, 14.4609375], - [1551438810000, 16.421875], - [1551438840000, 15.6875], -]; - -export const SIMPLE_GITHUB_DATASET = [ - { - authorAssociation: 'Team Member', - vizType: 'Data Table', - issueType: 'Bug', - count: 24000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Heatmap', - issueType: 'Bug', - count: 12000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Markdown', - issueType: 'Bug', - count: 6000, - }, - { - authorAssociation: 'Team Member', - vizType: 'MetricVis', - issueType: 'Bug', - count: 16000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Pie Chart', - issueType: 'Bug', - count: 7000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Tagcloud', - issueType: 'Bug', - count: 19000, - }, - { - authorAssociation: 'Team Member', - vizType: 'TSVB', - issueType: 'Bug', - count: 86000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Timelion', - issueType: 'Bug', - count: 58000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Vega vis', - issueType: 'Bug', - count: 11000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Point Series', - issueType: 'Bug', - count: 1000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Inspector', - issueType: 'Bug', - count: 15000, - }, -]; - -export const GITHUB_DATASET = [ - { - authorAssociation: 'Team Member', - vizType: 'Data Table', - issueType: 'Bug', - count: 24000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Data Table', - issueType: 'Other', - count: 22000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Heatmap', - issueType: 'Bug', - count: 12000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Heatmap', - issueType: 'Other', - count: 6000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Markdown', - issueType: 'Bug', - count: 6000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Markdown', - issueType: 'Other', - count: 11000, - }, - { - authorAssociation: 'Team Member', - vizType: 'MetricVis', - issueType: 'Bug', - count: 16000, - }, - { - authorAssociation: 'Team Member', - vizType: 'MetricVis', - issueType: 'Other', - count: 8000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Pie Chart', - issueType: 'Bug', - count: 7000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Pie Chart', - issueType: 'Other', - count: 4000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Tagcloud', - issueType: 'Bug', - count: 19000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Tagcloud', - issueType: 'Other', - count: 13000, - }, - { - authorAssociation: 'Team Member', - vizType: 'TSVB', - issueType: 'Bug', - count: 86000, - }, - { - authorAssociation: 'Team Member', - vizType: 'TSVB', - issueType: 'Other', - count: 123000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Timelion', - issueType: 'Bug', - count: 58000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Timelion', - issueType: 'Other', - count: 93000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Vega vis', - issueType: 'Bug', - count: 11000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Vega vis', - issueType: 'Other', - count: 38000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Point Series', - issueType: 'Bug', - count: 1000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Point Series', - issueType: 'Other', - count: 1000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Inspector', - issueType: 'Bug', - count: 15000, - }, - { - authorAssociation: 'Team Member', - vizType: 'Inspector', - issueType: 'Other', - count: 11000, - }, -]; - -export const GITHUB_DATASET_MOD = [ - { - total: 'Total', - vizType: 'Data Table', - issueType: 'Bug', - count: 24, - }, - { - total: 'Total', - vizType: 'Data Table', - issueType: 'Request', - count: 22, - }, - { - total: 'Total', - vizType: 'Tagcloud', - issueType: 'Bug', - count: 19, - }, - { - total: 'Total', - vizType: 'Tagcloud', - issueType: 'Request', - count: 13, - }, - { - total: 'Total', - vizType: 'TSVB', - issueType: 'Bug', - count: 86, - }, - { - total: 'Total', - vizType: 'TSVB', - issueType: 'Request', - count: 123, - }, - { - total: 'Total', - vizType: 'Timelion', - issueType: 'Bug', - count: 58, - }, - { - total: 'Total', - vizType: 'Timelion', - issueType: 'Request', - count: 93, - }, - { - total: 'Total', - vizType: 'Vega vis', - issueType: 'Bug', - count: 11, - }, - { - total: 'Total', - vizType: 'Vega vis', - issueType: 'Request', - count: 38, - }, - { - total: 'Total', - vizType: 'Other', - issueType: 'Bug', - count: 10, - }, - { - total: 'Total', - vizType: 'Other', - issueType: 'Request', - count: 18, - }, -]; - -export const BROWSER_DATA_2019 = [ - { - browser: 'Chrome', - percent: 61.72, - }, - { - browser: 'Safari', - percent: 15.23, - }, - { - browser: 'Firefox', - percent: 4.66, - }, - { - browser: 'Samsung Internet', - percent: '3.64', - }, - { - browser: 'UC Browser', - percent: '3.83', - }, - { - browser: 'Opera', - percent: '2.91', - }, - { - browser: 'IE', - percent: '2.7', - }, - { - browser: 'Edge Legacy', - percent: '2.13', - }, - { - browser: 'Android', - percent: '1.15', - }, - { - browser: 'KaiOS', - percent: '0.54', - }, - { - browser: 'Yandex Browser', - percent: '0.24', - }, - { - browser: 'QQ Browser', - percent: '0.22', - }, - { - browser: 'Puffin', - percent: '0.12', - }, - { - browser: 'Coc Coc', - percent: '0.09', - }, - { - browser: 'IEMobile', - percent: '0.1', - }, - { - browser: 'Chromium', - percent: '0.08', - }, - { - browser: 'Whale Browser', - percent: '0.01', - }, - { - browser: 'Sogou Explorer', - percent: '0.08', - }, - { - browser: 'Sony PS4', - percent: '0.06', - }, - { - browser: 'mCent', - percent: '0.21', - }, - { - browser: 'Maxthon', - percent: '0.04', - }, - { - browser: 'Mozilla', - percent: '0.03', - }, - { - browser: 'Vivaldi', - percent: '0.02', - }, - { - browser: '360 Safe Browser', - percent: '0.03', - }, - { - browser: 'Unknown', - percent: '0.03', - }, - { - browser: 'BlackBerry', - percent: '0.02', - }, - { - browser: 'Nokia', - percent: '0.03', - }, - { - browser: 'Pale Moon', - percent: '0.01', - }, - { - browser: 'Other', - percent: '0.06', - }, -]; - -export const DAYS_OF_RAIN = [ - { - season: 'Spring', - days: 68, - precipitation: 'rain', - }, - { - season: 'Summer', - days: 46, - precipitation: 'rain', - }, - { - season: 'Fall', - days: 72, - precipitation: 'rain', - }, - { - season: 'Winter', - days: 24, - precipitation: 'rain', - }, - { - season: 'Spring', - days: 22, - precipitation: 'none', - }, - { - season: 'Summer', - days: 44, - precipitation: 'none', - }, - { - season: 'Fall', - days: 18, - precipitation: 'none', - }, - { - season: 'Winter', - days: 66, - precipitation: 'none', - }, -]; diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.js deleted file mode 100644 index 1af16d7057..0000000000 --- a/src-docs/src/views/elastic_charts/pie.js +++ /dev/null @@ -1,121 +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 } from 'react'; -import { ThemeContext } from '../../components'; -import { Chart, Partition } from '@elastic/charts'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; -import { - OuiFlexGrid, - OuiFlexItem, - OuiTitle, - OuiSpacer, -} from '../../../../src/components'; - -export default () => { - const themeContext = useContext(ThemeContext); - - /** - * Setup theme based on current light/dark theme - */ - const isDarkTheme = themeContext.theme.includes('dark'); - const ouiChartTheme = isDarkTheme - ? OUI_CHARTS_THEME_DARK - : OUI_CHARTS_THEME_LIGHT; - const ouiPartitionConfig = ouiChartTheme.partition; - - return ( -
- - - -

Year to date PR count by status

- - - - d.count} - layers={[ - { - groupByRollup: (d) => d.status, - shape: { - fillColor: (d) => - ouiChartTheme.theme.colors.vizColors[d.sortIndex], - }, - }, - ]} - config={{ - ...ouiPartitionConfig, - clockwiseSectors: false, - }} - /> - - - - -

Code languages

- - - - Number(d.percent)} - valueFormatter={() => ''} - layers={[ - { - groupByRollup: (d) => d.language, - shape: { - fillColor: (d) => - ouiChartTheme.theme.colors.vizColors[d.sortIndex], - }, - }, - ]} - config={{ - ...ouiPartitionConfig, - emptySizeRatio: 0.4, - clockwiseSectors: false, - }} - /> - - - -
- ); -}; diff --git a/src-docs/src/views/elastic_charts/pie_alts.js b/src-docs/src/views/elastic_charts/pie_alts.js deleted file mode 100644 index 9253864f21..0000000000 --- a/src-docs/src/views/elastic_charts/pie_alts.js +++ /dev/null @@ -1,337 +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 no-nested-ternary */ -import React, { useState, Fragment, useContext } from 'react'; -import groupBy from 'lodash/groupBy'; -import mapValues from 'lodash/mapValues'; -import orderBy from 'lodash/orderBy'; -import sortBy from 'lodash/sortBy'; -import sumBy from 'lodash/sumBy'; - -import { ThemeContext } from '../../components'; -import { Chart, Settings, Axis, BarSeries } from '@elastic/charts'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSwitch, - OuiSpacer, - OuiTitle, - OuiFlexGrid, - OuiFlexItem, - OuiCopy, - OuiButton, -} from '../../../../src/components'; - -import { GITHUB_DATASET, GITHUB_DATASET_MOD, DAYS_OF_RAIN } from './data'; -import { ChartCard } from './shared'; -import { - ouiPaletteForTemperature, - ouiPaletteColorBlind, - ouiPaletteGray, -} from '../../../../src/services'; - -export default () => { - const themeContext = useContext(ThemeContext); - - const [stacked, setStacked] = useState(true); - const [rotated, setRotated] = useState(true); - const [ordered, setOrdered] = useState(true); - const [formatted, setFormatted] = useState(false); - const [formattedData, setFormattedData] = useState(false); - const [grouped, setGrouped] = useState(false); - - const isDarkTheme = themeContext.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - - let color = ouiPaletteColorBlind({ rotations: 2, order: 'group' }).slice( - 18, - 20 - ); - if (formatted) { - color = [ - ouiPaletteForTemperature()[0], - ouiPaletteGray(5)[isDarkTheme ? 4 : 0], - ]; - } - - let data; - let usesRainData; - if (formatted && formattedData) { - data = ordered - ? orderBy(DAYS_OF_RAIN, ['precipitation', 'days'], ['desc', 'asc']) - : DAYS_OF_RAIN; - usesRainData = true; - color = ouiPaletteForTemperature(3); - } else { - const DATASET = grouped ? GITHUB_DATASET_MOD : GITHUB_DATASET; - data = orderBy(DATASET, 'issueType', 'asc'); - - if (ordered) { - const totals = mapValues(groupBy(DATASET, 'vizType'), (groups) => - sumBy(groups, 'count') - ); - - data = orderBy(DATASET, 'issueType', 'desc'); - const sortedData = sortBy(data, [ - ({ vizType }) => totals[vizType], - ]).reverse(); - data = sortedData; - } - } - - const tickFormat = (tick) => { - if (formatted) { - return `${Number(tick * 100).toFixed(0)}%`; - } else if (!grouped && String(tick).length > 1) { - return String(tick).substring(0, String(tick).length - 3); - } else { - return tick; - } - }; - - let isMisleadingChart = false; - let isBadChart = false; - let description = - 'This chart is a good alternative to the standard multi-tier pie (or sunburst) chart. It clearly represents the actual values while maintaining visual comparison.'; - let title = 'Good alternative'; - - if (formatted && !stacked) { - isBadChart = true; - title = 'Bad chart'; - description = 'This means nothing.'; - } else if (formatted) { - if (formattedData) { - description = - 'With every category having the same total (usually already percentages), the chart is accurately representative of the data.'; - } else { - isMisleadingChart = true; - title = 'Misleading chart'; - description = ( - - Showing percentages while the{' '} - totals for each category are not the same can - misrepresent the relative values. Use the toggle to see a better data - set. - - ); - } - } else if (grouped) { - description = - 'Grouping "Other" is still valid to concentrate on the top values while still including all possible values to completely represent the whole.'; - } - - return ( - - {usesRainData ? ( - <> - -

Percentage of rainfall per season

- - - - - - - - - - - - ) : ( - <> - -

- {formatted ? 'Percentage' : 'Number'} of GitHub issues per - visualization type -

- - - - - - - - - - - - )} - - - - - - - {formatted && stacked && ( - setFormattedData(e.target.checked)} - /> - )} - - - - - - setStacked(e.target.checked)} - /> - - setGrouped(e.target.checked)} - /> - - setFormatted(e.target.checked)} - /> - - - - - - setOrdered(e.target.checked)} - /> - - setRotated(e.target.checked)} - /> - - - - - - -
- - - - - `${Number(tick * 100).toFixed(0)}%`}' - : '' - } - /> -`}> - {(copy) => ( - - {isBadChart || isMisleadingChart - ? isMisleadingChart - ? 'This chart is misleading' - : "Bad chart, don't copy" - : 'Copy code of current configuration'} - - )} - -
- - ); -}; 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} -

- - ), - demo: , - }, - { - title: 'Sunbursts and treemaps', - source: [ - { - type: GuideSectionTypes.JS, - code: treemapsSource, - }, - { - type: GuideSectionTypes.HTML, - code: treemapsHtml, - }, - ], - text: ( - <> -

- 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 - - . -

- - ), - demo: , - }, - { - title: 'Alternatives', - text: ( - <> -

- 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 - - . -

- - ), - demo: , - }, - ], -}; diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.js deleted file mode 100644 index 17babe278d..0000000000 --- a/src-docs/src/views/elastic_charts/pie_slices.js +++ /dev/null @@ -1,338 +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 no-nested-ternary */ -import React, { Fragment, useState, useContext } from 'react'; -import { Chart, Partition, Settings } from '@elastic/charts'; -import { ThemeContext } from '../../components'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSpacer, - OuiFlexGrid, - OuiFlexItem, - OuiFormRow, - OuiRange, - OuiCopy, - OuiSwitch, - OuiButton, - OuiRadioGroup, - OuiTextAlign, - OuiTitle, - OuiCode, - OuiButtonGroup, - OuiText, -} from '../../../../src/components'; - -import { ChartCard } from './shared'; -import { BROWSER_DATA_2019 } from './data'; - -export default () => { - const themeContext = useContext(ThemeContext); - const isDarkTheme = themeContext.theme.includes('dark'); - const ouiChartTheme = isDarkTheme - ? OUI_CHARTS_THEME_DARK - : OUI_CHARTS_THEME_LIGHT; - const ouiPartitionConfig = ouiChartTheme.partition; - - const sliceOrderRadiosIdPrefix = 'colorType'; - const sliceOrderRadios = [ - { - id: `${sliceOrderRadiosIdPrefix}0`, - label: 'Counterclockwise and special', - }, - { - id: `${sliceOrderRadiosIdPrefix}2`, - label: 'Clockwise and descending', - }, - { - id: `${sliceOrderRadiosIdPrefix}3`, - label: 'By natural order (unsupported)', - disabled: true, - }, - ]; - - const pieTypeRadios = [ - { - id: 'pieTypePie', - label: 'Pie chart', - }, - { - id: 'pieTypeDonut', - label: 'Donut chart', - }, - ]; - - const [sliceOrderIdSelected, setSliceOrderIdSelected] = useState( - sliceOrderRadios[0].id - ); - const [sliceOrderConfig, setSliceOrderConfig] = useState({ - clockwiseSectors: false, - }); - const [sliceOrderConfigText, setSliceOrderConfigText] = useState( - 'clockwiseSectors: false,' - ); - - const [pieTypeIdSelected, setPieTypeIdSelected] = useState( - pieTypeRadios[0].id - ); - - const [numSlices, setNumSlices] = useState('3'); - - const [grouped, setGrouped] = useState(true); - const [showLegend, setShowLegend] = useState(false); - const [showValues, setShowValues] = useState(true); - - const onNumChartsChange = (e) => { - setNumSlices(e.target.value); - }; - - const onSliceOrderChange = (optionId) => { - const sliceOrderLabel = sliceOrderRadios.find(({ id }) => id === optionId) - .label; - if (sliceOrderLabel.includes('Counter')) { - setSliceOrderConfig({ clockwiseSectors: false }); - setSliceOrderConfigText('clockwiseSectors: false,'); - } else if (sliceOrderLabel.includes('Clockwise')) { - setSliceOrderConfig({ specialFirstInnermostSector: false }); - setSliceOrderConfigText('specialFirstInnermostSector: false,'); - } else if (sliceOrderLabel.includes('natural')) { - setSliceOrderConfig({}); - setSliceOrderConfigText(''); - } else { - console.warn("Couldn't find the right slice order type"); - } - setSliceOrderIdSelected(optionId); - }; - - const onGroupChange = (e) => { - setGrouped(e.target.checked); - }; - - const isBadChart = numSlices > 5 && !grouped; - const isComplicatedChart = false; - - const customTitle = ( - - -

Distribution of the top {numSlices} browsers from 2019

- - - - ); - - const pieData = () => { - const dataByNumSlices = BROWSER_DATA_2019.slice(0, numSlices); - if (grouped && numSlices > 5) { - const theOthers = dataByNumSlices.slice(5, numSlices); - const total = theOthers.reduce((newVar2, item) => { - return Number(newVar2 + Number(item.percent)); - }, 0); - const firstFive = dataByNumSlices.slice(0, 5); - firstFive.push({ - browser: 'Other', - percent: total, - }); - return firstFive; - } else { - return dataByNumSlices; - } - }; - - return ( - - {customTitle} -
- - - Number(d.percent)} - valueFormatter={showValues ? undefined : () => ''} - valueGetter={showValues ? 'percent' : undefined} - layers={[ - { - groupByRollup: (d) => d.browser, - shape: { - fillColor: (d) => - ouiChartTheme.theme.colors.vizColors[d.sortIndex], - }, - }, - ]} - config={{ - ...ouiPartitionConfig, - emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4, - ...sliceOrderConfig, - }} - /> - -
- - - - - - - { - setPieTypeIdSelected(id); - }} - buttonSize="compressed" - isFullWidth - /> - - -

- Show and format the values of the slices when they are not - percentages. -

- - - setShowValues(e.target.checked)} - /> - - setShowLegend(e.target.checked)} - /> - - - - - - Recommended number of series is 5 or less. - - }> - - - - - - - - - - Partition supports the specialized slice order with{' '} - - specialFirstInnermostSector - - . - - }> - - - - - - -
- -

Distribution of the top ${numSlices} browsers from 2019

- - - ${showLegend ? '' : ''} - 5 - ? `{ - browser: 'Other', - percent: totalOfOtherSlices - }` - : '' - } - ]} - valueAccessor={d => Number(d.percent)} - ${showValues ? '' : "valueFormatter={() => ''}"} - ${showValues ? '' : 'valueGetter="percent"'} - layers={[ - { - groupByRollup: d => d.browser, - shape: { - fillColor: d => ouiChartTheme.theme.colors.vizColors[d.sortIndex], - }, - }, - ]} - config={{ - ...ouiPartitionConfig, - ${pieTypeIdSelected.includes('Donut') ? 'emptySizeRatio: 0.4,' : ''} - ${sliceOrderConfigText} - }} - /> -`}> - {(copy) => ( - - {isBadChart || isComplicatedChart - ? isComplicatedChart - ? "It's complicated" - : "Bad chart, don't copy" - : 'Copy code of current configuration'} - - )} - -
- - ); -}; diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.js deleted file mode 100644 index eb8392faa2..0000000000 --- a/src-docs/src/views/elastic_charts/shared.js +++ /dev/null @@ -1,172 +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, { useState } from 'react'; -import PropTypes from 'prop-types'; -import { - OuiBadge, - OuiRadioGroup, - OuiSpacer, - OuiSwitch, - OuiPanel, - OuiText, - OuiTitle, -} from '../../../../src/components'; -import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts'; -import { devDependencies } from '../../../../package'; - -const chartsVersion = devDependencies['@elastic/charts'].match( - /\d+\.\d+\.\d+/ -)[0]; - -export const CHART_COMPONENTS = { - BarSeries: BarSeries, - LineSeries: LineSeries, - AreaSeries: AreaSeries, -}; - -export const ExternalBadge = () => { - return ( - - window.open( - `https://github.com/elastic/elastic-charts/tree/v${chartsVersion}` - ) - }> - External library: @elastic/charts v{chartsVersion} - - ); -}; - -export const ChartCard = ({ title, description, children }) => { - return ( - - - {title} - - - -

{description}

- - - {children} - - ); -}; - -export const ChartTypeCard = (props) => { - const idPrefix = 'chartType'; - - const toggleButtonsIcons = [ - { - id: `${idPrefix}0`, - label: 'BarSeries', - }, - { - id: `${idPrefix}1`, - label: 'LineSeries', - }, - { - id: `${idPrefix}2`, - label: 'AreaSeries', - }, - ]; - - const [toggleIdSelected, setToggleIdSelectd] = useState(`${idPrefix}0`); - - const onChartTypeChange = (optionId) => { - setToggleIdSelectd(optionId); - - const chartType = toggleButtonsIcons.find(({ id }) => id === optionId) - .label; - props.onChange(chartType); - }; - - if (props.mixed) { - toggleButtonsIcons[3] = { - id: `${idPrefix}3`, - label: 'Mixed', - disabled: props.mixed === 'disabled', - }; - } - - return ( - - - - ); -}; - -ChartTypeCard.propTypes = { - onChange: PropTypes.func.isRequired, - mixed: PropTypes.oneOf(['enabled', 'disabled', true, false]), - disabled: PropTypes.bool, -}; - -export const MultiChartCard = (props) => { - const [multi, setMulti] = useState(false); - const [stacked, setStacked] = useState(false); - - const onMultiChange = (e) => { - const isStacked = e.target.checked ? stacked : false; - - setMulti(e.target.checked); - setStacked(isStacked); - - props.onChange({ - multi: e.target.checked, - stacked, - }); - }; - - const onStackedChange = (e) => { - setStacked(e.target.checked); - - props.onChange({ multi: multi, stacked: e.target.checked }); - }; - return ( - - - - - - ); -}; - -MultiChartCard.propTypes = { - /** - * Returns (multi:boolean, stacked:boolean) - */ - onChange: PropTypes.func.isRequired, -}; diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.js deleted file mode 100644 index 9dd7710fd7..0000000000 --- a/src-docs/src/views/elastic_charts/sizes.js +++ /dev/null @@ -1,374 +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, { Component, Fragment } from 'react'; -import moment from 'moment'; -import { ThemeContext } from '../../components'; -import { - Chart, - Settings, - Axis, - timeFormatter, - niceTimeFormatByDay, - LineAnnotation, - BarSeries, -} from '@elastic/charts'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSpacer, - OuiTitle, - OuiFlexGrid, - OuiFlexItem, - OuiPageContent, - OuiFormRow, - OuiRange, - OuiPage, - OuiButton, - OuiCopy, -} from '../../../../src/components'; - -import { formatDate, dateFormatAliases } from '../../../../src/services'; - -import { MultiChartCard, ChartCard } from './shared'; - -import { TIME_DATA, TIME_DATA_2 } from './data'; - -export class Sizes extends Component { - constructor(props) { - super(props); - - this.mediumSize = 50; - this.smallSize = 40; - this.xsmallSize = 33; - - this.state = { - multi: false, - stacked: false, - width: 100, - data1: TIME_DATA, - data2: TIME_DATA_2, - }; - } - - componentDidMount = () => { - this.changePropsBasedOnWidth(100); - }; - - onStackedChange = (e) => { - this.setState({ - stacked: e.target.checked, - }); - }; - - onMultiChange = (multiObject) => { - this.setState({ - ...multiObject, - }); - }; - - onChartTypeChange = (optionId) => { - this.setState({ - toggleIdSelected: optionId, - }); - }; - - onWidthChartsChange = (e) => { - this.setState({ - width: e.target.value, - }); - - this.changePropsBasedOnWidth(e.target.value); - }; - - changePropsBasedOnWidth = (width) => { - const data1 = TIME_DATA.slice(); - const data2 = TIME_DATA_2.slice(); - let tooltipProps; - let legendPosition = 'right'; - const xAxisFormatter = timeFormatter(niceTimeFormatByDay(1)); - let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`; - let xAxisStyle; - let yAxisStyle; - let changeDescription = - 'At full width, you should be able to display all the details you need; axes, tick labels and titles, and legends.'; - - if (width < 55) { - legendPosition = 'bottom'; - } - - if (width < this.mediumSize) { - const headerFormatter = (tooltipData) => { - return `${formatDate( - tooltipData.value, - dateFormatAliases.shortDateTime - )}`; - }; - - tooltipProps = { - headerFormatter, - }; - - xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)} ${moment( - data1[0][0] - ).format('H:mm')} - ${moment(data1[data1.length - 1][0]).format('H:mm')}`; - - xAxisStyle = { tickLabel: { visible: false } }; - - changeDescription = - 'When the panel becomes narrower that the axes tick labels begin to get clustered, consider moving the axes range to the axes title.'; - } - - if (width < this.smallSize && data1.length > 20) { - for (let i = 0; i < data1.length; i++) { - data1.splice(i + 1, 1); - } - for (let i = 0; i < data2.length; i++) { - data2.splice(i + 1, 1); - } - - changeDescription = - 'If the points also start becoming to clustured, consider reducing your bin count. For line charts with dots, remove the dots.'; - } - - if (width < this.xsmallSize) { - yAxisStyle = { tickLabel: { visible: false } }; - - changeDescription = - 'At severely narrow panels, consider the key indicators of your data and call these out with annotations instead of displaying all values of all axes.'; - } - - this.setState({ - data1, - data2, - legendPosition, - tooltipProps, - xAxisTitle, - xAxisFormatter, - xAxisStyle, - yAxisStyle, - changeDescription, - }); - }; - - render() { - const { - multi, - stacked, - width, - tooltipProps, - data1, - data2, - legendPosition, - xAxisTitle, - xAxisFormatter, - xAxisStyle, - yAxisStyle, - changeDescription, - } = this.state; - - const isDarkTheme = this.context.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - const lineAnnotationStyle = isDarkTheme - ? OUI_CHARTS_THEME_DARK.lineAnnotation - : OUI_CHARTS_THEME_LIGHT.lineAnnotation; - - let annotation; - if (width < this.xsmallSize) { - annotation = ( - - ); - } - - return ( - - - - -

Chart title {multi && ' by type'}

- - - - - - - - {multi && ( - - )} - {annotation} - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -

Chart title ${multi && ' by type'}

- - - - - - { - return \`\${formatDate( - tooltipData.value, - dateFormatAliases.shortDateTime - )}\`; - }}} - /> - - ${ - multi - ? `` - : '' - } - ${ - annotation - ? `` - : '' - } - - -`}> - {(copy) => ( - - {false - ? "Bad chart, don't copy" - : 'Copy code of current configuration'} - - )} - -
- - ); - } -} - -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. -

- - ), - demo: , - }, - { - title: 'Sparklines', - source: [ - { - type: GuideSectionTypes.JS, - code: sparklinesSource, - }, - { - type: GuideSectionTypes.HTML, - code: sparklinesHtml, - }, - ], - text: ( - -

- 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. -

- - {`import { OUI_CHARTS_THEME_DARK, OUI_CHARTS_THEME_LIGHT, OUI_SPARKLINE_THEME_PARTIAL } from \'@opensearch-project/oui/dist/oui_charts_theme\'; -const ouiTheme = isDarkTheme ? OUI_CHARTS_THEME_DARK.theme : OUI_CHARTS_THEME_LIGHT.theme; -`} - -

- Other key configurations -

-
    -
  • - Settings.showLegend = false -
    • -
  • - - Settings.tooltip = "none" - -
    • -
- - ), - demo: , - }, - ], -}; diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.js deleted file mode 100644 index 4a4c9c50a3..0000000000 --- a/src-docs/src/views/elastic_charts/theming.js +++ /dev/null @@ -1,147 +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, { useState, Fragment, useContext } from 'react'; -import { ThemeContext } from '../../components'; -import { - Chart, - Settings, - Axis, - LineSeries, - BarSeries, - DataGenerator, -} from '@elastic/charts'; - -import { - OuiSpacer, - OuiFlexGroup, - OuiFlexItem, - OuiColorPalettePicker, -} from '../../../../src/components'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - ouiPaletteColorBlind, - ouiPaletteComplimentary, - ouiPaletteForStatus, - ouiPaletteForTemperature, - ouiPaletteCool, - ouiPaletteWarm, - ouiPaletteNegative, - ouiPalettePositive, - ouiPaletteGray, -} from '../../../../src/services'; - -const paletteData = { - ouiPaletteColorBlind, - ouiPaletteForStatus, - ouiPaletteForTemperature, - ouiPaletteComplimentary, - ouiPaletteNegative, - ouiPalettePositive, - ouiPaletteCool, - ouiPaletteWarm, - ouiPaletteGray, -}; - -const paletteNames = Object.keys(paletteData); - -export const Theming = () => { - const themeContext = useContext(ThemeContext); - - const palettes = paletteNames.map((paletteName, index) => { - const options = - index > 0 - ? 10 - : { - sortBy: 'natural', - }; - - return { - value: paletteName, - title: paletteName, - palette: paletteData[paletteNames[index]](options), - type: 'fixed', - }; - }); - - const [barPalette, setBarPalette] = useState('ouiPaletteColorBlind'); - - /** - * Create data - */ - const dg = new DataGenerator(); - const data1 = dg.generateGroupedSeries(20, 1); - const data2 = dg.generateGroupedSeries(20, 5); - - /** - * Setup theme based on current light/dark theme - */ - const isDarkTheme = themeContext.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - - const barPaletteIndex = paletteNames.findIndex((item) => item === barPalette); - - const customTheme = - barPaletteIndex > 0 - ? [ - { - colors: { - vizColors: paletteData[paletteNames[barPaletteIndex]](5), - }, - }, - theme, - ] - : theme; - - return ( - - - - - - - - - - - - - - - - ); -}; diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.js deleted file mode 100644 index fa241156b6..0000000000 --- a/src-docs/src/views/elastic_charts/theming_categorical.js +++ /dev/null @@ -1,463 +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 no-nested-ternary */ -import React, { Fragment, useState, useEffect, useContext } from 'react'; -import { Chart, Settings, Axis, DataGenerator } from '@elastic/charts'; -import { ThemeContext } from '../../components'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSpacer, - OuiFlexGrid, - OuiFlexItem, - OuiFormRow, - OuiRange, - OuiCopy, - OuiSwitch, - OuiButton, - OuiRadioGroup, - OuiIcon, - OuiTitle, -} from '../../../../src/components'; - -import { CHART_COMPONENTS, ChartCard } from './shared'; -import { - ouiPaletteColorBlind, - ouiPalettePositive, - ouiPaletteForStatus, - ouiPaletteGray, -} from '../../../../src/services'; - -export const Categorical = () => { - const themeContext = useContext(ThemeContext); - const highlightColor = ouiPaletteColorBlind()[2]; - - const idPrefix = 'colorType'; - - const colorTypeRadios = [ - { - id: `${idPrefix}3`, - label: 'Categorical', - }, - { - id: `${idPrefix}0`, - label: 'Sequential', - }, - { - id: `${idPrefix}1`, - label: 'Diverging', - }, - { - id: `${idPrefix}2`, - label: 'Highlight', - }, - ]; - - const [grouped, setGrouped] = useState(false); - const [colorTypeIdSelected, setColorTypeIdSelected] = useState( - colorTypeRadios[0].id - ); - const [colorType, setColorType] = useState(colorTypeRadios[0].label); - const [numCharts, setNumCharts] = useState('3'); - const [data, setData] = useState([]); - const [dataString, setDataString] = useState('[{x: 1, y: 5.5, g: 0}]'); - const [vizColors, setVizColors] = useState(); - const [vizColorsString, setVizColorsString] = useState(); - const [chartType, setChartType] = useState('LineSeries'); - - useEffect(() => { - createCategoryChart(3); - }, []); - - const isDarkTheme = themeContext.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - - const onNumChartsChange = (e) => { - updateCorrectChart(Number(e.target.value), colorType); - setNumCharts(e.target.value); - }; - - const onColorTypeChange = (optionId) => { - const colorType = colorTypeRadios.find(({ id }) => id === optionId).label; - updateCorrectChart(Number(numCharts), colorType); - setColorType(colorType); - setColorTypeIdSelected(optionId); - }; - - const onGroupChange = (e) => { - const colorType = e.target.checked - ? 'Grouped' - : colorTypeRadios.find(({ id }) => id === colorTypeIdSelected).label; - updateCorrectChart(Number(numCharts), colorType); - setGrouped(e.target.checked); - setColorType(colorType); - }; - - const updateCorrectChart = (numCharts, chartType) => { - switch (chartType) { - case 'Categorical': - createCategoryChart(numCharts); - break; - case 'Sequential': - createQuantityChart(numCharts); - break; - case 'Diverging': - createTrendChart(numCharts); - break; - case 'Highlight': - createHighlightChart(numCharts); - break; - case 'Grouped': - setDataString("[{x: 1, y: 5.5, g: 'Series 1'}]"); - setChartType('LineSeries'); - break; - default: - console.warn("Couldn't find the right chart type"); - break; - } - }; - - const createCategoryChart = (numCharts) => { - const dg = new DataGenerator(); - const data = dg.generateGroupedSeries(20, numCharts).map((item) => { - item.g = `Categorical ${item.g.toUpperCase()}`; - return item; - }); - - setData(data); - setDataString("[{x: 1, y: 5.5, g: 'Categorical 1'}]"); - setVizColors(undefined); - setVizColorsString(undefined); - setChartType('LineSeries'); - }; - - const createQuantityChart = (numCharts) => { - const vizColors = ouiPalettePositive(numCharts); - - // convert series labels to percentages - const dg = new DataGenerator(); - const data = dg.generateGroupedSeries(20, numCharts).map((item) => { - const increment = 100 / numCharts; - const index = item.g.charCodeAt(0) - 97; - const lower = Math.floor(increment * index); - const higher = - index + 1 === numCharts - ? Math.ceil(increment * (index + 1)) - : Math.floor(increment * (index + 1)); - item.g = `${lower} - ${higher}%`; - return item; - }); - - setData(data); - setDataString("[{x: 1, y: 5.5, g: '0 - 100%'}]"); - setVizColors(vizColors); - setVizColorsString(`ouiPaletteCool(${numCharts})`); - setChartType('BarSeries'); - }; - - const createTrendChart = (numCharts) => { - const vizColors = ouiPaletteForStatus(numCharts); - - // convert series labels to better/worse - const oddSeries = numCharts % 2; - const numOfHalf = Math.floor(numCharts / 2); - - const dg = new DataGenerator(); - const data = dg.generateGroupedSeries(20, numCharts).map((item) => { - const index = item.g.charCodeAt(0) - 97; - let howManyErs; - if (oddSeries && index === numOfHalf) { - item.g = 'Meh'; - } else if (index < numOfHalf) { - howManyErs = numOfHalf - (index + 1); - item.g = `Better${'er'.repeat(howManyErs)}`; - } else if (index >= numOfHalf) { - howManyErs = index - numOfHalf; - if (oddSeries) { - howManyErs -= 1; - } - item.g = `Wors${!howManyErs ? 'e' : ''}${'er'.repeat( - howManyErs > 0 ? howManyErs : 0 - )}`; - } - return item; - }); - - setData(data); - setDataString("[{x: 1, y: 5.5, g: 'Better'}]"); - setVizColors(vizColors); - setVizColorsString(`ouiPaletteForStatus(${numCharts})`); - setChartType('BarSeries'); - }; - - const createHighlightChart = (numCharts) => { - const vizColors = ouiPaletteGray(numCharts); - vizColors[vizColors.length - 1] = highlightColor; - - const dg = new DataGenerator(); - const data = dg.generateGroupedSeries(20, numCharts); - - setData(data); - setDataString("[{x: 1, y: 5.5, g: '0'}]"); - setVizColors(numCharts < 2 ? [highlightColor] : vizColors); - setVizColorsString( - `ouiPaletteGray(${numCharts})[length - 1] = highlightColor` - ); - setChartType('LineSeries'); - }; - - if (data.length === 0) { - return null; - } - - const dg = new DataGenerator(); - - let ChartType = CHART_COMPONENTS[chartType]; - - const isBadChart = !grouped && numCharts > 5; - const isComplicatedChart = grouped; - - const customTitle = - colorType === 'Highlight' ? ( - -

- My number of issues - compared to others -

- - ) : undefined; - - const customTheme = vizColors - ? [ - { - colors: { vizColors }, - }, - theme, - ] - : theme; - const customColorsString = vizColors - ? `[ - { colors: { vizColors: ${vizColorsString} }}, - isDarkTheme ? OUI_CHARTS_THEME_DARK.theme : OUI_CHARTS_THEME_LIGHT.theme -]` - : 'isDarkTheme ? OUI_CHARTS_THEME_DARK.theme : OUI_CHARTS_THEME_LIGHT.theme'; - - const charts = []; - let customLegend; - - if (!grouped) { - charts.push( - - ); - } else { - ChartType = CHART_COMPONENTS.LineSeries; - - for (let index = 0; index < 4; index++) { - const data = dg.generateGroupedSeries(20, 1).map((item) => { - item.y += index * 5; - return item; - }); - - const isOdd = index % 2; - - const chart = ( - - ); - - charts.push(chart); - } - - customLegend = ( -
- - Actual -
-
- - Projected -
- ); - } - - let showLegend = numCharts > 1 || colorType === 'Grouped'; - if (colorType === 'Highlight') showLegend = false; - - return ( - - {customTitle} -
- - - {charts} - - - - {customLegend} -
- - - - - - - - - - - - - - Recommended number of series is 5 or less. - - }> - - - - - - - - - - - - - -
- -

- My number of issues - compared to others -

-` - : '' - } - - - <${chartType} - id="bars" - name="0" - data={${dataString}} - xAccessor={'x'} - yAccessors={['y']} - splitSeriesAccessors={['g']} - ${chartType === 'BarSeries' ? "stackAccessors={['g']}" : ''} - /> - - -`}> - {(copy) => ( - - {isBadChart || isComplicatedChart - ? isComplicatedChart - ? "It's complicated" - : "Bad chart, don't copy" - : 'Copy code of current configuration'} - - )} - -
- - ); -}; 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. -

- - - ), - sections: [ - { - title: 'Theming via OUI', - source: [ - { - type: GuideSectionTypes.JS, - code: themingSource, - }, - { - type: GuideSectionTypes.HTML, - code: themingHtml, - }, - ], - text: ( - -

- 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. -

- - {`import { OUI_CHARTS_THEME_DARK, OUI_CHARTS_THEME_LIGHT } from '@opensearch-project/oui/dist/oui_charts_theme'; - -const ouiTheme = isDarkTheme ? OUI_CHARTS_THEME_DARK.theme : OUI_CHARTS_THEME_LIGHT.theme; - -`} - - -

- 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. -

- - - {`import { ouiPalettePositive } from '../../../../src/services'; - -const customColors = { - colors: { - vizColors: ouiPalettePositive(5), - }, -}; - -`} - -

You'll find an example of these in the demo below.

- - ), - demo: , - }, - { - title: 'Coloring charts', - text: ( - -

- - 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. -

- - ), - demo: , - }, - ], -}; diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.js deleted file mode 100644 index a9ed939af7..0000000000 --- a/src-docs/src/views/elastic_charts/time_chart.js +++ /dev/null @@ -1,211 +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, { useState, useContext, Fragment } from 'react'; -import { ThemeContext } from '../../components'; -import { - Chart, - BarSeries, - Settings, - Axis, - timeFormatter, - niceTimeFormatByDay, - LineSeries, -} from '@elastic/charts'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; - -import { - OuiSpacer, - OuiTitle, - OuiFlexGrid, - OuiFlexItem, - OuiCopy, - OuiButton, -} from '../../../../src/components'; - -import { formatDate, dateFormatAliases } from '../../../../src/services'; - -import { TIME_DATA, TIME_DATA_2 } from './data'; -import { - ChartTypeCard, - CHART_COMPONENTS, - MultiChartCard, - ChartCard, -} from './shared'; - -export const TimeChart = () => { - const themeContext = useContext(ThemeContext); - - const [multi, setMulti] = useState(false); - const [stacked, setStacked] = useState(false); - const [chartType, setChartType] = useState('BarSeries'); - - const onMultiChange = (multiObject) => { - const { multi, stacked } = multiObject; - setMulti(multi); - setStacked(stacked); - }; - - const onChartTypeChange = (chartType) => { - setChartType(chartType); - }; - - const isDarkTheme = themeContext.theme.includes('dark'); - const theme = isDarkTheme - ? OUI_CHARTS_THEME_DARK.theme - : OUI_CHARTS_THEME_LIGHT.theme; - - let ChartType = CHART_COMPONENTS[chartType]; - let ChartType2 = CHART_COMPONENTS[chartType]; - if (chartType === 'Mixed') { - ChartType = BarSeries; - ChartType2 = LineSeries; - } - - const isBadChart = chartType === 'LineSeries' && stacked; - - return ( - - -

- Number of {!multi && 'financial '}robo-calls - {multi && ' by type'} -

- - - - - - - - {multi && ( - - )} - - - - - - - - - - - - - - - - - - - - - - -
- - - <${chartType === 'Mixed' ? 'BarSeries' : chartType} - id="financial" - name="Financial" - data={[[0,1],[1,2]]} - xScaleType="time" - xAccessor={0} - yAccessors={[1]} - ${stacked ? 'stackAccessors={[0]}' : ''} - /> - ${ - multi - ? `<${chartType === 'Mixed' ? 'LineSeries' : chartType} - id="tech" - name="Tech support" - data={[[0,1],[1,2]]} - xScaleType="time" - xAccessor={0} - yAccessors={[1]} - ${stacked ? 'stackAccessors={[0]}' : ''} - />` - : '' - } - - -`}> - {(copy) => ( - - {isBadChart - ? "Bad chart, don't copy" - : 'Copy code of current configuration'} - - )} - -
- - ); -}; 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. -

- -

- Key configurations -

-
    -
  • - - BarSeries.xScaleType = "time" - -
    • -
  • - - tickFormat = timeFormatter(niceTimeFormatByDay(1)); - -
    • -
- - ), - demo: , - }, - ], -}; diff --git a/src-docs/src/views/elastic_charts/treemap.js b/src-docs/src/views/elastic_charts/treemap.js deleted file mode 100644 index 32c48545a6..0000000000 --- a/src-docs/src/views/elastic_charts/treemap.js +++ /dev/null @@ -1,139 +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 } from 'react'; -import { ThemeContext } from '../../components'; -import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts'; -import { GITHUB_DATASET_MOD } from './data'; -import { ouiPaletteColorBlind } from '../../../../src/services'; - -import { - OUI_CHARTS_THEME_DARK, - OUI_CHARTS_THEME_LIGHT, -} from '../../../../src/themes/charts/themes'; -import { - OuiFlexGrid, - OuiFlexItem, - OuiTitle, - OuiSpacer, -} from '../../../../src/components'; - -export default () => { - const themeContext = useContext(ThemeContext); - - /** - * Setup theme based on current light/dark theme - */ - const isDarkTheme = themeContext.theme.includes('dark'); - - /** - * Create a 3 rotation palette (one for each level) - */ - const groupedPalette = ouiPaletteColorBlind({ - rotations: 3, - order: 'group', - sortBy: 'natural', - }); - - return ( -
- -

Github issues by label

- - - - - - - d.count} - layers={[ - { - groupByRollup: (d) => d.total, - shape: { - fillColor: isDarkTheme - ? OUI_CHARTS_THEME_DARK.partition.sectorLineStroke - : OUI_CHARTS_THEME_LIGHT.partition.sectorLineStroke, - }, - hideInLegend: true, - }, - { - groupByRollup: (d) => d.vizType, - shape: { - fillColor: (d) => groupedPalette[d.sortIndex * 3], - }, - }, - { - groupByRollup: (d) => d.issueType, - shape: { - fillColor: (d) => - groupedPalette[d.parent.sortIndex * 3 + d.sortIndex + 1], - }, - }, - ]} - config={{ - ...(isDarkTheme - ? OUI_CHARTS_THEME_DARK.partition - : OUI_CHARTS_THEME_LIGHT.partition), - clockwiseSectors: false, - fillLabel: { - ...(isDarkTheme - ? OUI_CHARTS_THEME_DARK.partition.fillLabel - : OUI_CHARTS_THEME_LIGHT.partition.fillLabel), - textInvertible: true, - }, - }} - /> - - - - - - d.count} - valueGetter="percent" - topGroove={0} - layers={[ - { - groupByRollup: (d) => d.vizType, - shape: { - fillColor: (d) => groupedPalette[d.sortIndex * 3], - }, - fillLabel: { - valueFormatter: () => '', - textColor: 'rgba(0,0,0,0)', // Keeps the label in the legend, but hides it from view - }, - }, - { - groupByRollup: (d) => d.issueType, - shape: { - fillColor: (d) => - groupedPalette[d.parent.sortIndex * 3 + d.sortIndex], - }, - }, - ]} - config={{ - partitionLayout: PartitionLayout.treemap, - ...(isDarkTheme - ? OUI_CHARTS_THEME_DARK.partition - : OUI_CHARTS_THEME_LIGHT.partition), - }} - /> - - - -
- ); -};