canvas-trading/dist/src/Canvas/canvas.styled.js

Interactive HTML5 Canvas Trading Chart

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled, { css } from 'styled-components';
import { canvasSettings } from '../config';
export var Wrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // add some padding on top to fit the labels easily\n  /* padding-top: ", "px; */\n  width: ", "px;\n  height: ", "px;\n\n  font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n  margin: 0 auto;\n  position: relative;\n\n  ", "\n\n  ", "\n"], ["\n  // add some padding on top to fit the labels easily\n  /* padding-top: ", "px; */\n  width: ", "px;\n  height: ", "px;\n\n  font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n  margin: 0 auto;\n  position: relative;\n\n  ", "\n\n  ", "\n"])), function (props) { return Math.sqrt(props.height) * 1.5; }, function (props) { return props.width; }, function (props) {
    return props.height +
        (props.ao ? props.height / 5 + 5 : 0) +
        (props.stdev ? props.height / 5 + 5 : 0);
}, function (_a) {
    var resizable = _a.resizable;
    return resizable && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      resize: both;\n      /* The property below is needed so that the resize icon is visible. */\n      overflow: hidden;\n    "], ["\n      resize: both;\n      /* The property below is needed so that the resize icon is visible. */\n      overflow: hidden;\n    "])));
}, function (_a) {
    var fullscreen = _a.fullscreen;
    return fullscreen && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      background-color: #111;\n      height: 100%;\n      width: 100%;\n    "], ["\n      position: absolute;\n      top: 0;\n      left: 0;\n      z-index: 1;\n      background-color: #111;\n      height: 100%;\n      width: 100%;\n    "])));
});
var labelStyles = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n  color: gray;\n"], ["\n  pointer-events: none;\n  position: absolute;\n  margin: 0;\n  color: gray;\n"])));
var canvasStyles = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0 auto;\n  padding: 0;\n  background: transparent;\n  cursor: crosshair;\n  font-family: inherit;\n"], ["\n  margin: 0 auto;\n  padding: 0;\n  background: transparent;\n  cursor: crosshair;\n  font-family: inherit;\n"])));
export var MainCanvas = styled.canvas(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  width: ", "px;\n  height: ", "px;\n\n  :active {\n    cursor: grabbing;\n    ", "\n  }\n"], ["\n  ", "\n  width: ", "px;\n  height: ", "px;\n\n  :active {\n    cursor: grabbing;\n    ", "\n  }\n"])), canvasStyles, function (props) { return props.width / canvasSettings.scaleForQuality; }, function (props) { return props.height / canvasSettings.scaleForQuality; }, function (_a) {
    var resizable = _a.resizable;
    return resizable && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n        /* This is a hack to make the resize icon clickable. */\n        border-bottom-right-radius: 50px;\n      "], ["\n        /* This is a hack to make the resize icon clickable. */\n        border-bottom-right-radius: 50px;\n      "])));
});
export var CursorCanvas = styled.canvas(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  ", "\n  width: ", "px;\n  height: ", "px;\n  top: 0;\n  left: 0;\n"], ["\n  ", "\n  ", "\n  width: ", "px;\n  height: ", "px;\n  top: 0;\n  left: 0;\n"])), canvasStyles, labelStyles, function (props) { return props.width / canvasSettings.scaleForQuality; }, function (props) { return props.height / canvasSettings.scaleForQuality; });
export var AssetLabel = styled.p(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  height: ", "px;\n  width: 100%;\n\n  top: calc(50% - ", "px);\n\n  line-height: ", "px;\n  height: ", "px;\n  color: #fff;\n  font-size: ", "px;\n  letter-spacing: ", "px;\n  text-align: center;\n  font-weight: 100;\n  opacity: ", ";\n"], ["\n  ", "\n  height: ", "px;\n  width: 100%;\n\n  top: calc(50% - ", "px);\n\n  line-height: ", "px;\n  height: ", "px;\n  color: #fff;\n  font-size: ", "px;\n  letter-spacing: ", "px;\n  text-align: center;\n  font-weight: 100;\n  opacity: ", ";\n"])), labelStyles, function (props) { return props.height / 2; }, function (props) { return props.height / 4 + (props.aoShown ? props.height / 10 + 2.5 : 0); }, function (props) { return props.height / 2; }, function (props) { return props.height / 2; }, function (props) { return Math.sqrt(props.width) * 2.5; }, function (props) { return Math.sqrt(props.width) * 0.15; }, function (props) { return props.opacity; });
export var AoCanvas = styled.canvas(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  ", ";\n  width: ", "px;\n  height: ", "px;\n\n  ", "\n"], ["\n  ", ";\n  width: ", "px;\n  height: ", "px;\n\n  ", "\n"])), canvasStyles, function (props) { return props.width / canvasSettings.scaleForQuality; }, function (props) { return props.height / canvasSettings.scaleForQuality; }, function (_a) {
    var resizable = _a.resizable;
    return resizable && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      /* This makes the resize icon larger for easier click */\n      pointer-events: none;\n    "], ["\n      /* This makes the resize icon larger for easier click */\n      pointer-events: none;\n    "])));
});
export var PriceLabel = styled.p(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n  top: ", "px;\n\n  right: ", "px;\n  font-size: ", "px;\n  font-weight: 200;\n"], ["\n  ", "\n  top: ", "px;\n\n  right: ", "px;\n  font-size: ", "px;\n  font-weight: 200;\n"])), labelStyles, function (props) {
    var above = props.cursor.y < props.height / 2;
    var minimumTopPosition = props.height / 50;
    return Math.max(props.cursor.y - (above ? 0 : props.height / 16), minimumTopPosition);
}, function (props) { return props.height / 50; }, function (props) { return props.height / 25; });
export var OclhLabel = styled.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  /* width: ", "px; */\n  /* justify-content: space-between; */\n  column-gap: ", "px;\n  display: flex;\n  align-items: center;\n  left: ", "px;\n  top: ", "px;\n  /* font-size: ", "px; */\n  opacity: 0.7;\n\n  > p {\n    width: ", "px;\n    white-space: nowrap;\n    color: white;\n    margin: 0;\n    margin-top: 1px; //? make it look a little bit better\n    font-weight: 400;\n    /* outline: 1px solid red; */\n    display: flex;\n    column-gap: ", "px;\n    flex-direction: row;\n\n    font-size: ", "px;\n  }\n  span {\n    font-weight: 400;\n    width: ", "px;\n    /* outline: 1px solid red; */\n    color: white;\n    font-size: ", "px;\n  }\n"], ["\n  ", "\n  /* width: ", "px; */\n  /* justify-content: space-between; */\n  column-gap: ", "px;\n  display: flex;\n  align-items: center;\n  left: ", "px;\n  top: ", "px;\n  /* font-size: ", "px; */\n  opacity: 0.7;\n\n  > p {\n    width: ", "px;\n    white-space: nowrap;\n    color: white;\n    margin: 0;\n    margin-top: 1px; //? make it look a little bit better\n    font-weight: 400;\n    /* outline: 1px solid red; */\n    display: flex;\n    column-gap: ", "px;\n    flex-direction: row;\n\n    font-size: ", "px;\n  }\n  span {\n    font-weight: 400;\n    width: ", "px;\n    /* outline: 1px solid red; */\n    color: white;\n    font-size: ", "px;\n  }\n"])), labelStyles, function (props) { return Math.sqrt(props.canvasWidth) * 2.5 * 6; }, function (props) { return Math.sqrt(props.canvasWidth) / 5; }, function (props) { return props.canvasHeight / 30; }, function (props) { return props.canvasHeight / 40; }, function (props) { return Math.sqrt(props.canvasWidth) / 2; }, function (props) { return (Math.sqrt(props.canvasWidth) / 2) * 5.3; }, function (props) { return Math.sqrt(props.canvasWidth) / 10; }, function (props) { return Math.sqrt(props.canvasWidth) / 2.3; }, function (props) { return Math.sqrt(props.canvasWidth) * 5.5; }, function (props) { return Math.sqrt(props.canvasWidth) / 2; });
export var DateLabel = styled.p(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", "\n  ", "\n  bottom: ", "px;\n  font-size: ", "px;\n  font-weight: 200;\n"], ["\n  ", "\n  ", "\n  bottom: ", "px;\n  font-size: ", "px;\n  font-weight: 200;\n"])), labelStyles, function (props) {
    var isOnTheRight = props.cursor.x < props.width / 2;
    var side = isOnTheRight ? 'left' : 'right';
    var minimumSidePosition = props.width / 50;
    var offset = isOnTheRight ? props.cursor.x : props.width - props.cursor.x;
    return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", ": ", "px;\n    "], ["\n      ", ": ", "px;\n    "])), side, Math.max(offset + props.height / 40, minimumSidePosition));
}, function (props) {
    return props.height / 40 + (props.ao ? props.height / 5 : 0) + (props.stdev ? props.height / 5 : 0);
}, function (props) { return props.height / 30; });
export var AOCanvasNameLabel = styled.p(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", "\n\n  bottom: ", "px;\n  left: ", "px;\n  font-size: ", "px;\n  font-weight: 400;\n"], ["\n  ", "\n\n  bottom: ", "px;\n  left: ", "px;\n  font-size: ", "px;\n  font-weight: 400;\n"])), labelStyles, function (props) { return props.height / 5 - props.height / 30; }, function (props) { return props.width / 150; }, function (props) { return props.height / 30; });
export var StdevCanvasNameLabel = styled.p(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", "\n\n  bottom: ", "px;\n  left: ", "px;\n  font-size: ", "px;\n  font-weight: 400;\n"], ["\n  ", "\n\n  bottom: ", "px;\n  left: ", "px;\n  font-size: ", "px;\n  font-weight: 400;\n"])), labelStyles, function (props) { return (props.height / 5) * (props.aoShown ? 2 : 1) - props.height / 30; }, function (props) { return props.width / 150; }, function (props) { return props.height / 30; });
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;