산점도 행렬 축값 추가

Author: prisml

src/assets/entry/scss/components/_TableChart.scss

@@ -85,8 +85,8 @@ const ChartLayout = () => {
         let height = root.innerHeight;
         if (zoomIn) {
             if (type === SCATTERGRID) {
-                width = 600;
-                height = 600;
+                width = Math.max(width * 0.8, 600);
+                height = width;
             } else {
                 width = Math.max(width * 0.8, 600);
                 height = (width * 3) / 4;
@@ -142,11 +142,6 @@ const ChartLayout = () => {
                         {
                             [theme.vertical]: !(categoryIndexes.length && isHorizontalLegend),
                             [theme.horizontal]: categoryIndexes.length && isHorizontalLegend,
-                            [theme.scatter_matrix]: type === SCATTERGRID,
-                            [theme[`type_${categoryIndexes.length}`]]:
-                                type === SCATTERGRID &&
-                                categoryIndexes.length >= 2 &&
-                                categoryIndexes.length <= 6,
                         },
                         theme[type]
                     )}
@@ -155,23 +150,16 @@ const ChartLayout = () => {
                     {isDrawableHorizontalLegend ? (
                         <HorizontalLegend table={table} chart={selectedChart} />
                     ) : null}
-                    <div
-                        style={{
+                    <Chart
+                        key={key}
+                        table={table}
+                        chart={chart[chartIndex]}
+                        size={{
                             width: size.width,
                             height: size.height,
-                            margin: 'auto',
                         }}
-                    >
-                        <Chart
-                            key={key}
-                            table={table}
-                            chart={chart[chartIndex]}
-                            size={{
-                                width: size.width,
-                                height: size.height,
-                            }}
-                        />
-                    </div>
+                        zoomIn
+                    />
                     {categoryIndexes.length && !isHorizontalLegend ? (
                         <VerticalLegend table={table} chart={selectedChart} />
                     ) : null}

src/components/editor/dataAnalytics/chart/ChartLayout.jsx

@@ -68,7 +68,6 @@ const Legend = ({ maximumSelectionLength, showSelectAll, checkBox }) => {
 
     const handleOutsideClick = (checkItems) => {
         setShowDropdown(false);
-        console.log('hihi');
         if (checkBox) {
             dispatch({
                 type: 'SELECT_LEGEND_AXIS',

src/components/editor/dataAnalytics/chart/ScatterGrid.jsx

@@ -79,7 +79,18 @@ const Bar = ({ chart, table, size }) => {
             legend: { show: false },
             bindto: chartRef.current,
         });
-    }, []);
+    }, [
+        categoryIndexes,
+        chart,
+        id,
+        order,
+        size,
+        table,
+        theme.bg,
+        theme.chart_tooltip,
+        type,
+        xIndex,
+    ]);
 
     return (
         <div className={theme.chart_area}>

src/components/editor/dataAnalytics/chart/properties/Legend.jsx

@@ -101,7 +101,20 @@ const Histogram = ({ chart, table, size }) => {
             line: { step: { type: 'step-after' } },
             bindto: chartRef.current,
         });
-    }, []);
+    }, [
+        bin,
+        boundary,
+        categoryIndexes,
+        chart,
+        id,
+        size,
+        table,
+        theme.bull,
+        theme.histogram_legend,
+        theme.legend_list,
+        theme.text,
+        type,
+    ]);
 
     return (
         <div className={theme.chart_area}>

src/components/widget/Chart/Bar.jsx

@@ -78,7 +78,18 @@ const Line = ({ chart, table, size }) => {
             legend: { show: false },
             bindto: chartRef.current,
         });
-    }, []);
+    }, [
+        categoryIndexes,
+        chart,
+        id,
+        order,
+        size,
+        table,
+        theme.bg,
+        theme.chart_tooltip,
+        type,
+        xIndex,
+    ]);
 
     return (
         <div className={theme.chart_area}>

src/components/widget/Chart/Histogram.jsx

@@ -76,7 +76,7 @@ const Pie = ({ table, chart, size }) => {
             legend: { show: false },
             bindto: chartRef.current,
         });
-    }, []);
+    }, [categoryIndexes, chart, id, size, table, theme.bg, theme.chart_tooltip, type, xIndex]);
 
     return (
         <div className={theme.chart_area}>

src/components/widget/Chart/Line.jsx

@@ -33,7 +33,7 @@ const Scatter = ({ chart, table, size }) => {
             grid: { x: { show: true }, y: { show: true } },
             size,
             point: {
-                pattern: SCATTER_POINT_PATTERN,
+                // pattern: SCATTER_POINT_PATTERN,
                 opacity: 1,
             },
             color: {
@@ -103,7 +103,18 @@ const Scatter = ({ chart, table, size }) => {
             legend: { show: false },
             bindto: chartRef.current,
         });
-    }, []);
+    }, [
+        categoryIndexes,
+        chart,
+        id,
+        size,
+        table,
+        theme.bg,
+        theme.chart_tooltip,
+        type,
+        xIndex,
+        yIndex,
+    ]);
 
     return (
         <div className={theme.chart_area}>