mr-wellick / react-d3-ggplot Goto Github PK

 interface IContext {
  data: any[];
  aes: string[];
  dimensions?: { width: number; height: number; padding: number };
  x_format?: string;
  y_format?: string;
}

// currently, these two hooks take no arguments
useXScale();
useYScale();

// consider adding a parameter in function definition to eliminate code and
// make it easier to maintain.
useScale("x")
useScale("y")

// current API
const LineChart = () => {
  const [state, setState] = useState({
    data: [{ x: 0, y: 0 }, { x: 10, y: 10 }],
    aes: ["x", "y"],
    dimensions: { width: 500, height: 300, padding: 50 }
  });

  return (
    <GGPLOT {...state}>
      <Line />
    </GGPLOT>
  );
};

// suggested API
const ScatterPlot = () => {
  const [state, setState] = useState({
    data: [{ x: 0, y: 0 }, { x: 10, y: 10 }],
    aes: ["x", "y"]
  });

  return (
    <GGPLOT {...state}>
      <Points />
    </GGPLOT>
  );
};

/*
    old code
*/
interface IAppContext<T> {
  data: T[];
  aes: [string, string];
  dimensions: { width: number; height: number; padding: number };
}

const ChartContext = createContext<IAppContext<string | number | object>>({
  data: [],
  aes: ["", ""],
  dimensions: { width: window.innerWidth, height: window.innerHeight, padding: 50 }
});

/*
    after refactor
*/
interface IAppContext {
  data: { [key: string]: object | string | number }[]
  aes: [string, string];
  dimensions?: { width: number; height: number; padding: number };
}

const ChartContext = createContext<IAppContext>({
  data: [],
  aes: ["", ""],
  dimensions: { width: window.innerWidth, height: window.innerHeight, padding: 50 }
});

{
    "compilerOptions": {
       // Raise error on expressions and declarations with an implied 'any' type.
       "noImplicitAny": false 
     }
}

    <g>
      {context.data.map((datum, index) => (
        <rect
          key={index}
          width={xScale.bandwidth()} // this works for ordinal scales but we need to account for time and number scales as well
          height={yScale.range()[0] - yScale(datum[context.aes[1]])}
          x={xScale(datum[context.aes[0]])}
          y={yScale(datum[context.aes[1]])}
          fill={!props.fill ? "cyan" : props.fill}
        />
      ))}
    </g>

// Change from color to fill
interface IProps {
  color?: string;
}

function Background(props: IProps) {
  const { dimensions } = useContext(ChartContext);

  return (
    <rect
      width={dimensions.width - dimensions.padding * 2}
      height={dimensions.height - dimensions.padding * 2}
      fill="#f1f1f1"
      transform={`translate(${dimensions.padding}, ${dimensions.padding})`}
    />
  );
}

// 1. Add type information to props
function XAxis(props) {
  const context = useContext<IAppContext<string | number | object>>(ChartContext);
  const scale: AxisScale<AxisDomain> = useScale(context, "XAxis");

  useEffect(() => {
    const { dimensions, aes, data } = context;
    const axisLocation = `translate(0, ${dimensions.height - dimensions.padding})`;

    // select node returned by component and appends x-axis
    const node = select<SVGGElement, string | number | object>("g")
      .attr("transform", axisLocation)
      .call(axisBottom(scale));

    if (typeof data[0][aes[0]] === "number" && props.label !== undefined) {
      node.selectAll<SVGTextElement, number>("text").html(d => format(props.label)(d));
    }
  });

  return <g />;
}

const XAxis = () => {
  const ref = useRef(null);
  const { aes, dimensions } = useContext(ChartContext);
  // aes contains two values representing either the x or y values we want to visualize
  const scale = useScale(aes[0]);
  // need to set the range to properly display our graph visually
  scale.range([dimensions.padding, dimensions.width - dimensions.padding]);

  useEffect(() => {
    const axisLocation = `translate(0, ${dimensions.height - dimensions.padding})`;
    const node = select(ref.current).attr('transform', axisLocation);
    node.call(axisBottom(scale));
  }, [dimensions.height, dimensions.padding, scale]);

  return <g ref={ref} />;
};

const YAxis = () => {
  const ref = useRef(null);
  const { aes, dimensions } = useContext(ChartContext);
  // aes contains two values representing either the x or values we want to visualize
  const scale = useScale(aes[1]);
  // need to set the range to properly display our graph visually
  scale.range([dimensions.height - dimensions.padding, dimensions.padding]);

  useEffect(() => {
    const axisLocation = `translate(${dimensions.padding}, 0)`;
    const node = select(ref.current).attr('transform', axisLocation);
    node.call(axisLeft(scale));
  }, [dimensions.padding, scale]);

  return <g ref={ref} />;
};