Add fillColor prop and gradient fill support

99ff00 · Oct 26, 2019 · d5a8da3 · d5a8da3
1 parent 9c3f974
commit d5a8da3
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -93,7 +93,7 @@ For a theme switching example please check the [Demo App](https://99ff00.github.
 
 ```jsx static
 const LIGHT_THEME = {
-  grid: { color: '#182D3B', alpha: 0.1, markerFillColor: '#fff' },
+  grid: { color: '#182D3B', alpha: 0.1, markerFillColor: '#fff', markerRadius: 0 },
   legend: { background: '#fff', color: '#000' },
   preview: { maskColor: '#E2EEF9', maskAlpha: 0.6, brushColor: '#C0D1E1', brushBorderColor: '#fff', brushBorderAlpha: 1, handleColor: '#fff' },
   xAxis: { textColor: '#8E8E93', textAlpha: 1 },
@@ -132,6 +132,7 @@ const DARK_THEME = {
 |`data`             |Object       |Contains the data points for chart series. Every key of this object is an array of data points. The `x` array is mandatory and contains the data for x-axis while other keys represent the data points for y-axis. There could be multiple series in one chart and thus several data arrays for y-axis, for example `y`, `y0`, `y1`, `yAxis` etc. The key name can be any and is used as reference for name, color etc. The key name also defines the rendering order (alphabetically).|
 |`names`            |Object       |Contains the names for data series, referenced by key. For example, `names: { y0: 'Views', y1: 'Clicks' }`.|
 |`colors`           |Object       |Contains the colors for data series, referenced by key. For example, `colors: { y0: '#4BD964', y1: '#FE3C30' }`.|
+|`fillColors`       |Object       |Contains the fill colors for data series (only `line` type is supported for now), referenced by key. A gradient fill is also supported. For example, `fillColors: { "y1": "#FE3C3011", "y0": { "type": "linear_gradient_v", "colors": ["#4BD964", "#4BD964", "#FFFFFF00"] }}`.|
 |`theme`            |Object       |Contains the color theme for chart components. If omitted, the default theme will be used.|
 |`animated`         |Boolean      |Enables/disables animations and transitions, default value is `true`.|
 |`startX`           |Number       |The starting position of preview region. If not specified, the starting position of the preview region will be at 2/3 of `x` axis.|

diff --git a/example/public/data/1/overview.json b/example/public/data/1/overview.json
@@ -7,6 +7,10 @@
     "y0": "#4BD964",
     "y1": "#FE3C30"
   },
+  "fillColors": {
+    "y0": { "type": "linear_gradient_v", "colors": ["#4BD964", "#4BD964", "#FFFFFF00"] },
+    "y1": "#FE3C3011"
+  },
   "data": {
     "x": [
       1523059200000,

diff --git a/example/src/App.js b/example/src/App.js
@@ -52,14 +52,17 @@ const LIGHT_THEME = {
     zoomIcon: { fill: '#008f11' },
     buttons: { color: '#0d0208' },
     pie: { textColor: '#0d0208' },
-    series: {
+    colors: {
       'Joined': '#00ff41', 'Left': '#008f11', 'Views': '#00ff41', 'Shares': '#008f11', 'Clicks': '#008f11',
       'Kiwi': '#00ff41', 'Apricots': '#008f11', 'Lemons': '#005b00', 'Mango': '#7ec251', 'Oranges': '#145105',
       'Pears': '#66e82f', 'Apples': '#0acb3b',
       'Adventure': '#03c835', 'Western': '#008f11', 'Action': '#00ff41', 'Multiple Genres': '#66e82f', 'Drama': '#0acb3b',
       'Comedy': '#008f11', 'Thriller/Suspense': '#005b00', 'Concert/Performance': '#7ec251', 'Horror': '#145105',
       'Romantic Comedy': '#12842f', 'Musical': '#079d2e'
     },
+    fillColors: {
+      'Joined': '#00ff4177', 'Left': '#00000000'
+    },
     body: { backgroundColor: '#0d0208', color: '#00ff41' },
     noteColor: '#008f11',
     octoColor: '#00ff41'

diff --git a/src/charty.js b/src/charty.js
@@ -259,13 +259,17 @@ var Charty = (function () {
             UI[id][key] = theme[id][key]
         }
       }
+      function updateColors(S) {
+        S.color = theme.colors && theme.colors[S.name] ? theme.colors[S.name] : S._color
+        S.fillColor = theme.fillColors && theme.fillColors[S.name] ? theme.fillColors[S.name] : S._fillColor
+      }
       AY.map(function (S, i, series) {
-        S.color = theme.series && theme.series[S.name] ? theme.series[S.name] : S._color
+        updateColors(S)
         updateCheckbox(i, S.off, series)
       })
       if (V.zoomedChart)
-        V.zoomedChart.getSeries().map(function (S, i, series) {
-          S.color = theme.series && theme.series[S.name] ? theme.series[S.name] : S._color
+        V.zoomedChart.getSeries().map(function (S) {
+          updateColors(S)
         })
       V.stepGridX = undefined
       V.stepGridY = undefined
@@ -413,7 +417,7 @@ var Charty = (function () {
         if (n === 'x')
           AX = d
         else
-          AY.push({ data: d, color: (props.colors || {})[n], name: (props.names || {})[n], type: props.type })
+          AY.push({ data: d, color: (props.colors || {})[n], fillColor: (props.fillColors || {})[n], name: (props.names || {})[n], type: props.type })
       })
 
       AYL = AY.length
@@ -432,6 +436,7 @@ var Charty = (function () {
         var S = AY[i], off = false
 
         S._color = S.color
+        S._fillColor = S.fillColor
         if (!TYPES.percentage) {
           STREE_MAX[i] = initSTree(S.data)
           buildSTree(STREE_MAX[i], S.data, Math.max)
@@ -734,22 +739,48 @@ var Charty = (function () {
       }
     }
 
+    function buildColorStyle(color) {
+      var gradient
+
+      if (color instanceof Object) {
+        if (color.type === 'linear_gradient_h')
+          gradient = ctx.createLinearGradient(0, 0, UI.main.width, 0)
+        if (color.type === 'linear_gradient_v')
+          gradient = ctx.createLinearGradient(0, 0, 0, UI.main.height)
+
+        color.colors.forEach(function (c, i, a) {
+          gradient.addColorStop(i / (a.length - 1), c)
+        })
+        return gradient
+      }
+      return color
+    }
+
     function renderLinear(type, height, vStart, hPadding, offsetY, offsetX, startIdx, endIdx, scaleX, scaleY) {
       height -= UI.grid.markerRadius + UI.grid.markerLineWidth
-      for (var s = 0, idx, x, data, color; s < AYL; s++) {
+      for (var s = 0, idx, x, data, color, fillColor, startX; s < AYL; s++) {
         data = AY[s].data
-        color = AY[s].color
+        color = buildColorStyle(AY[s].color)
+        fillColor = buildColorStyle(AY[s].fillColor)
 
-        UI.canvas.startLine((1 - V.progress) * A['alphaY' + s], color, 0, ctx.lineWidth)
+        UI.canvas.startLine((1 - V.progress) * A['alphaY' + s], color, fillColor, ctx.lineWidth)
         idx = TYPES.multi_yaxis ? s : ''
         scaleY = height / A[type + 'DY' + idx]
         for (var i = startIdx; i <= endIdx; i++) {
           x = offsetX + hPadding + (AX[i] - vStart) * scaleX
-          if (i === startIdx)
+          if (i === startIdx) {
+            startX = x
             ctx.moveTo(x, offsetY - (data[i] - A[type + 'MinY' + idx]) * scaleY)
+          }
           ctx.lineTo(x, offsetY - (data[i] - A[type + 'MinY' + idx]) * scaleY)
         }
-        ctx.stroke()
+        if (fillColor) {
+          ctx.stroke()
+          ctx.lineTo(x, offsetY)
+          ctx.lineTo(startX, offsetY)
+          ctx.fill()
+        } else
+          ctx.stroke()
       }
     }