diff --git a/packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx b/packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx index 0e44e86f..81765174 100644 --- a/packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx +++ b/packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx @@ -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; } @@ -733,35 +733,34 @@ const ScatterPlotChartArgs: Props = { 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', }, }, }; @@ -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; @@ -792,105 +792,40 @@ export const ScatterplotNormalDistribChart = ChartTemplate.bind({}); const ScatterplotNormalDistribChartArgs: Props = { 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 = { - 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; diff --git a/packages/visualizations/src/components/Chart/Chart.svelte b/packages/visualizations/src/components/Chart/Chart.svelte index 2fab146c..c5c38567 100644 --- a/packages/visualizations/src/components/Chart/Chart.svelte +++ b/packages/visualizations/src/components/Chart/Chart.svelte @@ -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; } } diff --git a/packages/visualizations/src/components/Chart/datasets.ts b/packages/visualizations/src/components/Chart/datasets.ts index 4c82c6cb..b611e1de 100644 --- a/packages/visualizations/src/components/Chart/datasets.ts +++ b/packages/visualizations/src/components/Chart/datasets.ts @@ -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'); diff --git a/packages/visualizations/src/components/Chart/scales.ts b/packages/visualizations/src/components/Chart/scales.ts index 882c5fe8..8d8a818a 100644 --- a/packages/visualizations/src/components/Chart/scales.ts +++ b/packages/visualizations/src/components/Chart/scales.ts @@ -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 @@ -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 diff --git a/packages/visualizations/src/components/Chart/types.ts b/packages/visualizations/src/components/Chart/types.ts index e72a8a54..349a87c9 100644 --- a/packages/visualizations/src/components/Chart/types.ts +++ b/packages/visualizations/src/components/Chart/types.ts @@ -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 }; diff --git a/packages/visualizations/src/components/utils/formatter.ts b/packages/visualizations/src/components/utils/formatter.ts index f601c3d1..743e16bb 100644 --- a/packages/visualizations/src/components/utils/formatter.ts +++ b/packages/visualizations/src/components/utils/formatter.ts @@ -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; diff --git a/packages/visualizations/src/components/utils/index.ts b/packages/visualizations/src/components/utils/index.ts index 4494d206..21bd1230 100644 --- a/packages/visualizations/src/components/utils/index.ts +++ b/packages/visualizations/src/components/utils/index.ts @@ -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';