From ab3d4badf760aa2e6f3c0dacc72defa3d881dea4 Mon Sep 17 00:00:00 2001 From: Aleksandr Telegin <99ff00@gmail.com> Date: Mon, 9 Mar 2020 16:02:24 +0000 Subject: [PATCH] Add showBrush and showMainArea props --- README.md | 2 ++ src/charty.js | 47 ++++++++++++++++++++++++++++++++++++----------- src/index.js | 7 ++++++- 3 files changed, 44 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index a59fcf71..3560f56d 100644 --- 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 index 2044b559..bdd2dc22 100644 --- 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 index 5d606dd9..4dcee0d5 100644 --- 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)