update options for chart

This commit is contained in:
Nate Kelley 2025-09-15 18:06:34 -06:00
parent ecea190a40
commit b7b93e7ebe
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
6 changed files with 41 additions and 8 deletions

View File

@ -128,6 +128,7 @@ export const useOptions = ({
yAxisShowAxisLabel, yAxisShowAxisLabel,
yAxisScaleType, yAxisScaleType,
gridLines, gridLines,
columnSettings,
}); });
const y2Axis = useY2Axis({ const y2Axis = useY2Axis({
@ -139,6 +140,7 @@ export const useOptions = ({
y2AxisShowAxisLabel, y2AxisShowAxisLabel,
y2AxisScaleType, y2AxisScaleType,
y2AxisStartAxisAtZero, y2AxisStartAxisAtZero,
columnMetadata,
}); });
const isHorizontalBar = useMemo(() => { const isHorizontalBar = useMemo(() => {

View File

@ -35,6 +35,7 @@ export const useY2Axis = ({
y2AxisShowAxisLabel: BusterChartProps['y2AxisShowAxisLabel']; y2AxisShowAxisLabel: BusterChartProps['y2AxisShowAxisLabel'];
y2AxisStartAxisAtZero: BusterChartProps['y2AxisStartAxisAtZero']; y2AxisStartAxisAtZero: BusterChartProps['y2AxisStartAxisAtZero'];
y2AxisScaleType: BusterChartProps['y2AxisScaleType']; y2AxisScaleType: BusterChartProps['y2AxisScaleType'];
columnMetadata: NonNullable<BusterChartProps['columnMetadata']>;
}): DeepPartial<ScaleChartOptions<'bar'>['scales']['y2']> | undefined => { }): DeepPartial<ScaleChartOptions<'bar'>['scales']['y2']> | undefined => {
const selectedAxis = selectedAxisProp as ComboChartAxis; const selectedAxis = selectedAxisProp as ComboChartAxis;
const y2AxisKeys = selectedAxis.y2 || []; const y2AxisKeys = selectedAxis.y2 || [];
@ -91,7 +92,7 @@ export const useY2Axis = ({
display: false, display: false,
}; };
return { const baseConfig = {
type, type,
position: 'right', position: 'right',
display: y2AxisShowAxisLabel !== false && y2AxisKeys.length > 0, display: y2AxisShowAxisLabel !== false && y2AxisKeys.length > 0,
@ -104,11 +105,14 @@ export const useY2Axis = ({
count: DEFAULT_Y2_AXIS_COUNT, count: DEFAULT_Y2_AXIS_COUNT,
autoSkip: true, autoSkip: true,
callback: tickCallback, callback: tickCallback,
includeBounds: true,
}, },
grid: { grid: {
drawOnChartArea: false, // only want the grid lines for one axis to show up drawOnChartArea: false, // only want the grid lines for one axis to show up
}, },
} as DeepPartial<ScaleChartOptions<'bar'>['scales']['y2']>; } as DeepPartial<ScaleChartOptions<'bar'>['scales']['y2']>;
return baseConfig;
}, [ }, [
tickCallback, tickCallback,
title, title,

View File

@ -5,6 +5,7 @@ import {
type ColumnLabelFormat, type ColumnLabelFormat,
type ComboChartAxis, type ComboChartAxis,
DEFAULT_COLUMN_LABEL_FORMAT, DEFAULT_COLUMN_LABEL_FORMAT,
DEFAULT_COLUMN_SETTINGS,
} from '@buster/server-shared/metrics'; } from '@buster/server-shared/metrics';
import type { GridLineOptions, Scale, ScaleChartOptions } from 'chart.js'; import type { GridLineOptions, Scale, ScaleChartOptions } from 'chart.js';
import { useMemo } from 'react'; import { useMemo } from 'react';
@ -28,6 +29,8 @@ export const useYAxis = ({
yAxisStartAxisAtZero, yAxisStartAxisAtZero,
yAxisScaleType, yAxisScaleType,
gridLines, gridLines,
columnMetadata,
columnSettings,
}: { }: {
columnLabelFormats: NonNullable<ChartConfigProps['columnLabelFormats']>; columnLabelFormats: NonNullable<ChartConfigProps['columnLabelFormats']>;
selectedAxis: ChartEncodes; selectedAxis: ChartEncodes;
@ -40,11 +43,25 @@ export const useYAxis = ({
yAxisShowAxisLabel: BusterChartProps['yAxisShowAxisLabel']; yAxisShowAxisLabel: BusterChartProps['yAxisShowAxisLabel'];
yAxisStartAxisAtZero: BusterChartProps['yAxisStartAxisAtZero']; yAxisStartAxisAtZero: BusterChartProps['yAxisStartAxisAtZero'];
yAxisScaleType: BusterChartProps['yAxisScaleType']; yAxisScaleType: BusterChartProps['yAxisScaleType'];
columnSettings: NonNullable<BusterChartProps['columnSettings']>;
gridLines: BusterChartProps['gridLines']; gridLines: BusterChartProps['gridLines'];
}): DeepPartial<ScaleChartOptions<'bar'>['scales']['y']> | undefined => { }): DeepPartial<ScaleChartOptions<'bar'>['scales']['y']> | undefined => {
const yAxisKeys = selectedAxis.y; const yAxisKeys = selectedAxis.y;
const hasY2Axis = (selectedAxis as ComboChartAxis)?.y2?.length > 0; const hasY2Axis = (selectedAxis as ComboChartAxis)?.y2?.length > 0;
const useMinValue = useMemo(() => {
if (!hasY2Axis) return false;
if (selectedChartType !== 'combo') return false;
if (!columnMetadata) return false;
return columnMetadata?.some((column) => {
return (
yAxisKeys.includes(column.name) &&
(columnSettings[column.name]?.columnVisualization ||
DEFAULT_COLUMN_SETTINGS.columnVisualization) === 'bar'
);
});
}, [hasY2Axis, yAxisKeys, selectedChartType]);
const isSupportedType = useMemo(() => { const isSupportedType = useMemo(() => {
return selectedChartType !== 'pie'; return selectedChartType !== 'pie';
}, [selectedChartType]); }, [selectedChartType]);
@ -112,7 +129,7 @@ export const useYAxis = ({
useMemo(() => { useMemo(() => {
if (!isSupportedType) return undefined; if (!isSupportedType) return undefined;
return { const baseConfig = {
type, type,
grid, grid,
max: usePercentageModeAxis ? 100 : undefined, max: usePercentageModeAxis ? 100 : undefined,
@ -125,12 +142,16 @@ export const useYAxis = ({
ticks: { ticks: {
display: yAxisShowAxisLabel, display: yAxisShowAxisLabel,
callback: tickCallback, callback: tickCallback,
count: hasY2Axis ? DEFAULT_Y2_AXIS_COUNT : undefined, count: useMinValue ? DEFAULT_Y2_AXIS_COUNT : undefined,
includeBounds: true,
}, },
min: useMinValue ? 0 : undefined,
border: { border: {
display: yAxisShowAxisLabel, display: yAxisShowAxisLabel,
}, },
} as DeepPartial<ScaleChartOptions<'bar'>['scales']['y']>; } as DeepPartial<ScaleChartOptions<'bar'>['scales']['y']>;
return baseConfig;
}, [ }, [
tickCallback, tickCallback,
type, type,

View File

@ -1187,6 +1187,14 @@ export const ComboChartWithNegativeNumbers: Story = {
}, },
{ {
name: 'revenue', name: 'revenue',
min_value: '-1039.47',
max_value: '780212.37',
unique_values: 13,
simple_type: 'text',
type: 'text',
},
{
name: 'non_revenue',
min_value: '-17040.32', min_value: '-17040.32',
max_value: '97699.16', max_value: '97699.16',
unique_values: 13, unique_values: 13,

View File

@ -66,12 +66,10 @@
"packageManager": "pnpm@10.15.1", "packageManager": "pnpm@10.15.1",
"pnpm": { "pnpm": {
"peerDependencyRules": { "peerDependencyRules": {
"ignoreMissing": [ "ignoreMissing": ["shiki"],
"shiki"
],
"allowedVersions": { "allowedVersions": {
"shiki": "3" "shiki": "3"
} }
} }
} }
} }

View File

@ -1,5 +1,5 @@
import { and, eq, isNull } from 'drizzle-orm'; import { and, eq, isNull } from 'drizzle-orm';
import { type InferSelectModel } from 'drizzle-orm'; import type { InferSelectModel } from 'drizzle-orm';
import { z } from 'zod'; import { z } from 'zod';
import { db } from '../../connection'; import { db } from '../../connection';
import { reportFiles } from '../../schema'; import { reportFiles } from '../../schema';