From b7b93e7ebe0f6bf6144592f0b777a4cce009b8fe Mon Sep 17 00:00:00 2001 From: Nate Kelley Date: Mon, 15 Sep 2025 18:06:34 -0600 Subject: [PATCH] update options for chart --- .../hooks/useOptions/useOptions.tsx | 2 ++ .../hooks/useOptions/useY2Axis.ts | 6 ++++- .../hooks/useOptions/useYAxis.ts | 25 +++++++++++++++++-- .../BusterChart.ComboChart.stories.tsx | 8 ++++++ package.json | 6 ++--- .../queries/reports/get-report-metadata.ts | 2 +- 6 files changed, 41 insertions(+), 8 deletions(-) diff --git a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx index 176454070..9e62e6874 100644 --- a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx +++ b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useOptions.tsx @@ -128,6 +128,7 @@ export const useOptions = ({ yAxisShowAxisLabel, yAxisScaleType, gridLines, + columnSettings, }); const y2Axis = useY2Axis({ @@ -139,6 +140,7 @@ export const useOptions = ({ y2AxisShowAxisLabel, y2AxisScaleType, y2AxisStartAxisAtZero, + columnMetadata, }); const isHorizontalBar = useMemo(() => { diff --git a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useY2Axis.ts b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useY2Axis.ts index 1b5fac5f6..1b0a5aa94 100644 --- a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useY2Axis.ts +++ b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useY2Axis.ts @@ -35,6 +35,7 @@ export const useY2Axis = ({ y2AxisShowAxisLabel: BusterChartProps['y2AxisShowAxisLabel']; y2AxisStartAxisAtZero: BusterChartProps['y2AxisStartAxisAtZero']; y2AxisScaleType: BusterChartProps['y2AxisScaleType']; + columnMetadata: NonNullable; }): DeepPartial['scales']['y2']> | undefined => { const selectedAxis = selectedAxisProp as ComboChartAxis; const y2AxisKeys = selectedAxis.y2 || []; @@ -91,7 +92,7 @@ export const useY2Axis = ({ display: false, }; - return { + const baseConfig = { type, position: 'right', display: y2AxisShowAxisLabel !== false && y2AxisKeys.length > 0, @@ -104,11 +105,14 @@ export const useY2Axis = ({ count: DEFAULT_Y2_AXIS_COUNT, autoSkip: true, callback: tickCallback, + includeBounds: true, }, grid: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, } as DeepPartial['scales']['y2']>; + + return baseConfig; }, [ tickCallback, title, diff --git a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useYAxis.ts b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useYAxis.ts index 7309ee72a..082fd9486 100644 --- a/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useYAxis.ts +++ b/apps/web/src/components/ui/charts/BusterChartJS/hooks/useOptions/useYAxis.ts @@ -5,6 +5,7 @@ import { type ColumnLabelFormat, type ComboChartAxis, DEFAULT_COLUMN_LABEL_FORMAT, + DEFAULT_COLUMN_SETTINGS, } from '@buster/server-shared/metrics'; import type { GridLineOptions, Scale, ScaleChartOptions } from 'chart.js'; import { useMemo } from 'react'; @@ -28,6 +29,8 @@ export const useYAxis = ({ yAxisStartAxisAtZero, yAxisScaleType, gridLines, + columnMetadata, + columnSettings, }: { columnLabelFormats: NonNullable; selectedAxis: ChartEncodes; @@ -40,11 +43,25 @@ export const useYAxis = ({ yAxisShowAxisLabel: BusterChartProps['yAxisShowAxisLabel']; yAxisStartAxisAtZero: BusterChartProps['yAxisStartAxisAtZero']; yAxisScaleType: BusterChartProps['yAxisScaleType']; + columnSettings: NonNullable; gridLines: BusterChartProps['gridLines']; }): DeepPartial['scales']['y']> | undefined => { const yAxisKeys = selectedAxis.y; 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(() => { return selectedChartType !== 'pie'; }, [selectedChartType]); @@ -112,7 +129,7 @@ export const useYAxis = ({ useMemo(() => { if (!isSupportedType) return undefined; - return { + const baseConfig = { type, grid, max: usePercentageModeAxis ? 100 : undefined, @@ -125,12 +142,16 @@ export const useYAxis = ({ ticks: { display: yAxisShowAxisLabel, callback: tickCallback, - count: hasY2Axis ? DEFAULT_Y2_AXIS_COUNT : undefined, + count: useMinValue ? DEFAULT_Y2_AXIS_COUNT : undefined, + includeBounds: true, }, + min: useMinValue ? 0 : undefined, border: { display: yAxisShowAxisLabel, }, } as DeepPartial['scales']['y']>; + + return baseConfig; }, [ tickCallback, type, diff --git a/apps/web/src/components/ui/charts/stories/BusterChart.ComboChart.stories.tsx b/apps/web/src/components/ui/charts/stories/BusterChart.ComboChart.stories.tsx index 1bf11ebce..2d1e4e904 100644 --- a/apps/web/src/components/ui/charts/stories/BusterChart.ComboChart.stories.tsx +++ b/apps/web/src/components/ui/charts/stories/BusterChart.ComboChart.stories.tsx @@ -1187,6 +1187,14 @@ export const ComboChartWithNegativeNumbers: Story = { }, { 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', max_value: '97699.16', unique_values: 13, diff --git a/package.json b/package.json index e2a8efbc8..855799fd1 100644 --- a/package.json +++ b/package.json @@ -66,12 +66,10 @@ "packageManager": "pnpm@10.15.1", "pnpm": { "peerDependencyRules": { - "ignoreMissing": [ - "shiki" - ], + "ignoreMissing": ["shiki"], "allowedVersions": { "shiki": "3" } } } -} \ No newline at end of file +} diff --git a/packages/database/src/queries/reports/get-report-metadata.ts b/packages/database/src/queries/reports/get-report-metadata.ts index 3f23ab9b9..45d7f6520 100644 --- a/packages/database/src/queries/reports/get-report-metadata.ts +++ b/packages/database/src/queries/reports/get-report-metadata.ts @@ -1,5 +1,5 @@ import { and, eq, isNull } from 'drizzle-orm'; -import { type InferSelectModel } from 'drizzle-orm'; +import type { InferSelectModel } from 'drizzle-orm'; import { z } from 'zod'; import { db } from '../../connection'; import { reportFiles } from '../../schema';