mdt-charts 1.15.6 → 1.16.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 (47) hide show
  1. package/lib/config/config.d.ts +8 -25
  2. package/lib/engine/contentManager/contentManagerFactory.js +1 -3
  3. package/lib/engine/engine.js +0 -2
  4. package/lib/engine/features/axis/axis.js +4 -2
  5. package/lib/engine/features/axis/axisHelper.d.ts +1 -1
  6. package/lib/engine/features/axis/axisHelper.js +1 -1
  7. package/lib/engine/twoDimensionalNotation/extenders/twoDimRecordOverflowAlert.js +2 -2
  8. package/lib/model/dataManagerModel/dataManagerModel.js +1 -6
  9. package/lib/model/featuresModel/axisModel.js +7 -3
  10. package/lib/model/featuresModel/axisModelService.d.ts +9 -1
  11. package/lib/model/featuresModel/axisModelService.js +21 -0
  12. package/lib/model/helpers/modelHelper.js +6 -3
  13. package/lib/model/margin/twoDim/twoDimMarginModel.js +1 -1
  14. package/lib/model/model.d.ts +3 -19
  15. package/lib/model/modelBuilder.js +0 -4
  16. package/lib/model/modelInstance/dataModel/dataModel.js +3 -0
  17. package/lib/model/notations/twoDimensionalModel.js +1 -1
  18. package/lib/style/charts-main.css +0 -83
  19. package/lib/style/charts-main.less +0 -83
  20. package/package.json +16 -13
  21. package/tsconfig.production.json +2 -1
  22. package/lib/engine/cardsNotation/card/card.d.ts +0 -31
  23. package/lib/engine/cardsNotation/card/card.js +0 -104
  24. package/lib/engine/cardsNotation/card/cardChange.d.ts +0 -21
  25. package/lib/engine/cardsNotation/card/cardChange.js +0 -76
  26. package/lib/engine/cardsNotation/card/cardElementsStyler.d.ts +0 -6
  27. package/lib/engine/cardsNotation/card/cardElementsStyler.js +0 -11
  28. package/lib/engine/cardsNotation/card/cardService.d.ts +0 -11
  29. package/lib/engine/cardsNotation/card/cardService.js +0 -12
  30. package/lib/engine/cardsNotation/cardsManager.d.ts +0 -11
  31. package/lib/engine/cardsNotation/cardsManager.js +0 -14
  32. package/lib/engine/intervalNotation/gantt.d.ts +0 -10
  33. package/lib/engine/intervalNotation/gantt.js +0 -62
  34. package/lib/engine/intervalNotation/intervalManager.d.ts +0 -7
  35. package/lib/engine/intervalNotation/intervalManager.js +0 -23
  36. package/lib/model/dataManagerModel/notations/cardsDataManagerModel.d.ts +0 -4
  37. package/lib/model/dataManagerModel/notations/cardsDataManagerModel.js +0 -8
  38. package/lib/model/notations/cards/cardsChangeService.d.ts +0 -9
  39. package/lib/model/notations/cards/cardsChangeService.js +0 -42
  40. package/lib/model/notations/cards/cardsModel.d.ts +0 -8
  41. package/lib/model/notations/cards/cardsModel.js +0 -20
  42. package/lib/model/notations/cards/cardsModelService.d.ts +0 -11
  43. package/lib/model/notations/cards/cardsModelService.js +0 -41
  44. package/lib/model/notations/intervalModel.d.ts +0 -9
  45. package/lib/model/notations/intervalModel.js +0 -95
  46. /package/lib/model/chartStyleModel/{TwoDimensionalChartStyleModel.d.ts → twoDimensionalChartStyleModel.d.ts} +0 -0
  47. /package/lib/model/chartStyleModel/{TwoDimensionalChartStyleModel.js → twoDimensionalChartStyleModel.js} +0 -0
@@ -2,7 +2,7 @@ declare type DataType = string;
2
2
  export declare type MdtChartsIconElement = () => HTMLElement;
3
3
  export declare type AxisPosition = 'start' | 'end';
4
4
  export declare type ChartOrientation = 'vertical' | 'horizontal';
5
- export declare type ChartNotation = '2d' | 'polar' | 'interval' | 'card';
5
+ export declare type ChartNotation = '2d' | 'polar' | 'interval';
6
6
  export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
7
7
  export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
8
8
  export declare type PolarChartType = 'donut';
@@ -21,7 +21,7 @@ export interface MdtChartsDataSource {
21
21
  [source: string]: MdtChartsDataRow[];
22
22
  }
23
23
  export declare type AxisLabelPosition = "straight" | "rotated";
24
- export declare type MdtChartsConfigOptions = MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions | MdtChartsCardsOptions;
24
+ export declare type MdtChartsConfigOptions = MdtChartsPolarOptions | MdtChartsTwoDimensionalOptions | MdtChartsIntervalOptions;
25
25
  export interface MdtChartsConfig {
26
26
  canvas: ChartBlockCanvas;
27
27
  options: MdtChartsConfigOptions;
@@ -66,15 +66,6 @@ export interface MdtChartsIntervalOptions extends GraphicNotationOptions {
66
66
  additionalElements: AdditionalElements;
67
67
  orientation: ChartOrientation;
68
68
  }
69
- export interface MdtChartsCardsOptions extends BasicOptions {
70
- type: 'card';
71
- title: string;
72
- description?: string;
73
- icon?: MdtChartsIconElement;
74
- color?: MdtChartsColorRangeItem[];
75
- value: MdtChartsCardValue;
76
- change?: MdtChartsCardsChange;
77
- }
78
69
  export interface Legend {
79
70
  show: boolean;
80
71
  }
@@ -139,6 +130,12 @@ export interface DiscreteAxisOptions extends AxisOptions {
139
130
  }
140
131
  export interface MdtChartsDiscreteAxisLabel {
141
132
  position?: AxisLabelPosition;
133
+ showRule?: MdtChartsShowAxisLabelRule;
134
+ }
135
+ export declare type ShowTickFn = (dataKey: string, index: number) => string | undefined;
136
+ export interface MdtChartsShowAxisLabelRule {
137
+ spaceForOneLabel?: number;
138
+ showTickFn?: ShowTickFn;
142
139
  }
143
140
  export interface IntervalAxis {
144
141
  key: DiscreteAxisOptions;
@@ -146,20 +143,6 @@ export interface IntervalAxis {
146
143
  }
147
144
  interface DateAxisOptions extends AxisOptions {
148
145
  }
149
- export declare type MdtChartsCardValue = MdtChartsField;
150
- export interface MdtChartsCardsChange {
151
- value: MdtChartsCardValue;
152
- color?: MdtChartsColorRangeItem[];
153
- description?: string;
154
- icon?: MdtChartsCardsChangeIcon;
155
- }
156
- export interface MdtChartsCardOptionByValue<T> {
157
- belowZero?: T;
158
- equalZero?: T;
159
- aboveZero?: T;
160
- }
161
- export interface MdtChartsCardsChangeIcon extends MdtChartsCardOptionByValue<MdtChartsIconElement> {
162
- }
163
146
  interface ChartSettings {
164
147
  tooltip: Tooltip;
165
148
  }
@@ -1,12 +1,10 @@
1
- import { CardsManager } from "../cardsNotation/cardsManager";
2
1
  import { PolarManager } from "../polarNotation/polarManager";
3
2
  import { TwoDimensionalManager } from "../twoDimensionalNotation/twoDimensionalManager";
4
3
  export class ContentManagerFactory {
5
4
  constructor() {
6
5
  this.managers = {
7
6
  "2d": TwoDimensionalManager,
8
- "polar": PolarManager,
9
- "card": CardsManager
7
+ "polar": PolarManager
10
8
  };
11
9
  }
12
10
  getManager(type) {
@@ -55,8 +55,6 @@ export class Engine {
55
55
  }
56
56
  setFilterEventManager(options) {
57
57
  var _a, _b, _c;
58
- if ((options === null || options === void 0 ? void 0 : options.type) === "card")
59
- return;
60
58
  let highlightIds = [];
61
59
  if (this.initializeSelected instanceof Array && this.initializeSelected.length > 0)
62
60
  highlightIds = [...this.initializeSelected];
@@ -31,7 +31,9 @@ export class Axis {
31
31
  static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
32
32
  const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
33
33
  if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))
34
- AxisHelper.setLabelsSettings(axisGenerator, scale.range(), scaleOptions);
34
+ AxisHelper.setValueAxisLabelsSettings(axisGenerator, scale.range(), scaleOptions);
35
+ else
36
+ axisGenerator.tickFormat(axisOptions.labels.showTick);
35
37
  const axisElement = block.getSvg()
36
38
  .append('g')
37
39
  .attr('class', `${this.axesClass} ${axisOptions.cssClass} data-label`);
@@ -58,7 +60,7 @@ export class Axis {
58
60
  }
59
61
  static updateValueAxis(block, scaleValue, scaleOptions, axisOptions) {
60
62
  const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
61
- AxisHelper.setLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
63
+ AxisHelper.setValueAxisLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
62
64
  const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
63
65
  AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
64
66
  .then(() => {
@@ -2,7 +2,7 @@ import { AxisScale, Axis as IAxis } from 'd3-axis';
2
2
  import { AxisModelOptions, Orient, ScaleValueModel } from "../../../model/model";
3
3
  export declare class AxisHelper {
4
4
  static getAxisByOrient(orient: Orient, scale: AxisScale<any>): IAxis<any>;
5
- static setLabelsSettings(axisGenerator: IAxis<any>, range: number[], scaleOptions: ScaleValueModel): void;
5
+ static setValueAxisLabelsSettings(axisGenerator: IAxis<any>, range: number[], scaleOptions: ScaleValueModel): void;
6
6
  static getBaseAxisGenerator(axisOptions: AxisModelOptions, scale: AxisScale<any>): IAxis<any>;
7
7
  private static removeTicks;
8
8
  private static setNumTickFormat;
@@ -14,7 +14,7 @@ export class AxisHelper {
14
14
  if (orient === 'right')
15
15
  return axisRight(scale);
16
16
  }
17
- static setLabelsSettings(axisGenerator, range, scaleOptions) {
17
+ static setValueAxisLabelsSettings(axisGenerator, range, scaleOptions) {
18
18
  const axisLength = range[1] - range[0];
19
19
  let ticksAmount;
20
20
  if (axisLength / 10 < MINIMAL_STEP_SIZE) {
@@ -24,8 +24,8 @@ class TwoDimRecordOverflowAlertClass {
24
24
  }
25
25
  getPositionAttrs() {
26
26
  return {
27
- right: '17px',
28
- top: '1rem'
27
+ right: '0px',
28
+ top: '0px'
29
29
  };
30
30
  }
31
31
  }
@@ -4,11 +4,10 @@ import { ModelHelper } from "../helpers/modelHelper";
4
4
  import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel";
5
5
  import { DataManagerModelService } from "./dataManagerModelService";
6
6
  import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
7
- import { CardsDataManagerModel } from "./notations/cardsDataManagerModel";
8
7
  import { styledElementValues } from "../modelBuilder";
9
8
  export class DataManagerModel {
10
9
  static getPreparedData(data, allowableKeys, config) {
11
- const scopedData = config.options.type !== "card" ? this.getScopedData(data, allowableKeys, config.options.data) : data;
10
+ const scopedData = this.getScopedData(data, allowableKeys, config.options.data);
12
11
  this.setDataType(scopedData, config);
13
12
  return scopedData;
14
13
  }
@@ -19,10 +18,6 @@ export class DataManagerModel {
19
18
  else if (config.options.type === 'polar') {
20
19
  this.initDataScopeForPolar(config.options, modelInstance, data, legendBlock, designerConfig.canvas.legendBlock);
21
20
  }
22
- else if (config.options.type === "card") {
23
- const manager = new CardsDataManagerModel();
24
- manager.initDataScope(modelInstance);
25
- }
26
21
  this.initScopedData(data, modelInstance, config);
27
22
  }
28
23
  static initScopedData(data, modelInstance, config) {
@@ -2,12 +2,14 @@ import { ModelHelper } from "../helpers/modelHelper";
2
2
  import { AxisType, CLASSES } from "../modelBuilder";
3
3
  import { DataManagerModel } from "../dataManagerModel/dataManagerModel";
4
4
  import { TwoDimensionalModel } from "../notations/twoDimensionalModel";
5
- import { AxisModelService } from "./axisModelService";
5
+ import { AxisModelService, AxisModelTickCalculator, showAllTicks } from "./axisModelService";
6
6
  export class AxisModel {
7
7
  static getKeyAxis(options, data, labelConfig, canvasModel, tooltipSettings, getZeroCoordinate) {
8
+ var _a;
8
9
  const { charts, orientation, data: dataOptions } = options;
9
10
  const axisConfig = options.axis.key;
10
11
  const translate = this.getKeyAxisTranslateModel(orientation, axisConfig.position, canvasModel, getZeroCoordinate);
12
+ const tickCalculator = new AxisModelTickCalculator(data[dataOptions.dataSource], (_a = options.axis.key.labels) === null || _a === void 0 ? void 0 : _a.showRule);
11
13
  return {
12
14
  type: 'key',
13
15
  orient: AxisModel.getAxisOrient(AxisType.Key, orientation, axisConfig.position),
@@ -18,7 +20,8 @@ export class AxisModel {
18
20
  maxSize: AxisModel.getLabelSizeLegacy(labelConfig.maxSize.main, data[dataOptions.dataSource].map(d => d[dataOptions.keyField.name])).width,
19
21
  position: AxisModel.getKeyAxisLabelPosition(canvasModel, DataManagerModel.getDataValuesByKeyField(data, dataOptions.dataSource, dataOptions.keyField.name).length, axisConfig),
20
22
  visible: !TwoDimensionalModel.getChartsEmbeddedLabelsFlag(charts, orientation),
21
- defaultTooltip: tooltipSettings.position === 'fixed'
23
+ defaultTooltip: tooltipSettings.position === 'fixed',
24
+ showTick: tickCalculator.createFunctionCalculator(this.getAxisLength(orientation, canvasModel))
22
25
  },
23
26
  visibility: axisConfig.visibility
24
27
  };
@@ -37,7 +40,8 @@ export class AxisModel {
37
40
  maxSize: labelConfig.maxSize.main,
38
41
  position: 'straight',
39
42
  visible: true,
40
- defaultTooltip: true
43
+ defaultTooltip: true,
44
+ showTick: showAllTicks
41
45
  },
42
46
  visibility: axisConfig.visibility
43
47
  };
@@ -1,4 +1,12 @@
1
- import { AxisLabelPosition } from "../../config/config";
1
+ import { AxisLabelPosition, MdtChartsDataRow, MdtChartsShowAxisLabelRule, ShowTickFn } from "../../config/config";
2
+ export declare const showAllTicks: ShowTickFn;
2
3
  export declare class AxisModelService {
3
4
  getKeyAxisLabelPosition(chartBlockWidth: number, scopedDataLength: number, positionFromConfig?: AxisLabelPosition): AxisLabelPosition;
4
5
  }
6
+ export declare class AxisModelTickCalculator {
7
+ private readonly dataRows;
8
+ private readonly rule?;
9
+ private readonly defaultTickSpace;
10
+ constructor(dataRows: MdtChartsDataRow[], rule?: MdtChartsShowAxisLabelRule);
11
+ createFunctionCalculator(axisSize: number): ShowTickFn;
12
+ }
@@ -1,3 +1,4 @@
1
+ export const showAllTicks = (d) => d;
1
2
  export class AxisModelService {
2
3
  getKeyAxisLabelPosition(chartBlockWidth, scopedDataLength, positionFromConfig) {
3
4
  if (positionFromConfig === "rotated" || positionFromConfig === "straight") {
@@ -9,3 +10,23 @@ export class AxisModelService {
9
10
  return 'straight';
10
11
  }
11
12
  }
13
+ export class AxisModelTickCalculator {
14
+ constructor(dataRows, rule) {
15
+ this.dataRows = dataRows;
16
+ this.rule = rule;
17
+ this.defaultTickSpace = 20;
18
+ }
19
+ createFunctionCalculator(axisSize) {
20
+ var _a, _b, _c;
21
+ if ((_a = this.rule) === null || _a === void 0 ? void 0 : _a.showTickFn)
22
+ return this.rule.showTickFn;
23
+ const tickSpace = (_c = (_b = this.rule) === null || _b === void 0 ? void 0 : _b.spaceForOneLabel) !== null && _c !== void 0 ? _c : this.defaultTickSpace;
24
+ const allowedKeysAmount = Math.floor(axisSize / tickSpace);
25
+ if (allowedKeysAmount >= this.dataRows.length)
26
+ return showAllTicks;
27
+ let divider = Math.ceil(this.dataRows.length / allowedKeysAmount);
28
+ return (d, i) => {
29
+ return i % divider === 0 ? d : undefined;
30
+ };
31
+ }
32
+ }
@@ -25,12 +25,13 @@ export class ModelHelper {
25
25
  return uniqueValues;
26
26
  }
27
27
  static getStringScore(word) {
28
- // lower case letter width ~ 0.74 from upper case width.
28
+ // lower case letter width ~ 0.8 from upper case width.
29
29
  // Number width == lower case letter width
30
30
  let score = 0;
31
31
  const upperLetterScore = 1;
32
32
  const lowerLetterScore = 0.8;
33
- const digitAndSymbolScore = 0.67;
33
+ const digitScore = 0.75;
34
+ const otherSymbolScore = 0.52;
34
35
  const specialSmallSymbols = [",", ".", " "];
35
36
  for (let i = 0; i < word.length; i++) {
36
37
  if (parseFloat(word[i]).toString() !== word[i] && !specialSmallSymbols.includes(word[i]) && word[i].trim().length > 0) {
@@ -39,8 +40,10 @@ export class ModelHelper {
39
40
  else
40
41
  score += lowerLetterScore;
41
42
  }
43
+ else if (word[i] == parseInt(word[i]).toString())
44
+ score += digitScore;
42
45
  else
43
- score += digitAndSymbolScore;
46
+ score += otherSymbolScore;
44
47
  }
45
48
  return score;
46
49
  }
@@ -44,7 +44,7 @@ export class TwoDimMarginModel {
44
44
  }
45
45
  else {
46
46
  labelsTexts = modelInstance.dataModel.repository.getBiggestValueAndDecremented(this.configReader.getFieldsBySegments())
47
- .map(v => this.configReader.getAxisLabelFormatter()(v));
47
+ .map(v => this.configReader.getAxisLabelFormatter()(v).toString());
48
48
  }
49
49
  return AxisModel.getLabelSize(this.designerConfig.canvas.axisLabel.maxSize.main, labelsTexts);
50
50
  }
@@ -1,4 +1,4 @@
1
- import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, MdtChartsIconElement, MdtChartsCardValue, MdtChartsColorName } from "../config/config";
1
+ import { ChartOrientation, MdtChartsColorField, IntervalChartType, PolarChartType, Size, TooltipOptions, TwoDimensionalChartType, AxisLabelPosition, ShowTickFn } from "../config/config";
2
2
  import { DataType, DonutOptionsCanvas, Formatter, StaticLegendBlockCanvas, TooltipSettings, Transitions } from "../designer/designerConfig";
3
3
  declare type AxisType = "key" | "value";
4
4
  export declare type Orient = "top" | "bottom" | "left" | "right";
@@ -10,7 +10,7 @@ export declare type DataOptions = {
10
10
  [option: string]: any;
11
11
  };
12
12
  export declare type UnitsFromConfig = "%" | "px";
13
- export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel | CardsOptionsModel;
13
+ export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
14
14
  export interface Model<O = OptionsModel> {
15
15
  blockCanvas: BlockCanvas;
16
16
  chartBlock: ChartBlockModel;
@@ -64,16 +64,6 @@ export interface IntervalOptionsModel extends GraphicNotationOptionsModel {
64
64
  orient: ChartOrientation;
65
65
  chartSettings: TwoDimChartElementsSettings;
66
66
  }
67
- export interface CardsOptionsModel extends BasicOptionsModel {
68
- type: "card";
69
- data: BasicOptionsModelData;
70
- title: string;
71
- description?: string;
72
- icon?: MdtChartsIconElement;
73
- value: MdtChartsCardValue;
74
- color: MdtChartsColorName;
75
- change?: CardsChangeModel;
76
- }
77
67
  export interface ILegendModel {
78
68
  position: LegendPosition;
79
69
  }
@@ -132,6 +122,7 @@ export interface AxisLabelModel {
132
122
  position: AxisLabelPosition;
133
123
  visible: boolean;
134
124
  defaultTooltip: boolean;
125
+ showTick: ShowTickFn;
135
126
  }
136
127
  export interface AdditionalElementsOptions {
137
128
  gridLine: GridLineOptions;
@@ -196,13 +187,6 @@ export interface DonutThicknessOptions {
196
187
  value: number;
197
188
  unit: DonutThicknessUnit;
198
189
  }
199
- export interface CardsChangeModel {
200
- value: MdtChartsCardValue;
201
- valuePrefix: string;
202
- description?: string;
203
- color: MdtChartsColorName;
204
- icon?: MdtChartsIconElement;
205
- }
206
190
  interface ChartModel {
207
191
  tooltip: TooltipModel;
208
192
  cssClasses: string[];
@@ -5,7 +5,6 @@ import { DataManagerModel } from './dataManagerModel/dataManagerModel';
5
5
  import { OtherComponentsModel } from './featuresModel/otherComponents';
6
6
  import { ConfigValidator } from './configsValidator/configValidator';
7
7
  import { ModelInstance } from './modelInstance/modelInstance';
8
- import { CardsModelInstance } from './notations/cards/cardsModel';
9
8
  import { TwoDimConfigReader } from './modelInstance/configReader';
10
9
  export var AxisType;
11
10
  (function (AxisType) {
@@ -51,9 +50,6 @@ function getOptions(config, designerConfig, modelInstance) {
51
50
  else if (config.options.type === 'polar') {
52
51
  return PolarModel.getOptions(config.options, designerConfig, modelInstance);
53
52
  }
54
- else if (config.options.type === "card") {
55
- return CardsModelInstance.getOptions(config.options, modelInstance);
56
- }
57
53
  }
58
54
  function getDataSettings(dataScope, designerConfig) {
59
55
  return {
@@ -9,6 +9,9 @@ export class DataModelInstance {
9
9
  if (typeof amount === "number" && amount > 0) {
10
10
  this.maxRecordsAmount = amount;
11
11
  }
12
+ if (typeof amount === "number" && amount === -1) {
13
+ this.maxRecordsAmount = Infinity;
14
+ }
12
15
  }
13
16
  getMaxRecordsAmount() {
14
17
  return this.maxRecordsAmount;
@@ -1,5 +1,5 @@
1
1
  import { ChartStyleModelService } from "../chartStyleModel/chartStyleModel";
2
- import { TwoDimensionalChartStyleModel } from "../chartStyleModel/TwoDimensionalChartStyleModel";
2
+ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensionalChartStyleModel";
3
3
  import { AxisModel } from "../featuresModel/axisModel";
4
4
  import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
5
5
  import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
@@ -274,86 +274,3 @@
274
274
  width: 100%;
275
275
  height: 100%;
276
276
  }
277
-
278
- .mdt-charts-card-wrapper {
279
- width: 100%;
280
- height: 100%;
281
- }
282
-
283
- .mdt-charts-card-wrapper * {
284
- box-sizing: border-box;
285
- }
286
-
287
- .mdt-charts-card-content {
288
- width: 100%;
289
- height: 100%;
290
- display: flex;
291
- flex-direction: column;
292
- justify-content: space-between;
293
- }
294
-
295
- .mdt-charts-card-header {
296
- display: flex;
297
- flex: 1;
298
- align-items: baseline;
299
- }
300
-
301
- .mdt-charts-card-title,
302
- .mdt-charts-card-icon
303
- {
304
- font-size: 1.3em;
305
- }
306
-
307
- .mdt-charts-card-icon {
308
- margin-right: 0.3em;
309
- }
310
-
311
- .mdt-charts-card-title {
312
- margin: 0;
313
- white-space: nowrap;
314
- overflow: hidden;
315
- text-overflow: ellipsis;
316
- }
317
-
318
- .mdt-charts-card-description-wrapper {
319
- overflow: hidden;
320
- text-overflow: ellipsis;
321
- }
322
-
323
- .mdt-charts-card-description {
324
- margin: 0;
325
- overflow: hidden;
326
- text-overflow: ellipsis;
327
- opacity: 0.6;
328
- }
329
-
330
- .mdt-charts-card-value-wrapper {
331
- flex: 2;
332
- display: flex;
333
- align-items: center;
334
- }
335
-
336
- .mdt-charts-card-change-content {
337
- display: flex;
338
- font-size: 0.9em;
339
- }
340
-
341
- .mdt-charts-card-change-content-item:not(:last-of-type) {
342
- margin-right: 0.5em;
343
- }
344
-
345
- .mdt-charts-card-change-description-wrapper {
346
- white-space: nowrap;
347
- overflow: hidden;
348
- text-overflow: ellipsis;
349
- }
350
-
351
- .mdt-charts-card-change-description-item {
352
- overflow: hidden;
353
- }
354
-
355
- .mdt-charts-card-change-description {
356
- display: block;
357
- overflow: hidden;
358
- text-overflow: ellipsis;
359
- }
@@ -274,86 +274,3 @@
274
274
  width: 100%;
275
275
  height: 100%;
276
276
  }
277
-
278
- .mdt-charts-card-wrapper {
279
- width: 100%;
280
- height: 100%;
281
- }
282
-
283
- .mdt-charts-card-wrapper * {
284
- box-sizing: border-box;
285
- }
286
-
287
- .mdt-charts-card-content {
288
- width: 100%;
289
- height: 100%;
290
- display: flex;
291
- flex-direction: column;
292
- justify-content: space-between;
293
- }
294
-
295
- .mdt-charts-card-header {
296
- display: flex;
297
- flex: 1;
298
- align-items: baseline;
299
- }
300
-
301
- .mdt-charts-card-title,
302
- .mdt-charts-card-icon
303
- {
304
- font-size: 1.3em;
305
- }
306
-
307
- .mdt-charts-card-icon {
308
- margin-right: 0.3em;
309
- }
310
-
311
- .mdt-charts-card-title {
312
- margin: 0;
313
- white-space: nowrap;
314
- overflow: hidden;
315
- text-overflow: ellipsis;
316
- }
317
-
318
- .mdt-charts-card-description-wrapper {
319
- overflow: hidden;
320
- text-overflow: ellipsis;
321
- }
322
-
323
- .mdt-charts-card-description {
324
- margin: 0;
325
- overflow: hidden;
326
- text-overflow: ellipsis;
327
- opacity: 0.6;
328
- }
329
-
330
- .mdt-charts-card-value-wrapper {
331
- flex: 2;
332
- display: flex;
333
- align-items: center;
334
- }
335
-
336
- .mdt-charts-card-change-content {
337
- display: flex;
338
- font-size: 0.9em;
339
- }
340
-
341
- .mdt-charts-card-change-content-item:not(:last-of-type) {
342
- margin-right: 0.5em;
343
- }
344
-
345
- .mdt-charts-card-change-description-wrapper {
346
- white-space: nowrap;
347
- overflow: hidden;
348
- text-overflow: ellipsis;
349
- }
350
-
351
- .mdt-charts-card-change-description-item {
352
- overflow: hidden;
353
- }
354
-
355
- .mdt-charts-card-change-description {
356
- display: block;
357
- overflow: hidden;
358
- text-overflow: ellipsis;
359
- }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mdt-charts",
3
- "version": "1.15.6",
3
+ "version": "1.16.0",
4
4
  "description": "",
5
5
  "main": "lib/main.js",
6
6
  "scripts": {
@@ -8,7 +8,9 @@
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 tsconfig.production.json"
11
+ "build-lib": "npm run build-ts && npm run build-style",
12
+ "build-ts": "npx tsc -p tsconfig.production.json",
13
+ "build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.less lib/style"
12
14
  },
13
15
  "homepage": "https://github.com/VishulaKnow/charts",
14
16
  "author": "",
@@ -18,7 +20,17 @@
18
20
  "@babel/plugin-proposal-class-properties": "^7.12.1",
19
21
  "@babel/preset-env": "^7.12.10",
20
22
  "@babel/preset-typescript": "^7.12.13",
23
+ "@types/chroma-js": "^2.1.3",
24
+ "@types/d3-array": "^2.9.0",
25
+ "@types/d3-axis": "^2.0.0",
26
+ "@types/d3-ease": "^2.0.0",
27
+ "@types/d3-format": "^2.0.0",
28
+ "@types/d3-interpolate": "^2.0.0",
29
+ "@types/d3-scale": "^3.2.2",
30
+ "@types/d3-selection": "^2.0.0",
31
+ "@types/d3-shape": "^2.0.0",
21
32
  "@types/d3-timer": "^2.0.0",
33
+ "@types/d3-transition": "^2.0.0",
22
34
  "@types/html-webpack-plugin": "^3.2.4",
23
35
  "@types/jest": "^26.0.20",
24
36
  "clean-webpack-plugin": "^3.0.0",
@@ -26,22 +38,13 @@
26
38
  "d3-timer": "^2.0.0",
27
39
  "html-webpack-plugin": "^4.5.0",
28
40
  "jest": "^26.6.3",
41
+ "shx": "^0.3.4",
29
42
  "style-loader": "^2.0.0",
30
43
  "ts-loader": "^8.0.12",
31
44
  "typescript": "^4.1.3",
32
45
  "webpack": "^5.10.1",
33
46
  "webpack-bundle-analyzer": "^4.4.0",
34
- "webpack-cli": "^4.2.0",
35
- "@types/chroma-js": "^2.1.3",
36
- "@types/d3-array": "^2.9.0",
37
- "@types/d3-axis": "^2.0.0",
38
- "@types/d3-ease": "^2.0.0",
39
- "@types/d3-format": "^2.0.0",
40
- "@types/d3-interpolate": "^2.0.0",
41
- "@types/d3-scale": "^3.2.2",
42
- "@types/d3-selection": "^2.0.0",
43
- "@types/d3-shape": "^2.0.0",
44
- "@types/d3-transition": "^2.0.0"
47
+ "webpack-cli": "^4.2.0"
45
48
  },
46
49
  "dependencies": {
47
50
  "chroma-js": "^2.1.1",
@@ -9,7 +9,8 @@
9
9
  "types": [
10
10
  "jest"
11
11
  ],
12
- "declaration": true
12
+ "declaration": true,
13
+ "moduleResolution": "Node"
13
14
  },
14
15
  "include": [
15
16
  "src"
@@ -1,31 +0,0 @@
1
- import { BaseType, Selection } from "d3-selection";
2
- import { MdtChartsDataSource, Size } from "../../../config/config";
3
- import { CardsOptionsModel } from "../../../model/model";
4
- import { Block } from "../../block/block";
5
- export declare type CardChildElement<T extends Element = HTMLElement> = Selection<T, unknown, BaseType, unknown>;
6
- interface CanvasOptions {
7
- cardSize: Size;
8
- }
9
- export declare type CardValueContent = string | number;
10
- export declare class CardChart {
11
- private readonly cardValueCssClass;
12
- private readonly cardContentBlockCssClass;
13
- private valueContentElement;
14
- private cardContentElement;
15
- private changeBlock;
16
- private styler;
17
- render(block: Block, options: CardsOptionsModel, data: MdtChartsDataSource, canvasOptions: CanvasOptions): void;
18
- updateData(options: CardsOptionsModel, data: MdtChartsDataSource): void;
19
- private renderCardWrapper;
20
- private renderContentBlock;
21
- private setContentColor;
22
- private setContentFontSize;
23
- private renderHeaderBlock;
24
- private appendTitle;
25
- private appendIcon;
26
- private renderDescriptionBlock;
27
- private renderValueBlock;
28
- private updateValueBlockStyle;
29
- private setValueContent;
30
- }
31
- export {};