knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix formatting

Browse Source
This commit is contained in:
Ola Rubaj 2024-10-23 18:00:32 +02:00
parent 72f78387ce
commit 2f56b1bdc8
2 changed files with 100 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
packages/components/src/components/LineChart.tsx
View File

@ -8,106 +8,110 @@ type AxisType = 'quantitative' | 'temporal';
type TimeUnit = 'year' | undefined; // or ...
export type LineChartProps = {
data: Omit<Data, 'csv'>;
title?: string;
xAxis: string;
xAxisType?: AxisType;
xAxisTimeUnit?: TimeUnit;
yAxis: string | string[];
yAxisType?: AxisType;
fullWidth?: boolean;
symbol?: string;
data: Omit<Data, 'csv'>;
title?: string;
xAxis: string;
xAxisType?: AxisType;
xAxisTimeUnit?: TimeUnit;
yAxis: string | string[];
yAxisType?: AxisType;
fullWidth?: boolean;
symbol?: string;
};
export function LineChart({
data,
title = '',
xAxis,
xAxisType = 'temporal',
xAxisTimeUnit = 'year', // TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
yAxis,
yAxisType = 'quantitative',
symbol,
data,
title = '',
xAxis,
xAxisType = 'temporal',
xAxisTimeUnit = 'year', // TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
yAxis,
yAxisType = 'quantitative',
symbol,
}: LineChartProps) {
const url = data.url;
const values = data.values;
const [isLoading, setIsLoading] = useState<boolean>(false);
const url = data.url;
const values = data.values;
const [isLoading, setIsLoading] = useState<boolean>(false);
// By default, assumes data is an Array...
const [specData, setSpecData] = useState<any>({ name: 'table' });
const isMultiYAxis = Array.isArray(yAxis);
// By default, assumes data is an Array...
const [specData, setSpecData] = useState<any>({ name: 'table' });
const isMultiYAxis = Array.isArray(yAxis);
const spec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
title,
width: 'container',
height: 300,
mark: {
type: 'line',
color: 'black',
strokeWidth: 1,
tooltip: true,
},
data: specData,
...(isMultiYAxis ? {
transform: [
{ fold: yAxis, as: ['key', 'value'] }
]
} : {}),
selection: {
grid: {
type: 'interval',
bind: 'scales',
},
},
encoding: {
x: {
field: xAxis,
timeUnit: xAxisTimeUnit,
type: xAxisType,
},
y: {
field: isMultiYAxis ? 'value' : yAxis,
type: yAxisType,
},
...(symbol ? {
color: {
field: symbol,
type: 'nominal'
}
} : {}),
...(isMultiYAxis ? {
color: {
field: 'key',
type: 'nominal'
}
} : {})
},
} as any;
useEffect(() => {
if (url) {
setIsLoading(true);
// Manualy loading the data allows us to do other kinds
// of stuff later e.g. load a file partially
loadData(url).then((res: any) => {
setSpecData({ values: res, format: { type: 'csv' } });
setIsLoading(false);
});
const spec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
title,
width: 'container',
height: 300,
mark: {
type: 'line',
color: 'black',
strokeWidth: 1,
tooltip: true,
},
data: specData,
...(isMultiYAxis
? {
transform: [{ fold: yAxis, as: ['key', 'value'] }],
}
}, []);
: {}),
selection: {
grid: {
type: 'interval',
bind: 'scales',
},
},
encoding: {
x: {
field: xAxis,
timeUnit: xAxisTimeUnit,
type: xAxisType,
},
y: {
field: isMultiYAxis ? 'value' : yAxis,
type: yAxisType,
},
...(symbol
? {
color: {
field: symbol,
type: 'nominal',
},
}
: {}),
...(isMultiYAxis
? {
color: {
field: 'key',
type: 'nominal',
},
}
: {}),
},
} as any;
var vegaData = {};
if (values) {
vegaData = { table: values };
useEffect(() => {
if (url) {
setIsLoading(true);
// Manualy loading the data allows us to do other kinds
// of stuff later e.g. load a file partially
loadData(url).then((res: any) => {
setSpecData({ values: res, format: { type: 'csv' } });
setIsLoading(false);
});
}
}, []);
return isLoading ? (
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
<LoadingSpinner />
</div>
) : (
<VegaLite data={vegaData} spec={spec} />
);
var vegaData = {};
if (values) {
vegaData = { table: values };
}
return isLoading ? (
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
<LoadingSpinner />
</div>
) : (
<VegaLite data={vegaData} spec={spec} />
);
}

8
packages/components/stories/LineChart.stories.ts
View File

@ -36,8 +36,9 @@ Must be an object with one of the following properties: `url` or `values` \n\n \
description: 'Type of the Y-axis',
},
symbol: {
description: 'Name of the column header or object property that represents a series for multiple series.',
}
description:
'Name of the column header or object property that represents a series for multiple series.',
},
},
};
@ -91,7 +92,6 @@ export const MultiSeries: Story = {
},
};
export const MultiColumns: Story = {
name: 'Line chart with multiple series (with multiple columns)',
args: {
@ -105,7 +105,7 @@ export const MultiColumns: Story = {
],
},
xAxis: 'year',
yAxis: ['A', 'B', 'C']
yAxis: ['A', 'B', 'C'],
},
};