mdt-charts 1.20.1 → 1.21.1

package/lib/config/config.d.ts

@@ -195,6 +195,7 @@ interface Tooltip {
 interface MdtChartsLineLikeChart {
     markers: MarkersOptions;
     lineStyles?: MdtChartsLineLikeChartStyles;
+    areaStyles?: MdtChartsLineLikeChartAreaStyles;
 }
 export interface MdtChartsLineLikeChartStyles {
     dash?: MdtChartsLineLikeChartDashedStyles;
@@ -204,6 +205,16 @@ export interface MdtChartsLineLikeChartDashedStyles {
     dashSize?: number;
     gapSize?: number;
 }
+export interface MdtChartsLineLikeChartAreaStyles {
+    gradient?: AreaStylesGradient;
+    borderLine?: AreaStylesBorderLine;
+}
+export interface AreaStylesGradient {
+    on: boolean;
+}
+export interface AreaStylesBorderLine {
+    on: boolean;
+}
 interface MdtChartsBarLikeChart {
     barStyles?: MdtChartsBarLikeChartStyles;
 }

package/lib/engine/block/defs/LinearGradientDef.d.ts

@@ -0,0 +1,6 @@
+import { Selection } from "d3-selection";
+import { GradientDef } from "../../../model/model";
+export declare class LinearGradientDef {
+    render(defs: Selection<SVGDefsElement, unknown, HTMLElement, any>, gradients: GradientDef[]): void;
+    updateColors(defs: Selection<SVGDefsElement, unknown, HTMLElement, any>, gradients: GradientDef[]): void;
+}

package/lib/engine/block/defs/LinearGradientDef.js

@@ -0,0 +1,28 @@
+export class LinearGradientDef {
+    render(defs, gradients) {
+        gradients.forEach(gradient => {
+            const linearGradient = defs.append("linearGradient")
+                .attr("id", gradient.id)
+                .attr("x1", gradient.position.x1)
+                .attr("y1", gradient.position.y1)
+                .attr("x2", gradient.position.x2)
+                .attr("y2", gradient.position.y2);
+            gradient.items.forEach(item => {
+                linearGradient.append("stop")
+                    .attr("id", item.id)
+                    .attr("offset", item.offset)
+                    .attr("stop-opacity", item.opacity)
+                    .attr("stop-color", item.color);
+            });
+        });
+    }
+    updateColors(defs, gradients) {
+        gradients.forEach(gradient => {
+            const linearGradient = defs.select(`#${gradient.id}`);
+            gradient.items.forEach(item => {
+                linearGradient.select(`#${item.id}`)
+                    .attr("stop-color", item.color);
+            });
+        });
+    }
+}

package/lib/engine/helpers/domHelper.d.ts

@@ -25,6 +25,7 @@ export declare class DomHelper {
      * @returns Выборка по ключам
      */
     static getChartElementsByKeys<T extends BaseType>(initialSelection: Selection<T, MdtChartsDataRow, BaseType, unknown>, dataWrapped: boolean, keyFieldName: string, keyValues: string[], condition?: SelectionCondition): Selection<T, any, BaseType, unknown>;
+    static setChartGradientStyle(element: Selection<BaseType, unknown, BaseType, unknown>, chartIndex: number, valueIndex: number): void;
     private static setChartOpacity;
 }
 export {};

package/lib/engine/helpers/domHelper.js

@@ -1,5 +1,6 @@
 import { MarkDot } from "../features/markDots/markDot";
 import { Bar } from "../twoDimensionalNotation/bar/bar";
+import { getGradientId } from "../../model/notations/twoDimensional/styles";
 export var SelectionCondition;
 (function (SelectionCondition) {
     SelectionCondition[SelectionCondition["Include"] = 0] = "Include";
@@ -62,6 +63,9 @@ export class DomHelper {
             return condition === SelectionCondition.Exclude ? i === -1 : i !== -1;
         });
     }
+    static setChartGradientStyle(element, chartIndex, valueIndex) {
+        element.style('fill', `url(#${getGradientId(chartIndex, valueIndex)})`);
+    }
     static setChartOpacity(elements, opacity) {
         elements.attr('opacity', opacity);
     }

package/lib/engine/twoDimensionalNotation/area/area.d.ts

@@ -8,6 +8,7 @@ interface AreaOptions {
 export declare class Area {
     private readonly options;
     static readonly areaChartClass = "area";
+    static readonly areaBorderLineClass = "area-border-line";
     static get(options: AreaOptions): Area;
     constructor(options: AreaOptions);
     render(block: Block, scales: Scales, data: MdtChartsDataRow[], keyField: Field, margin: BlockMargin, keyAxisOrient: Orient, chart: TwoDimensionalChartModel, blockSize: Size): void;
@@ -20,5 +21,12 @@ export declare class Area {
     private updateGroupedPath;
     private updateSegmentedPath;
     private setSegmentColor;
+    private setChartFillStyle;
+    private createAreaGeneratorFactory;
+    private createLineGeneratorFactory;
+    private renderArea;
+    private renderBorderLine;
+    private updateArea;
+    private updateBorderLine;
 }
 export {};

package/lib/engine/twoDimensionalNotation/area/area.js

@@ -4,6 +4,8 @@ import { AreaGeneratorFactory } from './areaHelper';
 import { DomHelper } from '../../helpers/domHelper';
 import { Helper } from '../../helpers/helper';
 import { getStackedDataWithOwn } from '../bar/stackedData/dataStacker';
+import { LineGeneratorFactory } from "../../../engine/twoDimensionalNotation/line/lineHelper";
+import { Line } from "../../../engine/twoDimensionalNotation/line/line";
 export class Area {
     constructor(options) {
         this.options = options;
@@ -29,31 +31,33 @@ export class Area {
     }
     updateColors(block, chart) {
         chart.data.valueFields.forEach((_vf, valueIndex) => {
-            const path = block.svg.getChartGroup(chart.index)
+            const chartGroup = block.svg.getChartGroup(chart.index);
+            const areaPath = chartGroup
                 .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            this.setChartFillStyle(chart, areaPath, valueIndex);
+            if (chart.areaViewOptions.borderLine.on) {
+                const borderLinePath = chartGroup
+                    .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+                DomHelper.setChartElementColor(borderLinePath, chart.style.elementColors, valueIndex, 'stroke');
+            }
             MarkDot.updateColors(block, chart, valueIndex);
         });
     }
     renderGrouped(block, scales, data, keyField, margin, keyAxisOrient, chart) {
-        const generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGeneratorFactory = chart.areaViewOptions.borderLine.on
+            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const area = generatorFactory.getAreaGenerator(field.name);
-            const path = block.svg.getChartGroup(chart.index)
-                .append('path')
-                .attr('d', area(data))
-                .attr('class', Area.areaChartClass)
-                .style('clip-path', `url(#${block.svg.getClipPathId()})`)
-                .style('pointer-events', 'none');
-            DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
-            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+            this.renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex);
+            if (lineGeneratorFactory)
+                this.renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex);
             MarkDot.render(block, data, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
         });
     }
     renderSegmented(block, scales, data, keyField, margin, keyAxisOrient, chart) {
         const stackedData = getStackedDataWithOwn(data, chart.data.valueFields.map(field => field.name));
-        const generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
-        const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const areaGenerator = areaGeneratorFactory.getSegmentedAreaGenerator();
         const areas = block.svg.getChartGroup(chart.index)
             .selectAll(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
             .data(stackedData)
@@ -73,20 +77,24 @@ export class Area {
     }
     updateGrouped(block, scales, newData, keyField, margin, chart, keyAxisOrient, blockSize) {
         const promises = [];
-        const generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        const areaGeneratorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
+        const lineGeneratorFactory = chart.areaViewOptions.borderLine.on
+            && this.createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         chart.data.valueFields.forEach((field, valueIndex) => {
-            const areaGenerator = generatorFactory.getAreaGenerator(field.name);
-            const areaObject = block.svg.getChartGroup(chart.index)
-                .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
-            const prom = this.updateGroupedPath(block, areaObject, areaGenerator, newData);
-            promises.push(prom);
+            const chartGroup = block.svg.getChartGroup(chart.index);
+            const areaProm = this.updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
+            promises.push(areaProm);
+            if (lineGeneratorFactory) {
+                const lineProm = this.updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex);
+                promises.push(lineProm);
+            }
             MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueIndex, field.name, chart);
         });
         return promises;
     }
     updateSegmented(block, scales, newData, keyField, margin, chart, keyAxisOrient) {
         const stackedData = getStackedDataWithOwn(newData, chart.data.valueFields.map(field => field.name));
-        const generatorFactory = new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+        const generatorFactory = this.createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField);
         const areaGenerator = generatorFactory.getSegmentedAreaGenerator();
         const areas = block.svg.getChartGroup(chart.index)
             .selectAll(`path.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}`)
@@ -137,5 +145,53 @@ export class Area {
     setSegmentColor(segments, colorPalette) {
         segments.style('fill', (d, i) => colorPalette[i % colorPalette.length]);
     }
+    setChartFillStyle(chart, path, valueIndex) {
+        if (chart.areaViewOptions.fill.type === 'gradient')
+            DomHelper.setChartGradientStyle(path, chart.index, valueIndex);
+        else
+            DomHelper.setChartStyle(path, chart.style, valueIndex, 'fill');
+    }
+    createAreaGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+        return new AreaGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+    }
+    createLineGeneratorFactory(chart, scales, margin, keyAxisOrient, keyField) {
+        return new LineGeneratorFactory({ keyAxisOrient, scales, keyFieldName: keyField.name, margin, shouldRender: chart.lineLikeViewOptions.renderForKey, curve: this.options.staticSettings.shape.curve.type });
+    }
+    renderArea(areaGeneratorFactory, block, chart, data, field, valueIndex) {
+        const area = areaGeneratorFactory.getAreaGenerator(field.name);
+        const path = block.svg.getChartGroup(chart.index)
+            .append('path')
+            .attr('d', area(data))
+            .attr('class', Area.areaChartClass)
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        DomHelper.setCssClasses(path, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        this.setChartFillStyle(chart, path, valueIndex);
+    }
+    renderBorderLine(lineGeneratorFactory, block, chart, data, field, valueIndex) {
+        const lineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+        const linePath = block.svg.getChartGroup(chart.index)
+            .append('path')
+            .attr('d', lineGenerator(data))
+            .attr('class', `${Area.areaBorderLineClass}`)
+            .style('fill', 'none')
+            .style('clip-path', `url(#${block.svg.getClipPathId()})`)
+            .style('pointer-events', 'none');
+        DomHelper.setCssClasses(linePath, Helper.getCssClassesWithElementIndex(chart.cssClasses, valueIndex));
+        DomHelper.setChartStyle(linePath, chart.areaViewOptions.borderLine.colorStyle, valueIndex, 'stroke');
+    }
+    updateArea(areaGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+        const areaGenerator = areaGeneratorFactory.getAreaGenerator(field.name);
+        const areaObject = chartGroup
+            .select(`.${Area.areaChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        return this.updateGroupedPath(block, areaObject, areaGenerator, newData);
+    }
+    updateBorderLine(lineGeneratorFactory, chartGroup, block, field, chart, newData, valueIndex) {
+        const borderLineGenerator = lineGeneratorFactory.getLineGenerator(field.name);
+        const borderLineObject = chartGroup
+            .select(`.${Area.areaBorderLineClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueIndex}`);
+        return Line.updateGroupedPath(block, borderLineObject, borderLineGenerator, newData);
+    }
 }
 Area.areaChartClass = 'area';
+Area.areaBorderLineClass = 'area-border-line';

package/lib/engine/twoDimensionalNotation/line/line.d.ts

@@ -1,3 +1,4 @@
+import { Line as ILine } from 'd3-shape';
 import { BaseType, Selection } from 'd3-selection';
 import { BlockMargin, Field, LineLikeChartSettings, Orient, TwoDimensionalChartModel } from "../../../model/model";
 import { Scales } from "../../features/scale/scale";
@@ -21,7 +22,7 @@ export declare class Line {
     private renderSegmented;
     private updateGrouped;
     private updateSegmented;
-    private updateGroupedPath;
+    static updateGroupedPath(block: Block, lineObject: Selection<BaseType, any, BaseType, any>, lineGenerator: ILine<MdtChartsDataRow>, newData: MdtChartsDataRow[]): Promise<any>;
     private updateSegmentedPath;
     private setSegmentColor;
 }

package/lib/engine/twoDimensionalNotation/line/line.js

@@ -85,7 +85,7 @@ export class Line {
             const lineGenerator = generatorFactory.getLineGenerator(valueField.name);
             const lineObject = block.svg.getChartGroup(chart.index)
                 .select(`.${this.lineChartClass}${Helper.getCssClassesLine(chart.cssClasses)}.chart-element-${valueFieldIndex}`);
-            const prom = this.updateGroupedPath(block, lineObject, lineGenerator, newData);
+            const prom = Line.updateGroupedPath(block, lineObject, lineGenerator, newData);
             promises.push(prom);
             MarkDot.update(block, newData, keyAxisOrient, scales, margin, keyField.name, valueFieldIndex, valueField.name, chart);
         });
@@ -104,7 +104,7 @@ export class Line {
         });
         return [prom];
     }
-    updateGroupedPath(block, lineObject, lineGenerator, newData) {
+    static updateGroupedPath(block, lineObject, lineGenerator, newData) {
         return new Promise(resolve => {
             if (lineObject.size() === 0) {
                 resolve('');

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.d.ts

@@ -5,6 +5,7 @@ import { ChartContentManager } from "../contentManager/contentManagerFactory";
 import { Engine } from "../engine";
 export declare class TwoDimensionalManager implements ChartContentManager {
     private canvasValueLabels?;
+    private linearGradientDef?;
     render(engine: Engine, model: Model<TwoDimensionalOptionsModel>): void;
     updateData(block: Block, model: Model<TwoDimensionalOptionsModel>, data: MdtChartsDataSource): void;
     updateColors(block: Block, model: Model<TwoDimensionalOptionsModel>): void;

package/lib/engine/twoDimensionalNotation/twoDimensionalManager.js

@@ -14,6 +14,7 @@ import { BarHelper } from "./bar/barHelper";
 import { TwoDimRecordOverflowAlert } from "./extenders/twoDimRecordOverflowAlert";
 import { Line } from "./line/line";
 import { CanvasValueLabels } from "../../engine/features/valueLabels/valueLabels";
+import { LinearGradientDef } from "../../engine/block/defs/LinearGradientDef";
 export class TwoDimensionalManager {
     render(engine, model) {
         const options = model.options;
@@ -52,6 +53,10 @@ export class TwoDimensionalManager {
             }
         });
         this.canvasValueLabels.render(scales, options.charts, engine.data, options.data);
+        if (options.defs) {
+            this.linearGradientDef = new LinearGradientDef();
+            this.linearGradientDef.render(engine.block.svg.ensureDefsRendered(), options.defs.gradients);
+        }
     }
     updateData(block, model, data) {
         block.transitionManager.interruptTransitions();
@@ -81,7 +86,9 @@ export class TwoDimensionalManager {
             this.canvasValueLabels.update(scales, options.charts, data, model.options.data);
     }
     updateColors(block, model) {
+        var _a;
         Legend.get().updateColors(block, model.options);
+        (_a = this.linearGradientDef) === null || _a === void 0 ? void 0 : _a.updateColors(block.svg.ensureDefsRendered(), model.options.defs.gradients);
         model.options.charts.forEach(chart => {
             if (chart.type === 'bar')
                 Bar.get().updateColors(block, chart);

package/lib/model/chartStyleModel/twoDimensionalChartStyleModel.js

@@ -8,10 +8,14 @@ export class TwoDimensionalChartStyleModel {
         this.service = new TwoDimensionalChartStyleService();
     }
     getChartStyle(chart, chartIndex) {
+        var _a, _b;
         const fieldsAmounts = this.getChartsValueFieldsAmounts();
+        const opacity = chart.type === 'area' && ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on)
+            ? 1
+            : this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented);
         return {
             elementColors: this.service.getChartColors(chart, this.chartStyleConfig, fieldsAmounts, chartIndex),
-            opacity: this.service.getChartOpacity(this.charts.length, chart.type, fieldsAmounts[chartIndex], chart.isSegmented)
+            opacity,
         };
     }
     getChartsValueFieldsAmounts() {

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

@@ -1,5 +1,8 @@
-import { MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
-import { MarkDotDatumItem } from "../model";
+import { ChartOrientation, MdtChartsDataRow, MdtChartsTwoDimensionalChart } from "../../config/config";
+import { GradientDef, MarkDotDatumItem, Orient, TwoDimensionalChartModel } from "../model";
 export declare class TwoDimensionalModelHelper {
     static shouldMarkerShow(chart: MdtChartsTwoDimensionalChart, dataRows: MdtChartsDataRow[], valueFieldName: string, currentRow: MarkDotDatumItem, keyFieldName: string): boolean;
+    static getGradientDefs(charts: TwoDimensionalChartModel[], keyAxisOrient: Orient, chartOrient: ChartOrientation): GradientDef[];
+    private static getGradientItems;
+    private static calculateOpacityItem;
 }

package/lib/model/helpers/twoDimensionalModelHelper.js

@@ -1,3 +1,4 @@
+import { getGradientId } from "../../model/notations/twoDimensional/styles";
 export class TwoDimensionalModelHelper {
     static shouldMarkerShow(chart, dataRows, valueFieldName, currentRow, keyFieldName) {
         if (chart.markers.show || dataRows.length === 1)
@@ -13,4 +14,43 @@ export class TwoDimensionalModelHelper {
             (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null;
         return (isFirst && (nextRow === null || nextRow === void 0 ? void 0 : nextRow[valueFieldName]) === null) || (isLast && (previousRow === null || previousRow === void 0 ? void 0 : previousRow[valueFieldName]) === null) || hasNullNeighborsRows;
     }
+    static getGradientDefs(charts, keyAxisOrient, chartOrient) {
+        let gradients = [];
+        charts.forEach((chart) => {
+            var _a;
+            if (chart.type === 'area' && chart.areaViewOptions.fill.type === 'gradient') {
+                (_a = chart.style.elementColors) === null || _a === void 0 ? void 0 : _a.forEach((elementColor, subIndex) => {
+                    const gradientId = getGradientId(chart.index, subIndex);
+                    gradients.push({
+                        id: gradientId,
+                        position: {
+                            x1: 0,
+                            y1: 0,
+                            x2: chartOrient === 'horizontal' ? 1 : 0,
+                            y2: chartOrient === 'horizontal' ? 0 : 1,
+                        },
+                        items: this.getGradientItems(gradientId, elementColor, keyAxisOrient),
+                    });
+                });
+            }
+        });
+        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)
+        }));
+    }
+    static calculateOpacityItem(indexItem, orientation) {
+        const maxOpacity = 0.3;
+        const minOpacity = 0;
+        if (orientation === 'bottom' || orientation === 'right')
+            return indexItem === 0 ? maxOpacity : minOpacity;
+        else
+            return indexItem === 0 ? minOpacity : maxOpacity;
+    }
+    ;
 }

package/lib/model/model.d.ts

@@ -12,6 +12,7 @@ export declare type DataOptions = {
 export declare type UnitsFromConfig = "%" | "px";
 export declare type ValueLabelAnchor = "start" | "middle" | "end";
 export declare type ValueLabelDominantBaseline = "hanging" | "middle" | "auto";
+export declare type GradientId = string;
 export declare type OptionsModel = TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel;
 export interface Model<O = OptionsModel> {
     blockCanvas: BlockCanvas;
@@ -42,6 +43,7 @@ interface GraphicNotationOptionsModel extends BasicOptionsModel {
     data: OptionsModelData;
     title: string;
     selectable: boolean;
+    defs: OptionsModelGradients;
 }
 export interface TwoDimensionalOptionsModel extends GraphicNotationOptionsModel {
     type: "2d";
@@ -80,6 +82,24 @@ export interface Field {
     name: string;
     format: DataType;
 }
+export interface OptionsModelGradients {
+    gradients: GradientDef[];
+}
+export interface GradientDef {
+    id: GradientId;
+    position: {
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+    };
+    items: {
+        id: string;
+        color: string;
+        offset: number;
+        opacity: number;
+    }[];
+}
 export interface IScaleModel {
     key: ScaleKeyModel;
     value: ScaleValueModel;
@@ -235,7 +255,24 @@ interface TwoDimensionalBarLikeChartModel {
 interface TwoDimensionalBarLikeChartViewModel {
     hatch: BarLikeChartHatchOptions;
 }
-export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel {
+interface TwoDimensionalAreaChartModel {
+    areaViewOptions: AreaChartViewOptions;
+}
+export interface AreaChartViewOptions {
+    fill: AreaViewFill;
+    borderLine: AreaViewBorderLine;
+}
+export declare type AreaViewFill = {
+    type: "paletteColor";
+} | {
+    type: "gradient";
+    ids: GradientId[];
+};
+export interface AreaViewBorderLine {
+    on: boolean;
+    colorStyle: ChartStyle;
+}
+export interface TwoDimensionalChartModel extends ChartModel, TwoDimensionalLineLikeChartModel, TwoDimensionalBarLikeChartModel, TwoDimensionalAreaChartModel {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartDataModel;
     index: number;

package/lib/model/notations/polar/polarModel.js

@@ -14,7 +14,8 @@ export class PolarModel {
             charts: this.getChartsModel(options.chart, modelInstance.dataModel.repository.getScopedRows().length, designerConfig.chartStyle),
             legend: modelInstance.canvasModel.legendCanvas.getModel(),
             tooltip: options.tooltip,
-            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows())
+            chartCanvas: this.getDonutSettings(designerConfig.canvas.chartOptions.donut, options.chart, modelInstance.dataModel.repository.getRawRows()),
+            defs: { gradients: [] },
         };
     }
     //TODO: type for returned value

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

@@ -1,7 +1,9 @@
-import { ChartLegendModel, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
+import { AreaChartViewOptions, ChartLegendModel, ChartStyle, GradientId, LineLikeChartDashOptions, LineLikeChartShapeOptions } from "../../model";
 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;
+export declare function getAreaViewOptions(chart: MdtChartsTwoDimensionalChart, chartIndex: number, style: ChartStyle): AreaChartViewOptions;
+export declare function getGradientId(chartIndex: number, subIndex: number): GradientId;

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

@@ -48,3 +48,23 @@ export function getWidthOfLegendMarkerByType(chartType) {
     if (chartType === "area")
         return styledElementValues.defaultLegendMarkerSizes.widthPx;
 }
+export function getAreaViewOptions(chart, chartIndex, style) {
+    var _a, _b, _c, _d, _e;
+    let gradientIds = [];
+    for (let index = 0; index < style.elementColors.length; index++) {
+        gradientIds.push(getGradientId(chartIndex, index));
+    }
+    const fill = ((_b = (_a = chart.areaStyles) === null || _a === void 0 ? void 0 : _a.gradient) === null || _b === void 0 ? void 0 : _b.on) ? { type: "gradient", ids: gradientIds }
+        : { type: "paletteColor" };
+    const borderLine = {
+        on: (_e = (_d = (_c = chart.areaStyles) === null || _c === void 0 ? void 0 : _c.borderLine) === null || _d === void 0 ? void 0 : _d.on) !== null && _e !== void 0 ? _e : false,
+        colorStyle: {
+            elementColors: style.elementColors,
+            opacity: 1
+        }
+    };
+    return { fill, borderLine };
+}
+export function getGradientId(chartIndex, subIndex) {
+    return `gradient-chart-${chartIndex}-sub-${subIndex}`;
+}

package/lib/model/notations/twoDimensionalModel.js

@@ -3,7 +3,7 @@ import { TwoDimensionalChartStyleModel } from "../chartStyleModel/twoDimensional
 import { AxisModel } from "../featuresModel/axisModel";
 import { ScaleAxisRecalcer } from "../featuresModel/scaleModel/scaleAxisRecalcer";
 import { ScaleModel } from "../featuresModel/scaleModel/scaleModel";
-import { getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
+import { getAreaViewOptions, getLegendMarkerOptions, parseDashStyles, parseShape } from "./twoDimensional/styles";
 import { getResolvedTitle } from "../../model/featuresModel/titleModel";
 import { calculateValueLabelAlignment, getValueLabelX, getValueLabelY } from "../../model/featuresModel/valueLabelsModel/valueLabelsModel";
 import { TwoDimensionalModelHelper } from "../helpers/twoDimensionalModelHelper";
@@ -23,6 +23,7 @@ export class TwoDimensionalModel {
             secondaryScaleValueInfo = secondaryScaleMarginRecalcer.getScaleValue();
         }
         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);
         return {
             legend: canvasModel.legendCanvas.getModel(),
             title: getResolvedTitle(options.title, modelInstance.dataModel.repository.getRawRows()),
@@ -32,11 +33,14 @@ export class TwoDimensionalModel {
             axis: Object.assign({ key: keyAxis, value: AxisModel.getMainValueAxis(options.orientation, options.axis.value.position, options.axis.value, designerConfig.canvas.axisLabel, canvasModel) }, (configReader.containsSecondaryAxis() && { valueSecondary: AxisModel.getSecondaryValueAxis(options.orientation, options.axis.value.position, options.axis.valueSecondary, designerConfig.canvas.axisLabel, canvasModel) })),
             type: options.type,
             data: Object.assign({}, options.data),
-            charts: this.getChartsModel(options.charts, configReader, options.orientation, designerConfig, modelInstance.dataModel.repository, keyAxis.orient, canvasModel, options.data.keyField.name),
+            charts,
             additionalElements: this.getAdditionalElements(options),
             tooltip: options.tooltip,
             chartSettings: this.getChartsSettings(designerConfig.canvas.chartOptions, options.orientation),
-            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } }
+            valueLabels: (_a = options.valueLabels) !== null && _a !== void 0 ? _a : { collision: { mode: "none" } },
+            defs: {
+                gradients: TwoDimensionalModelHelper.getGradientDefs(charts, keyAxis.orient, options.orientation)
+            }
         };
     }
     static getChartsEmbeddedLabelsFlag(charts, chartOrientation) {
@@ -67,7 +71,8 @@ export class TwoDimensionalModel {
         const chartsModel = [];
         charts.forEach((chart, index) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-            chartsModel.push(Object.assign({ type: chart.type, isSegmented: chart.isSegmented, data: Object.assign({}, chart.data), tooltip: chart.tooltip, cssClasses: ChartStyleModelService.getCssClasses(index), style: styleModel.getChartStyle(chart, index), embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation), markersOptions: {
+            const style = styleModel.getChartStyle(chart, index);
+            chartsModel.push(Object.assign(Object.assign({ type: chart.type, isSegmented: chart.isSegmented, data: Object.assign({}, chart.data), tooltip: chart.tooltip, cssClasses: ChartStyleModelService.getCssClasses(index), style, embeddedLabels: this.getEmbeddedLabelType(chart, chartOrientation), markersOptions: {
                     show: ({ row, valueFieldName }) => TwoDimensionalModelHelper.shouldMarkerShow(chart, dataModelRep.getRawRows(), valueFieldName, row, keyFieldName),
                     styles: {
                         highlighted: {
@@ -92,7 +97,7 @@ export class TwoDimensionalModel {
                     dominantBaseline: calculateValueLabelAlignment(keyAxisOrient).dominantBaseline,
                     format: configReader.getValueLabelFormatterForChart(index),
                 }
-            })));
+            })), { areaViewOptions: getAreaViewOptions(chart, index, style) }));
         });
         return chartsModel;
     }

package/lib/style/charts-main.css

@@ -1,4 +1,6 @@
-@import './css-vars.css';
+:root {
+	--chart-base-font-size: 13px;
+}
 
 .wrapper {
     margin: 0 auto;
@@ -11,6 +13,12 @@
     fill: none;
     stroke-width: 4;
 }
+
+.area-border-line {
+    fill: none;
+    stroke-width: 2;
+}
+
 .donut-block * {
     transition: filter 0.15s;
 }
@@ -157,7 +165,7 @@
     border-radius: 50%;
 }
 .tooltip-text-item {
-    font-family: "Roboto" sans-serif;
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     width: 100%;
     flex: 1;
@@ -276,3 +284,10 @@
     width: 100%;
     height: 100%;
 }
+
+/* Value Labels */
+.mdt-charts-value-label {
+    opacity: 0.5;
+    font-size: 10px;
+    letter-spacing: -0.4px;
+}

package/lib/style/charts-main.less

@@ -1,4 +1,6 @@
-@import (inline) './css-vars.css';
+:root {
+	--chart-base-font-size: 13px;
+}
 
 .wrapper {
     margin: 0 auto;
@@ -11,6 +13,12 @@
     fill: none;
     stroke-width: 4;
 }
+
+.area-border-line {
+    fill: none;
+    stroke-width: 2;
+}
+
 .donut-block * {
     transition: filter 0.15s;
 }
@@ -157,7 +165,7 @@
     border-radius: 50%;
 }
 .tooltip-text-item {
-    font-family: "Roboto" sans-serif;
+    font-family: "Roboto", sans-serif;
     font-style: normal;
     width: 100%;
     flex: 1;
@@ -276,3 +284,10 @@
     width: 100%;
     height: 100%;
 }
+
+/* Value Labels */
+.mdt-charts-value-label {
+    opacity: 0.5;
+    font-size: 10px;
+    letter-spacing: -0.4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdt-charts",
-  "version": "1.20.1",
+  "version": "1.21.1",
   "description": "",
   "main": "lib/main.js",
   "scripts": {
@@ -10,7 +10,7 @@
     "test": "jest",
     "build-lib": "shx rm -rf lib && npm run build-ts && npm run build-style",
     "build-ts": "npx tsc -p tsconfig.production.json",
-    "build-style": "shx mkdir lib/style && shx cp src/style/css-vars.css lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.less lib/style"
+    "build-style": "shx mkdir lib/style && shx cp src/style/charts-main.css lib/style && shx cp src/style/charts-main.css lib/style/charts-main.less"
   },
   "homepage": "https://github.com/VishulaKnow/charts",
   "author": "",

package/lib/style/css-vars.css

@@ -1,3 +0,0 @@
-:root {
-	--chart-base-font-size: 13px;
-}