mirror of https://github.com/buster-so/buster.git
update options for chart
This commit is contained in:
parent
ecea190a40
commit
b7b93e7ebe
|
@ -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(() => {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
Loading…
Reference in New Issue