Merge 6bcd74d into 474ec7e

packages/vx-demo/src/components/Gallery/SplitLinePathTile.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import SplitLinePath, {
+  SplitLinePathProps,
+  backgroundLight,
+} from '../../sandboxes/vx-shape-splitlinepath/Example';
+import GalleryTile from '../GalleryTile';
+
+export { default as packageJson } from '../../sandboxes/vx-area/package.json';
+
+const tileStyles = { background: backgroundLight };
+const detailsStyles = { color: 'white' };
+
+export default function SplitLinePathTile() {
+  return (
+    <GalleryTile<SplitLinePathProps>
+      title="SplitLinePath"
+      description="<Shape.SplitLinePath />"
+      exampleRenderer={SplitLinePath}
+      exampleUrl="/splitlinepath"
+      tileStyles={tileStyles}
+      detailsStyles={detailsStyles}
+      detailsHeight={0}
+    />
+  );
+}

packages/vx-demo/src/components/Gallery/index.tsx

@@ -33,6 +33,7 @@ import * as PiesTile from './PiesTile';
 import * as PolygonsTile from './PolygonsTile';
 import * as RadarTile from './RadarTile';
 import * as ResponsiveTile from './ResponsiveTile';
+import * as SplitLinePathTile from './SplitLinePathTile';
 import * as StackedAreasTile from './StackedAreasTile';
 import * as StatsPlotTile from './StatsPlotTile';
 import * as StreamGraphTile from './StreamGraphTile';
@@ -80,6 +81,7 @@ const tiles = [
   PolygonsTile,
   RadarTile,
   ResponsiveTile,
+  SplitLinePathTile,
   StackedAreasTile,
   StatsPlotTile,
   StreamGraphTile,

packages/vx-demo/src/pages/splitlinepath.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Show from '../components/Show';
+import SplitLinePath from '../sandboxes/vx-shape-splitlinepath/Example';
+import StatsPlotSource from '!!raw-loader!../sandboxes/vx-shape-splitlinepath/Example';
+import packageJson from '../sandboxes/vx-shape-splitlinepath/package.json';
+
+export default () => (
+  <Show
+    events
+    component={SplitLinePath}
+    title="SplitLinePath"
+    codeSandboxDirectoryName="vx-shape-splitlinepath"
+    packageJson={packageJson}
+  >
+    {StatsPlotSource}
+  </Show>
+);

packages/vx-demo/src/sandboxes/exampleToVxDependencyLookup.ts

@@ -27,6 +27,7 @@ import radarPackageJson from './vx-radar/package.json';
 import responsivePackageJson from './vx-responsive/package.json';
 import lineRadialPackageJson from './vx-shape-line-radial/package.json';
 import piePackageJson from './vx-shape-pie/package.json';
+import splitLinePathPackageJson from './vx-shape-splitlinepath/package.json';
 import stackedAreasPackageJson from './vx-stacked-areas/package.json';
 import statsPackageJson from './vx-stats/package.json';
 import streamgraphPackageJson from './vx-streamgraph/package.json';
@@ -43,33 +44,34 @@ import { VxPackage } from '../types';
 const examples = [
   areaPackageJson,
   axisPackageJson,
-  bargroupPackageJson,
   bargroupHorizontalPackageJson,
+  bargroupPackageJson,
   barsPackageJson,
-  barstackPackageJson,
   barstackHorizontalPackageJson,
+  barstackPackageJson,
   brushPackageJson,
   chordPackageJson,
   curvePackageJson,
   dendrogramPackageJson,
   dotsPackageJson,
-  dragIPackageJson,
   dragIIPackageJson,
+  dragIPackageJson,
   geoCustomPackageJson,
   geoMercatorPackageJson,
   glyphPackageJson,
   gradientPackageJson,
   heatmapPackageJson,
   legendPackageJson,
+  lineRadialPackageJson,
   linktypesPackageJson,
   networkPackageJson,
   packPackageJson,
   patternPackageJson,
+  piePackageJson,
   polygonsPackageJson,
   radarPackageJson,
   responsivePackageJson,
-  lineRadialPackageJson,
-  piePackageJson,
+  splitLinePathPackageJson,
   stackedAreasPackageJson,
   statsPackageJson,
   streamgraphPackageJson,

packages/vx-demo/src/sandboxes/vx-shape-splitlinepath/Example.tsx

@@ -0,0 +1,127 @@
+import React, { useMemo } from 'react';
+import { scaleLinear } from '@vx/scale';
+import { curveCardinal } from '@vx/curve';
+import { LinePath, SplitLinePath } from '@vx/shape';
+import { LinearGradient } from '@vx/gradient';
+
+import generateSinPoints from './generateSinPoints';
+
+type Point = { x: number; y: number };
+const getX = (d: Point) => d.x;
+const getY = (d: Point) => d.y;
+export const background = '#045275';
+export const backgroundLight = '#089099';
+export const foreground = '#b7e6a5';
+
+export type SplitLinePathProps = {
+  width: number;
+  height: number;
+  margin?: { top: number; right: number; bottom: number; left: number };
+  numberOfWaves?: number;
+  pointsPerWave?: number;
+  numberOfSegments?: number;
+};
+
+export default function SplitPath({
+  width,
+  height,
+  numberOfWaves = 10,
+  pointsPerWave = 100,
+  numberOfSegments = 8,
+}: SplitLinePathProps) {
+  const data = useMemo(() => generateSinPoints({ width, height, numberOfWaves, pointsPerWave }), [
+    width,
+    height,
+    numberOfWaves,
+    pointsPerWave,
+  ]);
+
+  const dividedData = useMemo(() => {
+    const segmentLength = Math.floor(data.length / numberOfSegments);
+    return new Array(numberOfSegments)
+      .fill(null)
+      .map((_, i) => data.slice(i * segmentLength, (i + 1) * segmentLength));
+  }, [numberOfSegments, data]);
+
+  const getScaledX = useMemo(() => {
+    const xScale = scaleLinear({ range: [0, width], domain: [0, width] });
+    return (d: Point) => xScale(getX(d));
+  }, [width]);
+
+  const getScaledY = useMemo(() => {
+    const yScale = scaleLinear({ range: [0, height], domain: [height, 0] });
+    return (d: Point) => yScale(getY(d));
+  }, [height]);
+
+  return width < 10 ? null : (
+    <div>
+      <svg width={width} height={height}>
+        <LinearGradient
+          id="vx-shape-splitlinepath-gradient"
+          from={background}
+          to={backgroundLight}
+          fromOpacity={0.8}
+          toOpacity={0.8}
+        />
+        <rect
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          fill="url(#vx-shape-splitlinepath-gradient)"
+          rx={14}
+        />
+
+        <g transform={`rotate(${0})translate(${-0}, ${-height * 0.5})`}>
+          <LinePath
+            data={data}
+            x={getScaledX}
+            y={getScaledY}
+            strokeWidth={8}
+            stroke="#fff"
+            strokeOpacity={0.15}
+            curve={curveCardinal}
+          />
+
+          <SplitLinePath
+            segments={dividedData}
+            x={getScaledX}
+            y={getScaledY}
+            curve={curveCardinal}
+            styles={[
+              { stroke: foreground, strokeWidth: 3 },
+              { stroke: '#fff', strokeWidth: 2, strokeDasharray: '9,5' },
+              { stroke: background, strokeWidth: 2 },
+            ]}
+          >
+            {({ segment, styles, index }) =>
+              /** overlay circles to a couple of the segments */
+              index === numberOfSegments - 1 || index === 2 ? (
+                segment.map(({ x, y }, i) =>
+                  i % 8 === 0 ? (
+                    <circle
+                      key={i}
+                      cx={x}
+                      cy={y}
+                      r={10 * (i / segment.length)}
+                      stroke={styles?.stroke}
+                      fill="transparent"
+                      strokeWidth={1}
+                    />
+                  ) : null,
+                )
+              ) : (
+                <LinePath
+                  data={segment}
+                  x={(d: Point) => d.x || 0}
+                  y={(d: Point) => d.y || 0}
+                  {...styles}
+                />
+              )
+            }
+          </SplitLinePath>
+        </g>
+      </svg>
+    </div>
+  );
+}

packages/vx-demo/src/sandboxes/vx-shape-splitlinepath/generateSinPoints.ts

@@ -0,0 +1,33 @@
+/** generates points along a sin wave, with increasing height toward the center.  */
+export default function generateSinPoints({
+  width,
+  height,
+  numberOfWaves = 10,
+  pointsPerWave = 10,
+}: {
+  width: number;
+  height: number;
+  numberOfWaves?: number;
+  pointsPerWave?: number;
+}) {
+  const waveLength = width / numberOfWaves;
+  const distanceBetweenPoints = waveLength / pointsPerWave;
+  const sinPoints: { x: number; y: number }[] = [];
+
+  for (let waveIndex = 0; waveIndex <= numberOfWaves; waveIndex += 1) {
+    const waveDistFromStart = waveIndex * waveLength;
+
+    for (let pointIndex = 0; pointIndex <= pointsPerWave; pointIndex += 1) {
+      const waveXFraction = pointIndex / pointsPerWave;
+      const waveX = pointIndex * distanceBetweenPoints;
+      const globalX = waveDistFromStart + waveX;
+      // scale height based x position
+      const globalXFraction = (width - globalX) / width;
+      const waveHeight = Math.min(globalXFraction, 1 - globalXFraction) * height;
+
+      sinPoints.push({ x: globalX, y: waveHeight * Math.sin(waveXFraction * (2 * Math.PI)) });
+    }
+  }
+
+  return sinPoints;
+}

packages/vx-demo/src/sandboxes/vx-shape-splitlinepath/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from 'react-dom';
+import ParentSize from '@vx/responsive/lib/components/ParentSize';
+
+import Example from './Example';
+import './sandbox-styles.css';
+
+render(
+  <ParentSize>{({ width, height }) => <Example width={width} height={height} />}</ParentSize>,
+  document.getElementById('root'),
+);

packages/vx-demo/src/sandboxes/vx-shape-splitlinepath/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@vx/demo-shape-splitlinepath",
+  "description": "Standalone vx splitlinepath demo.",
+  "main": "index.tsx",
+  "private": true,
+  "dependencies": {
+    "@babel/runtime": "^7.8.4",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "@vx/curve": "latest",
+    "@vx/gradient": "latest",
+    "@vx/responsive": "latest",
+    "@vx/scale": "latest",
+    "@vx/shape": "latest",
+    "react": "^16",
+    "react-dom": "^16",
+    "react-scripts-ts": "3.1.0",
+    "typescript": "^3"
+  },
+  "keywords": [
+    "visualization",
+    "d3",
+    "react",
+    "vx",
+    "splitline"
+  ]
+}

packages/vx-demo/src/sandboxes/vx-shape-splitlinepath/sandbox-styles.css

@@ -0,0 +1,8 @@
+html,
+body,
+#root {
+  height: 100%;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
+    'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 2em;
+}

packages/vx-shape/package.json

@@ -24,13 +24,15 @@
     "@types/classnames": "^2.2.9",
     "@types/d3-path": "^1.0.8",
     "@types/d3-shape": "^1.3.1",
+    "@types/lodash": "^4.14.146",
     "@types/react": "*",
     "@vx/curve": "0.0.198",
     "@vx/group": "0.0.198",
     "@vx/scale": "0.0.198",
     "classnames": "^2.2.5",
     "d3-path": "^1.0.5",
     "d3-shape": "^1.2.0",
+    "lodash": "^4.17.15",
     "prop-types": "^15.5.10"
   },
   "peerDependencies": {

packages/vx-shape/src/index.ts

@@ -45,6 +45,7 @@ export { default as LinkVerticalStep, pathVerticalStep } from './shapes/link/ste
 export { default as LinkRadialStep, pathRadialStep } from './shapes/link/step/LinkRadialStep';
 export { default as Polygon, getPoints, getPoint } from './shapes/Polygon';
 export { default as Circle } from './shapes/Circle';
+export { default as SplitLinePath } from './shapes/SplitLinePath';
 
 // Export factory functions
 export * from './types/D3ShapeConfig';