diff --git a/.eslintignore b/.eslintignore
index 4f8f70c318..697d7b7195 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -20,3 +20,4 @@ packages/charts/src/utils/d3-delaunay
# auto generated directories
**/tmp
+docs/
diff --git a/.eslintrc.js b/.eslintrc.js
index 9c47aa092f..8a76ca3c5f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -118,13 +118,7 @@ module.exports = {
'implicit-arrow-linebreak': 0,
'function-call-argument-newline': ['error', 'consistent'],
'array-bracket-newline': ['error', 'consistent'],
- 'array-element-newline': [
- 'error',
- {
- ArrayExpression: 'consistent',
- ArrayPattern: 'consistent',
- },
- ],
+ 'array-element-newline': 0,
'object-curly-newline': [
'error',
{
@@ -208,7 +202,20 @@ module.exports = {
'error',
{
'newlines-between': 'always',
- groups: ['builtin', 'external', ['parent', 'sibling', 'index', 'internal']],
+ groups: ['builtin', 'external', 'unknown', ['parent', 'sibling', 'index', 'internal']],
+
+ // seperates internal published packages from external packages
+ pathGroups: [
+ {
+ pattern: '@elastic/charts',
+ group: 'unknown',
+ },
+ {
+ pattern: '@elastic/charts/**',
+ group: 'unknown',
+ },
+ ],
+ pathGroupsExcludedImportTypes: ['builtin'],
alphabetize: { order: 'asc', caseInsensitive: true }, // todo replace with directory gradient ordering
},
],
@@ -343,7 +350,7 @@ module.exports = {
{
target: './packages/charts/src',
from: './',
- except: ['./packages/charts/src', 'node_modules'],
+ except: ['./packages/charts/src', './node_modules', './packages/charts/node_modules'],
},
],
},
diff --git a/storybook/addons.ts b/declarations/@elastic/charts.d.ts
similarity index 60%
rename from storybook/addons.ts
rename to declarations/@elastic/charts.d.ts
index 171e816846..7258e32509 100644
--- a/storybook/addons.ts
+++ b/declarations/@elastic/charts.d.ts
@@ -6,7 +6,9 @@
* Side Public License, v 1.
*/
-import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-docs/register';
-import '@storybook/addon-storysource/register';
+/*
+ * This file is required to point at src types when using workspaces inside other workspaces.
+ * Without this the types will point at node_modules which may not be correct version.
+ */
+
+export * from '../../packages/charts/src';
diff --git a/docs/0-Intro/0-Intro.mdx b/docs/0-Intro/0-Intro.mdx
index e9fdba8ed8..ca6af53ed8 100644
--- a/docs/0-Intro/0-Intro.mdx
+++ b/docs/0-Intro/0-Intro.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Meta, Story } from "@storybook/addon-docs";
diff --git a/docs/0-Intro/1-Overview.mdx b/docs/0-Intro/1-Overview.mdx
index 2dca277964..5965aea4d5 100644
--- a/docs/0-Intro/1-Overview.mdx
+++ b/docs/0-Intro/1-Overview.mdx
@@ -1,9 +1,9 @@
-import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../packages/charts/src';
-import { mocks } from '../../packages/charts/src/mocks/hierarchical/index';
-import { config } from '../../packages/charts/src/chart_types/partition_chart/layout/config';
-import { ShapeTreeNode } from '../../packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
+import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts';
+import { mocks } from '@elastic/charts/src/mocks/hierarchical/index';
+import { config } from '@elastic/charts/src/chart_types/partition_chart/layout/config';
+import { ShapeTreeNode } from '@elastic/charts/src/chart_types/partition_chart/layout/types/viewmodel_types';
import {
- categoricalFillColor,
+ discreteColor,
colorBrewerCategoricalStark9,
countryLookup,
indexInterpolatedFillColor,
@@ -12,7 +12,7 @@ import {
productLookup,
regionLookup,
} from '../../stories/utils/utils';
-import { Meta, Story } from "@storybook/addon-docs/blocks";
+import { Meta, Story } from "@storybook/addon-docs";
@@ -281,7 +281,7 @@ config: {
`textInvertible` will have to be set to true for `textContrast` to be set as well. To see an example of where this applies, please see the Partitions Background story within Stylings. Charts are included below but are static.
If you have `textInvertible` set to true, but do not have `textContrast` set to true, then the red slices, Europe, North America, and Asia, will have white text:
-
+
productLookup[d].name,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
},
},
},
@@ -303,7 +303,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
nodeLabel: (d) => regionLookup[d].regionName,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
},
},
},
@@ -312,7 +312,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
nodeLabel: (d) => countryLookup[d].name,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
},
},
},
@@ -351,7 +351,7 @@ If you have `textInvertible` set to true, but do not have `textContrast` set to
Now if you set the `textContrast` to true as well, these slices also become black in text color:
-
+
productLookup[d].name,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.7)(d.sortIndex);
},
},
},
@@ -373,7 +373,7 @@ Now if you set the `textContrast` to true as well, these slices also become blac
nodeLabel: (d) => regionLookup[d].regionName,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.5)(d.parent.sortIndex);
},
},
},
@@ -382,7 +382,7 @@ Now if you set the `textContrast` to true as well, these slices also become blac
nodeLabel: (d) => countryLookup[d].name,
shape: {
fillColor: (d) => {
- return categoricalFillColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
+ return discreteColor(colorBrewerCategoricalStark9, 0.3)(d[MODEL_KEY].parent.sortIndex);
},
},
},
diff --git a/docs/1-Typesofchart/0-Bar.mdx b/docs/1-Typesofchart/0-Bar.mdx
index 8071e221e8..a3b0ae5f83 100644
--- a/docs/1-Typesofchart/0-Bar.mdx
+++ b/docs/1-Typesofchart/0-Bar.mdx
@@ -1,4 +1,4 @@
-import { Meta, Description, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Meta, Description, Story, Preview } from "@storybook/addon-docs";
import { boolean, color, number, select } from '@storybook/addon-knobs';
import {
Chart,
@@ -11,8 +11,8 @@ import {
Position,
timeFormatter,
niceTimeFormatByDay,
-} from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+} from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
import BarSeriesPropsTable from '../2-ChartPropTables/9-BarProps.md';
import BarWAxisPropsTable from '../2-ChartPropTables/10-BarWAxisProps.md';
@@ -22,7 +22,7 @@ import BarWAxisPropsTable from '../2-ChartPropTables/10-BarWAxisProps.md';
[source](https://datavizproject.com/data-type/bar-chart/)
-
+
+
+
```js
-
+
+
+
Here is an example of a `time` x axis
-
+
```js
-
+
@@ -23,7 +23,7 @@ Area charts often used to show overall trends over time rather than specific val
[source](https://datavizproject.com/data-type/area-chart/)
-
+
```js
-
+
+
` components
```js
-
+
@@ -23,7 +23,7 @@ A line chart is similar to the spline graph, but the spline graph draws a curved
[source](https://datavizproject.com/data-type/line-chart/)
-
+
```js
-
+
+
` includes a tickFormat prop to
```js
-
+
@@ -26,7 +26,7 @@ The stackAccessors prop is an array of fields that indicates the stack membershi
## Stacked bar chart examples
-
+
```js
-
+
+
```js
-
+
-
+
```js
-
+
-
+
```js
-
+
+
` components.
-
+
```js
-
+
+
```js
-
+
@@ -27,7 +27,7 @@ You can annotate charts in a couple of ways illustrated below
Here is a basic `line` annotation with `x domain continuous`
-
+
```js
-
+
+
```js
-
+
@@ -20,7 +20,7 @@ import { TSVB_DATASET } from '../../packages/charts/src/utils/data_samples/test_
Here is a chart with a legend on the `right`
-
+
```js
-
+
+
```js
-
+
Basic Bar
``` js
-
+
+
+
+
+
+
+
+
+
{
- const darkmode = boolean('darkmode', false);
- const className = darkmode ? 'story-chart-dark' : 'story-chart';
const toggleSpec = boolean('toggle bar spec', true);
const data1 = [
{ x: 0, y: 2 },
@@ -44,7 +43,7 @@ export const Basic = () => {
const data = toggleSpec ? data1 : data2;
const specId = toggleSpec ? 'bars1' : 'bars2';
return (
-
+
{
);
};
-Basic.story = {
- name: 'basic',
-};
+Basic.storyName = 'basic';
export const AreaBasic = () => {
const toggleSpec = boolean('toggle area spec', true);
@@ -69,7 +66,7 @@ export const AreaBasic = () => {
const specId = toggleSpec ? 'areas1' : 'areas2';
return (
-
+
{
);
};
-AreaBasic.story = {
- name: 'area basic',
-};
+AreaBasic.storyName = 'area basic';
function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
@@ -112,7 +107,7 @@ export const lineBasicXDomainContinuous = () => {
const axisPosition = isBottom ? Position.Bottom : Position.Top;
return (
-
+
{
);
};
-lineBasicXDomainContinuous.story = {
- name: '[line] basic xDomain continuous',
-};
+lineBasicXDomainContinuous.storyName = '[line] basic xDomain continuous';
export const lineBasicXDomainOrdinal = () => {
const dataValues = generateAnnotationData(arrayKnobs('annotation values', ['a', 'c']));
return (
-
+
{
);
};
-lineBasicXDomainOrdinal.story = {
- name: '[line] basic xDomain ordinal',
-};
+lineBasicXDomainOrdinal.storyName = '[line] basic xDomain ordinal';
diff --git a/integration/jest_puppeteer.config.js b/integration/jest_puppeteer.config.js
index 87a3f83518..1b57d69d3c 100644
--- a/integration/jest_puppeteer.config.js
+++ b/integration/jest_puppeteer.config.js
@@ -53,7 +53,7 @@ const customConfig = {
: `yarn test:integration:server --port=${port}`,
port,
usedPortAction: 'error',
- launchTimeout: 120000,
+ launchTimeout: 150000,
...(!isLegacyVRTServer && {
waitOnScheme: {
// using localhost as the server is running on the local machine
diff --git a/integration/server/generate/extract_examples.js b/integration/server/generate/extract_examples.js
index 885ae8d878..9c881993a9 100644
--- a/integration/server/generate/extract_examples.js
+++ b/integration/server/generate/extract_examples.js
@@ -28,7 +28,7 @@ function readdirSync(dir, fileList = []) {
* - the default exports object (in particular the title used on the story)
* - for each named exports, extract their names + file paths
*/
-function extractExamples(exampleRelativePath = 'stories') {
+function extractExamples(exampleRelativePath = 'storybook/stories') {
// eslint-disable-next-line no-console
console.log('Extract examples from', path.join(process.cwd(), exampleRelativePath));
diff --git a/integration/server/generate/import_template.js b/integration/server/generate/import_template.js
index f4dddd58d6..d980deb0dc 100644
--- a/integration/server/generate/import_template.js
+++ b/integration/server/generate/import_template.js
@@ -8,9 +8,10 @@
module.exports = function lazyImportTemplate(index, path) {
return `
-const Component${index} = React.lazy(() => {
- return import('../../${path}').then((module) => {
- return { default: module.Example };
- });
-});`;
+ const Component${index} = React.lazy(() => {
+ return import('../../${path}').then((module) => {
+ setParams(module.Example, urlParams);
+ return { default: module.Example };
+ });
+ });`;
};
diff --git a/integration/server/generate/vrt_page_template.js b/integration/server/generate/vrt_page_template.js
index dcf2fe44f5..c040e81e56 100644
--- a/integration/server/generate/vrt_page_template.js
+++ b/integration/server/generate/vrt_page_template.js
@@ -40,27 +40,39 @@ ReactDOM.render(, document.getElementById('story-root') as HTMLElemen
function pageTemplate(imports, routes, urls) {
return `
import React, { Suspense } from 'react';
-
-${imports.join('\n')}
+import { ThemeProvider, BackgroundProvider } from '../../storybook/use_base_theme';
+import { useGlobalsParameters } from '../server/mocks/use_global_parameters';
export function VRTPage() {
- const path = new URL(window.location.toString()).searchParams.get('path');
+ const {
+ themeName,
+ backgroundColor,
+ setParams,
+ } = useGlobalsParameters();
+ const urlParams = new URL(window.location.toString()).searchParams;
+ ${imports.join('\n ')}
+
+ const path = urlParams.get('path');
if(!path) {
return (<>
missing url path
- ${urls
- .map((url) => {
- return `- ${url.slice(7)}
`;
- })
- .join('\n')}
+ ${urls
+ .map((url) => {
+ return `- ${url.slice(7)}
`;
+ })
+ .join('\n ')}
>);
}
return (
- Loading...}>
- ${routes.join('\n ')}
-
+
+
+ Loading...}>
+ ${routes.join('\n ')}
+
+
+
);
}
diff --git a/integration/server/index.ejs b/integration/server/index.ejs
index 58f2f87a27..ab058a2487 100644
--- a/integration/server/index.ejs
+++ b/integration/server/index.ejs
@@ -2,63 +2,13 @@
-
-
-
+
diff --git a/integration/server/mocks/use_global_parameters.ts b/integration/server/mocks/use_global_parameters.ts
new file mode 100644
index 0000000000..588fbe9a0b
--- /dev/null
+++ b/integration/server/mocks/use_global_parameters.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useState } from 'react';
+
+import { parameters } from '../../../storybook/preview';
+
+interface WithParameters {
+ (): JSX.Element;
+ parameters?: {
+ backgrounds?: {
+ default?: string;
+ [key: string]: any;
+ };
+ themes?: {
+ default: string;
+ [key: string]: any;
+ };
+ [key: string]: any;
+ };
+}
+
+function setTheme(name: string) {
+ if (name === 'Light') {
+ document.querySelector('html')?.classList.add('light-theme');
+ document.querySelector('html')?.classList.remove('dark-theme');
+ } else {
+ document.querySelector('html')?.classList.add('dark-theme');
+ document.querySelector('html')?.classList.remove('light-theme');
+ }
+}
+
+function colorLookup(name?: string) {
+ if (!name) return;
+ return parameters.backgrounds.values.find((c) => c.name === name)?.value;
+}
+
+export function useGlobalsParameters() {
+ const [themeName, setThemeName] = useState('Light');
+ const [backgroundColor, setBackgroundColor] = useState('White');
+
+ /**
+ * Handles setting global context values. Stub for theme and background addons
+ */
+ function setParams({ parameters }: T, params: URLSearchParams) {
+ const globals = getGlobalParams(params);
+ const newThemeName = globals.themes ?? parameters?.themes?.default ?? 'Light';
+ setThemeName(newThemeName);
+ setTheme(newThemeName);
+ setBackgroundColor(globals.backgrounds ?? colorLookup(parameters?.backgrounds?.default));
+ }
+
+ return {
+ themeName,
+ backgroundColor,
+ setParams,
+ };
+}
+
+/**
+ * Converts url color param from !hex(fff) to #fff
+ */
+function parseColor(c?: string) {
+ return c && c.replace(/!hex\((.+)\)/, '#$1');
+}
+
+function getGlobalParams(params: URLSearchParams) {
+ const globals = params.get('globals') ?? '';
+ const map = Object.fromEntries(globals.split(';').map((pair: string) => pair.split(':')));
+
+ return {
+ backgrounds: parseColor(map['backgrounds.value']),
+ themes: map['themes.value'],
+ };
+}
diff --git a/integration/server/webpack.config.js b/integration/server/webpack.config.js
index 36dfd72de7..7aba79d93e 100644
--- a/integration/server/webpack.config.js
+++ b/integration/server/webpack.config.js
@@ -54,45 +54,21 @@ module.exports = {
},
{
test: /\.scss$/,
- oneOf: [
+ use: [
+ 'style-loader',
{
- resourceQuery: /^\?lazy$/,
- use: [
- {
- loader: 'style-loader',
- options: {
- injectType: 'lazyStyleTag',
- },
- },
- {
- loader: 'css-loader',
- options: { importLoaders: 1 },
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')],
- },
- },
- 'sass-loader',
- ],
+ loader: 'css-loader',
+ options: { importLoaders: 1 },
},
{
- use: [
- 'style-loader',
- {
- loader: 'css-loader',
- options: { importLoaders: 1 },
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')],
- },
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: {
+ plugins: [require('autoprefixer')],
},
- 'sass-loader',
- ],
+ },
},
+ 'sass-loader',
],
},
],
@@ -101,6 +77,8 @@ module.exports = {
alias: {
'@storybook/addon-knobs': path.resolve(__dirname, 'mocks/@storybook/addon-knobs'),
'@storybook/addon-actions': path.resolve(__dirname, 'mocks/@storybook/addon-actions'),
+ '@elastic/charts$': path.resolve(__dirname, '../../packages/charts/src'),
+ '@elastic/charts/': path.resolve(__dirname, '../../packages/charts/'),
},
extensions: ['.tsx', '.ts', '.js'],
},
diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png
index 3fc4bdb4fa..2c7d977fe2 100644
Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-negative-values-when-hiding-positive-one-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-negative-values-when-hiding-positive-one-1-snap.png
index 994aea9518..5343f3443b 100644
Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-negative-values-when-hiding-positive-one-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-negative-values-when-hiding-positive-one-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-positive-values-when-hiding-negative-one-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-positive-values-when-hiding-negative-one-1-snap.png
index 2dc05e29d1..cbde9d60ca 100644
Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-positive-values-when-hiding-negative-one-1-snap.png and b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-shows-only-positive-values-when-hiding-negative-one-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-legend-items-with-color-picker-clicking-hidden-or-unhidden-legend-items-should-not-move-when-color-picker-series-is-hidden-or-unhidden-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-legend-items-with-color-picker-clicking-hidden-or-unhidden-legend-items-should-not-move-when-color-picker-series-is-hidden-or-unhidden-1-snap.png
index 7fe6237adb..8c0e770bf8 100644
Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-legend-items-with-color-picker-clicking-hidden-or-unhidden-legend-items-should-not-move-when-color-picker-series-is-hidden-or-unhidden-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-legend-items-with-color-picker-clicking-hidden-or-unhidden-legend-items-should-not-move-when-color-picker-series-is-hidden-or-unhidden-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png
index 54390805d5..b944f62e35 100644
Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltips-should-render-current-tooltip-in-dark-theme-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-keyboard-navigation-should-navigate-to-legend-item-with-tab-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-keyboard-navigation-should-navigate-to-legend-item-with-tab-1-snap.png
index 09fe0c9128..73b6b04e52 100644
Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-keyboard-navigation-should-navigate-to-legend-item-with-tab-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-keyboard-navigation-should-navigate-to-legend-item-with-tab-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png
index 41d2498b97..e3628a23a0 100644
Binary files a/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png and b/integration/tests/__image_snapshots__/legend-stories-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png differ
diff --git a/integration/tests/__image_snapshots__/styles-test-ts-styles-should-hide-the-value-label-with-0-text-border-1-snap.png b/integration/tests/__image_snapshots__/styles-test-ts-styles-should-hide-the-value-label-with-0-text-border-1-snap.png
index 0d2269d053..b1e3d73aed 100644
Binary files a/integration/tests/__image_snapshots__/styles-test-ts-styles-should-hide-the-value-label-with-0-text-border-1-snap.png and b/integration/tests/__image_snapshots__/styles-test-ts-styles-should-hide-the-value-label-with-0-text-border-1-snap.png differ
diff --git a/integration/tests/all.test.ts b/integration/tests/all.test.ts
index 08facc11a1..ffedb71cf4 100644
--- a/integration/tests/all.test.ts
+++ b/integration/tests/all.test.ts
@@ -9,11 +9,6 @@
import { getStorybookInfo } from '../helpers';
import { common } from '../page_objects';
-// mock required for importing trick, otherwise .scss files will throw an error
-jest.mock('../../storybook/theme_service.ts', () => ({
- switchTheme: () => undefined,
-}));
-
const storyGroups = getStorybookInfo();
describe('Baseline Visual tests for all stories', () => {
diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
index 5f89187c51..5cc9d4bc1b 100644
--- a/integration/tests/legend_stories.test.ts
+++ b/integration/tests/legend_stories.test.ts
@@ -168,7 +168,7 @@ describe('Legend stories', () => {
[Position.Bottom, Position.Right],
])('should correctly display %s %s', async (pos1, pos2) => {
await common.expectChartAtUrlToMatchScreenshot(
- `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&knob-Dark Mode=`,
+ `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&globals=themes.value:Light`,
);
});
it.each([
@@ -178,7 +178,7 @@ describe('Legend stories', () => {
[Position.Bottom, Position.Right],
])('should correctly display %s %s in dark mode', async (pos1, pos2) => {
await common.expectChartAtUrlToMatchScreenshot(
- `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&knob-Dark Mode=true`,
+ `http://localhost:9001/?path=/story/legend--inside-chart&knob-Legend Position[0]=${pos1}&knob-Legend Position[1]=${pos2}&globals=themes.value:Dark`,
);
});
});
diff --git a/package.json b/package.json
index 7c2706bb7e..174b10236d 100644
--- a/package.json
+++ b/package.json
@@ -5,36 +5,39 @@
"license": "Apache-2.0",
"private": "true",
"repository": "git@github.com:elastic/elastic-charts.git",
- "workspaces": [
- "packages/*"
- ],
+ "workspaces": {
+ "packages": [
+ "packages/*",
+ "storybook"
+ ]
+ },
"scripts": {
"prepack": "echo 'This package is not published, see pacakges/*' && exit 1",
- "autoprefix:css": "lerna run --loglevel=silent --scope @elastic/charts autoprefix:css",
- "api:check": "lerna run --loglevel=silent --scope @elastic/charts api:check",
- "api:check:local": "lerna run --loglevel=silent --scope @elastic/charts api:check:local",
- "api:extract": "lerna run --loglevel=silent --scope @elastic/charts api:extract",
+ "autoprefix:css": "lerna run --loglevel=silent --scope @elastic/charts autoprefix:css --stream",
+ "api:check": "lerna run --loglevel=silent --scope @elastic/charts api:check --stream",
+ "api:check:local": "lerna run --loglevel=silent --scope @elastic/charts api:check:local --stream",
+ "api:extract": "lerna run --loglevel=silent --scope @elastic/charts api:extract --stream",
"backport": "backport",
- "build": "lerna run --loglevel=silent --scope @elastic/charts build",
- "build:ts": "lerna run --loglevel=silent --scope @elastic/charts build:ts",
- "build:css": "lerna run --loglevel=silent --scope @elastic/charts build:css",
- "build:clean": "lerna run --loglevel=silent --scope @elastic/charts build:clean",
- "build:compile": "lerna run --loglevel=silent --scope @elastic/charts build:compile",
- "build:sass": "lerna run --loglevel=silent --scope @elastic/charts build:sass",
- "build:check": "lerna run --loglevel=silent --scope @elastic/charts build:check",
- "build:watch": "lerna run --loglevel=silent --scope @elastic/charts build:watch",
- "concat:sass": "lerna run --loglevel=silent --scope @elastic/charts concat:sass",
+ "build": "lerna run --loglevel=silent --scope @elastic/charts build --stream",
+ "build:ts": "lerna run --loglevel=silent --scope @elastic/charts build:ts --stream",
+ "build:css": "lerna run --loglevel=silent --scope @elastic/charts build:css --stream",
+ "build:clean": "lerna run --loglevel=silent --scope @elastic/charts build:clean --stream",
+ "build:compile": "lerna run --loglevel=silent --scope @elastic/charts build:compile --stream",
+ "build:sass": "lerna run --loglevel=silent --scope @elastic/charts build:sass --stream",
+ "build:check": "lerna run --loglevel=silent --scope @elastic/charts build:check --stream",
+ "build:watch": "lerna run --loglevel=silent --scope @elastic/charts build:watch --stream",
+ "concat:sass": "lerna run --loglevel=silent --scope @elastic/charts concat:sass --stream",
"cz": "git-cz",
"lint": "NODE_ENV=production eslint --quiet --ext .tsx,.ts,.js .",
"lint:fix": "yarn lint --fix",
+ "lint:fix:it": "NODE_ENV=production eslint --quiet --fix --ext .tsx,.ts,.js",
"prettier:check": "prettier --check \"**/*.{json,html,css,scss}\"",
"playground": "cd playground && webpack serve",
"pq": "pretty-quick",
"semantic-release": "semantic-release",
"start": "yarn storybook",
- "start-docs": "start-storybook -p 8001 -c storybook-docs --ci",
- "storybook": "VRT=true start-storybook -s ./public -p 9001 -c storybook --ci --no-version-updates",
- "storybook:build": "rm -rf .out && build-storybook -s ./public -c storybook -o .out",
+ "storybook": "lerna run --scope charts-storybook start --stream",
+ "storybook:build": "lerna run --scope charts-storybook build --stream",
"test": "jest --verbose --config jest.config.js",
"test:tz": "yarn test:tz-utc && yarn test:tz-ny && yarn test:tz-jp",
"test:tz-utc": "TZ=UTC jest --verbose --config=jest.tz.config.js",
@@ -49,33 +52,11 @@
"test:integration:generate:examples": "./scripts/extract_examples.sh",
"test:integration:generate:page": "./scripts/compile_vrt_page.sh",
"test:integration:server": "cd integration/server && RNG_SEED='elastic-charts' webpack serve --content-base integration/server",
- "typecheck:src": "lerna run --loglevel=silent --scope @elastic/charts typecheck",
+ "typecheck:src": "lerna run --loglevel=silent --scope @elastic/charts typecheck --stream",
"typecheck:all": "tsc -p ./tsconfig.json --noEmit",
"ts:prune": "ts-prune",
"link:kibana": "node ./packages/link_kibana"
},
- "dependencies": {
- "@popperjs/core": "^2.4.0",
- "chroma-js": "^2.1.0",
- "classnames": "^2.2.6",
- "d3-array": "^1.2.4",
- "d3-cloud": "^1.2.5",
- "d3-collection": "^1.0.7",
- "d3-color": "^1.4.0",
- "d3-interpolate": "^1.4.0",
- "d3-scale": "^1.0.7",
- "d3-shape": "^1.3.4",
- "newtype-ts": "^0.2.4",
- "prop-types": "^15.7.2",
- "re-reselect": "^3.4.0",
- "react-redux": "^7.1.0",
- "redux": "^4.0.4",
- "reselect": "^4.0.0",
- "resize-observer-polyfill": "^1.5.1",
- "ts-debounce": "^3.0.0",
- "utility-types": "^3.10.0",
- "uuid": "^3.3.2"
- },
"devDependencies": {
"@babel/core": "^7.10.4",
"@babel/plugin-transform-modules-commonjs": "^7.10.4",
@@ -84,7 +65,7 @@
"@commitlint/cli": "^12.1.1",
"@commitlint/config-conventional": "^12.1.1",
"@elastic/datemath": "^5.0.2",
- "@elastic/eui": "^32.1.0",
+ "@elastic/eui": "^34.6.0",
"@mdx-js/loader": "^1.6.6",
"@microsoft/api-documenter": "^7.12.7",
"@microsoft/api-extractor": "^7.13.1",
@@ -95,16 +76,7 @@
"@semantic-release/github": "^7.2.1",
"@semantic-release/npm": "^7.1.1",
"@semantic-release/release-notes-generator": "^9.0.2",
- "@storybook/addon-actions": "^5.3.19",
- "@storybook/addon-docs": "^5.3.19",
- "@storybook/addon-info": "^5.3.19",
- "@storybook/addon-knobs": "^5.3.19",
- "@storybook/addon-links": "^5.3.19",
- "@storybook/addon-storysource": "^5.3.19",
- "@storybook/preset-typescript": "^3.0.0",
- "@storybook/react": "^5.3.19",
- "@storybook/source-loader": "^5.3.19",
- "@storybook/theming": "^5.3.19",
+ "@storybook/react": "^6.3.4",
"@types/chroma-js": "^2.0.0",
"@types/classnames": "^2.2.7",
"@types/color": "^3.0.1",
@@ -130,20 +102,15 @@
"@types/react-dom": "^16.9.8",
"@types/react-redux": "^7.1.1",
"@types/seedrandom": "^2.4.28",
- "@types/storybook__addon-info": "^5.2.1",
"@types/url-parse": "^1.4.3",
"@types/uuid": "^3.4.4",
"@typescript-eslint/eslint-plugin": "^4.12.0",
"@typescript-eslint/parser": "^4.12.0",
- "@webpack-cli/serve": "^1.3.1",
"autoprefixer": "^9.0.0",
- "babel-loader": "^8.1.0",
"backport": "^5.6.6",
"canvas": "^2.6.1",
- "circular-dependency-plugin": "^5.2.0",
"commitizen": "^4.2.3",
"cross-env": "^7.0.2",
- "css-loader": "^5.2.4",
"cz-conventional-changelog": "^3.3.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
@@ -180,9 +147,11 @@
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"node-sass": "^4.14.1",
+ "node-sass-tilde-importer": "^1.0.2",
"numeral": "^2.0.6",
"postcss": "^8.3.0",
"postcss-cli": "^8.3.1",
+ "postcss-loader": "^4.2.0",
"prettier": "^2.2.1",
"pretty-quick": "^3.1.0",
"puppeteer": "^1.20.0",
@@ -193,19 +162,14 @@
"react-is": "^16.13.0",
"redux-devtools-extension": "^2.13.8",
"sass-graph": "^3.0.5",
- "sass-loader": "^10.1.1",
"seedrandom": "^3.0.5",
"semantic-release": "^17.4.2",
"semantic-release-slack-bot": "^2.1.0",
"slugify": "^1.5.0",
- "style-loader": "^2.0.0",
- "terser-webpack-plugin": "^4.2.3",
"ts-jest": "^26.5.5",
- "ts-loader": "^7.0.5",
"ts-prune": "^0.8.4",
"typescript": "^4.1.3",
- "webpack": "^4.43.0",
- "webpack-cli": "^4.6.0",
+ "webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
},
"engines": {
diff --git a/packages/charts/package.json b/packages/charts/package.json
index 9582aecbb6..943845317c 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -24,7 +24,7 @@
"build:css": "yarn build:sass && yarn autoprefix:css && yarn concat:sass",
"build:clean": "echo 'Cleaning dist...' && rm -rf ./dist",
"build:compile": "echo 'Compiling...' && tsc -p ./tsconfig.json && tsc -p ./tsconfig.nocomments.json",
- "build:sass": "echo 'Building sass...' && node-sass src/theme_light.scss dist/theme_light.css --output-style compressed && node-sass src/theme_dark.scss dist/theme_dark.css --output-style compressed && node-sass src/theme_only_light.scss dist/theme_only_light.css --output-style compressed && node-sass src/theme_only_dark.scss dist/theme_only_dark.css --output-style compressed",
+ "build:sass": "echo 'Building sass...' && node-sass src/theme_light.scss dist/theme_light.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_dark.scss dist/theme_dark.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_only_light.scss dist/theme_only_light.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer && node-sass src/theme_only_dark.scss dist/theme_only_dark.css --output-style compressed --importer=../../node_modules/node-sass-tilde-importer",
"build:check": "echo 'Type checking dist...' && tsc -p ./tsconfig.check.json",
"build:watch": "echo 'Watching build...' && yarn build:clean && yarn build:css && tsc -p ./tsconfig.json -w",
"concat:sass": "echo 'Concat SASS...' && node scripts/concat_sass.js",
diff --git a/packages/charts/src/_eui_imports.scss b/packages/charts/src/_eui_imports.scss
index 8f77ad4cd2..4e83153f61 100644
--- a/packages/charts/src/_eui_imports.scss
+++ b/packages/charts/src/_eui_imports.scss
@@ -1,3 +1,3 @@
-@import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
-@import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
-@import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
+@import '~@elastic/eui/src/global_styling/functions/index';
+@import '~@elastic/eui/src/global_styling/variables/index';
+@import '~@elastic/eui/src/global_styling/mixins/index';
diff --git a/packages/charts/src/chart_types/xy_chart/domains/y_domain.ts b/packages/charts/src/chart_types/xy_chart/domains/y_domain.ts
index aaf727a736..50865bf923 100644
--- a/packages/charts/src/chart_types/xy_chart/domains/y_domain.ts
+++ b/packages/charts/src/chart_types/xy_chart/domains/y_domain.ts
@@ -209,7 +209,10 @@ export function isStackedSpec(spec: YBasicSeriesSpec, histogramEnabled: boolean)
*/
export function coerceYScaleTypes(
scales: Array<{ type: ScaleContinuousType; nice: boolean }>,
-): { type: ScaleContinuousType; nice: boolean } {
+): {
+ type: ScaleContinuousType;
+ nice: boolean;
+} {
const scaleCollection = scales.reduce<{
types: Set;
nice: Array;
diff --git a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
index 02eaad7870..abcd83aaca 100644
--- a/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
+++ b/packages/charts/src/chart_types/xy_chart/renderer/canvas/panels/panels.ts
@@ -27,8 +27,8 @@ export function renderGridPanels(ctx: CanvasRenderingContext2D, { x: chartX, y:
renderRect(
ctx,
{ x: chartX + panelX, y: chartY + panelY, width, height },
- { color: stringToRGB('#00000000') },
- { color: stringToRGB('#000000'), width: 1 },
+ { color: stringToRGB('rgba(0,0,0,0)') },
+ { color: stringToRGB('rgb(0,0,0)'), width: 1 },
),
),
);
diff --git a/packages/charts/src/components/accessibility/accessibility.test.tsx b/packages/charts/src/components/accessibility/accessibility.test.tsx
index 0dd1cb6708..348335b0ac 100644
--- a/packages/charts/src/components/accessibility/accessibility.test.tsx
+++ b/packages/charts/src/components/accessibility/accessibility.test.tsx
@@ -85,7 +85,7 @@ describe('Accessibility', () => {
);
const sunburstLayerWrapper = mount(
-
+
{
describe('Goal chart type accessibility', () => {
const goalChartWrapper = mount(
-
+
, document.getElementById('root') as HTMLElement);
diff --git a/playground/playground.tsx b/playground/playground.tsx
index ba0fa50ee9..9042326569 100644
--- a/playground/playground.tsx
+++ b/playground/playground.tsx
@@ -8,7 +8,7 @@
import React from 'react';
-import { Example } from '../stories/waffle/1_simple';
+import { Example } from '../storybook/stories/goal/22_horizontal_plusminus';
export class Playground extends React.Component {
render() {
diff --git a/playground/webpack.config.js b/playground/webpack.config.js
index e78a3f8254..ca6c0aa338 100644
--- a/playground/webpack.config.js
+++ b/playground/webpack.config.js
@@ -45,7 +45,9 @@ module.exports = {
{
loader: 'postcss-loader',
options: {
- plugins: [require('autoprefixer')],
+ postcssOptions: {
+ plugins: [require('autoprefixer')],
+ },
},
},
'sass-loader',
diff --git a/scripts/setup_enzyme.ts b/scripts/setup_enzyme.ts
index 3b4562b4ef..286f2e4476 100644
--- a/scripts/setup_enzyme.ts
+++ b/scripts/setup_enzyme.ts
@@ -13,19 +13,9 @@ configure({ adapter: new Adapter() });
process.env.RNG_SEED = 'jest-unit-tests';
-declare global {
- interface Window {
- /**
- * ResizeObserverMock override
- */
- ResizeObserver: typeof ResizeObserverMock;
- }
-}
-
/**
* Mocking RAF and ResizeObserver to missing RAF and RO in jsdom
*/
-
window.requestAnimationFrame = (callback) => {
callback(0);
return 0;
@@ -48,6 +38,7 @@ class ResizeObserverMock {
disconnect() {}
}
+// @ts-ignore
window.ResizeObserver = ResizeObserverMock;
// Some tests will fail due to undefined Path2D, this mock doesn't create issues on test env
diff --git a/stories/interactions/17_png_export.tsx b/stories/interactions/17_png_export.tsx
deleted file mode 100644
index 93b4b9057b..0000000000
--- a/stories/interactions/17_png_export.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { button, select } from '@storybook/addon-knobs';
-import React, { RefObject } from 'react';
-
-import {
- Axis,
- BarSeries,
- Chart,
- niceTimeFormatter,
- Position,
- ScaleType,
- Settings,
- Partition,
- Datum,
- Goal,
- ChartType,
-} from '../../packages/charts/src';
-import { BandFillColorAccessorInput } from '../../packages/charts/src/chart_types/goal_chart/specs';
-import { GoalSubtype } from '../../packages/charts/src/chart_types/goal_chart/specs/constants';
-import { config } from '../../packages/charts/src/chart_types/partition_chart/layout/config';
-import { mocks } from '../../packages/charts/src/mocks/hierarchical';
-import { Color } from '../../packages/charts/src/utils/common';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
-import { SB_KNOBS_PANEL } from '../utils/storybook';
-import { productLookup, indexInterpolatedFillColor, interpolatorCET2s } from '../utils/utils';
-
-export const Example = () => {
- /**
- * The handler section of this story demonstrates the PNG export functionality
- */
- const chartRef: React.RefObject = React.createRef();
- const handler = () => {
- if (!chartRef.current) {
- return;
- }
- const snapshot = chartRef.current.getPNGSnapshot({
- // you can set the background and pixel ratio for the PNG export
- backgroundColor: 'white',
- pixelRatio: 2,
- });
- if (!snapshot) {
- return;
- }
- // will save as chart.png
- const fileName = 'chart.png';
- switch (snapshot.browser) {
- case 'IE11':
- return navigator.msSaveBlob(snapshot.blobOrDataUrl, fileName);
- default:
- const link = document.createElement('a');
- link.download = fileName;
- link.href = snapshot.blobOrDataUrl;
- document.body.appendChild(link);
- link.click();
- document.body.removeChild(link);
- }
- };
- button('Export PNG', handler);
- const selectedChart = select('chart type', [ChartType.XYAxis, ChartType.Partition, ChartType.Goal], ChartType.XYAxis);
-
- switch (selectedChart) {
- case ChartType.Partition:
- return renderPartitionChart(chartRef);
- case ChartType.Goal:
- return renderGoalchart(chartRef);
- case ChartType.XYAxis:
- default:
- return renderXYAxisChart(chartRef);
- }
-};
-
-function renderPartitionChart(chartRef: RefObject) {
- return (
-
- d.exportVal as number}
- valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
- layers={[
- {
- groupByRollup: (d: Datum) => d.sitc1,
- nodeLabel: (d: Datum) => productLookup[d].name,
- fillLabel: { textInvertible: true },
- shape: {
- fillColor: indexInterpolatedFillColor(interpolatorCET2s),
- },
- },
- ]}
- />
-
- );
-}
-
-function renderXYAxisChart(chartRef: RefObject) {
- const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 100);
- return (
-
-
-
-
-
-
-
- );
-}
-
-function renderGoalchart(chartRef: RefObject) {
- const subtype = GoalSubtype.Goal;
-
- const colorMap: { [k: number]: Color } = {
- 200: '#fc8d62',
- 250: 'lightgrey',
- 300: '#66c2a5',
- };
-
- const bandFillColor = (x: number): Color => colorMap[x];
-
- return (
-
- String(value)}
- bandFillColor={({ value }: BandFillColorAccessorInput) => bandFillColor(value)}
- labelMajor=""
- labelMinor=""
- centralMajor="280 MB/s"
- centralMinor=""
- config={{
- angleStart: Math.PI + (Math.PI - (2 * Math.PI) / 3) / 2,
- angleEnd: -(Math.PI - (2 * Math.PI) / 3) / 2,
- }}
- />
-
- );
-}
-
-// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_KNOBS_PANEL },
- info: {
- text:
- 'Generate a PNG of the chart by clicking on the Export PNG button in the knobs section. In this Example, the button handler is setting the PNG background to white with a pixel ratio of 2. If the browser is detected to be IE11, msSaveBlob will be used instead of a PNG capture.',
- },
- },
-};
diff --git a/storybook-docs/config.ts b/storybook-docs/config.ts
deleted file mode 100644
index 3c705d67e6..0000000000
--- a/storybook-docs/config.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-// @ts-ignore
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
-import { withInfo } from '@storybook/addon-info';
-import { withKnobs } from '@storybook/addon-knobs';
-import { addDecorator, configure, addParameters } from '@storybook/react';
-import { create } from '@storybook/theming';
-
-import { switchTheme } from './theme_service';
-
-import './style.scss';
-
-switchTheme('light');
-
-addParameters({
- options: {
- theme: create({
- base: 'light',
- brandTitle: 'Elastic Charts',
- brandUrl: 'https://github.com/elastic/elastic-charts',
- brandImage:
- 'https://static-www.elastic.co/v3/assets/bltefdd0b53724fa2ce/blt6ae3d6980b5fd629/5bbca1d1af3a954c36f95ed3/logo-elastic.svg',
- }),
- panelPosition: 'right',
- sidebarAnimations: true,
- },
- info: {
- inline: true,
- source: true,
- propTables: false,
- styles: {
- infoBody: {
- fontSize: '14px',
- marginTop: 0,
- marginBottom: 0,
- },
- },
- },
- docs: {
- container: DocsContainer,
- page: DocsPage,
- },
-});
-
-addDecorator(withKnobs);
-addDecorator(withInfo);
-
-configure(require.context('../docs', true, /\.(ts|tsx|mdx)$/), module);
diff --git a/storybook-docs/preview-head.html b/storybook-docs/preview-head.html
deleted file mode 100644
index 47a1bb4ab3..0000000000
--- a/storybook-docs/preview-head.html
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/storybook-docs/style.scss b/storybook-docs/style.scss
deleted file mode 100644
index 5518581922..0000000000
--- a/storybook-docs/style.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.story-chart {
- box-sizing: border-box;
- background: white;
- height: 350px;
-}
-.story-chart-dark {
- box-sizing: border-box;
- background: #1a1b20;
-}
-#root {
- background-color: blanchedalmond;
-}
-#story-root {
- padding: 20px;
- width: 100%;
- height: 400px;
- position: relative;
- box-sizing: border-box;
-}
-#story-root + div table {
- border: 1px solid gray;
-}
-#story-root + div table th {
- border: 1px solid gray;
- padding: 5px;
-}
-#story-root + div table td {
- border: 1px solid gray;
- padding: 5px;
-}
-.Pane.vertical.Pane1 {
- background: red;
-}
-
-canvas {
- height: 350px;
-}
diff --git a/storybook-docs/theme_service.ts b/storybook-docs/theme_service.ts
deleted file mode 100644
index 654e70b22b..0000000000
--- a/storybook-docs/theme_service.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-// @ts-ignore
-import themeDark from '../packages/charts/src/theme_dark.scss?lazy';
-// @ts-ignore
-import themeLight from '../packages/charts/src/theme_light.scss?lazy';
-
-export function switchTheme(theme: string) {
- switch (theme) {
- case 'light':
- themeDark.unuse();
- themeLight.use();
- return;
- case 'dark':
- default:
- themeLight.unuse();
- themeDark.use();
- }
-}
diff --git a/storybook-docs/tsconfig.json b/storybook-docs/tsconfig.json
deleted file mode 100644
index fa61705c09..0000000000
--- a/storybook-docs/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "../tsconfig",
- "include": ["../packages/charts/src/**/*", "../stories/**/*", "./**/*", "config.ts"],
- "exclude": ["../**/*.test.*"]
-}
diff --git a/storybook-docs/webpack.config.js b/storybook-docs/webpack.config.js
deleted file mode 100644
index 8ddf8b5860..0000000000
--- a/storybook-docs/webpack.config.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-const path = require('path');
-
-const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
-
-const nonce = 'Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ=';
-const scssLoaders = [
- {
- loader: 'css-loader',
- options: { importLoaders: 1 },
- },
- {
- loader: 'postcss-loader',
- options: {
- plugins: [require('autoprefixer')],
- },
- },
- 'sass-loader',
-];
-
-module.exports = async ({ config }) => {
- // Replace default css rules with nonce
- config.module.rules = config.module.rules.filter(({ test }) => !test.test('.css'));
- config.module.rules.push({
- test: /\.css$/,
- use: [
- {
- loader: 'style-loader',
- options: {
- attributes: {
- nonce,
- },
- },
- },
- {
- loader: 'css-loader',
- options: { importLoaders: 1 },
- },
- ],
- });
-
- config.module.rules.push({
- test: /\.scss$/,
- include: [path.resolve(__dirname, '../storybook'), path.resolve(__dirname, '../node_modules/@elastic')],
- use: [
- {
- loader: 'style-loader',
- options: {
- attributes: {
- nonce,
- },
- },
- },
- ...scssLoaders,
- ],
- });
-
- // Used for lazy loaded scss files
- config.module.rules.push({
- test: /\.scss$/,
- resourceQuery: /^\?lazy$/,
- use: [
- {
- loader: 'style-loader',
- options: {
- injectType: 'lazyStyleTag',
- attributes: {
- nonce,
- },
- },
- },
- ...scssLoaders,
- ],
- });
-
- config.module.rules.push({
- test: /\.(ts|tsx)$/,
- use: [
- {
- loader: require.resolve('babel-loader'),
- options: {
- presets: [['react-app', { flow: false, typescript: true, sourceLoaderOptions: null }]],
- },
- },
- {
- loader: 'ts-loader',
- options: {
- configFile: 'tsconfig.json',
- transpileOnly: true,
- },
- },
- {
- loader: require.resolve('react-docgen-typescript-loader'),
- },
- ],
- });
- config.module.rules.push({
- test: /\.mdx$/,
- use: [
- {
- loader: 'babel-loader',
- options: {
- presets: [['react-app', { flow: false, typescript: true }]],
- },
- },
- {
- loader: '@mdx-js/loader',
- options: {
- compilers: [createCompiler({})],
- },
- },
- ],
- });
-
- config.resolve.extensions.push('.ts', '.tsx', '.mdx');
-
- return await config;
-};
diff --git a/storybook/config.ts b/storybook/config.ts
deleted file mode 100644
index 2aa065ee65..0000000000
--- a/storybook/config.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { withInfo } from '@storybook/addon-info';
-import { withKnobs } from '@storybook/addon-knobs';
-import { addDecorator, configure, addParameters } from '@storybook/react';
-import { create } from '@storybook/theming';
-
-import { preloadIcons } from './preload_icons';
-import { switchTheme } from './theme_service';
-import './style.scss';
-
-switchTheme('light');
-preloadIcons();
-
-if (process.env.VRT) {
- preloadIcons();
- document.querySelector('html')?.classList.add('disable-animations');
-}
-
-addParameters({
- options: {
- theme: create({
- base: 'light',
- brandTitle: 'Elastic Charts',
- brandUrl: 'https://github.com/elastic/elastic-charts',
- brandImage: 'logo-name.svg',
- }),
- panelPosition: 'right',
- sidebarAnimations: true,
- },
- info: {
- inline: true,
- source: false,
- propTables: false,
- styles: {
- infoBody: {
- fontSize: '14px',
- marginTop: 0,
- marginBottom: 0,
- },
- },
- },
- docs: {},
-});
-
-addDecorator(withKnobs);
-addDecorator(withInfo);
-
-configure(require.context('../stories', true, /\.stories\.tsx?$/), module);
diff --git a/storybook/main.js b/storybook/main.js
new file mode 100644
index 0000000000..5dc396ebcb
--- /dev/null
+++ b/storybook/main.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+ stories: ['./stories/**/*.stories.ts', './stories/**/*.stories.tsx'],
+ addons: [
+ {
+ name: '@storybook/addon-essentials',
+ // Many of these could be used in the future, keeping here for now
+ options: {
+ viewport: false,
+ outline: false,
+ controls: false,
+ docs: false,
+ backgrounds: false,
+ },
+ },
+ '@storybook/addon-backgrounds', // custom
+ '@storybook/addon-knobs',
+ '@storybook/addon-postcss',
+ '@storybook/addon-storysource',
+ 'storybook-addon-themes',
+ ],
+};
diff --git a/stories/shared.ts b/storybook/manager.ts
similarity index 51%
rename from stories/shared.ts
rename to storybook/manager.ts
index aeb6bc8f29..b3679dda52 100644
--- a/stories/shared.ts
+++ b/storybook/manager.ts
@@ -6,16 +6,16 @@
* Side Public License, v 1.
*/
-import { PartialTheme } from '../packages/charts/src';
+import { addons } from '@storybook/addons';
+import { create } from '@storybook/theming';
-export const STORYBOOK_DARK_THEME: PartialTheme = {
- background: {
- color: '#1D1E24', // $euiColorEmptyShade
- },
-};
-
-export const STORYBOOK_LIGHT_THEME: PartialTheme = {
- background: {
- color: '#FFF', // $euiColorEmptyShade;
- },
-};
+addons.setConfig({
+ theme: create({
+ base: 'light',
+ brandTitle: 'Elastic Charts',
+ brandUrl: 'https://github.com/elastic/elastic-charts',
+ brandImage: 'logo-name.svg',
+ }),
+ panelPosition: 'right',
+ sidebarAnimations: true,
+});
diff --git a/storybook/package.json b/storybook/package.json
new file mode 100644
index 0000000000..61445900de
--- /dev/null
+++ b/storybook/package.json
@@ -0,0 +1,45 @@
+{
+ "name": "charts-storybook",
+ "description": "Storybook demo for @elastic/charts library",
+ "license": "Apache-2.0",
+ "version": "0.0.1",
+ "scripts": {
+ "start": "yarn storybook",
+ "storybook": "VRT=true FAST=true start-storybook -s ../public -p 9001 -c . --ci --no-version-updates",
+ "build": "yarn storybook:build",
+ "storybook:build": "rm -rf ../.out && build-storybook -s ../public -c . -o ../.out",
+ "typecheck": "tsc -p ./tsconfig.json --noEmit"
+ },
+ "dependencies": {
+ "@elastic/charts": "^30.2.0",
+ "@elastic/datemath": "^5.0.3",
+ "@elastic/eui": "^34.6.0",
+ "luxon": "^1.27.0",
+ "moment": "^2.29.1",
+ "moment-timezone": "^0.5.32",
+ "react": "^16.12.0",
+ "react-dom": "^16.12.0",
+ "seedrandom": "^3.0.5"
+ },
+ "devDependencies": {
+ "@storybook/addon-backgrounds": "https://gitpkg.now.sh/nickofthyme/storybook/addons/backgrounds?global-hot-fix",
+ "@storybook/addon-docs": "^6.3.4",
+ "@storybook/addon-essentials": "^6.3.4",
+ "@storybook/addon-knobs": "^6.3.0",
+ "@storybook/addon-links": "^6.3.4",
+ "@storybook/addon-postcss": "^2.0.0",
+ "@storybook/addon-storysource": "^6.3.4",
+ "@storybook/core": "^6.3.4",
+ "@storybook/core-common": "^6.3.4",
+ "@storybook/react": "^6.3.4",
+ "@storybook/source-loader": "^6.3.4",
+ "@storybook/theming": "^6.3.4",
+ "circular-dependency-plugin": "^5.2.2",
+ "sass": "~1.32.0",
+ "sass-loader": "^10.1.1",
+ "storybook-addon-themes": "git://github.com/nickofthyme/storybook-addon-themes.git",
+ "terser-webpack-plugin": "^4.2.3",
+ "ts-loader": "^7.0.5",
+ "typescript": "^4.1.3"
+ }
+}
diff --git a/storybook-docs/addons.ts b/storybook/postcss.config.js
similarity index 67%
rename from storybook-docs/addons.ts
rename to storybook/postcss.config.js
index e90981aa51..ca238f4419 100644
--- a/storybook-docs/addons.ts
+++ b/storybook/postcss.config.js
@@ -6,7 +6,6 @@
* Side Public License, v 1.
*/
-import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
-import '@storybook/addon-docs/register';
-import '@storybook/addon-links/register';
+module.exports = {
+ plugins: [require('autoprefixer')],
+};
diff --git a/storybook/preload_icons.ts b/storybook/preload_icons.ts
index cd076b8e3e..b08056e1e1 100644
--- a/storybook/preload_icons.ts
+++ b/storybook/preload_icons.ts
@@ -7,7 +7,7 @@
*/
// @ts-ignore
-import { appendIconComponentCache } from '../node_modules/@elastic/eui/es/components/icon/icon';
+import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon';
/**
* Loads nessecery icons to prevent loading vrt diff
diff --git a/storybook/preview.ts b/storybook/preview.ts
new file mode 100644
index 0000000000..f8562f398d
--- /dev/null
+++ b/storybook/preview.ts
@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+// import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
+
+import { preloadIcons } from './preload_icons';
+import { StoryWrapper } from './story_wrapper';
+import { ThemeName } from './use_base_theme';
+
+import './style.scss';
+
+if (process.env.VRT) {
+ preloadIcons();
+ document.querySelector('html')?.classList.add('disable-animations');
+}
+
+export const parameters = {
+ globals: {
+ // Required for reading globals from query param, disabled for now
+ // See https://github.com/storybookjs/storybook/issues/15632#issuecomment-883542827
+ // backgrounds: {},
+ // themes: {}, this does not work
+ },
+ themes: {
+ default: 'Light',
+ clearable: false,
+ target: 'html',
+ icon: 'mirror',
+ list: [
+ { name: ThemeName.Light, class: 'light-theme', color: '#fff' },
+ { name: ThemeName.Dark, class: 'dark-theme', color: '#000' },
+ { name: ThemeName.EUILight, class: 'light-theme', color: '#fff' },
+ { name: ThemeName.EUIDark, class: 'dark-theme', color: '#000' },
+ ],
+ },
+ backgrounds: {
+ clearable: true,
+ values: [
+ { name: 'White', value: '#fff' },
+ // { name: 'White', value: euiLightVars.euiPageBackgroundColor },
+ { name: 'Black', value: '#1D1E24' },
+ // { name: 'Black', value: euiDarkVars.euiPageBackgroundColor },
+ { name: 'Red', value: '#f04d9a' },
+ { name: 'Blue', value: '#14abf5' },
+ { name: 'Yellow', value: '#fec709' },
+ { name: 'Green', value: '#00c1b4' },
+ ],
+ grid: {
+ disable: true,
+ },
+ },
+};
+
+export const decorators = [StoryWrapper];
diff --git a/stories/annotations/lines/1_x_continuous.tsx b/storybook/stories/annotations/lines/1_x_continuous.tsx
similarity index 89%
rename from stories/annotations/lines/1_x_continuous.tsx
rename to storybook/stories/annotations/lines/1_x_continuous.tsx
index b85a238c67..766710faca 100644
--- a/stories/annotations/lines/1_x_continuous.tsx
+++ b/storybook/stories/annotations/lines/1_x_continuous.tsx
@@ -18,9 +18,11 @@ import {
LineAnnotationDatum,
ScaleType,
Settings,
-} from '../../../packages/charts/src';
-import { Icon } from '../../../packages/charts/src/components/icons/icon';
-import { Position } from '../../../packages/charts/src/utils/common';
+} from '@elastic/charts';
+import { Icon } from '@elastic/charts/src/components/icons/icon';
+import { Position } from '@elastic/charts/src/utils/common';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob, arrayKnobs } from '../../utils/knobs';
function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
@@ -57,8 +59,8 @@ export const Example = () => {
const axisPosition = isBottom ? Position.Bottom : Position.Top;
return (
-
-
+
+
{
const rotation = getChartRotationKnob();
const dataValues = generateAnnotationData(arrayKnobs('annotation values', ['a', 'c']));
return (
-
-
+
+
{
]);
return (
-
-
+
+
{
const axisPosition = isLeft ? Position.Left : Position.Right;
return (
-
-
+
+
{
const hideTooltips = boolean('annotation tooltips hidden', false);
return (
-
-
+
+
{
@@ -51,8 +45,8 @@ export const Example = () => {
};
return (
-
-
+
+
{
: undefined;
return (
-
-
+
+
{
const isYDomain = rotation === -90 || rotation === 90 ? !isVerticalSide : isVerticalSide;
return (
-
-
+
+
{
);
};
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_KNOBS_PANEL },
- info: {
- text: `The \`markerBody\` on the \`LineAnnotationSpec\` will be dynamically positioned to show content that would otherwise be hidden or overflow the chart.
- The \`marker\` prop (also on the \`LineAnnotationSpec\`) however, will always be positioned centered on the given \`dataValue\`.
- These can be used interchangeably to provide a content-rich annotation without losing the data reference.
- **Note: you will need to provide the necessary axis padding for the \`markerBody\` content as this is _not_ currently accounted for in the chart dimensioning**`,
- },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_KNOBS_PANEL },
+ markdown: `The \`markerBody\` on the \`LineAnnotationSpec\` will be dynamically positioned to show content that would otherwise be hidden or overflow the chart.
+ The \`marker\` prop (also on the \`LineAnnotationSpec\`) however, will always be positioned centered on the given \`dataValue\`.
+ These can be used interchangeably to provide a content-rich annotation without losing the data reference.
+ **Note: you will need to provide the necessary axis padding for the \`markerBody\` content as this is _not_ currently accounted for in the chart dimensioning**`,
};
diff --git a/stories/annotations/lines/line.stories.tsx b/storybook/stories/annotations/lines/line.stories.tsx
similarity index 100%
rename from stories/annotations/lines/line.stories.tsx
rename to storybook/stories/annotations/lines/line.stories.tsx
diff --git a/stories/annotations/rects/1_linear_bar_chart.tsx b/storybook/stories/annotations/rects/1_linear_bar_chart.tsx
similarity index 90%
rename from stories/annotations/rects/1_linear_bar_chart.tsx
rename to storybook/stories/annotations/rects/1_linear_bar_chart.tsx
index c9989a84da..1cae2545e3 100644
--- a/stories/annotations/rects/1_linear_bar_chart.tsx
+++ b/storybook/stories/annotations/rects/1_linear_bar_chart.tsx
@@ -9,8 +9,9 @@
import { boolean, select } from '@storybook/addon-knobs';
import React from 'react';
-import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../packages/charts/src';
-import { Position } from '../../../packages/charts/src/utils/common';
+import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings, Position } from '@elastic/charts';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob } from '../../utils/knobs';
export const Example = () => {
@@ -41,8 +42,8 @@ export const Example = () => {
);
return (
-
-
+
+
{
);
};
-Example.story = {
- parameters: {
- info: {
- text: `A \`\` can be used to create a rectangular annotation.
+Example.parameters = {
+ markdown: `A \`\` can be used to create a rectangular annotation.
As for most chart component, the required props are: \`id\` to uniquely identify the annotation and
a \`dataValues\` prop that describes one or more annotations.
@@ -117,6 +116,4 @@ This annotation will cover the X axis starting from the \`0\` value to the \`1\`
In a barchart with linear or ordinal x scale, the interval covered by the annotation fully include the \`x0\` and \`x1\` values.
If one value is out of the relative domain, we will clip the annotation to the max/min value of the chart domain.
`,
- },
- },
};
diff --git a/stories/annotations/rects/2_ordinal_bar_chart.tsx b/storybook/stories/annotations/rects/2_ordinal_bar_chart.tsx
similarity index 83%
rename from stories/annotations/rects/2_ordinal_bar_chart.tsx
rename to storybook/stories/annotations/rects/2_ordinal_bar_chart.tsx
index e11f80ff93..a74c5c127b 100644
--- a/stories/annotations/rects/2_ordinal_bar_chart.tsx
+++ b/storybook/stories/annotations/rects/2_ordinal_bar_chart.tsx
@@ -9,8 +9,10 @@
import { boolean } from '@storybook/addon-knobs';
import React from 'react';
-import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../packages/charts/src';
-import { Position } from '../../../packages/charts/src/utils/common';
+import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
+import { Position } from '@elastic/charts/src/utils/common';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob } from '../../utils/knobs';
export const Example = () => {
@@ -18,8 +20,8 @@ export const Example = () => {
const rotation = getChartRotationKnob();
return (
-
-
+
+
{
);
};
-Example.story = {
- parameters: {
- info: {
- text: `On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart.
+Example.parameters = {
+ markdown: `On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart.
The annotation will cover fully the extent defined by the \`coordinate\` object, extending to the max/min domain values any
missing/out-of-range parameters.`,
- },
- },
};
diff --git a/stories/annotations/rects/3_linear_line_chart.tsx b/storybook/stories/annotations/rects/3_linear_line_chart.tsx
similarity index 87%
rename from stories/annotations/rects/3_linear_line_chart.tsx
rename to storybook/stories/annotations/rects/3_linear_line_chart.tsx
index 3cb967c74c..761d6dbaa9 100644
--- a/stories/annotations/rects/3_linear_line_chart.tsx
+++ b/storybook/stories/annotations/rects/3_linear_line_chart.tsx
@@ -9,17 +9,11 @@
import { boolean, select } from '@storybook/addon-knobs';
import React from 'react';
-import {
- Axis,
- Chart,
- LineSeries,
- RectAnnotation,
- ScaleType,
- Settings,
- RectAnnotationDatum,
-} from '../../../packages/charts/src';
-import { Position } from '../../../packages/charts/src/utils/common';
-import { BandedAccessorType } from '../../../packages/charts/src/utils/geometry';
+import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings, RectAnnotationDatum } from '@elastic/charts';
+import { Position } from '@elastic/charts/src/utils/common';
+import { BandedAccessorType } from '@elastic/charts/src/utils/geometry';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob } from '../../utils/knobs';
export const Example = () => {
@@ -80,8 +74,8 @@ export const Example = () => {
const xAxisPosition = isBottom ? Position.Bottom : Position.Top;
return (
-
-
+
+
diff --git a/stories/annotations/rects/4_styling.tsx b/storybook/stories/annotations/rects/4_styling.tsx
similarity index 90%
rename from stories/annotations/rects/4_styling.tsx
rename to storybook/stories/annotations/rects/4_styling.tsx
index 38f10f6c59..fd72fdfea7 100644
--- a/stories/annotations/rects/4_styling.tsx
+++ b/storybook/stories/annotations/rects/4_styling.tsx
@@ -9,9 +9,11 @@
import { boolean, color, number } from '@storybook/addon-knobs';
import React from 'react';
-import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings } from '../../../packages/charts/src';
-import { Icon } from '../../../packages/charts/src/components/icons/icon';
-import { Position } from '../../../packages/charts/src/utils/common';
+import { Axis, Chart, LineSeries, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
+import { Icon } from '@elastic/charts/src/components/icons/icon';
+import { Position } from '@elastic/charts/src/utils/common';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob } from '../../utils/knobs';
export const Example = () => {
@@ -90,8 +92,8 @@ export const Example = () => {
const hideTooltips = boolean('hide tooltips', false);
return (
-
-
+
+
{
@@ -68,8 +70,8 @@ export const Example = () => {
: undefined;
return (
-
-
+
+
{
const minY = number('min y', 0);
@@ -34,9 +36,9 @@ export const Example = () => {
const fit = xAxisKnobs.minY === xAxisKnobs.maxY ? boolean('fit to the domain', false) : undefined;
return (
-
+
-
+
{
const enabled = boolean('enable annotation', true);
@@ -38,7 +40,7 @@ export const Example = () => {
const xAxisKnobs = getKnobs();
return (
-
+
{xAxisKnobs.enabled && (
{
style={{ fill: 'red' }}
/>
)}
-
+
diff --git a/stories/annotations/rects/8_outside.tsx b/storybook/stories/annotations/rects/8_outside.tsx
similarity index 94%
rename from stories/annotations/rects/8_outside.tsx
rename to storybook/stories/annotations/rects/8_outside.tsx
index 57b398a994..bc1662793c 100644
--- a/stories/annotations/rects/8_outside.tsx
+++ b/storybook/stories/annotations/rects/8_outside.tsx
@@ -9,7 +9,9 @@
import { boolean, number, select } from '@storybook/addon-knobs';
import React from 'react';
-import { Axis, Chart, LineSeries, Position, RectAnnotation, ScaleType, Settings } from '../../../packages/charts/src';
+import { Axis, Chart, LineSeries, Position, RectAnnotation, ScaleType, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../../use_base_theme';
import { getChartRotationKnob } from '../../utils/knobs';
const vGroups = {
@@ -40,8 +42,13 @@ export const Example = () => {
const blueGroupId = select('Blue groupId', vGroups, vGroups.Secondary, 'Annotations');
return (
-
-
+
+
(
-
-
+
+
(
);
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/11_test_linear.tsx b/storybook/stories/area/11_test_linear.tsx
similarity index 75%
rename from stories/area/11_test_linear.tsx
rename to storybook/stories/area/11_test_linear.tsx
index 06930d2ae7..007a37b708 100644
--- a/stories/area/11_test_linear.tsx
+++ b/storybook/stories/area/11_test_linear.tsx
@@ -8,8 +8,10 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
// for testing purposes only
@@ -26,7 +28,8 @@ export const Example = () => {
[9, 1],
];
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/12_test_time.tsx b/storybook/stories/area/12_test_time.tsx
similarity index 80%
rename from stories/area/12_test_time.tsx
rename to storybook/stories/area/12_test_time.tsx
index af16a167f0..6060095921 100644
--- a/stories/area/12_test_time.tsx
+++ b/storybook/stories/area/12_test_time.tsx
@@ -9,8 +9,10 @@
import { DateTime } from 'luxon';
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
@@ -30,7 +32,8 @@ export const Example = () => {
[start.plus({ minute: 8 }).toMillis(), 1],
];
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/13_band_area.tsx b/storybook/stories/area/13_band_area.tsx
similarity index 88%
rename from stories/area/13_band_area.tsx
rename to storybook/stories/area/13_band_area.tsx
index ccfb84a31b..8aa2d87010 100644
--- a/stories/area/13_band_area.tsx
+++ b/storybook/stories/area/13_band_area.tsx
@@ -19,9 +19,11 @@ import {
ScaleType,
Settings,
timeFormatter,
-} from '../../packages/charts/src';
-import { getRandomNumberGenerator } from '../../packages/charts/src/mocks/utils';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+} from '@elastic/charts';
+import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
const dateFormatter = timeFormatter('HH:mm');
@@ -37,8 +39,8 @@ export const Example = () => {
const y0AccessorFormat = text('y0AccessorFormat', '');
const y1AccessorFormat = text('y1AccessorFormat', '');
return (
-
-
+
+
{
const data2 = KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => [d[0], 20, 10]);
return (
-
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/15_stacked_grouped.tsx b/storybook/stories/area/15_stacked_grouped.tsx
similarity index 82%
rename from stories/area/15_stacked_grouped.tsx
rename to storybook/stories/area/15_stacked_grouped.tsx
index 1decd5414b..6c6b7179f8 100644
--- a/stories/area/15_stacked_grouped.tsx
+++ b/storybook/stories/area/15_stacked_grouped.tsx
@@ -8,8 +8,10 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
export const Example = () => {
@@ -47,7 +49,8 @@ export const Example = () => {
[9, 7],
];
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/16_test_stacked_with_missing.tsx b/storybook/stories/area/16_test_stacked_with_missing.tsx
similarity index 94%
rename from stories/area/16_test_stacked_with_missing.tsx
rename to storybook/stories/area/16_test_stacked_with_missing.tsx
index 9ad23a3614..2ecf7f155a 100644
--- a/stories/area/16_test_stacked_with_missing.tsx
+++ b/storybook/stories/area/16_test_stacked_with_missing.tsx
@@ -8,10 +8,13 @@
import React from 'react';
-import { Chart, CurveType, AreaSeries, Position, Axis, ScaleType } from '../../packages/charts/src';
+import { Chart, CurveType, AreaSeries, Position, Axis, ScaleType, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
export const Example = () => (
-
+
+
{
ScaleType.Linear,
);
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/18_negative_positive.tsx b/storybook/stories/area/18_negative_positive.tsx
similarity index 85%
rename from stories/area/18_negative_positive.tsx
rename to storybook/stories/area/18_negative_positive.tsx
index f5dd240b97..ef7c1284f9 100644
--- a/stories/area/18_negative_positive.tsx
+++ b/storybook/stories/area/18_negative_positive.tsx
@@ -9,8 +9,10 @@
import { select, number } from '@storybook/addon-knobs';
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
@@ -27,8 +29,8 @@ export const Example = () => {
);
return (
-
-
+
+
{
);
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/19_negative_band.tsx b/storybook/stories/area/19_negative_band.tsx
similarity index 89%
rename from stories/area/19_negative_band.tsx
rename to storybook/stories/area/19_negative_band.tsx
index f19c897fad..d7a3262c02 100644
--- a/stories/area/19_negative_band.tsx
+++ b/storybook/stories/area/19_negative_band.tsx
@@ -9,7 +9,9 @@
import { select } from '@storybook/addon-knobs';
import React from 'react';
-import { AreaSeries, Axis, Chart, Fit, LineSeries, Position, ScaleType, Settings } from '../../packages/charts/src';
+import { AreaSeries, Axis, Chart, Fit, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
export const Example = () => {
@@ -32,10 +34,11 @@ export const Example = () => {
];
return (
-
+
@@ -66,8 +69,6 @@ export const Example = () => {
);
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/1_basic.tsx b/storybook/stories/area/1_basic.tsx
similarity index 69%
rename from stories/area/1_basic.tsx
rename to storybook/stories/area/1_basic.tsx
index 4b2a2039ed..8127cca2c1 100644
--- a/stories/area/1_basic.tsx
+++ b/storybook/stories/area/1_basic.tsx
@@ -8,14 +8,17 @@
import React from 'react';
-import { AreaSeries, Chart, ScaleType } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Chart, ScaleType, Settings } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
export const Example = () => {
const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/20_stepped_area.tsx b/storybook/stories/area/20_stepped_area.tsx
similarity index 99%
rename from stories/area/20_stepped_area.tsx
rename to storybook/stories/area/20_stepped_area.tsx
index ebfc44682b..7333d4748b 100644
--- a/stories/area/20_stepped_area.tsx
+++ b/storybook/stories/area/20_stepped_area.tsx
@@ -8,7 +8,8 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '../../packages/charts/src';
+import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '@elastic/charts';
+
import { SB_SOURCE_PANEL } from '../utils/storybook';
const data = [
diff --git a/stories/area/2_with_time.tsx b/storybook/stories/area/2_with_time.tsx
similarity index 78%
rename from stories/area/2_with_time.tsx
rename to storybook/stories/area/2_with_time.tsx
index d1ea873c95..37f42a306d 100644
--- a/stories/area/2_with_time.tsx
+++ b/storybook/stories/area/2_with_time.tsx
@@ -9,25 +9,18 @@
import { number } from '@storybook/addon-knobs';
import React from 'react';
-import {
- AreaSeries,
- Axis,
- Chart,
- Placement,
- Position,
- ScaleType,
- Settings,
- timeFormatter,
-} from '../../packages/charts/src';
-import { isDefined } from '../../packages/charts/src/utils/common';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Placement, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { isDefined } from '@elastic/charts/src/utils/common';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { getChartRotationKnob, getPlacementKnob, getStickToKnob } from '../utils/knobs';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
export const Example = () => (
-
+
(
fallbackPlacements: [getPlacementKnob('fallback placement', Placement.LeftStart)].filter(isDefined),
offset: number('placement offset', 5),
}}
+ baseTheme={useBaseTheme()}
rotation={getChartRotationKnob()}
/>
(
);
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/3_with_linear.tsx b/storybook/stories/area/3_with_linear.tsx
similarity index 80%
rename from stories/area/3_with_linear.tsx
rename to storybook/stories/area/3_with_linear.tsx
index 1dbb25e0c4..e3fc193e02 100644
--- a/stories/area/3_with_linear.tsx
+++ b/storybook/stories/area/3_with_linear.tsx
@@ -8,15 +8,18 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
export const Example = () => {
const start = KIBANA_METRICS.metrics.kibana_os_load[0].data[0][0];
const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 20).map((d) => [(d[0] - start) / 30000, d[1]]);
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/4_with_log.tsx b/storybook/stories/area/4_with_log.tsx
similarity index 79%
rename from stories/area/4_with_log.tsx
rename to storybook/stories/area/4_with_log.tsx
index 318a7c523d..49902dba0b 100644
--- a/stories/area/4_with_log.tsx
+++ b/storybook/stories/area/4_with_log.tsx
@@ -8,8 +8,10 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, CurveType, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
@@ -17,7 +19,8 @@ const dateFormatter = timeFormatter('HH:mm');
export const Example = () => {
const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.map((d) => (d[1] < 7 ? [d[0], null] : [d[0], d[1] - 10]));
return (
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/5_with_4_axes.tsx b/storybook/stories/area/5_with_4_axes.tsx
similarity index 82%
rename from stories/area/5_with_4_axes.tsx
rename to storybook/stories/area/5_with_4_axes.tsx
index 5988afdc42..4dc7ae67bf 100644
--- a/stories/area/5_with_4_axes.tsx
+++ b/storybook/stories/area/5_with_4_axes.tsx
@@ -8,15 +8,17 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
export const Example = () => (
-
-
+
+
(
);
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/6_with_axis_and_legend.tsx b/storybook/stories/area/6_with_axis_and_legend.tsx
similarity index 80%
rename from stories/area/6_with_axis_and_legend.tsx
rename to storybook/stories/area/6_with_axis_and_legend.tsx
index 2dc67f6dfc..0a927d64ff 100644
--- a/stories/area/6_with_axis_and_legend.tsx
+++ b/storybook/stories/area/6_with_axis_and_legend.tsx
@@ -8,15 +8,17 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
export const Example = () => (
-
-
+
+
(
);
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/7_stacked.tsx b/storybook/stories/area/7_stacked.tsx
similarity index 85%
rename from stories/area/7_stacked.tsx
rename to storybook/stories/area/7_stacked.tsx
index 953ec397ff..3981c5321e 100644
--- a/stories/area/7_stacked.tsx
+++ b/storybook/stories/area/7_stacked.tsx
@@ -8,8 +8,10 @@
import React from 'react';
-import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '../../packages/charts/src';
-import { KIBANA_METRICS } from '../../packages/charts/src/utils/data_samples/test_dataset_kibana';
+import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, timeFormatter } from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { useBaseTheme } from '../../use_base_theme';
import { SB_SOURCE_PANEL } from '../utils/storybook';
const dateFormatter = timeFormatter('HH:mm');
@@ -29,8 +31,8 @@ export const Example = () => {
]);
const allMetrics = [...data3, ...data2, ...data1];
return (
-
-
+
+
{
};
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/8_stacked_percentage.tsx b/storybook/stories/area/8_stacked_percentage.tsx
similarity index 84%
rename from stories/area/8_stacked_percentage.tsx
rename to storybook/stories/area/8_stacked_percentage.tsx
index 1182b54ee6..79a530c5cb 100644
--- a/stories/area/8_stacked_percentage.tsx
+++ b/storybook/stories/area/8_stacked_percentage.tsx
@@ -9,24 +9,17 @@
import { boolean } from '@storybook/addon-knobs';
import React from 'react';
-import {
- AreaSeries,
- Axis,
- Chart,
- niceTimeFormatter,
- Position,
- ScaleType,
- Settings,
- StackMode,
-} from '../../packages/charts/src';
-import DATA from '../../packages/charts/src/utils/data_samples/4_time_series.json';
+import { AreaSeries, Axis, Chart, niceTimeFormatter, Position, ScaleType, Settings, StackMode } from '@elastic/charts';
+import DATA from '@elastic/charts/src/utils/data_samples/4_time_series.json';
+
+import { useBaseTheme } from '../../use_base_theme';
const dataNames = Object.keys(DATA);
export const Example = () => {
const stackedAsPercentage = boolean('stacked as percentage', true);
return (
-
-
+
+
(
-
-
+
+
(
-
-
+
+
(
);
// storybook configuration
-Example.story = {
- parameters: {
- options: { selectedPanel: SB_SOURCE_PANEL },
- },
+Example.parameters = {
+ options: { selectedPanel: SB_SOURCE_PANEL },
};
diff --git a/stories/area/area.stories.tsx b/storybook/stories/area/area.stories.tsx
similarity index 100%
rename from stories/area/area.stories.tsx
rename to storybook/stories/area/area.stories.tsx
diff --git a/stories/axes/10_one_domain_bound.tsx b/storybook/stories/axes/10_one_domain_bound.tsx
similarity index 87%
rename from stories/axes/10_one_domain_bound.tsx
rename to storybook/stories/axes/10_one_domain_bound.tsx
index 71e3c7a3ae..34993c5526 100644
--- a/stories/axes/10_one_domain_bound.tsx
+++ b/storybook/stories/axes/10_one_domain_bound.tsx
@@ -9,7 +9,9 @@
import { number } from '@storybook/addon-knobs';
import React from 'react';
-import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '../../packages/charts/src';
+import { Axis, BarSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
export const Example = () => {
const leftDomain = {
@@ -21,8 +23,8 @@ export const Example = () => {
};
return (
-
-
+
+
{
@@ -46,7 +48,8 @@ export const Example = () => {
);
return (
-
+
+