mdt-charts 1.12.0 → 1.12.1
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/config/config.d.ts +5 -0
- package/lib/engine/features/legend/legend.d.ts +10 -1
- package/lib/engine/features/legend/legend.js +10 -22
- package/lib/engine/features/legend/legendHelper.d.ts +4 -5
- package/lib/engine/features/legend/legendHelper.js +19 -23
- package/lib/engine/features/legend/legendHelperService.d.ts +12 -0
- package/lib/engine/features/legend/legendHelperService.js +30 -0
- package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.d.ts +0 -1
- package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js +9 -17
- package/lib/model/dataManagerModel/dataManagerModel.d.ts +8 -0
- package/lib/model/dataManagerModel/dataManagerModel.js +25 -12
- package/lib/model/featuresModel/axisModel.d.ts +5 -4
- package/lib/model/featuresModel/axisModel.js +13 -11
- package/lib/model/featuresModel/axisModelService.d.ts +4 -0
- package/lib/model/featuresModel/axisModelService.js +11 -0
- package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts +4 -2
- package/lib/model/featuresModel/legendModel/legendCanvasModel.js +42 -29
- package/lib/model/featuresModel/legendModel/legendModel.d.ts +1 -2
- package/lib/model/featuresModel/legendModel/legendModel.js +14 -14
- package/lib/model/featuresModel/legendModel/polarMarginCalculator.d.ts +11 -0
- package/lib/model/featuresModel/legendModel/polarMarginCalculator.js +42 -0
- package/lib/model/featuresModel/titleModel.js +1 -1
- package/lib/model/marginModel.d.ts +3 -2
- package/lib/model/marginModel.js +5 -2
- package/lib/model/model.d.ts +1 -2
- package/lib/model/modelBuilder.js +2 -2
- package/lib/model/notations/polarModel.d.ts +3 -1
- package/lib/model/notations/polarModel.js +12 -1
- package/lib/model/notations/twoDimensionalModel.js +1 -1
- package/lib/style/charts-main.css +26 -7
- package/lib/style/charts-main.less +26 -7
- package/package.json +2 -2
- package/tsconfig.production.json +23 -0
- package/lib/engine/features/recordOverflowAlert/recordOverflowAlert.d.ts +0 -14
- package/lib/engine/features/recordOverflowAlert/recordOverflowAlert.js +0 -97
- package/lib/model/dataManagerModel.d.ts +0 -23
- package/lib/model/dataManagerModel.js +0 -139
|
@@ -5,11 +5,12 @@ export class LegendModel {
|
|
|
5
5
|
static getLegendSize(chartNotation, position, texts, legendMaxWidth, blockSize, legendBlockModel) {
|
|
6
6
|
if (position === 'left' || position === 'right')
|
|
7
7
|
return this.getLegendWidth(texts, legendMaxWidth);
|
|
8
|
+
//TODO: rm duplicate
|
|
8
9
|
if (chartNotation === '2d' || chartNotation === 'interval') {
|
|
9
|
-
return LegendCanvasModel.getLegendHeight(texts, blockSize.width
|
|
10
|
+
return LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
|
|
10
11
|
}
|
|
11
12
|
else if (chartNotation === 'polar') {
|
|
12
|
-
const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width
|
|
13
|
+
const size = LegendCanvasModel.getLegendHeight(texts, blockSize.width - legendBlockModel.coordinate[position].margin.left - legendBlockModel.coordinate[position].margin.right, 'row', position);
|
|
13
14
|
return size;
|
|
14
15
|
}
|
|
15
16
|
}
|
|
@@ -24,17 +25,17 @@ export class LegendModel {
|
|
|
24
25
|
},
|
|
25
26
|
bottom: {
|
|
26
27
|
size: 0,
|
|
27
|
-
margin: { top: 0, bottom: 20, left:
|
|
28
|
+
margin: { top: 0, bottom: 20, left: 0, right: 0 },
|
|
28
29
|
pad: 0
|
|
29
30
|
},
|
|
30
31
|
right: {
|
|
31
32
|
size: 0,
|
|
32
|
-
margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left:
|
|
33
|
+
margin: { top: canvasModel.titleCanvas.getAllNeededSpace(), bottom: mb, left: 10, right: 0 },
|
|
33
34
|
pad: 0
|
|
34
35
|
},
|
|
35
36
|
top: {
|
|
36
37
|
size: 0,
|
|
37
|
-
margin: { top:
|
|
38
|
+
margin: { top: 10, bottom: 10, left: 20, right: 20 },
|
|
38
39
|
pad: canvasModel.titleCanvas.getAllNeededSpace()
|
|
39
40
|
}
|
|
40
41
|
},
|
|
@@ -42,13 +43,15 @@ export class LegendModel {
|
|
|
42
43
|
};
|
|
43
44
|
}
|
|
44
45
|
static getLegendModel(chartNotation, legendShow, canvasModel) {
|
|
46
|
+
if (!legendShow)
|
|
47
|
+
return {
|
|
48
|
+
position: 'off'
|
|
49
|
+
};
|
|
45
50
|
let legendPosition = 'off';
|
|
46
|
-
if (
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
|
|
51
|
-
}
|
|
51
|
+
if (chartNotation === '2d' || chartNotation === 'interval')
|
|
52
|
+
legendPosition = 'top';
|
|
53
|
+
else if (chartNotation === 'polar') {
|
|
54
|
+
legendPosition = PolarModel.getLegendPositionByBlockSize(canvasModel);
|
|
52
55
|
}
|
|
53
56
|
return {
|
|
54
57
|
position: legendPosition
|
|
@@ -57,9 +60,6 @@ export class LegendModel {
|
|
|
57
60
|
static getLegendItemClass(itemsPosition) {
|
|
58
61
|
return itemsPosition === 'column' ? 'legend-item-row' : 'legend-item-inline';
|
|
59
62
|
}
|
|
60
|
-
static getMarginClass(legendPosition) {
|
|
61
|
-
return legendPosition === 'right' ? 'mt-15' : 'mt-10';
|
|
62
|
-
}
|
|
63
63
|
static getLegendWidth(texts, legendMaxWidth) {
|
|
64
64
|
let longestText = '';
|
|
65
65
|
let biggestScore = 0;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../../config/config";
|
|
2
|
+
import { LegendBlockModel } from "../../model";
|
|
3
|
+
import { CanvasModel } from "../../modelInstance/canvasModel/canvasModel";
|
|
4
|
+
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
5
|
+
export declare class LegendPolarMarginCalculator {
|
|
6
|
+
recalcMargin(modelInstance: ModelInstance, options: MdtChartsPolarOptions, legendMaxWidth: number, legendBlockModel: LegendBlockModel, data: MdtChartsDataSource): void;
|
|
7
|
+
updateMargin(legendPosition: "right" | "bottom", canvasModel: CanvasModel, legendBlockModel: LegendBlockModel, size: number): void;
|
|
8
|
+
private updateMarginObj;
|
|
9
|
+
private getLegendSize;
|
|
10
|
+
private getLegendItemsContent;
|
|
11
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { DataManagerModel } from "../../dataManagerModel/dataManagerModel";
|
|
2
|
+
import { MarginModel } from "../../marginModel";
|
|
3
|
+
import { MIN_DONUT_BLOCK_SIZE } from "../../notations/polarModel";
|
|
4
|
+
import { LegendModel } from "./legendModel";
|
|
5
|
+
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
|
+
updateMargin(legendPosition, canvasModel, legendBlockModel, size) {
|
|
25
|
+
canvasModel.legendCanvas.setPosition(legendPosition);
|
|
26
|
+
this.updateMarginObj(legendBlockModel, legendPosition, size, canvasModel);
|
|
27
|
+
}
|
|
28
|
+
updateMarginObj(legendBlockModel, legendPosition, legendSize, canvasModel) {
|
|
29
|
+
if (legendSize !== 0) {
|
|
30
|
+
canvasModel.increaseMarginSide(legendPosition, legendSize);
|
|
31
|
+
MarginModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
|
|
32
|
+
}
|
|
33
|
+
legendBlockModel.coordinate[legendPosition].size = legendSize;
|
|
34
|
+
}
|
|
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
|
+
}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
|
|
2
2
|
import { DesignerConfig } from "../designer/designerConfig";
|
|
3
|
-
import { DataScope, LegendBlockModel, OtherCommonComponents, PolarOptionsModel } from "./model";
|
|
3
|
+
import { DataScope, LegendBlockModel, Orient, OtherCommonComponents, PolarOptionsModel } from "./model";
|
|
4
4
|
import { ModelInstance } from "./modelInstance/modelInstance";
|
|
5
|
+
import { CanvasModel } from "./modelInstance/canvasModel/canvasModel";
|
|
5
6
|
export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
|
|
6
7
|
export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
|
|
7
8
|
export declare class MarginModel {
|
|
@@ -13,7 +14,7 @@ export declare class MarginModel {
|
|
|
13
14
|
private static recalcHorizontalMarginByAxisLabelWidth;
|
|
14
15
|
private static recalcMarginWithLegend;
|
|
15
16
|
private static getLegendItemsContent;
|
|
16
|
-
|
|
17
|
+
static appendToGlobalMarginValuesLegendMargin(canvasModel: CanvasModel, position: Orient, legendBlockModel: LegendBlockModel): void;
|
|
17
18
|
private static clearMarginByLegendBlockPosition;
|
|
18
19
|
private static recalcMarginByTitle;
|
|
19
20
|
}
|
package/lib/model/marginModel.js
CHANGED
|
@@ -42,7 +42,7 @@ export class MarginModel {
|
|
|
42
42
|
static recalcMarginByVerticalAxisLabel(modelInstance, config, designerConfig, dataScope) {
|
|
43
43
|
if ((config.options.type === '2d' || config.options.type === 'interval') && config.options.orientation === 'vertical') {
|
|
44
44
|
const axisLabelSize = AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, dataScope.allowableKeys);
|
|
45
|
-
const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length);
|
|
45
|
+
const axisConfig = AxisModel.getKeyAxisLabelPosition(modelInstance.canvasModel, dataScope.allowableKeys.length, config.options.axis.key);
|
|
46
46
|
const marginOrient = config.options.axis.key.position === 'end' ? 'bottom' : 'top';
|
|
47
47
|
if (axisConfig === 'rotated')
|
|
48
48
|
modelInstance.canvasModel.setMarginSide(marginOrient, modelInstance.canvasModel.getMarginSide(marginOrient) + (axisLabelSize.width - axisLabelSize.height));
|
|
@@ -80,6 +80,9 @@ export class MarginModel {
|
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
static recalcMarginWithLegend(modelInstance, config, legendMaxWidth, legendBlockModel, data) {
|
|
83
|
+
if (config.options.type === "polar") {
|
|
84
|
+
return;
|
|
85
|
+
}
|
|
83
86
|
const canvasModel = modelInstance.canvasModel;
|
|
84
87
|
const legendPosition = LegendModel.getLegendModel(config.options.type, config.options.legend.show, modelInstance.canvasModel).position;
|
|
85
88
|
modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
|
|
@@ -124,6 +127,6 @@ export class MarginModel {
|
|
|
124
127
|
});
|
|
125
128
|
}
|
|
126
129
|
static recalcMarginByTitle(canvasModel, titleBlockModel) {
|
|
127
|
-
canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size);
|
|
130
|
+
canvasModel.increaseMarginSide("top", titleBlockModel.margin.top + titleBlockModel.size + titleBlockModel.margin.bottom);
|
|
128
131
|
}
|
|
129
132
|
}
|
package/lib/model/model.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType } from "../config/config";
|
|
1
|
+
import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition } from "../config/config";
|
|
2
2
|
import { DataType, DonutOptionsCanvas, Formatter, TooltipSettings, Transitions } from "../designer/designerConfig";
|
|
3
3
|
declare type AxisType = "key" | "value";
|
|
4
4
|
export declare type Orient = "top" | "bottom" | "left" | "right";
|
|
5
5
|
export declare type ScaleKeyType = "band" | "point";
|
|
6
6
|
export declare type ScaleValueType = "linear" | "datetime";
|
|
7
|
-
export declare type AxisLabelPosition = "straight" | "rotated";
|
|
8
7
|
export declare type LegendPosition = "off" | "top" | "bottom" | "left" | "right";
|
|
9
8
|
export declare type EmbeddedLabelTypeModel = "none" | "key" | "value";
|
|
10
9
|
export declare type DataOptions = {
|
|
@@ -78,8 +78,8 @@ export function assembleModel(config, data, designerConfig) {
|
|
|
78
78
|
const options = getOptions(config, designerConfig, modelInstance, modelInstance.dataModel.getScope(), preparedData);
|
|
79
79
|
const dataSettings = getDataSettings(modelInstance.dataModel.getScope(), designerConfig);
|
|
80
80
|
const transitions = getTransitions(designerConfig);
|
|
81
|
-
if (options.type === 'polar')
|
|
82
|
-
|
|
81
|
+
// if (options.type === 'polar')
|
|
82
|
+
// MarginModel.recalcPolarMarginWithScopedData(modelInstance, designerConfig, config, otherComponents.legendBlock, modelInstance.dataModel.getScope(), options);
|
|
83
83
|
modelInstance.canvasModel.roundMargin();
|
|
84
84
|
return {
|
|
85
85
|
blockCanvas,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../config/config";
|
|
2
2
|
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
-
import { PolarOptionsModel } from "../model";
|
|
3
|
+
import { PolarOptionsModel, LegendCoordinate } from "../model";
|
|
4
4
|
import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
|
|
5
5
|
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
6
6
|
/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
|
|
@@ -8,6 +8,8 @@ export declare const MIN_DONUT_BLOCK_SIZE = 120;
|
|
|
8
8
|
export declare class PolarModel {
|
|
9
9
|
static getOptions(options: MdtChartsPolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
|
|
10
10
|
static getLegendPositionByBlockSize(canvasModel: CanvasModel): "bottom" | "right";
|
|
11
|
+
static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth: number, legendWidth: number, legendCoordinate: LegendCoordinate): boolean;
|
|
12
|
+
static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight: number, legendCoordinate: LegendCoordinate): boolean;
|
|
11
13
|
private static getDonutSettings;
|
|
12
14
|
private static getChartsModel;
|
|
13
15
|
}
|
|
@@ -17,13 +17,24 @@ export class PolarModel {
|
|
|
17
17
|
//TODO: type for returned value
|
|
18
18
|
static getLegendPositionByBlockSize(canvasModel) {
|
|
19
19
|
const widthCoefficientWhenLegendShouldInBottom = 1.5;
|
|
20
|
+
const avgLegendWidth = 100;
|
|
20
21
|
const blockWidth = canvasModel.getBlockSize().width;
|
|
21
22
|
const blockHeight = canvasModel.getBlockSize().height;
|
|
22
|
-
return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE
|
|
23
|
+
return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE + avgLegendWidth
|
|
23
24
|
&& blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
|
|
24
25
|
? 'bottom'
|
|
25
26
|
: 'right';
|
|
26
27
|
}
|
|
28
|
+
static doesChartBlockHasEnoughWidthForContainsLegend(chartBlockWidth, legendWidth, legendCoordinate) {
|
|
29
|
+
const rightLegendMargin = legendCoordinate.right.margin;
|
|
30
|
+
return chartBlockWidth - legendWidth - rightLegendMargin.left - rightLegendMargin.right >= MIN_DONUT_BLOCK_SIZE;
|
|
31
|
+
}
|
|
32
|
+
static doesChartBlockHasEnoughHeightForContainsLegend(chartBlockHeight, legendCoordinate) {
|
|
33
|
+
const minHeightForLegend = 30;
|
|
34
|
+
const bottomLegendMargin = legendCoordinate.bottom.margin;
|
|
35
|
+
const heightForLegend = chartBlockHeight - bottomLegendMargin.bottom - bottomLegendMargin.top - MIN_DONUT_BLOCK_SIZE;
|
|
36
|
+
return heightForLegend >= minHeightForLegend;
|
|
37
|
+
}
|
|
27
38
|
static getDonutSettings(settings, chartOptions) {
|
|
28
39
|
return {
|
|
29
40
|
padAngle: settings.padAngle,
|
|
@@ -15,7 +15,7 @@ export class TwoDimensionalModel {
|
|
|
15
15
|
value: ScaleModel.getScaleLinear(options, data, canvasModel)
|
|
16
16
|
},
|
|
17
17
|
axis: {
|
|
18
|
-
key: AxisModel.getKeyAxis(options
|
|
18
|
+
key: AxisModel.getKeyAxis(options, data, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip),
|
|
19
19
|
value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
|
|
20
20
|
},
|
|
21
21
|
type: options.type,
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
2
|
+
|
|
1
3
|
.wrapper {
|
|
2
4
|
margin: 0 auto;
|
|
3
5
|
position: relative;
|
|
@@ -41,28 +43,45 @@
|
|
|
41
43
|
|
|
42
44
|
|
|
43
45
|
/*========================================================================== Legend */
|
|
46
|
+
.legend-block {
|
|
47
|
+
display: flex;
|
|
48
|
+
height: 100%;
|
|
49
|
+
}
|
|
50
|
+
.legend-block-column {
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
}
|
|
53
|
+
.legend-block-row {
|
|
54
|
+
flex-direction: row;
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
}
|
|
57
|
+
.legend-block-centered {
|
|
58
|
+
justify-content: center;
|
|
59
|
+
}
|
|
44
60
|
.legend-item {
|
|
45
61
|
cursor: default;
|
|
46
62
|
transition: opacity 0.1s;
|
|
63
|
+
/* will-change: opacity; */
|
|
64
|
+
}
|
|
65
|
+
.legend-block-column .legend-item:not(:first-of-type) {
|
|
66
|
+
margin-top: 15px;
|
|
47
67
|
}
|
|
48
68
|
.legend-item-inline {
|
|
49
69
|
white-space: nowrap;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
text-overflow: ellipsis;
|
|
50
72
|
}
|
|
51
|
-
.legend-item-inline:not(:first-of-type) {
|
|
73
|
+
.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
|
|
52
74
|
margin-left: 20px;
|
|
53
75
|
}
|
|
76
|
+
.legend-wrapper-with-wrap .legend-item-inline {
|
|
77
|
+
margin: 5px;
|
|
78
|
+
}
|
|
54
79
|
.legend-item-row {
|
|
55
80
|
display: flex;
|
|
56
81
|
}
|
|
57
82
|
.legend-item-row > span {
|
|
58
83
|
display: block;
|
|
59
84
|
}
|
|
60
|
-
.mt-15 {
|
|
61
|
-
margin-top: 15px;
|
|
62
|
-
}
|
|
63
|
-
.mt-10 {
|
|
64
|
-
margin-top: 10px;
|
|
65
|
-
}
|
|
66
85
|
|
|
67
86
|
.legend-label {
|
|
68
87
|
font-size: 12px;
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
|
2
|
+
|
|
1
3
|
.wrapper {
|
|
2
4
|
margin: 0 auto;
|
|
3
5
|
position: relative;
|
|
@@ -41,28 +43,45 @@
|
|
|
41
43
|
|
|
42
44
|
|
|
43
45
|
/*========================================================================== Legend */
|
|
46
|
+
.legend-block {
|
|
47
|
+
display: flex;
|
|
48
|
+
height: 100%;
|
|
49
|
+
}
|
|
50
|
+
.legend-block-column {
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
}
|
|
53
|
+
.legend-block-row {
|
|
54
|
+
flex-direction: row;
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
}
|
|
57
|
+
.legend-block-centered {
|
|
58
|
+
justify-content: center;
|
|
59
|
+
}
|
|
44
60
|
.legend-item {
|
|
45
61
|
cursor: default;
|
|
46
62
|
transition: opacity 0.1s;
|
|
63
|
+
/* will-change: opacity; */
|
|
64
|
+
}
|
|
65
|
+
.legend-block-column .legend-item:not(:first-of-type) {
|
|
66
|
+
margin-top: 15px;
|
|
47
67
|
}
|
|
48
68
|
.legend-item-inline {
|
|
49
69
|
white-space: nowrap;
|
|
70
|
+
overflow: hidden;
|
|
71
|
+
text-overflow: ellipsis;
|
|
50
72
|
}
|
|
51
|
-
.legend-item-inline:not(:first-of-type) {
|
|
73
|
+
.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
|
|
52
74
|
margin-left: 20px;
|
|
53
75
|
}
|
|
76
|
+
.legend-wrapper-with-wrap .legend-item-inline {
|
|
77
|
+
margin: 5px;
|
|
78
|
+
}
|
|
54
79
|
.legend-item-row {
|
|
55
80
|
display: flex;
|
|
56
81
|
}
|
|
57
82
|
.legend-item-row > span {
|
|
58
83
|
display: block;
|
|
59
84
|
}
|
|
60
|
-
.mt-15 {
|
|
61
|
-
margin-top: 15px;
|
|
62
|
-
}
|
|
63
|
-
.mt-10 {
|
|
64
|
-
margin-top: 10px;
|
|
65
|
-
}
|
|
66
85
|
|
|
67
86
|
.legend-label {
|
|
68
87
|
font-size: 12px;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mdt-charts",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/main.js",
|
|
6
6
|
"scripts": {
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"build": "npx webpack --mode production",
|
|
9
9
|
"watch": "npx webpack --mode development --watch",
|
|
10
10
|
"test": "jest",
|
|
11
|
-
"build-lib": "npx tsc -p ."
|
|
11
|
+
"build-lib": "npx tsc -p tsconfig.production.json"
|
|
12
12
|
},
|
|
13
13
|
"homepage": "https://github.com/VishulaKnow/charts",
|
|
14
14
|
"author": "",
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"outDir": "./lib/",
|
|
4
|
+
"noImplicitAny": true,
|
|
5
|
+
"target": "es6",
|
|
6
|
+
"lib": ["ES2017", "DOM"],
|
|
7
|
+
"jsx": "react",
|
|
8
|
+
"allowJs": true,
|
|
9
|
+
"types": [
|
|
10
|
+
"jest"
|
|
11
|
+
],
|
|
12
|
+
"declaration": true
|
|
13
|
+
},
|
|
14
|
+
"include": [
|
|
15
|
+
"src"
|
|
16
|
+
],
|
|
17
|
+
"exclude": [
|
|
18
|
+
"node_modules",
|
|
19
|
+
"**/__tests__/*",
|
|
20
|
+
"src/playground/*",
|
|
21
|
+
"**/*Example.ts"
|
|
22
|
+
]
|
|
23
|
+
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ChartOrientation } from "../../../config/config";
|
|
2
|
-
import { Block } from "../../block/block";
|
|
3
|
-
declare type AlertBlockPosition = 'top' | 'bottom' | 'right' | 'left';
|
|
4
|
-
export declare class RecordOverflowAlert {
|
|
5
|
-
private static readonly blockClass;
|
|
6
|
-
static render(block: Block, hidedRecordsAmount: number, position: AlertBlockPosition, chartOrientation?: ChartOrientation): void;
|
|
7
|
-
static update(block: Block, hidedRecordsAmount: number, position: AlertBlockPosition, chartOrientation?: ChartOrientation): void;
|
|
8
|
-
private static setAlertPosition;
|
|
9
|
-
private static getAlertText;
|
|
10
|
-
private static getWordTextEndingByAmount;
|
|
11
|
-
private static getBlockPositionAttrs;
|
|
12
|
-
private static getLeftAttrForRightBlock;
|
|
13
|
-
}
|
|
14
|
-
export {};
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { DomHelper } from '../../helpers/domHelper';
|
|
2
|
-
import { Legend } from '../legend/legend';
|
|
3
|
-
export class RecordOverflowAlert {
|
|
4
|
-
static render(block, hidedRecordsAmount, position, chartOrientation = null) {
|
|
5
|
-
const alertBlock = block.getWrapper()
|
|
6
|
-
.append('div')
|
|
7
|
-
.attr('class', this.blockClass)
|
|
8
|
-
.text(this.getAlertText(hidedRecordsAmount, chartOrientation));
|
|
9
|
-
const attrs = this.getBlockPositionAttrs(position, block);
|
|
10
|
-
this.setAlertPosition(alertBlock, attrs);
|
|
11
|
-
}
|
|
12
|
-
static update(block, hidedRecordsAmount, position, chartOrientation = null) {
|
|
13
|
-
let alertBlock = block.getWrapper()
|
|
14
|
-
.select(`div.${this.blockClass}`);
|
|
15
|
-
if (alertBlock.empty()) {
|
|
16
|
-
if (hidedRecordsAmount === 0)
|
|
17
|
-
return;
|
|
18
|
-
else
|
|
19
|
-
this.render(block, hidedRecordsAmount, position, chartOrientation);
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
if (hidedRecordsAmount === 0)
|
|
23
|
-
alertBlock.remove();
|
|
24
|
-
else
|
|
25
|
-
alertBlock.text(this.getAlertText(hidedRecordsAmount, chartOrientation));
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
static setAlertPosition(alertBlock, attrs) {
|
|
29
|
-
alertBlock
|
|
30
|
-
.style('position', 'absolute')
|
|
31
|
-
.style('left', attrs.left)
|
|
32
|
-
.style('right', attrs.right)
|
|
33
|
-
.style('top', attrs.top)
|
|
34
|
-
.style('bottom', attrs.bottom);
|
|
35
|
-
}
|
|
36
|
-
static getAlertText(hidedRecordsAmount, chartOrientation) {
|
|
37
|
-
return `+ ${hidedRecordsAmount} ${this.getWordTextEndingByAmount(hidedRecordsAmount, chartOrientation)}`;
|
|
38
|
-
}
|
|
39
|
-
static getWordTextEndingByAmount(hidedRecordsAmount, chartOrientation) {
|
|
40
|
-
const lastDigit = hidedRecordsAmount % 10;
|
|
41
|
-
if (chartOrientation === 'vertical') {
|
|
42
|
-
if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
|
|
43
|
-
return 'столбцов';
|
|
44
|
-
if (lastDigit === 1)
|
|
45
|
-
return 'столбец';
|
|
46
|
-
if (lastDigit >= 2 && lastDigit <= 4)
|
|
47
|
-
return 'столбца';
|
|
48
|
-
return 'столбцов';
|
|
49
|
-
}
|
|
50
|
-
else if (chartOrientation === 'horizontal') {
|
|
51
|
-
if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
|
|
52
|
-
return 'строк';
|
|
53
|
-
if (lastDigit === 1)
|
|
54
|
-
return 'строка';
|
|
55
|
-
if (lastDigit >= 2 && lastDigit <= 4)
|
|
56
|
-
return 'строки';
|
|
57
|
-
return 'строк';
|
|
58
|
-
}
|
|
59
|
-
else {
|
|
60
|
-
if (hidedRecordsAmount >= 10 && hidedRecordsAmount <= 20)
|
|
61
|
-
return 'категорий';
|
|
62
|
-
if (lastDigit === 1)
|
|
63
|
-
return 'категория';
|
|
64
|
-
if (lastDigit >= 2 && lastDigit <= 4)
|
|
65
|
-
return 'категории';
|
|
66
|
-
return 'категорий';
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
static getBlockPositionAttrs(position, block) {
|
|
70
|
-
const attrs = {
|
|
71
|
-
bottom: null,
|
|
72
|
-
top: null,
|
|
73
|
-
right: null,
|
|
74
|
-
left: null
|
|
75
|
-
};
|
|
76
|
-
if (position === 'top') {
|
|
77
|
-
attrs.right = '17px';
|
|
78
|
-
attrs.top = '1rem';
|
|
79
|
-
}
|
|
80
|
-
if (position === 'right') {
|
|
81
|
-
attrs.bottom = '20px';
|
|
82
|
-
attrs.left = this.getLeftAttrForRightBlock(block) + 'px';
|
|
83
|
-
}
|
|
84
|
-
if (position === 'bottom') {
|
|
85
|
-
attrs.left = '20px';
|
|
86
|
-
attrs.bottom = '20px';
|
|
87
|
-
}
|
|
88
|
-
return attrs;
|
|
89
|
-
}
|
|
90
|
-
static getLeftAttrForRightBlock(block) {
|
|
91
|
-
const legendBlock = block.getSvg().select(`.${Legend.objectClass}`);
|
|
92
|
-
if (legendBlock.empty())
|
|
93
|
-
return null;
|
|
94
|
-
return DomHelper.getSelectionNumericAttr(legendBlock, 'x');
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
RecordOverflowAlert.blockClass = 'record-overflow-alert';
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { MdtChartsConfig, MdtChartsDataSource } from "../config/config";
|
|
2
|
-
import { DesignerConfig } from "../designer/designerConfig";
|
|
3
|
-
import { DataScope, LegendBlockModel } from "./model";
|
|
4
|
-
import { ModelInstance } from "./modelInstance/modelInstance";
|
|
5
|
-
export declare class DataManagerModel {
|
|
6
|
-
static getPreparedData(data: MdtChartsDataSource, allowableKeys: string[], config: MdtChartsConfig): MdtChartsDataSource;
|
|
7
|
-
static getDataScope(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig, legendBlock: LegendBlockModel, modelInstance: ModelInstance): DataScope;
|
|
8
|
-
static getDataValuesByKeyField(data: MdtChartsDataSource, dataSourceName: string, keyFieldName: string): string[];
|
|
9
|
-
private static getDataScopeFor2D;
|
|
10
|
-
private static getDataScopeForPolar;
|
|
11
|
-
/**
|
|
12
|
-
* Выводит количество элементов (преимущественно баров) в одной группе. Группа - один ключ
|
|
13
|
-
* @param configOptions
|
|
14
|
-
* @param chartsLength
|
|
15
|
-
*/
|
|
16
|
-
private static getElementsInGroupAmount;
|
|
17
|
-
private static getBarChartsInGroupAmount;
|
|
18
|
-
private static getScopedData;
|
|
19
|
-
private static getScopedChartData;
|
|
20
|
-
private static setDataType;
|
|
21
|
-
private static getTypedData;
|
|
22
|
-
private static getDataLimitByItemSize;
|
|
23
|
-
}
|