Skip to content

Commit

Permalink
fix: clip bar highlighter edges (#447)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 authored Oct 31, 2019
1 parent acea2f4 commit c9fc3e2
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 222 deletions.
6 changes: 3 additions & 3 deletions .playground/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
231 changes: 21 additions & 210 deletions .playground/playgroud.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,227 +1,38 @@
import React, { Fragment } from 'react';
import React from 'react';
import {
Axis,
Chart,
getAxisId,
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<HTMLButtonElement, 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 && (
<Fragment>
<div id="controls">
<button onClick={this.removeChart}>remove chart</button>
<button onClick={this.rotateChart}>rotateChart {ROTATIONS[this.state.rotation]}</button>
<button onClick={this.rotateVerticalAxis}>
Axis to {[Position.Left, Position.Right][this.state.vAxis]}
</button>
<button onClick={this.rotateHorizontalAxis}>
Axis to {[Position.Bottom, Position.Top][this.state.hAxis]}
</button>
</div>
<div className="chart">
<Chart>
<Settings rotation={ROTATIONS[this.state.rotation]} />
<Axis id={getAxisId('x')} position={[Position.Bottom, Position.Top][this.state.hAxis]} />
<Axis id={getAxisId('y')} position={[Position.Left, Position.Right][this.state.vAxis]} />

<HistogramBarSeries
id={getSpecId('series bars chart')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={data}
yScaleToDataExtent={true}
/>
<RectAnnotation
annotationId={getAnnotationId('annrec')}
style={{
fill: 'red',
stroke: 'red',
opacity: 0.3,
}}
dataValues={[
{
coordinates: {
x0: data[0][0],
x1: data[10][0],
y0: 14,
},
details: RECT_ANNOTATION_TEXT,
},
]}
/>
</Chart>

<Chart>
<Settings rotation={ROTATIONS[this.state.rotation]} />
<Axis id={getAxisId('x')} position={[Position.Bottom, Position.Top][this.state.hAxis]} />
<Axis id={getAxisId('y')} position={[Position.Left, Position.Right][this.state.vAxis]} />
<div className="chart">
<Chart>
<Settings theme={DARK_THEME} rotation={180} />
<Axis id={getAxisId('x')} position={Position.Bottom} />
<Axis id={getAxisId('y')} position={Position.Left} />

<HistogramBarSeries
id={getSpecId('series bars chart')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={data}
yScaleToDataExtent={true}
/>
{/* <BarSeries
id={getSpecId('series bars char2')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
stackAccessors={[0]}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
yScaleToDataExtent={true}
/>
<BarSeries
id={getSpecId('series bars char3')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
stackAccessors={[0]}
data={KIBANA_METRICS.metrics.kibana_os_load[1].data}
yScaleToDataExtent={true}
/> */}
<RectAnnotation
annotationId={getAnnotationId('annrec')}
style={{
fill: 'red',
stroke: 'red',
opacity: 0.3,
}}
dataValues={[
{
coordinates: {
x0: data[0][0],
x1: data[10][0],
y0: 14,
},
details: RECT_ANNOTATION_TEXT,
},
]}
/>
<LineAnnotation
annotationId={getAnnotationId('annline')}
domainType={AnnotationDomainTypes.XDomain}
dataValues={[
// {
// dataValue: data2[1].x,
// details: 'LINE ANNOTATION long title',
// },
// {
// dataValue: data2[data2.length - 1].x,
// details: 'LINE ANNOTATION',
// },
{
dataValue: data[10][0],
details: 'X DOMAIN ANNOTATION',
},
]}
hideLinesTooltips={false}
marker={<div style={{ width: 40, height: 20, background: 'blue', lineHeight: '20px' }}>X ANN</div>}
/>
<LineAnnotation
annotationId={getAnnotationId('yannline')}
domainType={AnnotationDomainTypes.YDomain}
dataValues={[
// {
// dataValue: 7,
// details: 'LINE ANNOTATION long title',
// },
// {
// dataValue: 6,
// details: 'LINE ANNOTATION',
// },
// {
// dataValue: 7.6,
// details: 'LINE ANNOTATION long title',
// },
{
dataValue: 14,
details: 'Y Annotation',
},
]}
hideLinesTooltips={false}
// marker={<div style={{ width: 40, height: 20, background: 'red', lineHeight: '20px' }}>Y ANN</div>}
/>
</Chart>
</div>
</Fragment>
)
<HistogramBarSeries
id={getSpecId('series bars chart')}
xScaleType={ScaleType.Linear}
yScaleType={ScaleType.Linear}
xAccessor={0}
yAccessors={[1]}
data={data}
yScaleToDataExtent={true}
/>
</Chart>
</div>
);
}
}
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 16 additions & 1 deletion src/components/highlighter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,15 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
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 (
<svg className="echHighlighter">
<defs>
<clipPath id="echHighlighterClipPath">
<rect x="0" y="0" width={clipWidth} height={clipHeight} />
</clipPath>
</defs>
<g transform={`translate(${left}, ${top}) rotate(${chartRotation})`}>
{highlightedGeometries.map((geom, i) => {
const { color, x, y } = geom;
Expand All @@ -33,7 +40,15 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
);
}
return (
<rect key={i} x={x} y={y} width={geom.width} height={geom.height} className="echHighlighter__rect" />
<rect
key={i}
x={x}
y={y}
width={geom.width}
height={geom.height}
className="echHighlighter__rect"
clipPath="url(#echHighlighterClipPath)"
/>
);
})}
</g>
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2029,7 +2029,7 @@
lodash "^4.17.4"
read-pkg-up "^6.0.0"

"@storybook/addon-actions@^5.1.9":
"@storybook/[email protected]":
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==
Expand All @@ -2049,7 +2049,7 @@
react-inspector "^3.0.2"
uuid "^3.3.2"

"@storybook/addon-info@^5.1.9":
"@storybook/[email protected]":
version "5.1.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-info/-/addon-info-5.1.9.tgz#324066b02c7b76bd459d44ad3e6fe5640b7a8781"
integrity sha512-KWGhW8kv/VUj4OnWyOmZx/Kq7CzSLGMIXFI6UQY9f6j6QiyShSaOKXgbNIhynjiYHq0hEnfbgUvws2DC9dDFuw==
Expand All @@ -2070,7 +2070,7 @@
react-lifecycles-compat "^3.0.4"
util-deprecate "^1.0.2"

"@storybook/addon-knobs@^5.1.9":
"@storybook/[email protected]":
version "5.1.9"
resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.1.9.tgz#74db07fd644b41e63274f8754fbfb18f43d4cf01"
integrity sha512-7/bICMYtR9CaTqfZX1kT2pBOTLZo3HxeslyQKWWsWlNElV33Ym2d0PPL5eS36eFxG/ZOp6lQWIFhunNnlmP5xg==
Expand Down Expand Up @@ -2284,7 +2284,7 @@
pretty-hrtime "^1.0.3"
regenerator-runtime "^0.12.1"

"@storybook/react@^5.1.9":
"@storybook/[email protected]":
version "5.1.9"
resolved "https://registry.yarnpkg.com/@storybook/react/-/react-5.1.9.tgz#4052f4b88e91d5a823bb9cbb61104c530fcfb1a1"
integrity sha512-Byykpsttf6p2jv3LvqFtntEYfbUZSNTts0TjcZHNsHoUGmT7/M1PyqTeB7JUcYUNwSgdACY8FbowCrwZwDJDWQ==
Expand Down

0 comments on commit c9fc3e2

Please sign in to comment.