15 changed files with 4455 additions and 2015 deletions
@ -0,0 +1,61 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
||||||
|
<meta content="utf-8" http-equiv="encoding"> |
||||||
|
|
||||||
|
<script src="../dist/index.dev.js" type="text/javascript"></script> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="chart" style="width: 50%; height: 500px;"></div> |
||||||
|
|
||||||
|
<script type="text/javascript"> |
||||||
|
var pod = new ChartwerkBarPod( |
||||||
|
document.getElementById('chart'), |
||||||
|
[ |
||||||
|
{ target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] }, |
||||||
|
// { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' }, |
||||||
|
// { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'}, |
||||||
|
// { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' }, |
||||||
|
], |
||||||
|
{ |
||||||
|
usePanning: false, |
||||||
|
axis: { |
||||||
|
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } }, |
||||||
|
y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } } |
||||||
|
}, |
||||||
|
stacked: false, |
||||||
|
matching: false, |
||||||
|
maxBarWidth: 20, |
||||||
|
minBarWidth: 4, |
||||||
|
zoomEvents: { |
||||||
|
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, |
||||||
|
}, |
||||||
|
annotations: [ |
||||||
|
{ key: 'm-1', color: 'red' }, |
||||||
|
{ key: 'm-2', color: 'green' } |
||||||
|
], |
||||||
|
eventsCallbacks: { |
||||||
|
zoomIn: (range) => { console.log('range', range) } |
||||||
|
}, |
||||||
|
renderLegend: false, |
||||||
|
} |
||||||
|
); |
||||||
|
console.time('render'); |
||||||
|
pod.render(); |
||||||
|
console.timeEnd('render'); |
||||||
|
|
||||||
|
function getData() { |
||||||
|
return [ |
||||||
|
[100, 15], [200, 20], [300, 10], |
||||||
|
]; |
||||||
|
} |
||||||
|
</script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
|
||||||
|
<style> |
||||||
|
.overlay { |
||||||
|
fill: black; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,55 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
|
||||||
<meta content="utf-8" http-equiv="encoding"> |
|
||||||
|
|
||||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
var pod = new ChartwerkBarPod( |
|
||||||
document.getElementById('chart'), |
|
||||||
[ |
|
||||||
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'], annotation: { enable: true, color: 'green'} }, |
|
||||||
{ target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'], annotation: { enable: true, color: 'black' } }, |
|
||||||
], |
|
||||||
{ |
|
||||||
usePanning: false, |
|
||||||
axis: { |
|
||||||
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] }, |
|
||||||
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 } |
|
||||||
}, |
|
||||||
zoomEvents: { |
|
||||||
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, |
|
||||||
}, |
|
||||||
eventsCallbacks: { |
|
||||||
zoomIn: (range) => { console.log('range', range) } |
|
||||||
}, |
|
||||||
renderLegend: false, |
|
||||||
type: { |
|
||||||
['non-discrete']: { |
|
||||||
enable: true, |
|
||||||
barWidth: { |
|
||||||
estimated: { value: 35, type: 'unit' }, |
|
||||||
max: 30, |
|
||||||
min: 10, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
); |
|
||||||
console.time('render'); |
|
||||||
pod.render(); |
|
||||||
console.timeEnd('render'); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
|
|
||||||
<style> |
|
||||||
.overlay { |
|
||||||
fill: none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
|
||||||
<meta content="utf-8" http-equiv="encoding"> |
|
||||||
|
|
||||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
var pod = new ChartwerkBarPod( |
|
||||||
document.getElementById('chart'), |
|
||||||
[ |
|
||||||
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [200, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] }, |
|
||||||
{ target: 'serie2', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] }, |
|
||||||
{ target: 'serie3', datapoints: [[100, -10, 5], [200, -5, -5], [300, -20, 15]], color: ['red', 'pink', 'blue'] }, |
|
||||||
{ target: 'serie4', datapoints: [[100, 10, 10], [200, 20, 15], [300, 30, 5]], color: ['green', 'yellow'] }, |
|
||||||
], |
|
||||||
{ |
|
||||||
usePanning: false, |
|
||||||
axis: { |
|
||||||
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 }, |
|
||||||
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 } |
|
||||||
}, |
|
||||||
zoomEvents: { |
|
||||||
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, |
|
||||||
}, |
|
||||||
eventsCallbacks: { |
|
||||||
zoomIn: (range) => { console.log('range', range) } |
|
||||||
}, |
|
||||||
renderLegend: false, |
|
||||||
// discrete type config |
|
||||||
type: { |
|
||||||
discrete: { |
|
||||||
enable: true, |
|
||||||
step: 100, |
|
||||||
groupSize: { |
|
||||||
width: { value: 60, type: 'percent', } |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
); |
|
||||||
console.time('render'); |
|
||||||
pod.render(); |
|
||||||
console.timeEnd('render'); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
|
|
||||||
<style> |
|
||||||
.overlay { |
|
||||||
fill: none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
|
||||||
<meta content="utf-8" http-equiv="encoding"> |
|
||||||
|
|
||||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
// use formatters for color and opacity |
|
||||||
const colorFormatter = (event) => (event.value > 50 ? 'red' : 'green'); |
|
||||||
const opacityFormatter = (event) => (event.key >= 200 ? 0.5 : 1); |
|
||||||
|
|
||||||
var pod = new ChartwerkBarPod( |
|
||||||
document.getElementById('chart'), |
|
||||||
[ |
|
||||||
{ target: 'serie1', datapoints: [[0, 50], [100, 70], [200, 40], [300, 90]], color: colorFormatter, opacity: opacityFormatter }, |
|
||||||
], |
|
||||||
{ |
|
||||||
usePanning: false, |
|
||||||
axis: { |
|
||||||
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6 }, |
|
||||||
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 } |
|
||||||
}, |
|
||||||
zoomEvents: { |
|
||||||
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, |
|
||||||
}, |
|
||||||
eventsCallbacks: { |
|
||||||
zoomIn: (range) => { console.log('range', range) } |
|
||||||
}, |
|
||||||
renderLegend: false, |
|
||||||
type: { |
|
||||||
discrete: { |
|
||||||
enable: true, |
|
||||||
step: 100, |
|
||||||
groupSize: { |
|
||||||
width: { value: 60, type: 'percent', } |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
); |
|
||||||
console.time('render'); |
|
||||||
pod.render(); |
|
||||||
console.timeEnd('render'); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
|
|
||||||
<style> |
|
||||||
.overlay { |
|
||||||
fill: none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,56 +0,0 @@ |
|||||||
<!DOCTYPE html> |
|
||||||
<html> |
|
||||||
<head> |
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
|
||||||
<meta content="utf-8" http-equiv="encoding"> |
|
||||||
|
|
||||||
<script src="../dist/index.dev.js" type="text/javascript"></script> |
|
||||||
</head> |
|
||||||
<body> |
|
||||||
<div id="chart" style="width: 50%; height: 500px;"></div> |
|
||||||
|
|
||||||
<script type="text/javascript"> |
|
||||||
var pod = new ChartwerkBarPod( |
|
||||||
document.getElementById('chart'), |
|
||||||
[ |
|
||||||
{ target: 'serie1', datapoints: [[100, 10, 20, 5], [180, 15, 30, 5], [300, 20, 35, 15]], color: ['red', 'pink', 'blue'] }, |
|
||||||
{ target: 'serie2', datapoints: [[150, 10, 10], [220, 20, 15], [330, 30, 5]], color: ['green', 'yellow'] }, |
|
||||||
], |
|
||||||
{ |
|
||||||
usePanning: false, |
|
||||||
axis: { |
|
||||||
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; }, ticksCount: 6, range: [50, 380] }, |
|
||||||
y: { format: 'custom', invert: false, valueFormatter: (value) => { return value + '%'; }, ticksCount: 8 } |
|
||||||
}, |
|
||||||
zoomEvents: { |
|
||||||
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, |
|
||||||
}, |
|
||||||
eventsCallbacks: { |
|
||||||
zoomIn: (range) => { console.log('range', range) } |
|
||||||
}, |
|
||||||
renderLegend: false, |
|
||||||
// non_discrete type config |
|
||||||
type: { |
|
||||||
['non-discrete']: { |
|
||||||
enable: true, |
|
||||||
barWidth: { |
|
||||||
estimated: { value: 35, type: 'unit' }, |
|
||||||
max: 30, |
|
||||||
min: 10, |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
); |
|
||||||
console.time('render'); |
|
||||||
pod.render(); |
|
||||||
console.timeEnd('render'); |
|
||||||
</script> |
|
||||||
</body> |
|
||||||
</html> |
|
||||||
|
|
||||||
<style> |
|
||||||
.overlay { |
|
||||||
fill: none; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,69 +0,0 @@ |
|||||||
import * as d3 from 'd3'; |
|
||||||
import * as _ from 'lodash'; |
|
||||||
|
|
||||||
|
|
||||||
const DEFAULT_ANNOTATION_OFFSET_Y = 4; //offset between triangle and bar in px
|
|
||||||
const DEFAULT_ANNOTATION_COLOR = 'red'; |
|
||||||
|
|
||||||
export class BarAnnotation { |
|
||||||
position: { x: number, y: number }; |
|
||||||
|
|
||||||
constructor( |
|
||||||
protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
|
|
||||||
protected groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>, // group - bars as one item
|
|
||||||
protected annotationOptions: { size: number, max?: number, min?: number, offset?: number, color?: string }, |
|
||||||
) { |
|
||||||
this.position = this.getGroupLastRectPosition(); |
|
||||||
this.renderAnnotation(); |
|
||||||
} |
|
||||||
|
|
||||||
protected renderAnnotation(): void { |
|
||||||
this.groupContainer.append('path') |
|
||||||
.attr('d', () => this.getTrianglePath()) |
|
||||||
.attr('fill', this.annotationOptions.color || DEFAULT_ANNOTATION_COLOR) |
|
||||||
.on('mouseover', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mousemove', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mouseout', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mousedown', () => { d3.event.stopPropagation(); }); |
|
||||||
} |
|
||||||
|
|
||||||
getGroupLastRectPosition(): { x: number, y: number } { |
|
||||||
const lastRect = _.last(this.groupContainer.selectAll('rect')?.nodes()); |
|
||||||
const barSelection = d3.select(lastRect); |
|
||||||
return { |
|
||||||
x: Math.ceil(_.toNumber(barSelection.attr('x'))), |
|
||||||
y: Math.ceil(_.toNumber(barSelection.attr('y'))), |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
protected getTrianglePath(): string { |
|
||||||
// (x, y) - top left corner of bar
|
|
||||||
const minTriangleSize = this.annotationOptions?.min; |
|
||||||
const maxTriagleSize = this.annotationOptions?.max; |
|
||||||
const yOffset = this.annotationOptions?.offset || DEFAULT_ANNOTATION_OFFSET_Y; |
|
||||||
const centerX = this.position.x + this.annotationOptions.size / 2; |
|
||||||
const correctedLength = _.clamp(this.annotationOptions.size, minTriangleSize, maxTriagleSize); |
|
||||||
|
|
||||||
const topY = Math.max(this.position.y - correctedLength - yOffset, 4); |
|
||||||
const topLeftCorner = { |
|
||||||
x: centerX - correctedLength / 2, |
|
||||||
y: topY, |
|
||||||
}; |
|
||||||
const topRightCorner = { |
|
||||||
x: centerX + correctedLength / 2, |
|
||||||
y: topY, |
|
||||||
}; |
|
||||||
const bottomMiddleCorner = { |
|
||||||
x: centerX, |
|
||||||
y: topY + correctedLength, |
|
||||||
}; |
|
||||||
|
|
||||||
return `M ${topLeftCorner.x} ${topLeftCorner.y} |
|
||||||
L ${topRightCorner.x} ${topRightCorner.y} |
|
||||||
L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
|
|
||||||
} |
|
||||||
|
|
||||||
redirectEventToOverlay(): void { |
|
||||||
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,183 +0,0 @@ |
|||||||
import { DataRow, DataItem } from './data_processor'; |
|
||||||
import { BarConfig } from './bar_options'; |
|
||||||
|
|
||||||
import { PodState } from '@chartwerk/core'; |
|
||||||
|
|
||||||
import { BarOptions, BarPodType, BarSerie, SizeType } from '../types'; |
|
||||||
|
|
||||||
import * as d3 from 'd3'; |
|
||||||
import * as _ from 'lodash'; |
|
||||||
|
|
||||||
|
|
||||||
export class BarGroup { |
|
||||||
constructor( |
|
||||||
protected overlay: d3.Selection<SVGRectElement, unknown, null, undefined>, // overlay from core. It should be global
|
|
||||||
protected container: d3.Selection<SVGGElement, unknown, null, undefined>, |
|
||||||
protected dataRow: DataRow, |
|
||||||
protected options: BarConfig, |
|
||||||
protected state: PodState<BarSerie, BarOptions>, |
|
||||||
protected boxParams: { width: number, height: number, zeroHorizon: number }, |
|
||||||
protected allDataLength: number, |
|
||||||
) { |
|
||||||
this.setGroupWidth(); |
|
||||||
this.setBarWidth(); |
|
||||||
|
|
||||||
this.renderBarGroup(); |
|
||||||
} |
|
||||||
|
|
||||||
protected _groupContainer: d3.Selection<SVGGElement, unknown, null, undefined>; |
|
||||||
protected _groupWidth: number; |
|
||||||
protected _barWidth: number; |
|
||||||
|
|
||||||
public getGroupContainer(): d3.Selection<SVGGElement, unknown, null, undefined> { |
|
||||||
return this._groupContainer; |
|
||||||
} |
|
||||||
|
|
||||||
public getGroupWidth(): number { |
|
||||||
return this._groupWidth; |
|
||||||
} |
|
||||||
|
|
||||||
public getBarWidth(): number { |
|
||||||
return this._barWidth; |
|
||||||
} |
|
||||||
|
|
||||||
protected renderBarGroup(): void { |
|
||||||
this._groupContainer = this.container.append('g').attr('class', `bar-group group-${this.dataRow.key}`); |
|
||||||
_.forEach(this.dataRow.items, (data: DataItem, serieIdx: number) => { |
|
||||||
this.renderStackedBars(data, serieIdx); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
protected renderStackedBars(data: DataItem, serieIdx: number): void { |
|
||||||
const barsHeightPositiveList = []; |
|
||||||
const barsHeightNegativeList = []; |
|
||||||
data.values.forEach((value: number, valueIdx: number) => { |
|
||||||
const barHeight = this.getBarHeight(value); |
|
||||||
const config = { |
|
||||||
position: { |
|
||||||
x: this.getBarPositionX(serieIdx), |
|
||||||
y: this.getBarPositionY(value, barsHeightPositiveList, barsHeightNegativeList, barHeight), |
|
||||||
}, |
|
||||||
width: this._barWidth, |
|
||||||
height: barHeight, |
|
||||||
color: data.colors[valueIdx], |
|
||||||
opacity: data.opacity[valueIdx], |
|
||||||
value, |
|
||||||
}; |
|
||||||
if(value >= 0) { |
|
||||||
barsHeightPositiveList.push(barHeight); |
|
||||||
} else { |
|
||||||
barsHeightNegativeList.push(barHeight); |
|
||||||
} |
|
||||||
|
|
||||||
this.renderBar(config); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
protected getBarPositionX(idx: number): number { |
|
||||||
return this.state.xScale(this.dataRow.key) + this._barWidth * idx; |
|
||||||
} |
|
||||||
|
|
||||||
protected getBarPositionY( |
|
||||||
value: number, barsHeightPositiveList: number[], barsHeightNegativeList: number[], barHeight: number |
|
||||||
): number { |
|
||||||
if(value >= 0) { |
|
||||||
const previousBarsHeight = _.sum(barsHeightPositiveList); |
|
||||||
return this.boxParams.zeroHorizon - previousBarsHeight - barHeight; |
|
||||||
} |
|
||||||
const previousBarsHeight = _.sum(barsHeightNegativeList); |
|
||||||
return this.boxParams.zeroHorizon + previousBarsHeight; |
|
||||||
} |
|
||||||
|
|
||||||
protected getBarHeight(value): number { |
|
||||||
return Math.abs(this.boxParams.zeroHorizon - this.state.yScale(value)); |
|
||||||
} |
|
||||||
|
|
||||||
protected setGroupWidth(): void { |
|
||||||
switch(this.options.barType) { |
|
||||||
case BarPodType.DISCRETE: |
|
||||||
this.setDiscreteGroupWidth(); |
|
||||||
return; |
|
||||||
case BarPodType.NON_DISCRETE: |
|
||||||
this.setNonDiscreteGroupWidth(); |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
protected setDiscreteGroupWidth(): void { |
|
||||||
const groupSizeConfig = this.options.dicreteConfig.groupSize.width; |
|
||||||
let width; |
|
||||||
if(groupSizeConfig.type === SizeType.PX) { |
|
||||||
width = groupSizeConfig.value; |
|
||||||
} |
|
||||||
if(groupSizeConfig.type === SizeType.PERCENT) { |
|
||||||
const factor = groupSizeConfig.value / 100; |
|
||||||
width = (this.boxParams.width / this.allDataLength) * factor; |
|
||||||
} |
|
||||||
this._groupWidth = _.clamp(width, this.options.dicreteConfig.groupSize.min || width, this.options.dicreteConfig.groupSize.max || width); |
|
||||||
} |
|
||||||
|
|
||||||
protected setNonDiscreteGroupWidth(): void { |
|
||||||
const widthConfig = this.options.nonDicreteConfig.barWidth; |
|
||||||
if(widthConfig.estimated.value === undefined) { |
|
||||||
const groupWidth = this.boxParams.width / (this.allDataLength * this.dataRow.items.length); |
|
||||||
this._groupWidth = groupWidth * 0.5; |
|
||||||
return; |
|
||||||
} |
|
||||||
let width; |
|
||||||
if(widthConfig.estimated.type === SizeType.PX) { |
|
||||||
width = widthConfig.estimated.value; |
|
||||||
} |
|
||||||
if(widthConfig.estimated.type === SizeType.UNIT) { |
|
||||||
width = this.state.absXScale(widthConfig.estimated.value); |
|
||||||
} |
|
||||||
this._groupWidth = _.clamp(width, widthConfig.min || width, widthConfig.max || width); |
|
||||||
} |
|
||||||
|
|
||||||
protected setBarWidth(): void { |
|
||||||
switch(this.options.barType) { |
|
||||||
case BarPodType.DISCRETE: |
|
||||||
this._barWidth = this._groupWidth / this.dataRow.items.length; |
|
||||||
return; |
|
||||||
case BarPodType.NON_DISCRETE: |
|
||||||
this._barWidth = this._groupWidth; |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
protected renderBar(config: any): void { |
|
||||||
this._groupContainer.append('rect') |
|
||||||
.attr('x', config.position.x) |
|
||||||
.attr('y', config.position.y) |
|
||||||
.attr('width', config.width) |
|
||||||
.attr('height', config.height) |
|
||||||
.style('fill', config.color) |
|
||||||
.attr('opacity', config.opacity) |
|
||||||
.on('contextmenu', this.contextMenu.bind(this)) |
|
||||||
.on('mouseover', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mousemove', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mouseout', this.redirectEventToOverlay.bind(this)) |
|
||||||
.on('mousedown', () => { d3.event.stopPropagation(); }); |
|
||||||
} |
|
||||||
|
|
||||||
contextMenu(): void { |
|
||||||
d3.event.preventDefault(); // do not open browser's context menu.
|
|
||||||
const event = d3.mouse(this.container.node()); |
|
||||||
|
|
||||||
this.options.callbackContextMenu({ |
|
||||||
position: { |
|
||||||
eventX: event[0], |
|
||||||
eventY: event[1], |
|
||||||
pageX: d3.event.pageX, |
|
||||||
pageY: d3.event.pageY, |
|
||||||
valueX: this.state.xScale.invert(event[0]), |
|
||||||
valueY: this.state.yScale.invert(event[1]), |
|
||||||
}, |
|
||||||
data: this.dataRow, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
redirectEventToOverlay(): void { |
|
||||||
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event)); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,46 +0,0 @@ |
|||||||
import { PodState } from '@chartwerk/core'; |
|
||||||
import { DataRow } from './data_processor'; |
|
||||||
import { BarConfig } from './bar_options'; |
|
||||||
|
|
||||||
import { BarOptions, BarSerie, BarPodType, DiscreteConfig } from '../types'; |
|
||||||
|
|
||||||
import * as _ from 'lodash'; |
|
||||||
|
|
||||||
// It is not a real bar state. Just rewrite some core params. like xScale/yScale
|
|
||||||
// TODO: import core scale and extend it, same to bar_series and bar_options
|
|
||||||
|
|
||||||
export function setBarScaleX(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarConfig): void { |
|
||||||
switch(options.barType) { |
|
||||||
case BarPodType.DISCRETE: |
|
||||||
const config: DiscreteConfig = options.dicreteConfig; |
|
||||||
let discreteStep = 0; |
|
||||||
if(_.isNumber(config.step)) { |
|
||||||
discreteStep = config.step; |
|
||||||
} else { |
|
||||||
if(!_.isEmpty(dataRows)) { |
|
||||||
discreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length; |
|
||||||
} |
|
||||||
} |
|
||||||
state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + discreteStep]; |
|
||||||
return; |
|
||||||
case BarPodType.NON_DISCRETE: |
|
||||||
if(!_.isEmpty(options.axis.x.range)) { |
|
||||||
return; |
|
||||||
} |
|
||||||
let nonDiscreteStep = 0; |
|
||||||
if(!_.isEmpty(dataRows)) { |
|
||||||
nonDiscreteStep = (_.last(dataRows).key - _.first(dataRows).key) / dataRows.length; |
|
||||||
} |
|
||||||
state.xValueRange = [state.xValueRange[0], state.xValueRange[1] + nonDiscreteStep]; |
|
||||||
return; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
export function setBarScaleY(state: PodState<BarSerie, BarOptions>, dataRows: DataRow[], options: BarOptions): void { |
|
||||||
if(!_.isEmpty(options.axis.y.range)) { |
|
||||||
return; |
|
||||||
} |
|
||||||
const maxValue = _.max(_.map(dataRows, (dataRow: DataRow) => dataRow.maxSumm)); |
|
||||||
const minValue = _.min(_.map(dataRows, (dataRow: DataRow) => dataRow.minSubtraction)); |
|
||||||
state.yValueRange = [minValue, maxValue]; |
|
||||||
} |
|
||||||
@ -1,143 +0,0 @@ |
|||||||
import { |
|
||||||
Datapoint, Color, ValueX, Opacity, |
|
||||||
BarPodType, BarSerie |
|
||||||
} from '../types'; |
|
||||||
|
|
||||||
import { BarConfig } from './bar_options'; |
|
||||||
|
|
||||||
import * as _ from 'lodash'; |
|
||||||
|
|
||||||
export type DataRow = { |
|
||||||
key: number; // x
|
|
||||||
items: DataItem[]; |
|
||||||
maxSumm: number; |
|
||||||
minSubtraction: number; |
|
||||||
}; |
|
||||||
export type DataItem = { |
|
||||||
target: string; // serie target
|
|
||||||
values: number[]; // y list
|
|
||||||
colors: string[]; |
|
||||||
opacity: number[]; |
|
||||||
}; |
|
||||||
const DEFAULT_BAR_COLOR = 'green'; |
|
||||||
const DEFAULT_OPACITY = 1; |
|
||||||
|
|
||||||
export class DataProcessor { |
|
||||||
_formattedDataRows: DataRow[] = []; |
|
||||||
|
|
||||||
constructor(protected visibleSeries: BarSerie[], protected options: BarConfig) { |
|
||||||
this.validateData(); |
|
||||||
switch(this.options.barType) { |
|
||||||
case BarPodType.DISCRETE: |
|
||||||
this.setDataRowsForDiscreteType(); |
|
||||||
break; |
|
||||||
case BarPodType.NON_DISCRETE: |
|
||||||
this.setDataRowsForNonDiscreteType(); |
|
||||||
break; |
|
||||||
default: |
|
||||||
throw new Error(`Bar DataProcessor: Unknown BarPodType ${this.options.barType}`); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
public get dataRows(): DataRow[] { |
|
||||||
return this._formattedDataRows; |
|
||||||
} |
|
||||||
|
|
||||||
protected setDataRowsForDiscreteType(): void { |
|
||||||
const zippedData = _.zip(..._.map(this.visibleSeries, serie => serie.datapoints)); |
|
||||||
this._formattedDataRows = _.map(zippedData, (dataRow: Datapoint[], rowIdx: number) => { |
|
||||||
return { |
|
||||||
key: _.first(_.first(dataRow)), // x
|
|
||||||
items: _.map(dataRow, (datapoint: Datapoint, pointIdx: number) => { |
|
||||||
const serie = this.visibleSeries[pointIdx]; |
|
||||||
const values = _.tail(datapoint); |
|
||||||
return { |
|
||||||
target: serie.target, |
|
||||||
values, // y list
|
|
||||||
colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target), |
|
||||||
opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target), |
|
||||||
} |
|
||||||
}), |
|
||||||
maxSumm: _.max(_.map(dataRow, (datapoint: Datapoint) => this.getMaxSumm(_.tail(datapoint)))), // max y axis scale
|
|
||||||
minSubtraction: _.min(_.map(dataRow, (datapoint: Datapoint) => this.getMinSubtraction(_.tail(datapoint)))), // min y axis scale
|
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
protected setDataRowsForNonDiscreteType(): void { |
|
||||||
for(let serie of this.visibleSeries) { |
|
||||||
const rows = _.map(serie.datapoints, (datapoint: Datapoint) => { |
|
||||||
const values = _.tail(datapoint); |
|
||||||
return { |
|
||||||
key: datapoint[0], // x
|
|
||||||
items: [ |
|
||||||
{ |
|
||||||
target: serie.target, |
|
||||||
values, // y list
|
|
||||||
colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target), |
|
||||||
opacity: this.getOpacityForEachValue(values, serie.opacity, datapoint[0], serie.target), |
|
||||||
} |
|
||||||
], |
|
||||||
maxSumm: this.getMaxSumm(values), // max y axis scale
|
|
||||||
minSubtraction: this.getMinSubtraction(values), // min y axis scale
|
|
||||||
} |
|
||||||
}); |
|
||||||
this._formattedDataRows = _.concat(this._formattedDataRows, rows); |
|
||||||
} |
|
||||||
this._formattedDataRows = _.sortBy(this._formattedDataRows, 'key'); |
|
||||||
} |
|
||||||
|
|
||||||
getColorsForEachValue(values: number[], color: Color, key: ValueX, target: string): string[] { |
|
||||||
if(_.isString(color)) { |
|
||||||
return _.map(values, value => color); |
|
||||||
} |
|
||||||
if(_.isArray(color)) { |
|
||||||
return _.map(values, (value, i) => color[i] || DEFAULT_BAR_COLOR); |
|
||||||
} |
|
||||||
if(_.isFunction(color)) { |
|
||||||
return _.map(values, (value, i) => (color as Function)({ value, barIndex: i, key, target })); |
|
||||||
} |
|
||||||
throw new Error(`Unknown type of serie color: ${target} ${color}`); |
|
||||||
} |
|
||||||
|
|
||||||
getOpacityForEachValue(values: number[], opacity: Opacity | undefined, key: ValueX, target: string): number[] { |
|
||||||
if(opacity === undefined) { |
|
||||||
return _.map(values, value => DEFAULT_OPACITY); |
|
||||||
} |
|
||||||
if(_.isNumber(opacity)) { |
|
||||||
return _.map(values, value => opacity); |
|
||||||
} |
|
||||||
if(_.isArray(opacity)) { |
|
||||||
return _.map(values, (value, i) => !_.isNil(opacity[i]) ? opacity[i] : DEFAULT_OPACITY); |
|
||||||
} |
|
||||||
if(_.isFunction(opacity)) { |
|
||||||
return _.map(values, (value, i) => (opacity as Function)({ value, barIndex: i, key, target })); |
|
||||||
} |
|
||||||
throw new Error(`Unknown type of serie opacity: ${target} ${opacity}`); |
|
||||||
} |
|
||||||
|
|
||||||
getMaxSumm(values: number[]): number { |
|
||||||
return values.reduce((prev, curr) => curr > 0 ? prev + curr : prev, 0); |
|
||||||
} |
|
||||||
|
|
||||||
getMinSubtraction(values: number[]): number { |
|
||||||
return values.reduce((prev, curr) => curr < 0 ? prev + curr : prev, 0); |
|
||||||
} |
|
||||||
|
|
||||||
validateData(): void { |
|
||||||
if(this.options.barType === BarPodType.NON_DISCRETE) { |
|
||||||
return; |
|
||||||
} |
|
||||||
// TODO: move non-empty datapoints validation to core
|
|
||||||
if(_.isEmpty(this.visibleSeries)) { |
|
||||||
return; |
|
||||||
} |
|
||||||
const xValuesList = _.map(_.first(this.visibleSeries).datapoints, dp => dp[0]); |
|
||||||
_.forEach(this.visibleSeries, serie => { |
|
||||||
const serieXList = _.map(serie.datapoints, dp => dp[0]); |
|
||||||
if(!_.isEqual(xValuesList, serieXList)) { |
|
||||||
throw new Error(`Bar DataProcessor: All series should have equal X values lists`); |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue