Skip to content

Commit

Permalink
feat(Charts): Add scatter type
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevinFabre-ods
KevinFabre-ods committed Sep 18, 2023
1 parent 387d693 commit 0c260e2
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 123 deletions.
135 changes: 35 additions & 100 deletions packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -713,10 +713,10 @@ ColumnChartStackedGroups.args = ColumnChartStackedGroupsArgs;
function generateUniformDistribution(n:number, xRange = [0, 1], yRange = [0, 1]) {
const points = [];
for (let i = 0; i < n; i++) {
points.push({
x: xRange[0] + Math.random() * (xRange[1] - xRange[0]),
y: yRange[0] + Math.random() * (yRange[1] - yRange[0])
});
const x = 1 + xRange[0] + Math.random() * (xRange[1] - xRange[0]);
const y = 1 + yRange[0] + Math.random() * (yRange[1] - yRange[0]);

points.push({label:`id-${i}`, x, y});
}
return points;
}
Expand All @@ -733,35 +733,34 @@ const ScatterPlotChartArgs: Props<DataFrame, ChartOptions> = {
series: [
{
type: ChartSeriesType.Scatter,
label: "Serie 1",
valueColumn:"x",
indexAxis:"y",
label:"Group 1",
pointRadius: 5,
hitRadius: 5,
pointHoverRadius: 4,
backgroundColor: 'rgba(255, 0, 0, .5)',
dataLabels:{
display:false
}
backgroundColor: COLORS.blue,
},
],
legend: {
display: true,
},
axis: {
x: {
display: true,
type: 'linear',
title: {
display: true,
text: "Horizontal axis"
},
beginAtZero: true,
},
y: {
display: true,
},
assemblage: {
stacked: false,
percentaged: false,
title: {
display: true,
text: "Vertical axis"
},
type: 'linear',
beginAtZero: true,
},
},
title: {
text: 'test with gap',
text: 'Scatterplot Chart',
},
},
};
Expand All @@ -780,8 +779,9 @@ function generateNormalDistribution(n: number, xMean = 0, xStdDev = 1, yMean = 0
const points = [];
for (let i = 0; i < n; i++) {
points.push({
label: `id-${i}`,
x: randomNormal(xMean, xStdDev),
y: randomNormal(yMean, yStdDev)
y: randomNormal(yMean, yStdDev),
});
}
return points;
Expand All @@ -792,105 +792,40 @@ export const ScatterplotNormalDistribChart = ChartTemplate.bind({});
const ScatterplotNormalDistribChartArgs: Props<DataFrame, ChartOptions> = {
data: {
loading: false,
value: generateNormalDistribution(10000, 5, 2, 5, 2),
value: generateNormalDistribution(1000, 5, 2, 5, 2),
},
options: {
labelColumn: 'label',
series: [
{
label: "Serie 1",
type: ChartSeriesType.Scatter,
valueColumn:"x",
indexAxis:"y",
label:"Group 1",
pointRadius: .08,
hitRadius: 5,
pointHoverRadius: 4,
pointBorderColor: "#00000000",
backgroundColor: 'rgba(255, 0, 0)',
dataLabels:{
display:false
}
backgroundColor: COLORS.blue,
},
],
legend: {
display: true,
},
axis: {
x: {
display: true,
title: {
display: true,
text: "Horizontal axis"
},
beginAtZero: true
},
y: {
display: true,
},
assemblage: {
stacked: false,
percentaged: false,
title: {
display: true,
text: "Vertical axis"
},
beginAtZero: true
},
},
title: {
text: 'test with gap',
text: 'Scatterplot Chart - Normal distribution',
},
},
};
ScatterplotNormalDistribChart.args = ScatterplotNormalDistribChartArgs;

function randomExponential(lambda :number) {
return -Math.log(1.0 - Math.random()) / lambda;
}

function generateExponentialDistribution(n :number, lambda = 1, yRange = [0, 1]) {
const points = [];
for (let i = 0; i < n; i++) {
points.push({
x: randomExponential(lambda),
y: yRange[0] + Math.random() * (yRange[1] - yRange[0])
});
}
return points;
}

export const ScatterplotExponentialDistribChart = ChartTemplate.bind({});
const ScatterplotExponentialDistribChartArgs: Props<DataFrame, ChartOptions> = {
data: {
loading: false,
value: generateExponentialDistribution(1000, 10, [0, 10]),
},
options: {
labelColumn: 'label',
series: [
{
type: ChartSeriesType.Scatter,
valueColumn:"x",
indexAxis:"y",
label:"Group 1",
pointRadius: 5,
hitRadius: 5,
pointBorderColor: "#000000",
pointHoverRadius: 4,
backgroundColor: 'rgba(255, 0, 0, .5)',
dataLabels:{
display:false
}
},
],
legend: {
display: true,
},
axis: {
x: {
display: true,
},
y: {
display: true,
},
assemblage: {
stacked: false,
percentaged: false,
},
},
title: {
text: 'test with gap',
},
},
};
ScatterplotExponentialDistribChart.args = ScatterplotExponentialDistribChartArgs;
7 changes: 5 additions & 2 deletions packages/visualizations/src/components/Chart/Chart.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,11 @@
return `${dataFrame[dataIndex].x}: ${format(parsed)}`;
}
if (seriesType === ChartSeriesType.Scatter) {
prefix= `${label} `
return prefix + `(x: ${format(parsed.x)} | y: ${format(parsed.y)})` + suffix;
const formattedValues = `${format(parsed.x)}, ${format(parsed.y)}`;
// e.g. dataset 1: (4.5, 54)
if (prefix) return `${prefix}(${formattedValues})`;
// 4.5, 54
return formattedValues;
}
}
Expand Down
14 changes: 7 additions & 7 deletions packages/visualizations/src/components/Chart/datasets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,14 @@ export default function toDataset(df: DataFrame, s: ChartSeries): ChartDataset {
if (s.type === 'scatter') {
return {
type: 'scatter',
label:s.label,
data: df.map((entry) => ({x: entry[s.indexAxis],y : entry[s.valueColumn]})),
backgroundColor: s.backgroundColor,
label: defaultValue(s.label, ''),
data: df.map((entry) => ({ x: entry[s.indexAxis], y: entry[s.valueColumn] })),
datalabels: chartJsDataLabels(s.dataLabels),
pointRadius: defaultValue(s.pointRadius, 4),
pointHitRadius: defaultValue(s.hitRadius, 4.5),
pointBorderColor: defaultValue(s.pointBorderColor,'rgba(255,255,255,0)'),
pointHoverRadius:defaultValue(s.pointHoverRadius, 4),
backgroundColor: singleChartJsColor(s.backgroundColor),
pointRadius: defaultValue(s.pointRadius, 5),
pointHitRadius: defaultValue(s.pointHitRadius, 5),
pointHoverRadius: defaultValue(s.pointHoverRadius, 5),
pointBorderColor: defaultValue(s.pointBorderColor, 'rgba(255,255,255, 0)'),
};
}
throw new Error('Unknown chart type');
Expand Down
9 changes: 7 additions & 2 deletions packages/visualizations/src/components/Chart/scales.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,9 @@ export default function buildScales(options: ChartOptions): ChartJsChartOptions[
// X Axis
if (options.axis?.x) {
scales.x = {
...(options.axis.x.type === 'linear' && isBoolean(options.axis.x?.beginAtZero) && {beginAtZero: options.axis.x?.beginAtZero}),
...(options.axis.x.type === 'linear' && {
beginAtZero: defaultValue(options?.axis?.x?.beginAtZero, false),
}),
stacked: options.axis?.assemblage?.stacked,
max:
options?.axis?.x?.type === 'linear' && options.axis?.assemblage?.percentaged
Expand Down Expand Up @@ -132,7 +134,10 @@ export default function buildScales(options: ChartOptions): ChartJsChartOptions[
// Y Axis
if (options.axis?.y) {
scales.y = {
...(options.axis.y.type === 'linear' && isBoolean(options.axis.y?.beginAtZero) && {beginAtZero: options.axis.y?.beginAtZero}),
...(options.axis.y.type === 'linear' &&
isBoolean(options.axis.y?.beginAtZero) && {
beginAtZero: options.axis.y?.beginAtZero,
}),
stacked: options.axis?.assemblage?.stacked,
max:
options?.axis?.y?.type === 'linear' && options.axis?.assemblage?.percentaged
Expand Down
14 changes: 4 additions & 10 deletions packages/visualizations/src/components/Chart/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,19 +224,13 @@ export interface Scatter {
valueColumn: string;
label?: string;
indexAxis: string;
/** Point color */
backgroundColor?: Color | Color[];
borderColor?: Color | Color[];
fill?: FillConfiguration;
dataLabels?: DataLabelsConfiguration;
tension?: number;
pointRadius?: number;
hitRadius?:number;
pointHoverRadius:number;
pointHitRadius?: number;
pointHoverRadius?: number;
pointBorderColor?: string;
pointBackgroundColor?: Color | Color[];
borderWidth?: number;
borderDash?: number[];
spanGaps?: boolean | number;
dataLabels?: DataLabelsConfiguration;
}

export type FillMode = false | number | string | { value: number };
Expand Down
2 changes: 1 addition & 1 deletion packages/visualizations/src/components/utils/formatter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function defaultCompactLegendNumberFormat(value: number): string {
}

export function assureMaxLength(value: string, maxLength: number) {
if (value && value.length > maxLength) {
if (value.length > maxLength) {
return `${value.substring(0, maxLength)}...`;
}
return value;
Expand Down
2 changes: 1 addition & 1 deletion packages/visualizations/src/components/utils/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,4 @@ export function generateId() {
return Math.random().toString(36).substring(2);
}

export const isBoolean = (val : unknown) => typeof val === 'boolean';
export const isBoolean = (val: unknown) => typeof val === 'boolean';

0 comments on commit 0c260e2

Please sign in to comment.