feat: Add a PR activity chart

[bdougie]

Description

This PR adds a lib file to count PRs merged and closed. This is to be displayed in a chart.

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

fixes #18

Mobile & Desktop Screenshots/Recordings

Steps to QA

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

❌ Deploy Preview for contributor-info failed.

Name	Link
🔨 Latest commit	22d1961
🔍 Latest deploy log	https://app.netlify.com/sites/contributor-info/deploys/65910dda229d3200088de3da

[bdougie]

So far have this providing the data I think I need. Going to start exploring adding this to a nivo line chart next.

example json for http://localhost:3000/open-sauced/app

[bdougie]

@open-sauced/engineering no rush on looking at this but if you are. I am trying to figure out why my chart is not rendering. Perhaps you have seen this error. I need to step away from debugging, but thought I'd share incase someone else is peaking at GitHub this weekend.

error message

Before the above error, I was getting an id error, which is why id: x was added to {id: x, x, y}

update:

Before the above error, I was getting an id error, which is why id: x was added to {id: x, x, y}

The error has nothing to do with that. The id message I was seeing was just a warning.

[bdougie]

I figured it out. When looking at the data in this example, I saw I needed to provide an array or lines.

74f6c95

Sorry for the ping but thanks for reading @open-sauced/engineering

[nickytonline]

For the data && check, it needs to be in {}

const ChildWithSWR = (props: { owner: string; repo: string }) => {
  const { owner, repo } = props;
  const { data, error, mutate } = useSWR<PaginatedDataResponse, Error>(`prs/search?repo=${owner}%2F${repo}`);

  if (!data) {
    return <>Loading...</>;
  }

  const chartData = prCounts(data);

  return (
    <>
-      data && <CIResponsiveLine data={chartData.prsPerDay} />
+      { data && <CIResponsiveLine data={chartData.prsPerDay} /> }
    </>
  );
};

That'll get rid of the data && text that is being rendered.

I know it's a WIP, but I adjusted the height for the responsive line to 400, and it looks less squished.

[nickytonline]

Also, to get rid of your TypeScript errors here in the responsive line. And you'll just need to ensure that the data matches the shape expected of Serie[].

From the Nivo types:

export interface Serie {
    id: string | number
    data: Datum[]
    [key: string]: any
}

+ import { ResponsiveLine, Serie } from "@nivo/line";

interface CIResponsiveLineProps {
-  data?: CIResponsiveLinePropseDatum[];
+  data: Serie[];
}

const CIResponsiveLine = ({ data }: CIResponsiveLineProps) => {
  return (
    <>
      <div style={{ height: 200 }}>
        <ResponsiveLine
          data={data}
          margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
          xScale={{ type: "point" }}
          yScale={{
            type: "linear",
            min: "auto",
            max: "auto",
            stacked: true,
            reverse: false,
          }}
          yFormat=" >-.2f"
          axisTop={null}
          axisRight={null}
          axisBottom={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: "transportation",
            legendOffset: 36,
            legendPosition: "middle",
          }}
          axisLeft={{
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
            legend: "count",
            legendOffset: -40,
            legendPosition: "middle",
          }}
          pointSize={10}
          pointColor={{ theme: "background" }}
          pointBorderWidth={2}
          pointBorderColor={{ from: "serieColor" }}
          pointLabelYOffset={-12}
          useMesh={true}
          legends={[
            {
              anchor: "bottom-right",
              direction: "column",
              justify: false,
              translateX: 100,
              translateY: 0,
              itemsSpacing: 0,
              itemDirection: "left-to-right",
              itemWidth: 80,
              itemHeight: 20,
              itemOpacity: 0.75,
              symbolSize: 12,
              symbolShape: "circle",
              symbolBorderColor: "rgba(0, 0, 0, .5)",
              effects: [
                {
                  on: "hover",
                  style: {
                    itemBackground: "rgba(0, 0, 0, .03)",
                    itemOpacity: 1,
                  },
                },
              ],
            },
          ]}
        />
      </div>
    </>
  );
};

export default CIResponsiveLine;

[bdougie]

Moving this to ready for review while I fix the build errors. Going to do styling of the chart and other elements in a later PR.

[bdougie]

Merging in preparation for #20

This will break beta for a bit.