mdt-charts 1.10.2 → 1.12.0
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 +13 -5
- package/lib/designer/designerConfig.d.ts +8 -2
- package/lib/engine/features/aggregator/aggregator.d.ts +4 -3
- package/lib/engine/features/aggregator/aggregator.js +14 -11
- package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.d.ts +28 -0
- package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.js +50 -0
- package/lib/engine/features/title/title.js +2 -0
- package/lib/engine/features/tolltip/tooltip.js +1 -1
- package/lib/engine/filterManager/filterEventManager.d.ts +3 -3
- package/lib/engine/filterManager/filterEventManager.js +4 -4
- package/lib/engine/intervalNotation/intervalManager.js +2 -5
- package/lib/engine/polarNotation/donut/DonutHelper.d.ts +2 -0
- package/lib/engine/polarNotation/donut/DonutHelper.js +20 -3
- package/lib/engine/polarNotation/donut/donut.js +1 -1
- package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.d.ts +16 -0
- package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js +48 -0
- package/lib/engine/polarNotation/polarManager.js +16 -12
- package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.d.ts +15 -0
- package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +32 -0
- package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js +13 -7
- package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.d.ts +19 -0
- package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js +61 -0
- package/lib/model/chartStyleModel/chartStyleModel.d.ts +9 -0
- package/lib/model/chartStyleModel/chartStyleModel.js +27 -0
- package/lib/model/dataManagerModel/dataManagerModel.d.ts +26 -0
- package/lib/model/dataManagerModel/dataManagerModel.js +132 -0
- package/lib/model/dataManagerModel/dataManagerModelService.d.ts +5 -0
- package/lib/model/dataManagerModel/dataManagerModelService.js +28 -0
- package/lib/model/dataManagerModel.d.ts +3 -2
- package/lib/model/dataManagerModel.js +12 -10
- package/lib/model/featuresModel/axisModel.d.ts +9 -8
- package/lib/model/featuresModel/axisModel.js +21 -21
- package/lib/model/featuresModel/legendModel/legendModel.d.ts +4 -5
- package/lib/model/featuresModel/legendModel/legendModel.js +6 -9
- package/lib/model/featuresModel/otherComponents.d.ts +9 -2
- package/lib/model/featuresModel/otherComponents.js +6 -4
- package/lib/model/featuresModel/scaleModel.d.ts +7 -6
- package/lib/model/featuresModel/scaleModel.js +9 -9
- package/lib/model/featuresModel/titleModel.d.ts +1 -1
- package/lib/model/featuresModel/titleModel.js +7 -5
- package/lib/model/marginModel.d.ts +5 -5
- package/lib/model/marginModel.js +41 -38
- package/lib/model/model.d.ts +24 -18
- package/lib/model/modelBuilder.js +26 -37
- package/lib/model/modelInstance/canvasModel/canvasModel.d.ts +24 -0
- package/lib/model/modelInstance/canvasModel/canvasModel.js +44 -0
- package/lib/model/modelInstance/canvasModel/legendCanvasModel.d.ts +7 -0
- package/lib/model/modelInstance/canvasModel/legendCanvasModel.js +13 -0
- package/lib/model/modelInstance/canvasModel/titleCanvas.d.ts +9 -0
- package/lib/model/modelInstance/canvasModel/titleCanvas.js +11 -0
- package/lib/model/modelInstance/dataModel.d.ts +11 -0
- package/lib/model/modelInstance/dataModel.js +23 -0
- package/lib/model/modelInstance/modelInstance.d.ts +10 -0
- package/lib/model/modelInstance/modelInstance.js +17 -0
- package/lib/model/notations/intervalModel.d.ts +2 -1
- package/lib/model/notations/intervalModel.js +17 -15
- package/lib/model/notations/polarModel.d.ts +9 -3
- package/lib/model/notations/polarModel.js +29 -8
- package/lib/model/notations/twoDimensionalModel.d.ts +7 -5
- package/lib/model/notations/twoDimensionalModel.js +19 -12
- package/lib/style/charts-main.css +2 -0
- package/lib/style/charts-main.less +2 -0
- package/package.json +3 -2
- package/lib/model/chartStyleModel.d.ts +0 -16
- package/lib/model/chartStyleModel.js +0 -67
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { TitleBlockModel } from "../../model";
|
|
2
|
+
declare type TitleBlockCanvas = TitleBlockModel;
|
|
3
|
+
export declare class TitleCanvasModel {
|
|
4
|
+
private model;
|
|
5
|
+
init(model: TitleBlockCanvas): void;
|
|
6
|
+
getModel(): TitleBlockModel;
|
|
7
|
+
getAllNeededSpace(): number;
|
|
8
|
+
}
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { DataScope } from "../model";
|
|
2
|
+
export declare const DEFAULT_MAX_RECORDS_AMOUNT = 50;
|
|
3
|
+
export declare class DataModelInstance {
|
|
4
|
+
private maxRecordsAmount;
|
|
5
|
+
private scope;
|
|
6
|
+
initMaxRecordsAmount(amount: number): void;
|
|
7
|
+
getMaxRecordsAmount(): number;
|
|
8
|
+
initScope(scope: DataScope): void;
|
|
9
|
+
getScope(): DataScope;
|
|
10
|
+
getAllowableKeys(): string[];
|
|
11
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export const DEFAULT_MAX_RECORDS_AMOUNT = 50;
|
|
2
|
+
export class DataModelInstance {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.maxRecordsAmount = DEFAULT_MAX_RECORDS_AMOUNT;
|
|
5
|
+
}
|
|
6
|
+
initMaxRecordsAmount(amount) {
|
|
7
|
+
if (typeof amount === "number" && amount > 0) {
|
|
8
|
+
this.maxRecordsAmount = amount;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
getMaxRecordsAmount() {
|
|
12
|
+
return this.maxRecordsAmount;
|
|
13
|
+
}
|
|
14
|
+
initScope(scope) {
|
|
15
|
+
this.scope = scope;
|
|
16
|
+
}
|
|
17
|
+
getScope() {
|
|
18
|
+
return this.scope;
|
|
19
|
+
}
|
|
20
|
+
getAllowableKeys() {
|
|
21
|
+
return this.getScope().allowableKeys;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { MdtChartsConfig } from "../../main";
|
|
2
|
+
import { CanvasModel } from "./canvasModel/canvasModel";
|
|
3
|
+
import { DataModelInstance } from "./dataModel";
|
|
4
|
+
export declare class ModelInstance {
|
|
5
|
+
static create(config: MdtChartsConfig): ModelInstance;
|
|
6
|
+
private static initInitialParams;
|
|
7
|
+
canvasModel: CanvasModel;
|
|
8
|
+
dataModel: DataModelInstance;
|
|
9
|
+
constructor();
|
|
10
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CanvasModel } from "./canvasModel/canvasModel";
|
|
2
|
+
import { DataModelInstance } from "./dataModel";
|
|
3
|
+
export class ModelInstance {
|
|
4
|
+
constructor() {
|
|
5
|
+
this.canvasModel = new CanvasModel();
|
|
6
|
+
this.dataModel = new DataModelInstance();
|
|
7
|
+
}
|
|
8
|
+
static create(config) {
|
|
9
|
+
const modelInstance = new ModelInstance();
|
|
10
|
+
this.initInitialParams(modelInstance, config);
|
|
11
|
+
return modelInstance;
|
|
12
|
+
}
|
|
13
|
+
static initInitialParams(modelInstance, config) {
|
|
14
|
+
modelInstance.canvasModel.initBlockSize(config.canvas.size);
|
|
15
|
+
modelInstance.dataModel.initMaxRecordsAmount(config.options.data.maxRecordsAmount);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { MdtChartsConfig, MdtChartsDataSource, IntervalOptions } from "../../config/config";
|
|
2
2
|
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
3
|
import { AdditionalElementsOptions, BlockMargin, DataScope, IntervalOptionsModel } from "../model";
|
|
4
|
+
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
4
5
|
export declare class IntervalModel {
|
|
5
|
-
static getOptions(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource): IntervalOptionsModel;
|
|
6
|
+
static getOptions(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): IntervalOptionsModel;
|
|
6
7
|
static getAdditionalElements(options: IntervalOptions): AdditionalElementsOptions;
|
|
7
8
|
private static getChartsModel;
|
|
8
9
|
}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { AxisModel } from "../featuresModel/axisModel";
|
|
2
|
-
import {
|
|
3
|
-
import { DataManagerModel } from "../dataManagerModel";
|
|
4
|
-
import { LegendModel } from "../featuresModel/legendModel/legendModel";
|
|
2
|
+
import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
|
|
3
|
+
import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
|
|
5
4
|
import { AxisType } from "../modelBuilder";
|
|
6
5
|
import { ScaleModel, ScaleType } from "../featuresModel/scaleModel";
|
|
6
|
+
import { TwoDimensionalModel } from "./twoDimensionalModel";
|
|
7
7
|
export class IntervalModel {
|
|
8
|
-
static getOptions(config, designerConfig, margin, dataScope, data) {
|
|
8
|
+
static getOptions(config, designerConfig, margin, dataScope, data, modelInstance) {
|
|
9
9
|
const options = config.options;
|
|
10
|
+
const canvasModel = modelInstance.canvasModel;
|
|
10
11
|
return {
|
|
11
|
-
legend:
|
|
12
|
+
legend: canvasModel.legendCanvas.getModel(),
|
|
12
13
|
title: options.title,
|
|
13
14
|
selectable: !!options.selectable,
|
|
14
15
|
orient: options.orientation,
|
|
@@ -17,7 +18,7 @@ export class IntervalModel {
|
|
|
17
18
|
domain: dataScope.allowableKeys,
|
|
18
19
|
range: {
|
|
19
20
|
start: 0,
|
|
20
|
-
end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation,
|
|
21
|
+
end: ScaleModel.getRangePeek(ScaleType.Key, options.orientation, canvasModel)
|
|
21
22
|
},
|
|
22
23
|
type: 'band',
|
|
23
24
|
elementsAmount: 1
|
|
@@ -26,7 +27,7 @@ export class IntervalModel {
|
|
|
26
27
|
domain: ScaleModel.getDateValueDomain(data, options.chart, options.axis.key.position, options.data.dataSource),
|
|
27
28
|
range: {
|
|
28
29
|
start: 0,
|
|
29
|
-
end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation,
|
|
30
|
+
end: ScaleModel.getRangePeek(ScaleType.Value, options.orientation, canvasModel)
|
|
30
31
|
},
|
|
31
32
|
type: 'datetime'
|
|
32
33
|
}
|
|
@@ -36,14 +37,14 @@ export class IntervalModel {
|
|
|
36
37
|
type: 'key',
|
|
37
38
|
orient: AxisModel.getAxisOrient(AxisType.Key, options.orientation, options.axis.key.position),
|
|
38
39
|
translate: {
|
|
39
|
-
translateX: AxisModel.getAxisTranslateX(AxisType.Key, options.orientation, options.axis.key.position,
|
|
40
|
-
translateY: AxisModel.getAxisTranslateY(AxisType.Key, options.orientation, options.axis.key.position,
|
|
40
|
+
translateX: AxisModel.getAxisTranslateX(AxisType.Key, options.orientation, options.axis.key.position, canvasModel),
|
|
41
|
+
translateY: AxisModel.getAxisTranslateY(AxisType.Key, options.orientation, options.axis.key.position, canvasModel)
|
|
41
42
|
},
|
|
42
43
|
cssClass: 'key-axis',
|
|
43
44
|
ticks: options.axis.key.ticks,
|
|
44
45
|
labels: {
|
|
45
46
|
maxSize: AxisModel.getLabelSize(designerConfig.canvas.axisLabel.maxSize.main, data[options.data.dataSource].map(d => d[options.data.keyField.name])).width,
|
|
46
|
-
position: AxisModel.getKeyAxisLabelPosition(
|
|
47
|
+
position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name).length),
|
|
47
48
|
visible: true,
|
|
48
49
|
defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
|
|
49
50
|
},
|
|
@@ -53,8 +54,8 @@ export class IntervalModel {
|
|
|
53
54
|
type: 'value',
|
|
54
55
|
orient: AxisModel.getAxisOrient(AxisType.Value, options.orientation, options.axis.value.position),
|
|
55
56
|
translate: {
|
|
56
|
-
translateX: AxisModel.getAxisTranslateX(AxisType.Value, options.orientation, options.axis.value.position,
|
|
57
|
-
translateY: AxisModel.getAxisTranslateY(AxisType.Value, options.orientation, options.axis.value.position,
|
|
57
|
+
translateX: AxisModel.getAxisTranslateX(AxisType.Value, options.orientation, options.axis.value.position, canvasModel),
|
|
58
|
+
translateY: AxisModel.getAxisTranslateY(AxisType.Value, options.orientation, options.axis.value.position, canvasModel)
|
|
58
59
|
},
|
|
59
60
|
cssClass: 'value-axis',
|
|
60
61
|
ticks: options.axis.value.ticks,
|
|
@@ -71,7 +72,8 @@ export class IntervalModel {
|
|
|
71
72
|
type: options.type,
|
|
72
73
|
charts: this.getChartsModel(options.chart, designerConfig.chartStyle),
|
|
73
74
|
additionalElements: this.getAdditionalElements(options),
|
|
74
|
-
tooltip: options.tooltip
|
|
75
|
+
tooltip: options.tooltip,
|
|
76
|
+
chartSettings: TwoDimensionalModel.getChartsSettings(designerConfig.canvas.chartOptions.bar)
|
|
75
77
|
};
|
|
76
78
|
}
|
|
77
79
|
static getAdditionalElements(options) {
|
|
@@ -85,8 +87,8 @@ export class IntervalModel {
|
|
|
85
87
|
type: chart.type,
|
|
86
88
|
data: Object.assign({}, chart.data),
|
|
87
89
|
tooltip: chart.tooltip,
|
|
88
|
-
cssClasses:
|
|
89
|
-
style:
|
|
90
|
+
cssClasses: ChartStyleModelService.getCssClasses(0),
|
|
91
|
+
style: ChartStyleModelService.getChartStyle(1, chartStyleConfig)
|
|
90
92
|
});
|
|
91
93
|
return chartsModel;
|
|
92
94
|
}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../config/config";
|
|
2
2
|
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
-
import {
|
|
3
|
+
import { PolarOptionsModel } from "../model";
|
|
4
|
+
import { CanvasModel } from "../modelInstance/canvasModel/canvasModel";
|
|
5
|
+
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
6
|
+
/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
|
|
7
|
+
export declare const MIN_DONUT_BLOCK_SIZE = 120;
|
|
4
8
|
export declare class PolarModel {
|
|
5
|
-
static getOptions(
|
|
9
|
+
static getOptions(options: MdtChartsPolarOptions, data: MdtChartsDataSource, designerConfig: DesignerConfig, modelInstance: ModelInstance): PolarOptionsModel;
|
|
10
|
+
static getLegendPositionByBlockSize(canvasModel: CanvasModel): "bottom" | "right";
|
|
11
|
+
private static getDonutSettings;
|
|
6
12
|
private static getChartsModel;
|
|
7
13
|
}
|
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
|
|
2
|
+
/** If donut block has width less than this const, legend change postion from "right" to "bottom" */
|
|
3
|
+
export const MIN_DONUT_BLOCK_SIZE = 120;
|
|
3
4
|
export class PolarModel {
|
|
4
|
-
static getOptions(
|
|
5
|
-
const options = config.options;
|
|
5
|
+
static getOptions(options, data, designerConfig, modelInstance) {
|
|
6
6
|
return {
|
|
7
7
|
type: options.type,
|
|
8
8
|
selectable: !!options.selectable,
|
|
9
9
|
title: options.title,
|
|
10
10
|
data: Object.assign({}, options.data),
|
|
11
11
|
charts: this.getChartsModel(options.chart, data[options.data.dataSource].length, designerConfig.chartStyle),
|
|
12
|
-
legend:
|
|
13
|
-
tooltip: options.tooltip
|
|
12
|
+
legend: modelInstance.canvasModel.legendCanvas.getModel(),
|
|
13
|
+
tooltip: options.tooltip,
|
|
14
|
+
chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart)
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
//TODO: type for returned value
|
|
18
|
+
static getLegendPositionByBlockSize(canvasModel) {
|
|
19
|
+
const widthCoefficientWhenLegendShouldInBottom = 1.5;
|
|
20
|
+
const blockWidth = canvasModel.getBlockSize().width;
|
|
21
|
+
const blockHeight = canvasModel.getBlockSize().height;
|
|
22
|
+
return canvasModel.getChartBlockWidth() < MIN_DONUT_BLOCK_SIZE
|
|
23
|
+
&& blockWidth * widthCoefficientWhenLegendShouldInBottom < blockHeight
|
|
24
|
+
? 'bottom'
|
|
25
|
+
: 'right';
|
|
26
|
+
}
|
|
27
|
+
static getDonutSettings(settings, chartOptions) {
|
|
28
|
+
return {
|
|
29
|
+
padAngle: settings.padAngle,
|
|
30
|
+
thickness: Object.assign({}, settings.thickness),
|
|
31
|
+
aggregator: {
|
|
32
|
+
margin: settings.aggregatorPad,
|
|
33
|
+
text: chartOptions.aggregator.text
|
|
34
|
+
}
|
|
14
35
|
};
|
|
15
36
|
}
|
|
16
37
|
static getChartsModel(chart, dataLength, chartStyleConfig) {
|
|
@@ -19,8 +40,8 @@ export class PolarModel {
|
|
|
19
40
|
type: chart.type,
|
|
20
41
|
data: Object.assign({}, chart.data),
|
|
21
42
|
tooltip: chart.tooltip,
|
|
22
|
-
cssClasses:
|
|
23
|
-
style:
|
|
43
|
+
cssClasses: ChartStyleModelService.getCssClasses(0),
|
|
44
|
+
style: ChartStyleModelService.getChartStyle(dataLength, chartStyleConfig)
|
|
24
45
|
});
|
|
25
46
|
return chartsModel;
|
|
26
47
|
}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { ChartOrientation,
|
|
2
|
-
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
-
import {
|
|
1
|
+
import { ChartOrientation, MdtChartsDataSource, TwoDimensionalChart, MdtChartsTwoDimensionalOptions } from "../../config/config";
|
|
2
|
+
import { BarOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
+
import { DataScope, TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
|
|
4
|
+
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
4
5
|
export declare class TwoDimensionalModel {
|
|
5
|
-
static getOptions(
|
|
6
|
+
static getOptions(options: MdtChartsTwoDimensionalOptions, designerConfig: DesignerConfig, dataScope: DataScope, data: MdtChartsDataSource, modelInstance: ModelInstance): TwoDimensionalOptionsModel;
|
|
6
7
|
static getChartsEmbeddedLabelsFlag(charts: TwoDimensionalChart[], chartOrientation: ChartOrientation): boolean;
|
|
7
8
|
/**
|
|
8
9
|
* Сортирует список чартов в порядке: area - bar - line.
|
|
@@ -10,10 +11,11 @@ export declare class TwoDimensionalModel {
|
|
|
10
11
|
* @param charts Чарты из конфига
|
|
11
12
|
*/
|
|
12
13
|
static sortCharts(charts: TwoDimensionalChart[]): void;
|
|
14
|
+
static getChartsSettings(barSettings: BarOptionsCanvas): TwoDimChartElementsSettings;
|
|
13
15
|
private static getChartsModel;
|
|
14
16
|
private static findChartsWithEmbeddedKeyLabels;
|
|
15
17
|
private static getEmbeddedLabelType;
|
|
16
18
|
private static getAdditionalElements;
|
|
17
19
|
private static getChartsByType;
|
|
18
|
-
|
|
20
|
+
static getChartsValueFieldsAmount(charts: TwoDimensionalChart[]): number[];
|
|
19
21
|
}
|
|
@@ -1,28 +1,29 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
|
|
2
|
+
import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
|
|
2
3
|
import { AxisModel } from "../featuresModel/axisModel";
|
|
3
|
-
import { LegendModel } from "../featuresModel/legendModel/legendModel";
|
|
4
4
|
import { ScaleModel } from "../featuresModel/scaleModel";
|
|
5
5
|
export class TwoDimensionalModel {
|
|
6
|
-
static getOptions(
|
|
7
|
-
const
|
|
6
|
+
static getOptions(options, designerConfig, dataScope, data, modelInstance) {
|
|
7
|
+
const canvasModel = modelInstance.canvasModel;
|
|
8
8
|
return {
|
|
9
|
-
legend:
|
|
9
|
+
legend: canvasModel.legendCanvas.getModel(),
|
|
10
10
|
title: options.title,
|
|
11
11
|
selectable: !!options.selectable,
|
|
12
12
|
orient: options.orientation,
|
|
13
13
|
scale: {
|
|
14
|
-
key: ScaleModel.getScaleKey(dataScope.allowableKeys, options.orientation,
|
|
15
|
-
value: ScaleModel.getScaleLinear(options, data,
|
|
14
|
+
key: ScaleModel.getScaleKey(dataScope.allowableKeys, options.orientation, canvasModel, options.charts, this.getChartsByType(options.charts, 'bar')),
|
|
15
|
+
value: ScaleModel.getScaleLinear(options, data, canvasModel)
|
|
16
16
|
},
|
|
17
17
|
axis: {
|
|
18
|
-
key: AxisModel.getKeyAxis(options.charts, data, options.data, options.orientation, options.axis.key, designerConfig.canvas.axisLabel,
|
|
19
|
-
value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel,
|
|
18
|
+
key: AxisModel.getKeyAxis(options.charts, data, options.data, options.orientation, options.axis.key, designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip),
|
|
19
|
+
value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, canvasModel)
|
|
20
20
|
},
|
|
21
21
|
type: options.type,
|
|
22
22
|
data: Object.assign({}, options.data),
|
|
23
23
|
charts: this.getChartsModel(options.charts, options.orientation, designerConfig.chartStyle),
|
|
24
24
|
additionalElements: this.getAdditionalElements(options),
|
|
25
|
-
tooltip: options.tooltip
|
|
25
|
+
tooltip: options.tooltip,
|
|
26
|
+
chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions.bar)
|
|
26
27
|
};
|
|
27
28
|
}
|
|
28
29
|
static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
|
|
@@ -40,7 +41,13 @@ export class TwoDimensionalModel {
|
|
|
40
41
|
const chartOrder = ['area', 'bar', 'line'];
|
|
41
42
|
charts.sort((chart1, chart2) => chartOrder.indexOf(chart1.type) - chartOrder.indexOf(chart2.type));
|
|
42
43
|
}
|
|
44
|
+
static getChartsSettings(barSettings) {
|
|
45
|
+
return {
|
|
46
|
+
bar: Object.assign({}, barSettings)
|
|
47
|
+
};
|
|
48
|
+
}
|
|
43
49
|
static getChartsModel(charts, chartOrientation, chartStyleConfig) {
|
|
50
|
+
const styleModel = new TwoDimensionalChartStyleModel(charts, chartStyleConfig);
|
|
44
51
|
this.sortCharts(charts);
|
|
45
52
|
const chartsModel = [];
|
|
46
53
|
charts.forEach((chart, index) => {
|
|
@@ -49,8 +56,8 @@ export class TwoDimensionalModel {
|
|
|
49
56
|
isSegmented: chart.isSegmented,
|
|
50
57
|
data: Object.assign({}, chart.data),
|
|
51
58
|
tooltip: chart.tooltip,
|
|
52
|
-
cssClasses:
|
|
53
|
-
style:
|
|
59
|
+
cssClasses: ChartStyleModelService.getCssClasses(index),
|
|
60
|
+
style: styleModel.getChartStyle(chart, index),
|
|
54
61
|
embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation),
|
|
55
62
|
markersOptions: chart.markers,
|
|
56
63
|
index
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mdt-charts",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/main.js",
|
|
6
6
|
"scripts": {
|
|
7
7
|
"dev": "npx webpack --mode development",
|
|
8
8
|
"build": "npx webpack --mode production",
|
|
9
9
|
"watch": "npx webpack --mode development --watch",
|
|
10
|
-
"test": "jest"
|
|
10
|
+
"test": "jest",
|
|
11
|
+
"build-lib": "npx tsc -p ."
|
|
11
12
|
},
|
|
12
13
|
"homepage": "https://github.com/VishulaKnow/charts",
|
|
13
14
|
"author": "",
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { TwoDimensionalChartType } from "../config/config";
|
|
2
|
-
import { ChartStyleConfig } from "../designer/designerConfig";
|
|
3
|
-
import { ChartStyle } from "./model";
|
|
4
|
-
export declare class ChartStyleModel {
|
|
5
|
-
private static safeColorsAmount;
|
|
6
|
-
private static standartColors;
|
|
7
|
-
static getCssClasses(chartIndex: number): string[];
|
|
8
|
-
static get2DChartStyle(chartsAmount: number, chartType: TwoDimensionalChartType, chartsFieldsAmounts: number[], chartIndex: number, isSegmented: boolean, styleConfig: ChartStyleConfig): ChartStyle;
|
|
9
|
-
static getChartStyle(elementsAmount: number, styleConfig: ChartStyleConfig): ChartStyle;
|
|
10
|
-
private static getChartColors;
|
|
11
|
-
private static getChartOpacity;
|
|
12
|
-
private static getColorSet;
|
|
13
|
-
private static checkAndGet;
|
|
14
|
-
private static getStartIndex;
|
|
15
|
-
private static resetColor;
|
|
16
|
-
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import * as chroma from "chroma-js";
|
|
2
|
-
import { ModelHelper } from "./modelHelper";
|
|
3
|
-
export class ChartStyleModel {
|
|
4
|
-
static getCssClasses(chartIndex) {
|
|
5
|
-
const cssClasses = [`chart-${chartIndex}`];
|
|
6
|
-
return cssClasses;
|
|
7
|
-
}
|
|
8
|
-
static get2DChartStyle(chartsAmount, chartType, chartsFieldsAmounts, chartIndex, isSegmented, styleConfig) {
|
|
9
|
-
const startIndex = this.getStartIndex(chartIndex, chartsFieldsAmounts);
|
|
10
|
-
const baseColors = this.checkAndGet(styleConfig.baseColors);
|
|
11
|
-
const palette = this.getColorSet(baseColors, ModelHelper.getSum(chartsFieldsAmounts));
|
|
12
|
-
return {
|
|
13
|
-
elementColors: this.getChartColors(palette, chartsFieldsAmounts[chartIndex], startIndex, chartType),
|
|
14
|
-
opacity: this.getChartOpacity(chartsAmount, chartType, chartsFieldsAmounts[chartIndex], isSegmented)
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
static getChartStyle(elementsAmount, styleConfig) {
|
|
18
|
-
const baseColors = this.checkAndGet(styleConfig.baseColors);
|
|
19
|
-
return {
|
|
20
|
-
elementColors: this.getColorSet(baseColors, elementsAmount),
|
|
21
|
-
opacity: 1
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
static getChartColors(palette, elementsAmount, startIndex, chartType) {
|
|
25
|
-
const selectedColors = palette.slice(startIndex, startIndex + elementsAmount);
|
|
26
|
-
if (chartType !== 'line')
|
|
27
|
-
return selectedColors;
|
|
28
|
-
for (let i = 0; i < selectedColors.length; i++) {
|
|
29
|
-
selectedColors[i] = chroma.mix(selectedColors[i], 'white', 0.2).saturate(3).hex();
|
|
30
|
-
}
|
|
31
|
-
return selectedColors;
|
|
32
|
-
}
|
|
33
|
-
static getChartOpacity(chartsLength, chartType, chartsValueFieldAmount, isSegmented) {
|
|
34
|
-
if (chartType === 'area' && (chartsLength > 1 || chartsValueFieldAmount > 1) && !isSegmented)
|
|
35
|
-
return 0.5; // combined area with other charts has 0.5 opacity
|
|
36
|
-
return 1;
|
|
37
|
-
}
|
|
38
|
-
static getColorSet(baseColors, elementsAmount) {
|
|
39
|
-
return chroma.scale(baseColors)
|
|
40
|
-
.mode('rgb')
|
|
41
|
-
.domain([0, 0.55, 0.75, 1])
|
|
42
|
-
.colors(elementsAmount <= 1 ? 2 : elementsAmount);
|
|
43
|
-
}
|
|
44
|
-
static checkAndGet(baseColors) {
|
|
45
|
-
if (baseColors.length === 0 || baseColors.filter(color => color === 'rgba(0, 0, 0, 0)' || !color).length > 0) {
|
|
46
|
-
return this.standartColors;
|
|
47
|
-
}
|
|
48
|
-
return baseColors;
|
|
49
|
-
}
|
|
50
|
-
static getStartIndex(chartIndex, chartsFieldsAmounts) {
|
|
51
|
-
let startIndex = 0;
|
|
52
|
-
for (let i = 0; i < chartIndex; i++) {
|
|
53
|
-
startIndex += chartsFieldsAmounts[i];
|
|
54
|
-
}
|
|
55
|
-
return startIndex;
|
|
56
|
-
}
|
|
57
|
-
static resetColor(index, baseColor) {
|
|
58
|
-
let color = chroma(baseColor)
|
|
59
|
-
.luminance(0.5)
|
|
60
|
-
.saturate(1.5 + Math.floor(index / this.safeColorsAmount) * 0.5);
|
|
61
|
-
color = chroma(color)
|
|
62
|
-
.set('hsv.h', chroma(color).get('hsv.h') + Math.floor(index / this.safeColorsAmount) * 4);
|
|
63
|
-
return color.hex();
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
ChartStyleModel.safeColorsAmount = 8;
|
|
67
|
-
ChartStyleModel.standartColors = ["#209DE3", "#FF3131", "#FFBA00", "#20B078"];
|