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

Merge branch 'use-actual-core' into 'main' 

Use actual core

See merge request chartwerk/bar-pod!2
merge-requests/2/merge
Alexander Velikiy 3 years ago
parent
f2e112221e 14e8601b76
commit
4dc1a9753b
6 changed files with 80 additions and 30 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. 32
      demo.html
  2. 22
      dist/index.d.ts
  3. 2
      dist/index.js
  4. 5
      package-lock.json
  5. 4
      package.json
  6. 45
      src/index.ts

32
demo.html
Unescape View File

@ -13,23 +13,45 @@
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'test11', datapoints: [[15, 100], [20, 110], [10, 300]], matchedKey: 'm-1', color: 'red' },
{ target: 'test12', datapoints: [[10, 100], [20, 200], [10, 300]], matchedKey: 'm-1', color: 'green' },
{ target: 'test21', datapoints: [[10, 130], [26, 230], [15, 330]], matchedKey: 'm-2', color: 'yellow'},
{ target: 'test22', datapoints: [[10, 130], [27, 230], [10, 330]], matchedKey: 'm-2', color: 'blue' },
{ 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' },
],
{
usePanning: false,
axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
y: { invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
},
stacked: true,
matching: true,
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>

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

@ -3,15 +3,20 @@ 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;
get seriesUniqKeys(): string[];
get seriesForMatching(): BarTimeSerie[][];
getZippedDataForRender(series: BarTimeSerie[]): RowValues[];
renderSharedCrosshair(timestamp: number): void;
renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
hideSharedCrosshair(): void;
onMouseMove(): void;
getSeriesPointFromMousePosition(eventX: number): any[] | undefined;
@ -24,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;
@ -52,18 +57,27 @@ export declare const VueChartwerkBarChartObject: {
options(): void;
};
mounted(): void;
destroyed(): void;
methods: {
render(): void;
renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
hideSharedCrosshair(): void;
onPanningRescale(event: any): void;
renderChart(): void;
appendEvents(): void;
zoomIn(range: any): void;
zoomOut(center: any): void;
zoomOut(centers: any): void;
mouseMove(evt: any): void;
mouseOut(): void;
onLegendClick(idx: any): void;
panningEnd(range: any): void;
panning(range: any): void;
contextMenu(evt: any): void;
sharedCrosshairMove(event: any): void;
renderEnd(): void;
};
}[];
methods: {

2
dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

5
package-lock.json generated
Unescape View File

@ -5,8 +5,9 @@
"requires": true,
"dependencies": {
"@chartwerk/core": {
"version": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f",
"from": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f"
"version": "0.3.4",
"resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
"integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
},
"@types/d3": {
"version": "5.16.4",

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{
"name": "@chartwerk/bar-chart",
"version": "0.2.4",
"version": "0.2.5",
"description": "Chartwerk bar chart",
"main": "dist/index.js",
"scripts": {
@ -15,7 +15,7 @@
"author": "CorpGlory",
"license": "Apache-2.0",
"dependencies": {
"@chartwerk/core": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f"
"@chartwerk/core": "^0.3.4"
},
"devDependencies": {
"@types/d3": "^5.7.2",

45
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);
@ -26,6 +27,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
return;
}
this.setBarPodScales();
// container for clip path
const clipContatiner = this.chartContainer
.append('g')
@ -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)
@ -123,8 +132,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
if(series.length === 0) {
throw new Error('There is no visible series');
}
const keysColumn = _.map(series[0].datapoints, row => row[1]);
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[0]));
const keysColumn = _.map(series[0].datapoints, row => row[0]);
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
// @ts-ignore
const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null));
const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns);
@ -135,10 +144,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
return data;
}
public renderSharedCrosshair(timestamp: number): void {
public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.crosshair.style('display', null);
const x = this.xScale(timestamp);
const x = this.xScale(values.x);
this.crosshair.select('#crosshair-line-x')
.attr('x1', x)
.attr('x2', x);
@ -247,11 +256,11 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
get barWidth(): number {
// TODO: here we use first value + timeInterval as bar width. It is not a good idea
const xAxisStartValue = _.first(this.series[0].datapoints)[1];
const xAxisStartValue = _.first(this.series[0].datapoints)[0];
let width = this.xScale(xAxisStartValue + this.timeInterval) / 2;
if(this.options.barWidth !== undefined) {
// barWidth now has axis-x dimension
width = this.xScale(this.minValueX + this.options.barWidth);
width = this.xScale(this.state.getMinValueX() + this.options.barWidth);
}
let rectColumns = this.visibleSeries.length;
if(this.options.stacked === true) {
@ -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,21 +306,22 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
return yPosition;
}
get yScale(): d3.ScaleLinear<number, number> {
getYScale(): d3.ScaleLinear<number, number> {
if(
this.minValue === undefined ||
this.maxValue === undefined
this.state.getMinValueY() === undefined ||
this.state.getMaxValueY() === undefined
) {
return this.d3.scaleLinear()
.domain([1, 0])
.range([0, this.height]);
}
const yMaxValue = this.getYMaxValue();
return this.d3.scaleLinear()
.domain([this.maxValue, Math.min(this.minValue, 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;
}
@ -322,20 +332,21 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
if(this.options.stacked === true) {
if(this.options.matching === true && this.seriesUniqKeys.length > 0) {
const maxValues = this.seriesForMatching.map(series => {
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[0]));
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
return maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
});
return _.max(maxValues);
} else {
const valuesColumns = _.map(this.visibleSeries, serie => _.map(serie.datapoints, row => row[0]));
const valuesColumns = _.map(this.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
}
} else {
console.log('else')
maxValue = _.max(
this.visibleSeries.map(
serie => _.maxBy<number[]>(serie.datapoints, dp => dp[0])[0]
serie => _.maxBy<number[]>(serie.datapoints, dp => dp[1])[0]
)
);
}
@ -358,8 +369,10 @@ export const VueChartwerkBarChartObject = {
mixins: [VueChartwerkPodMixin],
methods: {
render() {
console.time('bar-render');
const pod = new ChartwerkBarPod(document.getElementById(this.id), this.series, this.options);
pod.render();
console.timeEnd('bar-render');
}
}
};

Write Preview
Loading…
Cancel
Save