Add showBrush and showMainArea props

99ff00 · Mar 9, 2020 · ab3d4ba · ab3d4ba
1 parent 7b96d53
commit ab3d4ba
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -141,7 +141,9 @@ const DARK_THEME = {
 |`showLegend`       |Boolean      |If set to `false` the legend will not appear when moving the cursor over the chart (or tapping chart area on mobile). The default value is `true`.|
 |`showLegendTitle`  |Boolean      |If set to `false` the legend title will not appear. The default value is `true`.|
 |`legendPosition`   |String       |Defines the position of legend popup and can be one of the following values: `top`, `bottom`, `cursor`. The default value is `cursor`, which means the legend popup will follow the cursor position.|
+|`showMainArea`     |Boolean      |If set to `false` the main chart area won't be visible. The default value is `true`.|
 |`showPreview`      |Boolean      |If set to `false` the chart preview won't be visible. The default value is `true`.|
+|`showBrush`        |Boolean      |If set to `false` the brush controls in preview area won't be visible. The default value is `true`.|
 |`showButtons`      |Boolean      |If set to `false` the series buttons won't be visible. Also, the buttons are hidden if there's only one series of data. The default value is `true`.|
 |`showRangeText`    |Boolean      |Show/hide current range text in top right corner. The default value is `true`.|
 |`rangeTextType`    |String       |Defines the display type of current range. It could be one of the following [DDT](#display-data-types) or can be function that accepts the `x` value of range starting and ending positions.|

diff --git a/src/charty.js b/src/charty.js
@@ -55,6 +55,8 @@ var Charty = (function () {
       buttons: { color: '#fff' },
       pie: { textColor: '#fff' }
     },
+    CHART_HEIGHT = 400,
+    MAIN_AREA_HEIGHT = 354,
     PI_RAD = Math.PI / 180,
     FONT = 'BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
     WDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
@@ -234,7 +236,7 @@ var Charty = (function () {
       TOTALS, PERCENTS = [], STREE_MIN = [], STREE_MAX = [], animations = {}, A = {},
       STATE = {}, myIdx = CHARTS.length, parentSeries, currentTheme,
       UI = UI_ || {
-        chart: { topPadding: 50, hPadding: 15, height: 400 },
+        chart: { topPadding: 50, hPadding: 15, height: CHART_HEIGHT },
         pie: { segmentShift: 5 },
         preview: { height: 46, vPadding: 1, radius: 8, lineWidth: 1, handleW: 9, handleTick: 10, minBrushSize: 10, hitSlop: 10 },
         grid: { lineWidth: 1, legendShift: -10, markerRadius: 3, markerLineWidth: 4 },
@@ -385,6 +387,8 @@ var Charty = (function () {
       V.showLegend = props.showLegend !== false
       V.showButtons = props.showButtons !== false && AYL > 1
       V.showPreview = props.showPreview !== false
+      V.showMainArea = props.showMainArea !== false
+      V.showBrush = props.showBrush !== false
       V.showRangeText = props.showRangeText !== false
       V.showLegendTitle = props.showLegendTitle !== false
       V.stepX = props.stepX || 1
@@ -589,20 +593,22 @@ var Charty = (function () {
         return
 
       ctx.save()
-      UI.canvas.rect(UI.chart.hPadding, UI.preview.y + UI.preview.vPadding, w, minH, UI.preview.radius, valToX(V.localStart) > UI.chart.hPadding + UI.preview.handleW / 2, valToX(V.localEnd) < UI.main.width - UI.chart.hPadding - UI.preview.handleW / 2, true)
+      UI.canvas.rect(UI.chart.hPadding, UI.preview.y + UI.preview.vPadding, w, minH, UI.preview.radius, !V.showBrush || (valToX(V.localStart) > UI.chart.hPadding + UI.preview.handleW / 2), !V.showBrush || (valToX(V.localEnd) < UI.main.width - UI.chart.hPadding - UI.preview.handleW / 2), true)
       ctx.lineWidth = UI.preview.lineWidth
       ctx.globalAlpha = a
       renderSeries('global', a, w, h - 2 * UI.preview.vPadding, V.globalStart, V.globalEnd, 0, UI.chart.height - UI.preview.vPadding, UI.chart.hPadding, true)
-      ctx.fillStyle = UI.preview.maskColor
-      ctx.globalAlpha = a * UI.preview.maskAlpha
-      ctx.fillRect(UI.chart.hPadding, UI.preview.y + UI.preview.vPadding, valToX(V.localStart) - UI.chart.hPadding, minH)
-      ctx.fillRect(valToX(V.localEnd), UI.preview.y + UI.preview.vPadding, UI.main.width + UI.preview.handleW - UI.chart.hPadding - valToX(V.localEnd), minH)
+      if (V.showBrush) {
+        ctx.fillStyle = UI.preview.maskColor
+        ctx.globalAlpha = a * UI.preview.maskAlpha
+        ctx.fillRect(UI.chart.hPadding, UI.preview.y + UI.preview.vPadding, valToX(V.localStart) - UI.chart.hPadding, minH)
+        ctx.fillRect(valToX(V.localEnd), UI.preview.y + UI.preview.vPadding, UI.main.width + UI.preview.handleW - UI.chart.hPadding - valToX(V.localEnd), minH)
+      }
       ctx.restore()
-      renderBrush(a)
+      if (V.showBrush) renderBrush(a)
     }
 
     function renderAxis() {
-      if (TYPES.pie) return
+      if (TYPES.pie || !V.showMainArea) return
 
       var localD, localMin, localMax = 0, minLocalD, lowerMin,
         p = Math.min(1, V.progress)
@@ -1073,14 +1079,13 @@ var Charty = (function () {
     }
 
     function renderMain() {
+      if (!V.showMainArea) return
       ctx.lineWidth = UI.main.lineWidth
       renderSeries('local', TYPES.percentage ? 1 : 1 - V.progress, UI.preview.width, UI.main.height - 1.5 * UI.main.vPadding, V.localStart, V.localEnd, UI.chart.hPadding, UI.main.height, false)
       renderGrid()
     }
 
     function measureUI() {
-      V.needMeasure = false
-
       var ww = window.innerWidth,
         wh = window.innerHeight,
         pageYOffset = window.pageYOffset
@@ -1090,7 +1095,9 @@ var Charty = (function () {
         V.pageYOffset = pageYOffset
       }
 
-      if (V.prevW !== ww || V.prevH !== wh) {
+      UI.chart.height = V.showMainArea ? CHART_HEIGHT : CHART_HEIGHT - MAIN_AREA_HEIGHT
+
+      if (V.needMeasure || V.prevW !== ww || V.prevH !== wh) {
         V.prevW = ww
         V.prevH = wh
         UI.box.measure()
@@ -1107,6 +1114,7 @@ var Charty = (function () {
         ctx.scale(DPR, DPR)
         repaint()
       }
+      V.needMeasure = false
     }
 
     function renderGrid() {
@@ -1822,6 +1830,19 @@ var Charty = (function () {
       updateTheme()
     }
 
+    this.setShowMainArea = function (on) {
+      V.showMainArea = on
+      resize()
+      measureUI()
+      repaint()
+    }
+
+    this.setShowBrush = function (on) {
+      V.showBrush = on
+      repaint()
+      !on && resetCursor()
+    }
+
     this.setStartX = function (x) {
       V.localStart = applyRange(x, V.globalStart, V.globalEnd)
     }
@@ -1963,6 +1984,8 @@ var Charty = (function () {
         if (!IS_MOBILE || STATE.draggingArea >= AREA.PREVIEW)
           stop(e)
 
+        if (!V.showBrush) return
+
         updateCursor(area)
 
         var width = V.localEnd - V.localStart,
@@ -2022,6 +2045,7 @@ var Charty = (function () {
       })
 
       UI.canvas.on('touchstart mousedown', function (e, x, y, area) {
+        if (!V.showBrush) return
         STATE.draggingArea = area
         if (area > AREA.PREVIEW) {
           V.deltaDragX = x - valToX(V.localStart) - UI.preview.handleW / 2
@@ -2046,6 +2070,7 @@ var Charty = (function () {
       })
 
       UI.canvas.on('touchend touchcancel mouseup', function (e, x, y, area) {
+        if (!V.showBrush) return
         if (!IS_MOBILE && !isNaN(V.vLineX) && !V.zoomedChart)
           zoomIn(V.vLineX)
 

diff --git a/src/index.js b/src/index.js
@@ -19,6 +19,8 @@ export default class Charty extends Component {
     showLegend: PropTypes.bool,
     showLegendTitle: PropTypes.bool,
     showButtons: PropTypes.bool,
+    showMainArea: PropTypes.bool,
+    showBrush: PropTypes.bool,
     showPreview: PropTypes.bool,
     showRangeText: PropTypes.bool,
     rangeTextType: PropTypes.string,
@@ -59,7 +61,10 @@ export default class Charty extends Component {
     if (nextProps.showButtons !== this.props.showButtons)
       this.charty.setShowButtons(nextProps.showButtons)
 
-    if (nextProps.startX !== this.props.startX)
+    if (nextProps.showMainArea !== this.props.showMainArea)
+      this.charty.setShowMainArea(nextProps.showMainArea)
+
+      if (nextProps.startX !== this.props.startX)
       this.charty.setStartX(nextProps.startX)
 
     if (nextProps.endX !== this.props.endX)