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
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 ... type TimeUnit = 'year' | undefined; // or ...
export type LineChartProps = { export type LineChartProps = {
data: Omit<Data, 'csv'>; data: Omit<Data, 'csv'>;
title?: string; title?: string;
xAxis: string; xAxis: string;
xAxisType?: AxisType; xAxisType?: AxisType;
xAxisTimeUnit?: TimeUnit; xAxisTimeUnit?: TimeUnit;
yAxis: string | string[]; yAxis: string | string[];
yAxisType?: AxisType; yAxisType?: AxisType;
fullWidth?: boolean; fullWidth?: boolean;
symbol?: string; symbol?: string;
}; };
export function LineChart({ export function LineChart({
data, data,
title = '', title = '',
xAxis, xAxis,
xAxisType = 'temporal', xAxisType = 'temporal',
xAxisTimeUnit = 'year', // TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes xAxisTimeUnit = 'year', // TODO: defaults to undefined would probably work better... keeping it as it's for compatibility purposes
yAxis, yAxis,
yAxisType = 'quantitative', yAxisType = 'quantitative',
symbol, symbol,
}: LineChartProps) { }: LineChartProps) {
const url = data.url; const url = data.url;
const values = data.values; const values = data.values;
const [isLoading, setIsLoading] = useState<boolean>(false); const [isLoading, setIsLoading] = useState<boolean>(false);
// By default, assumes data is an Array... // By default, assumes data is an Array...
const [specData, setSpecData] = useState<any>({ name: 'table' }); const [specData, setSpecData] = useState<any>({ name: 'table' });
const isMultiYAxis = Array.isArray(yAxis); const isMultiYAxis = Array.isArray(yAxis);
const spec = { const spec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json', $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
title, title,
width: 'container', width: 'container',
height: 300, height: 300,
mark: { mark: {
type: 'line', type: 'line',
color: 'black', color: 'black',
strokeWidth: 1, strokeWidth: 1,
tooltip: true, tooltip: true,
}, },
data: specData, data: specData,
...(isMultiYAxis ? { ...(isMultiYAxis
transform: [ ? {
{ fold: yAxis, as: ['key', 'value'] } 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);
});
} }
}, []); : {}),
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 = {}; useEffect(() => {
if (values) { if (url) {
vegaData = { table: values }; 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 ? ( var vegaData = {};
<div className="w-full flex items-center justify-center w-[600px] h-[300px]"> if (values) {
<LoadingSpinner /> vegaData = { table: values };
</div> }
) : (
<VegaLite data={vegaData} spec={spec} /> 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', description: 'Type of the Y-axis',
}, },
symbol: { 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 = { export const MultiColumns: Story = {
name: 'Line chart with multiple series (with multiple columns)', name: 'Line chart with multiple series (with multiple columns)',
args: { args: {
@@ -105,7 +105,7 @@ export const MultiColumns: Story = {
], ],
}, },
xAxis: 'year', xAxis: 'year',
yAxis: ['A', 'B', 'C'] yAxis: ['A', 'B', 'C'],
}, },
}; };