@@ -239,6 +239,8 @@ const CHART_POST_ANIMATE_TIMEOUT = 400; | |||
const DEFAULT_AXIS_CHART_TYPE = 'line'; | |||
const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; | |||
const AXIS_LEGEND_BAR_SIZE = 100; | |||
const BAR_CHART_SPACE_RATIO = 0.5; | |||
const MIN_BAR_PERCENT_HEIGHT = 0.01; | |||
@@ -350,6 +352,7 @@ const AXIS_TICK_LENGTH = 6; | |||
const LABEL_MARGIN = 4; | |||
const FONT_SIZE = 10; | |||
const BASE_LINE_COLOR = '#dadada'; | |||
const FONT_FILL = '#555b51'; | |||
function $$1(expr, con) { | |||
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; | |||
@@ -486,6 +489,35 @@ function heatSquare(className, x, y, size, fill='none', data={}) { | |||
return createSVG("rect", args); | |||
} | |||
function legendBar(x, y, size, fill='none', label) { | |||
let args = { | |||
className: 'legend-bar', | |||
x: 0, | |||
y: 0, | |||
width: size, | |||
height: '2px', | |||
fill: fill | |||
}; | |||
let text = createSVG('text', { | |||
className: 'legend-dataset-text', | |||
x: 0, | |||
y: 0, | |||
dy: (FONT_SIZE * 2) + 'px', | |||
'font-size': (FONT_SIZE * 1.2) + 'px', | |||
'text-anchor': 'start', | |||
fill: FONT_FILL, | |||
innerHTML: label | |||
}); | |||
let group = createSVG('g', { | |||
transform: `translate(${x}, ${y})` | |||
}); | |||
group.appendChild(createSVG("rect", args)); | |||
group.appendChild(text); | |||
return group; | |||
} | |||
function makeText(className, x, y, content, fontSize = FONT_SIZE) { | |||
return createSVG('text', { | |||
className: className, | |||
@@ -1292,9 +1324,7 @@ class BaseChart { | |||
setTimeout(() => {this.update(this.data);}, this.initTimeout); | |||
} | |||
if(!onlyWidthChange) { | |||
this.renderLegend(); | |||
} | |||
this.renderLegend(); | |||
this.setupNavigation(init); | |||
} | |||
@@ -1363,7 +1393,7 @@ class BaseChart { | |||
if(this.title.length) { | |||
titleAreaHeight = 30; | |||
} | |||
if(this.showLegend) { | |||
if(this.config.showLegend) { | |||
legendAreaHeight = 30; | |||
} | |||
this.svg = makeSVGContainer( | |||
@@ -1374,6 +1404,8 @@ class BaseChart { | |||
); | |||
this.svgDefs = makeSVGDefs(this.svg); | |||
console.log(this.baseHeight, titleAreaHeight, legendAreaHeight); | |||
if(this.title.length) { | |||
this.titleEL = makeText( | |||
'title', | |||
@@ -1392,7 +1424,7 @@ class BaseChart { | |||
`translate(${this.leftMargin}, ${top})` | |||
); | |||
top = this.baseHeight + titleAreaHeight; | |||
top = this.baseHeight - titleAreaHeight; | |||
this.legendArea = makeSVGGroup( | |||
this.svg, | |||
'chart-legend', | |||
@@ -3204,21 +3236,24 @@ class AxisChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
// let s = this.data; | |||
// this.statsWrapper.textContent = ''; | |||
// if(s.datasets.length > 1) { | |||
// s.datasets.map((d, i) => { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// ${d.name} | |||
// </span>`; | |||
// }); | |||
// } | |||
let s = this.data; | |||
this.legendArea.textContent = ''; | |||
if(s.datasets.length > 1) { | |||
s.datasets.map((d, i) => { | |||
let barWidth = AXIS_LEGEND_BAR_SIZE; | |||
// let rightEndPoint = this.baseWidth - this.leftMargin - this.rightMargin; | |||
// let multiplier = s.datasets.length - i; | |||
let rect = legendBar( | |||
// rightEndPoint - multiplier * barWidth, // To right align | |||
barWidth * i, | |||
'0', | |||
barWidth, | |||
this.colors[i], | |||
d.name); | |||
this.legendArea.appendChild(rect); | |||
}); | |||
} | |||
} | |||
makeOverlay() { | |||
@@ -1 +1 @@ | |||
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .graph-focus-margin{margin:0 5%}.chart-container>.title{margin-top:25px;margin-left:25px;text-align:left;font-weight:400;font-size:12px;color:#6c7680}.chart-container .graphics{margin-top:10px;padding-top:10px;padding-bottom:10px;position:relative}.chart-container .graph-stats-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-webkit-box-flex:1;-ms-flex:1;flex:1}.chart-container .graph-stats-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:10px}.chart-container .graph-stats-container:after,.chart-container .graph-stats-container:before{content:"";display:block}.chart-container .graph-stats-container .stats{padding-bottom:15px}.chart-container .graph-stats-container .stats-title{color:#8d99a6}.chart-container .graph-stats-container .stats-value{font-size:20px;font-weight:300}.chart-container .graph-stats-container .stats-description{font-size:12px;color:#8d99a6}.chart-container .graph-stats-container .graph-data .stats-value{color:#98d85b}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .percentage-graph .progress{margin-bottom:0}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px}.chart-container .indicator,.chart-container .indicator-right{background:none;font-size:12px;vertical-align:middle;font-weight:700;color:#6c7680}.chart-container .indicator i{content:"";display:inline-block;height:8px;width:8px;border-radius:8px}.chart-container .indicator:before,.chart-container .indicator i{margin:0 4px 0 0}.chart-container .indicator-right:after{margin:0 0 0 4px} | |||
.chart-container{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.chart-container .axis,.chart-container .chart-label{fill:#555b51}.chart-container .axis line,.chart-container .chart-label line{stroke:#dadada}.chart-container .dataset-units circle{stroke:#fff;stroke-width:2}.chart-container .dataset-units path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container .dataset-path{stroke-width:2px}.chart-container .path-group path{fill:none;stroke-opacity:1;stroke-width:2px}.chart-container line.dashed{stroke-dasharray:5,3}.chart-container .axis-line .specific-value{text-anchor:start}.chart-container .axis-line .y-line{text-anchor:end}.chart-container .axis-line .x-line{text-anchor:middle}.chart-container .progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#f5f5f5;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1)}.chart-container .progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#36414c;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);-webkit-transition:width .6s ease;transition:width .6s ease}.chart-container .graph-svg-tip{position:absolute;z-index:1;padding:10px;font-size:12px;color:#959da5;text-align:center;background:rgba(0,0,0,.8);border-radius:3px}.chart-container .graph-svg-tip ol,.chart-container .graph-svg-tip ul{padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex}.chart-container .graph-svg-tip ul.data-point-list li{min-width:90px;-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:600}.chart-container .graph-svg-tip strong{color:#dfe2e5;font-weight:600}.chart-container .graph-svg-tip .svg-pointer{position:absolute;height:5px;margin:0 0 0 -5px;content:" ";border:5px solid transparent;border-top-color:rgba(0,0,0,.8)}.chart-container .graph-svg-tip.comparison{padding:0;text-align:left;pointer-events:none}.chart-container .graph-svg-tip.comparison .title{display:block;padding:10px;margin:0;font-weight:600;line-height:1;pointer-events:none}.chart-container .graph-svg-tip.comparison ul{margin:0;white-space:nowrap;list-style:none}.chart-container .graph-svg-tip.comparison li{display:inline-block;padding:5px 10px} |
@@ -264,8 +264,6 @@ var heatmapData = { | |||
end: end | |||
}; | |||
// ================================================================================ | |||
var c1 = document.querySelector("#chart-composite-1"); | |||
var c2 = document.querySelector("#chart-composite-2"); | |||
@@ -1,11 +1,11 @@ | |||
import BaseChart from './BaseChart'; | |||
import { dataPrep, zeroDataPrep, getShortenedLabels } from '../utils/axis-chart-utils'; | |||
import { Y_AXIS_LEFT_MARGIN, Y_AXIS_RIGHT_MARGIN } from '../utils/constants'; | |||
import { Y_AXIS_LEFT_MARGIN, Y_AXIS_RIGHT_MARGIN, AXIS_LEGEND_BAR_SIZE } from '../utils/constants'; | |||
import { getComponent } from '../objects/ChartComponents'; | |||
import { getOffset, fire } from '../utils/dom'; | |||
import { calcChartIntervals, getIntervalSize, getValueRange, getZeroIndex, scale } from '../utils/intervals'; | |||
import { floatTwo } from '../utils/helpers'; | |||
import { makeOverlay, updateOverlay } from '../utils/draw'; | |||
import { makeOverlay, updateOverlay, legendBar } from '../utils/draw'; | |||
import { MIN_BAR_PERCENT_HEIGHT, BAR_CHART_SPACE_RATIO, LINE_CHART_DOT_SIZE } from '../utils/constants'; | |||
export default class AxisChart extends BaseChart { | |||
@@ -395,21 +395,24 @@ export default class AxisChart extends BaseChart { | |||
} | |||
renderLegend() { | |||
// let s = this.data; | |||
// this.statsWrapper.textContent = ''; | |||
// if(s.datasets.length > 1) { | |||
// s.datasets.map((d, i) => { | |||
// let stats = $.create('div', { | |||
// className: 'stats', | |||
// inside: this.statsWrapper | |||
// }); | |||
// stats.innerHTML = `<span class="indicator"> | |||
// <i style="background: ${this.colors[i]}"></i> | |||
// ${d.name} | |||
// </span>`; | |||
// }); | |||
// } | |||
let s = this.data; | |||
this.legendArea.textContent = ''; | |||
if(s.datasets.length > 1) { | |||
s.datasets.map((d, i) => { | |||
let barWidth = AXIS_LEGEND_BAR_SIZE; | |||
// let rightEndPoint = this.baseWidth - this.leftMargin - this.rightMargin; | |||
// let multiplier = s.datasets.length - i; | |||
let rect = legendBar( | |||
// rightEndPoint - multiplier * barWidth, // To right align | |||
barWidth * i, | |||
'0', | |||
barWidth, | |||
this.colors[i], | |||
d.name); | |||
this.legendArea.appendChild(rect); | |||
}); | |||
} | |||
} | |||
makeOverlay() { | |||
@@ -126,9 +126,7 @@ export default class BaseChart { | |||
setTimeout(() => {this.update(this.data);}, this.initTimeout); | |||
} | |||
if(!onlyWidthChange) { | |||
this.renderLegend(); | |||
} | |||
this.renderLegend(); | |||
this.setupNavigation(init); | |||
} | |||
@@ -197,7 +195,7 @@ export default class BaseChart { | |||
if(this.title.length) { | |||
titleAreaHeight = 30; | |||
} | |||
if(this.showLegend) { | |||
if(this.config.showLegend) { | |||
legendAreaHeight = 30; | |||
} | |||
this.svg = makeSVGContainer( | |||
@@ -208,6 +206,8 @@ export default class BaseChart { | |||
); | |||
this.svgDefs = makeSVGDefs(this.svg); | |||
console.log(this.baseHeight, titleAreaHeight, legendAreaHeight); | |||
if(this.title.length) { | |||
this.titleEL = makeText( | |||
'title', | |||
@@ -226,7 +226,7 @@ export default class BaseChart { | |||
`translate(${this.leftMargin}, ${top})` | |||
); | |||
top = this.baseHeight + titleAreaHeight; | |||
top = this.baseHeight - titleAreaHeight; | |||
this.legendArea = makeSVGGroup( | |||
this.svg, | |||
'chart-legend', | |||
@@ -29,6 +29,8 @@ export const CHART_POST_ANIMATE_TIMEOUT = 400; | |||
export const DEFAULT_AXIS_CHART_TYPE = 'line'; | |||
export const AXIS_DATASET_CHART_TYPES = ['line', 'bar']; | |||
export const AXIS_LEGEND_BAR_SIZE = 100; | |||
export const BAR_CHART_SPACE_RATIO = 0.5; | |||
export const MIN_BAR_PERCENT_HEIGHT = 0.01; | |||
@@ -6,6 +6,7 @@ export const AXIS_TICK_LENGTH = 6; | |||
const LABEL_MARGIN = 4; | |||
export const FONT_SIZE = 10; | |||
const BASE_LINE_COLOR = '#dadada'; | |||
const FONT_FILL = '#555b51'; | |||
function $(expr, con) { | |||
return typeof expr === "string"? (con || document).querySelector(expr) : expr || null; | |||
@@ -148,6 +149,35 @@ export function heatSquare(className, x, y, size, fill='none', data={}) { | |||
return createSVG("rect", args); | |||
} | |||
export function legendBar(x, y, size, fill='none', label) { | |||
let args = { | |||
className: 'legend-bar', | |||
x: 0, | |||
y: 0, | |||
width: size, | |||
height: '2px', | |||
fill: fill | |||
}; | |||
let text = createSVG('text', { | |||
className: 'legend-dataset-text', | |||
x: 0, | |||
y: 0, | |||
dy: (FONT_SIZE * 2) + 'px', | |||
'font-size': (FONT_SIZE * 1.2) + 'px', | |||
'text-anchor': 'start', | |||
fill: FONT_FILL, | |||
innerHTML: label | |||
}); | |||
let group = createSVG('g', { | |||
transform: `translate(${x}, ${y})` | |||
}); | |||
group.appendChild(createSVG("rect", args)); | |||
group.appendChild(text); | |||
return group; | |||
} | |||
export function makeText(className, x, y, content, fontSize = FONT_SIZE) { | |||
return createSVG('text', { | |||
className: className, | |||
@@ -3,58 +3,6 @@ | |||
font-family: -apple-system, BlinkMacSystemFont, | |||
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", | |||
"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | |||
.graph-focus-margin { | |||
margin: 0px 5%; | |||
} | |||
&>.title { | |||
margin-top: 25px; | |||
margin-left: 25px; | |||
text-align: left; | |||
font-weight: normal; | |||
font-size: 12px; | |||
color: #6c7680; | |||
} | |||
.graphics { | |||
margin-top: 10px; | |||
padding-top: 10px; | |||
padding-bottom: 10px; | |||
position: relative; | |||
} | |||
.graph-stats-group { | |||
display: flex; | |||
justify-content: space-around; | |||
flex: 1; | |||
} | |||
.graph-stats-container { | |||
display: flex; | |||
justify-content: space-between; | |||
padding: 10px; | |||
&:before, | |||
&:after { | |||
content: ''; | |||
display: block; | |||
} | |||
.stats { | |||
padding-bottom: 15px; | |||
} | |||
.stats-title { | |||
color: #8D99A6; | |||
} | |||
.stats-value { | |||
font-size: 20px; | |||
font-weight: 300; | |||
} | |||
.stats-description { | |||
font-size: 12px; | |||
color: #8D99A6; | |||
} | |||
.graph-data { | |||
.stats-value { | |||
color: #98d85b; | |||
} | |||
} | |||
} | |||
.axis, .chart-label { | |||
fill: #555b51; | |||
// temp commented | |||
@@ -62,11 +10,6 @@ | |||
stroke: #dadada; | |||
} | |||
} | |||
.percentage-graph { | |||
.progress { | |||
margin-bottom: 0px; | |||
} | |||
} | |||
.dataset-units { | |||
circle { | |||
stroke: #fff; | |||
@@ -192,29 +135,6 @@ | |||
} | |||
} | |||
} | |||
/*Indicators*/ | |||
.indicator, | |||
.indicator-right { | |||
background: none; | |||
font-size: 12px; | |||
vertical-align: middle; | |||
font-weight: bold; | |||
color: #6c7680; | |||
} | |||
.indicator i { | |||
content: ''; | |||
display: inline-block; | |||
height: 8px; | |||
width: 8px; | |||
border-radius: 8px; | |||
} | |||
.indicator::before,.indicator i { | |||
margin: 0 4px 0 0px; | |||
} | |||
.indicator-right::after { | |||
margin: 0 0 0 4px; | |||
} | |||
} | |||