mdt-charts 1.33.2 → 1.34.0

package/lib/model/modelInstance/configReader/twoDimConfigReader.ts/groupingConfigReader/groupingConfigReader.js

@@ -0,0 +1,102 @@
+import { AxisModel } from "../../../../featuresModel/axis/axisModel";
+export class GroupingConfigReader {
+    constructor(keyAxisOptions, chartOrientation, groupingOptions) {
+        this.keyAxisOptions = keyAxisOptions;
+        this.chartOrientation = chartOrientation;
+        this.groupingOptions = groupingOptions;
+        this.maxLabelSize = 60;
+    }
+    isEnabled() {
+        return Boolean(this.groupingOptions) && this.groupingOptions.items.length > 0;
+    }
+    getSlicesByOrients() {
+        var _a, _b, _c, _d;
+        const slices = [];
+        const slicesAmountFromKeyAxisSide = (_b = (_a = this.groupingOptions) === null || _a === void 0 ? void 0 : _a.items.filter((item) => { var _a; return this.getLabelPosition((_a = item.labels) === null || _a === void 0 ? void 0 : _a.position) === this.keyAxisOptions.position; }).length) !== null && _b !== void 0 ? _b : 0;
+        const slicesAmountOppositeToKeyAxisSide = (_d = (_c = this.groupingOptions) === null || _c === void 0 ? void 0 : _c.items.filter((item) => { var _a; return this.getLabelPosition((_a = item.labels) === null || _a === void 0 ? void 0 : _a.position) !== this.keyAxisOptions.position; }).length) !== null && _d !== void 0 ? _d : 0;
+        const pushIfAmountIsNotZero = (orient, amount) => {
+            if (amount > 0) {
+                slices.push({ orient, amount });
+            }
+        };
+        if (this.chartOrientation === "vertical") {
+            pushIfAmountIsNotZero("top", this.keyAxisOptions.position === "start"
+                ? slicesAmountFromKeyAxisSide
+                : slicesAmountOppositeToKeyAxisSide);
+            pushIfAmountIsNotZero("bottom", this.keyAxisOptions.position === "start"
+                ? slicesAmountOppositeToKeyAxisSide
+                : slicesAmountFromKeyAxisSide);
+        }
+        else {
+            pushIfAmountIsNotZero("left", this.keyAxisOptions.position === "start"
+                ? slicesAmountFromKeyAxisSide
+                : slicesAmountOppositeToKeyAxisSide);
+            pushIfAmountIsNotZero("right", this.keyAxisOptions.position === "start"
+                ? slicesAmountOppositeToKeyAxisSide
+                : slicesAmountFromKeyAxisSide);
+        }
+        return slices;
+    }
+    getSlicesSizesByOrients(dataRows) {
+        var _a;
+        const slices = [];
+        (_a = this.groupingOptions) === null || _a === void 0 ? void 0 : _a.items.forEach((item) => {
+            var _a;
+            const labelsTexts = this.getLabelValuesForItem(item, dataRows);
+            const labelSize = AxisModel.getLabelSize(this.maxLabelSize, labelsTexts);
+            slices.push({
+                orient: this.getLabelOrient((_a = item.labels) === null || _a === void 0 ? void 0 : _a.position),
+                size: this.chartOrientation === "vertical" ? labelSize.height : labelSize.width
+            });
+        });
+        return slices;
+    }
+    getPreparedOptions(scopedDatasourceRows) {
+        var _a, _b, _c, _d;
+        const groupingItemsValues = [];
+        let keyAxisSideIndex = 0;
+        let oppositeKeyAxisSideIndex = 0;
+        for (const item of (_b = (_a = this.groupingOptions) === null || _a === void 0 ? void 0 : _a.items) !== null && _b !== void 0 ? _b : []) {
+            const labelsPosition = (_d = (_c = item.labels) === null || _c === void 0 ? void 0 : _c.position) !== null && _d !== void 0 ? _d : this.keyAxisOptions.position;
+            let orient = this.getLabelOrient(labelsPosition);
+            let sideIndex;
+            if (labelsPosition === "start")
+                sideIndex = keyAxisSideIndex++;
+            else
+                sideIndex = oppositeKeyAxisSideIndex++;
+            const textAnchorByOrient = {
+                top: "middle",
+                bottom: "middle",
+                left: "start",
+                right: "end"
+            };
+            const dominantBaselineByOrient = {
+                top: "hanging",
+                bottom: "auto",
+                left: "middle",
+                right: "middle"
+            };
+            groupingItemsValues.push({
+                domain: this.getLabelValuesForItem(item, scopedDatasourceRows),
+                orient,
+                sideIndex,
+                field: item.data.field,
+                textAnchor: textAnchorByOrient[orient],
+                dominantBaseline: dominantBaselineByOrient[orient]
+            });
+        }
+        return groupingItemsValues;
+    }
+    getLabelValuesForItem(item, dataRows) {
+        const values = new Set(dataRows.map((row) => row[item.data.field.name]));
+        return Array.from(values);
+    }
+    getLabelOrient(labelsPosition) {
+        if (this.chartOrientation === "vertical")
+            return this.getLabelPosition(labelsPosition) === "start" ? "top" : "bottom";
+        return this.getLabelPosition(labelsPosition) === "start" ? "left" : "right";
+    }
+    getLabelPosition(labelsPosition) {
+        return labelsPosition !== null && labelsPosition !== void 0 ? labelsPosition : this.keyAxisOptions.position;
+    }
+}

package/lib/model/modelInstance/{configReader.d.ts → configReader/twoDimConfigReader.ts/twoDimConfigReader.d.ts}

@@ -1,13 +1,12 @@
-import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup, ValueLabelsFormatter } from "../../config/config";
-import { DesignerConfig } from "../../designer/designerConfig";
-import { ValueLabelsStyleModel } from "../model";
-interface BaseConfigReader {
-    getValueFields(): MdtChartsField[];
-}
-export declare function getConfigReader(config: MdtChartsConfig, designerConfig: DesignerConfig): BaseConfigReader;
+import { AxisLabelFormatter, MdtChartsConfig, MdtChartsField, MdtChartsFieldName, MdtChartsTwoDimensionalOptions, TwoDimensionalChartType, TwoDimensionalValueGroup, ValueLabelsFormatter } from "../../../../config/config";
+import { DesignerConfig } from "../../../../designer/designerConfig";
+import { ValueLabelsStyleModel } from "../../../model";
+import { BaseConfigReader } from "../baseConfigReader";
+import { GroupingConfigReader } from "./groupingConfigReader/groupingConfigReader";
 export declare class TwoDimConfigReader implements BaseConfigReader {
     private designerConfig;
     readonly options: MdtChartsTwoDimensionalOptions;
+    readonly grouping: GroupingConfigReader;
     constructor(config: MdtChartsConfig, designerConfig: DesignerConfig);
     getValueFields(): MdtChartsField[];
     getFieldsBySegments(valueGroup: TwoDimensionalValueGroup): MdtChartsFieldName[][];
@@ -25,9 +24,3 @@ export declare class TwoDimConfigReader implements BaseConfigReader {
     getValueLabelsStyleModel(): ValueLabelsStyleModel;
     private calculateAxisLabelFormatter;
 }
-export declare class PolarConfigReader implements BaseConfigReader {
-    private options;
-    constructor(config: MdtChartsConfig);
-    getValueFields(): MdtChartsField[];
-}
-export {};

package/lib/model/modelInstance/{configReader.js → configReader/twoDimConfigReader.ts/twoDimConfigReader.js}

@@ -1,14 +1,9 @@
-export function getConfigReader(config, designerConfig) {
-    if (config.options.type === "2d")
-        return new TwoDimConfigReader(config, designerConfig);
-    if (config.options.type === "polar")
-        return new PolarConfigReader(config);
-    throw new Error(`Config reader for type "${config.options.type}" not exists`);
-}
+import { GroupingConfigReader } from "./groupingConfigReader/groupingConfigReader";
 export class TwoDimConfigReader {
     constructor(config, designerConfig) {
         this.designerConfig = designerConfig;
         this.options = config.options;
+        this.grouping = new GroupingConfigReader(this.options.axis.key, this.options.orientation, this.options.grouping);
     }
     getValueFields() {
         const fields = [];
@@ -32,6 +27,8 @@ export class TwoDimConfigReader {
         return this.calculateAxisLabelFormatter(this.options.axis.value);
     }
     getSecondaryAxisLabelFormatter() {
+        if (!this.options.axis.valueSecondary)
+            throw new Error("Secondary axis is not defined");
         return this.calculateAxisLabelFormatter(this.options.axis.valueSecondary);
     }
     getLegendItemInfo() {
@@ -49,18 +46,18 @@ export class TwoDimConfigReader {
             this.options.charts.some((chart) => chart.data.valueGroup === "secondary"));
     }
     getValueLabelFormatterForChart(chartIndex) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const chart = this.options.charts[chartIndex];
         const axis = this.options.axis;
         if ((_a = chart.valueLabels) === null || _a === void 0 ? void 0 : _a.format)
             return chart.valueLabels.format;
         if (chart.data.valueGroup === "secondary") {
-            if ((_b = axis.valueSecondary.labels) === null || _b === void 0 ? void 0 : _b.format)
+            if ((_c = (_b = axis.valueSecondary) === null || _b === void 0 ? void 0 : _b.labels) === null || _c === void 0 ? void 0 : _c.format)
                 return axis.valueSecondary.labels.format;
-            else if ((_c = axis.value.labels) === null || _c === void 0 ? void 0 : _c.format)
+            else if ((_d = axis.value.labels) === null || _d === void 0 ? void 0 : _d.format)
                 return axis.value.labels.format;
         }
-        else if ((_d = axis.value.labels) === null || _d === void 0 ? void 0 : _d.format)
+        else if ((_e = axis.value.labels) === null || _e === void 0 ? void 0 : _e.format)
             return axis.value.labels.format;
         const valueFieldFormat = chart.data.valueFields[0].format;
         return (v) => this.designerConfig.dataFormat.formatters(v, { type: valueFieldFormat });
@@ -90,11 +87,3 @@ export class TwoDimConfigReader {
         return this.calculateDefaultAxisLabelFormatter();
     }
 }
-export class PolarConfigReader {
-    constructor(config) {
-        this.options = config.options;
-    }
-    getValueFields() {
-        return [this.options.chart.data.valueField];
-    }
-}

package/lib/model/modelInstance/modelInstance.js

@@ -1,6 +1,6 @@
 import { CanvasModel } from "./canvasModel/canvasModel";
 import { ChartBlockVersion } from "./chartBlockVersion/chartBlockVersion";
-import { getConfigReader } from "./configReader";
+import { getConfigReader } from "./configReader/baseConfigReader";
 import { DataModelInstance } from "./dataModel/dataModel";
 export class ModelInstance {
     constructor(chartVersionNumber) {

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

@@ -4,8 +4,8 @@ export declare class TitleConfigReader {
     private readonly config;
     private readonly dataGetter;
     private readonly defaultCssUnitReader;
-    static create(config: Title, modelInstance: ModelInstance): TitleConfigReader;
-    constructor(config: Title, dataGetter: () => MdtChartsDataRow[], defaultCssUnitReader: () => number);
+    static create(config: Title | undefined, modelInstance: ModelInstance): TitleConfigReader;
+    constructor(config: Title | undefined, dataGetter: () => MdtChartsDataRow[], defaultCssUnitReader: () => number);
     getTextContent(): string;
     getFontSize(): number;
     private getResolvedTitle;

package/lib/model/notations/twoDimensionalModel.d.ts

@@ -1,7 +1,7 @@
 import { ChartOrientation, MdtChartsTwoDimensionalChart } from "../../config/config";
 import { ChartOptionsCanvas, DesignerConfig } from "../../designer/designerConfig";
 import { TwoDimensionalOptionsModel, TwoDimChartElementsSettings } from "../model";
-import { TwoDimConfigReader } from "../modelInstance/configReader";
+import { TwoDimConfigReader } from "../modelInstance/configReader/twoDimConfigReader.ts/twoDimConfigReader";
 import { ModelInstance } from "../modelInstance/modelInstance";
 export declare class TwoDimensionalModel {
     static getOptions(configReader: TwoDimConfigReader, designerConfig: DesignerConfig, modelInstance: ModelInstance): TwoDimensionalOptionsModel;

package/lib/model/notations/twoDimensionalModel.js

@@ -10,11 +10,13 @@ import { TitleConfigReader } from "../modelInstance/titleConfigReader";
 import { createRecordOverflowModel } from "../featuresModel/recordOverflowModel/recordOverflowModel";
 import { TwoDimTooltipContentGenerator } from "../featuresModel/tooltipModel/tooltipContentModel";
 import { TwoDimInitialRowsProvider } from "../featuresModel/tooltipModel/contentByNotations/twoDimInitialRowsProvider";
+import { GroupingLabelsCoordinateHandler } from "../featuresModel/grouping/groupingLabels/groupingLabelsCoordinateHandlers";
+import { GroupingLabelsCoordinateScaler } from "../featuresModel/grouping/groupingLabels/groupingLabelsScaler";
 export class TwoDimensionalModel {
     static getOptions(configReader, designerConfig, modelInstance) {
         const options = configReader.options;
         const canvasModel = modelInstance.canvasModel;
-        const scaleModel = new ScaleModel(options, canvasModel);
+        const scaleModel = new ScaleModel(options, canvasModel, designerConfig.canvas.chartOptions.bar);
         const scaleMarginRecalcer = new ScaleAxisRecalcer(() => scaleModel.getScaleLinear(modelInstance.dataModel.repository.getScopedRows(), configReader));
         scaleMarginRecalcer.recalculateMargin(canvasModel, options.orientation, options.axis.key);
         const scaleValueInfo = scaleMarginRecalcer.getScaleValue();
@@ -27,6 +29,7 @@ export class TwoDimensionalModel {
         const keyAxis = AxisModel.getKeyAxis(options, modelInstance.dataModel.repository.getScopedFullSource(), designerConfig.canvas.axisLabel, canvasModel, designerConfig.elementsOptions.tooltip, () => scaleValueInfo.scaleFn(0));
         const charts = this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name, modelInstance);
         const titleConfig = TitleConfigReader.create(options.title, modelInstance);
+        const keyScale = scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys());
         const isHorizontal = options.orientation === "horizontal";
         return {
             legend: canvasModel.legendCanvas.getModel(),
@@ -34,9 +37,51 @@ export class TwoDimensionalModel {
                 textContent: titleConfig.getTextContent(),
                 fontSize: titleConfig.getFontSize()
             },
+            grouping: {
+                enabled: configReader.grouping.isEnabled(),
+                items: configReader.grouping
+                    .getPreparedOptions(modelInstance.dataModel.repository.getScopedRows())
+                    .map((prepared) => {
+                    let keyScaleInfo;
+                    if (keyScale.type === "band") {
+                        keyScaleInfo = {
+                            type: keyScale.type,
+                            keyAxisOuterPadding: keyScale.sizes.paddingOuter,
+                            keyAxisInnerPadding: keyScale.sizes.paddingInner
+                        };
+                    }
+                    else {
+                        keyScaleInfo = { type: "point" };
+                    }
+                    const scaler = new GroupingLabelsCoordinateScaler({
+                        dataRows: modelInstance.dataModel.repository.getScopedRows(),
+                        field: prepared.field,
+                        keyScaleInfo,
+                        range: keyScale.range
+                    });
+                    const coordinateHandler = new GroupingLabelsCoordinateHandler(canvasModel, {
+                        orient: prepared.orient,
+                        sideIndex: prepared.sideIndex,
+                        otherComponentSizes: {
+                            titleTotalNeededSpace: canvasModel.titleCanvas.getAllNeededSpace(),
+                            legendTotalNeededSpace: canvasModel.legendCanvas.getAllNeededSpace()
+                        }
+                    });
+                    return {
+                        orient: prepared.orient,
+                        domain: prepared.domain,
+                        textAnchor: prepared.textAnchor,
+                        dominantBaseline: prepared.dominantBaseline,
+                        coordinate: {
+                            handleX: (groupKey) => coordinateHandler.handleX(scaler.scaleForKey(groupKey)),
+                            handleY: (groupKey) => coordinateHandler.handleY(scaler.scaleForKey(groupKey))
+                        }
+                    };
+                })
+            },
             selectable: !!options.selectable,
             orient: options.orientation,
-            scale: Object.assign({ key: scaleModel.getScaleKey(modelInstance.dataModel.getAllowableKeys()), value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
+            scale: Object.assign({ key: keyScale, value: scaleValueInfo.scale }, (configReader.containsSecondaryAxis() && { valueSecondary: secondaryScaleValueInfo.scale })),
             axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(configReader.calculateDefaultAxisLabelFormatter(), options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel, scaleValueInfo.scale) }, (configReader.containsSecondaryAxis() && {
                 valueSecondary: AxisModel.getSecondaryValueAxis(configReader.calculateDefaultAxisLabelFormatter(), options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel, secondaryScaleValueInfo.scale)
             })),

package/lib/style/charts-main.css

@@ -293,5 +293,5 @@
 }
 
 .mdt-charts-value-label-hidden {
-    display: none;
+    display: none !important;
 }

package/lib/style/charts-main.less

@@ -293,5 +293,5 @@
 }
 
 .mdt-charts-value-label-hidden {
-    display: none;
+    display: none !important;
 }

package/package.json

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

package/lib/model/featuresModel/titleModel.d.ts

@@ -1,5 +0,0 @@
-import { TitleBlockModel } from "../model";
-import { TitleConfigReader } from "../modelInstance/titleConfigReader";
-export declare class TitleModel {
-    static getTitleModel(titleConfig: TitleConfigReader): TitleBlockModel;
-}

package/lib/model/featuresModel/titleModel.js

@@ -1,16 +0,0 @@
-export class TitleModel {
-    static getTitleModel(titleConfig) {
-        const defaultPads = titleConfig.getFontSize();
-        const pad = titleConfig.getTextContent() ? defaultPads : 0;
-        return {
-            margin: {
-                bottom: 5,
-                left: 0,
-                right: 0,
-                top: 0
-            },
-            size: pad,
-            pad: 0
-        };
-    }
-}