@techie_doubts/tui.chart.2026 4.6.1

package/dist/esm/store/theme.js

@@ -0,0 +1,139 @@
+import { deepMergedCopy, omit } from "../helpers/utils";
+import { getNestedPieChartAliasNames, hasNestedPieSeries, hasOuterDataLabel, hasOuterPieSeriesName, } from "../helpers/pieSeries";
+import { makeAxisTitleTheme, defaultSeriesTheme, getDefaultTheme } from "../helpers/theme";
+function getCommonSeriesOptions(options, series, isNestedPieChart) {
+    var _a, _b;
+    const theme = (_a = options) === null || _a === void 0 ? void 0 : _a.theme;
+    if (!((_b = theme) === null || _b === void 0 ? void 0 : _b.series)) {
+        return {};
+    }
+    const seriesNames = isNestedPieChart ? getNestedPieChartAliasNames(series) : Object.keys(series);
+    return seriesNames.reduce((acc, seriesName) => {
+        delete acc[seriesName];
+        return acc;
+    }, Object.assign({}, theme.series));
+}
+function getThemeAppliedSecondaryYAxis(options) {
+    var _a, _b, _c;
+    const theme = Object.assign({}, options.theme);
+    if (!Array.isArray(theme.yAxis)) {
+        return theme;
+    }
+    const axisTitleTheme = makeAxisTitleTheme((_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.chart) === null || _c === void 0 ? void 0 : _c.fontFamily);
+    const yAxis = theme.yAxis.map((yAxisTheme) => deepMergedCopy({ title: Object.assign({}, axisTitleTheme) }, Object.assign({}, yAxisTheme)));
+    return Object.assign(Object.assign({}, theme), { yAxis });
+}
+function getThemeOptionsWithSeriesName(options, series, commonSeriesOptions, isNestedPieChart) {
+    var _a;
+    const theme = getThemeAppliedSecondaryYAxis(options);
+    if (!((_a = theme) === null || _a === void 0 ? void 0 : _a.series)) {
+        return Object.assign({}, theme);
+    }
+    const seriesTheme = Object.assign(Object.assign({}, theme), { series: {} });
+    const seriesNames = Object.keys(series);
+    const isComboChart = seriesNames.length > 1;
+    if (isNestedPieChart) {
+        const aliasNames = getNestedPieChartAliasNames(series);
+        seriesTheme.series = {
+            pie: aliasNames.reduce((acc, aliasName) => {
+                var _a;
+                return (Object.assign(Object.assign({}, acc), { [aliasName]: deepMergedCopy((_a = theme.series) === null || _a === void 0 ? void 0 : _a[aliasName], omit(commonSeriesOptions, 'colors')) }));
+            }, {}),
+        };
+    }
+    else if (isComboChart) {
+        seriesTheme.series = Object.assign({}, seriesNames.reduce((acc, seriesName) => {
+            var _a;
+            return (Object.assign(Object.assign({}, acc), { [seriesName]: deepMergedCopy((_a = theme.series) === null || _a === void 0 ? void 0 : _a[seriesName], omit(commonSeriesOptions, 'colors')) }));
+        }, {}));
+    }
+    else {
+        seriesTheme.series = {
+            [seriesNames[0]]: theme.series,
+        };
+    }
+    return seriesTheme;
+}
+function setColors(theme, series, commonSeriesOptions, isNestedPieChart, categories) {
+    var _a, _b;
+    let index = 0;
+    const commonColorsOption = [
+        ...(_b = (_a = commonSeriesOptions) === null || _a === void 0 ? void 0 : _a.colors, (_b !== null && _b !== void 0 ? _b : [])),
+        ...defaultSeriesTheme.colors,
+    ];
+    const themeNames = isNestedPieChart ? getNestedPieChartAliasNames(series) : Object.keys(series);
+    themeNames.forEach((name, idx) => {
+        var _a;
+        const themeSeries = series[name] || [];
+        const filteredSeries = themeSeries.filter((chartSeries) => chartSeries.colorByCategories);
+        const hasColorByCategories = filteredSeries.length > 0;
+        let size;
+        if (isNestedPieChart) {
+            size = series.pie[idx].data.length;
+        }
+        else if (hasColorByCategories) {
+            const rejectedSeries = themeSeries.filter((chartSeries) => !chartSeries.colorByCategories);
+            size = rejectedSeries.length + categories.length;
+        }
+        else {
+            size = series[name].length;
+        }
+        const target = isNestedPieChart ? theme.series.pie : theme.series;
+        if (!((_a = target[name]) === null || _a === void 0 ? void 0 : _a.colors)) {
+            target[name] = Object.assign(Object.assign({}, target[name]), { colors: commonColorsOption.slice(index, index + size) });
+            index += size;
+        }
+    });
+}
+function setPlot(theme) {
+    ['vertical', 'horizontal'].reduce((acc, cur) => {
+        if (!acc[cur]) {
+            acc[cur] = { lineColor: acc.lineColor };
+        }
+        return acc;
+    }, theme.plot);
+}
+function checkAnchorPieSeriesOption(options, series, alias) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return {
+        hasOuterAnchor: !!series.pie && ((_d = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b[alias]) === null || _c === void 0 ? void 0 : _c.dataLabels) === null || _d === void 0 ? void 0 : _d.anchor) === 'outer',
+        hasOuterAnchorPieSeriesName: !!series.pie && ((_j = (_h = (_g = (_f = (_e = options) === null || _e === void 0 ? void 0 : _e.series) === null || _f === void 0 ? void 0 : _f[alias]) === null || _g === void 0 ? void 0 : _g.dataLabels) === null || _h === void 0 ? void 0 : _h.pieSeriesName) === null || _j === void 0 ? void 0 : _j.anchor) === 'outer',
+    };
+}
+function getTheme(options, series, categories) {
+    var _a, _b, _c;
+    const isNestedPieChart = hasNestedPieSeries(series);
+    const commonSeriesOptions = getCommonSeriesOptions(options, series, isNestedPieChart);
+    let pieSeriesOuterAnchors = {
+        hasOuterAnchor: hasOuterDataLabel(options, series),
+        hasOuterAnchorPieSeriesName: hasOuterPieSeriesName(options, series),
+    };
+    if (isNestedPieChart) {
+        const aliasNames = getNestedPieChartAliasNames(series);
+        pieSeriesOuterAnchors = aliasNames.reduce((acc, cur) => (Object.assign(Object.assign({}, acc), { [cur]: checkAnchorPieSeriesOption(options, series, cur) })), {});
+    }
+    const globalFontFamily = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.theme) === null || _b === void 0 ? void 0 : _b.chart) === null || _c === void 0 ? void 0 : _c.fontFamily;
+    const theme = deepMergedCopy(getDefaultTheme(series, pieSeriesOuterAnchors, globalFontFamily, isNestedPieChart), getThemeOptionsWithSeriesName(options, series, commonSeriesOptions, isNestedPieChart));
+    if (!series.heatmap) {
+        setColors(theme, series, commonSeriesOptions, isNestedPieChart, categories);
+    }
+    setPlot(theme);
+    return theme;
+}
+const theme = {
+    name: 'theme',
+    state: ({ options, series, categories }) => ({
+        theme: getTheme(options, series, categories),
+    }),
+    action: {
+        initThemeState({ state, initStoreState }) {
+            state.theme = getTheme(state.options, initStoreState.series, initStoreState.categories);
+        },
+    },
+    observe: {
+        updateTheme() {
+            this.dispatch('initThemeState');
+        },
+    },
+};
+export default theme;

package/dist/esm/store/treemapSeriesData.d.ts

@@ -0,0 +1,4 @@
+import { StoreModule } from "../../types/store/store";
+export declare const TREEMAP_ROOT_ID: string;
+declare const treemapSeriesData: StoreModule;
+export default treemapSeriesData;

package/dist/esm/store/treemapSeriesData.js

@@ -0,0 +1,93 @@
+import { isNull, isUndefined, last } from "../helpers/utils";
+const TREEMAP_ID_PREFIX = '__TOAST_UI_TREEMAP';
+export const TREEMAP_ROOT_ID = `${TREEMAP_ID_PREFIX}_ROOT`;
+function makeTreeModel(series, indexes, depth, parentId) {
+    var _a;
+    const idx = last(indexes);
+    const id = parentId ? `${parentId}_${idx}` : `${TREEMAP_ID_PREFIX}_${idx}`;
+    const { colorValue } = series;
+    const models = [
+        {
+            label: series.label,
+            hasChild: !!series.children,
+            id,
+            indexes,
+            parentId: parentId ? parentId : TREEMAP_ROOT_ID,
+            depth,
+            data: (_a = series.data, (_a !== null && _a !== void 0 ? _a : 0)),
+            colorValue,
+        },
+    ];
+    if (series.children) {
+        series.children.forEach((child, childIdx) => {
+            if (!isNull(child.data)) {
+                models.push(...makeTreeModel(child, [...indexes, childIdx], depth + 1, id));
+            }
+        });
+    }
+    return models;
+}
+function setParentSeriesData(treemapSeries) {
+    treemapSeries.forEach(({ parentId, data }) => {
+        if (parentId !== TREEMAP_ROOT_ID) {
+            treemapSeries.find(({ id }) => id === parentId).data += data;
+        }
+    });
+}
+function setParentColorValue(treemapSeries) {
+    treemapSeries.forEach((datum) => {
+        const { id, colorValue } = datum;
+        if (isUndefined(colorValue)) {
+            const series = treemapSeries.filter(({ parentId }) => parentId === id);
+            const totalColorValue = series.reduce((acc, cur) => {
+                return acc + (isUndefined(cur.colorValue) ? 0 : cur.colorValue);
+            }, 0);
+            datum.colorValue = totalColorValue / series.length;
+        }
+    });
+}
+function setRatio(treemapSeries) {
+    const rootTotal = treemapSeries
+        .filter(({ parentId }) => parentId === TREEMAP_ROOT_ID)
+        .reduce((acc, { data }) => acc + data, 0);
+    treemapSeries.forEach((series) => {
+        const total = series.parentId === TREEMAP_ROOT_ID
+            ? rootTotal
+            : treemapSeries.find(({ id }) => id === series.parentId).data;
+        series.ratio = series.data / total;
+    });
+}
+function makeTreemapSeries(series, options) {
+    var _a;
+    if (!series.treemap) {
+        return [];
+    }
+    const treemapSeries = series.treemap.data
+        .filter((datum) => !isNull(datum.data))
+        .map((datum, idx) => makeTreeModel(datum, [idx], 0))
+        .flatMap((s) => s)
+        .sort((a, b) => b.depth - a.depth);
+    setParentSeriesData(treemapSeries);
+    setRatio(treemapSeries);
+    if ((_a = options.series) === null || _a === void 0 ? void 0 : _a.useColorValue) {
+        setParentColorValue(treemapSeries);
+    }
+    return treemapSeries;
+}
+const treemapSeriesData = {
+    name: 'treemapSeriesData',
+    state: () => ({
+        treemapSeries: [],
+    }),
+    action: {
+        setTreemapSeriesData({ state }) {
+            state.treemapSeries = makeTreemapSeries(state.series, state.options);
+        },
+    },
+    observe: {
+        updateTreemapSeriesData() {
+            this.dispatch('setTreemapSeriesData');
+        },
+    },
+};
+export default treemapSeriesData;

package/dist/td-chart.css

@@ -0,0 +1,127 @@
+/*!
+ * TOAST UI Chart 4th Edition
+ * @version 4.6.1 | Sat Feb 21 2026
+ * @author NHN Cloud. FE Development Lab <dl_javascript@nhn.com>
+ * @license MIT
+ */
+.toastui-chart-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+/* export menu */
+
+.toastui-chart-export-menu {
+  font-family: Arial, sans-serif;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fff;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+.toastui-chart-export-menu-title {
+  height: 34px;
+  width: 140px;
+  margin: 0;
+  padding: 10px;
+  box-sizing: inherit;
+}
+
+.toastui-chart-export-menu-btn-wrapper {
+  width: 100%;
+  height: 76px;
+}
+
+.toastui-chart-export-menu-btn {
+  width: 50%;
+  height: 50%;
+  border: none;
+  padding: 12px 3px;
+  float: left;
+  color: inherit;
+  font-family: inherit;
+  background: transparent;
+  cursor: pointer;
+}
+
+.toastui-chart-export-menu-btn:hover {
+  font-weight: bold;
+}
+
+.toastui-chart-export-menu-btn:nth-child(3) {
+  border-bottom-left-radius: inherit;
+}
+
+.toastui-chart-export-menu-btn:nth-child(4) {
+  border-bottom-right-radius: inherit;
+}
+
+/* tooltip */
+.toastui-chart-tooltip-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+  pointer-events: none;
+}
+
+.toastui-chart-tooltip {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 150px;
+}
+
+.toastui-chart-tooltip-category {
+  padding: 8px 15px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.toastui-chart-tooltip-series-wrapper {
+  display: flex;
+  padding: 13px 15px;
+  flex-direction: column;
+}
+
+.toastui-chart-tooltip-series {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.toastui-chart-series-name {
+  display: flex;
+  align-items: center;
+  /* for IE */
+  line-height: 10px;
+}
+
+.toastui-chart-series-name .toastui-chart-icon,
+.toastui-chart-tooltip-series .toastui-chart-icon {
+  width: 10px;
+  height: 10px;
+  margin-right: 8px;
+  /* for IE */
+  display: inline-block;
+}
+
+.toastui-chart-series-name .toastui-chart-name {
+  white-space: nowrap;
+}
+
+.toastui-chart-series-value {
+  white-space: nowrap;
+  margin-left: 10px;
+}
+
+.toastui-chart-tooltip-series-wrapper .toastui-chart-tooltip-title {
+  padding: 8px 0 5px;
+}
+
+.toastui-chart-tooltip-series-wrapper .toastui-chart-tooltip-title:first-child {
+  padding-top: 0;
+}
+