Merge 9c88f3c into 04221d0

airbnb · Jan 7, 2020 · d954a79 · d954a79
2 parents 04221d0 + 9c88f3c
commit d954a79
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 154 deletions.
diff --git a/...ges/vx-demo/src/components/tiles/chord.js → ...es/vx-demo/src/components/tiles/Chord.tsx b/...ges/vx-demo/src/components/tiles/chord.js → ...es/vx-demo/src/components/tiles/Chord.tsx
@@ -4,6 +4,7 @@ import { Group } from '@vx/group';
 import { Chord, Ribbon } from '@vx/chord';
 import { scaleOrdinal } from '@vx/scale';
 import { LinearGradient } from '@vx/gradient';
+import { ShowProvidedProps } from '../../types';
 
 const pink = '#ff2fab';
 const orange = '#ffc62e';
@@ -22,16 +23,21 @@ const matrix = [
   [1013, 990, 940, 6907],
 ];
 
-function descending(a, b) {
+function descending(a: number, b: number): number {
   return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
 }
 
-const color = scaleOrdinal({
+const color = scaleOrdinal<number, string>({
   domain: [0, 1, 2, 3],
   range: ['url(#gpinkorange)', 'url(#gpurplered)', 'url(#gpurplegreen)', 'url(#gbluelime)'],
 });
 
-export default ({ width, height, centerSize = 20, events = false }) => {
+export default ({
+  width,
+  height,
+  centerSize = 20,
+  events = false,
+}: ShowProvidedProps & { centerSize?: number }) => {
   if (width < 10) return null;
 
   const outerRadius = Math.min(width, height) * 0.5 - (centerSize + 10);
@@ -47,41 +53,36 @@ export default ({ width, height, centerSize = 20, events = false }) => {
         <rect width={width} height={height} fill={bg} rx={14} />
         <Group top={height / 2} left={width / 2}>
           <Chord matrix={matrix} padAngle={0.05} sortSubgroups={descending}>
-            {({ chords }) => {
-              return (
-                <g>
-                  {chords.groups.map((group, i) => {
-                    return (
-                      <Arc
-                        key={`key-${i}`}
-                        data={group}
-                        innerRadius={innerRadius}
-                        outerRadius={outerRadius}
-                        fill={color(i)}
-                        onClick={() => {
-                          if (!events) return;
-                          alert(`${JSON.stringify(group)}`);
-                        }}
-                      />
-                    );
-                  })}
-                  {chords.map((chord, i) => {
-                    return (
-                      <Ribbon
-                        key={`ribbon-${i}`}
-                        chord={chord}
-                        radius={innerRadius}
-                        fill={color(chord.target.index)}
-                        fillOpacity={0.75}
-                        onClick={() => {
-                          alert(`${JSON.stringify(chord)}`);
-                        }}
-                      />
-                    );
-                  })}
-                </g>
-              );
-            }}
+            {({ chords }) => (
+              <g>
+                {chords.groups.map((group, i) => (
+                  <Arc
+                    key={`key-${i}`}
+                    data={group}
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    fill={color(i)}
+                    onClick={() => {
+                      if (events) alert(`${JSON.stringify(group)}`);
+                    }}
+                  />
+                ))}
+                {chords.map((chord, i) => {
+                  return (
+                    <Ribbon
+                      key={`ribbon-${i}`}
+                      chord={chord}
+                      radius={innerRadius}
+                      fill={color(chord.target.index)}
+                      fillOpacity={0.75}
+                      onClick={() => {
+                        if (events) alert(`${JSON.stringify(chord)}`);
+                      }}
+                    />
+                  );
+                })}
+              </g>
+            )}
           </Chord>
         </Group>
       </svg>

diff --git a/packages/vx-demo/src/pages/Chord.tsx b/packages/vx-demo/src/pages/Chord.tsx
@@ -0,0 +1,138 @@
+import React from 'react';
+import Show from '../components/Show';
+import Chords from '../components/tiles/Chord';
+
+export default () => {
+  return (
+    <Show
+      component={Chords}
+      title="Chords"
+      margin={{
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      {`import React from 'react';
+import { Arc } from '@vx/shape';
+import { Group } from '@vx/group';
+import { Chord, Ribbon } from '@vx/chord';
+import { scaleOrdinal } from '@vx/scale';
+import { LinearGradient } from '@vx/gradient';
+import { ShowProvidedProps } from '../../types';
+
+const pink = '#ff2fab';
+const orange = '#ffc62e';
+const purple = '#dc04ff';
+const purple2 = '#7324ff';
+const red = '#d04376';
+const green = '#52f091';
+const blue = '#04a6ff';
+const lime = '#00ddc6';
+const bg = '#e4e3d8';
+
+const matrix = [
+  [11975, 5871, 8916, 2868],
+  [1951, 10048, 2060, 6171],
+  [8010, 16145, 8090, 8045],
+  [1013, 990, 940, 6907],
+];
+
+function descending(a: number, b: number): number {
+  return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
+}
+
+const color = scaleOrdinal<number, string>({
+  domain: [0, 1, 2, 3],
+  range: ['url(#gpinkorange)', 'url(#gpurplered)', 'url(#gpurplegreen)', 'url(#gbluelime)'],
+});
+
+export default ({
+  width,
+  height,
+  centerSize = 20,
+  events = false,
+}: ShowProvidedProps & { centerSize?: number }) => {
+  if (width < 10) return null;
+
+  const outerRadius = Math.min(width, height) * 0.5 - (centerSize + 10);
+  const innerRadius = outerRadius - centerSize;
+
+  return (
+    <div className="Chords">
+      <svg width={width} height={height}>
+        <LinearGradient id="gpinkorange" from={pink} to={orange} vertical={false} />
+        <LinearGradient id="gpurplered" from={purple} to={red} vertical={false} />
+        <LinearGradient id="gpurplegreen" from={purple2} to={green} vertical={false} />
+        <LinearGradient id="gbluelime" from={blue} to={lime} vertical={false} />
+        <rect width={width} height={height} fill={bg} rx={14} />
+        <Group top={height / 2} left={width / 2}>
+          <Chord matrix={matrix} padAngle={0.05} sortSubgroups={descending}>
+            {({ chords }) => (
+              <g>
+                {chords.groups.map((group, i) => (
+                  <Arc
+                    key={\`key-\${i}\`}
+                    data={group}
+                    innerRadius={innerRadius}
+                    outerRadius={outerRadius}
+                    fill={color(i)}
+                    onClick={() => {
+                      if (events) alert(\`\${JSON.stringify(group)}\`);
+                    }}
+                  />
+                ))}
+                {chords.map((chord, i) => {
+                  return (
+                    <Ribbon
+                      key={\`ribbon-\${i}\`}
+                      chord={chord}
+                      radius={innerRadius}
+                      fill={color(chord.target.index)}
+                      fillOpacity={0.75}
+                      onClick={() => {
+                        if (events) alert(\`\${JSON.stringify(chord)}\`);
+                      }}
+                    />
+                  );
+                })}
+              </g>
+            )}
+          </Chord>
+        </Group>
+      </svg>
+      <div className="deets">
+        <div>
+          Based on Mike Bostock's <a href="https://bl.ocks.org/mbostock/4062006">Chord Diagram</a>
+        </div>
+      </div>
+
+      <style jsx>{\`
+        .Chords {
+          display: flex;
+          flex-direction: column;
+          user-select: none;
+        }
+
+        svg {
+          margin: 1rem 0;
+          cursor: pointer;
+        }
+
+        .deets {
+          display: flex;
+          flex-direction: row;
+          font-size: 12px;
+        }
+        .deets > div {
+          margin: 0.25rem;
+        }
+      \`}</style>
+    </div>
+  );
+};
+`}
+    </Show>
+  );
+};
diff --git a/packages/vx-demo/src/pages/chord.js b/packages/vx-demo/src/pages/chord.js
diff --git a/packages/vx-legend/src/legends/Ordinal.tsx b/packages/vx-legend/src/legends/Ordinal.tsx
@@ -2,9 +2,15 @@ import React from 'react';
 import Legend, { LegendProps } from './Legend';
 import { ScaleOrdinal } from '../types';
 
-export type LegendOrdinalProps<Output> = LegendProps<string, Output, ScaleOrdinal<string, Output>>;
+export type LegendOrdinalProps<Input extends { toString(): string }, Output> = LegendProps<
+  string,
+  Output,
+  ScaleOrdinal<Input, Output>
+>;
 
 /** Ordinal scales map from strings to an Output type. */
-export default function LegendOrdinal<Output>(props: LegendOrdinalProps<Output>) {
-  return <Legend<string, Output, ScaleOrdinal<string, Output>> {...props} />;
+export default function LegendOrdinal<Input extends { toString(): string }, Output>(
+  props: LegendOrdinalProps<Input, Output>,
+) {
+  return <Legend<string, Output, ScaleOrdinal<Input, Output>> {...props} />;
 }
diff --git a/packages/vx-legend/test/scales.test.tsx b/packages/vx-legend/test/scales.test.tsx
@@ -25,7 +25,7 @@ describe('Legend scales', () => {
   });
 
   it('should render with scaleOrdinal', () => {
-    const ordinalScale = scaleOrdinal<string>({
+    const ordinalScale = scaleOrdinal<string, string>({
       domain: ['a', 'b', 'c', 'd'],
       range: ['#66d981', '#71f5ef', '#4899f1', '#7d81f6'],
     });