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; z-index: 99999;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
color: #959da5;
text-align: center; text-align: center;
background: rgba(0, 0, 0, 0.8); color: #192734;
border-radius: 3px; 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 { ul {
padding-left: 0; padding-left: 0;
display: flex; display: flex;
} }
ol { ol {
padding-left: 0; padding-left: 0;
display: flex; display: flex;
} }
ul.data-point-list { ul.data-point-list {
li { li {
min-width: 90px; min-width: 90px;
flex: 1;
font-weight: 600; font-weight: 600;
} }
} }
strong {
color: #dfe2e5;
font-weight: 600;
}
.svg-pointer { .svg-pointer {
position: absolute; position: absolute;
height: 5px; height: 12px;
margin: 0 0 0 -5px; width: 12px;
content: ' '; border-radius: 2px;
border: 5px solid transparent; background: white;
border-top-color: rgba(0, 0, 0, 0.8); transform: rotate(45deg);
margin-top: -7px;
margin-left: -6px;
} }
&.comparison { &.comparison {
padding: 0;
text-align: left; text-align: left;
padding: 0px;
pointer-events: none; pointer-events: none;
.title { .title {
display: block; display: block;
padding: 10px; padding: 16px;
margin: 0; margin: 0;
color: #313B44;
font-weight: 600; font-weight: 600;
line-height: 1; line-height: 1;
pointer-events: none; pointer-events: none;
text-transform: uppercase;
} }
ul { ul {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
list-style: none; list-style: none;
} }
li { li {
display: inline-block; 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 value = set.formatted === 0 || set.formatted ? set.formatted : set.value;
let li = $.create('li', { let li = $.create('li', {
styles: { innerHTML: `<div class="tooltip-legend" style="background: ${color};"></div>
'border-top': `3px solid ${color}` <div>
}, <div class="tooltip-value">${ value === 0 || value ? value : '' }</div>
innerHTML: `<strong style="display: block;">${ value === 0 || value ? value : '' }</strong> <div class="tooltip-label">${set.title ? set.title : '' }</div>
${set.title ? set.title : '' }` </div>`
}); });
this.dataPointList.appendChild(li); 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 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', const DEFAULT_CHART_COLORS = ['light-blue', 'blue', 'violet', 'red', 'orange',
'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey']; 'yellow', 'green', 'light-green', 'purple', 'magenta', 'light-grey', 'dark-grey'];