瀏覽代碼

chore: formatting improvements

pull/347/head
Shivam Mishra 4 年之前
父節點
當前提交
56a7374277
共有 3 個檔案被更改,包括 21 行新增18 行删除
  1. +11
    -8
      src/css/charts.scss
  2. +7
    -7
      src/js/objects/SvgTip.js
  3. +3
    -3
      src/js/utils/colors.js

+ 11
- 8
src/css/charts.scss 查看文件

@@ -1,25 +1,26 @@
:root { :root {
--fr-label-color: #313b44; --fr-label-color: #313b44;
--fr-axis-line-color: #F4F5F6;
--fr-axis-line-color: #f4f5f6;


--fr-stroke-width: 2px; --fr-stroke-width: 2px;
--fr-dataset-circle-stroke: #FFFFFF;
--fr-dataset-circle-stroke: #ffffff;
--fr-dataset-circle-stroke-width: var(--fr-stroke-width); --fr-dataset-circle-stroke-width: var(--fr-stroke-width);


--fr-tooltip-title: var(--fr-label-color); --fr-tooltip-title: var(--fr-label-color);
--fr-tooltip-label: var(--fr-label-color); --fr-tooltip-label: var(--fr-label-color);
--fr-tooltip-value: #192734; --fr-tooltip-value: #192734;
--fr-tooltip-bg: #FFFFFF;
--fr-tooltip-bg: #ffffff;
} }


.chart-container { .chart-container {
position: relative; /* for absolutely positioned tooltip */ 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); fill: var(--fr-label-color);


line { line {
@@ -85,7 +86,9 @@
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
background: var(--fr-tooltip-bg); 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; border-radius: 6px;


ul { ul {


+ 7
- 7
src/js/objects/SvgTip.js 查看文件

@@ -52,10 +52,10 @@ export default class SvgTip {


fill() { fill() {
let title; let title;
if(this.index) {
if (this.index) {
this.container.setAttribute('data-point-index', this.index); this.container.setAttribute('data-point-index', this.index);
} }
if(this.titleValueFirst) {
if (this.titleValueFirst) {
title = `<strong>${this.titleValue}</strong>${this.titleName}`; title = `<strong>${this.titleValue}</strong>${this.titleName}`;
} else { } else {
title = `${this.titleName}<strong>${this.titleValue}</strong>`; title = `${this.titleName}<strong>${this.titleValue}</strong>`;
@@ -76,8 +76,8 @@ export default class SvgTip {
let li = $.create('li', { let li = $.create('li', {
innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div> innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div>
<div> <div>
<div class="tooltip-value">${ value === 0 || value ? value : '' }</div>
<div class="tooltip-label">${set.title ? set.title : '' }</div>
<div class="tooltip-value">${value === 0 || value ? value : ''}</div>
<div class="tooltip-label">${set.title ? set.title : ''}</div>
</div>` </div>`
}); });


@@ -90,15 +90,15 @@ export default class SvgTip {


this.top = this.y - this.container.offsetHeight this.top = this.y - this.container.offsetHeight
- TOOLTIP_POINTER_TRIANGLE_HEIGHT; - TOOLTIP_POINTER_TRIANGLE_HEIGHT;
this.left = this.x - width/2;
this.left = this.x - width / 2;
let maxLeft = this.parent.offsetWidth - width; let maxLeft = this.parent.offsetWidth - width;


let pointer = this.container.querySelector('.svg-pointer'); let pointer = this.container.querySelector('.svg-pointer');


if(this.left < 0) {
if (this.left < 0) {
pointer.style.left = `calc(50% - ${-1 * this.left}px)`; pointer.style.left = `calc(50% - ${-1 * this.left}px)`;
this.left = 0; this.left = 0;
} else if(this.left > maxLeft) {
} else if (this.left > maxLeft) {
let delta = this.left - maxLeft; let delta = this.left - maxLeft;
let pointerOffset = `calc(50% + ${delta}px)`; let pointerOffset = `calc(50% + ${delta}px)`;
pointer.style.left = pointerOffset; pointer.style.left = pointerOffset;


+ 3
- 3
src/js/utils/colors.js 查看文件

@@ -21,7 +21,7 @@ const PRESET_COLOR_MAP = {
'light-orange': '#FECDB8' 'light-orange': '#FECDB8'
}; };


function limitColor(r){
function limitColor(r) {
if (r > 255) return 255; if (r > 255) return 255;
else if (r < 0) return 0; else if (r < 0) return 0;
return r; return r;
@@ -34,11 +34,11 @@ export function lightenDarkenColor(color, amt) {
col = col.slice(1); col = col.slice(1);
usePound = true; usePound = true;
} }
let num = parseInt(col,16);
let num = parseInt(col, 16);
let r = limitColor((num >> 16) + amt); let r = limitColor((num >> 16) + amt);
let b = limitColor(((num >> 8) & 0x00FF) + amt); let b = limitColor(((num >> 8) & 0x00FF) + amt);
let g = limitColor((num & 0x0000FF) + 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) { export function isValidColor(string) {


Loading…
取消
儲存