@devexperts/dxcharts-lite 1.0.2 → 2.0.1

package/dist/chart/components/x_axis/time/x-axis-weights.functions.js

@@ -3,4 +3,146 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{calculateTextWidth as w}from"../../../utils/canvas/canvas-font-measure-tool.utils";import{XAxisTimeLabelsDrawer as W}from"../x-axis-time-labels.drawer";const d={lessThanSecond:0,second:100,minute:200,hour:300,day:400,"week-weekday":500,month:600,year:1e4};export const getWeightFromTimeFormat=e=>{switch(e.key){case"second":case"minute":case"hour":case"day":case"month":case"year":return d[e.key]+e.value;case"lessThanSecond":return d[e.key];case"week-weekday":return d[e.key]+(e.week==="$"?9:e.week)+e.weekday*10}},groupLabelsByWeight=e=>{const s={};return e.forEach(n=>{const t=s[n.weight];t===void 0?s[n.weight]=[n]:t.push(n)}),s},filterMapGroupedLabelsByCoverUpLevel=(e,s)=>{const n=Object.keys(e).map(o=>parseInt(o,10)).sort((o,i)=>i-o);let t=[];for(const o of n){const i=e[o];if(!i)continue;const c=[...t];t=[];const a=c.length,l=i.length;let r=0,h=1/0,p=-1/0;for(let g=0;g<l;g++){const y=i[g],u=y.idx;for(;r<a;){const k=c[r],x=k.idx;if(u>x)r++,t.push(k),p=x,h=1/0;else{h=x;break}}h-u>=s&&u-p>=s&&(t.push(y),p=u)}for(;r<a;)t.push(c[r]),r++}return t},overlappingPredicate=(e,s,n,t,o,i)=>{const c=W.getFontFromConfig(s),a=w(n.text,e,c),l=w(t.text,e,c),r=o.toX(n.value)+a/2;return o.toX(t.value)-l/2-r<i};
+import { calculateTextWidth } from '../../../utils/canvas/canvas-font-measure-tool.utils';
+import { XAxisTimeLabelsDrawer } from '../x-axis-time-labels.drawer';
+const timeFormatToWeightMap = {
+    lessThanSecond: 0,
+    second: 100,
+    minute: 200,
+    hour: 300,
+    day: 400,
+    'week-weekday': 500,
+    month: 600,
+    year: 10000,
+};
+/**
+ * Generates `weight` based on the {@link ParsedTimeFormat}
+ * @example
+ * const timeFormat: ParsedTimeFormat = {
+ *  key: 'day',
+ *  value: 15,
+ *  exact: false
+ * }
+ * const weight = getWeightFromTimeFormat(timeFormat); // 415
+ */
+export const getWeightFromTimeFormat = (format) => {
+    switch (format.key) {
+        case 'second':
+        case 'minute':
+        case 'hour':
+        case 'day':
+        case 'month':
+        case 'year':
+            return timeFormatToWeightMap[format.key] + format.value;
+        case 'lessThanSecond':
+            return timeFormatToWeightMap[format.key];
+        case 'week-weekday':
+            return timeFormatToWeightMap[format.key] + (format.week === '$' ? 9 : format.week) + format.weekday * 10;
+    }
+};
+/**
+ * Group {@link XAxisLabelWeighted} by `weight` in a `Record<number, XAxisLabelWeighted[]>`
+ * @example
+ * const groupedLabels = {
+ *		601: Array(359),
+ *		415: Array(1685),
+ *		...
+ * 	}
+ */
+export const groupLabelsByWeight = (weightedLabels) => {
+    const labelsGroupedByWeight = {};
+    weightedLabels.forEach(weightedLabel => {
+        const labelsByWeight = labelsGroupedByWeight[weightedLabel.weight];
+        if (labelsByWeight === undefined) {
+            labelsGroupedByWeight[weightedLabel.weight] = [weightedLabel];
+        }
+        else {
+            labelsByWeight.push(weightedLabel);
+        }
+    });
+    return labelsGroupedByWeight;
+};
+/**
+ * FilterMap grouped {@link XAxisLabelWeighted} labels by `coverUpLevel` value
+ *
+ * @see
+ * `coverUpLevel` - is a ratio, which tells us how much more space the widest label
+ * will take relative to the candle width
+ * @example
+ * const maxLabelWidthPx = 10;
+ * const meanCandleWidthPx = 5;
+ * const coverUpLevel = Math.round(10 / 5); // 2
+ *
+ * // `coverUpLebel = 2` means that label for a candle take `2x` more width
+ * // than the candle on the screen for that label.
+ * // That kind of fact give us a hint, that we can't draw labels for `i - 1` and `i + 1` candles,
+ * // because it wouldn't be enough space (`i` candle label will take all the place).
+ * // But we can draw labels for `i - 2` and `i + 2` candles.
+ * @see
+ * That algorightm do exactly that - it filters out labels (taking in mind its weight, weight is a priority) that couldn't be drawn
+ * because there's not enough space for them.
+ */
+export const filterMapGroupedLabelsByCoverUpLevel = (labelsGroupedByWeight, coverUpLevel) => {
+    const weights = Object.keys(labelsGroupedByWeight)
+        .map(item => parseInt(item, 10))
+        .sort((a, b) => b - a);
+    let labels = [];
+    // TODO: ADD COMMENTS, WE NEED COMMENTS
+    for (const weight of weights) {
+        const currentWeightLabels = labelsGroupedByWeight[weight];
+        if (!currentWeightLabels) {
+            continue;
+        }
+        const previousWeightLabels = [...labels];
+        labels = [];
+        const previousWeightLabelsLength = previousWeightLabels.length;
+        const currentWeightLength = currentWeightLabels.length;
+        let previousWeightLabelsPointer = 0;
+        let rightIndex = Infinity;
+        let leftIndex = -Infinity;
+        for (let i = 0; i < currentWeightLength; i++) {
+            const mark = currentWeightLabels[i];
+            const currentIndex = mark.idx;
+            while (previousWeightLabelsPointer < previousWeightLabelsLength) {
+                const lastMark = previousWeightLabels[previousWeightLabelsPointer];
+                const lastIndex = lastMark.idx;
+                if (currentIndex > lastIndex) {
+                    previousWeightLabelsPointer++;
+                    labels.push(lastMark);
+                    leftIndex = lastIndex;
+                    rightIndex = Infinity;
+                }
+                else {
+                    rightIndex = lastIndex;
+                    break;
+                }
+            }
+            if (rightIndex - currentIndex >= coverUpLevel && currentIndex - leftIndex >= coverUpLevel) {
+                labels.push(mark);
+                leftIndex = currentIndex;
+            }
+        }
+        while (previousWeightLabelsPointer < previousWeightLabelsLength) {
+            labels.push(previousWeightLabels[previousWeightLabelsPointer]);
+            previousWeightLabelsPointer++;
+        }
+    }
+    return labels;
+};
+/**
+ * The function compares 2 labels and checks if they overlap each other
+ * @param {CanvasRenderingContext2D} ctx - canvas context
+ * @param {FullChartConfig} config - chart config
+ * @param {NumericAxisLabel} label - first label to compare
+ * @param {NumericAxisLabel} nextLabel - second label to compare
+ * @param {ScaleModel} scaleModel - chart scale model
+ * @returns
+ */
+export const overlappingPredicate = (ctx, config, label, nextLabel, scale, overlapingDistance) => {
+    const font = XAxisTimeLabelsDrawer.getFontFromConfig(config);
+    const currentLabelTextWidth = calculateTextWidth(label.text, ctx, font);
+    const nextLabelTextWidth = calculateTextWidth(nextLabel.text, ctx, font);
+    const curPx = scale.toX(label.value) + currentLabelTextWidth / 2;
+    const nextPx = scale.toX(nextLabel.value) - nextLabelTextWidth / 2;
+    return nextPx - curPx < overlapingDistance;
+};

package/dist/chart/components/x_axis/time/x-axis-weights.generator.js

@@ -3,4 +3,76 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{typedEntries_UNSAFE as g}from"../../../utils/object.utils";import{timeFormatMatcherFactory as f}from"./parser/time-formats-matchers.functions";import{parseTimeFormatsFromKey as h}from"./parser/time-formats-parser.functions";import{validateParsedTimeFormat as l}from"./parser/time-formats-validators.functions";import{getWeightFromTimeFormat as p}from"./x-axis-weights.functions";const F=(o,m,e,n)=>{var r,t;const a=n(o.getTime()),i=n(m.getTime());for(const[c,s]of e)if(s(a,i))return c;return(t=(r=e[e.length-1])===null||r===void 0?void 0:r[0])!==null&&t!==void 0?t:0};export function mapCandlesToWeightedPoints(o,m,e){const n=new Array(o.length);let r=new Date(0);for(let t=0;t<o.length;t++){const a=o[t],i=new Date(a.candle.timestamp),c={weight:F(i,r,m,e)};n[t]=c,r=i}return n}export const generateWeightsMapForConfig=o=>{const m={},e={};return g(o).forEach(([n,r])=>{const t=h(n),a=t===null?!1:l(t);if(t&&a){const i=p(t);m[i]=r,e[i]=f(t)}}),{weightToTimeFormatsDict:m,weightToTimeFormatMatcherDict:e}};
+import { typedEntries_UNSAFE } from '../../../utils/object.utils';
+import { timeFormatMatcherFactory } from './parser/time-formats-matchers.functions';
+import { parseTimeFormatsFromKey } from './parser/time-formats-parser.functions';
+import { validateParsedTimeFormat } from './parser/time-formats-validators.functions';
+import { getWeightFromTimeFormat } from './x-axis-weights.functions';
+/**
+ * Returns the weight for a given date.
+ * Under the hood compares given date and previous date, to prevent generating the same label twice.
+ * It loops through the record of `weight` and corresponding {@link TimeFormatMatcher} pair, and tests the given date, if all the
+ * conditions are true, and it match some matcher, the weight returned for the given date.
+ * @see
+ * Weights order matters!
+ * @see
+ * returns `null` if date doesn't match any condition
+ */
+const getWeightByDate = (currentDate, previousDate, sortedWeights, tzOffset) => {
+    var _a, _b;
+    const offsetCurrentDate = tzOffset(currentDate.getTime());
+    const offsetPrevDate = tzOffset(previousDate.getTime());
+    for (const [weight, timeMatcher] of sortedWeights) {
+        if (timeMatcher(offsetCurrentDate, offsetPrevDate)) {
+            return weight;
+        }
+    }
+    // if date doesn't match any condition get the lowest weight
+    return (_b = (_a = sortedWeights[sortedWeights.length - 1]) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0;
+};
+/**
+ * Transforms {@link VisualCandle} to {@link WeightedPoint}
+ */
+export function mapCandlesToWeightedPoints(visualCandles, sortedWeights, tzOffset) {
+    const result = new Array(visualCandles.length);
+    // assume that candles` timestamp before the first visual candle is unreachable
+    let prevDate = new Date(0);
+    for (let i = 0; i < visualCandles.length; i++) {
+        const currentCandle = visualCandles[i];
+        const currentDate = new Date(currentCandle.candle.timestamp);
+        const currentWeightedPoint = {
+            weight: getWeightByDate(currentDate, prevDate, sortedWeights, tzOffset),
+        };
+        result[i] = currentWeightedPoint;
+        prevDate = currentDate;
+    }
+    return result;
+}
+/**
+ * Generates two maps for a given config.
+ * 1st map is { [weight]: [format] } to control which format should be used for a given weight;
+ * 2nd map is { [weight]: [Matcher] } to test a date for a match for a given weight;
+ *
+ * @example
+ * const config: Record<TimeFormatWithDuration, string> = {
+ *  'day_15': 'dd.MM',
+ *  'month_7!': 'MMM'
+ * }
+ * const { map1, map2 } = generateWeightsMapForConfig(config);
+ * // map1 = { 415: 'dd.MM', 607: 'MMM' };
+ * // map2 = { 415: DayMatcher, 607: MonthMatcher }
+ */
+export const generateWeightsMapForConfig = (config) => {
+    const weightToTimeFormatsDict = {};
+    const weightToTimeFormatMatcherDict = {};
+    typedEntries_UNSAFE(config).forEach(([item, format]) => {
+        const timeFormat = parseTimeFormatsFromKey(item);
+        const validFormat = timeFormat === null ? false : validateParsedTimeFormat(timeFormat);
+        if (timeFormat && validFormat) {
+            const weight = getWeightFromTimeFormat(timeFormat);
+            weightToTimeFormatsDict[weight] = format;
+            weightToTimeFormatMatcherDict[weight] = timeFormatMatcherFactory(timeFormat);
+        }
+    });
+    return { weightToTimeFormatsDict, weightToTimeFormatMatcherDict };
+};

package/dist/chart/components/x_axis/x-axis-draw.functions.js

@@ -3,4 +3,52 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{CanvasElement as A}from"../../canvas/canvas-bounds-container";import{redrawBackgroundArea as u}from"../../drawers/chart-background.drawer";const f={x:4,y:4};export function drawXAxisLabel(m,o,y,h,e){var i,r;const d=(i=e.alignType)!==null&&i!==void 0?i:"middle",{fontSize:l,fontFamily:p,padding:x}=h.components.xAxis,T=(r=x.top)!==null&&r!==void 0?r:0,t=y.getBounds(A.X_AXIS);o.save(),o.font=`bold ${l}px ${p}`;const a=o.measureText(e.text).width+f.x*2;let n=0;const s=e.x;switch(d){case"start":n=s-a;break;case"end":n=s;break;case"middle":default:n=s-a/2;break}u(m,o,n,t.y,a,t.height-1),d!=="middle"&&(o.strokeStyle=e.color,o.beginPath(),o.moveTo(s,t.y),o.lineTo(s,t.y+t.height),o.stroke()),o.fillStyle=e.color;const c=n+f.x,g=t.y+T+l;o.fillText(e.text,c,g),o.restore()}
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import { redrawBackgroundArea } from '../../drawers/chart-background.drawer';
+const DEFAULT_X_LABEL_PADDING = { x: 4, y: 4 };
+/**
+ * Draws the label on X axis.
+ * @param ctx
+ * @param canvasBoundsContainer
+ * @param config
+ * @param label
+ */
+export function drawXAxisLabel(backgroundCtx, ctx, canvasBoundsContainer, config, label) {
+    var _a, _b;
+    const alignType = (_a = label.alignType) !== null && _a !== void 0 ? _a : 'middle';
+    const { fontSize, fontFamily, padding } = config.components.xAxis;
+    const offsetTop = (_b = padding.top) !== null && _b !== void 0 ? _b : 0;
+    const xAxis = canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+    ctx.save();
+    ctx.font = `bold ${fontSize}px ${fontFamily}`;
+    const labelWidth = ctx.measureText(label.text).width;
+    const boxWidth = labelWidth + DEFAULT_X_LABEL_PADDING.x * 2;
+    let boxStart = 0;
+    const x = label.x;
+    switch (alignType) {
+        case 'start':
+            boxStart = x - boxWidth;
+            break;
+        case 'end':
+            boxStart = x;
+            break;
+        case 'middle':
+        default:
+            boxStart = x - boxWidth / 2;
+            break;
+    }
+    // label can overlap with regular x-axis label, so we need to hide regular x-axis label
+    redrawBackgroundArea(backgroundCtx, ctx, boxStart, xAxis.y, boxWidth, xAxis.height - 1);
+    if (alignType !== 'middle') {
+        ctx.strokeStyle = label.color;
+        ctx.beginPath();
+        ctx.moveTo(x, xAxis.y);
+        ctx.lineTo(x, xAxis.y + xAxis.height);
+        ctx.stroke();
+    }
+    ctx.fillStyle = label.color;
+    const xTextPos = boxStart + DEFAULT_X_LABEL_PADDING.x;
+    const yTextPos = xAxis.y + offsetTop + fontSize; // -2 for vertical adjustment
+    ctx.fillText(label.text, xTextPos, yTextPos);
+    ctx.restore();
+}

package/dist/chart/components/x_axis/x-axis-labels.drawer.js

@@ -3,4 +3,73 @@
  * This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  * If a copy of the MPL was not distributed with this file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-import{drawXAxisLabel as i}from"./x-axis-draw.functions";import{CanvasElement as r}from"../../canvas/canvas-bounds-container";import*as d from"color";import{fillRect as l}from"../../utils/canvas/canvas-drawing-functions.utils";export class XAxisLabelsDrawer{constructor(a,e,n,o,s){this.backgroundCanvasModel=a,this.config=e,this.canvasModel=n,this.canvasBoundsContainer=o,this.xAxisLabelsModel=s}draw(){const a=this.canvasModel.ctx;this.drawHighlightedBackgroundBetweenLabels(),this.xAxisLabelsModel.labels.forEach(e=>{i(this.backgroundCanvasModel.ctx,a,this.canvasBoundsContainer,this.config,e)})}drawHighlightedBackgroundBetweenLabels(){const a=this.canvasModel.ctx,e={},n=this.xAxisLabelsModel.labels.reduce((o,s)=>{if(s.subGroupId!==void 0){let t=o[s.subGroupId];t||(t=[],o[s.subGroupId]=t),t.push(s)}return o},e);Object.keys(n).forEach(o=>{const s=n[o];if(s.length===2){const t=this.canvasBoundsContainer.getBounds(r.X_AXIS);a.fillStyle=d.rgb(s[0].color).alpha(.1).toString(),l(a,{x:s[0].x,y:t.y},{x:s[1].x,y:t.y+t.height})}})}getCanvasIds(){return[this.canvasModel.canvasId]}}
+import { drawXAxisLabel } from './x-axis-draw.functions';
+import { CanvasElement } from '../../canvas/canvas-bounds-container';
+import Color from 'color';
+import { fillRect } from '../../utils/canvas/canvas-drawing-functions.utils';
+/**
+ * This drawer draws custom labels for X Axis, using labels from XAxisLabelModel.
+ * By default labels for drawings are drawn by this drawer.
+ */
+export class XAxisLabelsDrawer {
+    constructor(backgroundCanvasModel, config, canvasModel, canvasBoundsContainer, xAxisLabelsModel) {
+        this.backgroundCanvasModel = backgroundCanvasModel;
+        this.config = config;
+        this.canvasModel = canvasModel;
+        this.canvasBoundsContainer = canvasBoundsContainer;
+        this.xAxisLabelsModel = xAxisLabelsModel;
+    }
+    /**
+     * Draws the X axis labels on the canvas.
+     * @function
+     * @name draw
+     * @memberof XAxisLabelsDrawer
+     * @returns {void}
+     */
+    draw() {
+        const ctx = this.canvasModel.ctx;
+        this.drawHighlightedBackgroundBetweenLabels();
+        this.xAxisLabelsModel.labels.forEach(l => {
+            drawXAxisLabel(this.backgroundCanvasModel.ctx, ctx, this.canvasBoundsContainer, this.config, l);
+        });
+    }
+    // this is a very simple solution which matches 2 labels with same "subGroupId"
+    // in future we may want to change it, but for now it's enough
+    /**
+     * Draws a highlighted background between two labels with the same "subGroupId".
+     *
+     * @returns {void}
+     */
+    drawHighlightedBackgroundBetweenLabels() {
+        const ctx = this.canvasModel.ctx;
+        const initial = {};
+        const groupedLabels = this.xAxisLabelsModel.labels.reduce((acc, label) => {
+            if (label.subGroupId !== undefined) {
+                let group = acc[label.subGroupId];
+                if (!group) {
+                    group = [];
+                    acc[label.subGroupId] = group;
+                }
+                group.push(label);
+            }
+            return acc;
+        }, initial);
+        Object.keys(groupedLabels).forEach(subGroupId => {
+            const labels = groupedLabels[subGroupId];
+            // expect 2 labels only
+            if (labels.length === 2) {
+                const xAxisBounds = this.canvasBoundsContainer.getBounds(CanvasElement.X_AXIS);
+                ctx.fillStyle = Color.rgb(labels[0].color).alpha(0.1).toString();
+                fillRect(ctx, { x: labels[0].x, y: xAxisBounds.y }, { x: labels[1].x, y: xAxisBounds.y + xAxisBounds.height });
+            }
+        });
+    }
+    /**
+     * Returns an array with the ID of the canvas model.
+     *
+     * @returns {Array} An array with the ID of the canvas model.
+     */
+    getCanvasIds() {
+        return [this.canvasModel.canvasId];
+    }
+}

package/dist/chart/components/x_axis/x-axis-labels.generator.d.ts

@@ -45,7 +45,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private eventBus;
     private config;
     private chartModel;
-    private scaleModel;
+    private scale;
     private timeZoneModel;
     private canvasModel;
     private labelsGroupedByWeight;
@@ -56,7 +56,7 @@ export declare class XAxisTimeLabelsGenerator implements XAxisLabelsGenerator {
     private weightToTimeFormatMatcherArray;
     private weightToTimeFormatsDict;
     private extendedLabelsFilterConfig;
-    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scaleModel: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel);
+    constructor(eventBus: EventBus, config: FullChartConfig, chartModel: ChartModel, scale: ScaleModel, timeZoneModel: TimeZoneModel, canvasModel: CanvasModel);
     private getLabelsFromChartType;
     /**
      * Make a prediction(750) about how many candles we need to fake to fill all X axis by labels