@techie_doubts/tui.chart.2026 4.6.1

package/package.json

@@ -0,0 +1,112 @@
+{
+  "name": "@techie_doubts/tui.chart.2026",
+  "version": "4.6.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "TOAST UI Application: Chart",
+  "main": "dist/td-chart.js",
+  "types": "types/index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "module": "dist/esm/",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/td-chart.js"
+    },
+    "./line": {
+      "import": "./dist/esm/charts/lineChart.js"
+    },
+    "./area": {
+      "import": "./dist/esm/charts/areaChart.js"
+    },
+    "./lineArea": {
+      "import": "./dist/esm/charts/lineAreaChart.js"
+    },
+    "./bar": {
+      "import": "./dist/esm/charts/barChart.js"
+    },
+    "./column": {
+      "import": "./dist/esm/charts/columnChart.js"
+    },
+    "./columnLine": {
+      "import": "./dist/esm/charts/columnLineChart.js"
+    },
+    "./bullet": {
+      "import": "./dist/esm/charts/bulletChart.js"
+    },
+    "./boxPlot": {
+      "import": "./dist/esm/charts/boxPlotChart.js"
+    },
+    "./treemap": {
+      "import": "./dist/esm/charts/treemapChart.js"
+    },
+    "./heatmap": {
+      "import": "./dist/esm/charts/heatmapChart.js"
+    },
+    "./scatter": {
+      "import": "./dist/esm/charts/scatterChart.js"
+    },
+    "./lineScatter": {
+      "import": "./dist/esm/charts/lineScatterChart.js"
+    },
+    "./bubble": {
+      "import": "./dist/esm/charts/bubbleChart.js"
+    },
+    "./pie": {
+      "import": "./dist/esm/charts/pieChart.js"
+    },
+    "./nestedPie": {
+      "import": "./dist/esm/charts/nestedPieChart.js"
+    },
+    "./radar": {
+      "import": "./dist/esm/charts/radarChart.js"
+    },
+    "./radialBar": {
+      "import": "./dist/esm/charts/radialBarChart.js"
+    },
+    "./gauge": {
+      "import": "./dist/esm/charts/gaugeChart.js"
+    },
+    "./td-chart.css": "./dist/td-chart.css",
+    "./td-chart.min.css": "./dist/td-chart.min.css",
+    "./": "./"
+  },
+  "scripts": {
+    "check-types": "tsc --project ./tsconfig.json",
+    "validate": "npm run check-types && npm run lint",
+    "lint": "eslint .",
+    "test": "jest --detectOpenHandles --forceExit",
+    "test:watch": "jest --watch",
+    "test:ci": "npm run validate && jest",
+    "build": "npm run build:clean && npm run build:prod && npm run build:minify && npm run build:esm",
+    "build:clean": "rm -rf ./dist",
+    "build:prod": "webpack --mode=production",
+    "build:minify": "webpack --mode=production --env minify",
+    "build:esm": "ttsc -p tsconfig.esm.json",
+    "build:storybook": "build-storybook",
+    "serve": "webpack serve --mode=development",
+    "storybook": "start-storybook -p 6006",
+    "ts2js": "tsc --outDir tmpdoc --sourceMap false --target ES2015 --noEmit false",
+    "doc:dev": "npm run build:prod && npm run ts2js && tuidoc --serv",
+    "doc": "npm run ts2js && tuidoc",
+    "publish:cdn": "node scripts/publishToCDN.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nhn/tui.chart.git"
+  },
+  "author": "NHN Cloud. FE Development Lab <dl_javascript@nhn.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nhn/tui.chart/issues"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "homepage": "https://ui.toast.com",
+  "devDependencies": {}
+}

package/types/brushes.d.ts

@@ -0,0 +1,30 @@
+export type SectorStyle = {
+  lineWidth?: number;
+  strokeStyle?: string;
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+};
+
+export type SectorStyleName = 'default' | 'hover' | 'nested';
+export type CircleStyleName = 'default' | 'plot';
+export type RectStyleName = 'shadow';
+export type LabelStyleName = 'default' | 'title' | 'axisTitle' | 'rectLabel';
+export type StrokeLabelStyleName = 'none' | 'stroke';
+
+export interface LabelStyle {
+  font?: string;
+  fillStyle?: string;
+  textAlign?: CanvasTextAlign;
+  textBaseline?: CanvasTextBaseline;
+}
+
+export type StrokeLabelStyle = {
+  lineWidth?: number;
+  strokeStyle?: string;
+  shadowColor?: string;
+  shadowBlur?: number;
+};
+
+export type PathRectStyleName = 'shadow';

package/types/charts.d.ts

@@ -0,0 +1,152 @@
+import {
+  AreaChartOptions,
+  AreaSeriesData,
+  BarChartOptions,
+  BaseOptions,
+  BoxPlotChartOptions,
+  BoxPlotSeriesData,
+  BoxSeriesData,
+  BubbleSeriesData,
+  BulletChartOptions,
+  BulletSeriesData,
+  ColumnChartOptions,
+  ColumnLineChartOptions,
+  ColumnLineData,
+  GaugeChartOptions,
+  GaugeSeriesData,
+  HeatmapChartOptions,
+  HeatmapSeriesData,
+  LineAreaChartOptions,
+  LineAreaData,
+  LineChartOptions,
+  LineScatterChartOptions,
+  LineScatterData,
+  LineSeriesData,
+  NestedPieChartOptions,
+  NestedPieSeriesData,
+  PieChartOptions,
+  PieSeriesData,
+  RadarChartOptions,
+  RadarSeriesData,
+  RadialBarChartOptions,
+  RadialBarSeriesData,
+  ScatterChartOptions,
+  ScatterSeriesData,
+  TreemapChartOptions,
+  TreemapSeriesData,
+} from './options';
+
+export type AddSeriesDataInfo = { chartType?: string; category?: string };
+export type SelectSeriesInfo = {
+  seriesIndex?: number;
+  index?: number;
+  name?: string;
+  chartType?: 'line' | 'area' | 'column' | 'scatter';
+};
+
+export interface AreaChartProps {
+  el: HTMLElement;
+  options: AreaChartOptions;
+  data: AreaSeriesData;
+}
+
+export interface BarChartProps {
+  el: HTMLElement;
+  options: BarChartOptions;
+  data: BoxSeriesData;
+}
+
+export interface BoxPlotChartProps {
+  el: HTMLElement;
+  options: BoxPlotChartOptions;
+  data: BoxPlotSeriesData;
+}
+
+export interface BubbleChartProps {
+  el: HTMLElement;
+  options: BaseOptions;
+  data: BubbleSeriesData;
+}
+
+export interface BulletChartProps {
+  el: HTMLElement;
+  options: BulletChartOptions;
+  data: BulletSeriesData;
+}
+
+export interface ColumnChartProps {
+  el: HTMLElement;
+  options: ColumnChartOptions;
+  data: BoxSeriesData;
+}
+
+export interface ColumnLineChartProps {
+  el: HTMLElement;
+  options: ColumnLineChartOptions;
+  data: ColumnLineData;
+}
+
+export interface HeatmapChartProps {
+  el: HTMLElement;
+  options: HeatmapChartOptions;
+  data: HeatmapSeriesData;
+}
+
+export interface LineAreaChartProps {
+  el: HTMLElement;
+  options: LineAreaChartOptions;
+  data: LineAreaData;
+}
+
+export interface LineChartProps {
+  el: HTMLElement;
+  options: LineChartOptions;
+  data: LineSeriesData;
+}
+
+export interface LineScatterChartProps {
+  el: HTMLElement;
+  options: LineScatterChartOptions;
+  data: LineScatterData;
+}
+
+export interface NestedPieChartProps {
+  el: HTMLElement;
+  options: NestedPieChartOptions;
+  data: NestedPieSeriesData;
+}
+
+export interface PieChartProps {
+  el: HTMLElement;
+  options: PieChartOptions;
+  data: PieSeriesData;
+}
+
+export interface RadarChartProps {
+  el: HTMLElement;
+  options: RadarChartOptions;
+  data: RadarSeriesData;
+}
+
+export interface RadialBarChartProps {
+  el: HTMLElement;
+  options: RadialBarChartOptions;
+  data: RadialBarSeriesData;
+}
+
+export interface ScatterChartProps {
+  el: HTMLElement;
+  options: ScatterChartOptions;
+  data: ScatterSeriesData;
+}
+
+export interface TreemapChartProps {
+  el: HTMLElement;
+  options: TreemapChartOptions;
+  data: TreemapSeriesData;
+}
+export interface GaugeChartProps {
+  el: HTMLElement;
+  options: GaugeChartOptions;
+  data: GaugeSeriesData;
+}

package/types/components/axis.d.ts

@@ -0,0 +1,71 @@
+import { Point, Rect } from '../options';
+import { Nullable, StyleProp, RectStyle } from './series';
+import {
+  StrokeLabelStyleName,
+  StrokeLabelStyle,
+  LabelStyleName,
+  LabelStyle,
+  PathRectStyleName,
+} from '../brushes';
+
+export type LabelModel = {
+  type: 'label';
+  style?: StyleProp<LabelStyle, LabelStyleName>;
+  stroke?: StyleProp<StrokeLabelStyle, StrokeLabelStyleName>;
+  text: string;
+  opacity?: number;
+  radian?: number;
+  rotationPosition?: Point;
+} & Point;
+
+export type TickModel = {
+  type: 'tick';
+  isYAxis: boolean;
+  tickSize: number;
+  strokeStyle: string;
+  lineWidth: number;
+} & Point;
+
+export type LineModel = {
+  type: 'line';
+  x2: number;
+  y2: number;
+  strokeStyle?: string;
+  lineWidth?: number;
+  dashSegments?: number[];
+  name?: string;
+} & Point;
+
+export type AxisModels = {
+  label: LabelModel[];
+  tick: TickModel[];
+  axisLine: LineModel[];
+};
+
+export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left';
+type Arrow = {
+  direction: ArrowDirection;
+  points: Point[];
+} & Point;
+
+export type BubbleInfo = Rect & {
+  fill: string;
+  lineWidth?: number;
+  strokeStyle?: string;
+  radius?: number;
+  style?: Nullable<StyleProp<RectStyle, PathRectStyleName>>;
+  radian?: number;
+  direction?: ArrowDirection;
+} & Nullable<Partial<Arrow>>;
+
+export type BubbleLabelModel = {
+  type: 'bubbleLabel';
+  radian?: number;
+  rotationPosition?: Point;
+  bubble: BubbleInfo;
+  label: Point & {
+    text?: string;
+    strokeStyle?: string;
+    style?: StyleProp<LabelStyle, LabelStyleName>;
+  };
+};

package/types/components/circleLegend.d.ts

@@ -0,0 +1,9 @@
+import { Point } from '../options';
+
+export type CircleLegendModel = {
+  radius: number;
+  value: number;
+  type: 'circleLegend';
+} & Point;
+
+export type CircleLegendModels = { circleLegend: CircleLegendModel[] };

package/types/components/dataLabels.d.ts

@@ -0,0 +1,119 @@
+import {
+  Point,
+  DataLabelOptions,
+  DataLabelPieSeriesName,
+  StackTotalDataLabel,
+  BoxSeriesDataType,
+} from '../options';
+import {
+  PointModel,
+  SectorModel,
+  RectModel,
+  Nullable,
+  PieSectorModel,
+  RadialBarSectorModel,
+} from './series';
+import { LineModel } from './axis';
+import { PieDataLabelTheme, CalloutTheme, BoxDataLabel, BubbleDataLabel } from '../theme';
+
+export type DataLabelSeriesType =
+  | 'area'
+  | 'line'
+  | 'bar'
+  | 'column'
+  | 'bullet'
+  | 'pie'
+  | 'radialBar';
+
+export type DataLabelType =
+  | 'stackTotal'
+  | 'rect'
+  | 'point'
+  | 'sector'
+  | 'line'
+  | 'pieSeriesName'
+  | 'treemapSeriesName';
+
+type DataLabelData = {
+  data: DataLabel[];
+  options: DataLabelOptions;
+};
+
+export type DataLabelsMap = {
+  [key in DataLabelSeriesType]?: DataLabelData;
+};
+
+export type DataLabel = {
+  type: DataLabelType;
+  text: string;
+  textAlign: CanvasTextAlign;
+  textBaseline: CanvasTextBaseline;
+  callout?: Nullable<Callout>;
+  name?: string;
+  seriesColor?: string;
+  theme: BubbleDataLabel | BoxDataLabel;
+  radian?: number;
+} & Point;
+
+export type DataLabelOption = Required<
+  Pick<DataLabelOptions, 'anchor' | 'offsetX' | 'offsetY' | 'formatter'>
+> & {
+  stackTotal?: Required<StackTotalDataLabel>;
+  pieSeriesName?: DataLabelPieSeriesName;
+};
+
+export type DataLabelModel = {
+  type: 'dataLabel';
+  dataLabelType: DataLabelType;
+  opacity?: number;
+  radian?: number;
+} & Omit<DataLabel, 'type'>;
+
+export type DataLabelModels = { series: DataLabelModel[]; total: DataLabelModel[] };
+
+export type PointDataLabel = PointModel & {
+  type: 'point';
+  theme: BubbleDataLabel | BoxDataLabel;
+};
+export type RadialDataLabel = PieSectorModel & {
+  theme: PieDataLabelTheme;
+};
+export type RadialBarDataLabel = RadialBarSectorModel & {
+  theme: BoxDataLabel;
+};
+export type RectDirection = 'top' | 'bottom' | 'left' | 'right';
+
+export type RectDataLabel = Omit<RectModel, 'type' | 'color' | 'value'> & {
+  value?: BoxSeriesDataType | string;
+  type: 'rect' | 'stackTotal' | 'treemapSeriesName';
+  direction: RectDirection;
+  plot: {
+    x: number;
+    y: number;
+    size: number;
+  };
+  modelType?: string;
+  color?: string;
+  theme: BubbleDataLabel | BoxDataLabel;
+};
+
+export type LineDataLabel = LineModel & {
+  value: number;
+  textAlign?: CanvasTextAlign;
+  textBaseline?: CanvasTextBaseline;
+  theme: BubbleDataLabel;
+};
+
+export type Callout = Point & { x2: number; y2: number; theme: CalloutTheme };
+export type SeriesDataLabelType =
+  | PointDataLabel
+  | RadialDataLabel
+  | RectDataLabel
+  | LineDataLabel
+  | RadialBarDataLabel;
+
+export type SeriesDataLabels = Array<SeriesDataLabelType>;
+
+type RadialAnchor = PieDataLabelAnchor | RadialBarAnchor;
+export type PieDataLabelAnchor = 'center' | 'outer';
+export type RadialBarAnchor = 'start' | 'center' | 'end';

package/types/components/exportMenu.d.ts

@@ -0,0 +1,14 @@
+import { Point } from '../options';
+import { ExportMenuButtonTheme } from '../theme';
+
+export type ExportMenuButtonModel = {
+  type: 'exportMenuButton';
+  opened: boolean;
+  theme: Required<ExportMenuButtonTheme>;
+} & Point;
+
+export type ExportMenuModel = {
+  type: 'exportMenu';
+} & Point;
+
+export type ExportMenuModels = { exportMenuButton: ExportMenuButtonModel[] };

package/types/components/legend.d.ts

@@ -0,0 +1,27 @@
+import { Align, Point } from '../options';
+import { ChartType, LegendIconType } from '../store/store';
+import { FontTheme } from '../theme';
+
+export type CheckedLegendType = Pick<LegendData, 'chartType' | 'label' | 'checked'>[];
+
+type LegendData = {
+  color: string;
+  label: string;
+  viewLabel: string;
+  checked: boolean;
+  active: boolean;
+  chartType: ChartType;
+  iconType: LegendIconType;
+  useScatterChartIcon?: boolean;
+  rowIndex: number;
+  columnIndex: number;
+  colorIndex?: number;
+  colorByCategories?: boolean;
+} & Point;
+
+export type LegendModel = {
+  type: 'legend';
+  align: Align;
+  showCheckbox: boolean;
+  data: LegendData[];
+} & FontTheme;

package/types/components/plot.d.ts

@@ -0,0 +1,8 @@
+import { LineModel } from '../components/axis';
+import { RectModel } from '../components/series';
+
+export type PlotModels = {
+  plot: Array<LineModel | RectModel>;
+  line: LineModel[];
+  band: RectModel[];
+};

package/types/components/radialAxis.d.ts

@@ -0,0 +1,22 @@
+import { RectModel, CircleModel } from './series';
+import { BubbleLabelModel, LabelModel, LineModel } from './axis';
+
+type RadialAxisModels = {
+  dot: RectModel[];
+  verticalAxisLabel: BubbleLabelModel[];
+  circularAxisLabel: LabelModel[];
+  line: ArcModel[] | CircleModel[];
+  tick: LineModel[];
+};
+
+type ArcModel = {
+  type: 'arc';
+  x: number;
+  y: number;
+  angle: { start: number; end: number };
+  borderWidth: number;
+  borderColor: string;
+  drawingStartAngle: number;
+  radius: number;
+  clockwise: boolean;
+};

package/types/components/radialPlot.d.ts

@@ -0,0 +1,11 @@
+import { PolygonModel, CircleModel, SectorModel } from './series';
+import { LineModel } from './axis';
+import { ArcModel } from './radialAxis';
+
+export type RadialPlotModelType = PolygonModel[] | CircleModel[] | ArcModel[];
+
+export type RadialPlotModels = {
+  plot: RadialPlotModelType;
+  line: LineModel[];
+  band: SectorModel[];
+};

package/types/components/rangeSelection.d.ts

@@ -0,0 +1,3 @@
+import { RectModel } from './series';
+
+export type RangeSelectionModels = { selectionArea: RectModel[] };

package/types/components/resetButton.d.ts

@@ -0,0 +1,13 @@
+import { Point } from '../options';
+
+export type ResetButtonModel = {
+  type: 'resetButton';
+} & Point;
+
+export type ResetButtonModels = ResetButtonModel[];
+
+export type BackButtonModel = {
+  type: 'backButton';
+} & Point;
+
+export type BackButtonModels = BackButtonModel[];