feat(scales): add ability to reverse linear scale

plouc · Jul 13, 2019 · 2f4ddc4 · 2f4ddc4
1 parent cdaf6fd
commit 2f4ddc4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 5 deletions.
diff --git a/packages/scales/index.d.ts b/packages/scales/index.d.ts
@@ -12,6 +12,7 @@ declare module '@nivo/scales' {
         min?: 'auto' | number
         max?: 'auto' | number
         stacked?: boolean
+        reverse?: boolean
     }
 
     export interface PointScale {

diff --git a/packages/scales/src/linearScale.js b/packages/scales/src/linearScale.js
@@ -10,7 +10,7 @@ import { scaleLinear } from 'd3-scale'
 import PropTypes from 'prop-types'
 
 export const linearScale = (
-    { axis, min = 0, max = 'auto', stacked = false },
+    { axis, min = 0, max = 'auto', stacked = false, reverse = false },
     xy,
     width,
     height
@@ -27,9 +27,10 @@ export const linearScale = (
         maxValue = stacked === true ? values.maxStacked : values.max
     }
 
-    const scale = scaleLinear()
-        .rangeRound(axis === 'x' ? [0, size] : [size, 0])
-        .domain([minValue, maxValue])
+    const scale = scaleLinear().rangeRound(axis === 'x' ? [0, size] : [size, 0])
+
+    if (reverse === true) scale.domain([maxValue, minValue])
+    else scale.domain([minValue, maxValue])
 
     scale.type = 'linear'
     scale.stacked = stacked
@@ -42,4 +43,5 @@ export const linearScalePropTypes = {
     min: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     max: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
     stacked: PropTypes.bool,
+    reverse: PropTypes.bool,
 }
diff --git a/packages/scales/tests/linearScale.test.js b/packages/scales/tests/linearScale.test.js
@@ -51,3 +51,11 @@ it(`should allow to define max value for y axis`, () => {
     expect(scale(0.5)).toBe(75)
     expect(scale(1)).toBe(50)
 })
+
+it(`should allow to reverse domain`, () => {
+    const scale = linearScale({ axis: 'y', reverse: true }, { y: { min: 0, max: 1 } }, 100, 100)
+
+    expect(scale(0)).toBe(0)
+    expect(scale(0.5)).toBe(50)
+    expect(scale(1)).toBe(100)
+})
diff --git a/website/src/data/components/line/defaults.js b/website/src/data/components/line/defaults.js
@@ -23,9 +23,10 @@ export default {
     },
     yScale: {
         type: 'linear',
-        stacked: true,
         min: 'auto',
         max: 'auto',
+        stacked: true,
+        reverse: false,
     },
 
     curve: 'linear',

diff --git a/website/src/pages/swarmplot/canvas.js b/website/src/pages/swarmplot/canvas.js
@@ -25,6 +25,7 @@ const initialProperties = Object.freeze({
         type: 'linear',
         min: 0,
         max: 500,
+        reverse: false,
     },
     size: {
         key: 'volume',

diff --git a/website/src/pages/swarmplot/index.js b/website/src/pages/swarmplot/index.js
@@ -23,6 +23,7 @@ const initialProperties = Object.freeze({
         type: 'linear',
         min: 0,
         max: 500,
+        reverse: false,
     },
     size: {
         key: 'volume',