Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[axis] export orientation constants. fixes #79 #80

Merged
merged 1 commit into from
Jun 30, 2017
Merged

[axis] export orientation constants. fixes #79 #80

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/vx-axis/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@ export { default as AxisLeft } from './axis/AxisLeft';
export { default as AxisRight } from './axis/AxisRight';
export { default as AxisTop } from './axis/AxisTop';
export { default as AxisBottom } from './axis/AxisBottom';
export { default as Orientation } from './constants/orientation';
19 changes: 19 additions & 0 deletions packages/vx-axis/test/Orientation.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { Orientation } from '../src';

describe('Orientation', () => {
test('it should be defined', () => {
expect(Orientation).toBeDefined();
});
test('top should be defined', () => {
expect(Orientation.top).toBeDefined();
});
test('left should be defined', () => {
expect(Orientation.left).toBeDefined();
});
test('right should be defined', () => {
expect(Orientation.right).toBeDefined();
});
test('bottom should be defined', () => {
expect(Orientation.bottom).toBeDefined();
});
});
24 changes: 12 additions & 12 deletions packages/vx-demo/components/gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,13 +448,13 @@ export default class Gallery extends React.Component {
<Link prefetch href="/legends">
<div
className="gallery-item"
style={{ background: 'white' }}
style={{ backgroundColor: 'black' }}
ref={d => this.nodes.add(d)}
>
<div className="image">
<Legends />
</div>
<div className="details" style={{ color: '#333' }}>
<div className="details" style={{ color: '#494949' }}>
<div className="title">Legends</div>
<div className="description">
<pre>{`<Legend />`}</pre>
Expand All @@ -463,22 +463,22 @@ export default class Gallery extends React.Component {
</div>
</Link>
</Tilt>
<Tilt
className="tilt"
options={{ max: 8, scale: 1 }}
>
<Tilt className="tilt" options={{ max: 8, scale: 1 }}>
<Link prefetch href="/voronoi">
<div
className="gallery-item"
ref={d => this.nodes.add(d)}
>
<div className="image">
<Voronoi
width={t16[0]}
height={t16[1]}
/>
<div
className="image"
style={{
backgroundColor: '#eb6d88',
borderRadius: 14,
}}
>
<Voronoi width={t16[0]} height={t16[1]} />
</div>
<div className="details" style={{ color: '#F54EA2'}}>
<div className="details" style={{ color: '#F54EA2' }}>
<div className="title">Voronoi</div>
<div className="description">
<pre>{`<Voronoi.VoronoiPolygon /> `}</pre>
Expand Down
199 changes: 108 additions & 91 deletions packages/vx-demo/components/tiles/legends.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,22 @@ const twoDecimalFormat = format('.2f');

const quantile = scaleQuantize({
domain: [0, 0.15],
range: ['#fdd0a2', '#fdae6b', '#fd8d3c', '#f16913', '#d94801'],
range: ['#eb4d70', '#f19938', '#6ce18b', '#78f6ef', '#9096f8'],
});

const linear = scaleLinear({
domain: [0, 10],
range: ['#0068af', '#c00029'],
range: ['#ed4fbb', '#e9a039'],
});

const ordinalColor = scaleOrdinal({
domain: ['a', 'b', 'c', 'd'],
range: ['#160689', '#a72297', '#f68e44', '#f8e126'].reverse(),
range: ['#7d81f6', '#4899f1', '#71f5ef', '#66d981'].reverse(),
});

const ordinalColor2 = scaleOrdinal({
domain: ['a', 'b', 'c', 'd'],
range: ['#8386f7', '#e64357', '#f29b38', '#fae856'].reverse(),
});

const ordinalShape = scaleOrdinal({
Expand Down Expand Up @@ -84,6 +89,11 @@ const sizeOpacity = scaleLinear({
range: [0.4, 1],
});

const sizeColor = scaleLinear({
domain: [0, 10],
range: ['#75fcfc', '#3236b8'],
});

function LegendDemo({ title, children }) {
return (
<div className="legend">
Expand All @@ -92,16 +102,14 @@ function LegendDemo({ title, children }) {
<style jsx>{`
.legend {
line-height: .9em;
color: #333;
margin: 0 5px 10px;
float: left;
clear: top;
color: #efefef;
font-size: 10px;
font-family: arial;
border: 1px solid #efefef;
padding: 10px;
border-radius: 6px;
flex: initial;
padding: 10px 10px;
float: left;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
margin: 5px 5px;
}
.title {
font-size: 12px;
Expand All @@ -117,91 +125,100 @@ export default ({ width, height, margin }) => {
if (width < 10) return null;
return (
<div className="chart">
<div>
<LegendDemo title="Size">
<LegendSize
itemMargin="0"
shapeMargin="5px 0"
itemDirection="column"
scale={size}
shapeStyle={props => {
return {
fill: '#b2212b',
fillOpacity: sizeOpacity(props.datum),
};
}}
shape={props => {
const { size } = props;
return (
<svg width={size} height={size}>
<rect {...props} width={size} height={size} />
</svg>
);
}}
/>
</LegendDemo>
<LegendDemo title="Quantile">
<LegendQuantile shape="circle" scale={quantile} />
</LegendDemo>
<LegendDemo title="Linear">
<LegendLinear
shape="circle"
scale={linear}
labelFormat={(d, i) => {
if (i % 2 === 0) return oneDecimalFormat(d);
return '';
}}
/>
</LegendDemo>
<LegendDemo title="Threshold">
<LegendThreshold
direction="column-reverse"
itemDirection="row-reverse"
labelMargin="0 20px 0 0"
shapeMargin="1px 0 0"
scale={threshold}
/>
</LegendDemo>
<LegendDemo title="Ordinal">
<LegendOrdinal
direction="column"
scale={ordinalColor}
shape="rect"
fill={({ datum }) => ordinalColor(datum)}
labelFormat={label => `Type ${label.toUpperCase()}`}
/>
</LegendDemo>
<LegendDemo title="Custom Legend">
<Legend
direction="row"
itemDirection="column"
labelMargin="0"
shapeMargin="0 0 8px 0"
itemMargin="0 4px 0 0"
scale={ordinalShape}
fill={({ datum }) => ordinalColor(datum)}
shape={props => {
return (
<svg width={props.width} height={props.height}>
{React.createElement(
ordinalShape(props.label.datum),
{
...props,
},
)}
</svg>
);
}}
/>
</LegendDemo>
</div>
<LegendDemo title="Size">
<LegendSize
itemMargin="0"
shapeMargin="5px 0"
itemDirection="row"
scale={size}
shapeStyle={props => {
return {
fill: sizeColor(props.datum),
};
}}
shape={props => {
const { size } = props;
return (
<svg width={size} height={size}>
<circle
{...props}
r={size / 2}
cx={size / 2}
cy={size / 2}
/>
</svg>
);
}}
/>
</LegendDemo>
<LegendDemo title="Quantile">
<LegendQuantile shape="circle" scale={quantile} />
</LegendDemo>
<LegendDemo title="Linear">
<LegendLinear
shape="circle"
scale={linear}
labelFormat={(d, i) => {
if (i % 2 === 0) return oneDecimalFormat(d);
return '';
}}
/>
</LegendDemo>
<LegendDemo title="Threshold">
<LegendThreshold
direction="column-reverse"
itemDirection="row"
labelMargin="2px 0 0 10px"
shapeMargin="1px 0 0"
scale={threshold}
/>
</LegendDemo>
<LegendDemo title="Ordinal">
<LegendOrdinal
direction="row"
itemDirection="row"
shapeMargin="0"
labelMargin="0 0 0 4px"
itemMargin="0 5px"
scale={ordinalColor}
shape="rect"
fill={({ datum }) => ordinalColor(datum)}
labelFormat={label => `${label.toUpperCase()}`}
/>
</LegendDemo>
<LegendDemo title="Custom Legend">
<Legend
direction="row"
itemDirection="column"
labelMargin="0"
shapeMargin="0 0 8px 0"
itemMargin="0 4px 0 0"
scale={ordinalShape}
fill={({ datum }) => ordinalColor2(datum)}
shape={props => {
return (
<svg width={props.width} height={props.height}>
{React.createElement(
ordinalShape(props.label.datum),
{
...props,
},
)}
</svg>
);
}}
/>
</LegendDemo>

<style jsx>{`
.chart {
font-family: arial;
font-weight: 900;
display: flex;
flex-direction: column;
background-color: black;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
padding: 20px 20px 20px 28px;
overflow-y: auto;
}
.chart h2 {
margin-left: 10px;
Expand Down
25 changes: 13 additions & 12 deletions packages/vx-demo/components/tiles/voronoi.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@ export default ({
top: 0,
left: 0,
right: 0,
bottom: 80,
bottom: 70,
},
}) => {
if (width < 10) return <div />;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;

Expand Down Expand Up @@ -48,29 +49,29 @@ export default ({
left={margin.left}
clipPath="url(#voronoi_clip)"
>
{polygons.map((polygon) => (
{polygons.map(polygon =>
<VoronoiPolygon
key={`polygon-${polygon.data.id}`}
polygon={polygon}
fill={(d) => (
d.id.toLowerCase() <= 'a' ?
'url(#voronoi_orange_red)' : 'url(#voronoi_pink_red)'
)}
fill={d =>
d.id.toLowerCase() <= 'a'
? 'url(#voronoi_orange_red)'
: 'url(#voronoi_pink_red)'}
stroke="#fff"
strokeWidth={1}
/>
))}
{data.map((d) => (
/>,
)}
{data.map(d =>
<circle
key={`circle-${d.id}`}
r={2}
cx={d.x}
cy={d.y}
fill="#ffffff"
fillOpacity={0.2}
/>
))}
/>,
)}
</Group>
</svg>
);
}
};
Loading