[feat,LineChart][s]: support for multiple series
This commit is contained in:
Ola Rubaj
parent
f86f0541eb
commit
72f78387ce
5
.changeset/little-ways-refuse.md
Normal file
5
.changeset/little-ways-refuse.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
'@portaljs/components': minor
|
||||
---
|
||||
|
||||
Support for plotting multiple series in LineChart component.
|
||||
@ -8,86 +8,106 @@ 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;
|
||||
yAxisType?: AxisType;
|
||||
fullWidth?: boolean;
|
||||
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',
|
||||
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' });
|
||||
// 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,
|
||||
selection: {
|
||||
grid: {
|
||||
type: 'interval',
|
||||
bind: 'scales',
|
||||
},
|
||||
},
|
||||
encoding: {
|
||||
x: {
|
||||
field: xAxis,
|
||||
timeUnit: xAxisTimeUnit,
|
||||
type: xAxisType,
|
||||
},
|
||||
y: {
|
||||
field: yAxis,
|
||||
type: yAxisType,
|
||||
},
|
||||
},
|
||||
} as any;
|
||||
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);
|
||||
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);
|
||||
});
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
var vegaData = {};
|
||||
if (values) {
|
||||
vegaData = { table: values };
|
||||
}
|
||||
}, []);
|
||||
|
||||
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} />
|
||||
);
|
||||
return isLoading ? (
|
||||
<div className="w-full flex items-center justify-center w-[600px] h-[300px]">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
) : (
|
||||
<VegaLite data={vegaData} spec={spec} />
|
||||
);
|
||||
}
|
||||
|
||||
@ -30,11 +30,14 @@ Must be an object with one of the following properties: `url` or `values` \n\n \
|
||||
},
|
||||
yAxis: {
|
||||
description:
|
||||
'Name of the column header or object property that represents the Y-axis on the data.',
|
||||
'Name of the column headers or object properties that represent the Y-axis on the data.',
|
||||
},
|
||||
yAxisType: {
|
||||
description: 'Type of the Y-axis',
|
||||
},
|
||||
symbol: {
|
||||
description: 'Name of the column header or object property that represents a series for multiple series.',
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
@ -60,6 +63,52 @@ export const FromDataPoints: Story = {
|
||||
},
|
||||
};
|
||||
|
||||
export const MultiSeries: Story = {
|
||||
name: 'Line chart with multiple series (specifying symbol)',
|
||||
args: {
|
||||
data: {
|
||||
values: [
|
||||
{ year: '1850', value: -0.41765878, z: 'A' },
|
||||
{ year: '1851', value: -0.2333498, z: 'A' },
|
||||
{ year: '1852', value: -0.22939907, z: 'A' },
|
||||
{ year: '1853', value: -0.27035445, z: 'A' },
|
||||
{ year: '1854', value: -0.29163003, z: 'A' },
|
||||
{ year: '1850', value: -0.42993882, z: 'B' },
|
||||
{ year: '1851', value: -0.30365549, z: 'B' },
|
||||
{ year: '1852', value: -0.27905189, z: 'B' },
|
||||
{ year: '1853', value: -0.22939704, z: 'B' },
|
||||
{ year: '1854', value: -0.25688013, z: 'B' },
|
||||
{ year: '1850', value: -0.4757164, z: 'C' },
|
||||
{ year: '1851', value: -0.41971018, z: 'C' },
|
||||
{ year: '1852', value: -0.40724799, z: 'C' },
|
||||
{ year: '1853', value: -0.45049156, z: 'C' },
|
||||
{ year: '1854', value: -0.41896583, z: 'C' },
|
||||
],
|
||||
},
|
||||
xAxis: 'year',
|
||||
yAxis: 'value',
|
||||
symbol: 'z',
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
export const MultiColumns: Story = {
|
||||
name: 'Line chart with multiple series (with multiple columns)',
|
||||
args: {
|
||||
data: {
|
||||
values: [
|
||||
{ year: '1850', A: -0.41765878, B: -0.42993882, C: -0.4757164 },
|
||||
{ year: '1851', A: -0.2333498, B: -0.30365549, C: -0.41971018 },
|
||||
{ year: '1852', A: -0.22939907, B: -0.27905189, C: -0.40724799 },
|
||||
{ year: '1853', A: -0.27035445, B: -0.22939704, C: -0.45049156 },
|
||||
{ year: '1854', A: -0.29163003, B: -0.25688013, C: -0.41896583 },
|
||||
],
|
||||
},
|
||||
xAxis: 'year',
|
||||
yAxis: ['A', 'B', 'C']
|
||||
},
|
||||
};
|
||||
|
||||
export const FromURL: Story = {
|
||||
name: 'Line chart from URL',
|
||||
args: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user