mdt-charts 1.21.1 → 1.21.2

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

@@ -25,6 +25,6 @@ export class LegendHelperService {
         return "row";
     }
     doesLegendInTopBy2d(legendPosition, chartNotation) {
-        return legendPosition === 'top' && chartNotation === "2d";
+        return (legendPosition === 'top' || legendPosition === 'bottom') && chartNotation === "2d";
     }
 }

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

@@ -34,7 +34,7 @@ class SvgMarkerCreator {
     renderSvg(selection) {
         return selection.append('svg')
             .style("display", "inline-block")
-            .style("height", '10px')
+            .style("height", '8px')
             .classed(Legend.markerClass, true);
     }
 }
@@ -49,7 +49,7 @@ class BarMarkerCreator extends SvgMarkerCreator {
             .append('rect')
             .attr('x', 0)
             .attr('y', 0)
-            .attr('height', 10)
+            .attr('height', this.options.width)
             .attr('width', this.options.width)
             .style('fill', color);
         if (this.options.hatch.on) {

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

@@ -6,6 +6,5 @@ export declare class TwoDimLegendModel {
     private configReader;
     constructor(configReader: TwoDimConfigReader);
     recalcMarginWith2DLegend(modelInstance: ModelInstance, legendBlockModel: LegendBlockModel, legendOptions: Legend): void;
-    private getLegendSizeLegacy;
     private getLegendModel;
 }

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

@@ -23,10 +23,6 @@ export class TwoDimLegendModel {
             legendBlockModel.coordinate[legendPosition].size = legendSize;
         }
     }
-    getLegendSizeLegacy() {
-        const heightOfLegendItemWithoutWordWrapping = 20;
-        return heightOfLegendItemWithoutWordWrapping;
-    }
     getLegendModel(legendOptions) {
         const position = legendOptions.show ? "top" : "off";
         return {

package/lib/model/helpers/twoDimensionalModelHelper.d.ts

@@ -5,4 +5,5 @@ export declare class TwoDimensionalModelHelper {
     static getGradientDefs(charts: TwoDimensionalChartModel[], keyAxisOrient: Orient, chartOrient: ChartOrientation): GradientDef[];
     private static getGradientItems;
     private static calculateOpacityItem;
+    private static getGradientItemColor;
 }

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -37,20 +37,28 @@ export class TwoDimensionalModelHelper {
         return gradients;
     }
     static getGradientItems(gradientId, elementColor, keyAxisOrient) {
-        return [0, 1].map(indexItem => ({
-            id: gradientId + `-item-${indexItem}`,
-            color: elementColor,
-            offset: indexItem,
-            opacity: this.calculateOpacityItem(indexItem, keyAxisOrient)
+        return [0, 1].map(itemIndex => ({
+            id: gradientId + `-item-${itemIndex}`,
+            color: this.getGradientItemColor(itemIndex, keyAxisOrient, elementColor),
+            offset: itemIndex,
+            opacity: this.calculateOpacityItem(itemIndex, keyAxisOrient)
         }));
     }
-    static calculateOpacityItem(indexItem, orientation) {
+    static calculateOpacityItem(itemIndex, orientation) {
         const maxOpacity = 0.3;
         const minOpacity = 0;
         if (orientation === 'bottom' || orientation === 'right')
-            return indexItem === 0 ? maxOpacity : minOpacity;
+            return itemIndex === 0 ? maxOpacity : minOpacity;
         else
-            return indexItem === 0 ? minOpacity : maxOpacity;
+            return itemIndex === 0 ? minOpacity : maxOpacity;
     }
     ;
+    static getGradientItemColor(itemIndex, orientation, elementColor) {
+        const maxColor = elementColor;
+        const minColor = "white";
+        if (orientation === 'bottom' || orientation === 'right')
+            return itemIndex === 0 ? maxColor : minColor;
+        else
+            return itemIndex === 0 ? minColor : maxColor;
+    }
 }

package/lib/model/margin/twoDim/twoDimMarginModel.d.ts

@@ -2,8 +2,8 @@ import { DesignerConfig } from "../../../designer/designerConfig";
 import { OtherCommonComponents } from "../../model";
 import { TwoDimConfigReader } from "../../modelInstance/configReader";
 import { ModelInstance } from "../../modelInstance/modelInstance";
-export declare const AXIS_HORIZONTAL_LABEL_PADDING = 15;
-export declare const AXIS_VERTICAL_LABEL_PADDING = 10;
+export declare const AXIS_HORIZONTAL_LABEL_PADDING = 20;
+export declare const AXIS_VERTICAL_LABEL_PADDING = 8;
 export declare class TwoDimMarginModel {
     private designerConfig;
     private configReader;

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

@@ -3,8 +3,8 @@ import { TwoDimLegendModel } from "../../featuresModel/legendModel/twoDimLegendM
 import { keyAxisLabelHorizontalLog, keyAxisLabelVerticalLog } from "../../featuresModel/scaleModel/scaleAxisRecalcer";
 import { AxisType } from "../../modelBuilder";
 import { TwoDimensionalModel } from "../../notations/twoDimensionalModel";
-export const AXIS_HORIZONTAL_LABEL_PADDING = 15;
-export const AXIS_VERTICAL_LABEL_PADDING = 10;
+export const AXIS_HORIZONTAL_LABEL_PADDING = 20;
+export const AXIS_VERTICAL_LABEL_PADDING = 8;
 export class TwoDimMarginModel {
     constructor(designerConfig, configReader) {
         this.designerConfig = designerConfig;

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

@@ -42,9 +42,9 @@ export function getLegendMarkerOptions(chart) {
 }
 export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "bar")
-        return 10;
+        return 8;
     if (chartType === "line")
-        return 30;
+        return 24;
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
 }

package/lib/style/charts-main.css

@@ -1,5 +1,5 @@
 :root {
-	--chart-base-font-size: 13px;
+	--chart-base-font-size: 12px;
 }
 
 .wrapper {
@@ -80,7 +80,7 @@
     text-overflow: ellipsis;
 }
 .legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
-    margin-right: 12px
+    margin-right: 16px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;

package/lib/style/charts-main.less

@@ -1,5 +1,5 @@
 :root {
-	--chart-base-font-size: 13px;
+	--chart-base-font-size: 12px;
 }
 
 .wrapper {
@@ -80,7 +80,7 @@
     text-overflow: ellipsis;
 }
 .legend-wrapper-without-wrap .legend-item-inline:not(:last-of-type) {
-    margin-right: 12px
+    margin-right: 16px
 }
 .legend-wrapper-with-wrap .legend-item-inline {
     margin: 2px;

package/package.json

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