Browse Source

get y scale only once

merge-requests/2/head
vargburz 3 years ago
parent
commit
d2ccaea740
  1. 24
      demo.html
  2. 6
      dist/index.d.ts
  3. 47185
      dist/index.js
  4. 20
      src/index.ts

24
demo.html

@ -13,7 +13,7 @@
var pod = new ChartwerkBarPod( var pod = new ChartwerkBarPod(
document.getElementById('chart'), 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: '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: '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' }, { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
@ -29,7 +29,29 @@
maxBarWidth: 20 maxBarWidth: 20
} }
); );
console.time('render');
pod.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> </script>
</body> </body>
</html> </html>

6
dist/index.d.ts vendored

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

47185
dist/index.js vendored

File diff suppressed because one or more lines are too long

20
src/index.ts

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

Loading…
Cancel
Save