Browse Source

try to adddiscrete type

pull/1/head
vargburz 2 years ago
parent
commit
3777ba470c
  1. 7
      src/index.ts
  2. 54
      src/models/data_processor.ts
  3. 3
      src/types.ts

7
src/index.ts

@ -3,8 +3,9 @@ import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, AxisFormat } from '@cha
import { BarConfig } from './models/bar_options'; import { BarConfig } from './models/bar_options';
import { BarSeries } from './models/bar_series'; import { BarSeries } from './models/bar_series';
import { BarAnnotation } from './models/bar_annotation'; import { BarAnnotation } from './models/bar_annotation';
import { DataProcessor } from './models/data_processor';
import { BarSerie, BarOptions, RowValues } from './types'; import { BarSerie, BarOptions } from './types';
import { findClosest } from './utils'; import { findClosest } from './utils';
import * as d3 from 'd3'; import * as d3 from 'd3';
@ -13,14 +14,16 @@ import * as _ from 'lodash';
export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> { export class ChartwerkBarPod extends ChartwerkPod<BarSerie, BarOptions> {
barYScale: null | d3.ScaleLinear<number, number> = null; barYScale: null | d3.ScaleLinear<number, number> = null;
_seriesDataForRendring = []; dataProcessor: DataProcessor;
series: BarSeries; series: BarSeries;
options: BarConfig; options: BarConfig;
constructor(el: HTMLElement, _series: BarSerie[] = [], _options: BarOptions = {}) { constructor(el: HTMLElement, _series: BarSerie[] = [], _options: BarOptions = {}) {
super(el, _series, _options); super(el, _series, _options);
this.series = new BarSeries(_series); this.series = new BarSeries(_series);
this.options = new BarConfig(_options); this.options = new BarConfig(_options);
this.dataProcessor = new DataProcessor(this.series.visibleSeries, this.options);
} }
protected renderMetrics(): void { protected renderMetrics(): void {

54
src/models/data_processor.ts

@ -1,36 +1,60 @@
import { BarSerie, BarOptions, Datapoint, Color, ValueX, OpacityFormatter } from '../types'; import { BarSerie, BarOptions, Datapoint, Color, ValueX, OpacityFormatter, BarPodType } from '../types';
import * as _ from 'lodash'; import * as _ from 'lodash';
export type DataRow = { export type DataRow = {
key: number, // x key: number; // x
values: number[], // y list data: {
colors: string[], [serieTarget: string]: {
opacity: number[], values: number[]; // y list
serieTarget: string, colors: string[];
opacity: number[];
}
};
maxSumm: number;
minSubtraction: number;
} }
export class DataProcessor { export class DataProcessor {
_formattedDataRows: DataRow[]; _formattedDataRows: DataRow[];
constructor(protected series: BarSerie[], protected options: BarOptions) { constructor(protected series: BarSerie[], protected options: BarOptions) {
this.setDataRowsForNonDiscreteType();
} }
public get dataRows(): DataRow[] { public get dataRows(): DataRow[] {
return this._formattedDataRows; return this._formattedDataRows;
} }
protected setDataRowsForDiscreteType(): void {
const groupByList = (
this.options.type[BarPodType.DISCRETE].groupBy.x ||
_.map(_.first(this.series).datapoints, datapoint => datapoint[0])
);
let rows = [];
// TODO: not effective
for(let groupItem of groupByList) {
for(let serie of this.series) {
const datapoint = _.find(serie.datapoints, )
}
}
}
protected setDataRowsForNonDiscreteType(): void { protected setDataRowsForNonDiscreteType(): void {
for(let serie of this.series) { for(let serie of this.series) {
const rows = _.map(serie.datapoints, (datapoint: Datapoint) => { const rows = _.map(serie.datapoints, (datapoint: Datapoint) => {
const values = _.tail(datapoint); const values = _.tail(datapoint);
return { return {
key: datapoint[0], // x key: datapoint[0], // x
values, // y list data: {
colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target), [serie.target]: {
opacity: this.getOpacityForEachValue(values, serie.opacityFormatter, datapoint[0], serie.target), values, // y list
target: serie.target, colors: this.getColorsForEachValue(values, serie.color, datapoint[0], serie.target),
opacity: this.getOpacityForEachValue(values, serie.opacityFormatter, datapoint[0], serie.target),
}
},
maxSumm: this.getMaxSumm(values), // max y axis scale
minSubtraction: this.getMinSubtraction(values), // min y axis scale
} }
}); });
this._formattedDataRows = _.concat(this._formattedDataRows, rows); this._formattedDataRows = _.concat(this._formattedDataRows, rows);
@ -57,4 +81,12 @@ export class DataProcessor {
} }
return _.map(values, (value, i) => opacity({ value, barIndex: i, key, target })); return _.map(values, (value, i) => opacity({ value, barIndex: i, key, target }));
} }
getMaxSumm(values: number[]): number {
return values.reduce((prev, curr) => curr > 0 ? prev + curr : prev, 0);
}
getMinSubtraction(values: number[]): number {
return values.reduce((prev, curr) => curr < 0 ? prev + curr : prev, 0);
}
} }

3
src/types.ts

@ -25,7 +25,8 @@ export type BarSerie = Serie & BarSerieAdditionalParams;
export type BarAdditionalOptions = { export type BarAdditionalOptions = {
type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both type: { // BarPodType.DISCRETE or BarPodType.NON_DISCRETE. Cant be both
[BarPodType.DISCRETE]: { [BarPodType.DISCRETE]: {
groupBy: { x: ValueX[] }; // union bars as one group, see examples/demo-group-by.html // union bars as one group, see examples/demo-group-by.html
groupBy: { x: ValueX[] }; // use list of X values from first Serie by default
innerSize: { value: number, type?: SizeType.PERCENT | SizeType.PX }; // size of bars inside one group innerSize: { value: number, type?: SizeType.PERCENT | SizeType.PX }; // size of bars inside one group
groupSize: { value: number, type?: SizeType.PERCENT | SizeType.PX }; groupSize: { value: number, type?: SizeType.PERCENT | SizeType.PX };
}; };

Loading…
Cancel
Save