From 56a737427740f655c74bb036ccda1fea0478eb9b Mon Sep 17 00:00:00 2001 From: Shivam Mishra Date: Tue, 20 Oct 2020 14:07:00 +0530 Subject: [PATCH] chore: formatting improvements --- src/css/charts.scss | 19 +++++++++++-------- src/js/objects/SvgTip.js | 14 +++++++------- src/js/utils/colors.js | 6 +++--- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/css/charts.scss b/src/css/charts.scss index 208a7eb..f8f2fb0 100644 --- a/src/css/charts.scss +++ b/src/css/charts.scss @@ -1,25 +1,26 @@ :root { --fr-label-color: #313b44; - --fr-axis-line-color: #F4F5F6; + --fr-axis-line-color: #f4f5f6; --fr-stroke-width: 2px; - --fr-dataset-circle-stroke: #FFFFFF; + --fr-dataset-circle-stroke: #ffffff; --fr-dataset-circle-stroke-width: var(--fr-stroke-width); --fr-tooltip-title: var(--fr-label-color); --fr-tooltip-label: var(--fr-label-color); --fr-tooltip-value: #192734; - --fr-tooltip-bg: #FFFFFF; + --fr-tooltip-bg: #ffffff; } .chart-container { position: relative; /* for absolutely positioned tooltip */ - font-family: -apple-system, BlinkMacSystemFont, - 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', - 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", + "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", + "Helvetica Neue", sans-serif; - .axis, .chart-label { + .axis, + .chart-label { fill: var(--fr-label-color); line { @@ -85,7 +86,9 @@ font-size: 12px; text-align: center; background: var(--fr-tooltip-bg); - box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), 0px 2px 6px rgba(17, 43, 66, 0.08), 0px 40px 30px -30px rgba(17, 43, 66, 0.1); + box-shadow: 0px 1px 4px rgba(17, 43, 66, 0.1), + 0px 2px 6px rgba(17, 43, 66, 0.08), + 0px 40px 30px -30px rgba(17, 43, 66, 0.1); border-radius: 6px; ul { diff --git a/src/js/objects/SvgTip.js b/src/js/objects/SvgTip.js index 5dec933..dea73e4 100644 --- a/src/js/objects/SvgTip.js +++ b/src/js/objects/SvgTip.js @@ -52,10 +52,10 @@ export default class SvgTip { fill() { let title; - if(this.index) { + if (this.index) { this.container.setAttribute('data-point-index', this.index); } - if(this.titleValueFirst) { + if (this.titleValueFirst) { title = `${this.titleValue}${this.titleName}`; } else { title = `${this.titleName}${this.titleValue}`; @@ -76,8 +76,8 @@ export default class SvgTip { let li = $.create('li', { innerHTML: `
-
${ value === 0 || value ? value : '' }
-
${set.title ? set.title : '' }
+
${value === 0 || value ? value : ''}
+
${set.title ? set.title : ''}
` }); @@ -90,15 +90,15 @@ export default class SvgTip { this.top = this.y - this.container.offsetHeight - TOOLTIP_POINTER_TRIANGLE_HEIGHT; - this.left = this.x - width/2; + this.left = this.x - width / 2; let maxLeft = this.parent.offsetWidth - width; let pointer = this.container.querySelector('.svg-pointer'); - if(this.left < 0) { + if (this.left < 0) { pointer.style.left = `calc(50% - ${-1 * this.left}px)`; this.left = 0; - } else if(this.left > maxLeft) { + } else if (this.left > maxLeft) { let delta = this.left - maxLeft; let pointerOffset = `calc(50% + ${delta}px)`; pointer.style.left = pointerOffset; diff --git a/src/js/utils/colors.js b/src/js/utils/colors.js index 3496c56..5414cbd 100644 --- a/src/js/utils/colors.js +++ b/src/js/utils/colors.js @@ -21,7 +21,7 @@ const PRESET_COLOR_MAP = { 'light-orange': '#FECDB8' }; -function limitColor(r){ +function limitColor(r) { if (r > 255) return 255; else if (r < 0) return 0; return r; @@ -34,11 +34,11 @@ export function lightenDarkenColor(color, amt) { col = col.slice(1); usePound = true; } - let num = parseInt(col,16); + let num = parseInt(col, 16); let r = limitColor((num >> 16) + amt); let b = limitColor(((num >> 8) & 0x00FF) + amt); let g = limitColor((num & 0x0000FF) + amt); - return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); + return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); } export function isValidColor(string) {