Merge pull request #630 from rakseong/main

fix(view) : 상단 라인 차트 전체 기간에서 특정 기간으로 Brushing 후 Reset 기능 버튼 추가

Author: pithesun

packages/view/src/components/TemporalFilter/LineChartBrush.ts

@@ -5,8 +5,7 @@ import type { Margin } from "./LineChart";
 
 export type BrushXSelection = [number, number] | null;
 
-export const drawBrush = (
-  refTarget: SVGSVGElement,
+export const createBrush = (
   margin: Margin,
   chartWidth: number,
   chartHeight: number,
@@ -19,7 +18,6 @@ export const drawBrush = (
     brushHandler(event.selection as BrushXSelection);
   };
 
-  const svg = d3.select(refTarget);
   const brush = d3
     .brushX()
     .extent([
@@ -29,8 +27,20 @@ export const drawBrush = (
     // .handleSize(5)
     .on("end", brushed);
 
-  svg
+  return brush;
+};
+
+export const drawBrush = (refTarget: SVGSVGElement, margin: Margin, brush: d3.BrushBehavior<unknown>) => {
+  const svg = d3.select(refTarget);
+
+  const brushGroup = svg
     .append("g")
     .call(brush)
     .attr("transform", `translate(${margin.left / 2}, 0)`);
+
+  return brushGroup;
+};
+
+export const resetBrush = (brushGroup: SVGGElement, brush: d3.BrushBehavior<unknown>) => {
+  d3.select(brushGroup).call(brush.move, null);
 };

packages/view/src/components/TemporalFilter/TemporalFilter.tsx

@@ -12,13 +12,16 @@ import drawLineChart from "./LineChart";
 import type { LineChartDatum } from "./LineChart";
 import { useWindowResize } from "./TemporalFilter.hook";
 import type { BrushXSelection } from "./LineChartBrush";
-import { drawBrush } from "./LineChartBrush";
+import { createBrush, drawBrush, resetBrush } from "./LineChartBrush";
 import { BRUSH_MARGIN, TEMPORAL_FILTER_LINE_CHART_STYLES } from "./LineChart.const";
 
 const TemporalFilter = () => {
   const { data, filteredData, setFilteredData, filteredRange, setFilteredRange, setSelectedData, loading } =
     useGlobalData();
 
+  const brushGroupRef = useRef<SVGGElement | null>(null);
+  const brushRef = useRef<d3.BrushBehavior<unknown>>();
+
   const loaderStyle: CSSProperties = {
     position: "fixed",
     left: "50%",
@@ -113,7 +116,8 @@ const TemporalFilter = () => {
       setSelectedData([]);
     };
 
-    drawBrush(svgElement, BRUSH_MARGIN, windowSize.width, chartHeight * 2, dateChangeHandler);
+    brushRef.current = createBrush(BRUSH_MARGIN, windowSize.width, chartHeight * 2, dateChangeHandler);
+    brushGroupRef.current = drawBrush(svgElement, BRUSH_MARGIN, brushRef.current).node();
 
     return () => {
       d3.select(svgElement).selectAll("g").remove();
@@ -130,6 +134,12 @@ const TemporalFilter = () => {
     setSelectedData,
   ]);
 
+  const resetBrushHandler = () => {
+    if (brushGroupRef.current && brushRef.current) {
+      resetBrush(brushGroupRef.current, brushRef.current);
+    }
+  };
+
   return (
     <article className="temporal-filter">
       <BounceLoader
@@ -141,6 +151,14 @@ const TemporalFilter = () => {
         className="line-charts"
         ref={wrapperRef}
       >
+        {filteredRange && (
+          <button
+            type="button"
+            onClick={resetBrushHandler}
+          >
+            reset
+          </button>
+        )}
         <svg
           className="line-charts-svg"
           ref={ref}