Skip to content

Commit

Permalink
deps(root): bump yarn.lock, add @types/webpack
Browse files Browse the repository at this point in the history
  • Loading branch information
@hshoff
hshoff committed Jun 3, 2020
1 parent 5c6cdf8 commit 62c88a3
Show file tree
Hide file tree
Showing 3 changed files with 3,825 additions and 3,573 deletions.
19 changes: 15 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"@types/jest": "^24.0.18",
"@types/jsdom": "^12.2.4",
"@types/react-test-renderer": "^16.9.0",
"@types/webpack": "^4.41.17",
"coveralls": "^3.0.6",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
Expand Down Expand Up @@ -146,10 +147,20 @@
{
"files": "./packages/vx-demo/**",
"rules": {
"@typescript-eslint/no-explicit-any": ["warn", { "fixToUnknown": false }],
"import/no-unresolved": ["error", {
"ignore": ["^!!raw-loader!.*"]
}],
"@typescript-eslint/no-explicit-any": [
"warn",
{
"fixToUnknown": false
}
],
"import/no-unresolved": [
"error",
{
"ignore": [
"^!!raw-loader!.*"
]
}
],
"import/no-webpack-loader-syntax": "off",
"jsx-a11y/anchor-is-valid": "off",
"jsx-a11y/label-has-associated-control": "off",
Expand Down
203 changes: 121 additions & 82 deletions packages/vx-demo/src/sandboxes/vx-shape-pie/Example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import React, { useState } from 'react';
import Pie, { ProvidedProps, PieArcDatum } from '@vx/shape/lib/shapes/Pie';
import { scaleOrdinal } from '@vx/scale';
import { Group } from '@vx/group';
import { GradientPinkBlue } from '@vx/gradient';
import letterFrequency, { LetterFrequency } from '@vx/mock-data/lib/mocks/letterFrequency';
import browserUsage, { BrowserUsage as Browsers } from '@vx/mock-data/lib/mocks/browserUsage';
import { animated, useTransition, interpolate } from 'react-spring';
import React, { useState } from "react";
import Pie, { ProvidedProps, PieArcDatum } from "@vx/shape/lib/shapes/Pie";
import { scaleOrdinal } from "@vx/scale";
import { Group } from "@vx/group";
import { GradientPinkBlue } from "@vx/gradient";
import letterFrequency, {
LetterFrequency,
} from "@vx/mock-data/lib/mocks/letterFrequency";
import browserUsage, {
BrowserUsage as Browsers,
} from "@vx/mock-data/lib/mocks/browserUsage";
import { animated, useTransition, interpolate } from "react-spring";

// data and types
type BrowserNames = keyof Browsers;
Expand All @@ -16,8 +20,10 @@ interface BrowserUsage {
}

const letters: LetterFrequency[] = letterFrequency.slice(0, 4);
const browserNames = Object.keys(browserUsage[0]).filter(k => k !== 'date') as BrowserNames[];
const browsers: BrowserUsage[] = browserNames.map(name => ({
const browserNames = Object.keys(browserUsage[0]).filter(
(k) => k !== "date"
) as BrowserNames[];
const browsers: BrowserUsage[] = browserNames.map((name) => ({
label: name,
usage: Number(browserUsage[0][name]),
}));
Expand All @@ -30,18 +36,23 @@ const frequency = (d: LetterFrequency) => d.frequency;
const getBrowserColor = scaleOrdinal({
domain: browserNames,
range: [
'rgba(255,255,255,0.7)',
'rgba(255,255,255,0.6)',
'rgba(255,255,255,0.5)',
'rgba(255,255,255,0.4)',
'rgba(255,255,255,0.3)',
'rgba(255,255,255,0.2)',
'rgba(255,255,255,0.1)',
"rgba(255,255,255,0.7)",
"rgba(255,255,255,0.6)",
"rgba(255,255,255,0.5)",
"rgba(255,255,255,0.4)",
"rgba(255,255,255,0.3)",
"rgba(255,255,255,0.2)",
"rgba(255,255,255,0.1)",
],
});
const getLetterFrequencyColor = scaleOrdinal({
domain: letters.map(l => l.letter),
range: ['rgba(93,30,91,1)', 'rgba(93,30,91,0.8)', 'rgba(93,30,91,0.6)', 'rgba(93,30,91,0.4)'],
domain: letters.map((l) => l.letter),
range: [
"rgba(93,30,91,1)",
"rgba(93,30,91,0.8)",
"rgba(93,30,91,0.6)",
"rgba(93,30,91,0.4)",
],
});

const defaultMargin = { top: 20, right: 20, bottom: 20, left: 20 };
Expand All @@ -60,7 +71,9 @@ export default function Example({
animate = true,
}: PieProps) {
const [selectedBrowser, setSelectedBrowser] = useState<string | null>(null);
const [selectedAlphabetLetter, setSelectedAlphabetLetter] = useState<string | null>(null);
const [selectedAlphabetLetter, setSelectedAlphabetLetter] = useState<
string | null
>(null);

if (width < 10) return null;

Expand All @@ -74,53 +87,68 @@ export default function Example({
return (
<svg width={width} height={height}>
<GradientPinkBlue id="vx-pie-gradient" />
<rect rx={14} width={width} height={height} fill="url('#vx-pie-gradient')" />
<rect
rx={14}
width={width}
height={height}
fill="url('#vx-pie-gradient')"
/>
<Group top={centerY + margin.top} left={centerX + margin.left}>
<Pie
data={
selectedBrowser ? browsers.filter(({ label }) => label === selectedBrowser) : browsers
selectedBrowser
? browsers.filter(({ label }) => label === selectedBrowser)
: browsers
}
pieValue={usage}
outerRadius={radius}
innerRadius={radius - donutThickness}
cornerRadius={3}
padAngle={0.005}
>
{pie => (
{(pie) => (
<AnimatedPie<BrowserUsage>
{...pie}
animate={animate}
getKey={arc => arc.data.label}
getKey={(arc) => arc.data.label}
onClickDatum={({ data: { label } }) =>
animate &&
setSelectedBrowser(selectedBrowser && selectedBrowser === label ? null : label)
setSelectedBrowser(
selectedBrowser && selectedBrowser === label ? null : label
)
}
getColor={arc => getBrowserColor(arc.data.label)}
getColor={(arc) => getBrowserColor(arc.data.label)}
/>
)}
</Pie>
<Pie
data={
selectedAlphabetLetter
? letters.filter(({ letter }) => letter === selectedAlphabetLetter)
? letters.filter(
({ letter }) => letter === selectedAlphabetLetter
)
: letters
}
pieValue={frequency}
pieSortValues={() => -1}
outerRadius={radius - donutThickness * 1.3}
>
{pie => (
{(pie) => (
<AnimatedPie<LetterFrequency>
{...pie}
animate={animate}
getKey={({ data: { letter } }) => letter}
onClickDatum={({ data: { letter } }) =>
animate &&
setSelectedAlphabetLetter(
selectedAlphabetLetter && selectedAlphabetLetter === letter ? null : letter,
selectedAlphabetLetter && selectedAlphabetLetter === letter
? null
: letter
)
}
getColor={({ data: { letter } }) => getLetterFrequencyColor(letter)}
getColor={({ data: { letter } }) =>
getLetterFrequencyColor(letter)
}
/>
)}
</Pie>
Expand Down Expand Up @@ -173,57 +201,68 @@ function AnimatedPie<Datum>({
getColor,
onClickDatum,
}: AnimatedPieProps<Datum>) {
// @ts-ignore react-spring doesn't like this overload
return useTransition<PieArcDatum<Datum>, AnimatedStyles>(arcs, getKey, {
from: animate ? fromLeaveTransition : enterUpdateTransition,
enter: enterUpdateTransition,
update: enterUpdateTransition,
leave: animate ? fromLeaveTransition : enterUpdateTransition,
}).map(
({
item: arc,
props,
key,
}: {
item: PieArcDatum<Datum>;
props: AnimatedStyles;
key: string;
}) => {
const [centroidX, centroidY] = path.centroid(arc);
const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;

return (
<g key={key}>
<animated.path
// compute interpolated path d attribute from intermediate angle values
d={interpolate([props.startAngle, props.endAngle], (startAngle, endAngle) =>
path({
...arc,
startAngle,
endAngle,
}),
)}
fill={getColor(arc)}
onClick={() => onClickDatum(arc)}
onTouchStart={() => onClickDatum(arc)}
/>
{hasSpaceForLabel && (
<animated.g style={{ opacity: props.opacity }}>
<text
fill="white"
x={centroidX}
y={centroidY}
dy=".33em"
fontSize={9}
textAnchor="middle"
pointerEvents="none"
>
{getKey(arc)}
</text>
</animated.g>
)}
</g>
);
},
const transitions = useTransition<PieArcDatum<Datum>, AnimatedStyles>(
arcs,
getKey,
// @ts-ignore react-spring doesn't like this overload
{
from: animate ? fromLeaveTransition : enterUpdateTransition,
enter: enterUpdateTransition,
update: enterUpdateTransition,
leave: animate ? fromLeaveTransition : enterUpdateTransition,
}
);
return (
<>
{transitions.map(
({
item: arc,
props,
key,
}: {
item: PieArcDatum<Datum>;
props: AnimatedStyles;
key: string;
}) => {
const [centroidX, centroidY] = path.centroid(arc);
const hasSpaceForLabel = arc.endAngle - arc.startAngle >= 0.1;

return (
<g key={key}>
<animated.path
// compute interpolated path d attribute from intermediate angle values
d={interpolate(
[props.startAngle, props.endAngle],
(startAngle, endAngle) =>
path({
...arc,
startAngle,
endAngle,
})
)}
fill={getColor(arc)}
onClick={() => onClickDatum(arc)}
onTouchStart={() => onClickDatum(arc)}
/>
{hasSpaceForLabel && (
<animated.g style={{ opacity: props.opacity }}>
<text
fill="white"
x={centroidX}
y={centroidY}
dy=".33em"
fontSize={9}
textAnchor="middle"
pointerEvents="none"
>
{getKey(arc)}
</text>
</animated.g>
)}
</g>
);
}
)}
</>
);
}
Loading

0 comments on commit 62c88a3

Please sign in to comment.