feat(bar): add ability to use borders with BarCanvas

plouc · Mar 21, 2019 · 4568516 · 4568516
1 parent 9e91f53
commit 4568516
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/conf/rollup.config.js b/conf/rollup.config.js
@@ -4,6 +4,7 @@ import resolve from 'rollup-plugin-node-resolve'
 import stripBanner from 'rollup-plugin-strip-banner'
 
 const pkg = process.env.PACKAGE
+const isWatching = process.env.ROLLUP_WATCH === 'TRUE'
 
 const externals = [
     'prop-types',
@@ -50,26 +51,29 @@ const commonPlugins = [
     }),
 ]
 
-export default [
+const configs = [
     {
         ...common,
         output: {
-            file: `./packages/${pkg}/dist/nivo-${pkg}.cjs.js`,
-            format: 'cjs',
+            file: `./packages/${pkg}/dist/nivo-${pkg}.esm.js`,
+            format: 'esm',
             name: `@nivo/${pkg}`,
         },
         plugins: commonPlugins,
-    },
-    {
+    }
+]
+
+if (!isWatching) {
+    configs.push({
         ...common,
         output: {
-            file: `./packages/${pkg}/dist/nivo-${pkg}.esm.js`,
-            format: 'esm',
+            file: `./packages/${pkg}/dist/nivo-${pkg}.cjs.js`,
+            format: 'cjs',
             name: `@nivo/${pkg}`,
         },
         plugins: commonPlugins,
-    },
-    {
+    })
+    configs.push({
         ...common,
         output: {
             file: `./packages/${pkg}/dist/nivo-${pkg}.umd.js`,
@@ -79,5 +83,7 @@ export default [
             globals: mapGlobal,
         },
         plugins: commonPlugins,
-    },
-]
+    })
+}
+
+export default configs
diff --git a/packages/bar/src/BarCanvas.js b/packages/bar/src/BarCanvas.js
@@ -80,6 +80,8 @@ class BarCanvas extends Component {
 
             theme,
             getColor,
+            borderWidth,
+            getBorderColor,
 
             legends,
 
@@ -186,9 +188,22 @@ class BarCanvas extends Component {
             theme,
         })
 
-        result.bars.forEach(({ x, y, color, width, height }) => {
+        result.bars.forEach(bar => {
+            const { x, y, color, width, height } = bar
+
             this.ctx.fillStyle = color
-            this.ctx.fillRect(x, y, width, height)
+            if (borderWidth > 0) {
+                this.ctx.strokeStyle = getBorderColor(bar)
+                this.ctx.lineWidth = borderWidth
+            }
+
+            this.ctx.beginPath()
+            this.ctx.rect(x, y, width, height)
+            this.ctx.fill()
+
+            if (borderWidth > 0) {
+                this.ctx.stroke()
+            }
         })
     }