mdt-charts 1.9.11 → 1.10.3

package/lib/config/config.d.ts

@@ -0,0 +1,148 @@
+declare type DataType = string;
+export declare type AxisPosition = 'start' | 'end';
+export declare type ChartOrientation = 'vertical' | 'horizontal';
+export declare type ChartNotation = '2d' | 'polar' | 'interval';
+export declare type ChartType = 'bar' | 'line' | 'area' | 'donut' | 'gantt';
+export declare type TwoDimensionalChartType = 'line' | 'bar' | 'area';
+export declare type PolarChartType = 'donut';
+export declare type IntervalChartType = 'gantt';
+export declare type EmbeddedLabelType = 'none' | 'key' | 'value';
+export declare type TooltipHtml = (dataRow: MdtChartsDataRow) => string;
+export declare type MdtChartsDataRow = {
+    [field: string]: any;
+};
+export interface MdtChartsDataSource {
+    [source: string]: MdtChartsDataRow[];
+}
+export interface MdtChartsConfig {
+    canvas: ChartBlockCanvas;
+    options: PolarOptions | TwoDimensionalOptions | IntervalOptions;
+}
+export interface ChartBlockCanvas {
+    size: Size;
+    class: string;
+}
+export interface Size {
+    width: number;
+    height: number;
+}
+export interface NewSize {
+    width?: number;
+    height?: number;
+}
+interface Options {
+    legend: Legend;
+    data: DataOptions;
+    title: string;
+    selectable: boolean;
+    tooltip?: TooltipOptions;
+}
+export interface TwoDimensionalOptions extends Options {
+    type: '2d';
+    axis: TwoDimensionalAxis;
+    additionalElements: AdditionalElements;
+    charts: TwoDimensionalChart[];
+    orientation: ChartOrientation;
+}
+export interface PolarOptions extends Options {
+    type: 'polar';
+    chart: PolarChart;
+}
+export interface IntervalOptions extends Options {
+    type: 'interval';
+    axis: IntervalAxis;
+    chart: IntervalChart;
+    additionalElements: AdditionalElements;
+    orientation: ChartOrientation;
+}
+export interface Legend {
+    show: boolean;
+}
+export interface DataOptions {
+    dataSource: string;
+    keyField: MdtChartsField;
+}
+export interface MdtChartsField {
+    name: string;
+    format: DataType;
+}
+export interface ValueField extends MdtChartsField {
+    title: string;
+}
+export interface TooltipOptions {
+    html: TooltipHtml;
+}
+export interface AdditionalElements {
+    gridLine: GridLineOptions;
+}
+interface GridLineOptions {
+    flag: GridLineFlag;
+}
+interface GridLineFlag {
+    key: boolean;
+    value: boolean;
+}
+export interface TwoDimensionalAxis {
+    key: DiscreteAxisOptions;
+    value: NumberAxisOptions;
+}
+export interface AxisOptions {
+    visibility: boolean;
+    position: AxisPosition;
+    ticks: AxisTicks;
+}
+interface AxisTicks {
+    flag: boolean;
+}
+export interface NumberAxisOptions extends AxisOptions {
+    domain: NumberDomain;
+}
+export interface NumberDomain {
+    start: number;
+    end: number;
+}
+export interface DiscreteAxisOptions extends AxisOptions {
+}
+export interface IntervalAxis {
+    key: DiscreteAxisOptions;
+    value: DateAxisOptions;
+}
+interface DateAxisOptions extends AxisOptions {
+}
+interface ChartSettings {
+    tooltip: Tooltip;
+}
+interface Tooltip {
+    show: boolean;
+}
+export interface TwoDimensionalChart extends ChartSettings {
+    type: TwoDimensionalChartType;
+    data: TwoDimensionalChartData;
+    embeddedLabels: EmbeddedLabelType;
+    isSegmented: boolean;
+    markers: MarkersOptions;
+}
+export interface PolarChart extends ChartSettings {
+    type: PolarChartType;
+    data: PolarChartData;
+}
+export interface IntervalChart extends ChartSettings {
+    type: IntervalChartType;
+    data: IntervalChartData;
+}
+export interface TwoDimensionalChartData {
+    valueFields: ValueField[];
+}
+interface MarkersOptions {
+    show: boolean;
+}
+export declare type MdtChartsColorField = string;
+export interface PolarChartData {
+    valueField: ValueField;
+    colorField?: MdtChartsColorField;
+}
+interface IntervalChartData {
+    valueField1: ValueField;
+    valueField2: ValueField;
+}
+export {};

package/lib/config/config.js

@@ -0,0 +1 @@
+export {};

package/lib/designer/designerConfig.d.ts

@@ -0,0 +1,71 @@
+export declare type DataType = string;
+export declare type DataTypeOptions = {
+    [option: string]: any;
+};
+export declare type Formatter = (value: any, options?: any) => string;
+export declare type TooltipPosition = 'followCursor' | 'fixed';
+export interface DesignerConfig {
+    canvas: Canvas;
+    dataFormat: DataFormat;
+    chartStyle: ChartStyleConfig;
+    elementsOptions: ElementsOptions;
+    transitions?: Transitions;
+}
+interface Canvas {
+    axisLabel: AxisLabelCanvas;
+    chartBlockMargin: BlockMargin;
+    legendBlock: LegendBlockCanvas;
+    chartOptions: ChartOptionsCanvas;
+}
+export interface AxisLabelCanvas {
+    maxSize: AxisLabelSize;
+}
+interface AxisLabelSize {
+    main: number;
+}
+interface BlockMargin {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface LegendBlockCanvas {
+    maxWidth: number;
+}
+interface ChartOptionsCanvas {
+    bar: BarOptionsCanvas;
+    donut: DonutOptionsCanvas;
+}
+export interface BarOptionsCanvas {
+    minBarWidth: number;
+    maxBarWidth: number;
+    groupMinDistance: number;
+    groupMaxDistance: number;
+    barDistance: number;
+}
+export interface DonutOptionsCanvas {
+    padAngle: number;
+    minThickness: number;
+    maxThickness: number;
+    aggregatorPad: number;
+}
+interface DataFormat {
+    formatters: Formatter;
+}
+export interface ChartStyleConfig {
+    baseColors: string[];
+}
+export interface ElementsOptions {
+    tooltip: TooltipSettings;
+}
+export interface TooltipSettings {
+    position: TooltipPosition;
+}
+export interface Transitions {
+    chartUpdate?: number;
+    elementFadeOut?: number;
+    tooltipSlide?: number;
+    higlightedScale?: number;
+    markerHover?: number;
+}
+export {};

package/lib/designer/designerConfig.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,35 @@
+import { Selection, BaseType } from "d3-selection";
+import { Transitions } from "../../designer/designerConfig";
+import { BlockMargin } from "../../model/model";
+import { Scales } from "../features/scale/scale";
+import { FilterEventManager } from "../filterManager/filterEventManager";
+import { TransitionManager } from "../transitionManager";
+import { Size } from "../../config/config";
+export declare class Block {
+    parentElement: HTMLElement;
+    id: number;
+    transitionManager: TransitionManager;
+    scales: Scales;
+    filterEventManager: FilterEventManager;
+    private svgCssClasses;
+    private wrapperCssClasses;
+    private parentElementSelection;
+    private wrapper;
+    private readonly chartBlockClass;
+    private readonly chartGroupClass;
+    constructor(cssClass: string, parentElement: HTMLElement, blockId: number, filterEventManager: FilterEventManager, transitions?: Transitions);
+    renderSvg(blockSize: Size): void;
+    renderWrapper(blockSize: Size): void;
+    destroy(): void;
+    getSvg(): Selection<SVGElement, unknown, HTMLElement, any>;
+    getWrapper(): Selection<BaseType, unknown, HTMLElement, any>;
+    renderChartsBlock(): void;
+    getChartBlock(): Selection<SVGGElement, unknown, HTMLElement, any>;
+    getChartGroup(chartIndex: number): Selection<SVGGElement, any, BaseType, any>;
+    renderChartClipPath(margin: BlockMargin, blockSize: Size): void;
+    updateChartClipPath(margin: BlockMargin, blockSize: Size): void;
+    getClipPathId(): string;
+    renderDefs(): Selection<SVGDefsElement, unknown, HTMLElement, unknown>;
+    removeMouseEvents(): void;
+    clearWrapper(): void;
+}

package/lib/engine/block/block.js

@@ -0,0 +1,110 @@
+import { select } from "d3-selection";
+import { TipBox } from "../features/tipBox/tipBox";
+import { Helper } from "../helpers/helper";
+import { NamesHelper } from "../helpers/namesHelper";
+import { Donut } from "../polarNotation/donut/donut";
+import { TransitionManager } from "../transitionManager";
+import { BlockHelper } from "./blockHelper";
+export class Block {
+    constructor(cssClass, parentElement, blockId, filterEventManager, transitions = null) {
+        this.chartBlockClass = 'chart-block';
+        this.chartGroupClass = 'chart-group';
+        this.wrapperCssClasses = Helper.getCssClassesArray(cssClass);
+        this.svgCssClasses = Helper.getCssClassesArray(cssClass);
+        this.wrapperCssClasses = BlockHelper.getFormattedCssClassesForWrapper(this.wrapperCssClasses);
+        this.parentElement = parentElement;
+        this.parentElementSelection = select(parentElement);
+        this.id = blockId;
+        this.transitionManager = new TransitionManager(this, transitions);
+        this.filterEventManager = filterEventManager;
+    }
+    renderSvg(blockSize) {
+        this.getWrapper()
+            .append('svg')
+            .attr('width', blockSize.width)
+            .attr('height', blockSize.height)
+            .attr('class', this.svgCssClasses.join(' ') + ' ' + NamesHelper.getClassName('svg-chart'));
+    }
+    renderWrapper(blockSize) {
+        this.wrapper = this.parentElementSelection
+            .append('div')
+            .attr('class', this.wrapperCssClasses.join(' '))
+            .style('width', blockSize.width + 'px')
+            .style('height', blockSize.height + 'px')
+            .style('position', 'relative');
+    }
+    destroy() {
+        this.transitionManager.interruptTransitions();
+        this.removeMouseEvents();
+        this.getWrapper().remove();
+    }
+    getSvg() {
+        return this.getWrapper().select(`svg.${NamesHelper.getClassName('svg-chart')}`);
+    }
+    getWrapper() {
+        return this.wrapper;
+    }
+    renderChartsBlock() {
+        this.getSvg()
+            .append('g')
+            .attr('class', this.chartBlockClass);
+    }
+    getChartBlock() {
+        return this.getSvg().select(`.${this.chartBlockClass}`);
+    }
+    getChartGroup(chartIndex) {
+        let group = this.getChartBlock().select(`.${this.chartGroupClass}-${chartIndex}`);
+        if (group.empty()) {
+            group = this.getChartBlock()
+                .append('g')
+                .attr('class', `${this.chartGroupClass}-${chartIndex}`);
+        }
+        return group;
+    }
+    renderChartClipPath(margin, blockSize) {
+        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
+        this.renderDefs()
+            .append('clipPath')
+            .attr('id', this.getClipPathId())
+            .append('rect')
+            .attr('x', attributes.x)
+            .attr('y', attributes.y)
+            .attr('width', attributes.width)
+            .attr('height', attributes.height);
+    }
+    updateChartClipPath(margin, blockSize) {
+        const attributes = BlockHelper.getClipPathAttributes(blockSize, margin);
+        this.renderDefs()
+            .select('clipPath')
+            .select('rect')
+            .attr('x', attributes.x)
+            .attr('y', attributes.y)
+            .attr('width', attributes.width)
+            .attr('height', attributes.height);
+    }
+    getClipPathId() {
+        return NamesHelper.getId('clip-path', this.id);
+    }
+    renderDefs() {
+        let defs = this.getSvg()
+            .select('defs');
+        if (defs.empty())
+            defs = this.getSvg().append('defs');
+        return defs;
+    }
+    removeMouseEvents() {
+        const tipBoxes = this.getSvg().selectAll(`.${TipBox.tipBoxClass}`);
+        tipBoxes.on('mousemove', null);
+        tipBoxes.on('mouseover', null);
+        tipBoxes.on('mouseleave', null);
+        tipBoxes.on('click', null);
+        const arcItems = Donut.getAllArcGroups(this);
+        arcItems.on('mouseover', null);
+        arcItems.on('mouseleave', null);
+        arcItems.on('mousemove', null);
+        arcItems.on('click', null);
+    }
+    clearWrapper() {
+        this.getWrapper().selectAll('*').remove();
+    }
+}

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

@@ -0,0 +1,12 @@
+import { BlockMargin } from "../../model/model";
+import { Size } from "../../config/config";
+export interface ClipPathAttributes {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare class BlockHelper {
+    static getClipPathAttributes(blockSize: Size, margin: BlockMargin): ClipPathAttributes;
+    static getFormattedCssClassesForWrapper(cssClasses: string[]): string[];
+}

package/lib/engine/block/blockHelper.js

@@ -0,0 +1,19 @@
+import { Helper } from "../helpers/helper";
+export class BlockHelper {
+    static getClipPathAttributes(blockSize, margin) {
+        const outSize = 9;
+        return {
+            x: margin.left - outSize,
+            y: margin.top - outSize,
+            width: Helper.getValueOrZero(blockSize.width - margin.left - margin.right) + outSize * 2,
+            height: Helper.getValueOrZero(blockSize.height - margin.top - margin.bottom) + outSize * 2
+        };
+    }
+    static getFormattedCssClassesForWrapper(cssClasses) {
+        const wrapperClasses = [];
+        cssClasses.forEach(cssClass => {
+            wrapperClasses.push(cssClass + '-wrapper');
+        });
+        return wrapperClasses;
+    }
+}

package/lib/engine/colorReader/colorReader.d.ts

@@ -0,0 +1,10 @@
+import { MdtChartsDataRow } from "../../config/config";
+import { PolarChartModel } from "../../model/model";
+export declare class ColorReaderClass {
+    getColorForArc(row: MdtChartsDataRow, chart: PolarChartModel, arcIndex: number): any;
+    getChartColorField(chart: PolarChartModel): string;
+    isNeedReadFromData(chart: PolarChartModel): boolean;
+    private getColorFromData;
+    private getColorFromPalette;
+}
+export declare const ColorReader: ColorReaderClass;

package/lib/engine/colorReader/colorReader.js

@@ -0,0 +1,21 @@
+export class ColorReaderClass {
+    getColorForArc(row, chart, arcIndex) {
+        if (chart.data.colorField) {
+            return this.getColorFromData(row, chart.data.colorField);
+        }
+        return this.getColorFromPalette(chart.style.elementColors, arcIndex);
+    }
+    getChartColorField(chart) {
+        return chart.data.colorField;
+    }
+    isNeedReadFromData(chart) {
+        return !!this.getChartColorField(chart);
+    }
+    getColorFromData(row, colorField) {
+        return row[colorField];
+    }
+    getColorFromPalette(colorPalette, arcIndex) {
+        return colorPalette[arcIndex % colorPalette.length];
+    }
+}
+export const ColorReader = new ColorReaderClass();

package/lib/engine/contentManager.d.ts

@@ -0,0 +1,9 @@
+import { Model } from "../model/model";
+import Engine from "./engine";
+import { Block } from "./block/block";
+import { MdtChartsDataSource } from "../config/config";
+export declare class ContentManager {
+    static render(model: Model, data: MdtChartsDataSource, engine: Engine): void;
+    static updateData(block: Block, model: Model, newData: MdtChartsDataSource): void;
+    static updateColors(engine: Engine, model: Model): void;
+}

package/lib/engine/contentManager.js

@@ -0,0 +1,29 @@
+import { TwoDimensionalManager } from "./twoDimensionalNotation/twoDimensionalManager";
+import { PolarManager } from "./polarNotation/polarManager";
+import { IntervalManager } from "./intervalNotation/intervalManager";
+export class ContentManager {
+    static render(model, data, engine) {
+        if (model.options.type === '2d')
+            TwoDimensionalManager.render(engine, model);
+        else if (model.options.type === 'polar')
+            PolarManager.render(engine, model);
+        else if (model.options.type === 'interval')
+            IntervalManager.render(engine.block, model, data);
+    }
+    static updateData(block, model, newData) {
+        if (model.options.type === '2d') {
+            TwoDimensionalManager.updateData(block, model, newData);
+        }
+        else if (model.options.type === 'polar') {
+            PolarManager.update(block, model, newData);
+        }
+    }
+    static updateColors(engine, model) {
+        if (model.options.type === '2d') {
+            TwoDimensionalManager.updateColors(engine.block, model);
+        }
+        else if (model.options.type === 'polar') {
+            PolarManager.updateColors(engine.block, model);
+        }
+    }
+}

package/lib/engine/elementHighlighter/elementHighlighter.d.ts

@@ -0,0 +1,30 @@
+import { Selection, BaseType } from 'd3-selection';
+import { PieArcDatum } from 'd3-shape';
+import { BlockMargin, TwoDimensionalChartModel } from "../../model/model";
+import { Block } from "../block/block";
+import { MdtChartsDataRow, Size, TwoDimensionalChartType } from '../../config/config';
+export declare class ElementHighlighter {
+    private static inactiveElemClass;
+    static toggleActivityStyle(elementSelection: Selection<BaseType, unknown, BaseType, unknown>, isActive: boolean): void;
+    /**
+     * @param blurPercent процент от макс. размера блюра
+     */
+    static setShadowFilter(elemSelection: Selection<BaseType, any, BaseType, any>, blurPercent?: number): void;
+    static removeFilter(elemSelection: Selection<BaseType, any, BaseType, any>): void;
+    static removeShadowClone(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, margin: BlockMargin, blockSize: Size, donutThickness: number): void;
+    static removeCloneForElem(block: Block, keyFieldName: string, selectedSegment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>): void;
+    static removeDonutArcClones(block: Block): void;
+    static renderArcCloneAndHighlight(block: Block, margin: BlockMargin, arcSelection: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, blockSize: Size, donutThickness: number): void;
+    static toggleDonutHighlightState(segment: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, margin: BlockMargin, blockSize: Size, donutThickness: number, transitionDuration: number, on: boolean): Promise<any>;
+    static removeDonutHighlightingByKeys(arcSegments: Selection<SVGGElement, PieArcDatum<MdtChartsDataRow>, BaseType, unknown>, keyFieldName: string, keyValues: string[], margin: BlockMargin, blockSize: Size, donutThickness: number): void;
+    static setInactiveFor2D(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[]): void;
+    static toggleMarkDotVisible(markDots: Selection<BaseType, any, BaseType, any>, isHighlight: boolean): void;
+    static remove2DChartsFullHighlighting(block: Block, charts: TwoDimensionalChartModel[], transitionDuration?: number): void;
+    static removeUnselected2DHighlight(block: Block, keyFieldName: string, charts: TwoDimensionalChartModel[], transitionDuration: number): void;
+    static toggle2DElements(elemSelection: Selection<BaseType, any, BaseType, any>, isHighlight: boolean, chartType: TwoDimensionalChartType, transitionDuration: number): void;
+    private static makeArcClone;
+    private static makeArcShadow;
+    private static renderDonutSegmentClone;
+    private static toggleBar;
+    private static toggleDot;
+}