mdt-charts 1.14.0 → 1.14.1

package/lib/engine/features/legend/legend.js

@@ -90,7 +90,7 @@ export class Legend {
             .attr('class', options.itemsOptions.labelClass)
             .text(d => d.textContent);
         if (options.shouldCropLabels)
-            LegendDomHelper.cropRowLabels(foreignObject, itemWrappers);
+            LegendDomHelper.decreaseRowLabels(foreignObject, itemWrappers, options.blockModel.static);
         return itemWrappers;
     }
     getObject(block) {

package/lib/engine/features/legend/legendWidthCalculator.js

@@ -13,7 +13,9 @@ function getNewWidths(collection, wrapper) {
     let avgExtra = extra / biggerThanAvg.length;
     biggerThanAvg.forEach((item, index) => {
         const avgDiff = item.getCurrentWidth() - avgWidth;
-        const decreaseBy = avgDiff < avgExtra ? avgDiff : avgExtra;
+        const decreaseBy = index === biggerThanAvg.length - 1
+            ? extra
+            : (avgDiff < avgExtra ? avgDiff : avgExtra);
         item.decreaseBy(decreaseBy);
         extra -= decreaseBy;
         avgExtra = extra / (biggerThanAvg.length - index - 1);
@@ -25,7 +27,7 @@ function fixWidthsByLinePos(collection, wrapper) {
     let currentRow = [];
     collection.items.forEach((item, i) => {
         const currentRowSum = currentRow.reduce((acc, i) => acc + i.getCurrentTotalWidth(), 0);
-        if (currentRowSum + item.getWidthWithoutRightMargin() <= wrapper.getWidthOfOneLine()) {
+        if (currentRowSum + item.getCurrentTotalWidth() <= wrapper.getWidthOfOneLine()) {
             currentRow.push(item);
         }
         else {
@@ -43,11 +45,13 @@ function fixWidthsByLinePos(collection, wrapper) {
         const bottom = byRows[i + 1];
         const topFreeSpace = wrapper.getWidthOfOneLine() - top.getTotalWidth();
         const firstOfBottom = bottom.getFirstItem();
-        if (topFreeSpace / firstOfBottom.getCurrentTotalWidth() > 0.51 || i === byRows.length - 2) {
+        if (i === byRows.length - 2)
+            top.pushMany(bottom.shiftAll());
+        else if (topFreeSpace / firstOfBottom.getCurrentTotalWidth() > 0.5) {
             const fromBottom = bottom.shift();
             top.push(fromBottom);
-            result.push(...getNewWidths(top, new LegendWrapper({ maxRowsAmount: 1, width: wrapper.getWidthOfOneLine() })));
         }
+        result.push(...getNewWidths(top, new LegendWrapper({ maxRowsAmount: 1, width: wrapper.getWidthOfOneLine() })));
     }
     return result;
 }
@@ -80,11 +84,14 @@ class LegendItem {
         this.width -= by;
     }
     getCurrentWidth() {
-        return this.width;
+        return Math.round(this.width * 100) / 100;
     }
     getTotalMarginSize() {
         return this.config.marginLeft + this.config.marginRight;
     }
+    resetWidthToOriginal() {
+        this.width = this.config.width;
+    }
 }
 class LegendItemCollection {
     constructor(items) {
@@ -113,7 +120,17 @@ class LegendItemCollection {
     shift() {
         return this.items.shift();
     }
+    shiftAll() {
+        return this.items.splice(0, this.items.length);
+    }
     push(item) {
         this.items.push(item);
     }
+    pushMany(items) {
+        this.items.push(...items);
+    }
+    resetItemsToOriginalWidth() {
+        this.items.forEach(item => item.resetWidthToOriginal());
+        return this;
+    }
 }

package/lib/model/dataManagerModel/dataManagerModel.js

@@ -5,6 +5,7 @@ import { MIN_DONUT_BLOCK_SIZE, PolarModel } from "../notations/polar/polarModel"
 import { DataManagerModelService } from "./dataManagerModelService";
 import { LegendPolarMarginCalculator } from "../featuresModel/legendModel/polarMarginCalculator";
 import { CardsDataManagerModel } from "./notations/cardsDataManagerModel";
+import { styledElementValues } from "../modelBuilder";
 export class DataManagerModel {
     static getPreparedData(data, allowableKeys, config) {
         const scopedData = config.options.type !== "card" ? this.getScopedData(data, allowableKeys, config.options.data) : data;
@@ -83,11 +84,16 @@ export class DataManagerModel {
     }
     //TODO: position type
     static getLegendDataParams(position, keys, legendCanvas, canvasModel, legendBlock) {
+        const legendItemContentOptions = keys.map(k => ({
+            text: k,
+            markerSize: styledElementValues.defaultLegendMarkerSizes,
+            wrapperSize: { marginRightPx: styledElementValues.legend.inlineDynamicItemWrapperMarginRightPx }
+        }));
         if (position === 'right') {
-            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, this.polarMarginCalculator.getMaxLegendWidth(legendCanvas, canvasModel.getBlockSize().width), canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom);
         }
         else {
-            return LegendCanvasModel.findElementsAmountByLegendSize(keys, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
+            return LegendCanvasModel.findElementsAmountByLegendSize(legendItemContentOptions, position, canvasModel.getChartBlockWidth() - legendBlock.coordinate.bottom.margin.left - legendBlock.coordinate.bottom.margin.right, canvasModel.getChartBlockHeight() - legendBlock.coordinate.bottom.margin.bottom - legendBlock.coordinate.bottom.margin.top - MIN_DONUT_BLOCK_SIZE);
         }
     }
     static getMaximumPossibleScope(keys, dataModel) {

package/lib/model/featuresModel/legendModel/legendCanvasModel.d.ts

@@ -1,8 +1,19 @@
 import { DataLegendParams } from "../../dataManagerModel/dataManagerModel";
 import { LegendPosition } from "../../model";
 export declare type LegendItemsDirection = 'row' | 'column';
+export interface LegendItemContentOptions {
+    text: string;
+    markerSize: {
+        widthPx: number;
+        heightPx: number;
+        marginRightPx: number;
+    };
+    wrapperSize: {
+        marginRightPx: number;
+    };
+}
 export declare class LegendCanvasModel {
     static getLegendItemWidth(text: string): number;
-    static findElementsAmountByLegendSize(texts: string[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
+    static findElementsAmountByLegendSize(items: LegendItemContentOptions[], position: LegendPosition, legendBlockWidth: number, legendBlockHeight: number): DataLegendParams;
     private static getLegendWrapperEl;
 }

package/lib/model/featuresModel/legendModel/legendCanvasModel.js

@@ -18,31 +18,37 @@ export class LegendCanvasModel {
         itemWrapper.remove();
         return sumWidth;
     }
-    static findElementsAmountByLegendSize(texts, position, legendBlockWidth, legendBlockHeight) {
+    //TODO: find better solution
+    static findElementsAmountByLegendSize(items, position, legendBlockWidth, legendBlockHeight) {
         const legendWrapper = this.getLegendWrapperEl(legendBlockWidth, position === "right" ? "column" : "row");
         document.body.append(legendWrapper);
         let amount = 0;
-        for (let i = 0; i < texts.length; i++) {
+        for (let i = 0; i < items.length; i++) {
             const itemWrapper = document.createElement('div');
             const colorBlock = document.createElement('span');
             const textBlock = document.createElement('span');
             itemWrapper.classList.add("legend-item");
-            if (position === 'bottom') {
+            if (position === 'bottom' || position === 'top') {
                 itemWrapper.classList.add('legend-item-inline');
                 textBlock.classList.add('legend-label-nowrap');
             }
             else {
                 itemWrapper.classList.add('legend-item-row');
             }
-            colorBlock.classList.add(CLASSES.legendColor);
+            // colorBlock.classList.add(CLASSES.legendColor);
+            colorBlock.style.display = "inline-block";
+            colorBlock.style.width = `${items[i].markerSize.widthPx}px`;
+            colorBlock.style.height = `${items[i].markerSize.heightPx}px`;
+            colorBlock.style.marginRight = `${items[i].markerSize.marginRightPx}px`;
             textBlock.classList.add(CLASSES.legendLabel);
-            textBlock.textContent = texts[i];
+            textBlock.textContent = items[i].text;
+            itemWrapper.style.marginRight = `${items[i].wrapperSize.marginRightPx}px`;
             itemWrapper.append(colorBlock, textBlock);
             legendWrapper.append(itemWrapper);
             amount++;
             if (legendWrapper.offsetHeight > legendBlockHeight) {
                 itemWrapper.remove();
-                if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== 'bottom')
+                if (legendBlockHeight - legendWrapper.offsetHeight >= 15 && position !== 'bottom' && position !== 'top')
                     amount = amount; //TODO: remove
                 else
                     amount -= 1;

package/lib/model/featuresModel/legendModel/twoDimLegendModel.d.ts

@@ -1,8 +1,11 @@
 import { Legend } from "../../../config/config";
 import { LegendBlockModel } from "../../model";
+import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
 export declare class TwoDimLegendModel {
+    private configReader;
+    constructor(configReader: TwoDimConfigReader);
     recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: Legend): void;
-    private getLegendSize;
+    private getLegendSizeLegacy;
     private getLegendModel;
 }

package/lib/model/featuresModel/legendModel/twoDimLegendModel.js

@@ -1,18 +1,29 @@
+import { styledElementValues } from "../../modelBuilder";
+import { getWidthOfLegendMarkerByType } from "../../notations/twoDimensional/styles";
+import { LegendCanvasModel } from "./legendCanvasModel";
 import { LegendModel } from "./legendModel";
 export class TwoDimLegendModel {
+    constructor(configReader) {
+        this.configReader = configReader;
+    }
     recalcMarginWith2DLegend(modelInstance, legendBlockModel, legendOptions) {
         const canvasModel = modelInstance.canvasModel;
         const legendPosition = this.getLegendModel(legendOptions).position;
         modelInstance.canvasModel.legendCanvas.setPosition(legendPosition);
         if (legendPosition !== 'off') {
-            const legendSize = this.getLegendSize();
+            const legendItemInfo = this.configReader.getLegendItemInfo();
+            const legendSize = LegendCanvasModel.findElementsAmountByLegendSize(legendItemInfo.map(i => ({
+                text: i.text,
+                markerSize: Object.assign(Object.assign({}, styledElementValues.defaultLegendMarkerSizes), { widthPx: getWidthOfLegendMarkerByType(i.chartType) }),
+                wrapperSize: { marginRightPx: styledElementValues.legend.inlineItemWrapperMarginRightPx }
+            })), 'top', modelInstance.canvasModel.getBlockSize().width, legendBlockModel.static.maxLinesAmount * styledElementValues.legend.inlineLegendOneLineHeightPx).size.height;
             canvasModel.increaseMarginSide(legendPosition, legendSize);
             if (legendSize !== 0)
                 LegendModel.appendToGlobalMarginValuesLegendMargin(canvasModel, legendPosition, legendBlockModel);
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
-    getLegendSize() {
+    getLegendSizeLegacy() {
         const heightOfLegendItemWithoutWordWrapping = 20;
         return heightOfLegendItemWithoutWordWrapping;
     }

package/lib/model/margin/twoDim/twoDimMarginModel.js

@@ -9,7 +9,7 @@ export class TwoDimMarginModel {
     constructor(designerConfig, configReader) {
         this.designerConfig = designerConfig;
         this.configReader = configReader;
-        this.twoDimLegendModel = new TwoDimLegendModel();
+        this.twoDimLegendModel = new TwoDimLegendModel(this.configReader);
     }
     recalcMargin(otherComponents, modelInstance) {
         const canvasModel = modelInstance.canvasModel;

package/lib/model/modelBuilder.d.ts

@@ -11,5 +11,17 @@ export declare const CLASSES: {
     legendColor: string;
     legendItem: string;
 };
+export declare const styledElementValues: {
+    defaultLegendMarkerSizes: {
+        widthPx: number;
+        heightPx: number;
+        marginRightPx: number;
+    };
+    legend: {
+        inlineLegendOneLineHeightPx: number;
+        inlineItemWrapperMarginRightPx: number;
+        inlineDynamicItemWrapperMarginRightPx: number;
+    };
+};
 export declare function assembleModel(config: MdtChartsConfig, data: MdtChartsDataSource, designerConfig: DesignerConfig): Model;
 export declare function getPreparedData(model: Model, data: MdtChartsDataSource, config: MdtChartsConfig): MdtChartsDataSource;

package/lib/model/modelBuilder.js

@@ -19,6 +19,18 @@ export const CLASSES = {
     legendColor: 'legend-circle',
     legendItem: 'legend-item',
 };
+export const styledElementValues = {
+    defaultLegendMarkerSizes: {
+        widthPx: 11,
+        heightPx: 11,
+        marginRightPx: 6
+    },
+    legend: {
+        inlineLegendOneLineHeightPx: 21,
+        inlineItemWrapperMarginRightPx: 12,
+        inlineDynamicItemWrapperMarginRightPx: 2
+    }
+};
 function getBlockCanvas(config, modelInstance) {
     const emptyBlockParams = { width: 0, height: 0 };
     const size = ConfigValidator.validateCanvasSize(modelInstance.canvasModel.getBlockSize()) ? Object.assign({}, modelInstance.canvasModel.getBlockSize()) : emptyBlockParams;

package/lib/model/modelInstance/configReader.d.ts

@@ -1,4 +1,4 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsTwoDimensionalOptions } from "../../config/config";
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType } from "../../config/config";
 import { DesignerConfig } from "../../designer/designerConfig";
 interface BaseConfigReader {
     getValueFields(): MdtChartsField[];
@@ -10,6 +10,10 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
     getAxisLabelFormatter(): AxisLabelFormatter;
+    getLegendItemInfo(): {
+        text: string;
+        chartType: TwoDimensionalChartType;
+    }[];
 }
 export declare class PolarConfigReader implements BaseConfigReader {
     private options;

package/lib/model/modelInstance/configReader.js

@@ -24,6 +24,16 @@ export class TwoDimConfigReader {
         const valueFieldFormat = this.options.charts[0].data.valueFields[0].format;
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
     }
+    getLegendItemInfo() {
+        const info = [];
+        this.options.charts.forEach(c => {
+            c.data.valueFields.forEach(vf => {
+                var _a;
+                info.push({ text: (_a = vf.title) !== null && _a !== void 0 ? _a : vf.name, chartType: c.type });
+            });
+        });
+        return info;
+    }
 }
 export class PolarConfigReader {
     constructor(config) {

package/lib/model/notations/twoDimensional/styles.d.ts

@@ -1,6 +1,7 @@
 import { ChartLegendModel, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
-import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart } from "../../../config/config";
+import { ChartOrientation, MdtChartsLineLikeChartDashedStyles, MdtChartsTwoDimensionalChart, TwoDimensionalChartType } from "../../../config/config";
 import { MdtChartsLineLikeChartShape } from "../../../designer/designerConfig";
 export declare function parseShape(chartOrientation: ChartOrientation, configOptions?: MdtChartsLineLikeChartShape): LineLikeChartShapeOptions;
 export declare function parseDashStyles(configOptions?: MdtChartsLineLikeChartDashedStyles): LineLikeChartDashOptions;
 export declare function getLegendMarkerOptions(chart: MdtChartsTwoDimensionalChart): ChartLegendModel;
+export declare function getWidthOfLegendMarkerByType(chartType: TwoDimensionalChartType): number;

package/lib/model/notations/twoDimensional/styles.js

@@ -1,4 +1,5 @@
 import { LineCurveType } from "../../model";
+import { styledElementValues } from "../../modelBuilder";
 export function parseShape(chartOrientation, configOptions) {
     var _a;
     const curveType = (_a = configOptions === null || configOptions === void 0 ? void 0 : configOptions.curve) === null || _a === void 0 ? void 0 : _a.type;
@@ -35,7 +36,15 @@ export function getLegendMarkerOptions(chart) {
     };
     return {
         markerShape: shapeByType[chart.type],
-        barViewOptions: { hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false }, width: 10 },
-        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: 30 }
+        barViewOptions: { hatch: { on: (_c = (_b = (_a = chart.barStyles) === null || _a === void 0 ? void 0 : _a.hatch) === null || _b === void 0 ? void 0 : _b.on) !== null && _c !== void 0 ? _c : false }, width: getWidthOfLegendMarkerByType("bar") },
+        lineViewOptions: { dashedStyles: parseDashStyles((_d = chart.lineStyles) === null || _d === void 0 ? void 0 : _d.dash), width: getWidthOfLegendMarkerByType("line") }
     };
 }
+export function getWidthOfLegendMarkerByType(chartType) {
+    if (chartType === "bar")
+        return 10;
+    if (chartType === "line")
+        return 30;
+    if (chartType === "area")
+        return styledElementValues.defaultLegendMarkerSizes.widthPx;
+}

package/lib/style/charts-main.css

@@ -69,8 +69,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
-    margin-left: 20px;
+.legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
+    margin-right: 12px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;
@@ -98,7 +98,7 @@
     text-overflow: ellipsis;
 }
 .legend-marker {
-    margin-right: 8px;
+    margin-right: 6px;
 }
 .legend-circle {
     position: relative;
@@ -107,7 +107,7 @@
     width: 11px;
     height: 11px;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 6px;
 }
 
 

package/lib/style/charts-main.less

@@ -69,8 +69,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.legend-wrapper-without-wrap .legend-item-inline:not(:first-of-type) {
-    margin-left: 20px;
+.legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
+    margin-right: 12px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;
@@ -98,7 +98,7 @@
     text-overflow: ellipsis;
 }
 .legend-marker {
-    margin-right: 8px;
+    margin-right: 6px;
 }
 .legend-circle {
     position: relative;
@@ -107,7 +107,7 @@
     width: 11px;
     height: 11px;
     border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 6px;
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "description": "",
   "main": "lib/main.js",
   "scripts": {