Skip to content

Commit

Permalink
feat: Persist time chart style (#465)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ernestii
ernestii authored Jul 11, 2024
1 parent a379aaa commit 9a80955
Show file tree
Hide file tree
Showing 6 changed files with 85 additions and 13 deletions.
6 changes: 6 additions & 0 deletions packages/api/src/utils/zod.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,9 @@ export const timeChartSeriesSchema = z.object({
groupBy: z.array(z.string()).max(10),
numberFormat: numberFormatSchema.optional(),
metricDataType: z.optional(z.nativeEnum(MetricsDataType)),
displayType: z.optional(
z.union([z.literal('stacked_bar'), z.literal('line')]),
),
});

export const tableChartSeriesSchema = z.object({
Expand Down Expand Up @@ -143,6 +146,9 @@ export const chartSchema = z.object({
content: z.string().optional(),
numberFormat: numberFormatSchema.optional(),
metricDataType: z.optional(z.nativeEnum(MetricsDataType)),
displayType: z.optional(
z.union([z.literal('stacked_bar'), z.literal('line')]),
),
}),
),
seriesReturnType: z.enum(['ratio', 'column']).optional(),
Expand Down
33 changes: 32 additions & 1 deletion packages/app/src/DashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ const Tile = forwardRef(
onEditClick,
onAddAlertClick,
onDeleteClick,
onUpdateChart,
query,
queued,
onSettled,
Expand All @@ -161,6 +162,7 @@ const Tile = forwardRef(
onEditClick: () => void;
onAddAlertClick?: () => void;
onDeleteClick: () => void;
onUpdateChart?: (chart: Chart) => void;
query: string;
onSettled?: () => void;
queued?: boolean;
Expand Down Expand Up @@ -192,6 +194,7 @@ const Tile = forwardRef(
dateRange,
numberFormat: chart.series[0].numberFormat,
seriesReturnType: chart.seriesReturnType,
displayType: chart.series[0].displayType,
series: chart.series.map(s => ({
...s,
where: buildAndWhereClause(
Expand Down Expand Up @@ -381,7 +384,19 @@ const Tile = forwardRef(
}
>
{chart.series[0].type === 'time' && config.type === 'time' && (
<HDXMultiSeriesTimeChart config={config} />
<HDXMultiSeriesTimeChart
config={config}
setDisplayType={displayType =>
onUpdateChart?.(
produce(chart, draft => {
if (draft.series[0]?.type !== 'time') {
return chart;
}
draft.series[0].displayType = displayType;
}),
)
}
/>
)}
{chart.series[0].type === 'table' && config.type === 'table' && (
<HDXMultiSeriesTableChart config={config} />
Expand Down Expand Up @@ -827,6 +842,22 @@ export default function DashboardPage({
granularity={granularityQuery}
alert={dashboard?.alerts?.find(a => a.chartId === chart.id)}
isHighlighed={highlightedChartId === chart.id}
onUpdateChart={newChart => {
if (!dashboard) {
return;
}
setDashboard(
produce(dashboard, draft => {
const chartIndex = draft.charts.findIndex(
c => c.id === chart.id,
);
if (chartIndex === -1) {
return;
}
draft.charts[chartIndex] = newChart;
}),
);
}}
onDuplicateClick={async () => {
if (dashboard != null) {
if (!(await confirm(`Duplicate ${chart.name}?`, 'Duplicate'))) {
Expand Down
11 changes: 11 additions & 0 deletions packages/app/src/EditChartForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1262,6 +1262,7 @@ export const EditLineChartForm = ({
numberFormat: _editedChart.series[0].numberFormat,
series: _editedChart.series,
seriesReturnType: _editedChart.seriesReturnType,
displayType: _editedChart.series[0].displayType,
}
: null,
[_editedChart, alertEnabled, editedAlert?.interval, dateRange, granularity],
Expand Down Expand Up @@ -1415,6 +1416,16 @@ export const EditLineChartForm = ({
>
<HDXMultiSeriesTimeChart
config={previewConfig}
setDisplayType={displayType =>
_setEditedChart(
produce(_editedChart, draft => {
if (draft.series[0].type !== 'time') {
return draft;
}
draft.series[0].displayType = displayType;
}),
)
}
{...(alertEnabled && {
alertThreshold: editedAlert?.threshold,
alertThresholdType:
Expand Down
39 changes: 31 additions & 8 deletions packages/app/src/HDXMultiSeriesTimeChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
seriesColumns,
seriesToUrlSearchQueryParam,
} from './ChartUtils';
import type { Dashboard } from './types';
import type { ChartSeries, NumberFormat } from './types';
import { FormatTime, useFormatTime } from './useFormatTime';
import { formatNumber } from './utils';
Expand Down Expand Up @@ -438,25 +439,32 @@ const MemoChart = memo(function MemoChart({

const HDXMultiSeriesTimeChart = memo(
({
config: { series, granularity, dateRange, seriesReturnType = 'column' },
config: {
series,
granularity,
dateRange,
seriesReturnType = 'column',
displayType: displayTypeProp = 'line',
},
onSettled,
alertThreshold,
alertThresholdType,
showDisplaySwitcher = true,
defaultDisplayType = 'line',
setDisplayType,
logReferenceTimestamp,
}: {
config: {
series: ChartSeries[];
granularity: Granularity;
dateRange: [Date, Date] | Readonly<[Date, Date]>;
seriesReturnType: 'ratio' | 'column';
displayType?: 'stacked_bar' | 'line';
};
onSettled?: () => void;
alertThreshold?: number;
alertThresholdType?: 'above' | 'below';
showDisplaySwitcher?: boolean;
defaultDisplayType?: 'stacked_bar' | 'line';
setDisplayType?: (type: 'stacked_bar' | 'line') => void;
logReferenceTimestamp?: number;
}) => {
const { data, isError, isLoading } = api.useMultiSeriesChart(
Expand Down Expand Up @@ -590,9 +598,24 @@ const HDXMultiSeriesTimeChart = memo(
const numberFormat =
series[0].type === 'time' ? series[0]?.numberFormat : undefined;

const [displayType, setDisplayType] = useState<'stacked_bar' | 'line'>(
defaultDisplayType,
);
// To enable backward compatibility, allow non-controlled usage of displayType
const [displayTypeLocal, setDisplayTypeLocal] = useState(displayTypeProp);

const displayType = useMemo(() => {
if (setDisplayType) {
return displayTypeProp;
} else {
return displayTypeLocal;
}
}, [displayTypeLocal, displayTypeProp, setDisplayType]);

const handleSetDisplayType = (type: 'stacked_bar' | 'line') => {
if (setDisplayType) {
setDisplayType(type);
} else {
setDisplayTypeLocal(type);
}
};

return isLoading ? (
<div className="d-flex h-100 w-100 align-items-center justify-content-center text-muted">
Expand Down Expand Up @@ -687,7 +710,7 @@ const HDXMultiSeriesTimeChart = memo(
})}
role="button"
title="Display as line chart"
onClick={() => setDisplayType('line')}
onClick={() => handleSetDisplayType('line')}
>
<i className="bi bi-graph-up"></i>
</span>
Expand All @@ -698,7 +721,7 @@ const HDXMultiSeriesTimeChart = memo(
})}
role="button"
title="Display as bar chart"
onClick={() => setDisplayType('stacked_bar')}
onClick={() => handleSetDisplayType('stacked_bar')}
>
<i className="bi bi-bar-chart"></i>
</span>
Expand Down
8 changes: 4 additions & 4 deletions packages/app/src/ServiceDashboardPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -531,13 +531,13 @@ export default function ServiceDashboardPage() {
</Card.Section>
<Card.Section p="md" py="sm" h={CHART_HEIGHT}>
<HDXMultiSeriesTimeChart
defaultDisplayType="stacked_bar"
config={{
dateRange,
granularity: convertDateRangeToGranularityString(
dateRange,
60,
),
displayType: 'stacked_bar',
series: [
{
displayName: 'Total Query Time',
Expand All @@ -563,13 +563,13 @@ export default function ServiceDashboardPage() {
</Card.Section>
<Card.Section p="md" py="sm" h={CHART_HEIGHT}>
<HDXMultiSeriesTimeChart
defaultDisplayType="stacked_bar"
config={{
dateRange,
granularity: convertDateRangeToGranularityString(
dateRange,
60,
),
displayType: 'stacked_bar',
series: [
{
displayName: 'Total Query Count',
Expand Down Expand Up @@ -607,14 +607,14 @@ export default function ServiceDashboardPage() {
</Card.Section>
<Card.Section p="md" py="sm" h={CHART_HEIGHT}>
<HDXMultiSeriesTimeChart
defaultDisplayType="stacked_bar"
config={{
dateRange,
granularity: convertDateRangeToGranularityString(
dateRange,
60,
),
seriesReturnType: 'column',
displayType: 'stacked_bar',
series: [
{
type: 'time',
Expand Down Expand Up @@ -818,10 +818,10 @@ function RequestErrorRateCard({
<Card.Section p="md" py="sm" h={CHART_HEIGHT}>
<HDXMultiSeriesTimeChart
key={chartType}
defaultDisplayType={chartType === 'overall' ? 'line' : 'stacked_bar'}
config={{
dateRange,
granularity: convertDateRangeToGranularityString(dateRange, 60),
displayType: chartType === 'overall' ? 'line' : 'stacked_bar',
series: [
{
displayName: 'Error Rate %',
Expand Down
1 change: 1 addition & 0 deletions packages/app/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,7 @@ export type TimeChartSeries = {
groupBy: string[];
numberFormat?: NumberFormat;
color?: string;
displayType?: 'stacked_bar' | 'line';
};

export type TableChartSeries = {
Expand Down

0 comments on commit 9a80955

Please sign in to comment.