Skip to content

Commit

Permalink
fix(css): remove dependency on EUI components and use only EUI styles (
Browse files Browse the repository at this point in the history
…#208)

Remove the dependency on EUI components. The code now use only some sass styles/mixins from EUI library. The compiled code (js and css) is completely free from EUI dependency. All classes are now under .ech prefix. Four css stylesheets are now compiled, two with a reset css and two without, each of them with dark or light theme. lodash is no more a dependency.

BREAKING CHANGE: EUI components are removed from this library. The single chart `style.css` stylesheet is now replaced by a `theme_only_light.css` or `theme_only_dark.css` file that brings in all the required styling for chart, tooltip and legends. `theme_light.css` and `theme_dark.css` styles include also a reset CSS style
  • Loading branch information
markov00 authored Jun 10, 2019
1 parent dd02b52 commit 122fade
Show file tree
Hide file tree
Showing 76 changed files with 1,702 additions and 1,454 deletions.
5 changes: 5 additions & 0 deletions .playground/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@
bottom: 100px;
right: 100px;
}
.chart {
position: relative;
width: 100%;
height: 50%;
}
</style>
</head>
<body>
Expand Down
3 changes: 1 addition & 2 deletions .playground/index.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import '@babel/polyfill';
import '@elastic/eui/dist/eui_theme_light.css';
import React from 'react';
import ReactDOM from 'react-dom';
import '../src/index.scss';
import '../src/theme_light.scss';
import { Playground } from './playgroud';

ReactDOM.render(<Playground />, document.getElementById('root') as HTMLElement);
120 changes: 65 additions & 55 deletions .playground/playgroud.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,61 +16,71 @@ import { KIBANA_METRICS } from '../src/lib/series/utils/test_dataset_kibana';
export class Playground extends React.Component {
render() {
return (
<Chart>
<Settings showLegend={true} legendPosition={Position.Right} rotation={0} />
<Axis
id={getAxisId('timestamp')}
title="timestamp"
position={Position.Bottom}
tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
/>
<Axis
id={getAxisId('count')}
title="count"
position={Position.Left}
tickFormat={(d) => d.toFixed(2)}
/>
<LineSeries
id={getSpecId('dataset A with long title')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('bar series 1')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('bar series 2')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[2].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset D')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset E')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
</Chart>
<>
{this.renderChart(Position.Right)}
{this.renderChart(Position.Bottom)}
</>
);
}
renderChart(legendPosition: Position) {
return (
<div className="chart">
<Chart>
<Settings debug={true} showLegend={true} legendPosition={legendPosition} rotation={0} />
<Axis
id={getAxisId('timestamp')}
title="timestamp"
position={Position.Bottom}
tickFormat={niceTimeFormatter([1555819200000, 1555905600000])}
/>
<Axis
id={getAxisId('count')}
title="count"
position={Position.Left}
tickFormat={(d) => d.toFixed(2)}
/>
<LineSeries
id={getSpecId('dataset A with long title')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset B')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset C')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[2].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset D')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
<LineSeries
id={getSpecId('dataset E')}
xScaleType={ScaleType.Time}
yScaleType={ScaleType.Linear}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data.slice(0, 15)}
xAccessor={0}
yAccessors={[1]}
/>
</Chart>
</div>
);
}
}
2 changes: 1 addition & 1 deletion .playground/webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const path = require('path');
module.exports = {
entry: './index.tsx',
mode: 'development',
output: {
filename: 'bundle.js',
path: __dirname,
Expand Down
4 changes: 1 addition & 3 deletions .storybook/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@ import { withInfo } from '@storybook/addon-info';
import { withKnobs } from '@storybook/addon-knobs';
import { withOptions } from '@storybook/addon-options';
import { addDecorator, configure } from '@storybook/react';
import '../src/index.scss';
import './style.scss';
import { switchTheme } from './theme_service';

switchTheme('light');
import './style.scss';

addDecorator(
withOptions({
Expand Down
7 changes: 4 additions & 3 deletions .storybook/style.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@import '../node_modules/@elastic/eui/src/themes/eui/eui_colors_dark.scss';

.story-chart {
box-sizing: border-box;
background: white;
}
.story-chart-dark {
background: $euiColorEmptyShade;
box-sizing: border-box;
background: #1a1b20;
}
#root {
background-color: blanchedalmond;
Expand All @@ -14,6 +14,7 @@
width: 100%;
height: 400px;
position: relative;
box-sizing: border-box;
}
#story-root + div table {
border: 1px solid gray;
Expand Down
4 changes: 2 additions & 2 deletions .storybook/theme_service.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/* tslint:disable */
// @ts-ignore
import themeDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!@elastic/eui/dist/eui_theme_dark.css';
import themeDark from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_dark.scss';
// @ts-ignore
import themeLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!@elastic/eui/dist/eui_theme_light.css';
import themeLight from '!!style-loader/useable?{attrs:{"nonce":"Pk1rZ1XDlMuYe8ubWV3Lh0BzwrTigJQ="}}!css-loader!sass-loader!../src/theme_light.scss';

export function switchTheme(theme: string) {
switch (theme) {
Expand Down
6 changes: 0 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,6 @@ To install the Elastic Charts into an existing project, use the `yarn` CLI (`npm
yarn add @elastic/charts
```

Note that Elastic Charts itself has some dependencies itself mostly around styles and management of dates and times. If you are installing it into a blank project you will need to install the following with it. You can read more about other ways to [consume Elastic Charts][consuming].

```
yarn add @elastic/eui @elastic/datemath moment
```

## Running Locally

### Node
Expand Down
16 changes: 5 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"cz": "git-cz",
"build:clean": "rm -rf ./dist",
"build:ts": "tsc -p ./tsconfig.json",
"build:sass": "node-sass src/index.scss dist/style.css --output-style compressed",
"build: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": "yarn build:clean && yarn build:ts && yarn build:sass",
"start": "yarn storybook",
"storybook": "start-storybook -p 9001 -c .storybook",
Expand Down Expand Up @@ -50,8 +50,7 @@
"@babel/polyfill": "^7.4.4",
"@commitlint/cli": "^7.5.2",
"@commitlint/config-conventional": "^7.5.0",
"@elastic/datemath": "^5.0.2",
"@elastic/eui": "10.4.1",
"@elastic/eui": "^11.2.1",
"@semantic-release/changelog": "^3.0.2",
"@semantic-release/commit-analyzer": "^6.1.0",
"@semantic-release/git": "^7.0.8",
Expand Down Expand Up @@ -80,6 +79,7 @@
"@types/storybook__addon-knobs": "^4.0.1",
"@types/storybook__addon-options": "^4.0.1",
"@types/storybook__react": "^4.0.0",
"@types/uuid": "^3.4.4",
"babel-loader": "^8.0.5",
"canvas": "^2.4.1",
"commitizen": "^3.0.7",
Expand All @@ -91,7 +91,6 @@
"husky": "^1.3.1",
"jest": "^24.1.0",
"jest-environment-jsdom-fourteen": "^0.1.0",
"moment": "^2.24.0",
"node-sass": "^4.11.0",
"prettier": "1.16.4",
"prettier-tslint": "^0.4.2",
Expand Down Expand Up @@ -119,7 +118,6 @@
"d3-shape": "^1.3.4",
"fp-ts": "^1.14.2",
"konva": "^2.6.0",
"lodash": "^4.17.11",
"luxon": "^1.11.3",
"mobx": "^4.9.2",
"mobx-react": "^5.4.3",
Expand All @@ -130,12 +128,8 @@
"react-konva": "16.8.3",
"react-spring": "^8.0.8",
"resize-observer-polyfill": "^1.5.1",
"ts-debounce": "^1.0.0"
},
"peerDependencies": {
"@elastic/datemath": "^5.0.2",
"@elastic/eui": "10.4.1",
"moment": "^2.20.1"
"ts-debounce": "^1.0.0",
"uuid": "^3.3.2"
},
"config": {
"commitizen": {
Expand Down
45 changes: 14 additions & 31 deletions src/components/_annotation.scss
Original file line number Diff line number Diff line change
@@ -1,48 +1,31 @@
.elasticChartsAnnotation {
@include euiFontSizeXS;
.echAnnotation {
pointer-events: none;
position: absolute;
z-index: $euiZLevel9;
max-width: $euiSizeXL * 10;
overflow: hidden;
overflow-wrap: break-word;
transition: opacity $euiAnimSpeedNormal;
user-select: none;
}

.elasticChartsAnnotation--hidden, .elasticChartsAnnotation__tooltip--hidden {
.echAnnotation--hidden,
.echAnnotation__tooltip--hidden {
opacity: 0;
}

.elasticChartsAnnotation__tooltip {
@include euiBottomShadow($color: $euiColorFullShade);
.echAnnotation__tooltip {
@include euiToolTipStyle;
@include euiFontSizeXS;
pointer-events: none;
position: absolute;
z-index: $euiZLevel9;
background-color: rgba(tintOrShade($euiColorFullShade, 25%, 80%), 0.9);
color: $euiColorGhost;
border-radius: $euiBorderRadius;
max-width: $euiSizeXL * 10;
overflow: hidden;
overflow-wrap: break-word;
padding: 0;

// overflow: hidden;
transition: opacity $euiAnimSpeedNormal;
pointer-events: none;
user-select: none;
}

.elasticChartsAnnotation__header {
margin: 0;
background: rgba(shade($euiColorGhost, 20%), 0.9);
color: $euiColorFullShade;
padding: 0 8px;
.echAnnotation__header {
@include euiToolTipTitle;
padding: $euiSizeXS ($euiSizeXS * 2);
}

.elasticChartsAnnotation__details {
margin: 0;
padding: 0 8px;
display: flex;
.echAnnotation__details {
padding: $euiSizeXS ($euiSizeXS * 2);
}

.elasticChartsAnnotation__detailsMarker {
margin-right: 4px;
}
5 changes: 0 additions & 5 deletions src/components/_chart.scss

This file was deleted.

15 changes: 15 additions & 0 deletions src/components/_container.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
/**
* The Base Elastic-Charts container
*/

.echContainer {
position: relative;
width: 100%;
height: 100%;

&:hover {
.echLegend__toggle {
opacity: 1;
}
}
}
13 changes: 4 additions & 9 deletions src/components/_crosshair.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
.elasticChartsCrosshair {
.echCrosshair,
.echCrosshair__band,
.echCrosshair__line {
position: absolute;
pointer-events: none;
}

.elasticChartsCrosshair__band {
position: absolute;
pointer-events: none;
}

.elasticChartsCrosshair__line {
position: absolute;
pointer-events: none;
.echCrosshair__line {
z-index: $euiZLevel8;
background: 'transparent';
}
2 changes: 1 addition & 1 deletion src/components/_highlighter.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.elasticChartsHighlighter {
.echHighlighter {
position: absolute;
z-index: 1000;
pointer-events: none;
Expand Down
11 changes: 11 additions & 0 deletions src/components/_index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@import '../../node_modules/@elastic/eui/src/components/tool_tip/variables';
@import '../../node_modules/@elastic/eui/src/components/tool_tip/mixins';

@import 'container';
@import 'annotation';
@import 'crosshair';
@import 'highlighter';
@import 'tooltip';

@import 'icons/index';
@import 'legend/index';
Loading

0 comments on commit 122fade

Please sign in to comment.