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/3/merge
Alexander Velikiy 3 years ago
parent
f2e112221e 14e8601b76
commit
8d7de89971
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
Unified 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( var pod = new ChartwerkBarPod(
document.getElementById('chart'), document.getElementById('chart'),
[ [
{ target: 'test11', datapoints: [[15, 100], [20, 110], [10, 300]], matchedKey: 'm-1', color: 'red' }, { target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red' },
{ target: 'test12', datapoints: [[10, 100], [20, 200], [10, 300]], matchedKey: 'm-1', color: 'green' }, { target: 'test12', datapoints: [[100, 10], [200, 20], [300, 10]], matchedKey: 'm-1', color: 'green' },
{ target: 'test21', datapoints: [[10, 130], [26, 230], [15, 330]], matchedKey: 'm-2', color: 'yellow'}, { target: 'test21', datapoints: [[130, 10], [230, 26], [330, 15]], matchedKey: 'm-2', color: 'yellow'},
{ target: 'test22', datapoints: [[10, 130], [27, 230], [10, 330]], matchedKey: 'm-2', color: 'blue' }, { target: 'test22', datapoints: [[130, 10], [230, 27], [330, 10]], matchedKey: 'm-2', color: 'blue' },
], ],
{ {
usePanning: false, usePanning: false,
axis: { axis: {
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } }, 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, stacked: true,
matching: true, matching: true,
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>

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

@ -3,15 +3,20 @@ 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;
get seriesUniqKeys(): string[]; get seriesUniqKeys(): string[];
get seriesForMatching(): BarTimeSerie[][]; get seriesForMatching(): BarTimeSerie[][];
getZippedDataForRender(series: BarTimeSerie[]): RowValues[]; getZippedDataForRender(series: BarTimeSerie[]): RowValues[];
renderSharedCrosshair(timestamp: number): void; renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
hideSharedCrosshair(): void; hideSharedCrosshair(): void;
onMouseMove(): void; onMouseMove(): void;
getSeriesPointFromMousePosition(eventX: number): any[] | undefined; getSeriesPointFromMousePosition(eventX: number): any[] | undefined;
@ -24,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;
@ -52,18 +57,27 @@ export declare const VueChartwerkBarChartObject: {
options(): void; options(): void;
}; };
mounted(): void; mounted(): void;
destroyed(): void;
methods: { methods: {
render(): void; render(): void;
renderSharedCrosshair(values: {
x?: number;
y?: number;
}): void;
hideSharedCrosshair(): void;
onPanningRescale(event: any): void;
renderChart(): void; renderChart(): void;
appendEvents(): void; appendEvents(): void;
zoomIn(range: any): void; zoomIn(range: any): void;
zoomOut(center: any): void; zoomOut(centers: any): void;
mouseMove(evt: any): void; mouseMove(evt: any): void;
mouseOut(): void; mouseOut(): void;
onLegendClick(idx: any): void; onLegendClick(idx: any): void;
panningEnd(range: any): void; panningEnd(range: any): void;
panning(range: any): void; panning(range: any): void;
contextMenu(evt: any): void; contextMenu(evt: any): void;
sharedCrosshairMove(event: any): void;
renderEnd(): void;
}; };
}[]; }[];
methods: { 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, "requires": true,
"dependencies": { "dependencies": {
"@chartwerk/core": { "@chartwerk/core": {
"version": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f", "version": "0.3.4",
"from": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f" "resolved": "https://registry.npmjs.org/@chartwerk/core/-/core-0.3.4.tgz",
"integrity": "sha512-dDk+xjcR0XVzTrsQnXlQh6syg41gdn2yh6+q+HPMHwG28+OpFoyRufIPhxzobWp8orINn0PtlfnzgYkfnuSIPg=="
}, },
"@types/d3": { "@types/d3": {
"version": "5.16.4", "version": "5.16.4",

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "@chartwerk/bar-chart", "name": "@chartwerk/bar-chart",
"version": "0.2.4", "version": "0.2.5",
"description": "Chartwerk bar chart", "description": "Chartwerk bar chart",
"main": "dist/index.js", "main": "dist/index.js",
"scripts": { "scripts": {
@ -15,7 +15,7 @@
"author": "CorpGlory", "author": "CorpGlory",
"license": "Apache-2.0", "license": "Apache-2.0",
"dependencies": { "dependencies": {
"@chartwerk/core": "github:chartwerk/core#880b8e064f6df9430df337c6fafb03cc658cb24f" "@chartwerk/core": "^0.3.4"
}, },
"devDependencies": { "devDependencies": {
"@types/d3": "^5.7.2", "@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> { 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);
@ -25,6 +26,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
this.setBarPodScales();
// container for clip path // container for clip path
const clipContatiner = this.chartContainer const clipContatiner = this.chartContainer
@ -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)
@ -123,8 +132,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
if(series.length === 0) { if(series.length === 0) {
throw new Error('There is no visible series'); throw new Error('There is no visible series');
} }
const keysColumn = _.map(series[0].datapoints, row => row[1]); const keysColumn = _.map(series[0].datapoints, row => row[0]);
const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[0])); const valuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[1]));
// @ts-ignore // @ts-ignore
const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null)); const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null));
const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns); const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns);
@ -135,10 +144,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
return data; return data;
} }
public renderSharedCrosshair(timestamp: number): void { public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.crosshair.style('display', null); this.crosshair.style('display', null);
const x = this.xScale(timestamp); const x = this.xScale(values.x);
this.crosshair.select('#crosshair-line-x') this.crosshair.select('#crosshair-line-x')
.attr('x1', x) .attr('x1', x)
.attr('x2', x); .attr('x2', x);
@ -247,11 +256,11 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
get barWidth(): number { get barWidth(): number {
// TODO: here we use first value + timeInterval as bar width. It is not a good idea // 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; let width = this.xScale(xAxisStartValue + this.timeInterval) / 2;
if(this.options.barWidth !== undefined) { if(this.options.barWidth !== undefined) {
// barWidth now has axis-x dimension // 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; let rectColumns = this.visibleSeries.length;
if(this.options.stacked === true) { if(this.options.stacked === true) {
@ -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,21 +306,22 @@ 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.minValue === undefined || this.state.getMinValueY() === undefined ||
this.maxValue === undefined this.state.getMaxValueY() === undefined
) { ) {
return this.d3.scaleLinear() return this.d3.scaleLinear()
.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.minValue, 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;
} }
@ -322,20 +332,21 @@ export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
if(this.options.stacked === true) { if(this.options.stacked === true) {
if(this.options.matching === true && this.seriesUniqKeys.length > 0) { if(this.options.matching === true && this.seriesUniqKeys.length > 0) {
const maxValues = this.seriesForMatching.map(series => { 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); const zippedValuesColumn = _.zip(...valuesColumns);
return maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row))); return maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
}); });
return _.max(maxValues); return _.max(maxValues);
} else { } 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); const zippedValuesColumn = _.zip(...valuesColumns);
maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row))); maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
} }
} else { } else {
console.log('else')
maxValue = _.max( maxValue = _.max(
this.visibleSeries.map( 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], mixins: [VueChartwerkPodMixin],
methods: { methods: {
render() { render() {
console.time('bar-render');
const pod = new ChartwerkBarPod(document.getElementById(this.id), this.series, this.options); const pod = new ChartwerkBarPod(document.getElementById(this.id), this.series, this.options);
pod.render(); pod.render();
console.timeEnd('bar-render');
} }
} }
}; };

Write Preview
Loading…
Cancel
Save