mdt-charts 1.13.2 → 1.14.0

package/README.md

@@ -1,190 +1,2 @@
 # Charts
-**Demo**: https://vishulaknow.github.io/charts-demo/
-## Установка
-```
-npm install mdt-charts
-```
-## Импорт
-```js
-import { Chart } from "mdt-charts"
-```
-## Импорт TypeScript интерфейсов
-```ts
-import { Config, DesignerConfig } from "mdt-charts"
-```
-
-## Использование
-
-Для создания графика минимально требуется конфигуратор, конфигуратор дизайнера и данные.
-
-```ts
-const chart = new Chart(config, designerConfig, data);
-```
-
-### Конфигуратор
-
-Пример настроек для построения простого барчарта:
-
-```json
-{
-    "canvas": {
-        "class": "svg-chart outline",
-        "size": {
-            "width": 800,
-            "height": 400
-        }
-    },
-    "options": {
-        "title": "Количество автомобилей",
-        "type": "2d",
-        "isSegmented": false,
-        "axis": {
-            "key": {
-                "position": "end",
-                "ticks": {
-                    "flag": false
-                },
-                "visibility": true
-            },
-            "value": {
-                "domain": {
-                    "start": -1,
-                    "end": -1
-                },
-                "position": "start",
-                "ticks": {
-                    "flag": false
-                },
-                "visibility": true
-            }
-        },
-        "additionalElements": {
-            "gridLine": {
-                "flag": {
-                    "value": true,
-                    "key": true
-                }
-            }
-        },
-        "legend": {
-            "show": true
-        },
-        "orientation": "vertical",
-        "data": {
-            "dataSource": "dataSet",
-            "keyField": {
-                "name": "brand",
-                "format": "string"
-            }
-        },
-        "selectable": true,
-        "charts": [
-            {
-                "title": "Рост стоимости",
-                "type": "bar",
-                "data": {
-                    "valueFields": [
-                        {
-                            "name": "price",
-                            "format": "money",
-                            "title": "Заголовок"
-                        }
-                    ]
-                },
-                "tooltip": {
-                    "show": true
-                },
-                "markers": {
-                    "show": true
-                },
-                "embeddedLabels": "key"
-            }
-        ]
-    }
-}
-```
-
-### Конфигуратор дизайнера
-
-Пример рекомендованных значений для конфигуратора дизайнера:
-
-```ts
-const designerConfig: DesignerConfig = {
-    canvas: {
-        axisLabel: {
-            maxSize: {
-                main: 60
-            }
-        },
-        chartBlockMargin: {
-            top: 30,
-            bottom: 20,
-            left: 20,
-            right: 20
-        },
-        legendBlock: {
-            maxWidth: 200
-        },
-        chartOptions: {
-            bar: {
-                minBarWidth: 3,
-                maxBarWidth: 30,
-                groupMinDistance: 16,
-                barDistance: 8,
-                groupMaxDistance: 35
-            },
-            donut: {
-                padAngle: 0,
-                minThickness: 40,
-                maxThickness: 60,
-                aggregatorPad: 30
-            }
-        }
-    },
-    chartStyle: {
-        baseColors: ['#209de3', '#ff3131', '#ffba00', '#20b078']
-    },
-    elementsOptions: {
-        tooltip: {
-            position: 'followCursor'
-        }
-    },
-    dataFormat: {
-        formatters: (value: any, options: { type?: string; title?: string; empty?: string; } = {}) => {
-            var type = typeof value;
-            if ((value === undefined || value === null || value === "") && type != "boolean" && options.type != "boolean")
-                return value;
-            if (type == "boolean" || options.type == "boolean") {
-                return value.toString();
-            }
-            if (value instanceof Date) {
-                return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate() + ' ' + value.getHours() + ':' + value.getMinutes()
-            }
-            if (options.type === "markdown") {
-                return value.toString();
-            }
-            if ((options.type === "money" || options.type === "number")) {
-                return Intl.NumberFormat('ru-Ru', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(value);
-            }
-            return value;
-        }
-    }
-}
-```
-
-## Для разработчиков
-
-Для загрузки всех зависимостей использйте скрипт:
-
-```
-npm install
-```
-
-
-Для сборки плейграунда необходимо запустить скрипт:
-
-```
-npm run dev
-```
-
-Полученные файлы будут расположены в папке dist.
+**Demo**: https://vishulaknow.github.io/charts-demo/

package/lib/config/config.d.ts

@@ -123,11 +123,16 @@ interface AxisTicks {
 }
 export interface NumberAxisOptions extends AxisOptions {
     domain: NumberDomain;
+    labels?: NumberAxisLabel;
 }
 export interface NumberDomain {
     start: number;
     end: number;
 }
+export interface NumberAxisLabel {
+    format: (v: number) => string;
+}
+export declare type AxisLabelFormatter = (v: number) => string;
 export interface DiscreteAxisOptions extends AxisOptions {
     labels?: MdtChartsDiscreteAxisLabel;
 }
@@ -140,10 +145,7 @@ export interface IntervalAxis {
 }
 interface DateAxisOptions extends AxisOptions {
 }
-export interface MdtChartsCardValue {
-    field: string;
-    dataType?: DataType;
-}
+export declare type MdtChartsCardValue = MdtChartsField;
 export interface MdtChartsCardsChange {
     value: MdtChartsCardValue;
     color?: MdtChartsColorRangeItem[];
@@ -163,12 +165,32 @@ interface ChartSettings {
 interface Tooltip {
     show: boolean;
 }
-export interface MdtChartsTwoDimensionalChart extends ChartSettings {
+interface MdtChartsLineLikeChart {
+    markers: MarkersOptions;
+    lineStyles?: MdtChartsLineLikeChartStyles;
+}
+export interface MdtChartsLineLikeChartStyles {
+    dash?: MdtChartsLineLikeChartDashedStyles;
+}
+export interface MdtChartsLineLikeChartDashedStyles {
+    on: boolean;
+    dashSize?: number;
+    gapSize?: number;
+}
+interface MdtChartsBarLikeChart {
+    barStyles?: MdtChartsBarLikeChartStyles;
+}
+interface MdtChartsBarLikeChartStyles {
+    hatch?: MdtChartsBarLikeChartHatchedStyles;
+}
+interface MdtChartsBarLikeChartHatchedStyles {
+    on: boolean;
+}
+export interface MdtChartsTwoDimensionalChart extends ChartSettings, MdtChartsLineLikeChart, MdtChartsBarLikeChart {
     type: TwoDimensionalChartType;
     data: TwoDimensionalChartData;
     embeddedLabels: EmbeddedLabelType;
     isSegmented: boolean;
-    markers: MarkersOptions;
 }
 export interface PolarChart extends ChartSettings {
     type: PolarChartType;

package/lib/designer/designerConfig.d.ts

@@ -2,7 +2,11 @@ export declare type DataType = string;
 export declare type DataTypeOptions = {
     [option: string]: any;
 };
-export declare type Formatter = (value: any, options?: any) => string;
+export declare type Formatter = (value: any, options?: {
+    type?: string;
+    title?: string;
+    empty?: string;
+}) => string;
 export declare type TooltipPosition = 'followCursor' | 'fixed';
 export interface DesignerConfig {
     canvas: Canvas;
@@ -31,10 +35,15 @@ interface BlockMargin {
 }
 export interface LegendBlockCanvas {
     maxWidth: number | string;
+    static?: StaticLegendBlockCanvas;
 }
-interface ChartOptionsCanvas {
+export interface StaticLegendBlockCanvas {
+    maxLinesAmount: number;
+}
+export interface ChartOptionsCanvas {
     bar: BarOptionsCanvas;
     donut: DonutOptionsCanvas;
+    line?: LineOptionsCanvas;
 }
 export interface BarOptionsCanvas {
     minBarWidth: number;
@@ -53,6 +62,15 @@ export interface MdtChartsDonutThicknessOptions {
     max: number | string;
     value?: number | string;
 }
+interface LineOptionsCanvas {
+    shape?: MdtChartsLineLikeChartShape;
+}
+export declare type MdtChartsLineLikeChartCurveType = "monotone" | "none";
+export interface MdtChartsLineLikeChartShape {
+    curve?: {
+        type?: MdtChartsLineLikeChartCurveType;
+    };
+}
 interface DataFormat {
     formatters: Formatter;
 }

package/lib/engine/block/blockSvg.d.ts

@@ -9,6 +9,7 @@ export declare class BlockSvg {
     private parentBlockId;
     private parent;
     private svgCssClasses;
+    private hatchPatternDef;
     private readonly chartBlockClass;
     private readonly chartGroupClass;
     constructor(options: BlockSvgOptions);
@@ -21,6 +22,7 @@ export declare class BlockSvg {
     getClipPathId(): string;
     renderChartClipPath(margin: BlockMargin, blockSize: Size): void;
     updateChartClipPath(margin: BlockMargin, blockSize: Size): void;
-    private renderDefs;
+    renderBarHatchPattern(): void;
+    private ensureDefsRendered;
 }
 export {};

package/lib/engine/block/blockSvg.js

@@ -1,7 +1,9 @@
 import { NamesHelper } from "../helpers/namesHelper";
 import { BlockHelper } from "./blockHelper";
+import { HatchPatternDef } from "./defs";
 export class BlockSvg {
     constructor(options) {
+        this.hatchPatternDef = new HatchPatternDef();
         this.chartBlockClass = 'chart-block';
         this.chartGroupClass = 'chart-group';
         this.svgCssClasses = options.svgCssClasses;
@@ -41,7 +43,7 @@ export class BlockSvg {
     }
     renderChartClipPath(margin, blockSize) {
         const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
-        this.renderDefs()
+        this.ensureDefsRendered()
             .append('clipPath')
             .attr('id', this.getClipPathId())
             .append('rect')
@@ -52,7 +54,7 @@ export class BlockSvg {
     }
     updateChartClipPath(margin, blockSize) {
         const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
-        this.renderDefs()
+        this.ensureDefsRendered()
             .select('clipPath')
             .select('rect')
             .attr('x', attributes.x)
@@ -60,7 +62,10 @@ export class BlockSvg {
             .attr('width', attributes.width)
             .attr('height', attributes.height);
     }
-    renderDefs() {
+    renderBarHatchPattern() {
+        this.hatchPatternDef.appendToDefsBlock(this.ensureDefsRendered());
+    }
+    ensureDefsRendered() {
         let defs = this.getBlock().select('defs');
         if (defs.empty())
             defs = this.getBlock().append('defs');

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

@@ -0,0 +1,7 @@
+import { Selection } from "d3-selection";
+export declare class HatchPatternDef {
+    static getMaskValue(): string;
+    private static readonly hatchMaskUrl;
+    private readonly hatchPattern;
+    appendToDefsBlock(defsSelection: Selection<SVGDefsElement, unknown, HTMLElement, unknown>): void;
+}

package/lib/engine/block/defs.js

@@ -0,0 +1,18 @@
+export class HatchPatternDef {
+    constructor() {
+        this.hatchPattern = `
+    <pattern id="hatch-pattern" width="4" height="4" patternUnits="userSpaceOnUse"patternTransform="rotate(45)">
+        <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
+    </pattern>
+    <mask id="${HatchPatternDef.hatchMaskUrl}">
+        <rect x="0" y="0" width="100%" height="100%" fill="url(#hatch-pattern)" />
+    </mask>`;
+    }
+    static getMaskValue() {
+        return `url(#${this.hatchMaskUrl})`;
+    }
+    appendToDefsBlock(defsSelection) {
+        defsSelection.append("g").html(this.hatchPattern);
+    }
+}
+HatchPatternDef.hatchMaskUrl = "hatch-mask";

package/lib/engine/cardsNotation/card/cardService.js

@@ -5,8 +5,8 @@ export class CardServiceClass {
         return this.getValueContentFromRow(valueOptions, dataRow);
     }
     getValueContentFromRow(valueOptions, dataRow) {
-        const value = dataRow[valueOptions.field];
-        return ValueFormatter.formatField(valueOptions.dataType, value);
+        const value = dataRow[valueOptions.name];
+        return ValueFormatter.formatField(valueOptions.format, value);
     }
 }
 export const CardService = new CardServiceClass();

package/lib/engine/elementHighlighter/elementHighlighter.js

@@ -7,6 +7,7 @@ import { Donut } from '../polarNotation/donut/donut';
 import { MarkDot } from '../features/markDots/markDot';
 import { Helper } from '../helpers/helper';
 import * as chroma from 'chroma-js';
+import { NamesHelper } from '../helpers/namesHelper';
 export class ElementHighlighter {
     static toggleActivityStyle(elementSelection, isActive) {
         elementSelection.classed(this.inactiveElemClass, !isActive);
@@ -195,4 +196,4 @@ export class ElementHighlighter {
         });
     }
 }
-ElementHighlighter.inactiveElemClass = 'charts-opacity-inactive';
+ElementHighlighter.inactiveElemClass = NamesHelper.getClassName("opacity-inactive");

package/lib/engine/features/axis/axis.js

@@ -29,7 +29,7 @@ export class Axis {
             .select(`g.${axisCssClass}`);
     }
     static renderAxis(block, scale, scaleOptions, axisOptions, blockSize) {
-        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale, scaleOptions);
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scale);
         if (axisOptions.type === 'value' && (scaleOptions.type === 'linear' || scaleOptions.type === 'datetime'))
             AxisHelper.setLabelsSettings(axisGenerator, scale.range(), scaleOptions);
         const axisElement = block.getSvg()
@@ -50,11 +50,14 @@ export class Axis {
             AxisLabelHelper.alignLabelsInKeyAxis(axisOptions, axisElement);
             AxisLabelsEventManager.setHoverEvents(block, axisElement);
         }
+        if (axisOptions.type === "value") {
+            AxisLabelHelper.cropLabels(block, scale, scaleOptions, axisOptions, blockSize);
+        }
         if (axisOptions.labels.defaultTooltip)
             AxisLabelHelper.setTitles(axisElement);
     }
     static updateValueAxis(block, scaleValue, scaleOptions, axisOptions) {
-        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue, scaleOptions);
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleValue);
         AxisHelper.setLabelsSettings(axisGenerator, scaleValue.range(), scaleOptions);
         const axisElement = block.getSvg().select(`g.${axisOptions.cssClass}`);
         AxisDomHelper.updateAxisElement(axisGenerator, axisElement, axisOptions.translate, block.transitionManager.durations.chartUpdate)
@@ -64,7 +67,7 @@ export class Axis {
         });
     }
     static updateKeyAxis(block, scaleKey, scaleOptions, axisOptions, blockSize, domainNotUpdated) {
-        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey, scaleOptions);
+        const axisGenerator = AxisHelper.getBaseAxisGenerator(axisOptions, scaleKey);
         if (axisOptions.labels.position === 'rotated') { // Задание координат для перевернутых лейблов (если до этого они не были перевернуты)
             if (axisOptions.orient === 'bottom')
                 axisGenerator.tickPadding(-4);

package/lib/engine/features/axis/axisHelper.d.ts

@@ -1,9 +1,9 @@
 import { AxisScale, Axis as IAxis } from 'd3-axis';
-import { AxisModelOptions, Orient, ScaleKeyModel, ScaleValueModel } from "../../../model/model";
+import { AxisModelOptions, Orient, ScaleValueModel } from "../../../model/model";
 export declare class AxisHelper {
     static getAxisByOrient(orient: Orient, scale: AxisScale<any>): IAxis<any>;
     static setLabelsSettings(axisGenerator: IAxis<any>, range: number[], scaleOptions: ScaleValueModel): void;
-    static getBaseAxisGenerator(axisOptions: AxisModelOptions, scale: AxisScale<any>, scaleOptions: ScaleKeyModel | ScaleValueModel): IAxis<any>;
+    static getBaseAxisGenerator(axisOptions: AxisModelOptions, scale: AxisScale<any>): IAxis<any>;
     private static removeTicks;
     private static setNumTickFormat;
 }

package/lib/engine/features/axis/axisHelper.js

@@ -2,7 +2,7 @@ import { axisTop, axisBottom, axisLeft, axisRight } from 'd3-axis';
 import { max, min } from 'd3-array';
 import { format } from 'd3-format';
 import { AxisLabelHelper } from './axisLabelDomHelper';
-const MINIMAL_STEP_SIZE = 40;
+const MINIMAL_STEP_SIZE = 60;
 export class AxisHelper {
     static getAxisByOrient(orient, scale) {
         if (orient === 'top')
@@ -28,26 +28,21 @@ export class AxisHelper {
             }
         }
         if (scaleOptions.type === 'linear') {
-            axisGenerator.scale().ticks(ticksAmount).forEach((value) => {
-                if (format('~s')(value).indexOf('.') !== -1) {
-                    this.setNumTickFormat(axisGenerator, '.2s');
-                }
-            });
+            this.setNumTickFormat(axisGenerator, scaleOptions.formatter);
         }
     }
-    static getBaseAxisGenerator(axisOptions, scale, scaleOptions) {
+    static getBaseAxisGenerator(axisOptions, scale) {
         const axisGenerator = AxisHelper.getAxisByOrient(axisOptions.orient, scale);
         if (!axisOptions.ticks.flag)
             this.removeTicks(axisGenerator);
         AxisLabelHelper.setAxisLabelPaddingByOrient(axisGenerator, axisOptions);
-        if (scaleOptions.type === 'linear')
-            this.setNumTickFormat(axisGenerator);
         return axisGenerator;
     }
     static removeTicks(axis) {
         axis.tickSize(0);
     }
-    static setNumTickFormat(axis, formatName = '~s') {
-        axis.tickFormat(format(formatName));
+    static setNumTickFormat(axis, formatter) {
+        const defaultFormatter = format('~s');
+        axis.tickFormat(formatter !== null && formatter !== void 0 ? formatter : defaultFormatter);
     }
 }

package/lib/engine/features/axis/axisLabelDomHelper.js

@@ -38,17 +38,15 @@ export class AxisLabelHelper {
         }
     }
     static cropLabels(block, scale, scaleOptions, axisOptions, blockSize) {
-        if (scaleOptions.type === 'point' || scaleOptions.type === 'band') {
-            const axisTextBlocks = block.getSvg().select(`.${axisOptions.cssClass}`).selectAll('text');
-            let maxLabelSize;
-            if ((axisOptions.orient === 'left' || axisOptions.orient === 'right') || (axisOptions.type === 'key' && axisOptions.labels.position === 'rotated'))
-                maxLabelSize = axisOptions.labels.maxSize;
-            else
-                maxLabelSize = scale.step() - 4;
-            DomHelper.cropSvgLabels(axisTextBlocks, maxLabelSize);
-            if (scaleOptions.type === 'point' && axisOptions.labels.position === 'straight' && (axisOptions.orient === 'top' || axisOptions.orient === 'bottom')) {
-                this.cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize);
-            }
+        const axisTextBlocks = block.getSvg().select(`.${axisOptions.cssClass}`).selectAll('text');
+        let maxLabelSize;
+        if ((axisOptions.orient === 'left' || axisOptions.orient === 'right') || (axisOptions.type === 'key' && axisOptions.labels.position === 'rotated'))
+            maxLabelSize = axisOptions.labels.maxSize;
+        else
+            maxLabelSize = scale.step() - 4;
+        DomHelper.cropSvgLabels(axisTextBlocks, maxLabelSize);
+        if (scaleOptions.type === 'point' && axisOptions.labels.position === 'straight' && (axisOptions.orient === 'top' || axisOptions.orient === 'bottom')) {
+            this.cropAndAlignExtremeLabels(block, maxLabelSize, axisOptions, blockSize);
         }
     }
     static hideLabels(axisElement) {

package/lib/engine/features/legend/legend.d.ts

@@ -1,11 +1,13 @@
 import { BaseType, Selection } from "d3-selection";
 import { MdtChartsDataSource } from "../../../config/config";
-import { IntervalOptionsModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
+import { IntervalOptionsModel, LegendBlockModel, Model, PolarOptionsModel, TwoDimensionalOptionsModel } from "../../../model/model";
 import { Block } from "../../block/block";
 import { SelectionCondition } from "../../helpers/domHelper";
+import { ChartLegendEngineModel } from "./legendHelper";
 export interface LegendContentRenderingOptions {
     wrapperClasses: string[];
     shouldCropLabels: boolean;
+    blockModel: LegendBlockModel;
     itemsOptions: {
         wrapperClasses: string[];
         markerClass: string;
@@ -13,19 +15,22 @@ export interface LegendContentRenderingOptions {
     };
 }
 export declare class Legend {
+    static get(): Legend;
     static readonly objectClass = "legend-object";
     static readonly labelClass = "legend-label";
     static readonly itemClass = "legend-item";
-    static readonly markerClass = "legend-circle";
+    static readonly markerClass = "legend-marker";
+    static readonly markerCircle = "legend-circle";
     static readonly legendBlockClass = "legend-block";
-    static render(block: Block, data: MdtChartsDataSource, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel, model: Model): void;
-    static update(block: Block, data: MdtChartsDataSource, model: Model): void;
-    static updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel): void;
-    static getItemsByKeys(block: Block, keys: string[], condition?: SelectionCondition): Selection<HTMLDivElement, string, BaseType, unknown>;
-    private static setContent;
-    private static renderObject;
-    private static renderContent;
-    private static getObject;
-    private static removeContent;
-    private static fillCoordinate;
+    private readonly markerCreator;
+    render(block: Block, data: MdtChartsDataSource, options: TwoDimensionalOptionsModel | PolarOptionsModel, model: Model): void;
+    update(block: Block, data: MdtChartsDataSource, model: Model<TwoDimensionalOptionsModel | PolarOptionsModel>): void;
+    updateColors(block: Block, options: TwoDimensionalOptionsModel | PolarOptionsModel | IntervalOptionsModel): void;
+    static getItemsByKeys(block: Block, keys: string[], condition?: SelectionCondition): Selection<HTMLDivElement, ChartLegendEngineModel, BaseType, unknown>;
+    private setContent;
+    private renderObject;
+    private renderContent;
+    private getObject;
+    private removeContent;
+    private fillCoordinate;
 }