feat(canvas): add support for custom font family (#430)

* Support custom font-family setting in Axes * Support custom font-family setting in BubbleCanvas * Support custom font-family setting in HeatmapCanvas * Support custom font-family setting in PieCanvas * Support custom font-family setting in TreeMapCanvas
plouc · Jan 24, 2019 · 11f039e · 11f039e
1 parent a6a120e
commit 11f039e
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 9 deletions.
diff --git a/packages/axes/src/canvas.js b/packages/axes/src/canvas.js
@@ -49,7 +49,8 @@ export const renderAxisToCanvas = (
 
     ctx.textAlign = textAlign
     ctx.textBaseline = textBaseline
-    ctx.font = `${theme.axis.ticks.text.fontSize}px sans-serif`
+    ctx.font = `${theme.axis.ticks.text.fontSize}px ${theme.axis.ticks.text.fontFamily ||
+        'sans-serif'}`
 
     ctx.lineWidth = theme.axis.domain.line.strokeWidth
     ctx.lineCap = 'square'

diff --git a/packages/circle-packing/src/BubbleCanvas.js b/packages/circle-packing/src/BubbleCanvas.js
@@ -89,7 +89,8 @@ class BubbleCanvas extends Component {
         if (enableLabel) {
             this.ctx.textAlign = 'center'
             this.ctx.textBaseline = 'middle'
-            this.ctx.font = `${theme.labels.text.fontSize}px sans-serif`
+            this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily ||
+                'sans-serif'}`
 
             // draw labels on top
             nodes.filter(({ r }) => r > labelSkipRadius).forEach(node => {

diff --git a/packages/heatmap/src/HeatMapCanvas.js b/packages/heatmap/src/HeatMapCanvas.js
@@ -74,9 +74,9 @@ class HeatMapCanvas extends Component {
 
         let renderNode
         if (cellShape === 'rect') {
-            renderNode = partial(renderRect, this.ctx, { enableLabels })
+            renderNode = partial(renderRect, this.ctx, { enableLabels, theme })
         } else {
-            renderNode = partial(renderCircle, this.ctx, { enableLabels })
+            renderNode = partial(renderCircle, this.ctx, { enableLabels, theme })
         }
 
         const nodes = computeNodes(props)

diff --git a/packages/heatmap/src/canvas.js b/packages/heatmap/src/canvas.js
@@ -23,7 +23,7 @@
  */
 export const renderRect = (
     ctx,
-    { enableLabels },
+    { enableLabels, theme },
     { x, y, width, height, color, opacity, labelTextColor, value }
 ) => {
     ctx.save()
@@ -34,6 +34,7 @@ export const renderRect = (
 
     if (enableLabels === true) {
         ctx.fillStyle = labelTextColor
+        ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily || 'sans-serif'}`
         ctx.fillText(value, x, y)
     }
 
@@ -56,7 +57,7 @@ export const renderRect = (
  */
 export const renderCircle = (
     ctx,
-    { enableLabels },
+    { enableLabels, theme },
     { x, y, width, height, color, opacity, labelTextColor, value }
 ) => {
     ctx.save()
@@ -71,6 +72,7 @@ export const renderCircle = (
 
     if (enableLabels === true) {
         ctx.fillStyle = labelTextColor
+        ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily || 'sans-serif'}`
         ctx.fillText(value, x, y)
     }
 

diff --git a/packages/pie/src/canvas.js b/packages/pie/src/canvas.js
@@ -16,7 +16,7 @@ export const drawSliceLabels = (
 ) => {
     ctx.textAlign = 'center'
     ctx.textBaseline = 'middle'
-    ctx.font = `${theme.labels.text.fontSize}px sans-serif`
+    ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily || 'sans-serif'}`
 
     arcs.filter(arc => skipAngle === 0 || arc.angleDeg > skipAngle).forEach(arc => {
         const [centroidX, centroidY] = arcGenerator.centroid(arc)
@@ -60,7 +60,7 @@ export const drawRadialLabels = (
     })
 
     ctx.textBaseline = 'middle'
-    ctx.font = `${theme.labels.text.fontSize}px sans-serif`
+    ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily || 'sans-serif'}`
 
     radialLabels.forEach(label => {
         const dataWithColor = {

diff --git a/packages/treemap/src/TreeMapCanvas.js b/packages/treemap/src/TreeMapCanvas.js
@@ -73,7 +73,8 @@ class TreeMapCanvas extends Component {
         if (enableLabel) {
             this.ctx.textAlign = 'center'
             this.ctx.textBaseline = 'middle'
-            this.ctx.font = `${theme.labels.text.fontSize}px sans-serif`
+            this.ctx.font = `${theme.labels.text.fontSize}px ${theme.labels.text.fontFamily ||
+                'sans-serif'}`
 
             // draw labels on top
             nodes.filter(({ label }) => label !== undefined).forEach(node => {