Skip to content

Commit

Permalink
chore(charts): remove eui chart theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickofthyme
nickofthyme committed Mar 12, 2024
1 parent 2c68be5 commit f4675c7
Show file tree
Hide file tree
Showing 33 changed files with 273 additions and 489 deletions.
72 changes: 36 additions & 36 deletions src-docs/src/components/guide_section/_utils.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import { EuiButton } from '../src/components';
export default () => <EuiButton>Hello world!</EuiButton>;`),
})
).toEqual(
dedent(`
import { EuiButton } from '@elastic/eui';
export default () => <EuiButton>Hello world!</EuiButton>;`)
);
});
Expand All @@ -26,13 +26,13 @@ describe('renderJsSourceCode', () => {
import { EuiCode } from '../../../src/components/code';
import { EuiCallOut } from '../../../src/components/callout';
import { useGeneratedHtmlId } from '../../../src/services';
export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
})
).toEqual(
dedent(`
import { EuiCode, EuiCallOut, useGeneratedHtmlId } from '@elastic/eui';
export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
);
});
Expand All @@ -43,7 +43,7 @@ describe('renderJsSourceCode', () => {
default: dedent(`
import { EuiButton, EuiFlexGroup, EuiFlexItem } from '../../src/components';
import { useGeneratedHtmlId } from '../../src/services';
export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`),
})
).toEqual(
Expand All @@ -54,7 +54,7 @@ describe('renderJsSourceCode', () => {
EuiFlexItem,
useGeneratedHtmlId,
} from '@elastic/eui';
export default () => <EuiCode>{useGeneratedHtmlId()}</EuiCode>;`)
);
});
Expand All @@ -63,14 +63,14 @@ describe('renderJsSourceCode', () => {
expect(
renderJsSourceCode({
default: dedent(`
import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
import { SOME_RANDOM_IMPORT } from '@elastic/eui';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import { EUI_CHARTS_THEME_DARK } from '@elastic/eui';
import { SOME_RANDOM_IMPORT } from '@elastic/eui';
export default () => 'Hello world!';`)
);
});
Expand All @@ -80,13 +80,13 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
export default () => 'Hello world!';`)
);
});
Expand All @@ -99,14 +99,14 @@ describe('renderJsSourceCode', () => {
default: dedent(`
import { EuiButton } from '../../src/components';
import React, { useState } from 'react';
export default () => <EuiButton>Hello world!</EuiButton>;`),
})
).toEqual(
dedent(`
import React, { useState } from 'react';
import { EuiButton } from '@elastic/eui';
export default () => <EuiButton>Hello world!</EuiButton>;`)
);
});
Expand All @@ -129,7 +129,7 @@ describe('renderJsSourceCode', () => {
_mockDepMultiline,
mockDepMultiline,
} from 'fakeDep000';
export default () => <EuiButton>Hello world!</EuiButton>;`),
})
).toEqual(
Expand All @@ -146,7 +146,7 @@ describe('renderJsSourceCode', () => {
_mockDepMultiline,
mockDepMultiline,
} from 'fakeDep000';
export default () => <EuiButton>Hello world!</EuiButton>;`)
);
});
Expand All @@ -159,7 +159,7 @@ describe('renderJsSourceCode', () => {
import { EuiButton } from '@elastic/eui';
// @ts-ignore no types definitions
import hello from 'world';
export default () => <EuiButton>Hello world!</EuiButton>;`),
})
).toEqual(
Expand All @@ -180,15 +180,15 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import React, { useState } from 'react';
import { EuiButton } from '../../src/components';
import { useGeneratedHtmlId } from '../../../src/services';
import hello from 'world';
import { data } from '../data_store';
export default () => <EuiButton>Hello world!</EuiButton>;`),
})
).toEqual(
Expand All @@ -197,7 +197,7 @@ describe('renderJsSourceCode', () => {
import { EuiButton, useGeneratedHtmlId } from '@elastic/eui';
import hello from 'world';
import { data } from '../data_store';
export default () => <EuiButton>Hello world!</EuiButton>;`)
);
});
Expand All @@ -211,13 +211,13 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import { EuiButton } from '@elastic/eui';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import { EuiButton } from '@elastic/eui';
export default () => 'Hello world!';`)
);
});
Expand All @@ -227,13 +227,13 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import React from 'react';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import React from 'react';
export default () => 'Hello world!';`)
);
});
Expand All @@ -243,13 +243,13 @@ describe('renderJsSourceCode', () => {
renderJsSourceCode({
default: dedent(`
import hello from 'world';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import hello from 'world';
export default () => 'Hello world!';`)
);
});
Expand All @@ -260,14 +260,14 @@ describe('renderJsSourceCode', () => {
default: dedent(`
import React from 'react';
import hello from 'world';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import React from 'react';
import hello from 'world';
export default () => 'Hello world!';`)
);
});
Expand All @@ -278,14 +278,14 @@ describe('renderJsSourceCode', () => {
default: dedent(`
import { is } from '@elastic/eui';
import hello from 'world';
export default () => 'Hello world!';`),
})
).toEqual(
dedent(`
import { is } from '@elastic/eui';
import hello from 'world';
export default () => 'Hello world!';`)
);
});
Expand All @@ -301,7 +301,7 @@ describe('renderJsSourceCode', () => {
EuiButton,
EuiCode,
} from '@elastic/eui';
export default () => 'Hello world!';`),
})
).toEqual(
Expand All @@ -326,7 +326,7 @@ describe('renderJsSourceCode', () => {
const jsCode = \`/* I'm an example of JS */
import React from 'react';
const hello = 'world';\`;
export default () => 'Hello world!';`),
})
).toEqual(
Expand All @@ -337,7 +337,7 @@ describe('renderJsSourceCode', () => {
const jsCode = \`/* I'm an example of JS */
import React from 'react';
const hello = 'world';\`;
export default () => 'Hello world!';`)
);
});
Expand Down
1 change: 0 additions & 1 deletion src-docs/src/theme_dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@

// Elastic charts
@import '~@elastic/charts/dist/theme';
@import '../../src/themes/charts/theme';
1 change: 0 additions & 1 deletion src-docs/src/theme_light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,3 @@

// Elastic charts
@import '~@elastic/charts/dist/theme';
@import '../../src/themes/charts/theme';
17 changes: 4 additions & 13 deletions src-docs/src/views/elastic_charts/accessibility_bullet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,13 @@ import {
euiPaletteGray,
useEuiTheme,
} from '../../../../src/services';
import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,
} from '../../../../src/themes/charts/themes';
import { useChartBaseTheme } from './utils/use_chart_base_theme';

export default () => {
const { colorMode } = useEuiTheme();
const id = htmlIdGenerator()();

/**
* Setup theme based on current light/dark theme
*/
const { colorMode } = useEuiTheme();
const isDarkTheme = colorMode === 'DARK';
const euiChartTheme = isDarkTheme
? EUI_CHARTS_THEME_DARK
: EUI_CHARTS_THEME_LIGHT;
const chartBaseTheme = useChartBaseTheme();

const bandLabels = ['freezing', 'cold', 'brisk', 'warm', 'hot'];
const bands = [0, 100, 125, 150, 250];
Expand All @@ -50,7 +41,7 @@ export default () => {
<EuiSpacer />
<Chart size={{ height: 200 }}>
<Settings
theme={euiChartTheme.theme}
baseTheme={chartBaseTheme}
ariaLabelledBy={id}
ariaDescription="This goal chart has a target of 260."
ariaUseDefaultSummary={false}
Expand Down
20 changes: 5 additions & 15 deletions src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,15 @@
import React from 'react';
import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';

import {
EUI_CHARTS_THEME_DARK,
EUI_CHARTS_THEME_LIGHT,
} from '../../../../src/themes/charts/themes';
import { EuiTitle, EuiSpacer } from '../../../../src/components';
import { useEuiTheme, htmlIdGenerator } from '../../../../src/services';
import { htmlIdGenerator } from '../../../../src/services';
import { useChartBaseTheme } from './utils/use_chart_base_theme';

export default () => {
const { colorMode } = useEuiTheme();
const chartBaseTheme = useChartBaseTheme();
const id = htmlIdGenerator()();

/**
* Setup theme based on current light/dark theme
*/
const isDarkTheme = colorMode === 'DARK';
const euiChartTheme = isDarkTheme
? EUI_CHARTS_THEME_DARK
: EUI_CHARTS_THEME_LIGHT;
const { vizColors } = euiChartTheme.theme.colors!;
const { vizColors } = chartBaseTheme.colors;

type Data = { fruit: string; count: number };
const data: Data[] = [
Expand Down Expand Up @@ -49,7 +39,7 @@ export default () => {
<EuiSpacer />
<Chart size={{ height: 200 }}>
<Settings
theme={euiChartTheme.theme}
baseTheme={chartBaseTheme}
ariaLabelledBy={id}
ariaDescription="There is a great variety of reported favorite fruit"
ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
Expand Down
Loading

0 comments on commit f4675c7

Please sign in to comment.