jingrow/charts
1
0
Fork 0
Code Pull Requests Activity

Merge 479752c05f38de3d61fb7e934d89194b883a1647 into master

Browse Source
This commit is contained in:
Arjun Choudhary 2022-11-22 10:32:53 +05:30
commit ac68baed9a
3 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/css/charts.scss
View File

@ -60,57 +60,83 @@
z-index: 99999;
padding: 10px;
font-size: 12px;
color: #959da5;
text-align: center;
background: rgba(0, 0, 0, 0.8);
border-radius: 3px;
color: #192734;
background: #FFFFFF;
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 {
padding-left: 0;
display: flex;
}
ol {
padding-left: 0;
display: flex;
}
ul.data-point-list {
li {
min-width: 90px;
flex: 1;
font-weight: 600;
}
}
strong {
color: #dfe2e5;
font-weight: 600;
}
.svg-pointer {
position: absolute;
height: 5px;
margin: 0 0 0 -5px;
content: ' ';
border: 5px solid transparent;
border-top-color: rgba(0, 0, 0, 0.8);
height: 12px;
width: 12px;
border-radius: 2px;
background: white;
transform: rotate(45deg);
margin-top: -7px;
margin-left: -6px;
}
&.comparison {
padding: 0;
text-align: left;
padding: 0px;
pointer-events: none;
.title {
display: block;
padding: 10px;
padding: 16px;
margin: 0;
color: #313B44;
font-weight: 600;
line-height: 1;
pointer-events: none;
text-transform: uppercase;
}
ul {
margin: 0;
white-space: nowrap;
list-style: none;
}
li {
display: inline-block;
padding: 5px 10px;
display: flex;
flex-direction: row;
font-weight: 600;
line-height: 1;
padding: 5px 15px 15px 15px;
.tooltip-label {
margin-top: 4px;
font-size: 11px;
color: #313B44;
}
}
.tooltip-legend {
height: 12px;
width: 12px;
margin-right: 8px;
border-radius: 2px;
}
}
}

10
src/js/objects/SvgTip.js
View File

@ -67,11 +67,11 @@ export default class SvgTip {
let value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
let li = $.create('li', {
styles: {
'border-top': `3px solid ${color}`
},
innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong>
${set.title ? set.title : '' }`
innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div>
<div>
<div class="tooltip-value">${ value === 0 || value ? value : '' }</div>
<div class="tooltip-label">${set.title ? set.title : '' }</div>
</div>`
});
this.dataPointList.appendChild(li);

2
src/js/utils/constants.js
View File

@ -85,7 +85,7 @@ export const HEATMAP_GUTTER_SIZE = 2;
export const DEFAULT_CHAR_WIDTH = 7;
export const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 5;
export const TOOLTIP_POINTER_TRIANGLE_HEIGHT = 7.48;
const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];