@toast-ui/chart - npm Package Compare versions

Comparing version 4.1.2 to 4.1.3

dist/esm/charts/areaChart.d.ts

 import Chart, { SelectSeriesInfo } from "./chart";
-import { AreaChartOptions, AreaSeriesData, AreaSeriesDataType, AreaSeriesInput, PlotLine, PlotBand } from "../../types/options";
+import { AreaChartOptions, AreaSeriesData, AreaSeriesInput, PlotLine, PlotBand } from "../../types/options";
 export interface AreaChartProps {
@@ -99,3 +99,3 @@ el: HTMLElement;
      */
-    addData: (data: AreaSeriesDataType[], category: string) => void;
+    addData: (data: import("../../types/options").BoxSeriesDataType[], category: string) => void;
     /**
@@ -102,0 +102,0 @@ * Add series.

dist/esm/charts/chart.d.ts

@@ -33,3 +33,4 @@ import Store from "../store/store";
     animator: Animator;
-    readonly el: HTMLElement;
+    readonly containerEl: HTMLElement;
+    el: HTMLDivElement;
     ctx: CanvasRenderingContext2D;
@@ -47,6 +48,6 @@ painter: any;
     private getAnimationDuration;
+    createChartWrapper(): HTMLDivElement;
     constructor(props: ChartProps<T>);
     resizeChartSize(containerWidth?: number, containerHeight?: number): void;
     private debounceResizeEvent;
-    private debounceWindowResizeEvent;
     setResizeEvent(): void;
@@ -53,0 +54,0 @@ clearResizeEvent(): void;

dist/esm/charts/chart.js

@@ -54,7 +54,4 @@ import Store from "../store/store";
         this.resizeObserver = null;
-        this.debounceResizeEvent = debounce((containerWidth, containerHeight) => {
-            this.resizeChartSize(containerWidth, containerHeight);
-        }, 100);
-        this.debounceWindowResizeEvent = debounce(() => {
-            const { offsetWidth, offsetHeight } = this.el;
+        this.debounceResizeEvent = debounce(() => {
+            const { offsetWidth, offsetHeight } = this.containerEl;
             this.resizeChartSize(offsetWidth, offsetHeight);
@@ -180,3 +177,3 @@ }, 100);
             this.clearResizeEvent();
-            this.el.innerHTML = '';
+            this.containerEl.innerHTML = '';
         };
@@ -251,3 +248,5 @@ /**
         }
-        this.el = el;
+        this.containerEl = el;
+        this.el = this.createChartWrapper();
+        this.containerEl.appendChild(this.el);
         this.animator = new Animator();
@@ -315,2 +314,7 @@ this.store = new Store({
     }
+    createChartWrapper() {
+        const el = document.createElement('div');
+        el.classList.add('toastui-chart-wrapper');
+        return el;
+    }
     resizeChartSize(containerWidth, containerHeight) {
@@ -335,4 +339,4 @@ this.animationControlFlag.resizing = true;
         const { usingContainerSize } = this.store.state;
-        if ((usingContainerSize.height && !this.el.style.height.length) ||
-            (usingContainerSize.width && !this.el.style.width.length)) {
+        if ((usingContainerSize.height && !this.containerEl.style.height.length) ||
+            (usingContainerSize.width && !this.containerEl.style.width.length)) {
             throw new Error(message.AUTO_LAYOUT_CONTAINER_SIZE_ERROR);
@@ -342,12 +346,11 @@ }
         if (isResizeObserverAPIExist) {
-            window.addEventListener('resize', this.debounceWindowResizeEvent);
+            window.addEventListener('resize', this.debounceResizeEvent);
         }
         else {
             this.resizeObserver = new ResizeObserver((entries) => {
-                entries.forEach((entry) => {
-                    const { width, height } = entry.contentRect;
-                    this.debounceResizeEvent(width, height);
+                entries.forEach(() => {
+                    this.debounceResizeEvent();
                 });
             });
-            this.resizeObserver.observe(this.el);
+            this.resizeObserver.observe(this.containerEl);
         }
@@ -357,3 +360,3 @@ }
         if (this.resizeObserver) {
-            this.resizeObserver.unobserve(this.el);
+            this.resizeObserver.unobserve(this.containerEl);
             this.resizeObserver.disconnect();
@@ -363,3 +366,3 @@ this.resizeObserver = null;
         else {
-            window.removeEventListener('resize', this.debounceWindowResizeEvent);
+            window.removeEventListener('resize', this.debounceResizeEvent);
         }
@@ -430,3 +433,3 @@ }
         this.initStore();
-        this.store.dispatch('initChartSize', this.el);
+        this.store.dispatch('initChartSize', this.containerEl);
     }
@@ -472,3 +475,3 @@ draw() {
         this.setResizeEventListeners(eventName, options);
-        const { offsetWidth, offsetHeight } = this.el;
+        const { offsetWidth, offsetHeight } = this.containerEl;
         this.store.dispatch(eventName, {
@@ -475,0 +478,0 @@ options,

dist/esm/charts/lineAreaChart.d.ts

 import Chart, { AddSeriesDataInfo, SelectSeriesInfo } from "./chart";
-import { AreaSeriesDataType, LineAreaChartOptions, LineAreaData, LineSeriesDataType, PlotBand, PlotLine } from "../../types/options";
+import { LineAreaChartOptions, LineAreaData, LineSeriesDataType, PlotBand, PlotLine } from "../../types/options";
 export interface LineAreaChartProps {
@@ -100,3 +100,3 @@ el: HTMLElement;
      */
-    addData: (data: LineSeriesDataType[] | AreaSeriesDataType[], category: string, chartType: "area" | "line") => void;
+    addData: (data: import("../../types/options").BoxSeriesDataType[] | LineSeriesDataType[], category: string, chartType: "area" | "line") => void;
     /**
@@ -103,0 +103,0 @@ * Add series.

dist/esm/component/boxSeries.d.ts

@@ -103,3 +103,3 @@ import Component from "./component";
         thickness?: number | undefined;
-        value?: number | RangeDataType<number> | undefined;
+        value?: number | RangeDataType<number> | null | undefined;
         name?: string | undefined;
@@ -125,3 +125,3 @@ index?: number | undefined;
         thickness?: number | undefined;
-        value?: number | RangeDataType<number> | undefined;
+        value?: number | RangeDataType<number> | null | undefined;
         name?: string | undefined;
@@ -158,3 +158,3 @@ index?: number | undefined;
     getStartPositionWithRangeValue(value: RangeDataType<number>, barLength: number, renderOptions: RenderOptions): number;
-    getStartPosition(barLength: number, value: BoxSeriesDataType, renderOptions: RenderOptions, isLBSideWithDiverging: boolean): number;
+    getStartPosition(barLength: number, value: Exclude<BoxSeriesDataType, null>, renderOptions: RenderOptions, isLBSideWithDiverging: boolean): number;
     private getStartPosOnRightTopSide;
@@ -184,3 +184,3 @@ private getStartPosOnLeftBottomSide;
         type: "rect";
-        value?: number | RangeDataType<number> | undefined;
+        value?: number | RangeDataType<number> | null | undefined;
         name?: string | undefined;
@@ -187,0 +187,0 @@ index?: number | undefined;

dist/esm/component/boxSeries.js

@@ -382,10 +382,12 @@ import Component from "./component";
             data.forEach((value, dataIndex) => {
-                const barLength = this.makeBarLength(value, renderOptions);
-                if (isNumber(barLength)) {
-                    tooltipData.push({
-                        label: name,
-                        color,
-                        value: this.getTooltipValue(value),
-                        category: categories.length ? categories[dataIndex] : '',
-                    });
+                if (!isNull(value)) {
+                    const barLength = this.makeBarLength(value, renderOptions);
+                    if (isNumber(barLength)) {
+                        tooltipData.push({
+                            label: name,
+                            color,
+                            value: this.getTooltipValue(value),
+                            category: categories.length ? categories[dataIndex] : '',
+                        });
+                    }
                 }
@@ -392,0 +394,0 @@ });

dist/esm/component/bulletSeries.d.ts

@@ -74,3 +74,3 @@ import Component from "./component";
         type: "rect";
-        value?: number | import("../../types/options").RangeDataType<number> | undefined;
+        value?: number | import("../../types/options").RangeDataType<number> | null | undefined;
         name?: string | undefined;
@@ -77,0 +77,0 @@ index?: number | undefined;

dist/esm/component/exportMenu.js

@@ -6,3 +6,2 @@ import Component from "./component";
 import { getFontStyleString, getTranslateString } from "../helpers/style";
-import { getScrollPosition } from "../helpers/tooltip";
 const EXPORT_MENU_WIDTH = 140;
@@ -121,6 +120,4 @@ export const BUTTON_RECT_SIZE = 24;
         const exportMenu = this.exportMenuEl.querySelector('.toastui-chart-export-menu');
-        const { top, left } = this.chartEl.getBoundingClientRect();
-        const { scrollX, scrollY } = getScrollPosition();
-        const x = left + this.chartWidth - EXPORT_MENU_WIDTH - padding.X + scrollX;
-        const y = top + padding.Y + BUTTON_RECT_SIZE + 5 + scrollY;
+        const x = this.chartWidth - EXPORT_MENU_WIDTH - padding.X;
+        const y = padding.Y + BUTTON_RECT_SIZE + 5;
         const { borderRadius, borderWidth, borderColor } = this.theme.panel;
@@ -127,0 +124,0 @@ const style = `

dist/esm/component/tooltip.js

 import Component from "./component";
-import { getScrollPosition, getValueString } from "../helpers/tooltip";
+import { getValueString } from "../helpers/tooltip";
 import { getBodyTemplate, tooltipTemplates } from "../helpers/tooltipTemplate";
@@ -51,11 +51,7 @@ import { isBoolean, isNumber, isString } from "../helpers/utils";
         }
-        const { scrollX, scrollY } = getScrollPosition();
-        x += scrollX;
-        y += scrollY;
         return { x, y };
     }
     setTooltipPosition(model) {
-        const { top, left } = this.chartEl.getBoundingClientRect();
         const { x, y } = this.getPositionInRect(model);
-        this.tooltipContainerEl.style.transform = getTranslateString(left + x, top + y);
+        this.tooltipContainerEl.style.transform = getTranslateString(x, y);
     }
@@ -62,0 +58,0 @@ getTooltipInfoModels() {

dist/esm/helpers/tooltip.d.ts

 import { TooltipDataValue } from "../../types/components/tooltip";
 export declare function getValueString(value: TooltipDataValue): string;
-export declare function getScrollPosition(): {
-    scrollX: number;
-    scrollY: number;
-};

dist/esm/helpers/tooltip.js

@@ -19,8 +19,1 @@ import { isObject } from "./utils";
 }
-export function getScrollPosition() {
-    var _a, _b;
-    return {
-        scrollX: (_a = window.scrollX, (_a !== null && _a !== void 0 ? _a : window.pageXOffset)),
-        scrollY: (_b = window.scrollY, (_b !== null && _b !== void 0 ? _b : window.pageYOffset)),
-    };
-}

dist/esm/store/layout.js

@@ -184,3 +184,3 @@ import { extend } from "./store";
 function getPlotRect(xAxis, yAxis, size) {
-    return Object.assign({ x: xAxis.x, y: yAxis.y }, getValidRectSize(size, Math.max(xAxis.width, 1), Math.max(yAxis.height, 1)));
+    return Object.assign({ x: xAxis.x, y: yAxis.y }, getValidRectSize(size, xAxis.width, yAxis.height));
 }
@@ -187,0 +187,0 @@ function getTitleRect(chartSize, exportMenu, visible, titleHeight) {

dist/esm/store/scale.js

@@ -7,2 +7,3 @@ import { getAxisName, getSizeKey, isLabelAxisOnYAxis, getYAxisOption, getValueAxisNames, isSeriesUsingRadialAxes, } from "../helpers/axes";
 import { isExist } from "../helpers/utils";
+const MIN_OFFSET_SIZE = 1;
 function getLabelScaleData(state, labelAxisOnYAxis, scaleOptions, labelAxisName) {
@@ -17,3 +18,3 @@ var _a;
         dataRange: dataRange[labelAxisName],
-        offsetSize: layout.plot[labelSizeKey],
+        offsetSize: Math.max(layout.plot[labelSizeKey], MIN_OFFSET_SIZE),
         scaleOption: scaleOptions[labelAxisName],
@@ -45,3 +46,3 @@ rawCategoriesSize: rawCategories.length,
             dataRange: dataRange[valueAxisName],
-            offsetSize: layout.plot[valueSizeKey],
+            offsetSize: Math.max(layout.plot[valueSizeKey], MIN_OFFSET_SIZE),
             scaleOption: scaleOptions[valueAxisName],
@@ -54,3 +55,3 @@ };
             dataRange: dataRange[valueAxisName],
-            offsetSize: layout.plot[valueSizeKey],
+            offsetSize: Math.max(layout.plot[valueSizeKey], MIN_OFFSET_SIZE),
             scaleOption: scaleOptions[valueAxisName],
@@ -57,0 +58,0 @@ });

package.json

 {
   "name": "@toast-ui/chart",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "TOAST UI Application: Chart",
@@ -141,3 +141,3 @@ "main": "dist/toastui-chart.js",
   },
-  "gitHead": "e71b34b5b6283759a67da7962425e8cb26ab66bb"
+  "gitHead": "5aa24f7635a35e6649693e40bf963b811f12dca4"
 }

types/options.d.ts

@@ -27,3 +27,3 @@ import { Categories, RawSeries, Options, StoreModule } from './store/store';
 export type RangeDataType<T> = [T, T];
-export type BoxSeriesDataType = number | RangeDataType<number>;
+export type BoxSeriesDataType = number | RangeDataType<number> | null;
 type LineSeriesDataType = number | Point | [number, number] | [string, number] | null;
@@ -544,3 +544,3 @@ type HeatmapSeriesDataType = (number | null)[];
   categories: string[];
-  series: BoxSeriesType<BoxSeriesDataType>[];
+  series: BoxSeriesInput<BoxSeriesDataType>[];
 }
@@ -547,0 +547,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3346293

decreased by-0.04%

Lines of code

60218

decreased by-0.03%

No dependency changes