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

Merge branch 'update-trianle-sizes' into 'main' 

Triangles sizes && fix mouse move

See merge request chartwerk/bar-pod!5
merge-requests/6/merge
Alexander Velikiy 3 years ago
parent
38449550de f28f7b58ce
commit
2b4ec6dc19
9 changed files with 5791 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      demo.html
  2. 8
      dist/index.d.ts
  3. 2
      dist/index.js
  4. 2
      dist/types.d.ts
  5. 8
      dist/utils.d.ts
  6. 5702
      package-lock.json
  7. 106
      src/index.ts
  8. 2
      src/types.ts
  9. 29
      src/utils.ts

3
demo.html
Unescape View File

@ -7,7 +7,7 @@
<script src="./dist/index.js" type="text/javascript"></script> <script src="./dist/index.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<div id="chart" style="width: 500px; height: 500px;"></div> <div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript"> <script type="text/javascript">
var pod = new ChartwerkBarPod( var pod = new ChartwerkBarPod(
@ -27,6 +27,7 @@
stacked: true, stacked: true,
matching: true, matching: true,
maxBarWidth: 20, maxBarWidth: 20,
minBarWidth: 4,
zoomEvents: { zoomEvents: {
scroll: { zoom: { isActive: false }, pan: { isActive: false } }, scroll: { zoom: { isActive: false }, pan: { isActive: false } },
}, },

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

@ -3,11 +3,17 @@ 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> {
barYScale: null | d3.ScaleLinear<number, number>; barYScale: null | d3.ScaleLinear<number, number>;
_seriesDataForRendring: any[];
constructor(el: HTMLElement, _series?: BarTimeSerie[], _options?: BarOptions); constructor(el: HTMLElement, _series?: BarTimeSerie[], _options?: BarOptions);
protected renderMetrics(): void; protected renderMetrics(): void;
get isMatchingDisabled(): boolean;
setSeriesDataForRendering(): void;
setBarPodScales(): void; setBarPodScales(): void;
renderSerie(data: any): void; renderSerie(data: any): void;
getTrianglePath(x: number, y: number, length: number): string; getTrianglePath(x: number, y: number, length: number, options?: {
max: number;
min: number;
}): string;
getBarOpacity(rowValues: RowValues): number; getBarOpacity(rowValues: RowValues): number;
mergeMacthedSeriesAndSort(matchedSeries: any[]): any; mergeMacthedSeriesAndSort(matchedSeries: any[]): any;
get seriesUniqKeys(): string[]; get seriesUniqKeys(): string[];

2
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/types.d.ts vendored
Unescape View File

@ -10,6 +10,8 @@ export declare type BarOptionsParams = {
barWidth: number; barWidth: number;
maxBarWidth: number; maxBarWidth: number;
minBarWidth: number; minBarWidth: number;
maxAnnotationSize: number;
minAnnotationSize: number;
matching: boolean; matching: boolean;
opacityFormatter: (data: RowValues) => number; opacityFormatter: (data: RowValues) => number;
annotations: { annotations: {

8
dist/utils.d.ts vendored
Unescape View File

@ -0,0 +1,8 @@
/**
* Finds the closest item to a given number in an array using binary search
* @argument arr: ascending sorted array
* @argument num: number to find
* @returns index of the closest item to `num`
* @returns -1 if given array is empty
*/
export declare function findClosest(arr: number[], num: number): number;

5702
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

106
src/index.ts
Unescape View File

@ -1,6 +1,7 @@
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, AxisFormat } from '@chartwerk/core';
import { BarTimeSerie, BarOptions, RowValues } from './types'; import { BarTimeSerie, BarOptions, RowValues } from './types';
import { findClosest } from './utils';
import * as d3 from 'd3'; import * as d3 from 'd3';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -14,6 +15,7 @@ const DEFAULT_BAR_OPTIONS: BarOptions = {
export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> { export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
barYScale: null | d3.ScaleLinear<number, number> = null; barYScale: null | d3.ScaleLinear<number, number> = null;
_seriesDataForRendring = [];
constructor(el: HTMLElement, _series: BarTimeSerie[] = [], _options: BarOptions = {}) { constructor(el: HTMLElement, _series: BarTimeSerie[] = [], _options: BarOptions = {}) {
super(d3, el, _series, _options); super(d3, el, _series, _options);
@ -27,17 +29,23 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
} }
this.setBarPodScales(); this.setBarPodScales();
this.setSeriesDataForRendering();
this.renderSerie(this._seriesDataForRendring);
}
if(this.options.matching === false || this.seriesUniqKeys.length === 0) { get isMatchingDisabled(): boolean {
const zippedData = this.getZippedDataForRender(this.visibleSeries); return this.options.matching === false || this.seriesUniqKeys.length === 0;
this.renderSerie(zippedData); }
return;
setSeriesDataForRendering(): void {
if(this.isMatchingDisabled) {
this._seriesDataForRendring = this.getZippedDataForRender(this.visibleSeries);
} else {
const matchedSeries = this.seriesForMatching.map(
(series: BarTimeSerie[], idx: number) => this.getZippedDataForRender(series)
);
this._seriesDataForRendring = this.mergeMacthedSeriesAndSort(matchedSeries);
} }
const matchedSeries = this.seriesForMatching.map((series: BarTimeSerie[], idx: number) => {
return this.getZippedDataForRender(series);
});
const concatedSeries = this.mergeMacthedSeriesAndSort(matchedSeries);
this.renderSerie(concatedSeries);
} }
setBarPodScales(): void { setBarPodScales(): void {
@ -88,43 +96,39 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
container.append('path') container.append('path')
.attr('d', () => { .attr('d', () => {
const x = Math.ceil(_.toNumber(rectSelection.attr('x'))); const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
const y = Math.ceil(_.toNumber(rectSelection.attr('y'))) - this.barWidth; const y = Math.ceil(_.toNumber(rectSelection.attr('y')));
return this.getTrianglePath(x, y, this.barWidth); const options = { max: this.options.maxAnnotationSize, min: this.options.minAnnotationSize };
return this.getTrianglePath(x, y, this.barWidth, options);
}) })
.attr('fill', annotation.color) .attr('fill', annotation.color);
.attr('stroke', '#565862')
.attr('stroke-width', '1px');
}); });
} }
getTrianglePath(x: number, y: number, length: number): string { getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
// (x, y) - top left corner // (x, y) - top left corner of bar
const Y_OFFSET = 2; const minTriangleSize = options?.min || 6;
const correctedY = Math.max(y, Y_OFFSET); const maxTriagleSize = options?.max || 10;
const correctedLength = length <= 10 ? length : 10; const yOffset = 4; // offset between triangle and bar
const centerX = x + length / 2;
let x1 = x - Y_OFFSET; const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
let x2 = x + length + Y_OFFSET;
let x1x2Len = x2 - x1;
let y1 = correctedY - Y_OFFSET;
let yM = correctedY + length - Y_OFFSET;
if (x1x2Len > correctedLength) {
const xDiff = x1x2Len - correctedLength;
x1 += xDiff / 2;
x2 -= xDiff / 2;
const yDiff = yM - y1;
if (xDiff < yDiff) { const topY = Math.max(y - correctedLength - yOffset, 4);
y1 += (yDiff - xDiff) + Y_OFFSET*3; const topLeftCorner = {
} x: centerX - correctedLength / 2,
} y: topY,
const x3 = x + length / 2; };
const topRightCorner = {
x: centerX + correctedLength / 2,
y: topY,
};
const bottomMiddleCorner = {
x: centerX,
y: topY + correctedLength,
};
return `M ${x1} ${y1} return `M ${topLeftCorner.x} ${topLeftCorner.y}
L ${x2} ${y1} L ${topRightCorner.x} ${topRightCorner.y}
L ${x3} ${yM} z`; L ${bottomMiddleCorner.x} ${bottomMiddleCorner.y} z`;
} }
getBarOpacity(rowValues: RowValues): number { getBarOpacity(rowValues: RowValues): number {
@ -229,29 +233,15 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
} }
} }
// TODO: not any[]
getSeriesPointFromMousePosition(eventX: number): any[] | undefined { getSeriesPointFromMousePosition(eventX: number): any[] | undefined {
if(this.series === undefined || this.series.length === 0) { if(this.series === undefined || this.series.length === 0) {
return undefined; return undefined;
} }
const mouseDate = Math.ceil(this.xScale.invert(eventX)); const mousePoisitionKey = Math.ceil(this.xScale.invert(eventX));
const keys = _.map(this._seriesDataForRendring, el => el.key);
const idx = findClosest(keys, mousePoisitionKey);
const zippedData = this.getZippedDataForRender(this.visibleSeries); return this._seriesDataForRendring[idx];
// get the nearest RowValues element for mouseDate
const keys = _.map(zippedData, 'key').sort((a, b) => (a - mouseDate) - (mouseDate - b));
const idx = _.findIndex(zippedData, (a) => a.key == keys[0]);
const series: any[] = [];
for(let i = 0; i < zippedData[idx].values.length; i++) {
series.push({
value: zippedData[idx].key,
xval: zippedData[idx].values[i],
color: zippedData[idx].colors[i],
label: zippedData[idx].serieTarget[i]
});
}
return series;
} }
getBarColor(serie: any) { getBarColor(serie: any) {

2
src/types.ts
Unescape View File

@ -11,6 +11,8 @@ export type BarOptionsParams = {
barWidth: number; // width in x axis unit barWidth: number; // width in x axis unit
maxBarWidth: number; // in px maxBarWidth: number; // in px
minBarWidth: number; // in px minBarWidth: number; // in px
maxAnnotationSize: number; // in px TODO: move to annotaions
minAnnotationSize: number; // in px
matching: boolean; matching: boolean;
opacityFormatter: (data: RowValues) => number; opacityFormatter: (data: RowValues) => number;
annotations: { annotations: {

29
src/utils.ts
Unescape View File

@ -0,0 +1,29 @@
/**
* Finds the closest item to a given number in an array using binary search
* @argument arr: ascending sorted array
* @argument num: number to find
* @returns index of the closest item to `num`
* @returns -1 if given array is empty
*/
export function findClosest(arr: number[], num: number): number {
if(arr.length === 0) {
return -1;
}
let lowIdx = 0;
let highIdx = arr.length - 1;
while(highIdx - lowIdx > 1) {
const midIdx = Math.floor((lowIdx + highIdx) / 2);
if(arr[midIdx] < num) {
lowIdx = midIdx;
} else {
highIdx = midIdx;
}
}
if(num - arr[lowIdx] <= arr[highIdx] - num) {
return lowIdx;
}
return highIdx;
}
Write Preview
Loading…
Cancel
Save