@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/heatmapSeries.js

@@ -0,0 +1,152 @@
+import Component from "./component";
+import { hexToRGB } from "../helpers/color";
+import { getDataLabelsOptions } from "../helpers/dataLabels";
+import { getColorRatio, getSpectrumColor, makeDistances } from "../helpers/colorSpectrum";
+import { deepMergedCopy, isNull, isNumber } from "../helpers/utils";
+import { boxDefault } from "../helpers/theme";
+import { message } from "../message";
+export default class HeatmapSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.activatedResponders = [];
+        this.onMouseoutComponent = () => {
+            this.emitMouseEvent([]);
+        };
+        this.selectSeries = ({ index, seriesIndex, state, }) => {
+            var _a;
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const dataSize = (_a = state.series.heatmap) === null || _a === void 0 ? void 0 : _a[0].data.length;
+            const responderIndex = seriesIndex * dataSize + index;
+            const model = this.responders[responderIndex];
+            if (!model) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getRespondersWithTheme([model], 'select'),
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = ({ index, seriesIndex, state }) => {
+            var _a;
+            if (!isNumber(index) || !isNumber(seriesIndex)) {
+                return;
+            }
+            const dataSize = (_a = state.series.heatmap) === null || _a === void 0 ? void 0 : _a[0].data.length;
+            const responderIndex = seriesIndex * dataSize + index;
+            const model = this.responders[responderIndex];
+            if (model) {
+                this.emitMouseEvent([model]);
+            }
+        };
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'heatmap';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    render(chartState) {
+        const { layout, heatmapSeries, axes, theme, colorValueScale, options } = chartState;
+        if (!heatmapSeries) {
+            throw new Error(message.noDataError(this.name));
+        }
+        this.theme = theme.series.heatmap;
+        this.selectable = this.getSelectableOption(options);
+        this.rect = layout.plot;
+        const cellSize = {
+            height: axes.yAxis.tickDistance,
+            width: axes.xAxis.tickDistance,
+        };
+        this.models = {
+            series: this.renderHeatmapSeries(heatmapSeries, cellSize, colorValueScale),
+        };
+        if (getDataLabelsOptions(options, this.name).visible) {
+            this.renderDataLabels(this.makeDataLabels());
+        }
+        this.responders = this.makeHeatmapSeriesResponder();
+    }
+    makeDataLabels() {
+        const dataLabelTheme = this.theme.dataLabels;
+        return this.models.series.reduce((acc, m) => {
+            return isNull(m.colorValue)
+                ? acc
+                : [
+                    ...acc,
+                    Object.assign(Object.assign({}, m), { type: 'treemapSeriesName', value: m.colorValue, direction: 'left', plot: { x: 0, y: 0, size: 0 }, theme: Object.assign(Object.assign({}, dataLabelTheme), { color: dataLabelTheme.useSeriesColor ? m.color : dataLabelTheme.color }) }),
+                ];
+        }, []);
+    }
+    makeHeatmapSeriesResponder() {
+        return this.models.series.reduce((acc, model) => {
+            return isNull(model.colorValue)
+                ? acc
+                : [
+                    ...acc,
+                    Object.assign(Object.assign({}, model), { data: Object.assign(Object.assign({}, model), { label: model.name, value: model.colorValue, templateType: 'heatmap' }), thickness: boxDefault.HOVER_THICKNESS, style: ['shadow'] }),
+                ];
+        }, []);
+    }
+    renderHeatmapSeries(seriesData, cellSize, colorValueScale) {
+        const { startColor, endColor, borderColor, borderWidth } = this.theme;
+        const startRGB = hexToRGB(startColor);
+        const distances = makeDistances(startRGB, hexToRGB(endColor));
+        const { height, width } = cellSize;
+        return seriesData.flatMap((data) => {
+            return data.flatMap((datum) => {
+                const { indexes, colorValue, category } = datum;
+                const name = `${category.x}, ${category.y}`;
+                const [xIndex, yIndex] = indexes;
+                const colorRatio = getColorRatio(colorValueScale.limit, colorValue);
+                const color = isNull(colorValue)
+                    ? 'rgba(0, 0, 0, 0)'
+                    : getSpectrumColor(colorRatio, distances, startRGB);
+                const thickness = borderWidth;
+                return {
+                    type: 'rect',
+                    name,
+                    width: width - thickness * 2,
+                    height: height - thickness * 2,
+                    x: width * xIndex + thickness,
+                    y: height * yIndex + thickness,
+                    colorValue,
+                    colorRatio,
+                    color,
+                    thickness,
+                    borderColor,
+                };
+            });
+        });
+    }
+    getRespondersWithTheme(responders, type) {
+        return responders.map((responder) => deepMergedCopy(responder, Object.assign(Object.assign({}, this.theme[type]), { style: ['shadow'] })));
+    }
+    onClick({ responders }) {
+        if (this.selectable) {
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getRespondersWithTheme(responders, 'select'),
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+    onMousemove({ responders }) {
+        this.activatedResponders = responders;
+        this.emitMouseEvent(responders);
+    }
+    emitMouseEvent(responders) {
+        this.eventBus.emit('renderHoveredSeries', {
+            models: this.getRespondersWithTheme(responders, 'hover'),
+            name: this.name,
+        });
+        this.eventBus.emit('seriesPointHovered', {
+            models: responders,
+            name: this.name,
+        });
+        this.eventBus.emit('renderSpectrumTooltip', responders);
+        this.eventBus.emit('needDraw');
+    }
+}

package/dist/esm/component/hoveredSeries.d.ts

@@ -0,0 +1,27 @@
+import Component from "./component";
+import { ChartState, Options } from "../../types/store/store";
+import { TooltipModelName } from "../../types/components/tooltip";
+import { CircleResponderModel, ResponderModel, BoxPlotResponderModel } from "../../types/components/series";
+import { LineModel } from "../../types/components/axis";
+import { ResponderSeriesModel } from "./selectedSeries";
+export declare type HoveredSeriesModel = ResponderSeriesModel & {
+    guideLine: LineModel[];
+};
+export default class HoveredSeries extends Component {
+    models: HoveredSeriesModel;
+    isShow: boolean;
+    modelForGuideLine: CircleResponderModel | BoxPlotResponderModel;
+    getSeriesModels(type?: TooltipModelName): any[];
+    hasGuideLine(): boolean;
+    getModelForGuideLine(name: TooltipModelName): any;
+    renderHoveredSeries: ({ models, name, eventDetectType, }: {
+        models: ResponderModel[];
+        name: TooltipModelName;
+        eventDetectType?: "grouped" | "point" | "near" | "nearest" | undefined;
+    }) => void;
+    private renderGroupedModels;
+    renderGuideLineModel(model: CircleResponderModel | BoxPlotResponderModel): LineModel;
+    resetHoveredSeries: () => void;
+    initialize(): void;
+    render({ layout }: ChartState<Options>): void;
+}

package/dist/esm/component/hoveredSeries.js

@@ -0,0 +1,95 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Component from "./component";
+import { crispPixel } from "../helpers/calculator";
+import { isUndefined, includes } from "../helpers/utils";
+import { isSameSeriesResponder } from "../helpers/responders";
+import { makeObservableObjectToNormal } from "../store/reactive";
+const guideLineType = {
+    line: 'circle',
+    area: 'circle',
+    boxPlot: 'boxPlot',
+};
+export default class HoveredSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { guideLine: [] };
+        this.isShow = false;
+        this.renderHoveredSeries = ({ models, name, eventDetectType, }) => {
+            var _a, _b;
+            const prevModels = this.getSeriesModels(name);
+            this.models[name] = [...models];
+            this.isShow = !!this.getSeriesModels().length;
+            const isSame = !!((_a = prevModels) === null || _a === void 0 ? void 0 : _a.length) &&
+                !!models.length &&
+                isSameSeriesResponder({ models, comparisonModel: prevModels, eventDetectType, name });
+            if (((_b = prevModels) === null || _b === void 0 ? void 0 : _b.length) && !models.length) {
+                this.eventBus.emit('unhoverSeries', makeObservableObjectToNormal(prevModels));
+            }
+            else if (models.length && !isSame) {
+                this.eventBus.emit('hoverSeries', makeObservableObjectToNormal(models));
+            }
+            this.modelForGuideLine = this.getModelForGuideLine(name);
+            if (eventDetectType === 'grouped') {
+                this.renderGroupedModels(name);
+            }
+        };
+        this.resetHoveredSeries = () => {
+            this.models = { guideLine: [] };
+        };
+    }
+    getSeriesModels(type) {
+        var _a;
+        const _b = this.models, { guideLine } = _b, models = __rest(_b, ["guideLine"]);
+        return (_a = (type ? models[type] : Object.values(models))) === null || _a === void 0 ? void 0 : _a.flatMap((val) => val);
+    }
+    hasGuideLine() {
+        const [rectModel] = this.getSeriesModels().filter(({ type }) => type === 'rect');
+        return !isUndefined(this.modelForGuideLine) && isUndefined(rectModel);
+    }
+    getModelForGuideLine(name) {
+        return this.getSeriesModels().filter(({ type }) => type === guideLineType[name])[0];
+    }
+    renderGroupedModels(name) {
+        if (includes(Object.keys(guideLineType), name)) {
+            if (this.isShow && this.hasGuideLine()) {
+                this.models.guideLine = [this.renderGuideLineModel(this.modelForGuideLine)];
+            }
+            else {
+                this.models.guideLine = [];
+            }
+        }
+    }
+    renderGuideLineModel(model) {
+        const x = crispPixel(model.type === 'boxPlot' && model.boxPlotDetection
+            ? model.boxPlotDetection.x + model.boxPlotDetection.width / 2
+            : model.x);
+        return {
+            type: 'line',
+            x,
+            y: 0,
+            x2: x,
+            y2: this.rect.height,
+            strokeStyle: '#ddd',
+            lineWidth: 1,
+        };
+    }
+    initialize() {
+        this.type = 'hoveredSeries';
+        this.name = 'hoveredSeries';
+        this.eventBus.on('renderHoveredSeries', this.renderHoveredSeries);
+        this.eventBus.on('resetHoveredSeries', this.resetHoveredSeries);
+    }
+    render({ layout }) {
+        this.rect = layout.plot;
+    }
+}

package/dist/esm/component/legend.d.ts

@@ -0,0 +1,26 @@
+import Component from "./component";
+import { ChartState, Options, Legend as LegendType, LegendDataList } from "../../types/store/store";
+import { LegendData, LegendModel } from "../../types/components/legend";
+import { RectResponderModel } from "../../types/components/series";
+import { LegendTheme } from "../../types/theme";
+export default class Legend extends Component {
+    models: LegendModel[];
+    responders: RectResponderModel[];
+    theme: Required<LegendTheme>;
+    activatedResponders: RectResponderModel[];
+    seriesColorMap: Record<string, string>;
+    seriesIconTypeMap: Record<string, string>;
+    onClick({ responders }: {
+        responders: RectResponderModel[];
+    }): void;
+    onClickCheckbox: (responders: any) => void;
+    onClickLabel: (responders: any) => void;
+    initialize(): void;
+    initColorAndIconTypeMap(legendData: LegendDataList): void;
+    getXPositionWhenVerticalAlign(data: LegendDataList): number[][];
+    getXPositionWhenHorizontalAlign(data: LegendDataList): number[][];
+    renderLegendModel(legend: LegendType): LegendModel[];
+    makeCheckboxResponder(data: LegendData[], showCheckbox: boolean): RectResponderModel[];
+    makeLabelResponder(data: LegendData[], showCheckbox: boolean): RectResponderModel[];
+    render({ layout, legend, theme }: ChartState<Options>): void;
+}

package/dist/esm/component/legend.js

@@ -0,0 +1,149 @@
+import Component from "./component";
+import { getLegendItemHeight, LEGEND_CHECKBOX_SIZE, LEGEND_ICON_SIZE, LEGEND_ITEM_MARGIN_X, LEGEND_MARGIN_X, } from "../brushes/legend";
+import { getTextWidth } from "../helpers/calculator";
+import { isVerticalAlign, padding } from "../store/layout";
+import { isUndefined } from "../helpers/utils";
+import { getTitleFontString } from "../helpers/style";
+import { makeObservableObjectToNormal } from "../store/reactive";
+export default class Legend extends Component {
+    constructor() {
+        super(...arguments);
+        this.activatedResponders = [];
+        this.seriesColorMap = {};
+        this.seriesIconTypeMap = {};
+        this.onClickCheckbox = (responders) => {
+            const { label, checked } = responders[0];
+            this.store.dispatch('setAllLegendActiveState', true);
+            this.store.dispatch('setLegendCheckedState', { name: label, checked: !checked });
+            if (checked) {
+                this.store.dispatch('disableSeries', label);
+            }
+            else {
+                this.store.dispatch('enableSeries', label);
+            }
+            this.eventBus.emit('needDraw');
+        };
+        this.onClickLabel = (responders) => {
+            const { label } = responders[0];
+            this.eventBus.emit('resetSelectedSeries');
+            if (this.activatedResponders.length && this.activatedResponders[0].label === label) {
+                this.store.dispatch('setAllLegendActiveState', true);
+                this.activatedResponders = [];
+            }
+            else {
+                this.store.dispatch('setAllLegendActiveState', false);
+                this.store.dispatch('setLegendActiveState', { name: label, active: true });
+                this.activatedResponders = responders;
+            }
+            this.eventBus.emit('needDraw');
+        };
+    }
+    onClick({ responders }) {
+        var _a;
+        if (responders.length) {
+            const { data } = responders[0];
+            if (((_a = data) === null || _a === void 0 ? void 0 : _a.name) === 'checkbox') {
+                this.eventBus.emit('clickLegendCheckbox', makeObservableObjectToNormal(responders));
+            }
+            else {
+                this.eventBus.emit('clickLegendLabel', makeObservableObjectToNormal(responders));
+            }
+        }
+    }
+    initialize() {
+        this.type = 'legend';
+        this.name = 'legend';
+        this.eventBus.on('clickLegendCheckbox', this.onClickCheckbox);
+        this.eventBus.on('clickLegendLabel', this.onClickLabel);
+    }
+    initColorAndIconTypeMap(legendData) {
+        this.seriesColorMap = {};
+        this.seriesIconTypeMap = {};
+        legendData.forEach(({ label, color, iconType }) => {
+            this.seriesColorMap[label] = color;
+            this.seriesIconTypeMap[label] = iconType;
+        });
+    }
+    getXPositionWhenVerticalAlign(data) {
+        const { offset, rowWidths } = data.reduce((acc, datum) => {
+            const { rowIndex, columnIndex, width } = datum;
+            if (isUndefined(acc.rowWidths[rowIndex])) {
+                acc.rowWidths[rowIndex] = 0;
+                acc.offset[rowIndex] = [0];
+            }
+            acc.rowWidths[rowIndex] += width + (columnIndex ? LEGEND_ITEM_MARGIN_X : 0);
+            acc.offset[rowIndex][columnIndex + 1] =
+                acc.offset[rowIndex][columnIndex] + LEGEND_ITEM_MARGIN_X + width;
+            return acc;
+        }, { offset: [], rowWidths: [] });
+        const { width } = this.rect;
+        rowWidths.forEach((rowWidth, rowIndex) => {
+            const xMargin = (width - rowWidth) / 2;
+            offset[rowIndex] = offset[rowIndex].map((xOffset) => xOffset + xMargin);
+        });
+        return offset;
+    }
+    getXPositionWhenHorizontalAlign(data) {
+        const maxWidths = data.reduce((acc, datum) => {
+            const { columnIndex, width } = datum;
+            if (isUndefined(acc[columnIndex])) {
+                acc[columnIndex] = 0;
+            }
+            acc[columnIndex] = Math.max(acc[columnIndex], width);
+            return acc;
+        }, []);
+        return data.reduce((acc, datum) => {
+            const { rowIndex, columnIndex } = datum;
+            if (isUndefined(acc[rowIndex])) {
+                acc[rowIndex] = [0];
+            }
+            acc[rowIndex][columnIndex + 1] =
+                acc[rowIndex][columnIndex] + LEGEND_ITEM_MARGIN_X + maxWidths[columnIndex];
+            return acc;
+        }, []);
+    }
+    renderLegendModel(legend) {
+        const { data, showCheckbox, align, useScatterChartIcon } = legend;
+        const verticalAlign = isVerticalAlign(align);
+        const itemHeight = getLegendItemHeight(this.theme.label.fontSize);
+        const xPosition = verticalAlign
+            ? this.getXPositionWhenVerticalAlign(data)
+            : this.getXPositionWhenHorizontalAlign(data);
+        return [
+            Object.assign({ type: 'legend', align,
+                showCheckbox, data: data.map((datum) => {
+                    var _a;
+                    const { label, iconType, rowIndex, columnIndex } = datum;
+                    return Object.assign(Object.assign({}, datum), { iconType: (_a = this.seriesIconTypeMap[label], (_a !== null && _a !== void 0 ? _a : iconType)), color: this.seriesColorMap[label], x: xPosition[rowIndex][columnIndex], y: padding.Y + itemHeight * rowIndex, useScatterChartIcon });
+                }) }, this.theme.label),
+        ];
+    }
+    makeCheckboxResponder(data, showCheckbox) {
+        return showCheckbox
+            ? data.map((m) => (Object.assign(Object.assign({}, m), { type: 'rect', x: m.x, y: m.y, width: LEGEND_CHECKBOX_SIZE, height: LEGEND_CHECKBOX_SIZE, data: { name: 'checkbox' } })))
+            : [];
+    }
+    makeLabelResponder(data, showCheckbox) {
+        const font = getTitleFontString(this.theme.label);
+        return data.map((m) => (Object.assign(Object.assign({}, m), { type: 'rect', x: m.x +
+                (showCheckbox ? LEGEND_CHECKBOX_SIZE + LEGEND_MARGIN_X : 0) +
+                LEGEND_ICON_SIZE +
+                LEGEND_MARGIN_X, y: m.y, width: getTextWidth(m.label, font), data: { name: 'label' }, height: LEGEND_CHECKBOX_SIZE })));
+    }
+    render({ layout, legend, theme }) {
+        this.isShow = legend.visible && !!legend.data.length;
+        if (!this.isShow) {
+            return;
+        }
+        // @TODO: stack 일 떄 라벨 순서 역순으로(스택이 쌓인 순서대로) 되어야
+        const { showCheckbox, data: legendData } = legend;
+        this.rect = layout.legend;
+        this.theme = theme.legend;
+        this.initColorAndIconTypeMap(legendData);
+        this.models = this.renderLegendModel(legend);
+        const { data } = this.models[0];
+        const checkboxResponder = this.makeCheckboxResponder(data, showCheckbox);
+        const labelResponder = this.makeLabelResponder(data, showCheckbox);
+        this.responders = [...checkboxResponder, ...labelResponder];
+    }
+}

package/dist/esm/component/lineSeries.d.ts

@@ -0,0 +1,69 @@
+import Component from "./component";
+import { CircleModel, CircleResponderModel, LineSeriesModels, RectResponderModel, MouseEventType } from "../../types/components/series";
+import { LineChartOptions, LineTypeSeriesOptions, LineScatterChartOptions, LineTypeEventDetectType, Point, LineAreaChartOptions } from "../../types/options";
+import { ClipRectAreaModel, LinePointsModel } from "../../types/components/series";
+import { ChartState, Scale, LabelAxisData } from "../../types/store/store";
+import { LineSeriesType } from "../../types/options";
+import { TooltipData } from "../../types/components/tooltip";
+import { RectResponderInfoForCoordinateType } from "../helpers/responders";
+import { PointDataLabel } from "../../types/components/dataLabels";
+import { LineChartSeriesTheme } from "../../types/theme";
+import { SelectSeriesInfo } from "../../types/charts";
+declare type ResponderTypes = CircleResponderModel[] | RectResponderModel[];
+export default class LineSeries extends Component {
+    models: LineSeriesModels;
+    drawModels: LineSeriesModels;
+    responders: ResponderTypes;
+    theme: Required<LineChartSeriesTheme>;
+    activatedResponders: ResponderTypes;
+    eventDetectType: LineTypeEventDetectType;
+    tooltipCircleMap: Record<string, CircleResponderModel[]>;
+    startIndex: number;
+    yAxisName: string;
+    initialize(): void;
+    initUpdate(delta: number): void;
+    private setEventDetectType;
+    render(chartState: ChartState<LineChartOptions | LineScatterChartOptions | LineAreaChartOptions>, computed: any): void;
+    private getResponders;
+    makeNearTypeResponderModel(seriesCircleModel: CircleModel[], tooltipDataArr: TooltipData[], categories: string[], detectionSize?: number): {
+        data: TooltipData;
+        detectionSize: number | undefined;
+        label: string;
+        type: "circle";
+        radius: number;
+        color: string;
+        style?: import("../../types/components/series").StyleProp<import("../../types/components/series").CircleStyle, import("../../types/brushes").CircleStyleName> | undefined;
+        seriesIndex?: number | undefined;
+        index?: number | undefined;
+        angle?: {
+            start: number;
+            end: number;
+        } | undefined;
+        name?: string | undefined;
+        borderWidth?: number | undefined;
+        borderColor?: string | undefined;
+        x: number;
+        y: number;
+    }[];
+    makeTooltipData(lineSeriesData: LineSeriesType[], categories: string[]): TooltipData[];
+    renderClipRectAreaModel(isDrawModel?: boolean): ClipRectAreaModel;
+    renderLinePointsModel(seriesRawData: LineSeriesType[], scale: Scale, axisData: LabelAxisData, options: LineTypeSeriesOptions, categories: string[]): LinePointsModel[];
+    getRectResponderInfoForCoordinateType(circleModel: CircleModel[], categories: string[]): RectResponderInfoForCoordinateType[];
+    renderCircleModel(lineSeriesModel: LinePointsModel[], options: LineTypeSeriesOptions): {
+        dotSeriesModel: CircleModel[];
+        responderModel: CircleModel[];
+    };
+    getCircleModelsFromRectResponders(responders: RectResponderModel[], mousePositions?: Point): CircleResponderModel[];
+    onMousemoveNearType(responders: CircleResponderModel[]): void;
+    onMousemoveNearestType(responders: RectResponderModel[], mousePositions: Point): void;
+    onMousemoveGroupedType(responders: RectResponderModel[]): void;
+    onMousemove({ responders, mousePosition }: MouseEventType): void;
+    getDataLabels(seriesModels: LinePointsModel[]): PointDataLabel[];
+    private getResponderSeriesWithTheme;
+    onClick({ responders, mousePosition }: MouseEventType): void;
+    onMouseoutComponent: () => void;
+    private getResponderCategoryByIndex;
+    selectSeries: (info: SelectSeriesInfo) => void;
+    showTooltip: (info: SelectSeriesInfo) => void;
+}
+export {};