Skip to content

Commit

Permalink
Merge pull request #104 from hshoff/harry-fix-oops
Browse files Browse the repository at this point in the history 
[demo] areas == areas, areas != arcs
  • Loading branch information
@hshoff
hshoff authored Jul 18, 2017
2 parents ed6ae94 + 29d74b2 commit 51f2726
Show file tree
Hide file tree
Showing 2 changed files with 266 additions and 257 deletions.
263 changes: 77 additions & 186 deletions packages/vx-demo/pages/arcs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,196 +16,87 @@ export default () => {
title="Arcs"
>
{`import React from 'react';
import { AreaClosed, Line, Bar } from '@vx/shape';
import { appleStock } from '@vx/mock-data';
import { curveMonotoneX } from '@vx/curve';
import { LinearGradient } from '@vx/gradient';
import { GridRows, GridColumns } from '@vx/grid';
import { scaleTime, scaleLinear } from '@vx/scale';
import { withTooltip, Tooltip } from '@vx/tooltip';
import { localPoint } from '@vx/event';
import { extent, max, bisector } from 'd3-array';
import { timeFormat } from 'd3-time-format';
import { Arc } from '@vx/shape';
import { Group } from '@vx/group';
import { GradientPinkBlue } from '@vx/gradient';
import { letterFrequency, browserUsage } from '@vx/mock-data';
const stock = appleStock.slice(800);
const formatDate = timeFormat("%b %d, '%y");
const letters = letterFrequency.slice(0, 4);
const browsers = Object.keys(browserUsage[0])
.filter(k => k !== "date")
.map(k => ({ label: k, usage: browserUsage[0][k] }));
// accessors
const xStock = d => new Date(d.date);
const yStock = d => d.close;
const bisectDate = bisector(d => new Date(d.date)).left;
class Area extends React.Component {
render() {
const {
width,
height,
margin,
showTooltip,
hideTooltip,
tooltipData,
tooltipTop,
tooltipLeft,
events,
} = this.props;
if (width < 10) return null;
// bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;
// scales
const xScale = scaleTime({
range: [0, xMax],
domain: extent(stock, xStock),
});
const yScale = scaleLinear({
range: [yMax, 0],
domain: [0, max(stock, yStock) + yMax / 3],
nice: true,
});
return (
<div>
<svg ref={s => (this.svg = s)} width={width} height={height}>
<rect
x={0}
y={0}
width={width}
height={height}
fill="#32deaa"
rx={14}
/>
<defs>
<linearGradient
id="gradient"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop offset="0%" stopColor="#FFFFFF" stopOpacity={1} />
<stop
offset="100%"
stopColor="#FFFFFF"
stopOpacity={0.2}
/>
</linearGradient>
</defs>
<GridRows
lineStyle={{ pointerEvents: 'none' }}
scale={yScale}
width={xMax}
strokeDasharray="2,2"
stroke="rgba(255,255,255,0.3)"
/>
<GridColumns
lineStyle={{ pointerEvents: 'none' }}
scale={xScale}
height={yMax}
strokeDasharray="2,2"
stroke="rgba(255,255,255,0.3)"
/>
<AreaClosed
data={stock}
xScale={xScale}
yScale={yScale}
x={xStock}
y={yStock}
strokeWidth={1}
stroke={'url(#gradient)'}
fill={'url(#gradient)'}
curve={curveMonotoneX}
/>
<Bar
x={0}
y={0}
width={width}
height={height}
fill="transparent"
rx={14}
data={stock}
onMouseLeave={data => event => hideTooltip()}
onMouseMove={data => event => {
const { x } = localPoint(this.svg, event);
const x0 = xScale.invert(x);
const index = bisectDate(data, x0, 1);
const d0 = data[index - 1];
const d1 = data[index];
let d = d0;
if (d1 && d1.date) {
d =
x0 - xStock(d0.date) > xStock(d1.date) - x0
? d1
: d0;
}
showTooltip({
tooltipData: d,
tooltipLeft: x,
tooltipTop: yScale(d.close),
});
}}
/>
{tooltipData &&
<g>
<Line
from={{ x: tooltipLeft, y: 0 }}
to={{ x: tooltipLeft, y: yMax }}
stroke="rgba(92, 119, 235, 1.000)"
strokeWidth={2}
style={{ pointerEvents: 'none' }}
strokeDasharray="2,2"
/>
<circle
cx={tooltipLeft}
cy={tooltipTop + 1}
r={4}
fill="black"
fillOpacity={0.1}
stroke="black"
strokeOpacity={0.1}
strokeWidth={2}
style={{ pointerEvents: 'none' }}
/>
<circle
cx={tooltipLeft}
cy={tooltipTop}
r={4}
fill="rgba(92, 119, 235, 1.000)"
stroke="white"
strokeWidth={2}
style={{ pointerEvents: 'none' }}
/>
</g>}
</svg>
{tooltipData &&
<div>
<Tooltip
top={tooltipTop - 12}
left={tooltipLeft + 12}
style={{
backgroundColor: 'rgba(92, 119, 235, 1.000)',
color: 'white',
}}
>
{\`\$\${yStock(tooltipData)}\`}
</Tooltip>
<Tooltip
top={yMax - 14}
left={tooltipLeft}
style={{
transform: 'translateX(-50%)',
}}
>
{formatDate(xStock(tooltipData))}
</Tooltip>
</div>}
</div>
);
}
function Label({ x, y, children }) {
return (
<text
fill="white"
textAnchor="middle"
x={x}
y={y}
dy=".33em"
fontSize={9}
>
{children}
</text>
);
}
export default withTooltip(Area);`}
export default ({
width,
height,
events = false,
margin = {
top: 30,
left: 20,
right: 20,
bottom: 110,
}
}) => {
if (width < 10) return null;
const radius = Math.min(width, height) / 2;
return (
<svg width={width} height={height}>
<GradientPinkBlue id="gradients" />
<rect
x={0}
y={0}
rx={14}
width={width}
height={height}
fill="url('#gradients')"
/>
<Group top={height / 2 - margin.top} left={width / 2}>
<Arc
data={browsers}
pieValue={d => d.usage}
outerRadius={radius - 80}
innerRadius={radius - 120}
fill="white"
fillOpacity={d => 1 / (d.index + 2) }
cornerRadius={3}
padAngle={0}
centroid={(centroid, arc) => {
const [x, y] = centroid;
const { startAngle, endAngle } = arc;
if (endAngle - startAngle < .1) return null;
return <Label x={x} y={y}>{arc.data.label}</Label>;
}}
/>
<Arc
data={letters}
pieValue={d => d.frequency}
outerRadius={radius - 135}
fill="black"
fillOpacity={d => 1 / (d.index + 2) }
centroid={(centroid, arc) => {
const [x, y] = centroid;
return <Label x={x} y={y}>{arc.data.letter}</Label>;
}}
/>
</Group>
</svg>
);
}`}
</Show>
);
};
Loading

0 comments on commit 51f2726

Please sign in to comment.