mdt-charts 1.12.9 → 1.12.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/designer/designerConfig.d.ts +1 -1
- package/lib/engine/features/axis/axis.js +1 -1
- package/lib/engine/features/axis/axisLabelDomHelper.js +1 -1
- package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js +1 -1
- package/lib/model/dataManagerModel/dataManagerModel.d.ts +2 -0
- package/lib/model/dataManagerModel/dataManagerModel.js +10 -5
- package/lib/model/featuresModel/axisModel.js +1 -1
- package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts +0 -1
- package/lib/model/featuresModel/legendModel/legendCanvasModel.js +0 -25
- package/lib/model/featuresModel/legendModel/legendModel.d.ts +2 -6
- package/lib/model/featuresModel/legendModel/legendModel.js +4 -47
- package/lib/model/featuresModel/legendModel/polarMarginCalculator.d.ts +2 -5
- package/lib/model/featuresModel/legendModel/polarMarginCalculator.js +12 -29
- package/lib/model/featuresModel/legendModel/twoDimLegendModel.d.ts +7 -0
- package/lib/model/featuresModel/legendModel/twoDimLegendModel.js +24 -0
- package/lib/model/featuresModel/otherComponents.d.ts +0 -2
- package/lib/model/featuresModel/otherComponents.js +1 -1
- package/lib/model/featuresModel/scaleModel/scaleModel.d.ts +2 -2
- package/lib/model/featuresModel/scaleModel/scaleModel.js +6 -6
- package/lib/model/helpers/modelHelper.d.ts +7 -0
- package/lib/model/helpers/modelHelper.js +41 -0
- package/lib/model/helpers/unitsFromConfigReader.d.ts +2 -0
- package/lib/model/helpers/unitsFromConfigReader.js +7 -0
- package/lib/model/helpers/unitsReader.d.ts +5 -0
- package/lib/model/helpers/unitsReader.js +15 -0
- package/lib/model/margin/marginModel.d.ts +11 -0
- package/lib/model/margin/marginModel.js +26 -0
- package/lib/model/margin/twoDim/twoDimMarginModel.d.ts +14 -0
- package/lib/model/margin/twoDim/twoDimMarginModel.js +69 -0
- package/lib/model/marginModel.d.ts +2 -3
- package/lib/model/marginModel.js +11 -41
- package/lib/model/model.d.ts +2 -2
- package/lib/model/modelBuilder.d.ts +0 -1
- package/lib/model/modelBuilder.js +7 -12
- package/lib/model/notations/intervalModel.d.ts +3 -3
- package/lib/model/notations/intervalModel.js +6 -6
- package/lib/model/notations/polar/donut/donutThicknessService.d.ts +0 -2
- package/lib/model/notations/polar/donut/donutThicknessService.js +4 -16
- package/lib/model/notations/twoDimensionalModel.d.ts +2 -2
- package/lib/model/notations/twoDimensionalModel.js +4 -3
- package/lib/style/charts-main.css +2 -1
- package/lib/style/charts-main.less +2 -1
- package/package.json +1 -1
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { Scale } from "../scale/scale";
|
|
2
|
-
import { AXIS_VERTICAL_LABEL_PADDING } from "../../../model/marginModel";
|
|
3
2
|
import { NamesHelper } from '../../helpers/namesHelper';
|
|
4
3
|
import { AxisHelper } from './axisHelper';
|
|
5
4
|
import { AxisLabelHelper } from './axisLabelDomHelper';
|
|
6
5
|
import { AxisDomHelper } from './axisDomHelper';
|
|
7
6
|
import { select } from 'd3-selection';
|
|
8
7
|
import { AxisLabelsEventManager } from './axisLabelsEventManager';
|
|
8
|
+
import { AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDimMarginModel';
|
|
9
9
|
const MINIMAL_STEP_SIZE_FOR_WRAPPING = 38;
|
|
10
10
|
export class Axis {
|
|
11
11
|
static render(block, scales, scaleModel, axisModel, blockSize) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { select } from 'd3-selection';
|
|
2
|
-
import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from "../../../model/marginModel";
|
|
3
2
|
import { DomHelper } from '../../helpers/domHelper';
|
|
4
3
|
import { Helper } from '../../helpers/helper';
|
|
4
|
+
import { AXIS_HORIZONTAL_LABEL_PADDING, AXIS_VERTICAL_LABEL_PADDING } from '../../../model/margin/twoDim/twoDimMarginModel';
|
|
5
5
|
export class AxisLabelHelper {
|
|
6
6
|
static setTitles(axisElement) {
|
|
7
7
|
axisElement.selectAll('.tick text')
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as chroma from "chroma-js";
|
|
2
|
-
import { ModelHelper } from "../modelHelper";
|
|
2
|
+
import { ModelHelper } from "../helpers/modelHelper";
|
|
3
3
|
import { ChartStyleModelService } from "./chartStyleModel";
|
|
4
4
|
export class TwoDimensionalChartStyleModel {
|
|
5
5
|
constructor(charts, chartStyleConfig) {
|
|
@@ -11,8 +11,10 @@ export interface DataLegendParams {
|
|
|
11
11
|
}
|
|
12
12
|
export declare class DataManagerModel {
|
|
13
13
|
private static service;
|
|
14
|
+
private static polarMarginCalculator;
|
|
14
15
|
static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
|
|
15
16
|
static initDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): void;
|
|
17
|
+
private static initScopedData;
|
|
16
18
|
static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
|
|
17
19
|
private static initDataScopeFor2D;
|
|
18
20
|
private static initDataScopeForPolar;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { AxisModel } from "../featuresModel/axisModel";
|
|
2
2
|
import { LegendCanvasModel } from "../featuresModel/legendModel/legendCanvasModel";
|
|
3
|
-
import {
|
|
4
|
-
import { ModelHelper } from "../modelHelper";
|
|
3
|
+
import { ModelHelper } from "../helpers/modelHelper";
|
|
5
4
|
import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
|
|
6
5
|
import { DataManagerModelService } from "./dataManagerModelService";
|
|
6
|
+
import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
|
|
7
7
|
export class DataManagerModel {
|
|
8
8
|
static getPreparedData(data, allowableKeys, config) {
|
|
9
9
|
const scopedData = this.getScopedData(data, allowableKeys, config);
|
|
@@ -17,6 +17,11 @@ export class DataManagerModel {
|
|
|
17
17
|
else if (config.options.type === 'polar') {
|
|
18
18
|
this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
|
|
19
19
|
}
|
|
20
|
+
this.initScopedData(data, modelInstance, config);
|
|
21
|
+
}
|
|
22
|
+
static initScopedData(data, modelInstance, config) {
|
|
23
|
+
const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);
|
|
24
|
+
modelInstance.dataModel.repository.initScopedFullSource(preparedData);
|
|
20
25
|
}
|
|
21
26
|
static getDataValuesByKeyField(data, dataSourceName, keyFieldName) {
|
|
22
27
|
return data[dataSourceName].map(dataRow => dataRow[keyFieldName]);
|
|
@@ -66,14 +71,13 @@ export class DataManagerModel {
|
|
|
66
71
|
//TODO: global refactor of method
|
|
67
72
|
const allowableKeys = keys.slice(0, maxItemsNumber);
|
|
68
73
|
const hidedRecordsAmount = keys.length - maxItemsNumber;
|
|
69
|
-
|
|
70
|
-
marginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
|
|
74
|
+
this.polarMarginCalculator.updateMargin(position, canvasModel, legendBlock, position === "bottom" ? size.height : size.width);
|
|
71
75
|
modelInstance.dataModel.initScope(this.limitAllowableKeys(allowableKeys, hidedRecordsAmount, modelInstance.dataModel));
|
|
72
76
|
}
|
|
73
77
|
//TODO: position type
|
|
74
78
|
static getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock) {
|
|
75
79
|
if (position === 'right') {
|
|
76
|
-
return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, legendCanvas.
|
|
80
|
+
return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
|
|
77
81
|
}
|
|
78
82
|
else {
|
|
79
83
|
return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
|
|
@@ -143,3 +147,4 @@ export class DataManagerModel {
|
|
|
143
147
|
}
|
|
144
148
|
}
|
|
145
149
|
DataManagerModel.service = new DataManagerModelService();
|
|
150
|
+
DataManagerModel.polarMarginCalculator = new LegendPolarMarginCalculator();
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ModelHelper } from "../modelHelper";
|
|
1
|
+
import { ModelHelper } from "../helpers/modelHelper";
|
|
2
2
|
import { AxisType, CLASSES } from "../modelBuilder";
|
|
3
3
|
import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
|
|
4
4
|
import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
|
|
@@ -2,7 +2,6 @@ import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
|
|
|
2
2
|
import { LegendPosition } from "../../model";
|
|
3
3
|
export declare type LegendItemsDirection = 'row' | 'column';
|
|
4
4
|
export declare class LegendCanvasModel {
|
|
5
|
-
static getLegendHeight(texts: string[], chartBlockWidth: number, itemsDirection: LegendItemsDirection, legendPosition: LegendPosition): number;
|
|
6
5
|
static getLegendItemWidth(text: string): number;
|
|
7
6
|
static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
|
|
8
7
|
private static getLegendWrapperEl;
|
|
@@ -1,30 +1,5 @@
|
|
|
1
1
|
import { CLASSES } from "../../modelBuilder";
|
|
2
2
|
export class LegendCanvasModel {
|
|
3
|
-
static getLegendHeight(texts, chartBlockWidth, itemsDirection, legendPosition) {
|
|
4
|
-
const legendWrapper = this.getLegendWrapperEl(chartBlockWidth, itemsDirection);
|
|
5
|
-
texts.forEach(text => {
|
|
6
|
-
const itemWrapper = document.createElement('div');
|
|
7
|
-
const colorBlock = document.createElement('span');
|
|
8
|
-
const textBlock = document.createElement('span');
|
|
9
|
-
itemWrapper.classList.add("legend-item");
|
|
10
|
-
if (legendPosition === 'bottom') {
|
|
11
|
-
itemWrapper.classList.add('legend-item-inline');
|
|
12
|
-
textBlock.classList.add('legend-label-nowrap');
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
15
|
-
itemWrapper.classList.add('legend-item-row');
|
|
16
|
-
}
|
|
17
|
-
colorBlock.classList.add(CLASSES.legendColor);
|
|
18
|
-
textBlock.classList.add(CLASSES.legendLabel);
|
|
19
|
-
textBlock.textContent = text;
|
|
20
|
-
itemWrapper.append(colorBlock, textBlock);
|
|
21
|
-
legendWrapper.append(itemWrapper);
|
|
22
|
-
});
|
|
23
|
-
document.body.append(legendWrapper);
|
|
24
|
-
const height = legendWrapper.offsetHeight;
|
|
25
|
-
legendWrapper.remove();
|
|
26
|
-
return height + 1;
|
|
27
|
-
}
|
|
28
3
|
static getLegendItemWidth(text) {
|
|
29
4
|
const itemWrapper = document.createElement('div');
|
|
30
5
|
itemWrapper.style.opacity = '0';
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ILegendModel, LegendBlockModel, Orient } from "../../model";
|
|
1
|
+
import { LegendBlockModel } from "../../model";
|
|
3
2
|
import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
|
|
4
3
|
import { LegendItemsDirection } from "./legendCanvasModel";
|
|
5
4
|
export declare class LegendModel {
|
|
6
|
-
static
|
|
7
|
-
static getBaseLegendBlockModel(notation: ChartNotation, canvasModel: CanvasModel): LegendBlockModel;
|
|
8
|
-
static getLegendModel(chartNotation: ChartNotation, legendShow: boolean, canvasModel: CanvasModel): ILegendModel;
|
|
5
|
+
static getBaseLegendBlockModel(canvasModel: CanvasModel): LegendBlockModel;
|
|
9
6
|
static getLegendItemClass(itemsPosition: LegendItemsDirection): string;
|
|
10
|
-
private static getLegendWidth;
|
|
11
7
|
}
|
|
@@ -1,20 +1,5 @@
|
|
|
1
|
-
import { ModelHelper } from "../../modelHelper";
|
|
2
|
-
import { PolarModel } from "../../notations/polar/polarModel";
|
|
3
|
-
import { LegendCanvasModel } from "./legendCanvasModel";
|
|
4
1
|
export class LegendModel {
|
|
5
|
-
static
|
|
6
|
-
if (position === 'left' || position === 'right')
|
|
7
|
-
return this.getLegendWidth(texts, legendMaxWidth);
|
|
8
|
-
//TODO: rm duplicate
|
|
9
|
-
if (chartNotation === '2d' || chartNotation === 'interval') {
|
|
10
|
-
return LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
|
|
11
|
-
}
|
|
12
|
-
else if (chartNotation === 'polar') {
|
|
13
|
-
const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
|
|
14
|
-
return size;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
static getBaseLegendBlockModel(notation, canvasModel) {
|
|
2
|
+
static getBaseLegendBlockModel(canvasModel) {
|
|
18
3
|
const mt = 20, mb = 20, ml = 20, mr = 20;
|
|
19
4
|
return {
|
|
20
5
|
coordinate: {
|
|
@@ -25,12 +10,12 @@ export class LegendModel {
|
|
|
25
10
|
},
|
|
26
11
|
bottom: {
|
|
27
12
|
size: 0,
|
|
28
|
-
margin: { top:
|
|
13
|
+
margin: { top: 10, bottom: 20, left: 0, right: 0 },
|
|
29
14
|
pad: 0
|
|
30
15
|
},
|
|
31
16
|
right: {
|
|
32
17
|
size: 0,
|
|
33
|
-
margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left:
|
|
18
|
+
margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 15, right: 0 },
|
|
34
19
|
pad: 0
|
|
35
20
|
},
|
|
36
21
|
top: {
|
|
@@ -38,38 +23,10 @@ export class LegendModel {
|
|
|
38
23
|
margin: { top: 5, bottom: 10, left: 0, right: 0 },
|
|
39
24
|
pad: canvasModel.titleCanvas.getAllNeededSpace()
|
|
40
25
|
}
|
|
41
|
-
}
|
|
42
|
-
standartTooltip: notation === 'polar' ? false : true
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
static getLegendModel(chartNotation, legendShow, canvasModel) {
|
|
46
|
-
if (!legendShow)
|
|
47
|
-
return {
|
|
48
|
-
position: 'off'
|
|
49
|
-
};
|
|
50
|
-
let legendPosition = 'off';
|
|
51
|
-
if (chartNotation === '2d' || chartNotation === 'interval')
|
|
52
|
-
legendPosition = 'top';
|
|
53
|
-
else if (chartNotation === 'polar') {
|
|
54
|
-
legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
|
|
55
|
-
}
|
|
56
|
-
return {
|
|
57
|
-
position: legendPosition
|
|
26
|
+
}
|
|
58
27
|
};
|
|
59
28
|
}
|
|
60
29
|
static getLegendItemClass(itemsPosition) {
|
|
61
30
|
return itemsPosition === 'column' ? 'legend-item-row' : 'legend-item-inline';
|
|
62
31
|
}
|
|
63
|
-
static getLegendWidth(texts, legendMaxWidth) {
|
|
64
|
-
let longestText = '';
|
|
65
|
-
let biggestScore = 0;
|
|
66
|
-
texts.forEach(text => {
|
|
67
|
-
if (ModelHelper.getStringScore(text) > biggestScore) {
|
|
68
|
-
longestText = text;
|
|
69
|
-
biggestScore = ModelHelper.getStringScore(text);
|
|
70
|
-
}
|
|
71
|
-
});
|
|
72
|
-
const maxWidth = LegendCanvasModel.getLegendItemWidth(longestText + '?'); // One letter reserve
|
|
73
|
-
return maxWidth > legendMaxWidth ? legendMaxWidth : maxWidth;
|
|
74
|
-
}
|
|
75
32
|
}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { LegendBlockCanvas } from "../../../designer/designerConfig";
|
|
2
2
|
import { LegendBlockModel } from "../../model";
|
|
3
3
|
import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
|
|
4
|
-
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
5
4
|
export declare class LegendPolarMarginCalculator {
|
|
6
|
-
recalcMargin(modelInstance: ModelInstance, options: MdtChartsPolarOptions, legendMaxWidth: number, legendBlockModel: LegendBlockModel, data: MdtChartsDataSource): void;
|
|
7
5
|
updateMargin(legendPosition: "right" | "bottom", canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
|
|
6
|
+
getMaxLegendWidth(legendCanvas: LegendBlockCanvas, blockWidth: number): number;
|
|
8
7
|
private updateMarginObj;
|
|
9
|
-
private getLegendSize;
|
|
10
|
-
private getLegendItemsContent;
|
|
11
8
|
}
|
|
@@ -1,30 +1,20 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { MarginModel } from "../../marginModel";
|
|
3
|
-
import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polar/polarModel";
|
|
4
|
-
import { LegendModel } from "./legendModel";
|
|
1
|
+
import { getPxPercentUnitByValue } from "../../helpers/unitsFromConfigReader";
|
|
2
|
+
import { MarginModel } from "../../margin/marginModel";
|
|
5
3
|
export class LegendPolarMarginCalculator {
|
|
6
|
-
recalcMargin(modelInstance, options, legendMaxWidth, legendBlockModel, data) {
|
|
7
|
-
const canvasModel = modelInstance.canvasModel;
|
|
8
|
-
let legendPosition = LegendModel.getLegendModel(options.type, options.legend.show, modelInstance.canvasModel).position;
|
|
9
|
-
modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
|
|
10
|
-
if (legendPosition === "off")
|
|
11
|
-
return;
|
|
12
|
-
let legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition);
|
|
13
|
-
if (legendPosition === "right" && canvasModel.getChartBlockWidth() - legendSize < MIN_DONUT_BLOCK_SIZE) {
|
|
14
|
-
legendSize = this.getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, "bottom");
|
|
15
|
-
legendPosition = "bottom";
|
|
16
|
-
modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
|
|
17
|
-
}
|
|
18
|
-
if (legendSize !== 0) {
|
|
19
|
-
canvasModel.increaseMarginSide(legendPosition, legendSize);
|
|
20
|
-
MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
|
|
21
|
-
}
|
|
22
|
-
legendBlockModel.coordinate[legendPosition].size = legendSize;
|
|
23
|
-
}
|
|
24
4
|
updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
|
|
25
5
|
canvasModel.legendCanvas.setPosition(legendPosition);
|
|
26
6
|
this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
|
|
27
7
|
}
|
|
8
|
+
getMaxLegendWidth(legendCanvas, blockWidth) {
|
|
9
|
+
const maxWidth = legendCanvas.maxWidth;
|
|
10
|
+
if (typeof maxWidth === "number")
|
|
11
|
+
return maxWidth;
|
|
12
|
+
const unit = getPxPercentUnitByValue(maxWidth);
|
|
13
|
+
const maxWidthNumber = parseInt(maxWidth);
|
|
14
|
+
if (unit === "px")
|
|
15
|
+
return maxWidthNumber;
|
|
16
|
+
return maxWidthNumber / 100 * blockWidth;
|
|
17
|
+
}
|
|
28
18
|
updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
|
|
29
19
|
if (legendSize !== 0) {
|
|
30
20
|
canvasModel.increaseMarginSide(legendPosition, legendSize);
|
|
@@ -32,11 +22,4 @@ export class LegendPolarMarginCalculator {
|
|
|
32
22
|
}
|
|
33
23
|
legendBlockModel.coordinate[legendPosition].size = legendSize;
|
|
34
24
|
}
|
|
35
|
-
getLegendSize(options, legendMaxWidth, legendBlockModel, data, canvasModel, legendPosition) {
|
|
36
|
-
const legendItemsContent = this.getLegendItemsContent(options, data);
|
|
37
|
-
return LegendModel.getLegendSize(options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
|
|
38
|
-
}
|
|
39
|
-
getLegendItemsContent(options, data) {
|
|
40
|
-
return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
|
|
41
|
-
}
|
|
42
25
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { LegendBlockModel } from "../../model";
|
|
2
|
+
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
3
|
+
export declare class TwoDimLegendModel {
|
|
4
|
+
recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel): void;
|
|
5
|
+
private getLegendSize;
|
|
6
|
+
private getLegendModel;
|
|
7
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { MarginModel } from "../../margin/marginModel";
|
|
2
|
+
export class TwoDimLegendModel {
|
|
3
|
+
recalcMarginWith2DLegend(modelInstance, legendBlockModel) {
|
|
4
|
+
const canvasModel = modelInstance.canvasModel;
|
|
5
|
+
const legendPosition = this.getLegendModel().position;
|
|
6
|
+
modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
|
|
7
|
+
if (legendPosition !== 'off') {
|
|
8
|
+
const legendSize = this.getLegendSize();
|
|
9
|
+
canvasModel.increaseMarginSide(legendPosition, legendSize);
|
|
10
|
+
if (legendSize !== 0)
|
|
11
|
+
MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
|
|
12
|
+
legendBlockModel.coordinate[legendPosition].size = legendSize;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
getLegendSize() {
|
|
16
|
+
const heightOfLegendItemWithoutWordWrapping = 20;
|
|
17
|
+
return heightOfLegendItemWithoutWordWrapping;
|
|
18
|
+
}
|
|
19
|
+
getLegendModel() {
|
|
20
|
+
return {
|
|
21
|
+
position: "top"
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import { OtherCommonComponents } from "../model";
|
|
2
2
|
import { ElementsOptions } from "../../designer/designerConfig";
|
|
3
|
-
import { ChartNotation } from "../../config/config";
|
|
4
3
|
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
5
4
|
interface OtherComponentsModelDependencies {
|
|
6
5
|
elementsOptions: ElementsOptions;
|
|
7
6
|
title: string;
|
|
8
|
-
notation: ChartNotation;
|
|
9
7
|
}
|
|
10
8
|
export declare class OtherComponentsModel {
|
|
11
9
|
static getOtherComponentsModel(dependencies: OtherComponentsModelDependencies, modelInstance: ModelInstance): OtherCommonComponents;
|
|
@@ -6,7 +6,7 @@ export class OtherComponentsModel {
|
|
|
6
6
|
const canvasModel = modelInstance.canvasModel;
|
|
7
7
|
canvasModel.titleCanvas.init(TitleModel.getTitleModel(dependencies.title));
|
|
8
8
|
return {
|
|
9
|
-
legendBlock: LegendModel.getBaseLegendBlockModel(
|
|
9
|
+
legendBlock: LegendModel.getBaseLegendBlockModel(canvasModel),
|
|
10
10
|
titleBlock: canvasModel.titleCanvas.getModel(),
|
|
11
11
|
tooltipBlock: TooltipModel.getTooltipModel(dependencies.elementsOptions.tooltip)
|
|
12
12
|
};
|
|
@@ -7,10 +7,10 @@ export declare enum ScaleType {
|
|
|
7
7
|
}
|
|
8
8
|
export declare class ScaleModel {
|
|
9
9
|
static getScaleKey(allowableKeys: string[], orient: ChartOrientation, canvasModel: CanvasModel, charts: MdtChartsTwoDimensionalChart[], barCharts: MdtChartsTwoDimensionalChart[]): ScaleKeyModel;
|
|
10
|
-
static getScaleLinear(options: MdtChartsTwoDimensionalOptions,
|
|
10
|
+
static getScaleLinear(options: MdtChartsTwoDimensionalOptions, dataRows: MdtChartsDataRow[], canvasModel: CanvasModel): ScaleValueModel;
|
|
11
11
|
static getRangePeek(scaleType: ScaleType, chartOrientation: string, canvasModel: CanvasModel): number;
|
|
12
12
|
static getDateValueDomain(data: MdtChartsDataSource, chart: IntervalChart, keyAxisPosition: AxisPosition, dataSource: string): [Date, Date];
|
|
13
|
-
static getLinearDomain(configDomain: NumberDomain,
|
|
13
|
+
static getLinearDomain(configDomain: NumberDomain, dataRows: MdtChartsDataRow[], configOptions: MdtChartsTwoDimensionalOptions): [number, number];
|
|
14
14
|
static getScaleKeyType(charts: MdtChartsTwoDimensionalChart[]): ScaleKeyType;
|
|
15
15
|
static getScaleValueType(charts: MdtChartsTwoDimensionalChart[] | IntervalChart[]): ScaleValueType;
|
|
16
16
|
static getElementsAmount(barCharts: MdtChartsTwoDimensionalChart[]): number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ModelHelper } from "../../modelHelper";
|
|
1
|
+
import { ModelHelper } from "../../helpers/modelHelper";
|
|
2
2
|
export var ScaleType;
|
|
3
3
|
(function (ScaleType) {
|
|
4
4
|
ScaleType[ScaleType["Key"] = 0] = "Key";
|
|
@@ -16,9 +16,9 @@ export class ScaleModel {
|
|
|
16
16
|
elementsAmount: this.getElementsAmount(barCharts)
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
static getScaleLinear(options,
|
|
19
|
+
static getScaleLinear(options, dataRows, canvasModel) {
|
|
20
20
|
return {
|
|
21
|
-
domain: ScaleModel.getLinearDomain(options.axis.value.domain,
|
|
21
|
+
domain: ScaleModel.getLinearDomain(options.axis.value.domain, dataRows, options),
|
|
22
22
|
range: {
|
|
23
23
|
start: 0,
|
|
24
24
|
end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
|
|
@@ -43,15 +43,15 @@ export class ScaleModel {
|
|
|
43
43
|
return [domainPeekMin, domainPeekMax];
|
|
44
44
|
return [domainPeekMax, domainPeekMin];
|
|
45
45
|
}
|
|
46
|
-
static getLinearDomain(configDomain,
|
|
46
|
+
static getLinearDomain(configDomain, dataRows, configOptions) {
|
|
47
47
|
let domainPeekMin;
|
|
48
48
|
let domainPeekMax;
|
|
49
49
|
if (configDomain.start === -1)
|
|
50
|
-
domainPeekMin = this.getScaleMinValue(configOptions.charts,
|
|
50
|
+
domainPeekMin = this.getScaleMinValue(configOptions.charts, dataRows);
|
|
51
51
|
else
|
|
52
52
|
domainPeekMin = configDomain.start;
|
|
53
53
|
if (configDomain.end === -1)
|
|
54
|
-
domainPeekMax = this.getScaleMaxValue(configOptions.charts,
|
|
54
|
+
domainPeekMax = this.getScaleMaxValue(configOptions.charts, dataRows);
|
|
55
55
|
else
|
|
56
56
|
domainPeekMax = configDomain.end;
|
|
57
57
|
if (configOptions.axis.key.position === 'start')
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { MdtChartsDataSource, IntervalChart } from "../../config/config";
|
|
2
|
+
export declare class ModelHelper {
|
|
3
|
+
static getSum(items: number[]): number;
|
|
4
|
+
static getMinAndMaxOfIntervalData(data: MdtChartsDataSource, dataSource: string, chart: IntervalChart): [Date, Date];
|
|
5
|
+
static getUniqueValues(values: string[]): string[];
|
|
6
|
+
static getStringScore(word: string): number;
|
|
7
|
+
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export class ModelHelper {
|
|
2
|
+
static getSum(items) {
|
|
3
|
+
return items.reduce((acc, item) => acc + item, 0);
|
|
4
|
+
}
|
|
5
|
+
static getMinAndMaxOfIntervalData(data, dataSource, chart) {
|
|
6
|
+
let min = data[dataSource][0][chart.data.valueField1.name];
|
|
7
|
+
let max = data[dataSource][0][chart.data.valueField1.name];
|
|
8
|
+
const chartData = data[dataSource];
|
|
9
|
+
const valueField1 = chart.data.valueField1.name;
|
|
10
|
+
const valueField2 = chart.data.valueField2.name;
|
|
11
|
+
chartData.forEach(dataRow => {
|
|
12
|
+
if (dataRow[valueField1] > max)
|
|
13
|
+
max = dataRow[valueField1];
|
|
14
|
+
if (dataRow[valueField1] < min)
|
|
15
|
+
min = dataRow[valueField1];
|
|
16
|
+
if (dataRow[valueField2] > max)
|
|
17
|
+
max = dataRow[valueField2];
|
|
18
|
+
if (dataRow[valueField2] < min)
|
|
19
|
+
min = dataRow[valueField2];
|
|
20
|
+
});
|
|
21
|
+
return [min, max];
|
|
22
|
+
}
|
|
23
|
+
static getUniqueValues(values) {
|
|
24
|
+
const uniqueValues = values.filter((keyValue, index, self) => self.indexOf(keyValue) === index);
|
|
25
|
+
return uniqueValues;
|
|
26
|
+
}
|
|
27
|
+
static getStringScore(word) {
|
|
28
|
+
// lower case letter width ~ 0.74 from upper case width.
|
|
29
|
+
// Number width == lower case letter width
|
|
30
|
+
let score = 0;
|
|
31
|
+
const upperLetterScore = 1;
|
|
32
|
+
const lowerLetterScore = 0.74;
|
|
33
|
+
for (let i = 0; i < word.length; i++) {
|
|
34
|
+
if (word[i].toUpperCase() === word[i] && parseFloat(word[i]).toString() !== word[i])
|
|
35
|
+
score += upperLetterScore;
|
|
36
|
+
else
|
|
37
|
+
score += lowerLetterScore;
|
|
38
|
+
}
|
|
39
|
+
return score;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export class UnitsReader {
|
|
2
|
+
getUnitByValue(value, defaultUnit, units) {
|
|
3
|
+
if (typeof value !== "string")
|
|
4
|
+
return defaultUnit;
|
|
5
|
+
return this.getLastUnitFromString(value, units) || defaultUnit;
|
|
6
|
+
}
|
|
7
|
+
getLastUnitFromString(value, units) {
|
|
8
|
+
let resultUnit = null;
|
|
9
|
+
units.forEach(unit => {
|
|
10
|
+
if (value.endsWith(unit))
|
|
11
|
+
resultUnit = unit;
|
|
12
|
+
});
|
|
13
|
+
return resultUnit;
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MdtChartsConfig, MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../config/config";
|
|
2
|
+
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
+
import { LegendBlockModel, Orient, OtherCommonComponents } from "../model";
|
|
4
|
+
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
5
|
+
import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
|
|
6
|
+
export declare class MarginModel {
|
|
7
|
+
static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
|
|
8
|
+
static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
|
|
9
|
+
static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
|
|
10
|
+
private static recalcMarginByTitle;
|
|
11
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { TwoDimMarginModel } from "./twoDim/twoDimMarginModel";
|
|
2
|
+
export class MarginModel {
|
|
3
|
+
static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
|
|
4
|
+
const canvasModel = modelInstance.canvasModel;
|
|
5
|
+
canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
|
|
6
|
+
this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
|
|
7
|
+
if (config.options.type === '2d') {
|
|
8
|
+
const twoDimModel = new TwoDimMarginModel();
|
|
9
|
+
twoDimModel.recalcMargin(designerConfig, config.options, otherComponents, data, modelInstance);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
static recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
|
|
13
|
+
const twoDimModel = new TwoDimMarginModel();
|
|
14
|
+
twoDimModel.recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig);
|
|
15
|
+
}
|
|
16
|
+
static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
|
|
17
|
+
const legendCoordinate = legendBlockModel.coordinate;
|
|
18
|
+
if (position === 'left' || position === 'right')
|
|
19
|
+
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
|
|
20
|
+
else
|
|
21
|
+
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
|
|
22
|
+
}
|
|
23
|
+
static recalcMarginByTitle(canvasModel, titleBlockModel) {
|
|
24
|
+
canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { MdtChartsDataSource, MdtChartsTwoDimensionalOptions } from "../../../config/config";
|
|
2
|
+
import { DesignerConfig } from "../../../designer/designerConfig";
|
|
3
|
+
import { OtherCommonComponents } from "../../model";
|
|
4
|
+
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
5
|
+
export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
|
|
6
|
+
export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
|
|
7
|
+
export declare class TwoDimMarginModel {
|
|
8
|
+
private twoDimLegendModel;
|
|
9
|
+
recalcMargin(designerConfig: DesignerConfig, options: MdtChartsTwoDimensionalOptions, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
|
|
10
|
+
recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig): void;
|
|
11
|
+
private getHorizontalMarginByAxisLabels;
|
|
12
|
+
private recalcVerticalMarginByAxisLabelHeight;
|
|
13
|
+
private recalcHorizontalMarginByAxisLabelWidth;
|
|
14
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
|
|
2
|
+
import { AxisModel } from "../../featuresModel/axisModel";
|
|
3
|
+
import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendModel";
|
|
4
|
+
import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
|
|
5
|
+
import { AxisType } from "../../modelBuilder";
|
|
6
|
+
import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
|
|
7
|
+
export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
|
|
8
|
+
export const AXIS_VERTICAL_LABEL_PADDING = 10;
|
|
9
|
+
export class TwoDimMarginModel {
|
|
10
|
+
constructor() {
|
|
11
|
+
this.twoDimLegendModel = new TwoDimLegendModel();
|
|
12
|
+
}
|
|
13
|
+
recalcMargin(designerConfig, options, otherComponents, data, modelInstance) {
|
|
14
|
+
const canvasModel = modelInstance.canvasModel;
|
|
15
|
+
this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
|
|
16
|
+
const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, options.axis, data, options);
|
|
17
|
+
this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, options.orientation, options.axis);
|
|
18
|
+
// Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
|
|
19
|
+
// При этом все графики должны иметь: embeddedLabels = 'key'
|
|
20
|
+
// И все графики должны быть типа bar.
|
|
21
|
+
const showingFlag = options.type === '2d'
|
|
22
|
+
? !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(options.charts, options.orientation)
|
|
23
|
+
: true;
|
|
24
|
+
this.recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, options.orientation, options.axis, showingFlag);
|
|
25
|
+
}
|
|
26
|
+
recalcMarginByVerticalAxisLabel(modelInstance, options, designerConfig) {
|
|
27
|
+
if (options.orientation === 'vertical') {
|
|
28
|
+
const dataModel = modelInstance.dataModel;
|
|
29
|
+
const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModel.getAllowableKeys());
|
|
30
|
+
const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataModel.getAllowableKeys().length, options.axis.key);
|
|
31
|
+
const marginOrient = options.axis.key.position === 'end' ? 'bottom' : 'top';
|
|
32
|
+
if (axisConfig === 'rotated') {
|
|
33
|
+
modelInstance.canvasModel.decreaseMarginSide(marginOrient, axisLabelSize.height);
|
|
34
|
+
modelInstance.canvasModel.increaseMarginSide(marginOrient, axisLabelSize.width, keyAxisLabelVerticalLog);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
|
|
39
|
+
const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
|
|
40
|
+
let labelsTexts;
|
|
41
|
+
if (keyAxisOrient === 'left' || keyAxisOrient === 'right') {
|
|
42
|
+
labelsTexts = DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
|
|
43
|
+
}
|
|
44
|
+
else {
|
|
45
|
+
labelsTexts = ['0000'];
|
|
46
|
+
}
|
|
47
|
+
return AxisModel.getLabelSize(labelsMaxWidth, labelsTexts);
|
|
48
|
+
}
|
|
49
|
+
recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, orientation, axis) {
|
|
50
|
+
const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
|
|
51
|
+
const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
|
|
52
|
+
if ((keyAxisOrient === 'bottom' || keyAxisOrient === 'top')) {
|
|
53
|
+
if (axis.key.visibility)
|
|
54
|
+
canvasModel.increaseMarginSide(keyAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING, keyAxisLabelVerticalLog);
|
|
55
|
+
}
|
|
56
|
+
else if (axis.value.visibility)
|
|
57
|
+
canvasModel.increaseMarginSide(valueAxisOrient, labelSize.height + AXIS_HORIZONTAL_LABEL_PADDING);
|
|
58
|
+
}
|
|
59
|
+
recalcHorizontalMarginByAxisLabelWidth(labelSize, canvasModel, orientation, axis, isShow) {
|
|
60
|
+
const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, orientation, axis.key.position);
|
|
61
|
+
const valueAxisOrient = AxisModel.getAxisOrient(AxisType.Value, orientation, axis.value.position);
|
|
62
|
+
if ((keyAxisOrient === 'left' || keyAxisOrient === 'right') && isShow && axis.key.visibility) {
|
|
63
|
+
canvasModel.increaseMarginSide(keyAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING, keyAxisLabelHorizontalLog);
|
|
64
|
+
}
|
|
65
|
+
else if ((valueAxisOrient === 'left' || valueAxisOrient === 'right') && axis.value.visibility) {
|
|
66
|
+
canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -6,13 +6,12 @@ import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
|
|
|
6
6
|
export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
|
|
7
7
|
export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
|
|
8
8
|
export declare class MarginModel {
|
|
9
|
+
private static twoDimLegendModel;
|
|
9
10
|
static initMargin(designerConfig: DesignerConfig, config: MdtChartsConfig, otherComponents: OtherCommonComponents, data: MdtChartsDataSource, modelInstance: ModelInstance): void;
|
|
10
11
|
static recalcMarginByVerticalAxisLabel(modelInstance: ModelInstance, config: MdtChartsConfig, designerConfig: DesignerConfig, dataScope: DataScope): void;
|
|
12
|
+
static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
|
|
11
13
|
private static getHorizontalMarginByAxisLabels;
|
|
12
14
|
private static recalcVerticalMarginByAxisLabelHeight;
|
|
13
15
|
private static recalcHorizontalMarginByAxisLabelWidth;
|
|
14
|
-
private static recalcMarginWithLegend;
|
|
15
|
-
private static getLegendItemsContent;
|
|
16
|
-
static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
|
|
17
16
|
private static recalcMarginByTitle;
|
|
18
17
|
}
|
package/lib/model/marginModel.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { AxisModel } from "./featuresModel/axisModel";
|
|
2
2
|
import { DataManagerModel } from "./dataManagerModel/dataManagerModel";
|
|
3
|
-
import { LegendModel } from "./featuresModel/legendModel/legendModel";
|
|
4
3
|
import { AxisType } from "./modelBuilder";
|
|
5
4
|
import { TwoDimensionalModel } from "./notations/twoDimensionalModel";
|
|
6
5
|
import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "./featuresModel/scaleModel/scaleAxisRecalcer";
|
|
6
|
+
import { TwoDimLegendModel } from "./featuresModel/legendModel/twoDimLegendModel";
|
|
7
7
|
export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
|
|
8
8
|
export const AXIS_VERTICAL_LABEL_PADDING = 10;
|
|
9
9
|
export class MarginModel {
|
|
10
10
|
static initMargin(designerConfig, config, otherComponents, data, modelInstance) {
|
|
11
11
|
const canvasModel = modelInstance.canvasModel;
|
|
12
12
|
canvasModel.initMargin(Object.assign({}, designerConfig.canvas.chartBlockMargin));
|
|
13
|
-
this.recalcMarginWithLegend(modelInstance, config, designerConfig.canvas.legendBlock.maxWidth, otherComponents.legendBlock, data);
|
|
14
13
|
this.recalcMarginByTitle(canvasModel, otherComponents.titleBlock);
|
|
15
|
-
if (config.options.type === '2d'
|
|
14
|
+
if (config.options.type === '2d') {
|
|
15
|
+
this.twoDimLegendModel.recalcMarginWith2DLegend(modelInstance, otherComponents.legendBlock);
|
|
16
16
|
const labelSize = this.getHorizontalMarginByAxisLabels(designerConfig.canvas.axisLabel.maxSize.main, config.options.axis, data, config.options);
|
|
17
17
|
this.recalcVerticalMarginByAxisLabelHeight(labelSize, canvasModel, config.options.orientation, config.options.axis);
|
|
18
18
|
// Если встроенный лейбл показывает ключи, то лейблы оси ключей не показываются
|
|
@@ -35,6 +35,13 @@ export class MarginModel {
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
38
|
+
static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
|
|
39
|
+
const legendCoordinate = legendBlockModel.coordinate;
|
|
40
|
+
if (position === 'left' || position === 'right')
|
|
41
|
+
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
|
|
42
|
+
else
|
|
43
|
+
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
|
|
44
|
+
}
|
|
38
45
|
static getHorizontalMarginByAxisLabels(labelsMaxWidth, axis, data, options) {
|
|
39
46
|
const keyAxisOrient = AxisModel.getAxisOrient(AxisType.Key, options.orientation, axis.key.position);
|
|
40
47
|
let labelsTexts;
|
|
@@ -66,45 +73,8 @@ export class MarginModel {
|
|
|
66
73
|
canvasModel.increaseMarginSide(valueAxisOrient, labelSize.width + AXIS_VERTICAL_LABEL_PADDING);
|
|
67
74
|
}
|
|
68
75
|
}
|
|
69
|
-
static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
|
|
70
|
-
if (config.options.type === "polar") {
|
|
71
|
-
return;
|
|
72
|
-
}
|
|
73
|
-
const canvasModel = modelInstance.canvasModel;
|
|
74
|
-
const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
|
|
75
|
-
modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
|
|
76
|
-
if (legendPosition !== 'off') {
|
|
77
|
-
const legendItemsContent = this.getLegendItemsContent(config.options, data);
|
|
78
|
-
const legendSize = LegendModel.getLegendSize(config.options.type, legendPosition, legendItemsContent, legendMaxWidth, canvasModel.getBlockSize(), legendBlockModel);
|
|
79
|
-
canvasModel.increaseMarginSide(legendPosition, legendSize);
|
|
80
|
-
if (legendSize !== 0)
|
|
81
|
-
this.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
|
|
82
|
-
legendBlockModel.coordinate[legendPosition].size = legendSize;
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
static getLegendItemsContent(options, data) {
|
|
86
|
-
if (options.type === '2d') {
|
|
87
|
-
let texts = [];
|
|
88
|
-
options.charts.forEach(chart => {
|
|
89
|
-
texts = texts.concat(chart.data.valueFields.map(field => field.title));
|
|
90
|
-
});
|
|
91
|
-
return texts;
|
|
92
|
-
}
|
|
93
|
-
else if (options.type === 'polar') {
|
|
94
|
-
return DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name);
|
|
95
|
-
}
|
|
96
|
-
else if (options.type === 'interval') {
|
|
97
|
-
return [options.chart.data.valueField1.name];
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
static appendToGlobalMarginValuesLegendMargin(canvasModel, position, legendBlockModel) {
|
|
101
|
-
const legendCoordinate = legendBlockModel.coordinate;
|
|
102
|
-
if (position === 'left' || position === 'right')
|
|
103
|
-
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.left + legendCoordinate[position].margin.right);
|
|
104
|
-
else
|
|
105
|
-
canvasModel.increaseMarginSide(position, legendCoordinate[position].margin.top + legendCoordinate[position].margin.bottom);
|
|
106
|
-
}
|
|
107
76
|
static recalcMarginByTitle(canvasModel, titleBlockModel) {
|
|
108
77
|
canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
|
|
109
78
|
}
|
|
110
79
|
}
|
|
80
|
+
MarginModel.twoDimLegendModel = new TwoDimLegendModel();
|
package/lib/model/model.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
|
|
|
9
9
|
export declare type DataOptions = {
|
|
10
10
|
[option: string]: any;
|
|
11
11
|
};
|
|
12
|
+
export declare type UnitsFromConfig = "%" | "px";
|
|
12
13
|
export interface Model<O = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel> {
|
|
13
14
|
blockCanvas: BlockCanvas;
|
|
14
15
|
chartBlock: ChartBlockModel;
|
|
@@ -148,7 +149,7 @@ export interface DonutAggregatorContent {
|
|
|
148
149
|
value: string | number;
|
|
149
150
|
title: string;
|
|
150
151
|
}
|
|
151
|
-
export declare type DonutThicknessUnit =
|
|
152
|
+
export declare type DonutThicknessUnit = UnitsFromConfig;
|
|
152
153
|
export interface DonutThicknessOptions {
|
|
153
154
|
min: number;
|
|
154
155
|
max: number;
|
|
@@ -223,7 +224,6 @@ interface ComponentBlockModel {
|
|
|
223
224
|
}
|
|
224
225
|
export interface LegendBlockModel {
|
|
225
226
|
coordinate: LegendCoordinate;
|
|
226
|
-
standartTooltip: boolean;
|
|
227
227
|
}
|
|
228
228
|
export interface LegendCoordinate {
|
|
229
229
|
top: LegendCanvasCoordinate;
|
|
@@ -13,4 +13,3 @@ export declare const CLASSES: {
|
|
|
13
13
|
};
|
|
14
14
|
export declare function assembleModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;
|
|
15
15
|
export declare function getPreparedData(model: Model, data: MdtChartsDataSource, config: MdtChartsConfig): MdtChartsDataSource;
|
|
16
|
-
export declare function getUpdatedModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MarginModel } from './marginModel';
|
|
1
|
+
import { MarginModel } from './margin/marginModel';
|
|
2
2
|
import { TwoDimensionalModel } from './notations/twoDimensionalModel';
|
|
3
3
|
import { PolarModel } from './notations/polar/polarModel';
|
|
4
4
|
import { DataManagerModel } from './dataManagerModel/dataManagerModel';
|
|
@@ -30,16 +30,16 @@ function getChartBlockModel(modelInstance) {
|
|
|
30
30
|
margin: modelInstance.canvasModel.getMargin()
|
|
31
31
|
};
|
|
32
32
|
}
|
|
33
|
-
function getOptions(config, designerConfig, modelInstance
|
|
33
|
+
function getOptions(config, designerConfig, modelInstance) {
|
|
34
34
|
//TODO: migrate to polymorphism
|
|
35
35
|
if (config.options.type === '2d') {
|
|
36
|
-
return TwoDimensionalModel.getOptions(config.options, designerConfig,
|
|
36
|
+
return TwoDimensionalModel.getOptions(config.options, designerConfig, modelInstance);
|
|
37
37
|
}
|
|
38
38
|
else if (config.options.type === 'polar') {
|
|
39
39
|
return PolarModel.getOptions(config.options, designerConfig, modelInstance);
|
|
40
40
|
}
|
|
41
41
|
else if (config.options.type === 'interval') {
|
|
42
|
-
return IntervalModel.getOptions(config, designerConfig, modelInstance
|
|
42
|
+
return IntervalModel.getOptions(config.options, designerConfig, modelInstance);
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
function getDataSettings(dataScope, designerConfig) {
|
|
@@ -67,16 +67,14 @@ export function assembleModel(config, data, designerConfig) {
|
|
|
67
67
|
dataSettings: null
|
|
68
68
|
};
|
|
69
69
|
resetFalsyValues(data, config.options.data.keyField.name);
|
|
70
|
-
const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions,
|
|
70
|
+
const otherComponents = OtherComponentsModel.getOtherComponentsModel({ elementsOptions: designerConfig.elementsOptions, title: config.options.title }, modelInstance);
|
|
71
71
|
MarginModel.initMargin(designerConfig, config, otherComponents, data, modelInstance);
|
|
72
72
|
DataManagerModel.initDataScope(config, data, designerConfig, otherComponents.legendBlock, modelInstance);
|
|
73
|
-
const preparedData = DataManagerModel.getPreparedData(data, modelInstance.dataModel.getAllowableKeys(), config);
|
|
74
|
-
modelInstance.dataModel.repository.initScopedFullSource(preparedData);
|
|
75
73
|
if (config.options.type === '2d' && config.options.axis.key.visibility)
|
|
76
|
-
MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig
|
|
74
|
+
MarginModel.recalcMarginByVerticalAxisLabel(modelInstance, config.options, designerConfig);
|
|
77
75
|
const blockCanvas = getBlockCanvas(config, modelInstance);
|
|
78
76
|
const chartBlock = getChartBlockModel(modelInstance);
|
|
79
|
-
const options = getOptions(config, designerConfig, modelInstance
|
|
77
|
+
const options = getOptions(config, designerConfig, modelInstance);
|
|
80
78
|
const dataSettings = getDataSettings(modelInstance.dataModel.getScope(), designerConfig);
|
|
81
79
|
const transitions = getTransitions(designerConfig);
|
|
82
80
|
modelInstance.canvasModel.roundMargin();
|
|
@@ -111,6 +109,3 @@ export function getPreparedData(model, data, config) {
|
|
|
111
109
|
const preparedData = DataManagerModel.getPreparedData(data, model.dataSettings.scope.allowableKeys, config);
|
|
112
110
|
return preparedData;
|
|
113
111
|
}
|
|
114
|
-
export function getUpdatedModel(config, data, designerConfig) {
|
|
115
|
-
return assembleModel(config, data, designerConfig);
|
|
116
|
-
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MdtChartsIntervalOptions } from "../../config/config";
|
|
2
2
|
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
-
import { AdditionalElementsOptions,
|
|
3
|
+
import { AdditionalElementsOptions, IntervalOptionsModel } from "../model";
|
|
4
4
|
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
5
5
|
export declare class IntervalModel {
|
|
6
|
-
static getOptions(
|
|
6
|
+
static getOptions(options: MdtChartsIntervalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): IntervalOptionsModel;
|
|
7
7
|
static getAdditionalElements(options: MdtChartsIntervalOptions): AdditionalElementsOptions;
|
|
8
8
|
private static getChartsModel;
|
|
9
9
|
}
|
|
@@ -5,9 +5,9 @@ import { AxisType } from "../modelBuilder";
|
|
|
5
5
|
import { ScaleModel, ScaleType } from "../featuresModel/scaleModel/scaleModel";
|
|
6
6
|
import { TwoDimensionalModel } from "./twoDimensionalModel";
|
|
7
7
|
export class IntervalModel {
|
|
8
|
-
static getOptions(
|
|
9
|
-
const options = config.options;
|
|
8
|
+
static getOptions(options, designerConfig, modelInstance) {
|
|
10
9
|
const canvasModel = modelInstance.canvasModel;
|
|
10
|
+
const dataModelRep = modelInstance.dataModel.repository;
|
|
11
11
|
return {
|
|
12
12
|
legend: canvasModel.legendCanvas.getModel(),
|
|
13
13
|
title: options.title,
|
|
@@ -15,7 +15,7 @@ export class IntervalModel {
|
|
|
15
15
|
orient: options.orientation,
|
|
16
16
|
scale: {
|
|
17
17
|
key: {
|
|
18
|
-
domain:
|
|
18
|
+
domain: modelInstance.dataModel.getAllowableKeys(),
|
|
19
19
|
range: {
|
|
20
20
|
start: 0,
|
|
21
21
|
end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, canvasModel)
|
|
@@ -24,7 +24,7 @@ export class IntervalModel {
|
|
|
24
24
|
elementsAmount: 1
|
|
25
25
|
},
|
|
26
26
|
value: {
|
|
27
|
-
domain: ScaleModel.getDateValueDomain(
|
|
27
|
+
domain: ScaleModel.getDateValueDomain(dataModelRep.getScopedFullSource(), options.chart, options.axis.key.position, options.data.dataSource),
|
|
28
28
|
range: {
|
|
29
29
|
start: 0,
|
|
30
30
|
end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
|
|
@@ -43,8 +43,8 @@ export class IntervalModel {
|
|
|
43
43
|
cssClass: 'key-axis',
|
|
44
44
|
ticks: options.axis.key.ticks,
|
|
45
45
|
labels: {
|
|
46
|
-
maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main,
|
|
47
|
-
position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(
|
|
46
|
+
maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataModelRep.getScopedRows().map(d => d[options.data.keyField.name])).width,
|
|
47
|
+
position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(dataModelRep.getScopedFullSource(), options.data.dataSource, options.data.keyField.name).length),
|
|
48
48
|
visible: true,
|
|
49
49
|
defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
|
|
50
50
|
},
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
+
import { getPxPercentUnitByValue } from "../../../helpers/unitsFromConfigReader";
|
|
1
2
|
export class DonutThicknessService {
|
|
2
3
|
constructor() {
|
|
3
4
|
this.defaultUnit = "px";
|
|
4
5
|
}
|
|
5
6
|
getUnit(settingsFromConfig) {
|
|
6
7
|
if (settingsFromConfig.value)
|
|
7
|
-
return
|
|
8
|
-
const minUnit =
|
|
9
|
-
const maxUnit =
|
|
8
|
+
return getPxPercentUnitByValue(settingsFromConfig.value);
|
|
9
|
+
const minUnit = getPxPercentUnitByValue(settingsFromConfig.min);
|
|
10
|
+
const maxUnit = getPxPercentUnitByValue(settingsFromConfig.max);
|
|
10
11
|
return minUnit === maxUnit ? minUnit : this.defaultUnit;
|
|
11
12
|
}
|
|
12
13
|
valueToNumber(value) {
|
|
@@ -14,17 +15,4 @@ export class DonutThicknessService {
|
|
|
14
15
|
return value;
|
|
15
16
|
return parseInt(value);
|
|
16
17
|
}
|
|
17
|
-
getUnitByValue(value) {
|
|
18
|
-
if (typeof value !== "string")
|
|
19
|
-
return this.defaultUnit;
|
|
20
|
-
return this.getLastUnitFromString(value);
|
|
21
|
-
}
|
|
22
|
-
getLastUnitFromString(value) {
|
|
23
|
-
let resultUnit = this.defaultUnit;
|
|
24
|
-
["%", "px"].forEach(unit => {
|
|
25
|
-
if (value.endsWith(unit))
|
|
26
|
-
resultUnit = unit;
|
|
27
|
-
});
|
|
28
|
-
return resultUnit;
|
|
29
|
-
}
|
|
30
18
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { ChartOrientation,
|
|
1
|
+
import { ChartOrientation, MdtChartsTwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
|
|
2
2
|
import { BarOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
|
|
3
3
|
import { TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
|
|
4
4
|
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
5
5
|
export declare class TwoDimensionalModel {
|
|
6
|
-
static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig,
|
|
6
|
+
static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
|
|
7
7
|
static getChartsEmbeddedLabelsFlag(charts: MdtChartsTwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
|
|
8
8
|
/**
|
|
9
9
|
* Сортирует список чартов в порядке: area - bar - line.
|
|
@@ -4,9 +4,10 @@ import { AxisModel } from "../featuresModel/axisModel";
|
|
|
4
4
|
import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
|
|
5
5
|
import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
|
|
6
6
|
export class TwoDimensionalModel {
|
|
7
|
-
static getOptions(options, designerConfig,
|
|
7
|
+
static getOptions(options, designerConfig, modelInstance) {
|
|
8
8
|
const canvasModel = modelInstance.canvasModel;
|
|
9
|
-
const
|
|
9
|
+
const dataModelRep = modelInstance.dataModel.repository;
|
|
10
|
+
const scaleMarginRecalcer = new ScaleAxisRecalcer(() => ScaleModel.getScaleLinear(options, dataModelRep.getScopedRows(), canvasModel));
|
|
10
11
|
scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
|
|
11
12
|
const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
|
|
12
13
|
return {
|
|
@@ -19,7 +20,7 @@ export class TwoDimensionalModel {
|
|
|
19
20
|
value: scaleValueInfo.scale
|
|
20
21
|
},
|
|
21
22
|
axis: {
|
|
22
|
-
key: AxisModel.getKeyAxis(options,
|
|
23
|
+
key: AxisModel.getKeyAxis(options, dataModelRep.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0)),
|
|
23
24
|
value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
|
|
24
25
|
},
|
|
25
26
|
type: options.type,
|
|
@@ -80,6 +80,8 @@
|
|
|
80
80
|
}
|
|
81
81
|
.legend-item-row > span {
|
|
82
82
|
display: block;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
text-overflow: ellipsis;
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
.legend-label {
|
|
@@ -201,7 +203,6 @@
|
|
|
201
203
|
line-height: 1;
|
|
202
204
|
}
|
|
203
205
|
.aggregator-value {
|
|
204
|
-
margin-top: 0.5em;
|
|
205
206
|
pointer-events: auto;
|
|
206
207
|
}
|
|
207
208
|
.aggregator-name {
|
|
@@ -80,6 +80,8 @@
|
|
|
80
80
|
}
|
|
81
81
|
.legend-item-row > span {
|
|
82
82
|
display: block;
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
text-overflow: ellipsis;
|
|
83
85
|
}
|
|
84
86
|
|
|
85
87
|
.legend-label {
|
|
@@ -201,7 +203,6 @@
|
|
|
201
203
|
line-height: 1;
|
|
202
204
|
}
|
|
203
205
|
.aggregator-value {
|
|
204
|
-
margin-top: 0.5em;
|
|
205
206
|
pointer-events: auto;
|
|
206
207
|
}
|
|
207
208
|
.aggregator-name {
|