@@ -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 { | ||||
@@ -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; | ||||
@@ -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) { | ||||