From c9fc3e2a9eab6a01ee2dea0c5c44c425729e0653 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Thu, 31 Oct 2019 22:01:30 +0100 Subject: [PATCH] fix: clip bar highlighter edges (#447) --- .playground/index.html | 6 +- .playground/playgroud.tsx | 231 +++------------------------------ package.json | 8 +- src/components/highlighter.tsx | 17 ++- yarn.lock | 8 +- 5 files changed, 48 insertions(+), 222 deletions(-) diff --git a/.playground/index.html b/.playground/index.html index f8f02b0f63..43d2782059 100644 --- a/.playground/index.html +++ b/.playground/index.html @@ -17,11 +17,11 @@ } #root { position: absolute; - top: 700px; - left: 800px; + top: 0px; + left: 0px; } .chart { - background: white; + background: black; display: inline-block; position: relative; width: 900px; diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx index 6d0ba39a52..ea6b06dcbe 100644 --- a/.playground/playgroud.tsx +++ b/.playground/playgroud.tsx @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import { Axis, Chart, @@ -6,222 +6,33 @@ import { getSpecId, Position, ScaleType, - Settings, - LineAnnotation, - getAnnotationId, - AnnotationDomainTypes, - RectAnnotation, - Rotation, HistogramBarSeries, + DARK_THEME, + Settings, } from '../src'; import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana'; -import { LoremIpsum } from 'lorem-ipsum'; -const lorem = new LoremIpsum({ - sentencesPerParagraph: { - max: 8, - min: 4, - }, - wordsPerSentence: { - max: 16, - min: 4, - }, -}); -interface State { - showChart1: boolean; - rotation: number; - vAxis: number; - hAxis: number; -} -const ROTATIONS: Rotation[] = [0, 90, -90, 180]; -const RECT_ANNOTATION_TEXT = lorem.generateSentences(3); -export class Playground extends React.Component<{}, State> { - state = { - showChart1: true, - rotation: 0, - vAxis: 0, - hAxis: 0, - }; - rotateChart = (evt: React.MouseEvent) => { - const sense = evt.metaKey ? -1 : 1; - this.setState((prevState) => { - const val = prevState.rotation + sense < 0 ? 4 + sense : prevState.rotation + sense; - return { - rotation: val % 4, - }; - }); - }; - rotateVerticalAxis = () => { - this.setState((prevState) => { - return { - vAxis: (prevState.vAxis + 1) % 2, - }; - }); - }; - rotateHorizontalAxis = () => { - this.setState((prevState) => { - return { - hAxis: (prevState.hAxis + 1) % 2, - }; - }); - }; - removeChart = () => { - this.setState((prevState) => { - return { - showChart1: !prevState.showChart1, - }; - }); - }; +export class Playground extends React.Component { render() { - const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 30); + const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 5); return ( - this.state.showChart1 && ( - -
- - - - -
-
- - - - - - - - - - - - - +
+ + + + - - {/* - */} - - X ANN
} - /> - Y ANN
} - /> - - - - ) + + + ); } } diff --git a/package.json b/package.json index 6c3036e236..7b3da97ee0 100644 --- a/package.json +++ b/package.json @@ -62,10 +62,10 @@ "@semantic-release/github": "^5.4.2", "@semantic-release/npm": "^5.1.13", "@semantic-release/release-notes-generator": "^7.2.1", - "@storybook/addon-actions": "^5.1.9", - "@storybook/addon-info": "^5.1.9", - "@storybook/addon-knobs": "^5.1.9", - "@storybook/react": "^5.1.9", + "@storybook/addon-actions": "5.1.9", + "@storybook/addon-info": "5.1.9", + "@storybook/addon-knobs": "5.1.9", + "@storybook/react": "5.1.9", "@types/classnames": "^2.2.7", "@types/d3-array": "^1.2.6", "@types/d3-collection": "^1.0.8", diff --git a/src/components/highlighter.tsx b/src/components/highlighter.tsx index 5657f7ae43..d19b8997aa 100644 --- a/src/components/highlighter.tsx +++ b/src/components/highlighter.tsx @@ -14,8 +14,15 @@ class HighlighterComponent extends React.Component { const { highlightedGeometries, chartTransform, chartDimensions, chartRotation } = this.props.chartStore!; const left = chartDimensions.left + chartTransform.x; const top = chartDimensions.top + chartTransform.y; + const clipWidth = [90, -90].includes(chartRotation) ? chartDimensions.height : chartDimensions.width; + const clipHeight = [90, -90].includes(chartRotation) ? chartDimensions.width : chartDimensions.height; return ( + + + + + {highlightedGeometries.map((geom, i) => { const { color, x, y } = geom; @@ -33,7 +40,15 @@ class HighlighterComponent extends React.Component { ); } return ( - + ); })} diff --git a/yarn.lock b/yarn.lock index 574ac11e70..bfa3dd42e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2029,7 +2029,7 @@ lodash "^4.17.4" read-pkg-up "^6.0.0" -"@storybook/addon-actions@^5.1.9": +"@storybook/addon-actions@5.1.9": version "5.1.9" resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.1.9.tgz#a515b62b109cb886ccd75ef2f5b12f8c27b43dd3" integrity sha512-h/csHPotBESyEUYlML3yyF2jUlDChB+u3TUNC3Ztzh/x7HzLqy88SL0INSIdY0dCBGx4TK5Gh+rMI7z28Hfdyw== @@ -2049,7 +2049,7 @@ react-inspector "^3.0.2" uuid "^3.3.2" -"@storybook/addon-info@^5.1.9": +"@storybook/addon-info@5.1.9": version "5.1.9" resolved "https://registry.yarnpkg.com/@storybook/addon-info/-/addon-info-5.1.9.tgz#324066b02c7b76bd459d44ad3e6fe5640b7a8781" integrity sha512-KWGhW8kv/VUj4OnWyOmZx/Kq7CzSLGMIXFI6UQY9f6j6QiyShSaOKXgbNIhynjiYHq0hEnfbgUvws2DC9dDFuw== @@ -2070,7 +2070,7 @@ react-lifecycles-compat "^3.0.4" util-deprecate "^1.0.2" -"@storybook/addon-knobs@^5.1.9": +"@storybook/addon-knobs@5.1.9": version "5.1.9" resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.1.9.tgz#74db07fd644b41e63274f8754fbfb18f43d4cf01" integrity sha512-7/bICMYtR9CaTqfZX1kT2pBOTLZo3HxeslyQKWWsWlNElV33Ym2d0PPL5eS36eFxG/ZOp6lQWIFhunNnlmP5xg== @@ -2284,7 +2284,7 @@ pretty-hrtime "^1.0.3" regenerator-runtime "^0.12.1" -"@storybook/react@^5.1.9": +"@storybook/react@5.1.9": version "5.1.9" resolved "https://registry.yarnpkg.com/@storybook/react/-/react-5.1.9.tgz#4052f4b88e91d5a823bb9cbb61104c530fcfb1a1" integrity sha512-Byykpsttf6p2jv3LvqFtntEYfbUZSNTts0TjcZHNsHoUGmT7/M1PyqTeB7JUcYUNwSgdACY8FbowCrwZwDJDWQ==