[legend][scale] add @vx/legend, add additional scales fixes #65

packages/vx-demo/package.json

@@ -27,6 +27,7 @@
     "@vx/group": "0.0.114",
     "@vx/heatmap": "0.0.116",
     "@vx/hierarchy": "0.0.119",
+    "@vx/legend": "1.0.0",
     "@vx/marker": "0.0.119",
     "@vx/mock-data": "0.0.115",
     "@vx/pattern": "0.0.112",
@@ -37,6 +38,7 @@
     "@vx/text": "0.0.114",
     "classnames": "^2.2.5",
     "d3-array": "^1.1.1",
+    "d3-format": "^1.2.0",
     "d3-hierarchy": "^1.1.4",
     "d3-shape": "^1.0.6",
     "d3-time-format": "^2.0.5",

packages/vx-demo/pages/legends.js

@@ -0,0 +1,149 @@
+import {
+  LegendQuantile,
+  LegendLinear,
+  LegendOrdinal,
+  LegendThreshold,
+} from '@vx/legend';
+import {
+  scaleQuantize,
+  scaleLinear,
+  scaleOrdinal,
+  scaleThreshold,
+} from '@vx/scale';
+import { format } from 'd3-format';
+
+const oneDecimalFormat = format('.1f');
+const twoDecimalFormat = format('.2f');
+
+const quantile = scaleQuantize({
+  domain: [0, 0.15],
+  range: [
+    '#feedde', '#fdd0a2', '#fdae6b',
+    '#fd8d3c', '#f16913', '#d94801',
+    '#8c2d04'
+  ]
+});
+
+const linear = scaleLinear({
+  domain: [0, 10],
+  range: ["#0068af", "#c00029"]
+});
+
+const ordinal = scaleOrdinal({
+  domain: ['a', 'b', 'c', 'd'],
+  range: ['#160689', '#a72297', '#f68e44', '#f8e126']
+});
+
+const threshold = scaleThreshold({
+  domain: [0.02, 0.04, 0.06, 0.08, 0.10],
+  range: ["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]
+});
+
+export default () => {
+  return (
+    <div className="chart">
+      <div className="legend">
+        <LegendQuantile
+          scale={quantile}
+          labelFormat={twoDecimalFormat}
+          labelDelimiter='to'
+          direction='row'
+          labelMargin="0 10px 0 2px"
+        />
+      </div>
+      <div className="legend">
+        <LegendQuantile
+          scale={quantile}
+          labelFormat={twoDecimalFormat}
+          shapeMargin='0 0 10px 0'
+          shapeWidth='100%'
+          direction='row-reverse'
+          itemDirection='column'
+        />
+      </div>
+      <div className="legend">
+        <LegendQuantile
+          scale={quantile}
+          labelFormat={twoDecimalFormat}
+          labelDelimiter="to"
+          direction='column-reverse'
+          shapeMargin="0"
+        />
+      </div>
+      <div className="legend">
+        <LegendQuantile
+          scale={quantile}
+          labelFormat={twoDecimalFormat}
+          direction='column'
+          itemDirection='column-reverse'
+          shapeWidth='100%'
+          itemMargin='0 0 6px 0'
+        />
+      </div>
+      <div className="legend">
+        <div className="title">
+          Linear
+        </div>
+        <LegendLinear
+          scale={linear}
+          labelFormat={(d,i) => [0,2,4].includes(i) ? oneDecimalFormat(d) : ''}
+          direction="column"
+          steps={5}
+        />
+      </div>
+      <div className="legend">
+        <div className="title">
+          Ordinal
+        </div>
+        <LegendOrdinal
+          scale={ordinal}
+          direction="row"
+          itemDirection="column"
+          labelMargin="0"
+          shapeMargin="0 0 8px 0"
+          itemMargin="0 4px 0 0"
+        />
+      </div>
+      <div className="legend">
+        <div className="title">
+          Threshold
+        </div>
+        <LegendThreshold
+          scale={threshold}
+          direction='column-reverse'
+          itemDirection='row-reverse'
+          labelFormat={d => !!d ? `${d * 100}%` : ''}
+          labelAlign='flex-end'
+          shapeMargin='0 0 2px 4px'
+        />
+      </div>
+
+      <style jsx>{`
+        .chart {
+          font-family: arial;
+          font-weight: 900;
+        }
+        .chart h2 {
+          margin-left: 10px;
+        }
+        .legend {
+          color: #333;
+          margin: 0 5px 10px;
+          float: left;
+          clear: top;
+          font-size: 10px;
+          font-family: arial;
+          border: 1px solid #efefef;
+          padding: 15px 20px;
+          border-radius: 6px;
+          flex: initial;
+        }
+        .title {
+          font-size: 12px;
+          margin-bottom: 10px;
+          font-weight: 100;
+        }
+      `}</style>
+    </div>
+  );
+}

packages/vx-legend/.babelrc

@@ -0,0 +1,19 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": [],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }],
+        "transform-runtime",
+        "transform-decorators-legacy"
+      ]
+    }
+  }
+}

packages/vx-legend/Makefile

@@ -0,0 +1 @@
+include node_modules/react-fatigue-dev/Makefile

packages/vx-legend/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vx/legend",
+  "version": "1.0.0",
+  "description": "vx legend",
+  "main": "build/index.js",
+  "scripts": {
+    "build": "make build SRC=./src",
+    "prepublish": "make build SRC=./src",
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hshoff/vx.git"
+  },
+  "keywords": [
+    "vx",
+    "react",
+    "d3",
+    "visualizations",
+    "charts"
+  ],
+  "author": "@hshoff",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/hshoff/vx/issues"
+  },
+  "homepage": "https://github.com/hshoff/vx#readme",
+  "devDependencies": {
+    "babel-jest": "^20.0.3",
+    "enzyme": "^2.8.2",
+    "jest": "^20.0.3",
+    "react-addons-test-utils": "^15.5.1",
+    "react-fatigue-dev": "github:tj/react-fatigue-dev",
+    "react-tools": "^0.10.0",
+    "regenerator-runtime": "^0.10.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.10"
+  }
+}

packages/vx-legend/src/index.js

@@ -0,0 +1,5 @@
+export { default as Legend } from './legends/Legend';
+export { default as LegendQuantile } from './legends/Quantile';
+export { default as LegendLinear } from './legends/Linear';
+export { default as LegendOrdinal } from './legends/Ordinal';
+export { default as LegendThreshold } from './legends/Threshold';

packages/vx-legend/src/labels/linear.js

@@ -0,0 +1,21 @@
+export default function labelLinear({
+  scale,
+  steps = 5,
+  labelFormat,
+}) {
+  const domain = scale.domain();
+  const start = domain[0];
+  const end = domain[domain.length - 1];
+  const step = (end - start) / (steps - 1);
+  const data = new Array(steps).fill(1).reduce((acc, cur, i) => {
+    acc.push(start + i * step);
+    return acc;
+  }, []);
+  return data.map((d, i) => {
+    return {
+      extent: [],
+      text: `${labelFormat(d, i)}`,
+      value: scale(d)
+    };
+  });
+}

packages/vx-legend/src/labels/ordinal.js

@@ -0,0 +1,11 @@
+export default function labelOrdinal({
+  scale,
+  labelFormat,
+}) {
+  return scale.domain().map((d, i) => {
+    return {
+      text: `${labelFormat(d, i)}`,
+      value: scale(d)
+    };
+  });
+}

packages/vx-legend/src/labels/quantile.js

@@ -0,0 +1,14 @@
+export default function labelQuantile({
+  scale,
+  labelFormat,
+  labelDelimiter = '',
+}) {
+  return scale.range().map((d, i) => {
+    const [x0, x1] = scale.invertExtent(d);
+    return {
+      extent: [x0, x1],
+      text: `${labelFormat(x0, i)} ${labelDelimiter} ${labelFormat(x1, i)}`,
+      value: scale(x0)
+    };
+  });
+}

packages/vx-legend/src/labels/threshold.js

@@ -0,0 +1,31 @@
+function format( labelFormat, value, i) {
+  return labelFormat(value, i) || '';
+}
+
+export default function labelThreshold({
+  scale,
+  labelFormat,
+  labelDelimiter = 'to',
+  labelLower = 'Less than ',
+  labelUpper = 'More than ',
+}) {
+  return scale.range().map((d, i) => {
+    let [x0, x1] = scale.invertExtent(d);
+    let delimiter = ` ${labelDelimiter} `;
+    let value = x1;
+    if (!x0) {
+      delimiter = labelLower;
+    }
+    if (!x1) {
+      value = x0;
+      x1 = x0;
+      x0 = undefined;
+      delimiter = labelUpper;
+    }
+    return {
+      extent: [x0, x1],
+      text: `${format(labelFormat, x0, i)}${delimiter}${format(labelFormat, x1, i)}`,
+      value: scale(value)
+    };
+  });
+}