Move functions into separate dir
Andrew Watkins
parent
1d8e42fe6e
commit
1cd661da82
|
|
@ -7,89 +7,7 @@ import _ from 'lodash'
|
||||||
import Dygraphs from 'src/external/dygraph'
|
import Dygraphs from 'src/external/dygraph'
|
||||||
import getRange from 'shared/parsing/getRangeForDygraph'
|
import getRange from 'shared/parsing/getRangeForDygraph'
|
||||||
|
|
||||||
const LINE_COLORS = [
|
import {LINE_COLORS, multiColumnBarPlotter} from 'src/shared/graphs/helpers'
|
||||||
'#00C9FF',
|
|
||||||
'#9394FF',
|
|
||||||
'#4ED8A0',
|
|
||||||
'#ff0054',
|
|
||||||
'#ffcc00',
|
|
||||||
'#33aa99',
|
|
||||||
'#9dfc5d',
|
|
||||||
'#92bcc3',
|
|
||||||
'#ca96fb',
|
|
||||||
'#ff00f0',
|
|
||||||
'#38b94a',
|
|
||||||
'#3844b9',
|
|
||||||
'#a0725b',
|
|
||||||
]
|
|
||||||
|
|
||||||
const darkenColor = colorStr => {
|
|
||||||
// Defined in dygraph-utils.js
|
|
||||||
const color = Dygraphs.toRGB_(colorStr)
|
|
||||||
color.r = Math.floor((255 + color.r) / 2)
|
|
||||||
color.g = Math.floor((255 + color.g) / 2)
|
|
||||||
color.b = Math.floor((255 + color.b) / 2)
|
|
||||||
return `rgb(${color.r},${color.g},${color.b})`
|
|
||||||
}
|
|
||||||
// Bar Graph code below is from http://dygraphs.com/tests/plotters.html
|
|
||||||
const multiColumnBarPlotter = e => {
|
|
||||||
// We need to handle all the series simultaneously.
|
|
||||||
if (e.seriesIndex !== 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const g = e.dygraph
|
|
||||||
const ctx = e.drawingContext
|
|
||||||
const sets = e.allSeriesPoints
|
|
||||||
const yBottom = e.dygraph.toDomYCoord(0)
|
|
||||||
|
|
||||||
// Find the minimum separation between x-values.
|
|
||||||
// This determines the bar width.
|
|
||||||
let minSep = Infinity
|
|
||||||
for (let j = 0; j < sets.length; j++) {
|
|
||||||
const points = sets[j]
|
|
||||||
for (let i = 1; i < points.length; i++) {
|
|
||||||
const sep = points[i].canvasx - points[i - 1].canvasx
|
|
||||||
if (sep < minSep) {
|
|
||||||
minSep = sep
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const barWidth = Math.floor(2.0 / 3 * minSep)
|
|
||||||
|
|
||||||
const fillColors = []
|
|
||||||
const strokeColors = g.getColors()
|
|
||||||
for (let i = 0; i < strokeColors.length; i++) {
|
|
||||||
fillColors.push(darkenColor(strokeColors[i]))
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let j = 0; j < sets.length; j++) {
|
|
||||||
ctx.fillStyle = fillColors[j]
|
|
||||||
ctx.strokeStyle = strokeColors[j]
|
|
||||||
for (let i = 0; i < sets[j].length; i++) {
|
|
||||||
const p = sets[j][i]
|
|
||||||
const centerX = p.canvasx
|
|
||||||
const xLeft = sets.length === 1
|
|
||||||
? centerX - barWidth / 2
|
|
||||||
: centerX - barWidth / 2 * (1 - j / (sets.length - 1))
|
|
||||||
|
|
||||||
ctx.fillRect(
|
|
||||||
xLeft,
|
|
||||||
p.canvasy,
|
|
||||||
barWidth / sets.length,
|
|
||||||
yBottom - p.canvasy
|
|
||||||
)
|
|
||||||
|
|
||||||
ctx.strokeRect(
|
|
||||||
xLeft,
|
|
||||||
p.canvasy,
|
|
||||||
barWidth / sets.length,
|
|
||||||
yBottom - p.canvasy
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default class Dygraph extends Component {
|
export default class Dygraph extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,87 @@
|
||||||
|
/* eslint-disable no-magic-numbers */
|
||||||
|
import Dygraphs from 'src/external/dygraph'
|
||||||
|
|
||||||
|
export const LINE_COLORS = [
|
||||||
|
'#00C9FF',
|
||||||
|
'#9394FF',
|
||||||
|
'#4ED8A0',
|
||||||
|
'#ff0054',
|
||||||
|
'#ffcc00',
|
||||||
|
'#33aa99',
|
||||||
|
'#9dfc5d',
|
||||||
|
'#92bcc3',
|
||||||
|
'#ca96fb',
|
||||||
|
'#ff00f0',
|
||||||
|
'#38b94a',
|
||||||
|
'#3844b9',
|
||||||
|
'#a0725b',
|
||||||
|
]
|
||||||
|
|
||||||
|
export const darkenColor = colorStr => {
|
||||||
|
// Defined in dygraph-utils.js
|
||||||
|
const color = Dygraphs.toRGB_(colorStr)
|
||||||
|
color.r = Math.floor((255 + color.r) / 2)
|
||||||
|
color.g = Math.floor((255 + color.g) / 2)
|
||||||
|
color.b = Math.floor((255 + color.b) / 2)
|
||||||
|
return `rgb(${color.r},${color.g},${color.b})`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bar Graph code below is from http://dygraphs.com/tests/plotters.html
|
||||||
|
export const multiColumnBarPlotter = e => {
|
||||||
|
// We need to handle all the series simultaneously.
|
||||||
|
if (e.seriesIndex !== 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const g = e.dygraph
|
||||||
|
const ctx = e.drawingContext
|
||||||
|
const sets = e.allSeriesPoints
|
||||||
|
const yBottom = e.dygraph.toDomYCoord(0)
|
||||||
|
|
||||||
|
// Find the minimum separation between x-values.
|
||||||
|
// This determines the bar width.
|
||||||
|
let minSep = Infinity
|
||||||
|
for (let j = 0; j < sets.length; j++) {
|
||||||
|
const points = sets[j]
|
||||||
|
for (let i = 1; i < points.length; i++) {
|
||||||
|
const sep = points[i].canvasx - points[i - 1].canvasx
|
||||||
|
if (sep < minSep) {
|
||||||
|
minSep = sep
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const barWidth = Math.floor(2.0 / 3 * minSep)
|
||||||
|
|
||||||
|
const fillColors = []
|
||||||
|
const strokeColors = g.getColors()
|
||||||
|
for (let i = 0; i < strokeColors.length; i++) {
|
||||||
|
fillColors.push(darkenColor(strokeColors[i]))
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let j = 0; j < sets.length; j++) {
|
||||||
|
ctx.fillStyle = fillColors[j]
|
||||||
|
ctx.strokeStyle = strokeColors[j]
|
||||||
|
for (let i = 0; i < sets[j].length; i++) {
|
||||||
|
const p = sets[j][i]
|
||||||
|
const centerX = p.canvasx
|
||||||
|
const xLeft = sets.length === 1
|
||||||
|
? centerX - barWidth / 2
|
||||||
|
: centerX - barWidth / 2 * (1 - j / (sets.length - 1))
|
||||||
|
|
||||||
|
ctx.fillRect(
|
||||||
|
xLeft,
|
||||||
|
p.canvasy,
|
||||||
|
barWidth / sets.length,
|
||||||
|
yBottom - p.canvasy
|
||||||
|
)
|
||||||
|
|
||||||
|
ctx.strokeRect(
|
||||||
|
xLeft,
|
||||||
|
p.canvasy,
|
||||||
|
barWidth / sets.length,
|
||||||
|
yBottom - p.canvasy
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue