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.
Files changed (65) hide show
  1. package/lib/config/config.d.ts +13 -5
  2. package/lib/designer/designerConfig.d.ts +8 -2
  3. package/lib/engine/features/aggregator/aggregator.d.ts +4 -3
  4. package/lib/engine/features/aggregator/aggregator.js +14 -11
  5. package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.d.ts +28 -0
  6. package/lib/engine/features/recordOverflowAlert/recordOverflowAlertCore.js +50 -0
  7. package/lib/engine/features/title/title.js +2 -0
  8. package/lib/engine/features/tolltip/tooltip.js +1 -1
  9. package/lib/engine/filterManager/filterEventManager.d.ts +3 -3
  10. package/lib/engine/filterManager/filterEventManager.js +4 -4
  11. package/lib/engine/intervalNotation/intervalManager.js +2 -5
  12. package/lib/engine/polarNotation/donut/DonutHelper.d.ts +2 -0
  13. package/lib/engine/polarNotation/donut/DonutHelper.js +20 -3
  14. package/lib/engine/polarNotation/donut/donut.js +1 -1
  15. package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.d.ts +16 -0
  16. package/lib/engine/polarNotation/extenders/polarRecordOverflowAlert.js +48 -0
  17. package/lib/engine/polarNotation/polarManager.js +16 -12
  18. package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.d.ts +15 -0
  19. package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +32 -0
  20. package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js +13 -7
  21. package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.d.ts +19 -0
  22. package/lib/model/chartStyleModel/TwoDimensionalChartStyleModel.js +61 -0
  23. package/lib/model/chartStyleModel/chartStyleModel.d.ts +9 -0
  24. package/lib/model/chartStyleModel/chartStyleModel.js +27 -0
  25. package/lib/model/dataManagerModel/dataManagerModel.d.ts +26 -0
  26. package/lib/model/dataManagerModel/dataManagerModel.js +132 -0
  27. package/lib/model/dataManagerModel/dataManagerModelService.d.ts +5 -0
  28. package/lib/model/dataManagerModel/dataManagerModelService.js +28 -0
  29. package/lib/model/dataManagerModel.d.ts +3 -2
  30. package/lib/model/dataManagerModel.js +12 -10
  31. package/lib/model/featuresModel/axisModel.d.ts +9 -8
  32. package/lib/model/featuresModel/axisModel.js +21 -21
  33. package/lib/model/featuresModel/legendModel/legendModel.d.ts +4 -5
  34. package/lib/model/featuresModel/legendModel/legendModel.js +6 -9
  35. package/lib/model/featuresModel/otherComponents.d.ts +9 -2
  36. package/lib/model/featuresModel/otherComponents.js +6 -4
  37. package/lib/model/featuresModel/scaleModel.d.ts +7 -6
  38. package/lib/model/featuresModel/scaleModel.js +9 -9
  39. package/lib/model/featuresModel/titleModel.d.ts +1 -1
  40. package/lib/model/featuresModel/titleModel.js +7 -5
  41. package/lib/model/marginModel.d.ts +5 -5
  42. package/lib/model/marginModel.js +41 -38
  43. package/lib/model/model.d.ts +24 -18
  44. package/lib/model/modelBuilder.js +26 -37
  45. package/lib/model/modelInstance/canvasModel/canvasModel.d.ts +24 -0
  46. package/lib/model/modelInstance/canvasModel/canvasModel.js +44 -0
  47. package/lib/model/modelInstance/canvasModel/legendCanvasModel.d.ts +7 -0
  48. package/lib/model/modelInstance/canvasModel/legendCanvasModel.js +13 -0
  49. package/lib/model/modelInstance/canvasModel/titleCanvas.d.ts +9 -0
  50. package/lib/model/modelInstance/canvasModel/titleCanvas.js +11 -0
  51. package/lib/model/modelInstance/dataModel.d.ts +11 -0
  52. package/lib/model/modelInstance/dataModel.js +23 -0
  53. package/lib/model/modelInstance/modelInstance.d.ts +10 -0
  54. package/lib/model/modelInstance/modelInstance.js +17 -0
  55. package/lib/model/notations/intervalModel.d.ts +2 -1
  56. package/lib/model/notations/intervalModel.js +17 -15
  57. package/lib/model/notations/polarModel.d.ts +9 -3
  58. package/lib/model/notations/polarModel.js +29 -8
  59. package/lib/model/notations/twoDimensionalModel.d.ts +7 -5
  60. package/lib/model/notations/twoDimensionalModel.js +19 -12
  61. package/lib/style/charts-main.css +2 -0
  62. package/lib/style/charts-main.less +2 -0
  63. package/package.json +3 -2
  64. package/lib/model/chartStyleModel.d.ts +0 -16
  65. package/lib/model/chartStyleModel.js +0 -67
@@ -0,0 +1,7 @@
1
+ import { ILegendModel, LegendPosition } from "../../model";
2
+ export declare class LegendCanvasModelInstance {
3
+ private position;
4
+ getModel(): ILegendModel;
5
+ getPosition(): LegendPosition;
6
+ setPosition(position: LegendPosition): void;
7
+ }
@@ -0,0 +1,13 @@
1
+ export class LegendCanvasModelInstance {
2
+ getModel() {
3
+ return {
4
+ position: this.position
5
+ };
6
+ }
7
+ getPosition() {
8
+ return this.position;
9
+ }
10
+ setPosition(position) {
11
+ this.position = position;
12
+ }
13
+ }
@@ -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
+ export class TitleCanvasModel {
2
+ init(model) {
3
+ this.model = model;
4
+ }
5
+ getModel() {
6
+ return this.model;
7
+ }
8
+ getAllNeededSpace() {
9
+ return this.model.pad + this.model.size + this.model.margin.top;
10
+ }
11
+ }
@@ -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 { ChartStyleModel } from "../chartStyleModel";
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: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
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, margin, config.canvas.size)
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, margin, config.canvas.size)
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, margin, config.canvas.size.width),
40
- translateY: AxisModel.getAxisTranslateY(AxisType.Key, options.orientation, options.axis.key.position, margin, config.canvas.size.height)
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(margin, config.canvas.size, DataManagerModel.getDataValuesByKeyField(data, options.data.dataSource, options.data.keyField.name).length),
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, margin, config.canvas.size.width),
57
- translateY: AxisModel.getAxisTranslateY(AxisType.Value, options.orientation, options.axis.value.position, margin, config.canvas.size.height)
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: ChartStyleModel.getCssClasses(0),
89
- style: ChartStyleModel.getChartStyle(1, chartStyleConfig)
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 { MdtChartsConfig, MdtChartsDataSource } from "../../config/config";
1
+ import { MdtChartsDataSource, MdtChartsPolarOptions } from "../../config/config";
2
2
  import { DesignerConfig } from "../../designer/designerConfig";
3
- import { BlockMargin, PolarOptionsModel } from "../model";
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(config: MdtChartsConfig, data: MdtChartsDataSource, margin: BlockMargin, designerConfig: DesignerConfig): PolarOptionsModel;
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 { ChartStyleModel } from "../chartStyleModel";
2
- import { LegendModel } from "../featuresModel/legendModel/legendModel";
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(config, data, margin, designerConfig) {
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: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
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: ChartStyleModel.getCssClasses(0),
23
- style: ChartStyleModel.getChartStyle(dataLength, chartStyleConfig)
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, MdtChartsConfig, MdtChartsDataSource, TwoDimensionalChart } from "../../config/config";
2
- import { DesignerConfig } from "../../designer/designerConfig";
3
- import { BlockMargin, DataScope, TwoDimensionalOptionsModel } from "../model";
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(config: MdtChartsConfig, designerConfig: DesignerConfig, margin: BlockMargin, dataScope: DataScope, data: MdtChartsDataSource): TwoDimensionalOptionsModel;
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
- private static getChartsValueFieldsAmount;
20
+ static getChartsValueFieldsAmount(charts: TwoDimensionalChart[]): number[];
19
21
  }
@@ -1,28 +1,29 @@
1
- import { ChartStyleModel } from "../chartStyleModel";
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(config, designerConfig, margin, dataScope, data) {
7
- const options = config.options;
6
+ static getOptions(options, designerConfig, dataScope, data, modelInstance) {
7
+ const canvasModel = modelInstance.canvasModel;
8
8
  return {
9
- legend: LegendModel.getLegendModel(config.options.type, config.options.legend.show, config.canvas.size, margin),
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, margin, config.canvas.size, options.charts, this.getChartsByType(options.charts, 'bar')),
15
- value: ScaleModel.getScaleLinear(options, data, margin, config.canvas.size)
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, margin, config.canvas.size, designerConfig.elementsOptions.tooltip),
19
- value: AxisModel.getValueAxis(options.orientation, options.axis.value, designerConfig.canvas.axisLabel, margin, config.canvas.size)
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: ChartStyleModel.getCssClasses(index),
53
- style: ChartStyleModel.get2DChartStyle(charts.length, chart.type, this.getChartsValueFieldsAmount(charts), index, chart.isSegmented, chartStyleConfig),
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
@@ -163,6 +163,7 @@
163
163
  }
164
164
  .tooltip-field-value {
165
165
  margin-left: 0.5rem;
166
+ white-space: nowrap;
166
167
  }
167
168
 
168
169
 
@@ -187,6 +188,7 @@
187
188
  }
188
189
  .aggregator-name {
189
190
  margin-top: 10px;
191
+ pointer-events: auto;
190
192
  }
191
193
 
192
194
  /* Grid */
@@ -163,6 +163,7 @@
163
163
  }
164
164
  .tooltip-field-value {
165
165
  margin-left: 0.5rem;
166
+ white-space: nowrap;
166
167
  }
167
168
 
168
169
 
@@ -187,6 +188,7 @@
187
188
  }
188
189
  .aggregator-name {
189
190
  margin-top: 10px;
191
+ pointer-events: auto;
190
192
  }
191
193
 
192
194
  /* Grid */
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "mdt-charts",
3
- "version": "1.10.2",
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"];