mdt-charts 1.15.7 → 1.16.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 +8 -25
- package/lib/engine/contentManager/contentManagerFactory.js +1 -3
- package/lib/engine/engine.js +0 -2
- package/lib/engine/features/axis/axis.js +4 -2
- package/lib/engine/features/axis/axisHelper.d.ts +1 -1
- package/lib/engine/features/axis/axisHelper.js +1 -1
- package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +2 -2
- package/lib/model/dataManagerModel/dataManagerModel.js +1 -6
- package/lib/model/featuresModel/axisModel.js +7 -3
- package/lib/model/featuresModel/axisModelService.d.ts +9 -1
- package/lib/model/featuresModel/axisModelService.js +21 -0
- package/lib/model/model.d.ts +3 -19
- package/lib/model/modelBuilder.js +0 -4
- package/lib/model/modelInstance/dataModel/dataModel.js +3 -0
- package/lib/model/notations/twoDimensionalModel.js +1 -1
- package/lib/style/charts-main.css +0 -83
- package/lib/style/charts-main.less +0 -83
- package/package.json +16 -13
- package/tsconfig.production.json +2 -1
- package/lib/engine/cardsNotation/card/card.d.ts +0 -31
- package/lib/engine/cardsNotation/card/card.js +0 -104
- package/lib/engine/cardsNotation/card/cardChange.d.ts +0 -21
- package/lib/engine/cardsNotation/card/cardChange.js +0 -76
- package/lib/engine/cardsNotation/card/cardElementsStyler.d.ts +0 -6
- package/lib/engine/cardsNotation/card/cardElementsStyler.js +0 -11
- package/lib/engine/cardsNotation/card/cardService.d.ts +0 -11
- package/lib/engine/cardsNotation/card/cardService.js +0 -12
- package/lib/engine/cardsNotation/cardsManager.d.ts +0 -11
- package/lib/engine/cardsNotation/cardsManager.js +0 -14
- package/lib/engine/intervalNotation/gantt.d.ts +0 -10
- package/lib/engine/intervalNotation/gantt.js +0 -62
- package/lib/engine/intervalNotation/intervalManager.d.ts +0 -7
- package/lib/engine/intervalNotation/intervalManager.js +0 -23
- package/lib/model/dataManagerModel/notations/cardsDataManagerModel.d.ts +0 -4
- package/lib/model/dataManagerModel/notations/cardsDataManagerModel.js +0 -8
- package/lib/model/notations/cards/cardsChangeService.d.ts +0 -9
- package/lib/model/notations/cards/cardsChangeService.js +0 -42
- package/lib/model/notations/cards/cardsModel.d.ts +0 -8
- package/lib/model/notations/cards/cardsModel.js +0 -20
- package/lib/model/notations/cards/cardsModelService.d.ts +0 -11
- package/lib/model/notations/cards/cardsModelService.js +0 -41
- package/lib/model/notations/intervalModel.d.ts +0 -9
- package/lib/model/notations/intervalModel.js +0 -95
- /package/lib/model/chartStyleModel/{TwoDimensionalChartStyleModel.d.ts → twoDimensionalChartStyleModel.d.ts} +0 -0
- /package/lib/model/chartStyleModel/{TwoDimensionalChartStyleModel.js → twoDimensionalChartStyleModel.js} +0 -0
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { FontResizer } from "../../helpers/fontResizer/fontResizer";
|
|
2
|
-
import { NamesHelper } from "../../helpers/namesHelper";
|
|
3
|
-
import { CardChange } from "./cardChange";
|
|
4
|
-
import { CardElementsStyler } from "./cardElementsStyler";
|
|
5
|
-
import { CardService } from "./cardService";
|
|
6
|
-
export class CardChart {
|
|
7
|
-
constructor() {
|
|
8
|
-
this.cardValueCssClass = NamesHelper.getClassName("card-value");
|
|
9
|
-
this.cardContentBlockCssClass = NamesHelper.getClassName("card-content");
|
|
10
|
-
this.styler = new CardElementsStyler();
|
|
11
|
-
}
|
|
12
|
-
render(block, options, data, canvasOptions) {
|
|
13
|
-
const parent = block.html.getBlock();
|
|
14
|
-
const dataRow = data[options.data.dataSource][0];
|
|
15
|
-
const wrapper = this.renderCardWrapper(parent);
|
|
16
|
-
this.renderContentBlock(wrapper, options.color);
|
|
17
|
-
this.setContentFontSize(this.cardContentElement, canvasOptions);
|
|
18
|
-
this.renderHeaderBlock(this.cardContentElement, {
|
|
19
|
-
title: options.title,
|
|
20
|
-
icon: options.icon
|
|
21
|
-
});
|
|
22
|
-
if (options.description)
|
|
23
|
-
this.renderDescriptionBlock(this.cardContentElement, options.description);
|
|
24
|
-
this.renderValueBlock(this.cardContentElement, CardService.getValueContentFromDataSource(Object.assign(Object.assign({}, options.value), { dataSetName: options.data.dataSource }), data));
|
|
25
|
-
if (options.change) {
|
|
26
|
-
this.changeBlock = new CardChange();
|
|
27
|
-
this.changeBlock.render(this.cardContentElement, options.change, dataRow);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
updateData(options, data) {
|
|
31
|
-
var _a;
|
|
32
|
-
const dataRow = data[options.data.dataSource][0];
|
|
33
|
-
this.setValueContent(CardService.getValueContentFromDataSource(Object.assign(Object.assign({}, options.value), { dataSetName: options.data.dataSource }), data));
|
|
34
|
-
this.updateValueBlockStyle();
|
|
35
|
-
this.setContentColor(options.color);
|
|
36
|
-
(_a = this.changeBlock) === null || _a === void 0 ? void 0 : _a.update(options.change, dataRow);
|
|
37
|
-
}
|
|
38
|
-
renderCardWrapper(parent) {
|
|
39
|
-
return parent.append("div")
|
|
40
|
-
.classed(this.cardContentBlockCssClass, true);
|
|
41
|
-
}
|
|
42
|
-
renderContentBlock(wrapper, color) {
|
|
43
|
-
this.cardContentElement = wrapper.append("div")
|
|
44
|
-
.classed(NamesHelper.getClassName("card-content"), true);
|
|
45
|
-
this.setContentColor(color);
|
|
46
|
-
}
|
|
47
|
-
setContentColor(color) {
|
|
48
|
-
this.cardContentElement.style("color", color);
|
|
49
|
-
}
|
|
50
|
-
setContentFontSize(contentBlock, canvasOptions) {
|
|
51
|
-
const fontSize = Math.floor(Math.min(canvasOptions.cardSize.height, canvasOptions.cardSize.width) / 10);
|
|
52
|
-
contentBlock.style("font-size", `${fontSize}px`);
|
|
53
|
-
}
|
|
54
|
-
renderHeaderBlock(contentBlock, options) {
|
|
55
|
-
const header = contentBlock.append("div")
|
|
56
|
-
.classed(NamesHelper.getClassName("card-header"), true);
|
|
57
|
-
if (options.icon)
|
|
58
|
-
this.appendIcon(header, options.icon);
|
|
59
|
-
this.appendTitle(header, options.title);
|
|
60
|
-
}
|
|
61
|
-
appendTitle(headerBlock, textContent) {
|
|
62
|
-
headerBlock.append("h3")
|
|
63
|
-
.classed(NamesHelper.getClassName("card-title"), true)
|
|
64
|
-
.text(textContent)
|
|
65
|
-
.attr("title", textContent);
|
|
66
|
-
}
|
|
67
|
-
appendIcon(headerBlock, icon) {
|
|
68
|
-
const iconEl = icon();
|
|
69
|
-
headerBlock.append("div")
|
|
70
|
-
.classed(NamesHelper.getClassName("card-icon"), true)
|
|
71
|
-
.node()
|
|
72
|
-
.appendChild(iconEl);
|
|
73
|
-
}
|
|
74
|
-
renderDescriptionBlock(contentBlock, textContent) {
|
|
75
|
-
const wrapper = contentBlock.append("div")
|
|
76
|
-
.classed(NamesHelper.getClassName("card-description-wrapper"), true);
|
|
77
|
-
wrapper.append("p")
|
|
78
|
-
.classed(NamesHelper.getClassName("card-description"), true)
|
|
79
|
-
.text(textContent)
|
|
80
|
-
.attr("title", textContent);
|
|
81
|
-
}
|
|
82
|
-
renderValueBlock(contentBlock, value) {
|
|
83
|
-
const wrapper = contentBlock.append("div")
|
|
84
|
-
.classed(NamesHelper.getClassName("card-value-wrapper"), true);
|
|
85
|
-
this.valueContentElement = wrapper.append("div")
|
|
86
|
-
.classed(NamesHelper.getClassName("card-value-block"), true)
|
|
87
|
-
.append("span")
|
|
88
|
-
.classed(this.cardValueCssClass, true);
|
|
89
|
-
this.setValueContent(value);
|
|
90
|
-
this.updateValueBlockStyle();
|
|
91
|
-
}
|
|
92
|
-
updateValueBlockStyle() {
|
|
93
|
-
this.styler.setValueBlockFontSize(this.valueContentElement);
|
|
94
|
-
FontResizer.setSize(this.valueContentElement.node(), {
|
|
95
|
-
elWrapper: this.cardContentElement.node(),
|
|
96
|
-
unit: "em",
|
|
97
|
-
smallestFontSize: 0.5,
|
|
98
|
-
step: 0.1
|
|
99
|
-
});
|
|
100
|
-
}
|
|
101
|
-
setValueContent(value) {
|
|
102
|
-
this.valueContentElement.text(value);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { MdtChartsDataRow } from "../../../config/config";
|
|
2
|
-
import { CardsChangeModel } from "../../../model/model";
|
|
3
|
-
import { CardChildElement } from "./card";
|
|
4
|
-
export declare class CardChange {
|
|
5
|
-
private wrapper;
|
|
6
|
-
private iconBlock;
|
|
7
|
-
private valueContentBlock;
|
|
8
|
-
private contentBlock;
|
|
9
|
-
render(contentBlock: CardChildElement, options: CardsChangeModel, dataRow: MdtChartsDataRow): void;
|
|
10
|
-
update(options: CardsChangeModel, dataRow: MdtChartsDataRow): void;
|
|
11
|
-
private renderWrapper;
|
|
12
|
-
private setColor;
|
|
13
|
-
private renderContentBlock;
|
|
14
|
-
private renderContentItems;
|
|
15
|
-
private renderContentItem;
|
|
16
|
-
private renderIcon;
|
|
17
|
-
private renderIconEl;
|
|
18
|
-
private renderValue;
|
|
19
|
-
private renderDescription;
|
|
20
|
-
private setValueContent;
|
|
21
|
-
}
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { NamesHelper } from "../../helpers/namesHelper";
|
|
2
|
-
import { CardService } from "./cardService";
|
|
3
|
-
export class CardChange {
|
|
4
|
-
render(contentBlock, options, dataRow) {
|
|
5
|
-
this.wrapper = this.renderWrapper(contentBlock);
|
|
6
|
-
this.setColor(this.wrapper, options);
|
|
7
|
-
this.renderContentBlock(this.wrapper);
|
|
8
|
-
this.renderContentItems(this.contentBlock, options, dataRow);
|
|
9
|
-
}
|
|
10
|
-
update(options, dataRow) {
|
|
11
|
-
this.setColor(this.wrapper, options);
|
|
12
|
-
this.setValueContent(CardService.getValueContentFromRow(options.value, dataRow), options.valuePrefix);
|
|
13
|
-
if (options.icon) {
|
|
14
|
-
if (this.iconBlock) {
|
|
15
|
-
this.iconBlock.html("");
|
|
16
|
-
this.renderIconEl(options.icon);
|
|
17
|
-
}
|
|
18
|
-
else {
|
|
19
|
-
this.renderIcon(this.contentBlock, options.icon);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
renderWrapper(contentBlock) {
|
|
24
|
-
return contentBlock.append("div")
|
|
25
|
-
.classed(NamesHelper.getClassName("card-change-wrapper"), true);
|
|
26
|
-
}
|
|
27
|
-
setColor(wrapper, options) {
|
|
28
|
-
wrapper.style("color", options.color);
|
|
29
|
-
}
|
|
30
|
-
renderContentBlock(wrapper) {
|
|
31
|
-
this.contentBlock = wrapper.append("div")
|
|
32
|
-
.classed(NamesHelper.getClassName("card-change-content"), true);
|
|
33
|
-
}
|
|
34
|
-
renderContentItems(contentBlock, options, dataRow) {
|
|
35
|
-
if (options.icon)
|
|
36
|
-
this.renderIcon(this.renderContentItem(contentBlock), options.icon);
|
|
37
|
-
this.renderValue(this.renderContentItem(contentBlock), CardService.getValueContentFromRow(options.value, dataRow), options.valuePrefix);
|
|
38
|
-
if (options.description)
|
|
39
|
-
this.renderDescription(this.renderContentItem(contentBlock, NamesHelper.getClassName("card-change-description-item")), options.description);
|
|
40
|
-
}
|
|
41
|
-
renderContentItem(contentBlock, cssClass) {
|
|
42
|
-
const item = contentBlock.append("div")
|
|
43
|
-
.classed(NamesHelper.getClassName("card-change-content-item"), true);
|
|
44
|
-
if (cssClass)
|
|
45
|
-
item.classed(cssClass, true);
|
|
46
|
-
return item;
|
|
47
|
-
}
|
|
48
|
-
renderIcon(parentBlock, icon) {
|
|
49
|
-
this.iconBlock = parentBlock.append("div")
|
|
50
|
-
.classed(NamesHelper.getClassName("card-change-icon"), true);
|
|
51
|
-
this.renderIconEl(icon);
|
|
52
|
-
}
|
|
53
|
-
renderIconEl(icon) {
|
|
54
|
-
const iconEl = icon();
|
|
55
|
-
this.iconBlock
|
|
56
|
-
.node()
|
|
57
|
-
.appendChild(iconEl);
|
|
58
|
-
}
|
|
59
|
-
renderValue(parentBlock, value, prefix) {
|
|
60
|
-
this.valueContentBlock = parentBlock.append("div")
|
|
61
|
-
.classed(NamesHelper.getClassName("card-change-value"), true)
|
|
62
|
-
.append("span");
|
|
63
|
-
this.setValueContent(value, prefix);
|
|
64
|
-
}
|
|
65
|
-
renderDescription(parentBlock, textContent) {
|
|
66
|
-
return parentBlock.append("div")
|
|
67
|
-
.classed(NamesHelper.getClassName("card-change-description-wrapper"), true)
|
|
68
|
-
.append("span")
|
|
69
|
-
.classed(NamesHelper.getClassName("card-change-description"), true)
|
|
70
|
-
.text(textContent)
|
|
71
|
-
.attr("title", textContent);
|
|
72
|
-
}
|
|
73
|
-
setValueContent(textContent, prefix) {
|
|
74
|
-
this.valueContentBlock.text(prefix + textContent);
|
|
75
|
-
}
|
|
76
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export class CardElementsStyler {
|
|
2
|
-
constructor() {
|
|
3
|
-
this.cardValueFontSize = "2em";
|
|
4
|
-
}
|
|
5
|
-
setValueBlockFontSize(valueBlock) {
|
|
6
|
-
this.setFontSize(valueBlock, this.cardValueFontSize);
|
|
7
|
-
}
|
|
8
|
-
setFontSize(cardElement, value) {
|
|
9
|
-
cardElement.style("font-size", value);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { MdtChartsCardValue, MdtChartsDataRow, MdtChartsDataSource } from "../../../config/config";
|
|
2
|
-
import { CardValueContent } from "./card";
|
|
3
|
-
interface ValueContentGetterOptions extends MdtChartsCardValue {
|
|
4
|
-
dataSetName: string;
|
|
5
|
-
}
|
|
6
|
-
export declare class CardServiceClass {
|
|
7
|
-
getValueContentFromDataSource(valueOptions: ValueContentGetterOptions, data: MdtChartsDataSource): CardValueContent;
|
|
8
|
-
getValueContentFromRow(valueOptions: MdtChartsCardValue, dataRow: MdtChartsDataRow): string;
|
|
9
|
-
}
|
|
10
|
-
export declare const CardService: CardServiceClass;
|
|
11
|
-
export {};
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ValueFormatter } from "../../valueFormatter";
|
|
2
|
-
export class CardServiceClass {
|
|
3
|
-
getValueContentFromDataSource(valueOptions, data) {
|
|
4
|
-
const dataRow = data[valueOptions.dataSetName][0];
|
|
5
|
-
return this.getValueContentFromRow(valueOptions, dataRow);
|
|
6
|
-
}
|
|
7
|
-
getValueContentFromRow(valueOptions, dataRow) {
|
|
8
|
-
const value = dataRow[valueOptions.name];
|
|
9
|
-
return ValueFormatter.formatField(valueOptions.format, value);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
export const CardService = new CardServiceClass();
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { MdtChartsDataSource } from "../../config/config";
|
|
2
|
-
import { CardsOptionsModel, Model } from "../../model/model";
|
|
3
|
-
import { Block } from "../block/block";
|
|
4
|
-
import { ChartContentManager } from "../contentManager/contentManagerFactory";
|
|
5
|
-
import { Engine } from "../engine";
|
|
6
|
-
export declare class CardsManager implements ChartContentManager {
|
|
7
|
-
private chart;
|
|
8
|
-
render(engine: Engine, model: Model<CardsOptionsModel>): void;
|
|
9
|
-
updateData(block: Block, model: Model<CardsOptionsModel>, newData: MdtChartsDataSource): void;
|
|
10
|
-
updateColors(block: Block, model: Model<CardsOptionsModel>): void;
|
|
11
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { CardChart } from "./card/card";
|
|
2
|
-
export class CardsManager {
|
|
3
|
-
render(engine, model) {
|
|
4
|
-
engine.block.html.render();
|
|
5
|
-
this.chart = new CardChart();
|
|
6
|
-
this.chart.render(engine.block, model.options, engine.data, { cardSize: model.blockCanvas.size });
|
|
7
|
-
}
|
|
8
|
-
updateData(block, model, newData) {
|
|
9
|
-
this.chart.updateData(model.options, newData);
|
|
10
|
-
}
|
|
11
|
-
updateColors(block, model) {
|
|
12
|
-
//TODO: implement
|
|
13
|
-
}
|
|
14
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { MdtChartsDataRow } from '../../config/config';
|
|
2
|
-
import { BarChartSettings, BlockMargin, IntervalChartModel, OptionsModelData, Orient } from "../../model/model";
|
|
3
|
-
import { Block } from "../block/block";
|
|
4
|
-
import { Scales } from "../features/scale/scale";
|
|
5
|
-
export declare class Gantt {
|
|
6
|
-
private static readonly ganttItemClass;
|
|
7
|
-
static render(block: Block, data: MdtChartsDataRow[], dataOptions: OptionsModelData, scales: Scales, margin: BlockMargin, keyAxisOrient: Orient, chart: IntervalChartModel, barSettings: BarChartSettings): void;
|
|
8
|
-
private static fillItemsAttrs;
|
|
9
|
-
private static getItemsAttrsByKeyOrient;
|
|
10
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { Scale } from "../features/scale/scale";
|
|
2
|
-
import { DomHelper } from '../helpers/domHelper';
|
|
3
|
-
export class Gantt {
|
|
4
|
-
static render(block, data, dataOptions, scales, margin, keyAxisOrient, chart, barSettings) {
|
|
5
|
-
const ganttItems = block.svg.getChartBlock()
|
|
6
|
-
.selectAll(`.${this.ganttItemClass}`)
|
|
7
|
-
.data(data)
|
|
8
|
-
.enter()
|
|
9
|
-
.append('rect')
|
|
10
|
-
.attr('class', this.ganttItemClass)
|
|
11
|
-
.style('clip-path', `url(#${block.svg.getClipPathId()})`);
|
|
12
|
-
const itemsAttrs = this.getItemsAttrsByKeyOrient(keyAxisOrient, scales, margin, dataOptions.keyField.name, chart.data.valueField1.name, chart.data.valueField2.name, barSettings);
|
|
13
|
-
this.fillItemsAttrs(ganttItems, itemsAttrs);
|
|
14
|
-
DomHelper.setCssClasses(ganttItems, chart.cssClasses);
|
|
15
|
-
DomHelper.setChartStyle(ganttItems, chart.style, 0, 'fill');
|
|
16
|
-
}
|
|
17
|
-
static fillItemsAttrs(ganttItems, attrs) {
|
|
18
|
-
ganttItems
|
|
19
|
-
.attr('x', d => attrs.x(d))
|
|
20
|
-
.attr('y', d => attrs.y(d))
|
|
21
|
-
.attr('width', d => attrs.width(d))
|
|
22
|
-
.attr('height', d => attrs.height(d));
|
|
23
|
-
}
|
|
24
|
-
static getItemsAttrsByKeyOrient(axisOrient, scales, margin, keyField, valueField1, valueField2, barSettings) {
|
|
25
|
-
const attrs = {
|
|
26
|
-
x: null,
|
|
27
|
-
y: null,
|
|
28
|
-
width: null,
|
|
29
|
-
height: null
|
|
30
|
-
};
|
|
31
|
-
const itemSize = Scale.getScaleBandWidth(scales.key) > barSettings.maxBarWidth
|
|
32
|
-
? barSettings.maxBarWidth
|
|
33
|
-
: Scale.getScaleBandWidth(scales.key);
|
|
34
|
-
const sizeDiff = (Scale.getScaleBandWidth(scales.key) - itemSize) / 2;
|
|
35
|
-
if (axisOrient === 'top' || axisOrient === 'bottom') {
|
|
36
|
-
attrs.x = d => scales.key(d[keyField]) + margin.left + sizeDiff;
|
|
37
|
-
attrs.width = d => itemSize;
|
|
38
|
-
}
|
|
39
|
-
if (axisOrient === 'left' || axisOrient === 'right') {
|
|
40
|
-
attrs.y = d => scales.key(d[keyField]) + margin.top + sizeDiff;
|
|
41
|
-
attrs.height = d => itemSize;
|
|
42
|
-
}
|
|
43
|
-
if (axisOrient === 'top') {
|
|
44
|
-
attrs.y = d => scales.value(d[valueField1]) + margin.top;
|
|
45
|
-
attrs.height = d => scales.value(d[valueField2]) - scales.value(d[valueField1]);
|
|
46
|
-
}
|
|
47
|
-
else if (axisOrient === 'bottom') {
|
|
48
|
-
attrs.y = d => scales.value(d[valueField2]) + margin.top;
|
|
49
|
-
attrs.height = d => scales.value(d[valueField1]) - scales.value(d[valueField2]);
|
|
50
|
-
}
|
|
51
|
-
else if (axisOrient === 'left') {
|
|
52
|
-
attrs.x = d => scales.value(d[valueField1]) + margin.left;
|
|
53
|
-
attrs.width = d => scales.value(d[valueField2]) - scales.value(d[valueField1]);
|
|
54
|
-
}
|
|
55
|
-
else if (axisOrient === 'right') {
|
|
56
|
-
attrs.x = d => scales.value(d[valueField2]) + margin.left;
|
|
57
|
-
attrs.width = d => scales.value(d[valueField1]) - scales.value(d[valueField2]);
|
|
58
|
-
}
|
|
59
|
-
return attrs;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
Gantt.ganttItemClass = 'gantt-item';
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { MdtChartsDataSource } from "../../config/config";
|
|
2
|
-
import { Model } from "../../model/model";
|
|
3
|
-
import { Block } from "../block/block";
|
|
4
|
-
export declare class IntervalManager {
|
|
5
|
-
static render(block: Block, model: Model, data: MdtChartsDataSource): void;
|
|
6
|
-
private static renderCharts;
|
|
7
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { Axis } from "../features/axis/axis";
|
|
2
|
-
import { GridLine } from "../features/gridLine/gridLine";
|
|
3
|
-
import { Scale } from "../features/scale/scale";
|
|
4
|
-
import { Title } from "../features/title/title";
|
|
5
|
-
import { Gantt } from "./gantt";
|
|
6
|
-
export class IntervalManager {
|
|
7
|
-
static render(block, model, data) {
|
|
8
|
-
const options = model.options;
|
|
9
|
-
block.svg.render(model.blockCanvas.size);
|
|
10
|
-
const scales = Scale.getScales(options.scale.key, options.scale.value, options.chartSettings.bar);
|
|
11
|
-
Axis.render(block, scales, options.scale, options.axis, model.blockCanvas.size);
|
|
12
|
-
GridLine.render(block, options.additionalElements.gridLine.flag, options.axis, model.blockCanvas.size, model.chartBlock.margin, scales);
|
|
13
|
-
this.renderCharts(block, options.charts, scales, data, options.data, model.chartBlock.margin, options.axis.key.orient, options.chartSettings);
|
|
14
|
-
Title.render(block, options.title, model.otherComponents.titleBlock, model.blockCanvas.size);
|
|
15
|
-
}
|
|
16
|
-
static renderCharts(block, charts, scales, data, dataOptions, margin, keyAxisOrient, chartSettings) {
|
|
17
|
-
block.svg.renderChartsBlock();
|
|
18
|
-
charts.forEach(chart => {
|
|
19
|
-
if (chart.type === 'gantt')
|
|
20
|
-
Gantt.render(block, data[dataOptions.dataSource], dataOptions, scales, margin, keyAxisOrient, chart, chartSettings.bar);
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { MdtChartsCardsChange, MdtChartsDataRow } from "../../../config/config";
|
|
2
|
-
import { CardsChangeModel } from "../../model";
|
|
3
|
-
export declare class CardsChangeService {
|
|
4
|
-
getChangeModel(dataRow: MdtChartsDataRow, changeOptions: MdtChartsCardsChange): CardsChangeModel;
|
|
5
|
-
private getValuePrefix;
|
|
6
|
-
private getColor;
|
|
7
|
-
private getIcon;
|
|
8
|
-
private getOptionsByValue;
|
|
9
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { ColorRangeManager } from "../../chartStyleModel/colorRange";
|
|
2
|
-
import { DEFAULT_CARD_CHANGE_RANGE } from "./cardsModelService";
|
|
3
|
-
export class CardsChangeService {
|
|
4
|
-
getChangeModel(dataRow, changeOptions) {
|
|
5
|
-
var _a;
|
|
6
|
-
if (!changeOptions || !((_a = changeOptions.value) === null || _a === void 0 ? void 0 : _a.name))
|
|
7
|
-
return void 0;
|
|
8
|
-
const value = dataRow[changeOptions.value.name];
|
|
9
|
-
return {
|
|
10
|
-
description: changeOptions.description,
|
|
11
|
-
value: Object.assign({}, changeOptions.value),
|
|
12
|
-
valuePrefix: this.getValuePrefix(value),
|
|
13
|
-
color: this.getColor(value, changeOptions.color),
|
|
14
|
-
icon: this.getIcon(value, changeOptions.icon)
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
getValuePrefix(value) {
|
|
18
|
-
const prefixes = {
|
|
19
|
-
aboveZero: "+",
|
|
20
|
-
belowZero: "",
|
|
21
|
-
equalZero: ""
|
|
22
|
-
};
|
|
23
|
-
return this.getOptionsByValue(value, prefixes);
|
|
24
|
-
}
|
|
25
|
-
getColor(changeValue, colorOptions) {
|
|
26
|
-
const range = (colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.length) ? colorOptions : DEFAULT_CARD_CHANGE_RANGE;
|
|
27
|
-
const rangeManager = new ColorRangeManager(range);
|
|
28
|
-
return rangeManager.getColorByValue(changeValue);
|
|
29
|
-
}
|
|
30
|
-
getIcon(changeValue, iconOptions) {
|
|
31
|
-
if (!iconOptions)
|
|
32
|
-
return void 0;
|
|
33
|
-
return this.getOptionsByValue(changeValue, iconOptions);
|
|
34
|
-
}
|
|
35
|
-
getOptionsByValue(value, optionsByValues) {
|
|
36
|
-
if (value < 0)
|
|
37
|
-
return optionsByValues.belowZero;
|
|
38
|
-
if (value > 0)
|
|
39
|
-
return optionsByValues.aboveZero;
|
|
40
|
-
return optionsByValues.equalZero;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { MdtChartsCardsOptions } from "../../../config/config";
|
|
2
|
-
import { CardsOptionsModel } from "../../model";
|
|
3
|
-
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
4
|
-
export declare class CardsModel {
|
|
5
|
-
private service;
|
|
6
|
-
getOptions(options: MdtChartsCardsOptions, modelInstance: ModelInstance): CardsOptionsModel;
|
|
7
|
-
}
|
|
8
|
-
export declare const CardsModelInstance: CardsModel;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { CardsModelService } from "./cardsModelService";
|
|
2
|
-
export class CardsModel {
|
|
3
|
-
constructor() {
|
|
4
|
-
this.service = new CardsModelService();
|
|
5
|
-
}
|
|
6
|
-
getOptions(options, modelInstance) {
|
|
7
|
-
return {
|
|
8
|
-
type: "card",
|
|
9
|
-
title: options.title,
|
|
10
|
-
description: options.description,
|
|
11
|
-
data: options.data,
|
|
12
|
-
tooltip: options.tooltip,
|
|
13
|
-
icon: options.icon,
|
|
14
|
-
color: this.service.getCardColor(options, modelInstance),
|
|
15
|
-
value: Object.assign({}, options.value),
|
|
16
|
-
change: this.service.getCardsChangeModel(options, modelInstance)
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
export const CardsModelInstance = new CardsModel();
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { MdtChartsCardOptionByValue, MdtChartsCardsOptions, MdtChartsColorName, MdtChartsColorRangeItem } from "../../../config/config";
|
|
2
|
-
import { ModelInstance } from "../../modelInstance/modelInstance";
|
|
3
|
-
export declare const DEFAULT_CARD_COLOR: MdtChartsColorName;
|
|
4
|
-
export declare const DEFAULT_CARD_CHANGE_COLOR: MdtChartsCardOptionByValue<MdtChartsColorName>;
|
|
5
|
-
export declare const DEFAULT_CARD_CHANGE_RANGE: MdtChartsColorRangeItem[];
|
|
6
|
-
export declare class CardsModelService {
|
|
7
|
-
private changeService;
|
|
8
|
-
getCardColor(options: MdtChartsCardsOptions, modelInstance: ModelInstance): MdtChartsColorName;
|
|
9
|
-
getCardsChangeModel(options: MdtChartsCardsOptions, modelInstance: ModelInstance): import("../../model").CardsChangeModel;
|
|
10
|
-
}
|
|
11
|
-
export declare function getCardColor(value: number | string, colorRange: MdtChartsColorRangeItem[]): string;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { ColorRangeManager } from "../../chartStyleModel/colorRange";
|
|
2
|
-
import { CardsChangeService } from "./cardsChangeService";
|
|
3
|
-
export const DEFAULT_CARD_COLOR = "#000";
|
|
4
|
-
export const DEFAULT_CARD_CHANGE_COLOR = {
|
|
5
|
-
aboveZero: "#20b078",
|
|
6
|
-
equalZero: DEFAULT_CARD_COLOR,
|
|
7
|
-
belowZero: "#ff3131"
|
|
8
|
-
};
|
|
9
|
-
export const DEFAULT_CARD_CHANGE_RANGE = [
|
|
10
|
-
{
|
|
11
|
-
color: DEFAULT_CARD_CHANGE_COLOR.belowZero
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
color: DEFAULT_CARD_CHANGE_COLOR.equalZero,
|
|
15
|
-
value: 0
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
color: DEFAULT_CARD_CHANGE_COLOR.aboveZero,
|
|
19
|
-
value: 0
|
|
20
|
-
}
|
|
21
|
-
];
|
|
22
|
-
export class CardsModelService {
|
|
23
|
-
constructor() {
|
|
24
|
-
this.changeService = new CardsChangeService();
|
|
25
|
-
}
|
|
26
|
-
getCardColor(options, modelInstance) {
|
|
27
|
-
const data = modelInstance.dataModel.repository.getFirstRow();
|
|
28
|
-
const value = data[options.value.name];
|
|
29
|
-
return getCardColor(value, options.color);
|
|
30
|
-
}
|
|
31
|
-
getCardsChangeModel(options, modelInstance) {
|
|
32
|
-
const data = modelInstance.dataModel.repository.getFirstRow();
|
|
33
|
-
return this.changeService.getChangeModel(data, options.change);
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
export function getCardColor(value, colorRange) {
|
|
37
|
-
if (typeof value === "string" || !(colorRange === null || colorRange === void 0 ? void 0 : colorRange.length))
|
|
38
|
-
return DEFAULT_CARD_COLOR;
|
|
39
|
-
const rangeManager = new ColorRangeManager(colorRange);
|
|
40
|
-
return rangeManager.getColorByValue(value);
|
|
41
|
-
}
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { MdtChartsIntervalOptions } from "../../config/config";
|
|
2
|
-
import { DesignerConfig } from "../../designer/designerConfig";
|
|
3
|
-
import { AdditionalElementsOptions, IntervalOptionsModel } from "../model";
|
|
4
|
-
import { ModelInstance } from "../modelInstance/modelInstance";
|
|
5
|
-
export declare class IntervalModel {
|
|
6
|
-
static getOptions(options: MdtChartsIntervalOptions, designerConfig: DesignerConfig, modelInstance: ModelInstance): IntervalOptionsModel;
|
|
7
|
-
static getAdditionalElements(options: MdtChartsIntervalOptions): AdditionalElementsOptions;
|
|
8
|
-
private static getChartsModel;
|
|
9
|
-
}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import { AxisModel } from "../featuresModel/axisModel";
|
|
2
|
-
import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
|
|
3
|
-
import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
|
|
4
|
-
import { AxisType } from "../modelBuilder";
|
|
5
|
-
import { TwoDimensionalModel } from "./twoDimensionalModel";
|
|
6
|
-
export class IntervalModel {
|
|
7
|
-
static getOptions(options, designerConfig, modelInstance) {
|
|
8
|
-
const canvasModel = modelInstance.canvasModel;
|
|
9
|
-
const dataModelRep = modelInstance.dataModel.repository;
|
|
10
|
-
return {
|
|
11
|
-
legend: canvasModel.legendCanvas.getModel(),
|
|
12
|
-
title: options.title,
|
|
13
|
-
selectable: !!options.selectable,
|
|
14
|
-
orient: options.orientation,
|
|
15
|
-
scale: {
|
|
16
|
-
key: {
|
|
17
|
-
domain: modelInstance.dataModel.getAllowableKeys(),
|
|
18
|
-
range: {
|
|
19
|
-
start: 0,
|
|
20
|
-
end: 0
|
|
21
|
-
},
|
|
22
|
-
type: 'band',
|
|
23
|
-
elementsAmount: 1
|
|
24
|
-
},
|
|
25
|
-
value: {
|
|
26
|
-
domain: [],
|
|
27
|
-
range: {
|
|
28
|
-
start: 0,
|
|
29
|
-
end: 0
|
|
30
|
-
},
|
|
31
|
-
type: 'datetime',
|
|
32
|
-
formatter: null
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
axis: {
|
|
36
|
-
key: {
|
|
37
|
-
type: 'key',
|
|
38
|
-
orient: AxisModel.getAxisOrient(AxisType.Key, options.orientation, options.axis.key.position),
|
|
39
|
-
translate: {
|
|
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)
|
|
42
|
-
},
|
|
43
|
-
cssClass: 'key-axis',
|
|
44
|
-
ticks: options.axis.key.ticks,
|
|
45
|
-
labels: {
|
|
46
|
-
maxSize: AxisModel.getLabelSizeLegacy(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
|
-
visible: true,
|
|
49
|
-
defaultTooltip: designerConfig.elementsOptions.tooltip.position === 'fixed'
|
|
50
|
-
},
|
|
51
|
-
visibility: options.axis.key.visibility
|
|
52
|
-
},
|
|
53
|
-
value: {
|
|
54
|
-
type: 'value',
|
|
55
|
-
orient: AxisModel.getAxisOrient(AxisType.Value, options.orientation, options.axis.value.position),
|
|
56
|
-
translate: {
|
|
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)
|
|
59
|
-
},
|
|
60
|
-
cssClass: 'value-axis',
|
|
61
|
-
ticks: options.axis.value.ticks,
|
|
62
|
-
labels: {
|
|
63
|
-
maxSize: designerConfig.canvas.axisLabel.maxSize.main,
|
|
64
|
-
position: 'straight',
|
|
65
|
-
visible: true,
|
|
66
|
-
defaultTooltip: true
|
|
67
|
-
},
|
|
68
|
-
visibility: options.axis.value.visibility
|
|
69
|
-
}
|
|
70
|
-
},
|
|
71
|
-
data: Object.assign({}, options.data),
|
|
72
|
-
type: options.type,
|
|
73
|
-
charts: this.getChartsModel(options.chart, designerConfig.chartStyle),
|
|
74
|
-
additionalElements: this.getAdditionalElements(options),
|
|
75
|
-
tooltip: options.tooltip,
|
|
76
|
-
chartSettings: TwoDimensionalModel.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation)
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
static getAdditionalElements(options) {
|
|
80
|
-
return {
|
|
81
|
-
gridLine: options.additionalElements.gridLine
|
|
82
|
-
};
|
|
83
|
-
}
|
|
84
|
-
static getChartsModel(chart, chartStyleConfig) {
|
|
85
|
-
const chartsModel = [];
|
|
86
|
-
chartsModel.push({
|
|
87
|
-
type: chart.type,
|
|
88
|
-
data: Object.assign({}, chart.data),
|
|
89
|
-
tooltip: chart.tooltip,
|
|
90
|
-
cssClasses: ChartStyleModelService.getCssClasses(0),
|
|
91
|
-
style: ChartStyleModelService.getChartStyle(1, chartStyleConfig)
|
|
92
|
-
});
|
|
93
|
-
return chartsModel;
|
|
94
|
-
}
|
|
95
|
-
}
|
|
File without changes
|
|
File without changes
|