@heycar-uikit/core/slider-with-histogram/cssm/components/Histogram.js

The React UI library from HeyCar

var React = require('react');
var utils_histogramHelpers = require('../utils/histogramHelpers.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Histogram = function (_a) {
    var _b = _a.values, values = _b === void 0 ? [] : _b, width = _a.width, height = _a.height, selectedRangeIndexes = _a.selectedRangeIndexes, _c = _a.normaliseData, normaliseData = _c === void 0 ? true : _c, _d = _a.showPoints, showPoints = _d === void 0 ? false : _d, selectedRangeMinWidth = _a.selectedRangeMinWidth;
    var cRef = React.useRef(null);
    var realWidth = width * 2;
    var realHeight = height * 2;
    // waiting for the canvas to get rendered
    React.useEffect(function () {
        if (values.length && cRef.current) {
            var canvas = cRef.current;
            var ctx_1 = canvas.getContext('2d');
            // ctx is not available when tests run
            if (!ctx_1)
                return;
            var maxValue = Math.max.apply(Math, values);
            var multiplyFactor_1 = realHeight / maxValue;
            var pointsToDraw = values.map(function (value, index) { return ({
                x: index,
                y: normaliseData ? value * multiplyFactor_1 : value,
            }); });
            // I need to subtract y from the height because the Y axis goes from top to button, while we need the opposite
            pointsToDraw = pointsToDraw.map(function (_a) {
                var x = _a.x, y = _a.y;
                return ({
                    x: (realWidth / (values.length - 1)) * x,
                    y: realHeight - y,
                });
            });
            // clearing the canvas
            ctx_1.clearRect(0, 0, realWidth, realHeight);
            // drawing the full range curve
            ctx_1.beginPath();
            utils_histogramHelpers.drawCurve(ctx_1, pointsToDraw);
            // this is to close the shape
            ctx_1.lineTo(pointsToDraw[pointsToDraw.length - 1].x, realHeight);
            ctx_1.lineTo(pointsToDraw[0].x, realHeight);
            ctx_1.lineWidth = 1;
            ctx_1.fillStyle = '#A2B7DA';
            ctx_1.fill();
            ctx_1.closePath();
            if (showPoints) {
                ctx_1.strokeStyle = '#052962';
                ctx_1.beginPath();
                pointsToDraw.forEach(function (point) {
                    ctx_1.rect(point.x - 1, point.y - 1, 2, 2);
                });
                ctx_1.stroke();
            }
            if (selectedRangeIndexes) {
                ctx_1.beginPath();
                var from = selectedRangeIndexes[0], to = selectedRangeIndexes[1];
                // slicing the portion of the data we want to highlight
                var selectedRange = pointsToDraw.slice(from, to + 1);
                if (selectedRange.length === 1 && selectedRangeMinWidth) {
                    //drawing a 2px wide vertical line
                    selectedRange.pop();
                    selectedRange.push({
                        x: pointsToDraw[from].x - selectedRangeMinWidth / 2,
                        y: pointsToDraw[from].y,
                    }, {
                        x: pointsToDraw[from].x + selectedRangeMinWidth / 2,
                        y: pointsToDraw[from].y,
                    });
                }
                // drawing the selected range curve
                utils_histogramHelpers.drawCurve(ctx_1, selectedRange);
                // this is to close the shape
                if (selectedRange.length) {
                    ctx_1.lineTo(selectedRange[selectedRange.length - 1].x, realHeight);
                    ctx_1.lineTo(selectedRange[0].x, realHeight);
                }
                ctx_1.fillStyle = '#052962';
                ctx_1.fill();
                ctx_1.closePath();
            }
        }
    }, [
        cRef,
        values,
        selectedRangeIndexes,
        selectedRangeMinWidth,
        normaliseData,
        showPoints,
        width,
        height,
        realWidth,
        realHeight,
    ]);
    return (React__default["default"].createElement("canvas", { "data-test-id": "histogram", height: realHeight, ref: cRef, style: { width: width + "px", height: height + "px" }, width: realWidth }));
};

module.exports = Histogram;