Skip to content

Commit

Permalink
Fix experiment graph date format (growthbook#968)
Browse files Browse the repository at this point in the history 
* fix date format and layout issues for ExperimentGraph

* fix unrelated css warnings

* cleanup

* change date string to be more standard

* use ISO
  • Loading branch information
@bryce-fitzsimons
bryce-fitzsimons authored Feb 1, 2023
1 parent 574ca26 commit 835fab8
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 17 deletions.
8 changes: 5 additions & 3 deletions packages/back-end/src/controllers/experiments.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,14 +96,15 @@ export async function getExperimentsFrequencyMonth(
const { num } = req.params;
const experiments = await getExperimentsByOrganization(org.id, project);

const allData: { name: string; numExp: number }[] = [];
const allData: { date: string; numExp: number }[] = [];

// make the data array with all the months needed and 0 experiments.
for (let i = parseInt(num) - 1; i >= 0; i--) {
const d = new Date();
d.setDate(1); // necessary because altering the month may result in an invalid date (ex: Feb 31)
d.setMonth(d.getMonth() - i);
const ob = {
name: format(d, "MMM yyy"),
date: d.toISOString(),
numExp: 0,
};
allData.push(ob);
Expand Down Expand Up @@ -133,7 +134,8 @@ export async function getExperimentsFrequencyMonth(
const monthYear = format(getValidDate(dateStarted), "MMM yyy");

allData.forEach((md, i) => {
if (md.name === monthYear) {
const name = format(getValidDate(md.date), "MMM yyy");
if (name === monthYear) {
md.numExp++;
// I can do this because the indexes will represent the same month
dataByStatus[e.status][i].numExp++;
Expand Down
39 changes: 27 additions & 12 deletions packages/front-end/components/Experiment/ExperimentGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ export default function ExperimentGraph({

const { data, error } = useApi<{
data: {
all: { name: string; numExp: number }[];
draft: { name: string; numExp: number }[];
running: { name: string; numExp: number }[];
stopped: { name: string; numExp: number }[];
all: { date: string; numExp: number }[];
draft: { date: string; numExp: number }[];
running: { date: string; numExp: number }[];
stopped: { date: string; numExp: number }[];
};
}>(`/experiments/frequency/${resolution}/${num}?project=${project}`);

Expand All @@ -63,8 +63,8 @@ export default function ExperimentGraph({
return <div>no data to show</div>;
}

const firstMonth = getValidDate(graphData[0].name);
const lastMonth = getValidDate(graphData[graphData.length - 1].name);
const firstMonth = getValidDate(graphData[0].date);
const lastMonth = getValidDate(graphData[graphData.length - 1].date);

return (
<ParentSizeModern>
Expand Down Expand Up @@ -95,7 +95,7 @@ export default function ExperimentGraph({
const xCoord = coords.x - barWidth;

const barData = graphData.map((d) => {
return { xcord: xScale(getValidDate(d.name)), numExp: d.numExp };
return { xcord: xScale(getValidDate(d.date)), numExp: d.numExp };
});

const closestBar = barData.reduce((prev, curr) =>
Expand Down Expand Up @@ -140,16 +140,18 @@ export default function ExperimentGraph({
scale={yScale}
numTicks={Math.min(maxYValue, 5)}
width={xMax + barWidth / 2}
stroke="var(--border-color-200)"
/>
{graphData.map((d, i) => {
const barX = xScale(getValidDate(d.name)) - barWidth / 2;
const barX = xScale(getValidDate(d.date)) - barWidth / 2;
let barHeight = yMax - (yScale(d.numExp) ?? 0);
// if there are no experiments this month, show a little nub for design reasons.
if (barHeight === 0) barHeight = 6;
const barY = yMax - barHeight;
const name = format(getValidDate(d.date), "MMM yyy");
return (
<BarRounded
key={d.name + i}
key={name + i}
x={barX + 5}
y={barY}
width={Math.max(10, barWidth - 10)}
Expand All @@ -166,12 +168,18 @@ export default function ExperimentGraph({
top={yMax}
scale={xScale}
numTicks={
width > 567
width > 670
? graphData.length
: Math.ceil(graphData.length / 2)
}
tickLabelProps={() => ({
fill: "var(--text-color-table)",
fontSize: 11,
textAnchor: "start",
dx: -25,
})}
hideAxisLine={false}
stroke={"#C2C5D6"}
stroke={"var(--text-color-table)"}
hideTicks={true}
rangePadding={barWidth / 2}
tickFormat={(v) => {
Expand All @@ -181,7 +189,14 @@ export default function ExperimentGraph({
<AxisLeft
scale={yScale}
numTicks={Math.min(maxYValue, 5)}
stroke={"#C2C5D6"}
tickLabelProps={() => ({
fill: "var(--text-color-table)",
fontSize: 11,
textAnchor: "end",
dx: -2,
dy: 2,
})}
stroke={"var(--text-color-table)"}
hideTicks={true}
tickFormat={(v) => {
return Math.round(v as number) + "";
Expand Down
4 changes: 2 additions & 2 deletions packages/front-end/components/Layout/TopNav.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,13 @@ $sidebarwidth: 240px;
}
.leftSection {
display: flex;
justify-content: start;
justify-content: flex-start;
align-items: center;
max-width: 30%;
}
.rightSection {
display: flex;
justify-content: end;
justify-content: flex-end;
align-items: center;
}
@media (max-width: 1180px) {
Expand Down
2 changes: 2 additions & 0 deletions packages/front-end/components/Metrics/DateGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,7 @@ const DateGraph: FC<{
<AxisBottom
top={graphHeight}
scale={xScale}
stroke={"var(--text-color-table)"}
numTicks={numXTicks}
tickLabelProps={() => ({
fill: "var(--text-color-table)",
Expand All @@ -496,6 +497,7 @@ const DateGraph: FC<{
/>
<AxisLeft
scale={yScale}
stroke={"var(--text-color-table)"}
numTicks={numYTicks}
tickLabelProps={() => ({
fill: "var(--text-color-table)",
Expand Down

0 comments on commit 835fab8

Please sign in to comment.