@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/component/rangeSelection.js

@@ -0,0 +1,150 @@
+import Component from "./component";
+import { isNull, range } from "../helpers/utils";
+import { sortNumber } from "../helpers/utils";
+import { makeObservableObjectToNormal } from "../store/reactive";
+import { getCoordinateDataIndex, getCoordinateXValue, isCoordinateSeries, } from "../helpers/coordinate";
+import { getXPosition } from "../helpers/calculator";
+import { makeRectResponderModelForCoordinateType, } from "../helpers/responders";
+const DRAG_MIN_WIDTH = 15;
+export default class RangeSelection extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { selectionArea: [] };
+        this.dragStartPosition = null;
+        this.dragStartPoint = null;
+        this.isDragging = false;
+    }
+    initialize() {
+        this.type = 'rangeSelection';
+    }
+    render(state, computed) {
+        var _a, _b;
+        if (!state.selectionRange && !state.zoomRange) {
+            return;
+        }
+        this.resetSelectionArea();
+        const { viewRange } = computed;
+        const { layout, axes, series, scale } = state;
+        const categories = state.categories;
+        this.rect = layout.plot;
+        this.startIndex = (_b = (_a = viewRange) === null || _a === void 0 ? void 0 : _a[0], (_b !== null && _b !== void 0 ? _b : 0));
+        const coordinateChart = isCoordinateSeries(series);
+        if (coordinateChart) {
+            const responderInfo = this.getRectResponderInfoForCoordinateType(series, scale, axes.xAxis, categories);
+            this.responders = this.makeRectResponderModelForCoordinateType(responderInfo, categories);
+        }
+        else {
+            this.responders = this.makeRectResponderModel(categories, axes.xAxis);
+        }
+    }
+    getRectResponderInfoForCoordinateType(series, scale, axisData, categories) {
+        const points = [];
+        const duplicateCheckMap = {};
+        Object.keys(series).forEach((seriesName) => {
+            const data = series[seriesName].data;
+            data.forEach(({ rawData }) => {
+                rawData.forEach((datum, idx) => {
+                    if (isNull(datum)) {
+                        return;
+                    }
+                    const dataIndex = getCoordinateDataIndex(datum, categories, idx, this.startIndex);
+                    const x = getXPosition(axisData, this.rect.width, getCoordinateXValue(datum), dataIndex);
+                    const xWithinRect = x >= 0 && x <= this.rect.width;
+                    if (!duplicateCheckMap[x] && xWithinRect) {
+                        duplicateCheckMap[x] = true;
+                        points.push({ x, label: categories[dataIndex] });
+                    }
+                });
+            });
+        });
+        return points;
+    }
+    resetSelectionArea() {
+        this.dragStartPosition = null;
+        this.dragStartPoint = null;
+        this.models.selectionArea = [];
+        this.isDragging = false;
+    }
+    onMousedown({ responders, mousePosition }) {
+        if (responders.length) {
+            this.dragStartPoint = responders.find((responder) => responder.data.name === 'selectionArea');
+            this.dragStartPosition = mousePosition;
+        }
+    }
+    onMouseup({ responders }) {
+        var _a, _b;
+        if (this.isDragging && this.dragStartPoint && responders.length) {
+            const dragRange = [this.dragStartPoint, responders[0]]
+                .sort((a, b) => a.index - b.index)
+                .map((m) => { var _a; return (_a = m.data) === null || _a === void 0 ? void 0 : _a.value; });
+            const { series, options } = this.store.state;
+            const { series: seriesOptions } = options;
+            if (!series.column && ((_a = seriesOptions) === null || _a === void 0 ? void 0 : _a.zoomable)) {
+                this.store.dispatch('zoom', dragRange);
+                this.eventBus.emit('zoom', makeObservableObjectToNormal(dragRange));
+            }
+            if ((_b = seriesOptions) === null || _b === void 0 ? void 0 : _b.rangeSelectable) {
+                this.eventBus.emit('rangeSelection', dragRange);
+            }
+            this.eventBus.emit('resetHoveredSeries');
+            this.eventBus.emit('hideTooltip');
+            // @TODO: Should occur after the series' click event
+            // Additional logic to control the sequence of events with each other is required.
+            setTimeout(() => {
+                this.eventBus.emit('resetSelectedSeries');
+            });
+        }
+        this.resetSelectionArea();
+    }
+    makeRectResponderModel(categories, axisData) {
+        const categorySize = categories.length;
+        const { pointOnColumn, tickDistance } = axisData;
+        const { height } = this.rect;
+        const halfDetectAreaIndex = pointOnColumn ? [] : [0, categorySize - 1];
+        const halfWidth = tickDistance / 2;
+        return range(0, categorySize).map((index) => {
+            const half = halfDetectAreaIndex.includes(index);
+            const width = half ? halfWidth : tickDistance;
+            let startX = 0;
+            if (index !== 0) {
+                startX += pointOnColumn ? tickDistance * index : halfWidth + tickDistance * (index - 1);
+            }
+            return {
+                type: 'rect',
+                x: startX,
+                y: 0,
+                height,
+                width,
+                index,
+                data: { name: 'selectionArea', value: categories[index] },
+            };
+        });
+    }
+    makeRectResponderModelForCoordinateType(responderInfo, categories) {
+        const responders = makeRectResponderModelForCoordinateType(responderInfo, this.rect);
+        return responders.map((m, idx) => (Object.assign(Object.assign({}, m), { data: { name: 'selectionArea', value: categories[idx] } })));
+    }
+    onMousemove({ responders, mousePosition }) {
+        if (!responders.length) {
+            return;
+        }
+        if (this.dragStartPosition && !this.isDragging) {
+            const { x } = mousePosition;
+            const { x: startX } = this.dragStartPosition;
+            this.isDragging = Math.abs(startX - x) > DRAG_MIN_WIDTH;
+        }
+        if (this.isDragging) {
+            const startIndex = this.dragStartPoint.index;
+            const endIndex = responders[0].index;
+            const [start, end] = [startIndex, endIndex].sort(sortNumber);
+            const includedResponders = this.responders.slice(start, end + 1);
+            this.models.selectionArea = [
+                ...includedResponders.map((m) => (Object.assign(Object.assign({}, m), { x: m.x, y: 0, type: 'rect', color: 'rgba(0, 0, 0, 0.2)' }))),
+            ];
+            this.eventBus.emit('needDraw');
+        }
+    }
+    onMouseoutComponent() {
+        this.resetSelectionArea();
+    }
+}

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

@@ -0,0 +1,13 @@
+import Component from "./component";
+import { ChartState, Options } from "../../types/store/store";
+import { ResetButtonModels } from "../../types/components/resetButton";
+import { RectResponderModel } from "../../types/components/series";
+export default class ResetButton extends Component {
+    responders: RectResponderModel[];
+    models: ResetButtonModels;
+    initialize(): void;
+    onClick({ responders }: {
+        responders: RectResponderModel[];
+    }): void;
+    render({ options, layout }: ChartState<Options>, computed: any): void;
+}

package/dist/esm/component/resetButton.js

@@ -0,0 +1,26 @@
+import Component from "./component";
+import { isUsingResetButton } from "../store/layout";
+import { BUTTON_RECT_SIZE } from "./exportMenu";
+export default class ResetButton extends Component {
+    initialize() {
+        this.type = 'resetButton';
+        this.name = 'resetButton';
+    }
+    onClick({ responders }) {
+        if (responders.length) {
+            this.eventBus.emit('resetZoom');
+            this.store.dispatch('resetZoom');
+        }
+    }
+    render({ options, layout }, computed) {
+        if (!isUsingResetButton(options)) {
+            return;
+        }
+        this.rect = layout.resetButton;
+        this.isShow = computed.isLineTypeSeriesZooming;
+        this.models = this.isShow ? [{ type: 'resetButton', x: 0, y: 0 }] : [];
+        this.responders = this.isShow
+            ? [{ type: 'rect', x: 0, y: 0, width: BUTTON_RECT_SIZE, height: BUTTON_RECT_SIZE }]
+            : [];
+    }
+}

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

@@ -0,0 +1,34 @@
+import Component from "./component";
+import { Rect, ScatterChartOptions, ScatterSeriesType } from "../../types/options";
+import { ChartState, ValueEdge } from "../../types/store/store";
+import { TooltipData } from "../../types/components/tooltip";
+import { CircleResponderModel, ScatterSeriesModel, ScatterSeriesModels } from "../../types/components/series";
+import { ScatterChartSeriesTheme } from "../../types/theme";
+import { SelectSeriesHandlerParams } from "../charts/chart";
+export default class ScatterSeries extends Component {
+    theme: Required<ScatterChartSeriesTheme>;
+    models: ScatterSeriesModels;
+    drawModels: ScatterSeriesModels;
+    responders: CircleResponderModel[];
+    activatedResponders: CircleResponderModel[];
+    rect: Rect;
+    initialize(): void;
+    initUpdate(delta: number): void;
+    render(chartState: ChartState<ScatterChartOptions>): void;
+    renderScatterPointsModel(seriesRawData: ScatterSeriesType[], xAxisLimit: ValueEdge, yAxisLimit: ValueEdge): ScatterSeriesModel[];
+    makeTooltipModel(circleData: ScatterSeriesType[]): TooltipData[];
+    private getClosestModel;
+    private getResponderAppliedTheme;
+    onMousemove({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    onClick({ responders, mousePosition }: {
+        responders: any;
+        mousePosition: any;
+    }): void;
+    onMouseoutComponent: () => void;
+    getModelsForSelectInfo: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => CircleResponderModel[] | undefined;
+    selectSeries: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => void;
+    showTooltip: (info: SelectSeriesHandlerParams<ScatterChartOptions>) => void;
+}

package/dist/esm/component/scatterSeries.js

@@ -0,0 +1,159 @@
+import Component from "./component";
+import { getCoordinateXValue, getCoordinateYValue } from "../helpers/coordinate";
+import { getRGBA } from "../helpers/color";
+import { getValueRatio } from "../helpers/calculator";
+import { deepCopy, deepMergedCopy, isNumber, isString, pick } from "../helpers/utils";
+import { getActiveSeriesMap } from "../helpers/legend";
+import { getValueAxisName } from "../helpers/axes";
+import { getNearestResponder } from "../helpers/responders";
+import { message } from "../message";
+import { isAvailableSelectSeries } from "../helpers/validation";
+export default class ScatterSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = { series: [] };
+        this.activatedResponders = [];
+        this.onMouseoutComponent = () => {
+            this.eventBus.emit('seriesPointHovered', { models: [], name: this.name });
+            this.eventBus.emit('renderHoveredSeries', {
+                models: [],
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.getModelsForSelectInfo = (info) => {
+            const { index, seriesIndex, state } = info;
+            if (!isNumber(index) || !isNumber(seriesIndex) || !isAvailableSelectSeries(info, 'scatter')) {
+                return;
+            }
+            const { name } = state.series.scatter.data[seriesIndex];
+            return [this.responders.filter(({ name: dataName }) => dataName === name)[index]];
+        };
+        this.selectSeries = (info) => {
+            const models = this.getModelsForSelectInfo(info);
+            if (!models) {
+                return;
+            }
+            const closestModel = this.getClosestModel(models);
+            if (!models.length) {
+                throw new Error(message.SELECT_SERIES_API_INDEX_ERROR);
+            }
+            this.eventBus.emit('renderSelectedSeries', {
+                models: this.getResponderAppliedTheme(closestModel, 'select'),
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        };
+        this.showTooltip = (info) => {
+            const models = this.getModelsForSelectInfo(info);
+            if (!models) {
+                return;
+            }
+            this.eventBus.emit('renderHoveredSeries', { models, name: this.name });
+            this.activatedResponders = models;
+            this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+            this.eventBus.emit('needDraw');
+        };
+    }
+    initialize() {
+        this.type = 'series';
+        this.name = 'scatter';
+        this.eventBus.on('selectSeries', this.selectSeries);
+        this.eventBus.on('showTooltip', this.showTooltip);
+        this.eventBus.on('hideTooltip', this.onMouseoutComponent);
+    }
+    initUpdate(delta) {
+        this.drawModels.series.forEach((model, index) => {
+            model.size = this.models.series[index].size * delta;
+        });
+    }
+    render(chartState) {
+        var _a, _b;
+        const { layout, series, scale, legend, options, theme, axes } = chartState;
+        if (!series.scatter) {
+            throw new Error(message.noDataError(this.name));
+        }
+        const scatterData = series.scatter.data;
+        this.theme = theme.series.scatter;
+        this.rect = layout.plot;
+        this.activeSeriesMap = getActiveSeriesMap(legend);
+        this.selectable = this.getSelectableOption(options);
+        const limit = (_b = (_a = axes.xAxis) === null || _a === void 0 ? void 0 : _a.labelRange, (_b !== null && _b !== void 0 ? _b : scale.xAxis.limit)); // labelRange is created only for line scatter charts
+        const seriesModel = this.renderScatterPointsModel(scatterData, limit, scale[getValueAxisName(options, this.name, 'yAxis')].limit);
+        const tooltipModel = this.makeTooltipModel(scatterData);
+        this.models.series = seriesModel;
+        if (!this.drawModels) {
+            this.drawModels = deepCopy(this.models);
+        }
+        this.responders = seriesModel.map((m, index) => (Object.assign(Object.assign({}, m), { type: 'circle', detectionSize: 0, radius: this.theme.size / 2, color: m.fillColor, style: [{ strokeStyle: m.borderColor, lineWidth: m.borderWidth }], data: tooltipModel[index] })));
+    }
+    renderScatterPointsModel(seriesRawData, xAxisLimit, yAxisLimit) {
+        return seriesRawData.flatMap(({ data, name, color: seriesColor, iconType }, seriesIndex) => {
+            const models = [];
+            const active = this.activeSeriesMap[name];
+            const color = getRGBA(seriesColor, active ? 1 : 0.3);
+            data.forEach((datum, index) => {
+                const rawXValue = getCoordinateXValue(datum);
+                const xValue = isString(rawXValue) ? Number(new Date(rawXValue)) : Number(rawXValue);
+                const yValue = getCoordinateYValue(datum);
+                const xValueRatio = getValueRatio(xValue, xAxisLimit);
+                const yValueRatio = getValueRatio(yValue, yAxisLimit);
+                const x = xValueRatio * this.rect.width;
+                const y = (1 - yValueRatio) * this.rect.height;
+                models.push(Object.assign({ x,
+                    y, type: 'scatterSeries', iconType,
+                    seriesIndex,
+                    name, borderColor: color, index }, pick(this.theme, 'borderWidth', 'size', 'fillColor')));
+            });
+            return models;
+        });
+    }
+    makeTooltipModel(circleData) {
+        return [...circleData].flatMap(({ data, name, color }) => {
+            const tooltipData = [];
+            data.forEach((datum) => {
+                const value = {
+                    x: getCoordinateXValue(datum),
+                    y: getCoordinateYValue(datum),
+                };
+                tooltipData.push({ label: name, color, value });
+            });
+            return tooltipData;
+        });
+    }
+    getClosestModel(closestResponder) {
+        if (!closestResponder.length) {
+            return [];
+        }
+        const model = this.models.series.find(({ index, seriesIndex }) => isNumber(index) &&
+            isNumber(seriesIndex) &&
+            index === closestResponder[0].index &&
+            seriesIndex === closestResponder[0].seriesIndex);
+        return model ? [model] : [];
+    }
+    getResponderAppliedTheme(closestModel, type) {
+        const { fillColor, size } = this.theme[type];
+        return closestModel.map((m) => deepMergedCopy(m, Object.assign(Object.assign({}, this.theme[type]), { color: fillColor, radius: size / 2 })));
+    }
+    onMousemove({ responders, mousePosition }) {
+        const closestResponder = getNearestResponder(responders, mousePosition, this.rect);
+        let closestModel = this.getClosestModel(closestResponder);
+        closestModel = this.getResponderAppliedTheme(closestModel, 'hover');
+        this.eventBus.emit('renderHoveredSeries', { models: closestModel, name: this.name });
+        this.activatedResponders = closestResponder;
+        this.eventBus.emit('seriesPointHovered', { models: this.activatedResponders, name: this.name });
+        this.eventBus.emit('needDraw');
+    }
+    onClick({ responders, mousePosition }) {
+        if (this.selectable) {
+            const closestResponder = getNearestResponder(responders, mousePosition, this.rect);
+            let closestModel = this.getClosestModel(closestResponder);
+            closestModel = this.getResponderAppliedTheme(closestModel, 'select');
+            this.eventBus.emit('renderSelectedSeries', {
+                models: closestModel,
+                name: this.name,
+            });
+            this.eventBus.emit('needDraw');
+        }
+    }
+}

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

@@ -0,0 +1,26 @@
+import Component from "./component";
+import { ChartState, Options } from "../../types/store/store";
+import { ResponderModel } from "../../types/components/series";
+import { TooltipModelName } from "../../types/components/tooltip";
+import { SelectedSeriesEventModel } from "../helpers/responders";
+export declare type ResponderSeriesModel = {
+    [key in TooltipModelName]: ResponderModel[];
+};
+declare type ActiveSeriesNames = {
+    [key in TooltipModelName]: string[];
+};
+export default class SelectedSeries extends Component {
+    models: ResponderSeriesModel;
+    seriesModels: ResponderSeriesModel;
+    activeSeriesNames: ActiveSeriesNames;
+    isShow: boolean;
+    private getSeriesNames;
+    getSelectedSeriesModelsForRendering(selectedSeriesEventModel: SelectedSeriesEventModel): ResponderModel[];
+    getSelectedSeriesModels(selectedSeriesEventModel: SelectedSeriesEventModel): ResponderModel[];
+    renderSelectedSeries: (selectedSeriesEventModel: SelectedSeriesEventModel) => void;
+    resetSelectedSeries: () => void;
+    private setActiveState;
+    initialize(): void;
+    render({ layout }: ChartState<Options>): void;
+}
+export {};

package/dist/esm/component/selectedSeries.js

@@ -0,0 +1,109 @@
+import Component from "./component";
+import { includes } from "../helpers/utils";
+import { isSameSeriesResponder } from "../helpers/responders";
+import { makeObservableObjectToNormal } from "../store/reactive";
+export default class SelectedSeries extends Component {
+    constructor() {
+        super(...arguments);
+        this.models = {};
+        this.seriesModels = {};
+        this.activeSeriesNames = {};
+        this.isShow = false;
+        this.renderSelectedSeries = (selectedSeriesEventModel) => {
+            const { name, alias } = selectedSeriesEventModel;
+            const models = this.getSelectedSeriesModelsForRendering(selectedSeriesEventModel);
+            this.models[alias || name] = isSameSeriesResponder(Object.assign(Object.assign({}, selectedSeriesEventModel), { models, comparisonModel: this.models[alias || name] }))
+                ? []
+                : models;
+            this.seriesModels[alias || name] = this.getSelectedSeriesModels(selectedSeriesEventModel);
+            this.isShow = !!Object.values(this.models).flatMap((value) => value).length;
+            this.eventBus.emit(this.isShow ? 'selectSeries' : 'unselectSeries', makeObservableObjectToNormal(this.seriesModels));
+            this.activeSeriesNames[name] = this.getSeriesNames(selectedSeriesEventModel.models, name);
+            this.setActiveState();
+        };
+        this.resetSelectedSeries = () => {
+            this.models = {};
+            this.store.dispatch('setAllLegendActiveState', true);
+        };
+    }
+    getSeriesNames(selectedSeries, name) {
+        const names = [];
+        if (includes(['line', 'area', 'radar', 'bubble', 'scatter', 'bullet', 'boxPlot'], name)) {
+            selectedSeries.forEach((model) => {
+                const label = model
+                    .name;
+                if (label) {
+                    names.push(label);
+                }
+            });
+        }
+        else if (includes(['bar', 'column', 'radialBar'], name)) {
+            selectedSeries.forEach((model) => {
+                var _a;
+                const label = (_a = model.data) === null || _a === void 0 ? void 0 : _a.label;
+                if (label) {
+                    names.push(label);
+                }
+            });
+        }
+        else if (name === 'pie') {
+            Object.keys(this.models)
+                .flatMap((key) => this.models[key])
+                .forEach((model) => {
+                var _a, _b;
+                const label = ((_a = model.data) === null || _a === void 0 ? void 0 : _a.rootParentName) || ((_b = model.data) === null || _b === void 0 ? void 0 : _b.label);
+                if (label) {
+                    names.push(label);
+                }
+            });
+        }
+        return names;
+    }
+    getSelectedSeriesModelsForRendering(selectedSeriesEventModel) {
+        const { models, eventDetectType, name } = selectedSeriesEventModel;
+        let renderingModels = models;
+        if ((name === 'column' || name === 'bar' || name === 'bullet') &&
+            eventDetectType === 'grouped') {
+            renderingModels = models.filter((model) => !model.data);
+        }
+        else if (name === 'radialBar' && eventDetectType === 'grouped') {
+            renderingModels = models.filter((model) => !model.data);
+        }
+        return renderingModels;
+    }
+    getSelectedSeriesModels(selectedSeriesEventModel) {
+        const { models, eventDetectType, name } = selectedSeriesEventModel;
+        let selectedSeriesModels = models;
+        if ((name === 'column' || name === 'bar' || name === 'bullet') &&
+            eventDetectType === 'grouped') {
+            selectedSeriesModels = models.filter((model) => model.data);
+        }
+        else if (name === 'radialBar' && eventDetectType === 'grouped') {
+            selectedSeriesModels = models.filter((model) => model.data);
+        }
+        return selectedSeriesModels;
+    }
+    setActiveState() {
+        if (this.isShow) {
+            this.store.dispatch('setAllLegendActiveState', false);
+            Object.values(this.activeSeriesNames).forEach((names) => {
+                names.forEach((name) => {
+                    this.store.dispatch('setLegendActiveState', { name, active: true });
+                });
+            });
+        }
+        else {
+            this.store.dispatch('setAllLegendActiveState', true);
+        }
+        this.eventBus.emit('needDraw');
+    }
+    initialize() {
+        this.type = 'selectedSeries';
+        this.name = 'selectedSeries';
+        this.eventBus.on('renderSelectedSeries', this.renderSelectedSeries);
+        this.eventBus.on('resetSelectedSeries', this.resetSelectedSeries);
+    }
+    render({ layout }) {
+        this.rect = layout.plot;
+    }
+}

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

@@ -0,0 +1,15 @@
+import Component from "./component";
+import { ChartState, Options, ScaleData } from "../../types/store/store";
+import { SpectrumLegendModel, SpectrumLegendModels } from "../../types/components/spectrumLegend";
+import { Align } from "../../types/options";
+import { TreemapRectResponderModel } from "../../types/components/series";
+export default class SpectrumLegend extends Component {
+    models: SpectrumLegendModels;
+    labels: string[];
+    align: Align;
+    initialize(): void;
+    makeLabels(scale: ScaleData): string[];
+    renderSpectrumLegendModel(startColor: string, endColor: string): SpectrumLegendModel[];
+    renderSpectrumTooltip: ([responderData]: TreemapRectResponderModel[]) => void;
+    render({ layout, legend, colorValueScale, theme }: ChartState<Options>): void;
+}

package/dist/esm/component/spectrumLegend.js

@@ -0,0 +1,76 @@
+import Component from "./component";
+import { range } from "../helpers/utils";
+import { isVerticalAlign } from "../store/layout";
+export default class SpectrumLegend extends Component {
+    constructor() {
+        super(...arguments);
+        this.labels = [];
+        this.renderSpectrumTooltip = ([responderData]) => {
+            if (responderData) {
+                const { labels, align } = this;
+                const { colorValue, color } = responderData;
+                const { width, height } = this.rect;
+                this.models.tooltip = [
+                    {
+                        type: 'spectrumTooltip',
+                        width,
+                        height,
+                        x: 0,
+                        y: 0,
+                        labels,
+                        align,
+                        colorRatio: responderData.colorRatio,
+                        color,
+                        text: String(colorValue),
+                        verticalAlign: isVerticalAlign(align),
+                    },
+                ];
+            }
+            else {
+                this.models.tooltip = [];
+            }
+        };
+    }
+    initialize() {
+        this.type = 'spectrumLegend';
+        this.name = 'spectrumLegend';
+    }
+    makeLabels(scale) {
+        const { stepCount, limit, stepSize } = scale;
+        const minValue = limit.min;
+        return range(0, stepCount + 1).reduce((labels, value) => {
+            return [...labels, String(minValue + stepSize * value)];
+        }, []);
+    }
+    renderSpectrumLegendModel(startColor, endColor) {
+        const { labels, align } = this;
+        const { width, height } = this.rect;
+        return [
+            {
+                type: 'spectrumLegend',
+                width,
+                height,
+                x: 0,
+                y: 0,
+                labels,
+                align,
+                startColor,
+                endColor,
+                verticalAlign: isVerticalAlign(this.align),
+            },
+        ];
+    }
+    render({ layout, legend, colorValueScale, theme }) {
+        var _a, _b;
+        this.rect = layout.legend;
+        this.align = legend.align;
+        this.isShow = legend.visible && !!legend.data.length;
+        if (!this.isShow) {
+            return;
+        }
+        this.labels = this.makeLabels(colorValueScale);
+        const { startColor, endColor } = ((_a = theme.series) === null || _a === void 0 ? void 0 : _a.heatmap) || ((_b = theme.series) === null || _b === void 0 ? void 0 : _b.treemap);
+        this.models = { legend: this.renderSpectrumLegendModel(startColor, endColor), tooltip: [] };
+        this.eventBus.on('renderSpectrumTooltip', this.renderSpectrumTooltip);
+    }
+}

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

@@ -0,0 +1,12 @@
+import Component from "./component";
+import { ChartState, Options } from "../../types/store/store";
+import { TitleOption } from "../../types/options";
+import { FontTheme } from "../../types/theme";
+import { LabelModel } from "../../types/components/axis";
+export default class Title extends Component {
+    models: LabelModel[];
+    theme: Required<FontTheme>;
+    initialize(): void;
+    renderTitle(options: string | TitleOption): LabelModel[];
+    render({ options, layout, theme }: ChartState<Options>): void;
+}