8653736940

Committed 11 Apr 2024 09:53PM UTC coverage: 31.935% (-0.03%) from 31.962%

Build # 8653736940

Build Type

Pull #8743

github

Committed by

jimrandomh

Commit Message

Split components appear in SSRs

Pull Request Pull Request #8743: Bundle-split react map gl

Run Details

4627 of 37830 branches covered (12.23%)

Branch coverage included in aggregate %.

29 of 165 new or added lines in 20 files covered. (17.58%)

11 existing lines in 7 files now uncovered.

27026 of 61286 relevant lines covered (44.1%)

182.67 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

16.82

/packages/lesswrong/components/analytics/AnalyticsGraph.tsx

import React, { useCallback, useState } from "react";
import { Components, registerComponent } from "../../lib/vulcan-lib";
import type { TooltipProps } from "recharts";
import { requireCssVar } from "../../themes/cssVars";
import moment from "moment";
import { AnalyticsField, analyticsFieldsList, useAnalyticsSeries } from "../hooks/useAnalytics";
import startCase from "lodash/startCase";
import Checkbox, { CheckboxProps } from "@material-ui/core/Checkbox";
import { useDialog } from "../common/withDialog";
import classNames from "classnames";
import { useReCharts } from "../../splits/useRecharts";

const GRAPH_HEIGHT = 300;

const styles = (theme: ThemeType): JssStyles => ({
  root: {
    fontFamily: theme.palette.fonts.sansSerifStack,
  },
  graphContainer: {
    marginTop: 12,
    "& .recharts-cartesian-axis-tick-value": {
      fontWeight: 500,
    },
  },
  graphHeader: {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
    marginBottom: 12,
    [theme.breakpoints.down('xs')]: {
      flexDirection: "column",
      minHeight: 56,
      marginBottom: 0,
    }
  },
  graphHeaderSmallerTitle: {
    [theme.breakpoints.down('xs')]: {
      minHeight: 42,
    }
  },
  graphHeaderNoTitle: {
    [theme.breakpoints.down('xs')]: {
      minHeight: 0,
    }
  },
  graphHeading: {
    fontSize: 32,
    fontWeight: "600",
    color: theme.palette.grey[1000],
    fontFamily: theme.palette.fonts.sansSerifStack,
    [theme.breakpoints.down('xs')]: {
      lineHeight: '1.2em',
    }
  },
  smallerTitle: {
    fontSize: 20,
  },
  fetchingLatest: {
    fontSize: 14,
    color: theme.palette.grey[600],
    fontWeight: 500,
    // stick to bottom
    alignSelf: "flex-end",
    [theme.breakpoints.down('xs')]: {
      alignSelf: "flex-start",
      marginBottom: 'auto',
    }
  },
  tooltip: {
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.palette.boxShadow.graphTooltip,
    padding: 10,
    borderRadius: theme.borderRadius.small,
  },
  date: {
    fontStyle: theme.palette.fonts.sansSerifStack,
    fontSize: 12,
    fontWeight: 600,
  },
  tooltipLabel: {
    fontStyle: theme.palette.fonts.sansSerifStack,
    fontSize: 12,
    fontWeight: 500,
  },
  notEnoughDataMessage: {
    color: theme.palette.grey[500],
  },
  controls: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    flexDirection: "row",
    [theme.breakpoints.down('xs')]: {
      flexDirection: "column",
    }
  },
  controlFields: {
    display: "flex",
    flexDirection: "row",
    color: theme.palette.grey[900],
    fontSize: 14,
    fontWeight: 500,
    [theme.breakpoints.down('xs')]: {
      width: '100%',
      display: "grid",
      // Flow into grid with 2 per row on large screens, 1 per row on small screens. Ideally never 3 per row.
      gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
    },
  },
  fieldLabel: {
    display: "flex",
    alignItems: "center",
  },
  checkbox: {
    padding: '8px 6px 8px 16px',
  },
  checkboxIcon: {
    width: 17,
    height: 17,
    border: `1px solid ${theme.palette.grey[900]}`,
    borderRadius: 3,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  checkedInnerIcon: {
    width: 11,
    height: 11,
    borderRadius: 2,
    display: "inline-block",
    opacity: 0.8,
  },
  dateDropdown: {
    alignSelf: "flex-start",
    margin: '4px 20px 0 0',
  }
});

const LINE_COLORS: Record<AnalyticsField, string> = {
  reads: requireCssVar("palette", "graph", "analyticsReads"),
  views: requireCssVar("palette", "primary", "main"),
  karma: requireCssVar("palette", "primary", "light"),
  comments: requireCssVar("palette", "grey", 800),
};

const dateOptions = {
  last7Days: {
    label: "Last 7 days",
    value: "last7Days",
  },
  last30Days: {
    label: "Last 30 days",
    value: "last30Days",
  },
  last90Days: {
    label: "Last 90 days",
    value: "last90Days",
  },
  allTime: {
    label: "All time",
    value: "allTime",
  },
  custom: {
    label: "Custom",
    value: "custom",
  }
} as const;

const startEndDateFromOption = (option: string) => {
  const now = new Date();
  switch (option) {
    case dateOptions.last7Days.value:
      return {
        startDate: moment(now).utc().subtract(7, "days").startOf("day").toDate(),
        endDate: moment(now).utc().endOf("day").toDate(),
      };
    case dateOptions.last30Days.value:
      return {
        startDate: moment(now).utc().subtract(30, "days").startOf("day").toDate(),
        endDate: moment(now).utc().endOf("day").toDate(),
      };
    case dateOptions.last90Days.value:
      return {
        startDate: moment(now).utc().subtract(90, "days").startOf("day").toDate(),
        endDate: moment(now).utc().endOf("day").toDate(),
      };
    case dateOptions.allTime.value:
      return {
        startDate: null,
        endDate: moment(now).utc().endOf("day").toDate(),
      };
    default:
      return {
        startDate: moment(now).utc().subtract(90, "days").startOf("day").toDate(),
        endDate: moment(now).utc().endOf("day").toDate(),
      };
  }
}

interface ColoredCheckboxProps extends CheckboxProps {
  fillColor: string;
  classes: ClassesType;
}

const ColoredCheckbox: React.FC<ColoredCheckboxProps> = ({ fillColor, classes, ...props }: ColoredCheckboxProps) => {
  return (
    <Checkbox
      className={classes.checkbox}
      icon={<span className={classes.checkboxIcon}></span>}
      checkedIcon={
        <span className={classes.checkboxIcon}>
          <span className={classes.checkedInnerIcon} style={{ backgroundColor: fillColor }}></span>
        </span>
      }
      {...props}
    />
  );
};

export const AnalyticsGraph = ({
  userId,
  postIds,
  initialDisplayFields = ["views", "reads"],
  title,
  smallerTitle = false,
  classes,
}: {
  initialDisplayFields?: AnalyticsField[];
  userId?: string;
  postIds?: string[];
  title?: string;
  smallerTitle?: boolean;
  classes: ClassesType;
}) => {
  const { ready: rechartsReady, recharts } = useReCharts();
  const { Typography, ForumDropdown, Loading } = Components;

  const [displayFields, setDisplayFields] = useState<AnalyticsField[]>(initialDisplayFields);
  const [dateOption, setDateOption] = useState<string>(dateOptions.last30Days.value);

  const {startDate: fallbackStartDate, endDate: fallbackEndDate} = startEndDateFromOption(dateOption);
  const [displayStartDate, setDisplayStartDate] = useState<Date | null>(fallbackStartDate);
  const [displayEndDate, setDisplayEndDate] = useState<Date>(fallbackEndDate);

  const { openDialog } = useDialog();

  const { analyticsSeries: dataSeries } = useAnalyticsSeries({
    userId,
    postIds,
    startDate: displayStartDate,
    endDate: displayEndDate,
  });

  const toggleField = (field: AnalyticsField) => {
    if (displayFields.includes(field) && displayFields.length > 1) {
      setDisplayFields((prev) => prev.filter((f) => f !== field));
    } else {
      setDisplayFields((prev) => [...prev, field]);
    }
  };

  const updateDisplayDates = useCallback((startDate: Date | null, endDate: Date) => {
    setDisplayStartDate(startDate);
    setDisplayEndDate(endDate);
  }, []);

  const handleDateOptionChange = useCallback((option: string) => {
    setDateOption(option);

    if (option !== dateOptions.custom.value) {
      const {startDate, endDate} = startEndDateFromOption(option);
      updateDisplayDates(startDate, endDate);
    } else {
      openDialog({
        componentName: 'DateRangeModal',
        componentProps: {
          startDate: displayStartDate,
          endDate: displayEndDate,
          updateDisplayDates
        },
      });
    }
  }, [displayEndDate, displayStartDate, openDialog, updateDisplayDates]);

  const dataSeriesToDisplay = dataSeries?.map((dataPoint) => {
    // only select the fields we want to display
    return {
      date: dataPoint.date,
      ...displayFields.reduce<Partial<Record<AnalyticsField, number>>>((acc, field) => {
        acc[field] = dataPoint[field] ?? 0;
        return acc;
      }, {}),
    };
  });

  const getTooltipContent = useCallback(({ active, payload, label }: TooltipProps<string, string>) => {
    if (!(active && payload && payload.length)) return null;

    const date = new Date(payload[0].payload["date"]);

    return (
      <div className={classes.tooltip}>
        <p className={classes.date}>{moment(date).format("MMM DD YYYY")}</p>
        {displayFields.map((field) => (
          <p key={field} className={classes.tooltipLabel}>
            {`${startCase(field)}: ${payload[0].payload[field].toLocaleString()}`}
          </p>
        ))}
      </div>
    );
  }, [classes.date, classes.tooltip, classes.tooltipLabel, displayFields]);

  if (!dataSeriesToDisplay?.length || dataSeriesToDisplay.length === 1) {
    return (
      <Typography variant="body1" className={classes.notEnoughDataMessage}>
        <em>Not enough data for a graph</em>
      </Typography>
    );
  }

  const maxValue = dataSeriesToDisplay.reduce((maxVal, dataPoint) => {
    const currentMaxValue = Math.max(...displayFields.map(field => dataPoint[field as AnalyticsField] ?? 0));
    return Math.max(maxVal, currentMaxValue);
  }, 0);
  
  // Unfortunately this is the best workaround, see here: https://github.com/recharts/recharts/issues/2027
  const yAxisWidth = 26 + Math.ceil(maxValue.toLocaleString().length * 6);
  const strokeWidth = dataSeriesToDisplay.length > 180 ? 2 : 2;

  if (!rechartsReady) {
    return <Loading/>
  }
  const { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } = recharts;
  
  return (
    <div className={classes.root}>
      <div className={classNames(classes.graphHeader, {[classes.graphHeaderSmallerTitle]: smallerTitle, [classes.graphHeaderNoTitle]: !title})}>
        <Typography variant="headline" className={classNames(classes.graphHeading, {[classes.smallerTitle]: smallerTitle})}>
          {title}
        </Typography>
      </div>
      <div className={classes.controls}>
        <div className={classes.controlFields}>
          {analyticsFieldsList.map((field) => (
            <label key={field} className={classes.fieldLabel}>
              <ColoredCheckbox
                checked={displayFields.includes(field)}
                onChange={() => toggleField(field as AnalyticsField)}
                classes={classes}
                fillColor={LINE_COLORS[field]}
              />
              {startCase(field)}
            </label>
          ))}
        </div>
        <ForumDropdown value={dateOption} options={dateOptions} className={classes.dateDropdown} onSelect={handleDateOptionChange} />
      </div>
      <ResponsiveContainer width="100%" height={GRAPH_HEIGHT} className={classes.graphContainer}>
        <LineChart data={dataSeriesToDisplay} height={300} margin={{ right: 30 }}>
          <XAxis
            dataKey="date"
            interval={Math.floor(dataSeriesToDisplay.length / 5)}
            tickFormatter={(v: Date) => moment(v).format("MMM DD")}
          />
          <YAxis width={yAxisWidth} tickFormatter={(v: number) => v.toLocaleString()} />
          <CartesianGrid strokeDasharray="3 3" />
          <Tooltip content={getTooltipContent} />
          {displayFields.map((field) => (
            <Line key={field} dataKey={field} stroke={LINE_COLORS[field]} strokeWidth={strokeWidth} dot={false} animationDuration={300} />
          ))}
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
};

const AnalyticsGraphComponent = registerComponent("AnalyticsGraph", AnalyticsGraph, { styles });

declare global {
  interface ComponentTypes {
    AnalyticsGraph: typeof AnalyticsGraphComponent;
  }
}

1	import React, { useCallback, useState } from "react";	3✔
2	import { Components, registerComponent } from "../../lib/vulcan-lib";	1✔
3	import type { TooltipProps } from "recharts";
4	import { requireCssVar } from "../../themes/cssVars";	1✔
5	import moment from "moment";	1✔
6	import { AnalyticsField, analyticsFieldsList, useAnalyticsSeries } from "../hooks/useAnalytics";	1✔
7	import startCase from "lodash/startCase";	1✔
8	import Checkbox, { CheckboxProps } from "@material-ui/core/Checkbox";	1✔
9	import { useDialog } from "../common/withDialog";	1✔
10	import classNames from "classnames";	1✔
11	import { useReCharts } from "../../splits/useRecharts";	1✔
12
13	const GRAPH_HEIGHT = 300;	1✔
14
15	const styles = (theme: ThemeType): JssStyles => ({	1✔
16	root: {
17	fontFamily: theme.palette.fonts.sansSerifStack,
18	},
19	graphContainer: {
20	marginTop: 12,
21	"& .recharts-cartesian-axis-tick-value": {
22	fontWeight: 500,
23	},
24	},
25	graphHeader: {
26	display: "flex",
27	justifyContent: "space-between",
28	flexDirection: "row",
29	marginBottom: 12,
30	[theme.breakpoints.down('xs')]: {
31	flexDirection: "column",
32	minHeight: 56,
33	marginBottom: 0,
34	}
35	},
36	graphHeaderSmallerTitle: {
37	[theme.breakpoints.down('xs')]: {
38	minHeight: 42,
39	}
40	},
41	graphHeaderNoTitle: {
42	[theme.breakpoints.down('xs')]: {
43	minHeight: 0,
44	}
45	},
46	graphHeading: {
47	fontSize: 32,
48	fontWeight: "600",
49	color: theme.palette.grey[1000],
50	fontFamily: theme.palette.fonts.sansSerifStack,
51	[theme.breakpoints.down('xs')]: {
52	lineHeight: '1.2em',
53	}
54	},
55	smallerTitle: {
56	fontSize: 20,
57	},
58	fetchingLatest: {
59	fontSize: 14,
60	color: theme.palette.grey[600],
61	fontWeight: 500,
62	// stick to bottom
63	alignSelf: "flex-end",
64	[theme.breakpoints.down('xs')]: {
65	alignSelf: "flex-start",
66	marginBottom: 'auto',
67	}
68	},
69	tooltip: {
70	backgroundColor: theme.palette.background.paper,
71	boxShadow: theme.palette.boxShadow.graphTooltip,
72	padding: 10,
73	borderRadius: theme.borderRadius.small,
74	},
75	date: {
76	fontStyle: theme.palette.fonts.sansSerifStack,
77	fontSize: 12,
78	fontWeight: 600,
79	},
80	tooltipLabel: {
81	fontStyle: theme.palette.fonts.sansSerifStack,
82	fontSize: 12,
83	fontWeight: 500,
84	},
85	notEnoughDataMessage: {
86	color: theme.palette.grey[500],
87	},
88	controls: {
89	display: "flex",
90	justifyContent: "space-between",
91	alignItems: "center",
92	flexDirection: "row",
93	[theme.breakpoints.down('xs')]: {
94	flexDirection: "column",
95	}
96	},
97	controlFields: {
98	display: "flex",
99	flexDirection: "row",
100	color: theme.palette.grey[900],
101	fontSize: 14,
102	fontWeight: 500,
103	[theme.breakpoints.down('xs')]: {
104	width: '100%',
105	display: "grid",
106	// Flow into grid with 2 per row on large screens, 1 per row on small screens. Ideally never 3 per row.
107	gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
108	},
109	},
110	fieldLabel: {
111	display: "flex",
112	alignItems: "center",
113	},
114	checkbox: {
115	padding: '8px 6px 8px 16px',
116	},
117	checkboxIcon: {
118	width: 17,
119	height: 17,
120	border: `1px solid ${theme.palette.grey[900]}`,
121	borderRadius: 3,
122	display: "flex",
123	alignItems: "center",
124	justifyContent: "center",
125	},
126	checkedInnerIcon: {
127	width: 11,
128	height: 11,
129	borderRadius: 2,
130	display: "inline-block",
131	opacity: 0.8,
132	},
133	dateDropdown: {
134	alignSelf: "flex-start",
135	margin: '4px 20px 0 0',
136	}
137	});
138
139	const LINE_COLORS: Record<AnalyticsField, string> = {	1✔
140	reads: requireCssVar("palette", "graph", "analyticsReads"),
141	views: requireCssVar("palette", "primary", "main"),
142	karma: requireCssVar("palette", "primary", "light"),
143	comments: requireCssVar("palette", "grey", 800),
144	};
145
146	const dateOptions = {	1✔
147	last7Days: {
148	label: "Last 7 days",
149	value: "last7Days",
150	},
151	last30Days: {
152	label: "Last 30 days",
153	value: "last30Days",
154	},
155	last90Days: {
156	label: "Last 90 days",
157	value: "last90Days",
158	},
159	allTime: {
160	label: "All time",
161	value: "allTime",
162	},
163	custom: {
164	label: "Custom",
165	value: "custom",
166	}
167	} as const;
168
169	const startEndDateFromOption = (option: string) => {	1✔
170	const now = new Date();	×
171	switch (option) {	×
172	case dateOptions.last7Days.value:
173	return {	×
174	startDate: moment(now).utc().subtract(7, "days").startOf("day").toDate(),
175	endDate: moment(now).utc().endOf("day").toDate(),
176	};
177	case dateOptions.last30Days.value:
178	return {	×
179	startDate: moment(now).utc().subtract(30, "days").startOf("day").toDate(),
180	endDate: moment(now).utc().endOf("day").toDate(),
181	};
182	case dateOptions.last90Days.value:
183	return {	×
184	startDate: moment(now).utc().subtract(90, "days").startOf("day").toDate(),
185	endDate: moment(now).utc().endOf("day").toDate(),
186	};
187	case dateOptions.allTime.value:
188	return {	×
189	startDate: null,
190	endDate: moment(now).utc().endOf("day").toDate(),
191	};
192	default:
193	return {	×
194	startDate: moment(now).utc().subtract(90, "days").startOf("day").toDate(),
195	endDate: moment(now).utc().endOf("day").toDate(),
196	};
197	}
198	}
199
200	interface ColoredCheckboxProps extends CheckboxProps {
201	fillColor: string;
202	classes: ClassesType;
203	}
204
205	const ColoredCheckbox: React.FC<ColoredCheckboxProps> = ({ fillColor, classes, ...props }: ColoredCheckboxProps) => {	1✔
206	return (	×
207	<Checkbox
208	className={classes.checkbox}
209	icon={<span className={classes.checkboxIcon}></span>}
210	checkedIcon={
211	<span className={classes.checkboxIcon}>
212	<span className={classes.checkedInnerIcon} style={{ backgroundColor: fillColor }}></span>
213	</span>
214	}
215	{...props}
216	/>
217	);
218	};
219
220	export const AnalyticsGraph = ({	1✔
221	userId,
222	postIds,
223	initialDisplayFields = ["views", "reads"],	×
224	title,
225	smallerTitle = false,	×
226	classes,
227	}: {
228	initialDisplayFields?: AnalyticsField[];
229	userId?: string;
230	postIds?: string[];
231	title?: string;
232	smallerTitle?: boolean;
233	classes: ClassesType;
234	}) => {
NEW 235	const { ready: rechartsReady, recharts } = useReCharts();	×
NEW 236	const { Typography, ForumDropdown, Loading } = Components;	×
237
238	const [displayFields, setDisplayFields] = useState<AnalyticsField[]>(initialDisplayFields);	×
239	const [dateOption, setDateOption] = useState<string>(dateOptions.last30Days.value);	×
240
241	const {startDate: fallbackStartDate, endDate: fallbackEndDate} = startEndDateFromOption(dateOption);	×
242	const [displayStartDate, setDisplayStartDate] = useState<Date \| null>(fallbackStartDate);	×
243	const [displayEndDate, setDisplayEndDate] = useState<Date>(fallbackEndDate);	×
244
245	const { openDialog } = useDialog();	×
246
247	const { analyticsSeries: dataSeries } = useAnalyticsSeries({	×
248	userId,
249	postIds,
250	startDate: displayStartDate,
251	endDate: displayEndDate,
252	});
253
254	const toggleField = (field: AnalyticsField) => {	×
255	if (displayFields.includes(field) && displayFields.length > 1) {	×
256	setDisplayFields((prev) => prev.filter((f) => f !== field));	×
257	} else {
258	setDisplayFields((prev) => [...prev, field]);	×
259	}
260	};
261
262	const updateDisplayDates = useCallback((startDate: Date \| null, endDate: Date) => {	×
263	setDisplayStartDate(startDate);	×
264	setDisplayEndDate(endDate);	×
265	}, []);
266
267	const handleDateOptionChange = useCallback((option: string) => {	×
268	setDateOption(option);	×
269
270	if (option !== dateOptions.custom.value) {	×
271	const {startDate, endDate} = startEndDateFromOption(option);	×
272	updateDisplayDates(startDate, endDate);	×
273	} else {
274	openDialog({	×
275	componentName: 'DateRangeModal',
276	componentProps: {
277	startDate: displayStartDate,
278	endDate: displayEndDate,
279	updateDisplayDates
280	},
281	});
282	}
283	}, [displayEndDate, displayStartDate, openDialog, updateDisplayDates]);
284
285	const dataSeriesToDisplay = dataSeries?.map((dataPoint) => {	×
286	// only select the fields we want to display
287	return {	×
288	date: dataPoint.date,
289	...displayFields.reduce<Partial<Record<AnalyticsField, number>>>((acc, field) => {
290	acc[field] = dataPoint[field] ?? 0;	×
291	return acc;	×
292	}, {}),
293	};
294	});
295
296	const getTooltipContent = useCallback(({ active, payload, label }: TooltipProps<string, string>) => {	×
297	if (!(active && payload && payload.length)) return null;	×
298
299	const date = new Date(payload[0].payload["date"]);	×
300
301	return (	×
302	<div className={classes.tooltip}>
303	<p className={classes.date}>{moment(date).format("MMM DD YYYY")}</p>
304	{displayFields.map((field) => (
305	<p key={field} className={classes.tooltipLabel}>	×
306	{`${startCase(field)}: ${payload[0].payload[field].toLocaleString()}`}
307	</p>
308	))}
309	</div>
310	);
311	}, [classes.date, classes.tooltip, classes.tooltipLabel, displayFields]);
312
313	if (!dataSeriesToDisplay?.length \|\| dataSeriesToDisplay.length === 1) {	×
314	return (	×
315	<Typography variant="body1" className={classes.notEnoughDataMessage}>
316	<em>Not enough data for a graph</em>
317	</Typography>
318	);
319	}
320
321	const maxValue = dataSeriesToDisplay.reduce((maxVal, dataPoint) => {	×
322	const currentMaxValue = Math.max(...displayFields.map(field => dataPoint[field as AnalyticsField] ?? 0));	×
323	return Math.max(maxVal, currentMaxValue);	×
324	}, 0);
325
326	// Unfortunately this is the best workaround, see here: https://github.com/recharts/recharts/issues/2027
327	const yAxisWidth = 26 + Math.ceil(maxValue.toLocaleString().length * 6);	×
328	const strokeWidth = dataSeriesToDisplay.length > 180 ? 2 : 2;	×
329
NEW 330	if (!rechartsReady) {	×
NEW 331	return <Loading/>	×
332	}
NEW 333	const { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } = recharts;	×
334
UNCOV 335	return (	×
336	<div className={classes.root}>
337	<div className={classNames(classes.graphHeader, {[classes.graphHeaderSmallerTitle]: smallerTitle, [classes.graphHeaderNoTitle]: !title})}>
338	<Typography variant="headline" className={classNames(classes.graphHeading, {[classes.smallerTitle]: smallerTitle})}>
339	{title}
340	</Typography>
341	</div>
342	<div className={classes.controls}>
343	<div className={classes.controlFields}>
344	{analyticsFieldsList.map((field) => (
345	<label key={field} className={classes.fieldLabel}>	×
346	<ColoredCheckbox
347	checked={displayFields.includes(field)}
348	onChange={() => toggleField(field as AnalyticsField)}	×
349	classes={classes}
350	fillColor={LINE_COLORS[field]}
351	/>
352	{startCase(field)}
353	</label>
354	))}
355	</div>
356	<ForumDropdown value={dateOption} options={dateOptions} className={classes.dateDropdown} onSelect={handleDateOptionChange} />
357	</div>
358	<ResponsiveContainer width="100%" height={GRAPH_HEIGHT} className={classes.graphContainer}>
359	<LineChart data={dataSeriesToDisplay} height={300} margin={{ right: 30 }}>
360	<XAxis
361	dataKey="date"
362	interval={Math.floor(dataSeriesToDisplay.length / 5)}
363	tickFormatter={(v: Date) => moment(v).format("MMM DD")}	×
364	/>
365	<YAxis width={yAxisWidth} tickFormatter={(v: number) => v.toLocaleString()} />	×
366	<CartesianGrid strokeDasharray="3 3" />
367	<Tooltip content={getTooltipContent} />
368	{displayFields.map((field) => (
369	<Line key={field} dataKey={field} stroke={LINE_COLORS[field]} strokeWidth={strokeWidth} dot={false} animationDuration={300} />	×
370	))}
371	</LineChart>
372	</ResponsiveContainer>
373	</div>
374	);
375	};
376
377	const AnalyticsGraphComponent = registerComponent("AnalyticsGraph", AnalyticsGraph, { styles });	1✔
378
379	declare global {
380	interface ComponentTypes {
381	AnalyticsGraph: typeof AnalyticsGraphComponent;
382	}
383	}

ForumMagnum / ForumMagnum / 8653736940

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous