chartwerk
/
bar-pod
4
0
Fork 0
Code Issues 3 Pull Requests 2 Projects Releases Wiki Activity
Browse Source

get y scale only once

merge-requests/2/head
vargburz 2 years ago
parent
44d90f605d
commit
d2ccaea740
4 changed files with 47224 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 24
      demo.html
  2. 6
      dist/index.d.ts
  3. 47185
      dist/index.js
  4. 20
      src/index.ts

24
demo.html
Unescape View File

@ -13,7 +13,7 @@
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'test11', datapoints: [[100, 15], [110, 20], [300, 10]], matchedKey: 'm-1', color: 'red' },
{ target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red' },
{ 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' },
@ -29,7 +29,29 @@
maxBarWidth: 20
}
);
console.time('render');
pod.render();
console.timeEnd('render');
function getData() {
return [
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
[100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10], [100, 15], [110, 20], [300, 10],
];
}
</script>
</body>
</html>

6
dist/index.d.ts vendored
Unescape View File

@ -3,8 +3,10 @@ import { BarTimeSerie, BarOptions, RowValues } from './types';
import * as d3 from 'd3';
export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
metricsContainer: any;
barYScale: null | d3.ScaleLinear<number, number>;
constructor(el: HTMLElement, _series?: BarTimeSerie[], _options?: BarOptions);
protected renderMetrics(): void;
setBarPodScales(): void;
renderSerie(data: any): void;
getBarOpacity(rowValues: RowValues): number;
mergeMacthedSeriesAndSort(matchedSeries: any[]): any;
@ -27,8 +29,8 @@ export declare class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptio
getBarHeight(value: number): number;
getBarPositionX(key: number, idx: number): number;
getBarPositionY(val: number, idx: number, values: number[]): number;
get yScale(): d3.ScaleLinear<number, number>;
get maxValue(): number | undefined;
getYScale(): d3.ScaleLinear<number, number>;
getYMaxValue(): number | undefined;
}
export declare const VueChartwerkBarChartObject: {
render(createElement: any): any;

47185
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

20
src/index.ts
Unescape View File

@ -14,6 +14,7 @@ const DEFAULT_BAR_OPTIONS: BarOptions = {
export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
metricsContainer: any;
barYScale: null | d3.ScaleLinear<number, number> = null;
constructor(el: HTMLElement, _series: BarTimeSerie[] = [], _options: BarOptions = {}) {
super(d3, el, _series, _options);
@ -25,6 +26,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
this.renderNoDataPointsMessage();
return;
}
this.setBarPodScales();
// container for clip path
const clipContatiner = this.chartContainer
@ -48,6 +51,12 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
this.renderSerie(concatedSeries);
}
setBarPodScales(): void {
// TODO: its a hack to avoid infinite scale function recalling
// It should be fixed by implenting BarState
this.barYScale = this.getYScale();
}
renderSerie(data: any): void {
this.metricsContainer.selectAll(`.rects-container`)
.data(data)
@ -274,7 +283,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
getBarHeight(value: number): number {
// TODO: Property 'sign' does not exist on type 'Math'
// @ts-ignore
const height = Math.sign(value) * (this.yScale(0) - this.yScale(value));
const height = Math.sign(value) * (this.barYScale(0) - this.barYScale(value));
return height;
}
@ -287,7 +296,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
}
getBarPositionY(val: number, idx: number, values: number[]): number {
let yPosition: number = this.yScale(Math.max(val, 0));
let yPosition: number = this.barYScale(Math.max(val, 0));
if(this.options.stacked === true) {
const previousBarsHeight = _.sum(
_.map(_.range(idx), i => this.getBarHeight(values[i]))
@ -297,7 +306,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
return yPosition;
}
get yScale(): d3.ScaleLinear<number, number> {
getYScale(): d3.ScaleLinear<number, number> {
if(
this.state.getMinValueY() === undefined ||
this.state.getMaxValueY() === undefined
@ -306,12 +315,13 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
.domain([1, 0])
.range([0, this.height]);
}
const yMaxValue = this.getYMaxValue();
return this.d3.scaleLinear()
.domain([this.maxValue, Math.min(this.state.getMinValueY(), 0)])
.domain([yMaxValue, Math.min(this.state.getMinValueY(), 0)])
.range([0, this.height]);
}
get maxValue(): number | undefined {
getYMaxValue(): number | undefined {
if(this.series === undefined || this.series.length === 0 || this.series[0].datapoints.length === 0) {
return undefined;
}

Write Preview
Loading…
Cancel
Save