Skip to content

Commit

Permalink
fix errors from rendering with zero width
Browse files Browse the repository at this point in the history
  • Loading branch information
@macfarlandian
macfarlandian committed Jan 25, 2021
1 parent f17f2da commit 196b02c
Showing 1 changed file with 110 additions and 106 deletions.
216 changes: 110 additions & 106 deletions spotlight-client/src/charts/WindowedTimeSeries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,113 +112,117 @@ const WindowedTimeSeries: React.FC<{
{({ measureRef, width }) => {
return (
<Wrapper ref={measureRef}>
<ChartWrapper>
<XHoverController
lines={data}
margin={MARGIN}
otherChartProps={{
// @ts-expect-error Semiotic typedefs are wrong,
// we can use dates as long as the scale accepts them
xExtent: [dateRangeStart, dateRangeEnd],
// @ts-expect-error Semiotic typedefs are wrong, we can
// use a time scale here, not just a numeric one.
// xExtent depends on this
xScaleType: scaleTime(),
yExtent: [0],
}}
size={[width, CHART_HEIGHT]}
tooltipControllerProps={{
/**
* This function collects a "vertical slice" of all the areas
* to display all values matching the targeted date
*/
getTooltipProps: (d) => {
// d.date is present because it's in our record format
const dateHovered = d.date as Date;
return {
title: getDateLabel(dateHovered),
records: getDataWithPct(
// d.points comes from Semiotic but it's not in their type defs
(d.points as {
// these values, again, come from our record format
data: { date: Date; count: number };
// parentLine is a Semiotic thing, label comes from our record format
parentLine: { label: string };
}[])
.filter((p) => isEqual(p.data.date, dateHovered))
.map((p) => ({
label: p.parentLine.label,
value: p.data.count,
}))
),
};
},
}}
xAccessor="date"
>
<MinimapXYFrame
axes={[
{
orient: "left",
tickFormat: formatAsNumber,
tickSize: 0,
},
{
orient: "bottom",
tickFormat: (time: Date) =>
time.getDate() === 1 ? format(time, "MMM y") : null,
ticks: isMobile ? 5 : 10,
tickSize: 0,
},
]}
baseMarkProps={BASE_MARK_PROPS}
lines={data}
lineStyle={(d: DataSeries) => ({
fill:
highlighted && highlighted.label !== d.label
? highlightFade(d.color)
: d.color,
stroke: colors.background,
strokeWidth: 1,
})}
// @ts-expect-error Semiotic typedefs are incomplete, this works
lineType={{ type: "stackedarea", sort: null }}
// @ts-expect-error Semiotic typedefs are wrong, can be true for default matte
matte
minimap={{
// @ts-expect-error Semiotic typedefs are incomplete
axes: [],
baseMarkProps: BASE_MARK_PROPS,
brushEnd: (brushExtent: Date[]) => {
const [start, end] = brushExtent || [];
if (start && end) {
if (isNewRange({ start, end })) {
setTimeRangeId("custom");
}
{width > 0 && (
<>
<ChartWrapper>
<XHoverController
lines={data}
margin={MARGIN}
otherChartProps={{
// @ts-expect-error Semiotic typedefs are wrong,
// we can use dates as long as the scale accepts them
xExtent: [dateRangeStart, dateRangeEnd],
// @ts-expect-error Semiotic typedefs are wrong, we can
// use a time scale here, not just a numeric one.
// xExtent depends on this
xScaleType: scaleTime(),
yExtent: [0],
}}
size={[width, CHART_HEIGHT]}
tooltipControllerProps={{
/**
* This function collects a "vertical slice" of all the areas
* to display all values matching the targeted date
*/
getTooltipProps: (d) => {
// d.date is present because it's in our record format
const dateHovered = d.date as Date;
return {
title: getDateLabel(dateHovered),
records: getDataWithPct(
// d.points comes from Semiotic but it's not in their type defs
(d.points as {
// these values, again, come from our record format
data: { date: Date; count: number };
// parentLine is a Semiotic thing, label comes from our record format
parentLine: { label: string };
}[])
.filter((p) => isEqual(p.data.date, dateHovered))
.map((p) => ({
label: p.parentLine.label,
value: p.data.count,
}))
),
};
},
}}
xAccessor="date"
>
<MinimapXYFrame
axes={[
{
orient: "left",
tickFormat: formatAsNumber,
tickSize: 0,
},
{
orient: "bottom",
tickFormat: (time: Date) =>
time.getDate() === 1 ? format(time, "MMM y") : null,
ticks: isMobile ? 5 : 10,
tickSize: 0,
},
]}
baseMarkProps={BASE_MARK_PROPS}
lines={data}
lineStyle={(d: DataSeries) => ({
fill:
highlighted && highlighted.label !== d.label
? highlightFade(d.color)
: d.color,
stroke: colors.background,
strokeWidth: 1,
})}
// @ts-expect-error Semiotic typedefs are incomplete, this works
lineType={{ type: "stackedarea", sort: null }}
// @ts-expect-error Semiotic typedefs are wrong, can be true for default matte
matte
minimap={{
// @ts-expect-error Semiotic typedefs are incomplete
axes: [],
baseMarkProps: BASE_MARK_PROPS,
brushEnd: (brushExtent: Date[]) => {
const [start, end] = brushExtent || [];
if (start && end) {
if (isNewRange({ start, end })) {
setTimeRangeId("custom");
}

setDateRangeStart(new Date(start));
setDateRangeEnd(new Date(end));
}
},
margin: { ...MARGIN, bottom: 0 },
size: [width, MINIMAP_HEIGHT],
xBrushable: true,
xBrushExtent: [dateRangeStart, dateRangeEnd],
yBrushable: false,
}}
pointStyle={{ display: "none" }}
xAccessor="date"
yAccessor="count"
/>
</XHoverController>
</ChartWrapper>
<LegendWrapper>
<ColorLegend
highlighted={highlighted}
items={data}
setHighlighted={setHighlighted}
/>
</LegendWrapper>
setDateRangeStart(new Date(start));
setDateRangeEnd(new Date(end));
}
},
margin: { ...MARGIN, bottom: 0 },
size: [width, MINIMAP_HEIGHT],
xBrushable: true,
xBrushExtent: [dateRangeStart, dateRangeEnd],
yBrushable: false,
}}
pointStyle={{ display: "none" }}
xAccessor="date"
yAccessor="count"
/>
</XHoverController>
</ChartWrapper>
<LegendWrapper>
<ColorLegend
highlighted={highlighted}
items={data}
setHighlighted={setHighlighted}
/>
</LegendWrapper>
</>
)}
</Wrapper>
);
}}
Expand Down

0 comments on commit 196b02c

Please sign in to comment.