feat(vx-marker): add markers

packages/vx-demo/src/sandboxes/vx-curve/Example.tsx

@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
+import { extent, max } from 'd3-array';
 import * as allCurves from '@vx/curve';
 import { Group } from '@vx/group';
 import { LinePath } from '@vx/shape';
-import generateDateValue, { DateValue } from '@vx/mock-data/lib/generators/genDateValue';
 import { scaleTime, scaleLinear } from '@vx/scale';
-import { extent, max } from 'd3-array';
-import { LinearGradient } from '@vx/gradient';
+import { MarkerArrow, MarkerCross, MarkerX, MarkerCircle, MarkerLine } from '@vx/marker';
+import generateDateValue, { DateValue } from '@vx/mock-data/lib/generators/genDateValue';
 
 type CurveType = keyof typeof allCurves;
 
 const curveTypes = Object.keys(allCurves);
-const lineCount = 10;
-const series = new Array(lineCount).fill(null).map(_ => generateDateValue(25));
+const lineCount = 5;
+const series = new Array(lineCount)
+  .fill(null)
+  .map(_ =>
+    generateDateValue(25).sort((a: DateValue, b: DateValue) => a.date.getTime() - b.date.getTime()),
+  );
 const allData = series.reduce((rec, d) => rec.concat(d), []);
 export const gradientColor1 = '#ec4b5f';
 export const gradientColor2 = '#4f0000'; // '#b2305b';
@@ -41,7 +45,7 @@ export default function Example({ width, height, showControls = true }: CurvePro
   const lineHeight = svgHeight / lineCount;
 
   // update scale output ranges
-  xScale.range([0, width]);
+  xScale.range([0, width - 50]);
   yScale.range([lineHeight - 2, 0]);
 
   return (
@@ -71,38 +75,61 @@ export default function Example({ width, height, showControls = true }: CurvePro
         </>
       )}
       <svg width={width} height={svgHeight}>
-        <LinearGradient
-          id="vx-curves-demo"
-          from={gradientColor1}
-          to={gradientColor2}
-          rotate="-45"
+        <MarkerX
+          id="marker-x"
+          stroke="#333"
+          size={22}
+          strokeWidth={4}
+          markerUnits="userSpaceOnUse"
+        />
+        <MarkerCross
+          id="marker-cross"
+          stroke="#333"
+          size={22}
+          strokeWidth={4}
+          strokeOpacity={0.6}
+          markerUnits="userSpaceOnUse"
         />
-        <rect width={width} height={svgHeight} fill="url(#vx-curves-demo)" rx={14} ry={14} />
+        <MarkerCircle id="marker-circle" fill="#333" radius={2} refX={2} />
+        <MarkerArrow id="marker-arrow-odd" stroke="#333" size={8} strokeWidth={1} />
+        <MarkerLine id="marker-line" fill="#333" size={16} strokeWidth={1} />
+        <MarkerArrow id="marker-arrow" fill="#333" refX={2} size={6} />
+        <rect width={width} height={svgHeight} fill="#efefef" rx={14} ry={14} />
         {width > 8 &&
-          series.map((lineData, i) => (
-            <Group key={`lines-${i}`} top={i * lineHeight}>
-              {showPoints &&
-                lineData.map((d, j) => (
-                  <circle
-                    key={i + j}
-                    r={3}
-                    cx={xScale(getX(d))}
-                    cy={yScale(getY(d))}
-                    stroke="rgba(255,255,255,0.5)"
-                    fill="transparent"
-                  />
-                ))}
-              <LinePath<DateValue>
-                curve={allCurves[curveType]}
-                data={lineData}
-                x={d => xScale(getX(d))}
-                y={d => yScale(getY(d))}
-                stroke="#ffffff"
-                strokeWidth={1.5}
-                shapeRendering="geometricPrecision"
-              />
-            </Group>
-          ))}
+          series.map((lineData, i) => {
+            const even = i % 2 === 0;
+            let markerStart = even ? 'url(#marker-cross)' : 'url(#marker-x)';
+            if (i === 1) markerStart = 'url(#marker-line)';
+            const markerEnd = even ? 'url(#marker-arrow)' : 'url(#marker-arrow-odd)';
+            return (
+              <Group key={`lines-${i}`} top={i * lineHeight} left={13}>
+                {showPoints &&
+                  lineData.map((d, j) => (
+                    <circle
+                      key={i + j}
+                      r={3}
+                      cx={xScale(getX(d))}
+                      cy={yScale(getY(d))}
+                      stroke="rgba(33,33,33,0.5)"
+                      fill="transparent"
+                    />
+                  ))}
+                <LinePath<DateValue>
+                  curve={allCurves[curveType]}
+                  data={lineData}
+                  x={d => xScale(getX(d))}
+                  y={d => yScale(getY(d))}
+                  stroke="#333"
+                  strokeWidth={even ? 2 : 1}
+                  strokeOpacity={even ? 0.6 : 1}
+                  shapeRendering="geometricPrecision"
+                  markerMid="url(#marker-circle)"
+                  markerStart={markerStart}
+                  markerEnd={markerEnd}
+                />
+              </Group>
+            );
+          })}
       </svg>
       <style jsx>{`
         .vx-curves-demo label {

packages/vx-demo/src/sandboxes/vx-curve/package.json

@@ -10,6 +10,7 @@
     "@vx/curve": "latest",
     "@vx/gradient": "latest",
     "@vx/group": "latest",
+    "@vx/marker": "latest",
     "@vx/mock-data": "latest",
     "@vx/responsive": "latest",
     "@vx/scale": "latest",

packages/vx-marker/Readme.md

@@ -4,24 +4,8 @@
   <img src="https://img.shields.io/npm/dm/@vx/marker.svg?style=flat-square" />
 </a>
 
-A Marker is a line with a piece of text attached to it. It's great for highlighting locations in
-your graph.
-
-## Example
-
-![marker example](http://i.imgur.com/vbW3Ysa.png)
-
-```js
-<Marker
-  from={markerFrom}
-  to={markerTo}
-  stroke={'white'}
-  label={'deploy'}
-  labelStroke={'none'}
-  labelDx={6}
-  labelDy={15}
-/>
-```
+Markers are graphical objects attached to a <path>, <line>, <polyline>, or <polygon> element.
+[MDN `<marker>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/marker)
 
 ## Installation
 

packages/vx-marker/src/index.ts

@@ -1 +1,6 @@
 export { default as Marker } from './markers/Marker';
+export { default as MarkerArrow } from './markers/Arrow';
+export { default as MarkerCross } from './markers/Cross';
+export { default as MarkerX } from './markers/X';
+export { default as MarkerCircle } from './markers/Circle';
+export { default as MarkerLine } from './markers/Line';

packages/vx-marker/src/markers/Arrow.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerArrow({
+  id,
+  size = 9,
+  strokeWidth = 1,
+  ...restProps
+}: MarkerComponentProps) {
+  const max = size + strokeWidth * 2;
+  const midX = size;
+  const midY = max / 2;
+  const points = `0 0, ${size} ${size / 2}, 0 ${size}`;
+  return (
+    <Marker
+      id={id}
+      markerWidth={max}
+      markerHeight={max}
+      refX={midX}
+      refY={midY}
+      orient="auto"
+      markerUnits="strokeWidth"
+      fill="none"
+      strokeWidth={strokeWidth}
+      {...restProps}
+    >
+      <g transform={`translate(${strokeWidth}, ${strokeWidth})`}>
+        <polyline points={points} />
+      </g>
+    </Marker>
+  );
+}

packages/vx-marker/src/markers/Circle.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerCircle({
+  id,
+  size = 9,
+  strokeWidth = 1,
+  ...restProps
+}: MarkerComponentProps) {
+  const diameter = size * 2;
+  const bounds = diameter + strokeWidth;
+  const mid = bounds / 2;
+  return (
+    <Marker
+      id={id}
+      markerWidth={bounds}
+      markerHeight={bounds}
+      refX={0}
+      refY={mid}
+      orient="auto-start-reverse"
+      markerUnits="strokeWidth"
+      strokeWidth={strokeWidth}
+      {...restProps}
+    >
+      <circle r={size} cx={mid} cy={mid} />
+    </Marker>
+  );
+}

packages/vx-marker/src/markers/Cross.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerCross({
+  id,
+  size = 9,
+  strokeWidth = 1,
+  ...restProps
+}: MarkerComponentProps) {
+  const bounds = size + strokeWidth;
+  const mid = size / 2;
+  const points = `0 ${mid}, ${mid} ${mid}, ${mid} 0, ${mid} ${size}, ${mid} ${mid}, ${size} ${mid}`;
+  return (
+    <Marker
+      id={id}
+      markerWidth={bounds}
+      markerHeight={bounds}
+      refX={mid}
+      refY={mid}
+      orient="auto"
+      markerUnits="strokeWidth"
+      fill="none"
+      strokeWidth={strokeWidth}
+      {...restProps}
+    >
+      <polyline points={points} />
+    </Marker>
+  );
+}

packages/vx-marker/src/markers/Line.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Marker, { MarkerComponentProps } from './Marker';
+
+export default function MarkerLine({
+  id,
+  size = 9,
+  fill,
+  stroke,
+  strokeWidth = 1,
+  ...restProps
+}: MarkerComponentProps) {
+  const max = Math.max(size, strokeWidth * 2);
+  const midX = max / 2;
+  const midY = size / 2;
+  return (
+    <Marker
+      id={id}
+      markerWidth={max}
+      markerHeight={size}
+      refX={midX}
+      refY={midY}
+      orient="auto"
+      markerUnits="strokeWidth"
+      fill={fill || stroke}
+      stroke="none"
+      {...restProps}
+    >
+      <rect width={strokeWidth} height={size} x={midX} />
+    </Marker>
+  );
+}