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

Compare commits

base: chartwerk:main
Branches Tags
chartwerk:bar-chart-new-core
chartwerk:dep-core
chartwerk:main
chartwerk:react-bar-pod
..
compare: chartwerk:bar-chart-new-core
Branches Tags
chartwerk:bar-chart-new-core
chartwerk:dep-core
chartwerk:main
chartwerk:react-bar-pod

2 Commits
main ... bar-chart-

Author SHA1 Message Date
vargburz 43ecf4ae78 init models
3 years ago
vargburz 50f9b43dfc try to use new core
3 years ago
7 changed files with 4196 additions and 1301 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
  1. 17
      examples/demo.html
  2. 17
      package.json
  3. 223
      src/index.ts
  4. 55
      src/models/bar_options.ts
  5. 26
      src/models/bar_series.ts
  6. 29
      src/types.ts
  7. 5130
      yarn.lock

17
examples/demo.html
Unescape View File

@ -13,10 +13,10 @@
var pod = new ChartwerkBarPod(
document.getElementById('chart'),
[
{ target: 'test11', datapoints: getData(), matchedKey: 'm-1', color: 'red', colorFormatter: (data) => ['green', 'yellow'][data.rowIndex] },
// { 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' },
{ 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,
@ -24,8 +24,8 @@
x: { format: 'custom', invert: false, valueFormatter: (value) => { return 'L' + value; } },
y: { format: 'custom', invert: false, range: [0, 30], valueFormatter: (value) => { return value + '%'; } }
},
stacked: false,
matching: false,
stacked: true,
matching: true,
maxBarWidth: 20,
minBarWidth: 4,
zoomEvents: {
@ -37,8 +37,7 @@
],
eventsCallbacks: {
zoomIn: (range) => { console.log('range', range) }
},
renderLegend: false,
}
}
);
console.time('render');
@ -47,7 +46,7 @@
function getData() {
return [
[100, 15], [200, 20], [300, 10],
[100, 15], [110, 20], [300, 10],
];
}
</script>

17
package.json
Unescape View File

@ -1,11 +1,8 @@
{
"name": "@chartwerk/bar-pod",
"version": "0.8.1",
"version": "0.5.1",
"description": "Chartwerk bar pod",
"main": "dist/index.js",
"files": [
"/dist"
],
"scripts": {
"build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --watch --config build/webpack.dev.conf.js",
@ -22,12 +19,12 @@
"@chartwerk/core": "latest"
},
"devDependencies": {
"css-loader": "^6.8.1",
"style-loader": "^3.3.3",
"ts-loader": "^9.4.3",
"typescript": "^5.1.3",
"webpack": "^5.87.0",
"webpack-cli": "^5.1.4"
"css-loader": "^3.4.2",
"style-loader": "^1.1.3",
"ts-loader": "^6.2.1",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11"
},
"packageManager": "yarn@3.2.1"
}

223
src/index.ts
Unescape View File

@ -1,48 +1,48 @@
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, AxisFormat } from '@chartwerk/core';
import { BarConfig } from './models/bar_options';
import { BarSeries } from './models/bar_series';
import { BarSerie, BarOptions, RowValues } from './types';
import { BarTimeSerie, BarOptions, RowValues } from './types';
import { findClosest } from './utils';
import * as d3 from 'd3';
import * as _ from 'lodash';
export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
const DEFAULT_BAR_OPTIONS: BarOptions = {
renderBarLabels: false,
stacked: false,
matching: false
}
export class ChartwerkBarPod extends ChartwerkPod<BarTimeSerie, BarOptions> {
barYScale: null | d3.ScaleLinear<number, number> = null;
_seriesDataForRendring = [];
series: BarSeries;
options: BarConfig;
constructor(el: HTMLElement, _series: BarSerie[] = [], _options: BarOptions = {}) {
constructor(el: HTMLElement, _series: BarTimeSerie[] = [], _options: BarOptions = {}) {
super(el, _series, _options);
this.series = new BarSeries(_series);
this.options = new BarConfig(_options);
_.defaults(this.options, DEFAULT_BAR_OPTIONS);
}
protected renderMetrics(): void {
if(!this.series.isSeriesAvailable) {
if(this.series.length === 0 || this.series[0].datapoints.length === 0) {
this.renderNoDataPointsMessage();
return;
}
this.setBarPodScales();
this.setSeriesDataForRendering();
this.renderSerie(this._seriesDataForRendring);
}
get isMatchingDisabled(): boolean {
return this.options.barOptions.matching === false || this.seriesUniqKeys.length === 0;
return this.options.matching === false || this.seriesUniqKeys.length === 0;
}
setSeriesDataForRendering(): void {
if(this.isMatchingDisabled) {
this._seriesDataForRendring = this.getZippedDataForRender(this.series.visibleSeries);
this._seriesDataForRendring = this.getZippedDataForRender(this.visibleSeries);
} else {
const matchedSeries = this.seriesForMatching.map(
(series: BarSerie[], idx: number) => this.getZippedDataForRender(series)
(series: BarTimeSerie[], idx: number) => this.getZippedDataForRender(series)
);
this._seriesDataForRendring = this.mergeMacthedSeriesAndSort(matchedSeries);
}
@ -59,63 +59,51 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
.data(data)
.enter().append('g')
.attr('class', 'rects-container')
.each((d: RowValues, rowIndex: number, nodes: any) => {
const container = d3.select(nodes[rowIndex]);
.each((d: RowValues, i: number, nodes: any) => {
const container = d3.select(nodes[i]);
container.selectAll('rect')
.data(d.values)
.enter().append('rect')
.style('fill', (val, idx) => this.getBarColor(d, val, idx, rowIndex))
.attr('opacity', () => this.getBarOpacity(d))
.attr('x', (val: number, idx: number) => {
return this.getBarPositionX(d.key, idx);
})
.attr('y', (val: number, idx: number) => {
return this.getBarPositionY(val, idx, d.values);
})
.attr('width', this.barWidth)
.attr('height', (val: number) => this.getBarHeight(val))
.on('contextmenu', this.contextMenu.bind(this))
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
.data(d.values)
.enter().append('rect')
.style('fill', (val, i) => d.colors[i])
.attr('opacity', () => this.getBarOpacity(d))
.attr('x', (val: number, idx: number) => {
return this.getBarPositionX(d.key, idx);
})
.attr('y', (val: number, idx: number) => {
return this.getBarPositionY(val, idx, d.values);
})
.attr('width', this.barWidth)
.attr('height', (val: number) => this.getBarHeight(val))
.on('contextmenu', this.contextMenu.bind(this));
// render bar annotations, its all hardcoded
if(_.isEmpty(this.options.barOptions.annotations)) {
if(_.isEmpty(this.options.annotations)) {
return;
}
// find all series for single matchedKey
const series = _.filter(this.series.visibleSeries, serie => _.includes(d.serieTarget, serie.target));
const series = _.filter(this.series, serie => _.includes(d.serieTarget, serie.target));
const matchedKeys = _.map(series, serie => serie.matchedKey); // here matchedKeys should be equal
const key = matchedKeys[0];
const lastRect = _.last(container.selectAll('rect')?.nodes());
const annotation = _.find(this.options.barOptions.annotations, a => a.key === key);
const annotation = _.find(this.options.annotations, a => a.key === key);
if(!lastRect || !key || !annotation) {
return;
}
const rectSelection = d3.select(lastRect);
// render triangle
container.append('path')
.attr('d', () => {
const x = Math.ceil(_.toNumber(rectSelection.attr('x')));
const y = Math.ceil(_.toNumber(rectSelection.attr('y')));
const options = { max: this.options.barOptions.maxAnnotationSize, min: this.options.barOptions.minAnnotationSize };
const options = { max: this.options.maxAnnotationSize, min: this.options.minAnnotationSize };
return this.getTrianglePath(x, y, this.barWidth, options);
})
.attr('fill', annotation.color)
.on('mouseover', this.redirectEventToOverlay.bind(this))
.on('mousemove', this.redirectEventToOverlay.bind(this))
.on('mouseout', this.redirectEventToOverlay.bind(this))
.on('mousedown', () => { d3.event.stopPropagation(); });
.attr('fill', annotation.color);
});
}
redirectEventToOverlay(): void {
this.overlay?.node().dispatchEvent(new MouseEvent(d3.event.type, d3.event));
}
getTrianglePath(x: number, y: number, length: number, options?: { max: number, min: number }): string {
// (x, y) - top left corner of bar
const minTriangleSize = options?.min || 6;
@ -123,8 +111,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
const yOffset = 4; // offset between triangle and bar
const centerX = x + length / 2;
const correctedLength = _.clamp(length, minTriangleSize, maxTriagleSize);
const topY = Math.max(y - correctedLength - yOffset, 4);
const topY = Math.max(y - correctedLength - yOffset, 4);
const topLeftCorner = {
x: centerX - correctedLength / 2,
y: topY,
@ -144,17 +132,10 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
}
getBarOpacity(rowValues: RowValues): number {
if(this.options.barOptions.opacityFormatter === undefined) {
if(this.options.opacityFormatter === undefined) {
return 1;
}
return this.options.barOptions.opacityFormatter(rowValues);
}
getBarColor(rowValues: RowValues, val: number, i: number, rowIndex: number): string {
if(_.isFunction(rowValues.colors[i])) {
return (rowValues.colors[i] as Function)({ rowData: rowValues, val, stackedIndex: i, rowIndex });
}
return (rowValues.colors[i] as string);
return this.options.opacityFormatter(rowValues);
}
mergeMacthedSeriesAndSort(matchedSeries: any[]) {
@ -174,27 +155,27 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
}
get seriesUniqKeys(): string[] {
if(!this.series.isSeriesAvailable) {
if(this.visibleSeries.length === 0) {
return [];
}
const keys = this.series.visibleSeries.map(serie => serie.matchedKey);
const keys = this.visibleSeries.map(serie => serie.matchedKey);
const uniqKeys = _.uniq(keys);
const filteredKeys = _.filter(uniqKeys, key => key !== undefined);
return filteredKeys;
}
get seriesForMatching(): BarSerie[][] {
get seriesForMatching(): BarTimeSerie[][] {
if(this.seriesUniqKeys.length === 0) {
return [this.series.visibleSeries];
return [this.visibleSeries];
}
const seriesList = this.seriesUniqKeys.map(key => {
const seriesWithKey = _.filter(this.series.visibleSeries, serie => serie.matchedKey === key);
const seriesWithKey = _.filter(this.visibleSeries, serie => serie.matchedKey === key);
return seriesWithKey;
});
return seriesList;
}
getZippedDataForRender(series: BarSerie[]): RowValues[] {
getZippedDataForRender(series: BarTimeSerie[]): RowValues[] {
if(series.length === 0) {
throw new Error('There is no visible series');
}
@ -204,7 +185,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
const additionalValuesColumns = _.map(series, serie => _.map(serie.datapoints, row => row[2] !== undefined ? row[2] : null));
const zippedAdditionalValuesColumn = _.zip(...additionalValuesColumns);
const zippedValuesColumn = _.zip(...valuesColumns);
const colors = _.map(series, serie => serie.colorFormatter || serie.color);
const colors = _.map(series, serie => this.getBarColor(serie));
const tagrets = _.map(series, serie => serie.target);
const zippedData = _.zip(keysColumn, zippedValuesColumn, zippedAdditionalValuesColumn, tagrets);
const data = _.map(zippedData, row => { return { key: row[0], values: row[1], additionalValues: row[2], colors, serieTarget: tagrets } });
@ -214,7 +195,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.crosshair.style('display', null);
const x = this.state.xScale(values.x);
const x = this.xScale(values.x);
this.crosshair.select('#crosshair-line-x')
.attr('x1', x)
.attr('x2', x);
@ -228,40 +209,59 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
// TODO: mouse move work bad with matching
const event = d3.mouse(this.chartContainer.node());
const eventX = event[0];
if(this.isOutOfChart() === true) {
this.crosshair.style('display', 'none');
return;
}
this.crosshair.select('#crosshair-line-x')
.attr('x1', eventX)
.attr('x2', eventX);
const series = this.getSeriesPointFromMousePosition(eventX);
this.options.callbackMouseMove({
x: d3.event.pageX,
y: d3.event.pageY,
time: this.state.xScale.invert(eventX),
series,
chartX: eventX,
chartWidth: this.width
});
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseMove !== undefined) {
this.options.eventsCallbacks.mouseMove({
x: d3.event.pageX,
y: d3.event.pageY,
time: this.xScale.invert(eventX),
series,
chartX: eventX,
chartWidth: this.width
});
} else {
console.log('mouse move, but there is no callback');
}
}
getSeriesPointFromMousePosition(eventX: number): any[] | undefined {
if(!this.series.isSeriesAvailable) {
if(this.series === undefined || this.series.length === 0) {
return undefined;
}
const mousePoisitionKey = Math.ceil(this.state.xScale.invert(eventX));
const mousePoisitionKey = Math.ceil(this.xScale.invert(eventX));
const keys = _.map(this._seriesDataForRendring, el => el.key);
const idx = findClosest(keys, mousePoisitionKey);
return this._seriesDataForRendring[idx];
}
getBarColor(serie: any) {
if(serie.color === undefined) {
return this.getSerieColor(0);
}
return serie.color;
}
onMouseOver(): void {
this.crosshair.style('display', null);
this.crosshair.raise();
}
onMouseOut(): void {
this.options.callbackMouseOut();
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) {
this.options.eventsCallbacks.mouseOut();
} else {
console.log('mouse out, but there is no callback');
}
this.crosshair.style('display', 'none');
}
@ -272,26 +272,30 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
const event = d3.mouse(this.chartContainer.node());
const eventX = event[0];
const series = this.getSeriesPointFromMousePosition(eventX);
this.options.callbackContextMenu({
pageX: d3.event.pageX,
pageY: d3.event.pageY,
xVal: this.state.xScale.invert(eventX),
series,
chartX: eventX
});
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.contextMenu !== undefined) {
this.options.eventsCallbacks.contextMenu({
x: d3.event.pageX,
y: d3.event.pageY,
time: this.xScale.invert(eventX),
series,
chartX: eventX
});
} else {
console.log('contextmenu, but there is no callback');
}
}
get barWidth(): number {
const xAxisStartValue = _.first(this.series.visibleSeries[0].datapoints)[0];
const xAxisEndValue = _.last(this.series.visibleSeries[0].datapoints)[0];
const timeInterval = (xAxisEndValue - xAxisStartValue) / this.series.visibleSeries[0].datapoints.length;
let width = this.state.xScale(timeInterval) / 2;
if(this.options.barOptions.barWidth !== undefined) {
// TODO: here we use first value + timeInterval as bar width. It is not a good idea
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.state.xScale(this.state.getMinValueX() + this.options.barOptions.barWidth);
width = this.xScale(this.state.getMinValueX() + this.options.barWidth);
}
let rectColumns = this.series.visibleSeries.length;
if(this.options.barOptions.stacked === true) {
let rectColumns = this.visibleSeries.length;
if(this.options.stacked === true) {
rectColumns = 1;
}
return this.updateBarWidthWithBorders(width / rectColumns);
@ -299,11 +303,11 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
updateBarWidthWithBorders(width: number): number {
let barWidth = width;
if(this.options.barOptions.minBarWidth !== undefined) {
barWidth = Math.max(barWidth, this.options.barOptions.minBarWidth);
if(this.options.minBarWidth !== undefined) {
barWidth = Math.max(barWidth, this.options.minBarWidth);
}
if(this.options.barOptions.maxBarWidth !== undefined) {
barWidth = Math.min(barWidth, this.options.barOptions.maxBarWidth);
if(this.options.maxBarWidth !== undefined) {
barWidth = Math.min(barWidth, this.options.maxBarWidth);
}
return barWidth;
}
@ -316,8 +320,8 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
}
getBarPositionX(key: number, idx: number): number {
let xPosition: number = this.state.xScale(key);
if(this.options.barOptions.stacked === false) {
let xPosition: number = this.xScale(key);
if(this.options.stacked === false) {
xPosition += idx * this.barWidth;
}
return xPosition;
@ -325,7 +329,7 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
getBarPositionY(val: number, idx: number, values: number[]): number {
let yPosition: number = this.barYScale(Math.max(val, 0));
if(this.options.barOptions.stacked === true) {
if(this.options.stacked === true) {
const previousBarsHeight = _.sum(
_.map(_.range(idx), i => this.getBarHeight(values[i]))
);
@ -350,15 +354,15 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
}
getYMaxValue(): number | undefined {
if(!this.series.isSeriesAvailable) {
if(this.series === undefined || this.series.length === 0 || this.series[0].datapoints.length === 0) {
return undefined;
}
if(this.options.axis.y.range) {
if(this.options.axis.y !== undefined && this.options.axis.y.range !== undefined) {
return _.max(this.options.axis.y.range);
}
let maxValue: number;
if(this.options.barOptions.stacked === true) {
if(this.options.barOptions.matching === true && this.seriesUniqKeys.length > 0) {
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[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
@ -366,13 +370,14 @@ export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
});
return _.max(maxValues);
} else {
const valuesColumns = _.map(this.series.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
const valuesColumns = _.map(this.visibleSeries, serie => _.map(serie.datapoints, row => row[1]));
const zippedValuesColumn = _.zip(...valuesColumns);
maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
maxValue = _.max(_.map(zippedValuesColumn, row => _.sum(row)));
}
} else {
console.log('else')
maxValue = _.max(
this.series.visibleSeries.map(
this.visibleSeries.map(
serie => _.maxBy<number[]>(serie.datapoints, dp => dp[1])[0]
)
);
@ -404,4 +409,4 @@ export const VueChartwerkBarChartObject = {
}
};
export { BarSerie, BarOptions, TimeFormat, AxisFormat };
export { BarTimeSerie, BarOptions, TimeFormat, AxisFormat };

55
src/models/bar_options.ts
Unescape View File

@ -1,50 +1,29 @@
import { CoreOptions } from '@chartwerk/core';
import { BarOptions, BarAdditionalOptions } from '../types';
import { CoreSeries } from '@chartwerk/core';
import { ScatterData, PointType, LineType } from '../types';
import * as _ from 'lodash';
const BAR_SERIE_DEFAULTS = {
renderBarLabels: false,
stacked: false,
barWidth: undefined,
maxBarWidth: undefined,
minBarWidth: undefined,
maxAnnotationSize: undefined,
minAnnotationSize: undefined,
matching: false,
opacityFormatter: undefined,
annotations: [],
};
const DEFAULT_POINT_SIZE = 4;
export class BarConfig extends CoreOptions<BarOptions> {
const SCATTER_DATA_DEFAULTS = {
pointType: PointType.CIRCLE,
lineType: LineType.NONE,
pointSize: DEFAULT_POINT_SIZE,
colorFormatter: undefined
};
constructor(options: BarOptions) {
super(options, BAR_SERIE_DEFAULTS);
}
export class ScatterSeries extends CoreSeries<ScatterData> {
get barOptions(): BarAdditionalOptions {
return {
renderBarLabels: this._options.renderBarLabels,
stacked: this._options.stacked,
barWidth: this._options.barWidth,
maxBarWidth: this._options.maxBarWidth,
minBarWidth: this._options.minBarWidth,
maxAnnotationSize: this._options.maxAnnotationSize,
minAnnotationSize: this._options.minAnnotationSize,
matching: this._options.matching,
opacityFormatter: this._options.opacityFormatter,
annotations: this._options.annotations,
}
constructor(series: ScatterData[]) {
super(series);
}
// event callbacks
callbackContextMenu(data: any): void {
if(_.has(this._options.eventsCallbacks, 'contextMenu')) {
this._options.eventsCallbacks.contextMenu(data);
}
protected get defaults(): ScatterData {
return { ...this._coreDefaults, ...SCATTER_DATA_DEFAULTS };
}
get contextMenu(): (evt: any) => void {
return this._options.eventsCallbacks.contextMenu;
// move to parent
public getSerieByTarget(target: string): ScatterData | undefined {
return _.find(this.visibleSeries, serie => serie.target === target);
}
}

26
src/models/bar_series.ts
Unescape View File

@ -1,15 +1,29 @@
import { CoreSeries } from '@chartwerk/core';
import { BarSerie } from '../types';
import { ScatterData, PointType, LineType } from '../types';
import * as _ from 'lodash';
const BAR_SERIE_DEFAULTS = {
matchedKey: undefined,
const DEFAULT_POINT_SIZE = 4;
const SCATTER_DATA_DEFAULTS = {
pointType: PointType.CIRCLE,
lineType: LineType.NONE,
pointSize: DEFAULT_POINT_SIZE,
colorFormatter: undefined
};
export class BarSeries extends CoreSeries<BarSerie> {
export class ScatterSeries extends CoreSeries<ScatterData> {
constructor(series: ScatterData[]) {
super(series);
}
protected get defaults(): ScatterData {
return { ...this._coreDefaults, ...SCATTER_DATA_DEFAULTS };
}
constructor(series: BarSerie[]) {
super(series, BAR_SERIE_DEFAULTS);
// move to parent
public getSerieByTarget(target: string): ScatterData | undefined {
return _.find(this.visibleSeries, serie => serie.target === target);
}
}

29
src/types.ts
Unescape View File

@ -5,30 +5,27 @@ export type BarSerieParams = {
colorFormatter: (serie: BarSerie) => string;
}
export type BarSerie = Serie & Partial<BarSerieParams>;
export type BarAdditionalOptions = {
renderBarLabels?: boolean;
stacked?: boolean;
barWidth?: number; // width in x axis unit
maxBarWidth?: number; // in px
minBarWidth?: number; // in px
maxAnnotationSize?: number; // in px TODO: move to annotaions
minAnnotationSize?: number; // in px
matching?: boolean;
opacityFormatter?: (data: RowValues) => number;
annotations?: {
export type BarOptionsParams = {
renderBarLabels: boolean;
stacked: boolean;
barWidth: number; // width in x axis unit
maxBarWidth: number; // in px
minBarWidth: number; // in px
maxAnnotationSize: number; // in px TODO: move to annotaions
minAnnotationSize: number; // in px
matching: boolean;
opacityFormatter: (data: RowValues) => number;
annotations: {
key: string, // matchedKey from series
// TODO: add enum with "triangle" option
color: string,
}[];
eventsCallbacks?: {
contextMenu?: (data: any) => void;
}
}
export type BarOptions = Options & Partial<BarAdditionalOptions>;
export type BarOptions = Options & Partial<BarOptionsParams>;
export type RowValues = {
key: number,
values: number[],
additionalValues: (null | number)[], // values in datapoints third column
colors: (string | ((data: any) => string))[],
colors: string[],
serieTarget: string[],
}

5130
yarn.lock
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save