mirror of https://github.com/buster-so/buster.git
size works with scatter charts
This commit is contained in:
parent
f32d88a206
commit
d284e55dec
|
@ -286,7 +286,7 @@ const setGlobalRotation = (context: Context) => {
|
|||
});
|
||||
|
||||
const labelNeedsToBeRotated = labels.some((label) => {
|
||||
if (!label) return false;
|
||||
if (!label && !!context.chart.ctx.measureText) return false;
|
||||
const { width: textWidth } = context.chart.ctx.measureText(label);
|
||||
const { barWidth, barHeight } = getBarDimensions(context);
|
||||
return textWidth > barWidth - TEXT_WIDTH_BUFFER;
|
||||
|
|
|
@ -71,6 +71,7 @@ const radiusMethod = (
|
|||
) => {
|
||||
//@ts-ignore
|
||||
const originalR = context.raw?.originalR;
|
||||
|
||||
if (typeof originalR === 'number' && sizeKeyIndex) {
|
||||
return computeSizeRatio(
|
||||
originalR,
|
||||
|
|
|
@ -5,7 +5,7 @@ import type {
|
|||
ChartType,
|
||||
ScatterAxis
|
||||
} from '@/api/asset_interfaces/metric/charts';
|
||||
import { DatasetOption } from '../../../chartHooks';
|
||||
import { DatasetOption, extractFieldsFromChain } from '../../../chartHooks';
|
||||
import { ChartProps } from '../../core';
|
||||
import type { ChartType as ChartJSChartType } from 'chart.js';
|
||||
import { useMemo } from 'react';
|
||||
|
@ -88,12 +88,23 @@ export const useSeriesOptions = ({
|
|||
return null;
|
||||
}
|
||||
const size = sizeKey[0];
|
||||
const index = selectedDataset.dimensions.findIndex((dimension) => dimension === size);
|
||||
const index = selectedDataset.dimensions.findIndex((dimension) => {
|
||||
const chain = extractFieldsFromChain(dimension);
|
||||
return chain.some((item) => item.key === size);
|
||||
});
|
||||
if (index === -1) return null;
|
||||
|
||||
const assosciatedColumnMetadata = columnMetadata.find((item) => item.name === size);
|
||||
|
||||
if (!assosciatedColumnMetadata) return null;
|
||||
if (!assosciatedColumnMetadata) {
|
||||
console.warn(`Column metadata not found for size key: ${size}`);
|
||||
return {
|
||||
name: size,
|
||||
index,
|
||||
minValue: 0,
|
||||
maxValue: 10
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
name: size,
|
||||
|
|
|
@ -118,3 +118,30 @@ export const LargeDataset: Story = {
|
|||
);
|
||||
}
|
||||
};
|
||||
|
||||
export const WithSize: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
data: Array.from({ length: 5 }, (x, index) => ({
|
||||
x: index,
|
||||
y: index,
|
||||
size: index,
|
||||
category: 'Electronics'
|
||||
})),
|
||||
scatterAxis: {
|
||||
x: ['x'],
|
||||
y: ['y'],
|
||||
size: ['size']
|
||||
},
|
||||
columnMetadata: [
|
||||
{
|
||||
name: 'size',
|
||||
min_value: 0,
|
||||
max_value: 5,
|
||||
unique_values: 3,
|
||||
simple_type: 'number',
|
||||
type: 'number'
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
@ -19,9 +19,9 @@ export default meta;
|
|||
type Story = StoryObj<typeof Select>;
|
||||
|
||||
const basicItems = [
|
||||
{ value: 'option1', label: 'Option 1' },
|
||||
{ value: 'option2', label: 'Option 2' },
|
||||
{ value: 'option3', label: 'Option 3' }
|
||||
{ value: 'apples', label: 'Apples' },
|
||||
{ value: 'bananas', label: 'Bananas' },
|
||||
{ value: 'cherries', label: 'Cherries' }
|
||||
];
|
||||
|
||||
const itemsWithIcons = [
|
||||
|
|
Loading…
Reference in New Issue